
:root{--red:#df0712;--dark:#111214;--muted:#69707a;--light:#f4f5f7;--border:#e2e4e8}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;color:#17191c;background:#fff}
a{text-decoration:none;color:inherit}.container{width:min(1180px,92%);margin:auto}
.topline{background:#090a0b;color:#fff;font-size:13px}.topline .container{display:flex;justify-content:space-between;align-items:center;min-height:38px;gap:15px}
.navbar{position:sticky;top:0;z-index:20;background:#151618;color:#fff;box-shadow:0 3px 16px #0003}.navwrap{display:flex;align-items:center;min-height:78px;gap:28px}.brand img{width:190px;display:block}
.navlinks{display:flex;gap:26px;margin-left:auto;align-items:center}.navlinks a{font-weight:700;font-size:14px}.navlinks a:hover{color:#ff434b}
.lang{background:#25272a;border:1px solid #42454a;color:#fff;border-radius:6px;padding:8px}
.hero{background:linear-gradient(90deg,#070707 0%,#1b1d20 45%,#31343a 100%);color:#fff;overflow:hidden}
.hero .container{min-height:480px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:25px}.eyebrow{color:#ff4b52;font-weight:900;letter-spacing:2px;font-size:14px}
.hero h1{font-size:clamp(38px,5.5vw,72px);line-height:.98;margin:14px 0}.hero h1 span{color:var(--red)}
.hero p{font-size:18px;line-height:1.6;color:#d8d9dc;max-width:640px}.hero-buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 20px;border-radius:5px;font-weight:800;border:1px solid transparent;cursor:pointer}
.btn-red{background:var(--red);color:#fff}.btn-outline{border-color:#fff;color:#fff}.hero-art img{width:100%;filter:drop-shadow(0 25px 40px #0008)}
.features{background:var(--red);color:#fff}.features .container{display:grid;grid-template-columns:repeat(4,1fr)}
.feature{padding:22px 18px;border-right:1px solid #fff3;text-align:center}.feature:last-child{border:0}.feature b{display:block;font-size:16px}.feature small{opacity:.85}
section{padding:70px 0}.section-head{text-align:center;margin-bottom:38px}.section-head h2{font-size:38px;margin:0 0 8px}.section-head p{color:var(--muted);margin:0}
.categories{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.cat{background:#fff;border:1px solid var(--border);border-radius:10px;padding:25px;box-shadow:0 9px 25px #1111;cursor:pointer;transition:.2s}.cat:hover{transform:translateY(-5px);border-color:#f05}.cat .icon{font-size:36px}.cat strong{display:block;font-size:19px;margin:15px 0 5px}.cat span{color:var(--muted)}
.products-section{background:var(--light)}.toolbar{display:grid;grid-template-columns:1fr auto;gap:15px;margin-bottom:28px}.searchbox{display:flex;background:#fff;border:2px solid #d9dce1;border-radius:8px;overflow:hidden}.searchbox input{width:100%;border:0;padding:15px 16px;font-size:16px;outline:0}.searchbox button{border:0;background:var(--red);color:#fff;padding:0 25px;font-weight:800}
.filter{padding:0 14px;border:1px solid #ccd0d6;border-radius:8px;background:#fff;min-width:190px}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.product{background:#fff;border:1px solid var(--border);border-radius:9px;overflow:hidden;box-shadow:0 6px 18px #1111;display:flex;flex-direction:column}
.product-img{height:210px;background:#f5f5f6;display:flex;align-items:center;justify-content:center;overflow:hidden}.product-img img{width:100%;height:100%;object-fit:contain;padding:12px}
.product-body{padding:18px;display:flex;flex-direction:column;flex:1}.badge{align-self:flex-start;background:#ffe2e4;color:#a80008;font-size:12px;font-weight:800;padding:5px 8px;border-radius:20px}
.product h3{font-size:15px;line-height:1.45;margin:12px 0;min-height:64px}.meta{font-size:13px;line-height:1.65;color:#555}.meta b{color:#17191c}.detail-btn{margin-top:auto;border:0;background:#17191c;color:#fff;padding:11px;border-radius:5px;font-weight:800;cursor:pointer}
.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:35px}.pagination button{border:1px solid #ccd0d6;background:#fff;border-radius:5px;padding:9px 13px;cursor:pointer}.pagination button.active{background:var(--red);color:#fff;border-color:var(--red)}
.stats{background:#151618;color:#fff}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);text-align:center}.stat strong{display:block;color:#ff3942;font-size:44px}.stat span{color:#c8cbd0}
.catalog-cta{background:linear-gradient(115deg,#d7000b,#910008);color:#fff}.catalog-cta .container{display:flex;justify-content:space-between;align-items:center;gap:25px}.catalog-cta h2{font-size:34px;margin:0 0 8px}
.contact{background:#0d0e10;color:#fff}.contact-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:40px}.contact h3{margin-top:0}.contact p,.contact li{color:#c7c9cc;line-height:1.8}.contact ul{padding:0;list-style:none}.contact a:hover{color:#ff535a}
.footer{background:#070809;color:#94989e;text-align:center;padding:18px;font-size:13px}
.modal{position:fixed;inset:0;background:#000a;z-index:50;display:none;align-items:center;justify-content:center;padding:20px}.modal.open{display:flex}.modal-card{background:#fff;border-radius:12px;max-width:860px;width:100%;display:grid;grid-template-columns:1fr 1.2fr;overflow:hidden;position:relative}.modal-card img{width:100%;height:100%;min-height:420px;object-fit:contain;background:#f4f5f6;padding:20px}.modal-info{padding:34px}.close{position:absolute;right:15px;top:12px;border:0;background:#eee;width:38px;height:38px;border-radius:50%;font-size:22px;cursor:pointer}
.mobile-toggle{display:none;margin-left:auto;background:transparent;border:1px solid #555;color:#fff;font-size:24px;border-radius:5px}
@media(max-width:900px){.hero .container{grid-template-columns:1fr;padding:55px 0}.hero-art{max-width:600px}.features .container,.categories,.product-grid{grid-template-columns:repeat(2,1fr)}.navlinks{display:none;position:absolute;left:0;right:0;top:78px;background:#151618;padding:20px;flex-direction:column}.navlinks.open{display:flex}.mobile-toggle{display:block}.contact-grid{grid-template-columns:1fr 1fr}.toolbar{grid-template-columns:1fr}.modal-card{grid-template-columns:1fr}.modal-card img{min-height:260px}.stats-grid{grid-template-columns:repeat(2,1fr);gap:35px}}
@media(max-width:560px){.topline .container{justify-content:center}.topline .right{display:none}.brand img{width:150px}.hero h1{font-size:42px}.features .container,.categories,.product-grid,.contact-grid{grid-template-columns:1fr}.feature{border-right:0;border-bottom:1px solid #fff3}.catalog-cta .container{flex-direction:column;align-items:flex-start}.product-img{height:240px}.stats-grid{grid-template-columns:1fr 1fr}.toolbar{gap:10px}}

.hero-reference{background:#101010;overflow:hidden}.hero-reference-link{display:block}.hero-reference img{display:block;width:100%;height:auto;max-height:430px;object-fit:cover}.brand img{height:62px;object-fit:contain;object-position:left center}.contact .brand img{width:210px}
@media(max-width:700px){.hero-reference img{min-height:230px;object-fit:cover;object-position:center}.hero-reference{background:#151515}}

/* Final hero: visual background + translatable HTML text */
.hero-final{position:relative;min-height:470px;background-image:url('../img/merto-ana-banner.jpg');background-size:cover;background-position:center right;overflow:hidden;color:#fff}
.hero-shade{position:absolute;inset:0;background:linear-gradient(105deg,#090a0b 0%,#111317 35%,rgba(13,14,16,.91) 43%,rgba(13,14,16,.18) 68%,rgba(255,255,255,.02) 100%)}
.hero-final-content{position:relative;z-index:2;min-height:470px;display:flex;align-items:center}
.hero-copy{width:min(515px,52%);padding:55px 0}.hero-copy .eyebrow{font-size:13px;letter-spacing:3px;font-weight:800;color:#ddd}.hero-copy h1{font-size:clamp(37px,4.4vw,62px);line-height:1.03;margin:13px 0 17px;font-style:normal}.hero-copy h1 span{color:#fff}.hero-copy h1 em{color:var(--red);font-style:normal}.hero-copy p{font-size:18px;line-height:1.55;color:#ddd;max-width:510px;margin:0 0 25px}
.categories{grid-template-columns:repeat(4,1fr)}
.cat{padding:0;overflow:hidden;text-align:left;border:1px solid var(--border);background:#fff;display:flex;flex-direction:column;width:100%;font:inherit;color:inherit}
.cat-img{height:185px;background:#f5f6f7;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--border)}.cat-img img{width:100%;height:100%;object-fit:contain;padding:10px}.cat-copy{padding:17px 20px 20px}.cat-copy strong{margin:0 0 6px}.cat-copy span{display:block}
@media(max-width:900px){.hero-final,.hero-final-content{min-height:430px}.hero-copy{width:65%}.hero-final{background-position:62% center}}
@media(max-width:650px){.hero-final{background-position:70% center}.hero-shade{background:linear-gradient(90deg,rgba(5,6,7,.97) 0%,rgba(5,6,7,.92) 62%,rgba(5,6,7,.48) 100%)}.hero-copy{width:88%;padding:45px 0}.hero-copy p{font-size:16px}.cat-img{height:220px}}


/* SON SÜRÜM */
.hero-final{
  min-height:470px;
  background:
    linear-gradient(108deg,#070809 0%,#111318 39%,#17191f 43%,rgba(23,25,31,.18) 59%,rgba(255,255,255,0) 72%),
    url('../img/merto-banner-products.jpg') right center / auto 100% no-repeat,
    #f4f4f4;
}
.hero-shade{background:none}
.hero-copy{position:relative;z-index:3}
.brand img{background:transparent}
.cat{border-radius:8px}
.cat-img{height:190px;background:#f7f7f8}
.cat-img img{padding:8px;transition:transform .25s ease}
.cat:hover .cat-img img{transform:scale(1.04)}
.cat-copy strong{font-size:18px}
@media(max-width:900px){
  .hero-final{
    background:
      linear-gradient(90deg,rgba(7,8,9,.98) 0%,rgba(10,11,13,.94) 58%,rgba(15,16,19,.58) 78%,rgba(15,16,19,.22) 100%),
      url('../img/merto-banner-products.jpg') 72% center / auto 100% no-repeat,
      #151619;
  }
}
@media(max-width:650px){
  .hero-final{
    min-height:440px;
    background:
      linear-gradient(90deg,rgba(7,8,9,.98) 0%,rgba(7,8,9,.94) 72%,rgba(7,8,9,.62) 100%),
      url('../img/merto-banner-products.jpg') 77% center / auto 100% no-repeat,
      #111214;
  }
  .hero-final-content{min-height:440px}
  .hero-copy{width:94%}
}

.hero-final-content{
  min-height:470px;
  display:flex;
  align-items:center;
}
.hero-copy{width:min(580px,52%);color:#fff;padding:52px 0}
.hero-copy h1{margin:12px 0 18px;font-size:clamp(36px,4.4vw,64px);line-height:1.03}
.hero-copy h1 span{display:block}
.hero-white{color:#fff}
.hero-red{color:#e30613}
.hero-copy p{max-width:500px;color:#e2e3e6;font-size:18px;line-height:1.55;margin-bottom:25px}
.categories{grid-template-columns:repeat(4,1fr)}
.cat{
  padding:0;
  overflow:hidden;
  text-align:left;
  border:1px solid #d9dce1;
  background:#fff;
  cursor:pointer;
}
.cat-img{height:175px;border-bottom:1px solid #eceef1}
.cat-img img{width:100%;height:100%;object-fit:contain}
.cat-copy{padding:16px 18px 18px}
.cat-copy strong{display:block;margin:0 0 5px}
.cat-copy span{color:#69707a}
@media(max-width:900px){
 .hero-copy{width:65%}
 .categories{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
 .hero-copy{width:100%}
 .hero-copy h1{font-size:39px}
 .categories{grid-template-columns:1fr}
}


/* NİHAİ YAYIN SÜRÜMÜ */
.brand img{width:235px}
.hero-nihai{
  position:relative;
  min-height:500px;
  background:
    linear-gradient(108deg,#070809 0%,#101216 37%,#17191e 43%,rgba(23,25,30,.08) 60%,rgba(255,255,255,0) 74%),
    url('../img/merto-banner-products-nihai.jpg') right center / auto 100% no-repeat,
    #f5f5f5;
  border-bottom:2px solid rgba(255,255,255,.95);
}
.hero-nihai .hero-final-content{
  min-height:500px;
  display:flex;
  align-items:center;
}
.hero-nihai .hero-copy{
  width:min(610px,48%);
  padding:58px 0;
  position:relative;
  z-index:3;
}
.hero-nihai .hero-copy h1{
  margin:12px 0 18px;
  font-size:clamp(40px,4.8vw,68px);
  line-height:1.02;
  letter-spacing:-1px;
}
.hero-nihai .hero-copy h1 span{display:block}
.hero-nihai .hero-copy p{
  max-width:520px;
  color:#e6e7e9;
  font-size:18px;
  line-height:1.55;
}
.hero-btn{
  padding:16px 28px;
  min-width:205px;
  font-size:15px;
  box-shadow:0 10px 28px rgba(227,6,19,.26);
}
.features{
  border-top:1px solid rgba(255,255,255,.92);
}
.footer-logo{width:255px;max-width:100%}
.cat-img{height:205px}
.cat-img img{object-fit:contain}
@media(max-width:900px){
  .brand img{width:205px}
  .hero-nihai{
    background:
      linear-gradient(90deg,rgba(7,8,9,.99) 0%,rgba(8,9,11,.96) 57%,rgba(15,16,19,.48) 81%,rgba(15,16,19,.12) 100%),
      url('../img/merto-banner-products-nihai.jpg') 70% center / auto 100% no-repeat,
      #151619;
  }
  .hero-nihai .hero-copy{width:66%}
}
@media(max-width:650px){
  .brand img{width:175px}
  .hero-nihai{
    min-height:465px;
    background:
      linear-gradient(90deg,rgba(7,8,9,.99) 0%,rgba(7,8,9,.96) 72%,rgba(7,8,9,.58) 100%),
      url('../img/merto-banner-products-nihai.jpg') 74% center / auto 100% no-repeat,
      #111214;
  }
  .hero-nihai .hero-final-content{min-height:465px}
  .hero-nihai .hero-copy{width:100%;padding:46px 0}
}
