/* ============================================================
   VELORIEN İSTANBUL — Luxury Stylesheet
   ============================================================ */

/* ============================================================
   RENK PALETİ — beyaz zemin, nötr gri, siyah düğme.
   ------------------------------------------------------------
   Referans siteler ölçüldü (e-bargello, madparfum, sephora.com.tr,
   lorisparfum): dördü de beyaz zemin + neredeyse siyah metin +
   nötr gri ikincil metin + DÜZ SİYAH düğme kullanıyor. Renk yükünü
   arayüz değil ÜRÜN GÖRSELLERİ taşıyor. Altın beyaz zeminde
   cılız kaldığı için arayüzden çıkarıldı; yalnız markada kaldı
   (logo ve "VELORIEN" yazısı → --grad-brand).

   Değişken adları eski koyu temadan kalma ama ROL taşıyor:
     --black/--noir/--char  = zeminler (sayfa → ikincil yüzey → kart)
     --cream/--cream-dim/--muted = metin (ana → ikincil → üçüncül)
     --gold/--gold-light    = birincil vurgu / vurgunun koyusu
                              (artık altın değil, siyah tarafı)
     --gold-deep            = dekoratif kenarlık (açık gri)
   Site TEK TEMA — karanlık mod yalnız yönetim panelinde.

   TEMADAN BAĞIMSIZ: --on-dark* fotoğraf üstündeki metin/düğmeler
   (slider yazısı, ürün rozeti, galeri okları). Sayfa beyaz olsa da
   görselin üstü koyu kalıyor.
   ============================================================ */
:root {
  /* zeminler */
  --black:       #ffffff;
  --noir:        #f7f7f7;
  --char:        #ffffff;
  --char-2:      #f2f2f2;
  --brown:       #ebebeb;

  /* vurgu — altın değil, nötr siyah */
  --gold:        #151515;
  --gold-light:  #000000;
  --gold-deep:   #d8d8d8;

  /* metin */
  --cream:       #151515;
  --cream-dim:   #5a5a5a;
  --muted:       #767676;

  --line:        #e5e5e5;
  --line-soft:   #f0f0f0;

  /* düğme dolgusu düz siyah; marka gradyanı yalnız logoda */
  --grad-gold:  linear-gradient(180deg, #1c1c1c 0%, #151515 100%);
  --grad-dark:  linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%);

  /* yüzey efektleri */
  --glass:       rgba(255,255,255,0.92);
  --glass-solid: rgba(255,255,255,0.98);
  --img-bg:      #f2f2f2;
  --wash:        rgba(0,0,0,0.035);
  --tint:        rgba(0,0,0,0.04);      /* eskiden altın yıkama olan yerler */
  --shadow-1: 0 8px 24px -12px rgba(0,0,0,0.16);
  --shadow-2: 0 20px 48px -24px rgba(0,0,0,0.22);
  --shadow-3: 0 26px 56px -28px rgba(0,0,0,0.26);

  /* durum renkleri */
  --ok-text:  #1f7a45;  --ok-line:  #a8d8bd;
  --err-text: #c0271d;  --err-line: #eab5b1;

  /* TEMADAN BAĞIMSIZ (fotoğraf üstü) */
  --on-gold:      #ffffff;
  --on-dark:      #ffffff;
  --on-dark-dim:  rgba(255,255,255,0.82);
  --on-dark-gold: #ffffff;
  --scrim-photo:  rgba(0,0,0,0.45);

  --serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;

  --maxw: 1280px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0.02em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  opacity: 1;
  transition: opacity 0.28s ease;
}
/* Hide content until the correct language is applied (prevents wrong-language flash) */
html.i18n-pending body { opacity: 0; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

::selection { background: var(--gold); color: var(--on-gold); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--noir); }
::-webkit-scrollbar-thumb { background: var(--gold-deep); border-radius: 10px; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.12; letter-spacing: 0.01em; }

/* Marka yazısı da nötr: altın gradyan beyaz zeminde soluk ve uyumsuz
   kalıyordu (404 başlığı tek görünen yerdi; amblem varken bu yazı gizli). */
.gold-text { color: var(--cream); }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
}
.eyebrow::before, .eyebrow::after {
  content: "";
  width: 24px; height: 1px;
  background: var(--gold-deep);
  display: block;
  flex-shrink: 0;
}
/* Sola hizalı kullanımda yalnızca soldaki çizgi görünür */
.eyebrow::after { display: none; }

/* Ortalı kullanımda iki yanda simetrik çizgi */
.eyebrow.center { justify-content: center; }
.eyebrow.center::before, .eyebrow.center::after { display: block; }
/* letter-spacing son harften sonra boşluk bırakır; sağdaki çizgiyi
   o kadar geri çekerek görsel simetriyi kur */
.eyebrow.center::after { margin-left: -0.42em; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 2rem; }
section { position: relative; }
.section-pad { padding: clamp(4.5rem, 9vw, 9rem) 0; }

.section-head { max-width: 640px; margin-bottom: 3.5rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin: 1.2rem 0 1rem; }
.section-head p { color: var(--cream-dim); font-size: 1.05rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--sans); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 1.05rem 2.4rem;
  cursor: pointer; border: none; position: relative;
  transition: all 0.4s var(--ease);
}
.btn-gold {
  background: var(--grad-gold); color: var(--on-gold);
  background-size: 180% 180%; background-position: 0% 50%;
}
.btn-gold:hover { background-position: 100% 50%; transform: translateY(-2px); box-shadow: 0 14px 34px -12px var(--gold); }
.btn-ghost {
  background: transparent; color: var(--cream);
  border: 1px solid var(--line); border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-light); background: var(--tint); }
.btn-arrow { transition: transform 0.4s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(5px); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 1.5rem 0;
  transition: all 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }

.brand { display: flex; flex-direction: column; line-height: 1; }
.brand-logo {
  display: none; height: 54px; width: auto;
  filter: drop-shadow(0 3px 12px rgba(46,34,16,0.22));
  transition: height 0.45s var(--ease);
}
.brand.has-logo .brand-name, .brand.has-logo .brand-sub { display: none; }
.brand.has-logo .brand-logo { display: block; }
.site-header.scrolled .brand.has-logo .brand-logo { height: 44px; }
.footer-brand .brand-logo { height: auto; width: 220px; max-width: 100%; margin-bottom: 1.2rem; }
/* Footer amblemi artık bağlantı — üst bardaki gibi ana sayfaya gider. */
.footer-logo { display: inline-block; }
.footer-brand.has-logo .brand-name, .footer-brand.has-logo .brand-sub { display: none; }
.footer-brand.has-logo .brand-logo { display: block; }
@media (max-width: 768px) {
  .brand-logo { height: 46px; }
  .site-header.scrolled .brand.has-logo .brand-logo { height: 40px; }
}
.brand .brand-name {
  font-family: var(--serif); font-size: 1.6rem; font-weight: 600;
  letter-spacing: 0.28em; padding-left: 0.28em;
}
.brand .brand-sub {
  font-family: var(--sans); font-size: 0.6rem; font-weight: 400;
  letter-spacing: 0.66em; padding-left: 0.66em; color: var(--gold);
  margin-top: 0.42rem;
}

.main-nav ul { display: flex; gap: 2.4rem; }
.main-nav a {
  font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 400; color: var(--cream-dim); position: relative; padding: 0.4rem 0;
  transition: color 0.3s var(--ease);
}
.main-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px;
  background: var(--gold); transition: width 0.4s var(--ease);
}
.main-nav a:hover, .main-nav a.active { color: var(--gold-light); }
.main-nav a:hover::after, .main-nav a.active::after { width: 100%; }

/* ---- Dropdown submenus ---- */
.main-nav .has-sub { position: relative; display: flex; align-items: center; gap: 0.15rem; }
.sub-caret {
  background: none; border: none; color: var(--gold); cursor: pointer;
  font-size: 0.62rem; line-height: 1; padding: 0.3rem 0.2rem; transition: transform 0.3s var(--ease);
}
.main-nav .has-sub:hover .sub-caret, .main-nav .has-sub.sub-open .sub-caret { transform: rotate(180deg); color: var(--gold-light); }
.main-nav .submenu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px);
  min-width: 160px; list-style: none; margin: 0; padding: 0.3rem 0; gap: 0;
  background: var(--glass-solid); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line-soft); border-radius: 4px; box-shadow: var(--shadow-2);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); z-index: 60;
}
.main-nav .has-sub:hover .submenu, .main-nav .has-sub:focus-within .submenu, .main-nav .has-sub.sub-open .submenu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.main-nav .submenu li { width: 100%; }
.main-nav .submenu a {
  display: block; width: 100%; padding: 0.5rem 1.4rem;
  font-size: 0.72rem; letter-spacing: 0.14em; font-weight: 300; white-space: nowrap;
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}
.main-nav .submenu a:hover { color: var(--gold-light); background: var(--tint); }
.main-nav .submenu a::after { display: none; }

.header-actions { display: flex; align-items: center; gap: 1.4rem; }
/* Mobil başlık grupları masaüstünde tamamen kapalı: .header-inner yine
   tam olarak 3 flex öğesi (marka, menü, aksiyonlar) görür, yerleşim değişmez. */
.header-left { display: none; }
.nav-langs { display: none; }

/* Language switcher */
.lang-switch { position: relative; }
.lang-current {
  display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
  font-size: 0.78rem; letter-spacing: 0.12em; color: var(--cream-dim);
  padding: 0.5rem 0.7rem; border: 1px solid var(--line); border-radius: 2px;
  text-transform: uppercase; transition: all 0.3s var(--ease); background: transparent;
}
.lang-current:hover { border-color: var(--gold); color: var(--gold-light); }
.lang-current .chev { transition: transform 0.3s var(--ease); font-size: 0.6rem; }
.lang-switch.open .chev { transform: rotate(180deg); }
.lang-menu {
  position: absolute; top: calc(100% + 0.6rem); right: 0; min-width: 150px;
  background: var(--char); border: 1px solid var(--line); border-radius: 3px;
  overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: all 0.35s var(--ease); box-shadow: var(--shadow-2);
}
.lang-switch.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-menu button {
  display: flex; align-items: center; gap: 0.7rem; width: 100%;
  background: transparent; border: none; color: var(--cream-dim); cursor: pointer;
  padding: 0.8rem 1.1rem; font-family: var(--sans); font-size: 0.82rem;
  letter-spacing: 0.08em; text-align: left; transition: all 0.25s var(--ease);
}
.lang-menu button:hover, .lang-menu button.active { background: var(--tint); color: var(--gold-light); }
.flag { display: inline-flex; align-items: center; }
.flag-ic { width: 22px; height: 15px; border-radius: 2px; display: block; box-shadow: 0 0 0 1px var(--line); }

/* Burger */
.burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.burger span { width: 26px; height: 1.5px; background: var(--gold); transition: all 0.35s var(--ease); }
.burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height: 100vh; display: flex; align-items: center; position: relative;
  overflow: hidden; padding-top: 6rem;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 70% 35%, var(--tint), transparent 60%),
    radial-gradient(ellipse 70% 70% at 20% 80%, transparent, transparent 60%),
    var(--grad-dark);
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
.hero-glow {
  position: absolute; width: 520px; height: 520px; right: 6%; top: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle, transparent, transparent 65%);
  filter: blur(20px); z-index: 1; animation: float 9s ease-in-out infinite;
}
@keyframes float { 0%,100% { transform: translateY(-52%); } 50% { transform: translateY(-46%); } }

.hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; }
.hero-content { max-width: 640px; }
.hero-content .eyebrow { margin-bottom: 1.8rem; }
.hero h1 {
  font-size: clamp(2.8rem, 7vw, 5.6rem); line-height: 1.04; margin-bottom: 1.8rem;
  font-weight: 500;
}
.hero h1 .gold-text { display: block; font-style: italic; }
.hero-content p { font-size: 1.15rem; color: var(--cream-dim); max-width: 500px; margin-bottom: 2.6rem; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Hero visual — perfume bottle */
.hero-visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 480px; }
.bottle {
  position: relative; width: 230px; height: 400px; animation: bottleIn 1.4s var(--ease) both;
}
@keyframes bottleIn { from { opacity: 0; transform: translateY(40px) scale(0.94); } to { opacity: 1; transform: none; } }

.hero-ring {
  position: absolute; border: 1px solid var(--line); border-radius: 50%;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.hero-ring.r1 { width: 360px; height: 360px; animation: spin 40s linear infinite; }
.hero-ring.r2 { width: 460px; height: 460px; border-color: var(--line-soft); animation: spin 60s linear infinite reverse; }
@keyframes spin { to { transform: translate(-50%,-50%) rotate(360deg); } }

/* Scroll cue */
.scroll-cue {
  position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem; z-index: 3;
  font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted);
}
.scroll-cue .line { width: 1px; height: 46px; background: linear-gradient(var(--gold), transparent); animation: cue 2s ease-in-out infinite; }
@keyframes cue { 0%,100% { opacity: 0.3; transform: scaleY(0.6); } 50% { opacity: 1; transform: scaleY(1); } }

/* ============================================================
   ANA SAYFA SLIDER
   ------------------------------------------------------------
   Slaytlar üst üste durur, opaklıkla geçilir (kaydırma yerine fade:
   görseller tam ekran olduğu için kayma titriyordu). Yalnız .on olan
   görünür; JS sınıfı değiştirir.
   ============================================================ */
/* --hdr: yapışkan başlığın yüksekliği. Slider onun ALTINDAN başlar; yoksa
   görsel menünün arkasını kaplıyor ve menü okunmuyordu. Başlığın kapladığı
   şerit body zeminini (--black) gösterir, yani menü kendi zeminini korur. */
:root { --hdr: 103px; }
@media (max-width: 768px) { :root { --hdr: 95px; } }

/* Yükseklik EKRANA değil GÖRSELİN ORANINA göre belirlenir (--slide-ar, JS ilk
   slaydın doğal ölçüsünden yazar). Banner'larda metin/logo/buton görselin
   içinde ve kenarlara kadar geliyor; ekran yüksekliğine zorlayınca object-fit
   cover üstten-alttan kırpıyor ve logonun üstü, alttaki buton kesiliyordu. */
.hero-slider {
  position: relative;
  margin-top: var(--hdr);
  width: 100%;
  aspect-ratio: var(--slide-ar, 16 / 9);
  overflow: hidden; background: var(--black);
  /* Yatay sürükleme slider'a, dikey kaydırma sayfaya gitsin */
  touch-action: pan-y;
}
.hero-slider[hidden] { display: none; }
/* Şerit düzeni: slaytlar yan yana, kaydırma transform ile.
   Eskiden üst üste durup opaklıkla geçiyorlardı; sürüklerken diğer slaydın
   parmağı takip etmesi için yan yana dizilmeleri gerekiyor. */
.hs-track {
  position: absolute; inset: 0;
  display: flex; height: 100%;
  will-change: transform;
  transition: transform 0.55s var(--ease);
}
.hs-track.hs-anim-yok { transition: none; }   /* sürüklerken ve klon atlarken */
.hs-slide {
  position: relative; flex: 0 0 100%; width: 100%; height: 100%;
  display: block; overflow: hidden;
}
.hs-slide picture { position: absolute; inset: 0; display: block; }
/* Sürüklerken tarayıcının kendi görsel-sürükleme hayaleti ve metin seçimi
   devreye girmesin; imleç de tutulabilir olduğunu belli etsin. */
.hs-slide img { -webkit-user-drag: none; user-select: none; }
@media (hover: hover) and (pointer: fine) {
  .hero-slider { cursor: grab; }
  .hero-slider.hs-drag { cursor: grabbing; }
  /* .hs-slide'a pointer-events:none VERİLMEZ. Veriliyordu ve hs-drag sınıfı
     fareye basar basmaz eklendiği için, sürüklemeden yapılan basit bir
     tıklamada bile pointerup/click slayta değil kapsayıcıya gidiyordu —
     slaydın <a> bağlantısı hiç açılmıyordu. Sürükleme sonrası istenmeyen
     tıklamayı zaten capture aşamasındaki click dinleyicisi engelliyor. */
}
.hs-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Metin her görselde okunsun diye alttan yukarı koyu geçiş */
.hs-slide::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(12,10,8,0.45) 0%, rgba(12,10,8,0.15) 40%, rgba(12,10,8,0.85) 100%);
}

.hs-caption {
  position: absolute; left: 50%; bottom: clamp(4rem, 12vh, 9rem);
  transform: translateX(-50%); z-index: 2; text-align: center;
}
.hs-caption h1 {
  font-size: clamp(2.2rem, 6vw, 4.8rem); line-height: 1.06;
  margin-bottom: 1rem; color: var(--on-dark);
  text-shadow: 0 2px 24px rgba(0,0,0,0.5);
}
.hs-caption p {
  font-size: clamp(0.98rem, 2vw, 1.2rem); color: var(--on-dark-dim);
  max-width: 620px; margin: 0 auto 2rem;
  text-shadow: 0 2px 14px rgba(0,0,0,0.5);
}
/* Slaytın tamamı bağlantı olduğu için buton <span>; görünüm .btn'den gelir */
.hs-caption .btn { pointer-events: none; }

.hs-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(12,10,8,0.42); border: 1px solid rgba(243,234,214,0.28);
  color: var(--on-dark); font-size: 1.9rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.hs-arrow:hover { background: rgba(12,10,8,0.78); border-color: var(--on-dark-gold); color: var(--on-dark-gold); }
.hs-arrow.prev { left: clamp(0.6rem, 2vw, 2rem); }
.hs-arrow.next { right: clamp(0.6rem, 2vw, 2rem); }

.hs-dots {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: clamp(1.4rem, 4vh, 2.6rem); z-index: 3;
  display: flex; gap: 0.55rem;
}
.hs-dot {
  width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer;
  background: transparent; border: 1px solid var(--cream-dim);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.hs-dot.on { background: var(--gold); border-color: var(--gold); }

@media (max-width: 768px) {
  /* Mobilde slayt görselin KENDİ oranını alır (varsayılan 16:9) ve hiç kırpılmaz.
     Kırpmak yasak: bu banner'larda metin görselin içine gömülü ve sol üçte birde
     duruyor — 4:5'e kırpınca başlığın yarısı kesiliyordu.
     Slayta dikey mobil görsel yüklenirse aşağıdaki .hs-slide--m kuralı devreye
     girer ve alan uzar. */
  /* Mobilde de kırpma yok; oran görselden gelir. Slayta dikey mobil görsel
     yüklenmişse onun oranı kullanılır (--slide-ar-m). */
  .hero-slider:has(.hs-slide--m) { aspect-ratio: var(--slide-ar-m, 4 / 5); }
  .hs-arrow { width: 38px; height: 38px; font-size: 1.5rem; }

  /* Altyazı ölçüleri tam ekran hero için ayarlanmıştı; slider artık görselin
     oranında (2.4:1 banner'da 375px genişlikte yalnız ~156px yüksek).
     Eski punto ile altyazı kutusu 179px olup slider'ın DIŞINA taşıyordu.
     Kutuya sığacak şekilde küçültüldü ve satır sayısı sınırlandı: kullanıcı
     uzun metin yazsa da taşma olmaz. */
  .hs-caption { bottom: 0.7rem; padding-left: 1rem; padding-right: 1rem; }
  .hs-caption h1 {
    font-size: clamp(0.95rem, 4.4vw, 1.45rem); line-height: 1.15; margin-bottom: 0.3rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .hs-caption p {
    font-size: clamp(0.68rem, 3vw, 0.85rem); line-height: 1.4; margin-bottom: 0.55rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .hs-caption .btn { padding: 0.5rem 1.1rem; font-size: 0.62rem; letter-spacing: 0.14em; }

  /* Yazı boyutu KUTUNUN YÜKSEKLİĞİNE göre ölçeklenir (cqh).
     Önce "mobil görsel varsa kutu uzundur" varsayımıyla sabit büyük punto
     vermiştim; ama mobil görsel de her oranda olabiliyor — yatay bir dosya
     yüklendiğinde kutu 146px kalıp yazı taşıyordu. Kutuyu container yapıp
     yüksekliğine bağlayınca oran ne olursa olsun doğru ölçekleniyor.
     Yukarıdaki vw tabanlı kurallar cqh desteklenmeyen tarayıcıda yedek kalır. */
  .hero-slider { container-type: size; }
  .hs-caption { bottom: clamp(0.6rem, 5cqh, 2.4rem); }
  .hs-caption h1 { font-size: clamp(0.95rem, 11cqh, 2.1rem); }
  .hs-caption p  { font-size: clamp(0.68rem, 5cqh, 1rem); margin-bottom: clamp(0.5rem, 4cqh, 1.1rem); }
  .hs-caption .btn { padding: clamp(0.45rem, 3.5cqh, 0.8rem) clamp(1rem, 8cqh, 1.6rem);
                     font-size: clamp(0.6rem, 4cqh, 0.72rem); }
}
@media (prefers-reduced-motion: reduce) {
  .hs-track { transition: none; }
}

/* ============================================================
   MARQUEE
   ============================================================ */
/* ---- Duyuru şeridi (sayfanın en üstü) ----
   Bargello'daki gibi: normal akışta durur, kaydırınca yukarı gider; üst bar
   position:fixed olduğu için main.js/tbKaydir() barı şeride göre kaydırıyor.
   Fare üstüne gelince animasyon duraklar. */
.topbar {
  position: relative; z-index: 101;      /* fixed üst barın üstünde kalsın */
  background: var(--gold-light); color: var(--on-gold);
  overflow: hidden;
}
.tb-viewport { overflow: hidden; }
.tb-track {
  display: flex; align-items: center; white-space: nowrap; width: max-content;
  animation-name: tbKay; animation-timing-function: linear;
  animation-iteration-count: infinite; will-change: transform;
}
/* Tam BİR grup genişliği kayıp başa sarıyor; gruplar birebir aynı olduğu için
   dikiş görünmüyor. Mesafeyi tbOlc() ölçüp --tb-mesafe olarak veriyor. */
@keyframes tbKay {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(calc(-1 * var(--tb-mesafe, 50%)),0,0); }
}
.tb-grup { display: flex; align-items: center; flex: none; }
.tb-oge {
  display: inline-flex; align-items: center; padding: 0.55rem 1.1rem;
  font-size: 0.78rem; letter-spacing: 0.06em; text-decoration: none; color: inherit;
}
.tb-ayrac { font-size: 0.6rem; opacity: 0.5; }
/* Üstüne gelince yalnız DURSUN; renk değişmesin (kullanıcı isteği) —
   yazı okunabilsin, tıklanabilsin diye durma yeterli. */
.topbar:hover .tb-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .tb-track { animation: none; } }
@keyframes scrollX { to { transform: translateX(-50%); } }

/* ============================================================
   PRODUCT CARDS
   ============================================================ */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }

