/* ====================================================
   FANTAZI — GLOBAL STİLLER
   Her sayfada kullanılan ortak stiller:
   değişkenler, reset, tipografi, buton, grid, overlay,
   ikon, topbar, header, nav, footer.
   Sayfaya özel stiller ayrı dosyalarda (anasayfa.css vb.)
   ==================================================== */

/* ====================================================
   FONTLAR (Gilroy gövde + Samsung Sharp Sans başlık)
   ==================================================== */
@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-Semibold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/Gilroy-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Samsung Sharp Sans';
  src: url('../fonts/SamsungSharpSans-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ====================================================
   TASARIM TOKEN'LARI — tüm değerler burada, tek yerden.
   Hiçbir yerde sabit değer kullanma; her zaman var(--...).
   ==================================================== */
:root {
  /* ====================================================
     PALET: "Şarap Butonlu" — beyaz tema + koyu şarap butonlar
     + gül/nude aksanlar. (Altın YOK.)
     Semantik isimler aşağıda; eski isimler (bordo/altın/krem)
     geriye dönük uyumluluk için yeni palete eşlendi.
     ==================================================== */

  /* --- Ana renkler (semantik) --- */
  --renk-koyu:         #5e2337;   /* koyu şarap — butonlar, koyu aksiyonlar */
  --renk-koyu-2:       #4a1a2b;   /* daha koyu şarap — hover */
  --renk-marka:        #b0526a;   /* gül — link, fiyat, vurgu */
  --renk-nude:         #ecbcc0;   /* pudra — yumuşak aksan zeminler */
  --renk-nude-koyu:    #d492a0;   /* koyu pudra */
  --renk-soft:         #fbf5f3;   /* soft nude zemin */
  --renk-beyaz:        #ffffff;
  --renk-metin:        #3c2530;
  --renk-metin-soft:   #9c8188;   /* ikincil metin */
  --renk-cizgi:        #f0e3e3;   /* açık çizgi/kenarlık */
  --renk-gri:          #9c8188;
  --renk-gri-acik:     #f0e3e3;

  /* --- Eski isim → yeni palet eşlemesi (geriye dönük uyum) --- */
  --renk-bordo:        var(--renk-koyu);      /* butonlar ana koyu */
  --renk-bordo-koyu:   var(--renk-koyu-2);
  --renk-altin:        var(--renk-marka);     /* eski "altın vurgu" → gül */
  --renk-altin-acik:   var(--renk-nude);
  --renk-krem:         var(--renk-soft);
  --renk-siyah:        #2a1922;               /* sıcak koyu (görsel zeminleri) */

  /* Footer panel tonları */
  --renk-panel:        #fbf5f3;   /* büyük kart arka planı */
  --renk-panel-2:      #f5e9e8;   /* iç bloklar / ikon zeminleri */

  /* Yardımcı / opak renkler */
  --renk-beyaz-85:     rgba(255, 255, 255, .85);
  --renk-krem-70:      rgba(251, 245, 243, .75);
  --renk-krem-60:      rgba(251, 245, 243, .6);
  --renk-cizgi-koyu:   rgba(255, 255, 255, .12);

  /* İletişim ikon renkleri */
  --renk-wa:           #25b96a;
  --renk-phone:        #6f5bd6;
  --renk-mail:         #3ba7e0;
  --renk-pin:          #e07b3b;

  /* Durum renkleri */
  --renk-hata:         #c0392b;   /* sil/tehlike aksiyonu */
  --renk-hata-koyu:    #a5281c;   /* hover */

  /* --- Font aileleri (Bayigram: Gilroy gövde, Samsung Sharp Sans başlık) --- */
  --font:         'Gilroy', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-baslik:  'Samsung Sharp Sans', 'Gilroy', system-ui, sans-serif;

  /* --- Font boyutları (16px root; Bayigram rem değerleri) --- */
  --fs-11: 11px;
  --fs-12: 12px;      /* .75rem  */
  --fs-13: 13px;      /* .8125rem */
  --fs-14: 14px;      /* .875rem */
  --fs-15: 15px;      /* .9375rem */
  --fs-16: 16px;      /* 1rem — body */
  --fs-18: 18px;      /* 1.125rem */
  --fs-20: 20px;      /* 1.25rem */
  --fs-24: 24px;      /* 1.5rem */
  --fs-26: 26px;      /* 1.625rem — h3 / bölüm başlığı */
  --fs-28: 28px;      /* 1.75rem  — h2 */
  --fs-30: 30px;
  --fs-38: 38px;      /* 2.375rem — hero */
  --fs-42: 42px;      /* 2.625rem — h1 */
  --fs-44: 44px;
  --fs-56: 56px;

  /* --- Font ağırlıkları (Bayigram) --- */
  --fw-light:    300;
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  /* --- Line-height (Bayigram: başlık 1.2–1.3, gövde 1.4) --- */
  --lh-baslik: 1.25;
  --lh-govde:  1.4;
  --lh-sik:    1.2;

  /* --- Spacing --- */
  --space-4:  4px;
  --space-8:  8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  /* Mobil floating pill alt navbar: iç yükseklik + alttan boşluk (sheet/panel/ust boşluk hesapları buradan) */
  --botnav-h: 62px;
  --botnav-gap: var(--space-12);
  --space-28: 28px;
  --space-30: 30px;
  --space-32: 32px;
  --space-36: 36px;
  --space-44: 44px;
  --space-54: 54px;
  --space-56: 56px;
  --space-64: 64px;

  /* --- Radius / shadow / transition --- */
  --radius:       10px;
  --radius-pill:  20px;
  --radius-full:  50%;
  --shadow:       0 8px 24px rgba(0, 0, 0, .08);
  --shadow-hover: 0 14px 34px rgba(122, 18, 48, .18);
  --transition:   .25s ease;

  /* --- İkon boyutları --- */
  --icon-sm: 18px;
  --icon-md: 22px;
  --icon-lg: 28px;

  /* --- Grid --- */
  --container-max:      1280px;
  --container-pad:      30px;   /* masaüstü */
  --container-pad-mob:  24px;   /* mobil */
  --grid-gap:           24px;   /* masaüstü */
  --grid-gap-mob:       12px;   /* mobil */

  /* Sticky elemanların üst boşluğu (headbar+nav yüksekliği + pay).
     Aşağı kayınca topbar gizlendiği için header ~bu kadar. */
  --sticky-top: 145px;
}

/* ====================================================
   RESET
   ==================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

/* Ekran okuyucular için erişilebilir, görsel olarak gizli (SEO'da meşru kabul edilir —
   display:none/visibility:hidden'dan farklı olarak içerik DOM'da render edilir) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html {
  font-size: 16px;
  background: var(--renk-beyaz);
  overflow-y: scroll;   /* scrollbar hep görünür: body sabitlenince (scroll kilidi)
                           içerik genişliği değişmez, zıplama olmaz */
}

