/* =============================================================================
   VERI GIRIS EKRANLARI (Create / Edit)
   -----------------------------------------------------------------------------
   Onceki duzen tek bir 720 piksellik karti sayfanin sol ustune birakiyordu;
   genis ekranda saginda ve altinda ekranin yarisi kadar bos alan kaliyor, form
   da etiket-kutu-etiket-kutu diye akan duz bir listeydi. Yeni duzen uc seyi
   degistirir:

     1) BASLIK SERIDI - hangi ekranda olundugunu ve ne yapildigini soyleyen bir
        ust bant (ikon + baslik + tek cumlelik aciklama + geri baglantisi).
     2) BOLUMLER - alanlar anlamli gruplara ayrilir; her grubun kendi ikonu,
        basligi ve gerekiyorsa aciklamasi olur. Form artik "liste" degil,
        okunabilir bir belge.
     3) BOLUM BASLIGI - kendi satirinda: ikon + versal kucuk baslik + satirin
        sonuna uzanan ince cizgi. Alanlar kartin sol kenarindan baslar, hepsi
        ayni hatta oturur; bolum ayraci da bu cizgidir.
     4) OLCULU GENISLIK - kart icerige gore 1040 (genis) ya da 720 (kisa
        formlar) piksel. Alan sayisina gore secilir ki satirin sagi bos kalmasin.
     5) EYLEMLER - ayri bir cubukta degil, formun sag alt kosesinde.

   Alan denetimlerinin kendisi (.form-control, .field-label, .text-danger ...)
   site.css'te kalir; buradaki sinifar yalnizca DUZEN kurar.
   ========================================================================== */

/* Kart genisligi ICERIGE gore. 1040 piksel, dort alanlik bir satirin rahat
   oturdugu genisliktir; daha genisi alanlari gereksiz uzatir, satirin sagini
   bosaltir. Tek-iki alanli kisa formlar --dar ile 720'ye iner. */
.f-sayfa {
    max-width: 1040px;
}

.f-sayfa--dar {
    max-width: 720px;
}

/* ---------- baslik seridi ---------- */
.f-ust {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 16px;
}

.f-geri {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--bd);
    border-radius: 10px;
    background: var(--surf);
    color: var(--tx2);
    flex-shrink: 0;
}

.f-geri:hover {
    border-color: var(--ac);
    color: var(--ac);
    text-decoration: none;
}

.f-ust-ikon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--ac-bg);
    color: var(--ac-text);
    flex-shrink: 0;
}

.f-ust-govde {
    min-width: 0;
}

.f-ust-baslik {
    display: block;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--tx);
}

.f-ust-alt {
    display: block;
    font-size: 12.5px;
    color: var(--tx2);
    margin-top: 2px;
}

/* ---------- kart ve bolum bantlari ----------
   Uc yapi denendi. Ayri kartlar: boylari tutmadigi icin kirik dokuk. Sol etiket
   rayi: hizayi cozdu ama pahaliya - ray her bantta 242 piksel yiyor ve basligin
   ALTINDA kocaman bir bosluk birakiyordu (Personel ekraninda 214x734 piksellik
   bos bir dikdortgen).

   Su anki yapi: bolum basligi kendi satirindadir. Ikon + kucuk puntolu versal
   baslik + satirin geri kalanini dolduran ince cizgi. Kazanci:
     · Ray yok, dolayisiyla ray altindaki bosluk da yok; alanlar kartin sol
       kenarindan baslar, hepsi ayni hatta oturur.
     · Basliktan uzanan cizgi hem bolumleri ayirir hem de bandi yatay olarak
       baglar; ayrica bant kenarligina gerek kalmaz (tek cizgi, iki degil).
     · Kart genisligi artik icerige gore: dort alanlik satir 1040 pikselde tam
       oturur, kisa formlar (.f-sayfa--dar) 720 piksele iner ve tek alanin
       yaninda 550 piksellik bosluk kalmaz. */
.f-govde {
    background: var(--surf);
    border: 1px solid var(--bd);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.f-govde > .validation-summary-errors {
    margin: 18px 24px 0;
}

/* ---------- bolum bandi ---------- */
.f-bolum {
    padding: 16px 24px 0;
}

/* ---------- bolum basligi ----------
   Versal, harf araligi acilmis kucuk punto: baslik olduguna dair sinyali
   BUYUKLUKLE degil ritimle verir, boylece alan etiketleriyle yarismaz. Onceki
   surumdeki 30 piksellik gri ikon kutusu kaldirildi - her bolumde bir gri leke
   birakiyordu. */
.f-bolum-bas {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
}

/* Basliktan sonra satirin sonuna kadar uzanan ince cizgi: bolum ayraci budur,
   bantlarin ayrica kenarligi yoktur. */
.f-bolum-bas::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--bd-l);
}

