/* ==========================================================================
   NUWORK OFFICE — anasayfa
   Grafit #3E3F43 (marka) + altın #DDA338 (yalnız vurgu) + kum tonu anlatı
   ========================================================================== */

:root{
  --ink:#24262a;
  --grafit:#3e3f43;
  --gri:#6e7075;
  --acik:#9a9ca1;
  --hair:#e5e5e6;
  --hair-koyu:#d3d3d4;
  --zemin:#ffffff;
  --zemin2:#f6f5f3;
  --zemin3:#eceae6;
  --kum:#EDE8DE;
  --kum-2:#E2DCCF;
  --kum-ink:#2E2A24;
  --altin:#d8a236;        /* logodan örneklendi */
  --altin-koyu:#b8862a;
  --kirmizi:#b3261e;
  --yesil:#25D366;

  --kap:1290px;
  --gutter:40px;
  --r:8px;
  --r-blok:14px;
  --r-k:4px;
  --head-h:88px;
  --nav-h:52px;
  --hiz:.42s cubic-bezier(.22,.68,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Barlow",-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:15px;line-height:1.55;color:var(--ink);background:var(--zemin);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;border:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.025em;line-height:1.14}
p{margin:0}
:focus-visible{outline:2px solid var(--altin);outline-offset:3px;border-radius:2px}

.kap{max-width:var(--kap);margin:0 auto;padding:0 var(--gutter)}
.gizle{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- bölüm başlığı ---------------------------------------------- */
.blk{padding:62px 0}
/* ---------- kutulanmış zeminler (Seduna uyarlaması) ---------------------
   Renkli bantlar viewport'u kenardan kenara doldurmuyor; zemin konteyner
   genişliğinde bir kutuya alınıyor. HTML aynı kalsın diye ::before ile. */
.blk--zemin,.yeni-bant,.anlati,.bulten{position:relative;background:none}
.blk--zemin::before,.yeni-bant::before,.anlati::before,.bulten::before{
  content:'';position:absolute;inset:0;left:0;right:0;
  max-width:var(--kap);margin-inline:auto;
  border-radius:var(--r-blok);z-index:0;
}
.blk--zemin::before,.yeni-bant::before{background:var(--zemin2)}
.anlati::before{background:var(--kum)}
.bulten::before{background:var(--grafit)}
.blk--zemin>.kap,.yeni-bant>.kap,.anlati>.kap,.bulten>.kap{position:relative;z-index:1}
.bulten{color:#fff}

/* ardışık kutular birbirine yapışıp tek blok gibi görünmesin */
.blk--zemin+.blk--zemin,.blk--zemin+.yeni-bant,.blk--zemin+.anlati,
.yeni-bant+.blk--zemin,.yeni-bant+.anlati,.anlati+.blk--zemin,
.anlati+.yeni-bant{margin-top:18px}
/* mobilde kutu köşesi anlamsız — bant zaten kenardan kenara */
@media(max-width:760px){
  .hero{border-radius:0}
  .blk--zemin::before,.yeni-bant::before,.anlati::before,.bulten::before{border-radius:0}
  .blk--zemin+.blk--zemin,.blk--zemin+.yeni-bant,.blk--zemin+.anlati,
  .yeni-bant+.blk--zemin,.yeni-bant+.anlati,.anlati+.blk--zemin,
  .anlati+.yeni-bant{margin-top:0}
}


.blk-bas{display:flex;align-items:flex-end;justify-content:space-between;gap:34px;margin-bottom:30px}
.blk-et{
  font-size:11px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--altin-koyu);margin-bottom:9px;
}
.blk-bas h2{font-size:34px;font-weight:600;letter-spacing:-.038em}
.blk-alt{margin-top:11px;color:var(--gri);font-size:15.5px;max-width:56ch;line-height:1.6}
.tum-link{
  flex:none;display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--grafit);
  padding-bottom:6px;border-bottom:1px solid var(--hair-koyu);
  transition:border-color .22s,color .22s;white-space:nowrap;
}
.tum-link:hover{color:var(--ink);border-color:var(--altin)}

.btn{
  display:inline-flex;align-items:center;gap:11px;height:52px;padding:0 30px;
  font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid transparent;border-radius:var(--r-k);
  transition:background .22s,color .22s,border-color .22s,transform .22s,box-shadow .22s;
}
.btn svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none;transition:transform .3s}
.btn:hover svg{transform:translateX(5px)}
.btn--dolu{background:var(--grafit);color:#fff;border-color:var(--grafit)}
.btn--dolu:hover{background:var(--ink);box-shadow:0 10px 24px -12px rgba(36,38,42,.6);transform:translateY(-1px)}
.btn--altin{background:var(--altin);color:#22242a;border-color:var(--altin)}
.btn--altin:hover{background:#e9b34e;transform:translateY(-1px)}
.btn--hat{border-color:var(--hair-koyu);color:var(--grafit)}
.btn--hat:hover{border-color:var(--grafit);background:var(--zemin2)}

/* ==========================================================================
   HEADER
   ========================================================================== */
.head{background:var(--zemin);border-bottom:1px solid var(--hair)}
.head .kap{height:var(--head-h);display:flex;align-items:center;gap:42px}
.logo{flex:none}
.logo img{height:40px;width:auto}

.ara{flex:1;max-width:580px;position:relative}
.ara input{
  width:100%;height:48px;padding:0 52px 0 18px;font:inherit;font-size:14.5px;color:var(--ink);
  background:var(--zemin2);border:1px solid transparent;border-radius:var(--r-k);
  transition:border-color .22s,background .22s,box-shadow .22s;
}
.ara input::placeholder{color:var(--acik)}
.ara input:focus{outline:0;background:#fff;border-color:var(--grafit);box-shadow:0 0 0 3px rgba(62,63,67,.08)}
.ara button{position:absolute;right:0;top:0;width:48px;height:48px;display:grid;place-items:center;color:var(--grafit)}
.ara button:hover{color:var(--altin-koyu)}

.aks{margin-left:auto;display:flex;align-items:center;gap:6px}
.aks-tel{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 4px;color:var(--grafit);transition:color .18s}
.aks-tel svg{width:19px;height:19px;color:var(--altin-koyu);flex:none}
.aks-tel span{font-size:14px;font-weight:600;line-height:1.2;letter-spacing:-.01em;white-space:nowrap}
.aks-tel small{display:block;font-size:11.5px;color:var(--acik);font-weight:400}
.aks-tel:hover{color:var(--ink)}
.aks-ayr{width:1px;height:26px;background:var(--hair);margin:0 6px;flex:none}
.aks-i{display:flex;align-items:center;gap:11px;padding:10px 14px;color:var(--grafit);position:relative;
       border-radius:var(--r-k);transition:color .18s,background .18s}
.aks-i:hover{color:var(--ink);background:var(--zemin2)}
.aks-i > svg{color:var(--altin-koyu);transition:color .18s}
.aks-i:hover > svg{color:var(--altin)}
.aks-i span{font-size:14.5px;font-weight:600;line-height:1.2;letter-spacing:-.01em}
.aks-i small{display:block;font-size:12px;color:var(--acik);font-weight:400;letter-spacing:0}
.aks-say{
  position:absolute;top:2px;left:26px;min-width:18px;height:18px;padding:0 5px;
  display:grid;place-items:center;background:var(--altin);color:#22242a;border-radius:9px;
  font-size:11px;font-weight:700;line-height:1;font-style:normal;
}
.aks-say[data-bos="1"]{display:none}

/* ==========================================================================
   NAV + MEGA MENÜ   (yapı: assaofismobilyalari.com açılır menüsünden uyarlandı)
   ========================================================================== */
.nav{background:var(--zemin);border-bottom:1px solid var(--hair);position:relative;z-index:60}
.nav .kap{position:relative}
.nav-list{display:flex;align-items:center;justify-content:center;gap:2px}
.nav-list > li{position:static}
.nav-list > li > a{
  display:flex;align-items:center;gap:7px;height:var(--nav-h);padding:0 17px;
  font-size:15.5px;font-weight:600;letter-spacing:.012em;text-transform:uppercase;color:var(--grafit);
  position:relative;transition:color .2s,background .2s;border-radius:var(--r-k) var(--r-k) 0 0;
}
.nav-list > li > a::after{
  content:"";position:absolute;left:16px;right:16px;bottom:-1px;height:2px;background:var(--altin);
  transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.22,.68,.3,1);
}
.nav-list > li > a:hover{color:var(--altin-koyu);background:rgba(216,162,54,.08)}
.nav-list > li.acik > a{color:var(--altin-koyu);background:rgba(216,162,54,.08)}
.nav-list > li.acik > a::after{transform:scaleX(1)}
.nav-list .ok{width:9px;height:9px;stroke:currentColor;stroke-width:2.2;fill:none;transition:transform .26s}
.nav-list > li.acik .ok{transform:rotate(180deg)}
.nav-vurgu{color:var(--kirmizi) !important}

/* mega panel — referans: aktif menü öğesi panelin üstüne oturan bir SEKME
   gibi görünür; panel açık gri zeminli ve sağdaki görsel kenara yaslı,
   tam yükseklikte. Kapsayıcıya hizalı (menü öğesine değil; yoksa sağda taşar). */
.mega{
  position:absolute;left:var(--gutter);right:auto;top:100%;
  width:min(600px, calc(100vw - var(--gutter) * 2));
  background:var(--zemin2);border:0;
  border-radius:0 var(--r-blok) var(--r-blok) var(--r-blok);
  box-shadow:0 30px 64px -22px rgba(36,38,42,.38);
  padding:0;overflow:hidden;
  display:grid;grid-template-columns:1fr 232px;gap:0;align-items:stretch;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .15s ease,transform .19s cubic-bezier(.2,.9,.3,1),visibility .15s;
}
li.acik > .mega{opacity:1;visibility:visible;transform:translateY(0)}

/* Aktif menü öğesi panelin sekmesi olur: aynı zemin, üst köşeleri yuvarlak,
   alttaki çizgi kalkar — öğe ile panel tek parça görünür. */
.nav > ul > li[data-mega] > a{
  position:relative;border-radius:var(--r-k) var(--r-k) 0 0;
  transition:background .24s ease,color .24s ease;
}
.nav > ul > li.acik > a{background:var(--zemin2);color:var(--ink)}

/* panel içeriği tek tek sıraya girer */
/* `.mega-baslik` kaldırıldı (kategori adı üst menüde zaten yazıyor);
   ona ait animasyon kuralı da silindi. */
.mega-kol li,.mega-gorsel{opacity:0;transform:translateY(10px)}
li.acik > .mega .mega-kol li{animation:megaGir .28s cubic-bezier(.2,.9,.3,1) forwards;
  animation-delay:calc(60ms + var(--mi,0) * 22ms)}
li.acik > .mega .mega-gorsel{animation:megaGir .32s .12s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes megaGir{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* sol sütun: başlık + kategori listesi + hızlı bağlantılar.
   Hızlı bağlantılar HTML'de önce geliyor; `order` ile alta alınıyor. */
.mega-sol{display:flex;flex-direction:column;min-width:0}
/* Tek sütun, alt alta: iki sütuna bölünce dört başlık dağınık duruyordu.
   Satırlar büyüdü, panel de buna göre daraldı. */
.mega-kol{order:2;columns:1;margin:0 18px 26px}
.mega-kol li{break-inside:avoid}
.mega-kol a{
  display:flex;align-items:center;padding:13px 15px;border-radius:var(--r-k);
  font-size:17.5px;font-weight:500;letter-spacing:-.012em;color:var(--gri);
  background:linear-gradient(90deg,#fff,#fff) no-repeat left center/0 100%;
  transition:color .26s ease,background-size .34s cubic-bezier(.22,.68,.3,1);
}
.mega-kol a:hover,.mega-kol a.aktif{color:var(--ink);background-size:100% 100%}


/* sağdaki önizleme — kenara yaslı, tam yükseklik */
.mega-gorsel{
  grid-column:2;grid-row:1 / -1;align-self:stretch;
  display:flex;flex-direction:column;justify-content:center;
  background:var(--zemin3);transition:background .3s;
}
.mega-gorsel:hover{background:var(--hair)}
.mega-gorsel-med{display:block;flex:1;min-height:0;padding:22px 20px 8px;position:relative}
.mega-gorsel-med img{
  width:100%;height:100%;object-fit:contain;
  transition:transform .5s cubic-bezier(.22,.68,.3,1),opacity .26s;
}
.mega-gorsel:hover .mega-gorsel-med img{transform:scale(1.05)}
.mega-gorsel-med.degisiyor img{opacity:0;transform:scale(.94)}
.mega-gorsel-yazi{display:block;padding:0 20px 22px}
.mega-gorsel .et{display:block;font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--altin-koyu)}
.mega-gorsel .ad{display:block;margin-top:4px;font-size:14.5px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.mega-gorsel .fi{display:block;margin-top:2px;font-size:13px;color:var(--gri)}

/* ==========================================================================
   STORY ŞERİDİ   (yapı: evidea.com kategori dairelerinden uyarlandı)
   ========================================================================== */
/* z-index slider'dan yüksek: hover'da büyüyen daire hero'nun altında
   kalmamalı, üstünde görünmeli. */
.story-blok{background:var(--zemin);border-bottom:1px solid var(--hair);padding:10px 0 22px;position:relative;z-index:30}
.story-sar{position:relative}
/* Sonsuz akış — içerik DÖRT kez basılı; bir tur toplam genişliğin %25'i.
   Kopya sayısı değişirse buradaki oran da değişmeli (N kopya -> -100/N%),
   yoksa şerit tur sonunda zıplıyor.
   compositor animasyonu olduğu için kaydırma hilelerine göre çok daha akıcı. */
.story-akis{
  overflow:hidden;
  padding:30px 0 36px;margin:-30px 0 -36px;   /* taşma payı; yükseklik negatif margin ile geri alınır */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 46px,#000 calc(100% - 46px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 46px,#000 calc(100% - 46px),transparent 100%);
}
.story-sira{
  display:flex;gap:28px;width:max-content;
  animation:storyAkis 24s linear infinite;
}
@keyframes storyAkis{from{transform:translateX(0)}to{transform:translateX(-25%)}}
@keyframes seritAkis{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.story-akis:hover .story-sira,.story-akis:focus-within .story-sira{animation-play-state:paused}

/* Ürün adı kaldırıldı (müşteri isteği): şerit yalnız görselden oluşuyor,
   daireler bu sayede büyüdü. */
.story{
  flex:none;width:118px;display:flex;flex-direction:column;align-items:center;text-align:center;
}

/* çerçeve her üründe aynı; renk yalnız dairenin içinde */
.story-halka{
  position:relative;width:112px;height:112px;border-radius:50%;padding:3px;display:grid;place-items:center;
  background:var(--hair);
  transition:transform .42s cubic-bezier(.22,.68,.3,1),box-shadow .35s,background .3s;
}
.story-halka::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--altin);
  opacity:0;transition:opacity .28s;
}
.story:hover .story-halka::before,.story:focus-visible .story-halka::before{opacity:1}

.story-ic{
  position:relative;z-index:1;
  width:100%;height:100%;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  background:var(--zemin2);          /* tek renk, sade — ürüne göre renk yok */
  padding:6px;
  transition:background .28s;
}
.story-ic img{
  width:100%;height:100%;object-fit:contain;
  transition:transform .42s cubic-bezier(.22,.68,.3,1);
}
.story{transition:transform .42s cubic-bezier(.22,.68,.3,1)}
.story:hover,.story:focus-within{z-index:5}
/* Büyüme AŞAĞI doğru: şerit yapışkan başlığın hemen altında duruyor, daire
   yukarı taşınca başlığın altında kalıp kırpılmış görünüyordu. `top` orijini
   ve yukarı hareketin kaldırılmasıyla taşma tamamen aşağıya alındı; şeridin
   alt boşluğu da bunu karşılayacak kadar açıldı. */
.story:hover .story-halka,.story:focus-within .story-halka{
  transform:scale(1.26);
  box-shadow:0 16px 30px -14px rgba(36,38,42,.42);
}
.story-halka{transform-origin:center top}
.story:hover .story-ic,.story:focus-within .story-ic{background:#fff}
.story:hover .story-ic img,.story:focus-within .story-ic img{transform:scale(1.1)}
.story-ad{
  /* görsel olarak gizli ama ekran okuyucuda okunur */
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}


/* ==========================================================================
   HERO SLIDER
   ========================================================================== */
/* hero artık kenardan kenara değil — konteyner kutusunda (Seduna slider'ı gibi) */
.hero{
  position:relative;overflow:hidden;background:#fff;
  max-width:var(--kap);margin:0 auto;border-radius:var(--r-blok);
}
.hero-ray{position:relative;height:clamp(430px,41vw,532px)}

.hero-s{
  position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .8s ease,visibility .8s;
}
.hero-s--aktif{opacity:1;visibility:visible;z-index:2}

.hero-med{position:absolute;inset:0;overflow:hidden}
.hero-med img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.07);transition:transform 7s linear;
}
.hero-s--aktif .hero-med img{transform:scale(1)}
/* yazı doğrudan görselin içinde durur — alttan yükselen koyu geçiş metni okunur kılar */
.hero-med::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(16,17,19,.86) 0%,rgba(16,17,19,.62) 22%,rgba(16,17,19,.26) 44%,rgba(16,17,19,.04) 64%,transparent 80%),
    linear-gradient(96deg,rgba(16,17,19,.5) 0%,rgba(16,17,19,.22) 32%,rgba(16,17,19,0) 60%);
}

.hero-kap{position:relative;height:100%;display:flex;align-items:flex-end;padding-bottom:112px}
.hero-ic{max-width:600px}
.hero-bas,.hero-alt,.hero-ic .btn{opacity:0;transform:translateY(26px)}
.hero-s--aktif .hero-bas{animation:heroGir .78s .2s cubic-bezier(.22,.68,.3,1) forwards}
.hero-s--aktif .hero-alt{animation:heroGir .78s .34s cubic-bezier(.22,.68,.3,1) forwards}
.hero-s--aktif .hero-ic .btn{animation:heroGir .78s .48s cubic-bezier(.22,.68,.3,1) forwards}
@keyframes heroGir{to{opacity:1;transform:translateY(0)}}

.hero-bas{
  font-size:clamp(31px,3.7vw,54px);font-weight:600;letter-spacing:-.04em;line-height:1.06;
  color:#fff;text-shadow:0 2px 24px rgba(16,17,19,.4);
}
/* vurgu da beyaz — sarı istenmedi, ayrım yalnız ağırlıkla veriliyor */
.hero-bas em{font-style:normal;color:#fff;font-weight:700}
.hero-alt{
  margin-top:18px;font-size:16.5px;line-height:1.62;color:rgba(255,255,255,.84);max-width:46ch;
  text-shadow:0 1px 14px rgba(16,17,19,.5);
}
.hero-ic .btn{margin-top:30px}
.hero-ic .btn--dolu{background:#fff;color:var(--ink);border-color:#fff}
.hero-ic .btn--dolu:hover{
  background:#f2f1ef;border-color:#f2f1ef;
  box-shadow:0 14px 30px -12px rgba(255,255,255,.45);
}

/* hotspot */
.nokta{
  position:absolute;width:30px;height:30px;transform:translate(-50%,-50%);z-index:4;
  display:grid;place-items:center;
}
.nokta-nab{
  width:15px;height:15px;border-radius:50%;background:#fff;position:relative;
  box-shadow:0 2px 10px rgba(20,21,23,.4);
  transition:transform .3s cubic-bezier(.22,.68,.3,1);
}
.nokta-nab::before{
  content:"";position:absolute;inset:4px;border-radius:50%;background:var(--altin);
}
.nokta-nab::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);
  animation:nabiz 2.4s ease-out infinite;
}
@keyframes nabiz{
  0%{transform:scale(.7);opacity:.9}
  70%{transform:scale(1.7);opacity:0}
  100%{transform:scale(1.7);opacity:0}
}
.nokta:hover .nokta-nab,.nokta:focus-visible .nokta-nab{transform:scale(1.25)}

.nokta-kart{
  position:absolute;bottom:calc(100% + 14px);left:50%;transform:translate(-50%,8px);
  width:224px;display:flex;align-items:center;gap:12px;padding:11px;
  background:#fff;border-radius:var(--r);box-shadow:0 18px 40px -14px rgba(20,21,23,.4);
  opacity:0;visibility:hidden;pointer-events:none;text-align:left;
  transition:opacity .26s,transform .32s cubic-bezier(.22,.68,.3,1),visibility .26s;
}
.nokta-kart::after{
  content:"";position:absolute;top:100%;left:50%;margin-left:-6px;
  border:6px solid transparent;border-top-color:#fff;
}
.nokta:hover .nokta-kart,.nokta:focus-visible .nokta-kart{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nokta-kart img{width:56px;height:64px;object-fit:contain;flex:none;background:var(--zemin2);border-radius:var(--r-k);padding:4px}
.nokta-yazi{display:flex;flex-direction:column;gap:1px;min-width:0}
.nokta-yazi b{font-size:13.5px;font-weight:600;color:var(--ink);letter-spacing:-.015em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nokta-yazi i{font-style:normal;font-size:11px;color:var(--acik);letter-spacing:.05em;text-transform:uppercase}
.nokta-yazi em{font-style:normal;margin-top:3px;font-size:14px;font-weight:600;color:var(--altin-koyu)}

/* hero kontrolleri */
/* oklar sağ alta gruplandı — dikey ortada kalınca soldaki başlıkla çakışıyordu */
.hero-ok{
  position:absolute;bottom:26px;z-index:6;
  width:46px;height:46px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--grafit);
  box-shadow:0 6px 18px -8px rgba(20,21,23,.4);
  opacity:0;transition:opacity .3s,background .22s,transform .22s,color .22s;
}
.hero:hover .hero-ok,.hero:focus-within .hero-ok{opacity:1}
.hero-ok:hover{background:var(--altin);color:#22242a;transform:scale(1.07)}
.hero-ok--geri{right:calc(var(--gutter) + 56px)}
.hero-ok--ileri{right:var(--gutter)}
.hero-ok svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.9;fill:none}

.hero-nav{
  position:absolute;left:var(--gutter);bottom:30px;z-index:6;display:flex;gap:9px;
}
.hero-nk{width:38px;height:3px;border-radius:2px;background:rgba(255,255,255,.32);overflow:hidden;position:relative}
.hero-nk span{position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.hero-nk--aktif span{animation:heroBar 6s linear forwards}
@keyframes heroBar{to{transform:scaleX(1)}}
/* Fare üzerine gelince ilerleme çubuğu DURMAZ: sayaç zaten çalışmaya devam
   ediyor, çubuğun durması slaytın da durduğu izlenimi veriyordu. */

/* ==========================================================================
   SEKMELİ ÜRÜN ALANI
   ========================================================================== */
.sekme-bar{position:relative;display:flex;gap:4px;margin-bottom:34px;border-bottom:1px solid var(--hair)}
.sekme-d{
  padding:0 20px 15px;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--acik);
  transition:color .24s;position:relative;white-space:nowrap;
}
.sekme-d:hover{color:var(--gri)}
.sekme-d--aktif{color:var(--ink)}
.sekme-d i{font-style:normal;font-size:11.5px;font-weight:500;color:var(--acik);margin-left:7px}
.sekme-d--aktif i{color:var(--altin-koyu)}
.sekme-alt{margin-top:38px;display:flex;justify-content:center}
.sekme-cizgi{
  position:absolute;bottom:-1px;height:2px;background:var(--altin);
  transition:left .4s cubic-bezier(.22,.68,.3,1),width .4s cubic-bezier(.22,.68,.3,1);
}
.sekme-p[hidden]{display:none}
@keyframes sekmeGir{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.sekme-p.yenilendi .urun{animation:sekmeGir .5s cubic-bezier(.22,.68,.3,1) backwards;
  animation-delay:calc(var(--k,0) * 50ms)}

/* ==========================================================================
   ÜRÜN KARTI
   ========================================================================== */
.urun-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.urun{
  display:flex;flex-direction:column;min-width:0;background:#fff;
  border:1px solid transparent;border-radius:var(--r);padding:14px 14px 18px;
  transition:border-color .3s,box-shadow .34s;
}
.urun:hover{border-color:var(--hair);box-shadow:0 18px 34px -26px rgba(36,38,42,.4)}

.urun-gor{position:relative;aspect-ratio:1/1.02}
.urun-med{display:block;width:100%;height:100%;position:relative}
.urun-med img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity .38s ease,transform .6s cubic-bezier(.22,.68,.3,1);
}
.urun-med img.aktif{opacity:1}
.urun:hover .urun-med img.aktif{transform:scale(1.09)}

/* indirim rozeti — daire içinde ince kırmızı çerçeve */
.urun-rz{
  position:absolute;top:0;left:0;z-index:3;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid var(--kirmizi);color:var(--kirmizi);background:#fff;
  font-size:12.5px;font-weight:600;letter-spacing:-.01em;
}
.urun-rz--yeni{border-color:var(--grafit);color:var(--grafit);font-size:11px}

/* stoktan hızlı gönderim — indirim rozetiyle çakışmaması için sağ üstte */
.urun-rz--hizli{
  left:auto;right:0;
  width:54px;height:54px;flex-direction:column;gap:1px;
  border-color:var(--kirmizi);background:var(--kirmizi);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.urun-rz--hizli svg{
  width:13px;height:13px;fill:currentColor;stroke:none;margin-bottom:1px;
}
.urun-rz--hizli b{
  font-size:8.5px;font-weight:700;line-height:1.08;letter-spacing:.04em;
  text-transform:uppercase;text-align:center;
}

/* görsel göstergeleri — üzerine gelince görsel değişir */
.urun-noktalar{
  position:absolute;left:0;right:0;bottom:2px;z-index:3;
  display:flex;justify-content:center;gap:8px;
}
.ug-n{
  width:8px;height:8px;border-radius:50%;background:var(--hair-koyu);
  transition:background .24s,transform .24s;
}
.ug-n:hover{transform:scale(1.25)}
.ug-n.aktif{background:var(--grafit);transform:scale(1.15)}
.urun:hover .ug-n.aktif{background:var(--altin-koyu)}


/* hover ikonları */
.urun-eylem{
  position:absolute;inset:0;z-index:4;
  display:flex;align-items:center;justify-content:center;gap:12px;background:#fff;
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .28s,transform .32s cubic-bezier(.22,.68,.3,1);
}
.urun:hover .urun-eylem,.urun:focus-within .urun-eylem{opacity:1;transform:translateY(0);pointer-events:auto}
.urun:hover .urun-ad,.urun:hover .urun-fiyat{opacity:0;transition:opacity .22s}
.ur-ik{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:var(--zemin2);color:var(--grafit);
  transition:background .22s,color .22s,transform .24s;
}
.ur-ik:hover{background:var(--altin);color:#22242a;transform:translateY(-3px);
  box-shadow:0 8px 18px -8px rgba(221,163,56,.85)}
.ur-ik svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.6;fill:none}
.ur-ik--fav[data-dolu="1"]{background:var(--kirmizi);color:#fff}
.ur-ik--fav[data-dolu="1"] svg{fill:currentColor}

.urun-bilgi{position:relative;padding-top:16px;display:flex;flex-direction:column;flex:1;text-align:center;min-height:74px}
.urun-ad{
  transition:opacity .22s,color .2s;font-size:15.5px;font-weight:600;letter-spacing:-.015em;line-height:1.35;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s;
}
.urun:hover .urun-ad{color:var(--altin-koyu)}
.urun-fiyat{
  transition:opacity .22s;margin-top:auto;padding-top:9px;display:flex;align-items:baseline;justify-content:center;gap:9px;flex-wrap:wrap;
}
.urun-fiyat del{font-size:14px;color:var(--kirmizi);text-decoration-thickness:1px}
.urun-fiyat b{font-size:16.5px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}

/* ==========================================================================
   KAYDIRINCA BELİREN BÖLÜMLER
   ========================================================================== */
[data-gorun]{opacity:0;transform:translateY(30px);
  transition:opacity .7s cubic-bezier(.22,.68,.3,1),transform .7s cubic-bezier(.22,.68,.3,1)}
[data-gorun].gorundu{opacity:1;transform:none}
[data-gorun] .urun,[data-gorun] .ref,[data-gorun] .anlati-yazi > *{
  opacity:0;transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.22,.68,.3,1),transform .6s cubic-bezier(.22,.68,.3,1);
}
[data-gorun] .anlati-med{opacity:0;transform:translateX(-26px) scale(.98);
  transition:opacity .8s cubic-bezier(.22,.68,.3,1),transform .8s cubic-bezier(.22,.68,.3,1)}
[data-gorun].gorundu .urun,[data-gorun].gorundu .ref,
[data-gorun].gorundu .anlati-med,[data-gorun].gorundu .anlati-yazi > *{opacity:1;transform:none}
[data-gorun].gorundu .urun{transition-delay:calc(var(--k,0) * 55ms)}
[data-gorun].gorundu .ref{transition-delay:calc(var(--k,0) * 90ms)}
[data-gorun].gorundu .anlati-yazi > *{transition-delay:calc(var(--k,0) * 130ms)}
[data-gorun].gorundu .anlati-med{transition-delay:.34s}

/* ==========================================================================
   YENİ ÜRÜNLER BANDI
   ========================================================================== */
.yeni-bant{padding:56px 0}
.yeni-bas{position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:34px}
.yeni-bas h2{font-size:32px;font-weight:600;letter-spacing:-.035em}
.yeni-nav{position:absolute;right:0;display:flex;gap:10px}
.yeni-nav button{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid var(--grafit);color:var(--grafit);background:transparent;
  transition:background .22s,color .22s,opacity .22s,transform .22s;
}
.yeni-nav button:hover:not(:disabled){background:var(--grafit);color:#fff;transform:scale(1.05)}
.yeni-nav button:disabled{opacity:.28;cursor:default}
.yeni-nav svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.8;fill:none}
.yeni-akis{
  overflow:hidden;padding:2px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);
}
.yeni-sira{
  display:flex;gap:16px;width:max-content;
  /* storyAkis ile aynı oran (-25%): şerit de dört kopya basılıyor.
     Süre 92s'ten indirildi — akış çok yavaştı. */
  animation:storyAkis 34s linear infinite;
}
.yeni-akis:hover .yeni-sira,.yeni-akis:focus-within .yeni-sira{animation-play-state:paused}
.yeni-akis[data-yon="geri"] .yeni-sira{animation-direction:reverse}
.yeni-sira .urun{
  flex:none;width:calc((var(--kap) - 2*var(--gutter) - 4*16px)/5);
  background:#fff;border-color:var(--hair);
}
.yeni-sira .urun:hover{border-color:var(--hair-koyu)}

/* ==========================================================================
   REFERANSLAR
   ========================================================================== */
.ref-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.ref{display:flex;flex-direction:column;min-width:0}
.ref-med{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--zemin3)}
.ref-med img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.22,.68,.3,1),filter .5s;
}
.ref:hover .ref-med img{transform:scale(1.07)}
.ref-med::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,21,23,.5),rgba(20,21,23,0) 52%);
  opacity:.85;transition:opacity .4s;
}
.ref:hover .ref-med::after{opacity:1}
.ref-tip{
  position:absolute;left:14px;bottom:14px;z-index:2;
  padding:6px 12px;border-radius:20px;background:rgba(255,255,255,.94);
  font-size:11.5px;font-weight:600;letter-spacing:.05em;color:var(--ink);
}
.ref-ic{padding:16px 2px 0}
.ref-ic h3{font-size:17px;font-weight:600;letter-spacing:-.022em;line-height:1.3}
.ref-ic p{margin-top:7px;font-size:13.5px;color:var(--gri);line-height:1.55}

