/* 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;
}

/* ##########################################################################
   Üst bar genişliği HER SAYFADA aynı: 60rem.

   Önceden sayfadaki kartın genişliğini takip ediyordu — dar kartlı sayfalarda
   42rem, geniş olanlarda 60rem — ki marka ve "Çıkış" kartın kenarlarıyla
   hizalansın. Ama menü 42rem'e sığmıyor: ölçüldü, içerik 858 px ve kap
   672 px, yani /parolam gibi sayfalarda üst bar İKİ SATIRA sarıyordu.

   Sığdırmak mümkün değildi: tema seçimi tümüyle silinse bile 730 px kalıyor.
   Tek çare genişliği sabitlemek.

   Karşılığı: dar kartlı sayfalarda üst barın sağ kenarı kartın kenarından
   taşıyor. Bilinçli tercih — hizalı ama sarmış bir üst bar yerine hizasız
   ama tek satır. Üst bar sayfadan bağımsız bir kabuk öğesi; sayfa genişliğine
   göre değişmesi zaten tutarsızlık üretiyordu.
   ########################################################################## */
.ustbar__ic {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  max-width: 72rem;
  margin: 0 auto;
  min-height: 3.25rem;
  padding: 0.4rem 0;
}

/* ##########################################################################
   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;
}

/* Görsel olarak gizli ama ekran okuyucuda var. display:none ya da
   visibility:hidden onu da susturur; 1 px + clip-path susturmaz. */
