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

:root {
    /* ---- nötr ölçek (portalınkiyle aynı) ---- */
    --n0: #ffffff;
    --n50: #f8fafc;
    --n100: #f1f5f9;
    --n200: #e2e8f0;
    --n300: #cbd5e1;
    --n500: #64748b;
    --n700: #334155;
    --n900: #0f172a;

    /* ---- eylem renkleri: her birinin bir işi var ---- */
    --vurgu: #4f46e5;
    --vurgu-koyu: #4338ca;
    --vurgu-acik: #eef2ff;

    --basari: #059669;
    --basari-acik: #ecfdf5;

    --uyari: #b45309;
    --uyari-acik: #fffbeb;

    --hata: #dc2626;
    --hata-koyu: #b91c1c;
    --hata-acik: #fef2f2;

    --bilgi: #7c3aed;
    --bilgi-acik: #f5f3ff;

    /* ---- roller ---- */
    --zemin: var(--n50);
    --kart: var(--n0);
    --yazi: var(--n900);
    --soluk: var(--n500);
    --cizgi: var(--n200);
    --menu-zemin: #1e1b4b;
    --menu-yazi: #c7d2fe;

    /* ---- punto: YALNIZ BU BEŞİ ---- */
    --punto-kucuk: 12px;
    --punto-ikincil: 13px;
    --punto-govde: 15px;
    --punto-baslik2: 18px;
    --punto-baslik1: 24px;

    /* ---- ölçü ---- */
    --oge-yukseklik: 38px;
    --yaricap: 6px;
    --yaricap-kart: 10px;
    --menu-genislik: 220px;

    --golge-kart: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px rgba(15, 23, 42, .08);
    --odak-halka: rgba(79, 70, 229, .20);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--zemin);
    color: var(--yazi);
    font-family: "Segoe UI", system-ui, -apple-system, 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;
}

.menu .marka {
    padding: 0 16px 16px;
    color: var(--n0);
    font-size: var(--punto-baslik2);
    font-weight: 600;
}

.menu .marka .alt {
    display: block;
    color: var(--menu-yazi);
    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: rgba(255, 255, 255, .06); text-decoration: none; }

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

.menu .dip {
    margin-top: auto;
    padding: 16px;
    border-top: 1px solid rgba(255, 255, 255, .10);
    font-size: var(--punto-kucuk);
}

.menu .dip .kim { color: var(--n0); }

.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;
    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); }

    /*
      SERBEST DÜĞME: üst şerit eklemek yerine (kullanıcı kararı) düğme içeriğin
      üstünde duruyor. `.govde`nin üst boşluğu düğmeyi karşılamak için büyüyor —
      yoksa sayfa başlığı düğmenin altında kalırdı.
    */
    .menu-dugmesi {
        display: inline-flex;
        align-items: center;
        position: fixed;
        top: 12px;
        left: 12px;
        z-index: 30;
        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;
    }

    .govde { padding: 64px 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); }

/* ---- 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: 4px; }
.alanlar label.genis { grid-column: 1 / -1; }

.alanlar label > span:first-child,
.alanlar > label {
    color: var(--soluk);
    font-size: var(--punto-ikincil);
}

/*
  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);
    border-radius: var(--yaricap-kart);
    padding: 16px;
    margin-bottom: 16px;
}

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

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

.kutu .sayi { display: block; font-size: var(--punto-baslik1); font-weight: 600; }
.kutu .etiket { display: block; color: var(--soluk); font-size: var(--punto-ikincil); }

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

.liste {
    width: 100%;
    border-collapse: collapse;
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: var(--yaricap-kart);
    overflow: hidden;
}

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

  `display: block` tabloyu kendi kaydırma kabına çeviriyor. GENİŞ EKRANDA HİÇBİR ŞEY
  DEĞİŞMİYOR: 1440 px'te tablo yine tam genişlikte kalıyor (ölçüldü). Bu yüzden medya
  sorgusuna gerek yok — koşulsuz kural, koşullu kuraldan güvenlidir.

  `overflow: hidden` yukarıda köşeleri yuvarlamak için duruyor; `overflow-x: auto` onu
  yalnız yatayda gevşetiyor, dikey kırpma sürüyor.
*/
.liste { display: block; overflow-x: auto; }

.liste th, .liste td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--cizgi);
}

.liste th {
    background: var(--n100);
    color: var(--soluk);
    font-size: var(--punto-ikincil);
    font-weight: 600;
}

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

.giris-sayfa {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
    background: var(--menu-zemin);
}

.giris-kart {
    width: 100%;
    max-width: 380px;
    background: var(--kart);
    border-radius: var(--yaricap-kart);
    padding: 32px;
    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; }

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

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