/* ============================================================
   escMedya Teması — çekirdek

   KURAL 1: Bu dosyada tek bir !important yok.
   KURAL 2: Sektör uyarlaması = aşağıdaki değişkenleri değiştirmek.
            Hiçbir kural ezilmez, hiçbir seçici çoğaltılmaz.
   KURAL 3: HER SEÇİCİ .esc- ÖNEKLİ BİR SINIFTAN BAŞLAR.
            Neden: tema.css, ecomus bundle'ının ÜSTÜNE yükleniyor. Ürün detay,
            sepet ve ödeme sayfaları henüz temaya açılmadığı için (bkz.
            TEMA2_DEVIR.md Faz 1.2/1.3) o sayfalar hâlâ bootstrap + ecomus
            markup'ıyla çalışıyor. Çıplak eleman seçicisi (button, a, ul, h2)
            yazarsak o sayfaları bozarız. Bu dosya SADECE ekler, hiçbir şeyi
            geri almaz. Tek istisna: .esc-tema alt ağacı — orası %100 escMedya
            markup'ı, orada çıplak seçici güvenli.
   ============================================================ */

/* ---------- 1. DEĞİŞKENLER ---------- */
:root{
  /* Renk — sektör uyarlaması yalnızca burayı değiştirir */
  --esc-zemin:        #FAF8F5;
  --esc-zemin-alt:    #F1ECE4;
  --esc-metin:        #17150F;
  --esc-metin-soluk:  #7C7368;
  --esc-cizgi:        #E2DAD0;
  --esc-cizgi-guclu:  #17150F;
  --esc-vurgu:        #A8432A;
  --esc-vurgu-metin:  #FFFFFF;
  --esc-indirim:      #A8432A;
  --esc-stok:         #2F6B4F;

  /* Biçim — keskin köşe escMedya imzası */
  --esc-kose: 0px;
  --esc-kalinlik: 1px;

  /* Tipografi */
  --esc-f-baslik: "Fraunces", Georgia, serif;
  --esc-f-govde:  "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --esc-t-dev:    clamp(2.4rem, 1.1rem + 4.2vw, 4.75rem);
  --esc-t-buyuk:  clamp(1.75rem, 1.1rem + 2vw, 2.75rem);
  --esc-t-orta:   clamp(1.125rem, .95rem + .6vw, 1.5rem);
  --esc-t-govde:  clamp(.9375rem, .9rem + .15vw, 1.0625rem);
  --esc-t-kucuk:  .8125rem;
  --esc-t-mini:   .6875rem;
  --esc-iz-mini:  .14em;

  /* Ritim */
  --esc-b1: .375rem;  --esc-b2: .75rem;  --esc-b3: 1.25rem;
  --esc-b4: 2rem;     --esc-b5: 3rem;    --esc-b6: 4.5rem;
  --esc-b7: clamp(3.5rem, 2rem + 5vw, 7rem);
  --esc-kenar: clamp(1.125rem, 3.5vw, 3.5rem);
  --esc-genislik: 1560px;

  /* Hareket */
  --esc-gecis: 240ms cubic-bezier(.22,.61,.36,1);

  /* Görsel oranları — kaymayı (CLS) sıfırlayan tek şey */
  --esc-oran-urun: 3/4;
  --esc-oran-kategori: 4/5;
  --esc-oran-hero: 16/10;
}

/* Koyu mod — ayrı CSS değil, sadece değer takası */
[data-esc-mod="koyu"]{
  --esc-zemin:       #131210;
  --esc-zemin-alt:   #1D1B18;
  --esc-metin:       #F2EEE7;
  --esc-metin-soluk: #9A9186;
  --esc-cizgi:       #302C27;
  --esc-cizgi-guclu: #F2EEE7;
}

/* Sektör paletleri — aynı mantık, birkaç değer.
   Sektör kodu Siteler.SektorKodu'ndan geliyor; eşleşme yoksa varsayılan palet. */
