/* =============================================================================
   VERI GIRIS EKRANLARI (Create / Edit) - "KARTLI FORM" DUZENI
   -----------------------------------------------------------------------------
   KULLANICI KARARI (2026-10-02): kartli, sikisik form
   (https://claude.ai/artifact/96krDN4LnS5ZYhuKwaMdub). 2026-10-01'deki
   "D · Kayit sayfasi"nin (1100 px, tek kagit + sagda 280 px ray) YERINE
   gecti; kimlik bandi ve 12 sutunluk izgara ondan kaldi.

     · Sayfa SOLA YASLIDIR (Aktivite formunun hizasi; butun formlar ayni
       yerden baslasin), en cok 880 px, TEK SUTUN. --genis (Rol, yetki
       izgarasi) 1180 px, --yalin (bilgi sayfasi) 800 px.
     · Ustte KIMLIK BANDI (.f-ust): geri, tas (28 px; ikon ya da bas harfler),
       menu yolu, baslik + kip cipi, istege bagli bilgi satiri, EYLEMLER.
       Yapiskan; kart degil, sayfa zemininde altinda tek cizgi olan bir serit.
     · .f-govde kagit DEGIL, saydam bir kaptir; HER .f-bolum ayri KARTTIR
       (10 px kose, ic bosluk 9/12/11, kartlar arasi 10 px). Baslik 20 px:
       15 px kutusuz ikon + 12/700 ad. Yalnizca data-kapali tasiyan bolum
       katlanir (form-bolum.js).
     · FORMDA BILGILENDIRME YOK: bolum notu ve ustte uyari bandi basilmaz;
       alan alti yardim satiri ve etiket sagi kisa not kalabilir. Kayit
       yapilamiyorsa Kaydet sonuk basilir, nedeni .f-eylem-ipucu sarmalinin
       ipucundadir.
     · SECIM KUTUSUNUN SOLUNDA alanin simgesi (.f-kutu); yalnizca
       select.f-secim, metin kutulari ikonsuz.
     · RAY YOK: zorunlu alan sayaci ve listesi kalkti; alanin yildizi ve
       kirmizi hatasi yeter.
     · OLCULER: kutu 32 px, alan yazisi 13, etiket 11,5/600 ve altinda 3 px,
       satir araligi 8, sutun araligi 10, yardim 12 px. Yardim YOKSA yer
       ayrilmaz.
     · ALAN ENI ICERIK KADAR: 12 sutunluk izgarada kod 2, oran 3, secim 4,
       ad/e-posta 6 sutun (880 piksellik sayfada kartin ici ~854 px).

   Denenip birakilanlar (yeniden onerme): defter/hucre-tablo formu
   (2026-09-03), sol etiket rayi, formun dibinde yuzen eylem cubugu, her
   alanin altinda bos yardim yuvasi ("H", 2026-10-01), alani "Daha fazla
   goster" arkasina gizlemek, tek kagit + sag ray ("D", 2026-10-01).
   ========================================================================== */

/* ---------- sayfa: tek sutun ---------- */
.f-sayfa {
    --f-ust-bosluk: 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "ust"
        "govde";
    row-gap: 10px;
    align-items: start;
    max-width: 880px;
    margin: 0 auto 0 0;
}

/* Rol: yetki izgarasi tam genislik ister. */
.f-sayfa--genis {
    max-width: 1180px;
}

.f-sayfa--yalin {
    max-width: 800px;
}

/* ---------- kimlik bandi ----------
   Yapiskan. Tarayici yapisma cizgisini kaydirma kabinin (.page-content) ust
   dolgusunun ICINDEN olcuyor, yani yapisan bant tavanin 12 piksel altinda
   durur ve o araliktan alttaki kagit kayarken gorunurdu: sayfa renginde,
   yukari kaydirilmis ikinci bir golge o araligi orter. Bant kart degil:
   sayfa zemininde, altinda tek cizgi; kartlar kayarken altinda kalir. */
