/*
  YÖNETİM PANELİ — STİL (14a)

  İSKELET PORTALIN AYNISI, DERİSİ FARKLI.

  Aynı olanlar (docs/TASARIM.md'nin kuralları, burada da geçerli):
    - Giriş alanı ve düğme yüksekliği TEK: --oge-yukseklik
    - Boşluklar 4'ün katı: 4 · 8 · 12 · 16 · 24 · 32 · 48
    - Punto yalnız beş değer
    - Köşe yarıçapı iki değer
    - Ekran dosyalarında (.razor) renk kodu ve style="" YASAK

  Farklı olan: RENK. Portal koyu yeşil, panel indigo. Sebep güzellik değil EMNİYET
  (kullanıcı kararı 22.08.2026): panel bütün kiracıları gören yerdir ve hangi
  uygulamada olduğunuz bir bakışta belli olmalı. Sekmeler arasında gezerken
  karışmamalı.

  RENGİN BİR İŞİ VAR. Kullanıcının isteği "düğmeler renkli olsun" idi; süs olarak
  dağıtılan renk üçüncü ekranda anlamını yitiriyor, işi olan renk kalıcı oluyor:

    --vurgu    asıl eylem      Kiracı Aç, Kaydet
    --basari   olumlu durum    aktif kiracı, bağlı alan adı
    --uyari    bekleyen iş     DNS bekliyor, sertifika yok, lisans bitiyor
    --hata     geri alınamaz   Pasife Al, Sil
    --bilgi    işaret          demo kiracısı, test ortamı

  ROL ADLARI PORTALLA ORTAK. --vurgu, --hata ve --uyari orada da var; değişen
  DEĞERLERİ, adları değil. İki uygulamada aynı role iki ad verilseydi standart
  belgesi ikiye bölünürdü. --basari ile --bilgi yeni roller: portalda karşılığı olan
  bir iş yoktu.
*/

/*
  AppDashboard-pro ÖLÇÜ VE PALETİ (08.09.2026, kullanıcı kararı).

  ═══ NEDEN RENK DE ALINDI ═══

  0.99.0'de portala FlexAdmin derisi geçirilirken "şablonun dosyası değil ÖLÇÜSÜ alınır"
  kuralı konmuştu ve panel bilerek indigo bırakılmıştı: iki yüzün karışmaması bir emniyet
  kuralıydı (TASARIM §2.1).

  Bugün kullanıcı o gerekçeyi kaldırdı: "panel ve portal zaten birbirinden ayırt ediliyor.
  Tüm asYazılım ailesi bu temayı kullansın diye talimat verdim; biz yapmazsak ayıp olur."
  Yani ayrım artık renkten değil, uygulamanın kendisinden geliyor ve tema bir AİLE
  STANDARDI. Renk de şablondan alınıyor.

  ═══ DEĞİŞKEN ADLARI DEĞİŞMEDİ ═══

  Yalnız DEĞERLER değişti. 670 satırlık stil dosyası aynı adları kullanmaya devam ediyor,
  yani deri geçişi tek blokta oldu ve ekran kodu (razor) hiç değişmedi — 0.105.0'deki
  yöntemin aynısı.
*/
:root {
    /* ---- nötr ölçek: şablonun kendi tonları ---- */
    --n0: #ffffff;
    --n50: #fbfdff;
    --n100: #f7f9fc;
    --n200: #dbe4ef;
    --n300: #c6d2df;
    --n500: #687789;
    --n700: #324152;
    --n900: #111827;

    /* ---- eylem renkleri: her birinin bir işi var ---- */
    --vurgu: #315cf6;
    --vurgu-koyu: #2447cd;
    --vurgu-acik: #edf3ff;

    --basari: #0f9b7a;
    --basari-acik: #dff8f0;

    --uyari: #c87914;
    --uyari-acik: #fff0d7;

    --hata: #e05264;
    --hata-koyu: #c33d4e;
    --hata-acik: #fde5ea;

    --bilgi: #0c9dc8;
    --bilgi-acik: #ddf4fb;

    /* ---- roller ---- */
    --zemin: #f4f7fb;
    --kart: #ffffff;
    --yazi: #273447;
    --soluk: #687789;
    --cizgi: #dbe4ef;
    /* Tablo satır çizgisi başlık çizgisinden AÇIK: şablonda ölçüldü (#eaf0f7). Satırlar
       arasındaki ayrım, başlığın altındaki ayrımdan daha zayıf olmalı — yoksa tablo
       kafes gibi görünür. */
    --cizgi-acik: #eaf0f7;
    /* Kart çerçevesi tablo çizgisinden bir tık açık (şablonda ölçüldü). Kartı ayıran
       şey ağırlıklı olarak gölge; çerçeve yalnız kenarı tanımlıyor. */
    --cizgi-kart: #e2e9f2;

    /* KENAR ÇUBUĞU ARTIK BEYAZ. Şablonun düzeni böyle: koyu bir sütun yerine, sayfayla
       aynı yüzeyde duran ve yalnız çizgiyle ayrılan bir menü. Etkin satır dolu mavi. */
    --menu-zemin: #ffffff;
    --menu-yazi: #324152;
    --menu-soluk: #8190a2;
    --menu-uzeri: #edf3ff;
    --menu-cizgi: #d9e2ec;

    /* ---- punto: YALNIZ BU BEŞİ ---- */
    --punto-kucuk: 12px;
    /* 13 → 14 (08.09.2026): şablonda hem tablo hücresi hem form etiketi 14 punto
       ölçüldü. Ölçek "yalnız bu beşi" olduğu için yeni bir basamak açmak yerine var
       olan basamak şablona göre ayarlandı. */
    --punto-ikincil: 14px;
    --punto-govde: 15px;
    --punto-baslik2: 18px;
    --punto-baslik1: 24px;

    /* ---- ölçü: şablonun kademeleri ---- */
    /* Şablonda düğme 43, giriş kutusu 45 piksel ölçüldü; tek değer kuralımız var
       (TASARIM: "tek öge yüksekliği"), ikisinin ortası alındı. */
    --oge-yukseklik: 44px;
    --yaricap: 8px;
    --yaricap-kart: 10px;
    --yaricap-buyuk: 12px;
    --menu-genislik: 292px;
    --serit-yukseklik: 68px;

    /* Şablonun dört gölge kademesi. Öncekinden farkı yumuşaklığı: gölge aşağı doğru
       uzun ve çok soluk, kenarları sertleştirmiyor. */
    --golge-kucuk: 0 1px 2px 0 rgb(22 34 51 / .06), 0 1px 1px -1px rgb(22 34 51 / .08);
    --golge-kart: 0 12px 28px -18px rgb(22 34 51 / .35), 0 2px 8px -4px rgb(22 34 51 / .12);
    --golge-buyuk: 0 22px 45px -24px rgb(22 34 51 / .42), 0 8px 18px -12px rgb(22 34 51 / .18);

    --odak-halka: rgb(49 92 246 / .20);
}