[data-esc-sektor="kuyum"],[data-esc-sektor="taki"]{ --esc-vurgu:#8A6D2F; --esc-zemin:#FBF9F4; --esc-zemin-alt:#F0E9DC; --esc-cizgi:#E3D9C4; --esc-indirim:#8A6D2F; }
[data-esc-sektor="bebek"]{ --esc-vurgu:#C4677F; --esc-zemin:#FDFBFA; --esc-zemin-alt:#F6EDEF; --esc-cizgi:#EDDFE2; --esc-indirim:#C4677F; }
[data-esc-sektor="elektronik"],[data-esc-sektor="teknoloji"]{ --esc-vurgu:#2B5FA8; --esc-zemin:#FAFBFC; --esc-zemin-alt:#EDF0F4; --esc-cizgi:#D9DFE7; --esc-indirim:#2B5FA8; --esc-f-baslik:"Manrope",system-ui,sans-serif; }
[data-esc-sektor="gida"],[data-esc-sektor="organik"]{ --esc-vurgu:#4C6B3C; --esc-zemin:#FBFAF6; --esc-zemin-alt:#EEF0E7; --esc-cizgi:#DCE0D0; --esc-indirim:#4C6B3C; }
[data-esc-sektor="kuyum"][data-esc-mod="koyu"],[data-esc-sektor="taki"][data-esc-mod="koyu"]{ --esc-zemin:#141210; --esc-zemin-alt:#1E1B16; --esc-cizgi:#332D22; }
[data-esc-sektor="bebek"][data-esc-mod="koyu"]{ --esc-zemin:#151112; --esc-zemin-alt:#1F1A1C; --esc-cizgi:#332A2D; }
[data-esc-sektor="elektronik"][data-esc-mod="koyu"],[data-esc-sektor="teknoloji"][data-esc-mod="koyu"]{ --esc-zemin:#0F1215; --esc-zemin-alt:#171B20; --esc-cizgi:#262C33; }

/* ---------- 2. GÖVDE ---------- */
/* Yalnız renk ve yazı tipi. Kutu modeli, kenar boşluğu, eleman sıfırlaması YOK —
   bu sınıf ecomus markup'ı basan sayfalarda da <body> üzerinde duruyor. */
.esc-govde{
  margin:0;
  background:var(--esc-zemin); color:var(--esc-metin);
  font-family:var(--esc-f-govde); font-size:var(--esc-t-govde);
  font-weight:450; -webkit-font-smoothing:antialiased;
}

/* .esc-tema = %100 escMedya markup'ı olan alt ağaç. Burada çıplak seçici güvenli. */
.esc-tema{ line-height:1.6 }
.esc-tema *,.esc-tema *::before,.esc-tema *::after{ box-sizing:border-box }
.esc-tema img{ display:block; max-width:100%; height:auto }
.esc-tema a{ color:inherit; text-decoration:none }
.esc-tema button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
.esc-tema h1,.esc-tema h2,.esc-tema h3,.esc-tema h4{
  margin:0; font-family:var(--esc-f-baslik); font-weight:500;
  line-height:1.08; letter-spacing:-.015em;
}
.esc-tema p{ margin:0 }
.esc-tema ul{ list-style:none; margin:0; padding:0 }
.esc-tema blockquote,.esc-tema figure{ margin:0 }

/* ---------- 3. YARDIMCILAR ---------- */
.esc-kap{ width:100%; max-width:var(--esc-genislik); margin-inline:auto; padding-inline:var(--esc-kenar) }
.esc-bolum{ padding-block:var(--esc-b7) }
.esc-bolum--dar{ padding-block:var(--esc-b6) }

/* Görsel çerçevesi — ORAN KİLİTLİ. Kayma buradan engellenir. */
.esc-gorsel{ position:relative; overflow:hidden; background:var(--esc-zemin-alt);
  aspect-ratio:var(--esc-oran,1); display:block }
.esc-gorsel > img{ width:100%; height:100%; object-fit:cover;
  transition:transform 700ms cubic-bezier(.22,.61,.36,1) }

/* Bölüm başlığı */
.esc-baslik-satir{ display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--esc-b3); margin-bottom:var(--esc-b5); flex-wrap:wrap }
.esc-ustyazi{ display:block; font-size:var(--esc-t-mini); letter-spacing:var(--esc-iz-mini);
  text-transform:uppercase; color:var(--esc-vurgu); font-weight:700; margin-bottom:var(--esc-b2) }
.esc-baslik{ font-size:var(--esc-t-buyuk) }
.esc-baglanti{ font-size:var(--esc-t-kucuk); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; border-bottom:1px solid var(--esc-cizgi-guclu);
  padding-bottom:2px; white-space:nowrap }

/* Butonlar */
.esc-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.9375rem 1.75rem; border-radius:var(--esc-kose); font-size:var(--esc-t-kucuk);
  font-weight:800; letter-spacing:.08em; text-transform:uppercase; text-align:center;
  border:1px solid transparent; cursor:pointer; font-family:var(--esc-f-govde);
  transition:background var(--esc-gecis),color var(--esc-gecis),border-color var(--esc-gecis) }
/* .esc-tema öneki ZORUNLU: yukarıdaki `.esc-tema a{color:inherit}` sıfırlaması
   (0-1-1) tek sınıflı bir kuraldan (0-1-0) daha güçlü. Öneksiz yazıldığında
   <a class="esc-btn esc-btn--dolu"> koyu zemin üstünde koyu yazı alıyordu:
   buton içi boş siyah bir kutu gibi görünüyordu. */
.esc-tema .esc-btn--dolu{ background:var(--esc-cizgi-guclu); color:var(--esc-zemin) }
.esc-tema .esc-btn--dolu:hover{ background:var(--esc-vurgu); color:var(--esc-vurgu-metin) }
.esc-tema .esc-btn--cizgi{ border-color:currentColor }
.esc-tema .esc-btn--cizgi:hover{ background:var(--esc-cizgi-guclu); color:var(--esc-zemin);
  border-color:var(--esc-cizgi-guclu) }
.esc-btn--tam{ width:100% }

/* Ekran okuyucuya görünür, göze görünmez */
.esc-gizli{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }

/* ---------- 4. ÜST ŞERİT ---------- */
.esc-ustserit{ background:var(--esc-cizgi-guclu); color:var(--esc-zemin);
  font-size:var(--esc-t-mini); letter-spacing:var(--esc-iz-mini);
  text-transform:uppercase; font-weight:700 }
.esc-ustserit .esc-kap{ display:flex; align-items:center; justify-content:space-between;
  gap:var(--esc-b3); min-height:38px }
.esc-ustserit__yan{ display:flex; gap:var(--esc-b3); align-items:center; opacity:.75 }
.esc-ustserit__yan a:hover{ opacity:1 }
.esc-ustserit__orta{ text-align:center }
.esc-ustserit select{ background:transparent; color:inherit; border:0; font:inherit;
  font-size:var(--esc-t-mini); text-transform:uppercase; cursor:pointer }
.esc-ustserit select option{ color:#17150F }
@media (max-width:860px){
  .esc-ustserit__yan{ display:none }
  .esc-ustserit .esc-kap{ justify-content:center }
  /* Telefonda tek mesaj, tek satır; sığmazsa üç nokta */
  .esc-ustserit__orta{ min-width:0; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  .esc-ustserit__ayrac,
  .esc-ustserit__mesaj:not(:first-child){ display:none }
}

/* ---------- 5. HEADER ---------- */
.esc-header{ position:sticky; top:0; z-index:60; background:var(--esc-zemin);
  border-bottom:var(--esc-kalinlik) solid var(--esc-cizgi) }
.esc-header__ic{ display:flex; align-items:center; gap:var(--esc-b4); min-height:76px }
.esc-logo{ font-family:var(--esc-f-baslik); font-size:1.5rem; letter-spacing:-.03em;
  white-space:nowrap; display:flex; align-items:center }
.esc-logo img{ max-height:46px; width:auto }

.esc-menu{ display:flex; gap:var(--esc-b4); align-items:center }
/* Panel header genişliğine hizalansın diye öğe konumlandırılmaz; hizalayan
   kap .esc-header (sticky olduğu için konumlanmış sayılır). Öğeye
   position:relative verilirse panel sağdaki öğelerde ekrandan taşar. */
.esc-menu > li{ position:static }
.esc-menu > li > a{ display:flex; align-items:center; gap:.375rem; min-height:76px;
  font-size:var(--esc-t-kucuk); font-weight:700; letter-spacing:.05em;
  border-bottom:2px solid transparent;
  transition:border-color var(--esc-gecis),color var(--esc-gecis) }
.esc-menu > li:hover > a,
.esc-menu > li:focus-within > a{ color:var(--esc-vurgu); border-bottom-color:var(--esc-vurgu) }
.esc-menu .esc-ok{ width:7px; height:7px; border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); opacity:.5 }

/* Menü yazı biçimi — tema.menu_buyukharf. Varsayılan: yazıldığı gibi. */
[data-esc-menuyazi="uppercase"] .esc-menu > li > a{ text-transform:uppercase; font-size:12px; font-weight:800 }
[data-esc-menuyazi="uppercase1"] .esc-menu > li > a{ text-transform:uppercase; font-size:15px; font-weight:500; letter-spacing:.1em }

.esc-ikonlar{ display:flex; align-items:center; gap:var(--esc-b1); margin-inline-start:auto }

/* Dil + para birimi (_DilParaSecici): header'da yalın metin, mobil menüde tam genişlik.
   Şeffaf butik header'da renk üstteki metinden gelir (inherit). */
.esc-dilpara{ display:flex; align-items:center; gap:.25rem }
.esc-dilpara select{ appearance:none; -webkit-appearance:none; background:transparent; color:inherit;
  border:0; font:inherit; font-size:var(--esc-t-mini); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:.375rem .25rem; cursor:pointer }
.esc-dilpara select option{ color:#17150F; text-transform:none }
.esc-dilpara--header{ margin-inline-end:var(--esc-b1) }
@media (max-width:980px){ .esc-dilpara--header{ display:none } }
.esc-dilpara--mobil{ gap:var(--esc-b2); margin-top:var(--esc-b4); padding-top:var(--esc-b3);
  border-top:1px solid var(--esc-cizgi) }
.esc-dilpara--mobil .esc-dilpara__kutu{ flex:1 }
.esc-dilpara--mobil select{ width:100%; padding:.75rem; border:1px solid var(--esc-cizgi);
  font-size:var(--esc-t-kucuk); text-transform:none; letter-spacing:0 }
.esc-ikon{ position:relative; display:grid; place-items:center; width:42px; height:42px;
  transition:color var(--esc-gecis) }
.esc-ikon:hover{ color:var(--esc-vurgu) }
.esc-ikon svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5 }
.esc-rozet{ position:absolute; top:3px; inset-inline-end:1px; min-width:17px; height:17px;
  padding:0 4px; display:grid; place-items:center; background:var(--esc-vurgu);
  color:var(--esc-vurgu-metin); font-size:10px; font-weight:800;
  border-radius:var(--esc-kose); line-height:1 }

/* Mega panel */
.esc-mega{ position:absolute; inset-inline:0; top:100%; background:var(--esc-zemin);
  border-bottom:var(--esc-kalinlik) solid var(--esc-cizgi);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity var(--esc-gecis),visibility var(--esc-gecis),transform var(--esc-gecis) }
.esc-menu > li:hover .esc-mega,
.esc-menu > li:focus-within .esc-mega{ opacity:1; visibility:visible; transform:none }
.esc-mega__ic{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--esc-b4);
  max-width:var(--esc-genislik); margin-inline:auto; padding:var(--esc-b5) var(--esc-kenar) }
.esc-mega h4{ font-family:var(--esc-f-govde); font-size:var(--esc-t-mini);
  letter-spacing:var(--esc-iz-mini); text-transform:uppercase;
  color:var(--esc-metin-soluk); margin-bottom:var(--esc-b3); font-weight:800 }
.esc-mega ul{ display:grid; gap:.625rem }
.esc-mega a{ font-size:var(--esc-t-kucuk); transition:color var(--esc-gecis) }
.esc-mega a:hover{ color:var(--esc-vurgu) }
.esc-mega__hepsi{ grid-column:1/-1; border-top:1px solid var(--esc-cizgi);
  padding-top:var(--esc-b3); font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; font-size:var(--esc-t-mini) }
/* Alt kırılımı olmayan menüde geniş panel boşuna 1560px'e yayılıyordu —
   dar dikey listeye iner. */
.esc-mega--kompakt .esc-mega__ic{ grid-template-columns:1fr; max-width:280px; margin-inline:0 }
@media (max-width:1300px){ .esc-mega__ic{ grid-template-columns:repeat(3,1fr) } }

/* --- ARAMA — HER MENÜ TİPİNDE ERİŞİLEBİLİR ---
   Sefa'nın notu: "sade" ve "katalog" menülerinde arama hiç yoktu, yalnız
   "market" tipinde kutu vardı. Aramayı bulamamak satın alma yolunu kesiyor.
   Çözüm: market'te AÇIK kutu, diğer her tipte ikon (panel açar). */
.esc-arama{ flex:1; display:flex; border:1.5px solid var(--esc-cizgi-guclu);
  border-radius:var(--esc-kose); max-width:660px; background:var(--esc-zemin) }
.esc-arama select{ border:0; background:var(--esc-zemin-alt); color:var(--esc-metin);
  padding:0 .875rem; font:inherit; font-size:var(--esc-t-kucuk); font-weight:700;
  border-inline-end:1px solid var(--esc-cizgi) }
.esc-arama input{ flex:1; border:0; background:none; color:var(--esc-metin);
  padding:.8125rem .875rem; font:inherit; min-width:0 }
.esc-arama input:focus{ outline:none }
.esc-arama button{ padding-inline:1.25rem; background:var(--esc-cizgi-guclu); color:var(--esc-zemin) }
.esc-arama button svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2 }

/* Kategori şeridi — "market" menü tipinde header altında */
.esc-katserit{ border-top:var(--esc-kalinlik) solid var(--esc-cizgi) }
.esc-katserit ul{ display:flex; gap:var(--esc-b4); overflow-x:auto;
  scrollbar-width:none; min-height:48px; align-items:center }
.esc-katserit ul::-webkit-scrollbar{ display:none }
.esc-katserit a{ font-size:var(--esc-t-kucuk); font-weight:700; white-space:nowrap;
  transition:color var(--esc-gecis) }
.esc-katserit a:hover{ color:var(--esc-vurgu) }

/* Menü tipi anahtarları — görünürlük TEK YERDEN yönetilir */
[data-esc-menu="minimal"] .esc-menu{ margin-inline:auto }
[data-esc-menu="minimal"] .esc-arama,
[data-esc-menu="book-store"] .esc-arama,
[data-esc-menu="default"] .esc-arama,
[data-esc-menu="minimal"] .esc-katserit,
[data-esc-menu="book-store"] .esc-katserit,
[data-esc-menu="default"] .esc-katserit{ display:none }
[data-esc-menu="style-4"] .esc-menu{ display:none }
[data-esc-menu="style-4"] .esc-aramaikon{ display:none }

.esc-mobilac{ display:none; width:42px; height:42px; place-items:center }
.esc-mobilac span{ display:block; width:20px; height:1.5px; background:currentColor;
  box-shadow:0 6px currentColor,0 -6px currentColor }
@media (max-width:1100px){
  .esc-menu, .esc-katserit{ display:none }
  .esc-arama select{ display:none }
  .esc-mobilac{ display:grid }
  .esc-header__ic{ min-height:64px; gap:var(--esc-b2) }
  [data-esc-menu="minimal"] .esc-logo{ margin-inline:auto }
  /* Market tipinde arama kutusu ikinci satıra iner — 360px'te logoyu eziyordu */
  [data-esc-menu="style-4"] .esc-header__ic{ flex-wrap:wrap; padding-bottom:var(--esc-b2) }
  [data-esc-menu="style-4"] .esc-arama{ order:5; flex-basis:100%; max-width:none }
}

/* ---------- 6. MOBİL MENÜ + ARAMA PANELİ ---------- */
.esc-panel{ position:fixed; inset:0; z-index:120; visibility:hidden; pointer-events:none }
.esc-panel[data-acik]{ visibility:visible; pointer-events:auto }
.esc-panel__perde{ position:absolute; inset:0; background:rgba(10,9,7,.5); opacity:0;
  transition:opacity var(--esc-gecis) }
.esc-panel[data-acik] .esc-panel__perde{ opacity:1 }
.esc-panel__kutu{ position:absolute; inset-block:0; inset-inline-start:0; width:min(360px,88vw);
  background:var(--esc-zemin); display:flex; flex-direction:column;
  transform:translateX(-100%); transition:transform var(--esc-gecis) }
.esc-panel[data-acik] .esc-panel__kutu{ transform:none }
.esc-panel--ust .esc-panel__kutu{ inset:0 0 auto 0; width:auto; transform:translateY(-100%) }
.esc-panel--sag .esc-panel__kutu{ inset-inline:auto 0; transform:translateX(100%) }
.esc-panel__bas{ display:flex; align-items:center; justify-content:space-between;
  gap:var(--esc-b3); padding:var(--esc-b3) var(--esc-b4);
  border-bottom:var(--esc-kalinlik) solid var(--esc-cizgi) }
.esc-panel__bas h3{ font-size:var(--esc-t-orta) }
.esc-panel__kapat{ width:36px; height:36px; display:grid; place-items:center;
  border:1px solid var(--esc-cizgi) }
.esc-panel__kapat svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8 }
.esc-panel__ic{ flex:1; overflow-y:auto; padding:var(--esc-b3) var(--esc-b4) var(--esc-b6) }

.esc-mobilmenu li{ border-bottom:1px solid var(--esc-cizgi) }
.esc-mobilmenu > li > a,
.esc-mobilmenu__ac{ display:flex; align-items:center; justify-content:space-between;
  width:100%; gap:var(--esc-b2); padding-block:.9375rem; font-size:var(--esc-t-govde);
  font-weight:700; text-align:start }
.esc-mobilmenu__alt{ display:none; padding-inline-start:var(--esc-b3);
  padding-bottom:var(--esc-b2) }
.esc-mobilmenu__alt li{ border:0 }
.esc-mobilmenu__alt a{ display:block; padding-block:.5rem; font-size:var(--esc-t-kucuk);
  color:var(--esc-metin-soluk) }
.esc-mobilmenu li[data-acik] > .esc-mobilmenu__alt{ display:block }
.esc-mobilmenu li[data-acik] > .esc-mobilmenu__ac .esc-ok{ transform:rotate(-135deg) translateY(-2px) }

.esc-aramapanel form{ display:flex; border:1.5px solid var(--esc-cizgi-guclu) }
.esc-aramapanel input{ flex:1; border:0; background:none; color:var(--esc-metin);
  padding:1rem; font:inherit; min-width:0 }
.esc-aramapanel input:focus{ outline:none }
.esc-aramapanel button{ padding-inline:1.5rem; background:var(--esc-cizgi-guclu); color:var(--esc-zemin) }
.esc-aramapanel button svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2 }
.esc-aramapanel__oneri{ display:flex; flex-wrap:wrap; gap:var(--esc-b1); margin-top:var(--esc-b3) }
.esc-aramapanel__oneri a{ border:1px solid var(--esc-cizgi); padding:.375rem .75rem;
  font-size:var(--esc-t-kucuk); font-weight:700 }
.esc-aramapanel__oneri a:hover{ border-color:var(--esc-cizgi-guclu) }

/* ---------- 7. HERO / SLIDER ---------- */
/* Slaytlar aynı ızgara gözünde üst üste durur: yükseklik en uzun slayta göre
   sabitlenir, slayt değişince sayfa zıplamaz. */
.esc-slaytlar{ display:grid; position:relative; background:var(--esc-zemin) }
.esc-slaytlar > .esc-slayt{ grid-area:1/1; opacity:0; visibility:hidden;
  transition:opacity 520ms cubic-bezier(.22,.61,.36,1), visibility 520ms }
.esc-slaytlar > .esc-slayt[data-aktif]{ opacity:1; visibility:visible }

.esc-slaytnav{ position:absolute; z-index:2; inset-block-end:var(--esc-b4);
  inset-inline-start:clamp(1.5rem,4vw,5rem); display:flex; align-items:center; gap:var(--esc-b3) }
.esc-slaytnav__nokta{ display:flex; gap:.5rem }
.esc-slaytnav__nokta button{ width:26px; height:3px; background:var(--esc-metin);
  opacity:.22; transition:opacity var(--esc-gecis) }
.esc-slaytnav__nokta button[aria-current="true"]{ opacity:1 }
.esc-slaytnav__ok{ display:flex; gap:.375rem }
.esc-slaytnav__ok button{ width:34px; height:34px; display:grid; place-items:center;
  border:1px solid var(--esc-cizgi); background:var(--esc-zemin);
  transition:background var(--esc-gecis),color var(--esc-gecis),border-color var(--esc-gecis) }
.esc-slaytnav__ok button:hover{ background:var(--esc-cizgi-guclu); color:var(--esc-zemin);
  border-color:var(--esc-cizgi-guclu) }
.esc-slaytnav__ok svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8 }
/* Tek slaytta gezinme kontrolü anlamsız */
.esc-slaytlar[data-tek] .esc-slaytnav{ display:none }
@media (max-width:980px){
  .esc-slaytnav{ position:static; padding:var(--esc-b3) var(--esc-kenar) 0; justify-content:space-between }
}

.esc-hero__yazi h1,.esc-hero__yazi h2{ font-size:var(--esc-t-dev); margin-bottom:var(--esc-b3) }
.esc-hero__yazi p{ max-width:44ch; color:var(--esc-metin-soluk); margin:0 0 var(--esc-b4) }
.esc-hero__btnler{ display:flex; gap:var(--esc-b2); flex-wrap:wrap }

/* tamekran: tipografi önde, görsel panel yanda.
   Sefa'nın notu "slider oturmadı" — eski oran 1.05/0.95'ti, yazı sütunu görselle
   aynı genişlikteydi ve iki taraf da birbirini eziyordu. Görsele ağırlık verildi
   (yazı 42%, görsel 58%): yazı sütunu 44ch'te zaten duruyor, artan yer görsele
   gidince hero "yarısı boş" hissini bırakıyor. */
.esc-s-tamekran{ display:grid; grid-template-columns:.72fr 1fr; min-height:min(78vh,780px) }
.esc-s-tamekran__yazi{ display:flex; flex-direction:column; justify-content:center;
  padding:var(--esc-b7) clamp(1.5rem,4vw,5rem); background:var(--esc-zemin) }
.esc-s-tamekran__gorsel{ position:relative; overflow:hidden; background:var(--esc-zemin-alt) }
.esc-s-tamekran__gorsel img{ width:100%; height:100%; object-fit:cover }
.esc-s-tamekran__etiket{ position:absolute; inset-block-end:var(--esc-b4);
  inset-inline-start:var(--esc-b4); background:var(--esc-zemin); color:var(--esc-metin);
  padding:var(--esc-b2) var(--esc-b3); font-size:var(--esc-t-mini);
  letter-spacing:var(--esc-iz-mini); text-transform:uppercase; font-weight:800 }

/* split: iki eşit blok, arada hairline */
.esc-s-split{ display:grid; grid-template-columns:1fr 1fr; background:var(--esc-zemin) }
.esc-s-split__yazi{ display:flex; flex-direction:column; justify-content:center;
  padding:var(--esc-b7) clamp(1.5rem,4vw,4.5rem);
  border-inline-end:var(--esc-kalinlik) solid var(--esc-cizgi) }
.esc-s-split .esc-gorsel{ --esc-oran:1/1; height:100% }

/* minimal (sakin): ortalanmış, boşluklu, editoryal */
.esc-s-minimal{ text-align:center; background:var(--esc-zemin); padding-top:var(--esc-b7) }
.esc-s-minimal .esc-hero__yazi{ max-width:54ch; margin-inline:auto; padding-inline:var(--esc-kenar) }
.esc-s-minimal .esc-hero__yazi p{ margin-inline:auto }
.esc-s-minimal .esc-hero__btnler{ justify-content:center }
.esc-s-minimal .esc-gorsel{ --esc-oran:var(--esc-oran-hero); margin-top:var(--esc-b6) }

/* coklu: yan yana üç kart, ortadaki baskın */
.esc-s-coklu{ background:var(--esc-zemin); padding-block:var(--esc-b4) }
.esc-s-coklu__izgara{ display:grid; grid-template-columns:1fr 1.55fr 1fr; gap:var(--esc-b2) }
.esc-s-coklu__kart{ position:relative; overflow:hidden; display:block }
.esc-s-coklu__kart .esc-gorsel{ --esc-oran:3/4; height:100% }
.esc-s-coklu__kart--ana .esc-gorsel{ --esc-oran:16/13 }
.esc-s-coklu__kart:hover .esc-gorsel img{ transform:scale(1.04) }
.esc-s-coklu__kap{ position:absolute; inset:auto 0 0 0; padding:var(--esc-b4);
  background:linear-gradient(to top,rgba(0,0,0,.66),transparent); color:#fff }
.esc-s-coklu__kap h3{ font-size:var(--esc-t-orta); margin-bottom:var(--esc-b1) }
.esc-s-coklu__kap span{ font-size:var(--esc-t-mini); letter-spacing:var(--esc-iz-mini);
  text-transform:uppercase; font-weight:800; opacity:.85 }

@media (max-width:980px){
  .esc-s-tamekran, .esc-s-split{ grid-template-columns:1fr }
  .esc-s-tamekran{ min-height:0 }
  .esc-s-tamekran__gorsel{ aspect-ratio:4/3 }
  .esc-s-split__yazi{ border-inline-end:0;
    border-block-end:var(--esc-kalinlik) solid var(--esc-cizgi); padding-block:var(--esc-b6) }
  .esc-s-coklu__izgara{ grid-template-columns:1fr 1fr }
  .esc-s-coklu__kart--ana{ grid-column:1/-1; order:-1 }
}
@media (max-width:600px){ .esc-s-coklu__izgara{ grid-template-columns:1fr } }

/* ---------- 8. GÜVEN ŞERİDİ ---------- */
.esc-serit{ border-block:var(--esc-kalinlik) solid var(--esc-cizgi); overflow:hidden;
  background:var(--esc-zemin) }
.esc-serit__akis{ display:flex; gap:var(--esc-b5); width:max-content;
  padding-block:var(--esc-b3); animation:esc-kay 42s linear infinite }
@media (prefers-reduced-motion:reduce){ .esc-serit__akis{ animation:none } }
@keyframes esc-kay{ to{ transform:translateX(-50%) } }
.esc-serit__oge{ display:flex; align-items:center; gap:var(--esc-b2);
  font-size:var(--esc-t-kucuk); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; white-space:nowrap }
.esc-serit__oge::before{ content:""; width:5px; height:5px; background:var(--esc-vurgu) }

/* ---------- 9. KATEGORİLER ---------- */
/* Mobilde TEK sütun değil, İKİ sütun. Telefonda tek tek kategori kaydırmak
   kullanıcıyı yoruyor; iki sütun hem daha çok seçenek gösteriyor hem de
   sayfa boyunu yarıya indiriyor. */
.esc-katlar{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--esc-b2) }
@media (min-width:640px){  .esc-katlar{ grid-template-columns:repeat(3,1fr) } }
@media (min-width:1024px){ .esc-katlar{ grid-template-columns:repeat(4,1fr) } }

.esc-kat{ position:relative; display:block; overflow:hidden }
.esc-kat .esc-gorsel{ --esc-oran:var(--esc-oran-kategori) }
.esc-kat:hover .esc-gorsel img{ transform:scale(1.045) }
.esc-kat__kap{ position:absolute; inset:auto 0 0 0; padding:var(--esc-b3);
  background:linear-gradient(to top,rgba(0,0,0,.7),transparent 90%); color:#fff;
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--esc-b2) }
.esc-kat__kap h3{ font-size:var(--esc-t-orta) }
.esc-kat__kap span{ font-size:var(--esc-t-mini); letter-spacing:var(--esc-iz-mini);
  text-transform:uppercase; font-weight:800; opacity:.8 }