.f-ust {
    grid-area: ust;
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 9px 0;
    background: var(--page);
    border-bottom: 1px solid var(--bd);
    box-shadow: 0 calc(-1 * var(--f-ust-bosluk) - 2px) 0 2px var(--page);
}

.f-geri {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--tx2);
    flex-shrink: 0;
}

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

/* Tas: kaydin isareti. Ikon ya da (kisi kayitlarinda) bas harfler.
   Isaretlemedeki ikon 19 px yazili; bandin olcusu burada verilir. */
.f-ust-ikon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--ac-bg);
    color: var(--ac-text);
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}

.f-ust-ikon svg {
    width: 15px;
    height: 15px;
}

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

.f-yol {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 1px;
    font-size: 11px;
    color: var(--tx3);
    white-space: nowrap;
    overflow: hidden;
}

.f-yol a {
    color: var(--tx2);
    text-decoration: none;
}

.f-yol a:hover {
    color: var(--ac);
}

.f-ust-baslik {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--tx);
}

/* Uzun kayit adi (Firma, cari unvani) uc noktayla kesilir; cip kesilmez. */
.f-ust-ad {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Bilgi satiri: basligin altinda kaydin kimligini tamamlayan bir-iki deger
   (e-posta, veri tabani, tarih). Istege bagli. */
.f-ust-alt {
    display: flex;
    gap: 14px;
    margin-top: 1px;
    font-size: 11.5px;
    color: var(--tx2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.f-ust-alt b {
    font-weight: 600;
    color: var(--tx);
}

.f-kip {
    flex: none;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ac-bg);
    color: var(--ac-text);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
}

/* Eylemler: birincil EN SAGDA; markup sirasi da oyle - once ikincil
   baglantilar, en sonda submit. */
.f-ust-eylem {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Kapali Kaydet'i saran span: kaydin neden yapilamadigi (tanim yok) bunun
   title'inda yazar. Kilitli dugmenin kendi title'i guvenilir cikmiyor
   (disabled oge fare olaylarini almadigi icin tarayiciya gore ipucu hic
   acilmiyor). Sarmal yalnizca dugmeyi tasir, gorunume bir sey eklemez. */
.f-eylem-ipucu {
    display: inline-flex;
}

/* Form sayfasindaki BUTUN dugmeler kutularla ayni 32 piksel: govdedeki
   "Test Et", "Logo Seç" site.css'in 38 piksellik dugmesinde kaliyordu. */
.f-sayfa .btn {
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
}

/* ---------- govde: saydam kap, her bolum bir kart ----------
   Kartlar arasi bosluk flex gap'tir: kapta gizli input, bos dogrulama ozeti
   ve hidden uyari kutulari da durur; display:none olan cocuk gap almaz,
   "+ kardes" kurali ise onlari da sayardi. */
.f-govde {
    grid-area: govde;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.f-govde > .validation-summary-errors,
.f-govde > .alert {
    margin: 0;
}

.f-govde > .validation-summary-valid {
    display: none;
}

.f-bolum {
    min-width: 0;
    padding: 9px 12px 11px;
    background: var(--surf);
    border: 1px solid var(--bd);
    border-radius: 10px;
}

/* ---------- bolum basligi ----------
   20 px: kutusuz 15 px ikon + ad. Sagda istege bagli kisa not
   (.f-bolum-not). */
.f-bolum-bas {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    min-height: 20px;
    margin-bottom: 6px;
    color: var(--tx2);
}

.f-bolum-ikon {
    display: flex;
    flex: none;
    color: var(--tx2);
}

.f-bolum-ikon svg {
    width: 15px;
    height: 15px;
}

.f-bolum-ad {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--tx);
    white-space: nowrap;
}

/* Basligin sagindaki kisa not (Rol'deki kullanici sayisi, dosya siniri). */
.f-bolum-not {
    min-width: 0;
    margin-left: auto;
    font-size: 11px;
    color: var(--tx3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Katlanir bolum (yalnizca data-kapali): form-bolum.js basligin icerigini
   role="button" tasiyan .f-bolum-tetik sarmalina alir, oku ve ozeti koyar.
   Tiklama yuzeyi kartin ic boslugundan biraz tasar ki hover zemini basligi
   sarsin. */
.f-bolum-bas--katlanir {
    margin: -4px -6px 2px;
    padding: 4px 6px;
    border-radius: 7px;
    cursor: pointer;
    user-select: none;
}

.f-bolum-bas--katlanir:hover {
    background: var(--alt);
}

.f-bolum-tetik {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    border-radius: 5px;
}

.f-bolum-tetik:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--ac);
}

.f-bolum-ok {
    display: flex;
    color: var(--tx3);
    flex-shrink: 0;
    transition: transform .15s ease;
}

.f-bolum-tetik[aria-expanded="true"] .f-bolum-ok {
    transform: rotate(90deg);
}

.f-bolum-ozet {
    display: none;
    min-width: 0;
    font-size: 12px;
    color: var(--tx2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.f-bolum-ozet b {
    font-weight: 600;
    color: var(--tx);
}

.f-bolum--kapali .f-bolum-bas {
    margin-bottom: -4px;
}

.f-bolum--kapali .f-bolum-ozet {
    display: block;
}

.f-bolum--kapali .f-bolum-govde {
    display: none;
}

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

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

/* ---------- alan izgarasi ----------
   12 sutun; genislik grid-column-START degil END uzerinden verilir
   (.f-satir-basi baslangici 1'e sabitler, kisayol yazim onu ezerdi). */
.f-izgara {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 8px 10px;
}

.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-12 { grid-column-end: span 12; }

.f-satir-basi {
    grid-column-start: 1;
}

/* ---------- denetimler: 32 piksel ----------
   site.css'in genel kutusu (40 px, 13,5 px) baska ekranlarda da kullanildigi
   icin olcu burada, form sayfasinin kapsaminda verilir. Secim kutusu dugmesi
   (.sk-dugme) .form-control tasidigi icin ayni olcuyu alir. */
.f-sayfa .field-label,
.f-sayfa .form-label {
    font-size: 11.5px;
    font-weight: 600;
    line-height: 15px;
    margin-bottom: 3px;
}

.f-sayfa .form-control,
.f-sayfa .form-select {
    height: 32px;
    padding: 0 10px;
    font-size: 13px;
    border-radius: 7px;
}

.f-sayfa textarea.form-control {
    height: auto;
    padding: 7px 10px;
    line-height: 1.5;
}

.f-sayfa .form-text {
    font-size: 12px;
    line-height: 1.3;
    margin-top: 3px;
}

.f-sayfa .text-danger {
    font-size: 12px;
    margin-top: 3px;
}

/* Bos dogrulama yuvasi yer tutmaz; hata gelince belirir. */
.f-sayfa .field-validation-valid {
    display: none;
}

.f-izgara .field,
.f-izgara .field-row {
    margin-bottom: 0;
}

/* Zorunlu alan yildizi; alan dolunca kalkar (form-bolum.js .f-alan--dolu). */
.f-alan--zorunlu > .field-label::after,
.f-alan--zorunlu > .form-label::after {
    content: " *";
    color: var(--color-danger);
    font-weight: 700;
}

.f-alan--zorunlu.f-alan--dolu > .field-label::after,
.f-alan--zorunlu.f-alan--dolu > .form-label::after {
    content: none;
}

/* ---------- KUTU IKONLARI — yalnizca select.f-secim ----------
   Secim kutusunun solunda 14 px ikincil tonda alanin simgesi (odakta vurgu
   mavisi); kutunun yazisi simgenin arkasindan baslar. Yazi girilen kutular
   ikonsuzdur (kullanici karari); Aktivite'nin hesaplanan Toplam Sure
   gostergesi (Sigma) bilerek istisnadir. Simge sabit tepe payiyla
   konur (32 px kutu): carkli secicinin paneli sarmalin icinde akista
   acildigi icin %50 ortalama panel acilinca simgeyi asagi kaydirirdi.
   z-index 1: secim kutusunun sarmali (.sk) konumlu oldugu icin onsuz
   dugmenin zemini simgeyi orterdi; acilir paneller (sk-panel 230,
   cark-secici 40) yine ustte kalir. Dolgu kurali .f-sayfa .form-control'un
   ARDINDA durmali: ozgulluk esit, sonra gelen kazanir. */
.f-kutu {
    position: relative;
    min-width: 0;
}

.f-kutu-ikon {
    position: absolute;
    left: 10px;
    top: 9px;
    z-index: 1;
    width: 14px;
    height: 14px;
    color: var(--tx2);
    pointer-events: none;
    transition: color .15s ease;
}

.f-kutu:focus-within .f-kutu-ikon {
    color: var(--ac);
}

.f-kutu .sk-dugme,
.f-kutu .form-control,
.f-kutu .form-select {
    padding-left: 31px;
}

/* ---------- anahtar (switch) ----------
   Gri zeminli bant DEGIL: anahtar + adi, kutularla ayni 32 piksellik satirda.
   Izgara icindeki anahtar ustunde etiket yok, ust dolgu etiketin yerini
   tutar ki komsu kutularla ayni hizaya otursun. Aciklama (f-anahtar-not) adin
   yaninda sonuk yazar. */
.f-anahtar {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}

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

/* Etiket satiri 15 + 3 px: anahtar komsu kutularla ayni hizaya oturur. */
.f-alan--anahtar {
    padding-top: 18px;
}

.f-anahtar-govde {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    min-width: 0;
}

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

.f-anahtar-not {
    font-size: 12px;
    color: var(--tx3);
    line-height: 1.4;
}

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

.f-anahtar-kutu::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    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);
}

/* ---------- cipler: az ve sabit secenekli TEK secim ----------
   Ilk kullanan Aktivite formunun Durum'u (kullanici karari, 2026-10-02).
   Yerli radyo + etiket: JS gerekmez, ok tuslari grubun icinde gezer, deger
   formla dogal gider. Radyo gorunmez ama odaklanir; gorunen yuz kardes
   span (.f-cip-yuz). Noktanin rengi sayfadan (--f-cip-renk), yoksa soluk.
   Uzun ya da veriden turen listeler icin select.f-secim kullanilir. */
.f-cipler {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 0;
}

.f-cip {
    position: relative;
    display: inline-flex;
    margin: 0;
}

.f-cip-girdi {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.f-cip-yuz {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 9px;
    border: 1px solid var(--bd);
    border-radius: 7px;
    background: var(--surf);
    color: var(--tx);
    font-size: 12px;
    white-space: nowrap;
}

.f-cip:hover .f-cip-yuz {
    border-color: var(--tx3);
}

.f-cip-girdi:checked + .f-cip-yuz {
    border-color: var(--ac);
    background: var(--ac-bg);
    color: var(--ac-text);
    font-weight: 600;
}

.f-cip-girdi:focus-visible + .f-cip-yuz {
    outline: 2px solid var(--ac);
    outline-offset: 2px;
}

.f-cip-girdi:disabled {
    cursor: default;
}

.f-cip-girdi:disabled + .f-cip-yuz {
    opacity: .6;
}

.f-cip-nokta {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--f-cip-renk, var(--tx3));
}

/* Dar ekranda yetki listesi tek sutuna iner. */
@media (max-width: 1080px) {
    .f-yetki-liste {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    .f-sayfa {
        --f-ust-bosluk: 16px;
    }

    .f-2, .f-3, .f-4 {
        grid-column-end: span 6;
    }

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

/* Telefon: eylemler bandin altina tam genislikte iner; tas gizlenir, kart
   ic boslugu 10 px'e iner. */
@media (max-width: 760px) {
    .f-2, .f-3, .f-4, .f-5, .f-6, .f-7, .f-8 {
        grid-column-end: span 12;
    }

    /* Bilgi satiri dar ekranda SARAR: parcalari ayri <span> oldugu icin
       uc nokta calismiyor, son parca ("Temsilci ...") ortadan kesiliyordu. */
    .f-ust-alt {
        flex-wrap: wrap;
        gap: 0 12px;
        white-space: normal;
    }

    .f-ust {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .f-ust-ikon {
        display: none;
    }

    /* Eylemler esit sutunlar: flex:1'de taban, kenarligi kutuya dahil
       dugmede dolgu kadar kalip ipucu sarmalindaki Kaydet'i daraltiyordu;
       izgarada her ust oge (dugme ya da sarmal) ayni payi alir. */
    .f-ust-eylem {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        width: 100%;
    }

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

    .f-eylem-ipucu > .btn {
        width: 100%;
    }

    .f-bolum {
        padding: 10px;
    }

    .f-alan--anahtar {
        padding-top: 0;
    }

    .f-bolum--kapali .f-bolum-ozet {
        display: none;
    }
}

/* =============================================================================
   SECIM KUTUSU PANELI (secim-kutusu.js)
   -----------------------------------------------------------------------------
   select.f-secim, form kutusuyla ayni gorunen bir dugme + yuzen panele
   donusur. Panel, Cari tablosunun KOLON SUZGECI paneliyle ayni dildedir
   (kullanici karari, 2026-09-03): ince gri cerceve, ustte baslik ve arama
   kutusu, altinda kolon baslikli kucuk bir tablo - zebra satirlar, kolonlar
   arasinda dikey cizgi. Yerli select 1 piksellik saydam kutu olarak yerinde
   kalir (display:none OLMAZ: jquery-validate gizli alani dogrulamaz).
   ========================================================================== */
.sk {
    position: relative;
    min-width: 0;
}

/* SECICI SARMAL SINIFIYLA BIRLIKTE YAZILIR (2026-09-18). Tek sinifla
   (".sk-yerli", 0-1-0) yazildiginda iki kural onu geciyordu, ikisi de 0-1-1:
   bootstrap'in "select:disabled { opacity: 1 }" kurali ve sayfa kurallari
   (ornegin rapor-secim.css ".rsecim-form input, .rsecim-form select" -
   dosya sonradan yuklendigi icin esitlikte de o kazaniyordu). Kutu
   KILITLENDIGINDE ikisi bir araya gelip 1 piksellik saydam kutuyu dugmenin sol
   ustunde 22x16'lik gri, cerceveli bir kutucuk olarak ciziyordu (rapor
   penceresinde tarih kirilimi "Tumu"de kilitlenince goruldu). Sarmalla birlikte
   0-2-1 olunca oncelik geri bize gecer; dolgu/cerceve/zemin de burada
   sifirlanir ki sayfaya ozel kurallar yerli select'i buyutemesin. */
.sk select.sk-yerli {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 0;
    pointer-events: none;
}

/* Dugme .form-control sinifini da tasir: kenarlik, dolgu, yazi ve odak
   halkasi metin kutusuyla birebir. Burada yalnizca ic dizilim verilir. */
.sk-dugme {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.sk-dugme:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--ac) 45%, var(--bd));
}

.sk-dugme[aria-expanded="true"] {
    border-color: var(--ac);
    box-shadow: 0 0 0 3px var(--ac-bg);
}

.sk-dugme:disabled {
    cursor: default;
    color: var(--tx3);
    background: var(--alt);
}

.sk-metin {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sk-dugme--bos .sk-metin {
    color: var(--tx3);
}

/* Secili degerin kodu: tablodaki cari kodu gibi sabit genislikli, ikincil. */
.sk-kod {
    margin-right: 7px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--tx2);
}

.sk-ok {
    flex: none;
    color: var(--tx3);
    transition: transform .15s ease, color .15s ease;
}

.sk-dugme[aria-expanded="true"] .sk-ok {
    transform: rotate(180deg);
    color: var(--ac);
}

/* ---- yuzen panel: kolon suzgeci paneliyle ayni kabuk ---- */
@keyframes sk-ac {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.sk-panel {
    --sk-cizgi: color-mix(in srgb, var(--bd) 50%, var(--tx3));
    --sk-bant: color-mix(in srgb, var(--alt) 55%, var(--surf));
    position: fixed;
    z-index: 230;
    display: flex;
    flex-direction: column;
    max-height: 360px;
    /* Panel ZEMINI gri (kullanici istegi, 2026-09-03): arama kutusu ve tablo
       beyaz kutular olarak gri bir cerceve alaninin icinde durur - kolon
       suzgeci panelindeki "dis cerceve" hissi. Kenarlik cizgisi de ayni tonda. */
    background: var(--alt);
    border: 1px solid var(--sk-cizgi);
    border-radius: 10px;
    box-shadow: var(--shadow-card-lg);
    animation: sk-ac .12s ease;
}

/* Arama kutusu: ince cerceve, buytec SAGDA (kolon suzgecindeki gibi). */
.sk-ara {
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 10px 8px;
    padding: 0 9px 0 10px;
    height: 32px;
    border: 1px solid var(--bd);
    border-radius: 8px;
    background: var(--surf);
    color: var(--tx3);
    transition: border-color .12s ease, box-shadow .12s ease;
}

.sk-ara:focus-within {
    border-color: var(--ac);
    box-shadow: 0 0 0 3px var(--ac-bg);
}

.sk-ara input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 12.5px;
    color: var(--tx);
}

.sk-ara input::placeholder {
    color: var(--tx3);
}

.sk-ara-ikon {
    flex: none;
}

/* ---- Uygula seridi (select data-uygula, bkz. secim-kutusu.js) ----
   Panelin dibinde, listenin altinda; dugme saga yasli. Liste esnek oldugu
   icin serit panelin tavanini (max-height) asmaz, listeden yer alir. */
.sk-uygula-serit {
    flex: none;
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin: -2px 10px 10px;
}

/* HAP ve INCE (kullanici istegi, 2026-09-23: "cekmece icinde sirimasin"):
   dolu mavi blok yerine ince cerceveli kapsul; yalnizca uzerine gelince
   vurgu rengine dolar. */
.sk-uygula {
    height: 24px;
    padding: 0 14px;
    border: 1px solid color-mix(in srgb, var(--ac) 45%, var(--bd));
    border-radius: 999px;
    background: var(--surf);
    color: var(--ac);
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}

.sk-uygula:hover:not(:disabled) {
    background: var(--ac);
    border-color: var(--ac);
    color: #fff;
}

.sk-uygula:disabled {
    border-color: var(--bd);
    background: transparent;
    color: var(--tx3);
    cursor: default;
}

/* TUMU hapi (coklu kutu): basiliyken (hepsi isaretli) aksan zeminde durur,
   boylece listede gorunenlerin tamaminin secili oldugu seritten de okunur. */
.sk-tumu[aria-pressed="true"] {
    background: var(--ac-bg);
    border-color: var(--ac);
    color: var(--ac-text);
}

/* Bos secenek satiri (istege bagli tek secim): secim degil "secim yok"
   oldugu icin soluk ve egik yazilir. Secili degilken; seciliyse normal
   secili satir kiligina girer. */
.sk-tablo tbody tr.sk-bos-satir:not(.secili) td {
    color: var(--tx3);
    font-style: italic;
}

/* Kodlu listede bos satirin tek hucresi iki kolonu kaplar; .sk-td-ad'in
   flex kutusu colspan'i yok saydirip hucreyi kod kolonuna sikistiriyordu. */
.sk-tablo tbody tr.sk-bos-satir td[colspan] {
    display: table-cell;
}

.sk-tablo tbody tr.sk-bos-satir td[colspan] > span {
    margin-right: 6px;
}

.sk-tablo tbody tr.sk-bos-satir td[colspan] > .sk-onay {
    vertical-align: -2px;
}

/* ---- tablo ---- */
.sk-liste-sarmal {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin: 0 10px 10px;
}

.sk-liste {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    border: 1px solid var(--bd);
    border-radius: 8px;
    background: var(--surf);
}

/* Kolon cizgisi = tutamak: cizginin uzerinde 7 piksellik gorunmez serit,
   imlec col-resize; uzerine gelince ve suruklerken cizgi aksan rengine doner. */
.sk-tutamak {
    position: absolute;
    top: 1px;
    bottom: 1px;
    width: 7px;
    margin-left: -3px;
    cursor: col-resize;
    z-index: 2;
    touch-action: none;
}

.sk-tutamak::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 3px;
    width: 1px;
    background: transparent;
    transition: background .12s ease;
}

.sk-tutamak:hover::after,
.sk-tutamak.suruklenirken::after {
    background: var(--ac);
}

.sk-tablo {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    font-size: 12.5px;
}

/* Kolon basligi: Cari thead ile ayni - --alt zemin, kalin 11.5px, buyuk harf degil. */
.sk-tablo th {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 28px;
    padding: 0 10px;
    /* Beyaz (kullanici istegi): panel zemini zaten gri, baslik satiri da gri
       olunca tablo kutusunun ustu zeminle kaynasiyordu. Basligi alt cizgi ve
       kalin yazi ayirir. */
    background: var(--surf);
    border-bottom: 1px solid var(--sk-cizgi);
    text-align: left;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--tx2);
    white-space: nowrap;
}

.sk-tablo td {
    height: 28px;
    padding: 0 10px;
    color: var(--tx);
    vertical-align: middle;
    border-bottom: 1px solid var(--bd-l);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sk-tablo tbody tr:last-child td {
    border-bottom: none;
}

/* Kolonlar arasinda dikey cizgi - tablodaki hucre cizgisiyle ayni ton. */
.sk-tablo th + th,
.sk-tablo td + td {
    border-left: 1px solid var(--sk-cizgi);
}

.sk-td-kod {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--tx2);
}

.sk-td-ad {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 28px;
}

.sk-td-ad > span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* RENK NOKTASI (secim-kutusu.js data-renk): secenegin adinin solunda. */
.sk-td-ad > .sk-renk {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

/* COK SECIMLI LISTEDE SATIR BASINDAKI ISARET KUTUSU (2026-09-20).
   Gercek bir <input type=checkbox> degil: satirin kendisi role="option" ve
   tiklanabilir, ikinci bir odak hedefi klavye gezinmesini bolerdi. Durum
   satirin .secili sinifindan okunur. */
/* Secici ".sk-td-ad > .sk-kutucuk" (0,2,0): bir ustteki ".sk-td-ad > span"
   kurali da bu span'i yakaliyor ve flex:1 verip kutuyu satir boyunca
   geriyordu (olculdu). */
.sk-td-ad > .sk-kutucuk {
    flex: none;
    display: grid;
    place-items: center;
    width: 15px;
    height: 15px;
    border: 1px solid var(--bd);
    border-radius: 4px;
    background: var(--surf);
    color: transparent;
}

.sk-tablo tbody tr.secili .sk-kutucuk {
    border-color: var(--ac);
    background: var(--ac);
    color: #fff;
}

/* Zebra: cift satirlar tablodaki bant tonunda. */
.sk-tablo tbody tr:nth-child(even) td {
    background: var(--sk-bant);
}

.sk-tablo tbody tr {
    cursor: pointer;
}

.sk-tablo tbody tr:hover td,
.sk-tablo tbody tr.vurgu td {
    background: var(--alt);
}

/* Secili satir: aksan zemini, sol serit, sagda onay. */
.sk-tablo tbody tr.secili td {
    background: var(--ac-bg);
    color: var(--ac-text);
    font-weight: 600;
}

.sk-tablo tbody tr.secili td:first-child {
    box-shadow: inset 3px 0 0 var(--ac);
}

.sk-onay {
    flex: none;
    color: var(--ac);
    visibility: hidden;
}

.sk-tablo tbody tr.secili .sk-onay {
    visibility: visible;
}

.sk-tablo .sk-bos {
    text-align: center;
    color: var(--tx3);
}

@media (prefers-reduced-motion: reduce) {
    .sk-panel { animation: none; }
    .sk-ok, .sk-dugme { transition: none; }
}