body {
  font-family: var(--font);
  font-weight: var(--fw-normal);
  font-size: var(--fs-16);
  line-height: var(--lh-govde);
  color: var(--renk-metin);
  background: var(--renk-beyaz);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* NOT: body'ye overflow-x:hidden KOYMA — sticky header'ı bozar.
     Yatay taşma riski drawer'larda ele alınır (fixed + gölge .is-open'da). */
}

/* ====================================================
   TİPOGRAFİ  (Bayigram değerleriyle — masaüstü)
   Başlıklar: Samsung Sharp Sans | Gövde: Gilroy
   ==================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-baslik);
  line-height: var(--lh-baslik);
  color: var(--renk-metin);
  font-weight: var(--fw-bold);
}
h1 { font-size: var(--fs-42); font-weight: var(--fw-semibold); line-height: var(--lh-sik); }
h2 { font-size: var(--fs-28); font-weight: var(--fw-bold); line-height: 1.3; }
h3 { font-size: var(--fs-26); font-weight: var(--fw-semibold); line-height: 1.3; }
h4 { font-size: var(--fs-20); font-weight: var(--fw-semibold); }
h5 { font-size: var(--fs-18); font-weight: var(--fw-semibold); }
h6 { font-size: var(--fs-16); font-weight: var(--fw-semibold); }

p  { font-size: var(--fs-16); line-height: var(--lh-govde); }

strong, b { font-weight: var(--fw-semibold); }

small { font-size: var(--fs-14); }

a { text-decoration: none; color: inherit; transition: color var(--transition); }

ul, ol { list-style: none; }
li { font-size: var(--fs-16); line-height: var(--lh-govde); }

button { font-family: inherit; background: none; border: none; color: inherit; }

/* Form elemanları: iOS Safari, 16px altı input'a odaklanınca sayfayı
   otomatik zoomlar. Bunu önlemek için min 16px. */
input, textarea, select { font-size: 16px; }

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

/* --- Tipografi: mobil (Bayigram: gövde 14px, başlıklar küçülür) --- */
@media (max-width: 1023px) {
  body, p, li { font-size: var(--fs-14); }
  h1 { font-size: var(--fs-30); }
  h2 { font-size: var(--fs-24); }
  h3 { font-size: var(--fs-20); }
  h4 { font-size: var(--fs-18); }
  h5 { font-size: var(--fs-16); }
  h6 { font-size: var(--fs-14); }
}
@media (max-width: 600px) {
  body, p, li { font-size: var(--fs-14); }
  h1 { font-size: var(--fs-26); }
}