/* Varyant: kaydırmalı — mobilde ekranı hiç uzatmaz.
   Ondalık taban (2.25) bilinçli: yarım kalan kart "devamı var" sinyali. */
.esc-katlar--kaydirmali{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:var(--esc-b2); scrollbar-width:thin }
.esc-katlar--kaydirmali > .esc-kat{ flex:0 0 calc((100% - 1.25*var(--esc-b2))/2.25);
  scroll-snap-align:start }
@media (min-width:640px){
  .esc-katlar--kaydirmali > .esc-kat{ flex-basis:calc((100% - 2.25*var(--esc-b2))/3.25) }
}
@media (min-width:1000px){
  .esc-katlar--kaydirmali > .esc-kat{ flex-basis:calc((100% - 3.25*var(--esc-b2))/4.25) }
}

/* Varyant: üst yazılı — kapak yerine tam kaplama, başlık ortada */
.esc-katlar--overlay .esc-kat__kap{ inset:0; align-items:center; justify-content:center;
  flex-direction:column; text-align:center;
  background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,.15)) }
.esc-katlar--overlay .esc-kat__kap h3{ font-size:var(--esc-t-buyuk) }

/* Varyant: katalog şeritleri — alt alta geniş bloklar, sırayla sağ/sol */
.esc-katlar--katalog{ display:grid; grid-template-columns:1fr; gap:var(--esc-b3) }
.esc-katlar--katalog > .esc-kat{ display:grid; grid-template-columns:1.15fr 1fr;
  align-items:stretch; border:var(--esc-kalinlik) solid var(--esc-cizgi) }
