/* MAVRENNE — tasarım sistemi
 * Not: Bu dosya elle yazıldı (bu ortamda Tailwind standalone ikilisi indirilemedi).
 * Tailwind pipeline'ı (tailwind.config.js + input.css) belgelenmiştir; build ortamı
 * olduğunda `tailwindcss -i input.css -o app.css --watch` ile bu dosya üretilebilir.
 * Marka token'ları :root altında; şablonlar semantik sınıfları kullanır.
 * KURAL: hiçbir yerde saf beyaz yok — en parlak değer --krem.
 */

:root {
  --zemin: #000000;
  --zemin-2: #0A0908;
  --zemin-3: #14120F;
  --ahsap-koyu: #8A7358;
  --ahsap: #D6C0A0;      /* ana marka rengi */
  --ahsap-acik: #E4D2B6;
  --krem: #F2E8D8;       /* beyaz yerine */
  --gravur: #4A3524;
  --metin: #E8E2D8;
  --metin-soluk: #8A8378;
  --hat: #241F1A;
  --uyari: #C8553D;
  --onay: #7A8B5A;

  --serif: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --gecis: 320ms cubic-bezier(0.22, 1, 0.36, 1);
  --olcek: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --hat-genislik: 1px;
  --kenar-yaricap: 2px;
  --maks-genislik: 1200px;
}

/* --- Fontlar (self-host). Dosyalar static/fonts/ altına eklenince aktif olur;
   yoksa fallback serif/sans kullanılır. latin-ext alt kümesi Türkçe için şart. --- */
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-latin-ext.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020-20AB;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/static/fonts/cormorant-latin-ext.woff2") format("woff2");
  font-weight: 300 500;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020-20AB;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--sans);
  font-size: var(--olcek);
  line-height: 1.65;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0.01em;   /* Cümle düzeni: Türkçe küçük harfler zarif; uppercase İ sorununu bitirir */
  text-transform: none;
  color: var(--krem);
  line-height: 1.18;
  margin: 0 0 0.6em;
}
h1 { font-size: clamp(2rem, 1.3rem + 3.4vw, 3.6rem); }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.55rem); }

p { margin: 0 0 1em; }
a { color: var(--ahsap); text-decoration: none; transition: color var(--gecis); }
a:hover { color: var(--ahsap-acik); }

img { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 2px solid var(--ahsap);
  outline-offset: 3px;
  border-radius: var(--kenar-yaricap);
}

/* --- Yerleşim --- */
.kabuk { width: 100%; max-width: var(--maks-genislik); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.5rem); }
main { flex: 1 0 auto; }
.bolum { padding-block: clamp(3rem, 8vw, 6rem); }
.bolum--dar { max-width: 720px; margin-inline: auto; }
.orta { text-align: center; }
.ust-baslik { color: var(--ahsap); letter-spacing: 0.3em; font-size: 0.75rem; text-transform: uppercase; font-family: var(--sans); font-weight: 400; margin-bottom: 1rem; }

/* Yeniden kullanılabilir marka işareti (M monogramı) */
.marka-mark { width: 66px; height: 66px; border-radius: 50%; border: 2px solid var(--ahsap-koyu);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 1.4rem;
  font-family: var(--serif); font-size: 1.9rem; color: var(--ahsap); line-height: 1; }

/* --- Atlama bağlantısı --- */
.atla {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--ahsap); color: var(--zemin);
  padding: 0.6rem 1rem; border-radius: var(--kenar-yaricap);
}
.atla:focus { left: 1rem; top: 1rem; }