/* ====================================================
   İKON (SVG sprite)
   Kullanım:
   <svg class="icon"><use href="icons/sprite.svg#icon-cart"></use></svg>
   Renk currentColor'dan gelir; boyut --icon-* ile ayarlanır.
   ==================================================== */
.icon {
  width: var(--icon-md);
  height: var(--icon-md);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon--lg { width: var(--icon-lg); height: var(--icon-lg); }

/* ====================================================
   12 KOLONLU GRID SİSTEMİ
   - .container : max-width + padding, HER ekranda geçerli
   - .grid-12   : display:grid, kolonlar, gap — breakpoint'e göre
   ==================================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.grid-12 { width: 100%; }

/* ====================================================
   BUTONLAR
   ==================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: var(--space-12) var(--space-28, 28px);
  border: none;
  border-radius: var(--radius);
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
  line-height: 1;
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
}
.btn--primary { background: var(--renk-bordo); color: var(--renk-beyaz); }
.btn--primary:hover { background: var(--renk-bordo-koyu); transform: translateY(-2px); }
.btn--outline {
  background: transparent;
  color: var(--renk-bordo);
  border: 1.5px solid var(--renk-bordo);
}
.btn--outline:hover { background: var(--renk-bordo); color: var(--renk-beyaz); }
.btn--danger { background: var(--renk-hata); color: var(--renk-beyaz); }
.btn--danger:hover { background: var(--renk-hata-koyu); transform: translateY(-2px); }
.btn--block { width: 100%; }

/* ====================================================
   BÖLÜM BAŞLIĞI (ortak)
   ==================================================== */
.section-title {
  font-size: var(--fs-30);
  font-weight: var(--fw-extra);
  text-align: center;
  margin: var(--space-56) 0 var(--space-32);
  position: relative;
}
.section-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: var(--renk-altin);
  margin: var(--space-12) auto 0;
  border-radius: 2px;
}

/* ====================================================
   HEADER  (sticky: topbar + headbar + nav birlikte)
   ==================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--renk-beyaz);
  border-bottom: 1px solid var(--renk-cizgi);
}

/* --- Üst şerit --- */
.topbar {
  background: var(--renk-koyu);
  color: var(--renk-krem);
  font-size: var(--fs-13);
  overflow: hidden;
  max-height: 60px;              /* açık hal */
  transition: max-height .3s ease, opacity .25s ease;
}
/* Sayfa aşağı kayınca topbar gizlenir (header.is-scrolled) */
.header.is-scrolled .topbar {
  max-height: 0;
  opacity: 0;
}
/* Topbar 12 kolonlu grid'e oturur: sol blok 1/7, sağ blok 7/13.
   .container padding'i dış div'den gelir; .topbar__inner grid-12'dir. */
.topbar__inner {
  align-items: center;
  padding: var(--space-8) 0;
}
.topbar__left {
  grid-column: 1 / 7;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-20);
}
.topbar__item { display: inline-flex; align-items: center; gap: 7px; color: var(--renk-krem-70); white-space: nowrap; }
.topbar__item .icon { color: var(--renk-nude); }
.topbar__right {
  grid-column: 7 / 13;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-18);
}
.topbar__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  color: var(--renk-krem-70);
  transition: var(--transition);
}
.topbar__link .icon { color: var(--renk-nude); }
.topbar__link:hover { color: var(--renk-beyaz); }

/* Mobil topbar (Yardım | slider | Sipariş Takibi) — masaüstünde gizli */
.topbar__mobile { display: none; }

/* --- Logo (PNG/SVG görsel) --- */
.logo {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.logo img { height: 48px; width: auto; display: block; }

/* --- Ana bar --- */
.headbar { padding: var(--space-18) 0; }
.headbar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}
.headbar__menu-btn {
  display: none;                 /* sadece mobil */
  background: none;
  border: none;
  cursor: pointer;
  color: var(--renk-koyu);
  padding: 0;
}

/* Arama */
.search {
  flex: 1;
  display: flex;
  align-items: center;
  max-width: 640px;
  background: var(--renk-soft);
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--radius);
  padding-left: var(--space-14);
  transition: var(--transition);
}
.search:focus-within { border-color: var(--renk-marka); background: var(--renk-beyaz); }
.search__ic { color: var(--renk-metin-soft); flex-shrink: 0; }
.search input {
  flex: 1;
  padding: 12px var(--space-12);
  border: none;
  background: none;
  font-size: var(--fs-16);   /* iOS zoom önleme: min 16px */
  font-family: var(--font);
  color: var(--renk-metin);
  outline: none;
}
.search button {
  padding: 10px var(--space-20);
  margin: 4px;
  border: none;
  background: var(--renk-koyu);
  color: var(--renk-beyaz);
  border-radius: 7px;
  cursor: pointer;
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  font-family: var(--font);
  transition: var(--transition);
}
.search button:hover { background: var(--renk-koyu-2); }

