/* ═══════════════════════════════════════════════════════════════════
   TEMALAR — 5 RENK DÜZENİ (kullanıcı isteği)
   ------------------------------------------------------------------
   KULLANICI: "sağ üste Temalar diye seçenek ekle: toz pembe, siyah,
   bej, bordo ve koyu yeşil — estetik şekilde düzenle, entegre et,
   isteyen istediğini kullansın."

   NASIL ÇALIŞIR
     Var olan tema altyapısı `data-theme` özniteliğini kullanıyor ve
     TÜM renkler CSS değişkenlerinden geliyor (main.css :root bloğu).
     Bu dosya her yeni tema için o değişkenleri EZER — tek satır HTML
     değişmiyor, hiçbir bileşen kendi rengini sabitlemiyor.
     → data-theme="tozpembe" | "siyah" | "bej" | "bordo" | "koyuyesil"

   TASARIM İLKESİ (her tema için)
     · --void / --void-2 / --void-3  → zemin katmanları (koyudan açığa)
     · --gold                        → VURGU rengi (temanın karakteri)
     · --ink / --govde / --muted     → metin katmanları
     · --panel / --field / --dlg     → yüzeyler (yarı saydam)
     · --line / --line-soft          → ayraçlar (vurgunun soluk hâli)
   Kontrast hedefi: gövde metni zemine karşı AA (≥4.5). Altın/vurgu
   tonlar koyu zeminde açılır, açık zeminde koyulaşır — yoksa okunmaz.

   DOSYA main.css'ten SONRA yüklenir.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════ 1) TOZ PEMBE ═══════════════════════════════════════
   Pudra pembesi zemin, gül kurusu vurgu. Yumuşak ama soluk değil:
   metin katmanları koyu, vurgu doygun gül. */
[data-theme="tozpembe"]{
  color-scheme:light;
  --void:#faf0f1;
  --void-2:#f4e4e7;
  --void-3:#ecd8dc;
  --line:rgba(150,80,100,.22);
  --line-soft:rgba(90,50,60,.12);
  --gold:#b0446a;            /* gül kurusu — temanın karakteri */
  --gold-hi:#5f1f36;         /* koyu bordo: açık zeminde okunur vurgu */
  --gold-deep:#d2879d;
  --teal:#8a5a9e;            /* ikincil vurgu: mor-gül */
  --teal-deep:#6b4379;
  --crimson:#a32a1e;
  --rose:#c25a7c;
  --ink:#33191f;             /* gövde metni: koyu bordo-kahve */
  --muted:#6b4a54;
  --muted-2:#7d5c66;
  --govde:#4a2c34;
  --govde-2:#553842;

  /* Saydamlık .78 → .62: kapak görselinin koyu katmanı panelin
     İÇİNDEN görünsün. .78'de panel düz beyaz bir kutu gibi duruyordu
     (ölçüldü: toz pembe temasında sağ rütbe paneli beyaz kalmıştı). */
  --panel:rgba(255,246,248,.62);
  --panel-solid:#fff2f5;
  --field:rgba(255,252,253,.92);
  --field-focus:rgba(176,68,106,.07);
  --grain-op:.20;
  --vignette-op:.30;
  --shadow:0 18px 44px rgba(120,60,80,.14);
  --dlg:rgba(250,240,241,.86);
  --dip:#f0dfe3;
  --hero-veil:linear-gradient(180deg,rgba(250,240,241,.25) 0%,rgba(250,240,241,.84) 62%,var(--void) 100%);
  --band-grad:linear-gradient(90deg,#7a3450,#9c4a68 45%,#7a3450);
  --band-line:rgba(176,68,106,.45);
  --band-ink:#fff5f7;
  --band-gorsel:none;
  --band-perde:linear-gradient(90deg,rgba(74,30,46,.94) 0%,rgba(74,30,46,.86) 28%,rgba(74,30,46,.82) 50%,rgba(74,30,46,.86) 72%,rgba(74,30,46,.94) 100%);
  --band-zemin:#4a1e2e;
  --band-shadow:0 1px 0 rgba(0,0,0,.16);
}
[data-theme="tozpembe"] body{background-image:none}
[data-theme="tozpembe"] ::selection{background:var(--gold);color:#fff7f8}
[data-theme="tozpembe"] .grain{opacity:var(--grain-op);mix-blend-mode:multiply}

/* ═══════════ 2) SİYAH ═══════════════════════════════════════════
   Saf siyah zemin, nötr gri metin, BEYAZ-gümüş vurgu. Altın yerine
   gümüş: siyahta altın "kahverengi" okunuyordu, gümüş daha temiz. */
[data-theme="siyah"]{
  color-scheme:dark;
  --void:#000000;
  --void-2:#070708;
  --void-3:#0e0e10;
  --line:rgba(200,200,215,.17);
  --line-soft:rgba(235,235,245,.09);
  --gold:#c9ccd6;            /* gümüş vurgu */
  --gold-hi:#ffffff;
  --gold-deep:#6a6e7a;
  --teal:#7fd8e8;            /* soğuk camgöbeği ikincil */
  --teal-deep:#3f9aad;
  --crimson:#e0574a;
  --rose:#d68fa4;
  --ink:#f2f3f6;
  --muted:#9a9da8;
  --muted-2:#84878f;
  --govde:#c6c8d0;
  --govde-2:#bfc1c9;

  --panel:rgba(9,9,11,.62);
  --panel-solid:#0a0a0c;
  --field:rgba(0,0,0,.72);
  --field-focus:rgba(201,204,214,.06);
  --grain-op:.34;
  --vignette-op:1;
  --shadow:0 22px 62px rgba(0,0,0,.85);
  --dlg:rgba(4,4,5,.86);
  --dip:#000000;
  --hero-veil:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.80) 62%,var(--void) 100%);
  --band-grad:linear-gradient(90deg,#131316,#222228 45%,#131316);
  --band-line:rgba(201,204,214,.34);
  --band-ink:#f2f3f6;
  --band-gorsel:none;
  --band-perde:linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.86) 28%,rgba(0,0,0,.82) 50%,rgba(0,0,0,.86) 72%,rgba(0,0,0,.94) 100%);
  --band-zemin:#000000;
  --band-shadow:0 1px 3px rgba(0,0,0,.98);
}

