/* ===========================================================================
   ORTAK STİL — HER EKRAN BUNU YÜKLER.
   ===========================================================================

   🔴 NEDEN VAR: `[hidden]` özniteliği tarayıcının varsayılan stil sayfasında
   `display:none` olarak tanımlıdır — ama o varsayılan, YAZDIĞIMIZ HER
   `display` kuralı tarafından ezilir. Sınıf seçicisi (0,1,0) öznitelik
   seçicisinden (0,1,0) sonra geldiği için `.menu-govde{display:none}` gibi
   masum bir satır `[hidden]`i sessizce iptal eder.

   DÖRT KEZ OLDU ve dördü de aynı sınıf:

     .giris{display:grid}       sinav.html      başlangıç ekranı kapanmadı
     .menu-govde{display:none}  kisi-listesi    Sırala ve Sütunlar açılmadı
     .arama{display:flex}       kisi-listesi    Filtre açılmadı

   Dördüncüsü en öğreticisi: ÜÇÜNCÜSÜNÜ AYNI DOSYADA DÜZELTİRKEN gözden
   kaçtı. Vaka vaka düzeltmek beşincisini üretir; kuralın kendisi tek satır
   ve tüm ekranları kapsamalı.

   🔴 `!important` BİLİNÇLİ. Bu projede genel olarak kaçınılır çünkü cascade'i
   okunmaz kılar — ama burada tam olarak istenen şey budur: `[hidden]` bir
   NİYET bildirimidir ve hiçbir düzen kuralı onu ezmemelidir. Bir öğeyi
   göstermenin yolu özniteliği KALDIRMAKTIR, display yazmak değil.

   Bir ekranın bu dosyayı yüklediği testle sabitlendi (`src/api/rota.test.ts`):
   yeni bir ekran linksiz eklenirse kırmızıya döner — beşinci vaka bu yüzden
   sessizce doğamaz.

   CLAUDE.md yasak #27 (ortak katman) · docs/arayuz.md
   =========================================================================== */

[hidden] { display: none !important; }

/* ===========================================================================
   YATAY TAŞMA — İKİNCİ ORTAK KURAL
   ===========================================================================

   🔴 AYNI HATA İKİ EKRANDA ÇIKTI, ÜÇÜNCÜSÜNDE ÇIKACAKTI:

     katalog.html   geniş tablo ızgara hücresini şişirdi → [+ Yeni] ekran
                    dışına düştü, Osman "yeni ekle yok" diye yaşadı
     kisi-detay     sağ panelin uzun metni 288 px'lik kolonu şişirdi →
                    sayfa yatay kaydı

   Sebep TEK: ızgara/esnek hücresinin örtük `min-width: auto` değeri
   İÇERİĞİNİN min-content genişliğidir. Hücre o boya şişer; içindeki
   `overflow-x: auto` bunu DURDURMAZ, çünkü şişen şey bir üst katmandır.

   İki ayrı ekranda elle düzeltilseydi üçüncüsünde unutulurdu (yasak #27).

   --- 1. Uzun metin SARAR -------------------------------------------------

   `anywhere`, `break-word` DEĞİL: ikisi de satır sonunda kırar ama yalnız
   `anywhere` MIN-CONTENT hesabını da küçültür. Şişmeyi durduran şey tam
   olarak budur; `break-word` görüntüyü düzeltir, taşmayı düzeltmez.

   🔴 KURAL `body`ye YAZILMIŞTI VE FAZLA GENİŞTİ — GERİ ALINDI.
   `anywhere` kelimeyi HER YERDEN kırabilir; dar bir kapta bunu harf harf
   yapar. Sol menünün dar kipinde *"sürüm …"* ve *"Daralt"* alt alta tek
   harf olarak döküldü. Osman ekran görüntüsüyle gösterdi.

   Ders: min-content'i küçülten bir kural GLOBAL yazılmaz. Kuralın gerektiği
   yer, mirası çözülen sabit genişlikli PANELDİ — genel bir sayfa kuralı
   değil. Artık `.daralabilir` ile birlikte geliyor: daralabilen kap, uzun
   metni de sarabilmeli. İkisi aynı ihtiyacın iki yüzü.

   `white-space: nowrap` taşıyan öğeler bundan etkilenmez — nowrap üstün
   gelir; menü bileşeni kendi kuralını `kabuk.js`te ayrıca yazıyor. */

/* --- 2. Izgara/esnek hücresi DARALABİLİR ---------------------------------

   Genel bir `* { min-width: 0 }` yazılmadı: bazı yerlerde içerik kadar
   genişlemek DOĞRU davranıştır ve hepsini kısmak başka düzenleri bozardı.
   Bunun yerine adı olan bir sınıf — yazan kişi ne yaptığını bilerek
   yazıyor, ve `katalog-ekrani.test.ts` uygulandığını ölçüyor. */
.daralabilir { min-width: 0; overflow-wrap: anywhere; }

/* ===========================================================================
   TABLO TAŞMASI — ORTAK DAVRANIŞ *(kurucu 21.08.2026)*

   🔴 ÖLÇÜLDÜ, gözle bakılmadı (`npm run sur … tasma:`):
       /raporlar/duzeltme-bekleyenler  1024 → 361px DIŞARIDA
                                       1280 → 105px DIŞARIDA
                                       1440 → taşma yok
       /kisiler · /ogrenciler          1280 ve 1440 → taşma yok

   🔴 NEDEN `ortak.css`, NEDEN `liste-bileseni.js` DEĞİL: ölçüldü —
   `duzeltme-bekleyenler.html` `LISTE_STIL`i **hiç almıyor**. Kuralı
   oraya yazmak, taşan ekranın dışında kalırdı. `ortak.css` dördüne de
   ulaşıyor; *"tek yerde çöz"* şartı ancak GERÇEKTEN ulaşan yerde
   sağlanır.

   🔴 İKİ SARMALAYICI ADI VAR ve ikisi de kapsanıyor: `.kaydir`
   *(kisi/kayit listesi)* ve `.tablo-sar` *(liste bileşeni · raporlar)*.
   Birini yazıp öbürünü unutmak, beşinci ekranda yine taşmaktır.
   =========================================================================== */

/* 🔴 `min-width:0` ŞART: esnek kutunun varsayılanı `min-width:auto` ve
   içeriğinden dar olmayı REDDEDER — sarmalayıcı büyür, düzeni iter. */
.kaydir, .tablo-sar { overflow-x: auto; min-width: 0; max-width: 100% }