/* ==========================================================================
   ANLATI (kum tonu)
   ========================================================================== */
.anlati{color:var(--kum-ink);padding:66px 0}
.anlati-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.anlati-yazi h2{font-size:32px;font-weight:600;letter-spacing:-.035em;line-height:1.15}
.anlati-yazi p{margin-top:20px;font-size:15.5px;line-height:1.78;color:#4A443C}
.anlati-yazi strong{font-weight:600;color:var(--kum-ink)}
.anlati-not{
  margin-top:26px !important;padding-top:20px;border-top:1px solid var(--kum-2);
  font-size:14.5px !important;color:#6B6459 !important;
}
.anlati-med{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;box-shadow:0 30px 60px -34px rgba(46,42,36,.5)}
.anlati-med img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.22,.68,.3,1)}
.anlati-med:hover img{transform:scale(1.05)}

/* ==========================================================================
   E-BÜLTEN + FOOTER
   ========================================================================== */
.bulten{color:#fff}
.bulten .kap{padding:48px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:48px;flex-wrap:wrap}
.bulten h3{font-size:24px;font-weight:600;letter-spacing:-.03em}
.bulten p{margin-top:7px;font-size:14.5px;color:rgba(255,255,255,.62)}
.bulten form{display:flex;flex:1;max-width:520px;min-width:300px}
.bulten input{
  flex:1;min-width:0;height:52px;padding:0 18px;font:inherit;font-size:14.5px;color:#fff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-right:0;
  border-radius:var(--r-k) 0 0 var(--r-k);
}
.bulten input::placeholder{color:rgba(255,255,255,.45)}
.bulten input:focus{outline:0;border-color:rgba(255,255,255,.5)}
.bulten button{
  height:52px;padding:0 30px;background:var(--altin);color:#22242a;border-radius:0 var(--r-k) var(--r-k) 0;
  font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;transition:background .22s;
}
.bulten button:hover{background:#e9b34e}

.foot{background:var(--zemin);border-top:1px solid var(--hair);padding-top:66px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr;gap:44px;padding-bottom:54px;min-width:0}
.foot-marka img{height:38px;width:auto}
.foot-marka p{margin-top:20px;font-size:14px;line-height:1.68;color:var(--gri);max-width:34ch}
.foot-sos{display:flex;gap:8px;margin-top:24px}
.foot-sos a{
  width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--hair);border-radius:50%;
  color:var(--grafit);transition:border-color .22s,color .22s,background .22s,transform .22s;
}
.foot-sos a:hover{border-color:var(--grafit);background:var(--zemin2);transform:translateY(-2px)}
.foot-sos svg{width:16px;height:16px;fill:currentColor}
.foot h4{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-bottom:19px}
.foot-lst li + li{margin-top:10px}
.foot-lst a{font-size:14px;color:var(--gri);transition:color .18s}
.foot-lst a:hover{color:var(--ink)}
.foot-ile li{display:flex;gap:12px;font-size:14px;color:var(--gri);line-height:1.6}
.foot-ile li + li{margin-top:14px}
.foot-ile svg{flex:none;width:16px;height:16px;margin-top:3px;stroke:currentColor;stroke-width:1.6;fill:none;color:var(--acik)}
.foot-ile a:hover{color:var(--ink)}
.foot-ile b{display:block;font-weight:600;color:var(--ink)}

.foot-son{border-top:1px solid var(--hair);padding:22px 0;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.foot-son p{font-size:13px;color:var(--acik)}
.foot-son nav{display:flex;gap:20px;flex-wrap:wrap}
.foot-son nav a{font-size:13px;color:var(--gri);transition:color .18s}
.foot-son nav a:hover{color:var(--ink)}
.odeme{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.odeme-k{
  height:28px;padding:0 9px;display:grid;place-items:center;
  border:1px solid var(--hair);border-radius:var(--r-k);background:#fff;
}
.odeme-k svg{height:15px;width:auto;display:block}
.ref h3 a{transition:color .22s}
.ref:hover h3 a{color:var(--altin-koyu)}
.ref-git{
  margin-top:11px;display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:600;color:var(--ink);
}
.ref-git svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;transition:transform .25s}
.ref:hover .ref-git{color:var(--altin-koyu)}
.ref:hover .ref-git svg{transform:translateX(3px)}

.odeme-k--yazi{
  font-size:10.5px;font-weight:700;letter-spacing:.05em;color:var(--gri);
}

/* ==========================================================================
   WHATSAPP
   ========================================================================== */
.wa{position:fixed;right:26px;bottom:26px;z-index:180}

/* Marka altını + hover'da çevreyi saran renk halkası.
   Fare yaklaşınca: (1) çevrede dönen degrade halka belirir, (2) kapsül yana
   açılır, (3) etiket kayarak gelir. Üçü ayrı gecikmelerle olduğu için hareket
   tek bloklu bir genişleme gibi durmuyor. */
/* Açı değişkeni animasyonlanabilsin diye kayıtlı özellik; desteklenmeyen
   tarayıcıda kenar statik kalır, buton yine çalışır. */
@property --wa-aci{syntax:'<angle>';initial-value:0deg;inherits:false}

/* Dolu renkli daire yerine BEYAZ kapsül + canlı kenar hattı.
   Fare yaklaşınca kenarda bir ışık dönüyor, dışa doğru tek bir dalga
   açılıyor, kapsül yana genişleyip etiketi gösteriyor. */
.wa-btn{
  position:relative;display:flex;align-items:center;gap:0;
  height:56px;width:56px;padding:0;border-radius:999px;
  background:#fff;color:var(--altin-koyu);
  box-shadow:0 14px 32px -12px rgba(20,21,23,.3);
  transition:width .46s cubic-bezier(.22,.68,.3,1) .1s,
             background .34s ease,color .34s ease,box-shadow .34s ease;
}

/* kenar hattı — conic degrade, maskeyle yalnız 2px'lik çerçevede görünür */
.wa-btn::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;
  background:conic-gradient(from var(--wa-aci),
    var(--hair-koyu) 0 58%, var(--altin) 72%, #fff3d6 79%, var(--altin) 86%,
    var(--hair-koyu) 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  transition:opacity .3s ease;
}
.wa:hover .wa-btn::before,.wa-btn:focus-visible::before{
  animation:waKenar 2.6s linear infinite;
}
@keyframes waKenar{to{--wa-aci:360deg}}

/* dışa açılan tek dalga — fare yaklaşınca bir kez */
.wa-btn::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  border:1.5px solid var(--altin);opacity:0;pointer-events:none;
}
.wa:hover .wa-btn::after{animation:waDalga .95s cubic-bezier(.22,.68,.3,1)}
@keyframes waDalga{
  from{opacity:.65;transform:scale(1)}
  to{opacity:0;transform:scale(1.55)}
}

.wa-ic{
  flex:none;width:56px;height:56px;display:grid;place-items:center;
  border-radius:999px;background:transparent;
}
.wa-ikon{
  width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .5s cubic-bezier(.34,1.4,.5,1);
}
.wa-etiket{
  flex:none;padding-right:20px;white-space:nowrap;
  font-size:14px;font-weight:600;letter-spacing:-.01em;
  opacity:0;transform:translateX(-10px);
  transition:opacity .3s ease .3s,transform .44s cubic-bezier(.22,.68,.3,1) .26s;
}

.wa:hover .wa-btn,.wa-btn:focus-visible{
  width:206px;background:var(--altin);color:#22242a;
  box-shadow:0 20px 42px -14px rgba(216,162,54,.62);
}
.wa:hover .wa-etiket,.wa-btn:focus-visible .wa-etiket{opacity:1;transform:none}
.wa:hover .wa-ikon{transform:scale(1.06) rotate(-5deg)}

/* Panel açıkken kapsül AÇIK kalır, yalnız sakinleşir (grafite döner, kenar
   ışığı söner).
   Önce daralıyordu: fare yaklaşınca kapsül açılıyor, "Destek" beliriyor,
   panel gelir gelmez ikisi de geri kapanıyordu. Yarım saniyede aç-kapa —
   köşeye bakan kişi hareketin bittiğini anlayamıyordu. Açık kalınca panelin
   altında sabit bir çapa oluyor ve tek bir akış görünüyor. */
.wa.acik .wa-btn{width:206px;background:var(--grafit);color:#fff}
.wa.acik .wa-btn::before,.wa.acik .wa-btn::after{opacity:0;animation:none}
.wa.acik .wa-etiket{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .wa-btn,.wa-ic,.wa-ikon,.wa-etiket{transition-duration:.01ms}
  .wa:hover .wa-btn::before,.wa:hover .wa-btn::after{animation:none}
}

/* Buton ile panel arasındaki 14px'lik boşluk için görünmez köprü.
   Fare butondan panele çıkarken o boşlukta `.wa` alanının DIŞINDA kalıyor,
   kapanış sayacı başlıyor ve panel tam varılmışken kapanıyordu. Köprü
   yalnız panel AÇIKKEN vardır — kapalıyken sayfanın o bölgesindeki
   tıklamaları yutmasın. Panel kadar geniştir (fare panelin sol ucuna
   doğru da çıkabilir), sağa hizalıdır. */
.wa.acik::after{
  content:"";position:absolute;right:0;bottom:100%;
  width:min(302px,calc(100vw - 32px));height:18px;
}

.wa-panel{
  position:absolute;right:0;bottom:calc(100% + 14px);
  width:302px;background:#fff;border-radius:14px;overflow:hidden;
  box-shadow:0 26px 60px -18px rgba(20,21,23,.4);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.95);transform-origin:bottom right;
  transition:opacity .28s,transform .36s cubic-bezier(.22,.68,.3,1),visibility .28s;
  --wa-gecikme:0ms;
}
.wa.acik .wa-panel{opacity:1;visibility:visible;transform:translateY(0) scale(1)}

/* 1. aşama — renkli alan: köşeden yayılan dolgu */
.wa-panel::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(158deg,#075E54 0%,#128C7E 46%,#25D366 100%);
  transform:scale(.25);transform-origin:bottom right;opacity:0;
  transition:transform .52s cubic-bezier(.22,.9,.28,1),opacity .3s ease;
}
.wa.acik .wa-panel::before{transform:scale(1);opacity:1}

/* 2. aşama — içerik: renkli alan yerleştikten sonra sırayla biniyor */
.wa-ust,.wa-govde{position:relative;z-index:1}
.wa-ust,.wa-govde > *{
  opacity:0;transform:translateY(9px);
  transition:opacity .34s ease,transform .44s cubic-bezier(.22,.68,.3,1);
}
/* içerik sırayla biniyor: önce başlık şeridi, sonra kanallar */
.wa.acik .wa-ust{opacity:1;transform:none;transition-delay:.24s}
.wa.acik .wa-govde > *{opacity:1;transform:none}
.wa.acik .wa-govde > *:nth-child(1){transition-delay:.32s}
.wa.acik .wa-govde > *:nth-child(2){transition-delay:.39s}
.wa.acik .wa-govde > *:nth-child(3){transition-delay:.46s}
.wa.acik .wa-govde > *:nth-child(4){transition-delay:.53s}

/* başlık şeridinin görünümü */
.wa-ust{
  display:flex;align-items:flex-start;gap:11px;padding:16px 16px 14px;
  background:linear-gradient(150deg,var(--grafit),#2a2b30);color:#fff;
}
.wa-kim{flex:1;min-width:0}
.wa-kim b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.wa-kim i{
  display:flex;align-items:center;gap:6px;margin-top:3px;
  font-style:normal;font-size:11.5px;color:rgba(255,255,255,.72);
}
.wa-nokta{
  width:7px;height:7px;border-radius:50%;background:#3ddc84;flex:none;
  box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:dstkNabiz 2.4s ease-out infinite;
}
@keyframes dstkNabiz{
  0%{box-shadow:0 0 0 0 rgba(61,220,132,.55)}
  70%{box-shadow:0 0 0 7px rgba(61,220,132,0)}
  100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}
}
.wa-kapat{
  flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.12);color:#fff;transition:background .2s;
}
.wa-kapat:hover{background:rgba(255,255,255,.24)}
.wa-kapat svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}