/*
  GEIST GÖMÜLÜ — CDN'den değil.

  Şablon Google Fonts'tan çekiyor; biz gömüyoruz. Gerekçe PDF yazı tipiyle aynı aileden:
  SİSTEMDE (ya da dış sunucuda) BULUNMAYI VARSAYAN ŞEY YAYINDA SESSİZCE KAYBOLUR — ve
  kaybolduğunda hata vermez, yalnız ekran başka türlü görünür. Değişken sürüm alındı
  (400-800), yani dört ağırlık için tek dosya.
*/
@font-face {
    font-family: "Geist";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("yazitipi/geist-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Geist";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("yazitipi/geist-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--zemin);
    color: var(--yazi);
    font-family: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: var(--punto-govde);
    line-height: 1.5;
}

h1 { margin: 0; font-size: var(--punto-baslik1); }
h2 { margin: 32px 0 16px; font-size: var(--punto-baslik2); }

a { color: var(--vurgu); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: var(--punto-ikincil);
}

/* ---- düzen ---- */

.kabuk { display: flex; min-height: 100vh; }

.menu {
    width: var(--menu-genislik);
    flex: 0 0 var(--menu-genislik);
    background: var(--menu-zemin);
    color: var(--menu-yazi);
    display: flex;
    flex-direction: column;
    padding: 16px 0;
    /* Açık zeminde sütunu ayıran şey gölge değil çizgi — şablonun düzeni böyle. */
    border-right: 1px solid var(--menu-cizgi);
}

/* Simge solda, üç satır sağda: ad · ürün · sürüm. Simge dikeyde ORTALANMIYOR, üste
   hizalanıyor — üç satırın ortasına gelen bir simge markanın hizasını kaybettiriyor. */
.menu .marka {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 0 16px 16px;
    color: var(--n900);
    font-size: var(--punto-baslik2);
    font-weight: 600;
}

/* Marka işareti: ürünün kendi simgesi (favicon.png, araclar/simge-uret.ps1 üretiyor) —
   dört yüzde ve Android'de aynı. */
.menu .marka img {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: var(--yaricap);
}

.menu .marka .ad { display: block; line-height: 1.2; }

.menu .marka .alt {
    display: block;
    color: var(--menu-soluk);
    font-size: var(--punto-kucuk);
    font-weight: 400;
}

.marka .surum {
    display: block;
    margin-top: 4px;
    color: var(--menu-soluk);
    font-size: var(--punto-kucuk);
    font-weight: 400;
}

.menu nav { display: flex; flex-direction: column; }

.menu nav a {
    padding: 8px 16px;
    color: var(--menu-yazi);
    font-size: var(--punto-ikincil);
}

.menu nav a:hover { background: var(--menu-uzeri); color: var(--vurgu); text-decoration: none; }

.menu nav a.etkin {
    background: var(--vurgu);
    color: var(--n0);
    font-weight: 600;
}

/* ---- içerik sütunu: şerit üstte, gövde altta (08.09.2026) ---- */
.icerik {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

/*
  ÜST ŞERİT — şablonda 68 piksel ölçüldü.

  ŞABLONUNKİ `position: fixed`, BİZİMKİ AKIŞTA. Sabit bir şerit kendi yüksekliği kadar
  üst boşluk borcu doğuruyor ve o borç her sayfada ayrı ayrı ödeniyor; sütun düzeni aynı
  işi kendiliğinden yapıyor ve kaydırma da doğal kalıyor.
*/
.ust-serit {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: none;
    height: var(--serit-yukseklik);
    padding: 0 32px;
    background: var(--kart);
    border-bottom: 1px solid var(--cizgi);
    box-shadow: 0 10px 35px -28px rgb(22 34 51 / .45);
}

/* Operatör sağa yaslı: şeridin solu dar ekranda menü düğmesinin. */
.ust-serit .operator { margin-left: auto; text-align: right; line-height: 1.2; }
.ust-serit .operator .kim { display: block; font-weight: 600; }
.ust-serit form { display: flex; }

.govde { flex: 1; padding: 24px 32px 48px; min-width: 0; }

/*
  ---- MENÜ DAR EKRANDA ÇEKMECEYE DÖNÜŞÜR ----

  Ofis portalındaki düzenin aynısı (0.80.0). 220 piksellik sabit menü telefonda
  içeriğe 155 piksel bırakıyordu. Eşik 900 piksel; üstünde hiçbir şey değişmiyor.

  Menü TEK BİR ÖGE. Geniş ekranda `popover` niteliği duruyor ama aşağıdaki kural onu
  görünür kılıyor: YAZAR kuralı tarayıcının "kapalıyken gizle" kuralını yener.
*/
.menu[popover] {
    display: flex;
    position: static;
    inset: auto;

    /* `height` ŞART. Tarayıcının popover kuralı `height: fit-content` diyor; bu
       kalınca menü uzun sayfalarda İÇERİĞİ KADAR kalıyor ve altında koyu zeminsiz
       bir boşluk oluşuyordu (25.08.2026, kullanıcı ekranda gösterdi: 1389 piksellik
       sayfada menü 984'te bitiyordu). Genişlik ezilmişti, yükseklik unutulmuş. */
    height: auto;
    max-width: none;
    max-height: none;
    margin: 0;
    border: 0;
    overflow: visible;
}

/* Geniş ekranda çekmeceye ait düğmeler görünmez. */
.menu-dugmesi, .menu-kapat { display: none; }

@media (max-width: 900px) {
    .kabuk { display: block; }

    /* Kapalıyken tarayıcının kuralı geçerli olsun diye yukarıdaki kural geri alınıyor. */
    .menu[popover]:not(:popover-open) { display: none; }

    .menu[popover]:popover-open {
        display: flex;
        position: fixed;
        inset: 0 auto 0 0;
        width: min(var(--menu-genislik), 84vw);
        /* `height` ŞART: popover'ın kendi kuralı `fit-content` diyor ve kısa bir
           menüde çekmece ekranın ortasında asılı kalıyordu (260 piksel, ölçüldü). */
        height: 100vh;
        max-height: 100vh;
        overflow-y: auto;
    }

    .menu::backdrop { background: rgb(0 0 0 / 0.4); }

    /* DÜĞME ARTIK ŞERİDİN İÇİNDE, SERBEST DEĞİL (08.09.2026). Önce `position: fixed`
       ile sayfanın üstünde yüzüyordu ve gövdenin üst boşluğu onu karşılamak için
       büyütülüyordu; şerit gelince o borç kendiliğinden kapandı. */
    .menu-dugmesi {
        display: inline-flex;
        align-items: center;
        width: auto;
        height: var(--oge-yukseklik);
        padding: 0 12px;
        background: var(--kart);
        border: 1px solid var(--cizgi);
        border-radius: var(--yaricap);
        color: var(--yazi);
        font-family: inherit;
        font-size: var(--punto-govde);
        cursor: pointer;
    }

    .ust-serit { padding: 0 16px; }
    .govde { padding: 24px 16px 48px; }

    .menu .marka { display: flex; align-items: flex-start; justify-content: space-between; }

    /* Dokunma hedefi 44 piksel: çekmecenin kapatma düğmesi bu. */
    .menu-kapat {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        margin: -8px -8px 0 0;
        padding: 0;
        background: none;
        border: 0;
        color: var(--menu-yazi);
        font-size: var(--punto-govde);
        line-height: 1;
        cursor: pointer;
    }

    .menu-kapat:hover { color: var(--n0); }
}


.baslik-satiri {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.baslik-satiri h1 { margin-right: auto; }

/* ---- düğmeler: RENKLİ ve her rengin bir işi var ---- */

.dugme,
.baglanti-dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--oge-yukseklik);
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--yaricap);
    font-family: inherit;
    font-size: var(--punto-govde);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.dugme:hover, .baglanti-dugme:hover { text-decoration: none; }

.dugme:focus-visible,
.baglanti-dugme:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 3px solid var(--odak-halka);
    outline-offset: 1px;
}

.dugme { background: var(--vurgu); color: var(--n0); }
.dugme:hover { background: var(--vurgu-koyu); }

.dugme:disabled {
    background: var(--n200);
    color: var(--soluk);
    cursor: not-allowed;
}

.dugme.hata { background: var(--hata); }
.dugme.hata:hover { background: var(--hata-koyu); }

.dugme.basari { background: var(--basari); }
.dugme.uyari { background: var(--uyari); }

/* İkincil eylem: renksiz kalıyor ki renkli olan gerçekten öne çıksın. */
.baglanti-dugme {
    background: var(--kart);
    border-color: var(--cizgi);
    color: var(--yazi);
    font-weight: 500;
}

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

.satir-dugme {
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--vurgu);
    font-family: inherit;
    font-size: var(--punto-ikincil);
    cursor: pointer;
}