/* --- Başlık / gezinme --- */
.site-basi {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--zemin) 82%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: var(--hat-genislik) solid var(--hat);
}
.site-basi__ic { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { font-family: var(--serif); font-size: 1.35rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--krem); }
.logo:hover { color: var(--krem); }
.ana-nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2.1rem); }
.ana-nav a {
  position: relative;
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 500;
  letter-spacing: 0.015em;
  text-transform: none;
  color: var(--metin-soluk);
  padding: 0.25rem 0;
  transition: color var(--gecis);
}
.ana-nav a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--ahsap);
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--gecis);
}
.ana-nav a:hover, .ana-nav a[aria-current="page"] { color: var(--krem); }
.ana-nav a:hover::after, .ana-nav a[aria-current="page"]::after { transform: scaleX(1); }
/* The Homeward Project — sosyal etki katmanı; menüde ayrıcalıklı görünür. */
.ana-nav__homeward { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ahsap) !important; }
.ana-nav__homeward svg { flex: none; opacity: 0.9; transition: transform var(--gecis); }
.ana-nav__homeward:hover { color: var(--ahsap-acik) !important; }
.ana-nav__homeward:hover svg { transform: scale(1.12); }
.ana-nav__homeward::after { background: var(--ahsap-acik); }
.sepet-rozet { position: relative; }
.sepet-rozet::after { display: none; }
.sepet-rozet__sayi {
  position: absolute; top: -8px; right: -12px; min-width: 18px; height: 18px;
  background: var(--ahsap); color: var(--zemin); border-radius: 999px;
  font-size: 0.7rem; line-height: 18px; text-align: center; padding: 0 4px; font-weight: 600;
}
.nav-ac { display: none; background: none; border: 0; color: var(--metin); cursor: pointer; padding: 8px; min-width: 44px; min-height: 44px; }

/* --- Dil değiştirici (JS'siz <details>) --- */
.dil-sec { position: relative; }
.dil-sec__ac {
  display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer;
  color: var(--metin-soluk); font-family: var(--sans, inherit); font-size: 0.82rem;
  letter-spacing: 0.06em; list-style: none; padding: 6px 4px; min-height: 44px;
  transition: color var(--gecis);
}
.dil-sec__ac::-webkit-details-marker { display: none; }
.dil-sec__ac svg { flex: none; opacity: 0.85; }
.dil-sec[open] .dil-sec__ac, .dil-sec__ac:hover { color: var(--krem); }
.dil-sec__liste {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  display: flex; flex-direction: column; min-width: 150px;
  background: var(--zemin-2); border: var(--hat-genislik) solid var(--hat);
  border-radius: var(--kenar-yaricap); padding: 0.35rem; gap: 0.1rem;
  box-shadow: 0 18px 38px rgba(0,0,0,0.5);
}
.dil-sec__liste a {
  padding: 0.55rem 0.7rem; border-radius: calc(var(--kenar-yaricap) - 2px);
  color: var(--metin); font-size: 0.92rem; white-space: nowrap;
}
.dil-sec__liste a::after { display: none; }
.dil-sec__liste a:hover { background: var(--zemin-3); color: var(--krem); }
.dil-sec__liste a[aria-current="true"] { color: var(--ahsap); }

@media (max-width: 767px) {
  .dil-sec { width: 100%; }
  .dil-sec__liste { position: static; box-shadow: none; min-width: 0; margin-top: 0.4rem; }
}

@media (max-width: 767px) {
  .ana-nav {
    position: fixed; inset: 64px 0 auto 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--zemin-2); border-bottom: var(--hat-genislik) solid var(--hat);
    padding: 1rem clamp(1.1rem, 4vw, 2.5rem); transform: translateY(-120%);
    transition: transform var(--gecis); box-shadow: 0 20px 40px rgba(0,0,0,0.5);
  }
  .ana-nav[data-acik="true"] { transform: translateY(0); }
  .ana-nav a { padding: 0.85rem 0; width: 100%; min-height: 44px; display: flex; align-items: center; }
  .nav-ac { display: inline-flex; align-items: center; justify-content: center; }
}