.esc-katlar--katalog > .esc-kat .esc-gorsel{ --esc-oran:21/9; height:100% }
.esc-katlar--katalog > .esc-kat:nth-child(even) .esc-gorsel{ order:2 }
.esc-katlar--katalog .esc-kat__kap{ position:static; background:none; color:inherit;
  flex-direction:column; align-items:flex-start; justify-content:center;
  gap:var(--esc-b2); padding:clamp(1.5rem,4vw,3.5rem) }
.esc-katlar--katalog .esc-kat__kap h3{ font-size:var(--esc-t-buyuk) }
.esc-katlar--katalog .esc-kat__kap span{ color:var(--esc-metin-soluk); opacity:1 }
@media (max-width:820px){
  .esc-katlar--katalog > .esc-kat{ grid-template-columns:1fr }
  .esc-katlar--katalog > .esc-kat:nth-child(even) .esc-gorsel{ order:0 }
  .esc-katlar--katalog > .esc-kat .esc-gorsel{ --esc-oran:16/9 }
}

/* ---------- 10. ÜRÜN KARTI ---------- */
.esc-urun{ position:relative; display:flex; flex-direction:column;
  background:var(--esc-zemin); container-type:inline-size }
.esc-urun__gorsel{ position:relative; overflow:hidden; background:var(--esc-zemin-alt);
  aspect-ratio:var(--esc-oran-urun); display:block }
/* Görseli saran bağlantı blok ve tam boy: satır içi kaldığında img'nin %100 yüksekliği
   çözülmüyor, kare/yatay fotoğraflı kartın altında bej boşluk kalıyordu (giyim-v3). */
.esc-urun__gorsel > a{ display:block; height:100% }
.esc-urun__gorsel img{ width:100%; height:100%; object-fit:cover;
  transition:transform 700ms cubic-bezier(.22,.61,.36,1) }
.esc-urun:hover .esc-urun__gorsel img{ transform:scale(1.05) }
.esc-urun__etiket{ position:absolute; top:var(--esc-b2); inset-inline-start:var(--esc-b2);
  background:var(--esc-indirim); color:#fff; padding:.25rem .5rem;
  font-size:var(--esc-t-mini); font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; line-height:1.4 }
.esc-urun__etiket--sade{ background:var(--esc-cizgi-guclu); color:var(--esc-zemin) }
.esc-urun__favori{ position:absolute; top:var(--esc-b2); inset-inline-end:var(--esc-b2);
  width:34px; height:34px; display:grid; place-items:center; background:var(--esc-zemin);
  color:var(--esc-metin); opacity:0; transition:opacity var(--esc-gecis) }
.esc-urun:hover .esc-urun__favori,
.esc-urun:focus-within .esc-urun__favori{ opacity:1 }
.esc-urun__favori svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6 }
.esc-urun__favori.esc-favoride svg{ fill:var(--esc-indirim); stroke:var(--esc-indirim) }

.esc-urun__bilgi{ padding:var(--esc-b3) 0; display:flex; flex-direction:column;
  gap:.375rem; flex:1 }
.esc-urun__marka{ font-size:var(--esc-t-mini); letter-spacing:var(--esc-iz-mini);
  text-transform:uppercase; color:var(--esc-metin-soluk); font-weight:800 }
.esc-urun__ad{ font-family:var(--esc-f-govde); font-size:var(--esc-t-govde);
  font-weight:600; line-height:1.35 }
.esc-urun__fiyat{ display:flex; align-items:baseline; gap:var(--esc-b2);
  font-variant-numeric:tabular-nums; margin-top:.125rem }
.esc-urun__fiyat b{ font-size:1.0625rem; font-weight:800; color:var(--esc-metin) }
.esc-urun__fiyat s{ color:var(--esc-metin-soluk); font-size:var(--esc-t-kucuk);
  text-decoration-thickness:1px }
/* İndirimli fiyat vurgulanır — indirim varken asıl okunacak sayı budur. */
.esc-urun__fiyat--indirimli b{ color:var(--esc-indirim) }
.esc-urun__puan{ display:flex; align-items:center; gap:.375rem;
  font-size:var(--esc-t-kucuk); color:var(--esc-metin-soluk) }
.esc-urun__puan svg{ width:13px; height:13px; fill:var(--esc-vurgu); stroke:none }
.esc-urun__stok{ font-size:var(--esc-t-kucuk); color:var(--esc-stok); font-weight:700 }
.esc-urun__stok--az{ color:var(--esc-indirim) }

/* Ürün bazlı ücretsiz kargo rozeti. Ecomus'ta yeşil kutu; escMedya'da kutu değil
   çizgi — kart zaten etiket, fiyat ve stok taşıyor, dördüncü bir renkli blok
   ürün görselinin önüne geçiyordu. */
.esc-urun__kargo{ align-self:flex-start; font-size:var(--esc-t-mini); font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; color:var(--esc-stok);
  border-bottom:1px solid currentColor; padding-bottom:1px }

/* Kampanya şeridi — karttan çıkmadan "sepette ne kadara geliyor" cevabı */
.esc-urun__kampanya{ display:flex; align-items:center; justify-content:center;
  gap:.4375rem; flex-wrap:wrap; margin-top:var(--esc-b1); padding:.5rem;
  background:var(--esc-vurgu); color:var(--esc-vurgu-metin); font-size:var(--esc-t-mini);
  font-weight:800; letter-spacing:.04em; text-transform:uppercase; text-align:center }
.esc-urun__kampanya b{ background:var(--esc-vurgu-metin); color:var(--esc-vurgu);
  padding:.125rem .375rem; font-variant-numeric:tabular-nums }

.esc-renkler{ display:flex; align-items:center; gap:.375rem; flex-wrap:wrap }
.esc-renkler span[data-renk]{ width:17px; height:17px; border:1px solid var(--esc-cizgi);
  border-radius:var(--esc-kose); display:block }
.esc-renkler__ad{ font-size:var(--esc-t-mini); font-weight:700; text-transform:uppercase;
  letter-spacing:.04em }
.esc-renkler__fazla{ font-size:var(--esc-t-mini); color:var(--esc-metin-soluk);
  font-weight:700; border-bottom:1px solid currentColor }

.esc-bedenler{ display:flex; gap:.3125rem; flex-wrap:wrap }
.esc-bedenler span{ min-width:30px; padding:.1875rem .375rem; border:1px solid var(--esc-cizgi);
  font-size:var(--esc-t-mini); font-weight:800; text-align:center }

.esc-urun__sepet{ margin-top:auto; padding-top:var(--esc-b1) }
.esc-urun__ustsepet{ position:absolute; inset-inline:var(--esc-b2); bottom:var(--esc-b2);
  opacity:0; transform:translateY(8px);
  transition:opacity var(--esc-gecis),transform var(--esc-gecis) }
.esc-urun:hover .esc-urun__ustsepet,
.esc-urun:focus-within .esc-urun__ustsepet{ opacity:1; transform:none }
@media (hover:none){ .esc-urun__ustsepet{ opacity:1; transform:none } }

/* --- Kart varyantları --- */
[data-esc-kart="sade"] .esc-urun__marka,
[data-esc-kart="sade"] .esc-urun__puan,
[data-esc-kart="sade"] .esc-renkler,
[data-esc-kart="sade"] .esc-bedenler,
[data-esc-kart="sade"] .esc-urun__stok,
[data-esc-kart="sade"] .esc-urun__sepet,
[data-esc-kart="sade"] .esc-urun__kargo,
[data-esc-kart="sade"] .esc-urun__kampanya{ display:none }

[data-esc-kart="hizli"] .esc-urun__ustsepet,
[data-esc-kart="hizli"] .esc-urun__puan,
[data-esc-kart="hizli"] .esc-urun__stok{ display:none }
[data-esc-kart="hizli"] .esc-urun__bilgi{ gap:.5rem }

[data-esc-kart="bilgi"] .esc-urun__ustsepet,
[data-esc-kart="bilgi"] .esc-bedenler{ display:none }
[data-esc-kart="bilgi"] .esc-urun__bilgi{ gap:.4375rem }

/* Yalın (lüks): Chanel/Hermès vitrini gibi yalnız fotoğraf ve ad. Fiyat, rozet, favori
   ve sepet kartta yok — ürün sayfasında. Marinca istedi (2026-10-27). */
[data-esc-kart="yalin"] .esc-urun__etiket,
[data-esc-kart="yalin"] .esc-urun__favori,
[data-esc-kart="yalin"] .esc-urun__ustsepet,
[data-esc-kart="yalin"] .esc-urun__marka,
[data-esc-kart="yalin"] .esc-urun__fiyat,
[data-esc-kart="yalin"] .esc-urun__puan,
[data-esc-kart="yalin"] .esc-renkler,
[data-esc-kart="yalin"] .esc-bedenler,
[data-esc-kart="yalin"] .esc-urun__stok,
[data-esc-kart="yalin"] .esc-urun__sepet,
[data-esc-kart="yalin"] .esc-urun__kargo,
[data-esc-kart="yalin"] .esc-urun__kampanya{ display:none }
[data-esc-kart="yalin"] .esc-urun__bilgi{ align-items:center; text-align:center; padding-top:var(--esc-b2) }
[data-esc-kart="yalin"] .esc-urun__ad{ font-size:var(--esc-t-kucuk); font-weight:400;
  letter-spacing:.06em; line-height:1.5 }

/* Kart DAR olduğunda sıkışsın — ekran genişliğine değil, kartın kendi genişliğine
   bakar. Böylece aynı kart mobil 2'li ızgarada da, geniş ekrandaki kaydırmalı
   şeritte de doğru davranır. */
@container (max-width:210px){
  .esc-urun__bilgi{ padding-block:var(--esc-b2) var(--esc-b3); gap:.3125rem }
  .esc-urun__ad{ font-size:var(--esc-t-kucuk) }
  .esc-urun__fiyat b{ font-size:.9375rem }
  .esc-urun__marka{ font-size:10px }
  .esc-bedenler{ display:none }
}