.wa-govde{padding:10px;background:#fff;display:flex;flex-direction:column;gap:6px}

/* ---- destek kanalı satırı ---------------------------------------------
   Her kanalın kendi rengi var; hover'da renk SOLDAN SAĞA dolarak satırı
   kaplıyor (arka planı bir anda değiştirmek yerine). */
.dk{
  --dk-renk:var(--altin);
  position:relative;display:flex;align-items:center;gap:12px;
  padding:11px 12px;border-radius:var(--r-k);overflow:hidden;
  background:linear-gradient(90deg,var(--zemin2),var(--zemin2)) no-repeat left center/0 100%;
  transition:background-size .42s cubic-bezier(.22,.68,.3,1);
}
.dk:hover{background-size:100% 100%}
.dk-ik{
  flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--dk-renk) 14%,#fff);color:var(--dk-renk);
  transition:transform .42s cubic-bezier(.34,1.4,.5,1),background .3s;
}
.dk:hover .dk-ik{transform:scale(1.08) rotate(-4deg);background:var(--dk-renk);color:#fff}
.dk-ik svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.dk--wa .dk-ik svg{fill:currentColor;stroke:none}
.dk-yz{flex:1;min-width:0}
.dk-yz b{display:block;font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.dk-yz i{display:block;margin-top:1px;font-style:normal;font-size:12px;color:var(--acik)}
.dk-ok{
  flex:none;font-size:15px;color:var(--acik);
  opacity:0;transform:translateX(-6px);
  transition:opacity .28s ease,transform .38s cubic-bezier(.22,.68,.3,1),color .28s;
}
.dk:hover .dk-ok{opacity:1;transform:none;color:var(--dk-renk)}

.dk--wa{--dk-renk:#25D366}
.dk--tel{--dk-renk:var(--altin-koyu)}
.dk--posta{--dk-renk:#3E6BE0}
.dk--teklif{--dk-renk:var(--grafit)}

/* ==========================================================================
   MOBİL PANEL
   ========================================================================== */
.mob-ac{display:none;width:44px;height:44px;place-items:center;color:var(--grafit);margin-left:-10px}
.mob-ac svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.8;fill:none}
.perde{position:fixed;inset:0;background:rgba(24,25,28,.52);opacity:0;visibility:hidden;
       transition:opacity .3s,visibility .3s;z-index:190}
.perde.acik{opacity:1;visibility:visible}
.mob{
  position:fixed;top:0;left:0;bottom:0;width:min(400px,88vw);background:#fff;z-index:200;
  transform:translateX(-100%);transition:transform .36s cubic-bezier(.22,.68,.3,1);
  display:flex;flex-direction:column;
}
.mob.acik{transform:translateX(0)}
.mob-ust{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--hair)}
.mob-ust img{height:30px;width:auto}
.mob-kapat{width:40px;height:40px;display:grid;place-items:center;color:var(--grafit)}
.mob-kapat svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.8;fill:none}
.mob-govde{flex:1;overflow-y:auto;padding:8px 0 28px}
.mob-govde > ul > li{border-bottom:1px solid var(--hair)}
.mob-bas{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 22px;
  font-size:15px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--grafit);text-align:left;
}
.mob-bas svg{flex:none;width:11px;height:11px;stroke:currentColor;stroke-width:2.2;fill:none;transition:transform .26s}
.mob-bas[aria-expanded="true"]{color:var(--ink)}
.mob-bas[aria-expanded="true"] svg{transform:rotate(180deg)}
.mob-alt{display:none;padding:0 22px 16px}
.mob-alt.acik{display:block}
.mob-alt li a{display:block;padding:9px 0;font-size:14.5px;color:var(--gri)}
.mob-alt li a:hover{color:var(--ink)}
.mob-ekstra{padding:22px;border-top:1px solid var(--hair);display:grid;gap:11px}
.mob-ekstra a{font-size:14.5px;color:var(--gri)}

/* ==========================================================================
   DUYARLI
   ========================================================================== */
