/* ==========================================================================
   Yapı İnşaat Malzemeleri — Tema
   --------------------------------------------------------------------------
   İçindekiler
     01  Belirteçler (tokenlar)
     02  Sıfırlama ve temel
     03  Yerleşim
     04  Başlık (header)
     05  Gezinme ve mega menü
     06  Alt bilgi (footer)
     07  Düğmeler
     08  Rozetler ve etiketler
     09  Kartlar
     10  Ürün kartı
     11  Formlar
     12  Tablolar
     13  Kırıntı yolu
     14  Sayfalama
     15  Süzgeç (filtre) paneli
     16  Ürün detay
     17  Bildirimler
     18  Sepet ve ödeme
     19  Müşteri paneli
     20  İçerik sayfaları
     21  Yardımcı sınıflar
     22  Sayfa akışı (yapışkan alt bilgi)
     23  Kimlik sayfaları (giriş / kayıt)
     24  Ana sayfa bileşenleri
     25  Yüzen WhatsApp sohbeti
     26  Duyarlı (responsive)
     27  Bayilik (başvuru, bayi paneli, fiyat listesi, cari)
   ========================================================================== */


/* ==========================================================================
   01  BELİRTEÇLER
   ========================================================================== */

:root {
  /* Marka — sarı vurgu + lacivert koyu yüzey */
  --sari:        #F5A623;
  --sari-koyu:   #DB9109;   /* üzerine gelme */
  --sari-acik:   #FFC352;
  --sari-metin:  #8A5D00;   /* açık zeminde okunabilir sarı metin (4.7:1) */
  --sari-soluk:  rgba(245, 166, 35, 0.12);

  /* Nötr
     Lacivert hem koyu yüzey (üst şerit, gezinme, alt bilgi, koyu düğmeler)
     hem de gövde metni rengidir; beyaz üzerinde 13.9:1 kontrast verir.

     Gri basamakları metin okunabilirliğine göre ayarlanmıştır. Beyaz zeminde
     kontrast oranları: gri-1 9.7:1 · gri-2 7.0:1 · gri-3 5.3:1 · gri-4 4.6:1
     (WCAG AA eşiği 4.5:1). Daha açık basamaklar YALNIZCA çizgi, ayraç ve
     dekoratif ikonlar içindir — küçük metinde kullanılmaz, soluk görünür. */
  --lacivert:        #1B2A3D;
  --lacivert-2:      #16222F;   /* alt bilgi, koyu paneller */
  --lacivert-3:      #223449;   /* koyu zeminde yükseltilmiş kutu */
  --lacivert-hover:  #27374B;
  --gri-1:        #3F3F3F;
  --gri-2:        #565656;
  --gri-3:        #676767;
  --gri-4:        #757575;   /* metin için en açık güvenli ton */
  --gri-5:        #9C9C9C;   /* dekoratif */
  --gri-6:        #A8A8A8;   /* dekoratif */
  --gri-7:        #B8B8B8;   /* dekoratif */

  /* Çizgi ve yüzey */
  --cizgi:        #E6E8EC;
  --cizgi-acik:   #EDEFF2;
  --cizgi-form:   #DFE3E8;
  --cizgi-ince:   #F1F3F5;
  --cizgi-kutu:   #D6DAE0;
  --yuzey:        #F7F8FA;
  --yuzey-2:      #F2F4F7;
  --beyaz:        #FFFFFF;

  /* Durum
     DİKKAT: uyarı tonu marka sarısından AYRI tutulur. Marka sarısı (#F5A623)
     açık zeminde metin olarak okunmaz (2.1:1); rozet ve uyarı metinlerinde
     --uyari kullanılır. İkisini birleştirmeyin. */
  --kirmizi:      #C0392B;
  --kirmizi-soluk:rgba(192, 57, 43, 0.10);
  --yesil:        #2E7D4F;
  --yesil-soluk:  rgba(46, 125, 79, 0.10);
  --mavi:         #2563A8;
  --mavi-soluk:   rgba(37, 99, 168, 0.10);
  --uyari:        #B7791F;
  --uyari-soluk:  rgba(183, 121, 31, 0.12);

  /* Ölçü */
  --kapsayici:    1280px;
  --kenar:        16px;
  --r-kart:       8px;
  --r-dugme:      6px;
  --r-kucuk:      4px;
  --r-tam:        999px;

  /* Gölge — katmanlı (yakın + uzak) gölge daha pahalı bir derinlik verir */
  --golge-kart:   0 1px 2px rgba(27, 42, 61, 0.06), 0 1px 1px rgba(27, 42, 61, 0.04);
  --golge-yukselt:0 4px 14px rgba(27, 42, 61, 0.10), 0 2px 4px rgba(27, 42, 61, 0.05);
  --golge-acilir: 0 12px 32px rgba(27, 42, 61, 0.14), 0 2px 6px rgba(27, 42, 61, 0.06);
  --golge-katman: 0 24px 64px rgba(27, 42, 61, 0.20);
  --golge-dugme:  0 1px 2px rgba(27, 42, 61, 0.18);
  --golge-sari:  0 2px 10px rgba(245, 166, 35, 0.35);

  /* Yazı
     Manrope harici kaynaktan gelir. Yüklenemezse Arial'a düşmek tasarımı
     ucuzlatıyordu; sistem arayüz yazıları öncelikli yedek olarak tanımlandı. */
  --yazi: 'Manrope', 'Segoe UI Variable Text', 'Segoe UI', -apple-system,
          BlinkMacSystemFont, 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Geçiş */
  --gecis: 160ms cubic-bezier(0.4, 0, 0.2, 1);
  --gecis-hizli: 110ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* ==========================================================================
   02  SIFIRLAMA VE TEMEL
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  padding: 0;
  background: var(--beyaz);
  color: var(--lacivert);
  font-family: var(--yazi);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Kerning ve bağlar açık: küçük punto metinde belirgin fark yaratır */
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Uzun URL / e-posta / ürün kodu dar ekranda kutusundan taşmasın */
p, li, dd, dt, td, th, .icerik, .alt-tanim, .urun-ad, .mega-ad { overflow-wrap: anywhere; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.2;
  text-wrap: balance;
}
h1 { letter-spacing: -0.034em; }

/* Fiyat, adet, tarih gibi sayı dizileri sabit genişlikte hizalanır */
.tl, .fiyat, .fiyat-buyuk, .tutar, td.sayi, .ist-deger { font-variant-numeric: tabular-nums; }
p  { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img, svg, video { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

a {
  color: var(--lacivert);
  text-decoration: none;
  transition: color var(--gecis);
}
a:hover { color: var(--sari); }

:focus-visible {
  outline: 2px solid var(--sari);
  outline-offset: 2px;
  border-radius: var(--r-kucuk);
}

::selection { background: var(--sari-soluk); color: var(--lacivert); }

/* İkonlar
   Lucide, <i data-lucide> yer tutucularını <svg> ile değiştirir ve öznitelikleri
   kopyalar; bu yüzden her iki seçici de değişimden sonra geçerli kalır.
   Yer tutucu kutusu şimdiden ayrılır, böylece betik geç yüklendiğinde
   arayüz zıplamaz. */
[data-lucide] { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
svg.lucide {
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  shape-rendering: geometricPrecision;
}

/* Ekran okuyucular için */
.gizli-metin {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Klavye kullanıcıları için içeriğe atlama */
.atla {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 220;   /* mobil çekmeceden (200) yukarıda kalmalı */
  background: var(--lacivert);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--r-dugme) 0;
  font-weight: 700;
}
.atla:focus { left: 0; color: #fff; }


/* ==========================================================================
   03  YERLEŞİM
   ========================================================================== */

.kapsayici {
  width: 100%;
  max-width: var(--kapsayici);
  margin: 0 auto;
  padding: 0 var(--kenar);
}

/* DİKKAT: bu sınıflar ".kapsayici" ile BİRLİKTE kullanılıyor. Kısayol
   "padding: 52px 0 0" yazmak .kapsayici'nın yan boşluğunu (0 16px) sıfırlar
   ve dar ekranda içerik ekran kenarına yapışır. Yalnızca dikey eksen yazılır. */
/* --------------------------------------------------------------------------
   Yan sütunlu düzen — solda içerik, sağda bilgi kartı
   --------------------------------------------------------------------------
   DİKKAT: bu düzen ASLA satır içi style ile kurulmamalı. Satır içi bildirim
   medya sorgularından yüksek önceliklidir ve mobilde tek sütuna inmeyi
   imkânsız kılar; sayfa telefonda ya taşar ya da sol sütun sıfıra çöker.
   -------------------------------------------------------------------------- */
.yan-sutunlu {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 28px;
  align-items: start;
}
.yan-sutunlu-320 { grid-template-columns: 1fr 320px; }
.yan-sutunlu-300 { grid-template-columns: 1fr 300px; }
.yan-sutunlu-genis { gap: 44px; }
.yan-sutunlu-dar   { gap: 20px; }
/* .kart'ın overflow:hidden'ı 1fr izini min-content'e çökertmesin */
.yan-sutunlu > * { min-width: 0; }

.bolum        { padding-top: 52px; }
.bolum-sik    { padding-top: 34px; }
.bolum-genis  { padding-top: 64px; padding-bottom: 64px; }
.bolum-son    { padding-bottom: 64px; }

/* Bölüm başlığı: sol başlık + sağ bağlantı/oklar */
.bolum-basi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.bolum-basi h2 { font-size: 26px; }
.bolum-basi h1 { font-size: 30px; letter-spacing: -0.025em; }

.tumu-bag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gri-2);
  white-space: nowrap;
}
.tumu-bag [data-lucide] { color: var(--sari); }
.tumu-bag:hover { color: var(--lacivert); }

/* Izgaralar */
.izgara      { display: grid; gap: 16px; }
.izgara-2    { grid-template-columns: repeat(2, 1fr); }
.izgara-3    { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.izgara-4    { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.izgara-5    { grid-template-columns: repeat(5, 1fr); }
.izgara-6    { grid-template-columns: repeat(6, 1fr); }
.izgara-8    { grid-template-columns: repeat(8, 1fr); gap: 14px; }

/* Kenar çubuklu düzen */
.yan-duzen {
  display: grid;
  grid-template-columns: 264px 1fr;
  gap: 28px;
  align-items: start;
}


/* ==========================================================================
   04  BAŞLIK
   ========================================================================== */

/* --------------------------------------------------------------------------
   Üst şerit — koyu lacivert duyuru çubuğu
   -------------------------------------------------------------------------- */
.ust-serit {
  background: var(--lacivert);
  color: #A9B4C2;
  font-size: 12.5px;
}
.ust-serit .kapsayici {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.ust-serit-sol { display: flex; align-items: center; min-width: 0; }
.ust-serit-sag { display: flex; align-items: center; gap: 14px; }

.ust-duyuru {
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ust-duyuru [data-lucide] { color: var(--sari); }
.ust-duyuru strong { color: #fff; font-weight: 700; }

.ust-serit-sag a { color: #A9B4C2; font-size: 12.5px; white-space: nowrap; }
.ust-serit-sag a:hover { color: var(--sari); }
.ust-ayirac { width: 1px; height: 12px; background: rgba(255, 255, 255, 0.18); }

.ust-telefon {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: 8px;
  color: var(--sari) !important;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.ust-telefon [data-lucide] { color: var(--sari); }
.ust-telefon:hover { color: var(--sari-acik) !important; }

/* --------------------------------------------------------------------------
   Ana başlık — logo · arama · hesap/favori/sepet
   -------------------------------------------------------------------------- */
.ana-baslik { background: var(--beyaz); }
.ana-baslik .kapsayici {
  height: 92px;
  display: flex;
  align-items: center;
  gap: 30px;
}

.mobil-ac {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--cizgi-kutu);
  border-radius: var(--r-dugme);
  background: var(--beyaz);
  color: var(--lacivert);
  cursor: pointer;
  flex: 0 0 auto;
}

/* --- Logo (gorunumler/parcalar/logo.php) --- */
.logo { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.logo-blok-sari { fill: var(--sari); }
.logo-blok-koyu { fill: var(--lacivert); }
.logo-pencere   { fill: rgba(255, 255, 255, 0.55); }
.logo-beyaz .logo-blok-koyu { fill: #FFFFFF; }

.logo-yazi { display: block; line-height: 1; }
.logo-marka {
  display: block;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--lacivert);
}
.logo-alt {
  display: block;
  margin-top: 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.34em;
  color: var(--gri-3);
}
.logo-beyaz .logo-marka  { color: #fff; }
.logo-beyaz .logo-alt { color: rgba(255, 255, 255, 0.62); }

/* --- Arama: kategori seçici + alan + sarı düğme --- */
.arama {
  flex: 1 1 auto;
  max-width: 620px;
  display: flex;
  align-items: stretch;
  height: 48px;
  position: relative;
  background: var(--beyaz);
  border: 1px solid var(--cizgi-kutu);
  border-radius: var(--r-dugme);
  transition: border-color var(--gecis);
}
.arama:focus-within { border-color: var(--sari); }

.arama-kategori {
  flex: 0 0 auto;
  width: 176px;
  border: none;
  border-right: 1px solid var(--cizgi);
  background: transparent;
  padding: 0 30px 0 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gri-2);
  cursor: pointer;
  outline: none;
  appearance: none;
  border-radius: var(--r-dugme) 0 0 var(--r-dugme);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23757575' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.arama input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0 16px;
  font-size: 14px;
  color: var(--lacivert);
  outline: none;
}
.arama input::placeholder { color: var(--gri-5); }

/* Düğme kenarlığın üstüne taşar; sağ uç tamamen sarı görünür */
.arama button {
  flex: 0 0 auto;
  width: 58px;
  margin: -1px -1px -1px 0;
  border: none;
  border-radius: 0 var(--r-dugme) var(--r-dugme) 0;
  background: var(--sari);
  color: var(--lacivert);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--gecis);
}
.arama button:hover { background: var(--sari-koyu); }
.arama button [data-lucide] { color: var(--lacivert); }

/* Anlık arama sonuçları */
.arama-sonuc {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kart);
  box-shadow: var(--golge-acilir);
  max-height: 420px;
  overflow-y: auto;
  display: none;
  z-index: 185;   /* yüzen WhatsApp (180) üstünde, çekmece perdesi (190) altında */
}
.arama-sonuc.acik { display: block; }
.arama-sonuc a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--cizgi-ince);
  color: var(--lacivert);
}
.arama-sonuc a:last-child { border-bottom: none; }
.arama-sonuc a:hover { background: var(--yuzey); }
.arama-sonuc img {
  width: 42px; height: 42px;
  object-fit: contain;
  background: var(--yuzey-2);
  border-radius: var(--r-kucuk);
  flex: 0 0 auto;
}
/* DİKKAT: sınıf adları tema.js içindeki aramaKur() ile birebir aynı olmalı. */
.arama-sonuc .esnek { flex: 1 1 auto; min-width: 0; }
.arama-sonuc-ad { display: block; font-size: 13px; font-weight: 600; line-height: 1.4; }
.arama-sonuc-alt { display: block; margin-top: 2px; font-size: 11.5px; color: var(--gri-4); }
.arama-sonuc-fiyat { font-size: 13px; font-weight: 800; margin-left: auto; white-space: nowrap; flex: 0 0 auto; }
.arama-bos { padding: 18px 14px; font-size: 13px; color: var(--gri-4); text-align: center; }

/* --- Sağ eylemler --- */
.baslik-eylem {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 0 0 auto;
  margin-left: auto;
}
.baslik-simge {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--lacivert);
  transition: color var(--gecis);
}
.baslik-simge [data-lucide] { color: var(--lacivert); transition: color var(--gecis); }
.baslik-simge:hover,
.baslik-simge:hover [data-lucide] { color: var(--sari-koyu); }

.baslik-simge-yazi { display: block; line-height: 1.25; }
.baslik-simge-yazi strong { display: block; font-size: 13px; font-weight: 700; white-space: nowrap; }
.baslik-simge-yazi small  { display: block; font-size: 11.5px; color: var(--gri-4); margin-top: 2px; white-space: nowrap; }

.simge-sar { position: relative; display: flex; flex: 0 0 auto; }
.sayac {
  position: absolute;
  top: -7px; right: -9px;
  min-width: 19px; height: 19px;
  padding: 0 5px;
  border-radius: var(--r-tam);
  background: var(--sari);
  color: var(--lacivert);
  font-size: 10.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ==========================================================================
   05  GEZİNME VE MEGA MENÜ
   ========================================================================== */

.gezinme {
  background: var(--lacivert);
  position: relative;
}
/* DİKKAT: alt seçici (>) şart. Mega panelin kapsayıcısı da "kapsayici" sınıfını
   taşıdığı için torun seçici kullanılırsa panel çöker ve içeriği gezinme
   çubuğunun üzerine taşar. */
.gezinme > .kapsayici {
  height: 52px;
  display: flex;
  align-items: stretch;
  gap: 0;
}

.kategori-dugme {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 0 0 auto;
  margin-right: 32px;
  padding: 0 24px;
  border: none;
  background: var(--sari);
  color: var(--lacivert);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background var(--gecis);
}
.kategori-dugme:hover { background: var(--sari-koyu); }
.kategori-dugme [data-lucide] { color: var(--lacivert); }

/* <nav> ve <ul> çubuk yüksekliğini devralmalı; aksi hâlde bağlantılar yalnızca
   metin kadar yüksek olur ve aktif sekmenin sarı çizgisi (bottom:0) çubuğun
   altına değil, yazının hemen altına düşer. */
.gezinme > .kapsayici > nav { display: flex; align-items: stretch; }

.ana-menu {
  display: flex;
  align-items: stretch;
  height: 100%;
  list-style: none;
}
.ana-menu > li { position: relative; display: flex; }
.ana-menu a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 17px;
  color: #D5DCE5;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  transition: color var(--gecis);
}
.ana-menu a [data-lucide] { color: inherit; opacity: 0.75; }
.ana-menu a:hover { color: var(--sari); }
.ana-menu a.etkin { color: var(--sari); }
.ana-menu a.etkin::after {
  content: '';
  position: absolute;
  left: 17px; right: 17px; bottom: 0;
  height: 3px;
  background: var(--sari);
}

/* --------------------------------------------------------------------------
   Mega menü
   Panel gezinme çubuğunun altına tam genişlikte açılır. Fare düğmeden panele
   inerken aradaki boşlukta menünün kapanmaması için görünmez bir köprü
   (::before) bırakılır.
   -------------------------------------------------------------------------- */
.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--beyaz);
  border-bottom: 1px solid var(--cizgi);
  box-shadow: var(--golge-acilir);
  display: none;
  z-index: 70;
}
/* Fare düğmeden panele inerken aradaki boşlukta menü kapanmasın */
.mega::before {
  content: '';
  position: absolute;
  top: -12px; left: 0; right: 0;
  height: 12px;
}
.mega.acik { display: block; }

.mega-ic {
  display: grid;
  grid-template-columns: 1fr 286px;
  gap: 36px;
  height: auto;
  padding-top: 26px;
  padding-bottom: 26px;
  align-items: start;
}

/* Bölüm etiketi — sarı çizgili küçük başlık */
.mega-etiket {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--gri-3);
}
.mega-etiket::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--cizgi);
}

