/* ============================================================
   Panorama Promosyon - Bilesenler (COMPONENTS)
   Bolum 1/3: Buton, etiket, kart temelleri
   ============================================================ */

/* --- Butonlar --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--b-2);
  padding: var(--b-3) var(--b-6);
  min-height: 46px;
  border-radius: var(--r-md);
  font-family: var(--font-baslik);
  font-weight: var(--fw-yari);
  font-size: var(--fs-md);
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all var(--gecis-normal);
  white-space: nowrap;
  text-decoration: none;
}

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn svg {
  flex-shrink: 0;
}

/* Birincil: lacivert zemin */
.btn-birincil {
  background: var(--renk-lacivert-800);
  color: var(--renk-beyaz);
  border-color: var(--renk-lacivert-800);
}

.btn-birincil:hover {
  background: var(--renk-lacivert-700);
  border-color: var(--renk-lacivert-700);
  color: var(--renk-beyaz);
  transform: translateY(-1px);
  box-shadow: var(--golge-md);
}

/* Altin aksan */
.btn-altin {
  background: var(--renk-altin-500);
  color: var(--renk-lacivert-900);
  border-color: var(--renk-altin-500);
  font-weight: var(--fw-kalin);
}

.btn-altin:hover {
  background: var(--renk-altin-400);
  border-color: var(--renk-altin-400);
  color: var(--renk-lacivert-900);
  transform: translateY(-1px);
  box-shadow: var(--golge-md);
}

/* Cizgili (outline) */
.btn-cizgi {
  background: transparent;
  color: var(--renk-lacivert-800);
  border-color: var(--renk-cizgi-koyu);
}

.btn-cizgi:hover {
  border-color: var(--renk-lacivert-800);
  background: var(--renk-lacivert-100);
  color: var(--renk-lacivert-800);
}

/* Koyu zemin uzerinde cizgili */
.btn-cizgi-acik {
  background: transparent;
  color: var(--renk-beyaz);
  border-color: rgba(255, 255, 255, 0.35);
}

.btn-cizgi-acik:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--renk-beyaz);
  color: var(--renk-beyaz);
}

/* Kucuk / buyuk boylar */
.btn-kucuk {
  padding: var(--b-2) var(--b-4);
  /* NUMEX-DÜZELTME (2026-09-30): UX denetimi kart icindeki Detay/Teklife Ekle butonlarini 38px yukseklikle buldu; WCAG 2.5.8 dokunma hedefi icin min-height 44px'e cikarildi. */
  /* NUMEX-DUZELTME (2026-09-30): 38px -> 44px (WCAG 2.5.8 dokunma hedefi) */
  min-height: 44px;
  font-size: var(--fs-sm);
}

/* NUMEX-DUZELTME (2026-09-30): filtre satirlari ve urun basligi baglantilari
   dokunma hedefi esigine (44px) cikarildi; mobilde parmakla secim kolaylassin. */
.filtre-secenek {
  min-height: 44px;
}

.urun-kart .urun-ad a {
  display: inline-block;
  /* NUMEX-DÜZELTME (2026-09-30): Urun adi baglantisi 31px yukseklikte kaliyordu; dokunma hedefi 44px'e cikarildi (kart geneline yayilan ortuye baglanti da mevcut oldugu icin gorsel bozulmaz). */
  /* NUMEX-DUZELTME (2026-09-30): dokunma hedefi 31px -> 44px (WCAG 2.5.8) */
  min-height: 44px;
  padding: var(--b-1) 0;
  line-height: 1.35;
}

.kategori-kart {
  min-height: 44px;
}

.btn-buyuk {
  padding: var(--b-4) var(--b-8);
  min-height: 56px;
  font-size: var(--fs-lg);
}

.btn-tam {
  width: 100%;
}

/* Metin butonu (baglanti gorunumlu) */
/* NUMEX-DÜZELTME (2026-09-30): .btn-metin dokunma hedefi 28px yukseklikte
   kaliyordu (WCAG 2.5.5: 44px). Metin baglantisi gorunumu korunurken
   tiklanabilir alan dikeyde buyutuldu. */
.btn-metin {
  min-height: 44px;
  background: none;
  border: 0;
  padding: var(--b-1) var(--b-2);
  color: var(--renk-lacivert-600);
  font-weight: var(--fw-yari);
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: auto;
}

.btn-metin:hover {
  /* NUMEX-DUZELTME (2026-09-30): WCAG AA - erisilebilir altin tonu. */
  color: var(--renk-altin-metin);
}

/* Yukleniyor durumu */
.btn.yukleniyor {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn.yukleniyor::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  top: 50%;
  left: 50%;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: donen 0.7s linear infinite;
}

.btn-cizgi.yukleniyor::after,
.btn-metin.yukleniyor::after {
  border-color: rgba(11, 27, 51, 0.25);
  border-top-color: var(--renk-lacivert-800);
}

@keyframes donen {
  to {
    transform: rotate(360deg);
  }
}

/* --- Etiketler / rozetler --- */
.etiket {
  display: inline-flex;
  align-items: center;
  gap: var(--b-1);
  padding: 3px var(--b-3);
  border-radius: var(--r-tam);
  font-size: var(--fs-xs);
  font-weight: var(--fw-yari);
  line-height: 1.6;
  white-space: nowrap;
}

.etiket-altin {
  background: var(--renk-altin-100);
  /* NUMEX-DÜZELTME (2026-09-30): 'YENI' etiketi altin-600 (#a8813f) rengiyle altin-100 zeminde 3.15:1 kontrast veriyordu (esik 4.5:1). Metin rengi koyulastirildi. */
  /* NUMEX-DUZELTME (2026-09-30): 3.15:1 -> 5.4:1 (WCAG AA) */
  color: #7a5a1f;
  border: 1px solid #e6d3a8;
}

.etiket-lacivert {
  background: var(--renk-lacivert-100);
  color: var(--renk-lacivert-700);
}

.etiket-basari {
  background: var(--renk-basari-zemin);
  color: var(--renk-basari);
}

.etiket-uyari {
  background: var(--renk-uyari-zemin);
  /* NUMEX-DÜZELTME (2026-09-30): 'SON ADETLER' etiketi uyari rengiyle 3.3:1 kontrast veriyordu (esik 4.5:1) ve urun kartlarinda sik gorunuyor. Metin rengi koyulastirildi. */
  /* NUMEX-DUZELTME (2026-09-30): 3.3:1 -> 5.2:1 (WCAG AA) */
  color: #8a5a10;
  border: 1px solid #efd9b4;
}

.etiket-hata {
  background: var(--renk-hata-zemin);
  color: var(--renk-hata);
}

.etiket-gri {
  background: var(--renk-zemin-alt);
  color: var(--renk-metin-soluk);
}

/* Stok rozeti */
.stok-rozet {
  display: inline-flex;
  align-items: center;
  gap: var(--b-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-yari);
}

.stok-rozet::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.stok-rozet.var {
  /* NUMEX-DÜZELTME (2026-09-30): 'Stokta var' rozeti basari rengiyle 4.36:1 ile sinirda kalmisti (esik 4.5:1). Ton biraz koyulastirildi. */
  /* NUMEX-DUZELTME (2026-09-30): 4.36:1 -> 5.3:1 (WCAG AA) */
  color: #176d41;
}
.stok-rozet.var::before {
  background: var(--renk-basari);
  box-shadow: 0 0 0 3px var(--renk-basari-zemin);
}

.stok-rozet.az {
  /* NUMEX-DÜZELTME (2026-09-30): 'Son 9 adet' stok rozeti uyari rengiyle 3.63:1 kontrast veriyordu (esik 4.5:1). Ton koyulastirildi. */
  /* NUMEX-DUZELTME (2026-09-30): 3.63:1 -> 5.4:1 (WCAG AA) */
  color: #8a5a10;
}
.stok-rozet.az::before {
  background: var(--renk-uyari);
  box-shadow: 0 0 0 3px var(--renk-uyari-zemin);
}

.stok-rozet.yok {
  color: var(--renk-hata);
}
.stok-rozet.yok::before {
  background: var(--renk-hata);
  box-shadow: 0 0 0 3px var(--renk-hata-zemin);
}

.stok-rozet.bilinmiyor {
  color: var(--renk-metin-acik);
}
.stok-rozet.bilinmiyor::before {
  background: var(--renk-metin-acik);
  box-shadow: 0 0 0 3px var(--renk-zemin-alt);
}

/* --- Kart temeli --- */
.kart {
  background: var(--renk-beyaz);
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: all var(--gecis-normal);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.kart:hover {
  border-color: var(--renk-cizgi-koyu);
  box-shadow: var(--golge-md);
  transform: translateY(-3px);
}

.kart-govde {
  padding: var(--b-5);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.kart-govde.esnek-yok {
  flex: 0;
}

/* --- Urun karti --- */
.urun-kart {
  position: relative;
}

.urun-kart .gorsel-kap {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--renk-zemin-alt);
  overflow: hidden;
  display: block;
}

.urun-kart .gorsel-kap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--b-4);
  transition: transform var(--gecis-yavas);
  background: var(--renk-beyaz);
}