/* Aksiyonlar (hesap/favori/sepet) */
.headbar__actions { display: flex; align-items: center; gap: var(--space-8); margin-left: auto; }
.headact {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius);
  color: var(--renk-metin);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  text-align: left;
  transition: var(--transition);
}
.headact:hover { background: var(--renk-soft); }
.headact--search-mobile { display: none; }   /* sadece mobilde görünür */
.headact__ic { position: relative; display: inline-flex; color: var(--renk-koyu); }
.headact__badge {
  position: absolute;
  top: -8px;
  right: -9px;
  background: var(--renk-marka);
  color: var(--renk-beyaz);
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-4);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.headact__txt { display: flex; flex-direction: column; line-height: 1.2; }
.headact__txt em { font-style: normal; font-size: var(--fs-12); color: var(--renk-metin-soft); }
.headact__txt strong { font-size: var(--fs-14); font-weight: var(--fw-semibold); }

/* --- Kategori menüsü --- */
.nav {
  border-top: 1px solid var(--renk-cizgi);
  background: var(--renk-beyaz);
}
.nav .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); }
.nav__list { display: flex; align-items: center; gap: 2px; }
.nav__link {
  display: block;
  padding: var(--space-14) var(--space-14);
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
  color: var(--renk-metin);
  border-bottom: 2px solid transparent;
  transition: var(--transition);
}
.nav__link:hover { color: var(--renk-marka); border-bottom-color: var(--renk-marka); }
.nav__link--sale { color: var(--renk-marka); }
/* İlk menü item'ı grid'in sol çizgisine hizalansın (sıfıra sıfır) */
.nav__list li:first-child .nav__link { padding-left: 0; }
.nav__promo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: var(--renk-koyu);
  white-space: nowrap;
}
.nav__promo .icon { color: var(--renk-marka); }

/* ====================================================
   HEADER — RESPONSIVE
   ==================================================== */
@media (max-width: 989px) {
  /* Topbar: masaüstü içerik gizli, mobil 3 parçalı görünür.
     .grid-12 mobil kuralı sonra geldiği için daha spesifik seçici gerekir. */
  .topbar .topbar__inner { display: none; }
  .topbar__mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-10);
    height: 40px;
  }
  .topbar__m-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    font-size: var(--fs-12);
    color: var(--renk-krem-70);
    white-space: nowrap;
  }
  .topbar__m-link .icon { color: var(--renk-nude); width: 15px; height: 15px; }

  .topbar__slider {
    position: relative;
    flex: 1;
    height: 100%;
    min-width: 0;
    overflow: hidden;
  }
  .topbar__slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: var(--fs-12);
    color: var(--renk-krem-70);
    white-space: nowrap;
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
  }
  .topbar__slide .icon { color: var(--renk-nude); width: 15px; height: 15px; }
  .topbar__slide.is-active { opacity: 1; }

  .headbar__menu-btn { display: inline-flex; flex-shrink: 0; }
  /* row-gap 0: kapalı arama kutusu alt satırda boşluk bırakmasın.
     Açık kutunun kendi margin-top'u var.
     menu-btn+logo+actions tek satırda kalmalı (search zaten order:4 ile
     ayrı satıra iniyor) — dar ekranlarda (320px gibi) logo genişliği
     actions ile birlikte satıra sığmayabildiği için logo küçültülüp
     flex-shrink ile esnetiliyor. */
  .headbar__inner { column-gap: var(--space-10); row-gap: 0; flex-wrap: wrap; }
  .logo { flex-shrink: 1; min-width: 0; overflow: hidden; }
  .logo img { height: 22px; max-width: 100%; }
  .headbar__actions { flex-shrink: 0; }
  .headact__txt { display: none; }        /* mobilde sadece ikon */
  .headact { padding: var(--space-8); }
  .headact--search-mobile { display: inline-flex; }
  .headbar__actions a[aria-label="Favoriler"] { display: none; }  /* mobilde header'da yer kazanmak için gizli — botnav'da hâlâ erişilebilir */
  .nav { display: none; }                 /* mobilde menü gizli (hamburger) */

  /* Arama kutusu: başta kapalı, ikon tıklanınca aşağı açılır (slide-down) */
  .search {
    order: 4;
    flex-basis: 100%;
    max-width: none;
    /* kapalı hal */
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    overflow: hidden;
    transition: max-height .3s ease, opacity .25s ease, margin-top .3s ease;
  }
  .headbar.search-open .search {
    max-height: 60px;
    opacity: 1;
    margin-top: var(--space-14);
    border-width: 1px;
  }
}