.product-card {
  position: relative; background: var(--char); border: 1px solid var(--line-soft);
  overflow: hidden; transition: all 0.5s var(--ease); display: flex; flex-direction: column;
}
.product-card:hover { border-color: var(--line); transform: translateY(-6px); box-shadow: var(--shadow-3); }

/* TAM BOY RAKAM — site geneli. Cormorant Garamond varsayılan olarak ESKİ
   STİL rakam basıyor: "1" küçük ve satır çizgisinin altına inik, "2.490"un
   rakamları yanındaki "TL"den alçak kalıyor. İki ayrı şikâyetin de kaynağı
   buydu (ürün adındaki "101", fiyattaki "2.490 TL"). Tek kuralla her yerde
   tam boy rakama geçiliyor; Jost zaten tam boy basıyor, orada etkisiz. */
:root { font-variant-numeric: lining-nums; }

.card-visual {
  position: relative; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
/* Fotoğraf gelene kadar görünen zemin. Ürünün vurgu rengiyle ışıyan bir
   degrade vardı; foto inince kayboluyordu ama o ana kadar "renkli bir
   varsayılan görsel" gibi duruyordu. Yükleme zemini artık sessiz ve düz.
   Vurgulu degrade yalnızca fotoğraf yüklenemediğinde (.gorsel-yok, çizim
   şişeyle birlikte) geri gelir — orada zaten bir görsel yerine geçiyor. */
.card-visual::before {
  content: ""; position: absolute; inset: 0;
  background: var(--noir);
  transition: transform 0.7s var(--ease);
}
.card-visual.gorsel-yok::before {
  opacity: 0.9;
  background: radial-gradient(circle at 50% 40%, var(--card-accent, var(--img-bg)) 0%, var(--noir) 70%);
}
.product-card:hover .card-visual::before { transform: scale(1.06); }
/* Çizim şişe SADECE ürün fotoğrafı yüklenemezse görünür. Önceden hep
   DOM'daydı ve foto inene kadar görünüyordu: listede her kart önce
   "varsayılan parfüm görseli" gösterip sonra gerçek fotoğrafa geçiyordu.
   .gorsel-yok sınıfını görselin onerror'u kapsayıcıya ekler. */
.card-bottle { position: relative; z-index: 2; transition: transform 0.6s var(--ease); visibility: hidden; }
.gorsel-yok .card-bottle { visibility: visible; }
.pf-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 3; transition: transform 0.7s var(--ease); }
.product-card:hover .pf-img { transform: scale(1.05); }
/* İkinci fotoğrafa geçiş (kullanıcı isteği). Üstte duran katman yalnız
   temasta görünür; geçiş yumuşak olsun diye opaklık animasyonu var.
   İkinci görsel VARSA yakınlaşma kapatılıyor — iki efekt üst üste binince
   fotoğraf değişimi kaymış gibi duruyordu. */
.pf-img-2 {
  opacity: 0; z-index: 3;
  transition: opacity 0.55s var(--ease);
}
.product-card:hover .pf-img-2,
.product-card:focus-within .pf-img-2 { opacity: 1; }
.card-visual:has(.pf-img-2) .pf-img { transform: none !important; }
/* Dokunmatikte "üstüne gelme" yok; ikinci görsel gizli kalsın. */
@media (hover: none) {
  .pf-img-2 { display: none; }
}
.product-card:hover .card-bottle { transform: translateY(-6px) scale(1.04); }

/* Rozet yığını: konumlandırma sarmalayıcıda, rozetler akışta durur. */
.card-badges {
  position: absolute; top: 0.9rem; left: 0.9rem; z-index: 4;   /* .pf-img z-index:3 */
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem;
}
.card-badge {
  font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--on-dark-gold); border: 1px solid rgba(232,205,134,0.35); padding: 0.35rem 0.7rem;
  background: var(--scrim-photo); backdrop-filter: blur(4px);
}

.card-body { padding: 1.8rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.card-family { font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); }
.card-body h3 { font-size: 1.7rem; }
.card-tagline { color: var(--cream-dim); font-size: 0.92rem; flex: 1; }
.card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; padding-top: 1.1rem; border-top: 1px solid var(--line-soft); }
.card-size { font-size: 0.78rem; color: var(--muted); letter-spacing: 0.08em; }
.card-price { font-size: 0.98rem; color: var(--gold-light); letter-spacing: 0.03em; font-weight: 400; }
.pd-price { font-family: var(--serif); font-size: 1.9rem; color: var(--gold-light); margin-bottom: 1.5rem; letter-spacing: 0.02em; }
.card-link { font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-light); display: inline-flex; gap: 0.5rem; align-items: center; transition: gap 0.3s var(--ease); }
.product-card:hover .card-link { gap: 0.85rem; }

.center-cta { text-align: center; margin-top: 3.5rem; }

/* ============================================================
   VALUES
   ============================================================ */
.values { background: var(--noir); }
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.value-item { background: var(--noir); padding: 2.8rem 2rem; transition: background 0.4s var(--ease); }
.value-item:hover { background: var(--char); }
.value-icon { width: 48px; height: 48px; margin-bottom: 1.5rem; color: var(--gold); }
.value-icon svg { width: 100%; height: 100%; }
.value-item h3 { font-size: 1.4rem; margin-bottom: 0.7rem; }
.value-item p { font-size: 0.92rem; color: var(--cream-dim); }

/* ============================================================
   STORY (split)
   ============================================================ */
.story-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
.story-visual {
  position: relative; min-height: 520px; overflow: hidden;
  background: radial-gradient(circle at 40% 30%, var(--brown), var(--black) 75%);
  display: flex; align-items: center; justify-content: center;
}
.story-visual::after {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}
.story-content { padding: clamp(2.5rem, 6vw, 6rem); display: flex; flex-direction: column; justify-content: center; }
.story-content h2 { font-size: clamp(2rem, 4.5vw, 3.4rem); margin: 1.4rem 0 1.6rem; }
.story-content p { color: var(--cream-dim); font-size: 1.08rem; margin-bottom: 2.2rem; }

/* monogram mark */
.monogram {
  width: 220px; height: 220px; position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 50%;
}
.monogram::before { content: ""; position: absolute; inset: 14px; border: 1px solid var(--line-soft); border-radius: 50%; }
.monogram .v { font-family: var(--serif); font-size: 6rem; font-weight: 600; }
.monogram-crest { width: 120px; height: auto; z-index: 2; filter: drop-shadow(0 3px 14px rgba(46,34,16,0.22)); }

/* ============================================================
   PAGE HEADER (inner pages)
   ============================================================ */
.page-hero { padding: 12rem 0 4rem; text-align: center; position: relative; overflow: hidden; }
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 0%, var(--tint), transparent 60%);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); margin: 1.2rem 0 1rem; }
.page-hero p { color: var(--cream-dim); max-width: 560px; margin: 0 auto; font-size: 1.08rem; }

/* ============================================================
   COLLECTION PAGE
   ============================================================ */

/* ---- Mağaza listeleme sayfası: kompakt başlık ---- */
.page-hero-shop { padding: 9.5rem 0 1.4rem; }
/* Koleksiyon tanıtımı panelden gizlenebiliyor (applyContent boş değerde
   data-icerik-bos işaretliyor). Gizliyken kahraman bölümde yalnız ekmek
   kırıntısı kalıyor ve iki bölümün dolgusu üst üste binip kırıntı ile filtre
   çubuğu arasında 64px'lik boş bir şerit bırakıyordu (kullanıcı bildirdi).
   Gövde bölümünün dolgusu HTML'de satır içi yazılı, !important şart. */
.page-hero-shop:has([data-icerik-bos]) { padding-bottom: 0; }
.page-hero-shop:has([data-icerik-bos]) + .section-pad { padding-top: 0 !important; }
.page-hero-shop .eyebrow { display: none; }          /* başlıkla aynı şeyi söylüyor */
.page-hero-shop h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin: 0 0 0.5rem; }
.page-hero-shop p { font-size: 0.94rem; max-width: 520px; }
.socials-lg a { width: 46px; height: 46px; }
.socials-lg svg { width: 19px; height: 19px; }
/* ============================================================
   LİSTE ARAÇ ÇUBUĞU — filtre düğmesi + sıralama (sağ üstte)
   Koleksiyon ve arama sayfası aynı biçimi kullanıyor.
   ============================================================ */
.lst-bar {
  display: flex; align-items: center; justify-content: flex-end; gap: 1.1rem;
  margin-bottom: 2rem; flex-wrap: wrap;
}
.lst-ayrac { width: 1px; align-self: stretch; min-height: 22px; background: var(--line); }

.lst-filtre {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: none; border: none; padding: 0.4rem 0.2rem; cursor: pointer;
  color: var(--cream); font-family: var(--sans); font-size: 0.92rem; font-weight: 400;
  transition: color 0.25s var(--ease);
}
.lst-filtre svg { width: 19px; height: 19px; }
.lst-filtre:hover { color: var(--gold); }
/* Kaç filtre etkin — çekmeceyi açmadan görünsün. */
.lst-rozet {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 0.32rem; border-radius: 999px;
  background: var(--gold); color: var(--on-gold); font-size: 0.68rem; font-weight: 500;
}

.lst-sirala { position: relative; display: inline-flex; align-items: center; gap: 0.4rem; }
.lst-sirala-et { color: var(--muted); font-size: 0.92rem; }
.lst-sirala-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: none; border: none; padding: 0.4rem 0.2rem; cursor: pointer;
  color: var(--cream); font-family: var(--sans); font-size: 0.92rem;
  transition: color 0.25s var(--ease);
}
.lst-sirala-btn svg { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
.lst-sirala-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.lst-sirala-btn:hover { color: var(--gold); }
.lst-sirala-liste {
  position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 60;
  min-width: 210px; padding: 0.4rem 0;
  background: var(--char); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: var(--shadow-2);
}
.lst-sirala-liste button {
  display: block; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  padding: 0.7rem 1.1rem; color: var(--cream-dim);
  font-family: var(--sans); font-size: 0.92rem;
  transition: background 0.2s, color 0.2s;
}
.lst-sirala-liste button:hover { background: var(--noir); color: var(--cream); }
.lst-sirala-liste button.secili { color: var(--cream); font-weight: 500; }

/* ---- Filtre çekmecesi (sağdan) ---- */
.flt-kap:empty { display: none; }
.flt-perde {
  position: fixed; inset: 0; z-index: 210; background: rgba(12, 12, 12, 0.34);
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.flt-kap.acik .flt-perde { opacity: 1; }
.flt-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 211;
  width: min(400px, 100%); display: flex; flex-direction: column;
  background: var(--char); border-left: 1px solid var(--line);
  transform: translateX(100%); transition: transform 0.34s var(--ease);
}
.flt-kap.acik .flt-panel { transform: none; }

.flt-ust {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.6rem 1.8rem 1.2rem; border-bottom: 1px solid var(--line-soft);
}
.flt-ust h2 { font-family: var(--serif); font-size: 1.35rem; margin: 0; flex: 1; }
.flt-temizle {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--cream-dim); font-family: var(--sans); font-size: 0.78rem;
  text-decoration: underline; text-underline-offset: 3px;
}
.flt-temizle:hover { color: var(--gold); }
.flt-kapat {
  flex: none; width: 34px; height: 34px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--cream); cursor: pointer;
}
.flt-kapat svg { width: 21px; height: 21px; }

.flt-govde { flex: 1; overflow-y: auto; padding: 0 1.8rem; }

.flt-bolum { border-bottom: 1px solid var(--line-soft); }
.flt-bolum summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.15rem 0; cursor: pointer; list-style: none;
  font-family: var(--sans); font-size: 0.95rem; font-weight: 500; color: var(--cream);
}
.flt-bolum summary::-webkit-details-marker { display: none; }
/* Artı → çarpı: açık/kapalı durumu tek işaretle anlatılıyor. */
.flt-isaret { position: relative; width: 14px; height: 14px; flex: none; }
.flt-isaret::before, .flt-isaret::after {
  content: ""; position: absolute; background: var(--cream);
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.flt-isaret::before { top: 6px; left: 0; width: 14px; height: 1.5px; }
.flt-isaret::after { left: 6px; top: 0; width: 1.5px; height: 14px; }
.flt-bolum[open] .flt-isaret::after { transform: rotate(90deg); opacity: 0; }
.flt-ic { padding: 0 0 1.2rem; display: flex; flex-direction: column; gap: 0.15rem; }

.flt-secenek {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0; cursor: pointer;
  color: var(--cream-dim); font-size: 0.93rem;
}
.flt-secenek input { width: 17px; height: 17px; accent-color: var(--gold); cursor: pointer; flex: none; }
.flt-secenek:hover { color: var(--cream); }

.flt-fiyat { display: flex; gap: 0.8rem; }
.flt-fiyat label {
  flex: 1; display: flex; flex-direction: column; gap: 0.35rem;
  font-size: 0.78rem; color: var(--muted);
}
.flt-fiyat input {
  background: var(--char); border: 1px solid var(--line); border-radius: 6px;
  padding: 0.65rem 0.8rem; color: var(--cream);
  font-family: var(--sans); font-size: 0.92rem;
}
.flt-fiyat input:focus { outline: none; border-color: var(--gold); }

.flt-anahtar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 0; border-bottom: 1px solid var(--line-soft);
  font-size: 0.95rem; font-weight: 500; color: var(--cream); cursor: pointer;
}
.flt-anahtar input { position: absolute; opacity: 0; pointer-events: none; }
.flt-kaydir {
  position: relative; flex: none; width: 42px; height: 24px; border-radius: 999px;
  background: var(--line); transition: background 0.25s var(--ease);
}
.flt-kaydir::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--char); box-shadow: var(--shadow-1);
  transition: transform 0.25s var(--ease);
}
.flt-anahtar input:checked + .flt-kaydir { background: var(--gold); }
.flt-anahtar input:checked + .flt-kaydir::after { transform: translateX(18px); }

.flt-alt { padding: 1.3rem 1.8rem 1.8rem; border-top: 1px solid var(--line-soft); }
.flt-uygula { width: 100%; justify-content: center; }
.flt-uygula[disabled] { opacity: 0.5; pointer-events: none; }

@media (max-width: 640px) {
  /* Telefonda çekmece neredeyse tam ekran; araç çubuğu iki uca yaslanıyor. */
  .flt-panel { width: min(420px, 92%); }
  .flt-ust, .flt-alt { padding-left: 1.3rem; padding-right: 1.3rem; }
  .flt-govde { padding: 0 1.3rem; }
  .lst-bar { justify-content: space-between; gap: 0.6rem; }
  .lst-ayrac { display: none; }
  .lst-sirala-et { display: none; }
  .lst-sirala-liste { min-width: 190px; }
}

/* ---- Header ikon butonları (arama / sepet) ---- */
.icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; background: none; border: none; cursor: pointer;
  color: var(--cream-dim); transition: color 0.25s var(--ease);
}
.icon-btn:hover { color: var(--gold-light); }
.icon-btn svg { width: 20px; height: 20px; }
.cart-count {
  position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--grad-gold); color: var(--on-gold);
  font-size: 0.62rem; font-weight: 600; line-height: 17px; text-align: center;
}
.cart-count[hidden] { display: none; }

/* ---- Arama katmanı ---- */
body.modal-open { overflow: hidden; }
/* Arama: üst barın ALTINDAN inen panel (kullanıcı isteği, 14 Eyl).
   Önceki hâli ekranı komple kaplayan bulanık bir katmandı; üst bar da
   kararıyor ve menü tıklanamıyordu. Artık perde başlığın bittiği yerden
   başlıyor — başlık görünür ve tıklanabilir kalıyor.
   --sv-top'u JS ölçüyor (svKonumla): üst bar fixed ve duyuru şeridi yüzünden
   'top' değeri değişken, sabit yazılamaz. */
.search-overlay {
  position: fixed; left: 0; right: 0; bottom: 0; top: var(--sv-top, 0px);
  z-index: 200; background: rgba(12, 12, 12, 0.34);
  opacity: 0; visibility: hidden;
  transition: opacity 0.26s var(--ease), visibility 0.26s;
}
.search-overlay.open { opacity: 1; visibility: visible; }

.search-panel {
  width: min(var(--maxw), calc(100% - 2.4rem)); margin: 0 auto;
  background: var(--char); border: 1px solid var(--line); border-top: none;
  border-radius: 0 0 14px 14px; box-shadow: var(--shadow-2);
  opacity: 0; transform: translateY(-14px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.search-overlay.open .search-panel { opacity: 1; transform: none; }
/* .sv-ic aynı zamanda .container: buradaki dolgu DÖRT KENARI birden
   yazıyor, yani container'ın "0 2rem" yanal dolgusunu siliyordu ve arama
   kutusu panelin kenarlarına yapışıyordu (kullanıcı bildirdi). Yanlar artık
   açıkça veriliyor ve bilerek geniş — kutu panelin ortasında dursun. */
.search-panel .sv-ic { padding: 2.6rem 4rem 2.8rem; }

.search-bar { display: flex; align-items: center; gap: 1.1rem; }
/* Yuvarlak kutu: altbilgideki dil düğmeleriyle aynı dil. */
.sv-kutu {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.7rem;
  padding: 1.1rem 1.65rem; border: 1px solid var(--line); border-radius: 999px;
  transition: border-color 0.2s var(--ease);
}
.sv-kutu:focus-within { border-color: var(--gold); }
.sv-kutu svg { width: 20px; height: 20px; color: var(--muted); flex: none; }
.sv-kutu input {
  flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--cream);
  font-family: var(--sans); font-size: 1.02rem; font-weight: 300; letter-spacing: 0.02em;
}
.sv-kutu input::placeholder { color: var(--muted); }
.sv-kutu input::-webkit-search-cancel-button { display: none; }

.sv-git {
  flex: none; padding: 1.16rem 2.7rem; border: none; border-radius: 999px;
  background: var(--gold); color: var(--on-gold); cursor: pointer;
  font-family: var(--sans); font-size: 0.76rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  transition: opacity 0.25s var(--ease);
}
.sv-git:hover { opacity: 0.82; }

.search-close {
  flex: none; width: 46px; height: 46px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--cream-dim); cursor: pointer;
  transition: color 0.25s var(--ease);
}
.search-close svg { width: 23px; height: 23px; }
.search-close:hover { color: var(--gold); }