.urun-kart:hover .gorsel-kap img {
  transform: scale(1.06);
}

.urun-kart .rozet-kap {
  position: absolute;
  top: var(--b-3);
  left: var(--b-3);
  display: flex;
  flex-direction: column;
  /* NUMEX-DÜZELTME (2026-09-30): Urun kartinda 'YENI', 'ONE CIKAN', 'SON ADETLER' rozetleri ayni kapta ust uste dizilince cok yer kapliyor ve gorsel agirlik olusturuyordu; rozet kabi sutun duzenine alinip bosluk artirildi, boylece ust uste binme/okunmama sorunu kalkti. */
  gap: 5px;
  align-items: flex-start;
  z-index: 2;
  pointer-events: none;
}

/* Rozetler kucuk kartlarda tasmasin */
.urun-kart .rozet-kap .etiket {
  box-shadow: 0 1px 3px rgba(6, 18, 36, 0.14);
  font-size: 0.6875rem;
  padding: 2px var(--b-2);
  letter-spacing: 0.04em;
}

/* Stokta olmayan urunun karti soluk gorunsun */
.urun-kart .gorsel-kap img[data-yedek] {
  transition: transform var(--gecis-yavas), opacity var(--gecis-normal);
}

.urun-kart .kod-satir {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  /* NUMEX-DÜZELTME (2026-09-30): Urun kartindaki urun kodu (div.kod-satir) --renk-metin-acik ile 2.88:1 kontrast veriyordu (esik 4.5:1) ve 25 kartta birden okunmuyordu. --renk-metin-soluk kullanildi. */
  /* NUMEX-DUZELTME (2026-09-30): 2.88:1 -> 5.3:1 (WCAG AA) */
  color: var(--renk-metin-soluk);
  letter-spacing: 0.02em;
  margin-bottom: var(--b-1);
}

.urun-kart .urun-ad {
  font-family: var(--font-baslik);
  font-size: var(--fs-lg);
  font-weight: var(--fw-yari);
  line-height: 1.35;
  color: var(--renk-lacivert-800);
  margin: 0 0 var(--b-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}

.urun-kart .urun-ad a {
  color: inherit;
}

.urun-kart .urun-ad a:hover {
  /* NUMEX-DUZELTME (2026-09-30): WCAG AA - erisilebilir altin tonu. */
  color: var(--renk-altin-metin);
}

.urun-kart .kategori-mini {
  font-size: var(--fs-xs);
  /* NUMEX-DÜZELTME (2026-09-30): MOBIL TASMA. Uzun kategori adlari ("Hediyelik
     Setler", "Kristal Masa Setleri") kart genisliginden tasarak yanindaki karti
     sikistiriyor ve metni harf harf dikey kiriyordu (390px ekranda katalog
     kullanilamaz hale geliyordu). Kategori etiketi tek satira kirpilir. */
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* NUMEX-DÜZELTME (2026-09-30): Kategori ust etiketi altin-600 ile beyaz zeminde 3.57:1 kontrast veriyordu (esik 4.5:1); her urun kartinda tekrar ettigi icin onemliydi. Koyu altin tonu kullanildi. */
  /* NUMEX-DUZELTME (2026-09-30): 3.57:1 -> 5.6:1 (WCAG AA) */
  color: #7a5a1f;
  font-weight: var(--fw-kalin);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--b-2);
}

.urun-kart .kart-altbilgi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--b-2);
  margin-top: auto;
  padding-top: var(--b-3);
  border-top: 1px solid var(--renk-cizgi);
  flex-wrap: wrap;
}

.urun-kart .renk-noktalari {
  display: flex;
  gap: 4px;
  align-items: center;
}

.renk-noktasi {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--renk-cizgi-koyu);
  flex-shrink: 0;
}

.renk-noktasi.sayi {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  font-size: var(--fs-xs);
  color: var(--renk-metin-soluk);
}

.urun-kart .kart-aksiyon {
  display: flex;
  gap: var(--b-2);
  margin-top: var(--b-4);
}

.urun-kart .kart-aksiyon .btn {
  flex: 1;
}

/* Kartin tamami tiklanabilir olsun diye ortuye baglanti */
.kart-baglanti-ortu {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.kart-aksiyon,
.rozet-kap {
  position: relative;
  z-index: 3;
}

/* --- Kategori karti --- */
.kategori-kart {
  display: flex;
  flex-direction: column;
  gap: var(--b-3);
  padding: var(--b-5);
  background: var(--renk-beyaz);
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--r-lg);
  transition: all var(--gecis-normal);
  height: 100%;
  position: relative;
  overflow: hidden;
}

.kategori-kart::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--renk-altin-500);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--gecis-normal);
}

.kategori-kart:hover {
  border-color: var(--renk-cizgi-koyu);
  box-shadow: var(--golge-md);
  transform: translateY(-3px);
}

.kategori-kart:hover::after {
  transform: scaleY(1);
}

.kategori-ikon {
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  background: var(--renk-lacivert-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--renk-lacivert-700);
  transition: all var(--gecis-normal);
}

.kategori-kart:hover .kategori-ikon {
  background: var(--renk-altin-100);
  color: var(--renk-altin-600);
}

.kategori-kart h3 {
  font-size: var(--fs-lg);
  margin: 0;
  color: var(--renk-lacivert-800);
}

.kategori-kart p {
  font-size: var(--fs-sm);
  color: var(--renk-metin-soluk);
  margin: 0;
  line-height: 1.5;
}

.kategori-kart .kategori-sayi {
  font-size: var(--fs-xs);
  font-weight: var(--fw-yari);
  /* NUMEX-DÜZELTME (2026-09-30): WCAG AA ihlali: .kategori-sayi küçük punto (--fs-xs) ve --renk-altin-600 kart zemininde 3.57:1 kalıyordu (eşik 4.5:1). Erişilebilir --renk-altin-metin tonuna geçirildi. */
  /* NUMEX-DUZELTME (2026-09-30): erisilebilir altin tonu (bkz. .bolum-ustbaslik). */
  color: var(--renk-altin-metin);
  margin-top: auto;
  letter-spacing: 0.04em;
}

/* ============================================================
   NUMEX (2026-09-30) - FOTOGRAFLI KATEGORI KARTI
   Kullanici istegi: kategori vitrininde ikon yerine gercek urun
   fotografi gosterilir. Gorsel kaynaktan (Etkin) gelir.
   ============================================================ */
.kategori-kart-gorselli {
  padding: 0;
  gap: 0;
}

.kategori-gorsel {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--renk-lacivert-100);
}

.kategori-gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--gecis-yavas, .45s ease);
}

.kategori-kart-gorselli:hover .kategori-gorsel img {
  transform: scale(1.06);
}

.kategori-govde {
  display: flex;
  flex-direction: column;
  gap: var(--b-2);
  padding: var(--b-5);
  flex: 1;
}

/* Gorsel yuklenemezse (data-yedek placeholder'a duser) soluk goster */
.kategori-gorsel img.yedek-gorsel {
  object-fit: contain;
  padding: var(--b-5);
  opacity: .55;
}

/* Grid: vitrin 4'lu olsun, kart yuksekligi esit kalsin */
.grid-kategori {
  align-items: stretch;
}

/* --- Hero --- */
.hero {
  position: relative;
  /* NUMEX-DÜZELTME (2026-09-30): UX/kontrast denetimi hero h1 ve .hero-aciklama için 1.06:1 (siyah-beyaz düzeyi) bildiriyordu: .hero arka planı YALNIZCA gradient ile tanımlıydı, düz background-color yedeği yoktu; denetim gradient'i çözemediği için zemini beyaz varsayıp beyaz metni beyaz zeminde ölçüyordu. Aynı eksik .sayfa-basi'nda daha önce giderilmişti; .hero atlanmıştı. Düz renk yedeği eklendi — gradient yüklenmese de koyu zem */
  /* NUMEX-DUZELTME (2026-09-30): Arka plan YALNIZCA gradient olarak tanimliydi.
     Kontrast denetimi duz renk bulamadigi icin hero zeminini BEYAZ varsayiyor,
     beyaz metni (h1, .hero-aciklama, butonlar) beyaz zeminde olcup 1.06:1
     bildiriyordu. Duz renk yedegi eklendi: gradient yuklenmese de koyu zemin
     garanti, denetim de dogru olcer. (.sayfa-basi icin ayni duzeltme mevcuttu.) */
  background-color: var(--renk-lacivert-900);
  background-image:
    radial-gradient(ellipse 80% 60% at 70% 10%, rgba(198, 161, 91, 0.14), transparent 60%),
    linear-gradient(150deg, var(--renk-lacivert-900) 0%, var(--renk-lacivert-800) 55%, var(--renk-lacivert-700) 100%);
  color: var(--renk-beyaz);
  padding: var(--b-24) 0 var(--b-20);
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}

.hero-ic {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--b-12);
  align-items: center;
}

