/* Ofis is takip - ortak taban katmani (renk, tipografi, bosluk, durum, ikon yuvasi).
   Tek kaynak: belge/TASARIM.md. Ekran dosyalari kendi rengini, kendi olcegini
   TANIMLAMAZ; yoksa dort ekranda dort ayri lacivert olur.

   ---------------------------------------------------------------------------
   BELIRTEC ADLARI (ekran yazanlar bunlari kullanir, yenisini uydurmaz)
   ---------------------------------------------------------------------------
   yuzey   : --zemin --yuzey --yuzey-2 --kenar --kenar-koyu
   metin   : --murekkep --murekkep-2 --murekkep-3
   marka   : --ana --ana-acik --ana-metin --vurgu
   durum   : --d-atandi --d-goruldu --d-devam --d-beklemede --d-bitti
             --d-onaylandi --d-iptal --acil --uyari  (+ her birinin -zemin esi)
   eylem   : --basla --duraklat --bitir --tehlike
   grafik  : --grafik-atanan --grafik-biten
   bosluk  : --bosluk-4 8 12 16 20 24 32 40 48   (ad = px degeri, ara deger yok)
   kose    : --kose-kart(12) --kose-alan(8) --kose-rozet(999) --kose-etiket(6)
   golge   : --golge-yuzen   (YALNIZ acilir/kip/uyari; kartta golge yok)
   z       : --z-acilir(100) --z-yapiskan(200) --z-kip(300) --z-uyari(400) --z-ipucu(500)
   hareket : --sure-hizli(120ms) --sure-orta(160ms) --sure-yavas(220ms) --yumusak
   olcu    : --olcu-h1 --olcu-h2 --olcu-kart-baslik --olcu-govde --olcu-ikincil
             --olcu-ust-etiket --olcu-buyuk-sayi

   ---------------------------------------------------------------------------
   SINIF SOZLUGU
   ---------------------------------------------------------------------------
   duzen : .ust-bar .icerik .iki-sutun .satir .sag-it .bolum .bolum-basligi
   kutu  : .kart .kart-baslik .kart-ayrac .ozet-kutu .acil-serit
           .bos-durum (.bos-ikon .bos-baslik .bos-yazi)
           .tablo-kutu .tablo
   kip   : .kip-ortu .kip .kip-baslik .kip-kapat .kip-govde .kip-dip
   dugme : .dugme (.yesil .turuncu .mavi .kirmizi .sade .genis .buyuk .kucuk
                   .hata .basarili)  + [aria-busy="true"] yukleniyor halkasi
   etiket: .rozet (.acil .oncelik-yuksek .oncelik-normal .oncelik-dusuk .sayac)
           .durum-atandi .durum-goruldu .durum-devam .durum-beklemede
           .durum-bitti .durum-onaylandi .durum-iptal
   form  : .alan .etiket .ipucu .form-hata
   diger : .uyari-kutu .uyari .ust-etiket .buyuk-sayi .lejant .lejant-kutu
           .ikonlu .soluk .kucuk-yazi .kalin .gecikme .tehlike
           .yazdirma-gizle .sr-only
           .sifre-bar-dugme (ortak.js Sifre penceresi bunu kullanir)

   Ikonlar: public/js/ikon.js -> IKON.<ad>(20). Emoji ikon olarak KULLANILMAZ.
   Mobil oncelikli: tek sutun, dokunma hedefi en az 44px, yatay kaydirma yok. */