@media (max-width: 768px) {
  /* Telefonda panel kenara yaslanıyor; yuvarlak köşe orada anlamsız. */
  .search-panel { width: 100%; border-radius: 0; border-left: none; border-right: none; }
  /* ÖZGÜLLÜK: .sv-ic aynı zamanda .container; mobil ".container { padding }"
     kuralı dosyada DAHA SONRA geldiği için buradaki dolguyu tamamen
     siliyordu — panel 55px'e inip sıkışık duruyordu (kullanıcı bildirdi).
     .search-panel öneki (0,2,0) ile geçiliyor. */
  .search-panel .sv-ic { padding: 1.9rem 1.4rem 2.1rem; }
  .sv-kutu { padding: 0.9rem 1.2rem; }
  .sv-kutu input { font-size: 0.92rem; }
  .search-close { width: 38px; height: 38px; }
  .search-close svg { width: 19px; height: 19px; }

  /* Telefonda üç öge tek satıra sığmıyordu: yazı kutusuna 133px kalıyor ve
     yer tutucu yarıda kesiliyordu. Kutu ile ✕ üstte, "ARA" tam genişlikte
     altta — hem kutu nefes alıyor hem düğme parmakla rahat basılıyor. */
  .search-bar { flex-wrap: wrap; column-gap: 0.7rem; row-gap: 0.85rem; }
  .sv-kutu { order: 1; flex: 1 1 auto; }
  .search-close { order: 2; }
  .sv-git { order: 3; flex: 1 0 100%; padding: 1rem 1.35rem; font-size: 0.72rem; letter-spacing: 0.14em; }
}

/* ============================================================
   MAĞAZA — sepet, ödeme, hesap
   ============================================================ */
.shop-page {
  padding: 10rem 0 5rem; min-height: 60vh;
  background: radial-gradient(ellipse 60% 380px at 50% 0%, var(--tint), transparent 60%);
  background-repeat: no-repeat;
}
.shop-title { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 2.4rem; }
/* Ekranda görünmez, ekran okuyucuda okunur. Kart ödeme sayfasında başlık
   göze gereksiz geliyordu ama sayfanın h1'siz kalması doğru değil. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.icon-btn.is-member { color: var(--gold); }

/* Bildirim */
.velo-toast {
  position: fixed; left: 50%; bottom: 2rem; transform: translate(-50%, 20px);
  background: var(--char); border: 1px solid var(--gold-deep); color: var(--cream);
  padding: 0.85rem 1.6rem; border-radius: 4px; font-size: 0.92rem; z-index: 300;
  opacity: 0; visibility: hidden; transition: all 0.3s var(--ease); box-shadow: var(--shadow-2);
}
.velo-toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.velo-toast.err { border-color: var(--err-line); color: var(--err-text); }

/* Ürün detayı düğmeleri */
.pd-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.pd-actions .btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Sepet */
.cart-grid { display: grid; grid-template-columns: 1fr 340px; gap: 3rem; align-items: start; }
.cart-empty { text-align: center; padding: 4rem 0; color: var(--cream-dim); }
.cart-empty p { margin-bottom: 1.6rem; font-size: 1.1rem; }
.cart-line {
  display: grid; grid-template-columns: 64px 1fr auto auto 28px; gap: 1.2rem; align-items: center;
  padding: 1.2rem 0; border-bottom: 1px solid var(--line-soft);
}
.cl-thumb {
  width: 72px; height: 72px; border-radius: 3px; overflow: hidden; display: block;
  background: radial-gradient(circle at 50% 40%, var(--si-accent, var(--img-bg)), var(--black) 78%);
}
.cl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cl-info { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.cl-name { font-family: var(--serif); font-size: 1.15rem; color: var(--cream); }
.cl-name:hover { color: var(--gold-light); }
.cl-size { font-size: 0.78rem; color: var(--muted); }
.cl-remove {
  background: none; border: none; padding: 0; color: var(--muted); cursor: pointer;
  font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; text-align: left; width: fit-content;
}
.cl-remove:hover { color: var(--gold-light); }
.cl-qty { display: flex; align-items: center; gap: 0.2rem; border: 1px solid var(--line); border-radius: 4px; }
.cl-qty button {
  width: 32px; height: 34px; background: none; border: none; color: var(--cream-dim);
  font-size: 1.1rem; cursor: pointer; transition: color 0.2s;
}
.cl-qty button:hover:not(:disabled) { color: var(--gold-light); }
.cl-qty button:disabled { opacity: 0.3; cursor: default; }
.cl-qty span { min-width: 26px; text-align: center; font-size: 0.95rem; }
.cl-price { font-family: var(--serif); font-size: 1.1rem; color: var(--gold-light); white-space: nowrap; }

/* Özet kutusu */
.cart-summary { background: var(--char); border: 1px solid var(--line-soft); border-radius: 6px; padding: 1.8rem; position: sticky; top: 7rem; }
.cart-summary h3 { font-size: 1.3rem; margin-bottom: 1.2rem; }
.cs-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; font-size: 0.95rem; color: var(--cream-dim); }
.cs-item { font-size: 0.86rem; border-bottom: 1px solid var(--line-soft); }
.cs-total {
  border-top: 1px solid var(--line); margin-top: 0.6rem; padding-top: 1rem;
  font-family: var(--serif); font-size: 1.25rem; color: var(--gold-light);
}
.cs-cta { width: 100%; justify-content: center; margin-top: 1.4rem; }
.cs-continue { display: block; text-align: center; margin-top: 1rem; font-size: 0.84rem; color: var(--cream-dim); }
.cs-continue:hover { color: var(--gold-light); }

/* Ödeme formu */
.checkout-grid { display: grid; grid-template-columns: 1fr 340px; gap: 3rem; align-items: start; }
.co-fields h3 { font-size: 1.2rem; margin: 0 0 1.2rem; }
.co-fields h3:not(:first-child) { margin-top: 2.4rem; }
.co-fields label, .auth-form label {
  display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.1rem;
  font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold);
}
.co-fields input, .co-fields textarea, .auth-form input, .auth-form textarea, .auth-form select {
  background: var(--noir); border: 1px solid var(--line); color: var(--cream);
  padding: 0.8rem 1rem; border-radius: 4px; font-family: var(--sans); font-size: 0.95rem; font-weight: 300;
}
.co-fields input:focus, .co-fields textarea:focus, .auth-form input:focus, .auth-form textarea:focus, .auth-form select:focus { outline: none; border-color: var(--gold); }
.pay-opt {
  flex-direction: row !important; align-items: flex-start; gap: 0.8rem !important;
  text-transform: none !important; letter-spacing: 0 !important; color: var(--cream) !important;
  border: 1px solid var(--line); border-radius: 5px; padding: 1rem 1.2rem; cursor: pointer;
}
.pay-opt:hover { border-color: var(--gold-deep); }
.pay-opt input { accent-color: var(--gold); margin-top: 0.2rem; }
.pay-opt span { display: flex; flex-direction: column; gap: 0.25rem; }
.pay-opt small { color: var(--muted); font-size: 0.8rem; }
/* Hiçbir ödeme yöntemi açık değilse ödeme adımında görünen not. Panelden
   ikisini birden kapatmak engelleniyor; bu yalnızca güvenlik ağı. */
.bos-odeme {
  border: 1px solid var(--line); border-radius: 5px; padding: 1rem 1.2rem;
  color: var(--muted); font-size: 0.9rem;
}
.co-err { margin-top: 0.9rem; font-size: 0.86rem; color: var(--err-text); }
.co-err.ok { color: var(--ok-text); }

/* Ürün görselleri koyu ve altın ağırlıklı: dolgu altın rozetler görsele
   karışıyordu. Koyu, neredeyse mat zemin + ince altın çizgi hem okunuyor
   hem markanın diliyle uyuşuyor. Fark tipografide: indirim daha parlak. */
.card-badge.badge-new { background: rgba(10,8,6,0.86); color: var(--on-dark); border-color: rgba(243,234,214,0.28); }
.card-badge.badge-off { background: rgba(10,8,6,0.86); color: var(--on-dark-gold); border-color: rgba(232,205,134,0.45); font-weight: 500; }

/* Ürün detayında fiyat satırı — yüzde rozeti fiyatın HEMEN yanında durur.
   (space-between ile sağa yaslanıyordu, fiyattan kopuk görünüyordu.) */
.pd-price { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.pd-off {
  flex: none; padding: 0.22rem 0.55rem; border-radius: 3px;
  background: rgba(201, 162, 75, 0.14); border: 1px solid var(--gold-deep); color: var(--gold-light);
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.06em; white-space: nowrap;
  align-self: center;
}

/* Ürün bulunamadı ekranı */
/* 404 sayfasındaki büyük sayı. Süs ögesi: başlık artık "Aradığınız Sayfa
   Bulunamadı" (kullanıcı isteği), sayı onun üstünde durur ve ekran
   okuyucudan gizlidir. */
.nf-kod {
  font-family: var(--serif); font-weight: 600; line-height: 1;
  font-size: clamp(4.5rem, 13vw, 9rem); letter-spacing: 0.02em;
  margin-bottom: 0.6rem;
}
.page-hero .nf-kod + h1 { margin-top: 0; font-size: clamp(1.7rem, 4vw, 2.6rem); }

/* Ortak "bulunamadı" ekranı: ürün, özel sayfa ve sonuçsuz arama aynı düzeni
   kullanıyor — 404 sayfasındaki gibi ortalanmış, tek çıkış düğmeli. */
.bos-durum { max-width: 560px; margin: 3.5rem auto 5.5rem; text-align: center; }
.bos-durum h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin-bottom: 0.9rem; }
.bos-durum p { margin-bottom: 2.2rem; }
/* Başlık zaten sayfanın kendi kabuğunda duruyorsa (özel sayfa kahramanı)
   blok başlıksız basılıyor; üstteki boşluk o zaman iki kez uygulanıyordu. */
.bos-durum:not(:has(h1)) { margin-top: 0; }

/* ÖZGÜLLÜK TUZAĞI: .custom-page-body a (0,2,0) .btn-gold'u (0,1,0) eziyordu.
   Özel sayfadaki "bulunamadı" düğmesinin yazısı siyah zeminde SİYAH çıkıyor
   ve altı çiziliyordu — düğme okunmuyordu. a.btn-gold (0,2,1) ile geçiliyor. */
.bos-durum a.btn-gold { color: var(--on-gold); text-decoration: none; }

/* Sayfa bulunamadı: kahraman bölümün alt dolgusu + gövde bölümünün üst
   dolgusu toplanıyordu. Gövdedeki değer HTML'de satır içi yazılı, !important
   şart. */
body.sayfa-yok .page-hero { padding-bottom: 1.5rem; }
body.sayfa-yok .section-pad { padding-top: 0 !important; }

/* Ürün galerisi — masaüstünde solda dikey şerit, dar ekranda altta yatay.
   Sticky BURADA: eskiden .pd-visual'daydı, sarmalayıcı gelince kendi
   kabına göre yapışacağı için hiç kaymayacaktı. */
.pd-media { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 0.9rem; align-items: start; position: sticky; top: 7rem; }
.pd-media .pd-visual { grid-column: 2; grid-row: 1; }
.pd-thumbs { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 0.6rem; }
.pd-thumb {
  width: 84px; height: 84px; padding: 0; cursor: pointer; overflow: hidden;
  background: var(--noir); border: 1px solid var(--line-soft); border-radius: 4px;
  transition: border-color 0.25s, opacity 0.25s; opacity: 0.65;
}
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-thumb:hover { opacity: 1; border-color: var(--gold-deep); }
.pd-thumb.on { opacity: 1; border-color: var(--gold); }
.pd-thumb:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Tek görselde şerit çizilmez; ana görsel tüm genişliği alsın */
.pd-media:not(:has(.pd-thumbs)) { grid-template-columns: minmax(0, 1fr); }
.pd-media:not(:has(.pd-thumbs)) .pd-visual { grid-column: 1; }

/* Galeri şeridi — görseller yan yana durur, geçiş KAYARAK olur.
   Anında src değiştirmek "çok hızlı" duruyordu; 0.35 sn'lik kayma
   Bargello'daki Swiper (effect: slide, 300 ms) hissini veriyor. */
.pd-track {
  /* width:100% ve flex:none ŞART: .pd-visual bir flex kapsayıcı, şeride açık
     genişlik verilmezse çocukların "flex:0 0 100%" ölçüsü döngüye giriyor ve
     şerit kapsayıcıdan kat kat geniş oluyordu (görsel kırpılmış görünüyordu). */
  display: flex; flex: none; width: 100%; height: 100%; align-self: stretch;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform;
}
.pd-slide { position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; }
/* KOMŞU SLAYT SIZINTISI: çerçeve genişliği kesirli oluyor (ölçüldü: 560.109px,
   grid'den geliyor) ve slaytlar birbirine tam bitişik duruyor. Tarayıcı
   kesirli sınırı yuvarlarken kenarda komşu fotoğraftan bir piksellik şerit
   boyuyordu — kullanıcı "bir sonraki fotoğrafın çizgisi" olarak gördü.
   Görsel iki yandan 1px içeri alınıyor: gözle fark edilmiyor, sızıntı bitiyor.
   width:auto ŞART — .pf-img'deki width:100%, left/right ile çakışıp onları
   yok sayardı. */
.pd-slide .pf-img { left: 1px; right: 1px; width: auto; }

/* Büyük görseli tutup kaydırma */
.pd-visual { touch-action: pan-y; }            /* yatay kaydırma bize, dikey sayfaya */
.pd-visual.pd-drag { cursor: grabbing; }
.pd-visual.pd-drag .pd-track { transition: none !important; }

/* Ana görselin üzerindeki oklar */
.pd-visual { position: relative; }
.pd-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  background: rgba(16,14,12,0.65); border: 1px solid rgba(243,234,214,0.28);
  color: var(--on-dark); font-size: 1.4rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.25s, background 0.25s;
}
.pd-visual:hover .pd-arrow, .pd-arrow:focus-visible { opacity: 1; }
.pd-arrow:hover { background: rgba(16,14,12,0.92); border-color: var(--on-dark-gold); }
.pd-arrow.prev { left: 10px; }
.pd-arrow.next { right: 10px; }
@media (hover: none) { .pd-arrow { opacity: 1; } }

/* Işık kutusunda gezinme: oklar, sayaç */
.lightbox .lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  background: rgba(16,14,12,0.6); border: 1px solid rgba(243,234,214,0.28);
  color: var(--on-dark); font-size: 1.8rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s, border-color 0.25s;
}
.lightbox .lb-nav:hover { background: rgba(16,14,12,0.92); border-color: var(--on-dark-gold); }
.lightbox .lb-nav.prev { left: 2vw; }
.lightbox .lb-nav.next { right: 2vw; }
.lightbox .lb-count {
  position: absolute; bottom: 2.2vh; left: 50%; transform: translateX(-50%); z-index: 3;
  font-size: 0.82rem; letter-spacing: 0.12em; color: var(--on-dark-dim);
  background: rgba(16,14,12,0.6); border: 1px solid rgba(243,234,214,0.18);
  border-radius: 999px; padding: 0.35rem 0.9rem;
}
/* Global bir kural display'i ezmesin diye açıkça yazılıyor */
.lightbox .lb-nav[hidden], .lightbox .lb-count[hidden] { display: none; }
@media (max-width: 640px) {
  .lightbox .lb-nav { width: 40px; height: 40px; font-size: 1.5rem; }
  .lightbox .lb-nav.prev { left: 1vw; }
  .lightbox .lb-nav.next { right: 1vw; }
}

/* Kampanya rozetleri */
.pd-camps { margin: 1.6rem 0; }
.pd-camps h3 {
  font-family: var(--sans); font-size: 0.7rem; font-weight: 400; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 0.7rem;
}
.pd-camp-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pd-camp {
  font-size: 0.82rem; color: var(--gold-light); line-height: 1.4;
  border: 1px solid var(--gold-deep); border-radius: 4px; padding: 0.45rem 0.8rem;
  background: var(--tint);
}

/* Nota ikonları */
.note-ic { display: flex; flex: none; }
.note-ic svg { width: 18px; height: 18px; color: var(--gold); }

/* İndirimli fiyat: eski fiyat üstü çizili ve soluk, yeni fiyat vurgulu */
.price-old { color: var(--muted); text-decoration: line-through; font-size: 0.88em; margin-right: 0.25em; }
.price-new { color: var(--gold-light); }
.pd-price .price-old, .pd-bar-price .price-old { font-size: 0.7em; }

/* Ödeme özetindeki ürün satırları — küçük görsel + adet rozeti */
.cs-items { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 1.3rem; }
.cs-item { display: grid; grid-template-columns: 44px 1fr auto; gap: 0.75rem; align-items: center; }
.csi-thumb {
  position: relative; width: 52px; height: 52px; border-radius: 3px; overflow: visible;
  display: block; flex: none;
}
.csi-thumb img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 3px; display: block;
  background: radial-gradient(circle at 50% 40%, var(--si-accent, var(--img-bg)), var(--black) 78%);
}
.csi-qty {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold); color: var(--on-gold); border-radius: 9px;
  font-size: 0.68rem; font-weight: 500; padding: 0 4px; line-height: 1;
}
.csi-name {
  display: flex; flex-direction: column; gap: 0.15rem; min-width: 0;
  font-size: 0.88rem; color: var(--cream); line-height: 1.35;
}
.csi-name:hover { color: var(--gold-light); }
.csi-name small { font-size: 0.72rem; color: var(--muted); }
.csi-price { font-size: 0.85rem; color: var(--cream-dim); white-space: nowrap; }

/* İndirim kodu ve kampanya satırları */
.cs-coupon { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin: 0 0 1.1rem; }
.cs-coupon input {
  flex: 1 1 130px; min-width: 0; background: var(--noir); color: var(--cream);
  border: 1px solid var(--line-soft); border-radius: 4px; padding: 0.6rem 0.7rem;
  font-family: var(--sans); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.cs-coupon input:focus { outline: none; border-color: var(--gold-deep); }
.cs-coupon input::placeholder { color: var(--muted); letter-spacing: 0.04em; text-transform: none; }
.cs-coupon button {
  background: none; color: var(--gold-light); border: 1px solid var(--line);
  border-radius: 4px; padding: 0.6rem 0.9rem; cursor: pointer;
  font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  transition: border-color 0.25s, color 0.25s;
}
.cs-coupon button:hover:not(:disabled) { border-color: var(--gold); color: var(--cream); }
.cs-coupon button:disabled { opacity: 0.5; cursor: default; }
.cs-coupon.is-on { justify-content: space-between; font-size: 0.85rem; color: var(--cream-dim); }
.cs-coupon.is-on code { color: var(--gold-light); font-family: monospace; letter-spacing: 0.06em; }
.cs-coupon-err { flex: 1 1 100%; margin: 0; }

/* Uygulanan kampanya satırı — indirim tutarı altın renkte */
.cs-row.cs-camp { color: var(--gold-light); font-size: 0.85rem; }
.cs-row.cs-camp code { font-family: monospace; font-size: 0.9em; opacity: 0.8; }

/* Sipariş tamamlandı */
.order-done { max-width: 560px; margin: 0 auto; text-align: center; }
.od-check {
  width: 62px; height: 62px; margin: 0 auto 1.6rem; border-radius: 50%;
  background: var(--grad-gold); color: var(--on-gold);
  font-size: 2rem; line-height: 62px; font-weight: 600;
}
.order-done h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 0.8rem; }
.od-no, .od-total { color: var(--cream-dim); margin-bottom: 0.4rem; }
.od-bank { text-align: left; background: var(--char); border: 1px solid var(--line-soft); border-radius: 6px; padding: 1.6rem; margin: 2rem 0; }
.od-bank h3 { font-size: 1.1rem; margin-bottom: 1rem; }
.od-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; font-size: 0.92rem; color: var(--cream-dim); }
.od-iban { font-family: monospace; font-size: 0.95rem; color: var(--gold-light); }
.od-hint { font-size: 0.86rem; color: var(--muted); margin-top: 1rem; }
.od-mail { font-size: 0.88rem; color: var(--cream-dim); margin: 1.4rem 0 2rem; }

/* Kartla ödeme (sağlayıcı iframe) */
/* ---- Kartla ödeme sayfası ----
   Sağlayıcının formu iframe içinde geliyor. Sayfanın ortasında tek başına duran
   beyaz bir kutu "başka bir siteye düştüm" hissi veriyordu; bu yüzden ödeme
   sayfası da sepet/ödeme sayfalarıyla aynı iki sütunlu düzene alındı:
   solda kart paneli, sağda sipariş özeti. */