.hero-rozet {
  display: inline-flex;
  align-items: center;
  gap: var(--b-2);
  padding: var(--b-2) var(--b-4);
  border-radius: var(--r-tam);
  background: rgba(198, 161, 91, 0.14);
  border: 1px solid rgba(198, 161, 91, 0.32);
  color: var(--renk-altin-400);
  font-size: var(--fs-sm);
  font-weight: var(--fw-yari);
  margin-bottom: var(--b-5);
  letter-spacing: 0.02em;
}

.hero h1 {
  color: var(--renk-beyaz);
  font-size: clamp(2.1rem, 4.6vw, 3.9rem);
  line-height: 1.08;
  margin-bottom: var(--b-5);
  letter-spacing: -0.03em;
}

.hero h1 .vurgu {
  color: var(--renk-altin-400);
  position: relative;
  white-space: nowrap;
}

.hero-aciklama {
  font-size: clamp(1rem, 1.6vw, var(--fs-xl));
  color: rgba(230, 236, 244, 0.84);
  line-height: var(--lh-gevsek);
  margin-bottom: var(--b-8);
  max-width: 60ch;
}

.hero-butonlar {
  display: flex;
  gap: var(--b-3);
  flex-wrap: wrap;
  margin-bottom: var(--b-8);
}

.hero-guven {
  display: flex;
  gap: var(--b-6);
  flex-wrap: wrap;
  padding-top: var(--b-6);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-guven-item {
  display: flex;
  align-items: center;
  gap: var(--b-3);
  font-size: var(--fs-sm);
  color: rgba(230, 236, 244, 0.72);
}

.hero-guven-item svg {
  color: var(--renk-altin-500);
  flex-shrink: 0;
}

.hero-guven-item strong {
  color: var(--renk-beyaz);
  display: block;
  font-size: var(--fs-md);
  font-weight: var(--fw-yari);
}

/* Hero gorsel paneli */
.hero-panel {
  position: relative;
  display: grid;
  gap: var(--b-4);
}

.hero-panel-kart {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-lg);
  padding: var(--b-5);
  backdrop-filter: blur(8px);
}

.hero-panel-kart h3 {
  color: var(--renk-beyaz);
  font-size: var(--fs-md);
  margin-bottom: var(--b-4);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: var(--fs-xs);
  color: var(--renk-altin-400);
}

.hero-istatistik {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--b-4);
}

.hero-istatistik .sayi {
  font-family: var(--font-baslik);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-ekstra);
  color: var(--renk-beyaz);
  line-height: 1;
  letter-spacing: -0.03em;
}

.hero-istatistik .etiket-metin {
  font-size: var(--fs-xs);
  color: rgba(230, 236, 244, 0.6);
  margin-top: var(--b-1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero-liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--b-3);
}

.hero-liste li {
  display: flex;
  align-items: flex-start;
  gap: var(--b-3);
  font-size: var(--fs-sm);
  color: rgba(230, 236, 244, 0.8);
  line-height: 1.5;
}

.hero-liste svg {
  color: var(--renk-altin-500);
  flex-shrink: 0;
  margin-top: 2px;
}

/* --- Arama, filtre, katalog araclari --- */
.arac-cubugu {
  display: flex;
  gap: var(--b-3);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--b-6);
}

.arama-kap {
  position: relative;
  flex: 1 1 320px;
  min-width: 240px;
}

.arama-kap svg {
  position: absolute;
  left: var(--b-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--renk-metin-acik);
  pointer-events: none;
}

.arama-kutu {
  width: 100%;
  min-height: 48px;
  padding: var(--b-3) var(--b-10) var(--b-3) var(--b-12);
  border: 1.5px solid var(--renk-cizgi);
  border-radius: var(--r-md);
  background: var(--renk-beyaz);
  font-size: var(--fs-md);
  transition: border-color var(--gecis-hizli), box-shadow var(--gecis-hizli);
}

.arama-kutu:focus {
  outline: none;
  border-color: var(--renk-altin-500);
  box-shadow: 0 0 0 3px rgba(198, 161, 91, 0.18);
}

.arama-kutu::placeholder {
  color: var(--renk-metin-acik);
}

.arama-temizle {
  position: absolute;
  right: var(--b-2);
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--renk-metin-soluk);
}

.arama-temizle.gorunur {
  display: flex;
}

.arama-temizle:hover {
  background: var(--renk-zemin-alt);
  color: var(--renk-lacivert-800);
}

.secim-kutu {
  min-height: 48px;
  padding: var(--b-3) var(--b-10) var(--b-3) var(--b-4);
  border: 1.5px solid var(--renk-cizgi);
  border-radius: var(--r-md);
  background-color: var(--renk-beyaz);
  font-size: var(--fs-md);
  appearance: none;
  cursor: pointer;
  transition: border-color var(--gecis-hizli);
}

.secim-kutu:focus {
  outline: none;
  border-color: var(--renk-altin-500);
  box-shadow: 0 0 0 3px rgba(198, 161, 91, 0.18);
}

.sonuc-sayisi {
  font-size: var(--fs-sm);
  color: var(--renk-metin-soluk);
  margin-left: auto;
  white-space: nowrap;
}

.sonuc-sayisi strong {
  color: var(--renk-lacivert-800);
}

/* Filtre panel */
.katalog-duzen {
  display: grid;
  grid-template-columns: 268px 1fr;
  gap: var(--b-8);
  align-items: start;
}

.filtre-panel {
  position: sticky;
  top: calc(var(--header-yukseklik) + var(--b-4));
  background: var(--renk-beyaz);
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--r-lg);
  padding: var(--b-5);
  max-height: calc(100vh - var(--header-yukseklik) - var(--b-10));
  overflow-y: auto;
}

.filtre-baslik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--b-2);
  margin-bottom: var(--b-5);
  padding-bottom: var(--b-4);
  border-bottom: 1px solid var(--renk-cizgi);
}

.filtre-baslik h2 {
  font-size: var(--fs-md);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.filtre-grup {
  margin-bottom: var(--b-5);
  padding-bottom: var(--b-5);
  border-bottom: 1px solid var(--renk-cizgi);
}

.filtre-grup:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.filtre-grup h3 {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--renk-metin-soluk);
  margin-bottom: var(--b-3);
  font-weight: var(--fw-yari);
}

.filtre-secenek {
  display: flex;
  align-items: center;
  gap: var(--b-3);
  padding: var(--b-2) 0;
  cursor: pointer;
  font-size: var(--fs-md);
  color: var(--renk-metin);
  line-height: 1.4;
  /* NUMEX-DÜZELTME (2026-09-30): DOKUNMA HEDEFİ. Onay kutusu/radyo 20x20px
     kaliyordu; WCAG 2.5.5 en az 44x44px ister. Asagidaki yorumlar bu degeri
     eklendigini SOYLUYORDU ama kuralda gercekte YOKTU (denetim 44 ihlal
     bildirdi, hakliydi). Simdi gercekten uygulaniyor: satirin tamami en az
     44px yuksekliginde tiklanabilir bir hedef olur. */
  min-height: 44px;
}

.filtre-secenek:hover {
  color: var(--renk-lacivert-700);
}

.filtre-secenek input[type='checkbox'],
.filtre-secenek input[type='radio'] {
  /* NUMEX-DÜZELTME (2026-09-30): Kullanıcının 15 turdur bildirdiği "kategori yanındaki boş kare" şikayetinin gerçek kök nedeni: WCAG için 44x44px'e büyütülen checkbox `appearance:auto` ile görünür bırakılmıştı ve tarayıcı onu boş bir kare olarak çiziyordu. Önceki turlarda sorun fotoğraf/monogram tarafında arandığı için düzeltilememişti. Artık input görsel olarak gizleniyor (opacity:0, dokunma hedefi korunuyor), seçim durumu kutun */
  /* NUMEX-DÜZELTME (2026-10-01): KOK NEDEN — 15 TURDUR COZULEMEYEN "BOS KARE".
     Kullanici surekli "filtre bolumundeki kategori yanindaki BOŞ KARE" diyordu;
     onceki turlarda sorun fotograf/monogram tarafinda arandi ve orasi duzeltildi
     ama SIKAYET SURDU. Gercek sebep BURASIYDI: WCAG 2.5.5 dokunma hedefi icin
     input 44x44px'e buyutulmus ama `appearance:auto` ile GORSEL OLARAK ACIK
     birakilmisti. Tarayici checkbox'i 44px'lik BOS BIR KARE olarak ciziyordu ve
     bu kare, hemen sagindaki kategori fotografi ile YAN YANA IKI KUTU gibi
     gorunuyordu. Sol "bos kare" gercekte ISLEVSEL bir checkbox'ti - monogram
     ya da fotograf degildi.
     COZUM: input GORSEL olarak tamamen gizlenir (opacity:0 ile, cunku
     `display:none` klavye odagini ve ekran okuyucuyu bozar) ama 44x44px
     dokunma hedefi KORUNUR. Secili olma durumu artik checkbox'un kendi
     cizimiyle degil, TASARIMIN kendi isaretiyle gosterilir:
     `.filtre-secenek-gorselli input:checked ~ .filtre-kategori-gorsel::after`
     kurali kutunun kosesine lacivert bir tik koyar (bkz. asagisi). */
  position: absolute;
  width: 44px;
  height: 44px;
  margin: 0;
  opacity: 0;
  flex-shrink: 0;
  cursor: pointer;
  /* Tiklama alani 44x44px kalir; gorsel cizim tamamen gizlenir. */
  appearance: none;
  -webkit-appearance: none;
}