/* ---------- 11. ÜRÜN IZGARASI ---------- */
/* Sütun merdiveni AÇIK yazılır — auto-fill değil.
   NEDEN: auto-fill kaydırma çubuğunun 15px'ine takılıp 768px'te 3 yerine
   2 sütun veriyordu. Sütun sayısı satışı doğrudan etkilediği için tahmine
   bırakılmaz. Mobilde 2 — tek sütun ürün listesi telefonda gereksiz uzuyor. */
.esc-urunler{ display:grid; gap:var(--esc-b4) var(--esc-b2);
  grid-template-columns:repeat(2,1fr); align-items:start }
@media (min-width:640px){  .esc-urunler{ grid-template-columns:repeat(3,1fr) } }
@media (min-width:1024px){ .esc-urunler{ grid-template-columns:repeat(4,1fr) } }
@media (min-width:1400px){ .esc-urunler{ grid-template-columns:repeat(5,1fr) } }

/* Kaydırmalı şerit — ondalık taban (2.25) bilinçli: yarım görünen kart
   "devamı var" sinyali verir, kullanıcı kaydırmayı fark eder. */
.esc-urunler--kaydirmali{ display:flex; grid-template-columns:none; overflow-x:auto;
  scroll-snap-type:x mandatory; padding-bottom:var(--esc-b3); scrollbar-width:thin }
.esc-urunler--kaydirmali > .esc-urun{ flex:0 0 calc((100% - 1.25*var(--esc-b2))/2.25);
  scroll-snap-align:start }
@media (min-width:640px){
  .esc-urunler--kaydirmali > .esc-urun{ flex-basis:calc((100% - 2.25*var(--esc-b2))/3.25) }
}
@media (min-width:1000px){
  .esc-urunler--kaydirmali > .esc-urun{ flex-basis:calc((100% - 3.25*var(--esc-b2))/4.25) }
}

/* Başlık satırının sağı: "Tümünü gör" + şerit okları */
.esc-baslik-sag{ display:flex; align-items:center; gap:var(--esc-b3) }
.esc-seritok{ display:flex; gap:.375rem }
.esc-seritok button{ width:40px; height:40px; display:grid; place-items:center;
  border:1px solid var(--esc-cizgi); background:var(--esc-zemin);
  transition:background var(--esc-gecis),color var(--esc-gecis),border-color var(--esc-gecis) }
.esc-seritok button:hover{ background:var(--esc-cizgi-guclu); color:var(--esc-zemin); border-color:var(--esc-cizgi-guclu) }
.esc-seritok svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8 }
@media (hover:none){ .esc-seritok{ display:none } }

/* Butik şerit: kaydırma çubuğu yok (oklar ve parmak yeterli), masaüstünde dört kart tam */
[data-esc-menu="butik"] .esc-urunler--kaydirmali{ scrollbar-width:none; padding-bottom:0 }
[data-esc-menu="butik"] .esc-urunler--kaydirmali::-webkit-scrollbar{ display:none }
@media (min-width:1000px){
  [data-esc-menu="butik"] .esc-urunler--kaydirmali > .esc-urun{ flex-basis:calc((100% - 3*var(--esc-b2))/4) }
}

/* Sefa'nın notu: "ızgarada kaymalar". Ölçüm taşma göstermiyordu çünkü sorun
   taşma değildi: ürün adı 1 satır ya da 3 satır olunca altındaki fiyat ve
   sepet butonu her kartta farklı yükseklikte kalıyordu. Ad iki satıra
   sabitlenip alt bilgi ızgaraya oturunca ritim düzeliyor. */
.esc-urun__ad{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:calc(2 * 1.35em) }

/* Sekmeler — hap buton değil, alt çizgili sekme. Ecomus'ta yuvarlak haplardı;
   keskin köşe imzasıyla çelişiyordu. */
.esc-sekmeler{ display:flex; gap:var(--esc-b4); overflow-x:auto; scrollbar-width:none;
  border-bottom:var(--esc-kalinlik) solid var(--esc-cizgi); margin-bottom:var(--esc-b4) }
.esc-sekmeler::-webkit-scrollbar{ display:none }
.esc-sekmeler button{ padding-block:var(--esc-b2); white-space:nowrap;
  font-size:var(--esc-t-kucuk); font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--esc-metin-soluk);
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color var(--esc-gecis),border-color var(--esc-gecis) }
.esc-sekmeler button[aria-selected="true"]{ color:var(--esc-metin); border-bottom-color:var(--esc-cizgi-guclu) }

/* ---------- 12. BANNER ---------- */
.esc-banner{ display:grid; gap:var(--esc-b2) }
.esc-banner__kart{ position:relative; overflow:hidden; display:grid;
  background:var(--esc-zemin-alt) }
.esc-banner__yazi{ padding:clamp(1.75rem,4vw,4rem); display:flex; flex-direction:column;
  justify-content:center; gap:var(--esc-b2) }
.esc-banner__yazi h3{ font-size:var(--esc-t-buyuk) }
.esc-banner__yazi p{ color:var(--esc-metin-soluk); max-width:40ch }
.esc-banner__yazi .esc-btn{ align-self:flex-start; margin-top:var(--esc-b2) }

/* split — solda görsel, sağda metin.
   Sefa'nın notu "banner tam oturmadı": eski hâlde görsel 1/1 kare, metin
   sütunu ise içeriğe göre kısaydı; kart sağda boş, solda uzun görünüyordu.
   Görsel 4/3'e ve metin sütunu biraz dara alınınca iki taraf da dolu duruyor. */
.esc-banner--split .esc-banner__kart{ grid-template-columns:1.1fr .9fr; align-items:stretch }
.esc-banner--split .esc-banner__kart .esc-gorsel{ --esc-oran:4/3; height:100% }

.esc-banner--twin{ grid-template-columns:1fr 1fr }
.esc-banner--twin .esc-banner__kart{ grid-template-columns:1fr }
.esc-banner--twin .esc-banner__kart .esc-gorsel{ --esc-oran:16/10 }

.esc-banner--hero .esc-banner__kart{ grid-template-columns:1fr }
.esc-banner--hero .esc-banner__kart .esc-gorsel{ --esc-oran:21/8 }
.esc-banner--hero .esc-banner__yazi{ position:absolute; inset:0; align-items:center;
  text-align:center; color:#fff;
  background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.22)) }
.esc-banner--hero .esc-banner__yazi p{ color:rgba(255,255,255,.85) }
.esc-banner--hero .esc-banner__yazi .esc-btn{ align-self:center; background:#fff;
  color:#111; border-color:#fff }

.esc-banner--strip .esc-banner__kart{ grid-template-columns:1fr;
  background:var(--esc-cizgi-guclu); color:var(--esc-zemin) }
.esc-banner--strip .esc-banner__kart .esc-gorsel{ display:none }
.esc-banner--strip .esc-banner__yazi{ flex-direction:row; align-items:center;
  justify-content:space-between; flex-wrap:wrap; padding-block:var(--esc-b4) }
.esc-banner--strip .esc-banner__yazi h3{ font-size:var(--esc-t-orta) }
.esc-banner--strip .esc-banner__yazi p{ color:inherit; opacity:.72 }
.esc-banner--strip .esc-banner__yazi .esc-btn{ margin-top:0; background:var(--esc-zemin);
  color:var(--esc-metin) }

@media (max-width:820px){
  .esc-banner--split .esc-banner__kart,
  .esc-banner--twin{ grid-template-columns:1fr }
  .esc-banner--hero .esc-banner__kart .esc-gorsel{ --esc-oran:4/3 }
}

/* Geri sayım — ayrı varyant değil, her banner'a takılan ek blok */
.esc-sayac{ display:flex; gap:var(--esc-b2); margin-top:var(--esc-b1) }
.esc-sayac div{ min-width:58px; padding:.5rem; border:1px solid currentColor; text-align:center }
.esc-sayac b{ display:block; font-size:1.25rem; font-weight:800;
  font-variant-numeric:tabular-nums; line-height:1.2 }
.esc-sayac span{ font-size:var(--esc-t-mini); letter-spacing:.1em;
  text-transform:uppercase; opacity:.65 }

/* ---------- 13. EDİTORYAL / ÖZELLİK / YORUM ---------- */
.esc-editoryal{ display:grid; grid-template-columns:1fr 1fr; align-items:center;
  gap:clamp(2rem,5vw,5rem) }
.esc-editoryal .esc-gorsel{ --esc-oran:4/5 }
.esc-editoryal h2{ font-size:var(--esc-t-buyuk); margin-bottom:var(--esc-b3) }
.esc-editoryal p{ color:var(--esc-metin-soluk); margin-bottom:var(--esc-b4) }
@media (max-width:860px){ .esc-editoryal{ grid-template-columns:1fr } }

.esc-ozellikler{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--esc-b4) }
@media (min-width:900px){ .esc-ozellikler{ grid-template-columns:repeat(4,1fr) } }
.esc-ozellik{ display:flex; flex-direction:column; gap:var(--esc-b2) }
.esc-ozellik svg{ width:26px; height:26px; fill:none; stroke:var(--esc-vurgu); stroke-width:1.4 }
.esc-ozellik h3{ font-family:var(--esc-f-govde); font-size:var(--esc-t-govde); font-weight:800 }
.esc-ozellik p{ color:var(--esc-metin-soluk); font-size:var(--esc-t-kucuk) }
/* Varyant: çizgili — aralarında ayraç */
.esc-ozellikler--cizgili .esc-ozellik{ padding-inline-start:var(--esc-b4);
  border-inline-start:var(--esc-kalinlik) solid var(--esc-cizgi) }
.esc-ozellikler--cizgili .esc-ozellik:first-child{ padding-inline-start:0; border-inline-start:0 }
/* Varyant: ikon solda */
.esc-ozellikler--satir .esc-ozellik{ flex-direction:row; align-items:flex-start; gap:var(--esc-b3) }
.esc-ozellikler--satir .esc-ozellik svg{ flex:none; margin-top:.25rem }

.esc-yorumlar{ display:grid; grid-template-columns:1fr; gap:var(--esc-b4) }
@media (min-width:760px){ .esc-yorumlar{ grid-template-columns:repeat(3,1fr) } }
.esc-yorum{ display:flex; flex-direction:column; gap:var(--esc-b2);
  border-top:2px solid var(--esc-cizgi-guclu); padding-top:var(--esc-b3) }
.esc-yorum__puan{ display:flex; gap:2px }
.esc-yorum__puan svg{ width:14px; height:14px; fill:var(--esc-vurgu); stroke:none }
.esc-yorum p{ font-family:var(--esc-f-baslik); font-size:var(--esc-t-orta); line-height:1.4 }
.esc-yorum__kisi{ font-size:var(--esc-t-mini); letter-spacing:var(--esc-iz-mini);
  text-transform:uppercase; font-weight:800; color:var(--esc-metin-soluk); margin-top:auto }
