/* ══════════════════════════════════════════════════════════════════════
   POLISH — her sayfada görünen üç kozmetik boşluğun tek dosyada kapatılması
   ──────────────────────────────────────────────────────────────────────
   Kapsam:
     1) Chrome otomatik doldurma (:-webkit-autofill) zemin/metin rengi
     2) Metin seçimi (::selection / ::-moz-selection)
     3) Global scrollbar tabanı (html/body + stillenmemiş taşma kutuları)

   TASARIM KURALI: bu dosya HER sayfada yükleniyor, dolayısıyla hiçbir
   bileşenin görünümünü ele geçirmemeli. Bunun için:
     • Tüm renkler theme-tokens.css'ten besleniyor; sabit hex yalnızca
       token'lardan türetilemeyen iki yerde (autofill opak taban ve seçim
       metni) ve her iki tema için ayrı ayrı tanımlı.
     • Özgüllük bilerek en düşük seviyede tutuldu (`html`, `*`, tip
       seçicileri). Mevcut bileşen kuralları (.selpop, .sb-nav,
       .uk-list.scroll, .uk-modal-body, .uk-tabs, .gift-inv-body,
       .gd-drawer-body, .members-list, .bk-confirm-scroll) hepsi en az bir
       sınıf içerdiği için buradaki kuralları rahatça ezer.
     • `!important` yalnızca autofill bloğunda var — orada tarayıcının UA
       stilini yenmenin başka yolu yok (aşağıda ayrıca açıklandı).

   Yükleme sırası: theme-tokens.css → (bileşen CSS'leri) → polish.css
   ══════════════════════════════════════════════════════════════════════ */

/* ── YEREL TOKEN'LAR ───────────────────────────────────────────────────
   theme-tokens.css'te karşılığı olmayan üç değer burada tanımlanıyor.
   Hepsinin hem koyu (:root) hem açık (body.light-theme) karşılığı var —
   tek temada kalan renk yok. */
:root {
  /* Autofill'in ALTINA konan OPAK taban.
     Neden gerekli: --th-input-bg koyu temada rgba(255,255,255,0.05), yani
     yarı saydam. Saydam bir renkle çizilen inset gölge Chrome'un sarı
     zeminini örtmez, üzerine karışır. Bu yüzden önce opak bir taban, sonra
     onun üstüne gerçek input zemini çiziliyor (iki katmanlı inset gölge).
     Değer, alanların gerçekte üzerinde durduğu yüzeyin opak karşılığı:
     sayfa zemini #1a1a2e + %4 beyaz kart zemini ≈ #232336. */
  --pl-af-base: #232336;
  /* Autofill + odak durumunda ui-kit'in verdiği mor tonu (rgba(var(--uk-ac),.06))
     ile aynı görünümü koruyabilmek için aynı ton ayrı katman olarak eklenir. */
  --pl-af-focus: rgba(147,104,233,0.06);

  /* Seçili metin. Zemin marka moru (--dp-accent), metin ise zemine göre
     seçilen okunur karşıtı. Koyu temada açık lavanta zemin + koyu mürekkep
     → ölçülen kontrast 9.80:1 (zeminin sayfa zeminine göre ayrımı 9.24:1). */
  --pl-sel-bg: var(--dp-accent);
  --pl-sel-fg: #1a1030;

  /* Scrollbar. Marka moru üçlüsü (--gl-ac) üzerinden, iz saydam bırakılıyor
     ki her yüzeyin kendi zemini görünsün. */
  --pl-sb-thumb: rgba(var(--gl-ac), 0.30);
  --pl-sb-thumb-hover: rgba(var(--gl-ac), 0.48);
  --pl-sb-track: transparent;
}

body.light-theme {
  /* Açık temada --th-input-bg zaten opak (#ffffff); taban yine de tanımlı
     olmalı ki iki katmanlı gölge her iki temada aynı kuralla çalışsın. */
  --pl-af-base: #ffffff;
  --pl-af-focus: rgba(109,77,196,0.06);

  /* Açık temada zemin koyu mor (--dp-accent = #6d4dc4), metin beyaz
     → ölçülen kontrast 5.98:1 (zeminin sayfa zeminine göre ayrımı 5.58:1). */
  --pl-sel-bg: var(--dp-accent);
  --pl-sel-fg: #ffffff;

  --pl-sb-thumb: rgba(var(--gl-ac), 0.42);
  --pl-sb-thumb-hover: rgba(var(--gl-ac), 0.62);
  --pl-sb-track: transparent;
}