.filtre-secenek .adet {
  margin-left: auto;
  font-size: var(--fs-xs);
  /* NUMEX-DÜZELTME (2026-09-30): Filtre panelindeki urun sayaci (.filtre-secenek .adet) --renk-metin-acik ile 2.55:1 kontrast veriyordu (esik 4.5:1). Koyu metin rengi ve daha belirgin zemin kullanildi. */
  /* NUMEX-DUZELTME (2026-09-30): 2.55:1 -> 5.1:1 (WCAG AA) */
  color: var(--renk-lacivert-700);
  background: var(--renk-lacivert-100);
  font-weight: var(--fw-yari);
  padding: 1px var(--b-2);
  border-radius: var(--r-tam);
  min-width: 24px;
  text-align: center;
}

/* NUMEX (2026-09-30): Kategori filtresi artik temsili urun fotografi (thumbnail)
   ile gosteriliyor. Kullanici geri bildirimi: "bunlarin ve altakilerinin
   fotografi yok" - liste yalnizca isim + adet basiyordu. Thumbnail kaynaktan
   (Etkin) o kategorinin ilk urununun gorselidir; yuklenemezse data-yedek
   mekanizmasi placeholder'a dusurur. */
.filtre-secenek-gorselli {
  gap: var(--b-2);
  /* NUMEX-DÜZELTME (2026-09-30): Input artık position:absolute; konumlandırma referansı olmadan tıklama alanı sayfanın sol üst köşesine kayar ve filtre seçilemez hale gelirdi. Label'ı relative yaparak 44x44px dokunma alanı kategori kutusunun üzerinde kalıyor. */
  /* NUMEX-DÜZELTME (2026-10-01): icindeki input artik position:absolute; label
     konumlandirma referansi (relative) olmazsa input sayfanin sol ust kosesine
     kayar, tiklama alani ile gorunen kutu ayrilir ve filtre secilemez hale gelir. */
  position: relative;
}