.pay-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 2rem;
  align-items: start; max-width: 1080px; margin: 0 auto;
}
.pay-layout.tek { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
/* Kart sütunu ~560px altına inince sağlayıcının formu sıkışık moduna düşüyor;
   ortak 900px kırılımından önce tek sütuna geçiyoruz. Müşteri ödemeye geldiği
   için form üstte, özet altında kalıyor. */
@media (max-width: 1040px) {
  .pay-layout { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; max-width: 720px; }
  .pay-ozet { order: 2; position: static; }
}
/* Telefonda kart alanları dar kalıyordu: panel .container'ın iç boşluğunun
   bir kısmını taşarak ekranın kenarına yaklaşıyor. */
@media (max-width: 520px) {
  .pay-panel { margin-left: -0.8rem; margin-right: -0.8rem; }
  .pay-panel-head { padding: 0.85rem 1rem; }
}
.pay-main { min-width: 0; }

.pay-panel {
  background: var(--char); border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden;   /* iframe'in köşeleri panelin köşesine uysun */
}
.pay-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.4rem; border-bottom: 1px solid var(--line-soft);
}
.pay-panel-head h3 {
  margin: 0; font-family: var(--sans); font-size: 0.76rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream);
}
.pay-lock { display: inline-flex; color: var(--muted); }

.pay-ozet { top: 7rem; }
.pay-ozet-no { font-size: 0.84rem; color: var(--cream-dim); margin: -0.5rem 0 1.1rem; }

.pay-secure { font-size: 0.84rem; margin-top: 0.9rem; text-align: center; }
.pay-head { max-width: 620px; margin: 0 auto 1.4rem; text-align: center; }
.pay-test {
  display: inline-block; margin-top: 0.9rem; padding: 0.35rem 0.9rem;
  border: 1px solid var(--gold-deep); border-radius: 999px;
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-light);
}
/* Ödeme formu kendi arka planını çizer; kart yüzeyi beyaz gelir. */
.pay-frame {
  /* Taban yükseklik yalnızca sağlayıcının boy ayarlayıcısı cevap verene kadar
     geçerli — scrolling="no" olduğu için kısa kalırsa form kesilir. Ölçüm gelince
     shop.js .olculdu ekliyor ve tabanı kaldırıyoruz, altta boş beyaz kalmasın. */
  display: block; width: 100%; border: 0; background: #fff;
  min-height: clamp(520px, 76vh, 780px);
}
.pay-frame.olculdu { min-height: 0; }
@media (max-width: 720px) { .pay-frame { min-height: clamp(480px, 82vh, 700px); } }
.pay-wait, .pay-msg { text-align: center; padding: 3rem 0; }
.pay-msg .btn { margin-top: 1.2rem; }
.pay-actions { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; margin-top: 1.6rem; }
.pay-fail .od-cross { background: none; border: 1px solid var(--line); color: var(--gold-light); }

/* Giriş / kayıt */
/* Kart genişletildi: tek sütun masaüstünde gereksiz uzuyordu. */
.auth-card { max-width: 680px; margin: 0 auto; background: var(--char); border: 1px solid var(--line-soft); border-radius: 8px; padding: 2.6rem clamp(1.4rem, 4vw, 3rem); }
.auth-baslik {
  margin: 0 0 2rem; text-align: center; font-family: var(--sans);
  font-size: 1.05rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream);
}
.auth-kural { margin: -0.6rem 0 1.2rem; font-size: 0.8rem; line-height: 1.6; color: var(--muted); }
.auth-gecis {
  margin: 1.6rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--line-soft);
  text-align: center; font-size: 0.88rem; color: var(--cream-dim);
}
.auth-gecis[hidden] { display: none; }
.auth-gecis .mini-link { font-size: 0.88rem; color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
.auth-gecis .mini-link:hover { color: var(--gold); }

/* Şifre alanı + göster/gizle düğmesi */
.sifre-kutu { position: relative; display: block; }
.sifre-kutu input { width: 100%; padding-right: 3rem !important; }
.sifre-goz {
  position: absolute; top: 50%; right: 0.6rem; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border: 0; background: none;
  color: var(--muted); cursor: pointer;
}
.sifre-goz svg { width: 19px; height: 19px; }
.sifre-goz:hover { color: var(--cream); }
.sifre-goz.acik { color: var(--gold); }
.auth-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.8rem; }
.auth-tab {
  flex: 1; padding: 0.7rem; background: none; border: 1px solid var(--line); border-radius: 4px;
  color: var(--cream-dim); cursor: pointer; font-family: var(--sans);
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; transition: all 0.25s;
}
.auth-tab.active { background: var(--grad-gold); color: var(--on-gold); border-color: transparent; }
.auth-form button[type=submit] { width: 100%; justify-content: center; margin-top: 0.6rem; }

/* Şifremi unuttum / sıfırlama */
.auth-note { margin: 0 0 1.4rem; font-size: 0.88rem; line-height: 1.65; color: var(--cream-dim); }
.auth-link {
  display: block; width: 100%; margin-top: 1.1rem; padding: 0; background: none; border: none;
  color: var(--cream-dim); cursor: pointer; font-family: var(--sans); font-size: 0.82rem;
  text-align: center; text-decoration: underline; text-underline-offset: 3px; transition: color 0.25s;
}
.auth-link:hover { color: var(--gold); }
.co-ok { margin-top: 0.9rem; font-size: 0.86rem; line-height: 1.6; color: var(--ok-text); }
#resetPage .auth-card .btn { width: 100%; justify-content: center; margin-top: 1.2rem; }

/* Hesabım */
.account-head { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.acc-name { font-family: var(--serif); font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--cream); line-height: 1.2; }

/* Giriş sayfası: dar kart ortada duruyor, başlık da onunla hizalı olsun */
body:has(#authPage) .shop-title, body:has(#resetPage) .shop-title { text-align: center; }
body:has(#authPage) .crumbs, body:has(#resetPage) .crumbs { justify-content: center; }
body:has(#authPage) .crumbs ol, body:has(#resetPage) .crumbs ol { justify-content: center; }
.acc-h3 { font-size: 1.2rem; margin: 2.5rem 0 1.2rem; }
.acc-form { max-width: 560px; }
.order-list { border: 1px solid var(--line-soft); border-radius: 6px; overflow: hidden; }
.order-row {
  display: grid; grid-template-columns: 1.4fr auto auto auto; gap: 1rem; align-items: center;
  padding: 1rem 1.3rem; background: var(--char); border-bottom: 1px solid var(--line-soft); font-size: 0.92rem;
}
.order-row:last-child { border-bottom: none; }
.or-status { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.or-status.st-cancelled { color: var(--err-text); }
.or-status.st-delivered { color: var(--ok-text); }
.or-count { color: var(--muted); font-size: 0.85rem; }
.or-total { font-family: var(--serif); color: var(--gold-light); text-align: right; }

@media (max-width: 900px) {
  .cart-grid, .checkout-grid { grid-template-columns: 1fr; gap: 2rem; }
  .cart-summary { position: static; }

}
@media (max-width: 640px) {
  .shop-page { padding: 8rem 0 3rem; }
  .cart-line { grid-template-columns: 56px 1fr auto 28px; row-gap: 0.8rem; }
  .cl-price { grid-column: 2 / -1; text-align: right; }
  .order-row { grid-template-columns: 1fr auto; row-gap: 0.4rem; }
  .or-count { display: none; }
}

/* ============================================================
   Kart sepet düğmesi · yıldızlar · yorumlar · zoom · arama sayfası
   ============================================================ */

/* Ürün kartı: isim linki + sepet düğmesi */
.product-card .card-name { display: block; }
.product-card .card-name:hover h3 { color: var(--gold-light); }
.card-cart { width: 100%; justify-content: center; margin-top: 1rem; font-size: 0.72rem; padding: 0.7rem 1rem; }
.card-cart[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Yıldız rozeti */
.rating-badge { display: inline-flex; align-items: center; gap: 0.1rem; }
.card-foot .rating-badge { margin-left: auto; }   /* fiyatın karşısında, sağda */
.rating-badge .star { font-size: 0.78rem; color: #d4d4d4; }
.rating-badge .star.on { color: var(--gold); }
.rating-n { font-size: 0.72rem; color: var(--muted); margin-left: 0.28rem; }

/* Detayda adet seçici */
.pd-buy { display: flex; gap: 0.8rem; align-items: stretch; flex-wrap: wrap; }
.qty-picker { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 4px; }
.qty-picker button {
  width: 40px; height: 100%; min-height: 44px; background: none; border: none;
  color: var(--cream-dim); font-size: 1.2rem; cursor: pointer; transition: color 0.2s;
}
.qty-picker button:hover { color: var(--gold-light); }
.qty-picker span { min-width: 34px; text-align: center; font-size: 1rem; }

/* Görsel zoom + tam ekran */
/* Büyüteç imleci değil el (pointer) imleci: görsel tıklanabilir —
   tam ekran görünümü açıyor, imleç de bunu belli etsin. */
.pd-visual.zoomable { cursor: pointer; }
.pd-visual.zoomable .pf-img { transition: transform 0.35s var(--ease); }
/* 1100px ve üstünde büyüteç sağdaki panelde açılır (bkz. .pd-zoom); yerinde
   ölçekleme yalnız panele yer kalmayan ara genişliklerde devrede. */
@media (hover: hover) and (min-width: 900px) and (max-width: 1099px) {
  .pd-visual.zoomable:hover .pf-img { transform: scale(1.9); }
}

/* Büyüteç paneli — görselin sağında, onunla aynı boyutta, fareyle gezinen 2x görünüm.
   position:fixed: .pd-visual'da overflow:hidden var (panel çocuk olsaydı kırpılırdı)
   ve kendisi position:sticky (mutlak konumlama kaydırmada kayardı).
   Ölçü/konum/arka plan JS tarafından yazılır. z-index 90: içeriğin üstünde ama
   yapışkan başlığın (100) altında. */
.pd-zoom {
  position: fixed; z-index: 90; pointer-events: none;
  border: 1px solid var(--line);
  background-color: var(--noir); background-repeat: no-repeat;
  box-shadow: var(--shadow-3);
  opacity: 0; visibility: hidden;
  transition: opacity 0.16s var(--ease), visibility 0.16s;
}
.pd-zoom.show { opacity: 1; visibility: visible; }

/* Büyüteç merceği — görselin hangi karesinin panelde gösterildiğini işaretler.
   .pd-visual'ın çocuğu (overflow:hidden onu kırpmaz, hep sınırlar içinde kalır).
   Yalnızca merceğin İÇİ hafifçe örtülür; fotoğrafın geri kalanına dokunulmaz
   (eskiden tersiydi: dışarısı karartılıyordu, fotoğraf soluk duruyordu).
   z-index 5: .pf-img (3) ve gren dokusunun üstünde. */
.pd-lens {
  position: absolute; z-index: 5; pointer-events: none;
  border: 1px solid var(--gold-light);
  background: rgba(243,234,214,0.18);     /* tutulan bölge — tek fark bu örtü */
  /* İnce dış halka: mercek fotoğrafın hem açık hem koyu bölgelerinde seçilsin.
     Yayılım 1px — dışarıyı karartan eski 9999px'lik gölge değil. */
  box-shadow: 0 0 0 1px rgba(12,10,8,0.55);
  opacity: 0; visibility: hidden;
  transition: opacity 0.16s var(--ease), visibility 0.16s;
}
.pd-lens.show { opacity: 1; visibility: visible; }

/* ---- Mobil: sayfanın altına sabit satın alma çubuğu ----
   Masaüstünde gizli; orada .pd-buy zaten görünür durumda.
   Yükseklik --pd-bar-h'de tek yerde tanımlı: hem body'nin alt boşluğu hem de
   çerez bandının kalkacağı mesafe buradan hesaplanır, ikisi ayrışmasın. */
.pd-bar { display: none; }

@media (max-width: 768px) {
  :root { --pd-bar-h: 4.5rem; }

  .pd-bar {
    display: flex; align-items: center; gap: 1rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    padding: 0.7rem 1.1rem;
    padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
    background: var(--glass-solid);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
  }
  .pd-bar-info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
  .pd-bar-name {
    font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .pd-bar-price { font-family: var(--serif); font-size: 1.3rem; color: var(--gold-light); line-height: 1.15; }
  .pd-bar .btn { flex-shrink: 0; margin-left: auto; padding: 0.85rem 1.5rem; font-size: 0.7rem; }

  /* Çubuk sayfa sonunu örtmesin */
  body:has(.pd-bar) { padding-bottom: var(--pd-bar-h); }
  /* Çerez bandı (z-index 900) çubuğun üstüne biniyordu; üstüne kaydırılır */
  body:has(.pd-bar) .cookie-bar { bottom: calc(var(--pd-bar-h) + 0.7rem); }

  /* Tam ekran menü açıkken alttaki sabit katmanlar gizlenir.
     .main-nav, z-index:100 olan .site-header'ın İÇİNDE (kendi değeri 90);
     dolayısıyla başlıktan daha yüksek z-index'li her kardeş — satın alma
     çubuğu (120) ve çerez bandı (900) — menünün üstüne biniyordu. */
  body.nav-open .pd-bar,
  body.nav-open .cookie-bar { display: none; }
}
.lightbox {
  position: fixed; inset: 0; z-index: 400; padding: 2rem;
  background: rgba(6,5,4,0.94); display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), visibility 0.3s;
}
.lightbox.open { opacity: 1; visibility: visible; }
/* Işık kutusu da kayan şerit — sayfadaki galeriyle aynı his ve süre */
/* Ölçü .lightbox'ın 2rem iç boşluğunun İÇİNDE kalmalı: dar ekranda 92vw
   kalan alandan genişti, kare sıkışıyor ama görsel sıkışmadığı için sağdan
   kırpılıyordu. Artık kare kalan alanı doldurur, görsel de kareye uyar. */
.lb-viewport { position: relative; width: 100%; max-width: 92vw;
  height: 88vh; max-height: 100%; overflow: hidden; }
.lb-track {
  display: flex; width: 100%; height: 100%;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform;
}
.lb-slide { flex: 0 0 100%; min-width: 0; display: flex; align-items: center; justify-content: center; }
.lightbox img {
  max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px;
  /* pinch-zoom AÇIK (kullanıcı isteği): "none" iki parmakla yakınlaştırmayı
     da engelliyordu. Tek parmak hareketini tarayıcı yine devralmıyor, yani
     yatay kaydırmalı geçiş bozulmuyor — yalnız çift parmak serbest. */
  touch-action: pinch-zoom; user-select: none; -webkit-user-drag: none;
}
/* İmleç yalnız GÖRSELİN üstünde "tut" oluyor (kullanıcı isteği); boşlukta
   normal imleç, çünkü orada sürükleme yok — tek iş kapatmak.
   Eskiden kural .lightbox üzerindeydi ve tüm perdede el işareti çıkıyordu. */
.lightbox { cursor: default; }
.lightbox.lb-kaydirilir img { cursor: grab; }
.lightbox.lb-tutuluyor img { cursor: grabbing; }
.lb-close {
  position: absolute; top: 1.2rem; right: 1.6rem; background: none; border: none;
  color: var(--on-dark-dim); font-size: 2.2rem; line-height: 1; cursor: pointer;
}
.lb-close:hover { color: var(--on-dark-gold); }

/* Değerlendirmeler */
.pd-reviews { margin: 3.5rem auto 0; max-width: 860px; }
.pd-reviews .rv-form { margin: 0 auto; }
.pd-reviews .rv-login, .pd-reviews .rv-thanks { text-align: center; }
/* Başlık ile içerik arası: 3.5rem burada fazla geliyordu */
.pd-reviews .section-head { margin-bottom: 1.6rem; }
.pd-reviews .section-head h2 { margin: 0.7rem 0 0; }
/* "Bunları da Beğenebilirsiniz" bölümünün üst boşluğunu kıs */
.pd-reviews + .section-pad { padding-top: clamp(3rem, 5vw, 4.5rem); }
.reviews-loading { text-align: center; color: var(--muted); padding: 2rem 0; }
.rv-summary {
  display: grid; grid-template-columns: 180px 1fr; gap: 2.5rem; align-items: center;
  background: var(--char); border: 1px solid var(--line-soft); border-radius: 6px;
  padding: 1.8rem; margin-bottom: 2rem;
}
.rv-avg { text-align: center; }
.rv-num { font-family: var(--serif); font-size: 3rem; font-weight: 600; color: var(--gold-light); line-height: 1; }
.rv-avg .stars { display: block; margin: 0.4rem 0 0.3rem; }
.rv-avg .star { font-size: 0.95rem; color: #d4d4d4; }
.rv-avg .star.on { color: var(--gold); }
.rv-count { font-size: 0.78rem; color: var(--muted); }
.rv-bars { display: flex; flex-direction: column; gap: 0.4rem; }
.rv-bar { display: flex; align-items: center; gap: 0.7rem; font-size: 0.8rem; color: var(--cream-dim); }
.rv-bar span { width: 24px; color: var(--gold); }
.rv-bar i { flex: 1; height: 5px; background: var(--line-soft); border-radius: 3px; overflow: hidden; }
.rv-bar i b { display: block; height: 100%; background: var(--grad-gold); }
.rv-bar em { width: 26px; text-align: right; font-style: normal; color: var(--muted); }
.rv-empty { text-align: center; color: var(--muted); padding: 0 0 1.3rem; font-size: 0.94rem; }
.rv-list { display: flex; flex-direction: column; gap: 1.2rem; margin-bottom: 2.4rem; }
.rv-item { border-bottom: 1px solid var(--line-soft); padding-bottom: 1.2rem; }
.rv-item:last-child { border-bottom: none; }
.rv-head { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.rv-name { font-family: var(--serif); font-size: 1.05rem; color: var(--cream); }
.rv-head .star { font-size: 0.8rem; color: #d4d4d4; }
.rv-head .star.on { color: var(--gold); }
.rv-date { font-size: 0.75rem; color: var(--muted); margin-left: auto; }
.rv-text { color: var(--cream-dim); font-size: 0.98rem; line-height: 1.7; }
.rv-form { background: var(--char); border: 1px solid var(--line-soft); border-radius: 6px; padding: 1.8rem; max-width: 640px; }
.rv-form h4 { font-family: var(--serif); font-size: 1.2rem; color: var(--gold-light); margin-bottom: 1rem; }
.rv-stars-input { display: flex; gap: 0.3rem; margin-bottom: 1rem; }
.rv-stars-input .star {
  background: none; border: none; cursor: pointer; font-size: 1.7rem;
  color: #d4d4d4; padding: 0; transition: color 0.2s, transform 0.2s;
}
.rv-stars-input .star:hover { transform: scale(1.15); }
.rv-stars-input .star.on { color: var(--gold); }
.rv-form textarea {
  width: 100%; background: var(--noir); border: 1px solid var(--line); color: var(--cream);
  padding: 0.9rem 1rem; border-radius: 4px; font-family: var(--sans); font-size: 0.95rem;
  font-weight: 300; resize: vertical; margin-bottom: 1rem;
}
.rv-form textarea:focus { outline: none; border-color: var(--gold); }
.rv-login { text-align: center; color: var(--gold-light); padding: 1.2rem 0; }
.rv-thanks { text-align: center; color: var(--ok-text); padding: 1.6rem 0; font-size: 1rem; }

/* Arama sayfası */
/* Arama sonuçlarının tek satırlık özeti. h1 ama başlık gibi DEĞİL: sayfa
   kendi kendini anlatan bir cümleyle açılıyor, kocaman bir başlık gereksizdi
   (kullanıcı isteği). Semantik başlık yine burada — sayfa h1'siz kalmıyor. */
.search-ozet {
  font-family: var(--sans); font-weight: 300; font-size: 0.95rem;
  letter-spacing: 0.02em; color: var(--cream-dim);
  text-align: center; margin: 0 auto 2.2rem;   /* sayfada ortalı (kullanıcı isteği) */
}
/* Aranan kelime ve sonuç sayısı: cümlenin içinde ayrışsın. */
.search-ozet strong { font-weight: 500; color: var(--cream); }

@media (max-width: 640px) {
  .rv-summary { grid-template-columns: 1fr; gap: 1.4rem; padding: 1.4rem; }
  .rv-date { margin-left: 0; width: 100%; }
}

/* ---- Breadcrumb (kırıntı gezinme) ---- */
.crumbs { text-align: left; margin-bottom: 1.6rem; }
.crumbs:empty { display: none; }
.crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  list-style: none; margin: 0; padding: 0;
}
.crumbs li {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
/* Ayraç: --line (%18 opaklık) yazı için görünmez kalıyordu */
.crumbs li + li::before { content: "/"; color: var(--muted); opacity: 0.75; }
.crumbs a { color: var(--cream-dim); transition: color 0.25s var(--ease); }
.crumbs a:hover { color: var(--gold-light); }
.crumbs li[aria-current] { color: var(--gold); }
/* Ürün detayında sayfa üstünde durur */
.pd-wrap .crumbs { margin-bottom: 2.2rem; }
@media (max-width: 640px) {
  .crumbs li { font-size: 0.65rem; letter-spacing: 0.08em; }
  /* Mobilde uzun zinciri kısalt: yalnız son iki adım */
  .crumbs li:not(:last-child):not(:nth-last-child(2)) { display: none; }
  .crumbs li:nth-last-child(2)::before { content: "←"; }
}

/* Pagination */
.pager { display: flex; justify-content: center; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 3.5rem; }
.pager:empty { display: none; }
.pg-btn {
  min-width: 42px; height: 42px; padding: 0 0.7rem; background: transparent;
  border: 1px solid var(--line); color: var(--cream-dim); border-radius: 3px; cursor: pointer;
  font-family: var(--sans); font-size: 0.9rem; letter-spacing: 0.04em; transition: all 0.3s var(--ease);
}
.pg-btn:hover:not(:disabled):not(.active) { border-color: var(--gold-deep); color: var(--gold-light); }
.pg-btn.active { background: var(--grad-gold); color: var(--on-gold); border-color: transparent; font-weight: 500; cursor: default; }
.pg-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.pg-nav { font-size: 1.2rem; }
.pg-dots { color: var(--muted); padding: 0 0.2rem; }

/* ============================================================
   PRODUCT DETAIL PAGE
   ============================================================ */
.pd-wrap {
  padding: 10rem 0 5rem;
  background: radial-gradient(ellipse 60% 420px at 50% 0%, var(--tint), transparent 60%);
  background-repeat: no-repeat;
}
.pd-back { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-dim); margin-bottom: 2.5rem; transition: gap 0.3s var(--ease), color 0.3s; }
.pd-back:hover { color: var(--gold-light); gap: 0.95rem; }
/* Görsel sütunu bilerek daha geniş (kullanıcı isteği): ürün fotoğrafı
   sayfanın ana ögesi. Metin sütunu 605 → ~510 px'e iniyor; başlık zaten
   baslikTekSatira() ile sığacak puntoya iniyor, taşma olmuyor. */
.pd-grid { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 3.4rem; align-items: start; }

.pd-visual {
  aspect-ratio: 1 / 1; border: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--noir);            /* yükleme zemini düz; bkz. .card-visual::before */
}
.pd-visual.gorsel-yok {
  background: radial-gradient(circle at 50% 40%, var(--pd-accent, var(--img-bg)), var(--black) 72%);
}
.pd-visual::after {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

.pd-info .card-family { display: block; margin-bottom: 0.8rem; }
.pd-info h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); margin-bottom: 0.7rem; }
.pd-tagline { font-family: var(--serif); font-style: italic; font-size: 1.35rem; color: var(--gold-light); margin-bottom: 1.8rem; }
.pd-desc { color: var(--cream-dim); font-size: 1.05rem; margin-bottom: 2.4rem; }

/* Koku notaları — bilgi alanının en üstünde */
.pd-notes-inline { margin: 2.2rem 0 2rem; }
.pd-notes-inline h3 { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.6rem; }

.pd-specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); margin-bottom: 2.6rem; }
.pd-spec { background: var(--char); padding: 1.2rem 1.4rem; }
.pd-spec .k { font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.35rem; }
.pd-spec .v { font-size: 0.98rem; color: var(--cream); }

.pd-notes { margin-bottom: 2.8rem; }
.pd-notes h3 { font-size: 1.5rem; margin-bottom: 1.5rem; }
.note-row { display: flex; gap: 1.2rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line-soft); align-items: flex-start; }
.note-row:last-child { border-bottom: none; }
.note-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--grad-gold); margin-top: 0.55rem; flex-shrink: 0; }
.note-label { width: 130px; flex-shrink: 0; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); padding-top: 0.2rem; }
.note-values { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.note-chip { font-size: 0.86rem; color: var(--cream); border: 1px solid var(--line); padding: 0.32rem 0.85rem; border-radius: 20px; background: var(--tint); }

.pd-line { font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.2rem; }

/* Notes band */
.pd-notes-band { margin: 5rem 0 1rem; }
.pd-notes-band .section-head { margin-bottom: 2.2rem; }
.pd-notes-band .section-head h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-top: 1rem; }
.pd-notes-band .pd-notes { max-width: 760px; margin: 0 auto; border: 1px solid var(--line-soft); padding: 1rem 2rem; background: var(--char); }