.mega-sol { min-width: 0; }

.mega-listeler {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 18px;
}

/* Kategori satırı: gerçek fotoğraf + ad + adet */
.mega-oge {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: var(--r-dugme);
  color: var(--lacivert);
  transition: background var(--gecis), border-color var(--gecis);
}
.mega-oge:hover { background: var(--yuzey); border-color: var(--cizgi); color: var(--lacivert); }

.mega-gorsel {
  width: 52px; height: 52px;
  flex: 0 0 auto;
  border-radius: var(--r-kucuk);
  background: var(--yuzey-2);
  border: 1px solid var(--cizgi-ince);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mega-gorsel img { width: 100%; height: 100%; object-fit: cover; }

.mega-govde { flex: 1 1 auto; min-width: 0; }
.mega-ad {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--lacivert);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mega-oge:hover .mega-ad { color: var(--sari-metin); }
.mega-alt {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--gri-4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mega-ok { flex: 0 0 auto; color: var(--gri-7); }
.mega-oge:hover .mega-ok { color: var(--sari); }

/* Sağ raf */
.mega-raf { border-left: 1px solid var(--cizgi-acik); padding-left: 30px; align-self: stretch; }

.mega-hizli { list-style: none; display: flex; flex-direction: column; gap: 3px; }
.mega-hizli a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--r-dugme);
  font-size: 13px;
  font-weight: 600;
  color: var(--gri-2);
  transition: background var(--gecis), color var(--gecis);
}
.mega-hizli a:hover { background: var(--yuzey); color: var(--lacivert); }
.mega-hizli [data-lucide] { color: var(--sari); }

.mega-tanit {
  margin-top: 20px;
  padding: 20px;
  border-radius: var(--r-kart);
  background: var(--lacivert);
}
.mega-tanit strong { display: block; font-size: 14.5px; font-weight: 800; color: #fff; }
.mega-tanit span {
  display: block;
  margin-top: 7px;
  font-size: 12.5px;
  line-height: 1.65;
  color: #93A0B0;
}
.mega-tanit .dugme { margin-top: 16px; height: 38px; font-size: 12.5px; }

/* Alt şerit */
.mega-alt-serit { border-top: 1px solid var(--cizgi-acik); background: var(--yuzey); }
.mega-alt-serit .kapsayici {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 13px;
  padding-bottom: 13px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--gri-3);
}
.mega-alt-serit span { display: inline-flex; align-items: center; gap: 8px; }
.mega-alt-serit [data-lucide] { color: var(--sari); }
.mega-alt-serit a { color: var(--lacivert); font-weight: 700; display: inline-flex; align-items: center; gap: 7px; }
.mega-alt-serit a:hover { color: var(--sari-metin); }

/* Mobil çekmece */
.cekmece-perde {
  position: fixed;
  inset: 0;
  background: rgba(27, 42, 61, 0.55);
  z-index: 190;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--gecis), visibility var(--gecis);
}
.cekmece-perde.acik { opacity: 1; visibility: visible; }

.cekmece {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 320px;
  max-width: 86vw;
  background: var(--beyaz);
  z-index: 200;
  transform: translateX(-100%);
  /* visibility şart: yalnızca transform ile kaydırılan panel ekran dışında da
     odaklanabilir kalıyor, Tab ile ~20 görünmez bağlantıya gidiliyordu. */
  visibility: hidden;
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1), visibility 240ms;
  display: flex;
  flex-direction: column;
}
.cekmece.acik { transform: translateX(0); visibility: visible; }
.cekmece-basi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--cizgi);
  flex: 0 0 auto;
}
.cekmece-govde { overflow-y: auto; flex: 1 1 auto; }
.cekmece-baslik {
  padding: 16px 20px 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--gri-4);
}
.cekmece-govde > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--cizgi-ince);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lacivert);
}
.cekmece-govde > a:hover { background: var(--yuzey); color: var(--sari-metin); }
.cekmece-govde > a [data-lucide] { color: var(--gri-6); }


/* ==========================================================================
   06  ALT BİLGİ
   ========================================================================== */

.alt-bilgi { background: var(--lacivert); color: #93A0B0; }

.alt-izgara {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1.2fr 1.25fr 1.35fr;
  gap: 40px;
  padding: 54px 0 46px;
}

.alt-marka .logo { margin-bottom: 18px; }
.alt-tanim {
  font-size: 13px;
  line-height: 1.8;
  color: #93A0B0;
  max-width: 290px;
}

.sosyal { display: flex; gap: 10px; margin-top: 22px; }
.sosyal a {
  width: 34px; height: 34px;
  border-radius: var(--r-kucuk);
  background: rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C3CCD6;
  transition: background var(--gecis), color var(--gecis);
}
.sosyal a:hover { background: var(--sari); color: var(--lacivert); }

.alt-baslik {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fff;
  margin-bottom: 18px;
}
.alt-liste { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.alt-liste a { font-size: 13px; color: #93A0B0; }
.alt-liste a:hover { color: var(--sari); }

.alt-bulten-metin { font-size: 13px; line-height: 1.75; color: #93A0B0; margin-bottom: 14px; }
.alt-bulten { display: flex; height: 42px; }
.alt-bulten input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-right: none;
  border-radius: var(--r-kucuk) 0 0 var(--r-kucuk);
  background: rgba(255, 255, 255, 0.05);
  padding: 0 14px;
  font-size: 12.5px;
  color: #fff;
  outline: none;
  transition: border-color var(--gecis);
}
.alt-bulten input::placeholder { color: #6E7C8C; }
.alt-bulten input:focus { border-color: var(--sari); }
.alt-bulten button {
  flex: 0 0 auto;
  width: 46px;
  border: none;
  border-radius: 0 var(--r-kucuk) var(--r-kucuk) 0;
  background: var(--sari);
  color: var(--lacivert);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--gecis);
}
.alt-bulten button:hover { background: var(--sari-koyu); }
.alt-bulten button [data-lucide] { color: var(--lacivert); }

.alt-iletisim { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.alt-iletisim div { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.alt-iletisim [data-lucide] { color: var(--sari); flex: 0 0 auto; }
.alt-iletisim a { color: #93A0B0; }
.alt-iletisim a:hover { color: var(--sari); }

/* Telif satırı */
.alt-serit {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  background: var(--lacivert-2);
}
.alt-serit .kapsayici {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 18px;
  padding-bottom: 18px;
}
.telif { font-size: 12.5px; color: #7E8B9A; }

/* --------------------------------------------------------------------------
   Yapımcı imzası — telif satırının ortasında
   -------------------------------------------------------------------------- */
.alt-imza {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: #7E8B9A;
  white-space: nowrap;
}
.alt-imza a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #C3CCD6;
  transition: color var(--gecis);
}
.alt-imza a [data-lucide] { color: var(--sari); transition: transform var(--gecis-hizli); }
.alt-imza a:hover { color: var(--sari); }
.alt-imza a:hover [data-lucide] { transform: translate(1px, -1px); }

/* Açık zeminli alt bilgide (sade düzen: ödeme, giriş, hata sayfaları) */
.alt-imza-acik { color: var(--gri-4); }
.alt-imza-acik a { color: var(--gri-2); }
.alt-imza-acik a:hover { color: var(--sari-metin); }

.kart-logolari { display: flex; align-items: center; gap: 9px; }
.kart-logo {
  height: 26px;
  min-width: 44px;
  padding: 0 9px;
  border-radius: 4px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.kart-logo.visa    { color: #1A1F71; font-style: italic; letter-spacing: 0.02em; }
.kart-logo.mastercard { padding: 0 12px; }
.kart-logo.troy    { color: #00A8E0; }
.kart-logo.iyzico  { color: #1E64FF; }
.mc-halka { width: 15px; height: 15px; border-radius: 50%; display: block; }
.mc-kirmizi { background: #EB001B; }
.mc-sari    { background: #F79E1B; margin-left: -6px; opacity: 0.9; }

/* ==========================================================================
   07  DÜĞMELER
   ========================================================================== */

.dugme {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 44px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--r-dugme);
  background: var(--lacivert);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--golge-dugme);
  transition: background var(--gecis), border-color var(--gecis),
              color var(--gecis), box-shadow var(--gecis), transform var(--gecis-hizli);
}
/* Üst kenardaki ince açık çizgi, düz rengi "basılı metal" hissine yaklaştırır */

.dugme:hover { background: var(--lacivert-hover); color: #fff; box-shadow: var(--golge-yukselt); }
.dugme:active { transform: translateY(1px); box-shadow: var(--golge-dugme); }
.dugme [data-lucide] { color: var(--sari); }   /* koyu düğmede ikon sarı */

/* Sarı düğme: koyu lacivert yazı — tasarımdaki birincil eylem rengi */
.dugme-sari {
  background: var(--sari);
  color: var(--lacivert);
}
.dugme-sari:hover { background: var(--sari-koyu); color: var(--lacivert); box-shadow: var(--golge-sari); }
.dugme-sari [data-lucide] { color: var(--lacivert); }

.dugme-cerceve {
  background: var(--beyaz);
  color: var(--lacivert);
  border-color: var(--cizgi-kutu);
  box-shadow: none;
}
.dugme-cerceve::after { border-top-color: transparent; }
.dugme-cerceve:hover {
  background: var(--beyaz);
  color: var(--lacivert);
  border-color: var(--sari);
  box-shadow: var(--golge-kart);
}
.dugme-cerceve [data-lucide] { color: var(--gri-2); }
.dugme-cerceve:hover [data-lucide] { color: var(--sari); }

.dugme-sade {
  background: transparent;
  color: var(--gri-2);
  border-color: transparent;
  box-shadow: none;
}
.dugme-sade::after { border-top-color: transparent; }
.dugme-sade:hover { background: var(--yuzey-2); color: var(--lacivert); box-shadow: none; }

.dugme-tehlike { background: var(--kirmizi); }
.dugme-tehlike:hover { background: #A93226; }
.dugme-tehlike [data-lucide] { color: #fff; }

.dugme:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sari-soluk), 0 0 0 1px var(--sari);
}

.dugme-kucuk { height: 36px; padding: 0 14px; font-size: 12.5px; gap: 7px; }
.dugme-mini  { height: 30px; padding: 0 11px; font-size: 11.5px; gap: 6px; border-radius: var(--r-kucuk); }
.dugme-buyuk { height: 52px; padding: 0 28px; font-size: 15px; }
.dugme-tam   { width: 100%; }
.dugme:disabled,
.dugme.pasif { opacity: 0.45; pointer-events: none; }

/* Yalnızca ikon */
.dugme-simge {
  width: 36px; height: 36px;
  padding: 0;
  border-radius: var(--r-dugme);
  border: 1px solid var(--cizgi-kutu);
  background: var(--beyaz);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--gecis), background var(--gecis),
              box-shadow var(--gecis), transform var(--gecis-hizli);
}
.dugme-simge:hover {
  border-color: var(--sari);
  background: var(--sari-soluk);
  box-shadow: var(--golge-kart);
}
.dugme-simge:active { transform: translateY(1px); }
.dugme-simge [data-lucide] { color: var(--gri-2); transition: color var(--gecis); }
.dugme-simge:hover [data-lucide] { color: var(--sari-metin); }
.dugme-simge.dolu { background: var(--sari); border-color: var(--sari); }
.dugme-simge.dolu [data-lucide] { color: #fff; }
.dugme-simge.dolu:hover { background: var(--sari-koyu); }
.dugme-simge.dolu:hover [data-lucide] { color: #fff; }
.dugme-simge:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sari-soluk), 0 0 0 1px var(--sari);
}

/* Sepete ekle — kart içindeki küçük kare düğme */
.sepet-dugme {
  width: 34px; height: 34px;
  border-radius: var(--r-dugme);
  border: none;
  background: var(--sari);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
  box-shadow: var(--golge-dugme);
  transition: background var(--gecis), box-shadow var(--gecis), transform var(--gecis-hizli);
}
.sepet-dugme:hover { background: var(--sari-koyu); box-shadow: var(--golge-sari); }
.sepet-dugme:active { transform: translateY(1px); box-shadow: var(--golge-dugme); }
.sepet-dugme [data-lucide] { color: var(--lacivert); }
.sepet-dugme:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sari-soluk), 0 0 0 1px var(--sari);
}

/* Adet seçici */
.adet-kutu {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--cizgi-form);
  border-radius: var(--r-dugme);
  height: 52px;
  background: var(--beyaz);
  overflow: hidden;
  flex: 0 0 auto;
}
.adet-kutu button {
  width: 44px;
  height: 100%;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--gecis);
}
.adet-kutu button:hover { background: var(--yuzey); }
.adet-kutu button [data-lucide] { color: var(--gri-3); }
.adet-kutu input {
  width: 48px;
  height: 100%;
  border: none;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  background: transparent;
  outline: none;
  -moz-appearance: textfield;
}
.adet-kutu input::-webkit-outer-spin-button,
.adet-kutu input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.adet-kutu.kucuk { height: 36px; }
.adet-kutu.kucuk button { width: 32px; }
.adet-kutu.kucuk input { width: 40px; font-size: 13px; }


/* ==========================================================================
   08  ROZETLER VE ETİKETLER
   ========================================================================== */

.rozet {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: var(--r-kucuk);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--gri-4);
  white-space: nowrap;
}
.rozet-indirim   { background: var(--kirmizi); }
.rozet-coksatan  { background: var(--sari); }
.rozet-yeni      { background: var(--yesil); }
.rozet-tukendi   { background: var(--gri-1); }

/* Kart üzerindeki konumlu rozet */
.kart-rozet {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
}

/* Durum rozetleri (panel tabloları) */
.durum-rozet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--r-tam);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.durum-rozet::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.rozet-yesil   { background: var(--yesil-soluk);   color: var(--yesil); }
.rozet-kirmizi { background: var(--kirmizi-soluk); color: var(--kirmizi); }
.rozet-mavi    { background: var(--mavi-soluk);    color: var(--mavi); }
.rozet-sari    { background: var(--uyari-soluk);   color: var(--uyari); }
.rozet-gri     { background: var(--yuzey-2);       color: var(--gri-2); }

/* Süzgeç etiketi (kaldırılabilir) */
.etiket-cip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--beyaz);
  border: 1px solid var(--cizgi-form);
  border-radius: var(--r-tam);
  padding: 5px 10px;
  font-size: 11.5px;
  color: var(--gri-1);
}
.etiket-cip:hover { border-color: var(--sari); color: var(--lacivert); }
.etiket-cip [data-lucide] { color: var(--gri-4); }

/* Stok durumu */
.stok-var { color: var(--yesil); font-weight: 700; }
.stok-az  { color: var(--sari);  font-weight: 700; }
.stok-yok { color: var(--kirmizi); font-weight: 700; }

/* Yıldız puanı */
.yildizlar { display: inline-flex; align-items: center; gap: 3px; }
.yildizlar [data-lucide] { color: var(--cizgi-kutu); }
.yildizlar [data-lucide].dolu { color: var(--sari); fill: var(--sari); }


/* ==========================================================================
   09  KARTLAR
   ========================================================================== */

.kart {
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kart);
  overflow: hidden;
  box-shadow: var(--golge-kart);
  transition: border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis);
}
.kart:hover {
  border-color: var(--sari);
  box-shadow: var(--golge-yukselt);
}
.kart-govde { padding: 18px 20px; }
.kart-basi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--cizgi-ince);
}
.kart-basi h3 { font-size: 14px; font-weight: 800; }
/* Tıklanmayan kartlar yükselmez */
.kart-sabit:hover { border-color: var(--cizgi); box-shadow: var(--golge-kart); }