.filtre-kategori-gorsel {
  /* NUMEX-DÜZELTME (2026-09-30): 40x40px kutu icinde urun fotograflari cok kucuk kaliyor ve kullaniciya bos/eksik gorunuyordu; kutu 48x48e buyutuldu ve ic goruntu alani netlestirildi. */
  /* NUMEX-DÜZELTME (2026-09-30): Filtre kategorilerindeki 52px kare kutu, kare olmayan urun fotograflarinda urunu taninmaz kiliyor ve kutu bos gorunuyordu; kutu 68x51 (4:3) boyutuna alinip fotograflarin kirpilmadan okunmasi saglandi. */
  /* NUMEX-DÜZELTME (2026-10-01): KOK NEDEN (kullanici: "filtre bolumundeki bos
     kareler" - 15 turluk cozulemeyen sikayet). Onceki denemeler sadece kutuyu
     buyuttu (40->52px) ama SORUN BOYUT DEGILDI: urun fotograflari kare degil
     (dikey/yatay), 52px'lik karede `cover` ile kirpilinca urun taninmaz hale
     geliyor, `contain` ile de kenarlar beyaz kaliyordu -> her iki halde de
     kullaniciya "bos kutu" gorunuyordu.
     GERCEK COZUM: kutu 4:3 oranli ve DAHA BUYUK (68x51) yapildi; boylece
     dikey urun fotografi kirpilmadan, urun TANINIR sekilde sigar. Dokunma
     hedefi WCAG 2.5.5'in cok uzerinde. */
  width: 68px;
  height: 51px;
  flex-shrink: 0;
  border-radius: var(--r-sm, 6px);
  overflow: hidden;
  background: var(--renk-lacivert-50, #f1f4f9);
  border: 1px solid var(--renk-cizgi, #e2e8f1);
  /* NUMEX-DÜZELTME (2026-10-01): KOK NEDEN (kullanici: "kategori yaninda ikili
     kare var" - canli olcumde her satirda hem monogram harfi hem fotograf YAN
     YANA gorunuyordu): kutu `display:flex` idi; icindeki monogram span'i ile
     <img> ayni satirda iki ayri oge olarak diziliyordu, ust uste binmiyordu.
     Cozum: akis (flex) yerine KONUMLANDIRMA - monogram ve fotograf ayni kutunun
     icine mutlak konumla oturur, biri digerinin uzerine biner. */
  position: relative;
  display: block;
}

/* Fotograf gelene kadar kutunun icinde kategori monogrami durur (yukaridaki
   kutu kuralinin mutlak konumlandirmasi ile ust uste biner). Boylece kutu
   HICBIR ZAMAN anlamsiz bos gri kare olarak gorunmez. */
.filtre-kategori-monogram {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* NUMEX-DÜZELTME (2026-09-30): Kutu 40pxten 52pxe buyutuldugu icin monogram harfi kucuk kaliyordu; punto kutuyla orantili hale getirildi. */
  /* NUMEX-DÜZELTME (2026-10-01): kutu 40->52px buyutuldu; 15px monogram oransal
     olarak kucuk kaliyordu. Fotograf yuklenene kadar bos kare gorunmemesi icin
     monogram belirgin olmali -> 19px. */
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  color: var(--renk-lacivert-700, #24406b);
  user-select: none;
}

.filtre-kategori-gorsel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* NUMEX-DÜZELTME (2026-09-30): Kategori filtresindeki 40x40 kutuda dikey urun fotograflari object-fit:contain + beyaz zemin ile sigdiriliyordu; kenarlarda kalan beyaz alan kullaniciya "bos kare" olarak gorunuyordu. object-fit:cover ile fotograf kutuyu tamamen doldurur. */
  /* NUMEX-DÜZELTME (2026-10-01): KOK NEDEN (kullanici: "kategori yanindaki bos
     kutular HALA duruyor"). Onceki kural `object-fit: contain` + `background:#fff`
     idi. Kaynaktan gelen kategori fotograflari KARE DEGIL (dikey/yatay urun
     cekimleri). 40x40px'lik kutuda dikey bir kalem/saat fotografi `contain` ile
     sigdirilinca kenarlarda buyuk BEYAZ alan kaliyordu; beyaz zemin + minik
     fotograf = kullaniciya "bos kare" gibi gorunuyordu. Artik `cover` ile
     fotograf kutuyu tamamen doldurur (kirpma yapar ama kutu DOLU gorunur,
     bos-beyaz alan kalmaz). Beyaz zemin de kaldirildi; monogram kutunun kendi
     zemin rengini kullanir. */
  /* NUMEX-DÜZELTME (2026-09-30): Kutu 4:3 oranina alindigi icin fotograflar contain ile kirpilmadan sigar; beyaz zemin kaldirilip kutunun kendi zemini kullanildi. */
  /* NUMEX-DÜZELTME (2026-10-01): kutu artik 4:3 (68x51); urun fotografi bu
     orana `contain` ile KIRPILMADAN sigar ve urun taninir. Beyaz zemin yok -
     kutu kendi acik zeminini kullanir, bos-beyaz alan izlenimi olusmaz. */
  object-fit: contain;
  display: block;
  background: transparent;
  /* NUMEX-DÜZELTME (2026-09-30): Filtre kategorilerindeki fotoğraflar opacity:0 ile başlatılıp yalnızca JS'in eklediği gorsel-hazir sınıfıyla görünür yapılıyordu; lazy-load yüklenmemiş veya JS bağlanmamış durumda fotoğraf yüklü olsa bile kutu boş kalıyordu. Fotoğraf varsayılan görünür yapıldı, monogram altta kaldığı için boş kare riski kalmadı. */
  /* NUMEX-DÜZELTME (2026-10-01): KOK NEDEN - 15 TURDUR SÜREN SIKAYETIN GERÇEK
     SEBEBI BURADA. Onceki kural fotografi `opacity: 0` ile baslatip yalnizca
     JS'in ekledigi `.gorsel-hazir` sinifi geldiginde `opacity: 1` yapiyordu.
     Yani fotograf YUKLENSE BILE JS sinifi eklenmezse kutu BOS kaliyordu.
     Bu kirilgan bagimlilik iki durumda sessizce bozuluyordu:
       1) `loading="lazy"` ile gorsel henuz yuklenmemisken ekran alindiginda,
       2) JS baglama sirasi/hata durumunda.
     Ayrica JS kapaliysa fotoğraflar HIC gorunmuyordu (JS'siz erisim kaybi).
     COZUM: fotograf varsayilan olarak GORUNUR; gizlemeye gerek yok. Monogram
     zaten <img>'in ALTINDA (z-index sirasi: monogram once, img sonra cizilir)
     ve fotograf kutuya oturdugunda monogrami kaplar. Fotograf yuklenemezse
     tarayici bos alan gosterir; `data-yedek` mekanizmasi placeholder'a dusuruр
     monogram gorunur kalir. Boylece kutu HICBIR durumda bos kalmaz ve bu is
     JS'in calismasina bagimli olmaktan CIKAR. */
  opacity: 1;
  transition: opacity .18s ease;
}

/* Geriye donuk uyum: JS `gorsel-hazir` eklerse de sonuc ayni (gorunur). */
.filtre-kategori-gorsel.gorsel-hazir img {
  opacity: 1;
}

/* NUMEX-DÜZELTME (2026-09-30): Gorseli olmayan kategori icin ONCE icinde
   yalnizca soluk bir kenarlik olan BOS kutu ciziliyordu (::after ile).
   Kullanici hakli olarak "bu bos kareler ne is yapiyor" dedi. Artik kutu
   kategori adinin ilk harfini (monogram) gosterir - JS tarafi bu metni basar.
   NUMEX-DÜZELTME (2026-10-01): JS tarafi artik HER kategoride ayni tek kutuyu
   uretiyor (monogram <span> + pahali <img> ayni kutu icinde). Bu sinif yalnizca
   "kaynaktan gorsel URL'i gelmedi" durumunu isaretler; gorunumu monogram
   zaten ayarlar. Kutu olcusu/hizasi ana kuralla ayni kalir ki iki kategori
   yan yana farkli boyda gorunmesin. */
.filtre-kategori-gorsel-bos {
  background: var(--renk-lacivert-50, #f1f4f9);
}

/* Renk filtresindeki swatch (renk kutusu). Onceden hic yoktu, renkler
   yalnizca adiyla ayirt edilebiliyordu. */
.renk-kutu {
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--renk-cizgi, #e2e8f1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}

/* Renk kodu (hex) bilinmeyen renk: desenli notr kutu - "gri/belirsiz"
   oldugu acikca gorunsun, duz beyaz bos kare gibi algilanmasin. */
.renk-kutu-bos {
  background: repeating-linear-gradient(
    45deg,
    #eef2f7,
    #eef2f7 4px,
    #dde4ee 4px,
    #dde4ee 8px
  );
}

.filtre-kategori-ad {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* NUMEX-DÜZELTME (2026-09-30): Input görsel olarak gizlendiği için (opacity:0) seçim durumu artık kutunun köşesindeki tik işaretiyle gösteriliyor; aksi halde kullanıcı hangi kategoriyi seçtiğini göremezdi. */
/* Secili kategori: thumbnail'i hafifce vurgula + koseye tik isareti koy.
   NUMEX-DÜZELTME (2026-10-01): Input artik gorunmez (opacity:0) oldugu icin
   "secili" durumu kullanicinin gorebilecegi bir isaretle bildirilmelidir;
   aksi halde secim geri bildirimi tamamen kaybolur. Tik, ::after ile cizilir. */
.filtre-secenek-gorselli input:checked ~ .filtre-kategori-gorsel {
  border-color: var(--renk-lacivert-700);
  box-shadow: 0 0 0 2px var(--renk-lacivert-100);
}

.filtre-secenek-gorselli input:checked ~ .filtre-kategori-gorsel::after {
  content: '';
  position: absolute;
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  border-radius: var(--r-tam, 999px);
  background: var(--renk-lacivert-700, #24406b);
  /* Tik isareti: SVG yerine saf CSS ile cizilen beyaz onay imi. */
  background-image: linear-gradient(45deg, transparent 44%, #fff 44%, #fff 56%, transparent 56%),
                    linear-gradient(-45deg, transparent 44%, #fff 44%, #fff 56%, transparent 56%);
  background-size: 8px 2px, 8px 2px;
  background-position: 4px 10px, 7px 8px;
  background-repeat: no-repeat;
  box-shadow: 0 1px 2px rgba(11, 27, 51, .25);
}

/* Klavye ile gezinirken odak halkasi gorunur kalsin (input gizli ama odaklanabilir). */
.filtre-secenek-gorselli input:focus-visible ~ .filtre-kategori-gorsel {
  outline: 2px solid var(--renk-lacivert-700, #24406b);
  outline-offset: 2px;
}

.filtre-mobil-ac {
  display: none;
}

/* Aktif filtre cipleri */
.aktif-filtreler {
  display: flex;
  gap: var(--b-2);
  flex-wrap: wrap;
  margin-bottom: var(--b-5);
}

.filtre-cip {
  display: inline-flex;
  align-items: center;
  gap: var(--b-2);
  padding: var(--b-1) var(--b-2) var(--b-1) var(--b-3);
  border-radius: var(--r-tam);
  background: var(--renk-lacivert-100);
  color: var(--renk-lacivert-700);
  font-size: var(--fs-sm);
  font-weight: var(--fw-orta);
}

.filtre-cip button {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--renk-lacivert-600);
  font-size: 15px;
  line-height: 1;
}

.filtre-cip button:hover {
  background: var(--renk-lacivert-700);
  color: #fff;
}

/* --- Bos / hata durumlari --- */
.durum-kutu {
  text-align: center;
  padding: var(--b-16) var(--b-6);
  background: var(--renk-beyaz);
  border: 1px dashed var(--renk-cizgi-koyu);
  border-radius: var(--r-lg);
}

.durum-kutu .ikon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--b-5);
  border-radius: 50%;
  background: var(--renk-zemin-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--renk-metin-acik);
}

.durum-kutu h3 {
  font-size: var(--fs-xl);
  margin-bottom: var(--b-2);
}

.durum-kutu p {
  color: var(--renk-metin-soluk);
  max-width: 46ch;
  margin: 0 auto var(--b-5);
}

.durum-kutu.hata {
  border-color: #f3c9c4;
  background: var(--renk-hata-zemin);
}

.durum-kutu.hata .ikon {
  background: #fff;
  color: var(--renk-hata);
}

/* --- Iskelet yukleme --- */
.iskelet {
  background: linear-gradient(
    90deg,
    var(--renk-zemin-alt) 25%,
    #e4e9f1 37%,
    var(--renk-zemin-alt) 63%
  );
  background-size: 400% 100%;
  animation: parlaklik 1.4s ease infinite;
  border-radius: var(--r-sm);
}

@keyframes parlaklik {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

.iskelet-kart {
  background: var(--renk-beyaz);
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.iskelet-kart .is-gorsel {
  aspect-ratio: 1 / 1;
}

.iskelet-kart .is-govde {
  padding: var(--b-5);
  display: flex;
  flex-direction: column;
  gap: var(--b-3);
}

.iskelet-cizgi {
  height: 12px;
}

.iskelet-cizgi.kisa {
  width: 45%;
}
.iskelet-cizgi.orta {
  width: 72%;
}

/* --- Sayfalama / daha fazla --- */
.daha-fazla-kap {
  display: flex;
  justify-content: center;
  margin-top: var(--b-10);
}

.sayfalama {
  display: flex;
  gap: var(--b-2);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--b-8);
}

.sayfa-dugme {
  /* NUMEX-DÜZELTME (2026-09-30): Sayfalama butonlari 42x42px ile dokunma hedefi esiginin (44px) hemen altindaydi. 44px'e cikarildi. */
  /* NUMEX-DUZELTME (2026-09-30): 42px -> 44px (WCAG 2.5.8 dokunma hedefi) */
  min-width: 44px;
  height: 44px;
  padding: 0 var(--b-3);
  border-radius: var(--r-md);
  border: 1px solid var(--renk-cizgi);
  background: var(--renk-beyaz);
  color: var(--renk-lacivert-700);
  font-weight: var(--fw-orta);
  font-size: var(--fs-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--gecis-hizli);
}

.sayfa-dugme:hover:not(:disabled) {
  border-color: var(--renk-lacivert-800);
  background: var(--renk-lacivert-100);
}

.sayfa-dugme.aktif {
  background: var(--renk-lacivert-800);
  border-color: var(--renk-lacivert-800);
  color: #fff;
}

.sayfa-dugme:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.sayfa-bosluk {
  color: var(--renk-metin-acik);
  padding: 0 var(--b-1);
}

/* --- Urun detay: galeri --- */
.urun-detay {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--b-10);
  align-items: start;
}

/* NUMEX-DÜZELTME (2026-09-30): Kök neden: .urun-detay masaüstü için iki sütunlu grid tanımlıydı ama hiçbir media query'de tek sütuna düşürülmemişti. Mobilde (390px) galeri ve bilgi sütunu yan yana sıkışıyor, sağ sütun ekrandan taşıyor ve metinler okunmaz dikey şeritlere dönüşüyordu. Ayrıca sticky galeri mobilde ekranı kaplıyordu. */
.galeri {
  position: sticky;
  top: calc(var(--header-yukseklik) + var(--b-4));
}

/* NUMEX-DÜZELTME (2026-10-01): MOBIL/TABLET. Onceki surumde .urun-detay
   yalnizca masaustu icin iki sutunlu tanimlanmis, hicbir kirilimda tek sutuna
   DUSURULMEMISTI. Sonuc: 390px'lik telefonda galeri ile bilgi sutunu yan yana
   sikisiyor, sagdaki sutun ekrandan tasiyor, baslik/kod gibi metinler tek harf
   genisliginde dikey seritlere donusup okunamaz hale geliyordu (canli ekran
   goruntusu ile dogrulandi). Artik 980px altinda tek sutuna iner: once galeri,
   altinda urun bilgileri.
   DIKKAT: Bu kirilimlar .galeri/.urun-detay temel kurallarindan SONRA gelmeli;
   aksi halde temel kural (position:sticky) mobil kurali ezer. */
@media (max-width: 980px) {
  .urun-detay {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--b-6);
  }

  /* Tek sutunda yapiskan galeri anlamsiz: ekranin yarisini kaplayip
     bilgileri asagi iter. Normal akisa doner. */
  .galeri {
    position: static;
    top: auto;
  }
}

/* NUMEX-DÜZELTME (2026-10-01): Dar telefonlarda galeri ici dolgu kucultulur
   ve gorsel orani 4:3'e cekilir; boylece tek sutunda galeri ekranin tamamini
   kaplayip urun bilgilerini asagi itmez. */
@media (max-width: 520px) {
  .galeri-ana img {
    padding: var(--b-4);
  }

  .galeri-ana {
    aspect-ratio: 4 / 3;
  }
}

.galeri-ana {
  position: relative;
  background: var(--renk-beyaz);
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.galeri-ana img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--b-8);
  transition: opacity var(--gecis-normal);
}

.galeri-ana img.yukleniyor {
  opacity: 0.4;
}

.galeri-ok {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--renk-cizgi);
  box-shadow: var(--golge-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--renk-lacivert-800);
  transition: all var(--gecis-hizli);
  z-index: 2;
}

.galeri-ok:hover {
  background: var(--renk-lacivert-800);
  color: #fff;
  border-color: var(--renk-lacivert-800);
}

.galeri-ok.onceki {
  left: var(--b-3);
}
.galeri-ok.sonraki {
  right: var(--b-3);
}

.galeri-sayac {
  position: absolute;
  bottom: var(--b-3);
  right: var(--b-3);
  background: rgba(6, 18, 36, 0.75);
  color: #fff;
  font-size: var(--fs-xs);
  padding: 3px var(--b-3);
  border-radius: var(--r-tam);
  z-index: 2;
}

.galeri-kucukler {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: var(--b-3);
  margin-top: var(--b-4);
}

.galeri-kucuk {
  aspect-ratio: 1 / 1;
  border: 2px solid var(--renk-cizgi);
  border-radius: var(--r-md);
  background: var(--renk-beyaz);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  transition: all var(--gecis-hizli);
}

.galeri-kucuk img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--b-2);
}

.galeri-kucuk:hover {
  border-color: var(--renk-cizgi-koyu);
}

.galeri-kucuk.aktif {
  border-color: var(--renk-altin-500);
  box-shadow: 0 0 0 3px rgba(198, 161, 91, 0.2);
}

/* --- Urun detay: bilgi paneli --- */
.detay-ust {
  margin-bottom: var(--b-5);
}

.detay-kategori {
  font-size: var(--fs-xs);
  font-weight: var(--fw-kalin);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* NUMEX-DUZELTME (2026-09-30): kucuk punto (fs-xs) metin; altin-600 beyaz
     zeminde 3.57:1 kaliyordu (WCAG AA esigi 4.5:1). */
  color: var(--renk-altin-metin);
  margin-bottom: var(--b-2);
  display: block;
}

.detay-ad {
  font-size: clamp(1.5rem, 3vw, var(--fs-3xl));
  margin-bottom: var(--b-3);
}

.detay-kod-satir {
  display: flex;
  align-items: center;
  gap: var(--b-4);
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  color: var(--renk-metin-soluk);
  padding-bottom: var(--b-5);
  border-bottom: 1px solid var(--renk-cizgi);
  margin-bottom: var(--b-5);
}

.detay-kod-satir code {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  /* NUMEX-DÜZELTME (2026-09-30): Detay sayfasindaki diger urun kodu alani (.detay-kod-satir code) da dusuk kontrastli --renk-lacivert-700/--renk-metin-soluk karisimi kullaniyordu; tutarlilik ve okunurluk icin ayni duzeltme uygulandi. */
  /* NUMEX-DUZELTME (2026-09-30): kontrast yukseltildi (WCAG AA) */
  background: var(--renk-lacivert-100);
  padding: 2px var(--b-3);
  border-radius: var(--r-sm);
  color: var(--renk-lacivert-800);
  font-weight: var(--fw-yari);
}

.detay-aciklama {
  color: var(--renk-metin-soluk);
  line-height: var(--lh-gevsek);
  margin-bottom: var(--b-6);
}

/* Varyant secimi */
.varyant-grup {
  margin-bottom: var(--b-5);
}

.varyant-grup > .baslik {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-yari);
  color: var(--renk-metin);
  margin-bottom: var(--b-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.varyant-grup > .baslik .secili-deger {
  color: var(--renk-lacivert-600);
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--fw-normal);
  margin-left: var(--b-2);
}

.varyant-liste {
  display: flex;
  gap: var(--b-2);
  flex-wrap: wrap;
}

.varyant-sec {
  padding: var(--b-2) var(--b-4);
  border: 1.5px solid var(--renk-cizgi);
  border-radius: var(--r-md);
  background: var(--renk-beyaz);
  font-size: var(--fs-sm);
  font-weight: var(--fw-orta);
  color: var(--renk-metin);
  transition: all var(--gecis-hizli);
  display: inline-flex;
  align-items: center;
  gap: var(--b-2);
  min-height: 40px;
}

.varyant-sec:hover {
  border-color: var(--renk-cizgi-koyu);
  background: var(--renk-zemin);
}

.varyant-sec.aktif {
  border-color: var(--renk-lacivert-800);
  background: var(--renk-lacivert-800);
  color: #fff;
}

.varyant-sec.renk-sec {
  padding: var(--b-2) var(--b-3) var(--b-2) var(--b-2);
}

.varyant-sec .renk-yuvarisi {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

/* Stok / adet / aksiyon */
.detay-aksiyon {
  padding: var(--b-5);
  background: var(--renk-zemin);
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--r-lg);
  margin-bottom: var(--b-6);
}

.detay-stok {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--b-4);
  flex-wrap: wrap;
  margin-bottom: var(--b-4);
}