/* ══════════════════════════════════════════════════════════════════════
   1) CHROME OTOMATİK DOLDURMA
   ──────────────────────────────────────────────────────────────────────
   SORUN: Chrome kayıtlı bir bilgiyi doldurunca alana kendi zeminini
   (açık temada soluk sarı #FAFFBD, koyu temada mavimsi ton) ve kendi metin
   rengini basar. Bu renkler UA stil sayfasında `!important` benzeri bir
   öncelikle uygulanır; sıradan `background-color` bildirimi onları
   yenemez. checkout.ejs ödeme formu ve destek formları (sınıfsız <input>
   kullandıkları için) en görünür etkilenenler.

   ÇÖZÜM — üç katmanlı klasik teknik:
     a) `box-shadow: inset 0 0 0 1000px <renk>` → zemini boyamak yerine
        alanın tamamını kaplayan bir iç gölgeyle ÜSTÜNÜ örter. Gölge,
        background'ın üzerinde çizildiği için UA zeminini gizler.
        İki katman: önce gerçek input zemini, altında opak taban.
        (box-shadow listesinde ilk yazılan üstte çizilir.)
     b) `-webkit-text-fill-color` → UA'nın metin rengini yenen tek özellik;
        `color` autofill durumunda yok sayılır.
     c) `transition: background-color <çok uzun süre>` → gölgeyi
        desteklemeyen/geç uygulayan durumlarda UA zemininin geçişini
        pratikte hiç tamamlanmayacak bir süreye yayan gecikme hilesi;
        böylece sarı renk hiçbir zaman görünür hale gelmez.

   `!important` BURADA ZORUNLU: hem UA stilini yenmek, hem de ui-kit'in
   alan kurallarındaki `background: ... !important` bildirimlerinin
   yanında ayakta kalmak için. Dosyanın geri kalanında kullanılmıyor. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
input:-webkit-autofill:autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:active {
  box-shadow: inset 0 0 0 1000px var(--th-input-bg),
              inset 0 0 0 1000px var(--pl-af-base) !important;
  -webkit-text-fill-color: var(--th-input-text) !important;
  caret-color: var(--th-input-text);
  border-color: var(--th-input-border) !important;
  transition: background-color 100000s ease-in-out 0s,
              color 100000s ease-in-out 0s !important;
}

/* Odaklı autofill: ui-kit'in odak halkası (0 0 0 3px mor) ve mor zemin
   tonu box-shadow ile geldiği için, yukarıdaki !important onları da
   ezerdi. Bu yüzden odak durumunda üçü tek listede birleştiriliyor:
   dış halka + mor ton + input zemini + opak taban. */
input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus {
  box-shadow: 0 0 0 3px rgba(var(--gl-ac), 0.14),
              inset 0 0 0 1000px var(--pl-af-focus),
              inset 0 0 0 1000px var(--th-input-bg),
              inset 0 0 0 1000px var(--pl-af-base) !important;
  border-color: rgba(var(--gl-ac), 0.55) !important;
}

/* Chrome autofill'lenmiş alana kendi yazı tipini/boyutunu da dayatır;
   tek müdahale noktası ::first-line. Alanın kendi tipografisini geri alır. */
input:-webkit-autofill::first-line,
textarea:-webkit-autofill::first-line,
select:-webkit-autofill::first-line {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: var(--th-input-text);
}


/* ══════════════════════════════════════════════════════════════════════
   2) METİN SEÇİMİ
   ──────────────────────────────────────────────────────────────────────
   SORUN: projede ::selection hiç tanımlı değil, dolayısıyla tarayıcının
   varsayılan sistem mavisi kullanılıyor. Mor marka paletinin yanında
   yabancı duruyor ve koyu temada seçilen metin okunaksızlaşabiliyor
   (varsayılan mavi zemin + beyaz metin, koyu yüzeyde düşük ayrım).

   ÇÖZÜM: zemin marka moru (--dp-accent), metin ise o zemine göre WCAG
   4.5:1'i geçen karşıt renk. Değerler ölçülerek seçildi:
     koyu tema  → #c9b3ff zemin + #1a1030 metin = 9.80:1
     açık tema  → #6d4dc4 zemin + #ffffff metin = 5.98:1
   Zemin OPAK bırakıldı: yarı saydam bir seçim rengiyle kontrast, altındaki
   yüzeye göre değişeceği için garanti edilemezdi.

   ::selection ve ::-moz-selection AYRI kurallar olmak zorunda — tek bir
   seçici listesinde birleştirilirse, tanımadığı seçiciyi gören tarayıcı
   kuralın tamamını atar. */
