/* KADİM — satış sayfası
   Yapı ornek-site ile aynı: dar mobil kolon, görsel dilimlerle anlatılan hikâye,
   aralarda sipariş butonu, en altta paket seçimi + teslimat formu, yapışkan alt bar.
   Renkler logodan ve ürün fotoğraflarından ölçüldü. */

:root{
  --ink:#0E110D;         /* sayfa dışı zemin, fotoğrafların zeytin-siyahı */
  --olive-900:#1A1E12;
  --olive-800:#2B2F1C;   /* ana koyu yüzey */
  --olive:#3D402B;       /* logo kartı yeşili */
  --gold:#C7AC72;
  --gold-hi:#F1DF9E;
  --gold-deep:#8E7240;
  --cream:#FBF7EF;
  --paper:#F3EBDC;
  --kraft:#E4D0B5;
  --text:#23261A;
  --muted:#6B6656;
  --line:#D9CDB5;
  --ok:#3E6B33;
  --err:#A3321F;

  --col:640px;
  --serif:'Marcellus', Georgia, 'Times New Roman', serif;
  --sans:'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
figure{ margin:0; }
img{ max-width:100%; height:auto; display:block; }

body{
  margin:0;
  background:var(--ink) radial-gradient(120% 60% at 50% 0%, #1d2215 0%, var(--ink) 70%) fixed;
  color:var(--text);
  font:400 16px/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

:focus-visible{ outline:3px solid var(--gold-hi); outline-offset:2px; }

/* ── Kolon ─────────────────────────────────────────────────────────── */
.sayfa{
  max-width:var(--col);
  margin:0 auto;
  background:var(--cream);
  box-shadow:0 0 48px rgba(0,0,0,.65);
  overflow:hidden;
}

/* ── Görsel dilimler ───────────────────────────────────────────────── */
.dilim{ display:block; line-height:0; }
.dilim img{ width:100%; }
button.dilim{ padding:0; border:0; background:none; width:100%; cursor:zoom-in; }

/* ── Sipariş butonu (örnekteki "TIKLA SİPARİŞ VER" şeridinin karşılığı) ─ */
.cta{
  display:block;
  padding:14px 14px 16px;
  background:var(--olive-900);
  text-decoration:none;
}
.cta span{
  display:flex; align-items:center; justify-content:center; gap:.5em;
  padding:.62em .8em .55em;
  border-radius:14px;
  background:linear-gradient(180deg,#F5E3A6 0%,#D9BE7E 45%,#B8964F 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -3px 0 rgba(0,0,0,.18), 0 6px 18px rgba(0,0,0,.45);
  color:var(--olive-900);
  font:800 clamp(1.45rem, 1rem + 2.6vw, 2.1rem)/1 var(--sans);
  letter-spacing:.02em;
}
.cta svg{ width:1.15em; height:1.15em; flex:none; }
@media (prefers-reduced-motion:no-preference){
  .cta span{ animation:nabiz 2.4s ease-in-out infinite; }
}
@keyframes nabiz{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.025) } }

/* ── Sipariş alanı ─────────────────────────────────────────────────── */
.siparis{ background:var(--paper); padding:18px 0 0; }
.ic{ padding:0 14px; }

.baslik{
  display:flex; align-items:center; gap:.7em;
  margin:22px 0 16px;
  color:var(--olive-800);
  font:700 1.18rem/1.2 var(--sans);
  text-align:center;
}
.baslik::before,.baslik::after{ content:""; flex:1; height:1px; background:var(--gold-deep); opacity:.55; }

/* canlı sipariş kutusu */
.stok-bilgisi{
  border-radius:10px;
  background:#ECE4D3;
  transition:background-color .9s ease;
  overflow:hidden;
}
.stok-bilgisi.flash{ background:#DCE9D4; }
.stok{
  padding:.55em .8em;
  background:var(--olive-800); color:var(--gold-hi);
  font:700 .95rem/1 var(--sans); letter-spacing:.04em; text-align:center;
}
.bilgi{ display:flex; align-items:center; gap:14px; padding:12px 14px 14px; }
.avatar{
  width:58px; height:58px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  background:var(--olive); color:var(--gold-hi);
  font:600 1.35rem/1 var(--serif);
}
.bilgi p{ margin:0; }
.isim{ font-weight:700; }
.saniye{ color:var(--muted); font-size:.92rem; }
.paket{ font-size:.95rem; }

.mesajlar{ position:relative; height:34px; margin:10px 0 0; overflow:hidden; }
.mesaj{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:.95rem; font-weight:500; text-align:center;
  opacity:0; transform:translateY(100%);
  transition:opacity .45s ease, transform .45s ease;
}
.mesaj.gorunur{ opacity:1; transform:none; }
.mesaj.gitti{ opacity:0; transform:translateY(-100%); }
.mesaj b{ color:var(--gold-deep); }
@media (prefers-reduced-motion:reduce){ .mesaj{ transition:none; } }

/* paket kartları */
.kartlar{ display:grid; gap:12px; }
.kart{ position:relative; display:block; cursor:pointer; }
.kart input{ position:absolute; opacity:0; width:1px; height:1px; }
.kart-ic{
  display:grid; grid-template-columns:38% 1fr; gap:12px; align-items:center;
  padding:10px;
  border:2px solid #CFC3AA; border-radius:12px;
  background:#FFFDF8;
  transition:border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.kart-ic img{ border-radius:8px; aspect-ratio:1; object-fit:cover; }
.kart:hover .kart-ic{ border-color:var(--gold); }
.kart input:focus-visible + .kart-ic{ outline:3px solid var(--gold-hi); outline-offset:2px; }
.kart input:checked + .kart-ic{
  background:#FFF3D1;
  border-color:var(--gold-deep);
  box-shadow:0 0 0 3px rgba(199,172,114,.35);
}
.kart h3{ margin:0; color:var(--olive-800); font:600 1.12rem/1.15 var(--serif); letter-spacing:.01em; }
.kart .alt{ margin:.25em 0 .1em; color:var(--gold-deep); font:700 .92rem/1.2 var(--sans); }
.kart .icerik{ margin:0; color:var(--muted); font-size:.86rem; line-height:1.3; }
.fiyat{ display:flex; align-items:flex-end; justify-content:space-between; gap:6px; margin-top:.45em; }
.eski small{ display:block; color:var(--muted); font-size:.72rem; }
.eski s{ color:#9A9384; font:500 1.05rem/1 var(--sans); }
.yeni{ text-align:right; }
.yeni small{ display:block; color:var(--muted); font-size:.72rem; }
.yeni strong{ display:block; color:var(--olive-800); font:700 1.75rem/1 var(--sans); letter-spacing:-.01em; }
.yeni em{ display:block; margin-top:2px; color:var(--ok); font:700 .72rem/1 var(--sans); font-style:normal; }
.sec{
  display:inline-flex; align-items:center; gap:.35em;
  margin-top:.5em; padding:.35em .9em;
  border-radius:6px;
  background:var(--olive-800); color:var(--gold-hi);
  font:700 .9rem/1 var(--sans); letter-spacing:.05em;
}
.sec .ok{ display:none; }
.kart input:checked + .kart-ic .sec{ background:var(--gold-deep); color:#fff; }
.kart input:checked + .kart-ic .sec .ok{ display:inline; }
.kart input:checked + .kart-ic .sec .yazi::after{ content:"SEÇİLDİ"; }
.kart input:not(:checked) + .kart-ic .sec .yazi::after{ content:"SEÇİNİZ"; }
.rozet{
  position:absolute; top:-9px; right:12px; z-index:1;
  padding:.28em .7em; border-radius:999px;
  background:var(--olive-800); color:var(--gold-hi);
  font:700 .72rem/1 var(--sans); letter-spacing:.06em;
}

.hata-kutu{ display:none; margin:10px 0; padding:.6em; border-radius:6px; background:var(--err); color:#fff; text-align:center; font-weight:600; }
.denendi .hata-kutu.gorunsun{ display:block; }

/* örnekteki "Sadece eczaneden gönderim" şeridinin karşılığı */
.serit{
  display:flex; align-items:center; gap:14px;
  margin:18px 0 0; padding:14px 16px;
  background:var(--olive-900); color:var(--cream);
}
.serit img{ width:62px; flex:none; border:1px solid var(--gold); }
.serit p{ margin:0; font:500 1.1rem/1.3 var(--serif); letter-spacing:.01em; }
.serit b{ color:var(--gold-hi); font-weight:400; }

/* form */
.form{ padding-block:4px 6px; }   /* yan boşluk .ic'den gelir, ezilmesin */
.alan{ margin-bottom:14px; }
.alan label{ display:block; margin-bottom:4px; color:var(--olive-800); font:600 1.08rem/1.2 var(--sans); }
.alan input,.alan select,.alan textarea{
  width:100%; padding:.72em .8em;
  border:1.5px solid #CBBFA5; border-radius:8px;
  background:#fff; color:var(--text);
  font:400 1.05rem/1.3 var(--sans);
  -webkit-appearance:none; appearance:none;
}
.alan select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%232B2F1C' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9em center; padding-right:2.4em;
}
.alan input:focus,.alan select:focus,.alan textarea:focus{ border-color:var(--gold-deep); outline:none; box-shadow:0 0 0 3px rgba(199,172,114,.35); }
.iki{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.uyari{ display:none; margin-top:4px; color:var(--err); font-size:.9rem; font-weight:500; }
.denendi .alan :invalid{ border-color:var(--err); }
.denendi .alan :invalid ~ .uyari{ display:block; }

.tamamla{
  display:flex; align-items:center; justify-content:center; gap:.5em;
  width:100%; margin:6px 0 18px; padding:.7em .8em;
  border:0; border-radius:12px; cursor:pointer;
  background:linear-gradient(180deg,#F5E3A6 0%,#D9BE7E 45%,#B8964F 100%);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.18), 0 6px 16px rgba(0,0,0,.25);
  color:var(--olive-900);
  font:800 1.4rem/1.1 var(--sans);
}
.tamamla svg{ width:1.1em; height:1.1em; }
.tamamla small{ display:block; font:600 .9rem/1.2 var(--sans); opacity:.8; }

.dip{
  padding:18px 16px 110px;
  background:var(--olive-900); color:#9C9784;
  font-size:.82rem; text-align:center;
}
.dip b{ color:var(--gold); font:400 1rem/1 var(--serif); letter-spacing:.3em; }

/* ── Yapışkan alt bar ──────────────────────────────────────────────── */
#hizli{
  position:fixed; left:50%; bottom:10px; z-index:2000;
  width:min(360px, calc(100% - 20px));
  transform:translateX(-50%);
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px;
  padding:8px 12px;
  border:2px dashed var(--gold); border-radius:10px;
  background:linear-gradient(150deg,#2F3420 0%, var(--olive-900) 90%);
  color:var(--cream); text-decoration:none;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}
#hizli[hidden]{ display:none; }
@media (prefers-reduced-motion:no-preference){ #hizli{ animation:salla 3.2s ease-in-out infinite; } }
@keyframes salla{ 0%,86%,100%{ transform:translateX(-50%) } 90%{ transform:translateX(calc(-50% - 4px)) } 94%{ transform:translateX(calc(-50% + 4px)) } }
.sicak{ font:700 .88rem/1.2 var(--sans); text-align:center; }
.sicak b{ color:var(--gold-hi); }
.sayac{ text-align:center; font:700 .8rem/1.25 var(--sans); }
.sayac small{ display:block; font-weight:500; color:#BFB9A4; }
.sayac output{ display:block; color:var(--gold-hi); font-size:.92rem; }

/* ── Işık kutusu ───────────────────────────────────────────────────── */
.isik{ position:fixed; inset:0; z-index:3000; display:grid; place-items:center; padding:12px; background:rgba(10,12,8,.92); }
.isik[hidden]{ display:none; }
.isik img{ max-height:calc(100dvh - 80px); width:auto; }
.isik button{
  position:absolute; top:10px; right:10px;
  padding:.5em .9em; border:1px solid var(--gold); border-radius:6px;
  background:transparent; color:var(--gold-hi); font:600 .9rem/1 var(--sans); cursor:pointer;
}

/* ── Diyaloglar (örnekteki bekleme/başarı) ─────────────────────────── */
.dlg-arka{ position:fixed; inset:0; z-index:3100; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(0,0,0,.45); }
.dlg{ width:min(380px,100%); padding:28px 22px 22px; border-radius:14px; background:#fff; text-align:center; animation:dlg-gir .2s ease-out; }
@keyframes dlg-gir{ from{ opacity:0; transform:scale(.94) } to{ opacity:1; transform:none } }
.dlg-don{ width:46px; height:46px; margin:0 auto 14px; border:4px solid #E6DFCF; border-top-color:var(--gold-deep); border-radius:50%; animation:don .8s linear infinite; }
@keyframes don{ to{ transform:rotate(360deg) } }
.dlg-tik{ width:60px; height:60px; margin:0 auto 12px; display:grid; place-items:center; border-radius:50%; background:var(--ok); color:#fff; font-size:32px; }
.dlg h2{ margin:0; color:var(--olive-800); font:600 1.45rem/1.2 var(--serif); }
.dlg p{ margin:.6em 0 0; color:var(--muted); }
.dlg-ozet{ margin:.9em 0 0; padding:.7em; border-radius:8px; background:var(--paper); color:var(--text); font-weight:600; }
.dlg-tamam{ margin-top:18px; padding:.6em 2.2em; border:0; border-radius:8px; background:var(--olive-800); color:var(--gold-hi); font:700 1rem/1 var(--sans); cursor:pointer; }
@media (prefers-reduced-motion:reduce){ .dlg,.dlg-don{ animation:none; } }