/* ===========================================================================
   TABLO GENİŞLİĞİ — LISTE-YALIN A1·A2 (kurucu Chrome turu 06.09.2026)

   🔴 SABİT YERLEŞİM KALDIRILDI. `table-layout:fixed` sütunlara EŞİT pay
   veriyordu ve sonuç ölçüldü: «58.500,00 ₺» ile «28.10.2026» kesiliyor,
   sağda boş şerit kalıyordu. Kesilme bir TÜR meselesi:

     PARA · TARİH · ROZET · KİMLİK · SAYI → asla kesilmez (nowrap + asgari
                                            genişlik, içeriğine daralır)
     METİN (ad soyad · açıklama · program) → artan yeri paylaşır, kesilme
                                            YALNIZ burada, tamı `title`de

   🔴 KURAL BURADA, LISTE_STIL'DE DEĞİL: Kişiler ve Öğrenciler kendi
   tablolarını çiziyor ve ortak bileşenin sınıfını taşımıyor; kuralı
   bileşene bağlamak o iki ekranı — kesilmenin en çok görüldüğü yerleri —
   kapsam dışında bırakırdı (yasak #27).
   =========================================================================== */
.kaydir > table, .tablo-sar > table { table-layout: auto; width: 100% }
.kaydir > table th, .kaydir > table td,
.tablo-sar > table th, .tablo-sar > table td {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Tür sütunları: içeriğine daralır, KESİLMEZ. Asgari genişlikler türün en
   uzun gerçek değerinden ölçüldü (para «58.500,00 ₺» · tarih «28.10.2026
   14:24» · rozet «Sonuç girilmedi» · kimlik «0533 *** ** 96») VE BAŞLIK
   METNİNDEN: 1024 pikselde «SON GÖRÜŞME» başlığı kesiliyordu — sütun
   değeri sığdırıp başlığı kesmek, sütunun ne olduğunu gizler. */
.kaydir > table th.t-para, .kaydir > table td.t-para,
.tablo-sar > table th.t-para, .tablo-sar > table td.t-para,
.kaydir > table th.t-tarih, .kaydir > table td.t-tarih,
.tablo-sar > table th.t-tarih, .tablo-sar > table td.t-tarih,
.kaydir > table th.t-rozet, .kaydir > table td.t-rozet,
.tablo-sar > table th.t-rozet, .tablo-sar > table td.t-rozet,
.kaydir > table th.t-kimlik, .kaydir > table td.t-kimlik,
.tablo-sar > table th.t-kimlik, .tablo-sar > table td.t-kimlik,
.kaydir > table th.t-sayi, .kaydir > table td.t-sayi,
.tablo-sar > table th.t-sayi, .tablo-sar > table td.t-sayi {
  width: 1px; white-space: nowrap; overflow: visible; text-overflow: clip;
}
.kaydir > table th.t-para, .tablo-sar > table th.t-para,
.kaydir > table td.t-para, .tablo-sar > table td.t-para { min-width: 112px }
.kaydir > table th.t-tarih, .tablo-sar > table th.t-tarih,
.kaydir > table td.t-tarih, .tablo-sar > table td.t-tarih { min-width: 112px }
.kaydir > table th.t-rozet, .tablo-sar > table th.t-rozet,
.kaydir > table td.t-rozet, .tablo-sar > table td.t-rozet { min-width: 112px }
.kaydir > table th.t-kimlik, .tablo-sar > table th.t-kimlik,
.kaydir > table td.t-kimlik, .tablo-sar > table td.t-kimlik { min-width: 124px }
.kaydir > table th.t-sayi, .tablo-sar > table th.t-sayi,
.kaydir > table td.t-sayi, .tablo-sar > table td.t-sayi { min-width: 88px }
/* İşlem sütunu (⋯) dar ve sabit — tür sütunu değil. */
.kaydir > table th.s-islem, .tablo-sar > table th.s-islem,
.kaydir > table td.s-islem, .tablo-sar > table td.s-islem { width: 44px; min-width: 44px }
/* METİN: artan yeri paylaşır; kesilme yalnız burada. */
.kaydir > table th.t-metin, .tablo-sar > table th.t-metin,
.kaydir > table td.t-metin, .tablo-sar > table td.t-metin {
  width: auto; min-width: 140px;
}
/* Toplam satırı hiçbir zaman kesilmez (A3). */
.kaydir > table tr.toplam-satiri td, .tablo-sar > table tr.toplam-satiri td {
  white-space: nowrap; overflow: visible;
}
/* Ad sütunu bilerek sarar — kısaltmak okunmaz kılardı. */
.kaydir > table td.s-ad, .tablo-sar > table td.s-ad { white-space: normal }

/* 🔴 SON SÜTUN YAPIŞKAN — ÜÇÜNCÜ YOL *(kurucu onayı 21.08.2026)*.

   İki kusurlu seçenek ölçülmüştü:
     `table-layout:fixed` + kırpma → tablo sığar, EYLEM DÜĞMESİ kesilir
     son sütun korunur              → düğme okunur, tablo 121px kayar

   Üçüncüsü ikisini de çözüyor: sütun sağa **yapışır**, tablo kaysa
   bile düğme **görünür kalır**. Kaydırma sürüyor ama artık bedeli yok.

   🔴 ARKA PLAN ŞART: yapışkan hücre saydam olursa altından kayan
   sütunlar geçer ve okunmaz hâle gelir. 

   🔴 **`:last-child` DEĞİL `.s-islem`** *(düzeltildi 23.08.2026)*.
   Kural son sütunu AYRIM YAPMADAN `width:1%` yapıyordu; eylem sütunu
   olmayan ekranlarda son sütun bunu yiyordu. Ölçüldü: CRM arama
   kuyruğunda son sütun «Durum» ve **9 piksele** düşüyordu — kendi
   kuralı (`.kuyruk-tablo .s-durum{width:78px}`) daha DÜŞÜK özgüllükte
   olduğu için eziliyordu.

   *Yasak #64'ün CSS yüzü: ölçüt "son sütun" değil "EYLEM sütunu"
   olmalıydı — konum, rolün yerine geçmez.* */
.kaydir > table th.s-islem, .kaydir > table td.s-islem,
.tablo-sar > table th.s-islem, .tablo-sar > table td.s-islem {
  width: 1%; white-space: nowrap; overflow: visible;
  position: sticky; right: 0; z-index: 1;
}
.kaydir > table tbody td.s-islem,
.tablo-sar > table tbody td.s-islem { background: var(--n0) }
.kaydir > table thead th.s-islem,
.tablo-sar > table thead th.s-islem { background: var(--n2); z-index: 2 }
/* Satır vurgusu yapışkan hücreyi de kapsasın — yoksa hücre "kopuk" durur. */
.kaydir > table tbody tr:hover td.s-islem,
.tablo-sar > table tbody tr:hover td.s-islem { background: var(--n1) }
/* Kaydırıldığını gösteren ince ayraç. */
.kaydir > table td.s-islem, .tablo-sar > table td.s-islem,
.kaydir > table th.s-islem, .tablo-sar > table th.s-islem {
  box-shadow: -6px 0 6px -6px rgba(0,0,0,.18);
}

/* ===========================================================================
   SATIR YOĞUNLUĞU — TEK ÖLÇÜ *(kurucu 21.08.2026)*

   🔴 Ölçüldü: Kişiler ~44px, CRM kuyruğu ~120px. Tasarım kararı
   *"yoğun · hızlı · sade"* *(`docs/arayuz.md`)* ve iki ekran iki ayrı
   yoğunlukta duruyordu.

   🔴 ÖLÇÜ `kisi-listesi.html` İÇİNDE TANIMLIYDI — yani ortak değildi ve
   ikinci ekran onu göremiyordu. Artık `ortak.css`te; her ekran aynı
   değeri okuyor *(yasak #27)*.
   =========================================================================== */
:root { --satir: 34px }

/* Liste tablolarının satır yüksekliği — sarmalayıcı hangi ad olursa olsun. */
.kaydir > table tbody td, .tablo-sar > table tbody td {
  height: var(--satir); padding-top: 0; padding-bottom: 0;
}

/* ===========================================================================
   "HENÜZ HAZIR DEĞİL" SEBEBİ — GÖRÜNÜR *(kurucu 21.08.2026)*

   🔴 Sebep önce `title` içindeydi: yalnız SOLUK RENK görünüyordu ve
   fareyle üstünde bekleyen kimse sebebi okumuyordu.

   🔴 VE KURALI İKİ KEZ YANLIŞ YERE YAZDIM: önce `ISKELET_STIL`e —
   ölçüldü, `duzeltme-bekleyenler.html` onu **hiç almıyor**, yalnız
   `KABUK_STIL` enjekte ediyor. Ekran görüntüsü gösterdi:
   "Dönüşüm hunisihenüz hazır değil" yan yana duruyordu.
   `ortak.css` her ekrana ulaşıyor — ölçülen tek yer burası.
   =========================================================================== */
.kenar .yok { line-height: 1.25 }
.kenar .yok small { display: block; font-size: var(--yazi-min); color: var(--n4);
  margin-top: 1px; line-height: 1.2 }


/* ══ MODÜL KENAR ÇUBUĞU — TEK KAYNAK ══════════════════════════════════
   🔴 Kurallar `kabuk.js > ISKELET_STIL` içindeydi ve **hiçbir ekran onu
   enjekte etmiyordu** (ölçüldü 22.08: 13 ekranın 13'ü). `ortak.css` ise
   ekranların HEPSİNDE `<link>` ile duruyor — kural artık ulaşıyor.

   🔴 İKİ SÜTUNU `:has()` KURUYOR, ekran başına sınıf eklenmedi. Ölçüt:
   *"`#icerik`in doğrudan çocuğu bir kenar çubuğu mu"*. `.duzen`
   kullanan ekranlar (CRM · Öğrenciler · Kişiler · kişi kartı) kendi
   ızgaralarını kuruyor ve bu kural onlara HİÇ değmiyor.

   🔴 Ekranın kendi `<style>` bloğu bundan SONRA geliyor: kendi kuralını
   yazmış bir ekran (gider.html · kayit-listesi.html) aynen kalıyor.
   Burası yalnız hiç kuralı olmayanı kurtarıyor. */
#icerik:has(> .kenar) {
  display: grid; grid-template-columns: 184px 1fr;
  height: 100%; min-height: 0;
}
#icerik:has(> .kenar) > .sayfa { min-height: 0; overflow-y: auto }
.kenar { background: var(--n2); border-right: 1px solid var(--n3);
  padding: 14px 0; overflow-y: auto }