/* --- Butonlar --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 44px; padding: 0.7rem 1.6rem;
  font-family: var(--serif); font-size: 1.1rem; letter-spacing: 0.03em; text-transform: none; font-weight: 500;
  border: var(--hat-genislik) solid var(--ahsap); border-radius: var(--kenar-yaricap);
  background: var(--ahsap); color: var(--zemin); cursor: pointer;
  transition: background var(--gecis), color var(--gecis), border-color var(--gecis);
}
.btn:hover { background: var(--ahsap-acik); color: var(--zemin); }
.btn--hayalet { background: transparent; color: var(--ahsap); }
.btn--hayalet:hover { background: var(--zemin-3); color: var(--ahsap-acik); }
.btn--blok { width: 100%; }
.btn--buyuk { min-height: 52px; font-size: 1.22rem; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* htmx istek sırasında butonlara meşgul durumu (sepet/ödeme geri bildirimi) */
.htmx-request button, button.htmx-request { opacity: 0.55; pointer-events: none; transition: opacity 120ms ease; }

/* --- Ürün kartı --- */
.urun-izgara { display: grid; gap: clamp(1.2rem, 3vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.urun-kart { background: var(--zemin-2); border: var(--hat-genislik) solid var(--hat); border-radius: var(--kenar-yaricap); overflow: hidden; transition: border-color var(--gecis), transform var(--gecis); }
.urun-kart:hover { border-color: var(--ahsap-koyu); transform: translateY(-3px); }
.urun-kart__gorsel { aspect-ratio: 4 / 5; background: var(--zemin-3); object-fit: cover; width: 100%; }
.urun-kart__govde { padding: 1.2rem 1.3rem 1.5rem; }
.urun-kart__ad { font-family: var(--serif); letter-spacing: 0.12em; text-transform: uppercase; color: var(--krem); font-size: 1.1rem; margin-bottom: 0.2rem; }
.urun-kart__alt { color: var(--metin-soluk); font-size: 0.85rem; margin-bottom: 0.9rem; }
.urun-kart__fiyat { color: var(--ahsap); font-size: 1.05rem; letter-spacing: 0.06em; }

/* --- Formlar --- */
.form-alan { margin-bottom: 1.2rem; }
.form-alan label { display: block; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--metin-soluk); margin-bottom: 0.4rem; }
.girdi, .form-alan input, .form-alan textarea, .form-alan select {
  width: 100%; min-height: 44px; padding: 0.65rem 0.9rem;
  background: var(--zemin-2); color: var(--metin);
  border: var(--hat-genislik) solid var(--hat); border-radius: var(--kenar-yaricap);
  font-family: var(--sans); font-size: 1rem; transition: border-color var(--gecis);
  color-scheme: dark;
}
.girdi:focus, .form-alan input:focus, .form-alan textarea:focus, .form-alan select:focus { border-color: var(--ahsap); outline: none; }
.girdi::placeholder, .form-alan input::placeholder, .form-alan textarea::placeholder { color: var(--metin-soluk); opacity: 0.7; }
.form-hata { color: var(--uyari); font-size: 0.8rem; margin-top: 0.35rem; }
.form-ipucu { color: var(--metin-soluk); font-size: 0.8rem; margin-top: 0.45rem; }

/* Dosya seçici — markalı buton */
input[type="file"].girdi { display: flex; align-items: center; padding: 0.5rem 0.6rem; color: var(--metin-soluk); font-size: 0.85rem; cursor: pointer; }
input[type="file"].girdi::file-selector-button {
  font-family: var(--serif); font-size: 0.98rem; letter-spacing: 0.02em;
  color: var(--zemin); background: var(--ahsap); border: var(--hat-genislik) solid var(--ahsap);
  border-radius: var(--kenar-yaricap); padding: 0.4rem 1.1rem; margin-right: 0.9rem;
  cursor: pointer; transition: background var(--gecis);
}
input[type="file"].girdi::file-selector-button:hover { background: var(--ahsap-acik); }

/* --- Uyarı/flash --- */
.flash { padding: 0.9rem 1.1rem; border-radius: var(--kenar-yaricap); margin-bottom: 1rem; border: var(--hat-genislik) solid; font-size: 0.9rem; }
.flash--uyari { border-color: var(--uyari); color: var(--uyari); background: color-mix(in srgb, var(--uyari) 10%, transparent); }
.flash--onay { border-color: var(--onay); color: var(--onay); background: color-mix(in srgb, var(--onay) 10%, transparent); }

/* --- Metin sayfaları (yasal / hikâye) --- */
.metin-govde { max-width: 760px; margin-inline: auto; }
.metin-govde h2 { margin-top: 2.4rem; font-size: 1.45rem; }
.metin-govde p { max-width: 68ch; line-height: 1.75; margin-bottom: 1.1em; color: var(--metin); }
.metin-govde ul, .metin-govde ol { padding-left: 1.4rem; margin-bottom: 1em; max-width: 68ch; }
.metin-govde li { margin-bottom: 0.5em; line-height: 1.7; }
.yer-tutucu { color: var(--uyari); background: color-mix(in srgb, var(--uyari) 12%, transparent); padding: 0 0.3em; border-radius: 2px; }

/* --- Footer --- */
.site-alti { background: var(--zemin-2); border-top: var(--hat-genislik) solid var(--hat); margin-top: 4rem; }
.site-alti__izgara { display: grid; gap: 2rem clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); padding-block: clamp(2.5rem, 6vw, 4rem); }
@media (min-width: 900px) { .site-alti__izgara { grid-template-columns: 1.4fr repeat(4, 1fr); } }
.site-alti h4 { font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.2em; color: var(--ahsap); margin-bottom: 1rem; text-transform: uppercase; }
.site-alti ul { list-style: none; margin: 0; padding: 0; }
.site-alti li { margin-bottom: 0.5rem; }
.site-alti a { font-family: var(--serif); font-size: 1.04rem; letter-spacing: 0.01em; color: var(--metin-soluk); transition: color var(--gecis); }
.site-alti a:hover { color: var(--krem); }

