/* ══════════════════════════════════════════════════════════════════════
   CONTROLS — native form kontrollerinin tema uyumlu görünümü (2026-09)

   NEDEN: Dashboard genelinde 129 checkbox, 9 radio, 10 range, 26 dosya
   seçici, 158 number, 5 search ve 30 textarea var. Bunların çoğu hiçbir
   sınıf almıyor; tarayıcının kendi çizdiği widget'lar (mavi Chromium
   onay kutusu, gri ray, OS resize tutamağı, number ok tuşları) tema
   sözlüğünün tamamen dışında kalıyordu. Açık/koyu tema arasında geçince
   bu parçalar hiç değişmiyor, bazıları açık temada neredeyse görünmez
   oluyordu.

   YAKLAŞIM: markup'a dokunmadan, yalnızca `appearance: none` + arka plan
   katmanlarıyla kontrolleri yeniden çiziyoruz. Tüm renkler
   theme-tokens.css / ui-kit.css token'larından (--th-*, --dp-*, --uk-ac)
   türetilir; sabit hex yalnızca SVG data-URI'lerin içinde geçer (url()
   içine custom property enterpolasyonu mümkün değil) ve her biri koyu +
   açık tema için AYRI tanımlıdır.

   ── DIŞARIDA BIRAKILANLAR ────────────────────────────────────────────
   Bazı checkbox'lar zaten görsel olarak değiştirilmiş durumda; onlara
   dokunmuyoruz, aksi hâlde mevcut tasarımları bozulur:
     .form-check-input   → layout-head.ejs enable/disable.webp görselleri
     .sr-only            → ekran okuyucu için gizlenen kutular
     .uk-switch input    → ui-kit anahtarı (opacity:0, %100 kapsayan)
     .aa-sw input        → guild-detail ayar anahtarı
     .switch input,
     .switch-toggle input→ sistem/log sayfalarındaki anahtarlar

   ── ÖZGÜLLÜK STRATEJİSİ (kritik) ─────────────────────────────────────
   Yükleme sırası: theme-tokens → ui-kit → controls(bu dosya) → sayfa
   şablonu (guild-detail.css, sayfa içi <style>). Yani bizden SONRA
   yüklenen dosyaları yenmek için özgüllük gerekiyor. İki ayrı seçici
   ailesi kullanılıyor:

   1) BOYUT ailesi — `:not(:where(...))` ile yazılır. `:where()` özgüllük
      katmaz, dolayısıyla seçici tam olarak `input[type=…]` kadar (0,1,1)
      kalır. Böylece kendi ölçüsünü veren mevcut kapsamlar
      (`[id^="settings"] input[type="checkbox"]{18px}` gibi) bizi ezmeye
      devam eder — mevcut görünüm korunur.

   2) GÖRÜNÜM ailesi — gerçek `:not(.sınıf)` zincirleriyle (0,3,1) veya
      üzerine çıkar. Gerekçe: ui-kit'teki
      `.uk-field input:focus { background: … !important }` (0,2,1) kuralı
      checkbox'ları da kapsıyor ve odaklanınca dolgumuzu yarı saydam mora
      çeviriyordu. !important + daha yüksek özgüllükle yeniyoruz.

   3) `#system-config-body` / `#settings-panel-body` blokları — id içeren
      seçiciler. guild-detail.css bu dosyadan SONRA yüklendiği için
      oradaki `#system-config-body input[type="checkbox"] {…}` ve
      `#system-config-body input:focus { … !important }` kuralları sınıf
      tabanlı hiçbir seçiciyle yenilemez; o kapsamlar ayrıca yazıldı.
   ══════════════════════════════════════════════════════════════════════ */

/* ── TOKEN'LAR ─────────────────────────────────────────────────────────
   Her token açık temada da yeniden tanımlıdır (aşağıdaki
   `body.light-theme` bloğu); hiçbir rengin tek tanımı koyu temada
   kalmıyor. Vurgu rengi ui-kit'in rgb üçlüsünden gelir. */