::selection {
  background: var(--pl-sel-bg);
  color: var(--pl-sel-fg);
  /* Gölgeli başlıklarda seçili metnin okunurluğunu bozan text-shadow'u
     seçim süresince kaldır. */
  text-shadow: none;
}
::-moz-selection {
  background: var(--pl-sel-bg);
  color: var(--pl-sel-fg);
  text-shadow: none;
}


/* ══════════════════════════════════════════════════════════════════════
   3) GLOBAL SCROLLBAR TABANI
   ──────────────────────────────────────────────────────────────────────
   SORUN: özel scrollbar yalnızca beş bileşende tanımlı (sidebar .sb-nav,
   .gift-inv-body, guild-detail panelleri, ui-kit .uk-list.scroll /
   .uk-modal-body, .selpop). Sayfanın ANA scrollbar'ı ve stillenmemiş her
   taşma kutusu hâlâ işletim sisteminin gri çubuğunu gösteriyor.

   CHROMIUM ÖNCELİK KURALI (ölçüldü, Chromium 141):
   Bir öğenin HESAPLANMIŞ `scrollbar-color` değeri `auto` değilse, o öğe
   için ::-webkit-scrollbar* sözde öğeleri TAMAMEN yok sayılır ve standart
   çubuk çizilir. `scrollbar-color` KALITSAL bir özellik olduğundan,
   aşağıdaki `html` bildirimi tüm ağaca iner.
   → Bu yüzden beş bileşenin hepsinin zaten KENDİ `scrollbar-width` +
     `scrollbar-color` bildirimi olması kritik: hepsi standart yoldan
     çiziliyor ve kendi değerleri (daha özgül seçiciyle) buradakini ezip
     görünümünü aynen koruyor. Ölçümle doğrulandı.
   `scrollbar-width` ise KALITSAL DEĞİL; bu yüzden ince çubuğu her taşma
   kutusuna ulaştırmak için `*` gerekiyor. Özgüllüğü 0 olduğundan
   .uk-tabs'ın `scrollbar-width: none`'ı gibi mevcut bildirimlerin hepsi
   bunu ezer; ayrıca yalnızca gerçekten kaydırılabilen öğelerde bir etkisi
   olur.

   BİLİNEN TEK DAVRANIŞ DEĞİŞİKLİĞİ: rtl-overrides.css'teki
   `body.dir-rtl ::-webkit-scrollbar { width: 6px }` yalnızca sözde öğeyle
   yazıldığı için yukarıdaki kuralın etki alanına girer; RTL modunda
   stillenmemiş kutular artık 6px OS grisi yerine 10px ince marka çubuğu
   gösterir — yani LTR ile aynı görünüm. Renk zaten tanımlı olmadığından
   kayıp bir tasarım kararı yok. Beş bileşenin hiçbiri etkilenmiyor. */
html {
  scrollbar-color: var(--pl-sb-thumb) var(--pl-sb-track);
}
* {
  scrollbar-width: thin;
}

/* WebKit yedeği: standart özellikleri desteklemeyen tarayıcılar (Safari ve
   eski Chromium) için aynı görünümün sözde öğe karşılığı. Modern
   Chromium'da yukarıdaki standart bildirimler kazandığı için bu blok
   etkisiz kalır — iki yol da aynı sonucu ürettiğinden fark edilmez.
   Özgüllük 0: kendi ::-webkit-scrollbar kuralı olan her bileşen bunu ezer. */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--pl-sb-track);
}
::-webkit-scrollbar-thumb {
  background: var(--pl-sb-thumb);
  border-radius: 10px;
  /* Saydam kenarlık + content-box kırpma → başparmak izin içinde daha ince
     görünür, sidebar'daki ince çubuk diliyle uyumlu kalır. */
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--pl-sb-thumb-hover);
  background-clip: content-box;
}
/* Yatay + dikey çubuğun kesiştiği köşe kutusu; boyanmazsa OS grisi kalır. */
::-webkit-scrollbar-corner {
  background: var(--pl-sb-track);
}