/* --- 1. Belirtecler ---------------------------------------------------------- */
:root {
  /* Yuzey ve metin. Saf siyah/beyaz yok; notrler kurumsal maviye hafif egik. */
  --zemin: #F6F7F9;
  --yuzey: #FFFFFF;
  --yuzey-2: #F1F3F6;
  --kenar: #E2E5EA;
  --kenar-koyu: #CBD1D9;
  --murekkep: #171A20;
  --murekkep-2: #4A515C;
  --murekkep-3: #6E7681;

  --ana: #1B2A4A;
  --ana-acik: #2A3E68;
  --ana-metin: #FFFFFF;
  --vurgu: #3564AD;

  /* Durum renkleri. Renk TEK BASINA anlam tasimaz: yaninda metin etiketi durur. */
  --d-atandi: #B45309;      --d-atandi-zemin: #FEF3E2;
  --d-goruldu: #6D28D9;     --d-goruldu-zemin: #F3EEFE;
  --d-devam: #1D4ED8;       --d-devam-zemin: #E8EEFE;
  --d-beklemede: #C2410C;   --d-beklemede-zemin: #FEEDE4;
  --d-bitti: #15803D;       --d-bitti-zemin: #E6F4EA;
  --d-onaylandi: #166534;   --d-onaylandi-zemin: #E3F1E7;
  --d-iptal: #5B6270;       --d-iptal-zemin: #EEF0F3;
  --acil: #B91C1C;          --acil-zemin: #FDECEC;
  --uyari: #B45309;         --uyari-zemin: #FEF6E7;

  /* Eylem dugmeleri: fabrikanin alistigi renk ailesi korunur. */
  --basla: #15803D;
  --duraklat: #C2410C;
  --bitir: #1D4ED8;
  --tehlike: #B91C1C;

  /* Grafik paleti (CVD dogrulandi). */
  --grafik-atanan: #3564AD;
  --grafik-biten: #0E8F63;

  /* Tipografi */
  --yazi: -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --olcu-h1: 24px;
  --olcu-h2: 19px;
  --olcu-kart-baslik: 16px;
  --olcu-govde: 15px;
  --olcu-ikincil: 13px;
  --olcu-ust-etiket: 12px;
  --olcu-buyuk-sayi: 30px;

  /* Bosluk: 4px tabanli, ara deger uydurulmaz. Ad = px degeri. */
  --bosluk-4: 4px;
  --bosluk-8: 8px;
  --bosluk-12: 12px;
  --bosluk-16: 16px;
  --bosluk-20: 20px;
  --bosluk-24: 24px;
  --bosluk-32: 32px;
  --bosluk-40: 40px;
  --bosluk-48: 48px;

  /* Kose: tek sistem. 16px'ten buyuk yaricap yok. */
  --kose-kart: 12px;
  --kose-alan: 8px;
  --kose-rozet: 999px;
  --kose-etiket: 6px;

  /* Golge YALNIZ gercekten yukselen ogede: acilir menu, kip, uyari seridi. */
  --golge-yuzen: 0 8px 24px -8px rgba(23, 26, 32, .18), 0 2px 6px -2px rgba(23, 26, 32, .10);

  --z-acilir: 100;
  --z-yapiskan: 200;
  --z-kip: 300;
  --z-uyari: 400;
  --z-ipucu: 500;

  /* Hareket: 120-220ms, giris/cikis ease-out. UI'da ease-in kullanilmaz. */
  --sure-hizli: 120ms;
  --sure-orta: 160ms;
  --sure-yavas: 220ms;
  --yumusak: cubic-bezier(.22, 1, .36, 1);

}

/* --- 2. Taban ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--zemin);
  color: var(--murekkep);
  font-family: var(--yazi);
  font-size: var(--olcu-govde);
  line-height: 1.55;
  /* Sayilarin gectigi HER yerde sutunlar oynamasin diye taban seviyede acilir. */
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: rgba(53, 100, 173, .14);
}

/* display:flex/grid tasiyan sinif, tarayicinin [hidden] kuralini eziyor.
   Ekranlar el.hidden ile gizliyor; kural burada zorlanmazsa gizli kutu gorunur kaliyor. */
[hidden] { display: none !important; }

img, svg, video { max-width: 100%; }

svg { display: inline-block; vertical-align: middle; flex: none; }

a { color: var(--vurgu); }
a:hover { color: var(--ana-acik); }

/* --- 3. Tipografi olcegi ----------------------------------------------------- */
h1, h2, h3 {
  margin: 0 0 var(--bosluk-8);
  color: var(--murekkep);
  text-wrap: balance;
}