@media (max-width:1280px){
  :root{--gutter:28px}
  .ref-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .urun-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .yeni-sira .urun{width:calc((100vw - 2*var(--gutter) - 3*16px)/4)}
  /* Dar ekranda önizleme görseli düşer, panel tek sütuna iner. */
  .mega{grid-template-columns:1fr;width:min(520px, calc(100vw - var(--gutter) * 2))}
  .mega-gorsel{display:none}
    .mega-kol{margin:0 14px}
  .foot-grid{grid-template-columns:1fr 1fr 1fr;gap:40px}
}
@media (max-width:1080px){
  .head .kap{gap:22px}
  .ara{max-width:none}
  .anlati-grid{grid-template-columns:1fr;gap:40px}
  .anlati-med{aspect-ratio:16/10}
  .mega-kol{columns:1}
}
@media (max-width:900px){
  :root{--head-h:74px}
  .ust,.nav{display:none}
  .aks-i span,.aks-i small{display:none}
  .mob-ac{display:grid}
  .logo img{height:34px}
  .aks{gap:0}
  .aks-i{padding:9px 10px}
  .aks-say{left:20px}
  /* arama alt satıra iner — kap'ın sarması şart, yoksa sayfa yatay taşar */
  .head .kap{gap:14px;flex-wrap:wrap;height:auto;padding-top:14px;padding-bottom:14px}
  .ara{order:3;flex:1 0 100%;max-width:none;min-width:0}
  .ara input,.ara button{height:44px}

  .story-blok{padding:16px 0 14px}
  .story-ray{gap:20px}
  .story{width:76px}
  .story-halka{width:72px;height:72px}
  .story-ic{padding:7px}
  .story-ad{font-size:12.5px;margin-top:9px}
  .story-alt{font-size:10.5px}
  .story-ok{display:none}

  .hero-ray{height:auto;min-height:0}
  .hero-s{position:relative;inset:auto;display:none}
  .hero-s--aktif{display:block}
  .hero-med{position:relative;height:240px}
  .hero-med::after{background:linear-gradient(to bottom,rgba(255,255,255,0) 40%,rgba(255,255,255,.92) 100%)}
  .hero-kap{padding-top:26px;padding-bottom:52px;height:auto}
  .hero-ic{max-width:none}
  .hero-bas{color:var(--ink);text-shadow:none}
  .hero-bas em{color:var(--ink)}
  .hero-alt{color:var(--soluk);text-shadow:none}
  .hero-ic .btn--dolu{background:var(--grafit);color:#fff;border-color:var(--grafit)}
  .hero-ok{display:none}
  .hero-nav{position:static;padding:0 var(--gutter) 24px}
  .nokta{display:none}

  .blk{padding:52px 0}
  .blk-bas{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:26px}
  .blk-bas h2{font-size:26px}
  .ref-grid{gap:16px}
  .urun-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .urun{padding:10px 10px 14px}
  .urun-eylem{opacity:1;transform:none;pointer-events:auto;gap:9px}
  .ur-ik{width:38px;height:38px}
  .urun-noktalar{display:none}
  .urun-rz{width:40px;height:40px;font-size:11.5px}
  .yeni-bant{padding:52px 0}
  .yeni-bas{justify-content:flex-start;margin-bottom:24px}
  .yeni-bas h2{font-size:25px}
  .yeni-nav{display:none}
  .yeni-sira{gap:10px}
  .yeni-sira .urun{width:calc((100vw - 2*var(--gutter) - 10px)/2)}
  .story-sira{gap:20px}
  .sekme-bar{overflow-x:auto;scrollbar-width:none}
  .sekme-bar::-webkit-scrollbar{display:none}
  .sekme-d{padding:0 14px 13px;font-size:14px}
  .anlati{padding:56px 0}
  .anlati-yazi h2{font-size:25px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:34px}
  .foot-marka{grid-column:1/-1}
  .bulten .kap{flex-direction:column;align-items:flex-start;gap:22px}
  .bulten form{min-width:0;width:100%}
  .foot-son{flex-direction:column;align-items:flex-start;gap:16px}
  .wa{right:16px;bottom:16px}
  .wa-panel{width:min(302px,calc(100vw - 32px))}
}
@media (max-width:560px){
  :root{--gutter:16px}
  .ref-grid{grid-template-columns:1fr}
  .urun-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .urun-ad{font-size:13.5px}
  .urun-fiyat{gap:6px}
  .urun-fiyat b{font-size:15px}
  .urun-fiyat del{font-size:12.5px}
  .hero-bas{font-size:27px}
  .foot-grid{grid-template-columns:1fr}
  .bulten form{flex-direction:column}
  .bulten input{border-right:1px solid rgba(255,255,255,.18);border-radius:var(--r-k)}
  .bulten button{border-radius:var(--r-k);margin-top:8px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .hero-bas,.hero-alt,.hero-ic .btn{opacity:1;transform:none}
  [data-gorun],[data-gorun] .urun,[data-gorun] .ref,
  [data-gorun] .anlati-med,[data-gorun] .anlati-yazi > *{opacity:1;transform:none}
  .story-sira,.yeni-sira{animation:none}
  .story-akis,.yeni-akis{overflow-x:auto}
  /* açılır menü öğeleri sıralı animasyonla geliyor; hareket kapalıyken
     doğrudan görünür olmalı */
  .mega-kol li,.mega-gorsel{opacity:1;transform:none}
}

/* ==========================================================================
   LİSTE SAYFALARI (kategori / tüm modeller / kampanya)
   ========================================================================== */
.kat-kart-alan{padding:26px 0 0;background:var(--zemin)}
.kat-kart{
  display:grid;grid-template-columns:minmax(0,1fr) 40%;align-items:stretch;
  border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;background:#fff;
}
.kat-kart-yazi{padding:38px 40px;display:flex;flex-direction:column;justify-content:center}
.kat-kart-yazi h1{font-size:33px;font-weight:600;letter-spacing:-.038em}
.kat-kart-yazi p{margin-top:12px;font-size:15.5px;line-height:1.62;color:var(--gri);max-width:52ch}
.kat-kart-med{
  position:relative;min-height:238px;display:grid;place-items:center;padding:18px 30px 18px 0;
  background:radial-gradient(120% 100% at 78% 50%,var(--zemin2) 0%,#fff 72%);
}
.kat-kart-med img{max-height:214px;width:auto;object-fit:contain}

.liste{padding:34px 0 88px}
.liste-kap{display:grid;grid-template-columns:264px minmax(0,1fr);gap:38px;align-items:start}

/* filtre paneli */
.filtre{position:sticky;top:18px;background:#fff;border:1px solid var(--hair);border-radius:var(--r);
  padding:22px 20px}
.filtre-ust{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.filtre-ust h2{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.filtre-kapat{display:none;width:34px;height:34px;place-items:center;color:var(--grafit)}
.filtre-kapat svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none}

.filtre-grup{padding:18px 0;border-bottom:1px solid var(--hair)}
.filtre-grup:last-of-type{border-bottom:0}
.filtre-grup h3{font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin-bottom:11px}
.fl-kutu{display:flex;align-items:center;gap:10px;padding:6px 0;cursor:pointer;font-size:14px;color:var(--gri)}
.fl-kutu input{position:absolute;opacity:0;width:0;height:0}
.fl-isaret{flex:none;width:17px;height:17px;border:1.5px solid var(--hair-koyu);border-radius:3px;
  display:grid;place-items:center;transition:border-color .18s,background .18s}
.fl-isaret::after{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg) scale(0);transition:transform .18s}
.fl-kutu:hover .fl-isaret{border-color:var(--grafit)}
.fl-kutu input:checked ~ .fl-isaret{background:var(--grafit);border-color:var(--grafit)}
.fl-kutu input:checked ~ .fl-isaret::after{transform:rotate(-45deg) scale(1)}
.fl-kutu input:focus-visible ~ .fl-isaret{outline:2px solid var(--altin);outline-offset:2px}
.fl-kutu input:checked ~ .fl-ad{color:var(--ink);font-weight:500}
.fl-ad{flex:1;min-width:0}
ul.fl-renkli{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.fl-renk{flex:none;width:16px;height:16px;border-radius:50%;background:var(--o);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}

/* fiyat aralığı — çift saplı kaydırma */
.fl-bar{position:relative;padding:14px 2px 0}
.fl-bar-ray{position:relative;height:3px;border-radius:2px;background:var(--hair-koyu)}
.fl-bar-dolu{position:absolute;top:0;bottom:0;border-radius:2px;background:var(--grafit)}
.fl-bar input[type="range"]{
  position:absolute;left:0;right:0;top:8px;width:100%;height:20px;margin:0;
  background:none;pointer-events:none;appearance:none;
}
.fl-bar input[type="range"]::-webkit-slider-thumb{
  appearance:none;pointer-events:auto;width:17px;height:17px;border-radius:50%;
  background:#fff;border:2px solid var(--grafit);cursor:grab;
  box-shadow:0 2px 6px -2px rgba(20,21,23,.5);
}
.fl-bar input[type="range"]::-webkit-slider-thumb:active{cursor:grabbing;border-color:var(--altin-koyu)}
.fl-bar input[type="range"]::-moz-range-thumb{
  pointer-events:auto;width:15px;height:15px;border-radius:50%;
  background:#fff;border:2px solid var(--grafit);cursor:grab;
}
.fl-bar input[type="range"]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--altin);outline-offset:2px}
.fl-bar-deger{display:flex;justify-content:space-between;margin-top:16px;font-size:12.5px;color:var(--gri)}

.filtre-alt{padding-top:18px;border-top:1px solid var(--hair);display:grid;gap:10px;justify-items:center}
.btn--tam{width:100%;justify-content:center;height:46px}
.filtre-sifirla{font-size:13px;color:var(--gri);border-bottom:1px solid var(--hair-koyu);
  padding-bottom:2px;transition:color .18s,border-color .18s}
.filtre-sifirla:hover{color:var(--ink);border-color:var(--altin)}

/* araç çubuğu */
.liste-arac{display:flex;align-items:center;gap:18px;padding-bottom:18px;border-bottom:1px solid var(--hair);
  margin-bottom:24px}
.gorunum{display:flex;gap:4px;margin-right:auto}
.gorunum button{
  width:38px;height:38px;display:grid;place-items:center;border-radius:var(--r-k);
  color:var(--acik);transition:color .18s,background .18s;
}
.gorunum button:hover{color:var(--grafit);background:var(--zemin2)}
.gorunum button[aria-pressed="true"]{color:var(--grafit);background:var(--zemin2)}
.gorunum svg{width:19px;height:19px;fill:currentColor}
.filtre-ac{display:none;align-items:center;gap:9px;height:42px;padding:0 16px;border:1px solid var(--hair-koyu);
  border-radius:var(--r-k);font-size:13.5px;font-weight:600;color:var(--grafit)}
.filtre-ac svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.8;fill:none}
.siralama{display:flex;align-items:center;gap:10px;flex:none}
.siralama label{font-size:13px;color:var(--acik)}
.siralama select{
  height:42px;padding:0 34px 0 14px;font:inherit;font-size:13.5px;color:var(--ink);
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%233e3f43' stroke-width='1.6'/></svg>") no-repeat right 12px center/12px;
  border:1px solid var(--hair-koyu);border-radius:var(--r-k);appearance:none;cursor:pointer;
  transition:border-color .18s}
.siralama select:hover{border-color:var(--grafit)}
.siralama select:focus{outline:0;border-color:var(--grafit);box-shadow:0 0 0 3px rgba(62,63,67,.08)}

.secili-filtre{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.sf-etiket{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;
  background:var(--zemin2);border-radius:16px;font-size:12.5px;color:var(--grafit)}
.sf-etiket button{display:grid;place-items:center;width:15px;height:15px;color:var(--acik);transition:color .18s}
.sf-etiket button:hover{color:var(--kirmizi)}
.sf-etiket svg{width:11px;height:11px;stroke:currentColor;stroke-width:2.2;fill:none}

.liste-grid{gap:14px}
.liste-grid[data-kol="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.liste-grid[data-kol="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.liste-grid[data-kol="5"]{grid-template-columns:repeat(5,minmax(0,1fr))}
.urun.gizli{display:none}
.liste-bos{padding:70px 0;text-align:center;color:var(--gri);font-size:15.5px}
.liste-bos .filtre-sifirla{margin-left:8px}

@media (max-width:1240px){
  .liste-grid[data-kol="5"]{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1100px){
  .liste-kap{grid-template-columns:1fr}
  .kat-kart{grid-template-columns:minmax(0,1fr) 38%}
  .kat-kart-yazi{padding:30px 32px}
  .kat-kart-yazi h1{font-size:28px}
  .filtre{
    position:fixed;top:0;left:0;bottom:0;width:min(340px,86vw);z-index:200;border-radius:0;
    border:0;border-right:1px solid var(--hair);overflow-y:auto;padding:20px 22px 30px;
    transform:translateX(-100%);transition:transform .34s cubic-bezier(.22,.68,.3,1);
  }
  .filtre.acik{transform:translateX(0)}
  .filtre-kapat{display:grid}
  .filtre-ac{display:inline-flex}
  .liste-arac{flex-wrap:wrap}
  .gorunum{display:none}
  .filtre-ac{margin-right:auto}
}
@media (max-width:760px){
  .kat-kart{grid-template-columns:1fr}
  .kat-kart-med{min-height:168px;order:-1}
  .kat-kart-med::after{background:linear-gradient(0deg,#fff 0%,rgba(255,255,255,.4) 46%,rgba(255,255,255,0) 100%)}
  .kat-kart-yazi{padding:22px 22px 26px}
  .kat-kart-yazi h1{font-size:25px}
  .liste-grid[data-kol="3"],.liste-grid[data-kol="4"],.liste-grid[data-kol="5"]{
    grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .siralama label{display:none}
  .siralama{flex:1}
  .siralama select{width:100%}
  .liste{padding:24px 0 60px}
}
/* 1100px altında menü sığmıyordu — yazı ve iç boşluk daralır */
@media (max-width:1100px) and (min-width:901px){
  .nav-list > li > a{padding:0 11px;font-size:13px;letter-spacing:0}
  .nav-list > li > a::after{left:11px;right:11px}
  .head .kap{gap:26px}
  .ara{max-width:none}
  .aks-tel span{font-size:13px}
  .aks-i span{font-size:13.5px}
}



/* ==========================================================================
   ÜRÜN DETAY
   ========================================================================== */
.ud{padding:34px 0 20px}
.ud-kap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:start}

/* galeri */
.ud-gal{position:sticky;top:18px}
.ud-buyuk{
  position:relative;aspect-ratio:1/var(--gal-oran,1.02);background:var(--zemin2);
  border-radius:var(--r);overflow:hidden;min-height:270px;padding:28px;
}
.ud-buyuk img{
  position:absolute;inset:28px;width:calc(100% - 56px);height:calc(100% - 56px);object-fit:contain;
  mix-blend-mode:multiply;opacity:0;transition:opacity .4s ease,transform .7s cubic-bezier(.22,.68,.3,1);
}
.ud-buyuk img.aktif{opacity:1}
.ud-buyuk.buyuk img.aktif{transform:scale(1.55);cursor:zoom-out}
.ud-buyuk .urun-rz{top:16px;left:16px}
.ud-zoom{
  position:absolute;right:14px;bottom:14px;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;background:#fff;color:var(--grafit);
  box-shadow:0 6px 16px -8px rgba(20,21,23,.4);transition:background .2s,color .2s;
}
.ud-zoom:hover{background:var(--altin);color:#22242a}
.ud-zoom svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.7;fill:none}

.ud-kucuk{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}

/* Geniş ekranda küçük resimler SOLDA dikey şerit.
   Alt alta dizildiğinde ana görsel (neredeyse kare, sütun genişliğinde) tek
   başına ekranı dolduruyor ve diğer açıları görmek için sayfayı kaydırmak
   gerekiyordu. Şerit yana alınınca ana görsel de daralıp ekrana sığıyor. */
@media (min-width:1101px){
  /* Sütun, karenin (76px) kendisinden GENİŞ olmalı.
     74px iken kare 2px taşıyordu ve `overflow-y:auto` — yazıldığı anda
     `overflow-x` de `auto` olur — o 2px'i kırpıyordu: karelerin kenar
     çizgisi yarım görünüyor, şerit "eksik çizilmiş" gibi duruyordu.
     90px = 76 kare + kaydırma çubuğu payı (şerit ana görselden uzun
     olduğunda kendi içinde kayar). */
  .ud-gal{display:grid;grid-template-columns:90px minmax(0,1fr);gap:14px;align-items:start}
  .ud-buyuk{grid-area:1/2}
  .ud-kucuk{
    grid-area:1/1;flex-direction:column;flex-wrap:nowrap;gap:8px;margin-top:0;
    /* şerit ana görselden uzun olursa kendi içinde kayar, sayfayı uzatmaz */
    min-height:0;overflow-y:auto;scrollbar-width:thin;
  }
  /* Ölçü aşağıdaki genel `.ud-k` kuralından gelir — burada tekrar
     yazmak ölü kuraldı: medya sorgusu özgüllüğü artırmadığı için
     sonra gelen genel kural zaten eziyordu. Dikey şeritte gereken
     tek şey karelerin sıkışmaması. */
  .ud-k{flex:0 0 auto}
}
.ud-k{
  width:76px;height:80px;border:1px solid var(--hair);border-radius:var(--r-k);background:var(--zemin2);
  overflow:hidden;transition:border-color .2s;
}
.ud-k img{width:100%;height:100%;object-fit:contain;padding:7px;mix-blend-mode:multiply}
.ud-k:hover{border-color:var(--hair-koyu)}
.ud-k.aktif{border-color:var(--grafit)}

/* bilgi */
.ud-kat{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--acik)}
.ud-kat a{color:var(--altin-koyu);transition:color .18s}
.ud-kat a:hover{color:var(--altin)}
.ud-bilgi h1{margin-top:10px;font-size:34px;font-weight:600;letter-spacing:-.038em;line-height:1.12}
.ud-kod{margin-top:8px;font-size:13px;color:var(--acik)}
.ud-kod span{color:var(--gri)}

.ud-fiyat{margin-top:20px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.ud-fiyat del{font-size:17px;color:var(--kirmizi);text-decoration-thickness:1px}
.ud-fiyat b{font-size:31px;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.ud-oran{padding:4px 10px;border-radius:14px;background:var(--kirmizi);color:#fff;
  font-size:11.5px;font-weight:700;letter-spacing:.04em}
.ud-kdv{margin-top:6px;font-size:12.5px;color:var(--acik)}
.ud-ozet{margin-top:20px;font-size:15.5px;line-height:1.66;color:var(--gri);
  padding-bottom:24px;border-bottom:1px solid var(--hair)}

.ud-secim{padding:22px 0;border-bottom:1px solid var(--hair)}
.ud-secim-bas{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:13px}
.ud-secim-bas h2{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.ud-secili{font-size:13.5px;color:var(--gri)}

.ud-kumas{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.ud-kg{
  padding:13px 13px 12px;border:1.5px solid var(--hair);border-radius:var(--r-k);text-align:left;
  transition:border-color .2s,background .2s;
}
.ud-kg b{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.ud-kg i{display:block;margin-top:4px;font-style:normal;font-size:11.5px;line-height:1.4;color:var(--acik)}
.ud-kg em{display:block;margin-top:7px;font-style:normal;font-size:12px;font-weight:600;color:var(--altin-koyu)}
.ud-kg:hover{border-color:var(--hair-koyu);background:var(--zemin2)}
.ud-kg.aktif{border-color:var(--grafit);background:var(--zemin2)}

.ud-renk{display:flex;flex-wrap:wrap;gap:10px}
.ud-r{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid transparent;transition:border-color .2s,transform .2s}
.ud-r span:first-child{width:28px;height:28px;border-radius:50%;background:var(--r);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.ud-r:hover{transform:scale(1.08)}
.ud-r.aktif{border-color:var(--grafit)}
.ud-not{margin-top:12px;font-size:12.5px;color:var(--acik)}
.ud-not a{color:var(--altin-koyu);border-bottom:1px solid currentColor}

.ud-varyant{display:flex;flex-wrap:wrap;gap:10px}
.ud-v{
  display:flex;align-items:center;gap:11px;padding:9px 14px 9px 9px;
  border:1.5px solid var(--hair);border-radius:var(--r-k);transition:border-color .2s,background .2s;
}
.ud-v img{width:40px;height:44px;object-fit:contain}
.ud-v b{display:block;font-size:13px;font-weight:600;color:var(--ink)}
.ud-v i{font-style:normal;font-size:12px;color:var(--gri)}
.ud-v:hover{border-color:var(--grafit);background:var(--zemin2)}

.ud-eylem{margin-top:26px;display:flex;gap:11px}
.ud-sepet{flex:1;justify-content:center;height:56px}
.ud-fav{
  width:56px;height:56px;flex:none;border:1px solid var(--hair-koyu);border-radius:var(--r-k);
  display:grid;place-items:center;color:var(--grafit);transition:border-color .2s,color .2s,background .2s;
}
.ud-fav svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.6;fill:none}
.ud-fav:hover{border-color:var(--kirmizi);color:var(--kirmizi)}
.ud-fav[data-dolu="1"]{background:var(--kirmizi);border-color:var(--kirmizi);color:#fff}
.ud-fav[data-dolu="1"] svg{fill:currentColor}

.ud-teklif{
  margin-top:14px;display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;
  color:var(--grafit);border-bottom:1px solid var(--hair-koyu);padding-bottom:4px;
  transition:color .2s,border-color .2s;
}
.ud-teklif:hover{color:var(--altin-koyu);border-color:var(--altin)}
.ud-teklif svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none;transition:transform .3s}
.ud-teklif:hover svg{transform:translateX(4px)}

.ud-guven{margin-top:26px;padding-top:22px;border-top:1px solid var(--hair);
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ud-guven li{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  font-size:12.5px;color:var(--gri);line-height:1.35}
.ud-guven svg{width:22px;height:22px;stroke:var(--altin-koyu);stroke-width:1.5;fill:none}

/* açıklama */
.ud-metin{padding:56px 0 20px}
.ud-metin-kap{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:56px;align-items:start}
.ud-metin h2{font-size:24px;font-weight:600;letter-spacing:-.03em;margin-bottom:16px}
.ud-metin p{margin-bottom:14px;font-size:15.5px;line-height:1.75;color:var(--gri)}
.ud-yan{background:var(--zemin2);border-radius:var(--r);padding:26px 26px 22px}
.ud-yan h3{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
.ud-yan dl{display:grid;gap:0}
.ud-yan dt{font-size:12.5px;font-weight:600;color:var(--ink);letter-spacing:.02em}
.ud-yan dd{margin:4px 0 14px;font-size:13.5px;line-height:1.55;color:var(--gri)}
.ud-yan dd:last-of-type{margin-bottom:8px}
.ud-yan-not{padding-top:12px;border-top:1px solid var(--hair-koyu);font-size:11.5px;color:var(--acik)}

@media (max-width:1100px){
  .ud-kap{grid-template-columns:1fr;gap:36px}
  .ud-gal{position:static;min-width:0}
  .ud-buyuk{max-width:min(520px,100%);margin:0 auto}
  .ud-kucuk{justify-content:center}
  .ud-metin-kap{grid-template-columns:1fr;gap:32px}
}
@media (max-width:640px){
  .ud{padding:22px 0 10px}
  .ud-eylem{flex-wrap:wrap}
  .ud-adet{order:1;height:50px}
  .ud-sepet{order:3;flex:1 0 100%;height:52px}
  .ud-fav{order:2;width:50px;height:50px}
  .ud-k{width:60px;height:64px}
  .ud-rv{width:70px}
  .ud-rv img{height:58px}
  .ud-bilgi h1{font-size:26px}
  .ud-fiyat b{font-size:26px}
  .ud-kumas{grid-template-columns:1fr}
  .ud-guven{grid-template-columns:1fr;gap:12px}
  .ud-guven li{flex-direction:row;text-align:left}
  .ud-metin{padding:36px 0 10px}
}

/* ---------- ürün detay: renk varyantları ---------- */
.ud-renkler{display:flex;flex-wrap:wrap;gap:10px}
.ud-rv{
  width:78px;border:1.5px solid var(--hair);border-radius:var(--r-k);overflow:hidden;
  background:#fff;transition:border-color .2s,transform .22s;
}
.ud-rv img{width:100%;height:66px;object-fit:contain;padding:5px;background:var(--zemin2)}
.ud-rv span{
  display:block;padding:6px 4px 7px;font-size:11px;line-height:1.2;color:var(--gri);
  text-align:center;border-top:1px solid var(--hair);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ud-rv:hover{border-color:var(--hair-koyu);transform:translateY(-2px)}
.ud-rv.aktif{border-color:var(--grafit)}
.ud-rv.aktif span{color:var(--ink);font-weight:600}

/* ---------- ürün detay: alt sekmeler ---------- */
.ud-alt{padding:58px 0 10px}
.ud-sekme-bar{display:flex;gap:4px;border-bottom:1px solid var(--hair);margin-bottom:34px;overflow-x:auto;
  scrollbar-width:none}
.ud-sekme-bar::-webkit-scrollbar{display:none}
.ud-sekme{
  flex:none;padding:0 20px 15px;font-size:14.5px;font-weight:600;letter-spacing:-.01em;
  color:var(--acik);position:relative;transition:color .2s;white-space:nowrap;
}
.ud-sekme::after{
  content:"";position:absolute;left:20px;right:20px;bottom:-1px;height:2px;background:var(--altin);
  transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.22,.68,.3,1);
}
.ud-sekme:hover{color:var(--gri)}
.ud-sekme.aktif{color:var(--ink)}
.ud-sekme.aktif::after{transform:scaleX(1)}

/* ürün detayı — dönüşümlü metin/görsel blokları */
.ud-d{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;
  align-items:center;padding:14px 0 42px}
.ud-d + .ud-d{border-top:1px solid var(--hair);padding-top:42px}
.ud-d--ters .ud-d-yazi{order:2}
.ud-d-yazi h3{font-size:23px;font-weight:600;letter-spacing:-.03em;margin-bottom:14px}
.ud-d-yazi p{margin-bottom:14px;font-size:16px;line-height:1.78;color:var(--gri)}
.ud-d-yazi p:last-child{margin-bottom:0}
.ud-d-yazi strong{color:var(--ink);font-weight:600}
.ud-d-med{overflow:hidden;border-radius:var(--r)}
.ud-d-med img{
  width:100%;height:330px;object-fit:cover;border-radius:var(--r);
  transition:transform .62s cubic-bezier(.22,.68,.3,1);
}
.ud-d-med:hover img{transform:scale(1.06)}

/* Ürün karesi ZEMİNSİZ: gri kutu ürünü kesip çerçeveliyordu, artık görsel
   doğrudan sayfada duruyor. `mix-blend-mode` şeffaf WebP'nin beyaz köşelerini
   sayfa zeminine karıştırıyor. */
.ud-d-med--urun{background:none;border-radius:0;padding:0;overflow:visible}
.ud-d-med--urun img{
  height:330px;object-fit:contain;mix-blend-mode:multiply;border-radius:0;
  transition:transform .62s cubic-bezier(.22,.68,.3,1);
}
.ud-d-med--urun:hover img{transform:scale(1.07)}

/* teknik tablolar */
.tk{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 26px;align-items:start}
.tk-tablo:last-child{grid-column:1/-1}
.tk-tablo h3{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--grafit)}
.tk-tablo table{width:100%;border-collapse:collapse}
.tk-tablo tr{border-bottom:1px solid var(--hair)}
.tk-tablo tr:nth-child(odd){background:var(--zemin2)}
.tk-tablo th{width:46%;padding:12px 16px;text-align:left;font-size:13.5px;font-weight:600;color:var(--ink)}
.tk-tablo td{padding:12px 16px;font-size:14px;color:var(--gri)}
.tk-not{margin-top:22px;padding:16px 20px;background:var(--zemin2);border-radius:var(--r-k);
  font-size:13px;line-height:1.65;color:var(--gri)}

/* adet seçimi */
.ud-adet{display:flex;align-items:center;border:1px solid var(--hair-koyu);border-radius:var(--r-k);
  flex:none;height:56px}
.ud-a{width:44px;height:100%;display:grid;place-items:center;font-size:19px;color:var(--grafit);
  transition:background .18s,color .18s}
.ud-a:hover{background:var(--zemin2);color:var(--ink)}
.ud-adet-in{
  width:48px;height:100%;border:0;border-left:1px solid var(--hair);border-right:1px solid var(--hair);
  text-align:center;font:inherit;font-size:15.5px;font-weight:600;color:var(--ink);
  appearance:textfield;-moz-appearance:textfield;
}
.ud-adet-in::-webkit-outer-spin-button,.ud-adet-in::-webkit-inner-spin-button{appearance:none;margin:0}
.ud-adet-in:focus{outline:0;background:var(--zemin2)}

@media (max-width:900px){
  .ud-d{grid-template-columns:1fr;gap:24px;padding-bottom:32px}
  .ud-d + .ud-d{padding-top:32px}
  .ud-d--ters .ud-d-yazi{order:0}
  .ud-d-yazi h3{font-size:20px}
  .ud-d-med img{height:230px}
  .ud-d-med--urun img{height:230px}
  .tk{grid-template-columns:1fr;gap:26px}
  .ud-alt{padding:40px 0 6px}
  .tk-tablo th{width:48%;padding:10px 13px;font-size:13px}
  .tk-tablo td{padding:10px 13px;font-size:13.5px}
}

/* ==========================================================================
   SEPET
   ========================================================================== */
.sp{padding:34px 0 80px}
.sp-bas{font-size:34px;font-weight:600;letter-spacing:-.038em;margin-bottom:28px}
.sp-kap{display:grid;grid-template-columns:minmax(0,1fr) 348px;gap:34px;align-items:start}
.sp-liste{display:grid;gap:14px}

.sp-u{
  display:grid;grid-template-columns:112px minmax(0,1fr) auto auto;gap:20px;align-items:center;
  background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:16px 20px 16px 16px;
}
.sp-u-med{display:block;width:112px;height:120px;background:var(--zemin2);border-radius:var(--r-k);overflow:hidden}
.sp-u-med img{width:100%;height:100%;object-fit:contain;padding:8px;mix-blend-mode:multiply}
.sp-u-kat{font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--acik)}
.sp-u-bilgi h2{margin-top:5px;font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.sp-u-bilgi h2 a:hover{color:var(--altin-koyu)}
.sp-u-renk{margin-top:6px;font-size:13.5px;color:var(--gri)}
.sp-u-renk b{font-weight:600;color:var(--ink)}
.sp-sil{
  margin-top:12px;display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--acik);
  transition:color .18s;
}
.sp-sil:hover{color:var(--kirmizi)}
.sp-sil svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.6;fill:none}

.sp-u-adet{display:flex;align-items:center;border:1px solid var(--hair-koyu);border-radius:var(--r-k)}
.sp-a{width:36px;height:42px;display:grid;place-items:center;font-size:17px;color:var(--grafit);
  transition:background .18s,color .18s}
.sp-a:hover{background:var(--zemin2);color:var(--ink)}
.sp-adet-in{
  width:44px;height:42px;border:0;border-left:1px solid var(--hair);border-right:1px solid var(--hair);
  text-align:center;font:inherit;font-size:14.5px;font-weight:600;color:var(--ink);
  appearance:textfield;-moz-appearance:textfield;
}
.sp-adet-in::-webkit-outer-spin-button,.sp-adet-in::-webkit-inner-spin-button{appearance:none;margin:0}
.sp-adet-in:focus{outline:0;background:var(--zemin2)}

.sp-u-fiyat{text-align:right;min-width:132px}
.sp-u-fiyat del{display:block;font-size:13px;color:var(--kirmizi);text-decoration-thickness:1px}
.sp-u-fiyat b{display:block;font-size:19px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.sp-u-fiyat i{display:block;margin-top:3px;font-style:normal;font-size:12px;color:var(--acik)}

/* özet */
.sp-ozet{position:sticky;top:18px;background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:24px}
.sp-ozet > h2{font-size:13px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;margin-bottom:18px}
.sp-satir{display:grid;gap:13px;padding-bottom:16px;border-bottom:1px solid var(--hair)}
.sp-satir > div{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.sp-satir dt{font-size:14px;color:var(--gri)}
.sp-satir dt small{display:block;font-size:11.5px;color:var(--acik)}
.sp-satir dd{margin:0;font-size:14.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.sp-yesil{color:#2f7a4a !important}
.sp-toplam{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:16px 0 4px}
.sp-toplam span{font-size:15px;font-weight:600;color:var(--ink)}
.sp-toplam b{font-size:25px;font-weight:600;letter-spacing:-.03em}
.sp-kdv{font-size:12px;color:var(--acik);margin-bottom:18px}
.sp-devam{display:block;margin-top:12px;text-align:center;font-size:13.5px;color:var(--gri);
  transition:color .18s}
.sp-devam:hover{color:var(--ink)}
.sp-kutu{margin-top:22px;padding-top:20px;border-top:1px solid var(--hair)}
.sp-kutu h3{font-size:14px;font-weight:600;letter-spacing:-.01em;margin-bottom:7px}
.sp-kutu p{font-size:13px;line-height:1.6;color:var(--gri)}
.sp-kutu a{display:inline-flex;align-items:center;gap:7px;margin-top:10px;font-size:13px;
  font-weight:600;color:var(--altin-koyu)}
.sp-kutu svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.8;fill:none;transition:transform .3s}
.sp-kutu a:hover svg{transform:translateX(4px)}

/* boş sepet */
.sp-bos{text-align:center;padding:70px 20px 80px}
.sp-bos > svg{width:56px;height:56px;stroke:var(--hair-koyu);stroke-width:1.3;fill:none;margin:0 auto 20px}
.sp-bos h2{font-size:25px;font-weight:600;letter-spacing:-.03em}
.sp-bos p{margin-top:10px;font-size:15.5px;color:var(--gri);max-width:46ch;margin-inline:auto}
.sp-bos-btn{margin-top:26px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ==========================================================================
   ÖDEME
   ========================================================================== */
.od{padding:30px 0 80px}
.od .sp-bas{margin-bottom:22px}
.od-adim{display:flex;align-items:center;gap:10px;margin-bottom:32px;flex-wrap:wrap}
.od-adim li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--acik);font-weight:500}
.od-adim li + li::before{content:"";width:26px;height:1px;background:var(--hair-koyu);margin-right:2px}
.od-adim span{
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid var(--hair-koyu);font-size:13px;font-weight:600;
}
.od-adim .aktif{color:var(--ink)}
.od-adim .aktif span{border-color:var(--grafit);background:var(--grafit);color:#fff}
.od-adim .tamam{color:var(--gri)}
.od-adim .tamam span{border-color:var(--altin);background:var(--altin);color:#22242a}

.od-kap{display:grid;grid-template-columns:minmax(0,1fr) 348px;gap:34px;align-items:start}
.od-blok{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:26px;margin-bottom:16px}
.od-blok h2{font-size:17px;font-weight:600;letter-spacing:-.022em;margin-bottom:18px}

.od-alan{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.od-in--tam{grid-column:1/-1}
.od-in label{display:block;font-size:13px;font-weight:500;color:var(--gri);margin-bottom:6px}
.od-in label span{color:var(--acik);font-weight:400}
.od-in input,.od-in select,.od-in textarea{
  width:100%;padding:0 14px;height:46px;font:inherit;font-size:14.5px;color:var(--ink);
  background:#fff;border:1px solid var(--hair-koyu);border-radius:var(--r-k);
  transition:border-color .18s,box-shadow .18s;
}
.od-in textarea{height:auto;padding:12px 14px;line-height:1.55;resize:vertical}
.od-in select{appearance:none;cursor:pointer;
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%233e3f43' stroke-width='1.6'/></svg>") no-repeat right 12px center/12px}
.od-in input:focus,.od-in select:focus,.od-in textarea:focus{
  outline:0;border-color:var(--grafit);box-shadow:0 0 0 3px rgba(62,63,67,.08)}
.od-in .hatali{border-color:var(--kirmizi);box-shadow:0 0 0 3px rgba(179,38,30,.09)}
input.hatali,select.hatali,textarea.hatali{border-color:var(--kirmizi) !important}

.od-onay{display:flex;align-items:flex-start;gap:11px;cursor:pointer;font-size:14px;color:var(--gri);line-height:1.5}
.od-onay input{position:absolute;opacity:0;width:0;height:0}
.od-onay .fl-isaret{margin-top:1px}
.od-onay input:checked ~ .fl-isaret{background:var(--grafit);border-color:var(--grafit)}
.od-onay input:checked ~ .fl-isaret::after{transform:rotate(-45deg) scale(1)}
.od-onay--tek{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:18px 20px}
.od-onay--tek.hatali{border-color:var(--kirmizi)}
.od-onay a{color:var(--altin-koyu);border-bottom:1px solid currentColor}
.od-uyari{margin-top:8px;font-size:13px;color:var(--kirmizi)}
.od-fatura{margin-top:18px}
.od-tip{display:flex;gap:8px;margin-bottom:16px}
.od-tip-d{padding:9px 18px;border:1.5px solid var(--hair);border-radius:var(--r-k);
  font-size:13.5px;font-weight:600;color:var(--gri);transition:border-color .2s,color .2s,background .2s}
.od-tip-d.aktif{border-color:var(--grafit);color:var(--ink);background:var(--zemin2)}

.od-secenek{display:grid;gap:10px}
.od-kart{cursor:pointer}
.od-kart input{position:absolute;opacity:0;width:0;height:0}
.od-kart-ic{
  display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:center;
  padding:16px 18px;border:1.5px solid var(--hair);border-radius:var(--r-k);
  transition:border-color .2s,background .2s;
}
.od-kart-ic b{font-size:14.5px;font-weight:600;color:var(--ink)}
.od-kart-ic i{grid-column:1;font-style:normal;font-size:13px;color:var(--gri)}
.od-kart-ic em{grid-column:2;grid-row:1/3;font-style:normal;font-size:12.5px;font-weight:600;
  color:var(--altin-koyu);white-space:nowrap}
.od-kart:hover .od-kart-ic{border-color:var(--hair-koyu)}
.od-kart input:checked ~ .od-kart-ic{border-color:var(--grafit);background:var(--zemin2)}
.od-kart input:focus-visible ~ .od-kart-ic{outline:2px solid var(--altin);outline-offset:2px}

.od-bilgi{margin-top:16px;padding:16px 18px;background:var(--zemin2);border-radius:var(--r-k);
  font-size:13.5px;line-height:1.65;color:var(--gri)}
.od-bilgi b{color:var(--ink)}

.od-alt{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px}
.od-geri{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--gri);
  transition:color .18s}
.od-geri:hover{color:var(--ink)}
.od-geri svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none;transition:transform .3s}
.od-geri:hover svg{transform:translateX(-4px)}

/* özet */
.od-ozet{position:sticky;top:18px;background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:24px}
.od-ozet > h2{font-size:13px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;margin-bottom:16px}
.od-urunler{display:grid;gap:12px;padding-bottom:16px;margin-bottom:4px;border-bottom:1px solid var(--hair)}
.od-u{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center}
.od-u-med{position:relative;width:52px;height:56px;background:var(--zemin2);border-radius:var(--r-k);overflow:hidden}
.od-u-med img{width:100%;height:100%;object-fit:contain;padding:5px;mix-blend-mode:multiply}
.od-u-med i{
  position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;
  display:grid;place-items:center;background:var(--grafit);color:#fff;font-style:normal;
  font-size:11px;font-weight:700;
}
.od-u-ad{font-size:13.5px;font-weight:500;line-height:1.35;color:var(--ink);min-width:0}
.od-u-ad small{display:block;font-size:11.5px;font-weight:400;color:var(--acik)}
.od-u-fi{font-size:13.5px;font-weight:600;white-space:nowrap}

/* onay */
.od-panel--onay{display:grid;place-items:center}
.od-onay-kart{max-width:560px;text-align:center;background:#fff;border:1px solid var(--hair);
  border-radius:var(--r);padding:48px 40px 40px}
.od-tik{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 22px;
  background:var(--altin);color:#22242a}
.od-tik svg{width:30px;height:30px;stroke:currentColor;stroke-width:2.2;fill:none}
.od-onay-kart h2{font-size:27px;font-weight:600;letter-spacing:-.035em}
.od-onay-kart > p{margin-top:12px;font-size:15.5px;line-height:1.65;color:var(--gri)}
.od-onay-kart b{color:var(--ink)}
.od-onay-bilgi{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:26px 0;padding:20px 0;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);text-align:left}
.od-onay-bilgi dt{font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--acik);margin-bottom:5px}
.od-onay-bilgi dd{margin:0;font-size:14px;color:var(--ink)}
.od-onay-btn{display:flex;gap:11px;justify-content:center;flex-wrap:wrap}

@media (max-width:1000px){
  .sp-kap,.od-kap{grid-template-columns:1fr}
  .sp-ozet,.od-ozet{position:static}
  .od-ozet{order:-1}
}
@media (max-width:700px){
  .sp-bas{font-size:26px}
  .sp-u{grid-template-columns:88px minmax(0,1fr);gap:14px;padding:14px}
  .sp-u-med{width:88px;height:94px}
  .sp-u-adet{grid-column:1;justify-self:start}
  .sp-u-fiyat{grid-column:2;text-align:right;min-width:0;align-self:center}
  .od-alan{grid-template-columns:1fr}
  .od-adim li{font-size:12.5px}
  .od-adim li + li::before{width:14px}
  .od-blok{padding:20px}
  .od-onay-bilgi{grid-template-columns:1fr}
  .od-onay-kart{padding:36px 24px 30px}
}

/* ==========================================================================
   SAYFA ÜST BAŞLIĞI (favoriler vb.)
   ========================================================================== */
.sayfa-ust{margin-bottom:26px}
.sayfa-ust-alt{margin-top:8px;font-size:15px;color:var(--gri);max-width:58ch;line-height:1.6}
.fv-grid{gap:14px}

/* ==========================================================================
   GİRİŞ / ÜYE OL
   ========================================================================== */
.gr{padding:34px 0 80px}
.gr-kap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:44px;align-items:start}
.gr-form{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:34px 36px 30px}
.gr-sekme{display:flex;gap:4px;border-bottom:1px solid var(--hair);margin-bottom:28px}
.gr-s{
  padding:0 18px 14px;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--acik);
  position:relative;transition:color .2s;
}
.gr-s::after{content:"";position:absolute;left:18px;right:18px;bottom:-1px;height:2px;
  background:var(--altin);transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.22,.68,.3,1)}
.gr-s:hover{color:var(--gri)}
.gr-s.aktif{color:var(--ink)}
.gr-s.aktif::after{transform:scaleX(1)}

.gr-panel h1,.gr-panel h2{font-size:25px;font-weight:600;letter-spacing:-.032em}
.gr-alt{margin-top:9px;margin-bottom:24px;font-size:14.5px;line-height:1.6;color:var(--gri)}
.gr-alan{display:grid;gap:16px}
.gr-ikili{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.gr-sifre{position:relative}
.gr-goz{position:absolute;right:6px;top:6px;width:34px;height:34px;display:grid;place-items:center;
  color:var(--acik);transition:color .18s}
.gr-goz:hover{color:var(--grafit)}
.gr-goz svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.6;fill:none}
.gr-goz.acik svg{stroke:var(--altin-koyu)}
.gr-ipucu{margin-top:6px;font-size:12px;color:var(--acik)}
.gr-satir{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.gr-link{font-size:13.5px;font-weight:600;color:var(--altin-koyu);border-bottom:1px solid transparent;
  transition:border-color .18s}
.gr-link:hover{border-color:currentColor}
.gr-gec{margin-top:22px;padding-top:20px;border-top:1px solid var(--hair);font-size:14px;color:var(--gri)}
.gr-bilgi{display:flex;gap:13px;align-items:flex-start;margin-top:18px;padding:18px;
  background:var(--zemin2);border-radius:var(--r-k)}
.gr-bilgi svg{flex:none;width:22px;height:22px;stroke:#2f7a4a;stroke-width:2.2;fill:none;margin-top:1px}
.gr-bilgi p{font-size:14px;line-height:1.6;color:var(--gri)}
.gr-bilgi b{color:var(--ink)}

.gr-yan{background:var(--kum);border-radius:var(--r);overflow:hidden}
.gr-yan-med img{width:100%;height:230px;object-fit:cover}
.gr-yan-yazi{padding:28px 30px 30px}
.gr-yan-yazi h2{font-size:19px;font-weight:600;letter-spacing:-.025em;color:var(--kum-ink);margin-bottom:18px}
.gr-yan-yazi ul{display:grid;gap:18px}
.gr-yan-yazi li{display:flex;gap:14px;align-items:flex-start}
.gr-yan-yazi svg{flex:none;width:21px;height:21px;stroke:var(--altin-koyu);stroke-width:1.5;fill:none;margin-top:2px}
.gr-yan-yazi b{display:block;font-size:14.5px;font-weight:600;color:var(--kum-ink)}
.gr-yan-yazi span{display:block;margin-top:3px;font-size:13.5px;line-height:1.55;color:#6B6255}

/* ==========================================================================
   HESABIM
   ========================================================================== */
.hs{padding:34px 0 80px}
.hs-ust{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:26px}
.hs-ust h1{font-size:32px;font-weight:600;letter-spacing:-.038em}
.hs-kim{margin-top:7px;font-size:14.5px;color:var(--gri)}
.hs-cikis{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border:1px solid var(--hair-koyu);
  border-radius:var(--r-k);font-size:13.5px;font-weight:600;color:var(--grafit);
  transition:border-color .2s,color .2s,background .2s}
.hs-cikis:hover{border-color:var(--kirmizi);color:var(--kirmizi)}
.hs-cikis svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.7;fill:none}

.hs-kap{display:grid;grid-template-columns:250px minmax(0,1fr);gap:30px;align-items:start}
.hs-menu{display:grid;gap:2px;background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:8px}
.hs-m{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-k);
  font-size:14.5px;font-weight:500;color:var(--gri);text-align:left;
  transition:background .18s,color .18s}
.hs-m svg{flex:none;width:18px;height:18px;stroke:currentColor;stroke-width:1.6;fill:none}
.hs-m em{margin-left:auto;font-style:normal;font-size:12px;font-weight:700;color:var(--acik);
  background:var(--zemin2);border-radius:10px;padding:2px 8px}
.hs-m:hover{background:var(--zemin2);color:var(--ink)}
.hs-m.aktif{background:var(--grafit);color:#fff}
.hs-m.aktif svg{stroke:var(--altin)}
.hs-m.aktif em{background:rgba(255,255,255,.16);color:#fff}

.hs-govde{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:28px 30px 30px;min-height:380px}
.hs-bol h2{font-size:20px;font-weight:600;letter-spacing:-.028em;margin-bottom:20px}
.hs-bol-bas{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:20px}
.hs-bol-bas h2{margin-bottom:0}
.hs-bos{text-align:center;padding:46px 20px}
.hs-bos p{font-size:15px;color:var(--gri);margin-bottom:20px;max-width:44ch;margin-inline:auto}
.hs-fav-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}

.hs-a{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  border:1px solid var(--hair);border-radius:var(--r-k);padding:18px 20px;margin-bottom:10px}
.hs-a b{font-size:14px;font-weight:600;color:var(--ink)}
.hs-a p{margin-top:7px;font-size:13.5px;line-height:1.6;color:var(--gri)}
.hs-a-tel{color:var(--acik) !important;font-size:13px !important}
.hs-a-sil{font-size:13px;color:var(--acik);transition:color .18s}
.hs-a-sil:hover{color:var(--kirmizi)}

.hs-form{max-width:560px}
.hs-form .btn{margin-top:20px}
.hs-kayit{margin-top:14px;font-size:13.5px;color:#2f7a4a}
.hs-tehlike{margin-top:34px;padding-top:26px;border-top:1px solid var(--hair)}
.hs-tehlike h3{font-size:15px;font-weight:600;letter-spacing:-.015em}
.hs-tehlike p{margin-top:6px;font-size:13.5px;line-height:1.6;color:var(--gri);max-width:56ch}
.hs-sil{margin-top:12px;font-size:13.5px;font-weight:600;color:var(--kirmizi);
  border-bottom:1px solid transparent;transition:border-color .18s}
.hs-sil:hover{border-color:currentColor}

/* ==========================================================================
   SİPARİŞ TAKİBİ
   ========================================================================== */
.st{padding:34px 0 80px}
.st-kap{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);gap:38px;align-items:start}
.st-form{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:32px 34px 30px}
.st-form h1{font-size:27px;font-weight:600;letter-spacing:-.035em}
.st-alt{margin-top:9px;margin-bottom:24px;font-size:14.5px;line-height:1.62;color:var(--gri)}
.st-not{margin-top:20px;padding-top:18px;border-top:1px solid var(--hair);font-size:13.5px;color:var(--gri)}
.st-not a{color:var(--altin-koyu);border-bottom:1px solid currentColor}

.st-sonuc{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:28px 30px 26px}
.st-sonuc-ust{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding-bottom:22px;border-bottom:1px solid var(--hair)}
.st-etiket{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--acik)}
.st-sonuc-ust h2{margin-top:6px;font-size:22px;font-weight:600;letter-spacing:-.02em}
.st-durum{flex:none;padding:6px 13px;border-radius:16px;background:var(--altin);color:#22242a;
  font-size:12.5px;font-weight:700}

.st-adim{padding:24px 0 6px;display:grid;gap:0}
.st-adim li{position:relative;padding:0 0 26px 34px}
.st-adim li:last-child{padding-bottom:6px}
.st-adim li > span{position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;
  border:2px solid var(--hair-koyu);background:#fff}
.st-adim li::before{content:"";position:absolute;left:8px;top:20px;bottom:0;width:2px;background:var(--hair)}
.st-adim li:last-child::before{display:none}
.st-adim b{display:block;font-size:14.5px;font-weight:600;color:var(--acik)}
.st-adim i{display:block;margin-top:3px;font-style:normal;font-size:13px;color:var(--acik)}
.st-adim .tamam > span{border-color:var(--altin);background:var(--altin)}
.st-adim .tamam::before{background:var(--altin)}
.st-adim .tamam b{color:var(--ink)}
.st-adim .tamam i{color:var(--gri)}
.st-adim .aktif > span{border-color:var(--grafit);background:var(--grafit);
  box-shadow:0 0 0 4px rgba(62,63,67,.12)}
.st-adim .aktif b{color:var(--ink)}
.st-adim .aktif i{color:var(--gri)}

.st-bilgi{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:20px 0;margin-top:8px;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.st-bilgi dt{font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--acik);margin-bottom:5px}
.st-bilgi dd{margin:0;font-size:14.5px;color:var(--ink)}
.st-yardim{margin-top:18px;font-size:13.5px;color:var(--gri)}
.st-yardim a{color:var(--altin-koyu);font-weight:600}

@media (max-width:1000px){
  .gr-kap,.st-kap{grid-template-columns:1fr}
  .gr-yan{order:-1}
  .gr-yan-med img{height:170px}
  .hs-kap{grid-template-columns:1fr}
  .hs-menu{display:flex;overflow-x:auto;scrollbar-width:none}
  .hs-menu::-webkit-scrollbar{display:none}
  .hs-m{flex:none;white-space:nowrap}
  .hs-fav-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .gr-form,.st-form,.st-sonuc,.hs-govde{padding:22px 20px}
  .gr-ikili{grid-template-columns:1fr}
  .hs-ust{flex-direction:column;align-items:flex-start;gap:14px}
  .hs-ust h1{font-size:26px}
  .st-bilgi{grid-template-columns:1fr}
  .hs-a{flex-direction:column;gap:10px}
}

/* ==========================================================================
   KURUMSAL SAYFALAR — ortak hero ve anlatı
   ========================================================================== */
.ic-et{font-size:11px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--altin);margin-bottom:12px}
.ic-hero{position:relative;background:#1b1c1e;overflow:hidden}
.ic-hero-med{position:absolute;inset:0}
.ic-hero-med img{width:100%;height:100%;object-fit:cover}
.ic-hero-med::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(16,17,19,.9) 0%,rgba(16,17,19,.6) 34%,rgba(16,17,19,.2) 66%,transparent 100%),
             linear-gradient(96deg,rgba(16,17,19,.55) 0%,rgba(16,17,19,.2) 44%,transparent 74%)}
.ic-hero .kap{position:relative;min-height:400px;display:flex;align-items:flex-end;
  padding-top:70px;padding-bottom:56px}
.ic-hero--kisa .kap{min-height:290px;padding-bottom:44px}
.ic-hero-ic{max-width:640px;color:#fff}
.ic-hero-ic h1{font-size:clamp(28px,3.4vw,46px);font-weight:600;letter-spacing:-.04em;line-height:1.08}
.ic-hero-ic > p:last-child{margin-top:16px;font-size:16.5px;line-height:1.62;
  color:rgba(255,255,255,.82);max-width:52ch}

.ik-kap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:56px;align-items:start}
.ik-yazi h2{font-size:29px;font-weight:600;letter-spacing:-.035em;margin-bottom:18px}
.ik-yazi p{margin-bottom:16px;font-size:16px;line-height:1.78;color:var(--gri)}
.ik-liste{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:var(--r);
  overflow:hidden}
.ik-liste > div{background:#fff;padding:20px 22px}
.ik-liste b{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.ik-liste span{display:block;margin-top:5px;font-size:13.5px;line-height:1.55;color:var(--gri)}

/* üretim aşamaları */
.asama{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--hair);
  border:1px solid var(--hair);border-radius:var(--r);overflow:hidden}
.asama article{background:#fff;padding:26px 22px 24px}
.asama-ik{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--zemin2);margin-bottom:16px}
.asama-ik svg{width:21px;height:21px;stroke:var(--altin-koyu);stroke-width:1.5;fill:none}
.asama h3{font-size:15.5px;font-weight:600;letter-spacing:-.018em}
.asama p{margin-top:8px;font-size:13.5px;line-height:1.6;color:var(--gri)}

/* koleksiyon şeridi */
.kol-serit{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.kol-k{background:#fff;border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;
  transition:border-color .24s,transform .28s}
.kol-k-med{display:grid;place-items:center;height:190px;
  background:radial-gradient(120% 100% at 50% 45%,var(--z) 0%,#fff 78%)}
.kol-k-med img{max-height:150px;width:auto;object-fit:contain;transition:transform .45s cubic-bezier(.22,.68,.3,1)}
.kol-k:hover{border-color:var(--hair-koyu);transform:translateY(-3px)}
.kol-k:hover .kol-k-med img{transform:scale(1.06)}
.kol-k-ic{padding:16px 18px 18px;border-top:1px solid var(--hair)}
.kol-k-ic b{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.02em}
.kol-k-ic i{display:block;margin-top:4px;font-style:normal;font-size:12.5px;color:var(--acik)}

/* koleksiyonlar sayfası */
.kl-liste{display:grid;gap:20px}
.kl{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:0;
  background:#fff;border:1px solid var(--hair);border-radius:var(--r);overflow:hidden}
.kl:nth-child(even) .kl-med{order:2}
.kl-med{display:grid;place-items:center;min-height:280px;padding:26px;
  background:radial-gradient(110% 100% at 50% 48%,var(--z) 0%,#fff 76%)}
.kl-med img{max-height:242px;width:auto;object-fit:contain}
.kl-ic{padding:34px 38px;display:flex;flex-direction:column;justify-content:center}
.kl-ic .ic-et{color:var(--altin-koyu)}
.kl-ic h2{font-size:26px;font-weight:600;letter-spacing:-.032em}
.kl-alt{margin-top:11px;font-size:15.5px;line-height:1.66;color:var(--gri);max-width:52ch}
.kl-altlar{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 22px}
.kl-altlar a{display:inline-block;padding:6px 13px;border:1px solid var(--hair);border-radius:16px;
  font-size:12.5px;color:var(--gri);transition:border-color .2s,color .2s}
.kl-altlar a:hover{border-color:var(--grafit);color:var(--ink)}
.kl-ic .btn{align-self:flex-start}

/* ==========================================================================
   REFERANSLAR
   ========================================================================== */
.rf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.rf-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.rf{display:block;background:#fff;border:1px solid var(--hair);border-radius:var(--r);
  overflow:hidden;transition:border-color .24s,box-shadow .3s}
.rf:hover{border-color:var(--hair-koyu);box-shadow:0 18px 34px -26px rgba(36,38,42,.4)}
.rf-med{position:relative;display:block;height:280px;overflow:hidden;background:var(--zemin2)}
.rf-med img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,.68,.3,1)}
.rf:hover .rf-med img{transform:scale(1.05)}
.rf-et{position:absolute;left:16px;bottom:16px;padding:6px 13px;border-radius:16px;
  background:rgba(255,255,255,.94);font-size:12px;font-weight:600;color:var(--grafit)}
.rf-ic{display:block;padding:20px 22px 22px}
.rf-ic b{display:block;font-size:18px;font-weight:600;letter-spacing:-.024em;color:var(--ink)}
.rf-ic i{display:block;margin-top:8px;font-style:normal;font-size:14px;line-height:1.6;color:var(--gri)}
.rf-ic em{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-style:normal;
  font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--grafit)}
.rf-ic svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.8;fill:none;transition:transform .3s}
.rf:hover .rf-ic em{color:var(--altin-koyu)}
.rf:hover .rf-ic svg{transform:translateX(4px)}
.rf-grid--3 .rf-med{height:200px}
.rf-grid--3 .rf-ic b{font-size:16px}
.rf-not{margin-top:24px;padding:18px 22px;background:var(--zemin2);border-radius:var(--r);
  font-size:13.5px;line-height:1.65;color:var(--gri)}
.rf-not b{color:var(--ink)}

/* referans detay */
.rd{padding:26px 0 20px}
.rd-ust{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:44px;
  align-items:end;margin:20px 0 26px}
.rd-ust h1{font-size:34px;font-weight:600;letter-spacing:-.038em;line-height:1.1}
.rd-ust .ic-et{color:var(--altin-koyu)}
.rd-alt{margin-top:12px;font-size:16px;line-height:1.62;color:var(--gri);max-width:52ch}
.rd-kunye{display:grid;gap:14px;padding-left:36px;border-left:1px solid var(--hair)}
.rd-kunye dt{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--acik)}
.rd-kunye dd{margin:4px 0 0;font-size:14.5px;color:var(--ink)}
.rd-med{margin:0 0 34px}
.rd-med img{width:100%;height:min(520px,52vw);object-fit:cover;border-radius:var(--r)}
.rd-govde{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:48px;align-items:start}
.rd-yazi p{margin-bottom:16px;font-size:16px;line-height:1.78;color:var(--gri)}
.rd-yazi p:first-child{font-size:17px;color:var(--ink)}
.rd-yan{background:var(--kum);border-radius:var(--r);padding:26px 28px 28px}
.rd-yan h2{font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--kum-ink)}
.rd-yan p{margin:10px 0 18px;font-size:14px;line-height:1.65;color:#6B6255}

/* ==========================================================================
   İLETİŞİM / BAYİLİK
   ========================================================================== */
.il{padding:34px 0 80px}
.il-kap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:34px;align-items:start}
.il-form{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:30px 32px 32px}
.il-form h2{font-size:20px;font-weight:600;letter-spacing:-.026em;margin-bottom:22px}
.il-form .btn{margin-top:4px}
.il-yan{display:grid;gap:16px}
.il-kart{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:26px 28px 28px}
.il-kart h2{font-size:17px;font-weight:600;letter-spacing:-.02em;margin-bottom:20px}
.il-bilgi{display:grid;gap:18px}
.il-bilgi li{display:flex;gap:14px;align-items:flex-start}
.il-bilgi svg{flex:none;width:19px;height:19px;stroke:var(--altin-koyu);stroke-width:1.6;fill:none;margin-top:2px}
.il-bilgi b{display:block;font-size:13px;font-weight:600;color:var(--ink)}
.il-bilgi span{display:block;margin-top:3px;font-size:14px;line-height:1.55;color:var(--gri)}
.il-bilgi i{font-style:italic;color:var(--acik);font-size:13px}
.il-bilgi a:hover{color:var(--altin-koyu)}
.il-wa{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:22px;height:48px;
  border-radius:var(--r-k);background:var(--yesil);color:#fff;font-size:14px;font-weight:600;
  transition:filter .2s}
.il-wa:hover{filter:brightness(1.06)}
.il-wa svg{width:20px;height:20px;fill:currentColor}
.il-harita{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  min-height:200px;padding:28px;text-align:center;background:var(--zemin2);
  border:1px dashed var(--hair-koyu);border-radius:var(--r)}
.il-harita svg{width:28px;height:28px;stroke:var(--acik);stroke-width:1.5;fill:none}
.il-harita p{font-size:13.5px;line-height:1.6;color:var(--acik);max-width:34ch}

.by-liste{display:grid;gap:16px}
.by-liste li{padding-bottom:16px;border-bottom:1px solid var(--hair)}
.by-liste li:last-child{border-bottom:0;padding-bottom:0}
.by-liste b{display:block;font-size:14.5px;font-weight:600;color:var(--ink)}
.by-liste span{display:block;margin-top:4px;font-size:13.5px;line-height:1.55;color:var(--gri)}
.by-not{margin-top:18px;padding-top:16px;border-top:1px solid var(--hair);font-size:12.5px;
  line-height:1.6;color:var(--acik)}

/* ==========================================================================
   KATALOG / MAĞAZALAR
   ========================================================================== */
.kt{padding:44px 0 60px}
.kt-kap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:56px;align-items:center}
.kt-yazi h1{font-size:clamp(27px,3.2vw,40px);font-weight:600;letter-spacing:-.04em;line-height:1.1}
.kt-yazi > p{margin-top:16px;font-size:16.5px;line-height:1.66;color:var(--gri);max-width:50ch}
.kt-not{margin-top:16px !important;font-size:13.5px !important;color:var(--acik) !important;
  padding-left:14px;border-left:2px solid var(--hair-koyu)}
.kt-btn{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.kt-kapak{position:relative;display:flex;flex-direction:column;align-items:center;
  aspect-ratio:1/1.32;padding:34px 30px 30px;border-radius:var(--r);
  background:linear-gradient(165deg,var(--kum) 0%,var(--kum-2) 100%);
  box-shadow:0 30px 60px -30px rgba(46,42,36,.5)}
.kt-kapak > img:first-child{height:30px;width:auto}
.kt-kapak-et{margin-top:10px;font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:#7C7364}
.kt-kapak-urun{flex:1;min-height:0;width:auto;max-width:82%;object-fit:contain;margin:18px 0 8px;
  mix-blend-mode:multiply}
.kt-kapak-alt{font-size:12.5px;color:#6B6255;letter-spacing:.02em}

.mg-liste{display:grid;gap:20px}
.mg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;background:#fff;
  border:1px solid var(--hair);border-radius:var(--r);overflow:hidden}
.mg-med{min-height:320px}
.mg-med img{width:100%;height:100%;object-fit:cover}
.mg-ic{padding:32px 36px}
.mg-ic .ic-et{color:var(--altin-koyu)}
.mg-ic h2{font-size:25px;font-weight:600;letter-spacing:-.032em}
.mg-alt{margin-top:11px;margin-bottom:22px;font-size:15px;line-height:1.65;color:var(--gri)}
.mg-btn{display:flex;gap:11px;flex-wrap:wrap;margin-top:24px}
.mg-bayi{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  margin-top:20px;padding:28px 32px;background:var(--zemin2);border-radius:var(--r)}
.mg-bayi h2{font-size:20px;font-weight:600;letter-spacing:-.026em}
.mg-bayi p{margin-top:7px;font-size:14.5px;line-height:1.6;color:var(--gri);max-width:56ch}

@media (max-width:1100px){
  .ik-kap,.rd-govde,.kt-kap{grid-template-columns:1fr;gap:32px}
  .rd-ust{grid-template-columns:1fr;gap:26px;align-items:start}
  .rd-kunye{padding-left:0;border-left:0;padding-top:22px;border-top:1px solid var(--hair);
    grid-template-columns:repeat(3,1fr)}
  .asama{grid-template-columns:repeat(3,minmax(0,1fr))}
  .il-kap{grid-template-columns:1fr}
  .kl,.mg{grid-template-columns:1fr}
  .kl:nth-child(even) .kl-med{order:0}
  .kl-med{min-height:220px}
  .kl-med img{max-height:190px}
  .mg-med{min-height:220px}
}
@media (max-width:760px){
  .kol-serit{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rf-grid,.rf-grid--3{grid-template-columns:1fr}
  .rf-med{height:210px}
  .asama{grid-template-columns:1fr}
  .rd-kunye{grid-template-columns:1fr;gap:14px}
  .rd-ust h1{font-size:26px}
  .kl-ic,.mg-ic,.il-form{padding:24px 22px}
  .ic-hero .kap{min-height:300px;padding-bottom:40px}
  .kt-kapak{max-width:320px;margin:0 auto}
  .mg-bayi{padding:22px}
}

/* ==========================================================================
   HEADER — üye açılır paneli
   ========================================================================== */
.aks-uye{position:relative}
.uye-panel{
  position:absolute;top:calc(100% + 10px);right:0;width:296px;z-index:80;
  background:#fff;border:1px solid var(--hair);border-top:2px solid var(--altin);
  border-radius:0 0 var(--r) var(--r);box-shadow:0 26px 54px -22px rgba(36,38,42,.4);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .16s ease,transform .2s cubic-bezier(.2,.9,.3,1),visibility .16s;
}
.aks-uye:hover .uye-panel,.aks-uye:focus-within .uye-panel{opacity:1;visibility:visible;transform:none}
.uye-panel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.uye-panel-ust{padding:20px 20px 18px;border-bottom:1px solid var(--hair)}
.uye-baslik{font-size:15.5px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.uye-alt{margin-top:6px;font-size:13px;line-height:1.55;color:var(--gri)}
.uye-btn{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:16px}
.uye-btn .btn{height:42px;padding:0 12px;justify-content:center;font-size:12px;letter-spacing:.07em}
.uye-link{padding:8px}
.uye-link a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-k);
  font-size:14px;color:var(--gri);transition:background .18s,color .18s}
.uye-link svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.6;fill:none}
.uye-link a:hover{background:var(--zemin2);color:var(--ink)}
@media (max-width:900px){.uye-panel{display:none}}

/* ==========================================================================
   BİLGİ VE YASAL SAYFALAR
   ========================================================================== */
.bg{padding:34px 0 80px}
.bg-kap{display:grid;grid-template-columns:262px minmax(0,1fr);gap:44px;align-items:start}
.bg-menu{position:sticky;top:18px}
.bg-menu-bas{font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--acik);margin-bottom:14px}
.bg-menu ul{display:grid;gap:2px;border-left:1px solid var(--hair)}
.bg-menu a{display:flex;gap:8px;padding:8px 0 8px 16px;margin-left:-1px;
  border-left:2px solid transparent;font-size:14px;line-height:1.45;color:var(--gri);
  transition:color .18s,border-color .18s}
.bg-menu a:hover{color:var(--ink);border-color:var(--hair-koyu)}
.bg-menu a.aktif{color:var(--ink);border-color:var(--altin);font-weight:500}
.bg-menu a span{flex:none;color:var(--acik);font-size:12.5px}
.bg-yardim{margin-top:26px;padding:20px;background:var(--zemin2);border-radius:var(--r)}
.bg-yardim p{font-size:13.5px;line-height:1.6;color:var(--gri)}
.bg-yardim p:first-child{color:var(--ink)}
.bg-yardim a{display:block;margin-top:10px;font-size:13.5px;font-weight:600;color:var(--altin-koyu)}

.bg-govde{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:34px 40px 36px}
.bg-b{padding-bottom:30px;margin-bottom:30px;border-bottom:1px solid var(--hair);scroll-margin-top:24px}
.bg-b:last-of-type{border-bottom:0;margin-bottom:0;padding-bottom:6px}
.bg-b h2{font-size:20px;font-weight:600;letter-spacing:-.026em;margin-bottom:14px}
.bg-b p{margin-bottom:13px;font-size:15.5px;line-height:1.76;color:var(--gri)}
.bg-b p:last-child{margin-bottom:0}
.bg-b strong{color:var(--ink);font-weight:600}
.bg-b em{font-style:italic;color:var(--acik)}
.bg-alt{margin-top:32px;padding-top:26px;border-top:1px solid var(--hair)}
.bg-alt p{font-size:14.5px;line-height:1.7;color:var(--gri)}
.bg-alt-btn{display:flex;gap:11px;flex-wrap:wrap;margin-top:20px}

/* yasal */
.ys-tarih{margin-top:10px;font-size:13px;color:var(--acik)}
.ys-uyari{display:flex;gap:14px;align-items:flex-start;margin-bottom:26px;padding:18px 22px;
  background:#FDF6E6;border:1px solid #EBD9AC;border-radius:var(--r)}
.ys-uyari svg{flex:none;width:21px;height:21px;stroke:var(--altin-koyu);stroke-width:1.8;fill:none;margin-top:1px}
.ys-uyari p{font-size:14px;line-height:1.65;color:#6C5A2E}
.ys-uyari b{color:#463A18}
.ys-govde .bg-b h2{display:flex;gap:10px;align-items:baseline}
.ys-no{color:var(--altin-koyu);font-weight:700}
.ys-govde .bg-b p{font-size:15px}

/* SSS akordiyon */
.sss{display:grid;gap:8px}
.sss-o{border:1px solid var(--hair);border-radius:var(--r-k);overflow:hidden;transition:border-color .2s}
.sss-o:has(.sss-s[aria-expanded="true"]){border-color:var(--hair-koyu)}
.sss-s{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;
  padding:16px 18px;text-align:left;font-size:15px;font-weight:600;letter-spacing:-.012em;
  color:var(--ink);transition:background .18s}
.sss-s:hover{background:var(--zemin2)}
.sss-s svg{flex:none;width:17px;height:17px;stroke:var(--altin-koyu);stroke-width:2;fill:none;
  transition:transform .3s cubic-bezier(.22,.68,.3,1)}
.sss-s[aria-expanded="true"]{background:var(--zemin2)}
.sss-s[aria-expanded="true"] svg{transform:rotate(45deg)}
.sss-c{padding:2px 18px 18px}
.sss-c p{font-size:14.5px;line-height:1.72;color:var(--gri);margin:0}

/* ==========================================================================
   ARAMA
   ========================================================================== */
.ar{padding:34px 0 80px}
.ar-form{position:relative;max-width:640px;margin-bottom:18px}
.ar-form input{width:100%;height:58px;padding:0 62px 0 20px;font:inherit;font-size:16px;
  color:var(--ink);background:#fff;border:1.5px solid var(--hair-koyu);border-radius:var(--r-k);
  transition:border-color .2s,box-shadow .2s}
.ar-form input:focus{outline:0;border-color:var(--grafit);box-shadow:0 0 0 3px rgba(62,63,67,.08)}
.ar-form button{position:absolute;right:6px;top:6px;width:46px;height:46px;border-radius:var(--r-k);
  display:grid;place-items:center;background:var(--grafit);color:#fff;transition:background .2s}
.ar-form button:hover{background:var(--altin);color:#22242a}
.ar-form svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.9;fill:none}
.ar-oneri{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:30px}
.ar-oneri span{font-size:13px;color:var(--acik);margin-right:2px}
.ar-oneri button{padding:7px 14px;border:1px solid var(--hair);border-radius:16px;
  font-size:13px;color:var(--gri);transition:border-color .2s,color .2s,background .2s}
.ar-oneri button:hover{border-color:var(--grafit);color:var(--ink);background:var(--zemin2)}
.ar-grid{gap:14px}
.ar-vurgu{background:rgba(221,163,56,.28);border-radius:2px}

/* ==========================================================================
   404
   ========================================================================== */
.hata .kap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:48px;
  align-items:center;padding-top:56px;padding-bottom:80px}
.hata-kod{font-size:15px;font-weight:700;letter-spacing:.22em;color:var(--altin-koyu);margin-bottom:14px}
.hata-ic h1{font-size:clamp(27px,3.2vw,40px);font-weight:600;letter-spacing:-.04em;line-height:1.1}
.hata-ic > p{margin-top:14px;font-size:16.5px;line-height:1.65;color:var(--gri);max-width:46ch}
.hata-btn{display:flex;gap:11px;flex-wrap:wrap;margin-top:28px}
.hata-link{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px;padding-top:26px;
  border-top:1px solid var(--hair)}
.hata-link a{display:inline-block;padding:7px 14px;border:1px solid var(--hair);border-radius:16px;
  font-size:13px;color:var(--gri);transition:border-color .2s,color .2s}
.hata-link a:hover{border-color:var(--grafit);color:var(--ink)}
.hata-med{display:grid;place-items:center;background:radial-gradient(110% 100% at 50% 50%,var(--zemin2) 0%,#fff 74%);
  border-radius:var(--r);padding:30px;min-height:340px}
.hata-med img{max-height:300px;width:auto;object-fit:contain;mix-blend-mode:multiply}

/* proje talebi */
.pj-secim{display:flex;flex-wrap:wrap;gap:8px}
.pj-etiket{cursor:pointer}
.pj-etiket input{position:absolute;opacity:0;width:0;height:0}
.pj-etiket span{display:inline-block;padding:9px 16px;border:1.5px solid var(--hair);
  border-radius:20px;font-size:13.5px;color:var(--gri);transition:border-color .2s,color .2s,background .2s}
.pj-etiket:hover span{border-color:var(--hair-koyu)}
.pj-etiket input:checked + span{border-color:var(--grafit);background:var(--zemin2);
  color:var(--ink);font-weight:500}
.pj-etiket input:focus-visible + span{outline:2px solid var(--altin);outline-offset:2px}
.pj-adim{counter-reset:pj;display:grid;gap:16px}
.pj-adim li{counter-increment:pj;position:relative;padding-left:38px}
.pj-adim li::before{content:counter(pj);position:absolute;left:0;top:0;width:26px;height:26px;
  border-radius:50%;display:grid;place-items:center;background:var(--zemin2);
  font-size:12.5px;font-weight:700;color:var(--grafit)}
.pj-adim b{display:block;font-size:14.5px;font-weight:600;color:var(--ink)}
.pj-adim span{display:block;margin-top:3px;font-size:13.5px;line-height:1.55;color:var(--gri)}

@media (max-width:1000px){
  .bg-kap{grid-template-columns:1fr;gap:26px}
  .bg-menu{position:static}
  .bg-menu ul{display:flex;flex-wrap:wrap;gap:6px;border-left:0}
  .bg-menu a{padding:8px 14px;margin-left:0;border:1px solid var(--hair);border-radius:16px;
    font-size:13px}
  .bg-menu a.aktif{border-color:var(--altin)}
  .bg-yardim{margin-top:20px}
  .hata .kap{grid-template-columns:1fr;gap:30px;padding-top:36px}
  .hata-med{order:-1;min-height:230px}
  .hata-med img{max-height:200px}
}
@media (max-width:640px){
  .bg-govde{padding:24px 22px 26px}
  .bg-b h2{font-size:18px}
  .bg-b p{font-size:14.5px}
  .ar-form input{height:52px;font-size:15px}
  .ar-form button{width:42px;height:42px}
}

/* ==========================================================================
   SEPETE EKLEME ANİMASYONU — ürün görseli sepet simgesine uçar
   ========================================================================== */
.ucus{
  position:fixed;z-index:300;pointer-events:none;border-radius:var(--r-k);
  background:#fff;box-shadow:0 14px 30px -14px rgba(20,21,23,.5);overflow:hidden;
  will-change:transform,opacity;
}
.ucus img{width:100%;height:100%;object-fit:contain;padding:6px}
@keyframes sepetSicra{
  0%,100%{transform:scale(1)}
  35%{transform:scale(1.22)}
  60%{transform:scale(.94)}
}
.aks-say.sicra{animation:sepetSicra .5s cubic-bezier(.22,.68,.3,1)}
.aks-i.parla{animation:sepetSicra .45s cubic-bezier(.22,.68,.3,1)}

/* eklendi bildirimi */
.bildirim{
  position:fixed;right:22px;bottom:96px;z-index:290;display:flex;align-items:center;gap:13px;
  max-width:330px;padding:14px 18px 14px 14px;background:#fff;border:1px solid var(--hair);
  border-left:3px solid var(--altin);border-radius:var(--r);
  box-shadow:0 20px 44px -20px rgba(20,21,23,.42);
  opacity:0;transform:translateY(14px);
  transition:opacity .26s,transform .3s cubic-bezier(.22,.68,.3,1);
}
.bildirim.acik{opacity:1;transform:none}
.bildirim-med{flex:none;width:48px;height:52px;background:var(--zemin2);border-radius:var(--r-k);
  display:grid;place-items:center;overflow:hidden}
.bildirim-med img{width:100%;height:100%;object-fit:contain;padding:4px}
.bildirim b{display:block;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.3}
.bildirim span{display:block;margin-top:3px;font-size:12.5px;color:var(--gri)}
.bildirim a{display:inline-block;margin-top:7px;font-size:12.5px;font-weight:600;
  color:var(--altin-koyu);border-bottom:1px solid currentColor}
@media (max-width:640px){
  .bildirim{right:12px;left:12px;bottom:84px;max-width:none}
}

/* ==========================================================================
   ÖDEME — kargo bloğu ve PayTR alanı
   ========================================================================== */
.od-kargo{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;
  padding:18px 20px;border:1.5px solid var(--hair);border-radius:var(--r-k);background:var(--zemin2)}
.od-kargo-ik{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#fff}
.od-kargo-ik svg{width:21px;height:21px;stroke:var(--altin-koyu);stroke-width:1.6;fill:none}
.od-kargo b{font-size:14.5px;font-weight:600;color:var(--ink)}
.od-kargo p{margin-top:5px;font-size:13.5px;line-height:1.6;color:var(--gri)}
.od-kargo em{font-style:normal;font-size:13px;font-weight:700;color:#2f7a4a;white-space:nowrap}

.od-pos{margin-top:16px}
.od-pos-ust{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;
  background:var(--zemin2);border-radius:var(--r-k)}
.od-pos-kilit{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:#fff}
.od-pos-kilit svg{width:18px;height:18px;stroke:#2f7a4a;stroke-width:1.7;fill:none}
.od-pos-ust b{font-size:14px;font-weight:600;color:var(--ink)}
.od-pos-ust p{margin-top:4px;font-size:13px;line-height:1.6;color:var(--gri)}
.od-pos-cerceve{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  min-height:190px;margin-top:14px;padding:26px;text-align:center;
  border:1px dashed var(--hair-koyu);border-radius:var(--r-k);background:#fff}
.od-pos-cerceve svg{width:30px;height:30px;stroke:var(--acik);stroke-width:1.5;fill:none}
.od-pos-cerceve p{font-size:13.5px;line-height:1.6;color:var(--acik);max-width:40ch}
.od-pos-cerceve b{color:var(--gri)}
.od-pos-taksit{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:14px;
  background:var(--hair);border:1px solid var(--hair);border-radius:var(--r-k);overflow:hidden}
.od-pos-taksit li{background:#fff;padding:12px 10px;text-align:center}
.od-pos-taksit span{display:block;font-size:11.5px;color:var(--acik)}
.od-pos-taksit b{display:block;margin-top:4px;font-size:14px;font-weight:600;color:var(--ink)}
.od-pos-not{margin-top:10px;font-size:12px;color:var(--acik);line-height:1.6}
@media (max-width:640px){
  .od-kargo{grid-template-columns:auto minmax(0,1fr);gap:12px}
  .od-kargo em{grid-column:2;justify-self:start}
  .od-pos-taksit{grid-template-columns:repeat(2,1fr)}
}

/* ==========================================================================
   YAN BANNER — geniş ekranda konteynerin yanındaki boşlukta dönemsel alan
   ========================================================================== */
.yan-banner{display:none}

/* eşik: konteyner (1290) + iki yanda 136px banner + nefes payı */
@media(min-width:1600px){
  .yan-banner{
    display:block;position:fixed;top:50%;transform:translateY(-50%);
    width:136px;height:308px;z-index:40;
  }
  /* konteyner kenarı ile viewport kenarı arasındaki boşluğun ortası */
  .yan-banner--sol{left:calc((100vw - var(--kap)) / 4 - 68px)}
  .yan-banner--sag{right:calc((100vw - var(--kap)) / 4 - 68px)}

  .yb-k{
    position:absolute;inset:0;display:block;overflow:hidden;
    border-radius:var(--r);border:1px solid var(--hair);background:var(--zemin2);
    opacity:0;visibility:hidden;transition:opacity .7s ease,visibility .7s,box-shadow .3s;
    animation:ybDon var(--yb-sure) infinite;
    animation-delay:calc(var(--yi) * (var(--yb-sure) / var(--yb-adet)));
  }
  .yb-k--aktif{opacity:1;visibility:visible}
  .yb-k:hover{box-shadow:0 16px 34px -18px rgba(36,38,42,.45)}
  .yb-k img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,.68,.3,1)}
  .yb-k:hover img{transform:scale(1.04)}

  /* Taraf başına İKİ banner varsayar (her biri döngünün yarısında görünür).
     Banner sayısı değişirse buradaki %50 eşiği de güncellenmeli. */
  @keyframes ybDon{
    0%   {opacity:1;visibility:visible}
    44%  {opacity:1;visibility:visible}
    50%  {opacity:0;visibility:hidden}
    100% {opacity:0;visibility:hidden}
  }
}

@media(prefers-reduced-motion:reduce){
  .yb-k{animation:none}
  .yb-k:not(.yb-k--aktif){display:none}
}

/* ==========================================================================
   AKSESUARLAR
   ========================================================================== */
.ak-ust{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:34px}
.ak-ust h1{font-size:clamp(30px,3.4vw,44px);margin-top:8px}
.ak-alt{margin-top:14px;max-width:620px;font-size:15.5px;line-height:1.72;color:var(--soluk)}
.ak-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ak-k{
  padding:26px 24px 22px;border:1px solid var(--hair);border-radius:var(--r);
  background:#fff;display:flex;flex-direction:column;
  transition:border-color .25s,box-shadow .25s,transform .25s;
}
.ak-k:hover{border-color:var(--altin);box-shadow:0 14px 30px -20px rgba(36,38,42,.35);transform:translateY(-3px)}
.ak-k h2{font-size:17px;font-weight:600;letter-spacing:-.02em}
.ak-k p{margin-top:10px;font-size:13.8px;line-height:1.66;color:var(--soluk);flex:1}
.ak-k a{
  margin-top:16px;display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:600;color:var(--ink);
}
.ak-k a svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;transition:transform .25s}
.ak-k a:hover{color:var(--altin-koyu)}
.ak-k a:hover svg{transform:translateX(3px)}
.ak-not{
  margin-top:26px;display:flex;align-items:flex-start;gap:13px;
  padding:18px 20px;border-radius:var(--r);background:var(--zemin2);
}
.ak-not svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--altin-koyu);stroke-width:1.6;margin-top:1px}
.ak-not p{font-size:13.8px;line-height:1.65;color:var(--soluk)}

/* ==========================================================================
   BLOG
   ========================================================================== */
.bl-ust{margin-bottom:34px;max-width:660px}
.bl-ust h1{font-size:clamp(30px,3.4vw,44px);margin-top:8px}
.bl-alt{margin-top:14px;font-size:15.5px;line-height:1.72;color:var(--soluk)}
.bl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.bl-k{display:flex;flex-direction:column}
.bl-med{
  display:block;border-radius:var(--r);overflow:hidden;aspect-ratio:16/10;
  background:var(--zemin2);
}
.bl-med img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,.68,.3,1)}
.bl-k:hover .bl-med img{transform:scale(1.05)}
.bl-ic{padding-top:15px;display:flex;flex-direction:column;flex:1}
.bl-et{
  font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--altin-koyu);
}
.bl-k h3{margin-top:9px;font-size:18.5px;font-weight:600;letter-spacing:-.025em;line-height:1.28}
.bl-k h3 a{transition:color .22s}
.bl-k h3 a:hover{color:var(--altin-koyu)}
.bl-oz{margin-top:9px;font-size:14px;line-height:1.66;color:var(--soluk);flex:1}
.bl-sure{margin-top:12px;font-size:12px;color:var(--soluk)}

.kap--dar{max-width:840px}
.bd-bas{margin-bottom:26px;max-width:720px}
.bd-bas h1{font-size:clamp(28px,3.2vw,40px);margin-top:8px;line-height:1.16}
.bd-ozet{margin-top:14px;font-size:16.5px;line-height:1.7;color:var(--soluk)}
.bd-kunye{margin-top:14px;font-size:12.5px;color:var(--soluk)}
.bd-med{margin:0 0 34px;border-radius:var(--r-blok);overflow:hidden;aspect-ratio:16/9;background:var(--zemin2)}
.bd-med img{width:100%;height:100%;object-fit:cover}
.bd-govde h2{margin:34px 0 12px;font-size:22px;font-weight:600;letter-spacing:-.03em}
.bd-govde h2:first-child{margin-top:0}
.bd-govde p{margin-top:14px;font-size:15.8px;line-height:1.82;color:var(--ink)}
.bd-cta{
  margin-top:44px;padding:28px 30px;border-radius:var(--r-blok);background:var(--zemin2);
  display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
}
.bd-cta h2{font-size:20px;font-weight:600;letter-spacing:-.03em}
.bd-cta p{margin-top:7px;font-size:14px;line-height:1.62;color:var(--soluk);max-width:440px}

/* ==========================================================================
   ÜRÜN DETAY — üretim / ölçü hizmeti vurgusu
   ========================================================================== */
.ud-hizmet{
  margin-top:24px;display:grid;gap:12px;
  padding:20px;border:1px solid var(--hair);border-radius:var(--r);background:var(--zemin2);
}
.ud-hizmet article{display:flex;gap:14px;align-items:flex-start}
.ud-hz-ik{
  flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:1px solid var(--hair);
}
.ud-hz-ik svg{width:19px;height:19px;fill:none;stroke:var(--altin-koyu);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.ud-hizmet b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.015em}
.ud-hizmet p{margin-top:5px;font-size:13.2px;line-height:1.62;color:var(--soluk)}

@media(max-width:1000px){
  .ak-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .ak-ust{flex-direction:column;align-items:flex-start;gap:20px}
  .ak-grid,.bl-grid{grid-template-columns:minmax(0,1fr)}
  .bd-cta{flex-direction:column;align-items:flex-start}
}


/* iletişim — satıcı bilgileri (mesafeli satış mevzuatı, PayTR başvurusu) */
.il-kart--satici{margin-top:18px}
.il-satici{margin:0;font-size:13.5px;line-height:1.55}
.il-satici dt{color:var(--acik);font-size:12px;letter-spacing:.02em;margin-top:12px}
.il-satici dt:first-child{margin-top:0}
.il-satici dd{margin:2px 0 0;color:var(--ink)}
.il-satici a{color:var(--altin-koyu)}
.il-satici a:hover{color:var(--altin)}


/* ==========================================================================
   ÜRÜN GÖRSELİ — HOVER ZOOM (lens + yan panel)
   Fare ana görselin üzerinde gezerken görselin üstünde altın çerçeveli bir
   lens, sağ tarafta da o bölgenin büyütülmüş hâli açılır. Panel bilgi
   sütununun üstüne biner; sayfa düzenini itmemesi için `position:absolute`.
   ========================================================================== */
.ud-lens{
  /* `display:block` şart: öğe <span> ve satır içi kalırsa genişlik/yükseklik
     uygulanmıyor, lens 0x0 ölçülüyordu. */
  display:block;position:absolute;pointer-events:none;z-index:6;
  border:2px solid var(--altin);border-radius:6px;
  background:rgba(216,162,54,.10);
  /* Lensin dışını beyazlatan geniş gölge kaldırıldı: görselin geri kalanı
     soluklaşınca alan "boş/kesik" görünüyordu. Büyütme zaten yandaki
     panelde gösteriliyor, ana görseli karartmaya gerek yok. */
  opacity:0;transition:opacity .2s ease;
}
.ud-zoomkutu{
  display:block;position:absolute;top:0;left:calc(100% + 20px);z-index:60;
  width:clamp(320px,32vw,460px);aspect-ratio:1/1;
  border:2px solid var(--altin);border-radius:var(--r);
  background-color:#fff;background-repeat:no-repeat;
  box-shadow:0 26px 60px -22px rgba(36,38,42,.45);
  opacity:0;visibility:hidden;transform:translateX(-10px);
  transition:opacity .26s ease,transform .34s cubic-bezier(.22,.68,.3,1),visibility .26s;
}
.ud-buyuk.zoomlu .ud-lens{opacity:1}
.ud-gal:has(.ud-buyuk.zoomlu) .ud-zoomkutu{opacity:1;visibility:visible;transform:none}

/* dar ekranda ve dokunmatikte kapalı — yan panele yer yok */
@media (max-width:1100px),(hover:none){
  .ud-lens,.ud-zoomkutu{display:none}
}