.f-bolum-ikon {
    display: flex;
    align-items: center;
    color: var(--tx3);
    flex-shrink: 0;
}

.f-bolum-ad {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .085em;
    text-transform: uppercase;
    color: var(--tx2);
    white-space: nowrap;
}

.f-bolum-govde {
    min-width: 0;
}

.f-bolum-govde > * + * {
    margin-top: 14px;
}

/* ---------- alan izgarasi ----------
   12 sutunlu izgara: kisa alanlar (kod, sembol, tarih) yan yana durur, uzun
   alanlar tam genislik alir. Onceki auto-fit izgarasinda her alan en az 220px
   istedigi icin "Kod" ve "Sembol" gibi 4 karakterlik kutular da yari sayfa
   kapliyordu. */
.f-izgara {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px 16px;
}

/* Genislikler grid-column-START degil END uzerinden verilir. Kisayol yazim
   (grid-column: span N) baslangici da "span N" yaptigi icin, .f-satir-basi ile
   baslangici 1'e sabitlemek genisligi 1 sutuna dusuruyordu. */
.f-alan {
    min-width: 0;
    grid-column-end: span 12;
}

.f-2 { grid-column-end: span 2; }
.f-3 { grid-column-end: span 3; }
.f-4 { grid-column-end: span 4; }
.f-5 { grid-column-end: span 5; }
.f-6 { grid-column-end: span 6; }
.f-7 { grid-column-end: span 7; }
.f-8 { grid-column-end: span 8; }
.f-9 { grid-column-end: span 9; }
.f-12 { grid-column-end: span 12; }

/* Yeni satirdan basla. Bir onceki alan izgarayi tam doldurmadiginda (ör. adres
   basligi 6 sutun kaplayip yanindaki harita baglantisi kosula bagli oldugu icin
   hic cizilmediginde) sonraki alan bosluga tirmanip anlamsiz bir eslesme
   kuruyordu - "Adres 2" ile "Ilce" yan yana gibi. */
.f-satir-basi {
    grid-column-start: 1;
}

/* Alanin YANINDA duran aciklama. Ust dolgu etiket yuksekligi kadardir ki metin
   yanindaki kutunun ilk satiriyla ayni hizada baslasin. */
.f-not-yani {
    display: flex;
    align-items: center;
    padding-top: 22px;
}

.f-not-yani .form-text {
    margin-top: 0;
}

/* Izgaranin icinde, alanlarin yaninda duran anahtar. Ust dolgu etiket
   yuksekligi kadar; genislik sinirini burada izgara belirler. */
.f-alan--anahtar {
    padding-top: 22px;
}

.f-alan--anahtar .f-anahtar {
    max-width: none;
}

/* Izgara icindeki alanlarda site.css'ten gelen alt bosluk gereksiz: araligi
   izgaranin kendi gap'i verir. */
.f-izgara .field,
.f-izgara .field-row {
    margin-bottom: 0;
}

/* Zorunlu alan yildizi. Etiket metni asp-for'dan geldigi icin isaret
   markup'a degil, alanin kendisine verilen sinifa baglanir. */
.f-alan--zorunlu > .field-label::after,
.f-alan--zorunlu > .form-label::after {
    content: " *";
    color: var(--color-danger);
    font-weight: 700;
}

/* ---------- anahtar (switch) satiri ----------
   Ciplak onay kutusu + yanina sikistirilmis aciklama yerine, tiklanabilir bir
   satir. KENARLIK YOK: her anahtar cerceveli bir kutu oldugunda sayfa kutu
   icinde kutuya donuyor, goz nereye bakacagini bilemiyordu. Ayrimi cok hafif
   bir zemin ve satirin kendi bosluklari veriyor.

   Genislik metnin okunabilirligiyle sinirli: 620 pikselin otesinde iki
   kelimelik bir etiketin sag ucunda tek basina duran bir dugme kaliyor. */
.f-anahtar {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 11px 14px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--alt);
    cursor: pointer;
    margin: 0;
    max-width: 620px;
}

.f-anahtar:hover {
    background: color-mix(in srgb, var(--ac) 6%, var(--alt));
}

.f-anahtar + .f-anahtar {
    margin-top: 8px;
}

/* Is kurali tasiyan anahtarlar (ticket muafiyeti, varsayilan kayit ...):
   dolu sari zemin yerine yalnizca sol kenarda ince bir uyari cizgisi. Ayni
   bilgiyi verir, ekranda leke birakmaz. */
.f-anahtar--dikkat {
    background: var(--alt);
    box-shadow: inset 2px 0 0 var(--color-warning);
}

.f-anahtar--dikkat:hover {
    background: color-mix(in srgb, var(--color-warning) 8%, var(--alt));
}

.f-anahtar-govde {
    flex: 1;
    min-width: 0;
}

.f-anahtar-ad {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--tx);
}