/* Marka bloğu */
.site-alti__marka { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; }
.site-alti__mark { width: 40px; height: 40px; border-radius: 50%; margin: 0 0 0.7rem; font-size: 1.15rem; }
.site-alti__wordmark { font-family: var(--serif); letter-spacing: 0.32em; text-transform: uppercase; color: var(--krem); font-size: 1.1rem; }
.site-alti__tagline { font-family: var(--serif); color: var(--ahsap); letter-spacing: 0.08em; margin: 0.4rem 0 0; }
.site-alti__slogan { color: var(--metin-soluk); font-size: 0.82rem; margin: 0.2rem 0 0; max-width: 26ch; }

/* İletişim / adres */
.site-alti__adres { font-style: normal; display: flex; flex-direction: column; gap: 0.35rem; }
.site-alti__adres strong { font-family: var(--serif); color: var(--krem); font-weight: 500; font-size: 1.02rem; }
.site-alti__adres span { color: var(--metin-soluk); font-size: 0.86rem; font-family: var(--sans); }
.site-alti__adres a { font-family: var(--sans); font-size: 0.9rem; }
.site-alti__vergi { font-size: 0.78rem !important; }

/* Dip bar */
.site-alti__dip {
  border-top: var(--hat-genislik) solid var(--hat); padding-block: 1.3rem;
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem 1.4rem;
  flex-wrap: wrap; color: var(--metin-soluk); font-size: 0.8rem;
}
.site-alti__yasal-link { display: flex; gap: 1rem; flex-wrap: wrap; order: 2; }
.site-alti__yasal-link a { font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.04em; }
.site-alti__telif { order: 1; }
.site-alti__backlink { order: 3; font-family: var(--sans) !important; font-size: 0.78rem !important; letter-spacing: 0.06em; color: var(--metin-soluk) !important; }
.site-alti__backlink:hover { color: var(--ahsap) !important; }