/* --------------------------------------------------------------------------
   Kart alt eylem çubuğu ve bilgi blokları
   --------------------------------------------------------------------------
   DİKKAT: bunlar hem yönetim panelinde hem MAĞAZADA kullanılıyor
   (sipariş başarılı, sipariş detay, bilgilerim, iletişim, teklif-al, SSS...).
   Bu yüzden panel.css'te değil BURADA durmak zorundalar — mağaza düzeni
   panel.css'i yüklemez ve bu bloklar biçimsiz kalıyordu.
   -------------------------------------------------------------------------- */
.y-kart-alt {
  padding: 14px 20px;
  border-top: 1px solid var(--cizgi-acik);
  background: var(--yuzey);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.y-bilgi-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
}
.y-bilgi-blok { padding: 18px 20px; border-right: 1px solid var(--cizgi-acik); }
.y-bilgi-blok:last-child { border-right: none; }
.y-bilgi-blok strong {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--gri-4);
  margin-bottom: 9px;
}
.y-bilgi-blok p { font-size: 13px; line-height: 1.7; color: var(--gri-1); }

.y-ist-simge {
  width: 30px; height: 30px;
  border-radius: var(--r-dugme);
  background: var(--sari-soluk);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.y-ist-simge [data-lucide] { color: var(--sari); }

/* Kategori kartı görseli — /kategoriler sayfası */
.kategori-gorsel { height: 112px; background: var(--yuzey-2); }
.kategori-gorsel img { width: 100%; height: 100%; object-fit: cover; }

/* Proje kartı */
.proje-kart { display: block; }
.proje-gorsel { height: 172px; }
.proje-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.proje-govde { padding: 14px 14px 16px; }
.proje-ad { font-size: 13.5px; font-weight: 700; }
.proje-konum { font-size: 12px; color: var(--gri-4); margin-top: 5px; }

/* Blog kartı */
.blog-kart { display: block; }
.blog-gorsel { height: 150px; }
.blog-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.blog-govde { padding: 14px; }
.blog-baslik { font-size: 13px; font-weight: 700; line-height: 1.45; min-height: 38px; }
.blog-ust-veri {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  font-size: 11px;
  color: var(--gri-4);
}
.blog-ust-veri span { display: flex; align-items: center; gap: 5px; }
.blog-ust-veri [data-lucide] { color: var(--gri-5); }

/* --------------------------------------------------------------------------
   Marka kutusu — AÇIK zemin (/markalar sayfası)
   --------------------------------------------------------------------------
   Ana sayfadaki KOYU marka bandı aynı sınıfı kullanır ama bölüm 24'te
   ".marka-band .marka-kutu" ile daha yüksek özgüllükte tanımlıdır. İki bağlam
   birbirine karışmasın diye buradaki kurallar sade tutulur.
   -------------------------------------------------------------------------- */
.marka-kutu {
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 20px;
}
.marka-kutu + .marka-kutu { border-left: 1px solid var(--cizgi-ince); }
.marka-kutu img {
  width: 100%;
  height: 44px;
  object-fit: contain;
  opacity: 0.55;
  filter: grayscale(1);
  transition: opacity var(--gecis), filter var(--gecis);
}
.marka-kutu:hover img { opacity: 1; filter: grayscale(0); }

/* Logo yüklenmemiş markalar için yazı logosu */
.marka-yazi {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  color: var(--gri-3);
  opacity: 0.75;
  transition: color var(--gecis), opacity var(--gecis);
  overflow-wrap: anywhere;
}
/* DİKKAT: "a:hover .marka-yazi" gibi geniş bir seçici KULLANMA. Koyu marka
   bandındaki yazıyı da lacivert yapıp lacivert zeminde görünmez kılıyordu. */
.marka-kutu:hover .marka-yazi { color: var(--lacivert); opacity: 1; }

/* ==========================================================================
   10  ÜRÜN KARTI
   ========================================================================== */

.urun-kart {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kart);
  overflow: hidden;
  color: var(--lacivert);
  transition: border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis);
}
.urun-kart:hover {
  border-color: var(--sari);
  box-shadow: var(--golge-yukselt);
  transform: translateY(-3px);
}

/* Sol üst rozet (indirim / yeni / tükendi) */
.kart-rozet { position: absolute; top: 12px; left: 12px; z-index: 2; }

/* Sağ üst favori düğmesi */
.urun-favori {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 2;
  width: 32px; height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--r-tam);
  background: transparent;
  color: var(--gri-5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--gecis), color var(--gecis);
}
.urun-favori [data-lucide] { color: currentColor; }
.urun-favori:hover { background: var(--yuzey-2); color: var(--kirmizi); }
.urun-favori.dolu { color: var(--kirmizi); }
.urun-favori.dolu [data-lucide] { fill: var(--kirmizi); }

.urun-gorsel {
  position: relative;
  height: 210px;
  background: var(--beyaz);
  padding: 18px;
  display: block;
  overflow: hidden;
}
.urun-gorsel img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.urun-kart:hover .urun-gorsel img { transform: scale(1.055); }

.urun-govde {
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.urun-marka {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gri-4);
  margin-bottom: 7px;
}

.urun-ad {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  min-height: 39px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.urun-ad a { color: var(--lacivert); }
.urun-kart:hover .urun-ad a { color: var(--sari-metin); }

.urun-birim { font-size: 11.5px; color: var(--gri-4); margin-top: 5px; }
.urun-ozet  { font-size: 12.5px; color: var(--gri-3); line-height: 1.7; margin-top: 8px; }

.urun-fiyat-satir {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 14px;
}
.fiyat {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--lacivert);
}
.fiyat-teklif { font-size: 14px; color: var(--sari-metin); font-weight: 700; }
.fiyat-eski   { font-size: 12.5px; color: var(--gri-4); text-decoration: line-through; }
.fiyat-kdv    { display: block; font-size: 10.5px; color: var(--gri-4); font-weight: 500; margin-top: 3px; }

/* Tam genişlik sepet düğmesi — tasarımın imzası */
.urun-sepet {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  height: 42px;
  margin-top: 13px;
  border: none;
  border-radius: var(--r-dugme);
  background: var(--lacivert);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--gecis), color var(--gecis);
}
.urun-sepet [data-lucide] { color: currentColor; }
.urun-sepet:hover { background: var(--sari); color: var(--lacivert); }
.urun-sepet:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sari-soluk), 0 0 0 1px var(--sari);
}
.urun-sepet-pasif { background: var(--gri-6); pointer-events: none; }

/* Liste görünümü (ürün listesi sayfasındaki yatay kart) */
.urun-kart.liste {
  flex-direction: row;
  align-items: stretch;
}
.urun-kart.liste .urun-gorsel {
  width: 210px;
  height: auto;
  min-height: 180px;
  flex: 0 0 auto;
  border-right: 1px solid var(--cizgi-ince);
}
.urun-kart.liste .urun-govde {
  padding: 18px 20px;
  flex: 1 1 auto;
}
.urun-kart.liste .urun-ad { font-size: 15px; min-height: 0; -webkit-line-clamp: 1; }
.urun-kart.liste .urun-ozet {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.urun-kart.liste .urun-sepet { width: 220px; margin-top: 16px; }
.urun-kart.liste:hover { transform: none; }


/* ==========================================================================
   11  FORMLAR
   ========================================================================== */

.form-izgara { display: grid; gap: 16px; }
.form-izgara-2 { grid-template-columns: repeat(2, 1fr); }
.form-izgara-3 { grid-template-columns: repeat(3, 1fr); }

.alan-grup { display: flex; flex-direction: column; gap: 7px; }
.alan-grup.tam { grid-column: 1 / -1; }

.etiket {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gri-1);
  display: flex;
  align-items: center;
  gap: 6px;
}
.etiket .zorunlu { color: var(--kirmizi); }