.satir-dugme:hover { text-decoration: underline; }
.satir-dugme.hata { color: var(--hata); }

/* ---- küçük düğme: tablo satırındaki eylem ----

   `.satir-dugme` bir YAZIDIR (çerçevesiz, dolgusuz) ve öyle kalıyor — tablo satırındaki
   tekil eylemler onu kullanıyor (çıkış 0.172.0'de üst şeride taşınıp küçük düğme oldu). Ama iki eylem yan yana geldiğinde yazılar
   birbirine yapışıyor; kullanıcı bunu Sandbox ekranında yakaladı. Orada eylem artık
   çerçeveli küçük bir düğme: sınırı kendi çiziyor, aralarındaki boşluğu da `td.islem`
   veriyor. */

.kucuk-dugme {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: var(--yaricap);
    color: var(--vurgu);
    font-family: inherit;
    font-size: var(--punto-ikincil);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

.kucuk-dugme:hover:not(:disabled) {
    background: var(--vurgu-acik);
    border-color: var(--vurgu);
}

.kucuk-dugme:disabled { color: var(--soluk); cursor: default; }

/* ---- onay kutusu (ortak OnayliDugme bileşeni) ----

   Bileşen dört yüzde de kullanılıyor ama sınıfları PANELDE hiç tanımlı değildi:
   soru, gerekçe kutusu ve düğmeler biçimsiz bir yığın hâlinde akıyordu. Sessiz
   kusur; 05.09.2026 taramasında çıktı. */

.onay-kutusu {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    background: var(--n50);
    border: 1px solid var(--hata);
    border-radius: var(--yaricap);
}

.onay-soru {
    max-width: 46ch;
    color: var(--n900);
    font-size: var(--punto-kucuk);
    line-height: 1.35;
}

.onay-gerekce { width: 260px; height: var(--oge-yukseklik); }

/* Ortak SayiKutusu'nun sınıfı — rakamlar sağa yaslı, eş genişlikte. */
input.rakam-kutu { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- alanlar: YÜKSEKLİK TEK ---- */

.alanlar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    align-items: start;
    margin-bottom: 16px;
}

.alanlar label { display: flex; flex-direction: column; gap: 8px; }
.alanlar label.genis { grid-column: 1 / -1; }

/* ETİKET SOLUK DEĞİL KOYU (şablonda ölçüldü: 14 punto, 500, --n900). Soluk bir etiket,
   yanındaki ipucu metniyle aynı ağırlıkta görünüyor ve hangisinin alan adı olduğu
   okunmuyor. Portalda aynı değişiklik 0.105.0'de yapılmıştı. */
.alanlar label > span:first-child,
.alanlar > label {
    color: var(--n900);
    font-size: var(--punto-ikincil);
    font-weight: 500;
}

/*
  SEÇİCİ TÜRE GÖRE DEĞİL, DIŞLAMAYLA YAZILIYOR.

  Kusurun hikâyesi (22.08.2026, ilk tarayıcı denemesinde çıktı): önce
  input[type="text"] diye yazılmıştı, ama Blazor'da <input @bind="..."> type
  niteliği TAŞIMIYOR — seçici tutmadı ve metin kutuları 21px, seçim kutusu ile
  düğmeler 38px kaldı. Kullanıcının "yükseklikleri bir olsun" dediği kusurun ta
  kendisi, üstelik kuralın kendisi belgede yazılıyken.

  Onay kutusu ile radyo dışarıda: onların doğal boyu var ve 38px'e gerilmeleri
  gerekmiyor.
*/
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
select {
    height: var(--oge-yukseklik);
    padding: 0 12px;
    border: 1px solid var(--cizgi);
    border-radius: var(--yaricap);
    background: var(--kart);
    color: var(--yazi);
    font-family: inherit;
    font-size: var(--punto-govde);
    width: 100%;
}

input:disabled, select:disabled { background: var(--n100); color: var(--soluk); }

.onay {
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--oge-yukseklik);
    font-size: var(--punto-govde);
}