/* ═══════════ 3) BEJ ═════════════════════════════════════════════
   Kum/keten beji zemin, koyu bronz vurgu. Açık temanın sıcak kardeşi;
   arşiv mürekkebi hissi korunur ama daha nötr. */
[data-theme="bej"]{
  color-scheme:light;
  --void:#f2ebdb;
  --void-2:#e9e0cb;
  --void-3:#ded2b8;
  --line:rgba(110,85,45,.26);
  --line-soft:rgba(70,55,30,.13);
  --gold:#7a5a1e;            /* koyu bronz */
  --gold-hi:#2e2415;
  --gold-deep:#a98a4a;
  --teal:#2f6b6b;            /* petrol yeşili ikincil */
  --teal-deep:#255454;
  --crimson:#9c2f1f;
  --rose:#9c5568;
  --ink:#20190f;
  --muted:#5a4f3c;
  --muted-2:#6c604a;
  --govde:#3c3527;
  --govde-2:#48402f;

  /* Saydamlık .78 → .62 (toz pembedeki ile aynı gerekçe). */
  --panel:rgba(250,244,230,.62);
  --panel-solid:#f6efdf;
  --field:rgba(253,250,243,.92);
  --field-focus:rgba(122,90,30,.07);
  --grain-op:.24;
  --vignette-op:.34;
  --shadow:0 18px 44px rgba(80,65,35,.16);
  --dlg:rgba(242,235,219,.86);
  --dip:#e2d7bd;
  --hero-veil:linear-gradient(180deg,rgba(242,235,219,.24) 0%,rgba(242,235,219,.82) 62%,var(--void) 100%);
  --band-grad:linear-gradient(90deg,#4c3a18,#6b5228 45%,#4c3a18);
  --band-line:rgba(122,90,30,.45);
  --band-ink:#fdf7ea;
  --band-gorsel:none;
  --band-perde:linear-gradient(90deg,rgba(44,34,16,.94) 0%,rgba(44,34,16,.86) 28%,rgba(44,34,16,.82) 50%,rgba(44,34,16,.86) 72%,rgba(44,34,16,.94) 100%);
  --band-zemin:#2c2210;
  --band-shadow:0 1px 0 rgba(0,0,0,.18);
}
[data-theme="bej"] body{background-image:none}
[data-theme="bej"] ::selection{background:var(--gold);color:#fffdf5}
[data-theme="bej"] .grain{opacity:var(--grain-op);mix-blend-mode:multiply}

/* ═══════════ 4) BORDO ═══════════════════════════════════════════
   Şarap bordosu zemin, eskitilmiş altın vurgu. Ağır ve törensel —
   "arşiv cildi" hissinin en yoğun hâli. */
[data-theme="bordo"]{
  color-scheme:dark;
  --void:#1a0508;
  --void-2:#240a0e;
  --void-3:#311015;
  --line:rgba(214,168,110,.20);
  --line-soft:rgba(240,220,200,.10);
  --gold:#d6a86e;            /* eskitilmiş altın */
  --gold-hi:#f6e3c4;
  --gold-deep:#8a6032;
  --teal:#5ecfc0;            /* yeşil-turkuaz kontrast */
  --teal-deep:#2f8f85;
  --crimson:#e8564a;
  --rose:#dd8fa0;
  --ink:#f8ecdf;
  --muted:#c2a795;
  --muted-2:#a98d7c;
  --govde:#ddc7b6;
  --govde-2:#d6bfad;

  --panel:rgba(36,10,14,.62);
  --panel-solid:#240a0e;
  --field:rgba(26,5,8,.74);
  --field-focus:rgba(214,168,110,.06);
  --grain-op:.46;
  --vignette-op:1;
  --shadow:0 22px 60px rgba(0,0,0,.72);
  --dlg:rgba(26,5,8,.78);
  --dip:#120305;
  --hero-veil:linear-gradient(180deg,rgba(26,5,8,.16) 0%,rgba(26,5,8,.78) 62%,var(--void) 100%);
  --band-grad:linear-gradient(90deg,#5c1018,#7d1a24 45%,#5c1018);
  --band-line:rgba(214,168,110,.38);
  --band-ink:#f8ecdf;
  --band-gorsel:none;
  --band-perde:linear-gradient(90deg,rgba(26,5,8,.94) 0%,rgba(26,5,8,.86) 28%,rgba(26,5,8,.82) 50%,rgba(26,5,8,.86) 72%,rgba(26,5,8,.94) 100%);
  --band-zemin:#1a0508;
  --band-shadow:0 1px 3px rgba(0,0,0,.9);
}

/* ═══════════ 5) KOYU YEŞİL ══════════════════════════════════════
   Orman/hextech yeşili zemin, pirinç sarısı vurgu. LoL'ün "zehirli
   bataklık" paleti: yeşil zemin + sıcak pirinç kontrast. */
[data-theme="koyuyesil"]{
  color-scheme:dark;
  --void:#04120c;
  --void-2:#071b12;
  --void-3:#0c2619;
  --line:rgba(196,176,110,.20);
  --line-soft:rgba(220,235,215,.10);
  --gold:#c8b06a;            /* pirinç */
  --gold-hi:#f2ead0;
  --gold-deep:#7d6a2e;
  --teal:#3fd6a8;            /* parlak yeşil-turkuaz */
  --teal-deep:#1f9670;
  --crimson:#d6553f;
  --rose:#cf8f9c;
  --ink:#eef6e8;
  --muted:#9fb8a4;
  --muted-2:#89a08d;
  --govde:#c4d8c2;
  --govde-2:#bdd1bb;

  --panel:rgba(7,27,18,.62);
  --panel-solid:#071b12;
  --field:rgba(4,18,12,.74);
  --field-focus:rgba(200,176,106,.06);
  --grain-op:.46;
  --vignette-op:1;
  --shadow:0 22px 60px rgba(0,0,0,.68);
  --dlg:rgba(4,18,12,.78);
  --dip:#020c07;
  --hero-veil:linear-gradient(180deg,rgba(4,18,12,.16) 0%,rgba(4,18,12,.78) 62%,var(--void) 100%);
  --band-grad:linear-gradient(90deg,#0b3a24,#125736 45%,#0b3a24);
  --band-line:rgba(196,176,110,.36);
  --band-ink:#eef6e8;
  --band-gorsel:none;
  --band-perde:linear-gradient(90deg,rgba(4,18,12,.94) 0%,rgba(4,18,12,.86) 28%,rgba(4,18,12,.82) 50%,rgba(4,18,12,.86) 72%,rgba(4,18,12,.94) 100%);
  --band-zemin:#04120c;
  --band-shadow:0 1px 3px rgba(0,0,0,.9);
}

/* ═══════════ tema geçişi (mevcut .42s kuralına ek) ═════════════ */
@media (prefers-reduced-motion:no-preference){
  [data-theme="tozpembe"] body,
  [data-theme="bej"] body,
  [data-theme="siyah"] body,
  [data-theme="bordo"] body,
  [data-theme="koyuyesil"] body{
    transition:background-color .42s var(--ease),color .42s var(--ease);
  }
}


/* ═══════════════════════════════════════════════════════════════════
   AÇIK TEMALARIN ALT SİYAHLIĞI — DÜZELTME
   ------------------------------------------------------------------
   KULLANICI: "hepsinde aşağıda böyle bir siyahlık var, düzelt ya da
   daha güzel bir şeye çevir; o siyahlık dikkat dağıtıyor."

   NEDEN: `.vignette` katmanı (main.css:240) KOYU temalar için
   tasarlanmış SABİT siyah degrade kullanıyor:
     radial-gradient(... rgba(0,0,0,.55) ...) ve
     linear-gradient(180deg, rgba(0,0,0,.5), ... rgba(0,0,0,.6))
   Açık temalarda bunu yalnız `opacity` yumuşatıyordu ve o da
   SADECE `[data-theme="light"]` için tanımlıydı (--vignette-op:.35).
   Yeni açık temalar (toz pembe, bej) listeye eklenince opacity
   varsayılan 1'de kaldı → sayfanın altında kapkara bir bant.

   ÇÖZÜM: vinyet rengini TEMAYA BAĞLI değişkene çevir.
     · Koyu temalarda: siyah (mevcut görünüm korunur)
     · Açık temalarda: zeminden türeyen SICAK gölge — siyah değil,
       temanın kendi koyu tonu. Böylece "kirli siyah bant" yerine
       yumuşak bir kenar kararması olur.
   ═══════════════════════════════════════════════════════════════════ */

/* varsayılan (koyu temalar) — mevcut görünüm birebir korunur */
:root{
  --vinyet-koyu:rgba(0,0,0,.55);
  --vinyet-alt:rgba(0,0,0,.5);
  --vinyet-dip:rgba(0,0,0,.6);
}
.vignette{
  background:
    radial-gradient(120% 80% at 50% 42%,transparent 38%,var(--vinyet-koyu) 100%),
    linear-gradient(180deg,var(--vinyet-alt),transparent 22%,transparent 78%,var(--vinyet-dip));
}

/* ── AÇIK TEMALAR: siyah yerine temanın kendi koyu tonu ──────────
   Opaklık da düşürülür; amaç "karartma" değil, kenarları yumuşakça
   toplamak. Değerler WCAG kontrastını etkilemez (dekoratif katman,
   pointer-events:none). */
/* SİYAH DEĞİL, TEMANIN KENDİ KOYU TONU:
   `rgba(0,0,0,.10)` nötr GRİ bir bant bırakıyordu (ölçüldü: toz
   pembede alt şerit gri-sı çıkıyordu, gül tonu görünmüyordu).
   Her açık tema, kendi vurgusunun koyu tonunu kullanır — böylece
   alt kenar "kirli gri" değil, sayfanın renginin derinleşmesi olur. */
[data-theme="light"],
[data-theme="tozpembe"],
[data-theme="bej"]{
  --vignette-op:.5;
  --vignette-alt:transparent;
}
[data-theme="light"]{
  --vinyet-koyu:rgba(70,52,25,.30);
  --vinyet-dip:rgba(110,84,42,.16);
}
[data-theme="tozpembe"]{
  --vinyet-koyu:rgba(150,80,105,.26);
  --vinyet-dip:rgba(176,68,106,.14);
}
[data-theme="bej"]{
  --vinyet-koyu:rgba(122,90,30,.24);
  --vinyet-dip:rgba(140,105,45,.14);
}

/* alt bant: açık temalarda TAMAMEN kalkar (asıl şikâyet buydu).
   Yerine çok hafif bir sıcak gölge kalır ki sayfa "havada" durmasın. */
[data-theme="light"] .vignette,
[data-theme="tozpembe"] .vignette,
[data-theme="bej"] .vignette{
  background:
    radial-gradient(120% 80% at 50% 42%,transparent 52%,var(--vinyet-koyu) 100%),
    linear-gradient(180deg,transparent 0%,transparent 86%,var(--vinyet-dip) 100%);
  /* ÖZGÜLLÜK: main.css'teki `[data-theme="light"] .vignette{opacity:...}`
     kuralı yalnız light için yazılıydı; toz pembe/bej'de opacity hiç
     set edilmiyordu ve varsayılan 1'de kalıyordu — bu yüzden gül/bronz
     ton tam güçte uygulanıp gri bir duman bırakıyordu. Açık temaların
     TAMAMI burada, aynı özgüllükte ele alınır. */
  opacity:.5;
}
/* light zaten kendi kuralına sahip; onu 0.5'te bırak */
[data-theme="light"] .vignette{opacity:.5}