.kenar h1 { font-size: var(--yazi-md, 13px); font-weight: 600; padding: 0 14px 10px }
.kenar .grup { font-size: var(--yazi-min); font-weight: 600; color: var(--n5);
  padding: 10px 14px 4px; text-transform: uppercase; letter-spacing: .03em }
.kenar a { display: block; padding: 6px 14px; font-size: 13px;
  color: var(--n6); cursor: pointer; text-decoration: none }
.kenar a:hover { background: var(--n3) }
/* 🔴 ÇUBUKTA VURGU RENGİ YOK (TEMA-DUZELTME-1): seçili madde bir ton koyu
   zeminle ayrılıyor, renkle değil — vurgu yalnız birincil düğmede. */
.kenar a.aktif { background: var(--n0); font-weight: 600; color: var(--n7);
  box-shadow: inset 2px 0 0 var(--n4) }
.kenar .yok { display: block; padding: 6px 14px; font-size: 13px;
  color: var(--n5) }


/* ══ TAHSİLAT FORMU — TEK KAYNAK ══════════════════════════════════════
   🔴 Kurallar `cari-hesap.html`in kendi <style> bloğundaydı; formu ORTAK
   BİLEŞEN (`tahsilat-formu.js`) çiziyor ama STİLİ tek ekranda duruyordu.
   Kişi kartına «Hızlı tahsilat» eklenince form oraya **çıplak** düştü:
   etiketler üst üste, kutular tarayıcı varsayılanı, düğme sıradan.

   Aynı sınıf bu hafta üçüncü kez: `.kenar` · «henüz hazır değil» · şimdi
   tahsilat formu. Bileşen ortak, kuralı ortak DEĞİL — bileşenin gittiği
   her yere kuralı da gitmeli (yasak #27 · #43).

   Ekranın kendi <style> bloğu bundan SONRA geldiği için `cari-hesap.html`
   aynen çalışmaya devam ediyor. */
.tahsilat-formu .alan { display: flex; flex-direction: column; gap: 4px; margin-bottom: 11px }
.tahsilat-formu .alan label { font-size: 12px; color: var(--n6) }
/* 🔴 `background` KISAYOLU DEĞİL `background-color`: kısayol
   `background-image`i de sıfırlar ve açılır kutunun OKUNU siler.
   Ölçüldü (22.08, ekran görüntüsü): «Yöntem» ve «Kasa» kutularında ok
   kayboldu, «Hangi kayda?» kutusunda durdu — farkı yaratan tek şey bu
   satırdı. */
.tahsilat-formu .alan input, .tahsilat-formu .alan select,
.tahsilat-formu .alan textarea {
  padding: 8px 10px; border: 1px solid var(--n4); border-radius: 7px;
  font: inherit; font-size: 14px; background-color: var(--n0);
  color: var(--n7); width: 100%; min-width: 0 }
.tahsilat-formu .alan select { padding-right: 30px }
.tahsilat-formu .alan input:focus, .tahsilat-formu .alan select:focus {
  outline: 2px solid var(--vurgu); outline-offset: -1px; border-color: var(--vurgu) }
.tahsilat-formu .alan .zorunlu { color: var(--kirmizi) }
.tahsilat-formu .alan .ipucu { font-size: var(--yazi-min); color: var(--n5) }
.tahsilat-formu .alan.hatali input, .tahsilat-formu .alan.hatali select { border-color: var(--kirmizi) }
.tahsilat-formu .ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.tahsilat-formu .alt { display: flex; gap: 9px; margin-top: 4px }
/* 🔴 DAĞILIM ÖNİZLEMESİ — «bu tutar şunları kapatır» kutusu. */
.tahsilat-formu .onizleme { margin-top: 10px; padding: 10px 12px; background: var(--n1);
  border: 1px solid var(--n3); border-radius: 8px; font-size: 13px }