h1 { font-size: var(--olcu-h1); font-weight: 650; line-height: 1.2; letter-spacing: -.01em; }
h2 { font-size: var(--olcu-h2); font-weight: 640; line-height: 1.25; letter-spacing: -.005em; }
h3 { font-size: var(--olcu-kart-baslik); font-weight: 620; line-height: 1.3; letter-spacing: 0; }

p { margin: 0 0 var(--bosluk-12); max-width: 70ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* Buyuk harf YALNIZ burada; govde metni buyuk harf yazilmaz. */
.ust-etiket {
  display: block;
  font-size: var(--olcu-ust-etiket);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--murekkep-2);
}

.buyuk-sayi {
  display: block;
  margin-top: var(--bosluk-4);
  font-size: var(--olcu-buyuk-sayi);
  font-weight: 680;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/* --- 4. Odak (klavye kullanicisi hover gormez, odak AYRI tasarlanir) --------- */
:focus-visible {
  outline: 2px solid var(--vurgu);
  outline-offset: 2px;
  border-radius: var(--kose-etiket);
}

/* --- 5. Ust bar -------------------------------------------------------------- */
.ust-bar {
  position: sticky;
  top: 0;
  z-index: var(--z-yapiskan);
  display: flex;
  align-items: center;
  gap: var(--bosluk-8);
  min-height: 56px;
  padding: var(--bosluk-8) var(--bosluk-12);
  background: var(--ana);
  color: var(--ana-metin);
  box-shadow: 0 1px 0 rgba(23, 26, 32, .22);
}

.ust-bar a { color: var(--ana-metin); text-decoration: none; }

.ust-bar .marka {
  font-size: var(--olcu-kart-baslik);
  font-weight: 620;
  letter-spacing: -.005em;
  margin-right: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ust-bar .sag {
  display: flex;
  align-items: center;
  gap: var(--bosluk-4);
  margin-left: auto;
}

.ust-bar .bar-dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bosluk-8);
  min-width: 44px;
  min-height: 44px;
  padding: var(--bosluk-8) var(--bosluk-12);
  border: 0;
  border-radius: var(--kose-alan);
  background: rgba(255, 255, 255, .13);
  color: var(--ana-metin);
  font: inherit;
  font-size: var(--olcu-ikincil);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--sure-hizli) var(--yumusak), transform var(--sure-hizli) var(--yumusak);
}

.ust-bar .bar-dugme:hover { background: rgba(255, 255, 255, .22); }
.ust-bar .bar-dugme:active { transform: scale(.97); }
.ust-bar :focus-visible { outline-color: #FFFFFF; }

@media (min-width: 900px) {
  .ust-bar { padding: var(--bosluk-8) var(--bosluk-24); min-height: 60px; }
  .ust-bar .marka { font-size: var(--olcu-h2); }
}

/* --- 6. Icerik ve izgara ----------------------------------------------------- */
.icerik {
  padding: var(--bosluk-16) var(--bosluk-16) var(--bosluk-32);
  max-width: 100%;
}

.bolum { margin: 0 0 var(--bosluk-32); }
.bolum:last-child { margin-bottom: 0; }

/* Ust etiket degil, gercek bolum basligi. "Her bolumde ust etiket" yasak.
   Ust bosluk baslikta durur: .bolum sarmalayicisi olmadan da (gorev.html
   "Aciklama" basligi gibi) onceki blokla yapisik kalmaz. */
.bolum-basligi {
  display: flex;
  align-items: center;
  gap: var(--bosluk-8);
  margin: var(--bosluk-24) 0 var(--bosluk-12);
  font-size: var(--olcu-h2);
  font-weight: 640;
  line-height: 1.25;
  letter-spacing: -.005em;
  color: var(--murekkep);
  text-wrap: balance;
}

.bolum-basligi:first-child, .kart > .bolum-basligi:first-child { margin-top: 0; }

.satir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bosluk-8);
}

.sag-it { margin-left: auto; }

.iki-sutun { display: grid; gap: var(--bosluk-12); }

.ikonlu { display: inline-flex; align-items: center; gap: var(--bosluk-8); }

