/* ==========================================================
   TEMA: GECE  (koyu / dark mode)
   Zemin #0d1117 · yükseltilmiş yüzey #161b22 · Space Grotesk
   Vurgu: amber #f0b429 · bağlantı/buton: #58a6ff

   KONTRAST (WCAG AA — hepsi 4.5:1 üzeri):
     #b6c2cf metin / #0d1117 zemin ....... 10.4:1
     #b6c2cf metin / #161b22 kart ......... 9.5:1
     #f0f6fc başlık / #161b22 kart ....... 15.9:1
     #8b98a5 ikincil / #161b22 kart ....... 5.9:1
     #f0b429 amber / #0d1117 zemin ....... 10.1:1
     #58a6ff mavi / #161b22 kart .......... 6.9:1
     #0d1117 metin / #58a6ff buton ........ 7.5:1
     #3fb950 başarı / #161b22 ............. 6.8:1
     #f85149 hata / #161b22 ............... 5.2:1

   Karakter farkı: küçük yarıçaplar (8/12px), gölge yerine
   1px kenar + ince parıltı, tipografi Space Grotesk başlık,
   ürün kartı medyası kare ve koyu plaka üzerinde.
   ========================================================== */

:root {
  color-scheme: dark;

  /* --- Tipografi --- */
  --font-heading: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-scale: 1;
  --heading-tracking: -0.01em;
  --heading-transform: none;

  /* --- Renk --- */
  --primary: #58a6ff;
  --primary-strong: #010409;
  --primary-hover: #79c0ff;
  --primary-focus: #58a6ff;
  --primary-line: #30363d;
  --primary-soft: #21262d;
  --on-primary: #0d1117;

  --accent: #f0b429;
  --accent-strong: #ffd479;
  --accent-light: #ffd479;
  --accent-soft: #2a2110;
  --on-accent: #1a1200;

  --title: #f0f6fc;
  --text: #b6c2cf;
  --muted: #8b98a5;
  --border: #30363d;
  --border-strong: #444c56;
  /* Etkileşimli denetim kenarlığı (WCAG 1.4.11 ≥3:1). KOYU TEMADA YÖN TERSTİR:
     kenarlık zemine göre AÇILARAK kontrast kazanır, koyularak değil. Bu yüzden
     --control-border-strong da açık uçtadır (#8b949e), --control-border'dan daha
     KOYU değil. kart #161b22 → 3,55:1 · sayfa #0d1117 → 3,89:1 ·
     surface #1c2128 → 3,32:1 (en zayıf zemin: surface, çünkü en açık olan o). */
  --control-border: #6b727a;
  --control-border-strong: #8b949e;
  --surface: #1c2128;
  --page-bg: #0d1117;
  --card-bg: #161b22;
  --white: #f0f6fc;

  --success: #3fb950;
  --danger: #f85149;
  --warning: #d29922;

  /* --- Biçim --- */
  --radius-sm: 6px;
  --radius: 8px;
  --card-radius: 12px;
  --pill: 999px;
  --btn-radius: 8px;
  --btn-height: 44px;
  --btn-tracking: 0.01em;
  --btn-transform: none;

  --card-shadow: none;
  --card-hover-shadow: 0 0 0 1px var(--border-strong), 0 8px 24px rgba(0, 0, 0, 0.55);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.7);

  --container: 1240px;
  --section-space: 56px;
}

/* --- Butonlar --- */
.btn--gold { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.btn--gold:hover { background: var(--accent-strong); }
.btn--navy { background: var(--primary); color: var(--on-primary); font-weight: 700; }
.btn--navy:hover { background: var(--primary-hover); }
.btn--outline { border-color: var(--control-border); color: var(--title); }
.btn--outline:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-hover); }
.btn--ghost { color: var(--primary-hover); }
.btn--ghost:hover { background: var(--primary-soft); }
.btn--danger { background: var(--danger); color: #1a0503; }

/* --- Formlar --- */
/* Bu tema girdi zeminini --surface'e taşır; kenarlık bu YÜZDEN --card-bg değil
   --surface üstünde de ölçülmek zorundadır (en zayıf durum burada). */
.field input, .field select, .field textarea, .coupon input, .listbar select, .qty input {
  background: var(--surface);
  color: var(--title);
  border-color: var(--control-border);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.28);
}