/* --- Çerez banner --- */
.cerez-banner {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 60;
  max-width: 640px; margin-inline: auto;
  background: var(--zemin-3); border: var(--hat-genislik) solid var(--hat); border-radius: var(--kenar-yaricap);
  padding: 1rem 1.2rem; display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
}
.cerez-banner p { margin: 0; font-size: 0.85rem; color: var(--metin-soluk); }
.cerez-banner[hidden] { display: none; }

/* --- Geçici hero yer tutucu (Aşama 3'te gerçek scroll hero ile değişecek) --- */
.hero-gecici { min-height: 70svh; display: flex; align-items: center; justify-content: center; text-align: center; border-bottom: var(--hat-genislik) solid var(--hat); background: radial-gradient(circle at 70% 50%, var(--zemin-3), var(--zemin) 70%); }

/* --- Kırıntı (breadcrumb) --- */
.kirinti { color: var(--metin-soluk); font-size: 0.8rem; letter-spacing: 0.06em; margin-bottom: 1.6rem; }
.kirinti a { color: var(--metin-soluk); transition: color var(--gecis); }
.kirinti a:hover { color: var(--ahsap); }

/* --- Hata sayfaları --- */
.hata-sayfa { padding-block: clamp(3rem, 10vw, 6rem); }
.hata-sayfa .marka-mark { margin: 0 auto 1.6rem; }
.hata-sayfa__metin { color: var(--metin-soluk); max-width: 44ch; margin: 0 auto 2rem; line-height: 1.6; }

/* --- Boş durum --- */
.bos-durum {
  text-align: center; max-width: 480px; margin: 2.5rem auto 0;
  padding: clamp(2.4rem, 6vw, 3.6rem) clamp(1.6rem, 5vw, 3rem);
  background: var(--zemin-2); border: 1px solid var(--hat);
  border-radius: var(--kenar-yaricap); color: var(--metin-soluk);
}
.bos-durum .marka-mark { margin: 0 auto 1.4rem; }
.bos-durum__baslik { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; color: var(--krem); margin-bottom: 0.7rem; }
.bos-durum p { color: var(--metin-soluk); line-height: 1.65; max-width: 40ch; margin: 0 auto 1.7rem; }
.sepet-drawer .bos-durum { background: transparent; border: none; max-width: none; margin-top: 0.5rem; padding-block: 2rem; }

.soluk { color: var(--metin-soluk); }
.iletisim-bilgi { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--hat); color: var(--metin); }
.iletisim-bilgi p { margin: 0.3rem 0; }

/* --- Bağlantı görünümlü buton --- */
.baglanti-buton { background: none; border: 0; color: var(--metin-soluk); cursor: pointer; font-size: 0.8rem; text-decoration: underline; padding: 0.2rem 0; }
.baglanti-buton:hover { color: var(--uyari); }