@media (min-width: 900px) {
  .icerik {
    max-width: 1180px;
    margin: 0 auto;
    padding: var(--bosluk-24) var(--bosluk-24) var(--bosluk-48);
  }
  .iki-sutun { grid-template-columns: 1fr 1fr; gap: var(--bosluk-20); }
  .iki-sutun.dar-sag { grid-template-columns: 2fr 1fr; }
}

/* --- 7. Kart ----------------------------------------------------------------- */
/* Kartlari GOLGE degil 1px cizgi ayirir. Golge yalniz yuzen ogede. */
.kart {
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-kart);
  padding: var(--bosluk-16);
  margin: 0 0 var(--bosluk-12);
}

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

@media (min-width: 700px) {
  .kart { padding: var(--bosluk-20); }
}

/* IC ICE KART YASAK. Kaza ile ic ice yazilirsa ikinci cerceve cizilmez;
   ic gruplar cizgi ve bosluklarla ayrilir (.kart-ayrac). */
.kart .kart {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.kart-baslik {
  display: flex;
  align-items: center;
  gap: var(--bosluk-8);
  margin: 0 0 var(--bosluk-12);
  font-size: var(--olcu-kart-baslik);
  font-weight: 620;
  line-height: 1.3;
  color: var(--murekkep);
}

.kart-ayrac {
  height: 1px;
  margin: var(--bosluk-16) 0;
  border: 0;
  background: var(--kenar);
}

/* Hava alan ozet kutusu: yogun tablo ile ayni dolguyu KULLANMAZ. */
.ozet-kutu {
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-kart);
  padding: var(--bosluk-20);
}

/* Sayfada dikkat cekmesi gereken TEK blok icin. Baska blokta tekrarlanmaz. */
.acil-serit { border-left: 3px solid var(--acil); }
.acil-serit.sonuk { border-left-color: var(--kenar-koyu); }

/* --- 8. Dugme (sekiz durum) -------------------------------------------------- */
.dugme {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bosluk-8);
  min-height: 44px;   /* dokunma hedefi: telefondan kullaniliyor */
  min-width: 44px;
  padding: 10px var(--bosluk-20);   /* sag dolgu yukleniyor halkasina yer acar */
  border: 1px solid transparent;
  border-radius: var(--kose-alan);
  background: var(--ana);
  color: var(--ana-metin);
  font: inherit;
  font-size: var(--olcu-govde);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--sure-hizli) var(--yumusak),
              border-color var(--sure-hizli) var(--yumusak),
              transform var(--sure-hizli) var(--yumusak);
}

.dugme:hover { background: var(--ana-acik); }
.dugme:active { transform: scale(.97); }

.dugme:disabled, .dugme[disabled], .dugme[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;   /* sebebi title ile yazilir */
  transform: none;
}
.dugme:disabled:hover, .dugme[disabled]:hover { background: var(--ana); }

