/* ByKuara tema değişkenleri — tek kaynak.
   Diğer CSS dosyaları renkleri doğrudan yazmaz, buradaki değişkenleri kullanır.

   Ton merdiveni t0..t13: t0 en koyu, t13 en açık (AÇIK temada).
   Koyu temada merdiven ters çevrilir; rol adları (metin, zemin) aynı kalır,
   böylece her kural iki temada da doğru kontrastı alır.

   Palet yönü: sıcak-nötr. Doygunluk %5-15 arasında bilerek düşük tutuldu;
   katalogda mavi ve kırmızı ürünler var, doygun bir zemin onlarla çakışıyor. */

:root {
  color-scheme: light;

  /* ── Ton merdiveni ── */
  --t0:  #14120f;   /* en koyu — perde, derin zeminler */
  --t1:  #343c30;   /* ana mürekkep: gövde metni, koyu bölüm zemini */
  --t2:  #3f4a39;
  --t3:  #505944;   /* düğme hover */
  --t4:  #56634d;
  --t5:  #656e5b;   /* ikincil metin — AA için t4'e bir tık yaklaştırıldı */
  --t6:  #819273;
  --t7:  #a3ac97;   /* soluk metin, ince kenarlık */
  --t8:  #c3c3b3;
  --t9:  #d2d6c7;   /* ayraç çizgisi */
  --t10: #eae5da;   /* kart / panel zemini */
  --t11: #f0ecdf;
  --t12: #f6f3eb;   /* kâğıt: sayfa zemini */
  --t13: #ffffff;   /* en açık */

  /* Büyük koyu yüzeyler (üst şerit, mağaza bandı).
     --t1'den ayrı tutulur: t1 koyu temada metin rengine döner, oysa bu
     yüzeyler koyu temada da zemin olarak kalmalı — yoksa sayfanın tepesinde
     parlak bir bant oluşur. Küçük ters-kontrast rozetler (.button,
     .filters button.active) t1 kullanmaya devam eder; onlarda dönüş istenir. */
  --blok:       var(--t1);
  --blok-yazi:  var(--t12);
  --blok-soluk: var(--t8);   /* blok üstündeki ikincil metin */
  --blok-gradyan-a: var(--t4);
  --blok-gradyan-b: var(--t1);

  /* ── Vurgu (kahve) ── */
  --v1: #a66b4b;    /* odak halkası, altçizgi, işaret */
  --v2: #8a654e;
  --v3: #946d53;
  --v4: #8a6a2e;

  /* ── Fotoğraf üstüne binen yarı saydam kartlar ── */
  --cam-kati: #f6f3ebed;
  --cam-orta: #f6f3eb8c;
  --cam-ince: #f6f3eb40;

  /* ── Tekil roller ── */
  /* Sanal mağaza arayüzü — tuval üstünde yüzen cam paneller.
     rgba() ile alfa verildiği için hazır renk değil ham bileşen tutulur. */
  --hud-yazi-rgb:  38, 42, 34;
  --hud-zemin-rgb: 246, 243, 235;

  --perde:   #1b221cd1;   /* dialog::backdrop */
  --cerceve: #343c3008;   /* ürün görseli üstü ince çerçeve */
  --halka:   #ffffff99;   /* fotoğraf üstündeki yuvarlak düğme kenarı */
}

/* Koyu tema.
   Uçlara dayanmaz: en koyu zemin #111 seviyesinde, en açık metin #F2 —
   saf siyah zemin üstünde saf beyaz metin uzun okumada göz yorar. */
:root[data-tema="koyu"] {
  color-scheme: dark;

  --t0:  #f2f1ec;
  --t1:  #dfe0d8;
  --t2:  #cccec4;
  --t3:  #b6b9ad;
  --t4:  #a2a699;
  --t5:  #8b8f83;
  --t6:  #767a6d;
  --t7:  #5e6257;
  --t8:  #4a4d44;
  --t9:  #383a33;
  --t10: #262823;
  --t11: #202220;
  --t12: #1a1b18;
  --t13: #111210;

  /* Sayfa zemininden bir tık açık: ayrışır ama parlamaz */
  --blok:       #24261f;
  --blok-yazi:  var(--t2);
  --blok-soluk: #9a9d92;
  --blok-gradyan-a: #343830;
  --blok-gradyan-b: #24261f;

  /* Koyu zeminde aynı kahve sönük kalıyor; açıklık yükseltildi */
  --v1: #c68b60;
  --v2: #b07c55;
  --v3: #ba855d;
  --v4: #c79a45;

  --cam-kati: #1a1b18ed;
  --cam-orta: #1a1b188c;
  --cam-ince: #1a1b1840;

  --hud-yazi-rgb:  233, 228, 218;
  --hud-zemin-rgb: 20, 18, 15;

  --perde:   #0b0c0ae0;
  --cerceve: #ffffff12;
  --halka:   #ffffff33;
}

/* Tema düğmesi — başlıkta, menünün yanında */
.tema-dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--t6);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  line-height: 1;
  transition: background .2s, border-color .2s;
}
.tema-dugme:hover { background: var(--t10); border-color: var(--t5); }
.tema-dugme svg { width: 17px; height: 17px; display: block; }
/* Aynı düğme iki simge taşır; görünen olanı aktif tema belirler */
.tema-dugme .simge-ay   { display: none; }
:root[data-tema="koyu"] .tema-dugme .simge-gunes { display: none; }
:root[data-tema="koyu"] .tema-dugme .simge-ay    { display: block; }

/* Başlıkta brand ile menü arasındaki boşluğu emer, menünün soluna yaslanır */
.header .tema-dugme { margin-left: auto; margin-right: 20px; flex: 0 0 auto; }

@media (max-width: 760px) {
  /* Mobilde açılır menünün içine düşmez, başlıkta görünür kalır */
  .header .tema-dugme { margin-right: 10px; width: 36px; height: 36px; }
}

/* JavaScript çalışmazsa: işletim sistemi koyu moddaysa site de koyu açılır.
   Değerler yukarıdaki blokla aynıdır; :not([data-tema="acik"]) sayesinde
   kullanıcının açık tema seçimi bu yedeği ezer. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) {
    color-scheme: dark;

    --t0:  #f2f1ec;
    --t1:  #dfe0d8;
    --t2:  #cccec4;
    --t3:  #b6b9ad;
    --t4:  #a2a699;
    --t5:  #8b8f83;
    --t6:  #767a6d;
    --t7:  #5e6257;
    --t8:  #4a4d44;
    --t9:  #383a33;
    --t10: #262823;
    --t11: #202220;
    --t12: #1a1b18;
    --t13: #111210;

    /* Sayfa zemininden bir tık açık: ayrışır ama parlamaz */
    --blok:       #24261f;
    --blok-yazi:  var(--t2);
    --blok-soluk: #9a9d92;
    --blok-gradyan-a: #343830;
    --blok-gradyan-b: #24261f;

    /* Koyu zeminde aynı kahve sönük kalıyor; açıklık yükseltildi */
    --v1: #c68b60;
    --v2: #b07c55;
    --v3: #ba855d;
    --v4: #c79a45;

    --cam-kati: #1a1b18ed;
    --cam-orta: #1a1b188c;
    --cam-ince: #1a1b1840;

    --hud-yazi-rgb:  233, 228, 218;
    --hud-zemin-rgb: 20, 18, 15;

    --perde:   #0b0c0ae0;
    --cerceve: #ffffff12;
    --halka:   #ffffff33;
  }
}