:root {
  --ctl-size: 16px;                                  /* checkbox/radio kenarı — mevcut 16px ile birebir */
  --ctl-radius: 5px;                                 /* yumuşak köşe */
  --ctl-bg: rgba(255,255,255,0.07);                  /* boş kutu zemini (saydam DEĞİL) */
  --ctl-border: rgba(255,255,255,0.34);              /* koyu zeminde net görünen kenarlık */
  --ctl-border-hover: rgba(var(--uk-ac, 147,104,233), 0.75);
  --ctl-on-bg: rgb(var(--uk-ac, 147,104,233));       /* işaretli dolgu (mor) */
  --ctl-on-border: rgb(var(--uk-ac, 147,104,233));
  --ctl-on-shadow: 0 1px 4px rgba(var(--uk-ac, 147,104,233), 0.45);
  --ctl-ring: rgba(var(--uk-ac, 147,104,233), 0.55); /* :focus-visible halkası */
  --ctl-disabled-bg: rgba(255,255,255,0.04);
  --ctl-disabled-border: rgba(255,255,255,0.18);
  /* Range */
  --ctl-rail: 14px;                                  /* Chromium'da ray = tutamak yüksekliği (bkz. §2 notu) */
  --ctl-track: rgba(255,255,255,0.18);               /* boş ray */
  --ctl-fill: rgb(var(--uk-ac, 147,104,233));        /* dolu kısım */
  --ctl-thumb: #ffffff;                              /* tutamak yüzeyi */
  --ctl-thumb-ring: rgb(var(--uk-ac, 147,104,233));  /* tutamak kenarlığı */
  --ctl-thumb-shadow: 0 1px 4px rgba(0,0,0,0.45);
  /* Dosya seçici */
  --ctl-file-text: var(--dp-t6, rgba(255,255,255,0.6));   /* "Dosya seçilmedi" metni */
  --ctl-file-btn-bg: rgba(var(--uk-ac, 147,104,233), 0.18);
  --ctl-file-btn-bg-hover: rgba(var(--uk-ac, 147,104,233), 0.30);
  --ctl-file-btn-border: rgba(var(--uk-ac, 147,104,233), 0.42);
  --ctl-file-btn-text: var(--uk-accent-text, #e9e2ff);
  /* Textarea tutamağı */
  --ctl-resizer: rgba(255,255,255,0.32);
  /* SVG data-URI'ler — url() içine değişken yazılamadığı için renk
     gömülü; açık tema karşılıkları aşağıda ayrıca tanımlı. */
  --ctl-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round' d='M3.6 8.5 6.4 11.4 12.4 4.9'/%3E%3C/svg%3E");
  --ctl-dot: radial-gradient(circle at 50% 50%, #ffffff 0 33%, transparent 34%);
  --ctl-clear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' d='M4.5 4.5 11.5 11.5M11.5 4.5 4.5 11.5'/%3E%3C/svg%3E");
}
body.light-theme {
  --ctl-bg: #ffffff;
  --ctl-border: rgba(15,23,42,0.34);                 /* açık zeminde de kenarlık net */
  --ctl-border-hover: rgba(var(--uk-ac, 147,104,233), 0.85);
  --ctl-on-bg: #6d4dc4;                              /* açık temada daha koyu mor → beyaz tik okunur */
  --ctl-on-border: #6d4dc4;
  --ctl-on-shadow: 0 1px 3px rgba(109,77,196,0.35);
  --ctl-ring: rgba(109,77,196,0.45);
  --ctl-disabled-bg: rgba(100,116,139,0.12);
  --ctl-disabled-border: rgba(15,23,42,0.18);
  --ctl-rail: 14px;
  --ctl-track: rgba(100,116,139,0.32);
  --ctl-fill: #6d4dc4;
  --ctl-thumb: #ffffff;
  --ctl-thumb-ring: #6d4dc4;
  --ctl-thumb-shadow: 0 1px 4px rgba(30,41,59,0.28);
  --ctl-file-text: var(--dp-t6, rgba(30,41,59,0.68));
  --ctl-file-btn-bg: rgba(109,77,196,0.12);
  --ctl-file-btn-bg-hover: rgba(109,77,196,0.20);
  --ctl-file-btn-border: rgba(109,77,196,0.34);
  --ctl-file-btn-text: #4c2fb3;
  --ctl-resizer: rgba(30,41,59,0.34);
  /* Tik her iki temada da mor dolgu üzerinde durduğu için beyaz kalır;
     yine de token açık temada ayrıca tanımlı (tek tanım koyuda kalmasın). */
  --ctl-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round' d='M3.6 8.5 6.4 11.4 12.4 4.9'/%3E%3C/svg%3E");
  --ctl-dot: radial-gradient(circle at 50% 50%, #ffffff 0 33%, transparent 34%);
  /* Search ✕ — açık temada koyu çizgi */
  --ctl-clear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%231e293b' stroke-width='2' stroke-linecap='round' d='M4.5 4.5 11.5 11.5M11.5 4.5 4.5 11.5'/%3E%3C/svg%3E");
}

/* ═══ 1) CHECKBOX & RADIO ══════════════════════════════════════════════ */

/* 1a) BOYUT — özgüllük bilinçli olarak (0,1,1)'de tutuldu (bkz. üst not).
   `:where()` sıfır özgüllük kattığı için kendi ölçüsünü veren mevcut
   kapsamlar bizi ezmeye devam eder. */
input[type="checkbox"]:not(:where(.form-check-input, .sr-only, .uk-switch input, .aa-sw input, .switch input, .switch-toggle input)),
input[type="radio"]:not(:where(.form-check-input, .sr-only, .uk-switch input, .aa-sw input, .switch input, .switch-toggle input)) {
  width: var(--ctl-size);
  height: var(--ctl-size);
  flex-shrink: 0;
  vertical-align: middle;
}

/* 1b) GÖRÜNÜM — (0,3,1); ui-kit'in `.uk-field input:focus{…!important}`
   kuralını yenmek için kritik renk bildirimleri !important. */
input[type="checkbox"]:not(.form-check-input):not(.sr-only):not(:where(.uk-switch input, .aa-sw input, .switch input, .switch-toggle input)),
input[type="radio"]:not(.form-check-input):not(.sr-only):not(:where(.uk-switch input, .aa-sw input, .switch input, .switch-toggle input)) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  box-sizing: border-box;
  padding: 0;
  position: relative;
  cursor: pointer;
  background-color: var(--ctl-bg) !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  background-image: none;
  border: 1.5px solid var(--ctl-border) !important;
  border-radius: var(--ctl-radius);
  box-shadow: none;
  transition: background-color .14s ease, border-color .14s ease, box-shadow .14s ease;
}
/* Radyo → daire; tik yerine nokta */
input[type="radio"]:not(.form-check-input):not(.sr-only):not(:where(.uk-switch input, .aa-sw input, .switch input, .switch-toggle input)) {
  border-radius: 50%;
}

/* Fare üzerinde — pasif kontrolde tepki yok */
input[type="checkbox"]:not(.form-check-input):not(.sr-only):not(:where(.uk-switch input, .aa-sw input, .switch input, .switch-toggle input)):hover:not(:disabled),
input[type="radio"]:not(.form-check-input):not(.sr-only):not(:where(.uk-switch input, .aa-sw input, .switch input, .switch-toggle input)):hover:not(:disabled) {
  border-color: var(--ctl-border-hover) !important;
}

/* İşaretli / belirsiz — mor dolgu */
input[type="checkbox"]:not(.form-check-input):not(.sr-only):not(:where(.uk-switch input, .aa-sw input, .switch input, .switch-toggle input)):checked,
input[type="checkbox"]:not(.form-check-input):not(.sr-only):not(:where(.uk-switch input, .aa-sw input, .switch input, .switch-toggle input)):indeterminate,
input[type="radio"]:not(.form-check-input):not(.sr-only):not(:where(.uk-switch input, .aa-sw input, .switch input, .switch-toggle input)):checked {
  background-color: var(--ctl-on-bg) !important;
  border-color: var(--ctl-on-border) !important;
  box-shadow: var(--ctl-on-shadow);
}
/* Onay işareti: SVG data-URI ile çizilmiş vektör (ikon fontu YOK —
   Font Awesome yüklenmese bile kontrol doğru görünür). */
input[type="checkbox"]:not(.form-check-input):not(.sr-only):not(:where(.uk-switch input, .aa-sw input, .switch input, .switch-toggle input)):checked {
  background-image: var(--ctl-check);
}
/* Belirsiz (indeterminate) durum: ortada yatay çizgi — saf CSS gradyan */
input[type="checkbox"]:not(.form-check-input):not(.sr-only):not(:where(.uk-switch input, .aa-sw input, .switch input, .switch-toggle input)):indeterminate {
  background-image: linear-gradient(#ffffff, #ffffff);
  background-size: 56% 2px;
}
/* Radyo noktası — radial-gradient, yine saf CSS */
input[type="radio"]:not(.form-check-input):not(.sr-only):not(:where(.uk-switch input, .aa-sw input, .switch input, .switch-toggle input)):checked {
  background-image: var(--ctl-dot);
}

/* Klavye odağı — fare tıklamasında halka çıkmaz */
input[type="checkbox"]:not(.form-check-input):not(.sr-only):not(:where(.uk-switch input, .aa-sw input, .switch input, .switch-toggle input)):focus-visible,
input[type="radio"]:not(.form-check-input):not(.sr-only):not(:where(.uk-switch input, .aa-sw input, .switch input, .switch-toggle input)):focus-visible {
  outline: 2px solid var(--ctl-ring);
  outline-offset: 2px;
}

/* Pasif */
input[type="checkbox"]:not(.form-check-input):not(.sr-only):not(:where(.uk-switch input, .aa-sw input, .switch input, .switch-toggle input)):disabled,
input[type="radio"]:not(.form-check-input):not(.sr-only):not(:where(.uk-switch input, .aa-sw input, .switch input, .switch-toggle input)):disabled {
  cursor: not-allowed;
  opacity: .55;
  background-color: var(--ctl-disabled-bg) !important;
  border-color: var(--ctl-disabled-border) !important;
  box-shadow: none;
}
/* Pasif + işaretli: dolgu kalsın ama sönük olsun (yalnızca opaklıkla) */
input[type="checkbox"]:not(.form-check-input):not(.sr-only):not(:where(.uk-switch input, .aa-sw input, .switch input, .switch-toggle input)):disabled:checked,
input[type="checkbox"]:not(.form-check-input):not(.sr-only):not(:where(.uk-switch input, .aa-sw input, .switch input, .switch-toggle input)):disabled:indeterminate,
input[type="radio"]:not(.form-check-input):not(.sr-only):not(:where(.uk-switch input, .aa-sw input, .switch input, .switch-toggle input)):disabled:checked {
  background-color: var(--ctl-on-bg) !important;
  border-color: var(--ctl-on-border) !important;
}

/* 1c) ID KAPSAMLARI — guild-detail.css ve dashboard.ejs içi <style> bu
   dosyadan SONRA yükleniyor; oradaki id'li kurallar (accent-color, ölçü,
   `#system-config-body input:focus { … !important }`) sınıf tabanlı
   seçicilerle yenilemez. Görünümün bu iki büyük kapsamda da birebir aynı
   olması için kurallar id ile tekrarlanıyor. */
#system-config-body input[type="checkbox"]:not(.form-check-input):not(:where(.aa-sw input, .switch input)),
#system-config-body input[type="radio"]:not(.form-check-input),
#settings-panel-body input[type="checkbox"]:not(.form-check-input):not(:where(.uk-switch input, .switch input)),
#settings-panel-body input[type="radio"]:not(.form-check-input) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  background-color: var(--ctl-bg) !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  border: 1.5px solid var(--ctl-border) !important;
  border-radius: var(--ctl-radius) !important;
  box-shadow: none !important;
}
#system-config-body input[type="radio"]:not(.form-check-input),
#settings-panel-body input[type="radio"]:not(.form-check-input) { border-radius: 50% !important; }

#system-config-body input[type="checkbox"]:not(.form-check-input):not(:where(.aa-sw input, .switch input)):checked,
#system-config-body input[type="checkbox"]:not(.form-check-input):not(:where(.aa-sw input, .switch input)):indeterminate,
#system-config-body input[type="radio"]:not(.form-check-input):checked,
#settings-panel-body input[type="checkbox"]:not(.form-check-input):not(:where(.uk-switch input, .switch input)):checked,
#settings-panel-body input[type="checkbox"]:not(.form-check-input):not(:where(.uk-switch input, .switch input)):indeterminate,
#settings-panel-body input[type="radio"]:not(.form-check-input):checked {
  background-color: var(--ctl-on-bg) !important;
  border-color: var(--ctl-on-border) !important;
}
#system-config-body input[type="checkbox"]:not(.form-check-input):not(:where(.aa-sw input, .switch input)):checked,
#settings-panel-body input[type="checkbox"]:not(.form-check-input):not(:where(.uk-switch input, .switch input)):checked {
  background-image: var(--ctl-check);
}
#system-config-body input[type="checkbox"]:not(.form-check-input):not(:where(.aa-sw input, .switch input)):indeterminate,
#settings-panel-body input[type="checkbox"]:not(.form-check-input):not(:where(.uk-switch input, .switch input)):indeterminate {
  background-image: linear-gradient(#ffffff, #ffffff);
  background-size: 56% 2px;
}
#system-config-body input[type="radio"]:not(.form-check-input):checked,
#settings-panel-body input[type="radio"]:not(.form-check-input):checked {
  background-image: var(--ctl-dot);
}
#system-config-body input[type="checkbox"]:disabled,
#system-config-body input[type="radio"]:disabled,
#settings-panel-body input[type="checkbox"]:disabled,
#settings-panel-body input[type="radio"]:disabled { opacity: .55; cursor: not-allowed; }