.f-anahtar-not {
    display: block;
    font-size: 12px;
    color: var(--tx2);
    line-height: 1.55;
    margin-top: 3px;
}

.f-anahtar-kutu {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 38px;
    height: 22px;
    margin: 1px 0 0;
    border: none;
    border-radius: 999px;
    background: var(--bd);
    cursor: pointer;
    flex-shrink: 0;
    order: 2;
    transition: background .15s ease;
}

.f-anahtar-kutu::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    transition: transform .15s ease;
}

.f-anahtar-kutu:checked {
    background: var(--ac);
}

.f-anahtar-kutu:checked::after {
    transform: translateX(16px);
}

.f-anahtar-kutu:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ac-bg);
}

/* ---------- eylem satiri ----------
   Ayri bir cubuk DEGIL: formun sag alt kosesi. Zemin rengi ve yapiskanlik
   birakildi - ikisi de bu satiri kartin uzerinde yuzen bagimsiz bir bara
   ceviriyordu. Ustundeki ince cizgiyi son bolum bandi zaten veriyor, o yuzden
   burada border-top yok (aksi halde cift cizgi olurdu).

   Birincil eylem EN SAGDA durur; sag hizalamada gozun son duragi orasidir.
   Markup sirasi da buna gore: once ikincil baglantilar, en sonda submit. */
.f-eylem {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px 18px;
}

/* =============================================================================
   SAYFA YETKILERI (Personel formundaki bolum)
   -----------------------------------------------------------------------------
   Her sayfa icin dort basamakli tek bir merdiven: Yok -> Okuma -> Yazma -> Silme.
   Yetki KUMULATIFTIR; secilen basamak ve solundaki her sey dolu gorunur, boylece
   "silen yazar, yazan okur" iliskisi tek bakista okunur ve "silebilir ama
   goremez" gibi anlamsiz bir durum kurulamaz.

   Yazma ve silme renkleri, listelerdeki duzenle/sil ikonlarinin jetonlariyla
   AYNIDIR (--color-success / --color-danger): kullanici ayni eylemi ayni renkte
   gorur.

   Seviyeler formla birlikte gonderilir (gizli Yetkiler[anahtar] alanlari) ve
   PersonelSayfaYetkileri tablosuna yazilir. Ayni yetkiler Sistem > Erisim
   Izinleri panelinden de yonetilebilir; kural iki ekranda da YetkiKatalogu'ndan
   gelir.
   ========================================================================== */
.f-yetki {
    --y-okuma: var(--ac);
    --y-okuma-metin: color-mix(in srgb, var(--ac) 72%, var(--tx));
    --y-okuma-bg: color-mix(in srgb, var(--ac) 12%, var(--surf));
    --y-yazma: var(--color-success);
    --y-yazma-metin: color-mix(in srgb, var(--color-success) 62%, var(--tx));
    --y-yazma-bg: color-mix(in srgb, var(--color-success) 14%, var(--surf));
    --y-silme: var(--color-danger);
    --y-silme-metin: color-mix(in srgb, var(--color-danger) 68%, var(--tx));
    --y-silme-bg: color-mix(in srgb, var(--color-danger) 12%, var(--surf));
}

:root[data-theme="dark"] .f-yetki {
    --y-okuma-bg: color-mix(in srgb, var(--ac) 28%, var(--surf));
    --y-yazma-bg: color-mix(in srgb, var(--color-success) 24%, var(--surf));
    --y-silme-bg: color-mix(in srgb, var(--color-danger) 24%, var(--surf));
}

.f-yetki-sablon {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

/* Yonetici rolu secilince bolum anlamini yitirir (yonetici her sayfada tam
   yetkilidir). Devre disi BIRAKILMAZ, soluklastirilir: alanlar formla gitmeye
   devam eder, rol geri cevrildiginde girilen seviyeler kaybolmaz. */
.f-yetki-kilit {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
    border: 1px solid var(--bd);
    border-radius: 9px;
    background: var(--alt);
    font-size: 12px;
    line-height: 1.5;
    color: var(--tx2);
    max-width: 700px;
}

.f-yetki-kilit .ic {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--tx3);
}

.f-yetki--kilitli .f-yetki-sablon,
.f-yetki--kilitli .f-yetki-liste {
    opacity: .45;
}

.f-yetki-sablon-etiket {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--tx3);
    margin-right: 2px;
}

.f-yetki-sablon-dugme {
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--bd);
    border-radius: 7px;
    background: var(--surf);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--tx2);
    cursor: pointer;
}

.f-yetki-sablon-dugme:hover {
    border-color: var(--ac);
    color: var(--ac);
}