/* --- Üst bar / header --- */
.topbar { background: var(--primary-strong); color: #d7dee6; border-bottom: 1px solid var(--border); }
.hdr { background: var(--card-bg); border-bottom: 1px solid var(--border); }
.hdr__logo-mark { background: var(--surface); color: var(--accent); border-color: var(--accent); }
.hdr__action { color: var(--title); }
.search { background: var(--surface); border-color: var(--control-border); }
.search:focus-within { background: var(--surface); }
.search input { color: var(--title); }
.search input::placeholder { color: var(--muted); }
.search button { background: var(--primary); color: var(--on-primary); }
.search button:hover { background: var(--primary-hover); }

/* --- Kategori menüsü: koyu şerit (mavi zemin DEĞİL) --- */
.catnav { background: var(--surface); border-bottom: 1px solid var(--border); }
.catnav__link { color: #d7dee6; }
.catnav__link:hover, .catnav__item:hover > .catnav__link { background: var(--primary-soft); color: var(--primary-hover); }
.catnav__sub { background: var(--card-bg); border-color: var(--border); }
.catnav__sub a { color: var(--text); }
.catnav__sub a:hover { background: var(--primary-soft); color: var(--primary-hover); }

/* --- Mobil menü --- */
.mobmenu summary, .mobmenu > a { color: var(--title); }

/* --- Hero: derin koyu, amber parıltı --- */
.hero {
  background:
    radial-gradient(circle at 84% 14%, rgba(240, 180, 41, 0.16) 0%, rgba(240, 180, 41, 0) 46%),
    radial-gradient(circle at 12% 88%, rgba(88, 166, 255, 0.14) 0%, rgba(88, 166, 255, 0) 44%),
    linear-gradient(160deg, #161b22 0%, #0d1117 100%);
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.hero h1 { color: var(--title); }
.hero__badge { background: rgba(240, 180, 41, 0.14); border-color: rgba(240, 180, 41, 0.34); color: var(--accent-strong); }
.hero__card { background: var(--card-bg); border-color: var(--border); }
.hero__card strong { color: var(--title); }
.hero__card span { color: var(--muted); }
.hero__card-icon { background: rgba(240, 180, 41, 0.16); color: var(--accent); }

.trust { background: var(--primary-strong); border-bottom: 1px solid var(--border); }
.trust__item { color: #d7dee6; }
.trust__item svg { color: var(--accent); }

/* --- Bölümler --- */
.section--surface { background: var(--surface); }
.eyebrow { color: var(--accent-strong); }
.section-head p { color: var(--muted); }

/* --- Ürün kartı --- */
.pcard { border-color: var(--border); }
.pcard:hover { border-color: var(--border-strong); }
.pcard__media { background: var(--surface); }
.pcard__fav { background: rgba(13, 17, 23, 0.86); color: var(--primary-hover); border: 1px solid var(--border-strong); }
.pcard__fav:hover { color: var(--danger); }
.pcard__stars { color: var(--accent); }
.pcard__price del { color: var(--muted); }

/* --- Kategori kartı --- */
.catcard { border-color: var(--border); }
.catcard:hover { border-color: var(--primary); }

/* --- Rozetler: koyu zemin uyumlu --- */
.badge--gold { background: var(--accent); color: var(--on-accent); }
.badge--success { background: rgba(63, 185, 80, 0.16); color: var(--success); }
.badge--danger { background: rgba(248, 81, 73, 0.16); color: var(--danger); }
.badge--warning { background: var(--accent-soft); color: var(--accent-strong); }
.badge--info { background: var(--primary-line); color: var(--primary-hover); }
.badge--muted { background: var(--surface); color: var(--muted); }
.badge--primary { background: var(--primary); color: var(--on-primary); }

/* --- Uyarılar --- */
.alert--success { background: rgba(63, 185, 80, 0.12); border-color: rgba(63, 185, 80, 0.4); color: #6ee787; }
.alert--error { background: rgba(248, 81, 73, 0.12); border-color: rgba(248, 81, 73, 0.42); color: #ffa198; }
.alert--info { background: var(--primary-soft); border-color: var(--border-strong); color: var(--primary-hover); }

/* --- Liste / filtre / sayfalama --- */
.filters { border-color: var(--border); }
.filters__title { color: var(--accent-strong); }
.filters__list a:hover, .filters__list a.is-active { color: var(--primary-hover); }
.breadcrumb a:hover { color: var(--primary-hover); }
.pagination a, .pagination span { background: var(--card-bg); border-color: var(--control-border); color: var(--text); }
.pagination a:hover { border-color: var(--primary); color: var(--primary-hover); }
.pagination .is-current { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.empty { background: var(--surface); border-color: var(--border-strong); }

/* --- Ürün detay --- */
.gallery__main { background: var(--surface); border-color: var(--border); }
.gallery__thumb { background: var(--surface); border-color: var(--control-border); }
.gallery__thumb.is-active { border-color: var(--accent); }
.pinfo__price { border-color: var(--border); }
.optlist label { border-color: var(--control-border); }
.optlist label:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.qty { border-color: var(--control-border); }
.qty button { color: var(--primary-hover); }
.qty button:hover { background: var(--primary-soft); }
.pfeatures svg { color: var(--accent-strong); }
.tabs__nav { border-bottom-color: var(--border); }
.tabs__btn.is-active { color: var(--primary-hover); border-bottom-color: var(--accent); }
.review { border-bottom-color: var(--border); }
.stars { color: var(--accent); }

/* --- Sepet / ödeme / hesap --- */
.cartlist, .summary, .panel, .accnav, .datatable, .statcard, .filters { border-color: var(--border); }
.cartitem { border-bottom-color: var(--border); }
.cartitem__img { background: var(--surface); }
.summary__row--total { border-top-color: var(--border); color: var(--title); }
.radio-card { border-color: var(--control-border); }
.radio-card:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.steps__no { background: var(--surface); border-color: var(--border-strong); }
.steps__item.is-active { color: var(--primary-hover); }
.steps__item.is-active .steps__no { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.success-box__icon { background: rgba(63, 185, 80, 0.16); color: var(--success); }
.datatable th { background: var(--surface); color: var(--muted); border-bottom-color: var(--border); }
.datatable td { border-bottom-color: var(--border); }
.datatable tbody tr:hover { background: var(--primary-soft); }
.accnav a:hover { background: var(--primary-soft); }
.accnav a.is-active { background: var(--primary); color: var(--on-primary); }

/* --- Footer --- */
.ftr { background: var(--primary-strong); color: #a8b4c0; border-top: 1px solid var(--border); }
.ftr h4 { color: var(--title); }
.ftr a:hover { color: var(--accent-strong); }
.ftr__badges li { border-color: var(--border-strong); }
.ftr__bottom { border-top-color: var(--border); color: var(--muted); }

/* --- Seçim rengi --- */
::selection { background: rgba(240, 180, 41, 0.35); color: var(--title); }