.tahsilat-formu .onizleme ul { margin: 6px 0 0 16px }
.tahsilat-formu .onizleme .artan { margin-top: 6px; color: var(--n6) }
@media (max-width: 620px) { .tahsilat-formu .ikili { grid-template-columns: 1fr } }
/* Kaydet düğmesi — kuralı ISKELET_STIL'deydi ve bu ekrana ULAŞMIYORDU. */
.tahsilat-formu button.birincil { height: 34px; padding: 7px 15px; border: 0;
  border-radius: 7px; cursor: pointer; background: var(--vurgu); color: #fff;
  font: inherit; font-size: 13px; font-weight: 600; margin-top: 10px }
.tahsilat-formu button.birincil:disabled {
  background: var(--n4); cursor: not-allowed }


/* ══ FORM DENETİMLERİ — ŞABLON ══════════════════════════════════════
   🔴 KURAL `kabuk.js > ISKELET_STIL` İÇİNDEYDİ VE HİÇBİR EKRANA
   ULAŞMIYORDU — bu haftanın beşinci aynı vakası (`.kenar` · «henüz
   hazır değil» · tahsilat formu · birincil düğme · şimdi form
   denetimleri). Sonuç: açılır kutular tarayıcı varsayılanıyla,
   ekrandan ekrana farklı görünüyordu.

   🔴 AÇILIR KUTUNUN OKU KENDİMİZİN: `appearance:none` yerli oku
   kaldırıyor, yerine gömülü bir SVG konuyor. Gömülü çünkü dış istek
   yapan bir simge, ağ yavaşken kutuyu oksuz bırakır.

   Ekranın kendi <style> bloğu bundan SONRA geldiği için kendi kuralını
   yazmış ekranlar aynen kalıyor. */
select, textarea,
input[type=text], input[type=search], input[type=number],
input[type=date], input[type=datetime-local], input[type=tel],
input[type=email], input[type=password] {
  padding: 7px 10px; border: 1px solid var(--n4); border-radius: 7px;
  background: var(--n0); color: var(--n7); font: inherit; font-size: 13.5px;
  line-height: 1.35; min-width: 0;
}
select:focus, textarea:focus, input:focus {
  outline: 2px solid var(--vurgu); outline-offset: -1px;
  border-color: var(--vurgu);
}
select:disabled, input:disabled, textarea:disabled {
  background: var(--n2); color: var(--n5); cursor: not-allowed;
}
textarea { resize: vertical }