.gorsel-gizli {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ##########################################################################
   Hesap rozeti: hem rol etiketi hem /parolam bağlantısı.

   Kullanıcı adı üst barda GÖRÜNMÜYOR (bkz. base.html'deki not): 128 px
   kaplıyor ve üst barı ikinci satıra sarıyordu. Ad rozetin içinde görsel
   olarak gizli duruyor, ayrıca title'da.

   Rozetin bağlantı olması şart -- ad bir <a> idi ve /parolam'a giden tek
   yoldu, menüde yok.
   ########################################################################## */
.rozet--hesap {
  text-decoration: none;
}

.rozet--hesap:hover,
.rozet--hesap:focus-visible {
  border-color: var(--accent);
  color: var(--text);
}

/* --- 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;
}

/* 60rem -> 72rem: onizleme gorseli ilk sutunu genislettikten sonra tablo
   1005 px'e cikti ve 902 px'lik kaba sigmadi -- "Sil" dugmesi yatay
   kaydirmanin arkasinda kaldi (olculdu: silSag=1136, kapSag=1069).

   max-width yalnizca UST SINIR: dar ekranda sayfa zaten viewport'a gore
   kuculuyor ve kenar boslugunu body'nin padding'i veriyor. Yani bu degisiklik
   mobili ETKILEMIYOR, olculdu. */
.page:has(.card--genis) {
  max-width: 72rem;
}

.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 sutunundaki uc dugme AYNI HIZADA durmali.

   "Duzenle" bir <a>, "Kapat"/"Sil" ise <form> icinde <button>. Ikisi ayni
   sinifi (.btn--kucuk .btn--ikincil) tasidigi icin ayni gorunmeleri
   beklenirdi, ama iki yerden ayrisiyorlardi:

   1. margin-top yalnizca .satir-form'daydi -> <a> 1,6 px yukarida kaliyordu
   2. genel `button` kurali font-weight: 500 veriyor; <a> govdeden 400
      miras aliyor -> "Kapat" kalin, "Duzenle" ince gorunuyordu

   Olculdu: ust=810.2 / 811.8, kalinlik=400 / 500. Yukseklikler zaten
   aynıydı (34.3), yani sorun boyut degil hizalama ve agirliktı.

   Bu yuzden ikisi de AYNI kurala bagli. Yeni bir islem eklerken <a> mi
   <button> mu oldugu fark etmesin diye secici ikisini birden kapsiyor.
   ########################################################################## */
.islem-hucre .satir-form {
  display: inline-flex;
  margin-left: 0.35rem;
  /* Sarma durumunda satirlar birbirine yapismasin. */
  margin-top: 0.2rem;
  vertical-align: middle;
}

/* Ayni margin-top baglantiya da: yoksa <a> 1,6 px yukarida kaliyor
   (olculdu). Yalnizca bu sutunda gecerli -- a.btn--kucuk baska yerlerde de
   kullaniliyor ve orada bosluga gerek yok. */
.islem-hucre > a.btn--kucuk {
  margin-top: 0.2rem;
}

/* 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.

   font-weight UNUTULMUSTU: `button` kurali 500 veriyor, <a> ise govdeden
   400 aliyordu. Yan yana durduklarinda (Duzenle / Kapat / Sil) biri kalin
   biri ince goruluyordu -- olculdu, 400'e karsi 500. Bu dosyada "<a>'yi
   dugmeye benzet" isini yapan tek kural bu, o yuzden agirlik da burada. */
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;
  font-weight: 500;
  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 > .satir-islem,
  .tablo--kart td > .kopyala {
    display: inline-flex;
    padding: 0.45rem 0;
    margin-right: 0.9rem;
    /* min-height SART: kutu modeli border-box oldugu icin padding
       .satir-islem'deki 1.9rem min-height'i BUYUTMUYOR. Olculdu: hedef
       31 px kaliyordu, projenin kendi esigi 2.5rem (40 px). */
    min-height: 2.5rem;
  }

  /* ########################################################################
     Kart duzeninde YAZI GORUNUR. Ikonun ne yaptigini anlatan tek sey
     ipucudur (title/hover) ve o DOKUNMATIKTE CALISMAZ -- yani ikon-only
     tasarim tam da burada anlasilmaz olurdu. Kartta yer zaten var.

     Secici bilerek .tablo--kart ile baslıyor (0,2,0): taban kural
     .satir-islem__yazi (0,1,0) bu dosyada DAHA ASAGIDA tanimli ve medya
     sorgusu ozgulluk EKLEMEZ, yani esit ozgullukte sonraki kazanirdi.
     Olculdu: once tam da bu oldu -- 360 px'te yazi position:absolute
     kalip 1 px genisligindeydi, yani dar ekranda ikon-only goruntu.
     ######################################################################## */
  .tablo--kart .satir-islem__yazi {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }

  /* 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;
  cursor: pointer;
}

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

/* ##########################################################################
   SATIR ISLEMLERI: genis ekranda ikon, kart duzeninde metin.

   Neden ikon-only DEGIL de bu: ipucu (title/hover) DOKUNMATIKTE CALISMAZ.
   Yani ikonun ne yaptigini ogrenmenin yolu tam olarak dar ekranda kapali
   oluyor. Kart duzeninde zaten yer bol, orada yaziyi gosteriyoruz.

   Yazi genis ekranda da DOM'da duruyor (gorsel olarak gizli): ekran
   okuyucu okumaya devam ediyor. display:none olsaydi susardi.
   ########################################################################## */
.ikon-sprite {
  display: none;
}

.ikon {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.satir-islem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  /* Dokunma hedefi. Belgelenmis tuzak: .kopyala <button> oldugu icin
     a.muted secicisine girmiyordu ve 21 px kaliyordu. */
  min-width: 1.9rem;
  min-height: 1.9rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-decoration: none;
  vertical-align: middle;
}

.satir-islem:hover,
.satir-islem:focus-visible {
  color: var(--accent);
}

.satir-islem.secili {
  color: var(--accent);
}

/* Gorsel olarak gizli ama erisilebilir. clip-path + 1px: display:none ya da
   visibility:hidden ekran okuyucudan da saklardi. */
.satir-islem__yazi {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ikon--onay {
  display: none;
}

/* ##########################################################################
   Not KENDI SATIRINDA.

   Ikonlardan once bu TESADUFENDI: "analitik kopyala QR" uc metin baglantisi
   satiri doldurdugu icin not alta sariyordu. Ikonlar dar olunca tesaduf
   bozuldu ve not ikonlarin yanina yapisip ortadan bolundu
   ("... QR EVENT / SCHEDULE | ...").

   Ders: gorunen duzen sarmaya bagliysa duzen degil KAZA'dir; komsu bir
   ogenin genisligi degisince bozulur.
   ########################################################################## */
.satir-not {
  display: block;
}

/* Geri bildirim: renk TEK basina yetmez (renk korlugu), o yuzden yazi da
   gorunur hale geliyor ve basarida ikon degisiyor (pano -> onay).
   Ikon-only birakilsaydi tek sinyal renk olurdu -- eski davranisin bu
   ozelligi kaybolmamali.

   "bildirim" basaridan BAGIMSIZ: yaziyi gorunur kilan bu. Yalnizca "tamam"
   olsaydi basarisizlikta "kopyalanamadi" gizli kalir, yani sessiz hata
   olurdu. */
.kopyala.bildirim .satir-islem__yazi {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
}

.kopyala.bildirim {
  color: var(--uyari-metin);
}

.kopyala.bildirim.tamam {
  color: var(--bilgi-metin);
}

.kopyala.tamam .ikon--kopya {
  display: none;
}

.kopyala.tamam .ikon--onay {
  display: inline;
}

/* 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;
}

/* ##########################################################################
   Link onizlemesi: hedef sayfanin kucuk ekran goruntusu.

   Kendi satirinda ve kucuk: liste taramasi bozulmasin. Goruntu 160 px
   genislikte aliniyor (olculdu: 160 px ~8,6 KB, 320 px ~28 KB ve SURE AYNI),
   burada 80 px'de gosteriliyor -- yuksek yogunluklu ekranda da net.
   ########################################################################## */
.onizleme {
  display: block;
  width: 80px;
  height: auto;
  margin: 0.35rem 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  /* Goruntu inmeden once kutu bos ve gri: satir zaten bu yuksekligi
     ayirdigi icin gelince ziplama olmuyor. */
  background: var(--bg);
}

/* ##########################################################################
   Link hucresi: onizleme SOLDA, metin yigini sagda.

   Onizleme once metin yiginin ALTINDAYDI ve satirlari 57 px uzatiyordu --
   olculdu, tablo 6502 -> 9352 px (%44). Oysa sagdaki yigin (kisa link +
   ikonlar + not) zaten 130 px'den yuksek ve sutun 15rem genisliginde; yatayda
   yer vardi ve dikeyde yoktu.

   align-items: flex-start -- gorsel yiginin ortasina degil ustune hizalansin;
   not uzun oldugunda gorsel asagi kaymasin.
   ########################################################################## */
.link-hucre {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

/* min-width: 0 SART. Esnek ogenin varsayilan min-width'i auto, yani
   iceriginden kucuk olamaz; uzun bir not hucreyi tasirirdi. Ayni tuzak
   denetim kaydindaki oncesi/sonrasi bloklarinda da yasanmisti. */
.link-hucre__yazi {
  min-width: 0;
  flex: 1 1 auto;
}

/* Gorsel kendi satirindayken gereken dikey bosluk artik gereksiz. */
.link-hucre .onizleme {
  margin: 0.15rem 0 0;
  flex: none;
}