.alan,
input[type="text"].alan,
input[type="email"].alan,
input[type="password"].alan,
input[type="tel"].alan,
input[type="number"].alan,
input[type="search"].alan,
input[type="date"].alan,
select.alan,
textarea.alan {
  width: 100%;
  height: 46px;
  border: 1px solid var(--cizgi-kutu);
  border-radius: var(--r-dugme);
  padding: 0 14px;
  font-size: 13.5px;
  /* Çok hafif gri zemin, odaklanınca beyaza döner: alan "dolduruluyor" hissi */
  background: var(--yuzey);
  color: var(--lacivert);
  outline: none;
  transition: border-color var(--gecis), box-shadow var(--gecis), background var(--gecis);
}
.alan::placeholder { color: var(--gri-5); }
.alan:hover:not(:disabled):not([readonly]) { border-color: var(--gri-7); }
.alan:focus {
  border-color: var(--sari);
  background: var(--beyaz);
  box-shadow: 0 0 0 3px var(--sari-soluk);
}
.alan:disabled, .alan[readonly] { background: var(--yuzey); color: var(--gri-3); cursor: not-allowed; }
textarea.alan { height: auto; min-height: 120px; padding: 12px 14px; line-height: 1.65; resize: vertical; }
select.alan {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23757579' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}
.alan.hatali { border-color: var(--kirmizi); }
.alan.hatali:focus { box-shadow: 0 0 0 3px var(--kirmizi-soluk); }

.alan-yardim { font-size: 11.5px; color: var(--gri-4); }
.alan-hata {
  font-size: 11.5px;
  color: var(--kirmizi);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Ön ekli alan (₺, %, @) */
.alan-sar { position: relative; display: block; }
.alan-sar .alan-ek {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12.5px;
  color: var(--gri-4);
  pointer-events: none;
}
.alan-sar .alan { padding-right: 40px; }
.alan-sar .goz {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  border: none;
  background: transparent;
  border-radius: var(--r-kucuk);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.alan-sar .goz [data-lucide] { color: var(--gri-4); }
.alan-sar .goz:hover [data-lucide] { color: var(--lacivert); }

/* Onay kutusu ve radyo */
.onay {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  color: var(--gri-1);
  cursor: pointer;
  line-height: 1.6;
}
.onay input { position: absolute; opacity: 0; width: 0; height: 0; }
.onay-kutu {
  width: 16px; height: 16px;
  border-radius: var(--r-kucuk);
  border: 1px solid var(--cizgi-kutu);
  background: var(--beyaz);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-top: 2px;
  transition: border-color var(--gecis), background var(--gecis);
}
.onay-kutu [data-lucide] { color: #fff; opacity: 0; transition: opacity var(--gecis); }
.onay input:checked + .onay-kutu { border-color: var(--sari); background: var(--sari); }
.onay input:checked + .onay-kutu [data-lucide] { opacity: 1; }
.onay input:focus-visible + .onay-kutu { box-shadow: 0 0 0 3px var(--sari-soluk); }
.onay:hover .onay-kutu { border-color: var(--sari); }
.onay a { color: var(--sari-metin); font-weight: 600; text-decoration: underline; }

.onay-kutu.yuvarlak { border-radius: 50%; }
.onay-kutu.yuvarlak::after {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  transition: opacity var(--gecis);
}
.onay input:checked + .onay-kutu.yuvarlak::after { opacity: 1; }

/* Seçilebilir kart (ödeme yöntemi, adres) */
.secim-kart {
  position: relative;
  display: block;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kart);
  padding: 18px 20px;
  cursor: pointer;
  background: var(--beyaz);
  transition: border-color var(--gecis), background var(--gecis);
}
.secim-kart:hover { border-color: var(--sari); }
.secim-kart input { position: absolute; opacity: 0; width: 0; height: 0; }
.secim-kart.secili,
.secim-kart:has(input:checked) {
  border-color: var(--sari);
  background: var(--sari-soluk);
  box-shadow: inset 0 0 0 1px var(--sari);
}
.secim-basi { display: flex; align-items: center; gap: 12px; }
.secim-basi .onay-kutu { margin-top: 0; }
.secim-ad { font-size: 13.5px; font-weight: 700; }
.secim-alt { font-size: 12px; color: var(--gri-3); margin-top: 4px; }
.secim-govde { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cizgi-ince); display: none; }
.secim-kart:has(input:checked) .secim-govde { display: block; }

/* Birim / varyant seçici */
.birim-secim { display: flex; gap: 8px; flex-wrap: wrap; }
.birim-secim label {
  border: 1px solid var(--cizgi-form);
  background: var(--beyaz);
  border-radius: var(--r-dugme);
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gri-3);
  cursor: pointer;
  transition: border-color var(--gecis), color var(--gecis);
}
.birim-secim label:hover { border-color: var(--sari); }
.birim-secim input { position: absolute; opacity: 0; width: 0; height: 0; }
.birim-secim label:has(input:checked) {
  border-color: var(--sari);
  color: var(--lacivert);
  font-weight: 700;
}

/* Bal küpü (bot tuzağı) — insanlar göremez */
.tuzak {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  pointer-events: none;
}

/* Parola gücü göstergesi */
.guc-cubuk {
  height: 4px;
  border-radius: 2px;
  background: var(--cizgi-acik);
  overflow: hidden;
  margin-top: 8px;
}
.guc-cubuk span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--kirmizi);
  transition: width 200ms ease, background 200ms ease;
}
.guc-cubuk.orta span  { background: var(--sari); }
.guc-cubuk.iyi span   { background: var(--yesil); }


/* ==========================================================================
   12  TABLOLAR
   ========================================================================== */

.tablo-sar {
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kart);
  overflow: hidden;
  background: var(--beyaz);
}
.tablo-kaydir { overflow-x: auto; }

.tablo {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tablo thead th {
  background: var(--yuzey);
  border-bottom: 1px solid var(--cizgi);
  padding: 13px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--gri-2);
  white-space: nowrap;
}
.tablo tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--cizgi-ince);
  vertical-align: middle;
}
.tablo tbody tr:last-child td { border-bottom: none; }
.tablo tbody tr:hover { background: var(--yuzey); }
.tablo .daralt { width: 1%; white-space: nowrap; }
.tablo .saga   { text-align: right; }
.tablo .ortala { text-align: center; }
.tablo-basi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid var(--cizgi);
  background: var(--beyaz);
}

/* Tablo içindeki eylem düğmeleri dikey yığılmasın */
.dug-grup {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

/* Tablo hücresinde ürün özeti */
.tablo-urun { display: flex; align-items: center; gap: 12px; }
.tablo-urun img {
  width: 44px; height: 44px;
  object-fit: contain;
  background: var(--yuzey);
  border: 1px solid var(--cizgi-ince);
  border-radius: var(--r-dugme);
  flex: 0 0 auto;
}
.tablo-urun strong { display: block; font-size: 12.5px; font-weight: 700; line-height: 1.4; }
.tablo-urun span   { display: block; font-size: 11px; color: var(--gri-4); margin-top: 2px; }


/* ==========================================================================
   13  KIRINTI YOLU
   ========================================================================== */

.kirinti {
  background: var(--yuzey);
  border-bottom: 1px solid var(--cizgi-acik);
}
.kirinti .kapsayici {
  min-height: 46px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  font-size: 12px;
  color: var(--gri-4);
  padding-top: 8px;
  padding-bottom: 8px;
}
.kirinti a { color: var(--gri-3); display: inline-flex; align-items: center; gap: 6px; }
.kirinti a:hover { color: var(--sari); }
.kirinti [data-lucide] { color: var(--gri-7); }
.kirinti a [data-lucide] { color: var(--gri-4); }
.kirinti .son { color: var(--lacivert); font-weight: 600; }

/* .kapsayici ile birlikte kullanılır; kısayol yazmak yan boşluğu sıfırlar */
.sayfa-basi { padding-top: 32px; padding-bottom: 8px; }
.sayfa-basi h1 { font-size: 30px; letter-spacing: -0.025em; }
.sayfa-basi p  { margin-top: 10px; font-size: 13.5px; color: var(--gri-3); }


/* ==========================================================================
   14  SAYFALAMA
   ========================================================================== */

.sayfalama {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.sayfalama-bilgi { font-size: 12.5px; color: var(--gri-4); }
.sayfalama-liste { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sayfalama-liste a,
.sayfalama-liste span {
  min-width: 36px; height: 36px;
  padding: 0 8px;
  border-radius: var(--r-dugme);
  border: 1px solid var(--cizgi-form);
  background: var(--beyaz);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 600;
  transition: border-color var(--gecis);
}
.sayfalama-liste a:hover { border-color: var(--sari); }
.sayfalama-liste .etkin {
  background: var(--lacivert);
  border-color: var(--lacivert);
  color: #fff;
  font-weight: 700;
}
.sayfalama-liste .bosluk { border: none; background: transparent; color: var(--gri-4); min-width: 20px; }
.sayfalama-liste .pasif { color: var(--gri-7); pointer-events: none; }


/* ==========================================================================
   15  SÜZGEÇ PANELİ
   ========================================================================== */

.suzgec {
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kart);
  padding: 4px 20px 20px;
}
/* Süzgeç başlığındaki eylemler — kapatma düğmesi her zaman görünür */
/* Sağlayıcı ödeme çerçevesi (PayTR iFrame) */
.odeme-cerceve { overflow: hidden; }
.odeme-cerceve iframe { min-height: 720px; }
.suzgec-basi-eylem { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.suzgec-basi-eylem a { font-size: 12.5px; font-weight: 600; color: var(--gri-3); }
.suzgec-basi-eylem a:hover { color: var(--sari-metin); }
.suzgec-kapat { border: none; background: none; width: 34px; height: 34px; }
/* Masaüstünde panel zaten yan sütunda duruyor; kapatmaya gerek yok */
.suzgec-kapat { display: none; }
.suzgec-basi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0 2px;
}
.suzgec-basi strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 800;
}
.suzgec-basi [data-lucide] { color: var(--sari); }
.suzgec-basi a { font-size: 11.5px; color: var(--gri-4); }
.suzgec-basi a:hover { color: var(--kirmizi); }

.suzgec-blok { border-bottom: 1px solid var(--cizgi-acik); padding: 20px 0; }
.suzgec-blok:last-of-type { border-bottom: none; }
.suzgec-blok-basi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  cursor: pointer;
  user-select: none;
}
.suzgec-blok-basi span:first-child {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.suzgec-blok-basi [data-lucide] { color: var(--gri-4); transition: transform var(--gecis); }
.suzgec-blok.kapali .suzgec-blok-basi [data-lucide] { transform: rotate(180deg); }
.suzgec-blok.kapali .suzgec-govde { display: none; }

.suzgec-govde { display: flex; flex-direction: column; gap: 11px; max-height: 260px; overflow-y: auto; }
.suzgec-govde .onay { font-size: 12.5px; }
.suzgec-govde .onay .ad { flex: 1 1 auto; }
.suzgec-govde .onay .sayi { font-size: 11px; color: var(--gri-4); }

/* Fiyat aralığı */
.fiyat-aralik { display: flex; align-items: center; gap: 8px; }
.fiyat-aralik .alan { height: 36px; font-size: 12.5px; padding: 0 10px; }
.fiyat-aralik .cizgi { color: var(--gri-7); }

.aralik-cubuk {
  position: relative;
  height: 4px;
  border-radius: 2px;
  background: var(--cizgi-acik);
  margin: 20px 4px 6px;
}
.aralik-dolu {
  position: absolute;
  top: 0; bottom: 0;
  background: var(--sari);
  border-radius: 2px;
}
.aralik-tutamac {
  position: absolute;
  top: -6px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--beyaz);
  border: 2px solid var(--sari);
}

/* Sıralama çubuğu */
.siralama-serit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kart);
  padding: 9px 16px;
  min-height: 54px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.siralama-sol {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--gri-3);
  flex-wrap: wrap;
}
.siralama-sol strong { color: var(--lacivert); }
.siralama-sag { display: flex; align-items: center; gap: 12px; }
.siralama-sag .alan { height: 36px; font-size: 12.5px; width: auto; min-width: 176px; }
.gorunum-secim { display: flex; gap: 6px; }
.gorunum-secim a {
  width: 36px; height: 36px;
  border-radius: var(--r-dugme);
  border: 1px solid var(--cizgi-form);
  background: var(--beyaz);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gorunum-secim a [data-lucide] { color: var(--gri-3); }
.gorunum-secim a.etkin { background: var(--lacivert); border-color: var(--lacivert); }
.gorunum-secim a.etkin [data-lucide] { color: #fff; }

/* Mobil süzgeç açma düğmesi */
.suzgec-ac { display: none; }


/* ==========================================================================
   16  ÜRÜN DETAY
   ========================================================================== */

.urun-detay {
  display: grid;
  grid-template-columns: 560px 1fr;
  gap: 44px;
  align-items: start;
  padding-top: 32px;
}

.galeri-ana {
  position: relative;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kart);
  background: var(--yuzey);
  height: 460px;
  padding: 28px;
  overflow: hidden;
}
.galeri-ana img { width: 100%; height: 100%; object-fit: contain; }
.galeri-eylem {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.galeri-kucukler {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 12px;
}
.galeri-kucuk {
  position: relative;
  height: 88px;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kart);
  background: var(--yuzey);
  padding: 8px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--gecis);
}
.galeri-kucuk img { width: 100%; height: 100%; object-fit: contain; }
.galeri-kucuk:hover { border-color: var(--sari); }
.galeri-kucuk.etkin { border: 2px solid var(--sari); padding: 7px; }
.galeri-fazla {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.55);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.urun-ust-bilgi { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* Yalnızca ürün DETAY sayfası. Kapsamsız bırakılırsa bölüm 10'daki ürün
   kartı marka satırını (küçük gri) ezip sarı-kalın yapıyordu. */
.urun-ust-bilgi .urun-marka {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--sari-metin);
  text-transform: uppercase;
}
.urun-kod { font-size: 11.5px; color: var(--gri-4); }
.urun-baslik { margin-top: 12px; font-size: 30px; font-weight: 800; line-height: 1.25; text-wrap: pretty; }
.urun-puan-satir {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--gri-3);
}

.fiyat-kutu {
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kart);
  background: var(--yuzey);
  padding: 22px;
  margin-top: 22px;
}
.fiyat-satir { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.fiyat-buyuk { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.fiyat-kutu .fiyat-eski { font-size: 15px; padding-bottom: 4px; margin-left: 0; }
.indirim-etiket {
  background: var(--kirmizi);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: var(--r-kucuk);
  margin-bottom: 4px;
}
.havale-not {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--gri-3);
  flex-wrap: wrap;
}
.havale-not [data-lucide] { color: var(--sari); }
.havale-not strong { color: var(--lacivert); margin: 0 3px; }

.satin-al { display: flex; align-items: stretch; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.satin-al .dugme { height: 52px; flex: 1 1 auto; min-width: 180px; font-size: 14px; font-weight: 800; letter-spacing: 0.03em; }

.ozet-kutular { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 22px; }
.ozet-kutu {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kart);
  padding: 14px 16px;
}
.ozet-kutu [data-lucide] { color: var(--sari); }
.ozet-kutu strong { display: block; font-size: 12.5px; font-weight: 700; }
.ozet-kutu span   { display: block; font-size: 11.5px; color: var(--gri-4); margin-top: 2px; }

/* Sekmeler */
.sekmeler {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--cizgi);
  overflow-x: auto;
  scrollbar-width: none;
}
.sekmeler::-webkit-scrollbar { display: none; }
.sekme {
  padding: 0 22px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gri-3);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--gecis), border-color var(--gecis);
}
.sekme:hover { color: var(--lacivert); }
.sekme.etkin { font-weight: 800; color: var(--lacivert); border-bottom-color: var(--sari); }

.sekme-icerik { display: none; padding: 30px 0 0; }
.sekme-icerik.etkin { display: block; }

.detay-duzen { display: grid; grid-template-columns: 1fr 420px; gap: 44px; align-items: start; }

