/* Kisa Link -- kurum ici URL kisaltma servisi.
   Copyright (C) 2026 Arda Seçilmiş
   AGPLv3 ile lisanslidir; tam metin LICENSE dosyasinda. */

/* TIM Kisa Link v2 - temel stil.
   Tema degiskenleri burada tek yerde tanimli.

   UC DURUM VAR:
     data-tema yok      -> isletim sistemi tercihi (varsayilan)
     data-tema="acik"   -> sistem koyu olsa bile ACIK
     data-tema="koyu"   -> sistem acik olsa bile KOYU

   Nitelik <html> uzerine SUNUCUDA basiliyor (bkz. base.html ve
   internal/httpx/tema.go). JS ile yapilsaydi sayfa bir an yanlis renkte
   cizilirdi.

   ##########################################################################
   KOYU PALET ASAGIDA IKI KEZ GECIYOR ve ikisi ayni kalmali: biri sistem
   tercihi icin (medya sorgusu), digeri kullanicinin acik secimi icin.
   CSS'te bir medya sorgusunun icini ve disini tek bir kurala baglamanin
   yolu yok. Yeni bir renk degiskeni eklerken UCUNU birden guncelleyin.
   ########################################################################## */

:root {
  /* color-scheme tarayiciya yerlesik parcalari da hangi temada cizecegini
     soyluyor: kaydirma cubugu, <select> acilir listesi, tarih secici. Bu
     olmadan koyu temada acilir listeler beyaz kaliyordu. */
  color-scheme: light;
  --bg: #f4f6f9;
  --surface: #ffffff;
  --text: #16202e;
  --text-muted: #5b6b80;
  --border: #dde3ea;
  --accent: #0b3d69;
  --radius: 10px;
  --uyari-zemin: #fdeced;
  --uyari-kenar: #f3c2c6;
  --uyari-metin: #8c1d26;
  --bilgi-zemin: #e8f4ec;
  --bilgi-kenar: #b7ddc6;
  --bilgi-metin: #1c6b3f;
  --bekleyen-zemin: #fff8e6;
  --bekleyen-kenar: #ecd9a3;
}

/* 1) Sistem koyu -- AMA kullanici acikca "acik" secmemisse.
      :not([data-tema="acik"]) olmadan, acik temayi seceni sistem yine koyuya
      cekerdi ve dugme "calismiyor" gorunurdu. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) {
    color-scheme: dark;
    --bg: #10151c;
    --surface: #18202b;
    --text: #e8edf3;
    --text-muted: #94a3b5;
    --border: #2a3543;
    --accent: #5fa8e0;
    --uyari-zemin: #3b1d20;
    --uyari-kenar: #6b2f34;
    --uyari-metin: #f5b8bd;
    --bilgi-zemin: #16301f;
    --bilgi-kenar: #2c5a3c;
    --bilgi-metin: #a8dcbc;
    --bekleyen-zemin: #2a2415;
    --bekleyen-kenar: #55482a;
  }
}

/* 2) Kullanici acikca "koyu" sectiyse, sistem ne derse desin.
      Yukaridaki blokla AYNI degerler; birini degistirirken otekini de
      degistirin. */
:root[data-tema="koyu"] {
  color-scheme: dark;
  --bg: #10151c;
  --surface: #18202b;
  --text: #e8edf3;
  --text-muted: #94a3b5;
  --border: #2a3543;
  --accent: #5fa8e0;
  --uyari-zemin: #3b1d20;
  --uyari-kenar: #6b2f34;
  --uyari-metin: #f5b8bd;
  --bilgi-zemin: #16301f;
  --bilgi-kenar: #2c5a3c;
  --bilgi-metin: #a8dcbc;
  --bekleyen-zemin: #2a2415;
  --bekleyen-kenar: #55482a;
}

/* ##########################################################################
   Kaydırma çubuğu yeri HER SAYFADA ayrılıyor.

   Kısa sayfalarda (Kullanıcılar 514 px) çubuk çıkmıyor, uzun sayfalarda
   (Alan adları 846, Sağlık 1769, Linkler 6219) çıkıyor. Çubuk 15 px yer
   kapladığı için ortalanmış içerik sayfa değiştikçe kayıyordu: ölçüldü,
   kartın sol kenarı Kullanıcılar'da 305 px, diğerlerinde 298 px.

   Menüden Kullanıcılar'a geçen kişi bütün düzenin 7 px yana sıçradığını
   görüyordu. scrollbar-gutter yeri daima ayırıyor, sıçrama kalkıyor.

   Desteklemeyen tarayıcıda (eski Safari) yok sayılır: davranış bugünküyle
   aynı kalır, kötüleşmez.
   ########################################################################## */
html {
  scrollbar-gutter: stable;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 2rem 1rem;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

.page {
  max-width: 42rem;
  margin: 0 auto;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
}

h1 {
  margin: 0 0 0.25rem;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}

.tag {
  display: inline-block;
  vertical-align: middle;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--surface);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.lead {
  margin: 0 0 1.5rem;
  color: var(--text-muted);
}

.facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1rem;
  margin: 0 0 1.5rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
}

.facts dt {
  color: var(--text-muted);
}

.facts dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.muted {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* --- Ust bar --------------------------------------------------------- */

.ustbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  margin: -2rem -1rem 2rem;
  padding: 0 1rem;
}

.ustbar__ic {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  max-width: 42rem;
  margin: 0 auto;
  min-height: 3.25rem;
  padding: 0.4rem 0;
}

/* Üst bar, sayfadaki kartla aynı genişlikte olmalı. Geniş sayfalar
   (.card--genis) 60rem kullanıyor; üst bar 42rem'de kalınca marka ve
   "Çıkış" kartın kenarlarıyla hizalanmıyordu. Üst bar .page'in DIŞINDA
   olduğu için :has kontrolü body üzerinden yapılıyor. */
body:has(.card--genis) .ustbar__ic {
  max-width: 60rem;
}