.dugme.yesil { background: var(--basla); }
.dugme.yesil:hover { background: #126D34; }
.dugme.turuncu { background: var(--duraklat); }
.dugme.turuncu:hover { background: #A93709; }
.dugme.mavi { background: var(--bitir); }
.dugme.mavi:hover { background: #1943B8; }
.dugme.kirmizi { background: var(--tehlike); }
.dugme.kirmizi:hover { background: #9E1818; }

.dugme.sade {
  background: var(--yuzey);
  border-color: var(--kenar-koyu);
  color: var(--ana);
}
.dugme.sade:hover { background: var(--yuzey-2); border-color: var(--murekkep-3); }
.dugme.sade:disabled:hover, .dugme.sade[disabled]:hover { background: var(--yuzey); }

/* Islem sonucu geri bildirimi (7. bolum: animasyon yalniz durum degisiminde). */
.dugme.basarili { background: var(--d-bitti); }
.dugme.basarili:hover { background: var(--d-onaylandi); }
.dugme.hata { background: var(--acil); }
.dugme.hata:hover { background: #9E1818; }

.dugme.genis { width: 100%; }
.dugme.buyuk { min-height: 52px; padding: 14px var(--bosluk-24); font-size: 17px; }
.dugme.kucuk { min-height: 44px; padding: var(--bosluk-8) var(--bosluk-16); font-size: var(--olcu-ikincil); }

/* Yukleniyor: metin YERINDE kalir, yaninda 14px donen halka cikar, dugme
   genisligi DEGISMEZ (sayfa zipilamaz).
   Taban yol: halka mutlak konumlu, sag ic bosluga oturur -> akista yer kaplamaz. */
.dugme[aria-busy="true"] { cursor: progress; }
.dugme[aria-busy="true"]::after {
  content: '';
  position: absolute;
  top: 50%;
  right: var(--bosluk-4);
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: .85;
  animation: dugme-donen 700ms linear infinite;
}
.dugme.kucuk[aria-busy="true"]::after { width: 12px; height: 12px; margin-top: -6px; }

/* Ikonlu dugmede halka IKONUN YERINI alir: ikon akistan cikar, yerine tam ayni
   20px'i dolduran halka girer (14 + 3 + 3). Genislik yine degismez ama halka
   ortalanmis ve .genis dugmede de dogru yerde durur, metnin uzerine binmez.
   :has() tanimayan tarayicida yukaridaki sag kenar halkasi gecerli kalir. */
.dugme[aria-busy="true"]:has(> svg) > svg,
.dugme[aria-busy="true"]:has(> svg)::after { display: none; }

.dugme[aria-busy="true"]:has(> svg)::before {
  content: '';
  flex: none;
  width: 14px;
  height: 14px;
  margin: 0 3px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: .85;
  animation: dugme-donen 700ms linear infinite;
}

@keyframes dugme-donen { to { transform: rotate(360deg); } }
@keyframes dugme-nabiz { 0%, 100% { opacity: .25; } 50% { opacity: .9; } }

/* --- 9. Form ----------------------------------------------------------------- */
.alan { display: block; margin: 0 0 var(--bosluk-16); }

/* Placeholder etiket yerine gecmez: her alanin ustunde gercek <label> durur. */
.etiket {
  display: block;
  margin: 0 0 var(--bosluk-4);
  font-size: var(--olcu-ikincil);
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--murekkep-2);
}

input[type="text"], input[type="password"], input[type="email"], input[type="search"],
input[type="date"], input[type="time"], input[type="number"], input[type="tel"],
select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px var(--bosluk-12);
  border: 1px solid var(--kenar-koyu);
  border-radius: var(--kose-alan);
  background: var(--yuzey);
  color: var(--murekkep);
  font-family: inherit;
  font-size: 16px;   /* 16px altinda mobil tarayici alana odaklaninca sayfayi yakinlastiriyor */
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--sure-hizli) var(--yumusak);
}

textarea { min-height: 96px; resize: vertical; line-height: 1.5; }

input::placeholder, textarea::placeholder { color: var(--murekkep-3); }

input:hover, select:hover, textarea:hover { border-color: var(--murekkep-3); }

input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--vurgu);
  outline: 2px solid var(--vurgu);
  outline-offset: 2px;
}

input:disabled, select:disabled, textarea:disabled {
  background: var(--yuzey-2);
  color: var(--murekkep-3);
  cursor: not-allowed;
}

.ipucu { color: var(--murekkep-2); font-size: var(--olcu-ikincil); margin: var(--bosluk-4) 0 0; }

.form-hata {
  display: flex;
  align-items: flex-start;
  gap: var(--bosluk-8);
  margin: 0 0 var(--bosluk-12);
  padding: var(--bosluk-12);
  border: 1px solid var(--acil);
  border-radius: var(--kose-alan);
  background: var(--acil-zemin);
  color: #8E1616;
  font-size: var(--olcu-ikincil);
  font-weight: 500;
}
.form-hata svg { color: var(--acil); }