/* Varyant: avatarlı */
.esc-yorumlar--satir .esc-yorum{ display:grid; grid-template-columns:auto 1fr;
  gap:var(--esc-b3); align-items:start }
.esc-yorumlar--satir .esc-yorum__avatar{ width:52px; height:52px; border-radius:50%;
  object-fit:cover; grid-row:1/4 }

/* ---------- 14. BÜLTEN ---------- */
.esc-bulten{ background:var(--esc-zemin-alt); text-align:center }
.esc-bulten h2{ font-size:var(--esc-t-buyuk); margin-bottom:var(--esc-b2) }
.esc-bulten p{ color:var(--esc-metin-soluk); max-width:48ch; margin:0 auto var(--esc-b4) }
.esc-bulten form{ display:flex; gap:var(--esc-b2); max-width:520px; margin-inline:auto;
  flex-wrap:wrap }
.esc-bulten input{ flex:1; min-width:220px; padding:.9375rem 1rem;
  border:1.5px solid var(--esc-cizgi-guclu); background:var(--esc-zemin);
  color:var(--esc-metin); font:inherit; border-radius:var(--esc-kose) }
.esc-bulten input:focus{ outline:2px solid var(--esc-vurgu); outline-offset:-2px }

/* ---------- 15. FOOTER ---------- */
.esc-footer{ border-top:var(--esc-kalinlik) solid var(--esc-cizgi); background:var(--esc-zemin) }
.esc-footer--koyu{ background:var(--esc-cizgi-guclu); color:var(--esc-zemin);
  border-top-color:transparent }
.esc-footer__ust{ display:grid; grid-template-columns:1.5fr repeat(3,1fr) 1.2fr;
  gap:var(--esc-b4); padding-block:var(--esc-b6) }
.esc-footer h4{ font-family:var(--esc-f-govde); font-size:var(--esc-t-mini);
  letter-spacing:var(--esc-iz-mini); text-transform:uppercase; font-weight:800;
  margin-bottom:var(--esc-b3) }
.esc-footer ul{ display:grid; gap:.625rem }
.esc-footer a{ font-size:var(--esc-t-kucuk); opacity:.72; transition:opacity var(--esc-gecis) }
.esc-footer a:hover{ opacity:1 }
.esc-footer__marka .esc-logo{ display:inline-flex; margin-bottom:var(--esc-b2) }
.esc-footer__marka p{ font-size:var(--esc-t-kucuk); opacity:.72; max-width:34ch;
  margin-bottom:var(--esc-b3) }
.esc-footer__sosyal{ display:flex; gap:var(--esc-b2); margin-top:var(--esc-b3) }
.esc-footer__sosyal a{ width:34px; height:34px; display:grid; place-items:center;
  border:1px solid currentColor; opacity:.6 }
.esc-footer__sosyal a:hover{ opacity:1 }
.esc-footer__sosyal svg{ width:16px; height:16px; fill:currentColor }
.esc-footer__alt{ display:flex; align-items:center; justify-content:space-between;
  gap:var(--esc-b3); flex-wrap:wrap; padding-block:var(--esc-b3);
  border-top:1px solid var(--esc-cizgi); font-size:var(--esc-t-kucuk); opacity:.72 }
.esc-footer--koyu .esc-footer__alt{ border-top-color:rgba(255,255,255,.15) }
/* Başlıklar sayfanın genel h4 rengini (koyu metin) alıyordu — koyu zeminde görünmüyordu */
.esc-footer--koyu h4{ color:inherit }
.esc-footer__odeme{ display:flex; gap:var(--esc-b2); align-items:center; flex-wrap:wrap }
.esc-footer__odeme img{ height:26px; width:auto }
.esc-footer__bulten{ display:flex; gap:.5rem; margin-top:var(--esc-b2) }
.esc-footer__bulten input{ flex:1; min-width:0; padding:.75rem; background:transparent;
  color:inherit; border:1px solid currentColor; font:inherit; font-size:var(--esc-t-kucuk);
  border-radius:var(--esc-kose) }
.esc-footer__bulten button{ padding:.75rem 1rem; border:1px solid currentColor;
  font-size:var(--esc-t-mini); font-weight:800; letter-spacing:.08em; text-transform:uppercase }

/* Varyant: sade — tek sütun, ortalanmış, sütunlar gizli */
.esc-footer--sade .esc-footer__ust{ grid-template-columns:1fr; text-align:center;
  padding-block:var(--esc-b5) }
.esc-footer--sade .esc-footer__sutun,
.esc-footer--sade .esc-footer__abone{ display:none }
.esc-footer--sade .esc-footer__marka p{ margin-inline:auto }
.esc-footer--sade .esc-footer__sosyal{ justify-content:center }
.esc-footer__sadelinkler{ display:none; gap:var(--esc-b4); justify-content:center;
  flex-wrap:wrap; margin-top:var(--esc-b3) }
.esc-footer--sade .esc-footer__sadelinkler{ display:flex }
.esc-footer__sadelinkler a{ font-weight:800; text-transform:uppercase;
  letter-spacing:.05em; font-size:var(--esc-t-mini); opacity:1 }
@media (max-width:1000px){ .esc-footer__ust{ grid-template-columns:1fr 1fr } }
@media (max-width:620px){ .esc-footer__ust{ grid-template-columns:1fr } }
.esc-footer__altyapi{ font-size:var(--esc-t-mini) }

/* Varyant: lüks (footer_stili "luks") — Chanel/Hermès düzeni. Bülten en üstte ortada,
   altında marka + üç sütun eşit, ödeme logoları ve telif en alt çubukta. Markup aynı;
   yalnız ızgara sırası ve tipografi değişir. */
.esc-footer--luks{ background:#0E0E0E; color:#EFEBE4 }
.esc-footer--luks .esc-footer__ust{ grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--esc-b5) var(--esc-b4); padding-block:0 var(--esc-b6) }
.esc-footer--luks .esc-footer__abone{ order:-1; grid-column:1/-1; text-align:center;
  padding-block:var(--esc-b6) var(--esc-b5); border-bottom:1px solid rgba(255,255,255,.12) }
.esc-footer--luks .esc-footer__abone h4{ font-family:var(--esc-f-baslik); font-size:var(--esc-t-orta);
  font-weight:400; letter-spacing:.04em; text-transform:none; margin-bottom:var(--esc-b2) }