/* Detail grid: seasons / occasions / effects */
.pd-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); margin: 2.5rem 0; }
.pd-block { background: var(--noir); padding: 2.4rem 2rem; }
.pd-block h3 { font-size: 1.35rem; margin-bottom: 1.6rem; }

.season-list { display: flex; flex-direction: column; gap: 1rem; }
.season-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.season-name { font-size: 0.92rem; color: var(--cream-dim); }
.stars { display: inline-flex; gap: 2px; letter-spacing: 1px; }
.star { color: #d4d4d4; font-size: 0.92rem; }
.star.on { color: var(--gold); }

.occasion-list { display: flex; flex-direction: column; gap: 0.85rem; }
.occasion-list li { font-size: 0.94rem; color: var(--cream-dim); display: flex; align-items: center; gap: 0.6rem; }
.occasion-list .tick { color: var(--gold); font-size: 0.8rem; }

.effect-list { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.effect-chip {
  font-size: 0.82rem; letter-spacing: 0.04em; color: var(--cream);
  border: 1px solid var(--line); padding: 0.5rem 1rem; border-radius: 24px;
  background: var(--tint); transition: all 0.3s var(--ease);
}
.effect-chip:hover { border-color: var(--gold); color: var(--gold-light); }


/* Signature band */
.pd-signature {
  text-align: center; padding: clamp(3rem, 6vw, 5rem) 1.5rem; margin: 2.5rem 0;
  border: 1px solid var(--line); position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 90% at 50% 0%, var(--tint), transparent 60%),
    var(--noir);
}
.pd-signature .sig1 { font-family: var(--serif); font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 600; }
.pd-signature .sig1 { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pd-signature .sig2 { font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 3vw, 1.9rem); color: var(--cream); margin-top: 0.4rem; }
.pd-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; margin: 2rem 0 1.5rem; }
.pd-badge {
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-light);
  border: 1px solid var(--line); padding: 0.5rem 1.1rem; border-radius: 2px;
}
.pd-signature .sig-quote { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--cream-dim); margin-top: 0.5rem; }

@media (max-width: 768px) {
  .pd-detail-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CUSTOM PAGE (admin-created)
   ============================================================ */
.custom-page-body { max-width: 820px; margin: 0 auto; color: var(--cream-dim); font-size: 1.08rem; }
.custom-page-body h2 { font-family: var(--serif); color: var(--gold-light); font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 2rem 0 0.8rem; }
.custom-page-body h3 { font-family: var(--serif); color: var(--gold-light); font-size: 1.3rem; margin: 1.5rem 0 0.6rem; }
.custom-page-body p { margin-bottom: 1.1rem; }
.custom-page-body a { color: var(--gold-light); text-decoration: underline; }
.custom-page-body ul, .custom-page-body ol { margin: 0 0 1.1rem 1.4rem; }
.custom-page-body li { margin-bottom: 0.5rem; }
.custom-page-body img { border-radius: 4px; margin: 1rem 0; }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-body { max-width: 820px; margin: 0 auto; }
.about-body .lead { font-family: var(--serif); font-style: italic; font-size: clamp(1.6rem, 3.5vw, 2.4rem); color: var(--gold-light); text-align: center; margin-bottom: 3rem; line-height: 1.4; }
.about-body p { color: var(--cream-dim); font-size: 1.1rem; margin-bottom: 1.6rem; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); margin: 4.5rem 0; }
.stat { background: var(--noir); padding: 2.6rem 1.5rem; text-align: center; }
.stat .num { font-family: var(--serif); font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 600; line-height: 1; margin-bottom: 0.7rem; }
.stat .lbl { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream-dim); }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 4rem; align-items: start; }
.contact-form { display: flex; flex-direction: column; gap: 1.4rem; }
.field { display: flex; flex-direction: column; gap: 0.6rem; }
.field label { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.field input, .field textarea {
  background: var(--char); border: 1px solid var(--line); color: var(--cream);
  padding: 1rem 1.2rem; font-family: var(--sans); font-size: 0.95rem; font-weight: 300;
  border-radius: 2px; transition: border-color 0.3s var(--ease); resize: vertical;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); }
.field textarea { min-height: 150px; }
.form-success {
  display: none; padding: 1.1rem 1.3rem; border: 1px solid var(--gold-deep);
  background: var(--tint); color: var(--gold-light); font-size: 0.92rem; border-radius: 2px;
}
.form-success.show { display: block; }

.contact-side { display: flex; flex-direction: column; gap: 2.4rem; }
.contact-block h3 { font-size: 1.4rem; margin-bottom: 1rem; }
.contact-block p, .contact-block a { color: var(--cream-dim); font-size: 1rem; }
.contact-block a:hover { color: var(--gold-light); }
.contact-line { display: flex; gap: 0.8rem; align-items: center; margin-bottom: 0.7rem; }
.contact-line svg { width: 18px; height: 18px; color: var(--gold); flex-shrink: 0; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--noir); border-top: 1px solid var(--line); padding: 5rem 0 2rem; margin-top: 0; }
/* Sütun sayısı sabit değil: panelden altbilgiye yeni menü eklenebiliyor.
   --fcols = menü sütunu sayısı, buildFooter() basıyor. Marka, iletişim ve
   "Bizi Takip Edin" şablonda ayrı — menü eklendikçe daralmıyorlar (iletişim
   sütunu daralınca e-posta adresi iki satıra düşüyordu). */
.footer-top { display: grid; grid-template-columns: 1.5fr repeat(var(--fcols, 2), minmax(0, 1fr)) 1.25fr 1.3fr; gap: 2.5rem; padding-bottom: 3.5rem; border-bottom: 1px solid var(--line-soft); }
.footer-brand .brand-name { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; letter-spacing: 0.26em; }
.footer-brand .brand-sub { font-size: 0.6rem; letter-spacing: 0.6em; color: var(--gold); margin: 0.4rem 0 1.4rem; }
.footer-brand p { color: var(--cream-dim); font-size: 0.95rem; max-width: 280px; }
/* Başlıklar büyük harfe çevrilmiyor (kullanıcı isteği): "Kurumsal",
   "Bizi Takip Edin" panelde yazıldığı gibi görünsün. Küçük harfe
   inince 0.2em harf aralığı sözcükleri dağıtıyordu, punto biraz
   büyütülüp aralık kısıldı. */
.footer-col h4 { font-size: 0.9rem; letter-spacing: 0.06em; color: var(--gold); margin-bottom: 1.4rem; }
.footer-col ul { display: flex; flex-direction: column; gap: 0.8rem; }
.footer-col a, .footer-col p { color: var(--cream-dim); font-size: 0.92rem; transition: color 0.3s var(--ease); }
.footer-col a:hover { color: var(--gold-light); }
.footer-legal a { font-size: 0.86rem; }

.newsletter-form { display: flex; margin-top: 1.2rem; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.newsletter-form input { flex: 1; background: var(--char); border: none; color: var(--cream); padding: 0.85rem 1rem; font-family: var(--sans); font-size: 0.88rem; }
.newsletter-form input:focus { outline: none; }
.newsletter-form button { background: var(--grad-gold); border: none; color: var(--on-gold); padding: 0 1.3rem; cursor: pointer; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; }

.socials { display: flex; gap: 0.8rem; margin-top: 1.5rem; }
.socials a { width: 40px; height: 40px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.35s var(--ease); }
.socials a:hover { border-color: var(--gold); background: var(--tint); transform: translateY(-3px); }
.socials svg { width: 17px; height: 17px; color: var(--gold-light); }

.footer-bottom { display: flex; justify-content: center; align-items: center; padding-top: 2rem; flex-wrap: wrap; gap: 1rem; text-align: center; }
.footer-bottom p { font-size: 0.8rem; color: var(--muted); letter-spacing: 0.04em; }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .story-split { grid-template-columns: 1fr; }
  .story-visual { min-height: 320px; }
  .pd-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  /* Dar ekran: şerit ana görselin ALTINA, yatay olarak geçer */
  .pd-media { position: static; top: 0; max-width: 440px; margin: 0 auto; width: 100%;
              grid-template-columns: minmax(0, 1fr); }
  .pd-media .pd-visual { grid-column: 1; grid-row: 1; }
  .pd-thumbs { grid-column: 1; grid-row: 2; flex-direction: row; flex-wrap: wrap; }
  .pd-thumb { width: 64px; height: 64px; }
  .pd-visual { position: relative; top: 0; width: 100%; }
  .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .container { padding: 0 1.4rem; }
  .main-nav { position: fixed; inset: 0; background: var(--glass-solid); backdrop-filter: blur(20px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transform: translateX(100%);
    transition: transform 0.5s var(--ease); z-index: 90; }
  .main-nav.open { transform: translateX(0); }
  /* Menü açıkken başlığın backdrop-filter'ı KAPATILIR.
     backdrop-filter uygulanmış bir ata, position:fixed torunları için
     kapsayıcı blok olur; .main-nav (fixed, inset:0) bu yüzden ekranı değil
     başlığı kaplıyordu — kutusu 375x812 yerine 375x69 çıkıyor, bağlantılar
     sayfa içeriğinin üstüne taşıyordu. Hata yalnız sayfa kaydırıldıktan
     sonra görülüyordu, çünkü blur'u ekleyen .scrolled sınıfı 30px'den
     sonra ekleniyor. Menü açıkken zaten tüm ekran kaplandığı için blur'un
     kaybolması görünmüyor. */
  body.nav-open .site-header.scrolled {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: var(--black);
    /* transition:none ŞART. .site-header'da "transition: all 0.5s" var;
       onsuz blur 16px'ten 0'a animasyonla iniyor ve bu 0.5 sn boyunca
       değer "none" olmadığı için kapsayıcı blok sürüyordu — menü tam
       açılış animasyonu boyunca 69px'te sıkışık kalıp sonunda sıçrıyordu. */
    transition: none;
  }
  .main-nav ul { flex-direction: column; gap: 2.2rem; text-align: center; }
  .main-nav a { font-size: 1.3rem; font-family: var(--serif); letter-spacing: 0.1em; text-transform: none; }
  .burger { display: flex; z-index: 95; }
  /* Mobil başlık: solda menü + arama, ortada logo, sağda hesap + sepet.
     1fr auto 1fr ızgara — yan sütunlar eşit genişlikte olduğu için logo,
     iki grubun içeriği farklı genişlikte olsa bile TAM ORTADA kalır. */
  .header-inner {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: 0.6rem;
  }
  .header-left { display: flex; align-items: center; gap: 0.1rem; justify-self: start; }
  .brand { justify-self: center; flex-shrink: 0; }
  .brand-logo { flex-shrink: 0; }
  .header-actions { justify-self: end; gap: 0.35rem; }
  /* Arama solda; sağdaki kopya ve dil değiştirici mobilde kapalı.
     Dil değiştirici sağda kalsaydı grup 117px'e çıkıp logoya 96px yer
     bırakıyordu — dil seçimi menünün içine (.nav-langs) taşındı. */
  .header-actions #searchBtn,
  .header-actions .lang-switch { display: none; }
  .icon-btn { width: 34px; height: 34px; }
  .icon-btn svg { width: 19px; height: 19px; }

  /* Mobil menüdeki dil satırı */
  .nav-langs {
    display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
    margin-top: 2.5rem; padding-top: 1.6rem;
    border-top: 1px solid var(--line-soft); width: min(220px, 60%);
  }
  .nav-langs button {
    display: flex; align-items: center; gap: 0.6rem; width: 100%;
    justify-content: center; background: none; border: none; cursor: pointer;
    padding: 0.6rem 0.5rem; border-radius: 4px;
    color: var(--cream-dim); font-family: var(--sans); font-size: 0.9rem;
    letter-spacing: 0.06em;
  }
  .nav-langs button.active { color: var(--gold-light); background: var(--tint); }
  /* Submenus: accordion inside the full-screen mobile menu */
  .main-nav .has-sub { flex-wrap: wrap; justify-content: center; gap: 0.4rem; }
  .sub-caret { font-size: 1rem; padding: 0.2rem 0.6rem; }
  .main-nav .submenu {
    position: static; transform: none; width: 100%; min-width: 0;
    background: none; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    padding: 0; max-height: 0; overflow: hidden; opacity: 1; visibility: visible;
    transition: max-height 0.35s var(--ease), padding 0.35s var(--ease);
  }
  .main-nav .has-sub.sub-open .submenu { max-height: 260px; padding: 0.6rem 0 0.2rem; }
  .main-nav .submenu a { font-size: 1.05rem; padding: 0.5rem 0; color: var(--cream-dim); }
}
/* ============================================================
   Mobil ürün ızgarası — kare görsel, kompakt kart
   ------------------------------------------------------------
   Masaüstü ölçüleri mobilde aynen kalıyordu: 32px ızgara boşluğu +
   28.8px gövde dolgusu, 149px'lik kartın iç genişliğini 90px'e
   düşürüyor; 27px'lik başlık 2-3 satıra kırılınca kart 566px'e
   uzuyordu (oran 3.8:1 — "ince uzun" görünümün sebebi).
   Boşluk ve dolgu kısılıp görsel kareye alındı.
   ============================================================ */
@media (max-width: 640px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }

  .card-visual { aspect-ratio: 1 / 1; }
  .card-body { padding: 0.85rem 0.8rem 1rem; gap: 0.28rem; }
  .card-family { font-size: 0.56rem; letter-spacing: 0.16em; }
  /* min-height = 2 satır: "Mademoiselle Royale" gibi uzun adlar 2 satıra
     kırılıp o satırdaki KARTLARI 314px'ten 335px'e çıkarıyordu; ızgara
     satırdan satıra kayıyordu. Her başlığa 2 satırlık yer ayrılınca tüm
     satırlar aynı yükseklikte kalır. */
  .card-body h3 { font-size: 1.05rem; line-height: 1.2; min-height: 2.4em; }
  /* Dar kolonda 3-4 satıra yayılıp kartı uzatıyordu; ürün detayında zaten var */
  .card-tagline { display: none; }

  /* margin-top:auto ŞART: boşluğu emen .card-tagline (flex:1) mobilde gizli.
     Onsuz fiyat+düğme bloğu, başlık 1 mi 2 mi satır ve yıldız var mı yok mu
     diye kayıyor; aynı satırdaki kartlarda düğmeler 20px kaçık duruyordu. */
  .card-foot { margin-top: auto; padding-top: 0.6rem; }
  /* .card-size GİZLENMEZ: fiyat onun içine sarılı
     (<span class="card-size"><span class="card-price">…</span></span>),
     gizlenince fiyat da kayboluyor. */
  .card-price { font-size: 0.88rem; }
  .rating-badge .star { font-size: 0.64rem; }
  .rating-n { display: none; }

  .card-cart { margin-top: 0.55rem; padding: 0.6rem 0.4rem; font-size: 0.6rem; letter-spacing: 0.08em; }
}

/* ============================================================
   Çerez bilgilendirme bandı — tek satır, dikkat dağıtmayan
   ============================================================ */