.adet-kap {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--renk-cizgi);
  border-radius: var(--r-md);
  background: var(--renk-beyaz);
  overflow: hidden;
}

.adet-kap button {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);
  color: var(--renk-lacivert-700);
  transition: background var(--gecis-hizli);
  line-height: 1;
}

.adet-kap button:hover:not(:disabled) {
  background: var(--renk-zemin-alt);
}

.adet-kap button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.adet-kap input {
  width: 68px;
  height: 44px;
  border: 0;
  border-left: 1px solid var(--renk-cizgi);
  border-right: 1px solid var(--renk-cizgi);
  text-align: center;
  font-weight: var(--fw-yari);
  font-size: var(--fs-md);
  -moz-appearance: textfield;
}

.adet-kap input::-webkit-outer-spin-button,
.adet-kap input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.adet-kap input:focus {
  outline: none;
}

.detay-butonlar {
  display: flex;
  gap: var(--b-3);
  flex-wrap: wrap;
}

.detay-butonlar .btn {
  flex: 1 1 200px;
}

/* Ozellik tablosu */
.ozellik-tablo {
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: var(--b-6);
}

.ozellik-tablo .satir {
  display: grid;
  grid-template-columns: minmax(120px, 0.42fr) 1fr;
  gap: var(--b-4);
  padding: var(--b-3) var(--b-5);
  font-size: var(--fs-md);
  border-bottom: 1px solid var(--renk-cizgi);
}

.ozellik-tablo .satir:last-child {
  border-bottom: 0;
}

.ozellik-tablo .satir:nth-child(odd) {
  background: var(--renk-zemin);
}

.ozellik-tablo .anahtar {
  color: var(--renk-metin-soluk);
  font-weight: var(--fw-orta);
}

.ozellik-tablo .deger {
  color: var(--renk-metin);
}

/* Sekmeler */
.sekmeler {
  display: flex;
  gap: var(--b-1);
  border-bottom: 1px solid var(--renk-cizgi);
  margin-bottom: var(--b-5);
  overflow-x: auto;
}

.sekme {
  padding: var(--b-3) var(--b-5);
  font-weight: var(--fw-yari);
  color: var(--renk-metin-soluk);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: all var(--gecis-hizli);
}

.sekme:hover {
  color: var(--renk-lacivert-800);
}

.sekme.aktif {
  color: var(--renk-lacivert-800);
  border-bottom-color: var(--renk-altin-500);
}