/* Teknik özellik tablosu */
.ozellik-tablo {
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kart);
  overflow: hidden;
  margin-top: 30px;
}
.ozellik-basi {
  background: var(--lacivert);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 13px 18px;
}
.ozellik-satir {
  display: grid;
  grid-template-columns: 240px 1fr;
  border-bottom: 1px solid var(--cizgi-ince);
}
.ozellik-satir:last-child { border-bottom: none; }
.ozellik-satir:nth-child(odd) { background: var(--yuzey); }
.ozellik-satir dt { padding: 13px 18px; font-size: 12.5px; color: var(--gri-3); margin: 0; }
.ozellik-satir dd { padding: 13px 18px; font-size: 12.5px; font-weight: 600; color: var(--lacivert); margin: 0; }

/* Yorum özeti */
.puan-ozet { display: flex; align-items: center; gap: 18px; }
.puan-buyuk { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.puan-cubuklar { display: flex; flex-direction: column; gap: 9px; margin-top: 20px; }
.puan-cubuk {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  color: var(--gri-4);
}
.puan-cubuk .yol {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 3px;
  background: var(--cizgi-acik);
  overflow: hidden;
}
.puan-cubuk .dolu { display: block; height: 6px; background: var(--sari); }

.yorum { border-top: 1px solid var(--cizgi-ince); padding-top: 18px; margin-top: 18px; }
.yorum:first-of-type { border-top: none; }
.yorum-basi { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.yorum-ad { font-size: 12.5px; font-weight: 700; }
.yorum-tarih { font-size: 11px; color: var(--gri-4); }
.yorum-metin { margin-top: 8px; font-size: 12.5px; line-height: 1.7; color: var(--gri-3); }
.yorum-onay {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--yesil);
  margin-left: 8px;
}

/* Özellik listesi (tik işaretli) */
.tik-liste { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; list-style: none; }
.tik-liste li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--gri-1); }
.tik-liste [data-lucide] { color: var(--sari); flex: 0 0 auto; margin-top: 3px; }


/* ==========================================================================
   17  BİLDİRİMLER
   ========================================================================== */

.uyari-kutu {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--cizgi);
  border-left: 3px solid var(--gri-4);
  border-radius: var(--r-dugme);
  background: var(--yuzey);
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gri-1);
}
.uyari-kutu [data-lucide] { flex: 0 0 auto; margin-top: 1px; }
.uyari-kutu strong { display: block; margin-bottom: 3px; color: var(--lacivert); }
.uyari-basari { border-left-color: var(--yesil);   background: var(--yesil-soluk); }
.uyari-basari [data-lucide] { color: var(--yesil); }
.uyari-hata   { border-left-color: var(--kirmizi); background: var(--kirmizi-soluk); }
.uyari-hata [data-lucide] { color: var(--kirmizi); }
.uyari-uyari  { border-left-color: var(--uyari);   background: var(--uyari-soluk); }
.uyari-uyari [data-lucide] { color: var(--uyari); }
.uyari-bilgi  { border-left-color: var(--mavi);    background: var(--mavi-soluk); }
.uyari-bilgi [data-lucide] { color: var(--mavi); }

/* Uçan bildirim */
.bildirim-alan {
  position: fixed;
  top: 20px; right: 20px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 380px;
}
.bildirim {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-left: 3px solid var(--yesil);
  border-radius: var(--r-dugme);
  box-shadow: var(--golge-acilir);
  padding: 14px 16px;
  font-size: 13px;
  animation: bildirim-gir 220ms ease;
}
@keyframes bildirim-gir {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.bildirim.giden { opacity: 0; transform: translateX(20px); transition: all 200ms ease; }
.bildirim-hata  { border-left-color: var(--kirmizi); }
.bildirim-uyari { border-left-color: var(--uyari); }
.bildirim-kapat {
  margin-left: auto;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  color: var(--gri-4);
}

/* Kalıcı pencere (modal) */
.pencere-perde {
  position: fixed;
  inset: 0;
  background: rgba(17, 17, 17, 0.55);
  z-index: 250;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.pencere-perde.acik { display: flex; }
.pencere {
  background: var(--beyaz);
  border-radius: var(--r-kart);
  box-shadow: var(--golge-katman);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
}
.pencere-basi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--cizgi-acik);
}
.pencere-basi h3 { font-size: 16px; }
.pencere-govde { padding: 24px; }
.pencere-alt {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--cizgi-acik);
  background: var(--yuzey);
}


/* ==========================================================================
   18  SEPET VE ÖDEME
   ========================================================================== */

.sepet-duzen {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 28px;
  align-items: start;
}

.sepet-satir {
  display: grid;
  grid-template-columns: 96px 1fr auto auto auto;
  gap: 18px;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid var(--cizgi-ince);
}
.sepet-satir:last-child { border-bottom: none; }
.sepet-gorsel {
  width: 96px; height: 96px;
  background: var(--yuzey);
  border: 1px solid var(--cizgi-ince);
  border-radius: var(--r-dugme);
  padding: 8px;
}
.sepet-gorsel img { width: 100%; height: 100%; object-fit: contain; }
.sepet-ad { font-size: 14px; font-weight: 700; line-height: 1.4; }
.sepet-alt { font-size: 12px; color: var(--gri-4); margin-top: 5px; }
.sepet-tutar { font-size: 16px; font-weight: 800; text-align: right; white-space: nowrap; }
.sepet-sil {
  border: none;
  background: none;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--r-kucuk);
  color: var(--gri-4);
  transition: color var(--gecis), background var(--gecis);
}
.sepet-sil:hover { color: var(--kirmizi); background: var(--kirmizi-soluk); }

/* Özet kutusu */
.ozet {
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kart);
  position: sticky;
  top: 20px;
}
.ozet-basi {
  padding: 18px 22px;
  border-bottom: 1px solid var(--cizgi-acik);
  font-size: 14px;
  font-weight: 800;
}
.ozet-govde { padding: 20px 22px; }
.ozet-satir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--gri-2);
  padding: 7px 0;
}
.ozet-satir strong { color: var(--lacivert); font-weight: 700; }
.ozet-satir.indirim strong { color: var(--yesil); }
.ozet-toplam {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--cizgi-acik);
  margin-top: 12px;
  padding-top: 16px;
  font-size: 15px;
  font-weight: 800;
}
.ozet-toplam .tutar { font-size: 22px; letter-spacing: -0.02em; }
.ozet-alt { padding: 0 22px 22px; }

/* Kupon */
.kupon-satir { display: flex; gap: 8px; margin-top: 16px; }
.kupon-satir .alan { height: 42px; font-size: 13px; min-width: 0; }
.kupon-satir .dugme { height: 42px; padding: 0 16px; flex: 0 0 auto; }
.kupon-aktif {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--yesil-soluk);
  border: 1px solid rgba(46, 125, 79, 0.25);
  border-radius: var(--r-dugme);
  padding: 10px 12px;
  font-size: 12.5px;
  margin-top: 16px;
}
.kupon-aktif strong { color: var(--yesil); }

/* Ödeme adımları */
.adimlar {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0 auto 32px;
  max-width: 720px;
}
.adim {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gri-4);
  flex: 0 0 auto;
}
.adim-no {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--cizgi-form);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  background: var(--beyaz);
}
.adim.etkin { color: var(--lacivert); }
.adim.etkin .adim-no { background: var(--sari); border-color: var(--sari); color: #fff; }
.adim.tamam { color: var(--gri-2); }
.adim.tamam .adim-no { background: var(--yesil); border-color: var(--yesil); color: #fff; }
.adim-cizgi { flex: 1 1 auto; height: 1px; background: var(--cizgi-form); margin: 0 14px; }

.odeme-duzen {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 28px;
  align-items: start;
}
.odeme-blok { margin-bottom: 22px; }
.odeme-blok-basi {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 14px;
}
.odeme-blok-basi .no {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--lacivert);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Banka hesap kartı */
.banka-kart {
  border: 1px solid var(--cizgi);
  border-radius: var(--r-dugme);
  padding: 14px 16px;
  background: var(--beyaz);
}
.banka-kart + .banka-kart { margin-top: 10px; }
.banka-ad { font-size: 13px; font-weight: 800; }
.banka-satir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--gri-3);
}
.iban {
  font-family: ui-monospace, 'SF Mono', Consolas, monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--lacivert);
  letter-spacing: 0.02em;
}
.kopyala {
  border: 1px solid var(--cizgi-form);
  background: var(--beyaz);
  border-radius: var(--r-kucuk);
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--gri-2);
  transition: border-color var(--gecis);
}
.kopyala:hover { border-color: var(--sari); color: var(--lacivert); }

/* Sipariş sonucu */
.sonuc-kutu {
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
  padding: 56px 24px;
}
.sonuc-simge {
  width: 76px; height: 76px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}
.sonuc-simge.basarili { background: var(--yesil-soluk); }
.sonuc-simge.basarili [data-lucide] { color: var(--yesil); }
.sonuc-simge.hatali { background: var(--kirmizi-soluk); }
.sonuc-simge.hatali [data-lucide] { color: var(--kirmizi); }
.sonuc-kutu h1 { font-size: 26px; margin-bottom: 12px; }
.sonuc-kutu p { font-size: 14px; color: var(--gri-3); line-height: 1.75; }
.sonuc-no {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-dugme);
  padding: 12px 18px;
  margin: 22px 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  flex-wrap: wrap;
  justify-content: center;
  overflow-wrap: anywhere;
}


/* ==========================================================================
   19  MÜŞTERİ PANELİ
   ========================================================================== */

.panel-duzen {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  align-items: start;
  padding-top: 32px;
  padding-bottom: 64px;
}

.panel-yan {
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kart);
  overflow: hidden;
  position: sticky;
  top: 20px;
}
.panel-kullanici {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px;
  border-bottom: 1px solid var(--cizgi-acik);
  background: var(--yuzey);
}
.panel-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--lacivert);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  flex: 0 0 auto;
}
.panel-kullanici strong { display: block; font-size: 13.5px; font-weight: 700; }
.panel-kullanici span   { display: block; font-size: 11.5px; color: var(--gri-4); margin-top: 2px; }

.panel-menu { padding: 8px 0; list-style: none; }
.panel-menu a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gri-2);
  border-left: 2px solid transparent;
}
.panel-menu a [data-lucide] { color: var(--gri-4); }
.panel-menu a:hover { background: var(--yuzey); color: var(--lacivert); }
.panel-menu a.etkin {
  background: var(--sari-soluk);
  border-left-color: var(--sari);
  color: var(--lacivert);
  font-weight: 700;
}
.panel-menu a.etkin [data-lucide] { color: var(--sari); }
.panel-menu .ayirac-satir { height: 1px; background: var(--cizgi-acik); margin: 8px 0; }
.panel-menu .cikis { color: var(--kirmizi); }
.panel-menu .cikis [data-lucide] { color: var(--kirmizi); }
.panel-rozet {
  margin-left: auto;
  background: var(--sari);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  border-radius: var(--r-tam);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel-icerik { min-width: 0; }
.panel-basi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.panel-basi h1 { font-size: 22px; }
.panel-basi p { font-size: 13px; color: var(--gri-3); margin-top: 5px; }

/* Özet kutucukları */
.ozet-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.ozet-kutucuk {
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kart);
  padding: 18px 20px;
}
.ozet-kutucuk-basi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--gri-3);
  letter-spacing: 0.03em;
}
.ozet-kutucuk-basi [data-lucide] { color: var(--sari); }
.ozet-deger { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin-top: 10px; }
.ozet-fark { font-size: 11.5px; color: var(--gri-4); margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.ozet-fark.artis { color: var(--yesil); }
.ozet-fark.azalis { color: var(--kirmizi); }

/* Sipariş takip çizelgesi */
.takip { display: flex; flex-direction: column; gap: 0; padding: 4px 0; }
.takip-adim { display: flex; gap: 14px; position: relative; padding-bottom: 24px; }
.takip-adim:last-child { padding-bottom: 0; }
.takip-adim::before {
  content: '';
  position: absolute;
  left: 13px; top: 28px; bottom: 0;
  width: 2px;
  background: var(--cizgi-acik);
}
.takip-adim:last-child::before { display: none; }
.takip-nokta {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--beyaz);
  border: 2px solid var(--cizgi-form);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  z-index: 1;
}
.takip-nokta [data-lucide] { color: var(--gri-6); }
.takip-adim.tamam .takip-nokta { background: var(--yesil); border-color: var(--yesil); }
.takip-adim.tamam .takip-nokta [data-lucide] { color: #fff; }
.takip-adim.tamam::before { background: var(--yesil); }
.takip-adim.etkin .takip-nokta { background: var(--sari); border-color: var(--sari); }
.takip-adim.etkin .takip-nokta [data-lucide] { color: #fff; }
.takip-ad { font-size: 13.5px; font-weight: 700; }
.takip-tarih { font-size: 12px; color: var(--gri-4); margin-top: 3px; }
.takip-not { font-size: 12.5px; color: var(--gri-3); margin-top: 6px; line-height: 1.6; }


/* ==========================================================================
   20  İÇERİK SAYFALARI
   ========================================================================== */

.icerik {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--gri-1);
  max-width: 760px;
}
.icerik > * + * { margin-top: 18px; }
.icerik h2 { font-size: 21px; margin-top: 36px; }
.icerik h3 { font-size: 17px; margin-top: 30px; }
.icerik p  { text-wrap: pretty; }
.icerik a  { color: var(--sari-metin); text-decoration: underline; }
.icerik ul, .icerik ol { padding-left: 22px; display: flex; flex-direction: column; gap: 9px; }
.icerik li { padding-left: 4px; }
.icerik img { border-radius: var(--r-kart); margin: 26px 0; }
.icerik blockquote {
  border-left: 3px solid var(--sari);
  background: var(--yuzey);
  padding: 16px 20px;
  border-radius: 0 var(--r-dugme) var(--r-dugme) 0;
  color: var(--gri-2);
  font-style: italic;
}
.icerik table { width: 100%; border-collapse: collapse; font-size: 13px; }
.icerik th, .icerik td { border: 1px solid var(--cizgi); padding: 10px 14px; text-align: left; }
.icerik th { background: var(--yuzey); font-weight: 700; }
.icerik hr { border: none; border-top: 1px solid var(--cizgi-acik); margin: 32px 0; }

/* Sık sorulan sorular */
.sss-oge {
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kart);
  background: var(--beyaz);
  overflow: hidden;
}
.sss-oge + .sss-oge { margin-top: 10px; }
.sss-soru {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 18px 20px;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  color: var(--lacivert);
}
.sss-soru [data-lucide] { color: var(--sari); transition: transform var(--gecis); flex: 0 0 auto; }
.sss-oge.acik .sss-soru [data-lucide] { transform: rotate(45deg); }
.sss-cevap { display: none; padding: 0 20px 20px; font-size: 13.5px; line-height: 1.8; color: var(--gri-3); }
.sss-oge.acik .sss-cevap { display: block; }