/* ====================================================
   FOOTER  (açık tema — tasarımın yapısıyla)
   ==================================================== */
.footer {
  background: var(--renk-beyaz);
  color: var(--renk-metin);
  padding-top: var(--space-44);
  border-top: 1px solid var(--renk-cizgi);
}

/* --- 1) Üst satır: logo + sosyal --- */
.footer-top {
  align-items: center;
  padding-bottom: var(--space-32);
}
.footer-brand {
  grid-column: 1 / 7;
  display: flex;
  align-items: center;
  gap: var(--space-16);          /* logo → çizgi (not'un padding-left'iyle eşit) */
}
.footer-brand__note {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  border-left: 2px solid var(--renk-cizgi);
  padding-left: var(--space-16); /* çizgi → yazı */
}
.footer-brand__note-eyebrow {
  font-size: var(--fs-11);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--renk-metin-soft);
}
.footer-brand__note-title {
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  color: var(--renk-bordo);
}

.footer-social {
  grid-column: 7 / 13;
  display: flex;
  justify-content: flex-end;
  gap: var(--space-10);
}
.footer-social a {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  background: var(--renk-soft);
  border: 1px solid var(--renk-cizgi);
  color: var(--renk-metin);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.footer-social a:hover {
  background: var(--renk-koyu);
  border-color: var(--renk-koyu);
  color: var(--renk-beyaz);
  transform: translateY(-2px);
}

/* --- 2) Büyük panel ---
   Yüzey sistemi: panel zemini BEYAZ, içindeki kutular SOFT. */
.footer-panel {
  background: var(--renk-beyaz);
  border: 1px solid var(--renk-cizgi);
  border-radius: 18px;
  padding: var(--space-30);
}
/* ====================================================
   SEKME ŞERİDİ (masaüstü) / AKORDEON (mobil)
   Masaüstü: başlıklar .footer-tabbar içinde yatay scroll'lu şerit
   (JS taşır). Aktif panel + görsel altta .footer-acc grid'inde.
   Mobil: başlıklar panellerin içine döner, akordeon olur.
   ==================================================== */

/* Tabbar mobilde boş/gizli (başlıklar panellerde) */
.footer-tabbar { display: none; }

/* --- MASAÜSTÜ --- */
@media (min-width: 990px) {
  /* Tab şeridi: yatay, sığmazsa scroll + sürüklenebilir */
  .footer-tabbar {
    display: flex;
    gap: var(--space-8);
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--renk-cizgi);
    margin-bottom: var(--space-32);
    cursor: grab;
    scroll-behavior: smooth;
  }
  .footer-tabbar::-webkit-scrollbar { display: none; }
  .footer-tabbar.is-dragging { cursor: grabbing; scroll-behavior: auto; }

  /* Tab başlığı — doğal genişlikte, aktif border kendi altında */
  .footer-tabbar .facc__head {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    white-space: nowrap;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-12) var(--space-16);
    margin-bottom: -1px;                 /* alt çizgiyle hizala */
    font-size: var(--fs-13);
    font-weight: var(--fw-bold);
    letter-spacing: .2px;
    color: var(--renk-metin-soft);
    border-bottom: 2px solid transparent;
    transition: color var(--transition), border-color var(--transition);
    user-select: none;
  }
  .footer-tabbar .facc__head .facc__title { display: inline-flex; align-items: center; gap: var(--space-8); }
  .footer-tabbar .facc__head .icon { width: 16px; height: 16px; flex-shrink: 0; }
  .footer-tabbar .facc__chev { display: none; }
  .footer-tabbar .facc__head:hover { color: var(--renk-metin); }
  .footer-tabbar .facc.is-active .facc__head,
  .footer-tabbar .facc__head[aria-expanded="true"] {
    color: var(--renk-koyu);
    border-bottom-color: var(--renk-koyu);
  }

  /* Paneller + görsel: alt grid */
  .footer-acc {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--grid-gap);
  }
  .facc { display: contents; }
  .facc__panel { display: none; }
  .facc.is-active .facc__panel {
    display: block;
    grid-column: 1 / 13;
  }
  .footer-acc[data-active="kurumsal"] .facc.is-active .facc__panel {
    grid-column: 1 / 9;
  }
  /* Görsel: SADECE Kurumsal aktifken görünür */
  .footer-visual { display: none; }
  .footer-acc[data-active="kurumsal"] .footer-visual {
    display: block;
    grid-column: 9 / 13;
  }
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* 2x2 düzen */
  gap: var(--space-16);
  margin-bottom: var(--space-32);
  align-items: stretch;            /* kartlar eşit yükseklikte */
}
/* Kurumsal link kartı — yüzey sistemi: SOFT kutu + çizgi kenarlık.
   (pill'ler ve tüm kutularla aynı zemin/kenarlık.) */