.esc-footer--luks .esc-footer__abone p{ margin-inline:auto; max-width:46ch }
.esc-footer--luks .esc-footer__bulten{ max-width:480px; margin:var(--esc-b3) auto 0 }
.esc-footer--luks .esc-footer__bulten input{ border-width:0 0 1px; padding-inline:0 }
.esc-footer--luks .esc-footer__bulten button{ border-width:0 0 1px }
.esc-footer--luks h4{ letter-spacing:.2em; font-weight:700 }
.esc-footer--luks a{ opacity:.65 }
.esc-footer--luks .esc-footer__marka p{ max-width:28ch }
.esc-footer--luks .esc-footer__sosyal a{ border-color:rgba(255,255,255,.35) }
.esc-footer--luks .esc-footer__alt{ opacity:1; font-size:var(--esc-t-mini); letter-spacing:.06em }
.esc-footer--luks .esc-footer__alt > span{ opacity:.6 }
@media (max-width:1000px){ .esc-footer--luks .esc-footer__ust{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:620px){
  .esc-footer--luks .esc-footer__ust{ grid-template-columns:1fr; text-align:center }
  .esc-footer--luks .esc-footer__marka p{ margin-inline:auto }
  .esc-footer--luks .esc-footer__sosyal{ justify-content:center }
  .esc-footer--luks .esc-footer__alt{ justify-content:center; text-align:center }
}

/* Footer üstü serbest alan — layout her temada aynı sınıfla basıyor */
.esc-govde .esc-footer-ustu{ padding-block:var(--esc-b3) }

/* ---------- 16. BUTİK MODA KURGUSU ----------
   Anasayfa Stili "butik" (Services/AnasayfaStilleri): tam ekran fotoğraf, şeffaf
   header ve ortada logo, dikey koleksiyon kartları, kampanya bandı, artılı lookbook.
   Mavé Scarf'ın beğendiği düzenden türedi (2026-10-26). Varyantların her biri
   kendi sınıfından ya da data-esc-menu="butik"ten başlıyor; başka kurguya sızmıyor. */

/* Paletler — kural değil değer takası (KURAL 2). "butik" stilin varsayılanı:
   kiremit vurgu fotoğrafla yarışıyordu, vurgu metin rengine çekildi. */
[data-esc-sektor="butik"]{ --esc-zemin:#F7F4EF; --esc-zemin-alt:#ECE6DE; --esc-metin:#1C1D21;
  --esc-metin-soluk:#77726B; --esc-cizgi:#DED6CB; --esc-cizgi-guclu:#1C1D21;
  --esc-vurgu:#1C1D21; --esc-vurgu-metin:#FFFFFF; --esc-indirim:#8E3B33 }
[data-esc-sektor="mave"]{ --esc-zemin:#F6F2EC; --esc-zemin-alt:#EBE5DD; --esc-metin:#1D1F26;
  --esc-metin-soluk:#75716B; --esc-cizgi:#DDD5CA; --esc-cizgi-guclu:#1D1F26;
  --esc-vurgu:#8C6A4F; --esc-vurgu-metin:#FFFFFF; --esc-indirim:#8E3B33 }
/* Marinca (lüks deri, yurt dışı): Chanel/Hermès sadeliği — saf beyaz zemin, siyah metin.
   renk_sinifi "tema-marinca" ecomus'ta da aynı adla duruyor; tema değişse de ayar kalır. */
[data-esc-sektor="marinca"]{ --esc-zemin:#FFFFFF; --esc-zemin-alt:#F4F2EE; --esc-metin:#111111;
  --esc-metin-soluk:#6E6A64; --esc-cizgi:#E4E0D9; --esc-cizgi-guclu:#111111;
  --esc-vurgu:#111111; --esc-vurgu-metin:#FFFFFF; --esc-indirim:#7A2E26 }
/* Venüs Aydınlatma: kurumsal lacivert + turuncu (ecomus'taki tema-venus ile aynı ad).
   Zemin sıcak kırık beyaz — ışık fotoğrafları soğuk beyazda solgun duruyordu. */
[data-esc-sektor="venus"]{ --esc-zemin:#FAF8F4; --esc-zemin-alt:#F0ECE5; --esc-metin:#16213A;
  --esc-metin-soluk:#6B6F7A; --esc-cizgi:#E2DDD4; --esc-cizgi-guclu:#16213A;
  --esc-vurgu:#1E3554; --esc-vurgu-metin:#FFFFFF; --esc-indirim:#D2601F }

/* Header: solda menü düğmesi + kısa menü, ortada logo, sağda ikonlar.
   Menüde beşten fazla öğe varsa fazlası yalnız açılır menüde — ortadaki logo ezilmesin. */
[data-esc-menu="butik"] .esc-header__ic{ display:grid; align-items:center; gap:var(--esc-b3);
  grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr) }
[data-esc-menu="butik"] .esc-mobilac{ display:grid; grid-column:1; grid-row:1 }
[data-esc-menu="butik"] .esc-nav{ grid-column:2; grid-row:1; min-width:0 }
/* Tek satır: uzun adlı menü iki satıra kırılıp logoya biniyordu. Sığmayan öğe kesilir
   (mega panel header'a bağlı, bu kırpmadan etkilenmez); tamamı soldaki menüde. */
[data-esc-menu="butik"] .esc-menu{ flex-wrap:nowrap; overflow:hidden }
[data-esc-menu="butik"] .esc-menu > li > a{ white-space:nowrap }
[data-esc-menu="butik"] .esc-menu > li:nth-child(n+6){ display:none }
[data-esc-menu="butik"] .esc-logo{ grid-column:3; grid-row:1; justify-self:center }
[data-esc-menu="butik"] .esc-ikonlar{ grid-column:4; grid-row:1; justify-self:end; margin-inline-start:0 }
/* Menü satırı gizli (tema.menu_satiri = gizli): yalnız soldaki açılır menü kalır.
   Izgara sütunları açık yazılı olduğundan logo yine tam ortada durur. */
[data-esc-menu="butik"][data-esc-menusatir="gizli"] .esc-nav{ display:none }
[data-esc-menu="butik"] .esc-arama,
[data-esc-menu="butik"] .esc-katserit{ display:none }
/* .esc-logo öneki zorunlu: `.esc-tema img{display:block}` (0-1-1) tek sınıfı eziyor,
   beyaz logo dolu header'da renkli logonun yanında çıkıyordu (giyim-v3). */
.esc-logo .esc-logo__beyaz{ display:none }
@media (max-width:1100px){
  [data-esc-menu="butik"] .esc-header__ic{ grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) }
  [data-esc-menu="butik"] .esc-nav{ display:none }
  [data-esc-menu="butik"] .esc-logo{ grid-column:2 }
  [data-esc-menu="butik"] .esc-ikonlar{ grid-column:3 }
}
@media (max-width:640px){
  [data-esc-menu="butik"] .esc-ikonlar > a[href="/hesap/giris"],
  [data-esc-menu="butik"] .esc-ikonlar > .nav-wishlist{ display:none }
  /* Yatay logo genişliğe göre sınırlanır; yalnız yükseklik sınırı arama ikonunun üstüne taşıyordu */
  [data-esc-menu="butik"] .esc-logo img{ max-height:38px; max-width:min(150px,40vw); height:auto }
}

/* Butik kart: fiyat bölünmesin; dokunmatikte görselin üstündeki sepet kutusu yok
   (fotoğrafın yarısını kapatıyordu — sepete ekleme ürün sayfasında) */
[data-esc-menu="butik"] .esc-urun__fiyat{ flex-wrap:wrap; column-gap:var(--esc-b1) }
[data-esc-menu="butik"] .esc-urun__fiyat b,
[data-esc-menu="butik"] .esc-urun__fiyat s{ white-space:nowrap }
@media (hover:none){ [data-esc-menu="butik"] .esc-urun__ustsepet{ display:none } }

/* Anasayfada editoryal slider varsa header fotoğrafın üstüne biner ve şeffaflaşır.
   Yalnız fotoğraf bitince (tema.js data-dolu) ya da mega panel açılınca dolar.
   Üzerine gelince dolması (ilk sürüm) hata gibi görünüyordu: fare menüye değince
   header beyaza dönüyordu (Sefa, giyim-v3, 2026-10-26). */
[data-esc-menu="butik"] .esc-govde:has(.esc-s-butik) .esc-header{
  margin-bottom:calc(-76px - var(--esc-kalinlik));
  transition:background var(--esc-gecis),color var(--esc-gecis),border-color var(--esc-gecis) }
@media (max-width:1100px){
  [data-esc-menu="butik"] .esc-govde:has(.esc-s-butik) .esc-header{ margin-bottom:calc(-64px - var(--esc-kalinlik)) }
}
[data-esc-menu="butik"] .esc-govde:has(.esc-s-butik) .esc-header:not([data-dolu]):not(:has(.esc-menu > li:hover > .esc-mega, .esc-menu > li:focus-within > .esc-mega)){
  background:transparent; border-bottom-color:transparent; color:#FFFFFF }
[data-esc-menu="butik"] .esc-govde:has(.esc-s-butik) .esc-header:not([data-dolu]):not(:has(.esc-menu > li:hover > .esc-mega, .esc-menu > li:focus-within > .esc-mega)) .esc-logo:has(.esc-logo__beyaz) .esc-logo__ana{ display:none }
[data-esc-menu="butik"] .esc-govde:has(.esc-s-butik) .esc-header:not([data-dolu]):not(:has(.esc-menu > li:hover > .esc-mega, .esc-menu > li:focus-within > .esc-mega)) .esc-logo .esc-logo__beyaz{ display:block }
[data-esc-menu="butik"] .esc-govde:has(.esc-s-butik) .esc-header:not([data-dolu]):not(:has(.esc-menu > li:hover > .esc-mega, .esc-menu > li:focus-within > .esc-mega)) .esc-logo:not(:has(.esc-logo__beyaz)) .esc-logo__ana{ filter:brightness(0) invert(1) }
/* Şeffafken vurgu rengi (koyu) fotoğrafta kayboluyordu: üzerine gelme beyaz çizgiyle */
[data-esc-menu="butik"] .esc-govde:has(.esc-s-butik) .esc-header:not([data-dolu]) .esc-menu > li:hover > a{ color:inherit; border-bottom-color:currentColor }
[data-esc-menu="butik"] .esc-govde:has(.esc-s-butik) .esc-header:not([data-dolu]) .esc-ikon:hover{ color:inherit; opacity:.7 }
[data-esc-menu="butik"] .esc-mega{ color:var(--esc-metin) }

/* Editoryal slider: kenardan kenara fotoğraf, yazı sol altta */
.esc-s-butik{ background:var(--esc-cizgi-guclu) }
.esc-s-butik__slayt{ position:relative; overflow:hidden; color:#FFFFFF;
  height:min(88vh,900px); min-height:520px }
.esc-s-butik__gorsel, .esc-s-butik__gorsel img{ position:absolute; inset:0; width:100%; height:100% }
.esc-s-butik__gorsel img{ object-fit:cover; object-position:50% 30% }
/* Slayt videosu görselin üstünde; karartma (::after, z 1) ve yazı (z 2) yine üstte kalır */
.esc-s-butik__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:transparent }
/* Videolu giriş ekranın tamamı — 100svh, telefonda adres çubuğu payını da düşer */
.esc-s-butik--video .esc-s-butik__slayt{ height:100vh; height:100svh; min-height:480px }
/* Hareket azaltma tercihinde video hiç gösterilmez, poster görsel kalır */
@media (prefers-reduced-motion:reduce){ .esc-s-butik__video{ display:none } }
.esc-s-butik__slayt::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(15,15,18,.45) 0,rgba(15,15,18,0) 170px),
             linear-gradient(20deg,rgba(15,15,18,.6) 0%,rgba(15,15,18,.12) 50%,rgba(15,15,18,0) 75%) }
.esc-s-butik__yazi{ position:absolute; z-index:2; inset-inline:0; bottom:clamp(3rem,9vh,6rem);
  max-width:min(820px,100%); padding-inline:var(--esc-kenar);
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--esc-b3) }
.esc-s-butik__yazi h1, .esc-s-butik__yazi h2{ color:#FFFFFF; font-weight:400;
  font-size:clamp(2.6rem,1rem + 5.4vw,6rem); line-height:.95; letter-spacing:-.02em; text-wrap:balance }
.esc-s-butik__ust{ font-size:var(--esc-t-mini); letter-spacing:.26em; text-transform:uppercase;
  font-weight:700; opacity:.92 }
.esc-s-butik__link{ display:inline-block; font-size:var(--esc-t-kucuk); font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; padding-bottom:5px;
  border-bottom:1px solid currentColor; transition:opacity var(--esc-gecis) }
.esc-s-butik__link:hover{ opacity:.7 }
.esc-s-butik .esc-slaytnav{ position:absolute; z-index:3; padding:0;
  inset-inline-start:auto; inset-inline-end:var(--esc-kenar); inset-block-end:clamp(3rem,9vh,6rem) }