/* ##########################################################################
   Marka: logo MASKE olarak kullaniliyor, <img> olarak degil.

   Dosya saydam zeminli BEYAZ bir logo. <img> ile konsaydi acik temada
   beyaz ust barin (--surface: #ffffff) uzerinde tumuyle gorunmez olurdu.

   Maske sekli alfa kanalindan aliyor ve rengi background-color veriyor,
   yani logonun kendi rengi hic onemli degil: acik temada koyu, koyu temada
   acik ciziliyor. Tek dosya iki temaya yetiyor.

   Metin DOM'da birakiliyor ve text-indent ile disari itiliyor: CSS
   yuklenmezse ya da maske desteklenmezse marka adi yazi olarak gorunur.

   Olculer 2500x754'ten (oran 3,32:1) turetildi.

   BOYUT: 104x31 px'te logonun alt satirlari ("TÜRKİYE İHRACATÇILAR
   MECLİSİ") satir basina ~3 px dusuyordu ve bulaniyordu -- 2500 px'lik
   kaynak 24 kat kucultuluyor. Karsilastirildi: 133 px belirgin daha iyi,
   166 px net.

   133x40 secildi. Bedeli olculdu: ust bar 82 -> 89 px (uzun goruntu
   adiyla zaten iki satira sariyor, logo birinci satiri 7 px uzatti).
   166 px daha net olurdu ama bari daha da uzatirdi.

   Asil cozum daha buyuk logo DEGIL, ust bar icin alt yazisi olmayan bir
   "TIM" markasi olurdu: tam kilit bu boyutta okunmak icin tasarlanmamis.

   ARA SAYFA da ayni kurala bagli (.ara-marka). Iki ayri blok yazilsaydi
   biri degistirilip oteki unutulurdu; teknik ve tuzak ikisinde de ayni.
   ########################################################################## */
.ustbar__marka,
.ara-marka {
  display: block;
  width: 8.3rem;
  height: 2.5rem;
  background-color: var(--text);
  /* -webkit- oneki eski Safari icin; ikisi de ayni dosyayi gosteriyor. */
  -webkit-mask: url("../img/logo.png") no-repeat center / contain;
  mask: url("../img/logo.png") no-repeat center / contain;
  /* Metni gorsel olarak gizle ama erisilebilir birak. display:none ya da
     visibility:hidden ekran okuyucudan da gizlerdi. */
  text-indent: -200vw;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}

.ustbar__sag {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.875rem;
  /* Uzun bir goruntu adiyla ust bar ikinci satira sarabiliyor; sardiginda
     sola yapismasin diye bosluk buraya. Tek satirda zaten menunun
     margin-right: auto'su isi goruyor, bu onu bozmuyor. */
  margin-left: auto;
}

.ustbar__kullanici {
  color: var(--text-muted);
}

/* --- Tema secimi ---------------------------------------------------------
   Uc durumlu bolmeli dugme. Secili olan cercevesiz degil DOLU: renk korlugu
   olan biri icin de ayirt edilebilir olsun diye yalnizca renkle degil zeminle
   de isaretleniyor. */
.tema-form {
  margin: 0;
}

.tema-secim {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}

.tema-secim button {
  margin: 0;
  /* Dar: ust bar zaten kalabalik (menu tek basina 492 px). Genis olsaydi
     icerik 960 px'lik kabi asip ust bari ikinci satira dusururdu. */
  padding: 0.28rem 0.45rem;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
}

.tema-secim button + button {
  border-left: 1px solid var(--border);
}

.tema-secim button:hover {
  background: var(--bg);
  color: var(--text);
}

.tema-secim button.secili {
  background: var(--accent);
  color: var(--surface);
  font-weight: 600;
}

.rozet {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  /* Dar bir sutunda "DEVRE DIŞI" iki satira bolunup rozet gorunumunu
     bozuyordu; etiket kendi icinde bolunmesin, gerekirse alt satira insin. */
  white-space: nowrap;
}

/* --- Form ------------------------------------------------------------ */

.card--dar {
  max-width: 24rem;
  margin: 3rem auto 0;
}

label {
  display: block;
  margin: 1rem 0 0.3rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 0.55rem 0.7rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
}

input[type="text"]:focus,
input[type="password"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: transparent;
}

button {
  margin-top: 1.25rem;
  padding: 0.6rem 1.1rem;
  background: var(--accent);
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--surface);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

button:hover {
  filter: brightness(1.1);
}

button:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

/* Ust bardaki cikis dugmesi: baglanti gibi gorunsun. */
.btn--baglanti {
  margin: 0;
  padding: 0.2rem 0.1rem;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.875rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.btn--baglanti:hover {
  filter: none;
  opacity: 0.75;
}

.uyari {
  margin: 0 0 0.5rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--uyari-kenar);
  border-radius: 8px;
  background: var(--uyari-zemin);
  color: var(--uyari-metin);
  font-size: 0.875rem;
}

form + .muted {
  margin-top: 1.25rem;
}

/* --- Yonetim tablosu -------------------------------------------------- */

.card--genis {
  max-width: none;
}

.page:has(.card--genis) {
  max-width: 60rem;
}

.bilgi {
  margin: 0 0 0.5rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--bilgi-kenar);
  border-radius: 8px;
  background: var(--bilgi-zemin);
  color: var(--bilgi-metin);
  font-size: 0.875rem;
}

/* Dar ekranda tablo tasmasin, kendi icinde kaysin. */
.tablo-sarmal {
  overflow-x: auto;
}

