/* ============================================================
 * SERAP GEREBİÇ — PROTOTİP TASARIM SİSTEMİ (paylaşılan)
 * Kaynak: Docs/prototype examples/*.html <style> bloğu (birebir)
 * Kapsam: header, hero, kart, ürün detay, sepet, footer, sticky bar
 * Not: Tailwind/Vite dışıdır; bilinçli olarak izole statik CSS.
 * ============================================================ */

:root{
  --fildisi:#F6F1E7;        /* zemin — un, hamur */
  --krem:#FDFAF3;           /* kartlar */
  --fistik-900:#2C3A22;     /* derin Antep fıstığı — başlık, CTA */
  --fistik-700:#44562F;
  --fistik-500:#6B7D4F;
  --fistik-100:#E7EBD8;     /* açık fıstık tonu — bölüm zeminleri */
  --kabuk:#292019;          /* espresso — gövde metni */
  --toprak:#7A6A55;         /* ikincil metin */
  --serbet:#B9892E;         /* bal/şerbet altını — vurgular */
  --serbet-soft:#F3E7CB;
  --cizgi:rgba(44,58,34,.14);
  --radius:16px;
  --pill:100px;
  --shadow:0 8px 30px rgba(41,32,25,.08);
  --shadow-lift:0 14px 40px rgba(41,32,25,.14);
}
*{margin:0;padding:0;box-sizing:border-box}
/*
  [hidden] HER ZAMAN gizler.

  Tarayıcının kendi `[hidden]{display:none}` kuralı UA stil sayfasındadır ve
  yazar (author) stillerine yenilir. Bir bileşene sınıf üzerinden `display`
  verildiği anda `hidden` niteliği sessizce etkisiz kalır — kuponsuz sepette
  boş bir "indirim kodu uygulandı" kutusunun görünmesinin sebebi buydu
  (.coupon-applied{display:flex}). Tek tek sıfırlamak yerine kural burada,
  bir kez ve kesin olarak konuyor.
*/
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  font-family:'Manrope',sans-serif;
  background:var(--fildisi);
  color:var(--kabuk);
  font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
.serif{font-family:'Fraunces',serif}
.wrap{width:min(1160px,100% - 40px);margin-inline:auto}

/* ------- ÜST DUYURU ŞERİDİ -------
   Yapı: .ribbon └─ .ribbon-inner └─ .ribbon-marquee └─ .ribbon-track
                                                        └─ .ribbon-group ×2N
                 └─ .ribbon-progress

   ŞERİT KAPATILAMAZ (bkz. ribbon.blade.php): kapatma düğmesi ve
   `localStorage` kaydı kaldırıldı, bir kez kapatan ziyaretçi yeni
   kampanyayı da görmüyordu.

   İLK HÂLİ FARK EDİLMİYORDU. Sebebi tek tek küçük, birlikte belirleyiciydi:
   12,5px metin, kreme yakın soluk bir renk, koyu yeşil üstünde düşük
   kontrast, hiçbir görsel ağırlık ve tıklanabilir olduğuna dair hiçbir
   işaret. Bunları hedefleyen müdahaleler:

     · Zemin koyulaştı ve neredeyse beyaza (#FBF7EE) çıkan metinle
       kontrast yükseldi; ölçü 15px'e, ağırlık 600'e çıktı.
     · Üstte altın bir kaş çizgisi (::before) şeridi sayfanın parçası
       olmaktan çıkarıp "duyuru" olarak işaretliyor.
     · Her satırın kendi ikonu var — şeridi yazı dizisi olmaktan çıkarıp
       vitrin öğesine çeviren asıl şey bu. İkon panelden seçilir.
     · Bağlantılı duyuruda okla biten bir CTA rozeti var.
     · Ticari değeri en yüksek satır (`is-featured`, bugün ücretsiz kargo)
       altın çerçevede: akışta her cümle eşit ağırlıkta geçerse en
       değerlisi de sıradanlaşır.

   HAREKET: kesintisiz yatay kayma. Önceki hâli altı saniyede bir dikey
   yuvarlanmaydı; dördüncü mesaj 18 saniye sonra geliyordu ve seyrek geçiş
   göz ucuyla fark edilmiyordu. Kayan yazının bedeli okunabilirlik —
   akış yavaş, fare/klavye odağında duruyor, hareket istemeyende hiç
   kaymıyor. */
.ribbon{
  position:relative;
  background:linear-gradient(180deg,#22301A 0%,#2C3A22 100%);
  color:#FBF7EE;
  font-size:15px;letter-spacing:.005em;
  overflow:hidden;
}
/* Altın kaş: şeridin "sayfanın bir parçası" değil, bir duyuru olduğunu
   söyleyen tek çizgi. Alt kenardaki gölge, header'la sınırı sertleştirmeden
   ayırır. */
.ribbon::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--serbet) 22%,#F0D9A0 50%,var(--serbet) 78%,transparent);
  opacity:.85;
}
.ribbon::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:rgba(0,0,0,.18);
}
/* Akış TAM GENİŞLİK: kayan yazı ekranın kenarından girip kenarından
   çıkmalı. Site genişliğine hapsedilseydi metin ortada bir yerde belirip
   yok olur, kayma bir pencerenin arkasında oluyormuş gibi görünürdü.
   Kapatma düğmesi olmadığı için kenarda ayrılacak yer de yok. */