.flink {
  display: flex;                   /* ikon solda | başlık+açıklama sağda */
  align-items: center;
  gap: var(--space-16);
  height: 100%;                    /* grid hücresini tam doldur */
  padding: var(--space-18);
  background: var(--renk-soft);
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--radius);
  transition: var(--transition);
}
.flink:hover { border-color: var(--renk-nude); }
.flink__ic {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  background: var(--renk-beyaz);
  color: var(--renk-marka);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--transition);
}
.flink:hover .flink__ic { background: var(--renk-marka); color: var(--renk-beyaz); }
.flink__txt strong { display: block; font-size: var(--fs-18); margin-bottom: 4px; }
.flink__txt em { font-style: normal; font-size: var(--fs-14); color: var(--renk-metin-soft); }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-24);
  padding-top: var(--space-24);
  border-top: 1px solid var(--renk-cizgi);
}
.footer-legal a {
  font-size: var(--fs-14);
  color: var(--renk-metin-soft);
  transition: var(--transition);
}
.footer-legal a:hover { color: var(--renk-bordo); }

/* --- Pill listesi (Kurumsal dışı sekmeler) --- */
.footer-pills {
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* mobil: 2 kolon */
  gap: var(--space-12);
}
.fpill {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-14) var(--space-16);
  background: var(--renk-soft);
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--radius);
  font-size: var(--fs-15);
  font-weight: var(--fw-medium);
  color: var(--renk-metin);
  transition: var(--transition);
}
.fpill::before {
  content: "";
  width: 16px;
  height: 4px;
  border-radius: 999px;
  background: var(--renk-marka);
  flex-shrink: 0;
  transition: var(--transition);
}
.fpill:hover {
  background: var(--renk-beyaz);
  border-color: var(--renk-nude);
  color: var(--renk-marka);
}
.fpill:hover::before { width: 22px; }

/* Masaüstü: 3 kolon */
@media (min-width: 990px) {
  .footer-pills { grid-template-columns: repeat(3, 1fr); }
}

/* Görsel */
.footer-visual { grid-column: 9 / 13; }
.footer-visual__img {
  position: relative;
  height: 100%;
  min-height: 340px;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(150deg, rgba(74,26,43,.85), rgba(26,20,22,.9)), url('../images/urunler/u2.jpg') center/cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-visual__logo img { height: 56px; width: auto; display: block; filter: brightness(0) invert(1); }
.footer-visual__caption {
  position: absolute;
  left: var(--space-18);
  right: var(--space-18);
  bottom: var(--space-16);
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-12);
  color: var(--renk-krem-70);
}

/* --- 3) İletişim satırı --- */
.footer-contact {
  padding: var(--space-44) 0 var(--space-32);
}
.fcontact {
  grid-column: span 3;
  display: flex;
  align-items: center;
  gap: var(--space-14);
  min-width: 0;
}
/* İletişim ikonları — yüzey sistemi: soft pudra kutu + şarap ikon.
   (Tek tip; renk uyumu için farklı renkler KULLANILMAZ.) */
.fcontact__ic {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: var(--renk-soft);
  border: 1px solid var(--renk-cizgi);
  color: var(--renk-koyu);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--transition);
}
.fcontact:hover .fcontact__ic { background: var(--renk-koyu); color: var(--renk-beyaz); border-color: var(--renk-koyu); }
.fcontact__ic .icon  { width: 26px; height: 26px; }
.fcontact__txt { min-width: 0; }
.fcontact__txt strong { display: block; font-size: var(--fs-20); white-space: nowrap; overflow: hidden; }
.fcontact__txt em { font-style: normal; font-size: var(--fs-14); color: var(--renk-metin-soft); }

/* --- 4) Yasal şerit --- */
.footer-notice {
  align-items: center;
  padding: var(--space-24) 0;
  border-top: 1px solid var(--renk-cizgi);
}
.footer-notice__group {
  grid-column: 1 / 9;
  display: flex;
  align-items: center;
  gap: var(--space-16);
}
.footer-notice__badges {
  display: flex;
  gap: var(--space-10);
}
.notice-badge {
  padding: var(--space-10) var(--space-12);
  background: var(--renk-soft);
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--radius);
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  text-align: center;
  line-height: 1.2;
  color: var(--renk-metin-soft);
}
.notice-badge--logo {
  width: auto;
  height: 58px;
  border-radius: 16px;
  background: var(--renk-koyu);
  border: 1px solid var(--renk-koyu);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-14);
}
.notice-badge__img { display: block; height: 48px; width: auto; }
.footer-notice__text {
  font-size: var(--fs-13);
  color: var(--renk-metin-soft);
  white-space: nowrap;
}
.footer-notice__btn {
  grid-column: 10 / 13;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  justify-self: end;
}
.footer-notice .footer-pay {
  grid-column: 9 / 13;
  justify-self: end;
}