/* --- 10. Rozet ve durum etiketleri ------------------------------------------- */
/* Renk tek basina anlam tasimaz: her rozetin ICINDE metin etiketi vardir. */
.rozet,
.durum-atandi, .durum-goruldu, .durum-devam, .durum-beklemede,
.durum-bitti, .durum-onaylandi, .durum-iptal {
  display: inline-flex;
  align-items: center;
  gap: var(--bosluk-4);
  padding: 2px var(--bosluk-8);
  border: 1px solid transparent;
  border-radius: var(--kose-rozet);
  font-size: var(--olcu-ust-etiket);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

.rozet { background: var(--yuzey-2); border-color: var(--kenar); color: var(--murekkep-2); }

/* Iki rozet ailesi ayni karta yan yana geliyor (oncelik + durum). Ayirt edilsin
   diye ONCELIK cizgili/bos, DURUM dolu tondur. Ikisi de ayni dolu tonda olunca
   telefonda "Yuksek" ile "Atandi" birbirinden ayirt edilemiyordu. */
.rozet.oncelik-dusuk { background: var(--yuzey); border-color: var(--kenar); color: var(--murekkep-3); }
.rozet.oncelik-normal { background: var(--yuzey); border-color: var(--kenar-koyu); color: var(--murekkep-2); }
.rozet.oncelik-yuksek { background: var(--yuzey); border-color: var(--uyari); color: var(--uyari); }

/* .acil ailenin en yuksegi: cizgi + hafif ton. Dolu kirmizi YALNIZ .sayac'ta,
   yoksa sayfa bastan asagi kirmiziya boyanir ve hicbir sey one cikmaz. */
.rozet.acil { background: var(--acil-zemin); border-color: var(--acil); color: var(--acil); }

.rozet.sayac {
  min-width: 22px;
  justify-content: center;
  background: var(--acil);
  border-color: var(--acil);
  color: #FFFFFF;
}

.durum-atandi { background: var(--d-atandi-zemin); color: var(--d-atandi); }
.durum-goruldu { background: var(--d-goruldu-zemin); color: var(--d-goruldu); }
.durum-devam { background: var(--d-devam-zemin); color: var(--d-devam); }
.durum-beklemede { background: var(--d-beklemede-zemin); color: var(--d-beklemede); }
.durum-bitti { background: var(--d-bitti-zemin); color: var(--d-bitti); }
.durum-onaylandi { background: var(--d-onaylandi-zemin); color: var(--d-onaylandi); }
.durum-iptal { background: var(--d-iptal-zemin); color: var(--d-iptal); }

/* --- 11. Tablo --------------------------------------------------------------- */
.tablo-kutu {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--kenar);
  border-radius: var(--kose-kart);
  background: var(--yuzey);
}

/* Kartin icindeki tablo KENDI cercevesini cizmez: cerceve icinde cerceve
   "ic ice kart" demektir. Kayma davranisi (overflow) korunur. */
.kart .tablo-kutu { border: 0; border-radius: 0; }

.tablo {
  width: 100%;
  border-collapse: collapse;
  background: var(--yuzey);
  font-size: var(--olcu-govde);
  font-variant-numeric: tabular-nums;
}

.tablo th, .tablo td {
  padding: var(--bosluk-12) var(--bosluk-16);
  text-align: left;
  vertical-align: middle;
  line-height: 1.35;
  border-bottom: 1px solid var(--kenar);
}