.cookie-bar {
  position: fixed; left: 50%; bottom: 1rem; z-index: 900;
  width: calc(100% - 2rem); max-width: 720px; transform: translate(-50%, 130%);
  background: var(--char); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: var(--shadow-1); opacity: 0;
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
.cookie-bar.in { transform: translate(-50%, 0); opacity: 1; }
.cookie-inner { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 0.9rem 0.75rem 1.15rem; }
.cookie-inner p { flex: 1; min-width: 0; margin: 0; color: var(--cream-dim); font-size: 0.82rem; line-height: 1.5; }
.cookie-inner a { color: var(--gold-light); white-space: nowrap; }
.cookie-ok {
  flex-shrink: 0; padding: 0.5rem 1.3rem; border: none; border-radius: 999px;
  background: var(--grad-gold); color: var(--on-gold); cursor: pointer;
  font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.cookie-ok:hover { filter: brightness(1.08); }

@media (max-width: 600px) {
  .cookie-bar { width: calc(100% - 1.4rem); bottom: 0.7rem; }
  .cookie-inner { padding: 0.7rem 0.75rem 0.7rem 0.95rem; gap: 0.7rem; }
  .cookie-inner p { font-size: 0.76rem; line-height: 1.45; }
  .cookie-ok { padding: 0.45rem 1rem; font-size: 0.7rem; }
}

/* ============================================================
   UGC — içerik üretici başvuru ve değerlendirme
   ============================================================ */
.ugc-form { max-width: 720px; margin: 0 auto; }
.ugc-h3 { font-family: var(--serif); font-size: 1.15rem; color: var(--gold); margin: 2.2rem 0 0.9rem; }
.ugc-h3:first-of-type { margin-top: 0.6rem; }
.ugc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; }
.ugc-form label, .ugc-full { display: block; margin-bottom: 1rem; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.ugc-form input, .ugc-form textarea {
  width: 100%; margin-top: 0.5rem; padding: 0.85rem 1rem; background: var(--black);
  border: 1px solid var(--line); border-radius: 4px; color: var(--cream);
  font-family: var(--sans); font-size: 0.95rem; letter-spacing: normal; text-transform: none;
}
.ugc-form input:focus, .ugc-form textarea:focus { outline: none; border-color: var(--gold); }
.ugc-form button[type=submit] { width: 100%; justify-content: center; margin-top: 1.4rem; }
.ugc-as { margin-bottom: 1.4rem; font-size: 0.9rem; color: var(--cream-dim); }

/* Durum kartı */
.ugc-status { max-width: 620px; margin: 0 auto; padding: 2.4rem; text-align: center; background: var(--char); border: 1px solid var(--line-soft); border-radius: 6px; }
.ugc-badge { display: inline-block; margin-bottom: 1.1rem; padding: 0.45rem 1.1rem; border-radius: 999px; background: var(--grad-gold); color: var(--on-gold); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; }
.ugc-status.ugc-rejected .ugc-badge { background: var(--err-line); color: var(--cream); }
.ugc-status p { color: var(--cream-dim); font-size: 0.95rem; line-height: 1.7; }
.ugc-track { margin-top: 0.9rem; }
.ugc-status .btn { margin-top: 1.6rem; }

/* Değerlendirme kalemleri */
.ugc-item { padding: 1.4rem; margin-bottom: 1.2rem; background: var(--char); border: 1px solid var(--line-soft); border-radius: 6px; }
.ugc-item-head { display: flex; align-items: flex-start; gap: 1.3rem; margin-bottom: 1.2rem; }
.ugc-thumb {
  width: 260px; flex-shrink: 0; display: block; border-radius: 6px; overflow: hidden;
  background: var(--black); border: 1px solid var(--line-soft); transition: border-color 0.3s var(--ease);
}
.ugc-thumb:hover { border-color: var(--gold); }
/* object-fit: cover + kare oran, geniş etiketli görselleri kırpıp üstündeki
   yazıyı kesiyordu. Görselin kendi oranı korunuyor, hiçbir yeri kırpılmıyor. */
.ugc-thumb img { width: 100%; height: auto; display: block; transition: transform 0.5s var(--ease); }
.ugc-thumb:hover img { transform: scale(1.03); }
.ugc-item-info { min-width: 0; }
.ugc-name { display: block; font-family: var(--serif); font-size: 1.25rem; line-height: 1.25; color: var(--cream); transition: color 0.3s var(--ease); }
.ugc-name:hover { color: var(--gold-light); }
.ugc-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; margin-top: 0.5rem; font-size: 0.78rem; color: var(--cream-dim); }
.ugc-meta .ugc-code { color: var(--gold); letter-spacing: 0.08em; }
.ugc-notes {
  margin: 0.6rem 0 0; font-size: 0.82rem; line-height: 1.6; color: var(--cream-dim);
}
.ugc-notes > span {
  display: block; margin-bottom: 0.15rem; font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold);
}
.ugc-buy { display: inline-block; margin-top: 0.7rem; font-size: 0.8rem; color: var(--gold); border-bottom: 1px solid transparent; transition: border-color 0.3s var(--ease); }
.ugc-buy:hover { border-bottom-color: var(--gold); }
.ugc-rank { display: flex !important; align-items: center; gap: 0.6rem; margin: 0.85rem 0 0 !important; text-transform: none; letter-spacing: normal; }
.ugc-rank > span { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-dim); }
.ugc-rank select {
  padding: 0.45rem 0.7rem; background: var(--black); border: 1px solid var(--line);
  border-radius: 4px; color: var(--cream); font-family: var(--sans); font-size: 0.88rem;
}
.ugc-rank select:focus { outline: none; border-color: var(--gold); }
.ugc-item.is-top { border-color: var(--gold); }
.ugc-item.is-top .ugc-rank select { border-color: var(--gold); color: var(--gold); }
.ugc-rank-hint { margin: -0.6rem 0 1.4rem; font-size: 0.85rem; color: var(--cream-dim); }
.ugc-rank-hint.done { color: var(--gold); }
.ugc-fav { display: inline-flex !important; align-items: center; gap: 0.45rem; margin: 0.35rem 0 0 !important; cursor: pointer; text-transform: none; letter-spacing: normal; font-size: 0.82rem; color: var(--cream-dim); }
.ugc-fav input { width: auto !important; margin: 0 !important; accent-color: var(--gold); }
.ugc-scores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; margin-bottom: 0.9rem; }
.ugc-scores > div > span { display: block; margin-bottom: 0.3rem; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-dim); }
.ugc-stars { display: flex; gap: 0.15rem; }
.ugc-star { background: none; border: none; padding: 0 0.1rem; cursor: pointer; font-size: 1.25rem; line-height: 1; color: var(--line); transition: color 0.2s; }
.ugc-star.on { color: var(--gold); }
.ugc-star:hover { color: var(--gold-light); }
.ugc-item textarea { width: 100%; padding: 0.7rem 0.9rem; background: var(--black); border: 1px solid var(--line); border-radius: 4px; color: var(--cream); font-family: var(--sans); font-size: 0.9rem; }
.ugc-item textarea:focus { outline: none; border-color: var(--gold); }

@media (max-width: 768px) {
  .ugc-grid { grid-template-columns: 1fr; }
  .ugc-form { max-width: 100%; }
  .ugc-status { padding: 1.6rem 1.2rem; }
  .ugc-item { padding: 1rem; }

  /* Görsel üstte tam genişlik, bilgiler altında — küçük ekranda yan yana sıkışmasın */
  .ugc-item-head { flex-direction: column; align-items: stretch; gap: 0.9rem; }
  .ugc-thumb { width: 100%; }
  .ugc-name { font-size: 1.15rem; }

  /* Puanlar tek sütun; yıldızlar parmakla rahat basılacak kadar büyük */
  .ugc-scores { grid-template-columns: 1fr; gap: 0.9rem; }
  .ugc-scores > div {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding-bottom: 0.7rem; border-bottom: 1px solid var(--line-soft);
  }
  .ugc-scores > div:last-child { border-bottom: none; padding-bottom: 0; }
  .ugc-scores > div > span { margin-bottom: 0; }
  .ugc-star { font-size: 1.8rem; padding: 0.3rem 0.35rem; }
}
.acc-ugc { display: inline-block; margin-top: 2.2rem; padding: 0.85rem 1.5rem; border: 1px solid var(--gold); border-radius: 4px; color: var(--gold); font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.3s var(--ease); }
.acc-ugc:hover { background: var(--grad-gold); color: var(--on-gold); border-color: transparent; }

/* ---------- Adres defteri (Hesabım) ---------- */
.addr-card { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.2rem; padding: 1.1rem 1.3rem; margin-bottom: 0.8rem; background: var(--char); border: 1px solid var(--line-soft); border-radius: 6px; }
.addr-card.is-default { border-color: var(--gold); }
.addr-title { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem; color: var(--cream); }
.addr-badge { padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--grad-gold); color: var(--on-gold); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; }
.addr-body p { font-size: 0.9rem; line-height: 1.55; }
/* Simgeler yan yana: metin bağlantıyken alt alta duruyorlardı, iki 32px
   kare yan yana daha derli toplu. */
.addr-actions { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.mini-link { background: none; border: none; padding: 0; cursor: pointer; color: var(--cream-dim); font-family: var(--sans); font-size: 0.78rem; transition: color 0.25s; }
.mini-link:hover { color: var(--gold); }
.mini-link.danger:hover { color: var(--err-text); }
.addr-form { padding: 1.3rem; margin-bottom: 1rem; background: var(--char); border: 1px solid var(--gold); border-radius: 6px; }
.addr-check { display: flex !important; align-items: center; gap: 0.5rem; text-transform: none; letter-spacing: normal; font-size: 0.85rem; color: var(--cream-dim); }
.addr-check input { width: auto !important; margin: 0 !important; accent-color: var(--gold); }
.addr-form-actions { display: flex; gap: 0.7rem; margin-top: 1rem; }
.addr-form-actions .btn { flex: 1; justify-content: center; }
.co-addr-pick select { width: 100%; margin-top: 0.5rem; padding: 0.8rem 1rem; background: var(--black); border: 1px solid var(--line); border-radius: 4px; color: var(--cream); font-family: var(--sans); font-size: 0.92rem; }

@media (max-width: 768px) {
  .addr-card { flex-direction: column; gap: 0.8rem; }
  .addr-actions { flex-direction: row; gap: 1.1rem; text-align: left; }
  .addr-form-actions { flex-direction: column; }
}

/* ---------- Hesabım: sekmeler ---------- */
/* ---- Hesabım: sol menü + içerik ---- */
/* Hesap sayfası sitenin 1280px'lik kabından daha geniş: form ve sipariş
   kartları sağda kocaman boşluk bırakıyordu (kullanıcı isteği). Kapsayıcının
   yatay dolgusu korunuyor, yalnız üst sınır büyütülüyor. */
.shop-page:has(.acc-layout) { --acc-w: 1560px; }
.acc-layout {
  display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 2.8rem; align-items: start;
  max-width: var(--acc-w, 1560px); width: 100%; margin: 0 auto;
}
.shop-page:has(.acc-layout) > .container { max-width: none; }
/* Kap sınırsız olunca ekmek kırıntısı sayfanın en soluna kaçıp içerikle
   hizasını kaybediyordu; aynı genişlikte ortalanıyor. */
.shop-page:has(.acc-layout) > .container > .crumbs { max-width: var(--acc-w); margin-inline: auto; }

.acc-side { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; position: sticky; top: calc(var(--hdr) + 1.5rem); }
.acc-user { display: flex; align-items: center; gap: 0.8rem; padding: 0 0.2rem 0.2rem; }
.acc-avatar {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
}
.acc-avatar svg { width: 20px; height: 20px; color: var(--gold); }
.acc-user-txt { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.acc-user-txt strong { font-family: var(--serif); font-size: 1.05rem; color: var(--cream); font-weight: 500; }
.acc-user-txt small { font-size: 0.78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }

.acc-nav { display: flex; flex-direction: column; gap: 1.1rem; }
.acc-group {
  background: var(--char); border: 1px solid var(--line-soft); border-radius: 6px;
  padding: 1.1rem 0.9rem; display: flex; flex-direction: column; gap: 0.15rem;
}
.acc-group h4 {
  font-family: var(--sans); font-size: 0.68rem; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);
  margin: 0 0 0.6rem 0.55rem;
}
.acc-tab {
  display: flex; align-items: center; gap: 0.7rem; width: 100%;
  background: none; border: none; border-radius: 4px; cursor: pointer;
  padding: 0.6rem 0.55rem; text-align: left;
  font-family: var(--sans); font-size: 0.92rem; color: var(--cream-dim);
  transition: color 0.2s, background 0.2s;
}
.acc-tab:hover { color: var(--cream); background: var(--tint); }
.acc-tab.active { color: var(--gold-light); background: var(--tint); }
.acc-ic { display: flex; flex: none; }
.acc-ic svg { width: 17px; height: 17px; color: var(--gold); }

.acc-logout {
  background: none; border: 1px solid var(--line-soft); border-radius: 6px;
  padding: 0.9rem 1rem; cursor: pointer; color: var(--cream-dim);
  font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase;
  transition: border-color 0.25s, color 0.25s;
}
.acc-logout:hover { border-color: var(--gold-deep); color: var(--gold-light); }

.acc-main { min-width: 0; }
.acc-section-title {
  font-family: var(--serif); font-size: 1.5rem; color: var(--cream);
  margin: 0 0 1.6rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--line-soft);
}
.acc-panel[hidden] { display: none; }

@media (max-width: 900px) {
  /* min-width:0 şart: grid'in 1fr izi varsayılan olarak içeriğinden küçülemez,
     onsuz menü kutuları dar ekranda taşıyordu. */
  .acc-layout { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
  .acc-side { position: static; min-width: 0; }
  .acc-nav { gap: 0.9rem; }
  .acc-group { padding: 0.9rem 0.8rem; }
}
.acc-ugc-text { max-width: 620px; margin-bottom: 1.4rem; line-height: 1.7; }

/* ---------- Ödeme: misafir / üye seçimi ---------- */
.co-gate { max-width: 780px; margin: 0 auto; }
.co-gate > h3 { font-family: var(--serif); font-size: 1.4rem; color: var(--cream); margin-bottom: 0.5rem; }
.co-gate > .muted { margin-bottom: 2rem; line-height: 1.65; }
.co-gate-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.co-choice {
  display: flex; flex-direction: column; gap: 0.5rem; padding: 1.6rem 1.3rem; text-align: left;
  background: var(--char); border: 1px solid var(--line-soft); border-radius: 6px; cursor: pointer;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.co-choice:hover { border-color: var(--gold); transform: translateY(-2px); }
.co-choice strong { color: var(--cream); font-size: 0.86rem; letter-spacing: 0.1em; text-transform: uppercase; }
.co-choice small { color: var(--cream-dim); font-size: 0.85rem; line-height: 1.5; }
.co-choice.recommended { border-color: var(--gold); }
.co-login { max-width: 420px; }
.co-login-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.1rem; font-size: 0.82rem; }
.co-mode-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: 100%; margin: 0 0 1.6rem; padding: 0.75rem 1.1rem;
  background: var(--char); border: 1px solid var(--line-soft); border-radius: 6px;
  font-size: 0.85rem; color: var(--cream-dim);
}
.co-hint { display: block; margin-top: 0.4rem; font-size: 0.76rem; letter-spacing: normal; text-transform: none; color: var(--cream-dim); }

@media (max-width: 768px) { .co-gate-grid { grid-template-columns: 1fr; } }

/* ---------- Sipariş detayı ---------- */
.order-row.is-link { text-decoration: none; transition: background 0.25s var(--ease); }
.order-row.is-link:hover { background: var(--wash); }
.od-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2.4rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line-soft); }
.od-no { font-family: var(--serif); font-size: 1.6rem; color: var(--cream); }
.od-badges { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.od-pay { padding: 0.35rem 0.9rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream-dim); }
.od-pay.paid { border-color: var(--ok-line); color: var(--ok-text); }
.od-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 2.5rem; align-items: start; }
.od-items { border: 1px solid var(--line-soft); border-radius: 6px; overflow: hidden; }
.od-item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 1rem; align-items: center; padding: 0.95rem 0; background: var(--char); border-bottom: 1px solid var(--line-soft); font-size: 0.92rem; }
.od-item:last-child { border-bottom: none; padding-bottom: 0; }
.od-item:first-child { padding-top: 0; }
/* Sipariş satırında ürün görseli: müşteri ne aldığını yazıdan değil resimden
   tanıyor. Ürün silinmişse <img> basılmaz, kutu boş zemin olarak kalır. */
.od-thumb { display: block; width: 64px; aspect-ratio: 1 / 1; overflow: hidden; background: var(--img-bg); border-radius: 4px; }
.od-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) {
  .od-item { grid-template-columns: 52px minmax(0, 1fr); }
  .od-thumb { width: 52px; }
}
.od-item:last-child { border-bottom: none; }
.od-name { color: var(--cream); }
.od-name:hover { color: var(--gold-light); }
.od-qty { color: var(--cream-dim); }
.od-line { color: var(--gold); white-space: nowrap; }
.od-box { padding: 1.2rem 1.3rem; background: var(--char); border: 1px solid var(--line-soft); border-radius: 6px; line-height: 1.7; font-size: 0.92rem; }
.od-note { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--line-soft); }
.od-summary { position: sticky; top: 100px; }
.od-bank { margin-top: 1.3rem; padding-top: 1.2rem; border-top: 1px solid var(--line-soft); font-size: 0.88rem; line-height: 1.9; }
.od-bank h4 { margin-bottom: 0.5rem; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.od-bank-hint { margin-top: 0.6rem; font-size: 0.8rem; color: var(--cream-dim); line-height: 1.55; }

@media (max-width: 900px) {
  .od-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .od-summary { position: static; }
}
@media (max-width: 640px) {
  .od-item { grid-template-columns: 1fr auto; row-gap: 0.35rem; }
  .od-item .muted { grid-column: 1; font-size: 0.82rem; }
  .od-line { grid-column: 2; }
}

/* İl seçici — metin girdileriyle aynı görünsün */
/* ---------- Aranabilir seçici (il / ilçe) ----------
   Asıl <select> DOM'da kalıyor ama görünmüyor: form gönderimi, doğrulama ve
   ilçe senkronu değişmesin diye. Odaklanabilir kalması için display:none
   yerine saydam ve konumlandırılmış. */
.sec2 { position: relative; }
.sec2 > select {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none; margin: 0;
}
.sec2-dugme {
  width: 100%; margin-top: 0.5rem; padding: 0.85rem 2.6rem 0.85rem 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  background: var(--black); border: 1px solid var(--line); border-radius: 4px;
  color: var(--cream); font-family: var(--sans); font-size: 0.95rem;
  letter-spacing: normal; text-transform: none; text-align: left; cursor: pointer;
}
.sec2-dugme.bos { color: var(--muted); }
.sec2-dugme:hover { border-color: var(--gold); }
.sec2-dugme:focus-visible { outline: none; border-color: var(--gold); }
.sec2-ok {
  position: absolute; right: 1rem; top: 50%; width: 8px; height: 8px;
  border-right: 1.5px solid var(--cream-dim); border-bottom: 1.5px solid var(--cream-dim);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
/* Hatalı alan: kırmızı çerçeve gizli select'te değil düğmede görünmeli */
.sec2 > select.hatali ~ .sec2-dugme { border-color: var(--err-line); background: rgba(192,39,29,0.03); }

.sec2-panel {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--char); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: var(--shadow-2); overflow: hidden;
}
.sec2-panel[hidden] { display: none; }
.sec2-ara {
  width: 100%; margin: 0 !important; padding: 0.75rem 1rem;
  border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0;
  background: var(--char); color: var(--cream);
  font-family: var(--sans); font-size: 0.92rem; letter-spacing: normal; text-transform: none;
}
.sec2-ara:focus { outline: none; }
.sec2-liste { max-height: 240px; overflow-y: auto; }
.sec2-oge {
  display: block; width: 100%; padding: 0.65rem 1rem; border: 0; background: none;
  color: var(--cream); font-family: var(--sans); font-size: 0.92rem;
  letter-spacing: normal; text-transform: none; text-align: left; cursor: pointer;
}
.sec2-oge:hover { background: var(--wash); }
.sec2-oge.secili { color: var(--gold); font-weight: 500; }
.sec2-bos { padding: 0.9rem 1rem; margin: 0; color: var(--muted); font-size: 0.86rem; }

.city-select,
.district-select {
  width: 100%; margin-top: 0.5rem; padding: 0.85rem 1rem;
  background: var(--black); border: 1px solid var(--line); border-radius: 4px;
  color: var(--cream); font-family: var(--sans); font-size: 0.95rem;
  letter-spacing: normal; text-transform: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: right 1.1rem center, right 0.75rem center;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  padding-right: 2.4rem;
}
.city-select:focus,
.district-select:focus { outline: none; border-color: var(--gold); }
.city-select option,
.district-select option { background: var(--char); color: var(--cream); }


/* Ödeme adımındaki giriş penceresi */
.co-giris { margin: 0 0 0.4rem; font-size: 0.9rem; line-height: 1.6; color: var(--cream-dim); }
.co-giris .mini-link {
  font-size: 0.9rem; line-height: inherit; vertical-align: baseline;
  color: var(--cream); text-decoration: underline; text-underline-offset: 3px;
}
.co-uyelik-not { margin: 0 0 1.6rem; font-size: 0.82rem; line-height: 1.6; color: var(--muted); }
.co-giris .mini-link:hover { color: var(--gold); }

.giris-modal { position: fixed; inset: 0; z-index: 2500; display: flex; align-items: center; justify-content: center; padding: 1.2rem; }
.giris-modal[hidden] { display: none; }
.giris-modal .gm-perde { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.giris-modal .gm-kutu {
  position: relative; width: 100%; max-width: 440px;
  background: var(--char); border: 1px solid var(--line); border-radius: 10px;
  padding: 2.2rem 2rem 1.8rem; box-shadow: var(--shadow-3);
  max-height: 90vh; overflow-y: auto;
}
.giris-modal .gm-kapat {
  position: absolute; top: 0.7rem; right: 0.9rem;
  border: 0; background: none; font-size: 1.7rem; line-height: 1;
  color: var(--cream-dim); cursor: pointer;
}
.giris-modal .gm-kapat:hover { color: var(--cream); }
.giris-modal .gm-baslik {
  margin: 0 0 1.4rem; text-align: center; font-family: var(--sans);
  font-size: 0.95rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream);
}
.giris-modal .gm-unuttum { display: inline-block; margin: -0.4rem 0 1rem; font-size: 0.82rem; color: var(--cream-dim); }
.giris-modal .gm-unuttum:hover { color: var(--gold); }
.giris-modal .btn { width: 100%; justify-content: center; }
.giris-modal .gm-kayit {
  margin: 1.3rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line-soft);
  text-align: center; font-size: 0.85rem; color: var(--cream-dim);
}