/* Kahraman (hero) alanı */
.kahraman { position: relative; background: var(--beyaz); overflow: hidden; }
.kahraman-gorsel { position: absolute; inset: 0 0 0 42%; }
.kahraman-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.kahraman-perde {
  position: absolute;
  top: 0; bottom: 0; left: 32%;
  width: 18%;
  background: linear-gradient(90deg, #FFF 0%, rgba(255,255,255,0.88) 45%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}
.kahraman-icerik {
  position: relative;
  padding-top: 64px;
  padding-bottom: 72px;
  min-height: 452px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.kahraman-metin { max-width: 520px; }
.kahraman-ust {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.kahraman-ust .cizgi { width: 34px; height: 3px; background: var(--sari); display: block; }
.kahraman-ust span {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--sari-metin);
}
.kahraman h1 { font-size: 52px; line-height: 1.1; letter-spacing: -0.025em; text-wrap: pretty; }
.kahraman h1 em { color: var(--sari); font-style: normal; }
.kahraman p {
  margin-top: 22px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--gri-2);
  max-width: 440px;
  text-wrap: pretty;
}
.kahraman-dugmeler { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.kahraman-dugmeler .dugme { height: 48px; }

/* Eski kahraman slayt kontrolleri KALDIRILDI. ".slayt-noktalar" burada
   position:absolute taşıyordu ve bölüm 24'teki vitrin noktalarına sızıp
   onları akıştan çıkarıyordu; geçerli tanımlar bölüm 24'tedir. */


/* ==========================================================================
   21  YARDIMCI SINIFLAR
   ========================================================================== */

.metin-kucuk   { font-size: 12px; }
.metin-gri     { color: var(--gri-3); }
.metin-soluk   { color: var(--gri-4); }
.metin-sari   { color: var(--sari); }
.metin-yesil   { color: var(--yesil); }
.metin-kirmizi { color: var(--kirmizi); }
.metin-kalin   { font-weight: 700; }
.metin-ekstra  { font-weight: 800; }
.metin-orta    { text-align: center; }
.metin-saga    { text-align: right; }

.bosluk-yok  { margin: 0 !important; }
.ust-8  { margin-top: 8px; }
.ust-12 { margin-top: 12px; }
.ust-16 { margin-top: 16px; }
.ust-20 { margin-top: 20px; }
.ust-24 { margin-top: 24px; }
.ust-32 { margin-top: 32px; }
.alt-12 { margin-bottom: 12px; }
.alt-16 { margin-bottom: 16px; }
.alt-20 { margin-bottom: 20px; }
.alt-24 { margin-bottom: 24px; }

.satir     { display: flex; align-items: center; gap: 10px; }
.satir-ara { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.satir-sar { flex-wrap: wrap; }
.sutun     { display: flex; flex-direction: column; gap: 10px; }
.esnek     { flex: 1 1 auto; min-width: 0; }
.sag-it    { margin-left: auto; }

.gizle { display: none !important; }
.tam-genislik { width: 100%; }

@media print {
  .ust-serit, .gezinme, .alt-bilgi, .panel-yan, .dugme, .bildirim-alan { display: none !important; }
  body { font-size: 12px; }
  .kart, .tablo-sar { border-color: #ccc; }
}


/* ==========================================================================
   22  SAYFA AKIŞI (yapışkan alt bilgi)
   --------------------------------------------------------------------------
   Kısa sayfalarda (giriş, 404, boş sepet) alt bilgi içeriğin hemen altında
   kalıp ekranın ortasında asılı duruyordu. Gövde dikey esnek kutuya çevrilir,
   <main> boşluğu doldurur, alt bilgi en alta yaslanır.

   Konumu "fixed" olan öğeler (mobil çekmece, perde, bildirim alanı) akıştan
   çıktıkları için esnek öğe sayılmaz; bu kural onları etkilemez.
   ========================================================================== */

.sayfa-akis {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;   /* mobil tarayıcı çubukları için */
}
.sayfa-akis > main { flex: 1 0 auto; }
.sayfa-akis > header,
.sayfa-akis > footer,
.sayfa-akis > .ust-serit,
.sayfa-akis > .ana-baslik,
.sayfa-akis > .gezinme,
.sayfa-akis > .kirinti,
.sayfa-akis > .alt-bilgi { flex: 0 0 auto; }


/* ==========================================================================
   23  KİMLİK SAYFALARI (giriş / kayıt / parola)
   --------------------------------------------------------------------------
   İki sütun: solda form, sağda görsel panel. Sağ panel 960px altında gizlenir.
   ========================================================================== */

.kimlik {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Ekranı doldurur ama kısa ekranlarda 620px'in altına inmez */
  min-height: max(620px, calc(100vh - 210px));
  align-items: stretch;
}

/* Geniş form (kayıt): iki sütunlu forma yer açmak için oran değişir */
.kimlik-genis { grid-template-columns: 1.35fr 1fr; }
.kimlik-genis .kimlik-ic { max-width: 580px; }

/* --- Sol: form --- */
.kimlik-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 64px;
}
.kimlik-ic { width: 100%; max-width: 420px; margin: 0 auto; }

.kimlik-ust {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--sari-metin);
  margin-bottom: 14px;
}
.kimlik-ust::before {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--sari);
}
.kimlik-baslik { font-size: 30px; margin-bottom: 8px; }
.kimlik-alt { font-size: 13.5px; color: var(--gri-3); line-height: 1.7; }
.kimlik-alan { margin-top: 26px; }

.kimlik-ayirac {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gri-5);
}
.kimlik-ayirac::before,
.kimlik-ayirac::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--cizgi);
}

/* --- Sağ: görsel panel --- */
.kimlik-panel {
  position: relative;
  overflow: hidden;
  background: var(--lacivert-2);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 56px;
  color: #fff;
}
.kimlik-panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kimlik-perde {
  position: absolute;
  inset: 0;
  background: linear-gradient(195deg,
    rgba(17, 17, 17, 0.55) 0%,
    rgba(17, 17, 17, 0.80) 45%,
    rgba(17, 17, 17, 0.95) 100%);
}
.kimlik-panel-ic { position: relative; max-width: 460px; }

.kimlik-panel-ust {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--sari);
  margin-bottom: 18px;
}
.kimlik-panel h2 {
  font-size: 34px;
  line-height: 1.15;
  color: #fff;
  margin-bottom: 16px;
}
.kimlik-panel h2 em { font-style: normal; color: var(--sari); }
.kimlik-panel > .kimlik-panel-ic > p {
  font-size: 14px;
  line-height: 1.75;
  color: #C4C4C4;
}

.kimlik-liste {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 28px;
}
.kimlik-liste li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: #E8E8E8;
}
.kimlik-liste [data-lucide] { color: var(--sari); margin-top: 2px; }

.kimlik-sayilar {
  display: flex;
  gap: 36px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.kimlik-sayilar strong {
  display: block;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}
.kimlik-sayilar span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #9C9C9C;
  margin-top: 4px;
}

/* ==========================================================================
   24  ANA SAYFA BİLEŞENLERİ
   --------------------------------------------------------------------------
   Vitrin (kahraman slayt + yan kartlar), kategori şeridi, tanıtım kutuları,
   marka bandı ve sayı şeridi. Bölüm başlıkları da burada sarı vurgu alır.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Bölüm başlığı — "ÇOK SATAN ÜRÜNLER ———"
   -------------------------------------------------------------------------- */
.bolum-basi h2 {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.bolum-basi h2::after {
  content: '';
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: var(--sari);
  flex: 0 0 auto;
}

.bolum-eylem { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   Ürün şeridi — 5 kart görünür, ok tuşlarıyla yatay kaydırılır
   --------------------------------------------------------------------------
   Izgara yerine kaydırılabilir şerit: başlıktaki ‹ › okları böylece gerçek bir
   işe yarar. Masaüstü görünümü 5 sütunlu ızgarayla birebir aynı kalır.
   -------------------------------------------------------------------------- */
.urun-serit {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 4 * 16px) / 5);
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
}
.urun-serit::-webkit-scrollbar { display: none; }
.urun-serit > * { scroll-snap-align: start; }
.serit-ok:disabled { opacity: 0.35; pointer-events: none; }
.serit-ok {
  width: 32px; height: 32px;
  padding: 0;
  border: 1px solid var(--cizgi-kutu);
  border-radius: 50%;
  background: var(--beyaz);
  color: var(--gri-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--gecis), color var(--gecis);
}
.serit-ok:hover { border-color: var(--sari); color: var(--sari-metin); }

/* --------------------------------------------------------------------------
   Vitrin (kahraman)
   -------------------------------------------------------------------------- */
.vitrin {
  position: relative;
  background: var(--lacivert);
  overflow: hidden;
}
.vitrin-gorsel { position: absolute; inset: 0; }
.vitrin-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.vitrin-perde {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(20, 32, 46, 0.95) 0%,
    rgba(20, 32, 46, 0.86) 38%,
    rgba(20, 32, 46, 0.42) 68%,
    rgba(20, 32, 46, 0.30) 100%);
}

.vitrin-ic {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 296px;
  gap: 40px;
  align-items: center;
  min-height: 460px;
  padding-top: 56px;
  /* Kategori şeridi -46px ile biner; altta ona yer bırakılır */
  padding-bottom: 104px;
}

/* Sol sütun: üst üste duran slayt metinleri + ortak nokta kontrolleri.
   Yalnızca ".etkin" olan metin akışa girer, böylece ızgarada tek hücre kaplar. */
.vitrin-sol { max-width: 580px; min-width: 0; }
.vitrin-metin { display: none; }
.vitrin-metin.etkin { display: block; }

/* Slayt katmanları (görsel + perde) çapraz geçişle değişir */
.vitrin-katman {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 520ms ease;
}
.vitrin-katman.etkin { opacity: 1; }

.vitrin-etiket {
  display: inline-block;
  padding: 9px 17px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.09);
  color: var(--sari);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
}
.vitrin h1 {
  margin-top: 22px;
  font-size: 56px;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: #fff;
}
.vitrin h1 em { display: block; font-style: normal; color: var(--sari); }
.vitrin-aciklama {
  margin-top: 20px;
  max-width: 460px;
  font-size: 15px;
  line-height: 1.75;
  color: #C0CAD6;
}
.vitrin .dugme { margin-top: 30px; height: 52px; padding: 0 30px; font-size: 14px; }

/* Dokunma hedefi 44x44 olmalı; görünen çizgi ::before ile çizilir.
   Aksi hâlde 26x4px'lik çubuğa parmakla isabet ettirmek imkânsızdı.
   Dikey akış korunsun diye kutunun fazlası negatif margin ile geri alınır. */
.slayt-noktalar {
  display: flex;
  gap: 0;
  margin-top: 14px;
  margin-bottom: -20px;
}
.slayt-nokta {
  width: 44px; height: 44px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.slayt-nokta::before {
  content: '';
  display: block;
  width: 26px; height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.30);
  transition: background var(--gecis), width var(--gecis);
}
.slayt-nokta.etkin::before { background: var(--sari); width: 34px; }

/* Sağ bilgi kartları */
.vitrin-kartlar { display: flex; flex-direction: column; gap: 12px; }
.vitrin-kart {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: var(--r-kart);
  background: rgba(15, 25, 36, 0.80);
}
.vitrin-kart [data-lucide] { color: var(--sari); flex: 0 0 auto; margin-top: 2px; }
.vitrin-kart strong {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #fff;
}
/* Çocuk seçici şart: markup'ta strong+span'i saran bir <span> daha var,
   torun seçici onu da yakalayıp üstten 5px kaydırıyordu. */
.vitrin-kart > span > span {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  line-height: 1.6;
  color: #93A0B0;
}

/* --------------------------------------------------------------------------
   Kategori şeridi — vitrinin altına binen beyaz kart
   -------------------------------------------------------------------------- */
.kategori-serit-sar { position: relative; z-index: 5; margin-top: -46px; }
.kategori-serit {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kart);
  box-shadow: var(--golge-yukselt);
}
.kategori-oge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 22px 10px 20px;
  text-align: center;
  color: var(--lacivert);
  transition: color var(--gecis);
}
.kategori-oge + .kategori-oge { border-left: 1px solid var(--cizgi-ince); }
.kategori-oge img { width: 64px; height: 64px; object-fit: contain; }
.kategori-oge span { font-size: 12px; font-weight: 600; line-height: 1.45; }
.kategori-oge:hover { color: var(--sari-metin); }

.kategori-serit-ok {
  position: absolute;
  right: -17px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  box-shadow: var(--golge-kart);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gri-2);
}
.kategori-serit-ok:hover { border-color: var(--sari); color: var(--sari-metin); }

/* --------------------------------------------------------------------------
   Tanıtım kutuları (iki sütun)
   -------------------------------------------------------------------------- */
.tanit-band { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.tanit-kutu {
  position: relative;
  overflow: hidden;
  min-height: 162px;
  padding: 28px 30px;
  border-radius: var(--r-kart);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tanit-koyu { background: var(--lacivert); }
.tanit-sari { background: var(--sari); }

.tanit-gorsel {
  position: absolute;
  left: auto;          /* güvence: kutuyu sola çeken bir kural kalmasın */
  right: 0; top: 0; bottom: 0;
  width: 50%;
}
/* Maske görseli soldan yumuşakça kutunun rengine karıştırır; böylece hem
   lacivert hem sarı kutuda tek bir kural yeterli olur. */
.tanit-gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 46%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 46%);
}

.tanit-icerik { position: relative; max-width: 56%; }
.tanit-ust { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; }
.tanit-koyu .tanit-ust { color: var(--sari); }
.tanit-sari .tanit-ust { color: var(--lacivert); opacity: 0.75; }