.tablo th {
  background: var(--yuzey-2);
  color: var(--murekkep-2);
  font-size: var(--olcu-ust-etiket);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tablo tbody tr { height: 44px; }
.tablo tbody tr:hover td { background: var(--yuzey-2); }
.tablo tbody tr:last-child td { border-bottom: 0; }
.tablo td.sayi, .tablo th.sayi { text-align: right; white-space: nowrap; }

/* Dar ekranda tablo KENDI icinde kayar; sayfanin tamami yana kaymaz. */
@media (max-width: 640px) {
  .tablo { display: block; overflow-x: auto; white-space: nowrap; }
  .tablo th, .tablo td { padding: var(--bosluk-12); }
}

/* --- 12. Bos durum ----------------------------------------------------------- */
/* Tek satir gri yazi YETMEZ: 32px soluk ikon + baslik + aciklama + tek eylem.
   Yapi:  <div class="bos-durum">
            <span class="bos-ikon">SVG</span>
            <p class="bos-baslik">Acik goreviniz yok</p>
            <p class="bos-yazi">Size yeni bir gorev atandiginda burada gorunur.</p>
            <button class="dugme sade">...</button>
          </div>
   Eski kullanim (kutunun icinde duz metin) da okunur kalsin diye kutu
   ortalanmis ve dolgusu yeterlidir. */
.bos-durum {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;   /* izgarada esitlenip uzayan kutuda icerik ortada kalir */
  gap: var(--bosluk-8);
  min-height: 160px;
  padding: var(--bosluk-32) var(--bosluk-20);
  border: 1px dashed var(--kenar-koyu);
  border-radius: var(--kose-kart);
  background: var(--yuzey);
  color: var(--murekkep-2);
  text-align: center;
  font-size: var(--olcu-ikincil);
}

.bos-ikon {
  display: inline-flex;
  margin-bottom: var(--bosluk-4);
  color: var(--murekkep-3);   /* soluk ama secilebilir; bakisi baslikta tutar */
}
.bos-ikon svg { width: 32px; height: 32px; }

.bos-baslik {
  margin: 0;
  max-width: 46ch;
  font-size: var(--olcu-kart-baslik);
  font-weight: 620;
  line-height: 1.3;
  color: var(--murekkep);
  text-wrap: balance;
}

.bos-yazi {
  margin: 0;
  max-width: 52ch;
  font-size: var(--olcu-ikincil);
  line-height: 1.5;
  color: var(--murekkep-2);
  text-wrap: pretty;
}

.bos-durum .dugme { margin-top: var(--bosluk-4); }

/* --- 13. Lejant (grafik seri aciklamasi) ------------------------------------- */
.lejant {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bosluk-16);
  font-size: var(--olcu-ikincil);
  color: var(--murekkep-2);
}
.lejant > span { display: inline-flex; align-items: center; gap: var(--bosluk-8); }
.lejant-kutu {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--kenar-koyu);
}

/* --- 14. Uyari seridi (Uyari.goster) ----------------------------------------- */
.uyari-kutu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-uyari);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bosluk-8);
  padding: var(--bosluk-12);
  pointer-events: none;
}

.uyari {
  width: 100%;
  max-width: 560px;
  padding: var(--bosluk-12) var(--bosluk-16);
  border: 1px solid transparent;
  border-radius: var(--kose-alan);
  font-size: var(--olcu-ikincil);
  font-weight: 500;
  box-shadow: var(--golge-yuzen);
  animation: uyari-gir var(--sure-yavas) var(--yumusak);
}

.uyari.bilgi { background: var(--ana); border-color: var(--ana); color: var(--ana-metin); }
.uyari.basarili { background: var(--d-bitti); border-color: var(--d-bitti); color: #FFFFFF; }
.uyari.hata { background: var(--acil); border-color: var(--acil); color: #FFFFFF; }

.uyari.gider {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--sure-yavas) var(--yumusak), transform var(--sure-yavas) var(--yumusak);
}

/* scale(0)'dan degil scale(.96) + opacity 0'dan girilir. */
@keyframes uyari-gir {
  from { opacity: 0; transform: translateY(-10px) scale(.96); }
  to { opacity: 1; transform: none; }
}

@keyframes kip-gir {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to { opacity: 1; transform: none; }
}

/* --- 15. Kip (sifre degistirme penceresi, ortak.js Sifre.goster) ------------- */
.kip-ortu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-kip);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--bosluk-16);
  background: rgba(23, 26, 32, .46);
  overflow-y: auto;
}

/* Telefonda klavye acilinca gorunur alan kisalir; ortalama surerse pencere yukari
   kayip basligi kesiliyor (giris ekraninda ayni tuzak yasandi). */
@media (max-height: 620px) {
  .kip-ortu { align-items: flex-start; }
}