/* Sözleşme kutusundaki belge tabloları (ön bilgilendirme / mesafeli satış) */
.blg-tablo { width: 100%; border-collapse: collapse; margin: 0 0 1.2rem; font-size: 0.85rem; }
.blg-tablo th, .blg-tablo td { border: 1px solid var(--line); padding: 0.5rem 0.7rem; text-align: left; vertical-align: top; }
.blg-tablo th { background: var(--noir); font-weight: 500; color: var(--cream); white-space: nowrap; }
.blg-tablo .sag { text-align: right; white-space: nowrap; }
.blg-urun thead th { background: var(--noir); }
.blg-tablo .blg-alt td { background: var(--noir); }
.blg-tablo .blg-toplam td { background: var(--noir); font-weight: 600; color: var(--cream); }
.blg-govde { margin-top: 1.4rem; }
.yasal-modal .ym-body h3 { margin-top: 1.6rem; }

/* ---------- Ödeme sayfası: tam ekran iki sütun ----------
   Sepetten sonraki adım site kabuğundan çıkarıldı (menü, duyuru şeridi ve
   altbilgi yok): amaç müşteriyi başka sayfaya sürüklememek. Sağdaki özet
   ekranın kenarına kadar uzanan gri bir sütun. */
.odeme-body { background: var(--char); }
.odeme-body #topbar { display: none; }        /* duyuru şeridi bu adımda kapalı */

.co-bar { border-bottom: 1px solid var(--line); background: var(--char); }
/* Üst bar gövdeyle AYNI ızgarayı kullanıyor: logo formun sol kenarıyla,
   sepet ikonu sipariş özetinin sol kenarıyla hizalı olsun diye. Ölçüler
   .co-fields / .cart-summary ile birebir aynı — biri değişirse diğeri de. */
.co-bar-ic {
  max-width: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 55fr 45fr; align-items: center;
}
.co-bar-sol {
  max-width: 640px; width: 100%; margin: 0 0 0 auto;
  padding: 1.1rem clamp(1.5rem, 3vw, 3.5rem) 1.1rem clamp(1.2rem, 4vw, 3rem);
}
.co-bar-sag {
  max-width: 520px; width: 100%; margin: 0 auto 0 0;
  padding: 1.1rem clamp(1.2rem, 4vw, 3rem) 1.1rem clamp(1.5rem, 3vw, 3.5rem);
  display: flex; justify-content: flex-start;
}
.co-logo img { height: 42px; width: auto; display: block; }
/* Sepet ikonu: site başlığındaki .icon-btn ölçüleri burada yok, rozet
   ikonun üstüne biniyordu. Kutu ölçüsü ve rozet konumu ayrıca veriliyor. */
.co-sepet {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; color: var(--cream); text-decoration: none;
}
.co-sepet svg { width: 23px; height: 23px; }
.co-sepet .cart-count { top: 2px; right: 2px; }

.co-sayfa { min-height: calc(100vh - 78px); }
.odeme-body .checkout-grid {
  display: grid; grid-template-columns: 55fr 45fr;
  gap: 0; align-items: stretch; min-height: calc(100vh - 78px);
  /* Gri sütun ızgaranın ZEMİNİNE çiziliyor. Özet kutusu position:sticky
     olduğu için hücreyi doldurmuyor; zemini ögeye verirsek gri şerit sayfanın
     yarısında bitiyordu. */
  background: linear-gradient(to right,
    var(--char) 0, var(--char) 55%, var(--noir) 55%, var(--noir) 100%);
}
/* Form sağa, özet sola yaslı: iki blok ortadaki ayırıcıda buluşuyor.
   Sütun içinde ortalayınca form ile özet arasında kocaman boşluk kalıyordu. */
.odeme-body .co-fields {
  padding: 2.8rem clamp(1.5rem, 3vw, 3.5rem) 3rem clamp(1.2rem, 4vw, 3rem);
  max-width: 640px; width: 100%; margin: 0 0 0 auto;
}
.odeme-body .cart-summary {
  position: sticky; top: 0; align-self: start;
  background: transparent; border: 0; border-left: 1px solid var(--line);
  border-radius: 0; padding: 2.8rem clamp(1.2rem, 4vw, 3rem) 2.8rem clamp(1.5rem, 3vw, 3.5rem);
  max-width: 520px; width: 100%; margin: 0 auto 0 0;
  max-height: 100vh; overflow-y: auto;
}

.co-alt {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; justify-content: center;
  padding: 1.4rem 1rem 2rem; border-top: 1px solid var(--line-soft);
  font-size: 0.78rem; color: var(--muted); background: var(--char);
}
.co-alt a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.co-alt a:hover { color: var(--cream); }

/* Giriş/misafir seçim ekranı ortada dursun */
.odeme-body .co-gate { max-width: 640px; margin: 3rem auto; padding: 0 1.2rem; }

@media (max-width: 900px) {
  /* Tek sütunda ızgara hizası anlamsız: logo solda, sepet sağda */
  .co-bar-ic { display: flex; align-items: center; justify-content: space-between; }
  .co-bar-sol, .co-bar-sag { max-width: none; width: auto; margin: 0; padding: 1rem clamp(1rem, 4vw, 2rem); }
  .odeme-body .checkout-grid { grid-template-columns: 1fr; min-height: 0; background: none; }
  .odeme-body .co-fields { max-width: none; margin: 0; }
  .odeme-body .cart-summary {
    position: static; max-height: none; border-left: 0; border-top: 1px solid var(--line);
    background: var(--noir);
  }
}

/* ---------- Form doğrulama (alan altı kırmızı uyarı) ---------- */
input.hatali, select.hatali, textarea.hatali {
  border-color: var(--err-line) !important;
  background: rgba(192,39,29,0.03);
}
input.hatali:focus, select.hatali:focus, textarea.hatali:focus { border-color: var(--err-text) !important; }
/* Hatalı alanın etiketi de kırmızıya döner — hangi alan olduğu bir bakışta belli */
label:has(> input.hatali), label:has(> select.hatali), label:has(> textarea.hatali) { color: var(--err-text); }
.consent:has(input.hatali) { color: var(--err-text); }
/* Onay satırı flex; hata mesajı yanına değil ALTINA geçsin.
   Metin ise kutucuğun YANINDA kalmalı: flex-wrap gelince uzun metin komple
   alt satıra kaçıyordu, bu yüzden span sarmak yerine daralıyor. */
.consent { flex-wrap: wrap; }
.consent > span { flex: 1 1 0; min-width: 0; }
.consent .alan-hata { flex-basis: 100%; margin-left: 1.6rem; }
.consent input.hatali[type=checkbox] { outline: 1px solid var(--err-text); outline-offset: 2px; }

.alan-hata {
  display: flex; align-items: flex-start; gap: 0.4rem;
  margin-top: 0.4rem; font-size: 0.8rem; line-height: 1.5;
  letter-spacing: normal; text-transform: none; color: var(--err-text);
}
.alan-hata::before {
  content: "!";
  flex-shrink: 0; width: 14px; height: 14px; margin-top: 0.1rem;
  border: 1px solid currentColor; border-radius: 50%;
  font-size: 0.62rem; line-height: 12px; text-align: center; font-weight: 600;
}

/* ---------- Sözleşme onay kutuları ---------- */
/* .co-fields label / .auth-form label seçicileri (0,1,1) tek sınıflı .consent'i
   yeniyor: onay satırı sütuna diziliyor ve BÜYÜK HARFE dönüyordu. Alan etiketi
   değil cümle olduğu için burada !important şart — .pay-opt de aynı sebeple
   böyle yazılmış. */
.consent {
  display: flex !important; flex-direction: row !important;
  align-items: flex-start; gap: 0.65rem !important;
  margin: 0 0 0.9rem !important; padding: 0;
  font-size: 0.86rem !important; line-height: 1.6; letter-spacing: normal !important;
  text-transform: none !important; color: var(--cream-dim) !important; cursor: pointer;
}
.consent input[type=checkbox] {
  width: auto !important; margin: 0.2rem 0 0 !important; flex-shrink: 0;
  accent-color: var(--gold); cursor: pointer;
}
.consent a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.consent a:hover { color: var(--gold-light); }
.consent + .consent { margin-top: -0.2rem !important; }
.co-fields .consent { margin-top: 1.2rem !important; }

/* Onaylar ayrı ayrı verildiği için alt alta 2-3 satır oluyor; blok olarak
   gruplanınca form içinde tek bir "onay alanı" gibi okunuyor. */
.consent-grup { margin: 1.2rem 0 0.6rem; }
.consent-grup .consent:last-child { margin-bottom: 0 !important; }

/* Adet 1'ken "−" yerine çıkan silme düğmesi — kırmızı, niyeti belli olsun.
   Renk kuralı .cl-qty/.cd-adet ile birlikte yazıldı: ".cl-qty button" (0,1,1)
   tek sınıflı ".qty-sil"i (0,1,0) yeniyor ve simge gri kalıyordu. */
