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

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

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