/* --- Sepet --- */
.sepet-liste { display: flex; flex-direction: column; gap: 1rem; margin: 1.5rem 0; }
.sepet-satir { display: grid; grid-template-columns: 72px 1fr auto; gap: 1rem; align-items: center; padding: 1rem; background: var(--zemin-2); border: 1px solid var(--hat); border-radius: var(--kenar-yaricap); }
.sepet-satir__gorsel { width: 72px; height: 90px; object-fit: cover; border-radius: var(--kenar-yaricap); background: var(--zemin-3); }
.sepet-satir__bilgi { display: flex; flex-direction: column; gap: 0.25rem; }
.sepet-satir__ozel { color: var(--metin-soluk); font-size: 0.82rem; }
.sepet-satir__adet { color: var(--metin-soluk); font-size: 0.82rem; }
.sepet-satir__sag { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; }
.sepet-satir__fiyat { color: var(--ahsap); letter-spacing: 0.04em; }
.sepet-ozet { max-width: 420px; margin-left: auto; margin-top: 1.5rem; padding: 1.4rem; background: var(--zemin-2); border: 1px solid var(--hat); border-radius: var(--kenar-yaricap); }
.sepet-ozet__satir { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.05rem; }
.sepet-ozet__satir strong { color: var(--ahsap); font-size: 1.2rem; }
.sepet-ozet__not { color: var(--metin-soluk); font-size: 0.8rem; margin: 0.6rem 0 1.2rem; }
@media (max-width: 520px) {
  .sepet-satir { grid-template-columns: 56px 1fr; }
  .sepet-satir__sag { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .sepet-satir__gorsel { width: 56px; height: 70px; }
}

/* Adet kontrolü */
.adet-kontrol { display: inline-flex; align-items: center; gap: 0.2rem; margin-top: 0.4rem; border: 1px solid var(--hat); border-radius: var(--kenar-yaricap); width: max-content; }
.adet-kontrol button { min-width: 34px; min-height: 34px; background: none; border: 0; color: var(--metin); font-size: 1.1rem; cursor: pointer; line-height: 1; }
.adet-kontrol button:hover { color: var(--ahsap); }
.adet-kontrol__sayi { min-width: 26px; text-align: center; font-size: 0.9rem; }

/* Kargo göstergesi */
.kargo-ipucu { margin: 1rem 0; padding: 0.7rem 0.9rem; border-radius: var(--kenar-yaricap); background: var(--zemin-3); color: var(--metin-soluk); font-size: 0.85rem; text-align: center; }
.kargo-ipucu--ok { color: var(--onay); }
.sepet-ozet__satir--toplam { border-top: 1px solid var(--hat); margin-top: 0.6rem; padding-top: 0.8rem; }
.sepet-ozet__satir--toplam strong { color: var(--ahsap); font-size: 1.2rem; }
.sepet-ozet .btn { margin-top: 1rem; }
.sepet-ozet__satir--indirim { color: var(--ahsap); }
/* --- İndirim kodu (kupon) alanı --- */
.kupon-alani { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--hat); }
.kupon-form__etiket { display: block; font-size: 0.85rem; color: var(--metin-soluk); margin-bottom: 0.4rem; }
.kupon-form__satir { display: flex; gap: 0.5rem; align-items: stretch; }
.kupon-form__satir .girdi { flex: 1; min-width: 0; text-transform: uppercase; }
.kupon-form__satir .btn { margin-top: 0; white-space: nowrap; }
.kupon-uygulandi { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.kupon-uygulandi__kod { font-size: 0.9rem; color: var(--ahsap); }
/* /sepet tam sayfa: masaüstünde iki sütun (ürünler | yapışkan özet) */
.sepet-sayfa > #sepet-sayi { display: none; }  /* rozet yalnızca başlıkta */
.sepet-sayfa .sepet-liste { margin-top: 0; }
@media (min-width: 820px) {
  .sepet-sayfa { display: grid; grid-template-columns: 1fr 340px; gap: 2.5rem; align-items: start; }
  .sepet-sayfa .sepet-liste, .sepet-sayfa .kargo-ipucu { grid-column: 1; }
  .sepet-sayfa .sepet-ozet { grid-column: 2; grid-row: 1 / 99; margin: 0; position: sticky; top: 88px; }
}

/* --- Sepet drawer --- */
.drawer-arkaplan { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); }
.drawer-arkaplan[hidden] { display: none; }
.sepet-drawer {
  position: fixed; top: 0; right: 0; z-index: 61;
  width: min(420px, 92vw); height: 100svh;
  background: var(--zemin-2); border-left: 1px solid var(--hat);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform var(--gecis);
  box-shadow: -20px 0 50px rgba(0,0,0,0.5);
}
.sepet-drawer[data-acik="true"] { transform: translateX(0); }
.sepet-drawer__bas { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--hat); }
.sepet-drawer__baslik { margin: 0; font-size: 1.1rem; }
.sepet-drawer__kapat { background: none; border: 0; color: var(--metin-soluk); font-size: 1.6rem; line-height: 1; cursor: pointer; min-width: 44px; min-height: 44px; }
.sepet-drawer__kapat:hover { color: var(--krem); }
.sepet-drawer__govde { flex: 1; overflow-y: auto; padding: 1.3rem; }
.sepet-drawer .sepet-satir { grid-template-columns: 56px 1fr; }
.sepet-drawer .sepet-satir__sag { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
.sepet-drawer .sepet-ozet { max-width: none; margin-left: 0; }
@media (prefers-reduced-motion: reduce) { .sepet-drawer { transition: none; } }

/* --- Erişilebilirlik / hareket --- */

/* --- Yönetim paneli --- */
.yonetim-baslik { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.yonetim-baslik__aksiyon { display: flex; gap: 0.7rem; align-items: center; }
.tablo-sar { overflow-x: auto; }
.yonetim-tablo { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.yonetim-tablo th, .yonetim-tablo td { text-align: left; padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--hat); vertical-align: middle; }
.yonetim-tablo th { color: var(--metin-soluk); font-weight: 400; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
.tablo-gorsel { width: 40px; height: 50px; object-fit: cover; border-radius: var(--kenar-yaricap); background: var(--zemin-3); }

.yonetim-form-duzen { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .yonetim-form-duzen { grid-template-columns: 1.4fr 1fr; } }
.form-ikili { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.form-kutu { border: 1px solid var(--hat); border-radius: var(--kenar-yaricap); padding: 1rem 1.2rem; margin-bottom: 1.2rem; }
.form-kutu legend { color: var(--ahsap); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0 0.5rem; }
.onay-satir { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; color: var(--metin); font-size: 0.9rem; text-transform: none; letter-spacing: 0; }
.onay-satir input { width: auto; min-height: auto; }
.yonetim-gorseller h3 { font-size: 1rem; }
.gorsel-grid { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1rem; }
.gorsel-oge { text-align: center; }
.gorsel-oge img { width: 120px; height: 150px; object-fit: cover; border: 1px solid var(--hat); border-radius: var(--kenar-yaricap); background: var(--zemin-3); }
.gorsel-yukle { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.7rem; align-items: flex-start; }

/* --- Erişilebilirlik / hareket --- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* --- Scroll-reveal (yalnızca JS varken gizler: .reveal-var) --- */
.reveal-var [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 720ms cubic-bezier(0.22,1,0.36,1), transform 720ms cubic-bezier(0.22,1,0.36,1); will-change: opacity, transform; }
.reveal-var [data-reveal].gorunur { opacity: 1; transform: none; }
/* Izgara içi hafif kademe */
.reveal-var [data-reveal-kademe] > * { opacity: 0; transform: translateY(20px); transition: opacity 640ms cubic-bezier(0.22,1,0.36,1), transform 640ms cubic-bezier(0.22,1,0.36,1); }
.reveal-var [data-reveal-kademe].gorunur > * { opacity: 1; transform: none; }
.reveal-var [data-reveal-kademe].gorunur > *:nth-child(2) { transition-delay: 90ms; }
.reveal-var [data-reveal-kademe].gorunur > *:nth-child(3) { transition-delay: 180ms; }
.reveal-var [data-reveal-kademe].gorunur > *:nth-child(4) { transition-delay: 270ms; }

/* Yatay taşma koruması.
   NOT: `overflow-x: hidden` <html>/<body>'yi kaydırma konteynerine çevirir ve
   `position: sticky`'yi (scroll hero) BOZAR. `overflow-x: clip` konteyner
   oluşturmaz; yatay taşmayı keser ama sticky çalışmaya devam eder. */
html, body { overflow-x: clip; }