.onay input { width: 16px; height: 16px; }

.ipucu { color: var(--soluk); font-size: var(--punto-kucuk); margin: 4px 0 0; }

/* ---- kart ---- */

.kart {
    margin-top: 16px;
    background: var(--kart);
    border: 1px solid var(--cizgi-kart);
    border-radius: var(--yaricap-kart);
    padding: 24px;
    margin-bottom: 16px;
    box-shadow: var(--golge-kart);
}

.kutular {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

/* Şablonda dolgu 22 px ölçüldü; boşluklarımız 4'ün katı olmak zorunda (TASARIM),
   en yakın kat alındı. */
.kutu {
    background: var(--kart);
    border: 1px solid var(--cizgi-kart);
    border-radius: var(--yaricap-kart);
    padding: 24px;
    box-shadow: var(--golge-kart);
}

.kutu .sayi { display: block; font-size: var(--punto-baslik1); font-weight: 600; }
/* Etiket KÜÇÜK VE KALIN (şablon: 13 punto, 700). Rakamın altındaki satır bir
   açıklama değil bir başlık — ince yazıldığında rakamla aynı ağırlıkta okunuyor ve
   hangisinin ölçü hangisinin ad olduğu belirsizleşiyor. */
.kutu .etiket {
    display: block;
    color: var(--soluk);
    font-size: var(--punto-kucuk);
    font-weight: 600;
}

/* ---- tablo ---- */

/*
  TABLONUN ÇERÇEVESİ SARMALAYICIDA, TABLONUN KENDİSİNDE DEĞİL (08.09.2026).

  Yuvarlak köşeyi kırpan `overflow: hidden` bir tabloya güvenilir biçimde uygulanmıyor;
  çerçeve, arka plan ve yarıçap bu yüzden `.tablo-kap`ta duruyor. Tablo yalnız kabını
  dolduruyor.
*/
.tablo-kap {
    background: var(--kart);
    border: 1px solid var(--cizgi-kart);
    border-radius: var(--yaricap-kart);
    overflow: hidden;
}

.liste {
    width: 100%;
    border-collapse: collapse;
}

/*
  DAR EKRANDA TABLO KENDİ İÇİNDE KAYAR — SAYFA YANA KAYMAZ.

  Tablet genişliğinde (768 px) liste ekranlarının çoğu sayfayı yana sürüklüyordu:
  cariler 352 px, çek & senet 454 px, satış faturaları 297 px (23.08.2026'da ölçüldü).
  Sayfa kayınca menü ve başlık da kayıyor; kullanıcı sağa gidip geri dönmek zorunda
  kalıyor ve nerede olduğunu kaybediyor.

  Düzen bunu önleyecek biçimde kurulmuştu (`minmax(0, 1fr)`, `min-width: 0`); taşan
  şey tablonun kendisiydi — başlıklar tek satır olduğu için (TASARIM.md §9) içerik
  kabından geniş oluyor ve tutacak bir kap yoktu.

  ÖNCE `display: block` TABLONUN KENDİSİNE VERİLMİŞTİ ve o gün "geniş ekranda hiçbir şey
  değişmiyor, 1440 px'te tablo tam genişlikte kalıyor" diye ölçülmüştü. ÖLÇÜM DOĞRUYDU
  AMA GENEL DEĞİLDİ: o gün ölçülenler cariler, çek & senet, faturalar gibi ÇOK SÜTUNLU
  tablolardı ve içerikleri kaptan zaten genişti — dolayısıyla tam genişlikte görünüyordu.

  `display: block` bir tabloya verilince içteki asıl tablo kutusu içeriğe daralır; dıştaki
  bloğun `width: 100%`i ona geçmez. İki SÜTUNLU tablolarda bu görünür oldu (kullanıcı
  08.09.2026'da ekran görüntüsüyle bildirdi): panelde aynı kartın iki tablosu 144 px ve
  224 px ölçüldü — 700 px'lik bir kabın içinde, birbirinden farklı genişlikte.

  Bugünkü düzen: kaydırma `.tablo-kap` sarmalayıcısında, tablo gerçek tablo olarak
  kalıyor ve kabını dolduruyor. Aynı ölçümde iki tablo da 699 px çıktı.
*/
.tablo-kap { overflow-x: auto; }

/*
  TABLO ÖLÇÜLERİ ŞABLONDAN (08.09.2026, tarayıcıda ölçülerek).

  Dolgu 8/12 → 16, hücre 15 → 14 punto, hücre çizgisi başlığınkinden açık, ve başlık
  satırı BÜYÜK HARF + harf aralığı. Sonuncusu portalda 0.105.0'de yapılmıştı; panel o
  turun dışında kalmıştı ve aradaki fark iki yüzü yan yana koyunca görünüyordu.
*/
.liste th, .liste td {
    padding: 16px;
    text-align: left;
    border-bottom: 1px solid var(--cizgi-acik);
}

/* Hücre içeriği ortada: satırda rozet ve düğme varken üstten hizalama onları yazının
   üstüne kaldırıyordu. */
.liste td { font-size: var(--punto-ikincil); vertical-align: middle; }

.liste th {
    background: var(--n100);
    border-bottom: 1px solid var(--cizgi);
    color: var(--soluk);
    font-size: var(--punto-kucuk);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
}

/*
  DAR TABLO İÇERİĞE GÖRE DARALIR.

  Dört kısa sütunlu bir tabloyu tam genişliğe yaymak, sütunları birbirinden koparıyor
  ve son sütundaki düğme ekranın öbür ucunda kalıyordu (kullanıcı ekranda gösterdi,
  22.08.2026). Kiracı listesinde sekiz sütun var ve orada tam genişlik doğru; ayrımı
  ekran söylüyor.
*/
.liste.dar { width: auto; min-width: 520px; }

.liste tbody tr:last-child td { border-bottom: 0; }
.liste tbody tr:hover { background: var(--n50); }
.liste td.rakam, .liste th.rakam { text-align: right; }
.liste td.islem { text-align: right; white-space: nowrap; }
.liste tr.pasif td { color: var(--soluk); text-decoration: line-through; }
.liste tr.pasif td.islem { text-decoration: none; }

.ikincil { display: block; color: var(--soluk); font-size: var(--punto-kucuk); }

/* ---- rozetler: durumu RENKLE söylüyor ----

   SINIF ADI = DEĞİŞKEN ADI. "hata" hem <p class="hata"> iletisinin hem
   .dugme.hata düğmesinin hem .rozet.hata rozetinin rengidir. İki ayrı sözlük
   (değişkende --hata, işaretlemede "tehlike") tutmak, üçüncü ekranda hangisinin
   hangisi olduğunu unutturur. */

.rozet {
    display: inline-block;
    padding: 0 8px;
    border-radius: 999px;
    font-size: var(--punto-kucuk);
    font-weight: 600;
    white-space: nowrap;
}

/* İki rozet yan yana geldiğinde bitişik okunuyordu ("AktifDemo"). */
.rozet + .rozet { margin-left: 4px; }

.rozet.basari { background: var(--basari-acik); color: var(--basari); }
.rozet.uyari { background: var(--uyari-acik); color: var(--uyari); }
.rozet.hata { background: var(--hata-acik); color: var(--hata); }
.rozet.bilgi { background: var(--bilgi-acik); color: var(--bilgi); }
.rozet.notr { background: var(--n100); color: var(--soluk); }

/* ---- iletiler ---- */

.bilgi-iletisi { color: var(--soluk); }

/*
  RENK SÖZCÜĞÜ YALNIZ RENKTİR; BLOK BİÇİMİ AYRI BİR SÖZCÜK.

  Kusurun hikâyesi (22.08.2026, kullanıcı ekranda gösterdi): ileti kutusu "hata"
  sınıfıyla yazılmıştı ve o kural "color: var(--hata)" kuruyordu — yani KIRMIZI YAZI.
  Aynı sözcük düğmede de kullanılınca ".dugme.hata" kırmızı ZEMİN verdi, yazı rengi
  ise bare ".hata"dan geldi: kırmızı üstüne kırmızı. "Pasife Al" düğmesi bomboş
  göründü.

  Ders: bir sözcüğün hem "şu renk" hem "şu kutu" demesi, ikisi karşılaştığında
  sessizce okunmaz bir şey üretiyor. Artık kutu ".ileti", renk ".hata".
*/
.ileti {
    padding: 8px 12px;
    border: 1px solid;
    border-radius: var(--yaricap);
    font-size: var(--punto-ikincil);
    margin: 0 0 16px;
}

.ileti.hata { border-color: var(--hata); background: var(--hata-acik); color: var(--hata); }
.ileti.uyari { border-color: var(--uyari); background: var(--uyari-acik); color: var(--uyari); }
.ileti.basari { border-color: var(--basari); background: var(--basari-acik); color: var(--basari); }

/* ---- giriş ekranı ---- */

/* ---- giriş ve ilk kurulum: iki panel (08.09.2026) ----

   Şablonun `auth-layout`u ölçüldü: solda renkli tanıtım paneli (570 px), sağda kart
   (500 px, 52 px dolgu, 12 px yarıçap). Ölçüler alındı, dolgu 4'ün katına yuvarlandı.
*/
.giris-perde {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
    min-height: 100vh;
    background: var(--zemin);
}

.giris-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    padding: 52px;
    color: var(--n0);
    /* Şablonun panelinde düz renk değil, köşeden gelen bir ışık var. */
    background:
        radial-gradient(circle at 20% 18%, rgb(255 255 255 / .18), transparent 28%),
        linear-gradient(135deg, var(--vurgu-koyu), var(--vurgu));
}