/* --- 5) Alt bar --- */
.footer-bottom {
  background: var(--renk-soft);
  border-top: 1px solid var(--renk-cizgi);
  padding: var(--space-24) 0;
}
.footer-bottom__inner { align-items: center; }
.footer-bottom__copy {
  grid-column: 1 / 13;
  text-align: center;
  font-size: var(--fs-13);
  color: var(--renk-metin-soft);
}
.footer-bottom__copy strong { display: block; color: var(--renk-metin); }
.footer-pay {
  grid-column: 8 / 13;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-10);
}
/* Ödeme ikonları — hepsi aynı beyaz kutu + kenarlık, eşit boy (minimal) */
.pay-icon {
  width: 38px;
  height: 23px;
  display: block;
  box-sizing: border-box;
  background: var(--renk-beyaz);
  border: 1px solid var(--renk-cizgi);
  border-radius: 5px;
  padding: 3px 4px;
  object-fit: contain;         /* Troy <img> için */
}

/* --- Footer ARA genişlik (990px – 1279px): kompaktlaştır --- */
@media (min-width: 990px) and (max-width: 1279px) {
  .footer-panel { padding: var(--space-24); }
  .footer-links { gap: var(--space-16); }
  .flink__ic { width: 46px; height: 46px; margin-bottom: var(--space-12); }
  .flink__txt strong { font-size: var(--fs-16); }
  .flink__txt em { font-size: var(--fs-13); }
  /* Yasal linkler tek satırda kalsın */
  .footer-legal { gap: var(--space-14); }
  .footer-legal a { font-size: var(--fs-13); white-space: nowrap; }
  /* İletişim açıklaması tek satırda kalsın */
  .fcontact { gap: var(--space-12); }
  .fcontact__ic { width: 50px; height: 50px; }
  .fcontact__ic .icon { width: 22px; height: 22px; }
  .fcontact__txt strong { font-size: var(--fs-16); }
  .fcontact__txt em { font-size: var(--fs-13); white-space: nowrap; }
}

/* --- Footer responsive (mobil: 6 kolon) --- */
@media (max-width: 989px) {
  .footer-brand    { grid-column: 1 / 7; justify-content: center; }
  .footer-social   { grid-column: 1 / 7; justify-content: center; margin-top: var(--space-16); }

  /* --- AKORDEON (mobil) --- */
  .footer-panel { padding: 0; background: none; border: none; }
  .footer-acc { display: block; }
  .facc {
    display: block;
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--radius);
    background: var(--renk-beyaz);   /* panel zemini beyaz */
    margin-bottom: var(--space-12);
    overflow: hidden;
  }
  .facc__head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-10);
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-18) var(--space-16);
    font-size: var(--fs-14);
    font-weight: var(--fw-bold);
    color: var(--renk-metin);
  }
  .facc__title { display: inline-flex; align-items: center; gap: var(--space-10); }
  .facc__title .icon { color: var(--renk-marka); }
  .facc__chev {
    color: var(--renk-metin-soft);
    transform: rotate(90deg);       /* ok aşağı bakar (kapalı) */
    transition: transform var(--transition);
  }
  .facc.is-active .facc__chev { transform: rotate(-90deg); } /* açık: yukarı */
  .facc.is-active .facc__head { color: var(--renk-marka); }

  .facc__panel { display: none; padding: 0 var(--space-16) var(--space-18); }
  .facc.is-active .facc__panel { display: block; }

  /* Kurumsal link kartları: mobilde de ikon solda | metin sağda (ana kuraldan).
     Dar ekranda tek kolon daha rahat okunur. */
  .footer-links   { grid-template-columns: 1fr; gap: var(--space-12); margin-bottom: var(--space-16); }
  .flink          { padding: var(--space-14); gap: var(--space-12); }
  .flink__ic      { width: 44px; height: 44px; }
  .flink__txt strong { font-size: var(--fs-15); }
  .flink__txt em  { font-size: var(--fs-13); }

  /* Yasal linkler: pill/etiket — yüzey sistemi (soft kutu) */
  .footer-legal   { gap: var(--space-8); justify-content: center; }
  .footer-legal a {
    padding: var(--space-8) var(--space-12);
    background: var(--renk-soft);
    border: 1px solid var(--renk-cizgi);
    border-radius: 999px;
    font-size: var(--fs-13);
    white-space: nowrap;
  }
  .footer-legal a:hover { background: var(--renk-beyaz); border-color: var(--renk-nude); color: var(--renk-marka); }

  /* Görsel: mobilde HER ZAMAN görünür, akordeonun altında tam genişlik */
  .footer-visual   { display: block; margin-top: var(--space-8); }
  .footer-visual__img { min-height: 200px; }

  /* --- İletişim: 2x2 grid, ikon üstte + ortalı, ortada + ayraç ---
     .grid-12 mobil gap kuralını ezmek için .footer-contact.grid-12 (daha spesifik) */
  .footer-contact.grid-12 { row-gap: 0; column-gap: 0; }  /* çizgiler tam + olsun */
  .fcontact {
    grid-column: span 3;            /* 6 kolonda 2 sütun */
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-10);
    padding: var(--space-24) var(--space-12);
  }
  .fcontact__txt { width: 100%; }
  .fcontact__txt strong { font-size: var(--fs-16); }
  /* Ortadaki + ayraç: sağ sütuna sol çizgi, alt satıra üst çizgi */
  .fcontact:nth-child(even) { border-left: 1px solid var(--renk-cizgi); }
  .fcontact:nth-child(n + 3) { border-top: 1px solid var(--renk-cizgi); }

  /* --- Yasal şerit: alt alta --- */
  .footer-notice__group  { grid-column: 1 / 7; flex-direction: column; text-align: center; }
  .footer-notice__text   { margin: var(--space-14) 0 0; white-space: normal; }
  .footer-notice__btn    { grid-column: 1 / 7; justify-self: stretch; }
  .footer-notice .footer-pay { grid-column: 1 / 7; justify-self: stretch; justify-content: center; margin-top: var(--space-16); }

  /* --- Alt bar --- */
  .footer-bottom__copy   { grid-column: 1 / 7; text-align: center; }
  .footer-pay      { grid-column: 1 / 7; justify-content: center; margin-top: var(--space-16); }
}