.tanit-baslik {
  margin-top: 9px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.tanit-koyu .tanit-baslik { color: #fff; }
.tanit-sari .tanit-baslik { color: var(--lacivert); }

.tanit-kutu .dugme {
  align-self: flex-start;
  margin-top: 18px;
  height: 38px;
  padding: 0 18px;
  font-size: 11.5px;
  letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   Marka bandı — koyu zeminde logo şeridi
   -------------------------------------------------------------------------- */
.marka-band { background: var(--lacivert); }
/* .kapsayici ile birlikte kullanılır; yan boşluğu ezmemek için yalnızca dikey. */
.marka-band-ic { display: flex; align-items: center; gap: 34px; padding-top: 30px; padding-bottom: 30px; }
.marka-band-baslik {
  flex: 0 0 auto;
  width: 152px;
  padding-right: 30px;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  color: #fff;
}
.marka-band-liste {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  min-width: 0;
}
/* Koyu banttaki marka kutuları — bölüm 09'daki AÇIK zeminli .marka-kutu
   kurallarını ezmek için ".marka-band" ile kapsamlandırılır (özgüllük 0,2,0). */
.marka-band .marka-kutu {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0;
  min-width: 0;
}
.marka-band .marka-kutu + .marka-kutu {
  border-left: 1px solid rgba(255, 255, 255, 0.13);
  padding-left: 26px;
}
.marka-band .marka-kutu img {
  width: auto;
  max-height: 38px;
  object-fit: contain;
  opacity: 0.62;
  filter: brightness(0) invert(1);
  transition: opacity var(--gecis);
}
.marka-band .marka-kutu:hover img { opacity: 1; filter: brightness(0) invert(1); }

.marka-band .marka-yazi {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.68;
  transition: opacity var(--gecis);
}
.marka-band .marka-kutu:hover .marka-yazi { color: #fff; opacity: 1; }

/* Bandın sağ ucundaki ok da koyu zemine uyar (açık tema .serit-ok beyaz dolgulu) */
.marka-band .serit-ok {
  flex: 0 0 auto;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}
.marka-band .serit-ok:hover { background: var(--sari); border-color: var(--sari); color: var(--lacivert); }

/* --------------------------------------------------------------------------
   Sayı şeridi
   -------------------------------------------------------------------------- */
.sayilar-serit {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--beyaz);
  border-bottom: 1px solid var(--cizgi);
}
.sayilar-oge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 26px 16px;
}
.sayilar-oge + .sayilar-oge { border-left: 1px solid var(--cizgi-ince); }
.sayilar-oge [data-lucide] { color: var(--gri-5); flex: 0 0 auto; }
.sayilar-oge strong {
  display: block;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--lacivert);
}
.sayilar-oge > span > span { display: block; margin-top: 3px; font-size: 11.5px; color: var(--gri-4); }

/* ==========================================================================
   25  YÜZEN WHATSAPP SOHBETİ
   --------------------------------------------------------------------------
   Sağ altta sabit düğme + açılır sohbet paneli. Sunucuya istek atmaz;
   "Yaz" bağlantısı wa.me adresine hazır mesajla gider.
   ========================================================================== */

.wa {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 180;   /* mobil çekmeceden (200) ve bildirimlerden aşağıda */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

/* --------------------------------------------------------------------------
   Yüzen düğme
   -------------------------------------------------------------------------- */
.wa-dugme {
  position: relative;
  width: 58px;
  height: 58px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.42), 0 2px 6px rgba(27, 42, 61, 0.18);
  transition: transform var(--gecis), box-shadow var(--gecis), background var(--gecis);
}
.wa-dugme:hover { background: #1FBE5A; transform: scale(1.06); }
.wa-dugme:active { transform: scale(0.98); }
.wa-dugme:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(37, 211, 102, 0.35), 0 6px 20px rgba(37, 211, 102, 0.42);
}
.wa-dugme-simge { display: flex; }

/* Dikkat çeken yumuşak nabız — panel açıkken durur */
.wa-dugme::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  opacity: 0.55;
  animation: wa-nabiz 2.4s ease-out infinite;
  z-index: -1;
}
@keyframes wa-nabiz {
  0%   { transform: scale(1);    opacity: 0.55; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}
.wa.acik .wa-dugme::before { animation: none; }

.wa-rozet {
  position: absolute;
  top: -2px; right: -2px;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  border-radius: var(--r-tam);
  background: var(--kirmizi);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--beyaz);
}
.wa.acik .wa-rozet { display: none; }

/* --------------------------------------------------------------------------
   Panel
   -------------------------------------------------------------------------- */