/* ═══ 2) RANGE ═════════════════════════════════════════════════════════
   Ray + tutamak tamamen yeniden çizilir. `appearance:none` verildiği anda
   `accent-color` devre dışı kalır, bu yüzden dolu kısım da bizim
   sorumluluğumuz:
     • Firefox: `::-moz-range-progress` doluluğu natif olarak verir.
     • Chromium/WebKit: doluluk için "kırpılan gölge" tekniği kullanılır —
       tutamağa çok geniş yayılımlı bir sol box-shadow verilir, ray
       `overflow:hidden` ile bu gölgeyi kendi kutusuna kırpar.
       SINIR: Chromium tutamağı da rayın içine kırpıyor (test edildi:
       6px ray + 16px tutamak → tutamak yassı bir dikdörtgene dönüşüyor).
       Bu yüzden ray ve tutamak AYNI yükseklikte (14px) tutuldu; sonuç
       ince bir "tüp" ray + içinde beyaz halkalı tutamak. Doluluk da
       tam olarak ray yüksekliğinde olduğundan dolu/boş kısımlar
       birbiriyle hizalı görünür (farklı yükseklikte iki bant sorunu
       böyle çözüldü). Firefox'ta bu sınır yok, orada klasik 6px ray
       kullanılıyor. */
input[type="range"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* width BİLEREK verilmiyor: 10 range'in bir kısmı satır içi/esnek
     düzenlerde duruyor, genel `width:100%` mevcut yerleşimi kaydırırdı.
     Genişliği veren kapsamlar (#system-config-body, sayfa içi stiller)
     kendi değerlerini kullanmaya devam eder. */
  height: var(--ctl-size);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
input[type="range"]:disabled { cursor: not-allowed; opacity: .5; }

/* — WebKit / Chromium — */
input[type="range"]::-webkit-slider-runnable-track {
  height: var(--ctl-rail);
  border: 0;
  border-radius: 999px;
  overflow: hidden;                       /* dolgu gölgesini ray kutusuna kırpar */
  background: var(--ctl-track);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--ctl-rail);
  height: var(--ctl-rail);
  border-radius: 50%;
  background: var(--ctl-thumb);
  border: 3.5px solid var(--ctl-thumb-ring);
  box-sizing: border-box;
  /* Soldaki dolu kısım: geniş yayılımlı gölge, ray tarafından kırpılır */
  box-shadow: -1000px 0 0 993px var(--ctl-fill);
  cursor: pointer;
}
input[type="range"]:disabled::-webkit-slider-thumb {
  border-color: var(--ctl-disabled-border);
  box-shadow: -1000px 0 0 993px var(--ctl-track);
}

/* — Firefox — */
input[type="range"]::-moz-range-track {
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: var(--ctl-track);
}
input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--ctl-fill);
}
input[type="range"]::-moz-range-thumb {
  width: var(--ctl-size);
  height: var(--ctl-size);
  border-radius: 50%;
  background: var(--ctl-thumb);
  border: 3px solid var(--ctl-thumb-ring);
  box-sizing: border-box;
  box-shadow: var(--ctl-thumb-shadow);
  cursor: pointer;
}
input[type="range"]:disabled::-moz-range-progress { background: var(--ctl-track); }
input[type="range"]:disabled::-moz-range-thumb { border-color: var(--ctl-disabled-border); }