.kip {
  width: 100%;
  max-width: 380px;
  padding: var(--bosluk-20);
  border-radius: var(--kose-kart);
  background: var(--yuzey);
  box-shadow: var(--golge-yuzen);
  animation: kip-gir var(--sure-orta) var(--yumusak);
}

.kip-baslik {
  display: flex;
  align-items: center;
  gap: var(--bosluk-8);
  margin: 0 0 var(--bosluk-16);
}

.kip-baslik h2 { margin: 0; font-size: var(--olcu-h2); }

.kip-kapat {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: var(--kose-alan);
  background: transparent;
  color: var(--murekkep-2);
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--sure-hizli) var(--yumusak);
}

.kip-kapat:hover { background: var(--yuzey-2); color: var(--murekkep); }
.kip-kapat:active { transform: scale(.97); }

.kip-govde { margin: 0; }

.kip-dip { display: flex; gap: var(--bosluk-8); margin-top: var(--bosluk-16); }
.kip-dip .dugme { flex: 1 1 0; }

/* Ust bardaki ad kutusu span; tiklanabildigi gorunmezse kimse denemez. */

.ust-bar .sifre-bar-dugme { padding: var(--bosluk-8) var(--bosluk-12); }

/* --- 16. Kucuk yardimcilar --------------------------------------------------- */
.soluk { color: var(--murekkep-2); }
.kucuk-yazi { font-size: var(--olcu-ikincil); }
.kalin { font-weight: 620; }
.gecikme { color: var(--uyari); font-weight: 600; }
.tehlike { color: var(--tehlike); font-weight: 600; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- 17. Hareket kisitlamasi ------------------------------------------------- */
/* Zorunlu: tum gecisler 1ms'e iner, yalniz opacity degisimi kalir. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .dugme:active, .kip-kapat:active, .ust-bar .bar-dugme:active { transform: none; }
  .uyari, .kip { animation: none; }
  /* Yukleniyor geri bildirimi kaybolmasin: donme yerine opacity nabzi. */
  .dugme[aria-busy="true"]::after,
  .dugme[aria-busy="true"]::before {
    animation: dugme-nabiz 1200ms ease-out infinite !important;
    animation-iteration-count: infinite !important;
    animation-duration: 1200ms !important;
  }
}

/* --- 18. Gecis uyumu (ekranlar yenilenene kadar) ----------------------------- */
/* Ekranlarin kendi <style> bloklari ortak.css'ten SONRA yukleniyor ve modal
   ortulerini 70/90'da tutuyor. Ust bar artik olcekteki 200'de; bu iki satir
   olmazsa bar acik modalin UZERINDE kalir. Ekranlar --z-* belirteclerine
   gecince bu blok silinir. */
.ortu, .kutu-fon { z-index: var(--z-kip) !important; }

/* --- 19. Yazdirma (rapor cikti alinabilsin) ---------------------------------- */
@media print {
  body { background: #FFFFFF; color: #000000; font-size: 11pt; }
  .ust-bar, .uyari-kutu, .kip-ortu, .dugme, .filtre, .yazdirma-gizle { display: none !important; }
  .icerik { max-width: none; margin: 0; padding: 0; }
  .kart, .ozet-kutu, .tablo-kutu {
    box-shadow: none;
    border: 1px solid #BBBBBB;
    border-radius: 0;
    margin: 0 0 8mm;
    padding: 4mm;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .tablo-kutu { overflow: visible; padding: 0; }
  .tablo { display: table; white-space: normal; font-size: 10pt; }
  .tablo th { background: #EEEEEE !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tablo th, .tablo td { border: 1px solid #BBBBBB; padding: 4px 6px; }
  .rozet,
  .durum-atandi, .durum-goruldu, .durum-devam, .durum-beklemede,
  .durum-bitti, .durum-onaylandi, .durum-iptal {
    background: transparent !important;
    color: #000000 !important;
    border: 1px solid #666666;
    padding: 1px 6px;
  }
  .bos-durum { border: 1px solid #BBBBBB; }
  a { color: #000000; text-decoration: none; }
}