.tablo {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.tablo th,
.tablo td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.tablo th {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.tablo tbody tr:last-child td {
  border-bottom: none;
}

.satir--bekleyen {
  background: var(--bekleyen-zemin);
}

.kullanici-ad {
  display: block;
  font-weight: 500;
}

.tablo .muted {
  font-size: 0.8rem;
}

.satir-form {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

select {
  padding: 0.35rem 0.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
}

.btn--kucuk {
  margin: 0;
  padding: 0.35rem 0.7rem;
  font-size: 0.85rem;
}

.rozet--uyari {
  border-color: var(--uyari-kenar);
  background: var(--uyari-zemin);
  color: var(--uyari-metin);
}

/* --- Link ve domain formlari ------------------------------------------ */

.kutu-form {
  margin: 0 0 1.5rem;
  padding: 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}

.form-satir {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.alan {
  flex: 1 1 12rem;
  min-width: 0;
}

.alan--genis {
  flex: 2 1 20rem;
}

.alan label {
  margin-top: 0.5rem;
}

.alan input,
.alan select {
  width: 100%;
}

input[type="url"],
input[type="date"],
input[type="search"] {
  width: 100%;
  padding: 0.5rem 0.65rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
}

.onay-satiri {
  margin-top: 0.9rem;
}

.onay {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 400;
}

.onay input {
  width: auto;
  margin: 0;
}

.filtre-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.filtre-form input[type="search"] {
  flex: 1 1 16rem;
}

.filtre-form button {
  margin: 0;
}

.kisa-link {
  display: block;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Uzun hedef adresler tabloyu tasirmasin. */
.hedef-hucre {
  max-width: 18rem;
}

.hedef-hucre a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.85rem;
}

/* Hucreye display:flex VERILMEZ: td'nin tablo hucresi davranisini bozar ve
   alt cizgi o sutunda kesilir. Hizalama metin akisiyla yapiliyor.

   white-space: nowrap DA KULLANILMIYOR. Kullanildiginda hucre uc dugmeyi
   (Duzenle/Kapat/Sil) tek satirda tutmaya calisiyor, tablo kartin disina
   tasiyor ve "Sil" yatay kaydirmanin arkasinda kaliyor -- yani gorunmez bir
   dugme. Olculdu: 1900px genislikte bile gorunmuyordu, cunku kartin kendi
   azami genisligi var. Sarmasina izin vermek dugmeleri iki satira aliyor
   ama hepsi gorunur kaliyor. */
.islem-hucre {
  text-align: right;
}

/* ##########################################################################
   Bu genişlik YALNIZCA link tablosuna ait: orada üç düğme var
   (Düzenle/Kapat/Sil) ve sarmadan tek satıra sığmaları isteniyor.

   Kural `.islem-hucre`ye konduğunda BÜTÜN tablolara uygulanıyordu ve
   kullanıcılar sayfasında en geniş sütun 240 px olup diğerlerini eziyordu:
   ad iki satıra bölünüyor, "Active Directory" kırılıyordu. Ölçüldü.
   ########################################################################## */
.tablo--linkler .islem-hucre {
  min-width: 15rem;
}

.islem-hucre .satir-form {
  display: inline-flex;
  margin-left: 0.35rem;
  /* Sarma durumunda satirlar birbirine yapismasin. */
  margin-top: 0.2rem;
  vertical-align: middle;
}

/* Dugmelerin kendisi bolunmemeli; sarma yalnizca dugmeler ARASINDA olsun. */
.islem-hucre .satir-form button,
.islem-hucre a.btn--kucuk {
  white-space: nowrap;
}

.btn--ikincil {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

.btn--ikincil:hover {
  filter: none;
  border-color: var(--accent);
}

.btn--tehlike {
  background: var(--surface);
  border-color: var(--uyari-kenar);
  color: var(--uyari-metin);
}

.btn--tehlike:hover {
  filter: none;
  background: var(--uyari-zemin);
}

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

code {
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 0.85em;
}

/* --- Denetim kaydi ---------------------------------------------------- */

.zaman-hucre {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Varlık türü ile aynı hücrede ama kendi satırında. */
.denetim-ip {
  display: block;
}

/* Kayit hash'i: satirlari ayirt etmeye yeter, tamami gereksiz yer kaplar. */
.hash-etiket {
  margin-left: 0.4rem;
  color: var(--text-muted);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.75rem;
  opacity: 0.7;
}

details summary {
  cursor: pointer;
  font-size: 0.8rem;
}

.fark {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.fark-baslik {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--text-muted);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.fark pre {
  margin: 0;
  padding: 0.5rem 0.65rem;
  max-width: 18rem;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.4;
}

.uyari ul {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
}

.sayfalama {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.25rem;
  font-size: 0.875rem;
}

/* --- Analitik --------------------------------------------------------- */

.ozet {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.25rem 0;
}

.ozet-kutu {
  flex: 1 1 8rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}

.ozet-sayi {
  display: block;
  font-size: 1.6rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.ozet-etiket {
  display: block;
  margin-top: 0.15rem;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.pencere-secim {
  display: flex;
  gap: 0.5rem;
  margin: 1.25rem 0 0.75rem;
  font-size: 0.85rem;
}

.pencere-secim a {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  text-decoration: none;
}

.pencere-secim a.secili {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 500;
}

/* Grafik saf CSS: birkac bin veri noktasi icin JS kutuphanesi gereksiz. */
/* ##########################################################################
   Bosluk SUTUNUN ICINDE, aralarinda DEGIL.

   Onceden `gap: 2px` + `.grafik-sutun { min-width: 2px }` vardi. Ikisi de
   sabit oldugu icin grafigin asgari genisligi 4N-2 px'e cikiyordu: 365 gun
   secilince 1458 px, esneme bunun altina inemiyor ve tasan grafik SAYFAYI
   yana kaydiriyordu. Olculdu -- 1280 px'de sayfa 384 px, 390 px'de 1121 px
   tasti; 90 gun de dar ekranda tasiyordu.

   Cozum: sutunlar arasi bosluk yok, bosluk cubugun kendi genisliginden
   (%88) geliyor. Yuzde oldugu icin sutun daraldikca bosluk da daraliyor,
   yani grafik hicbir sutun sayisinda kabini asamiyor.
   ########################################################################## */
.grafik {
  display: flex;
  align-items: flex-end;
  gap: 0;
  height: 8rem;
  margin: 0 0 1.5rem;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}

.grafik-sutun {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex: 1 1 0;
  height: 100%;
  /* min-width YOK: sabit bir taban sutunlarin sikismasini engelleyip
     grafigi kabindan tasiriyordu (bkz. yukaridaki not). */
  min-width: 0;
}

.grafik-cubuk {
  /* Kalan %12 sutunlar arasindaki bosluk. Sabit piksel degil yuzde:
     sutun daraldikca bosluk da daraliyor ve grafik tasmiyor. */
  width: 88%;
  /* Oran .oran-N sinifindan geliyor (bkz. dosyanin sonu). Sinif verilmezse
     0 -- min-height yine ince bir cizgi birakiyor, boylece "veri yok" gunu
     de eksende gorunuyor. */
  height: var(--oran, 0%);
  min-height: 1px;
  border-radius: 2px 2px 0 0;
  background: var(--accent);
  opacity: 0.85;
}

.dagilimlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
}

.dagilim h2 {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}

.dagilim-liste {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
}

.dagilim-liste li {
  display: grid;
  grid-template-columns: minmax(0, 7rem) 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0;
}

.dagilim-ad {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dagilim-oran {
  height: 0.45rem;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.dagilim-dolgu {
  display: block;
  width: var(--oran, 0%);
  height: 100%;
  background: var(--accent);
  opacity: 0.7;
}

.dagilim-sayi {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* --- Panel ------------------------------------------------------------ */

.panel-bolumler {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.panel-bolum h2 {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}

.panel-bolum--genis {
  margin-top: 1.5rem;
}

.sade-liste {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}

.sade-liste li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--border);
}

.sade-liste li:last-child {
  border-bottom: none;
}

.sade-liste a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sade-liste .sayi {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* --- Ust menu ---------------------------------------------------------
   Paneldeki ".kisayollar" bloğunun yerini aldı: aynı bağlantılar artık
   her sayfada, üstte. */

.ustbar__menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  /* Marka ile kullanıcı bilgisinin arasındaki boşluğu doldurur, böylece
     menü sola yaslanır ve sağ blok sağda kalır. */
  margin-right: auto;
  font-size: 0.875rem;
}

.ustbar__menu a {
  display: block;
  padding: 0.35rem 0.7rem;
  border-radius: 8px;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
}

.ustbar__menu a:hover {
  background: var(--bg);
  color: var(--text);
}

/* Bulunulan sayfa. Yalnızca renk değil zemin de değişiyor: renk körlüğünde
   tek başına renk farkı yeterli bir işaret değil. */
.ustbar__menu a.secili {
  background: var(--bg);
  color: var(--text);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* --- QR --------------------------------------------------------------- */

.qr-bolum {
  margin: 1.5rem 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.qr-bolum h2 {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
}

/* --- QR paneli -----------------------------------------------------------
   position: fixed, yani AKIS DISINDA. Satir icinde acildiginda 200 px'lik
   goruntu altindaki her seyi asagi itiyor, kapatilinca geri cekiyordu --
   kullanici icin sayfa asagi yukari oynuyordu. Panel acilip kapanirken
   listedeki hicbir satirin yeri degismiyor. */
.qr-panel {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 20;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

.qr-panel__baslik {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.qr-panel__alt {
  margin: 0.5rem 0 0;
}

.qr-onizleme--kucuk {
  width: 200px;
  max-width: 100%;
}

/* Dar ekranda kose yerine alt kenara tam genislikte oturuyor: 200 px'lik
   panel 375 px'te sagda asili kalinca listeyi kapatiyordu. */
@media (max-width: 30rem) {
  .qr-panel {
    right: 0.75rem;
    left: 0.75rem;
    bottom: 0.75rem;
    text-align: center;
  }
}

/* QR daima beyaz zeminde: koyu temada seffaf birakilirsa okunamaz hale
   gelir, cunku QR okuyucular acik/koyu kontrastina bagli. */
.qr-onizleme {
  display: block;
  max-width: 100%;
  height: auto;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #ffffff;
}

/* --- Ilerleme cubugu --------------------------------------------------- */

.ilerleme {
  height: 0.6rem;
  margin: 0.75rem 0 0.35rem;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.ilerleme-dolgu {
  display: block;
  width: var(--oran, 0%);
  height: 100%;
  background: var(--accent);
  transition: width 0.3s ease;
}

input[type="file"] {
  width: 100%;
  padding: 0.45rem;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.875rem;
}

/* ---------------------------------------------- liste: filtre, secim, sayfalama */

.filtre-form select {
  flex: 0 1 12rem;
}

/* Onay kutusu ve etiketi tek satirda: filtre cubugundaki diger alanlarla
   ayni yukseklikte dursun diye dikey ortalaniyor. */
.onay-satir {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.liste-ozet {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
}

.secim-hucre {
  width: 1.5rem;
  text-align: center;
}

/* Baglanti olarak cizilen dugme: <a> temel button kurallarini almiyor,
   gorunumu burada eslestiriliyor. */
a.btn--kucuk {
  display: inline-block;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  text-decoration: none;
  vertical-align: middle;
}

a.btn--kucuk:hover {
  border-color: var(--accent);
}

.toplu-cubuk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  /* Cubuk tablonun USTUNDE duruyor; bosluk altta olmali. */
  margin: 0 0 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.toplu-cubuk button {
  margin-top: 0;
}

/* Sayaci dugmelerden ayirip cubugun soluna yaslar. */
.toplu-cubuk > .muted:first-child {
  margin-right: auto;
}

.sayfalama {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
  font-size: 0.875rem;
}

.duzenleme-satir > td {
  background: var(--bekleyen-zemin);
}

.satir-duzenleme p {
  margin-top: 0;
}

/* Satir ici duzenleme formunun dugmeleri, tablo satirini gereksiz
   buyutmesin diye ust bosluklari kisaltiliyor. */
.satir-duzenleme button {
  margin-top: 0.5rem;
}

.satir-duzenleme .btn--kucuk {
  margin-left: 0.35rem;
}

/* ------------------------------------------------ yerel hesap / parola */

/* Bir kez gosterilen parola. Sayfa yenilenince kaybolur ve geri getirmenin
   yolu yok, o yuzden gozden kacmayacak kadar belirgin olmali. */
.parola-kutu {
  margin: 0 0 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--bilgi-kenar);
  border-radius: var(--radius);
  background: var(--bilgi-zemin);
}

.parola-kutu p {
  margin: 0 0 0.5rem;
}

.parola-kutu p:last-child {
  margin-bottom: 0;
}

.parola-deger code {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  /* Parola elle aktarilacak: buyuk ve harf araligi genis olsun ki
     benzer karakterler ayirt edilebilsin. */
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  user-select: all;
}

/* Katlanabilir form: acilmadan once yalnizca basligi gorunur, boylece
   kullanici listesi sayfanin ust kismini kaybetmiyor. */
.kutu-form--katlanir > summary {
  cursor: pointer;
  font-weight: 500;
}

.kutu-form--katlanir[open] > summary {
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.girdi--dar {
  width: 11rem;
}

/* ------------------------------------------------------------- ara sayfa */

/* Ara sayfada üst bar yok (oturum yok), yani kart tek başına duruyor.
   Sayfanın tepesine yapışmasın diye dikey olarak ortalanıyor: aksi hâlde
   altında kocaman boş bir alan kalıyor ve sayfa yarım görünüyordu. */
body:has(.ara-kart) .page {
  display: grid;
  /* align-content, place-items DEĞİL: yalnızca dikeyde ortalamak istiyoruz.
     place-items yatayda da ortalar ve grid öğesini içeriğine göre büzer;
     kart o zaman genişliğini görselden alırdı. align-content ile sütun
     normal genişlikte kalıyor, kart .page'i dolduruyor. */
  align-content: center;
  min-height: calc(100vh - 4rem); /* body'nin 2rem alt/üst dolgusu */
  max-width: 40rem;
}

/* Grid öğesinin en küçük genişliği "min-content" değil sıfır olsun:
   görselin 1920 px'lik doğal genişliği sütunu şişirmesin. */
body:has(.ara-kart) .page > * {
  min-width: 0;
}

.ara-kart {
  width: 100%;
  padding: 1.25rem;
}

.ara-ust {
  display: flex;
  flex-wrap: wrap;
  /* baseline DEGIL center: marka artik metin degil maskeli bir blok ve
     onun taban cizgisi gizlenmis metinden geliyor -- yaninda duran kisa
     link ile hizasi kayiyordu. */
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

/* Bicimi yukaridaki ortak maske kurali veriyor; burada yalnizca ara
   sayfaya ozel olan sey kaliyor. */

.haber {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.haber:hover {
  border-color: var(--accent);
}

/* Görsel ve yazı AYRI elementler (kaynak sayfadaki yapı da böyle):
   görsel akışta, yazı altında. Metni görselin üstüne bindirmiyoruz --
   fotoğraf koyu olduğunda başlık okunmaz hâle geliyordu.

   SABIT ORAN DAYATILMIYOR. Önce aspect-ratio: 16/9 + object-fit: cover
   vardı; TİM'in görselleri 1920×814 (oran 2.36) olduğu için her birinin
   kenarları kırpılıyordu -- toplu fotoğraflarda kenardaki kişiler
   kayboluyordu. Artık oran görselin kendi width/height niteliklerinden
   geliyor (veritabanındaki gerçek boyutlar), yani kırpma yok ve tarayıcı
   yine yer ayırabiliyor. */
.haber-gorsel {
  display: block;
  width: 100%;
  height: auto;
  background: var(--bg);
}

/* Alışılmadık ölçüde uzun bir görsel gelirse (dikey fotoğraf gibi) kartı
   ele geçirmesin. contain kullanılıyor: cover kırpardı, oysa kırpmamak
   bu düzenin bütün amacı. */
@media (min-height: 500px) {
  .haber-gorsel {
    max-height: 42vh;
    object-fit: contain;
  }
}

.haber-yazi {
  padding: 1rem 1.1rem 1.15rem;
}

.haber-baslik {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.3;
}

.haber-aciklama {
  margin: 0.5rem 0 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.haber-devam {
  display: inline-block;
  margin-top: 0.75rem;
  color: var(--accent);
  font-size: 0.875rem;
}

.ara-alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1.1rem;
}

.ara-durum {
  margin: 0;
}

#ara-sayac {
  font-variant-numeric: tabular-nums;
}

.btn--baglanti-dugme {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
}

.btn--baglanti-dugme:hover {
  border-color: var(--accent);
}

/* Ara sayfası açık alan adı: rozet yeşil zeminle işaretleniyor. */
.rozet--acik {
  border-color: var(--bilgi-kenar);
  background: var(--bilgi-zemin);
  color: var(--bilgi-metin);
}

/* ---------------------------------------------------------- sağlık paneli */

.saglik-genel {
  margin: 0 0 1.5rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--bilgi-kenar);
  border-radius: 8px;
  background: var(--bilgi-zemin);
  color: var(--bilgi-metin);
  font-weight: 500;
}

.saglik-genel.saglik--uyari {
  border-color: var(--bekleyen-kenar);
  background: var(--bekleyen-zemin);
  color: var(--text);
}

.saglik-genel.saglik--hata {
  border-color: var(--uyari-kenar);
  background: var(--uyari-zemin);
  color: var(--uyari-metin);
}

.saglik-bolum {
  margin: 0 0 1.75rem;
}

.saglik-bolum h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
}

/* Durum yalnızca renkle anlatılmıyor: rozet metni de ("çalışıyor",
   "erişilemiyor") durumu söylüyor. Nokta hızlı tarama için. */
.saglik-nokta {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--bilgi-metin);
  flex: none;
}

.saglik-nokta.saglik--uyari {
  background: #b8860b;
}

.saglik-nokta.saglik--hata {
  background: var(--uyari-metin);
}

.saglik-bolum .tablo {
  margin-top: 0.5rem;
}

.saglik-ad {
  width: 14rem;
  font-weight: 500;
}

/* Hata metinleri uzun olabiliyor; tabloyu şişirmesin diye küçük ve
   kırılabilir. */
.saglik-ayrinti {
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.saglik-ipucu {
  margin-top: 0.5rem;
  padding-left: 1.1rem;
  border-left: 2px solid var(--border);
}

/* Ölçüm değeri. .rozet'ten ayrı çünkü o sınıf metni büyük harfe çeviriyor
   ve "30m0s" gibi değerleri okunmaz kılıyor. */
.saglik-deger {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.saglik-deger.saglik--uyari {
  border-color: var(--bekleyen-kenar);
  background: var(--bekleyen-zemin);
}

.saglik-deger.saglik--hata {
  border-color: var(--uyari-kenar);
  background: var(--uyari-zemin);
  color: var(--uyari-metin);
}

/* ==========================================================================
   DAR EKRAN (telefon)

   Ölçüldü (375 px viewport): linkler tablosu 915 px, yani ekranın 2,4 katı.
   Sayfa taşmıyordu — tablo kendi içinde yatay kayıyordu — ama işlem
   düğmelerine ulaşmak için yana kaydırmak gerekiyordu. Kullanılabilir değil.

   Çözüm: dar ekranda tablo satırları KART oluyor. Başlık satırı gizleniyor,
   her hücre kendi etiketiyle alt alta diziliyor. Aynı HTML, farklı düzen —
   ikinci bir şablon yok.
   ========================================================================== */

@media (max-width: 40rem) {
  body {
    padding: 1rem 0.75rem;
  }

  .card {
    padding: 1rem;
  }

  .ustbar {
    margin: -1rem -0.75rem 1.25rem;
    padding: 0 0.75rem;
  }

  /* Menü yatay kaydırılabilir tek satır: alt alta yığılınca üst bar
     ekranın yarısını kaplıyordu. */
  .ustbar__menu {
    order: 3;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    /* Kaydırma çubuğu görünmesin ama kaydırma çalışsın. */
    scrollbar-width: none;
    padding-bottom: 0.25rem;
  }

  .ustbar__menu::-webkit-scrollbar {
    display: none;
  }

  .ustbar__menu a {
    padding: 0.55rem 0.75rem;
  }

  /* Menü alt satıra indi; boşluğu o dolduruyordu. Kullanıcı bloğu sağda
     kalsın diye boşluk buraya taşınıyor. */
  .ustbar__sag {
    margin-left: auto;
  }

  .ustbar__marka {
    font-size: 0.95rem;
  }

  h1 {
    font-size: 1.25rem;
  }

  /* --- Tablo → kart ---------------------------------------------------- */

  /* Dar ekrana uyarlanan tablolarda yatay kaydırma gereksiz. */
  .tablo-sarmal:has(.tablo--kart),
  .tablo-sarmal:has(.tablo--saglik) {
    overflow-x: visible;
  }

  .tablo--kart,
  .tablo--kart tbody,
  .tablo--kart tr,
  .tablo--kart td {
    display: block;
    width: auto;
  }

  /* Başlık satırı gizleniyor; etiketler hücrelerin içinde. */
  .tablo--kart thead {
    display: none;
  }

  .tablo--kart tr {
    margin: 0 0 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
  }

  .tablo--kart tbody tr:last-child {
    margin-bottom: 0;
  }

  .tablo--kart td {
    padding: 0.3rem 0;
    border-bottom: none;
  }

  /* Hücrenin ne olduğu başlık satırından anlaşılamıyor; şablon
     data-etiket ile söylüyor. Etiketi olmayan hücre (kısa link, hedef
     gibi kendini açıklayanlar) etiketsiz çiziliyor. */
  .tablo--kart td[data-etiket]::before {
    content: attr(data-etiket);
    display: block;
    margin-bottom: 0.15rem;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  /* Boş hücre kartta yer kaplamasın. */
  .tablo--kart td:empty {
    display: none;
  }

  /* "analitik" ve "QR" yardımcı bağlantıları: masaüstünde satır içi küçük
     yazı, telefonda basılabilir hedef olmalı. .btn--kucuk değiller, o
     yüzden yukarıdaki dokunma kuralı bunları görmüyordu. */
  /* "analitik", "QR" ve "kopyala" ayni satirda duruyor; kopyala bir
     <button> oldugu icin a.muted seciciye girmiyordu ve 21 px kaliyordu.
     Ayni tuzak datetime-local'da da yasandi. */
  .tablo--kart td > a.muted,
  .tablo--kart td > .kopyala {
    display: inline-block;
    padding: 0.45rem 0;
    margin-right: 0.9rem;
  }

  /* Not / kullanıcı adı / tarih gibi ikincil metinler kendi satırına insin;
     satır içi kalınca "QR" ile birleşip tek bir bulamaç oluyorlardı. */
  .tablo--kart td > span.muted {
    display: block;
  }

  /* İşlem hücresi: düğmeler tam genişlikte ve parmakla basılabilir. */
  .islem-hucre,
  .tablo--linkler .islem-hucre {
    min-width: 0;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding-top: 0.6rem;
  }

  .islem-hucre .satir-form {
    margin: 0;
    flex: 1 1 auto;
  }

  /* --- Dokunma hedefleri ----------------------------------------------- */

  /* Ölçüldü: linkler sayfasında 208 etkileşimli öğenin 207'si 36 px'in
     altındaydı. Parmak için en az ~40 px gerekiyor. */
  .btn--kucuk,
  a.btn--kucuk,
  .islem-hucre button,
  .satir-form button {
    min-height: 2.5rem;
    padding: 0.5rem 0.9rem;
  }

  .satir-form,
  .islem-hucre .satir-form button,
  .islem-hucre a.btn--kucuk {
    width: 100%;
  }

  /* Yeni bir girdi turu eklerken BURAYA da yazin: listede olmayan tur dar
     ekranda kucuk kalir ve sessizce parmakla basilamaz olur. datetime-local
     bir kez bu yuzden 21 px kaldi (olculdu). */
  select,
  input[type="search"],
  input[type="url"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="text"],
  input[type="email"],
  input[type="password"] {
    min-height: 2.5rem;
    /* 16 px altındaki yazı tipi iOS Safari'de otomatik yakınlaştırma
       tetikliyor ve kullanıcı elle geri çıkmak zorunda kalıyor. */
    font-size: 16px;
  }

  /* 24 px, WCAG 2.2 "Target Size (Minimum)" alt sınırı. Daha büyüğü onay
     kutusunu orantısız gösteriyor; hedefi büyütmek için kutunun kendisi
     değil çevresindeki boşluk kullanılıyor (aşağıdaki .secim-hucre). */
  input[type="checkbox"] {
    width: 1.5rem;
    height: 1.5rem;
  }

  .ustbar__sag .btn--baglanti {
    min-height: 2.25rem;
    padding: 0.2rem 0.35rem;
  }

  /* Masaustunde dar tutuluyorlar (ust bar kalabalik); telefonda o kisit yok
     ve parmakla basilabilir olmalilar. Olculdu: 25 px idi. */
  .tema-secim button {
    min-height: 2.25rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
  }

  /* Seçim kutusu kartın başında, etiketiyle birlikte dursun. Dikey boşluk
     komşu hedeflerle arasını açıyor. */
  .secim-hucre {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0;
  }

  /* Etiket satır içinde kalsın: block olsaydı onay kutusunu alt satıra
     atardı. */
  .tablo--kart .secim-hucre[data-etiket]::before {
    display: inline;
    margin: 0;
    font-size: 0.8rem;
    text-transform: none;
  }

  /* --- Filtre ve formlar ------------------------------------------------ */

  /* flex-direction'ı SÜTUNA ÇEVİRMEYİN. Tabanda `flex: 1 1 16rem` gibi
     kurallar var ve 16rem ana eksen ölçüsüdür; sütuna çevrilince genişlik
     değil YÜKSEKLİK olur, alanlar 256 px boyunda çizilir. Bir kez yaşandı
     ve ölçüm yakalamadı — denetim yalnızca fazla KÜÇÜK öğeye bakıyordu,
     ekran görüntüsü gösterdi.

     Satır yönü korunuyor; her öğeyi tam genişliğe zorlayınca sarma zaten
     alt alta diziyor. */
  .filtre-form > *,
  .toplu-cubuk > * {
    flex: 0 0 100%;
  }

  /* Tabandaki `.filtre-form select { flex: 0 1 12rem }` bir sınıf ve bir
     eleman (0,1,1); yukarıdaki `> *` ondan daha az özgül (0,1,0) ve
     kazanamıyor. Aynı özgüllükte, dosyada daha sonra yazılıyor. */
  .filtre-form select,
  .filtre-form input[type="search"] {
    flex-basis: 100%;
  }

  .alan,
  .alan--genis {
    flex: 0 0 100%;
  }

  .hedef-hucre {
    max-width: none;
  }

  /* Denetim kaydı: zaman damgası + hash tek satıra sığmıyor. `nowrap`
     dar ekranda kartı taşırıyor — işlem sütunundaki üçüncü düğmeyi
     görünmez yapan hatanın aynısı. */
  .zaman-hucre {
    white-space: normal;
  }

  /* öncesi/sonrası blokları alt alta ve tam genişlikte. `min-width: 0`
     şart: esnek öğenin varsayılanı `auto`, yani içeriğinden küçülemiyor
     ve içindeki <pre> kabı taşırıyordu (ölçüldü: right=473 @ vw=375).
     Sıfırlanınca <pre> kendi içinde yatay kayıyor. */
  .fark > div {
    flex: 0 0 100%;
    min-width: 0;
  }

  /* 18rem (288 px) kart iç genişliğine ancak sığıyor; sabit değer yerine
     kabın kendisine bağlanıyor. */
  .fark pre {
    max-width: 100%;
  }

  .hedef-hucre a {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .toplu-cubuk > .muted:first-child {
    margin: 0 0 0.25rem;
  }

  .sayfalama {
    gap: 0.5rem;
    justify-content: space-between;
  }

  .sayfalama a {
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
  }

  /* --- Sağlık tablosu ---------------------------------------------------
     Kart deseni burada işe yaramıyor: <thead> yok, ilk hücrenin kendisi
     etiket. Sorun sütun genişliği değil sütun SAYISI — `.saglik-ad` 14rem
     (224 px) alıyor, geriye rozet ve ayrıntıya ~150 px kalıyor ve uzun
     hata metni "LOCAL_ADMIN_PASSWOR / D" diye kelime ortasından kırılıyor.

     Satır ızgaraya dönüyor: ad solda, değer sağda, ayrıntı altında tam
     genişlikte. */
  .tablo--saglik,
  .tablo--saglik tbody,
  .tablo--saglik td {
    display: block;
    width: auto;
  }

  .tablo--saglik tr {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.25rem 0.75rem;
    padding: 0.55rem 0;
  }

  .tablo--saglik td {
    border-bottom: none;
    padding: 0;
  }

  .saglik-ad {
    width: auto;
  }

  /* Ayrıntı kendi satırında, iki sütunu da kaplar. */
  .tablo--saglik .saglik-ayrinti {
    grid-column: 1 / -1;
  }

  /* Ayrıntısı olmayan satırda boş hücre ızgarada yer kaplamasın. */
  .tablo--saglik td:empty {
    display: none;
  }
}

/* ==========================================================================
   ORAN SINIFLARI  --  .oran-0 ... .oran-100

   Cubuk uzunluklari eskiden style="width: 81.9%" ile veriliyordu ve CSP
   (style-src 'self', 'unsafe-inline' YOK) satir ici style niteliklerini
   engelledigi icin HICBIRI uygulanmiyordu. Olculdu: 81.9% ve 18.1% isteyen
   iki cubuk da 145 px cizildi; 52.3% isteyen grafik cubugu 128 px'lik kapta
   1 px kaldi (min-height). Hicbir hata gorunmuyordu -- grafik duz, dagilim
   cubuklarinin hepsi tam dolu.

   Cozum CSP'yi gevsetmek DEGIL: oran bir sinifla veriliyor, sinif da yalnizca
   --oran degiskenini kuruyor. Yuzdeyi hangi ozellige baglayacagina kullanan
   eleman karar veriyor (grafik yukseklige, dagilim genislige), boylece tek
   bir sinif kumesi ikisine de yetiyor.

   Tam sayiya yuvarlaniyor: 81.9% ile 82% arasindaki fark ekranda bir pikselin
   altinda kaliyor.
   ========================================================================== */
.oran-0 { --oran: 0%; }
.oran-1 { --oran: 1%; }
.oran-2 { --oran: 2%; }
.oran-3 { --oran: 3%; }
.oran-4 { --oran: 4%; }
.oran-5 { --oran: 5%; }
.oran-6 { --oran: 6%; }
.oran-7 { --oran: 7%; }
.oran-8 { --oran: 8%; }
.oran-9 { --oran: 9%; }
.oran-10 { --oran: 10%; }
.oran-11 { --oran: 11%; }
.oran-12 { --oran: 12%; }
.oran-13 { --oran: 13%; }
.oran-14 { --oran: 14%; }
.oran-15 { --oran: 15%; }
.oran-16 { --oran: 16%; }
.oran-17 { --oran: 17%; }
.oran-18 { --oran: 18%; }
.oran-19 { --oran: 19%; }
.oran-20 { --oran: 20%; }
.oran-21 { --oran: 21%; }
.oran-22 { --oran: 22%; }
.oran-23 { --oran: 23%; }
.oran-24 { --oran: 24%; }
.oran-25 { --oran: 25%; }
.oran-26 { --oran: 26%; }
.oran-27 { --oran: 27%; }
.oran-28 { --oran: 28%; }
.oran-29 { --oran: 29%; }
.oran-30 { --oran: 30%; }
.oran-31 { --oran: 31%; }
.oran-32 { --oran: 32%; }
.oran-33 { --oran: 33%; }
.oran-34 { --oran: 34%; }
.oran-35 { --oran: 35%; }
.oran-36 { --oran: 36%; }
.oran-37 { --oran: 37%; }
.oran-38 { --oran: 38%; }
.oran-39 { --oran: 39%; }
.oran-40 { --oran: 40%; }
.oran-41 { --oran: 41%; }
.oran-42 { --oran: 42%; }
.oran-43 { --oran: 43%; }
.oran-44 { --oran: 44%; }
.oran-45 { --oran: 45%; }
.oran-46 { --oran: 46%; }
.oran-47 { --oran: 47%; }
.oran-48 { --oran: 48%; }
.oran-49 { --oran: 49%; }
.oran-50 { --oran: 50%; }
.oran-51 { --oran: 51%; }
.oran-52 { --oran: 52%; }
.oran-53 { --oran: 53%; }
.oran-54 { --oran: 54%; }
.oran-55 { --oran: 55%; }
.oran-56 { --oran: 56%; }
.oran-57 { --oran: 57%; }
.oran-58 { --oran: 58%; }
.oran-59 { --oran: 59%; }
.oran-60 { --oran: 60%; }
.oran-61 { --oran: 61%; }
.oran-62 { --oran: 62%; }
.oran-63 { --oran: 63%; }
.oran-64 { --oran: 64%; }
.oran-65 { --oran: 65%; }
.oran-66 { --oran: 66%; }
.oran-67 { --oran: 67%; }
.oran-68 { --oran: 68%; }
.oran-69 { --oran: 69%; }
.oran-70 { --oran: 70%; }
.oran-71 { --oran: 71%; }
.oran-72 { --oran: 72%; }
.oran-73 { --oran: 73%; }
.oran-74 { --oran: 74%; }
.oran-75 { --oran: 75%; }
.oran-76 { --oran: 76%; }
.oran-77 { --oran: 77%; }
.oran-78 { --oran: 78%; }
.oran-79 { --oran: 79%; }
.oran-80 { --oran: 80%; }
.oran-81 { --oran: 81%; }
.oran-82 { --oran: 82%; }
.oran-83 { --oran: 83%; }
.oran-84 { --oran: 84%; }
.oran-85 { --oran: 85%; }
.oran-86 { --oran: 86%; }
.oran-87 { --oran: 87%; }
.oran-88 { --oran: 88%; }
.oran-89 { --oran: 89%; }
.oran-90 { --oran: 90%; }
.oran-91 { --oran: 91%; }
.oran-92 { --oran: 92%; }
.oran-93 { --oran: 93%; }
.oran-94 { --oran: 94%; }
.oran-95 { --oran: 95%; }
.oran-96 { --oran: 96%; }
.oran-97 { --oran: 97%; }
.oran-98 { --oran: 98%; }
.oran-99 { --oran: 99%; }
.oran-100 { --oran: 100%; }

/* --- Platforma gore hedef ------------------------------------------------ */

/* Katlanir bolum: linklerin cogunda kullanilmadigi icin formu surekli iki
   alan uzatmamali. */
.platform-alan {
  margin: 0 0 1rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}

.platform-alan > summary {
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

.platform-alan > p {
  margin: 0.4rem 0 0.6rem;
}

.platform-alan .form-satir {
  margin-bottom: 0;
}

/* Listede "bu link cihaza gore yonlendiriyor" isareti.
   text-transform KAPALI: .rozet metni buyuk harfe ceviriyor ve Turkce'de
   "i" -> "İ" olduğu icin "iOS" yerine "İOS" yaziyordu. Ayni tuzak saglik
   panelinde de yasandi (orada "30m0s" -> "30M0S" oluyordu). */
.rozet--platform {
  margin-left: 0.35rem;
  border-color: var(--accent);
  color: var(--accent);
  text-transform: none;
}

/* Listede olusturma tarihi, kullanici adinin altinda. Tarih filtresi
   varken tarihi gostermemek filtreyi kor birakiyordu. */
.olusma-ani {
  display: block;
  font-variant-numeric: tabular-nums;
}

/* ##########################################################################
   Giris sayfasi logosu. Ust bardaki ile AYNI yontem: dosya saydam zeminli
   beyaz oldugu icin <img> acik temada gorunmez olurdu; maske sekli alfa
   kanalindan aliyor, rengi background-color veriyor.

   Olculer 1664x2000'den (oran 0,832) turetildi. Yukseklik 7rem seciliyor;
   genislik oranla hesaplandi (7 x 0,832 = 5,82rem).

   Baslik metni <h1> olarak duruyor ve disari itiliyor: ekran okuyucu ve
   CSS yuklenmezse marka adi gorunur.
   ########################################################################## */
.giris-logo {
  width: 5.82rem;
  height: 7rem;
  margin: 0 auto 1rem;
  background-color: var(--text);
  -webkit-mask: url("../img/logo_dikey.png") no-repeat center / contain;
  mask: url("../img/logo_dikey.png") no-repeat center / contain;
  text-indent: -200vw;
  overflow: hidden;
  white-space: nowrap;
}

/* Logo ortalandigi icin altindaki aciklama da ortalanmali; sola yasli
   kalsaydi ikisi ayri hizada durur ve dagilmis gorunurdu. */
.card--dar .lead {
  text-align: center;
}

/* --- Kopyalama dugmesi ---------------------------------------------------
   Satirdaki "analitik" ve "QR" baglantilariyla ayni goruntude ama <button>:
   bir yere gitmiyor, panoya yaziyor.

   JS'siz GIZLI. Sunucu tarafi karsiligi olmayan tek etkilesim bu; JS kapali
   kullaniciya hicbir sey yapmayan bir dugme gostermek yerine hic
   gostermiyoruz. Adres zaten solda metin olarak duruyor. */
.kopyala {
  display: none;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.js-var .kopyala {
  display: inline;
}

.kopyala:hover {
  text-decoration-thickness: 2px;
}

/* Kopyalandi geri bildirimi: renk TEK basina yetmez (renk korlugu), o yuzden
   metin de degisiyor -- "kopyala" -> "kopyalandi". */
.kopyala.tamam {
  color: var(--bilgi-metin);
  text-decoration: none;
}

/* execCommand yolunda kullanilan gecici alan. Satir ici style ile
   konumlandirilamaz: CSP style-src 'self' style="..." niteligini de
   engelliyor (bkz. CLAUDE.md). */
.pano-alani {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}