.esc-s-butik .esc-slaytnav__nokta button{ background:#FFFFFF; opacity:.45 }
.esc-s-butik .esc-slaytnav__nokta button[aria-current="true"]{ opacity:1 }
.esc-s-butik .esc-slaytnav__ok button{ background:transparent; color:#FFFFFF; border-color:rgba(255,255,255,.55) }
.esc-s-butik .esc-slaytnav__ok button:hover{ background:#FFFFFF; color:#1C1D21; border-color:#FFFFFF }
@media (max-width:980px){
  .esc-s-butik__slayt{ height:min(82vh,760px); min-height:480px }
  .esc-s-butik .esc-slaytnav__ok{ display:none }
  .esc-s-butik .esc-slaytnav{ inset-block-end:var(--esc-b3) }
}

/* Koleksiyon kartları: ikişerli dikey, ortada geniş harf aralıklı başlık */
.esc-koleksiyon{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;
  padding:var(--esc-b6) 10px 0 }
.esc-koleksiyon__kart{ position:relative; display:block; overflow:hidden; color:#FFFFFF }
.esc-koleksiyon__kart .esc-gorsel{ --esc-oran:4/5 }
.esc-koleksiyon__kart .esc-gorsel > img{ transition:transform 1.2s cubic-bezier(.22,.61,.36,1) }
.esc-koleksiyon__kart:hover .esc-gorsel > img{ transform:scale(1.04) }
.esc-koleksiyon__kart::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(0deg,rgba(15,15,18,.58) 0%,rgba(15,15,18,0) 50%) }
.esc-koleksiyon__yazi{ position:absolute; z-index:2; inset-inline:0; bottom:clamp(1.75rem,5vw,3.5rem);
  display:flex; flex-direction:column; align-items:center; gap:var(--esc-b2);
  padding-inline:var(--esc-b3); text-align:center }
.esc-koleksiyon__yazi h3{ font-family:var(--esc-f-govde); font-weight:300; color:#FFFFFF;
  font-size:clamp(1.35rem,.9rem + 1.8vw,2.4rem); letter-spacing:.14em; text-transform:uppercase; line-height:1.15 }
.esc-koleksiyon__yazi span{ font-size:var(--esc-t-mini); font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; padding-bottom:4px; border-bottom:1px solid currentColor }
@media (max-width:640px){ .esc-koleksiyon{ grid-template-columns:1fr } }

/* Kampanya bandı: neredeyse kenardan kenara fotoğraf, solda iri başlık, sağda metin */
.esc-bant{ position:relative; overflow:hidden; color:#FFFFFF; margin:10px 10px 0;
  background:var(--esc-cizgi-guclu) }
.esc-bant .esc-gorsel{ --esc-oran:21/9; min-height:440px; max-width:100% }
.esc-bant::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:rgba(15,15,18,.4) }
.esc-bant__yazi{ position:absolute; z-index:2; inset:auto 0 0 0; display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--esc-b4); align-items:end;
  padding:clamp(2rem,5vw,4rem) var(--esc-kenar) }
.esc-bant__yazi h2{ color:#FFFFFF; font-weight:400; font-size:clamp(2.4rem,1rem + 4.6vw,5.25rem);
  line-height:.95; letter-spacing:-.02em; text-wrap:balance }
.esc-bant__sag{ justify-self:end; max-width:46ch; display:flex; flex-direction:column;
  align-items:flex-start; gap:var(--esc-b3) }
.esc-bant__sag p{ color:rgba(255,255,255,.88) }
@media (max-width:820px){
  .esc-bant .esc-gorsel{ --esc-oran:4/5; min-height:0 }
  .esc-bant__yazi{ grid-template-columns:1fr; gap:var(--esc-b3) }
  .esc-bant__sag{ justify-self:start }
}

/* Ürün kartı: üzerine gelince ikinci kare (her escMedya kartında) */
.esc-urun__gorsel img.esc-urun__ikinci{ position:absolute; inset:0; opacity:0;
  transition:opacity 500ms ease, transform 700ms cubic-bezier(.22,.61,.36,1) }
@media (hover:hover){ .esc-urun:hover .esc-urun__gorsel img.esc-urun__ikinci{ opacity:1 } }

/* Butik menüde lookbook noktası "+" düğmesi; ürün adı üzerine gelince açılır */
[data-esc-menu="butik"] .esc-lookbook__nokta{ width:32px; height:32px; padding:0;
  justify-content:center; border-radius:50%; background:#FFFFFF; color:#1C1D21;
  box-shadow:0 0 0 0 rgba(255,255,255,.6); animation:esc-nabiz 2.6s infinite }
[data-esc-menu="butik"] .esc-lookbook__nokta::before{ content:"+"; width:auto; height:auto;
  background:none; font-size:20px; font-weight:400; line-height:1 }
/* Kare taşmaya kapalı ve etiket satır kırar: uzun ürün adı tek satırda 430px'e uzanıp
   (gizliyken bile) sayfayı yana kaydırıyordu (giyim-v3, 2026-10-26). */
[data-esc-menu="butik"] .esc-lookbook__kare{ overflow:hidden }
[data-esc-menu="butik"] .esc-lookbook__etiket{ position:absolute; bottom:calc(100% + 10px);
  left:50%; transform:translate(-50%,4px); padding:.5rem .75rem; background:var(--esc-zemin);
  color:var(--esc-metin); width:max-content; max-width:min(240px,60vw); white-space:normal;
  line-height:1.35; box-shadow:0 8px 22px rgba(0,0,0,.18);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--esc-gecis),transform var(--esc-gecis),visibility var(--esc-gecis) }
[data-esc-menu="butik"] .esc-lookbook__nokta:hover .esc-lookbook__etiket,
[data-esc-menu="butik"] .esc-lookbook__nokta:focus-visible .esc-lookbook__etiket{
  opacity:1; visibility:visible; transform:translate(-50%,0) }
@keyframes esc-nabiz{ 70%{ box-shadow:0 0 0 12px rgba(255,255,255,0) } 100%{ box-shadow:0 0 0 0 rgba(255,255,255,0) } }
@media (prefers-reduced-motion:reduce){ [data-esc-menu="butik"] .esc-lookbook__nokta{ animation:none } }

/* ── Oda sahnesi (Lookbook, StilAyar gorunum "oda" / "oda-koyu") ─────────────
   Sekmeli odalar, yatay 3:2 tek sahne, numaralı noktalar + aynı numaralı ürün listesi.
   Oran sabit: nokta konumu yüzde, kırpma ekrana göre değişseydi nokta üründen kayardı. */
.esc-oda--koyu{ --esc-zemin:#121318; --esc-zemin-alt:#1B1D24; --esc-metin:#F1EDE6;
  --esc-metin-soluk:#A39D93; --esc-cizgi:#2C2F38; --esc-cizgi-guclu:#F1EDE6;
  /* Sitenin vurgusu (çoğu zaman koyu) bu zeminde kaybolur; sıcak ampul tonu */
  --esc-vurgu:#E6A867; --esc-vurgu-metin:#15161A;
  background:var(--esc-zemin); color:var(--esc-metin) }
.esc-oda--koyu .esc-baslik{ color:var(--esc-metin) }
.esc-oda__sekmeler{ display:flex; gap:var(--esc-b4); overflow-x:auto; scrollbar-width:none;
  border-bottom:1px solid var(--esc-cizgi); margin-bottom:var(--esc-b4) }
.esc-oda__sekmeler::-webkit-scrollbar{ display:none }
/* .esc-oda öneki: `.esc-tema button{border:0;color:inherit}` (0-1-1) tek sınıfı eziyordu */
.esc-oda .esc-oda__sekme{ flex:none; padding:0 0 var(--esc-b2); background:none; border:0;
  border-bottom:2px solid transparent; margin-bottom:-1px; color:var(--esc-metin-soluk);
  font:inherit; font-size:var(--esc-t-kucuk); font-weight:700; letter-spacing:var(--esc-iz-mini);
  text-transform:uppercase; cursor:pointer; transition:color var(--esc-gecis),border-color var(--esc-gecis) }
.esc-oda .esc-oda__sekme[aria-selected="true"]{ color:var(--esc-metin); border-bottom-color:var(--esc-cizgi-guclu) }
.esc-oda .esc-oda__sekme:hover{ color:var(--esc-metin) }
.esc-oda__panel{ display:grid; grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);
  gap:var(--esc-b4); align-items:start }
.esc-oda__panel[hidden]{ display:none }
.esc-oda__sahne{ position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--esc-zemin-alt) }
.esc-oda__sahne > img{ width:100%; height:100%; object-fit:cover; display:block }
.esc-oda__nokta{ position:absolute; z-index:2; transform:translate(-50%,-50%); width:34px; height:34px;
  border-radius:50%; display:grid; place-items:center; background:#FFFFFF; color:#15161A;
  font-size:13px; font-weight:800; text-decoration:none;
  box-shadow:0 0 0 0 rgba(255,255,255,.6); animation:esc-nabiz 2.6s infinite }
.esc-oda__nokta--aktif,.esc-oda__nokta:hover,.esc-oda__nokta:focus-visible{
  background:var(--esc-vurgu); color:var(--esc-vurgu-metin); animation:none; z-index:3 }
.esc-oda__etiket{ position:absolute; bottom:calc(100% + 10px); left:50%; transform:translate(-50%,4px);
  width:max-content; max-width:min(240px,55vw); padding:.55rem .8rem; background:#FFFFFF; color:#15161A;
  font-size:var(--esc-t-kucuk); font-weight:600; line-height:1.35; text-align:left;
  box-shadow:0 10px 26px rgba(0,0,0,.22); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--esc-gecis),transform var(--esc-gecis),visibility var(--esc-gecis) }
.esc-oda__etiket b{ display:block; margin-top:.15rem; font-variant-numeric:tabular-nums }
.esc-oda__nokta--sag .esc-oda__etiket{ left:auto; right:-6px; transform:translateY(4px) }
.esc-oda__nokta--sol .esc-oda__etiket{ left:-6px; transform:translateY(4px) }
.esc-oda__nokta--alt .esc-oda__etiket{ bottom:auto; top:calc(100% + 10px) }
.esc-oda__nokta:hover .esc-oda__etiket,.esc-oda__nokta:focus-visible .esc-oda__etiket,
.esc-oda__nokta--aktif .esc-oda__etiket{ opacity:1; visibility:visible; transform:translate(-50%,0) }
.esc-oda__nokta--sag:hover .esc-oda__etiket,.esc-oda__nokta--sag:focus-visible .esc-oda__etiket,.esc-oda__nokta--sag.esc-oda__nokta--aktif .esc-oda__etiket,
.esc-oda__nokta--sol:hover .esc-oda__etiket,.esc-oda__nokta--sol:focus-visible .esc-oda__etiket,.esc-oda__nokta--sol.esc-oda__nokta--aktif .esc-oda__etiket{ transform:none }
.esc-oda__liste{ display:flex; flex-direction:column; gap:var(--esc-b2) }
.esc-oda__urun{ display:grid; grid-template-columns:auto 64px minmax(0,1fr); gap:var(--esc-b2);
  align-items:center; padding:var(--esc-b2); border:1px solid var(--esc-cizgi); color:inherit;
  text-decoration:none; transition:border-color var(--esc-gecis),background var(--esc-gecis) }
.esc-oda__urun:hover{ border-color:var(--esc-cizgi-guclu); background:var(--esc-zemin-alt) }
.esc-oda__no{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  border:1px solid currentColor; font-size:var(--esc-t-mini); font-weight:800 }
.esc-oda__kucuk{ width:64px; aspect-ratio:1; overflow:hidden; background:var(--esc-zemin-alt) }
.esc-oda__kucuk img{ width:100%; height:100%; object-fit:cover; display:block }
.esc-oda__ad{ font-size:var(--esc-t-kucuk); line-height:1.35; min-width:0 }
.esc-oda__adyazi{ overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical }
.esc-oda__ad b{ display:block; margin-top:.2rem; font-variant-numeric:tabular-nums }
@media (max-width:900px){
  .esc-oda__panel{ grid-template-columns:1fr; gap:var(--esc-b3) }
  /* Telefonda liste yatay şerit; etiketler kapalı — dokunuş doğrudan ürüne gider, numara listeyle eşleşir */
  .esc-oda__liste{ flex-direction:row; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none }
  .esc-oda__liste::-webkit-scrollbar{ display:none }
  .esc-oda__liste > .esc-ustyazi{ display:none }
  .esc-oda__urun{ flex:0 0 min(78vw,300px); scroll-snap-align:start }
  .esc-oda__nokta{ width:28px; height:28px; font-size:12px }
  .esc-oda__etiket{ display:none }
}
@media (prefers-reduced-motion:reduce){ .esc-oda__nokta{ animation:none } }

/* Ürün detayı (hâlâ ecomus işaretlemesi): yapışkan "Sepete Ekle" çubuğu.
   Ecomus ≤1149px'te çubuğu kendi alt menüsünün (tf-toolbar-bottom) üstüne oturtmak için
   bottom:67px veriyor. escMedya'da o menü yok; gizliyken translateY(100%) yalnız 58px
   aşağı itiyor, çubuk 67px yukarıda kaldığı için sayfa açılır açılmaz görünüyordu
   (Venüs, 2026-10-27). Ana buton ekrandan çıkınca .show ile yine açılıyor (Urun/Detay). */
.esc-govde .tf-sticky-btn-atc{ bottom:0; padding-bottom:env(safe-area-inset-bottom) }