.qty-sil {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; cursor: pointer; padding: 0; line-height: 1;
}
.cart-line .qty-sil,
.cart-drawer .cd-satir .qty-sil { color: var(--err-text); width: 28px; height: 28px; }
.cart-line .qty-sil:hover,
.cart-drawer .cd-satir .qty-sil:hover { color: #8f1d16; }

/* ---------- Hesap: sipariş listesi ---------- */
.oc-arac { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; margin-bottom: 1.2rem; }
.oc-filtre { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.oc-chip {
  padding: 0.5rem 1rem; border: 1px solid var(--line); border-radius: 6px;
  background: var(--char); color: var(--cream-dim); font-family: var(--sans);
  font-size: 0.85rem; cursor: pointer; transition: border-color 0.18s, color 0.18s;
}
.oc-chip:hover { border-color: var(--gold); color: var(--cream); }
.oc-chip.on { border-color: var(--gold); color: var(--cream); font-weight: 500; }
.oc-ara {
  margin-left: auto; min-width: 220px; padding: 0.55rem 0.9rem;
  border: 1px solid var(--line); border-radius: 6px; background: var(--char);
  color: var(--cream); font-family: var(--sans); font-size: 0.9rem;
}
.oc-bos { margin-top: 1.2rem; }

/* Kartlar süzgeç satırıyla aynı genişlikte: eski tasarımdan kalan
   max-width:780px kuralı kartları dar bırakıyor, arama kutusuyla
   hizasızlık yaratıyordu (kullanıcı bildirdi). */
.order-cards { display: block; }
/* Durum ile tutar arasında nefes payı: auto sütunlar yan yana gelince
   "Beklemede" ile "2.490 ₺" birbirine yapışıyordu (kullanıcı bildirdi).
   Durum sütununa sabit bir alan verildi, aralık büyütüldü. */
.order-card {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(130px, auto) minmax(110px, auto) 16px;
  gap: 1.8rem; align-items: center; padding: 1.1rem 1.3rem;
  border: 1px solid var(--line); border-radius: 8px; background: var(--char);
  text-decoration: none; color: inherit; margin-bottom: 0.8rem;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.order-card:hover { border-color: var(--gold); box-shadow: var(--shadow-1); }
.oc-gorsel {
  display: block; width: 56px; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--img-bg); border-radius: 4px;
}
.oc-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oc-left { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.oc-no { font-size: 0.92rem; color: var(--cream-dim); }
.oc-no b { color: var(--cream); font-weight: 500; }
.oc-date { font-size: 0.8rem; color: var(--muted); }
.oc-status { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--cream-dim); white-space: nowrap; justify-content: flex-start; }
.oc-nokta { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.oc-status.st-pending .oc-nokta   { background: #8a6516; }
.oc-status.st-confirmed .oc-nokta { background: #2f5c96; }
.oc-status.st-shipped .oc-nokta   { background: #2f5c96; }
.oc-status.st-delivered .oc-nokta { background: #1f7a45; }
.oc-status.st-cancelled .oc-nokta { background: #c0271d; }
.oc-right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; white-space: nowrap; }
.oc-total { font-size: 1.02rem; color: var(--cream); }
.oc-pay { font-size: 0.8rem; color: var(--muted); }
.oc-arrow { color: var(--muted); font-size: 1.3rem; line-height: 1; }

/* ---------- Sipariş detayı ---------- */
.od-ust { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.8rem; }
.od-ust h1 { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0; }
.od-meta { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-bottom: 1.6rem; }
.od-meta span { display: flex; flex-direction: column; gap: 0.15rem; }
.od-meta small { font-size: 0.78rem; color: var(--muted); }
.od-meta b { font-size: 0.98rem; color: var(--cream); font-weight: 500; }

.od-ana {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  border: 1px solid var(--line); border-radius: 8px; background: var(--char); overflow: hidden;
}
.od-urunler { padding: 1.4rem; }
.od-akis { padding: 1.6rem 1.4rem; background: var(--noir); border-left: 1px solid var(--line); }
.od-adim { position: relative; display: flex; align-items: center; gap: 0.8rem; padding-bottom: 1.6rem; }
.od-adim:last-child { padding-bottom: 0; }
.od-adim::before {
  content: ""; position: absolute; left: 5px; top: 14px; bottom: 0; width: 1px; background: var(--line);
}
.od-adim:last-child::before { display: none; }
.od-nokta { width: 11px; height: 11px; border-radius: 50%; background: var(--line); flex-shrink: 0; position: relative; z-index: 1; }
.od-adim.tamam .od-nokta { background: #1f7a45; }
.od-adim.suan .od-nokta { background: #2f5c96; box-shadow: 0 0 0 3px rgba(47,92,150,0.18); }
.od-adim-ad { font-size: 0.9rem; color: var(--muted); }
.od-adim.tamam .od-adim-ad { color: var(--cream); }
.od-iptal { color: #c0271d; font-size: 0.92rem; margin: 0; }

.od-eylem { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: flex-end; margin: 1.2rem 0 2rem; }
.od-alt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.od-kart { border: 1px solid var(--line); border-radius: 8px; background: var(--char); padding: 1.4rem; }
.od-kart h3 { font-family: var(--serif); font-size: 1.15rem; margin: 0 0 1rem; }
.od-kart .od-h3-ara { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line-soft); }
.od-kart p { margin: 0 0 0.35rem; font-size: 0.92rem; }

.od-item-bilgi { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.od-line { color: var(--cream); }

@media (max-width: 900px) {
  .od-ana { grid-template-columns: 1fr; }
  .od-akis { border-left: 0; border-top: 1px solid var(--line); }
  .od-alt { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .order-card { grid-template-columns: 48px 1fr auto; gap: 0.9rem; row-gap: 0.6rem; }
  .oc-gorsel { width: 48px; }
  .oc-status { grid-column: 2 / -1; }
  .oc-right { grid-column: 2 / -1; align-items: flex-start; }
  .oc-arrow { display: none; }
  .oc-ara { margin-left: 0; width: 100%; }
}

/* Adres kartındaki düzenle / sil simgeleri */
.adr-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--line); border-radius: 5px; background: none;
  color: var(--cream-dim); cursor: pointer;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.adr-ikon:hover { color: var(--gold); border-color: var(--gold); background: var(--wash); }
.adr-ikon.sil:hover { color: var(--err-text); border-color: var(--err-line); }
.adr-ikon:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

/* Footer dil seçimi — üst bardan buraya taşındı */
.footer-langs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
  padding: 1.4rem 0 0; margin-top: 1.6rem; border-top: 1px solid var(--line-soft);
}
.footer-langs button {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.45rem 0.9rem; border: 1px solid var(--line); border-radius: 999px;
  background: none; color: var(--cream-dim); cursor: pointer;
  font-family: var(--sans); font-size: 0.82rem; transition: color 0.2s, border-color 0.2s;
}
.footer-langs button:hover { color: var(--cream); border-color: var(--gold); }
.footer-langs button.active { color: var(--cream); border-color: var(--gold); }
.footer-langs .flag { display: inline-flex; width: 18px; }
.footer-langs .flag svg, .footer-langs .flag img { width: 18px; height: auto; display: block; }

/* ---- Kabul edilen kart şemaları / güvenlik rozetleri ----
   Görseller PayTR'nin resmî SVG'leri, /assets/odeme/ altında yerel duruyor.
   Kutular BEYAZ: logolar beyaz zemin için çizilmiş, altbilginin #f7f7f7
   zemininde doğrudan dursalar kenarları eriyordu. Genişlik sabit DEĞİL —
   "GÜVENLİ ÖDE" rozeti ötekilerin iki katı uzunlukta, sabit kutu onu
   kırpardı; yükseklik ortak, hizayı o tutuyor. */
.footer-odeme {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 0.55rem; padding-top: 1.5rem;
}
.fo-kutu {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 0.75rem;
  background: var(--char); border: 1px solid var(--line); border-radius: 6px;
}
.fo-kutu img { display: block; }

/* ETBİS rozeti — ödeme logolarının altında, kendi satırında.
   Aynı satıra konmuyor: kare kod diğerlerinden üç kat uzun, şeridin
   hizasını bozuyordu. Kaynak görsel 273px; 68px'te basıldığı için
   retina ekranda da net ve kameraya okunacak kadar keskin kalıyor. */
.footer-etbis { display: flex; justify-content: center; padding-top: 1.1rem; }
.footer-etbis a {
  display: inline-flex; padding: 0.5rem;
  background: var(--char); border: 1px solid var(--line); border-radius: 6px;
  transition: border-color 0.25s var(--ease);
}
.footer-etbis a:hover { border-color: var(--gold); }
.footer-etbis img { display: block; }

@media (max-width: 640px) {
  /* Telefonda yedi kutu üç satıra yayılıyordu; biraz küçültünce ikiye iniyor. */
  .footer-odeme { gap: 0.4rem; }
  .fo-kutu { height: 34px; padding: 0 0.55rem; }
  .fo-kutu img { transform: scale(0.85); }
  .footer-etbis { padding-top: 0.9rem; }
}

/* ---------- Favoriler (kalp) ---------- */
.fav-toggle {
  position: absolute; top: 0.7rem; right: 0.7rem; z-index: 5;   /* .pf-img z-index:3 */
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--glass-solid); color: var(--cream-dim);
  cursor: pointer; transition: color 0.18s, border-color 0.18s, transform 0.18s;
}
.fav-toggle svg { width: 18px; height: 18px; }
.fav-toggle:hover { color: #c0271d; border-color: #eab5b1; transform: scale(1.06); }
.fav-toggle.on { color: #c0271d; border-color: #eab5b1; }
.fav-toggle.on svg { fill: #c0271d; }
.fav-toggle:disabled { opacity: 0.5; cursor: wait; }
.product-card { position: relative; }

/* Ürün detayındaki büyük kalp: sepete ekle düğmesinin yanında durur */
.fav-toggle.fav-buyuk {
  position: static; width: 48px; height: 48px; border-radius: 4px; flex-shrink: 0;
}
.fav-toggle.fav-buyuk svg { width: 20px; height: 20px; }

/* ---------- Hesabım > Kişisel Bilgilerim (tek sayfa, iki sütun) ---------- */
.acc-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.acc-sag { display: grid; gap: 1.4rem; }
.acc-kart { background: var(--char); border: 1px solid var(--line); border-radius: 8px; padding: 1.6rem; }
.acc-kart-baslik {
  font-family: var(--sans); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.02em;
  text-transform: none; color: var(--cream); margin: 0 0 1.2rem;
}
.acc-kart .acc-form { margin: 0; }
.acc-kart .btn { width: 100%; justify-content: center; margin-top: 0.4rem; }
.acc-dogum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.acc-onaylar {
  margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line-soft);
  font-size: 0.8rem; line-height: 1.7; color: var(--muted);
}
.acc-onaylar span { display: block; }
.acc-onaylar a { color: var(--cream-dim); text-decoration: underline; text-underline-offset: 2px; }
.acc-onaylar a:hover { color: var(--cream); }
@media (max-width: 900px) { .acc-2col { grid-template-columns: 1fr; } }

/* ---------- Sepet çekmecesi (yandan açılan panel) ---------- */
.cart-drawer { position: fixed; inset: 0; z-index: 2300; }
/* display kuralı olan bir kutuda [hidden] tek başına yetmiyor — sitede
   daha önce üç kez bu tuzağa düşüldü, kural baştan yazılı. */
.cart-drawer[hidden] { display: none; }
.cart-drawer .cd-perde {
  position: absolute; inset: 0; background: rgba(0,0,0,0.45);
  opacity: 0; transition: opacity 0.26s var(--ease);
}
.cart-drawer.acik .cd-perde { opacity: 1; }
.cart-drawer .cd-panel {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(420px, 100%); display: flex; flex-direction: column;
  background: var(--char); border-left: 1px solid var(--line);
  box-shadow: var(--shadow-3);
  transform: translateX(100%); transition: transform 0.26s var(--ease);
}
.cart-drawer.acik .cd-panel { transform: none; }
.cart-drawer .cd-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.cart-drawer .cd-baslik {
  margin: 0; font-family: var(--sans); font-size: 1rem; font-weight: 500;
  letter-spacing: 0.02em; text-transform: none; color: var(--cream);
}
.cart-drawer .cd-kapat {
  border: 0; background: none; cursor: pointer; padding: 0 0.2rem;
  font-size: 1.7rem; line-height: 1; color: var(--cream-dim);
}
.cart-drawer .cd-kapat:hover { color: var(--cream); }
.cart-drawer .cd-govde { flex: 1; overflow-y: auto; padding: 0.4rem 1.3rem; }
.cart-drawer .cd-bos { color: var(--cream-dim); text-align: center; padding: 3rem 0; }

.cart-drawer .cd-satir {
  display: grid; grid-template-columns: 72px 1fr auto 28px;
  gap: 0.9rem; align-items: center;
  padding: 1rem 0; border-bottom: 1px solid var(--line-soft);
}
.cart-drawer .cd-gorsel {
  display: block; width: 72px; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--img-bg); border-radius: 4px;
}
.cart-drawer .cd-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-drawer .cd-bilgi { min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.cart-drawer .cd-ad { color: var(--cream); text-decoration: none; font-size: 0.92rem; line-height: 1.4; }
.cart-drawer .cd-ad:hover { color: var(--gold); }
.cart-drawer .cd-olcu { color: var(--muted); font-size: 0.76rem; }
.cart-drawer .cd-fiyat { color: var(--cream); font-size: 0.92rem; margin-top: 0.15rem; }
.cart-drawer .cd-adet {
  display: inline-flex; align-items: center; gap: 0.1rem;
  border: 1px solid var(--line); border-radius: 4px;
}
.cart-drawer .cd-adet button {
  width: 30px; height: 32px; border: 0; background: none; cursor: pointer;
  color: var(--cream); font-size: 1rem; line-height: 1;
}
.cart-drawer .cd-adet button:disabled { opacity: 0.35; cursor: default; }
.cart-drawer .cd-adet span { min-width: 22px; text-align: center; font-size: 0.9rem; }
.cart-drawer .cd-sil {
  border: 0; background: none; cursor: pointer; color: var(--muted);
  font-size: 0.85rem; line-height: 1; padding: 0.3rem;
}
.cart-drawer .cd-sil:hover { color: var(--err-text); }

.cart-drawer .cd-alt {
  flex-shrink: 0; padding: 1.1rem 1.3rem 1.3rem;
  border-top: 1px solid var(--line); background: var(--noir);
}
.cart-drawer .cd-toplam { margin-bottom: 1rem; }
.cart-drawer .cd-dugmeler { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.cart-drawer .cd-dugmeler .btn { width: 100%; justify-content: center; }
.cart-drawer .cd-genis { width: 100%; justify-content: center; }

@media (max-width: 480px) {
  .cart-drawer .cd-panel { width: 100%; }
  .cart-drawer .cd-gorsel { width: 60px; }
  .cart-drawer .cd-satir { grid-template-columns: 60px 1fr auto 26px; }
}

/* ---------- Kokunu Bul sihirbazı ---------- */
.kb-sayfa { padding-bottom: 4rem; }
.kb-giris { max-width: 640px; margin: 2rem auto 3rem; text-align: center; }
.kb-giris h1 { margin: 0.5rem 0 0.8rem; }
.kb-lead { color: var(--cream-dim); font-size: 1rem; line-height: 1.7; margin: 0 0 1.8rem; }

.kb-adim { max-width: 720px; margin: 1.5rem auto 3rem; }
.kb-ust { margin-bottom: 1.6rem; }
.kb-sayac {
  display: block; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 0.6rem;
}
.kb-cubuk { height: 3px; background: var(--line-soft); border-radius: 2px; overflow: hidden; }
.kb-cubuk span { display: block; height: 100%; background: var(--gold); transition: width 0.35s var(--ease); }

.kb-soru {
  font-family: var(--serif); font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 600;
  color: var(--cream); margin: 0 0 0.4rem; line-height: 1.25;
}
.kb-ipucu { color: var(--muted); font-size: 0.82rem; margin: 0 0 1.4rem; }
.kb-soru + .kb-secenekler { margin-top: 1.4rem; }

.kb-secenekler { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
.kb-sec {
  min-height: 62px; padding: 1rem 1.2rem; text-align: left;
  background: var(--char); border: 1px solid var(--line); border-radius: 6px;
  color: var(--cream); font-family: var(--sans); font-size: 0.95rem; font-weight: 400;
  cursor: pointer; transition: border-color 0.18s, background 0.18s, transform 0.18s;
}
.kb-sec:hover { border-color: var(--gold); background: var(--wash); }
.kb-sec.on { border-color: var(--gold); background: var(--gold); color: var(--on-gold); }
.kb-sec:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.kb-any.on { color: var(--on-gold); }

.kb-alt { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.8rem; }
.kb-alt-orta { display: flex; justify-content: center; gap: 0.8rem; flex-wrap: wrap; margin-top: 2.5rem; }

/* ---- Masaüstü: sihirbazın alt/üst boşluğu eşit (kullanıcı isteği) ----
   Ölçüler ESKİSİ GİBİ; yalnız konum değişiyor. Soru + seçenekler ~210px yer
   tutuyor ve sayfanın üstüne asılı kalıp altında 400px'i aşan boşluk
   bırakıyordu. Bölüm ekran yüksekliğini doldurup içeriği dikeyde ortalıyor.
   SORU/GİRİŞ EKRANINA ÖZEL: :has() ile sınırlı — sonuç ekranı uzun olduğu
   için orada ortalama anlamsız, kural devreye girmiyor. */
/* Eşik YOK: "min-width: 480px" telefonu (375px) dışarıda bırakıyordu ve
   sihirbaz orada üste yaslı kalıyordu (kullanıcı bildirdi). Kural her
   genişlikte geçerli; min-height zaten ekrana göre hesaplanıyor. */
@media (min-width: 1px) {
  .kb-sayfa:has(.kb-adim), .kb-sayfa:has(.kb-giris) {
    display: flex; flex-direction: column;
    min-height: calc(100vh - var(--hdr));
    padding-top: calc(var(--hdr) + 2rem); padding-bottom: 4rem;
  }
  /* Ekmek kırıntısı KLASİK YERİNDE, en üstte kalıyor (kullanıcı isteği):
     bölümü komple ortalayınca o da sayfanın ortasına iniyordu. Ortalanan
     yalnız sihirbaz; kırıntı akışın başında duruyor. */
  .kb-sayfa:has(.kb-adim) > .container,
  .kb-sayfa:has(.kb-giris) > .container {
    flex: 1; width: 100%; display: flex; flex-direction: column; min-height: 0;
  }
  /* Dikey ortalama margin:auto ile — sihirbazı FLEX KAPSAYICI yapmak onu
     içeriğine büzüyordu (şerit 720 → 323px). Böyle blok kalıyor, genişliğini
     koruyor; boş alan üstüne ve altına eşit dağılıyor. */
  .kb-sayfa:has(.kb-adim) #scentWizard,
  .kb-sayfa:has(.kb-giris) #scentWizard { margin-top: auto; margin-bottom: auto; }
}

/* Sonuç */
.kb-sonuc-ust { text-align: center; margin: 1rem 0 2rem; }
.kb-kahraman {
  display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 2.5rem;
  align-items: center; background: var(--char); border: 1px solid var(--line);
  border-radius: 8px; padding: 2rem; margin-bottom: 3.5rem;
}
/* .card-visual da veriliyor (oran + konumlandırma): .pf-img position:absolute,
   kapsayıcı konumlandırılmazsa görsel sayfa boyunca yayılıyor. */
.kb-gorsel { background: var(--img-bg); border-radius: 6px; min-width: 0; }
.kb-bilgi { min-width: 0; }
.kb-oran {
  display: inline-block; margin-bottom: 0.8rem; padding: 0.35rem 0.8rem;
  background: var(--gold); color: var(--on-gold); border-radius: 999px;
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.kb-bilgi h2 { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0.3rem 0 0.4rem; }
.kb-bilgi h2 a { color: var(--cream); text-decoration: none; }
.kb-bilgi h2 a:hover { color: var(--gold); }
.kb-tagline { color: var(--cream-dim); font-style: italic; margin: 0 0 1.2rem; }
.kb-neden { border-top: 1px solid var(--line-soft); padding-top: 1rem; margin-bottom: 1.4rem; }
.kb-neden h3 {
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 0.6rem;
}
.kb-neden ul { list-style: none; padding: 0; margin: 0; }
.kb-neden li {
  position: relative; padding-left: 1.3rem; margin-bottom: 0.35rem;
  color: var(--cream-dim); font-size: 0.92rem;
}
.kb-neden li::before { content: "✦"; position: absolute; left: 0; color: var(--gold); font-size: 0.75rem; top: 0.15rem; }
.kb-kahraman-alt { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.kb-fiyat { font-size: 1.25rem; color: var(--cream); }
.kb-baslik {
  text-align: center; font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 1.8rem;
}
.kb-bos { text-align: center; margin: 3rem auto; max-width: 560px; }
.kb-bos h2 { font-family: var(--serif); font-size: 1.4rem; color: var(--cream); }

@media (max-width: 768px) {
  .kb-secenekler { grid-template-columns: 1fr; }
  .kb-kahraman { grid-template-columns: 1fr; gap: 1.6rem; padding: 1.2rem; }
  .kb-alt-orta .btn { width: 100%; justify-content: center; }
}

/* ---------- Sözleşme kutusu (küçük pencere) ----------
   Bağlantı sayfayı terk etmesin diye metin burada açılıyor. */
.yasal-modal {
  position: fixed; inset: 0; z-index: 2200;
  display: flex; align-items: center; justify-content: center;
  padding: 1.2rem;
  background: rgba(0,0,0,0.55);
  -webkit-overflow-scrolling: touch;
}
/* [hidden] tek başına yetmez: yukarıdaki display:flex tarayıcı kuralını ezer. */
.yasal-modal[hidden] { display: none; }
.yasal-modal .ym-panel {
  display: flex; flex-direction: column;
  width: 100%; max-width: 720px; max-height: 84vh;
  background: var(--char); border: 1px solid var(--line);
  box-shadow: var(--shadow-3);
}
.yasal-modal .ym-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.4rem; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.yasal-modal .ym-title {
  margin: 0; font-family: var(--sans); font-size: 1.02rem; font-weight: 500;
  letter-spacing: 0.01em; text-transform: none; color: var(--cream);
}
.yasal-modal .ym-close {
  border: 0; background: none; cursor: pointer; padding: 0 0.2rem;
  font-size: 1.7rem; line-height: 1; color: var(--cream-dim);
}
.yasal-modal .ym-close:hover { color: var(--cream); }
.yasal-modal .ym-body {
  overflow-y: auto; padding: 1.4rem;
  font-size: 0.9rem; line-height: 1.75; color: var(--cream-dim);
}
.yasal-modal .ym-body:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.yasal-modal .ym-body h1,
.yasal-modal .ym-body h2,
.yasal-modal .ym-body h3 {
  font-family: var(--sans); font-size: 0.95rem; font-weight: 600;
  letter-spacing: 0.01em; text-transform: none;
  color: var(--cream); margin: 1.5rem 0 0.5rem;
}
.yasal-modal .ym-body > :first-child { margin-top: 0; }
.yasal-modal .ym-body p, .yasal-modal .ym-body li { margin: 0 0 0.7rem; }
.yasal-modal .ym-body ul, .yasal-modal .ym-body ol { padding-left: 1.2rem; margin: 0 0 0.9rem; }
.yasal-modal .ym-body a { color: var(--gold); text-decoration: underline; }
.yasal-modal .ym-body table { width: 100%; border-collapse: collapse; }
.yasal-modal .ym-body td, .yasal-modal .ym-body th {
  border: 1px solid var(--line); padding: 0.4rem 0.6rem; text-align: left;
}
@media (max-width: 768px) {
  .yasal-modal { padding: 0.6rem; align-items: flex-end; }
  .yasal-modal .ym-panel { max-height: 88vh; }
  .yasal-modal .ym-bar { padding: 0.9rem 1rem; }
  .yasal-modal .ym-title { font-size: 0.95rem; }
  .yasal-modal .ym-body { padding: 1rem; }
}

/* Adreslerim: mesaj/kart listesi ile "Yeni Adres Ekle" butonu arasındaki boşluk
   (ikisi de sıfır margin'liydi, dibine yapışıyordu). */
#addrList { margin-bottom: 1.5rem; }
#addrList:empty { margin-bottom: 0; }
#addrList > .muted { margin: 0; }
#addrList .addr-card:last-child, #addrList .addr-form:last-child { margin-bottom: 0; }
.ugc-addr-hint { margin: -0.5rem 0 1rem; font-size: 0.8rem; color: var(--gold); }

/* ---------- Hesap formları: iki sütunlu düzen ----------
   .grid2 admin panelinde tanımlıydı ama sitede yoktu; bu yüzden profil, şifre
   ve adres formlarındaki alanlar tek sütun hâlinde sayfa boyunca uzuyordu. */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }

/* Adres formu: hesap sayfası genişleyince 620px'lik kutu içeride kaybolmuştu.
   Sınır büyütüldü ama tamamen kaldırılmadı — tek satırlık alanlar 1200px'e
   yayılınca okunmuyor. */
.addr-form { max-width: 860px; }
.addr-form textarea { resize: vertical; line-height: 1.5; }

/* "Varsayılan yap" satırı — .auth-form label (0,1,1) benim kuralımı (0,1,0)
   ezdiği için büyük harf ve dikey kalıyordu; özgüllüğü artırıldı. */
.auth-form .addr-check,
.addr-form .addr-check {
  display: flex; flex-direction: row; align-items: center; gap: 0.55rem;
  margin: 0.4rem 0 0; font-size: 0.88rem; letter-spacing: normal;
  text-transform: none; color: var(--cream-dim); cursor: pointer;
}
.auth-form .addr-check input, .addr-form .addr-check input {
  width: auto; margin: 0; accent-color: var(--gold); cursor: pointer;
}


/* Künye — iletişim sayfasında ticaret unvanı / vergi / MERSİS satırları.
   Mesafeli satış mevzuatı ve sanal POS başvuruları bunların sitede
   görünmesini istiyor. Alanlar panelden (Ayarlar > Yasal Bilgiler) gelir. */
.contact-legal {
  margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 0.5rem;
}
.contact-legal div { display: flex; gap: 0.8rem; flex-wrap: wrap; font-size: 0.86rem; }
.contact-legal span { color: var(--muted); min-width: 150px; letter-spacing: 0.04em; }
.contact-legal strong { color: var(--cream-dim); font-weight: 400; }
@media (max-width: 640px) {
  .contact-legal span { min-width: 0; }
  .contact-legal div { flex-direction: column; gap: 0.1rem; }
}

/* Sayfa kurulamadığında (bozuk önbellek, kesilen istek) sessiz boş ekran yerine
   görünen uyarı. boot() içindeki sayfaBosKaldiMi() basar. */
.boot-hata {
  margin: 4rem auto; max-width: 420px; text-align: center;
  border: 1px solid var(--line); border-radius: 8px; padding: 2rem 1.5rem;
  background: var(--char);
}
.boot-hata p { margin-bottom: 1rem; color: var(--cream); }
.boot-hata button {
  background: var(--grad-gold); color: var(--on-gold); border: 0; border-radius: 3px;
  padding: 0.75rem 1.6rem; font-family: var(--sans); font-size: 0.78rem;
  letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
}

/* ============================================================
   iOS: form alanına dokununca sayfa yakınlaşmasın
   ------------------------------------------------------------
   iOS Safari, yazı boyutu 16px'in ALTINDA olan bir alana odaklanınca
   sayfayı otomatik yakınlaştırıyor. Sitedeki alanlar 13,3–15,2px olduğu
   için sepette indirim kutusuna dokunan kullanıcıda sayfa büyüyüp
   kayıyordu (gerçek iPhone'da doğrulandı). Dokunmatik boyutta tüm form
   alanları 16px'e sabitleniyor; masaüstü görünümü değişmiyor.

   !important şart: .cs-coupon input gibi sınıf seçicileri (0,2,0) bu
   kuraldan güçlü, yoksa ezilir.
   ============================================================ */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea { font-size: 16px !important; }
}

/* Kupon kutusu kapalı başlar; "İndirim kodu gir" ile açılır (bkz. shop.js).
   Sepeti sadeleştiriyor ve kimse istemeden alana dokunmuyor. */
.cs-coupon-kutu { margin: 0 0 1.1rem; }
.cs-coupon-ac {
  display: flex; align-items: center; gap: 0.5rem; width: 100%;
  background: none; border: 1px dashed var(--line); border-radius: 4px;
  padding: 0.75rem 1rem; cursor: pointer;
  font-family: var(--sans); font-size: 0.84rem; color: var(--cream-dim);
  transition: border-color 0.2s, color 0.2s;
}
.cs-coupon-ac:hover { border-color: var(--gold); color: var(--cream); }
.cs-coupon-arti { font-size: 1rem; line-height: 1; transition: transform 0.2s; }
.cs-coupon-ac.acik .cs-coupon-arti { transform: rotate(45deg); }   /* + → × */
.cs-coupon-kutu .cs-coupon { margin: 0.7rem 0 0; }
/* .cs-coupon display:flex taşıdığı için tarayıcının [hidden] varsayılanını
   eziyordu: kutu "gizli" olmasına rağmen ekranda duruyordu. Panelde de aynı
   tuzağa düşülmüştü (label{display:flex}). */
.cs-coupon[hidden] { display: none; }

/* ============================================================
   TELEFONDA ÜST BOŞLUK
   Dolgular masaüstündeki 95px'lik başlığa göre ayarlıydı; telefonda başlığın
   alt kenarı 134px'te bitiyor ve altında 65px'lik boş bir bant kalıyordu
   (kullanıcı bildirdi). Blok dosyanın SONUNDA olmak zorunda: .pd-wrap'in
   kendi "padding: 10rem 0 5rem" kısayolu çok daha aşağıda tanımlı ve eşit
   özgüllükte olduğu için önce yazılan kuralı eziyordu.
   ============================================================ */
@media (max-width: 640px) {
  /* Işık kutusu telefonda ekranı doldursun: 2rem dolgu + 92vw sınırı
     görseli 311px'e düşürüyordu, sayfadaki 263px'e göre neredeyse fark yok
     (kullanıcı "o kadar da büyük göstermiyor" dedi). */
  .lightbox { padding: 0.5rem; }
  .lb-viewport { max-width: 100vw; height: 92vh; }

  .pd-wrap { padding-top: 7.5rem; }
  .page-hero { padding-top: 8.5rem; padding-bottom: 2.5rem; }
  .page-hero-shop { padding-top: 7.5rem; }
  .shop-page { padding-top: 7.5rem; }
}