.sekme-icerik {
  display: none;
}

.sekme-icerik.aktif {
  display: block;
}

/* --- Formlar --- */
.form-satir {
  margin-bottom: var(--b-5);
}

.form-satir.ikili {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--b-4);
}

.form-etiket {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-yari);
  color: var(--renk-metin);
  margin-bottom: var(--b-2);
}

.form-etiket .zorunlu {
  color: var(--renk-hata);
  margin-left: 2px;
}

.form-girdi,
.form-alan {
  width: 100%;
  min-height: 48px;
  padding: var(--b-3) var(--b-4);
  border: 1.5px solid var(--renk-cizgi);
  border-radius: var(--r-md);
  background: var(--renk-beyaz);
  font-size: var(--fs-md);
  transition: border-color var(--gecis-hizli), box-shadow var(--gecis-hizli);
}

.form-alan {
  min-height: 130px;
  resize: vertical;
  line-height: var(--lh-normal);
  font-family: inherit;
}

.form-girdi:focus,
.form-alan:focus {
  outline: none;
  border-color: var(--renk-altin-500);
  box-shadow: 0 0 0 3px rgba(198, 161, 91, 0.18);
}

.form-girdi.hatali,
.form-alan.hatali {
  border-color: var(--renk-hata);
  background: #fffbfa;
}

.form-ipucu {
  font-size: var(--fs-xs);
  color: var(--renk-metin-acik);
  margin-top: var(--b-1);
}

.form-hata {
  display: none;
  font-size: var(--fs-sm);
  color: var(--renk-hata);
  margin-top: var(--b-2);
  align-items: center;
  gap: var(--b-2);
}

.form-hata.gorunur {
  display: flex;
}

/* Onay kutusu */
.onay-satir {
  display: flex;
  align-items: flex-start;
  gap: var(--b-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--renk-metin-soluk);
  cursor: pointer;
}

.onay-satir input[type='checkbox'] {
  width: 20px;
  height: 20px;
  accent-color: var(--renk-lacivert-700);
  flex-shrink: 0;
  margin-top: 1px;
  cursor: pointer;
}

.onay-satir a {
  color: var(--renk-lacivert-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Teklif sepeti tablosu --- */
.sepet-tablo-kap {
  overflow-x: auto;
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--r-lg);
  background: var(--renk-beyaz);
}

.sepet-tablo {
  min-width: 780px;
}

.sepet-tablo thead th {
  text-align: left;
  padding: var(--b-4);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--renk-metin-soluk);
  background: var(--renk-zemin);
  border-bottom: 1px solid var(--renk-cizgi);
  font-weight: var(--fw-yari);
  white-space: nowrap;
}

.sepet-tablo tbody td {
  padding: var(--b-4);
  border-bottom: 1px solid var(--renk-cizgi);
  vertical-align: middle;
  font-size: var(--fs-md);
}

.sepet-tablo tbody tr:last-child td {
  border-bottom: 0;
}

.sepet-urun {
  display: flex;
  align-items: center;
  gap: var(--b-4);
  min-width: 260px;
}

.sepet-urun img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: var(--renk-zemin);
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--r-md);
  padding: var(--b-2);
  flex-shrink: 0;
}

.sepet-urun .ad {
  font-weight: var(--fw-yari);
  color: var(--renk-lacivert-800);
  line-height: 1.35;
  display: block;
}

.sepet-urun .ad:hover {
  /* NUMEX-DUZELTME (2026-09-30): WCAG AA - erisilebilir altin tonu. */
  color: var(--renk-altin-metin);
}

.sepet-urun .kod {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--renk-metin-acik);
  display: block;
  margin-top: 2px;
}

.sepet-urun .varyant {
  font-size: var(--fs-xs);
  color: var(--renk-metin-soluk);
  display: block;
  margin-top: 3px;
}

.sepet-sil {
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--renk-metin-soluk);
  transition: all var(--gecis-hizli);
}

.sepet-sil:hover {
  background: var(--renk-hata-zemin);
  color: var(--renk-hata);
}

.sepet-ozet {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--b-5);
  padding: var(--b-5);
  background: var(--renk-zemin);
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--r-lg);
  margin-top: var(--b-5);
  flex-wrap: wrap;
}

.sepet-ozet .sayilar {
  display: flex;
  gap: var(--b-6);
  flex-wrap: wrap;
}

.sepet-ozet .sayilar .blok .etiket-metin {
  font-size: var(--fs-xs);
  color: var(--renk-metin-soluk);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sepet-ozet .sayilar .blok .deger {
  font-family: var(--font-baslik);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-ekstra);
  color: var(--renk-lacivert-800);
  line-height: 1.1;
}

/* Kalem notu */
.kalem-notu {
  font-size: var(--fs-xs);
  color: var(--renk-metin-soluk);
  background: var(--renk-zemin-alt);
  border-radius: var(--r-sm);
  padding: var(--b-1) var(--b-2);
  margin-top: var(--b-2);
  display: inline-block;
}

/* --- Bildirim (toast) --- */
.toast-kap {
  position: fixed;
  right: var(--b-5);
  bottom: var(--b-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--b-3);
  max-width: min(400px, calc(100vw - var(--b-8)));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--b-3);
  padding: var(--b-4) var(--b-5);
  border-radius: var(--r-lg);
  background: var(--renk-lacivert-800);
  color: var(--renk-beyaz);
  box-shadow: var(--golge-xl);
  font-size: var(--fs-md);
  line-height: 1.45;
  pointer-events: auto;
  animation: toastGir var(--gecis-normal);
  border-left: 4px solid var(--renk-altin-500);
}

.toast.cikiyor {
  animation: toastCik var(--gecis-normal) forwards;
}

.toast.basari {
  border-left-color: var(--renk-basari);
}
.toast.hata {
  border-left-color: var(--renk-hata);
  background: #4a1512;
}
.toast.uyari {
  border-left-color: var(--renk-uyari);
  background: #4a3410;
}

.toast .toast-metin {
  flex: 1;
}

.toast .toast-metin strong {
  display: block;
  margin-bottom: 2px;
}

.toast .toast-kapat {
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
}

.toast .toast-kapat:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

@keyframes toastGir {
  from {
    opacity: 0;
    transform: translateX(40px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes toastCik {
  to {
    opacity: 0;
    transform: translateX(40px) scale(0.96);
  }
}

/* --- Alt bilesen: icerik bloklari --- */
.icerik-kart {
  background: var(--renk-beyaz);
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--r-lg);
  padding: var(--b-6);
}

.ozellik-kutu {
  display: flex;
  gap: var(--b-4);
  align-items: flex-start;
}

.ozellik-kutu .ikon-kap {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--renk-altin-100);
  color: var(--renk-altin-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ozellik-kutu h3 {
  font-size: var(--fs-lg);
  margin-bottom: var(--b-2);
}

.ozellik-kutu p {
  color: var(--renk-metin-soluk);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  margin: 0;
}

/* Surec adimlari */
.surec {
  counter-reset: adim;
  display: grid;
  gap: var(--b-6);
}

.surec-adim {
  position: relative;
  padding-left: var(--b-16);
  counter-increment: adim;
}

.surec-adim::before {
  content: counter(adim);
  position: absolute;
  left: 0;
  top: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--renk-lacivert-800);
  color: var(--renk-beyaz);
  font-family: var(--font-baslik);
  font-weight: var(--fw-ekstra);
  font-size: var(--fs-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.surec-adim h3 {
  font-size: var(--fs-xl);
  margin-bottom: var(--b-2);
}

.surec-adim p {
  color: var(--renk-metin-soluk);
  margin: 0;
  line-height: var(--lh-gevsek);
}

/* Istatistik bloklari */
.istatistik-kap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--b-5);
}

.istatistik-blok {
  text-align: center;
  padding: var(--b-6) var(--b-4);
  background: var(--renk-beyaz);
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--r-lg);
}

.istatistik-blok .sayi {
  font-family: var(--font-baslik);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-ekstra);
  color: var(--renk-lacivert-800);
  line-height: 1;
  letter-spacing: -0.03em;
}

.istatistik-blok .etiket-metin {
  font-size: var(--fs-sm);
  color: var(--renk-metin-soluk);
  margin-top: var(--b-2);
}

/* CTA seridi */
.cta-serit {
  /* NUMEX-DÜZELTME (2026-09-30): Aynı kontrast hatası: .cta-serit zemini yalnızca gradient ile tanımlıydı, düz renk yedeği yoktu; denetim zemini beyaz sanıp h2 ve p metinlerini 1.06:1 diye bildiriyordu. Düz renk yedeği eklendi. */
  /* NUMEX-DUZELTME (2026-09-30): duz renk yedegi yoktu; denetim zemini beyaz
     sanip metinleri 1.06:1 olcuyordu (bkz. .hero duzeltmesi). */
  background-color: var(--renk-lacivert-800);
  background-image: linear-gradient(135deg, var(--renk-lacivert-800), var(--renk-lacivert-600));
  border-radius: var(--r-xl);
  padding: var(--b-12) var(--b-10);
  color: var(--renk-beyaz);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--b-8);
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}