.ribbon-inner{
  position:relative;
  display:flex;align-items:center;
  min-height:52px;
}
.ribbon b{color:#F0D9A0;font-weight:700}

/* ------- header ------- */
header{
  position:sticky;top:0;z-index:60;
  background:rgba(246,241,231,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--cizgi);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.brand{display:flex;align-items:center}
/* `.brand-text` / `.brand .name` / `.brand .tag` kuralları kaldırıldı:
   marka adı artık yazıyla değil logoyla veriliyor, alt satırdaki
   "Kilis · El Yapımı" etiketi de logonun kendi tuğrasıyla tekrar oluyordu. */
/*
  Marka logosu. Yükseklik sabit, genişlik `auto`: kaynak 900×306 ve oranı
  bozulmamalı.

  50px, yazı yüksekliğine göre DEĞİL kompozisyona göre seçildi: logonun
  üstünde bir çizgi, altında bir tuğra var ve el yazısı bunların arasında
  kutunun ancak yarısını kaplıyor. Ölçü, solundaki düğüm motifi kaldırılınca
  40px'ten yükseltildi: markanın başlıkta tek başına taşıdığı ağırlık artık
  yalnız logoda ve 40px'te yazı olduğundan küçük duruyordu. 50px, 64px'lik
  başlığa üstte ve altta 7'şer piksel boşlukla oturur.

  Dar ekranda küçülür ki hamburger düğmesiyle çakışmasın.
*/
.brand-logo{height:50px;width:auto;display:block}
@media (max-width:520px){ .brand-logo{height:42px} }
@media (max-width:380px){ .brand-logo{height:34px} }
.nav-links{display:none;gap:30px;font-size:14.5px;font-weight:600;color:var(--fistik-900)}
.nav-links a{padding:6px 2px;border-bottom:2px solid transparent;transition:border-color .2s}
.nav-links a:hover{border-color:var(--serbet)}
.nav-actions{display:flex;align-items:center;gap:8px}
.icon-btn{
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;color:var(--fistik-900);
  transition:background .2s;position:relative;
}
.icon-btn:hover{background:rgba(44,58,34,.07)}
.icon-btn svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cart-badge{
  position:absolute;top:4px;right:2px;min-width:18px;height:18px;
  background:var(--serbet);color:#fff;border-radius:9px;
  font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 5px;
  transform:scale(0);transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.cart-badge.show{transform:scale(1)}
.cart-badge.bump{animation:bump .4s}
@keyframes bump{40%{transform:scale(1.35)}100%{transform:scale(1)}}

/* ------- hero ------- */
.hero{padding:44px 0 26px}
.hero-grid{display:grid;gap:30px;align-items:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11.5px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
  color:var(--serbet);margin-bottom:16px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--serbet)}
h1{
  font-family:'Fraunces',serif;font-weight:500;
  font-size:clamp(34px,7.4vw,58px);
  line-height:1.12;color:var(--fistik-900);
  letter-spacing:-.01em;margin-bottom:16px;
}
h1 em{font-style:italic;color:var(--fistik-700)}
.hero p.lead{font-size:16.5px;color:var(--toprak);max-width:46ch;margin-bottom:26px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--fistik-900);color:#F4EFE2;
  font-weight:700;font-size:15.5px;letter-spacing:.02em;
  padding:16px 30px;border-radius:var(--pill);
  min-height:52px;box-shadow:var(--shadow);
  transition:transform .2s,box-shadow .2s,background .2s;
}
.btn-primary:hover{background:var(--fistik-700);transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.btn-primary:active{transform:translateY(0) scale(.98)}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;font-size:15px;color:var(--fistik-900);
  padding:15px 26px;border-radius:var(--pill);min-height:52px;
  border:1.5px solid rgba(44,58,34,.35);transition:border-color .2s,background .2s;
}
.btn-ghost:hover{border-color:var(--fistik-900);background:rgba(44,58,34,.05)}
.hero-visual{position:relative}
.hero-photo{
  aspect-ratio:5/4;border-radius:24px;overflow:hidden;
  box-shadow:var(--shadow-lift);background:var(--fistik-100);
}
.hero-photo img{width:100%;height:100%;object-fit:cover}

/* ------- güven şeridi ------- */
.trust{border-block:1px solid var(--cizgi);padding:18px 0;margin-top:34px}
/* ------- güven şeridi -------
   Maddeler panelden gelir (trust_badges). Sayıları değişebildiği için
   `auto-fit` kullanılır: iki madde girilirse iki sütun, dört girilirse
   dört olur — sabit `repeat(3,1fr)` dördüncüyü alt satırda tek başına
   bırakıyordu.

   İkon artık daire içinde. Çıplak kontur ikon, yanındaki kalın başlıkla
   aynı görsel ağırlıkta değildi ve şerit "üç satır yazı" gibi okunuyordu;
   halka her maddeye kendi çapasını veriyor. */
.trust-grid{display:grid;grid-template-columns:1fr;gap:14px}
.trust-item{
  display:flex;align-items:center;gap:12px;
  font-size:13.5px;color:var(--toprak);
}
.trust-copy{min-width:0}
.trust-item b{color:var(--fistik-900);font-weight:700;display:block;font-size:13.5px;line-height:1.35}
.trust-copy span{display:block;line-height:1.4}
.trust-icon{
  width:40px;height:40px;flex:none;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(23,122,61,.07);
  border:1px solid rgba(23,122,61,.14);
  transition:background-color .25s ease,border-color .25s ease;
}
.trust-item svg{width:20px;height:20px;flex:none;stroke:var(--serbet);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* Bağlantılı madde: tıklanabilir olduğu ancak fareyle anlaşılır — şeridin
   sakinliği bozulmasın diye durağan hâlde hiçbir vurgu yok. */
a.trust-item:hover .trust-icon{background:rgba(23,122,61,.13);border-color:rgba(23,122,61,.3)}
a.trust-item:hover b{text-decoration:underline;text-underline-offset:3px}

/* ------- bölüm başlığı ------- */
section{padding:56px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px}
h2{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(26px,4.6vw,38px);color:var(--fistik-900);line-height:1.15}
.sec-head .sub{font-size:14px;color:var(--toprak);margin-top:6px}
.sec-link{font-size:14px;font-weight:700;color:var(--fistik-700);white-space:nowrap;border-bottom:1.5px solid var(--serbet);padding-bottom:2px}

/* ------- ürün kartları: mobilde yatay kaydırma ------- */
.products{
  display:grid;grid-auto-flow:column;grid-auto-columns:76%;
  gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px 20px 22px;margin:0 -20px;
  scrollbar-width:none;
}
.products::-webkit-scrollbar{display:none}
.card{
  scroll-snap-align:start;
  background:var(--krem);border-radius:var(--radius);
  border:1px solid rgba(44,58,34,.08);
  box-shadow:var(--shadow);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .25s,box-shadow .25s;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.card-img{aspect-ratio:4/3;background:var(--fistik-100);overflow:hidden;position:relative}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .card-img img{transform:scale(1.04)}
.badge{
  position:absolute;top:12px;left:12px;
  background:var(--serbet);color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 11px;border-radius:var(--pill);
}
.badge.green{background:var(--fistik-700)}
.card-body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.card-name{font-family:'Fraunces',serif;font-size:18px;font-weight:600;color:var(--fistik-900);line-height:1.25}
.card-note{font-size:12.5px;color:var(--toprak)}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px}
/* Fiyat asla bölünmez: dar kartta "1.450" ve "₺" ayrı satırlara düşüyordu. */
.price{font-size:18px;font-weight:700;color:var(--fistik-900);white-space:nowrap}
.price small{font-size:11px;font-weight:600;color:var(--toprak);display:block;letter-spacing:.04em}
.add-btn{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--fistik-900);color:#F4EFE2;
  font-size:13.5px;font-weight:700;
  padding:11px 18px;border-radius:var(--pill);min-height:44px;
  transition:background .2s,transform .15s;
}
.add-btn:hover{background:var(--fistik-700)}
.add-btn:active{transform:scale(.95)}
.add-btn .mini{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}

/* ------- imza ürün ------- */
.spotlight{background:var(--fistik-900);color:#EDE8DA;border-radius:28px;overflow:hidden;position:relative}
.spot-grid{display:grid;position:relative;z-index:1}
.spot-img{aspect-ratio:16/11;overflow:hidden;background:#3a4a2c}
.spot-img img{width:100%;height:100%;object-fit:cover}
.spot-body{padding:34px 26px 38px}
.spot-body .eyebrow{color:#E4C77B}
.spot-body .eyebrow::before{background:#E4C77B}
.spot-body h2{color:#F4EFE2}
.spot-body p{color:#C9C6B4;font-size:15.5px;max-width:52ch;margin:14px 0 24px}
.spot-price{font-family:'Fraunces',serif;font-size:30px;font-weight:500;color:#F0D9A0;margin-bottom:20px}
.spot-price span{font-size:14px;font-family:'Manrope',sans-serif;font-weight:600;color:#B8B49E;margin-left:8px}
.btn-light{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:#F4EFE2;color:var(--fistik-900);
  font-weight:700;font-size:15.5px;padding:16px 30px;
  border-radius:var(--pill);min-height:52px;
  transition:transform .2s,background .2s;
}
.btn-light:hover{background:#fff;transform:translateY(-2px)}

/* ------- hikaye ------- */
.story{background:var(--fistik-100);border-radius:28px;padding:44px 26px;text-align:center;position:relative;overflow:hidden}
.story > *{position:relative;z-index:1}
.story h2{margin-bottom:14px}
.story p{color:var(--toprak);max-width:62ch;margin:0 auto 8px;font-size:15.5px}
.story .serif-quote{
  font-family:'Fraunces',serif;font-style:italic;font-size:19px;
  color:var(--fistik-700);margin-top:18px;
}

/* ------- yorumlar ------- */
.reviews{display:grid;gap:16px}
.review{
  background:var(--krem);border:1px solid rgba(44,58,34,.08);
  border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);
}
.stars{color:var(--serbet);letter-spacing:3px;font-size:14px;margin-bottom:10px}
.review p{font-size:14.5px;color:var(--kabuk)}
.review .who{margin-top:14px;display:flex;align-items:center;gap:10px}
.avatar{
  width:36px;height:36px;border-radius:50%;
  background:var(--fistik-900);color:#F0D9A0;
  font-family:'Fraunces',serif;font-weight:600;font-size:15px;
  display:grid;place-items:center;
}
.who .n{font-size:13.5px;font-weight:700;color:var(--fistik-900)}
.who .c{font-size:12px;color:var(--toprak)}

/* ------- footer ------- */
footer{background:var(--fistik-900);color:#B8B49E;margin-top:20px;padding:48px 0 130px}
.foot-grid{display:grid;gap:30px}
.foot-brand .name{font-family:'Fraunces',serif;font-size:24px;font-weight:600;color:#F4EFE2}
.foot-brand p{font-size:13.5px;max-width:34ch;margin-top:10px}
/*
  Footer markası: düğüm + beyaz logo yan yana. Header'daki 26px'e karşılık
  burası 32px — footer'da rekabet edecek başka bir görsel yok ve marka
  imzası olarak biraz daha ağırlık taşımalı. `.foot-knot`un alt boşluğu
  yan yana dizilimde gereksizleştiği için sıfırlanır.
*/
.foot-mark{display:flex;align-items:center;gap:12px}
.foot-mark .foot-knot{margin-bottom:0}
.foot-logo{height:38px;width:auto;display:block}
/* Ödeme işareti alt şeritte metinle aynı satırda hizalı durmalı. */
.foot-pay{display:inline-flex;align-items:center}
.foot-pay img{height:17px;width:auto;display:block;opacity:.92}
.foot-col h4{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#E4C77B;font-weight:700;margin-bottom:14px}
.foot-col a{display:block;font-size:14px;padding:5px 0;transition:color .2s}
.foot-col a:hover{color:#F4EFE2}
.foot-bottom{border-top:1px solid rgba(244,239,226,.14);margin-top:36px;padding-top:20px;font-size:12.5px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}

/* ------- YAPIŞKAN SİPARİŞ ÇUBUĞU (imza öğesi) ------- */
.sticky-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:rgba(253,250,243,.96);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--cizgi);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:10px;
  transform:translateY(110%);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
  box-shadow:0 -8px 30px rgba(41,32,25,.12);
}
.sticky-bar.visible{transform:translateY(0)}
.sticky-info{flex:1;min-width:0}
.sticky-info .t{font-size:12px;color:var(--toprak);letter-spacing:.04em}
.sticky-info .p{font-size:15.5px;font-weight:700;color:var(--fistik-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-cta{
  flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--fistik-900);color:#F4EFE2;
  font-weight:700;font-size:15px;padding:0 26px;height:50px;
  border-radius:var(--pill);transition:background .2s,transform .15s;
}
.sticky-cta:active{transform:scale(.97)}
/* `.sticky-wa` (çubuktaki WhatsApp düğmesi) kaldırıldı: yalnız ana sayfa
   çubuğunda vardı, o çubuk da kaldırıldı. WhatsApp'a footer'daki İletişim
   sütunundan ulaşılıyor. */

/* Yalnız dar ekranda görünen çubuklar. 760px üstünde sepet/ödeme özet kartı
   `position:sticky` ile zaten ekranda kalır ve asıl düğmeyi taşır; çubuk
   aynı işi ikinci kez yapıp ekranın altını kaplıyordu. Ürün sayfasının
   çubuğu bu sınıfı ALMAZ — orada çubuk sayfanın kendi "Sepete Ekle"
   eylemini taşıyor, tekrar değil. */
@media (min-width:760px){ .sticky-bar.sticky-mobile{display:none} }

/* Özet kartındaki asıl ilerleme düğmesi. */
.sum-cta{display:flex;width:100%;margin-top:16px;justify-content:center}

/* ------- toast ------- */
.toast{
  position:fixed;left:50%;bottom:96px;z-index:90;
  transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:var(--fistik-900);color:#F4EFE2;
  font-size:14px;font-weight:600;padding:12px 22px;border-radius:var(--pill);
  box-shadow:var(--shadow-lift);
  transition:transform .3s,opacity .3s;
  display:flex;align-items:center;gap:8px;
}
.toast.show{transform:translate(-50%,0);opacity:1}

/* ------- reveal animasyonu -------
   GİZLEME KURALI YALNIZ .js ALTINDA. Kök öğeye `js` sınıfını layout'taki
   satır içi script yazar. JS yüklenmez veya hata verirse sınıf hiç eklenmez,
   .reveal blokları olağan akışta görünür kalır ve sayfa iskelet olarak
   gelmez. Animasyon ilerleyici bir zenginleştirmedir, içeriğin şartı değil. */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .knot-divider .knot,.toast .knot{stroke-dashoffset:0;transition:none}
}

/* ------- kurumsal düğüm motifi ------- */
.knot{display:block;color:var(--fistik-700)}
.knot-divider{display:flex;align-items:center;justify-content:center;gap:18px;padding:46px 0 0}
.knot-divider .line{height:1px;background:var(--cizgi);flex:1;max-width:150px}
.knot-divider .knot{
  width:30px;height:30px;color:var(--serbet);
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.7s ease .15s;
}
.knot-divider.in .knot{stroke-dashoffset:0}
.wm{position:absolute;pointer-events:none;opacity:.08;z-index:0}
.story .wm{color:var(--fistik-700);width:250px;height:250px;top:-64px;right:-64px}
.spotlight .wm{color:#F4EFE2;opacity:.07;width:270px;height:270px;bottom:-80px;left:-80px}
.toast .knot{
  width:18px;height:18px;color:#E4C77B;
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset .9s ease .1s;
}
.toast.show .knot{stroke-dashoffset:0}
.foot-knot{width:30px;height:30px;color:#E4C77B;margin-bottom:14px}

/* ------- masaüstü ------- */
@media (min-width:760px){
  .nav{height:76px}
  .nav-links{display:flex}
  .hero{padding:64px 0 30px}
  .hero-grid{grid-template-columns:1.05fr .95fr;gap:56px}
  /* Madde sayısı panelden değişebilir; auto-fit sütunu sayıya uydurur.
     Sabit üç sütun, dört maddede sonuncuyu alt satırda yalnız bırakıyordu. */
  .trust-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
  .products{grid-auto-columns:unset;grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible;margin:0;padding:6px 0 0}
  .spot-grid{grid-template-columns:1.05fr 1fr;align-items:center}
  .spot-img{aspect-ratio:auto;height:100%}
  .spot-body{padding:52px 56px}
  .story{padding:64px 48px}
  .reviews{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}
  footer{padding-bottom:120px}
}

/* ------- tatli sepet butonu ------- */
.add-btn{position:relative;overflow:hidden}
.add-btn .mini{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}
.ab-face{display:inline-flex;align-items:center;gap:7px;transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .28s;white-space:nowrap}
.ab-anim,.ab-done{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transform:translateY(130%);opacity:0}
.ab-knot{width:21px;height:21px;color:#F0D9A0;stroke-dasharray:1;stroke-dashoffset:1}
.add-btn.is-adding .ab-idle{transform:translateY(-130%);opacity:0}
.add-btn.is-adding .ab-anim{transform:none;opacity:1}
.add-btn.is-adding .ab-knot{transition:stroke-dashoffset .5s ease .06s;stroke-dashoffset:0}
.add-btn.is-done .ab-anim{transform:translateY(-130%);opacity:0}
.add-btn.is-done .ab-done{transform:none;opacity:1}
.add-btn.is-done{background:var(--fistik-700)}
.fly{position:fixed;z-index:120;width:26px;height:26px;color:var(--fistik-700);pointer-events:none;transition:transform .75s cubic-bezier(.4,.7,.3,1),opacity .75s ease}
.fly svg{width:100%;height:100%;display:block}
.card .card-img{cursor:pointer}

/* ------- sayfa iskeleti ------- */
.crumb{font-size:12.5px;color:var(--toprak);padding:20px 0 2px}
.crumb a{border-bottom:1px solid var(--cizgi)}
.page-head{padding:10px 0 0}
.page-head .sub{font-size:14.5px;color:var(--toprak);margin-top:6px}
.pills{display:flex;gap:8px;overflow-x:auto;padding:18px 0 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pills::-webkit-scrollbar{display:none}
.pill{flex:none;border:1.5px solid var(--cizgi);border-radius:100px;padding:9px 18px;font-weight:700;font-size:13.5px;color:var(--toprak);background:transparent;transition:background .2s,color .2s,border-color .2s}
.pill.sel{background:var(--fistik-900);color:#F4EFE2;border-color:var(--fistik-900)}
.grid-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding-top:16px}
.grid-list .card-name{font-size:15px}
.grid-list .price{font-size:15px}
.grid-list .add-btn{padding:10px 13px;font-size:12.5px;min-height:42px}
.card.hide{display:none}

/*
   MOBİLDE KART ALTI (İki sütunlu ızgara, ≤759px)

   390 px'te kart içi genişlik ~140 px'e iniyor; fiyat ile "Sepete" düğmesi
   yan yana sığmıyordu. Sonuç: fiyat iki satıra bölünüyor ve düğme kartın
   dışına taşıyordu. Düğme kendi satırına inip genişliği doldurur —
   dokunma hedefi de büyür.
*/
@media (max-width:759px){
  .grid-list .card-foot{flex-wrap:wrap}
  .grid-list .add-btn{flex:1 1 100%;justify-content:center}
}

/* ------- urun detay ------- */
.g-main{aspect-ratio:1/1;border-radius:22px;overflow:hidden;background:var(--fistik-100);box-shadow:var(--shadow)}
.g-main img{width:100%;height:100%;object-fit:cover}
.g-thumbs{display:flex;gap:10px;margin-top:12px}
.g-th{width:64px;height:64px;border-radius:12px;overflow:hidden;border:2px solid transparent;cursor:pointer;padding:0;background:var(--fistik-100)}
.g-th img{width:100%;height:100%;object-fit:cover}
.g-th.sel{border-color:var(--serbet)}
.pd-info h1{font-size:clamp(30px,6vw,44px);margin-bottom:6px}
.pd-stars{color:var(--serbet);letter-spacing:3px;font-size:14px}
.pd-stars span{color:var(--toprak);letter-spacing:0;font-size:12.5px;margin-left:6px}
.pd-price{font-family:'Fraunces',serif;font-size:32px;font-weight:500;color:var(--fistik-900);margin:12px 0 2px}
.pd-price span{font-size:14px;font-family:'Manrope',sans-serif;font-weight:600;color:var(--toprak);margin-left:8px}
.pd-desc{color:var(--toprak);font-size:15px;margin:8px 0 4px}
.opt-row{display:flex;gap:10px;margin:16px 0 4px}
.opt{flex:1;border:1.5px solid var(--cizgi);border-radius:14px;padding:11px 8px;text-align:center;font-weight:700;font-size:14px;color:var(--toprak);background:transparent;transition:border-color .2s,background .2s,color .2s}
.opt small{display:block;font-weight:600;font-size:12px;margin-top:2px;opacity:.75}
.opt.sel{border-color:var(--fistik-900);color:var(--fistik-900);background:var(--fistik-100)}
.buy-row{display:flex;gap:10px;margin:18px 0 4px}
.qty{display:flex;align-items:center;border:1.5px solid var(--cizgi);border-radius:100px;overflow:hidden;background:var(--krem)}
.qty button{width:44px;height:48px;font-size:20px;color:var(--fistik-900);line-height:1}
.qty .n{min-width:30px;text-align:center;font-weight:700;font-size:15px}
.buy-row .add-btn{flex:1;justify-content:center;font-size:15px}
.kn-li{display:flex;gap:12px;align-items:flex-start;margin:11px 0;font-size:14px;color:var(--toprak)}
.kn-li b{color:var(--fistik-900)}
.kn-li .knot{width:15px;height:15px;flex:none;margin-top:4px;color:var(--serbet)}
.acc{border-bottom:1px solid var(--cizgi)}
.acc summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:16px 0;font-weight:700;font-size:15px;color:var(--fistik-900);cursor:pointer}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-size:22px;font-weight:400;color:var(--serbet);transition:transform .25s}
.acc[open] summary::after{transform:rotate(45deg)}
.acc .acc-body{padding:0 0 16px;color:var(--toprak);font-size:14.5px}

/* ------- alttan cekmece ------- */
.sheet-veil{position:fixed;inset:0;background:rgba(41,32,25,.45);z-index:95;opacity:0;pointer-events:none;transition:opacity .3s}
.sheet-veil.open{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:96;background:var(--krem);border-radius:24px 24px 0 0;padding:12px 20px calc(20px + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .38s cubic-bezier(.22,1,.36,1);box-shadow:0 -14px 44px rgba(41,32,25,.22)}
.sheet.open{transform:none}
.grab{width:44px;height:5px;border-radius:3px;background:rgba(44,58,34,.18);margin:0 auto 14px}
.sheet h3{font-family:'Fraunces',serif;font-size:20px;font-weight:600;color:var(--fistik-900)}
.sheet .sp{font-size:13px;color:var(--toprak);margin:2px 0 6px}
.sheet .buy-row{margin-top:14px}

/* ------- kargo cubugu + sepet ------- */
.ship{background:var(--fistik-100);border-radius:16px;padding:16px 18px 20px;margin:6px 0 14px}
.ship .t{font-size:13.5px;color:var(--fistik-900);font-weight:600;margin-bottom:12px}
.ship .t b{color:var(--serbet)}
.ship-track{position:relative;height:6px;background:rgba(44,58,34,.14);border-radius:3px;margin-right:34px}
.ship-fill{position:absolute;left:0;top:0;bottom:0;background:var(--fistik-500);border-radius:3px;transition:width .6s ease;width:0}
.ship-knot{position:absolute;right:-34px;top:50%;transform:translateY(-50%);width:24px;height:24px;color:var(--toprak);opacity:.4;transition:color .3s,opacity .3s}
.ship-knot.win{color:var(--serbet);opacity:1;animation:pop .5s}
@keyframes pop{50%{transform:translateY(-50%) scale(1.3)}}
.ci{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--cizgi);align-items:flex-start;transition:opacity .3s}
.ci.gone{opacity:0}
.ci-img{width:78px;height:78px;border-radius:14px;object-fit:cover;background:var(--fistik-100);flex:none}
.ci-body{flex:1;min-width:0}
.ci-nm{font-family:'Fraunces',serif;font-size:16.5px;font-weight:600;color:var(--fistik-900)}
.ci-un{font-size:12.5px;color:var(--toprak);margin:2px 0 10px}
.ci-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ci-pr{font-weight:700;font-size:15.5px;color:var(--fistik-900)}
.qty.sm button{width:36px;height:38px;font-size:17px}
.qty.sm .n{min-width:26px;font-size:14px}
.ci-rm{font-size:12.5px;color:var(--toprak);text-decoration:underline;margin-top:8px}
.sum{background:var(--krem);border:1px solid rgba(44,58,34,.08);border-radius:16px;padding:20px;box-shadow:var(--shadow);margin-top:22px}
.sum-row{display:flex;justify-content:space-between;font-size:14.5px;color:var(--toprak);padding:5px 0}
.sum-row b{color:var(--fistik-900)}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--cizgi);margin-top:10px;padding-top:14px;font-weight:700;font-size:16px;color:var(--fistik-900)}
.sum-total .v{font-family:'Fraunces',serif;font-size:23px}
.empty{display:none;text-align:center;padding:56px 0}
/* Sayfada tek başınayken daha çok nefes alsın: 56px, yanında içerik varken
   doğru; bomboş bir sayfada bloğu üste yapıştırıyordu. */
.cart-grid.is-empty .empty{padding:88px 0 96px}
.empty .knot{width:44px;height:44px;margin:0 auto 16px;color:var(--serbet)}
.empty p{color:var(--toprak);margin-bottom:20px}

/* ------- hakkimizda ------- */
.band{display:grid;gap:22px;align-items:center;margin:36px 0}
.band-img{border-radius:22px;overflow:hidden;background:var(--fistik-100);box-shadow:var(--shadow)}
.band-img img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.band p{color:var(--toprak);font-size:15.5px;margin-top:10px}

@media (min-width:760px){
  .grid-list{grid-template-columns:repeat(4,1fr);gap:20px}
  .grid-list .add-btn{font-size:13.5px}
  .pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
  .cart-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;align-items:start}
  /* Boş sepette sağdaki sütun gizli; iz olarak kalmasın ki boş durum
     sayfanın ortasında dursun. */
  .cart-grid.is-empty{grid-template-columns:1fr}
  .sum{margin-top:0;position:sticky;top:100px}
  .band{grid-template-columns:1fr 1fr;gap:46px}
  .band.rev .band-img{order:2}
}
@media (prefers-reduced-motion:reduce){
  .fly{display:none}
  .ab-face,.ab-knot{transition:none}
  .add-btn.is-adding .ab-knot{stroke-dashoffset:0}
}

/* ============================================================
 * LARAVEL UYARLAMASI — kaynak tasarımda satır içi style ile
 * çözülmüş veya sunucu tarafı işaretlemeyle gelen küçük farklar.
 * Tasarımın görünümünü değiştirmez, yalnızca tamamlar.
 * ============================================================ */

/* Aktif menü bağlantısı (kaynakta style="border-color:var(--serbet)") */
.nav-links a.is-active{border-color:var(--serbet)}

/* Kategori hapları artık <a> — JS kapalıyken de filtre çalışsın diye */
.pills a.pill{display:inline-flex;align-items:center;text-decoration:none;line-height:1}
.pills a.pill.sel{background:var(--fistik-900);color:#F4EFE2;border-color:var(--fistik-900)}

/* Kart ve sepet satırı başlıkları artık bağlantı */
.card-name a,.ci-nm a{color:inherit;text-decoration:none}
.card-name a:hover,.ci-nm a:hover{color:var(--fistik-700)}

/* Filtre sonucu boşsa */
.empty-filter{text-align:center;color:var(--toprak);font-size:14.5px;padding:34px 0 6px}

/* "Kaldır" artık bir form içinde (JS kapalıyken de çalışsın diye) */
.ci-rm-form{margin:0}

/* --- KAYAN AKIŞ ---
   İz, sunucudan gelen tek `.ribbon-group`'un JS tarafından çoğaltılmasıyla
   kurulur: 2N eş kopya, N kopya pencereden geniş. `translateX(-50%)` tam
   olarak N kopya kaydırır, yani döngü başa döndüğünde ekrandaki görüntü
   birebir aynıdır — dikiş görünmez.

   `width:max-content` şart: iz, kapsayıcısının değil İÇERİĞİNİN genişliğinde
   olmalı, yoksa kopyalar alt satıra taşar. */
.ribbon-marquee{
  flex:1 1 auto;min-width:0;align-self:stretch;
  display:flex;align-items:center;
  overflow:hidden;
}
.ribbon-track{
  display:flex;align-items:center;width:max-content;
  animation:ribbon-kay var(--ribbon-sure,40s) linear infinite;
  will-change:transform;
}
.ribbon-group{display:flex;align-items:center;flex:none}
@keyframes ribbon-kay{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Okumaya çalışanın altından metin kaçmamalı. `is-paused` sekme arkaplana
   geçtiğinde JS tarafından ekleniyor: görünmeyen bir şeridi döndürmek
   bedavaya çalışan bir döngü. */
.ribbon-marquee:hover .ribbon-track,
.ribbon-marquee:focus-within .ribbon-track,
.ribbon.is-paused .ribbon-track{animation-play-state:paused}

/* Satırları ayıran tek şey BOŞLUK. Araya ayrı bir işaret konmuyor: her
   satırın kendi ikonu zaten cümlenin nerede başladığını söylüyor. Boşluk
   o yüzden cömert — iki satır arasında 60px kalıyor. */
.ribbon-item{
  flex:none;
  display:inline-flex;align-items:center;gap:10px;
  font-weight:600;white-space:nowrap;
  padding-inline:30px;
}
/* Kırpma YOK: sırayla gösterirken uzun metin şeridi iki satıra düşürdüğü
   için üç noktayla kesiliyordu. Kayan akışta metnin tamamı zaten geçiyor,
   kesmek bilgiyi yok etmek olurdu. */
.ribbon-text{white-space:nowrap}

.ribbon-icon{
  width:19px;height:19px;flex:none;
  stroke:#F0D9A0;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}

/* --- öne çıkan satır: akışın içinde ayrışan tek rozet --- */
.ribbon-item.is-featured{
  background:rgba(240,217,160,.15);
  border:1px solid rgba(240,217,160,.42);
  border-radius:var(--pill);
  padding:5px 18px;margin-inline:16px;
  color:#F0D9A0;font-weight:700;
}
.ribbon-item.is-featured .ribbon-icon{stroke:#F0D9A0}


/* --- görünür çağrı --- */
.ribbon-cta{
  flex:none;display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px 3px 12px;border-radius:var(--pill);
  background:rgba(240,217,160,.14);
  border:1px solid rgba(240,217,160,.42);
  color:#F0D9A0;font-size:12.5px;font-weight:700;
  letter-spacing:.01em;white-space:nowrap;
  transition:background-color .2s ease,border-color .2s ease;
}
.ribbon-cta svg{width:13px;height:13px;transition:transform .2s ease}
.ribbon-item[href]:hover .ribbon-cta{background:rgba(240,217,160,.24);border-color:#F0D9A0}
.ribbon-item[href]:hover .ribbon-cta svg{transform:translateX(2px)}

/* --- geri sayım: gün/saat/dakika, saniye YOK --- */
.ribbon-countdown{
  flex:none;display:inline-flex;align-items:center;gap:5px;
  padding:2px 9px;border-radius:var(--pill);
  background:rgba(0,0,0,.22);
  font-variant-numeric:tabular-nums;   /* rakam değişince genişlik oynamasın */
  font-size:12.5px;font-weight:700;color:#F0D9A0;white-space:nowrap;
}
.ribbon-countdown svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* --- ücretsiz kargo ilerlemesi: şeridin ALT KENARINDA, kendi satırı yok ---
   `.ribbon`'un doğrudan çocuğudur, satırın içinde DEĞİL: satırlar `transform`
   ile hareket ediyor ve transform, mutlak konumlanan çocuklar için yeni bir
   kapsayıcı blok yaratıyor — içeride kalsaydı çubuk şeridin değil metnin
   genişliğini kaplardı.

   KOŞULSUZ GÖRÜNÜR. Sırayla gösterirken yalnız sahibi satır ekrandayken
   açılıyordu; kayan akışta "ekrandaki satır" diye bir şey yok ve çubuğun
   anlattığı zaten satır değil sepet. */
.ribbon-progress{
  position:absolute;left:0;right:0;bottom:0;height:3px;
  background:rgba(255,255,255,.12);
  pointer-events:none;
}
.ribbon-progress-fill{
  display:block;height:100%;
  background:linear-gradient(90deg,var(--serbet),#F0D9A0);
  transition:width .6s cubic-bezier(.22,1,.36,1);
}
/* Eşiğe ulaşıldı: şerit kutlama tonuna geçer. Ton artık satıra değil şeride
   bağlı — kayan akışta aynı anda birkaç satır görünüyor. */
.ribbon.has-success{background:linear-gradient(180deg,#1B4B2A 0%,#177A3D 100%)}
.ribbon-item.is-success .ribbon-icon{stroke:#FFF0C9}


/* Dar ekran: metin okunmak için orada, yanındakiler yer çalmasın.
   CTA rozeti yerine yalnız ok kalır. */
@media (max-width:759px){
  .ribbon{font-size:13.5px}
  .ribbon-inner{min-height:46px}
  .ribbon-item{padding-inline:18px;gap:8px}
  .ribbon-icon{width:17px;height:17px}
  .ribbon-item.is-featured{padding:4px 13px;margin-inline:10px}
  .ribbon-cta{padding:3px 7px;gap:0}
  .ribbon-cta-label{display:none}
}

@media (prefers-reduced-motion:reduce){
  /* Kayma durur ama İÇERİK KAYBOLMAZ: JS klonlamayı atlar, tek grup kalır
     ve şerit yatay kaydırılabilir olur. Hareket isteği "animasyon
     istemiyorum"dur, "içeriğin bir kısmını görmek istemiyorum" değil. */
  .ribbon-track{animation:none}
  .ribbon-marquee{overflow-x:auto;scrollbar-width:none}
  .ribbon-marquee::-webkit-scrollbar{display:none}
  .ribbon-progress-fill,.ribbon-cta svg{transition:none}
}

/* Sepet özetinde tutar yerine bilgi yazan satır (ör. "Ödeme adımında") */
.sum-row .sum-muted{color:var(--toprak);font-weight:600;font-size:13.5px}

/* ------------------------------------------------------------------
 * FAZ 2 / İP-0 — ortak altyapı
 * ------------------------------------------------------------------ */

/* Mobil menü düğmesi: masaüstünde .nav-links göründüğü için gizlenir. */
.nav-menu-btn{display:grid}
@media (min-width:760px){.nav-menu-btn{display:none}}

/* Dikey bağlantı listesi — mobil menü çekmecesi ve hesap kenar menüsü.
   .foot-col a kullanılamıyor: rengi koyu footer paletine bağlı
   (hover #F4EFE2), krem zeminde görünmez olurdu. */
.side-nav a,.side-nav button{
  display:block;width:100%;text-align:left;font-family:inherit;
  font-size:15px;font-weight:600;color:var(--toprak);
  padding:12px 0;border-bottom:1px solid var(--cizgi);
  transition:color .2s}
.side-nav a:last-child,.side-nav form:last-child button{border-bottom:none}
.side-nav a:hover,.side-nav button:hover{color:var(--fistik-900)}
.side-nav a.is-active{color:var(--fistik-900);font-weight:700}

/* Hesap sayfaları kabuğu (layouts/account) */
.acct-grid{display:grid;gap:24px}
@media (min-width:760px){.acct-grid{grid-template-columns:250px 1fr;gap:40px}}

/* ------------------------------------------------------------------
 * FORM KALIBI — kaynak tasarımlarda form yoktu; Faz 2'nin tüm formları
 * (ödeme, giriş/kayıt, adres, değerlendirme) bu tek kalıbı kullanır.
 * Girdi yüksekliği .btn-primary ailesiyle aynı (50-52px), köşe yarıçapı
 * kartlarla uyumlu (14px), odak halkası --serbet-soft. Hata rengi
 * #B4462F paletin dışındaki TEK yeni renktir (toprak kırmızısı —
 * fıstık yeşiliyle çakışmaz).
 * ------------------------------------------------------------------ */
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:700;color:var(--fistik-900);
  letter-spacing:.02em;margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;font-family:inherit;font-size:15px;color:var(--kabuk);
  background:var(--krem);border:1.5px solid var(--cizgi);border-radius:14px;
  padding:13px 16px;min-height:50px;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--fistik-700);box-shadow:0 0 0 3px var(--serbet-soft)}
.field .hint{font-size:12px;color:var(--toprak);margin-top:5px}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#B4462F}
.form-error{font-size:12.5px;color:#B4462F;margin-top:5px;font-weight:600}

/* ------- telefon doğrulama (şehir içi sipariş) -------
   Alan + düğme aynı satırda; dar ekranda düğme alta iner. Onay rozeti
   düğmenin yerini alır, yanına eklenmez — ikisi aynı anda görünürse
   "doğrulandı ama yine mi doğrulayacağım?" sorusu doğar. */
.otp-line{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.otp-line input{flex:1 1 200px;min-width:0}
.otp-line .btn-ghost,.otp-line .btn-primary{flex:0 0 auto;padding:11px 18px;font-size:14px}
/* `:not([hidden])` ŞART: çıplak `display:inline-flex` tarayıcının
   `[hidden]{display:none}` kuralını ezdiği için rozet, JS `hidden=true`
   dese bile HER ZAMAN görünüyordu. Doğrulanmamış müşteri ekranda
   "Doğrulandı" görüyor, formu dolduruyor ve ancak gönderirken reddediliyordu;
   üstelik "Doğrula" düğmesiyle rozet yan yana duruyordu. */
.otp-ok:not([hidden]){display:inline-flex}
.otp-ok{align-items:center;gap:7px;flex:0 0 auto;
  font-size:13.5px;font-weight:700;color:var(--fistik-900)}
.otp-ok .knot{width:20px;height:20px;color:var(--serbet)}
/* Kod kutusu. Eskiden çerçeveli ve ayrı zeminliydi: krem panelin içinde
   ikinci bir kutu gibi duruyordu. Artık çerçevesiz, yumuşak fıstık zemini —
   indirim kodu kutusundaki doğrulama paneliyle aynı aile. */
.otp-box{margin-top:12px;padding:13px;border-radius:12px;background:var(--fistik-100)}

/* ---- DOĞRULAMA KODU ALANI — İKİ EKRANDA ORTAK ----
   Şehir içi sipariş formu ve indirim kodu kutusu aynı işi yapıyor: altı
   haneli kod. Görünümü iki yerde ayrı tanımlamak, birinde yapılan
   iyileştirmenin diğerine geçmemesi demekti.

   Yalnız KOD'a özgü davranışı taşır (ortalama, aralık, tablo rakamları);
   çerçeve ve yükseklik altındaki alan kalıbından gelir — biri form alanı,
   diğeri `.coupon-input`. */
.otp-code{
  text-align:center;
  letter-spacing:.42em;text-indent:.42em;   /* son hanenin sağında da boşluk kalsın */
  font-weight:700;font-size:16px;
  font-variant-numeric:tabular-nums;        /* rakam değişince genişlik oynamasın */
  text-transform:none;
}
.otp-code::placeholder{letter-spacing:.42em;color:rgba(41,32,25,.24);font-weight:600}

/* İkincil eylemler: düğme değil bağlantı görünümü. Aynı hizada iki gerçek
   düğme olsaydı hangisinin asıl iş olduğu kaybolurdu. */
.otp-actions{display:flex;gap:14px;margin-top:9px;flex-wrap:wrap}
.otp-actions button{
  padding:0;font-size:12px;font-weight:600;color:var(--fistik-700);
  text-decoration:underline;text-underline-offset:2px;background:none;border:0;
}
.otp-actions button:hover{color:var(--fistik-900)}
.otp-actions button[disabled]{color:var(--toprak);text-decoration:none;cursor:default;opacity:.7}
.field-row{display:grid;gap:12px}
@media (min-width:760px){.field-row.two{grid-template-columns:1fr 1fr}}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--toprak)}
.check input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--fistik-700)}
.panel{background:var(--krem);border:1px solid rgba(44,58,34,.08);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.panel + .panel{margin-top:16px}
.panel h3{font-family:'Fraunces',serif;font-size:19px;font-weight:600;
  color:var(--fistik-900);margin-bottom:14px}
/* .field label (0,1,1) özgüllük olarak .check'i (0,1,0) eziyor; .field
   içine konan onay satırı blok olarak çizilip kutu-metin hizası bozuluyordu.
   Hata mesajı .field'a bağlı olduğu için bu birleşim kaçınılmaz. */
.field label.check{display:flex;font-size:14px;font-weight:400;color:var(--toprak)}

/* ------------------------------------------------------------------
 * İP-3 — arama
 * ------------------------------------------------------------------ */

/* Üstten açılan çekmece: arama alanı başlığın altından insin diye
   mevcut .sheet kalıbı yön değiştirir. Başka hiçbir şeyi ezmez.
   .sheet.top ile .sheet.open aynı özgüllükte (0,2,0) ve bu blok dosyanın
   sonunda olduğu için kapalı hâl açık hâli ezerdi; açık hâl bu yüzden
   .sheet.top.open ile ayrıca tanımlanır. */
.sheet.top{top:0;bottom:auto;border-radius:0 0 24px 24px;transform:translateY(-105%)}
.sheet.top.open{transform:none}

/* Anlık öneri satırı. Mevcut .ci sepet satırı 78px görsel ve adet
   kontrolleri için tasarlandı; 44px'lik öneri listesine uymuyor. */
.sr-item{display:flex;align-items:center;gap:12px;padding:10px 8px;
  border-radius:12px;transition:background .15s}
.sr-item img{width:44px;height:44px;border-radius:10px;object-fit:cover;
  background:var(--fistik-100);flex:none}
.sr-item .n{flex:1;min-width:0;font-size:14.5px;font-weight:600;color:var(--fistik-900);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-item .c{display:block;font-size:12px;font-weight:500;color:var(--toprak)}
.sr-item .price{font-size:15px;white-space:nowrap}
.sr-item:hover,.sr-item.is-on{background:var(--fistik-100)}

/* ------------------------------------------------------------------
 * İP-8 — kurumsal metin sayfaları
 * Uzun düz metin tipografisi. Kaynak tasarımda karşılığı yok; dört
 * sayfa da (kullanım koşulları, mesafeli satış, gizlilik, teslimat)
 * bu tek bloğu kullanır.
 * ------------------------------------------------------------------ */
.prose h2{font-family:'Fraunces',serif;font-size:22px;color:var(--fistik-900);
  margin:26px 0 10px}
.prose h3{font-size:16px;font-weight:700;color:var(--fistik-900);margin:20px 0 8px}
.prose p,.prose li{font-size:15px;color:var(--toprak);line-height:1.8}
.prose ul,.prose ol{margin:10px 0 10px 20px}
.prose li{margin-bottom:6px}
.prose a{color:var(--fistik-700);border-bottom:1px solid var(--serbet)}

/* Kurumsal menü masaüstünde metinle birlikte kaymasın. */
@media (min-width:760px){.legal-side{position:sticky;top:100px}}

/* ------------------------------------------------------------------
 * İP-4 — ödeme adımı
 * Kayıtlı adres kartları seçilebilir olmalı. .opt.sel görsel dili
 * korunur ama .opt (flex:1, ortalanmış tek satır) çok satırlı adres
 * bloğuna uymuyor; seçili hâl .panel üzerine taşınır.
 * ------------------------------------------------------------------ */
label.panel{display:block;cursor:pointer}
label.opt{cursor:pointer}
.opt input{position:absolute;opacity:0;width:0;height:0}
.panel.sel{border-color:var(--fistik-900);background:var(--fistik-100)}

/* ------------------------------------------------------------------
 * İP-5 — kart ekranı
 * PayTR iframe'inin oturacağı yer tutucu. Prototipte gerçek ödeme yok;
 * kesikli kenarlık alanın "burası dışarıdan dolacak" anlamını taşır.
 * Mevcut sınıflarla karşılığı yok, bu yüzden eklendi.
 * ------------------------------------------------------------------ */
.pay-slot{min-height:600px;border:2px dashed var(--cizgi);border-radius:var(--radius);
  display:grid;place-items:center;text-align:center;padding:28px;background:var(--fildisi)}
.pay-slot .knot{width:54px;height:54px;color:var(--serbet);margin:0 auto 16px}
.pay-slot .t{font-family:'Fraunces',serif;font-size:19px;color:var(--fistik-900);margin-bottom:6px}
.pay-slot p{font-size:14px;color:var(--toprak);max-width:38ch;margin:0 auto}

/* PayTR 3D Secure iframe'i. Yükseklik iframeResizer tarafından ayarlanır;
   buradaki min-height yalnız script yüklenene kadarki sıçramayı önler. */
.pay-frame{border:1px solid var(--cizgi);border-radius:var(--radius);overflow:hidden;
  background:var(--fildisi)}
.pay-frame iframe{display:block;width:100%;min-height:600px;border:0}

/* ------------------------------------------------------------------
 * İP-7 — sipariş durum çizelgesi
 * Hikâye sayfasındaki .timeline/.spine/.ch kalıbının kompakt dikey
 * varyantı. Oradaki CSS story.css'te ve yalnız o sayfada yüklendiği
 * için burada yeniden tanımlanır; ölçüler sipariş adımlarına göre
 * küçültüldü. Kargo takip (İP-7) ve sipariş detayı (İP-12) paylaşır.
 * ------------------------------------------------------------------ */
.track-timeline{position:relative;padding:4px 0 2px}
.track-timeline::before{content:"";position:absolute;top:13px;bottom:13px;left:13px;
  width:2px;background:var(--cizgi);border-radius:1px}
.track-timeline .fill{position:absolute;top:13px;left:13px;width:2px;
  background:var(--fistik-500);border-radius:1px;transition:height .8s ease}
.track-step{position:relative;padding:0 0 22px 44px}
.track-step:last-child{padding-bottom:0}
.track-step .node{position:absolute;left:14px;top:0;width:26px;height:26px;
  transform:translateX(-50%);background:var(--krem);border-radius:50%;padding:3px;
  color:var(--fistik-700)}
.track-step .lbl{font-size:14.5px;font-weight:700;color:var(--fistik-900);line-height:1.5}
.track-step .at{font-size:12.5px;color:var(--toprak)}
/* Bekleyen adımlar soluk. Plandaki --cizgi düğüm rengi .45 opaklıkla
   birleşince görünmez kaldığı için düğümde --toprak kullanıldı. */
.track-step.pending{opacity:.45}
.track-step.pending .node{color:var(--toprak)}
.track-step.current{opacity:1}
.track-step.current .node{color:var(--serbet)}

/* İP-12 — iptal edilmiş sipariş rozeti. .badge altın, .badge.green
   fıstık yeşili; iptal için paletin tek hata rengi kullanılır. */
.badge.danger{background:#B4462F}

/* ------------------------------------------------------------------
 * İP-13 — yıldız girdisi
 * Mevcut .stars yalnız GÖSTERİM içindir. Buradaki girdi JS'siz çalışır:
 * direction:rtl ile yıldızlar ters sırayla dizilir, "~" seçicisi de
 * işaretlenenin solundakileri (görselde solundakileri) boyar.
 * ------------------------------------------------------------------ */
.rate{display:inline-flex;gap:6px;direction:rtl}
.rate input{position:absolute;opacity:0;width:0;height:0}
.rate label{font-size:26px;color:var(--cizgi);cursor:pointer;transition:color .15s;
  margin:0;line-height:1}
.rate input:checked ~ label,.rate label:hover,.rate label:hover ~ label{color:var(--serbet)}
.rate input:focus-visible + label{outline:2px solid var(--fistik-700);outline-offset:2px}

/* ------------------------------------------------------------------
 * İP-14 — bakım sayfası
 * Tam ekran koyu zemin; layouts/app kullanmaz (header/footer yok).
 * ------------------------------------------------------------------ */
.maint{min-height:100vh;background:var(--fistik-900);color:#C9C6B4;
  display:grid;place-items:center;text-align:center;padding:40px 20px}
.maint .knot{width:70px;height:70px;color:#E4C77B;margin:0 auto 24px;
  stroke-dasharray:1;animation:knotdraw 2.2s ease-out .2s both}
.maint .name{font-family:'Fraunces',serif;font-size:26px;font-weight:600;color:#F4EFE2;
  display:block;margin-bottom:14px}
.maint h1{color:#F4EFE2;font-size:clamp(28px,6vw,44px);margin-bottom:14px}
.maint p{font-size:16px;max-width:44ch;margin:0 auto 28px}

/* ------------------------------------------------------------------
 * --- şehir içi ---
 * Kilis içi teslimat akışı (ARA-FAZ-SEHIR-ICI.md).
 *
 * Palet ve tipografi DEĞİŞMEZ; bu blok yalnızca kargo akışında karşılığı
 * olmayan üç şeyi ekler: durum şeridi, tek ekranda seçim için liste
 * satırı, ve satır içi adet kontrolü. Yeni renk yok, yeni font yok,
 * yeni @keyframes yok — nabız ve dokunuş geri bildirimi mevcut
 * "bump" kare dizisini yeniden kullanır.
 *
 * Mobil öncelikli: tüm ölçüler 390px genişlikte verildi, masaüstü
 * yalnızca mevcut 760px kırılma noktasında genişletiliyor.
 * ------------------------------------------------------------------ */

/* Durum şeridi — "açık mıyız, ne kadar sürer" sorusunun tek cevabı.
   Ekranın ilk satırı olması bilinçli: kapalıyken de tepsi hazırlanabildiği
   için müşteri neye bulaştığını en baştan bilmeli. */
/* DURUM SATIRI — başlık bloğunun son satırı.

   Kutu ve yanıp sönen nokta kaldırıldı: şerit sayfanın ilk sözünü elinden
   alıyordu ve nabız, bilgi vermeden dikkat çekiyordu. Şimdi başlığın altında
   ince bir çizgiyle ayrılmış tek satır. Durum METİNDE (bkz.
   LocalAvailability::statusLine); renk yalnız vurgu, tek başına bilgi taşımaz. */
.local-status{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin:16px 0 0;padding-top:14px;border-top:1px solid var(--cizgi);
  font-size:14.5px;color:var(--fistik-700)}
.local-status strong{font-weight:700;color:var(--fistik-900)}
.local-status .hours{font-size:12.5px;color:var(--toprak);letter-spacing:.01em}
/* Kapalı/duraklatılmış: aynı satır, düşük vurgu. Metin zaten durumu söylüyor. */
.local-status.is-closed strong{color:var(--toprak)}

/* Bölüm başlığı. text-transform:uppercase KULLANILMAZ: Türkçe'de i→İ
   dönüşümü tarayıcı diline bağlıdır ve "SIMITLER" gibi yanlış bir yazım
   riski var. Harf aralığı ve renk zaten başlık hissini veriyor. */
.lp-section-title{position:sticky;top:118px;z-index:40;
  background:var(--fildisi);
  font-size:12.5px;font-weight:700;letter-spacing:.16em;
  color:var(--toprak);padding:16px 0 8px;margin:0}

/* Ürün satırı — kart değil. Mobilde 2 sütunlu kart ızgarası dikey alanı
   israf eder ve "başka ne var?" keşfini yavaşlatır; 96px'lik satır aynı
   ekranda dört ürün gösterir. */
.lp-row{display:flex;align-items:center;gap:14px;
  min-height:96px;padding:12px 0;border-bottom:1px solid var(--cizgi)}
.lp-row:last-child{border-bottom:none}
.lp-row-img{position:relative;width:72px;height:72px;flex:none}
.lp-row-img img{width:100%;height:100%;border-radius:14px;object-fit:cover;
  background:var(--fistik-100);display:block}
/* Stok rozeti görselin altına oturur: satırın metin sütunu dar,
   üstte durursa ürün adını iterdi. */
.lp-row-img .badge{top:auto;bottom:-5px;left:50%;transform:translateX(-50%);
  padding:3px 9px;font-size:9.5px;letter-spacing:.08em;white-space:nowrap}

/* Gövde bir <button>: satıra dokunmak hızlı bakışı açar, sayfa değiştirmez.
   Akıştan koparmamak için ürün detay sayfasına gidiş yok. */
.lp-row-body{flex:1;min-width:0;text-align:left;font-family:inherit;
  background:none;border:0;padding:0;cursor:pointer}
.lp-row-name,.lp-row-note{display:block;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.lp-row-name{font-family:'Fraunces',serif;font-size:16px;font-weight:600;
  color:var(--fistik-900);line-height:1.3}
/* Tam açıklama hızlı bakış çekmecesinde; buradaki not bir ipucudur. */
.lp-row-note{font-size:12.5px;color:var(--toprak);margin-top:2px;line-height:1.45}
.lp-row-price{display:flex;align-items:baseline;gap:6px;margin-top:6px;
  font-size:15.5px;font-weight:700;color:var(--fistik-900)}
.lp-row-price small{font-size:11.5px;font-weight:600;color:var(--toprak)}

/* Kontrol sütununa 128px rezerve ETMİYORUZ: 390px'te geriye 122px kalıyor
   ve "Tereyağlı Simit" iki satıra sarıyordu. Bunun yerine ad ve not tek
   satıra sabitlendi (aşağıda) — satır yüksekliği 96px'te sabit kalır,
   liste hiç kaymaz, yalnız DOKUNULAN satırda metin kısalır. O satırda
   müşteri zaten ne aldığını biliyor. */
.lp-row form{flex:none;display:flex;margin:0}

/* Adet kontrolü — deneyimin kalbi.
   Seçili değilken 44px dairesel "+", seçilince "− n +" steppera GENİŞLER.
   İki ayrı öğedir; JS hangisinin görüneceğine karar verir. */
.qty-add,.qty-inline{flex:none;height:44px;border-radius:100px;
  background:var(--fistik-900);color:#F4EFE2}
/* display:grid/flex, hidden özniteliğinin UA kuralını ezer — ikisi de
   açıkça geri alınmalı, yoksa "gizli" öğe görünmeye devam eder. */
.qty-add[hidden],.qty-inline[hidden]{display:none}
.qty-add{width:44px;display:grid;place-items:center;font-size:24px;line-height:1;
  transition:transform .15s,opacity .2s}
.qty-add:active{transform:scale(.92)}
.qty-add[disabled]{opacity:.35;pointer-events:none}

/* Genişleme: 44 → 128px. Süre 220ms ve yaylanmalı eğri, "açıldı" hissi
   versin ama beklemeye dönüşmesin. overflow:hidden ile − ve sayı
   soldan kayarak girer. */
.qty-inline{width:44px;display:flex;align-items:center;overflow:hidden;
  transition:width .22s cubic-bezier(.22,1,.36,1)}
.qty-inline.is-on{width:128px}
.qty-inline button{flex:none;width:42px;height:44px;color:inherit;
  font-size:21px;line-height:1;transition:opacity .2s}
.qty-inline button[disabled]{opacity:.35;pointer-events:none}
/* tabular-nums: 1→2→10 geçişinde sayı zıplamasın. */
.qty-inline .n{flex:1;text-align:center;font-weight:700;font-size:15.5px;
  font-variant-numeric:tabular-nums}
.qty-inline .n.bump{animation:bump .32s}

/* Tepsi çubuğu — .sticky-bar türevi. Tek farkı sol tarafın düğme olması:
   oraya dokunmak tepsi çekmecesini açar, böylece ayrı bir sepet sayfası
   gerekmez. */
.tray-bar button.sticky-info{display:flex;flex-direction:column;
  align-items:flex-start;text-align:left;font-family:inherit;cursor:pointer;
  background:none;border:0;padding:0}
.tray-bar button.sticky-info .t{display:flex;align-items:center;gap:5px}
/* Üçgen ok glyph değil border ile çizilir: yazı tipinden bağımsız. */
.tray-bar button.sticky-info .t::after{content:"";width:0;height:0;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-bottom:5px solid var(--toprak)}
.tray-bar .sticky-cta[aria-disabled="true"]{opacity:.5}

/* Çekmecedeki tepsi satırı. .ci'den küçüktür (48px görsel): çekmece
   ekranın yarısını geçmemeli, aksi hâlde altındaki liste kaybolur. */
.tray-line{display:flex;align-items:center;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--cizgi)}
.tray-line:last-of-type{border-bottom:none}
.tray-line img{width:48px;height:48px;border-radius:12px;object-fit:cover;
  background:var(--fistik-100);flex:none}
.tray-line .nm{flex:1;min-width:0;font-size:14.5px;font-weight:600;
  color:var(--fistik-900);line-height:1.35}
.tray-line .nm small{display:block;font-size:12px;font-weight:500;color:var(--toprak)}
.tray-line .pr{font-size:14.5px;font-weight:700;color:var(--fistik-900);
  white-space:nowrap;min-width:64px;text-align:right}

/* Saat aralığı hapları (sipariş ekranı). .pills'ten ayrıdır: bunlar
   filtre değil SEÇİM, dolayısıyla radio davranışı gösterir. */
.slot-pills{display:flex;gap:8px;overflow-x:auto;padding:4px 0 6px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.slot-pills::-webkit-scrollbar{display:none}
.slot-pill{flex:none;position:relative;display:inline-flex;align-items:center;
  min-height:44px;border:1.5px solid var(--cizgi);border-radius:100px;
  padding:0 18px;font-weight:700;font-size:13.5px;color:var(--toprak);
  cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.slot-pill input{position:absolute;opacity:0;width:0;height:0}
.slot-pill.sel{background:var(--fistik-900);color:#F4EFE2;border-color:var(--fistik-900)}
.slot-pill.is-past{opacity:.4;pointer-events:none}

@media (min-width:760px){
  /* Masaüstünde satır rahatlar; ölçüler mobilde verildi, burada yalnız
     nefes payı artıyor. */
  .lp-row{min-height:104px;gap:18px}
  .lp-row-img,.lp-row-img img{width:84px;height:84px}
  .lp-row-name{font-size:17px}
}

@media (prefers-reduced-motion:reduce){
  /* `.local-status .dot.bump` kuralı kaldırıldı: durum şeridindeki nabız
     eden nokta artık yok, durumu yazı taşıyor. */
  .qty-inline .n.bump{animation:none}
  .qty-inline{transition:none}
}

/* ------------------------------------------------------------------
 * KAMPANYA VİTRİNİ — indirim satırları, kupon kutusu, hediye satırı
 *
 * Kampanya sistemi yalnız /prototip altında yaşar; bu blok canlı
 * tasarımın CSS'ini etkilemez (ayrı dosya).
 * ------------------------------------------------------------------ */

/* İndirim satırı: eksi tutar şerbet altınıyla ayrışır, ara toplamla
   karıştırılmaz. */
.sum-row.sum-discount span{color:var(--fistik-700)}
.sum-row.sum-discount b{color:var(--serbet);white-space:nowrap}

/* Ücretsiz kargo — "0,00 TL" yerine kelimeyle yazılır. */
.sum-row .sum-free{color:var(--fistik-700);font-weight:700}

/* Özet kartı altındaki açıklama notları (birleştirilemeyen indirim vb.) */
.sum-note{margin:8px 0 0;font-size:12.5px;line-height:1.55;color:var(--toprak)}
.sum-note-warn{background:var(--serbet-soft);border-radius:10px;padding:9px 11px}

/* ---------------------------------------------------------- Kupon */
.coupon-box{margin-top:16px;padding-top:14px;border-top:1px solid var(--cizgi)}
.coupon-label{display:block;font-size:13px;font-weight:700;color:var(--fistik-900);margin-bottom:7px}
.coupon-field{display:flex;gap:8px}
.coupon-input{flex:1;min-width:0;min-height:44px;border:1.5px solid var(--cizgi);
  border-radius:12px;padding:0 13px;font-size:14.5px;color:var(--kabuk);
  background:#fff;text-transform:uppercase;letter-spacing:.04em}
.coupon-input:focus{outline:none;border-color:var(--fistik-500)}
.coupon-apply{flex:none;min-height:44px;padding:0 18px;border:0;border-radius:12px;
  background:var(--fistik-900);color:#F4EFE2;font-weight:700;font-size:14px;
  cursor:pointer;transition:opacity .2s}
.coupon-apply:hover{opacity:.9}
.coupon-apply[disabled]{opacity:.5;cursor:default}

.coupon-applied{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--fistik-100);border-radius:12px;padding:10px 12px}
.coupon-applied-info{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.coupon-tag{display:inline-block;background:var(--fistik-900);color:#F4EFE2;
  border-radius:100px;padding:3px 11px;font-size:12.5px;font-weight:700;letter-spacing:.05em}
.coupon-applied-text{font-size:13px;color:var(--fistik-700)}
.coupon-remove{flex:none;border:0;background:none;color:var(--toprak);
  font-size:13px;font-weight:700;text-decoration:underline;cursor:pointer;padding:4px}

/* Kod sepette duruyor ama şu an indirim üretmiyor (kampanya onu yendi).
   Yeşil zemin "her şey yolunda" der; bu durumda nötr griye düşer. */
.coupon-applied.is-inactive{background:rgba(122,106,85,.10)}
.coupon-applied.is-inactive .coupon-tag{background:var(--toprak)}
.coupon-applied.is-inactive .coupon-applied-text{color:var(--toprak)}

/* Geçersizleştiği için düşen kuponun sebebi. */
.coupon-notice{margin:9px 0 0;padding:9px 11px;border-radius:10px;
  background:#FDF2E4;border:1px solid #E8CFA6;color:#8A5A16;
  font-size:12.5px;line-height:1.5}

.coupon-msg{margin:9px 0 0;font-size:12.5px;line-height:1.5}
.coupon-msg.is-error{color:#9B3B2F}
.coupon-msg.is-ok{color:var(--fistik-700)}

/* --- kimlik kapısı: giriş daveti ve telefon doğrulama ---
   İkisi de KUTUNUN İÇİNDE kalır. Modal ya da ayrı sayfa olsaydı müşteri
   sepetinden koparılırdı; buradaki bütün mesele akışı kesmemek.

   ZEMİN RENGİ BİLİNÇLİ. Bu kutuda amber/krem UYARI demek (`.coupon-notice`,
   `.sum-note-warn`). İkisi de uyarı değil, atılacak bir adım — o yüzden
   "uygulandı" rozetiyle aynı aileden, sakin fıstık tonunu kullanıyorlar.
   İlk denemede amberdiler ve ekranda hata gibi duruyorlardı.
   Gerekçenin tamamı için bkz. coupon-box.blade.php. */
.coupon-gate,.coupon-verify{
  margin-top:11px;padding:13px;
  border-radius:12px;
  background:var(--fistik-100);
}

/* --- giriş daveti --- */
.coupon-gate-text{margin:0;font-size:13px;line-height:1.55;color:var(--fistik-700)}
.coupon-gate-text b{color:var(--fistik-900);font-weight:700}
.coupon-gate-actions{display:flex;gap:8px;margin-top:11px}
/* Özet sütununda sayfa boyu düğme yok: kutunun kendi ölçüsü 44px. */
.coupon-gate-actions .btn-primary,
.coupon-gate-actions .btn-ghost{
  flex:1 1 0;min-width:0;min-height:44px;padding:0 12px;
  font-size:13.5px;border-radius:12px;
}

/* --- devam etme kapısı (sepet çekmecesi) --- */
/* Sepetin son adımı; ürün çekmecesinden daha ferah durur: üstte-altta
   nefes payı, düğmeler arasında 12px, geniş ekranda ortalanmış dar sütun. */
#checkoutGate{padding:20px 24px calc(36px + env(safe-area-inset-bottom));max-width:520px;margin:0 auto;border-radius:28px 28px 0 0}
#checkoutGate .grab{margin-bottom:22px}
#checkoutGate h3{font-size:24px;letter-spacing:-.01em}
#checkoutGate .sp{margin:6px 0 0;font-size:14px}
.co-gate{display:flex;gap:12px;margin-top:26px}
.co-gate .btn-primary,.co-gate .btn-ghost,.co-gate-guest{flex:1 1 0;min-width:0;min-height:54px;text-align:center;justify-content:center;font-size:15px;border-radius:14px}
.co-gate-or{display:flex;align-items:center;gap:14px;margin:20px 0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--toprak)}
.co-gate-or::before,.co-gate-or::after{content:"";flex:1;border-top:1px solid rgba(44,58,34,.14)}
.co-gate-guest{display:flex;width:100%}
.co-gate-note{margin:22px 0 0;font-size:13px;line-height:1.65;color:var(--fistik-700);text-align:center}
@media (min-width:760px){#checkoutGate{left:50%;right:auto;transform:translate(-50%,105%)}#checkoutGate.open{transform:translate(-50%,0)}}

/* --- telefon doğrulama --- */
/* Başlık: ikon + iki satır. Ayrı bir <h> kullanılmıyor — kutu zaten
   "İndirim kodunuz var mı?" başlığının altında, ikinci bir başlık
   seviyesi belge yapısında yalan olurdu. */
.cv-head{display:flex;gap:10px;align-items:flex-start;margin-bottom:11px}
.cv-icon{width:22px;height:22px;flex:none;color:var(--fistik-700);margin-top:1px}
.cv-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.cv-copy b{font-size:13.5px;font-weight:700;color:var(--fistik-900);line-height:1.3}
.cv-copy span{font-size:12px;color:var(--fistik-700);line-height:1.45}

/* Numara alanı kuponun `.coupon-field` kalıbını kullanır; tek farkı
   BÜYÜK HARFE çevrilmemesi (kupon kodu için doğru, telefon için değil). */
.cv-tel{text-transform:none;letter-spacing:normal;font-size:14.5px}

/* "0532 ****23 numarasına gönderildi" — yanlış numaraya gönderdiğini
   fark etmenin tek yolu. */
.cv-sent{margin:0 0 9px;font-size:12px;color:var(--fistik-700);line-height:1.45}

/* --------------------------------------------------- Hediye satırı */
/* Hediye satırında adet ve kaldır butonu HİÇ basılmaz (bkz. cart.blade.php);
   bu yüzden burada gizleme kuralı yok — olmayan bir şey gizlenmez. */
.ci-gift{background:var(--fistik-100)}
.gift-badge{display:inline-block;background:var(--fistik-900);color:#F4EFE2;
  border-radius:100px;padding:3px 11px;font-size:11.5px;font-weight:800;letter-spacing:.09em}
.gift-badge-sm{padding:2px 8px;font-size:10.5px;margin-left:6px;vertical-align:middle}
.ci-pr-gift{color:var(--fistik-700)}
.ci-gift-note{margin-top:6px;font-size:12.5px;color:var(--toprak);line-height:1.5}

/* ------------------------------------------------ Hediyeni seç */
.gift-choice{background:var(--krem);border:1.5px dashed var(--fistik-500);
  border-radius:var(--radius);padding:16px;margin-top:16px}
.gift-choice-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:14.5px;color:var(--fistik-900)}
.gift-choice-badge{background:var(--fistik-900);color:#F4EFE2;border-radius:100px;
  padding:3px 11px;font-size:11.5px;font-weight:800;letter-spacing:.09em}
.gift-choice-banner{margin:8px 0 0;font-size:13px;color:var(--toprak)}
.gift-choice-options{display:grid;gap:9px;margin-top:13px}
@media (min-width:640px){.gift-choice-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gift-option{display:flex;align-items:flex-start;gap:10px;min-height:44px;
  border:1.5px solid var(--cizgi);border-radius:12px;padding:11px 13px;
  cursor:pointer;background:#fff;transition:border-color .2s,background .2s}
.gift-option:has(input:checked){border-color:var(--fistik-900);background:var(--fistik-100)}
.gift-option input{margin-top:3px;accent-color:var(--fistik-900);flex:none}
.gift-option-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.gift-option-name{font-weight:700;font-size:14px;color:var(--fistik-900)}
.gift-option-value{font-size:12.5px;color:var(--toprak)}
.gift-choice-warn{margin:11px 0 0;font-size:12.5px;color:var(--toprak)}

/* -------------------------------------------------- Bülten formu */
.news-form{display:flex;flex-direction:column;gap:9px;margin-top:11px}
.news-field{display:flex;gap:8px}
.news-input{flex:1;min-width:0;min-height:44px;border:1px solid rgba(244,239,226,.25);
  border-radius:12px;padding:0 13px;font-size:14.5px;background:rgba(244,239,226,.07);color:#F4EFE2}
.news-input::placeholder{color:rgba(244,239,226,.55)}
.news-input:focus{outline:none;border-color:rgba(244,239,226,.55)}
.news-btn{flex:none;min-height:44px;padding:0 16px;border:0;border-radius:12px;
  background:#F4EFE2;color:var(--fistik-900);font-weight:700;font-size:14px;cursor:pointer}
.news-consent{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.5;
  color:rgba(244,239,226,.75)}
.news-consent input{margin-top:2px;accent-color:#F4EFE2;flex:none}
.news-msg{margin:0;font-size:12.5px;color:rgba(244,239,226,.9)}

/* ------------------------------------------- Onay kutusu (checkout) */
.consent-check{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;
  line-height:1.55;color:var(--toprak);cursor:pointer}
.consent-check input{margin-top:3px;accent-color:var(--fistik-900);flex:none;
  width:18px;height:18px}
.consent-note{margin:5px 0 0 28px;font-size:12px;color:var(--toprak);opacity:.85}