.giris-panel img { width: 48px; height: 48px; border-radius: var(--yaricap); }

.giris-panel-yazi strong {
    display: block;
    font-size: var(--punto-baslik1);
    font-weight: 600;
    line-height: 1.2;
}

.giris-panel-yazi span { display: block; opacity: .85; }

.giris-panel-not { max-width: 42ch; margin: 0; opacity: .85; }

.giris-panel-surum { font-size: var(--punto-kucuk); opacity: .7; }

.giris-govde {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.giris-kart {
    width: 100%;
    max-width: 500px;
    background: var(--kart);
    border: 1px solid var(--cizgi-kart);
    border-radius: var(--yaricap-buyuk);
    padding: 52px;
    box-shadow: var(--golge-kart);
}

.giris-kart h1 { margin-bottom: 4px; }
.giris-kart .alt { color: var(--soluk); font-size: var(--punto-ikincil); margin: 0 0 24px; }
.giris-kart .dugme { width: 100%; margin-top: 8px; }

/*
  DAR EKRANDA PANEL KAYBOLMUYOR, ŞERİDE DÖNÜYOR — aynı karar portalda 0.143.0'te
  verilmişti ve gerekçesi orada ölçülmüştü: tam boy bir tanıtım paneli telefonda formu
  ekranın dışına itiyor, ama paneli tamamen kaldırmak da markayı ve "neredeyim"
  sorusunun cevabını götürüyor.
*/
@media (max-width: 900px) {
    /* SATIRLARI DA SÖYLEMEK ŞART. Yalnız sütun tek sıraya indirilince ızgara iki
       satırı EŞİT bölüyor ve panel şerit değil yarım ekran oluyor — 08.09.2026'da
       ölçüldü: 238 piksel. Aynı kusur portalda 0.143.0'te de çıkmıştı (243 piksel);
       iki turda iki kez, çünkü `1fr` yazmak "içeriği kadar" demek değil. */
    .giris-perde {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .giris-panel {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 16px 24px;
    }

    .giris-panel img { width: 32px; height: 32px; }
    .giris-panel-yazi strong { font-size: var(--punto-baslik2); }
    .giris-panel-not, .giris-panel-surum { display: none; }

    .giris-kart { padding: 24px; }
}

.suzgec { display: flex; gap: 8px; margin-bottom: 16px; }
.suzgec input, .suzgec select { max-width: 280px; }

#blazor-error-ui { display: none; }

/*
  YAZARKEN DE BÜYÜK HARF GÖRÜNÜYOR (05.09.2026, kullanıcı kararı).

  Veriyi büyüten şey bu kural DEĞİL — onu sunucu kaydederken yapıyor
  (BuyukHarfKapisi). Buradaki iş yalnız kullanıcıyı şaşırtmamak: küçük yazıp
  kaydettikten sonra kaydın büyümüş olması "ben öyle yazmamıştım" dedirtirdi.

  `lang="tr"` dört yüzde de tanımlı ve tarayıcı Türkçeyi BİLİYOR — ölçüldü
  (05.09.2026): "şişli" → "ŞİŞLİ", "Tic. Ltd. Şti." → "TİC. LTD. ŞTİ.". Eskiden
  bunun tersi yazılıydı ve yanlıştı.

  Parola, e-posta ve URL kutuları LİSTEDE YOK: onların değeri büyümüyor, büyük
  göstermek yalan söylemek olurdu. Aynı sebeple makine verisi taşıyan kutular
  `.kucuk-harf` ile bu kuralın dışına çıkabiliyor.
*/
input:not([type]),
input[type="text"],
input[type="search"],
textarea {
    text-transform: uppercase;
}

input.kucuk-harf,
textarea.kucuk-harf {
    text-transform: none;
}

/* ---- sekme şeridi (kiracı kartı) ----
   Ofisteki `.sekmeler` ile aynı ölçüler; renk paneline ait (indigo). İki yüzün stili
   ayrı dosyalarda ve öyle kalıyor: panel bilerek başka renkte (TASARIM §2.1). */

.sekmeler {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    background: var(--kart);
    border: 1px solid var(--cizgi-kart);
    border-radius: var(--yaricap-kart);
    margin-bottom: 24px;
}

/* Şablonun sekme ölçüsü: 10/16 dolgu, 14 punto, 500 ağırlık. Dolgu 4'ün katına
   yuvarlandı. DÜZEN bizde kalıyor (hap şeridi): şablonun kendi sayfalarında sekme
   kart içeriğinin üstünde kullanılmıyor, yani kopyalanacak bir örnek yok. */
.sekmeler a {
    padding: 12px 16px;
    color: var(--soluk);
    border-radius: var(--yaricap);
    font-size: var(--punto-ikincil);
    font-weight: 500;
}

.sekmeler a:hover { color: var(--yazi); background: var(--n50); text-decoration: none; }

.sekmeler a.active {
    color: var(--vurgu);
    background: var(--vurgu-acik);
    font-weight: 600;
}

/* ---- modal pencere (08.09.2026) ----

   Kural portalınkiyle aynı ve gerekçesi de orada yazılı: yeni kayıt formu sayfanın
   dibinde değil pencerede açılır — dipte açılan bir form, tıklayan kişiye "düğme
   çalışmadı" dedirtiyor. Stil portaldan KOPYALANDI, bileşen ise ORTAK; iki dosyada
   duran şey yalnız birkaç kural. */

.perde {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgb(22 34 51 / .45);
}

.pencere {
    display: flex;
    flex-direction: column;
    width: min(560px, 100%);
    max-height: 100%;
    background: var(--kart);
    border-radius: var(--yaricap-kart);
    box-shadow: var(--golge-buyuk);
}

.pencere.genis { width: min(880px, 100%); }

/* Başlık sabit, gövde kayıyor: uzun bir formda "Kapat" ekrandan çıkmamalı. */
.pencere-baslik {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 20px 20px 12px;
    border-bottom: 1px solid var(--cizgi);
}

.pencere-baslik h2 { margin: 0; }

.pencere-govde {
    overflow-y: auto;
    padding: 20px;
}

/* ---- tablo satırındaki eylemler (08.09.2026) ----

   Kullanıcı bildirdi: "düğmeler iç içe girmesin". Sandbox ekranında iki eylem yan yana
   ve aralarında boşluk yoktu — ekranda "DüzenleBağlantıyı Sına" diye tek kelime gibi
   okunuyordu. Hücre artık esnek bir sıra ve eylemler düğme. */

td.islem {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    white-space: nowrap;
}

/* ---- kayıt bildirimi (kullanıcı isteği, 08.09.2026) ----

   Kullanıcının sözü: "Kaydet düğmeleri kaydetme işlemi yapmasına rağmen tepki
   vermiyor. Azıcık tepki versin yahu." Haklı: ekranda hiçbir şey değişmeyince
   kaydın olup olmadığı bilinmiyor ve kullanıcı ikinci kez basıyor.

   SABİT "Kaydedildi" YAZISI DEĞİL, SAAT yazıyor — portalda 0.107.1'de verilen
   kararın aynısı: sabit bir yazı ekranda kalınca bunun BU SEFERKİ kayıt mı yoksa
   yarım saat öncesi mi olduğu anlaşılmıyor. */

.kaydedildi {
    margin: 8px 0 0;
    color: var(--basari);
    font-size: var(--punto-ikincil);
}