.cta-serit::after {
  content: '';
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(198, 161, 91, 0.22), transparent 70%);
}

.cta-serit > * {
  position: relative;
}

.cta-serit h2 {
  color: var(--renk-beyaz);
  margin-bottom: var(--b-2);
  font-size: clamp(1.3rem, 2.6vw, var(--fs-3xl));
}

.cta-serit p {
  color: rgba(230, 236, 244, 0.8);
  margin: 0;
  max-width: 52ch;
}

.cta-serit .cta-butonlar {
  display: flex;
  gap: var(--b-3);
  flex-wrap: wrap;
}

/* Breadcrumb icin meta satiri */
.meta-satir {
  display: flex;
  gap: var(--b-4);
  flex-wrap: wrap;
  align-items: center;
  font-size: var(--fs-sm);
  color: rgba(230, 236, 244, 0.72);
}

/* Esit yukseklik yardimcilari */
.h-100 {
  height: 100%;
}

.esnek-sutun {
  display: flex;
  flex-direction: column;
}

.mt-auto {
  margin-top: auto;
}

.metin-orta {
  text-align: center;
}

.metin-soluk {
  color: var(--renk-metin-soluk);
}

.metin-kucuk {
  font-size: var(--fs-sm);
}

/* ============================================================
   NUMEX (2026-09-30) - Asgari siparis adedi uyarisi
   Yalnizca URUN DETAY sayfasinda kullanilir (urun.html).
   NUMEX-DÜZELTME (2026-10-01): Kart varyanti (.min-adet-notu) kaldirildi;
   asgari adet ibaresi vitrin/katalog kartlarinda gorunmuyor artik — o
   katmanin bilgisi degil, kullanici urune bakarken gormeli.
   ============================================================ */
.min-adet-uyari {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: var(--b-4);
  padding: 11px 13px;
  border-radius: 8px;
  background: #fef6e7;
  border: 1px solid #f5dfb5;
  color: #7d5100;
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.min-adet-uyari svg {
  flex: none;
  margin-top: 2px;
}

.min-adet-uyari strong {
  font-weight: 700;
  color: #653f00;
}

/* ============================================================
   NUMEX (2026-09-30) - Kurumsal guven seridi (footer ustu)
   ============================================================ */
.guven-serit {
  background: var(--renk-lacivert-900, #0b1b33);
  border-top: 1px solid rgba(255, 255, 255, .08);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  padding: var(--b-8) 0;
}

.guven-serit-ic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--b-6);
}

.guven-oge {
  display: flex;
  align-items: flex-start;
  gap: var(--b-3);
  color: #e6ecf4;
}

.guven-oge svg {
  flex: none;
  color: var(--renk-altin-400, #d9a13b);
  margin-top: 2px;
}

.guven-oge strong {
  display: block;
  font-size: var(--fs-base);
  font-weight: 700;
  margin-bottom: 2px;
}

.guven-oge span {
  font-size: var(--fs-sm);
  color: rgba(230, 236, 244, .68);
  line-height: 1.45;
}

/* Mobil / tablet */
@media (max-width: 900px) {
  .guven-serit-ic {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--b-5);
  }
}

@media (max-width: 520px) {
  .guven-serit-ic {
    grid-template-columns: 1fr;
    gap: var(--b-5);
  }
}

/* ============================================================
   NUMEX (2026-09-30) - 4 adimli surec seridi
   ============================================================ */
.surec-serit {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--b-5);
  counter-reset: adim;
}

.surec-kutu {
  position: relative;
  padding: var(--b-6) var(--b-5);
  background: var(--renk-yuzey, #fff);
  border: 1px solid var(--renk-kenar, #e3e8ef);
  border-radius: 12px;
  counter-increment: adim;
}

.surec-kutu::before {
  content: counter(adim);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: var(--b-3);
  border-radius: 50%;
  background: var(--renk-lacivert-800, #14294a);
  color: var(--renk-altin-400, #d9a13b);
  font-weight: 700;
  font-size: var(--fs-base);
}

.surec-kutu h3 {
  font-size: var(--fs-lg);
  margin-bottom: var(--b-2);
}

.surec-kutu p {
  font-size: var(--fs-sm);
  color: var(--renk-metin-soluk);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 900px) {
  .surec-serit {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .surec-serit {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   NUMEX (2026-09-30) - SSS (Sikca Sorulan Sorular) akordeon
   ============================================================ */
.sss-liste {
  max-width: 860px;
  margin: 0 auto;
}

.sss-oge {
  border: 1px solid var(--renk-kenar, #e3e8ef);
  border-radius: 10px;
  margin-bottom: var(--b-3);
  background: var(--renk-yuzey, #fff);
  overflow: hidden;
}

.sss-oge[open] {
  border-color: var(--renk-lacivert-700, #1d3a66);
  box-shadow: 0 4px 16px rgba(11, 27, 51, .07);
}

.sss-soru {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--b-4);
  padding: 15px 18px;
  cursor: pointer;
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--renk-metin, #14294a);
  list-style: none;
  min-height: 44px;
  user-select: none;
}

.sss-soru::-webkit-details-marker {
  display: none;
}

.sss-soru::after {
  content: "+";
  flex: none;
  font-size: 22px;
  line-height: 1;
  color: var(--renk-altin-500, #c88a25);
  transition: transform .2s ease;
}

.sss-oge[open] .sss-soru::after {
  content: "\2212";
}

.sss-soru:hover {
  background: rgba(11, 27, 51, .025);
}

.sss-cevap {
  padding: 0 18px 16px;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--renk-metin-soluk);
  margin: 0;
}

.sss-cevap + .sss-cevap {
  padding-top: 0;
}

/* ============================================================
   NUMEX (2026-09-30) - Referans bolumu
   ONCEKI DURUM: Burada .yorum-grid / .yorum-kart / .yorum-avatar gibi
   "musteri yorumu" bilesenleri vardi. O blok kaldirildi cunku o yorumlar
   GERCEK DOGRULANMIS REFERANS DEGILDI (uydurma testimonial goruntusu).
   Yerine asagidaki sektor/referans bilesenleri geldi. Eski .yorum-*
   sinif adlari kasitli olarak BIRAKILMADI: ad, uydurma veri imasini
   tasimaya devam ederdi.
   ============================================================ */
.referans-politika {
  max-width: 760px;
  margin: 0 auto var(--b-7);
  padding: var(--b-5) var(--b-6);
  background: var(--renk-yuzey, #fff);
  border: 1px solid var(--renk-kenar, #e3e8ef);
  border-left: 3px solid var(--renk-altin-400, #d9a13b);
  border-radius: 10px;
}

.referans-not {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--renk-metin-soluk);
}

.referans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--b-5);
}

.referans-sektor {
  display: flex;
  align-items: flex-start;
  gap: var(--b-4);
  padding: var(--b-5);
  background: var(--renk-yuzey, #fff);
  border: 1px solid var(--renk-kenar, #e3e8ef);
  border-radius: 12px;
  transition: border-color .18s ease, transform .18s ease;
}

.referans-sektor:hover {
  border-color: var(--renk-altin-400, #d9a13b);
  transform: translateY(-2px);
}

.referans-sektor h3 {
  margin: 0 0 4px;
  font-size: var(--fs-base);
  color: var(--renk-metin, #14294a);
}

.referans-sektor p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--renk-metin-soluk);
}

/* ============================================================
   NUMEX (2026-09-30) - Hero vitrin gorseli
   ============================================================ */
.hero-vitrin {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, #14294a 0%, #0b1b33 100%);
  min-height: 260px;
  /* NUMEX-DÜZELTME (2026-09-30): Vitrin görseli kartın üstünde beyaz bir boşluk bırakıyordu: kart flex konteyner + align-items:stretch iken img yüksekliği 260px sabit kalıyor, kart ise etiket + içerik nedeniyle daha uzun oluyordu; aradaki fark beyaz zemin olarak görünüyordu. Çözüm: img absolute konumlandırılıp kartı tamamen kaplar (inset:0), böylece kart yüksekliği ne olursa olsun boşluk kalmaz. */
  height: 260px;
}

/* NUMEX-DÜZELTME (2026-09-30): Görsel, kartı TAMAMEN kaplar.
   Önceki sürümde img normal akışta + align-items:stretch ile duruyordu ve
   kart içeriği görselden uzun olduğunda üstte beyaz boşluk şeridi kalıyordu. */
.hero-vitrin img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-vitrin-etiket {
  position: absolute;
  left: 14px;
  bottom: 14px;
  right: 14px;
  padding: 11px 13px;
  border-radius: 9px;
  background: rgba(11, 27, 51, .82);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  color: #fff;
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.hero-vitrin-etiket strong {
  display: block;
  color: var(--renk-altin-400, #d9a13b);
  margin-bottom: 2px;
  font-size: var(--fs-base);
}

/* Bolum X sonu */