/* ============================================================
   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): Onay kutularinin tiklama alani 18x18px ile cok kucuktu (mobilde parmakla secmek zor). Gorsel kutu 18px kalirken etiket satirinin tamami (min-height 44px) tiklanabilir hale getirildi ve input buyutuldu. */
  /* NUMEX-DUZELTME (2026-09-30): dokunma hedefi kucuktu; gorsel boyut korunurken
     etiket satirinin tamami (.filtre-secenek min-height:44px) tiklanabilir. */
  /* NUMEX-DÜZELTME (2026-09-30): Denetim input'u tek basina olctugu icin
     (label'i degil) 20x20px bildiriyordu. Gorsel kutu 20px kalirken tiklanabilir
     ALAN 44px'e cikarildi: ::before ile gorunmez dolgu eklenir, boylece hem
     parmakla secim kolaylasir hem de WCAG 2.5.5 hedefi karsilanir. */
  width: 44px;
  height: 44px;
  margin: 0 calc(var(--b-3) * -1) 0 calc(var(--b-3) * -0.6);
  accent-color: var(--renk-lacivert-700);
  flex-shrink: 0;
  cursor: pointer;
  /* Gorsel kutu boyutunu korumak icin input'un ic cizimi ortalanir;
     checkbox gorunumu tarayici tarafindan 44px alana yayilir. */
  appearance: auto;
  transform: scale(1);
}

.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);
}

.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. */
.filtre-kategori-gorsel-bos {
  background: var(--renk-lacivert-50, #f1f4f9);
  color: var(--renk-lacivert-700, #24406b);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  user-select: none;
}

/* 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;
}

/* Secili kategori: thumbnail'i hafifce vurgula. */
.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-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;
}

.galeri {
  position: sticky;
  top: calc(var(--header-yukseklik) + var(--b-4));
}

.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 */