/* Liste TEK sutundur. Iki sutun denendi ve birakildi: merdiven 336 piksel yer
   istiyor, alan sutunu ikiye bolununce sayfa adina 100 piksel kaliyor ve
   "Destek Kayıtları", "E-posta Hesapları" gibi adlar iki satira sariyordu -
   satir yukseklikleri bozuluyor, liste alacali gorunuyordu. Tek sutunda ad
   rahat sigar, merdivenler tek bir dikey hatta oturur. */
.f-yetki-liste {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
    align-items: start;
}

.f-yetki-grup {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--tx3);
    padding: 14px 2px 4px;
}

/* Baslik satiri ile veri satiri AYNI iki sutunlu olcuyu kullanir; sagdaki
   kutucuk izgarasi da ikisinde ortak (.y-kutucuklar), boylece her yazi kendi
   kutusunun tam ustune oturur. */
.f-yetki-satir,
.f-yetki-basliklar {
    display: grid;
    /* 250 -> 330: "DIŞA AKTAR" basligi 5 esit sutuna bolundugunde 250px'e
       sigmiyor, kisalarak okunmaz hale geliyordu. */
    grid-template-columns: minmax(0, 1fr) 330px;
    align-items: center;
    gap: 14px;
}

.f-yetki-satir {
    padding: 5px 2px;
    border-bottom: 1px solid var(--bd-l);
}

.f-yetki-basliklar {
    padding: 2px 2px 6px;
    border-bottom: 1px solid var(--bd);
}

.f-yetki-basliklar span {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tx3);
    text-align: center;
    white-space: nowrap;
}

/* Formdaki kutucuk izgarasi paneldekinden dar; genislik burada satirin sag
   sutunundan gelir (izinler panelinde sabit 430px'tir). */
.f-yetki-satir .y-kutucuklar,
.f-yetki-basliklar .y-kutucuklar {
    width: 100%;
}

.f-yetki-satir:last-child {
    border-bottom: none;
}

.f-yetki-ad {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tx);
}

.f-yetki-ad .ic {
    color: var(--tx3);
}

/* Ad tek satirda kalir; sigmazsa uc nokta - satir yuksekligi hicbir kosulda
   degismesin diye. */
.f-yetki-ad-metin {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Yetkinin BITTIGI basamak ince bir cerceveyle isaretlenir: dolu basamaklar
   arasinda hangisinin secim oldugu belli olsun. */
/* Dar ekranda iki sutun sigmaz: liste tek sutuna iner. */
@media (max-width: 1080px) {
    .f-yetki-liste {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 720px) {
    .f-yetki-satir {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    }

/* 12 sutunluk izgara 900 pikselin altinda anlamini yitiriyor: ucer sutunluk
   alanlar 60 piksele iniyor. Alanlar yariya, cok darlar tam genislige gecer. */
@media (max-width: 900px) {
    .f-2, .f-3, .f-4 {
        grid-column-end: span 6;
    }

    .f-5, .f-7, .f-8, .f-9 {
        grid-column-end: span 12;
    }
}

@media (max-width: 760px) {
    .f-2, .f-3, .f-4, .f-5, .f-6, .f-7, .f-8, .f-9 {
        grid-column-end: span 12;
    }

    .f-bolum {
        padding: 16px 15px 18px;
    }

    .f-eylem {
        padding: 14px 15px 16px;
    }

    .f-eylem .btn {
        flex: 1;
        justify-content: center;
    }
}

/* ---- "Rolün yetkilerini uygula" ----
   Yetki matrisinin hemen ustunde durur: isaretliyse asagidaki secimler
   kaydedilmez, secilen rolun sablonu yazilir (bkz. PersonelController). */
.f-rol-uygula {
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--bd);
    border-radius: var(--radius-sm);
    background: var(--ac-bg);
}

.f-rol-uygula label {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--tx2);
    cursor: pointer;
}

.f-rol-uygula input {
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--ac);
}

.f-rol-uygula b {
    color: var(--tx);
}

/* ------------------------------------------------------- bilgilendirme şeridi
   Formda ARTIK OLMAYAN bir şeyin nerede olduğunu söyler. Personel formundaki
   yetki matrisi Erişim İzinleri ekranına taşındı; kullanıcı formu açtığında
   "yetkiler nerede?" diye aramasın diye bölümün durduğu yerde bu şerit kalıyor.
   Uyarı değil, yön tarifi: bu yüzden vurgu renginin soluk zemini kullanılıyor. */
.f-bilgi-serit {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--ac) 22%, var(--bd));
    border-radius: var(--radius-sm);
    background: var(--ac-bg);
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--tx2);
}

.f-bilgi-serit .ic {
    flex: 0 0 auto;
    color: var(--ac);
}

.f-bilgi-baglanti {
    margin-left: auto;
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--ac);
    white-space: nowrap;
}

@media (max-width: 620px) {
    .f-bilgi-serit {
        flex-wrap: wrap;
    }

    .f-bilgi-baglanti {
        margin-left: 0;
    }
}