.wa-panel {
  width: 330px;
  max-width: calc(100vw - 44px);
  border-radius: 14px;
  overflow: hidden;
  background: var(--beyaz);
  box-shadow: 0 18px 48px rgba(27, 42, 61, 0.24), 0 4px 12px rgba(27, 42, 61, 0.10);
  transform-origin: bottom right;
  animation: wa-ac 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes wa-ac {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Başlık --- */
.wa-basi {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  background: #075E54;   /* WhatsApp koyu yeşili */
  color: #fff;
}
.wa-avatar {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.wa-avatar [data-lucide] { color: #fff; }
.wa-cevrimici {
  position: absolute;
  right: -1px; bottom: -1px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #25D366;
  border: 2px solid #075E54;
}
.wa-kimlik { flex: 1 1 auto; min-width: 0; }
.wa-kimlik strong { display: block; font-size: 14px; font-weight: 700; }
.wa-kimlik small {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.72);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wa-kapat {
  width: 30px; height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background var(--gecis);
}
.wa-kapat:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }
.wa-kapat [data-lucide] { color: currentColor; }

/* --- Gövde: WhatsApp'ın açık zemini --- */
.wa-govde {
  padding: 18px 16px;
  background: #ECE5DD;
  max-height: 320px;
  overflow-y: auto;
}

.wa-balon {
  position: relative;
  background: var(--beyaz);
  border-radius: 4px 12px 12px 12px;
  padding: 11px 13px 20px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--lacivert);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.10);
}
/* Balonun sol üst kuyruğu */
.wa-balon::before {
  content: '';
  position: absolute;
  top: 0; left: -7px;
  border-width: 0 8px 9px 0;
  border-style: solid;
  border-color: transparent var(--beyaz) transparent transparent;
}
.wa-saat {
  position: absolute;
  right: 11px; bottom: 6px;
  font-size: 10.5px;
  color: var(--gri-5);
}

.wa-hizli { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.wa-hizli a {
  display: block;
  padding: 9px 13px;
  border-radius: var(--r-tam);
  border: 1px solid #25D366;
  background: rgba(255, 255, 255, 0.86);
  font-size: 12.5px;
  font-weight: 600;
  color: #0B7A43;
  text-align: center;
  transition: background var(--gecis), color var(--gecis);
}
.wa-hizli a:hover { background: #25D366; color: #fff; }

/* --- Alt eylem --- */
.wa-alt { padding: 12px 16px 14px; background: var(--beyaz); }
.wa-yaz {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 44px;
  border-radius: var(--r-dugme);
  background: #25D366;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  transition: background var(--gecis);
}
.wa-yaz:hover { background: #1FBE5A; color: #fff; }
.wa-yaz [data-lucide] { color: #fff; }

@media (max-width: 640px) {
  .wa { right: 16px; bottom: 16px; }
  .wa-dugme { width: 54px; height: 54px; }
  .wa-panel { width: calc(100vw - 32px); max-width: calc(100vw - 32px); }
  .wa-govde { max-height: 46vh; }
}

/* Hareket azaltma tercihinde nabız ve açılış animasyonu kapanır */
@media (prefers-reduced-motion: reduce) {
  .wa-dugme::before { animation: none; }
  .wa-panel { animation: none; }
}


/* ==========================================================================
   26  DUYARLI
   --------------------------------------------------------------------------
   1280px üzerinde masaüstü tasarımı birebir korunur.
   ========================================================================== */

@media (max-width: 1280px) {
  .izgara-8 { grid-template-columns: repeat(4, 1fr); }
  .izgara-6 { grid-template-columns: repeat(4, 1fr); }
  .izgara-5 { grid-template-columns: repeat(4, 1fr); }
  .urun-serit { grid-auto-columns: calc((100% - 3 * 16px) / 4); }
  .urun-detay { grid-template-columns: 440px 1fr; gap: 32px; }
  .galeri-ana { height: 400px; }
  .detay-duzen { grid-template-columns: 1fr 340px; gap: 32px; }
  .kahraman h1 { font-size: 44px; }
}

@media (max-width: 1180px) {
  /* Vitrin yan kartları daralır, arama kutusu kısalır */
  .vitrin-ic { grid-template-columns: 1fr 262px; gap: 28px; }
  .vitrin h1 { font-size: 46px; }
  .arama { max-width: 460px; }
  .arama-kategori { width: 148px; }
  /* Yer kazanmak için hesap ve sepet yazıları gizlenir, ikonlar kalır */
  .baslik-hesap .baslik-simge-yazi,
  .baslik-sepet .baslik-simge-yazi { display: none; }
  /* Yazı gizlenince geriye 24px'lik çıplak ikon kalıyordu; dokunma alanı korunur */
  .baslik-simge { min-width: 44px; min-height: 44px; justify-content: center; }
  .baslik-eylem { gap: 18px; }
  .ana-baslik .kapsayici { gap: 22px; }

  .kategori-serit { grid-template-columns: repeat(6, 1fr); }
  .kategori-oge:nth-child(6n+1) { border-left: none; }
  .kategori-oge:nth-child(n+7) { border-top: 1px solid var(--cizgi-ince); }
}

@media (max-width: 1080px) {
  /* Vitrin yan kartları metnin altına iner */
  .vitrin-ic { grid-template-columns: 1fr; gap: 30px; min-height: 0; }
  .vitrin-kartlar { flex-direction: row; }
  .vitrin-kart { flex: 1 1 0; }
  .vitrin h1 { font-size: 40px; }

  .tanit-band { grid-template-columns: 1fr; }

  .marka-band-ic { flex-direction: column; align-items: stretch; gap: 20px; }
  .marka-band-baslik {
    width: auto;
    padding-right: 0;
    padding-bottom: 16px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }
  .marka-band-liste { flex-wrap: wrap; justify-content: flex-start; gap: 28px; }
  /* Sarınca dikey ayraç anlamını yitirir */
  .marka-band .marka-kutu + .marka-kutu { border-left: none; padding-left: 0; }

  .sayilar-serit { grid-template-columns: repeat(3, 1fr); }
  .sayilar-oge:nth-child(3n+1) { border-left: none; }
  .sayilar-oge:nth-child(n+4) { border-top: 1px solid var(--cizgi-ince); }

  /* Gezinme daralır. DİKKAT: .ana-menu'ye "gap" EKLEME — bağlantıların kendi
     yatay padding'i var, gap onun üstüne binip menüyü genişletiyordu. */
  .ana-menu a { padding: 0 12px; font-size: 12.5px; }
  .kategori-dugme { margin-right: 18px; padding: 0 18px; }
  .baslik-eylem { gap: 16px; }

  .izgara-6 { grid-template-columns: repeat(3, 1fr); }
  .mega-ic { grid-template-columns: 1fr; }
  .mega-raf { border-left: none; border-top: 1px solid var(--cizgi-acik); padding-left: 0; padding-top: 18px; margin-top: 18px; }
  .mega-alt-serit .kapsayici span:nth-child(2) { display: none; }

  .alt-izgara { grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
  .alt-izgara > div:first-child { grid-column: 1 / -1; }
  .alt-tanim { max-width: 480px; }

  .sepet-duzen,
  .odeme-duzen { grid-template-columns: 1fr 320px; }
  .ozet-izgara { grid-template-columns: repeat(2, 1fr); }
  .detay-duzen { grid-template-columns: 1fr; }

  .kimlik-form  { padding: 48px 40px; }
  .kimlik-panel { padding: 44px 40px; }
  .kimlik-panel h2 { font-size: 29px; }
}

@media (max-width: 960px) {
  /* Kimlik sayfalarında görsel panel gizlenir; form tek sütun ortalanır */
  .kimlik { grid-template-columns: 1fr; min-height: 0; }
  .kimlik-panel { display: none; }
  .kimlik-form { padding: 44px 20px 56px; }
}

@media (max-width: 900px) {
  /* ==================================================================
     MOBİL DOKUNMA VE OKUNABİLİRLİK DÜZELTMELERİ
     ================================================================== */

  /* iOS Safari, 16px'in altındaki bir alana odaklanınca sayfayı zorla
     yakınlaştırır ve geri çıkmaz. Bağlam kuralları daha özgül olduğu için
     hepsi tek tek listelenmek zorunda. */
  .alan,
  input[type="text"].alan, input[type="email"].alan, input[type="password"].alan,
  input[type="tel"].alan, input[type="number"].alan, input[type="search"].alan,
  input[type="date"].alan, select.alan, textarea.alan,
  .arama input, .arama-kategori, .alt-bulten input,
  .adet-kutu input, .adet-kutu.kucuk input,
  .fiyat-aralik .alan, .siralama-sag .alan, .kupon-satir .alan { font-size: 16px; }

  .alan { height: 48px; }
  .fiyat-aralik .alan, .siralama-sag .alan { height: 44px; }
  .kupon-satir .alan { height: 46px; }
  .alt-bulten, .alt-bulten input, .alt-bulten button { height: 46px; }

  /* Yan sütunlu sayfalar tek sütuna iner (iletişim, teklif, bayilik,
     hakkımızda, yasal sayfalar, SSS, proje detay, yönetim panosu) */
  .yan-sutunlu,
  .yan-sutunlu-320,
  .yan-sutunlu-300 { grid-template-columns: 1fr; gap: 20px; }

  /* Adet artır/azalt ve satır silme dokunulabilir olmalı */
  .adet-kutu { height: 48px; }
  .adet-kutu button { width: 46px; }
  .adet-kutu.kucuk { height: 44px; }
  .adet-kutu.kucuk button { width: 44px; }
  .adet-kutu.kucuk input { width: 48px; }
  .sepet-sil { width: 44px; height: 44px; }

  /* Süzgeç: tam ekranda iç kaydırma kutusu ve 20px'lik satırlar iş görmüyor */
  .suzgec-govde { max-height: none; overflow: visible; gap: 4px; }
  .suzgec-govde .onay { min-height: 44px; align-items: center; }
  .suzgec-basi h3, .suzgec-blok-basi { min-height: 44px; }

  /* Küçük ikon kontrolleri (görünüm seçici, sayfalama, parola göster) */
  .dugme-simge { width: 44px; height: 44px; }
  .gorunum-secim button { width: 44px; height: 44px; }
  .sayfalama-liste a, .sayfalama-liste span { min-width: 42px; height: 42px; }
  .goz { width: 44px; }

  /* Bildirim ve WhatsApp kapatma düğmeleri */
  .bildirim-kapat { width: 34px; height: 34px; }
  .wa-kapat { width: 38px; height: 38px; }

  /* Yüzen WhatsApp düğmesi sayfa sonundaki içeriği örtmesin */
  .alt-serit .kapsayici { padding-bottom: 84px; }

  /* Ödeme çerçevesi mobilde daha uzun; formun tamamı erişilebilir olmalı */
  .odeme-cerceve iframe { min-height: 880px; }

  /* --- Vitrin --- */
  .vitrin-ic { padding-top: 38px; padding-bottom: 76px; }
  .vitrin h1 { font-size: 33px; }
  .vitrin-etiket { font-size: 10px; padding: 7px 13px; }
  .vitrin-aciklama { font-size: 14px; }
  .vitrin-kartlar { flex-direction: column; }

  /* --- Kategori şeridi --- */
  .kategori-serit-sar { margin-top: 26px; }
  .kategori-serit { grid-template-columns: repeat(4, 1fr); }
  /* Üst kırılımın 6n+1 kuralı 4 sütunda yanlış hücreyi vuruyor: önce hepsine
     kenarlık ver, sonra satır başlarından kaldır. */
  .kategori-oge { border-left: 1px solid var(--cizgi-ince); }
  .kategori-oge:first-child,
  .kategori-oge:nth-child(4n+1) { border-left: none; }
  .kategori-oge:nth-child(n+5) { border-top: 1px solid var(--cizgi-ince); }
  .kategori-serit-ok { display: none; }

  /* --- Tanıtım kutuları --- */
  .tanit-icerik { max-width: 100%; }
  .tanit-gorsel { opacity: 0.25; width: 62%; }
  .tanit-baslik { font-size: 19px; }

  /* --- Sayı şeridi (2 sütun) --- */
  .sayilar-serit { grid-template-columns: repeat(2, 1fr); }
  /* 1080'deki 3n+1 kuralı 2 sütunda 4. kutunun ayracını siliyordu */
  .sayilar-oge { border-left: 1px solid var(--cizgi-ince); }
  .sayilar-oge:first-child,
  .sayilar-oge:nth-child(2n+1) { border-left: none; }
  .sayilar-oge:nth-child(n+3) { border-top: 1px solid var(--cizgi-ince); }

  /* Başlık ölçüsü kırılımlar boyunca KÜÇÜLEREK ilerlemeli (19 → 17 → 15.5) */
  .bolum-basi h2 { font-size: 17px; }
  .bolum-basi h2::after { width: 34px; }
  .izgara-5 { grid-template-columns: repeat(3, 1fr); }
  .urun-serit { grid-auto-columns: calc((100% - 2 * 16px) / 3); }

  /* --- Başlık mobil düzene geçer --- */
  .mobil-ac { display: flex; }
  .ust-serit { display: none; }
  .gezinme { display: none; }

  .ana-baslik .kapsayici {
    /* KRİTİK: taban kuraldaki sabit "height: 92px" sıfırlanmazsa, satır sarınca
       arama çubuğu beyaz başlığın dışına taşar ve altındaki bölümün arkasında kalır. */
    height: auto;
    min-height: 92px;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .logo-marka  { font-size: 20px; }
  .logo-alt { font-size: 8px; letter-spacing: 0.28em; }

  .arama {
    order: 3;
    width: 100%;
    max-width: none;
    margin-left: 0;
    height: 44px;
  }
  .arama input, .arama button { height: 44px; }
  /* Dar ekranda kategori seçici metin alanını yiyordu */
  .arama-kategori { display: none; }
  .arama input { border-radius: var(--r-dugme) 0 0 var(--r-dugme); }

  .baslik-eylem { gap: 18px; margin-left: auto; }

  /* --- Diğer düzenler --- */
  .yan-duzen,
  .panel-duzen,
  .sepet-duzen,
  .odeme-duzen { grid-template-columns: 1fr; }

  .panel-yan { position: static; }
  .panel-menu { display: grid; grid-template-columns: repeat(2, 1fr); }
  .panel-menu .ayirac-satir { grid-column: 1 / -1; }
  .ozet { position: static; }

  /* Süzgeç panelini gizle, düğmeyle aç */
  .suzgec-ac {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    margin-bottom: 16px;
  }
  .suzgec {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 210;
    border-radius: 0;
    border: none;
    overflow-y: auto;
    padding: 0 20px 100px;
  }
  .suzgec.acik { display: block; }
  .suzgec-kapat { display: inline-flex; }
  .suzgec-basi {
    position: sticky;
    top: 0;
    background: var(--beyaz);
    padding: 18px 0;
    border-bottom: 1px solid var(--cizgi-acik);
    z-index: 2;
  }

  .urun-detay { grid-template-columns: 1fr; gap: 28px; }
  .galeri-ana { height: 340px; padding: 20px; }
  .galeri-kucukler { grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .galeri-kucuk { height: 66px; }
  .urun-baslik { font-size: 24px; }
  .fiyat-buyuk { font-size: 28px; }

  .kahraman-gorsel { inset: 0; opacity: 0.25; }
  .kahraman-perde { display: none; }
  .kahraman-icerik { min-height: 380px; padding: 48px 0; }
  .kahraman h1 { font-size: 36px; }
  .kahraman p { font-size: 14.5px; }

  .izgara-4 { grid-template-columns: repeat(2, 1fr); }
  .izgara-3 { grid-template-columns: repeat(2, 1fr); }

  .sepet-satir {
    grid-template-columns: 76px 1fr auto;
    gap: 14px;
  }
  .sepet-gorsel { width: 76px; height: 76px; }
  .sepet-satir .adet-kutu { grid-column: 2; }
  .sepet-satir .sepet-tutar { grid-column: 3; }
  /* Izgara öğesi <form>; buton onun içinde olduğu için kural forma verilir */
  .sepet-satir .sepet-sil-form { grid-column: 3; justify-self: end; }

  .adimlar { max-width: none; }
  .adim span:last-child { display: none; }
  .adim-cizgi { margin: 0 8px; }
}

@media (max-width: 640px) {
  :root { --kenar: 14px; }

  .bolum { padding-top: 36px; }
  .bolum-basi h2 { font-size: 15.5px; }
  .bolum-basi h1 { font-size: 24px; }
  .sayfa-basi h1 { font-size: 24px; }

  .izgara-8,
  .izgara-6,
  .izgara-5 { grid-template-columns: repeat(2, 1fr); }
  /* .izgara-2 hiçbir kırılımda tek sütuna inmiyordu: kayıtlı adres kartları,
     ödeme adımları ve hesap sayfaları telefonda iki dar sütuna sıkışıyordu. */
  .izgara-2 { grid-template-columns: 1fr; }

  /* Ürün detay sekmeleri dokunulabilir yükseklikte */
  .sekme { padding: 0 14px; height: 46px; font-size: 13px; }

  /* Liste görünümünde ürün adı tek satıra kırpılıyordu */
  .urun-kart.liste .urun-ad { -webkit-line-clamp: 2; }
  .urun-serit { grid-auto-columns: calc((100% - 16px) / 2); }

  .kategori-serit { grid-template-columns: repeat(2, 1fr); }
  .kategori-oge:nth-child(2n+1) { border-left: none; }
  .kategori-oge:nth-child(n+3) { border-top: 1px solid var(--cizgi-ince); }

  .sayilar-serit { grid-template-columns: repeat(2, 1fr); }
  .vitrin h1 { font-size: 29px; }

  /* Yatay ürün kartı burada dikeye geçer — 420px'e kadar beklenirse
     "SEPETE EKLE" düğmesi 421-560px arasında kırpılıyordu. */
  .urun-kart.liste { flex-direction: column; }
  .urun-kart.liste .urun-gorsel {
    width: 100%;
    height: 180px;
    border-right: none;
    border-bottom: 1px solid var(--cizgi-ince);
  }
  .urun-kart.liste .urun-govde { border-left: none; }
  .urun-kart.liste .urun-sepet { width: 100%; }

  .alt-izgara { grid-template-columns: repeat(2, 1fr); }
  .alt-serit .kapsayici { flex-direction: column; align-items: flex-start; gap: 14px; }

  .form-izgara-2,
  .form-izgara-3 { grid-template-columns: 1fr; }
  .ozet-izgara { grid-template-columns: 1fr; }
  .ozet-kutular { grid-template-columns: 1fr; }
  .panel-menu { grid-template-columns: 1fr; }

  .kahraman h1 { font-size: 30px; }
  .kahraman-dugmeler .dugme { width: 100%; }

  .satin-al { flex-direction: column; }
  .satin-al .adet-kutu { width: 100%; justify-content: space-between; }
  .satin-al .adet-kutu input { flex: 1 1 auto; width: auto; }
  .satin-al .dugme { width: 100%; }

  .ozellik-satir { grid-template-columns: 1fr; }
  .ozellik-satir dt { padding-bottom: 0; }
  .ozellik-satir dd { padding-top: 4px; }

  .sepet-satir { grid-template-columns: 68px 1fr; }
  .sepet-gorsel { width: 68px; height: 68px; }
  .sepet-satir .adet-kutu,
  .sepet-satir .sepet-tutar,
  .sepet-satir .sepet-sil-form { grid-column: 2; justify-self: start; }
  .sepet-satir .sepet-tutar { text-align: left; }

  .sekme { padding: 0 14px 12px; font-size: 13px; }
  .bildirim-alan { left: 14px; right: 14px; max-width: none; }
  .pencere-perde { padding: 0; align-items: flex-end; }
  .pencere { max-width: none; border-radius: var(--r-kart) var(--r-kart) 0 0; }
}

@media (max-width: 420px) {
  .izgara-4,
  .izgara-3,
  .izgara-8,
  .izgara-6,
  .izgara-5 { grid-template-columns: 1fr; }
  .urun-serit { grid-auto-columns: 78%; }
  .alt-izgara { grid-template-columns: 1fr; }
  .vitrin h1 { font-size: 26px; }
  /* Tek sütunda kart neredeyse ekran genişliği; 210px'lik görsel kutusu
     orantısız kalıyordu */
  .urun-gorsel { height: 260px; }
  .siralama-sag .alan { min-width: 0; width: 100%; }
  .siralama-serit { flex-wrap: wrap; gap: 10px; }
  .tanit-gorsel { display: none; }
  .tanit-icerik { max-width: 100%; }
}

/* Hareket duyarlılığı */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   27  Bayilik (başvuru, bayi paneli, fiyat listesi, cari hesap)
   ========================================================================== */

/* Boş durum — birçok görünüm kullanıyordu ama tanımı yoktu */
.bos-durum {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 44px 20px;
  text-align: center;
  color: var(--gri-4);
  border: 1px dashed var(--cizgi);
  border-radius: var(--r-kart);
  background: var(--yuzey);
}
.bos-durum [data-lucide], .bos-durum svg.lucide { color: var(--gri-5); }
.bos-durum h3 { margin: 4px 0 0; font-size: 16px; color: var(--lacivert); }
.bos-durum p  { margin: 0; max-width: 420px; font-size: 13px; line-height: 1.7; }
.bos-durum .dugme { margin-top: 8px; }

.alt-8      { margin-bottom: 8px; }
.metin-mavi { color: var(--mavi); }

.bayi-sayfa { padding-top: 24px; padding-bottom: 64px; }

.form-bolum-baslik {
  margin: 4px 0 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gri-4);
}
.form-izgara + .form-bolum-baslik { margin-top: 26px; }

/* Ziyaretçi / bayi çağrı kartı */
.bayi-cagri {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 32px 28px;
}
.bayi-cagri > [data-lucide], .bayi-cagri > svg.lucide { color: var(--sari); }
.bayi-cagri h2 { margin: 0; font-size: 20px; color: var(--lacivert); }
.bayi-cagri p  { margin: 0; max-width: 560px; color: var(--gri-2); line-height: 1.75; }

/* Bekleyen başvuru özeti */
.bayi-ozet-liste { display: grid; gap: 10px; margin: 0; }
.bayi-ozet-liste > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  font-size: 13px;
}
.bayi-ozet-liste dt { color: var(--gri-4); font-weight: 600; }
.bayi-ozet-liste dd { margin: 0; color: var(--lacivert); font-weight: 600; }

/* Süreç adımları */
.bayi-adimlar {
  counter-reset: adim;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.bayi-adimlar li {
  counter-increment: adim;
  position: relative;
  padding-left: 38px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gri-2);
}
.bayi-adimlar li::before {
  content: counter(adim);
  position: absolute;
  left: 0; top: 0;
  width: 26px; height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--sari-soluk);
  color: var(--lacivert);
  font-size: 12px;
  font-weight: 800;
}
.bayi-adimlar strong { display: block; color: var(--lacivert); }

/* Ürün kartı ve detayda bayi etiketi */
.rozet-bayi { background: var(--lacivert); }
.bayi-not   { color: var(--lacivert); font-weight: 600; }
.bayi-not [data-lucide], .bayi-not svg.lucide { color: var(--sari); }

/* Limit kullanım çubuğu */
.limit-cubugu {
  height: 8px;
  border-radius: 999px;
  background: var(--yuzey-2);
  overflow: hidden;
}
.limit-cubugu > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--yesil);
}
.limit-cubugu > span.uyari  { background: var(--uyari); }
.limit-cubugu > span.kritik { background: var(--kirmizi); }

/* Fiyat listesi süzgeci */
.bayi-suzgec {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.bayi-suzgec input[type="search"] { flex: 1 1 260px; min-width: 0; }
.bayi-suzgec select { flex: 0 1 240px; min-width: 0; }

.bayi-fiyat-tablo th { vertical-align: bottom; }
.bayi-fiyat-tablo th .metin-soluk { font-weight: 500; font-size: 11px; }

/* Satır içi adet + sepet düğmesi */
.bayi-satir-ekle { display: flex; align-items: center; gap: 6px; }
.bayi-satir-ekle .alan { width: 72px; height: 34px; padding: 0 8px; font-size: 13px; text-align: center; }
.bayi-satir-ekle .dugme { height: 34px; min-width: 38px; padding: 0 10px; }

/* Hızlı sipariş kutusu */
.kod-alani {
  font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  font-size: 13px;
  line-height: 1.7;
  min-height: 260px;
  text-transform: uppercase;
}
.kod-alani::placeholder { text-transform: none; }

/* Ödeme: seçilemeyen yöntem (cari limit yetersiz) */
.secim-kart.pasif { opacity: 0.65; cursor: not-allowed; }
.secim-kart.pasif:hover { border-color: var(--cizgi); }

@media (max-width: 900px) {
  /* iOS odaklanınca yakınlaştırmasın: tüm form denetimleri 16px */
  .bayi-satir-ekle .alan,
  .kod-alani,
  .bayi-suzgec .alan { font-size: 16px; }

  /* 44 px dokunma alanı */
  .bayi-satir-ekle .alan  { height: 44px; width: 76px; }
  .bayi-satir-ekle .dugme { height: 44px; min-width: 44px; }

  .bayi-suzgec input[type="search"],
  .bayi-suzgec select { flex: 1 1 100%; }
  .bayi-suzgec .dugme { flex: 1 1 auto; min-height: 44px; }

  .bayi-cagri { padding: 24px 18px; }
}

@media (max-width: 640px) {
  .bayi-ozet-liste > div { grid-template-columns: 1fr; gap: 2px; }
}