/* ====================================================
   SAYFA BAŞLIĞI (h1 + breadcrumb + açıklama) — tüm sayfalarda ortak
   Referans: başlık üstte ortalı, breadcrumb hemen altında ortalı.
   Markup sırası (breadcrumb → h1 → p) CSS order ile yeniden dizilir.
   ==================================================== */
.page-head .container {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding-top: var(--space-56); padding-bottom: var(--space-32);
}
.page-head h1 { order: 1; margin: 0; }
.breadcrumb {
  order: 2;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: var(--space-10);
  font-size: var(--fs-14); color: var(--renk-metin-soft);
  margin-top: var(--space-12);
}
.breadcrumb a { color: var(--renk-metin-soft); transition: color var(--transition); }
.breadcrumb a:hover { color: var(--renk-marka); }
.breadcrumb b { color: var(--renk-metin-soft); font-weight: var(--fw-normal); }
.breadcrumb__sep { color: var(--renk-cizgi); }
.page-head p { order: 3; color: var(--renk-metin-soft); max-width: 640px; margin-top: var(--space-14); }

@media (max-width: 989px) {
  .page-head .container { padding-top: var(--space-24); padding-bottom: var(--space-16); }
  .breadcrumb { font-size: var(--fs-13); gap: var(--space-8); margin-top: var(--space-10); }
}

/* ====================================================
   GRID — masaüstü (min-width: 990px): 12 kolon, gap 24px
   ==================================================== */
@media (min-width: 990px) {
  .grid-12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--grid-gap);
  }
}

/* ====================================================
   GRID — mobil (max-width: 989px): 6 kolon, gap 12px
   Container: max-width kalkar, padding 0 24px
   ==================================================== */
@media (max-width: 989px) {
  .container {
    max-width: none;
    padding: 0 var(--container-pad-mob);
  }
  .grid-12 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--grid-gap-mob);
  }
}

/* ====================================================
   GRID DOĞRULAMA OVERLAY'İ  (klavyede "g" ile aç/kapa)
   .container ile birebir aynı ölçüler.
   ==================================================== */
.grid-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  display: none;
}
.grid-overlay__inner {
  width: 100%;
  max-width: var(--container-max);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.grid-overlay__cols { height: 100%; display: grid; }
.grid-overlay__col {
  background: rgba(122, 18, 48, .12);
  border-left: 1px solid rgba(122, 18, 48, .25);
  border-right: 1px solid rgba(122, 18, 48, .25);
}
body.grid-overlay-on .grid-overlay { display: block; }

@media (min-width: 990px) {
  body.grid-overlay-on .grid-overlay__cols {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--grid-gap);
  }
}
@media (max-width: 989px) {
  .grid-overlay__inner {
    max-width: none;
    padding: 0 var(--container-pad-mob);
  }
  body.grid-overlay-on .grid-overlay__cols {
    grid-template-columns: repeat(6, 1fr);
    gap: var(--grid-gap-mob);
  }
  .grid-overlay__col:nth-child(n + 7) { display: none; }
}