select {
  appearance: none; -webkit-appearance: none;
  padding-right: 30px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238e8e93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
select:hover { border-color: var(--n5) }
/* Ok, kapalı kutuda da SOLGUN kalır: tıklanamayan bir kutu tıklanabilir
   görünmemeli (yasak #31'in görsel yüzü). */
select:disabled { cursor: not-allowed; opacity: .7 }

/* 🔴 İKİNCİL DÜĞME — «Temizle» ÇIPLAKTI (kurucu bildirdi 22.08).
   Kuralı yine ISKELET_STIL'deydi. */
button.ikincil {
  height: 34px; padding: 7px 14px; border: 1px solid var(--n4);
  border-radius: 7px; background: var(--n0); color: var(--n7);
  font: inherit; font-size: 13px; cursor: pointer;
}
button.ikincil:hover { background: var(--n2) }
button.birincil {
  height: 34px; padding: 7px 15px; border: 0; border-radius: 7px;
  background: var(--vurgu); color: #fff; font: inherit; font-size: 13px;
  font-weight: 600; cursor: pointer;
}
button.birincil:hover { filter: brightness(1.08) }
button:disabled { opacity: .55; cursor: not-allowed }
/* 27c1 «görsel kilit»: tıklamayı YUTMAYAN kilit. `disabled` düğmede tarayıcı click
   üretmez — alan değişip yazım dönmeden basılan tık kayboluyordu. Kilit görünür,
   tık ekrana ulaşır, ekran son değerle yeniden doğrular (docs/arayuz.md). */
button[aria-disabled="true"] { opacity: .55; cursor: not-allowed }


/* ===========================================================================
   SAYFA İSKELETİ VE METİN İLKELLERİ — ortak bileşene geçen ekranlar için
   (28.08.2026)

   🔴 BU SINIFLAR ONCE HER EKRANIN KENDI `<style>` BLOGUNDA YAZILIYORDU.
   Ortak bilesene gecen ekranlarin artik kendi CSS'i yok; bu ilkeller
   paylasilan katmanda durmali. `ekran-stili` bekcisi eksikligi yakaladi
   (yasak #43'un dorduncu sebebi: kural HIC YAZILMAMIS).
   =========================================================================== */
.sayfa{height:100%; overflow:auto; padding:18px 22px}
.kolon{max-width:900px; display:flex; flex-direction:column; gap:14px}
.baslik{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.baslik h1{font-size:var(--yazi-lg, 16px); font-weight:600}
.baslik .sayi{color:var(--n5); font-size:13px}
.baslik .bosluk{flex:1}

/* Solgun: ikincil bilgi. `—` isaretleri ve yardimci metinler. */
.solgun{color:var(--n5)}
/* Tek: rakam ve tarih — sabit genislikte okunur. */
.tek{font-variant-numeric:tabular-nums}
/* Uyari kutusu: bilinen bir eksik ya da dikkat isteyen bir kural. */
.uyari{background:#fdf3e0; border:1px solid #f0d9a8; border-radius:8px;
  padding:10px 12px; font-size:12.5px; color:#7a5300}
/* Menu/liste icinde secili satir. */
.secili{background:var(--n2); font-weight:600}

/* Supheli gun: 16 saati asan hesap — toplama KATILIR, ayri renkte
   gorunur (EK D2). Unutulmus cikis belirtisi. */
.supheli{color:#8a5a00; font-weight:600}
.supheli-satir td{background:#fdf8ee}
/* Tiklanabilir liste satiri. */
/* GRUP BASLIGI (FIYAT-EKRAN-OKUNUR): ayni ad her satirda tekrar etmesin.
   Yapiskan: uzun grup kaydirilirken hangi grupta oldugun ekranda kalir. */
tr.grup-satiri > td{position:sticky; top:0; z-index:2;
  background:var(--n2); color:var(--n7); font-weight:600;
  /* 38b ÖN-e (D943 gece kırmızısı): 11 px (--yazi-ufak) → 12 px — protokol ekranlarının «12 px altı yazı 0» kuralı; grup
     başlığı ortak katmanda, tek satırla hepsi. */
  font-size:var(--yazi-kucuk); letter-spacing:.02em;
  padding:5px 10px; border-top:1px solid var(--n3); border-bottom:1px solid var(--n3)}
/* 16c-1: grup başlığındaki eylem (düğme) sağa yaslanır. */
tr.grup-satiri .grup-eylem{float:right}
/* Dar ekranda dusen sutun sayisi — sessiz kaybolma yok (yasak #29). */
.kutu-basi .dar-rozet{margin-left:8px; font-weight:400; color:var(--n6);
  background:var(--n2); border-radius:10px; padding:1px 8px;
  font-size:var(--yazi-ufak); white-space:nowrap}
tr.satir{cursor:pointer}
tr.satir:hover td{background:var(--n2)}

/* ===========================================================================
   «YAKINDA» — hazır olmayan menü maddeleri grubun SONUNDA (LISTE-YALIN B11)

   🔴 Başlık, öbür grup başlıklarından DAHA SESSİZ: aynı ağırlıkta olsaydı
   yazılmamış bölümler menüde yazılmışlar kadar yer kaplardı. Kural § 7.5 b:
   hazır olmayan modül pasif ve SONDA.
   =========================================================================== */
.grup.yakinda { opacity: .55; letter-spacing: .04em; margin-top: 2px }

/* ===========================================================================
   KALICI BİLGİ NOTU (LISTE-YALIN B9) — tek satır, sessiz, kapatılabilir.

   🔴 GERÇEK UYARI BÜYÜK KALIR. Bu kutu «her gün aynı şey» diyen notlar
   için: POS/havale valörü, arama saatleri. Kilit · eksik · hata uyarıları
   kendi büyük kutularında duruyor — ayrım büyüklükle yapılıyor.
   =========================================================================== */
.bilgi-notu { display: flex; align-items: center; gap: 8px; margin: 6px 0;
  padding: 5px 10px; border: 1px solid var(--n3, #e8e8ea); border-radius: 7px;
  background: var(--n1, #fafafa); color: var(--n6, #48484a); font-size: 12.5px;
  line-height: 1.45 }
.bilgi-notu .bn-simge { color: var(--n5, #8e8e93); flex: none }
.bilgi-notu .bn-metin { flex: 1; min-width: 0 }
.bilgi-notu .bn-metin b { font-weight: 600; color: var(--n7, #1c1c1e) }
.bilgi-notu .bn-kapat { flex: none; border: 0; background: none; cursor: pointer;
  color: var(--n5, #8e8e93); font-size: 15px; line-height: 1; padding: 2px 6px;
  border-radius: 5px }
.bilgi-notu .bn-kapat:hover { background: var(--n2, #f4f4f5); color: var(--n7, #1c1c1e) }

/* ===========================================================================
   DAR EKRANDA GİZLENEN SÜTUN (LISTE-YALIN-2 · 2)

   🔴 KURAL BURADA, MODÜLDE DEĞİL. Sınıf `dar-ekran.js`ten geliyordu ama
   stili yalnız iki ekranın enjekte ettiği sabitteydi: CRM kuyruğunda hücre
   sınıfı ALIYOR, hiçbir şey OLMUYORDU — ölçüm «gizledim» diyor, ekran
   göstermeye devam ediyordu (yasak #23: sessizce onaylayan araç).
   =========================================================================== */
.darda-gizli { display: none !important }

/* ===========================================================================
   ÖZET ŞERİDİ (TALEP-MUHASEBE-SADE B3) — bir listenin başında duran
   «kuyruğun tamamı» kutuları.

   🔴 ORTAK KATMANDA, EKRANDA DEĞİL. Geciken taksitler ilk kullanıcı;
   vadesi gelenler ve personel carisi aynı kutuyu isteyecek. Üçüncü ekran
   kendi kopyasını yazsaydı biri güncellenir, öbürü geride kalırdı
   (yasak #27).

   🔴 KUTULAR SÜZGEÇTEN BAĞIMSIZ OLDUĞUNU KENDİ YAZIYOR: `.ozet-not`
   satırı kaldırılırsa kutular «süzülmüş sonuç» diye okunur (yasak #51).
   =========================================================================== */
.ozet-seridi { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px;
  margin: 8px 0 12px }
.ozet-kutu { flex: 1 1 180px; min-width: 160px; padding: 9px 12px;
  border: 1px solid var(--n3, #e8e8ea); border-radius: 9px;
  background: var(--n0, #fff) }
.ozet-kutu.iyi { border-color: #cbe3d3 }
.ozet-kutu.solgun { background: var(--n1, #fafafa); color: var(--n6, #48484a) }
.ozet-kutu .ozet-ad { font-size: var(--yazi-min); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--n5, #8e8e93) }
.ozet-kutu .ozet-tutar { font-size: 19px; font-weight: 600; margin-top: 3px;
  font-variant-numeric: tabular-nums; white-space: nowrap }
.ozet-kutu .ozet-adet { font-size: 12px; color: var(--n5, #8e8e93); margin-top: 1px }
.ozet-seridi .ozet-not { flex: 1 1 100%; font-size: 12px;
  color: var(--n5, #8e8e93) }

/* Katlı bilgi notu (B5): kapalıyken TEK SATIR, açılınca metin. */
.bilgi-notu.bn-katli { display: block; padding: 4px 10px }
.bilgi-notu.bn-katli > summary { display: flex; align-items: center; gap: 8px;
  cursor: pointer; list-style: none; font-size: 12.5px }
.bilgi-notu.bn-katli > summary::-webkit-details-marker { display: none }
.bilgi-notu.bn-katli > summary::after { content: "▸"; color: var(--n5, #8e8e93);
  margin-left: auto }
.bilgi-notu.bn-katli[open] > summary::after { content: "▾" }
.bilgi-notu.bn-katli > .bn-metin { padding: 4px 0 4px 22px }

/* Katlanır form bloğu (B4): liste önce, form bir tıklama uzakta. */
/* KAYIT-7: «Kapanış ▾» menüsü — tek kaynak kapanis-bayragi.js › kapanisMenusuCiz */
details.kapanis-menu { display: inline-block; position: relative }
details.kapanis-menu > summary { cursor: pointer; list-style: none; padding: 6px 10px;
  border: 1px solid var(--n4, #d1d1d6); border-radius: 8px; font-weight: 500 }
details.kapanis-menu > summary::-webkit-details-marker { display: none }
.kapanis-menu-liste { position: absolute; z-index: 20; min-width: 200px; margin-top: 4px;
  background: var(--n1, #fff); border: 1px solid var(--n4, #d1d1d6); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12); padding: 4px 0 }
.kapanis-menu-liste > a { display: block; padding: 8px 12px; text-decoration: none; color: inherit }
.kapanis-menu-liste > a:hover { background: var(--n3, #f2f2f7) }
.kapanis-menu-liste > a[data-varsayilan] { font-weight: 600 }
details.kat-form > summary { cursor: pointer; list-style: none;
  padding: 10px 14px; font-size: 13px; color: var(--n6, #48484a) }
details.kat-form > summary::-webkit-details-marker { display: none }
details.kat-form > summary::after { content: "▸ aç"; color: var(--n5, #8e8e93);
  margin-left: 8px; font-size: 12px }
details.kat-form[open] > summary::after { content: "▾ kapat" }
/* KATLANIR KUTU (HIZLI-TAHSILAT-KUTU, kurucu 12.10.2026): varsayılan AÇIK
   bölüm — çerçeveli kutu, başlık 13px/500, sağda ⌃/⌄ düğmesi. `kat-form`un
   tek satırlık «▸ aç»ı katlanır alan olduğunu söylemiyordu. Kapatma tercihi
   kabuk.js › katKutusuBagla. */
details.kat-kutu { border: 1px solid var(--n3, #e5e5ea); border-radius: 9px;
  background: var(--n0, #fff); margin: 0 0 12px }
details.kat-kutu > summary { display: flex; align-items: center;
  justify-content: space-between; gap: 8px; cursor: pointer; list-style: none;
  padding: 8px 10px 8px 14px; font-size: 13px; font-weight: 500; color: var(--n7, #1c1c1e) }
details.kat-kutu > summary::-webkit-details-marker { display: none }
details.kat-kutu > summary::after { content: "⌄"; flex: none; display: inline-flex;
  align-items: center; justify-content: center; width: 26px; height: 26px;
  border: 1px solid var(--n3, #e5e5ea); border-radius: 6px; color: var(--n6, #48484a);
  font-size: 14px; line-height: 1 }
details.kat-kutu > summary:hover::after { background: var(--n2, #f2f2f7) }
details.kat-kutu[open] > summary::after { content: "⌃" }
details.kat-kutu[open] > summary { border-bottom: 1px solid var(--n2, #f2f2f7) }
details.kat-kutu > .kat-kutu-govde { padding: 12px 14px }

/* Sistem olayları — gri ve katlanmış (§ 7.5 k). İnsanın yaptığı
   düzenlemeyle tetikleyicinin yazdığı satır aynı listede durmaz. */
details.sistem-iz > summary { cursor: pointer; list-style: none;
  color: var(--n5, #8e8e93); font-size: 12.5px; padding: 6px 0 }
details.sistem-iz > summary::-webkit-details-marker { display: none }
details.sistem-iz > summary::after { content: " ▸"; color: var(--n5, #8e8e93) }
details.sistem-iz[open] > summary::after { content: " ▾" }
details.sistem-iz table { color: var(--n5, #8e8e93) }

/* Bağlantı-düğme (YALIN-Y2): satırdaki tek görünür eylem («Tahsil et»,
   «Makbuz») bir adrese gider ve düğme gibi görünür — JS bağlaması yok. */
a.dugme-bag { display: inline-block; padding: 3px 9px; border: 1px solid var(--n4, #d1d1d6);
  border-radius: 6px; font-size: 12px; color: var(--n7, #1c1c1e); text-decoration: none;
  background: var(--n0, #fff); white-space: nowrap }
a.dugme-bag:hover { background: var(--n2, #f4f4f5) }
a.dugme-bag.birincil { background: var(--vurgu, #7c4a2d); color: #fff; border-color: var(--vurgu, #7c4a2d) }
/* ══════════════════════════════════════════════════════════════════
   BÖLÜM BAŞLIĞI — TEK KAYNAK *(kurucu kararı 19.09.2026,
   BOLUM-BASLIGI-TEK-KAYNAK)*.

   🔴 ÖLÇÜLEN ARIZA: bu kural burada TANIMLIYDI ve 56 ekranın yalnız
   üçü kullanıyordu; geri kalanı kendi <style> bloğunda kendi ölçüsünü
   yazmıştı — /kayit-formu 11px · /egitim 16px · /raporlar 15px. Üç
   ekran, üç boy. Bir kuralın var olması, kullanıldığını göstermez
   (yasak #13'ün stil yüzü); bekçi D558 bunu artık sayıyor.

   Ölçü ve renk BURADA yazılı: ortak katman token'ı TANIMLAYAN yer ve
   17px/14px için paletde karşılık yok (--yazi-orta 15 · --yazi-baslik
   18). Renk token'ı olan yerde token kullanılıyor.

   BÜYÜK HARF KALKTI: metin DOM'da zaten cümle düzeninde yazılı, büyük
   harfi CSS yapıyordu ve ekran okuyucu ile kopyalanan metin küçük
   harf kalıyordu — gösterim ile içerik ayrışıyordu.
   ══════════════════════════════════════════════════════════════════ */
/* 🔴 **BOYUTLA DEĞİL AĞIRLIK · RENK · BOŞLUKLA** *(kurucu kararı
   19.09.2026, BOLUM-BASLIGI-TWENTY)*. İlk sürüm 17px/600 koyu idi ve
   kurucu canlıda gördü: *"sadece px yükseltilmiş, çok çirkin"* — 13px'lik
   bir arayüzde 17px başlık SAYFA ADI gibi bağırıyor. Başlık artık taban
   ölçüde; onu bölüm başlığı yapan şey AĞIRLIK (600), üstündeki 32px
   boşluk ve ince ayraç çizgisi. */
h2.bolum-basligi { font-size: var(--yazi-bolum, 15px); font-weight: 600;
  color: var(--yazi-1, #18181b); text-transform: none; letter-spacing: normal;
  margin: 32px 0 12px; padding-top: 16px; border-top: 1px solid var(--n2, #f1f1f3);
  display: flex; align-items: center; gap: 8px }
/* 🔴 İLK BÖLÜMDE ÇİZGİ YOK: ayraç iki bölümü AYIRIR, ilkinin üstünde
   ayıracak bir şey yoktur — kutunun kendi kenarıyla çift çizgi olurdu. */
h2.bolum-basligi:first-child { margin-top: 0; padding-top: 0; border-top: 0 }
/* İkinci düzey başlık (kayıt formunda 2b · 2c · 8b gibi alt bölümler):
   bir kademe küçük, bir kademe hafif, bir kademe açık — üç eksen de
   aynı yöne çalışıyor, hiçbiri tek başına bağırmıyor. */
h2.bolum-basligi.alt { font-size: var(--yazi-sm, 12px); font-weight: 500;
  color: var(--yazi-2, #52525b); margin-top: 20px; padding-top: 0; border-top: 0 }
/* 🔴 NUMARA DAİRESİ SINIFLA SEÇİLİYOR, «ilk span» ile DEĞİL. Ölçüldü:
   bölüm başlıklarındaki span'ların hepsi numara değil — cari hesapta üç
   başlık açıklama taşıyor (<h2>Kayıtlar <span class="ac">— tahsilat
   buradan yapılır</span></h2>) ve `> span:first-child` onları da daire
   yapardı (yasak #32: kaydı benzersiz kılan alana bak). */
/* 🔴 DAİRE KALKTI, YERİNE SESSİZ BİR ÇİP *(BOLUM-BASLIGI-TWENTY)*:
   22px'lik dolu daire başlıktan daha çok yer kaplıyordu ve numara
   başlığın kendisinden güçlü görünüyordu. Çip 18px yüksekliğinde,
   hafif zeminli ve ikincil renkte — okunur ama önde değil. */
h2.bolum-basligi > span.bolum-no { flex: 0 0 auto; display: inline-flex;
  align-items: center; justify-content: center; height: 18px; padding: 0 6px;
  border-radius: 4px; background: var(--n1, #f7f7f8); color: var(--yazi-2, #52525b);
  font-size: var(--yazi-xs, 11px); font-weight: 500; letter-spacing: normal }

/* ══════════════════════════════════════════════════════════════════
   PANO KART SİSTEMİ — TEK KAYNAK *(ANA-SAYFA-1 madde 1, kurucu kararı
   19.09.2026)*
   ══════════════════════════════════════════════════════════════════

   🔴 ÖLÇÜLDÜ, KOPYALANMADI. Kurucu Twenty'yi ölçtü (13px gövde · beyaz
   kart · 1px açık gri kenar · 16px yuvarlatma · gölge YOK · 8px aralık ·
   16px iç boşluk · bölüm etiketi küçük ve sessiz · büyük sayı 27/600).
   Buradaki kurallar o ölçüleri PROJENİN TOKEN'LARIYLA yazıyor; Twenty'nin
   CSS'i alınmadı ve ikinci bir palet açılmadı (yasak #50).

   🔴 GÖLGE YOK: `--golge` token'ı burada BİLEREK kullanılmıyor. Kartı
   ayıran şey kenar çizgisi ve boşluk; gölge eklemek 8px aralıkta iki
   kartı birbirine bulaştırıyordu.

   🔴 BÜYÜK SAYI YALNIZ SAYAÇTA: 27px bir ölçek kademesi değil, SAYAÇ
   biçimi. Başlıkta veya satırda kullanılmıyor — 13px'lik bir arayüzde
   iki büyük ölçü birbirini bastırır (BOLUM-BASLIGI-TWENTY ile aynı ders).
   ══════════════════════════════════════════════════════════════════ */
.pano { max-width: var(--pano-en, 1200px); margin: 0 auto }
/* 12 sütun: kart genişlikleri `--kol` ile veriliyor (kart kendi yerini
   bilir, ekran ızgara kuralı yazmaz). */
.pano-izgara { display: grid; grid-template-columns: repeat(12, 1fr);
  gap: var(--aralik-kart, 8px) }
.pano-izgara > * { grid-column: span var(--kol, 12) }
.pano-bolum { margin-top: var(--aralik-bolum, 24px) }
.pano-bolum:first-child { margin-top: 0 }
/* Bölüm etiketi: küçük, sessiz, CÜMLE DÜZENİ (büyük harf YOK) + sağda
   sayı çipi. `h2.bolum-basligi` sayfa bölümleri için; bu pano kartlarının
   üstündeki satır ve daha sessiz. */
.pano-etiket { display: flex; align-items: baseline; gap: 8px;
  margin: 0 2px 8px; font-size: var(--yazi-sm, 12px); font-weight: 500;
  color: var(--yazi-3, #71717a); text-transform: none; letter-spacing: normal }
.pano-etiket > .adet { margin-left: auto; display: inline-flex;
  align-items: center; height: 18px; padding: 0 6px; border-radius: 4px;
  background: var(--n1, #f7f7f8); color: var(--yazi-2, #52525b);
  font-size: var(--yazi-xs, 11px); font-weight: 500 }
.pano-kart { background: var(--n0, #fff); border: 1px solid var(--n3, #e5e5e7);
  border-radius: var(--kose-kart, 16px); padding: var(--ic-kart, 16px);
  box-shadow: none }

/* ══════════════════════════════════════════════════════════════════
   🔴 BAŞLIK KARTIN İÇİNDE · SATIRDA EŞİT BOY · TEK SATIRLIK KAYIT
   *(kurucu kararı 20.09.2026 15:35, ANA-SAYFA-5 — Twenty düzeni)*

   Kurucu: *"düzensiz, hizalama yok, anlaşılır değil."* ÖLÇÜLDÜ (canlı,
   710bb22): üst kenar **68 vs 92 px** · aynı satırda kart yüksekliği
   **440/304/131** · Aktif personel kartı **1339 px**, yanındaki 137 ·
   sayfa **2900 px**.

   Sebep yapısaldı: başlık kartın DIŞINDAydı ve her kartın etiketi
   ayrı yükseklikteydi; kartlar da içeriği kadar uzuyordu. Başlık
   kartın ilk satırına alınınca bütün kartlar aynı y'den başlıyor ve
   ızgara satırı kartları eşitliyor. Uzun liste kartı uzatmıyor —
   KART İÇİNDE kayıyor.
   ══════════════════════════════════════════════════════════════════ */
.pano-izgara { align-items: stretch;
  /* 🔴 SATIR ARASI BOŞLUK IZGARANIN İŞİ, KARTIN DEĞİL. Ölçüldü: kartın
     kendi `margin-top`u vardı ve `:first-child` istisnası yüzünden
     satırın İLK kartı 24 px yukarıdan başlıyordu — kurucunun gördüğü
     «68 vs 92» tam buydu. Boşluğu ızgara verince satırdaki her kart
     aynı y'den başlıyor. */
  row-gap: var(--aralik-bolum, 24px) }
.pano-izgara > .pano-bolum { margin-top: 0 }
/* 🔴 YERİNDE YENİLEME «YÜKLENİYOR» HÂLİ *(ANA-SAYFA-8)*: grup soluyor
   ve tıklanamıyor; kart yerinde duruyor — iskelet çizmek sayfanın
   yeniden yüklendiği izlenimini verirdi. */
.yerinde-yukleniyor { opacity: .55; pointer-events: none;
  transition: opacity .12s ease-out }
.pano-bolum { display: flex; flex-direction: column; min-width: 0 }
.pano-bolum > .pano-kart { flex: 1; display: flex; flex-direction: column;
  min-height: 0; max-height: var(--kart-azami, 360px); overflow: hidden }
/* Gövde kartın içinde kayar; kart UZAMAZ. */
.kart-govde { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain }
.kart-alt { flex: none; margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--n2, #f1f1f3); font-size: var(--yazi-sm, 12px) }

/* 🔴 YOĞUNLUK: her kayıt TEK SATIR, 32 px, satır arası 0. Kaydırılan
   listede satır yüksekliği sabit olmazsa göz sırayı kaybediyor. */
.pano-satir { display: flex; align-items: center; gap: 8px;
  height: 32px; min-height: 32px; white-space: nowrap; overflow: hidden;
  color: inherit; text-decoration: none;
  border-bottom: 1px solid var(--n1, #f7f7f8) }
.pano-satir:last-child { border-bottom: 0 }
.pano-satir:hover { background: var(--n1, #f7f7f8) }
/* Metin sola ve taşarsa kısalır; SAYI ve TARİH sağa — kart başına
   hizalama yazılmıyor, kural burada (yasak #27). */
.pano-satir > .ad { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis }
.pano-satir > .saga, .kart-govde .saga { margin-left: auto; text-align: right }
/* 🔴 SINIF ADI «ikincil» DEĞİL: bu projede `.ikincil` bir DÜĞME ROLÜ
   ve rol görünümü yalnız `kabuk.js`te tanımlanıyor. Gri metin için onu
   kullanmak rolü ikinci bir yerde tanımlamak olurdu — bekçi
   (arayuz-rolu) bunu gönderim kapısında yakaladı. Var olan sessiz
   metin sınıfı `.solgun` kullanılıyor (yasak #50). */
.pano-satir > .sessiz, .kart-govde .sessiz { color: var(--yazi-3, #71717a);
  font-size: var(--yazi-sm, 12px) }
.kart-govde .para { font-variant-numeric: tabular-nums; text-align: right }
/* Kart içindeki satır listesi: kenarları kartın kendisi taşıyor, satır
   ayracı ince. Son satırda ayraç yok. */
.pano-kart > .satirlar > * { padding: 9px 0; border-bottom: 1px solid var(--n2, #f1f1f3) }
.pano-kart > .satirlar > *:first-child { padding-top: 0 }
.pano-kart > .satirlar > *:last-child { padding-bottom: 0; border-bottom: 0 }
.pano-cip { display: inline-flex; align-items: center; gap: 6px; height: 26px;
  padding: 0 10px; border: 1px solid var(--n3, #e5e5e7);
  border-radius: 13px; background: var(--n0, #fff);
  color: var(--yazi-2, #52525b); font-size: var(--yazi-sm, 12px);
  text-decoration: none; cursor: pointer }
.pano-cip:hover { background: var(--n1, #f7f7f8) }
.pano-cip > b { font-weight: 600; color: var(--yazi-1, #18181b);
  font-variant-numeric: tabular-nums }

/* 🔴 GORSEL OLARAK GIZLI, EKRAN OKUYUCUYA ACIK (LISTE-BIRLESTIR-3,
   kurucu karari 09.09.2026). `display:none` ve `visibility:hidden`
   ekran okuyucudan da SAKLAR; buradaki amac tersi -- goz gormesin,
   okuyucu okusun. Kural ORTAK katmanda: ikinci ekran ayni ihtiyaci
   duydugunda kendi kopyasini yazmasin (yasak #27). */
.gorsel-gizli{position:absolute; width:1px; height:1px; padding:0;
  margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  border:0}

/* ═══ 64k SAYFA GEÇİŞİ *(kurucu 20.10.2026)* ═══════════════════════════════════════════════════════════════════════
   1) Belgeler arası geçiş (View Transitions): kabuk yerinde kalır, içerik yumuşak geçer. Desteklemeyen tarayıcı kuralı yok
      sayar ve düz geçer; hareket azaltma tercihinde kapalı.
   2) İçerik iskeleti (web/iskelet.js): 300 ms'den kısa beklemede görünmez, sonra içeriğin şekli belirir.
   3) İlerleme çizgisi (web/ilerleme.js): en üstte ince çizgi, kurum renginde; 300 ms'den kısa işte görünmez. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 140ms; }
}
.kabuk > .anamenu { view-transition-name: kbk-menu; }
.kabuk > .kbk-ust1 { view-transition-name: kbk-ust; }
.kabuk > .kbk-kurum { view-transition-name: kbk-kurum; }
/* 🔴 88 KATMAN ÖLÇEĞİ *(kurucu 23.10.2026 «üst menüde neye tıklasam açılan pencere ekran altına kalıyor»)*. view-transition-name
   kabuk parçalarını AYRI KATMAN BAĞLAMI yapıyor; z-index'siz çubuğun içindeki açılırın 110'u yalnız çubuğun içinde geçiyordu ve
   sonra gelen konumlu içerik (ana sayfa, arama kuyruğu) üstte boyanıyordu — 21.10 64k'dan beri. Tek ölçek:
     sayfa içeriği ve sayfa içi açılırlar < 85 · kabuk parçaları (çubuk · menü · kurum) 85 · perde/pencere/yan panel/ipucu ≥ 90.
   Bekçi D1499 (gerçek Chrome, beş sayfa, her açılırın ortası açılırın içinde). */
.kabuk > .anamenu, .kabuk > .kbk-ust1, .kabuk > .kbk-kurum { position: relative; z-index: 85; }

.icerik-sekli { display: grid; gap: 10px; padding: 14px 16px; opacity: 0; animation: isk-gor 0s linear .3s forwards; }
.icerik-sekli i { display: block; height: 12px; border-radius: 6px; width: 100%;
  background: linear-gradient(90deg, var(--n2, #f1f1f3) 25%, var(--n3, #e5e5e7) 37%, var(--n2, #f1f1f3) 63%);
  background-size: 400% 100%; animation: isk-parilti 1.4s ease infinite; }
.icerik-sekli-tablo i { height: 14px; }
.icerik-sekli-tablo i:nth-child(even) { width: 92%; }
.icerik-sekli-tablo i:nth-child(3n) { width: 78%; }
.icerik-sekli-kart { border: 1px solid var(--n3, #e5e5e7); border-radius: 12px; margin: 4px 0; }
.icerik-sekli-kart i:first-child { width: 40%; height: 16px; }
.icerik-sekli-kart i:nth-child(3n) { width: 70%; }
.icerik-sekli-sekme i:first-child { width: 60%; height: 28px; border-radius: 8px; }
.icerik-sekli-metin i:last-child { width: 60%; }
.icerik-sekli-satir { display: inline-grid; padding: 0; vertical-align: middle; width: 8em; }
.icerik-sekli-satir i { height: 10px; }
@keyframes isk-gor { to { opacity: 1; } }
@keyframes isk-parilti { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

#kbk-ilerleme { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 2147483000; pointer-events: none;
  opacity: 0; transition: opacity .15s; overflow: hidden; }
#kbk-ilerleme.acik { opacity: 1; }
#kbk-ilerleme::before { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -40%;
  background: var(--kurum-renk, var(--vurgu, #7c4a2d)); animation: kbk-ilerle 1.1s ease-in-out infinite; }
@keyframes kbk-ilerle { 0% { left: -40%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .icerik-sekli i, #kbk-ilerleme::before { animation: none; }
  #kbk-ilerleme::before { left: 0; width: 100%; }
}
/* Meşgul düğme (64k): metin değişmez, «… yükleniyor» yazılmaz — düğme kapalı ve üzerinde aynı parıltı. Ortak katman (FORM-STIL). */
button[aria-busy="true"] { cursor: progress;
  background-image: linear-gradient(90deg, transparent 25%, rgba(255,255,255,.35) 37%, transparent 63%);
  background-size: 400% 100%; animation: isk-parilti 1.4s ease infinite; }
@media (prefers-reduced-motion: reduce) { button[aria-busy="true"] { animation: none; } }