/* Klavye odağı */
input[type="range"]:focus { outline: none; }
input[type="range"]:focus-visible {
  outline: 2px solid var(--ctl-ring);
  outline-offset: 3px;
  border-radius: 999px;
}

/* id kapsamı: guild-detail.css `#system-config-body input[type="range"]`
   yalnızca accent-color + width veriyor; appearance:none verdiğimiz için
   accent-color etkisiz kalır, ölçü de aynı — ek kural gerekmiyor.
   Yine de odak halkasını ezen `#system-config-body input:focus{…!important}`
   box-shadow bıraktığı için burada outline kullanıldı (o kural outline'a
   dokunmuyor). */

/* ═══ 3) DOSYA SEÇİCİ ══════════════════════════════════════════════════
   NOT: Butonun yanındaki "Dosya seçilmedi / No file chosen" metnini
   tarayıcı üretir; DOM'da karşılığı yok, gizlenemez veya çevrilemez.
   Yapabileceğimiz tek şey rengini tema ile uyumlu hâle getirmek — bu da
   input'un `color` değeriyle olur. */
input[type="file"] {
  color: var(--ctl-file-text);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
input[type="file"]::file-selector-button {
  margin: 0 10px 0 0;
  padding: 6px 12px;
  border-radius: 9px;
  border: 1px solid var(--ctl-file-btn-border);
  background: var(--ctl-file-btn-bg);
  color: var(--ctl-file-btn-text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
input[type="file"]:hover:not(:disabled)::file-selector-button {
  background: var(--ctl-file-btn-bg-hover);
  border-color: var(--ctl-border-hover);
}
input[type="file"]:focus-visible {
  outline: 2px solid var(--ctl-ring);
  outline-offset: 2px;
}
input[type="file"]:disabled { cursor: not-allowed; opacity: .55; }
input[type="file"]:disabled::file-selector-button { cursor: not-allowed; }
/* id kapsamı: guild-detail.css `#system-config-body input[type="file"]`
   metin rengini !important ile veriyor (zaten temalı) — ona karışmıyoruz;
   buton kısmı pseudo-element olduğu için o kuraldan etkilenmiyor. */

/* ═══ 4) NUMBER — OK TUŞLARI ═══════════════════════════════════════════
   Şimdiye kadar yalnızca layout-head ve `#system-config-body` içinde
   gizliydi; 158 number alanının bir kısmında hâlâ natif oklar görünüyordu.
   Artık genel: oklar her yerde gizli, alan sade metin kutusu gibi. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ═══ 5) SEARCH — TEMİZLE (✕) BUTONU ═══════════════════════════════════
   Chromium'un natif ✕'i sabit gri bir OS grafiği; koyu temada neredeyse
   görünmüyor. `appearance:none` ile kaldırılıp yerine temaya göre iki
   renkli SVG data-URI konuyor. (Firefox natif temizle butonu çizmez;
   orada bu kurallar sessizce yok sayılır.) */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}
input[type="search"]::-webkit-search-cancel-button {
  display: block;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  border-radius: 50%;
  cursor: pointer;
  background: var(--ctl-clear) center / 11px 11px no-repeat;
  opacity: .55;
  transition: opacity .14s ease, background-color .14s ease;
}
input[type="search"]:hover::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-cancel-button:hover {
  opacity: 1;
  background-color: var(--ctl-file-btn-bg);
}

/* ═══ 6) TEXTAREA ══════════════════════════════════════════════════════
   Özgüllük düşük tutuldu: `.uk-textarea` / `#system-config-body textarea`
   zaten `resize: vertical` veriyor, onları ezmeye gerek yok — bu kural
   yalnızca hiç kural almamış textarea'ları yakalar. */
textarea {
  resize: vertical;
}
/* Tutamak. SINIR: `::-webkit-resizer` yalnızca Chromium'da ve yalnızca
   birkaç özelliği (background, border-radius) kabul eder; içindeki
   diyagonal çizgileri tarayıcı çizmez, bu yüzden şeritleri kendimiz
   repeating-linear-gradient ile çiziyoruz. Firefox'ta bu pseudo-element
   HİÇ yok — orada tutamak OS grafiği olarak kalır ve tema ile
   renklendirilemez (bilinen ve kaçınılmaz sınır). */
textarea::-webkit-resizer {
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 2px,
      var(--ctl-resizer) 2px 3px,
      transparent 3px 5px
    );
  border-radius: 0 0 var(--ctl-radius) 0;
}

/* ═══ 7) HAREKET AZALTMA ═══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  input[type="checkbox"],
  input[type="radio"],
  input[type="range"],
  input[type="range"]::-webkit-slider-thumb,
  input[type="file"]::file-selector-button,
  input[type="search"]::-webkit-search-cancel-button {
    transition: none !important;
  }
}