/* ---------- Temel ---------- */
* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    color: var(--color-text);
    background: var(--color-page-bg);
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "zero" 0;
    -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: oklch(80% 0.01 268);
    border-radius: 8px;
}

a {
    color: var(--ac);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.page-shell {
    max-width: 1240px;
    margin: 0 auto;
    padding: 22px 24px 60px;
}

.ic {
    display: block;
    color: inherit;
    flex-shrink: 0;
}

.text-muted {
    color: var(--color-text-muted) !important;
}

code {
    background: var(--color-surface-alt);
    border-radius: 4px;
    padding: 1px 5px;
    font-family: var(--font-family-mono);
    font-size: 12px;
}

.d-none {
    display: none !important;
}

.d-inline {
    display: inline !important;
}

/* ================================================================
   Uygulama kabugu: sol navigasyon (sidebar) + ust cubuk (topbar)
   ================================================================ */
.app-shell {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* ---------- Sol navigasyon (sidebar, acik zemin) ---------- */
.sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: var(--color-sidebar-bg);
    color: var(--color-sidebar-text);
    height: 100vh;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--color-sidebar-border);
    position: sticky;
    top: 0;
    z-index: 50;
}

/* Marka alani BEYAZ zeminlidir: logo beyaz arka planli bir JPEG; lacivert
   sidebar uzerinde kosesi belli olan bir dikdortgen olarak duruyordu. Beyaz
   serit hem bunu cozer hem de logoyu markanin kendi zemininde gosterir. */
.sidebar-head {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Yukseklik ust barla AYNI (bkz. .topbar). box-sizing acikca border-box:
       aksi halde alt kenarlik 64'un USTUNE eklenip serit 65px oluyor ve iki bar
       arasinda 1 piksellik bir basamak kaliyordu. */
    box-sizing: border-box;
    height: 64px;
    padding: 12px 12px 12px 16px;
    background: #fff;
    border-bottom: 1px solid var(--bd);
    position: relative;
}

/* Marka yazisi sidebar'in ustunde ortalanir ve ana sayfaya baglantidir. Kapat
   butonu (yalnizca mobilde gorunur) mutlak konumlandirildigi icin ortalamayi
   kaydirmaz. */
.sidebar-brand {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    /* Tiklama alani logonun tamamini kapsar - ana sayfaya donus. */
    border-radius: 8px;
    transition: opacity .15s ease;
}

.sidebar-brand:hover {
    text-decoration: none;
    opacity: .78;
}

.sidebar-brand:focus-visible {
    outline: 2px solid var(--ac);
    outline-offset: 2px;
}

/* Logo 1600x533 (3:1). Yuksekligi sabitleyip genisligi oranla birakiyoruz;
   object-fit ile hicbir kosulda ezilmez. */
.sidebar-logo {
    display: block;
    height: 40px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
}

.sidebar-brand-sub {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--color-sidebar-muted);
}

.sidebar-close {
    display: none;
    background: none;
    border: none;
    color: var(--color-sidebar-muted);
    cursor: pointer;
    padding: 2px;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
}


.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 10px 8px;
}

/* ---------- Sidebar: menude arama ----------
   Yalnizca sol menuyu suzer (veri aramasi degildir). Koyu zeminde "oyuk" bir
   alan gibi durur: cevresindeki yuzeyden biraz daha koyu, boylece sidebar'in
   kendi rengine yeni bir ton eklemeden ayrisir. */
.sidebar-ara {
    position: relative;
    display: flex;
    align-items: center;
    margin: 10px 10px 2px;
}

.sidebar-ara-ikon {
    position: absolute;
    left: 9px;
    color: var(--color-sidebar-section);
    pointer-events: none;
    transition: color .16s ease;
}

.sidebar-ara-input {
    width: 100%;
    background: color-mix(in srgb, #000 22%, transparent);
    border: 1px solid var(--color-sidebar-border);
    border-radius: 8px;
    color: var(--color-sidebar-text);
    font-family: inherit;
    font-size: 12.5px;
    padding: 7px 26px 7px 28px;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.sidebar-ara-input::placeholder {
    color: var(--color-sidebar-section);
}

.sidebar-ara-input:focus {
    outline: none;
    background: color-mix(in srgb, #000 30%, transparent);
    border-color: var(--color-sidebar-bg-active);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-sidebar-bg-active) 28%, transparent);
}

.sidebar-ara:focus-within .sidebar-ara-ikon {
    color: var(--color-sidebar-text);
}

/* Tarayicinin kendi "temizle" carpisi koyu zeminde gorunmuyor; kendi
   dugmemizi kullaniyoruz. */
.sidebar-ara-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.sidebar-ara-temizle {
    position: absolute;
    right: 6px;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 5px;
    color: var(--color-sidebar-section);
    cursor: pointer;
}

.sidebar-ara-temizle:hover {
    background: var(--color-sidebar-hover);
    color: var(--color-sidebar-text-active);
}

.sidebar-ara-bos {
    margin: 10px;
    padding: 10px;
    border: 1px dashed var(--color-sidebar-border);
    border-radius: 8px;
    color: var(--color-sidebar-section);
    font-size: 12px;
    text-align: center;
}

/* ---------- Sidebar: cekmece gruplari ----------
   Hiyerarsi kurali: BASLIK HAKIM, alt oge BAGIMLI.
   Onceki halde ikisi ayni geometriye sahipti (ayni x'te ayni boyda ikon, ayni
   satir yuksekligi) ve ustelik baslik alt ogeden DAHA SONUKTU - iliski tersine
   donmustu, neyin neye ait oldugu okunmuyordu. Simdi:
     - baslik parlak, kalin, zeminsiz (aktif satirla yarismaz),
     - alt ogeler dikey bir rayin arkasinda girintili ve daha sonuk,
     - ekrandaki TEK guclu vurgu aktif satirdir. */
.sidebar-grup {
    margin-bottom: 2px;
}

/* Gruplar arasindaki nefes, aidiyeti mesafeyle de anlatir. */
.sidebar-grup + .sidebar-grup {
    margin-top: 14px;
}

.sidebar-grup-bas {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    background: none;
    border: none;
    border-radius: 6px;
    padding: 6px 8px 6px 10px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    /* Alt ogelerden DAHA PARLAK: hiyerarsiyi tasiyan ana sinyal budur. */
    color: var(--color-sidebar-text);
    cursor: pointer;
    text-align: left;
    transition: color .16s ease;
}

/* Baslikta zemin YOK: mavi bir dolgu "secili satir" gibi okunup gercek aktif
   satirla yarisiyordu. Hover yalnizca parlaklikla belli edilir. */
.sidebar-grup-bas:hover {
    color: var(--color-sidebar-text-active);
}

.sidebar-grup-bas:hover .sidebar-grup-ikon {
    opacity: 1;
}

.sidebar-grup-bas:focus-visible {
    outline: 2px solid var(--color-sidebar-bg-active);
    outline-offset: -2px;
}

.sidebar-grup-baslik {
    flex: 1;
}

.sidebar-grup-ikon {
    flex-shrink: 0;
    color: currentColor;
    opacity: .9;
    transition: opacity .16s ease, color .16s ease;
}

.sidebar-grup-ok {
    flex-shrink: 0;
    color: var(--color-sidebar-section);
    transition: transform .2s cubic-bezier(.4, 0, .2, 1), color .16s ease;
}

.sidebar-grup-bas:hover .sidebar-grup-ok {
    color: var(--color-sidebar-muted);
}

.sidebar-grup-bas[aria-expanded="true"] .sidebar-grup-ok {
    transform: rotate(180deg);
}

/* Acilma/kapanma: grid-template-rows 0fr -> 1fr, JS ile yukseklik olcmeden
   yumusak calisir. Ic sarmalayicinin overflow:hidden olmasi sart. */
.sidebar-grup-liste {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .22s cubic-bezier(.4, 0, .2, 1);
}

.sidebar-grup-liste.acik {
    grid-template-rows: 1fr;
}

/* Sayfa ilk cizilirken hicbir cekmece animasyonu calismaz. Kullanicinin
   saklanan "acik" tercihi ilk boyamadan sonra uygulaniyor ve gecis tanimli
   oldugu icin menu HER SAYFA GECISINDE yeniden aciliyormus gibi gorunuyordu.
   Sinifi site.js, baslangic durumunu yazdiktan bir kare sonra kaldirir. */
.sidebar.nav-baslarken .sidebar-grup-liste,
.sidebar.nav-baslarken .sidebar-grup-ic,
.sidebar.nav-baslarken .sidebar-grup-ok {
    transition: none;
}

/* Dikey ray: baslik simgesinin merkezinden asagi iner ve alt ogeleri gorsel
   olarak basliga baglar. Girinti + ray birlikte aidiyeti anlatir. */
.sidebar-grup-ic {
    overflow: hidden;
    min-height: 0;
    /* Girinti olculu tutuluyor: 30 pikselde "Sözleşme Kapsam Tanımları" fazla
       kesiliyordu. 24 piksel aidiyeti anlatmaya yetiyor, etikete yer birakiyor. */
    margin-left: 16px;
    padding-left: 8px;
    /* --color-sidebar-border (#1A2B4D) zeminden neredeyse ayrismiyordu; ray
       gorunmedigi surece bagi kurmuyor. Bir tik aydinlatiliyor. */
    border-left: 1px solid color-mix(in srgb, var(--color-sidebar-muted) 32%, transparent);
    opacity: .55;
    transition: opacity .22s ease;
}

.sidebar-grup-liste.acik .sidebar-grup-ic {
    opacity: 1;
}

/* Alt ogeler: basliktan kucuk, sonuk ve ince. Basligin altinda "ikincil"
   okunmalari gerekiyor. */
.sidebar-grup-ic .sidebar-link {
    position: relative;
    gap: 9px;
    padding: 6px 9px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--color-sidebar-muted);
}

.sidebar-grup-ic .sidebar-link .ic {
    opacity: .75;
    transition: opacity .16s ease;
}

.sidebar-grup-ic .sidebar-link:hover {
    background: color-mix(in srgb, var(--color-sidebar-hover) 45%, transparent);
    color: var(--color-sidebar-text);
}

.sidebar-grup-ic .sidebar-link:hover .ic {
    opacity: 1;
}

/* Aktif satir ekrandaki TEK dolu vurgudur. */
/* AKTIF MODUL: ekrandaki tek dolu vurgu. Uc sinyal birlikte calisir -
   dolu zemin, disari tasan hafif golge ve solundaki kalin aksan cubugu.
   Onceki halinde yalnizca duz bir zemin vardi ve uzun listede goz onu
   hover'dan ayirmakta zorlaniyordu. */
.sidebar-grup-ic .sidebar-link.active {
    background: var(--color-sidebar-bg-active);
    color: var(--color-sidebar-text-active);
    font-weight: 700;
    box-shadow: 0 3px 10px -3px color-mix(in srgb, var(--color-sidebar-bg-active) 85%, transparent);
}

.sidebar-grup-ic .sidebar-link.active .ic {
    opacity: 1;
}

/* Aktif satirin hizasinda ray da aksan rengine doner: gozun basliktan asagi
   inip nerede oldugunu bulmasini saglayan kucuk ama etkili bir isaret. */
.sidebar-grup-ic .sidebar-link.active::before {
    content: "";
    position: absolute;
    left: -9px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 100%;
    border-radius: 2px;
    background: var(--color-sidebar-bg-active);
}

/* Arama sonuclarinda eslesen harfler. */
.sidebar-link mark {
    background: color-mix(in srgb, var(--color-sidebar-bg-active) 70%, transparent);
    color: var(--color-sidebar-text-active);
    border-radius: 3px;
    padding: 0 1px;
}

/* Arama suzmesiyle gizlenen satir/grup. */
.sidebar-link.ara-gizli,
.sidebar-grup.ara-gizli {
    display: none;
}

@media (prefers-reduced-motion: reduce) {

    .sidebar-grup-liste,
    .sidebar-grup-ic,
    .sidebar-grup-ok,
    .sidebar-grup-bas,
    .sidebar-grup-ic .sidebar-link {
        transition: none;
    }
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    color: var(--color-sidebar-text);
    border: none;
    border-radius: 6px;
    padding: 7px 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    width: 100%;
    text-decoration: none;
    margin-bottom: 1px;
}

/* Uzerine gelindiginde, secili (active) modulle ayni mavi kullanilir. */
.sidebar-link:hover {
    background: var(--color-sidebar-bg-active);
    color: var(--color-sidebar-text-active);
    text-decoration: none;
}

.sidebar-link.active {
    background: var(--color-sidebar-bg-active);
    color: var(--color-sidebar-text-active);
    font-weight: 600;
}

.sidebar-link .ic {
    flex-shrink: 0;
}

.sidebar-link-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Sidebar: dar (ikon) mod ----------
   Sinif <html> uzerindedir; genislik --sidebar-width uzerinden degistigi icin
   ana alan kendiliginden buyur. Kural takimi yalnizca masaustunde gecerli:
   880px altinda sidebar bir cekmecedir, daraltmanin anlami yoktur. */
.sidebar {
    transition: width .18s ease;
}

/* Ciplak bir ikon, koyu zeminde denetim gibi degil sus gibi duruyordu; ustelik
   tiklama alani 23 pikseldi. Kendi yuzeyi olan 32 piksellik bir dugme: dinlenme
   halinde cok hafif bir aydinlanma ve ince kenarlik, ustune gelince menu
   ogeleriyle ayni aksan zemini. */
.sidebar-daralt {
    display: none;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: 1px solid color-mix(in srgb, #fff 13%, transparent);
    border-radius: 9px;
    background: color-mix(in srgb, #fff 6%, transparent);
    color: var(--color-sidebar-text);
    cursor: pointer;
    padding: 0;
    line-height: 0;
    transition: background .14s ease, border-color .14s ease, color .14s ease;
}

.sidebar-daralt:hover {
    background: var(--color-sidebar-bg-active);
    border-color: transparent;
    color: #fff;
}

/* ---- uc cizgi ----
   Sprite'taki i-menu kullanilmiyor. O simge 24 birimlik bir izgarada cizili
   (cizgiler y=7/12/17, kalinlik 1.8); 17 piksele olceklenince olcek 0,708
   oluyor ve cizgi merkezleri 4,96 / 8,50 / 12,04'e dusuyor. Ortadaki tam bir
   piksel satirini doldurdugu icin keskin, digerleri iki satira bolundugu icin
   soluk cikiyordu - ayni cizgiler farkli kalinlikta gorunuyordu.

   Burada cizgiler CSS ile, tam sayi piksellerle ciziliyor: ucu de 16x2 ve
   aralari 3 piksel. Hem sidebar daraltma dugmesi hem de mobil menu dugmesi
   ayni cizimi kullanir. */
.uc-cizgi,
.uc-cizgi::before,
.uc-cizgi::after {
    display: block;
    width: 16px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
}

.uc-cizgi {
    position: relative;
}

.uc-cizgi::before,
.uc-cizgi::after {
    content: "";
    position: absolute;
    left: 0;
}

.uc-cizgi::before {
    top: -5px;
}

.uc-cizgi::after {
    top: 5px;
}

/* Uc cizgi currentColor kullanir; beyaz baslikta acik gri gorunmez oluyordu.
   Sidebar'in koyu zemin rengiyle ciziliyor - logonun laciverti ile ayni aile. */
.sidebar-daralt {
    color: var(--color-sidebar-bg);
    border-radius: 8px;
    padding: 7px;
}

.sidebar-daralt:hover {
    background: var(--alt);
}

.sidebar-daralt:active {
    transform: scale(.94);
}

.sidebar-daralt:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-sidebar-bg-active) 55%, transparent);
}

@media (min-width: 881px) {
    .sidebar-daralt {
        display: grid;
        place-items: center;
    }

    .sidebar-dar {
        --sidebar-width: 68px;
    }

    /* Dar modda baslik ortalanir: marka kisalir, daraltma dugmesi ustune
       binmesin diye ayni satirda merkezde durur. */
    /* Dar modda serit sutun duzenine gecer (hamburger ustte, amblem altta).
       Olculer 64 piksele sigacak sekilde kisilir: 26 + 4 + 28 + 6 = 64.
       Aksi halde serit 99px olup ust barla arasinda buyuk bir basamak birakir. */
    .sidebar-dar .sidebar-head {
        flex-direction: column;
        gap: 4px;
        padding: 3px 8px;
    }

    /* Temel kural 32x32 sabit veriyor; dar seritte iki oge alt alta durdugu
       icin kucultulur - 3 + 26 + 4(bosluk) + 28(amblem) + 3 = 64. */
    .sidebar-dar .sidebar-daralt {
        width: 26px;
        height: 26px;
        padding: 3px;
    }

    .sidebar-dar .sidebar-daralt {
        order: -1;
    }

    /* Dar modda 4:1 logo sigmaz; yalnizca "H" amblemi gosterilir. Kirpilmis
       gorselde (1531x366) amblem x 12..338, y 13..338 araliginda - yani 326x325,
       neredeyse kare. "heysem" yazisi x=399'da basladigi icin basit bir "sol
       yarisini kirp" yaklasimi yaziya giriyordu.

       Cozum: kare pencere + gorseli olcekleyip tam o bolgeye kaydirmak.
       Olcek = pencere / 326; ofsetler amblemin sol-ust kosesinden turetilir.
       Ayri bir ikon dosyasi tutmaya gerek kalmiyor. */
    .sidebar-dar .sidebar-brand {
        --amblem: 28px;
        position: relative;
        flex: none;
        width: var(--amblem);
        height: var(--amblem);
        margin: 0 auto;
        overflow: hidden;
    }

    .sidebar-dar .sidebar-logo {
        position: absolute;
        max-width: none;
        width: calc(1531 / 326 * var(--amblem));
        height: calc(366 / 326 * var(--amblem));
        left: calc(-12 / 326 * var(--amblem));
        top: calc(-13 / 326 * var(--amblem));
        object-fit: fill;
    }

    /* Yukseklik genis moddaki .sidebar-head ile ayni (64px); dolgu yukaridaki
       dar-mod kuralindan gelir. */
    .sidebar-dar .sidebar-head {
        height: 64px;
    }

    .sidebar-dar .sidebar-nav {
        padding: 10px 10px;
    }

    /* Dar modda arama kutusu sigmaz; gizlenir (menu genisleyince geri gelir). */
    .sidebar-dar .sidebar-ara {
        display: none;
    }

    /* Grup basliklari okunamayacak kadar daralir; yerlerini gruplari yine de
       ayiran ince bir cizgi alir. */
    .sidebar-dar .sidebar-grup-bas {
        height: 0;
        padding: 0;
        margin: 12px 6px 10px;
        overflow: hidden;
        border-top: 1px solid var(--color-sidebar-border);
        border-radius: 0;
    }

    .sidebar-dar .sidebar-grup:first-child .sidebar-grup-bas {
        margin-top: 2px;
        border-top: none;
    }

    /* Gruplar arasi nefes dar modda ayirici cizgiye birakilir. */
    .sidebar-dar .sidebar-grup + .sidebar-grup {
        margin-top: 0;
    }

    /* Dar modda cekmeceler HER ZAMAN acik gorunur: baslik okunamadigi icin
       kapali bir grup kullaniciya bos bir bosluk olarak gorunurdu. */
    .sidebar-dar .sidebar-grup-liste {
        grid-template-rows: 1fr;
        transition: none;
    }

    /* Ray ve girinti yalnizca etiketli modda anlamli; dar modda ikonlarin
       ortalanmasini bozardi. */
    .sidebar-dar .sidebar-grup-ic {
        opacity: 1;
        margin-left: 0;
        padding-left: 0;
        border-left: none;
    }

    .sidebar-dar .sidebar-grup-ic .sidebar-link {
        padding: 9px 0;
    }

    .sidebar-dar .sidebar-grup-ic .sidebar-link.active::before {
        display: none;
    }

    .sidebar-dar .sidebar-link {
        justify-content: center;
        padding: 9px 0;
    }

    .sidebar-dar .sidebar-link-label,
    .sidebar-dar .sidebar-grup-ok,
    .sidebar-dar .sidebar-grup-ikon {
        display: none;
    }
}

/* ---------- Ana alan + ust cubuk (topbar) ---------- */
.main-area {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* Ust bar ile sol menunun logo seridi AYNI yuksekliktedir (64px): ikisi
   ekranin en ustunde yan yana durdugu icin farkli yukseklikte olmalari
   aralarinda gorunur bir basamak yaratiyordu. Biri degistirilirse digeri de
   degismelidir - bkz. .sidebar-head. */
.topbar {
    height: 64px;
    flex: 0 0 64px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    padding: 0 18px;
    gap: 16px;
}

.topbar-info {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.topbar-crumb {
    font-family: var(--font-family-mono);
    font-weight: 600;
    font-size: 11.5px;
    color: var(--tx3);
    white-space: nowrap;
}

.topbar-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--tx);
    white-space: nowrap;
    letter-spacing: -.01em;
    /* Guvenlik agi: baslik ne kadar uzun olursa olsun kendi kutusunda kalir,
       sag taraftaki zil/profil ikonlarinin altina tasamaz. */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mobil alt sayfa serisi - masaustunde gizli, <=880px'de gorunur (bkz. media query). */
.mobile-pagebar {
    display: none;
}

.topbar-spacer {
    flex: 1;
}

.topbar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--page);
    border: 1px solid var(--bd);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    width: 220px;
    color: var(--tx3);
}

.topbar-search input {
    border: none;
    background: none;
    outline: none;
    font-size: 13px;
    width: 100%;
    color: var(--tx);
    font-family: inherit;
}

.nav-toggle {
    width: 34px;
    height: 34px;
    border: 1px solid var(--bd);
    background: var(--surf);
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--tx2);
    flex-shrink: 0;
}

.nav-toggle {
    display: none;
}

.topbar-home-btn {
    width: 34px;
    height: 34px;
    border: 1px solid var(--bd);
    background: var(--surf);
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--tx2);
    flex-shrink: 0;
    text-decoration: none;
}

.topbar-home-btn:hover {
    border-color: var(--ac);
    color: var(--ac);
}

/* ---------- Bildirim (can) butonu: kullanici menusunun solunda, henuz islevsiz -
   icerigi tasarlanana kadar yalniz tiklanabilir bir simge olarak durur. ---------- */
.topbar-notif-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--tx2);
    flex-shrink: 0;
}

.topbar-notif-btn:hover {
    color: var(--ac);
}

/* ---------- Bildirim paneli: kullanicinin son islemleri ---------- */
.topbar-notif {
    position: relative;
    flex-shrink: 0;
    /* .topbar'in 16px gap'i buradan kismen geri alinir; boylece can ikonu
       profil menusunun ayirici cizgisine yaklasir. */
    margin-right: -8px;
}

/* Okunmamis islem sayisi rozeti (can ikonunun sag ustunde). */
.notif-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--color-danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.notif-badge[hidden] {
    display: none;
}

/* Panel ekranin sag kenarina yaslanir (topbar'in hemen altinda), can butonuna
   degil. Butonu isaret eden ok, panel acilirken JS ile butonun tam ortasina
   hizalanir (bkz. site.js) - profil alaninin genisligi isim uzunluguna gore
   degistigi icin sabit bir konum yeterli olmaz. */
.notif-panel {
    position: fixed;
    top: 62px;
    right: 14px;
    width: 380px;
    max-width: calc(100vw - 28px);
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    background: var(--surf);
    border: 1px solid var(--bd);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 6px rgba(15, 23, 42, .10), 0 28px 64px -16px rgba(15, 23, 42, .45);
    z-index: 120;
}

/* Yumusak gosterge: panelin ust kenarindan cikan, can butonunu isaret eden ok. */
.notif-arrow {
    position: absolute;
    top: -7px;
    width: 14px;
    height: 14px;
    background: var(--surf);
    border-left: 1px solid var(--bd);
    border-top: 1px solid var(--bd);
    border-radius: 3px 0 0 0;
    transform: rotate(45deg);
    pointer-events: none;
}

/* Ok panelin disina tasabilsin diye icerik ayri bir katmanda kirpilir. */
.notif-panel-inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: inherit;
    overflow: hidden;
}

/* Liste kendi icinde kaydirilabilsin diye esnek kutu zincirinde min-height sifirlanir. */

.notif-panel[hidden] {
    display: none;
}

.notif-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px 10px;
    flex-shrink: 0;
}

.notif-panel-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--tx);
}

.notif-panel-count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--color-danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

/* Kategori sekmeleri (Tumu / Ekleme / Duzenleme / Silme). */
.notif-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 16px 12px;
    border-bottom: 1px solid var(--bd-l);
    flex-shrink: 0;
}

.notif-tab {
    border: 1px solid var(--bd);
    background: var(--surf);
    color: var(--tx2);
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}

.notif-tab:hover {
    border-color: var(--ac);
    color: var(--ac);
}

.notif-tab.active {
    background: var(--ac);
    border-color: var(--ac);
    color: #fff;
}

.notif-tab--ekleme.active { background: var(--ac); border-color: var(--ac); }
.notif-tab--duzenleme.active { background: var(--color-warning); border-color: var(--color-warning); }
.notif-tab--silme.active { background: var(--color-danger); border-color: var(--color-danger); }

.notif-list {
    overflow-y: auto;
    min-height: 0;
}

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--bd-l);
}

.notif-item[hidden] {
    display: none;
}

.notif-item:last-child {
    border-bottom: none;
}

/* Sol kenarda kategori rengi seridi + ikon/nokta renkleri. */
.notif-item--ekleme { box-shadow: inset 3px 0 0 var(--ac); }
.notif-item--duzenleme { box-shadow: inset 3px 0 0 var(--color-warning); }
.notif-item--silme { box-shadow: inset 3px 0 0 var(--color-danger); }

.notif-item-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    flex-shrink: 0;
    margin-top: 1px;
}

.notif-item--ekleme .notif-item-icon { background: var(--ac-bg); color: var(--ac); }
.notif-item--duzenleme .notif-item-icon { background: var(--color-warning-bg); color: var(--color-warning); }
.notif-item--silme .notif-item-icon { background: var(--color-danger-bg); color: var(--color-danger); }

.notif-item-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.notif-item-title {
    font-size: 12.8px;
    font-weight: 700;
    color: var(--tx);
    overflow-wrap: anywhere;
}

.notif-item-text {
    font-size: 12px;
    color: var(--tx2);
    overflow-wrap: anywhere;
}

.notif-item-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    margin-top: 2px;
}

.notif-item-time {
    font-size: 11px;
    color: var(--tx3);
    white-space: nowrap;
}

.notif-item-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    flex-shrink: 0;
}

.notif-item--ekleme .notif-item-dot { background: var(--ac); }
.notif-item--duzenleme .notif-item-dot { background: var(--color-warning); }
.notif-item--silme .notif-item-dot { background: var(--color-danger); }

.notif-empty {
    padding: 22px 16px;
    text-align: center;
    font-size: 12.5px;
    color: var(--tx3);
}

.notif-empty[hidden] {
    display: none;
}

/* Dar ekranda panel iki kenara da yaslanir. */
@media (max-width: 560px) {
    .notif-panel {
        right: 8px;
        left: 8px;
        width: auto;
        max-width: none;
    }
}

/* ---------- Sag ust profil butonu + acilir menu ----------
   Butonun kendi cercevesi yoktur; bildirim ikonundan solundaki gri dikey
   cizgi ile ayrilir. */
.topbar-profile {
    position: relative;
    flex-shrink: 0;
    border-left: 1px solid var(--bd);
    padding-left: 8px;
}

.topbar-profile-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 10px 5px 5px;
    border: none;
    background: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    max-width: 220px;
}

.topbar-profile-btn:hover {
    background: var(--alt);
}

.topbar-profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--ac);
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
}

.topbar-profile-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.3;
    min-width: 0;
}

.topbar-profile-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--tx);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
}

.topbar-profile-role {
    font-size: 11px;
    color: var(--tx3);
}

.topbar-profile-chevron {
    color: var(--tx3);
    flex-shrink: 0;
}

.topbar-profile-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    width: 200px;
    background: var(--surf);
    border: 1px solid var(--bd);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card-lg);
    padding: 6px;
}

.topbar-profile-menu form {
    margin: 0;
}

.topbar-profile-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    background: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--tx2);
    cursor: pointer;
    text-align: left;
    text-decoration: none;
}

.topbar-profile-menu-item:hover {
    background: var(--alt);
    color: var(--tx);
}

.topbar-profile-menu-item--danger:hover {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.topbar-theme-row {
    justify-content: space-between;
}

.topbar-theme-label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.theme-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}

.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.theme-switch-slider {
    position: absolute;
    inset: 0;
    background: var(--bd);
    border-radius: 999px;
    transition: background .15s ease;
}

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

.theme-switch input:checked + .theme-switch-slider {
    background: var(--ac);
}

.theme-switch input:checked + .theme-switch-slider::before {
    transform: translateX(16px);
}

@media (max-width: 480px) {
    .topbar-profile-meta {
        display: none;
    }

    .topbar-profile-btn {
        padding: 5px;
    }
}

.frame-content,
.page-content {
    flex: 1;
    overflow-y: auto;
    padding: 22px 24px 60px;
}

/* ---------- Ekrana oturan icerik (ViewData["TamEkran"]) ----------
   Sayfa akisi yerine viewport'a sigan duzen isteyen ekranlar icin: iki bolmeli
   araclar (Erisim Izinleri) kendi icinde kaydirilir, sayfanin kendisi kaydirilmaz.
   Alt bosluk 60'tan 24'e iner - kaydirma olmadigi icin "son satir ust cubuga
   yapismasin" boslugu gereksizdir ve dogrudan liste yuksekliginden yiyordu.

   900 pikselin ALTINDA uygulanmaz: orada panel tek sutuna dusup uzar ve alt sayfa
   serisi (.mobile-pagebar) position:fixed ile icerigin uzerine biner - sayfanin
   normal kaydirmasi ve 60 piksellik alt boslugu gerekir. */
@media (min-width: 901px) {
    .page-content--tam {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding-bottom: 24px;
    }
}

/* ---------- Mobil cekmece perdesi ---------- */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 20, 30, 0.45);
    z-index: 40;
}

/* ---------- Kabuk: dar ekran -> sol menu cekmeceye doner ---------- */
@media (max-width: 880px) {
    .nav-toggle {
        display: grid;
    }

    .sidebar-close {
        display: grid;
        place-items: center;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        transform: translateX(-100%);
        transition: transform .18s ease;
    }

    .app-shell.nav-open .sidebar {
        transform: translateX(0);
    }

    .app-shell.nav-open .nav-overlay {
        display: block;
    }

    .topbar-search {
        display: none;
    }

    /* Sayfa basligi ust cubuktan alinip alttaki .mobile-pagebar serisine tasindi;
       ust cubukta yalnizca menu/ana sayfa/bildirim/profil kalir. */
    .topbar-info {
        display: none;
    }

    /* iOS Safari'deki alt arac cubugu gibi: solda geri, yaninda sayfa basligi. */
    .mobile-pagebar {
        display: flex;
        align-items: center;
        gap: 6px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        /* nav-overlay 40, sidebar 50: menu cekmecesi acildiginda alt seri de
           kararmanin altinda kalmali, uzerinde durup tiklanabilir olmamali. */
        z-index: 30;
        min-height: 50px;
        padding: 0 12px;
        /* iPhone'da alttaki ana ekran cizgisinin altinda kalmasin. */
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--surf);
        border-top: 1px solid var(--bd);
        box-shadow: 0 -2px 10px -6px oklch(55% 0.06 268 / 0.35);
    }

    .mobile-pagebar-back {
        width: 34px;
        height: 34px;
        flex-shrink: 0;
        display: grid;
        place-items: center;
        border: none;
        background: none;
        border-radius: var(--radius-sm);
        color: var(--ac);
        cursor: pointer;
    }

    .mobile-pagebar-back:active {
        background: var(--alt);
    }

    .mobile-pagebar-denge {
        width: 34px;
        flex-shrink: 0;
    }

    .mobile-pagebar-title {
        /* Geri butonu solda kalirken baslik BARIN ortasinda dursun diye, sagda
           butonla ayni genislikte gorunmez bir denge bosluğu birakilir. */
        flex: 1;
        text-align: center;
        min-width: 0;
        font-size: 15px;
        font-weight: 700;
        color: var(--tx);
        letter-spacing: -.01em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Sabit alt cubuk sayfanin son satirlarini ortmesin. */
    .page-content {
        padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 640px) {
    .page-shell,
    .frame-content,
    .page-content {
        /* Alt bosluk, sabit .mobile-pagebar serisini de hesaba katar (bkz. 880px blogu);
           kisayol yazimi oradaki padding-bottom'u ezdigi icin burada tekrarlanir. */
        padding: 16px 16px calc(66px + env(safe-area-inset-bottom, 0px));
    }
}

/* ---------- Kimlik dogrulama (giris) kabugu ---------- */
.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(120% 90% at 50% 0%, oklch(97% 0.03 268), var(--page));
    padding: 24px;
}

.auth-page {
    width: 100%;
    max-width: 360px;
    margin: 0;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    color: oklch(28% 0.03 268);
}

.auth-brand-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-tile);
    background: var(--ac);
    box-shadow: none;
    display: grid;
    place-items: center;
    color: #fff;
}

.auth-brand h1 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -.01em;
}

.auth-brand p {
    font-size: 12px;
    color: var(--tx3);
    margin: 2px 0 0;
    font-weight: 600;
}

.auth-card {
    background: var(--surf);
    border: 1px solid var(--bd);
    border-radius: var(--radius-lg);
    padding: 26px;
    box-shadow: var(--shadow-card-lg);
}

.auth-card h2,
.auth-card .auth-title {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    color: var(--tx);
}

.auth-card .auth-sub {
    margin: 0 0 20px;
    font-size: 13px;
    color: var(--tx3);
}

.auth-card .field {
    margin-bottom: 14px;
}

.auth-card .btn {
    width: 100%;
    justify-content: center;
}

.auth-foot {
    text-align: center;
    font-size: 12px;
    color: var(--tx3);
    margin-top: 16px;
}

/* ---------- Ana sayfa: karsilama ---------- */
.home-greeting h1 {
    font-size: 21px;
    font-weight: 700;
    margin: 0 0 3px;
    letter-spacing: -.02em;
}

.home-greeting p {
    color: var(--tx2);
    font-size: 13px;
    margin: 0;
}

.home-greeting strong {
    color: var(--tx);
}

.dash-stat-label .ic {
    color: var(--tx2);
}

/* ---------- Ana sayfa: istatistik kartlari (sol renkli kenarlik) ---------- */
.dash-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.dash-stat-card {
    background: var(--surf);
    border: 1px solid var(--bd);
    border-left: 3px solid var(--stat-accent, var(--ac));
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 14px 16px;
}

.dash-stat-label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--tx2);
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 8px;
}

.dash-stat-value {
    font-family: var(--font-family-mono);
    font-size: 26px;
    font-weight: 600;
    color: var(--tx);
    line-height: 1;
}

.dash-stat-sub {
    font-size: 11.5px;
    color: var(--tx3);
    margin-top: 5px;
}

/* ---------- Ana sayfa: grafik + hizmet dagilimi ---------- */
.home-split {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
    align-items: stretch;
}

.home-split-narrow {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 20px;
    align-items: start;
}

@media (max-width: 880px) {
    .home-split,
    .home-split-narrow {
        grid-template-columns: 1fr;
    }
}

.chart-card,
.panel-block {
    background: var(--surf);
    border: 1px solid var(--bd);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 18px 20px;
}

.chart-head {
    display: flex;
    align-items: flex-start;
    margin-bottom: 14px;
}

.chart-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.chart-sub {
    font-size: 11.5px;
    color: var(--tx3);
}

.chart-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--tx2);
}

.chart-legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background: var(--ac);
}

.chart-dot {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--surf);
    border: 2.5px solid var(--ac);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.chart-x-labels {
    position: relative;
    height: 16px;
    margin-top: 2px;
}

.chart-x-labels span {
    position: absolute;
    transform: translateX(-50%);
    font-size: 10px;
    color: var(--tx3);
    font-family: var(--font-family-mono);
    font-weight: 600;
    white-space: nowrap;
}

.panel-block-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.01em;
    margin-bottom: 16px;
}

.hizmet-row {
    margin-bottom: 15px;
}

.hizmet-row:last-child {
    margin-bottom: 0;
}

.hizmet-row-head {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}

.hizmet-row-head .hizmet-ad {
    font-size: 12.5px;
    font-weight: 600;
}

.hizmet-row-head .hizmet-count {
    font-family: var(--font-family-mono);
    font-weight: 600;
    font-size: 12px;
    color: var(--tx2);
}

.hizmet-row-head .hizmet-pct {
    font-family: var(--font-family-mono);
    font-weight: 600;
    font-size: 11px;
    color: var(--tx3);
    margin-left: 8px;
    width: 34px;
    text-align: right;
}

.hizmet-bar-track {
    height: 8px;
    border-radius: 999px;
    background: var(--alt);
    overflow: hidden;
}

.hizmet-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--ac);
}

/* ---------- Ana sayfa: veritabani ozeti ---------- */
.db-summary-list {
    background: var(--surf);
    border: 1px solid var(--bd);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    margin-bottom: 20px;
}

.db-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    border-bottom: 1px solid var(--bd-l);
}

.db-summary-row:last-child {
    border-bottom: none;
}

.db-summary-name {
    font-weight: 600;
    font-size: 12.5px;
    color: var(--tx2);
}

.db-summary-count {
    font-family: var(--font-family-mono);
    font-weight: 600;
    font-size: 12.5px;
    color: var(--tx);
}

/* ---------- Bolum basliklari (uppercase eyebrow) ---------- */
.section-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tx3);
    margin: 0 0 9px;
}

.section-head-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

/* ---------- Imza bilesen: Ticket Stub (bilet kutugu) ---------- */
.ticket-stub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
    margin-bottom: 32px;
}

.ticket-stub {
    background: var(--surf);
    border: 1px solid var(--bd);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    display: flex;
    overflow: hidden;
}

.ticket-stub-info {
    flex: 1;
    padding: 14px 16px;
    min-width: 0;
}

.ticket-stub-name {
    font-size: 13.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticket-stub-range {
    font-size: 11.5px;
    color: var(--tx3);
    margin-top: 3px;
}

.ticket-stub-perf {
    width: 1px;
    background-image: repeating-linear-gradient(var(--bd) 0 5px, transparent 5px 10px);
}

.ticket-stub-kalan {
    width: 78px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
}

.ticket-stub-kalan-num {
    font-family: var(--font-family-mono);
    font-size: 19px;
    font-weight: 600;
}

.ticket-stub-kalan-label {
    font-size: 9.5px;
    font-weight: 600;
}

.ticket-stub-hero {
    max-width: 520px;
    border-radius: var(--radius-lg);
    margin-bottom: 26px;
    box-shadow: var(--shadow-card);
}

.ticket-stub-hero .ticket-stub-perf {
    background-image: repeating-linear-gradient(var(--bd) 0 5px, transparent 5px 10px);
}

.ticket-stub-hero .ticket-stub-kalan {
    width: 132px;
}

.ticket-stub-hero .ticket-stub-kalan-num {
    font-size: 34px;
}

.ticket-stub-hero .ticket-stub-kalan-label {
    font-size: 10px;
}

.ticket-stub-hero .ticket-stub-info {
    padding: 20px 22px;
}

.kalan-gold { background: var(--color-gold-bg); color: var(--color-gold); }
.kalan-warn { background: var(--color-warning-bg); color: var(--color-warning); }
.kalan-danger { background: var(--color-danger-bg); color: var(--color-danger); }

/* ---------- Ana sayfa: son kayitlar / kompakt liste ---------- */
.recent-list {
    background: var(--surf);
    border: 1px solid var(--bd);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.recent-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--bd-l);
}

.recent-row:last-child {
    border-bottom: none;
}

.recent-row-icon {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-tile);
    background: var(--ac-bg);
    color: var(--ac);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.recent-row-body {
    flex: 1;
    min-width: 0;
}

.recent-row-title {
    font-size: 13px;
    font-weight: 600;
}

.recent-row-meta {
    font-size: 11.5px;
    color: var(--tx3);
}

.recent-row-date {
    font-family: var(--font-family-mono);
    font-weight: 600;
    font-size: 11.5px;
    color: var(--tx3);
    flex-shrink: 0;
    text-align: right;
}

/* ---------- Pill (stat ozet rozeti) ---------- */
.stat-pills {
    display: flex;
    gap: 10px;
    margin: 20px 0 24px;
    flex-wrap: wrap;
}

.pill {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--surf);
    border: 1px solid var(--bd);
    border-radius: 999px;
    padding: 8px 14px;
}

.pill-label {
    font-size: 12.5px;
    color: var(--tx2);
}

.pill-value {
    font-family: var(--font-family-mono);
    font-size: 12.5px;
    font-weight: 700;
}

/* ---------- Butonlar ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: var(--radius-sm);
    border: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.btn:hover {
    text-decoration: none;
}

.btn:focus-visible {
    outline: 2px solid var(--ac);
    outline-offset: 2px;
}

.btn-sm {
    padding: 6px 11px;
    font-size: 12px;
    font-weight: 600;
}

.btn-primary,
.btn-primary--indigo,
.btn-primary--pink,
.btn-primary--amber,
.btn-primary--teal,
.btn-primary--purple,
.btn-primary--rose,
.btn-primary--neutral {
    background: var(--ac);
    color: #fff;
}

.btn-primary:hover,
.btn-primary--indigo:hover,
.btn-primary--pink:hover,
.btn-primary--amber:hover,
.btn-primary--teal:hover,
.btn-primary--purple:hover,
.btn-primary--rose:hover,
.btn-primary--neutral:hover {
    background: var(--ac-strong);
}

.btn-outline {
    background: var(--surf);
    border: 1px solid var(--bd);
    color: var(--tx2);
}

.btn-outline:hover {
    border-color: var(--tx3);
}

.btn-icon-only {
    padding: 8px;
}

.btn-sm.btn-icon-only {
    padding: 6px;
}

/* Islem butonlari (Duzenle/Sil/Goruntule) cercevesiz gosterilir; Duzenle sari,
   Sil hover'da kirmizi tonu vurgular. */
.btn-outline.btn-icon-only {
    background: none;
    border: none;
}

.btn-outline.btn-icon-only:hover {
    background: var(--alt);
    border-color: transparent;
}

.btn-outline.btn-icon-only:has(use[href="#i-edit"]) {
    color: var(--color-warning);
}

.btn-outline.btn-icon-only:has(use[href="#i-edit"]):hover {
    background: var(--color-warning-bg);
}

.btn-outline.btn-icon-only:has(use[href="#i-trash"]):hover {
    background: var(--color-danger-bg);
}

/* Yeni ekleme butonlari: dolgusuz, mavi + ikonu */
.btn-icon-only[class*="btn-primary"] {
    background: none;
    color: var(--ac);
}

.btn-icon-only[class*="btn-primary"]:hover {
    background: var(--ac-bg);
}

.btn-warning {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border: 1px solid var(--color-warning);
}

.btn-link {
    background: none;
    border: none;
    color: var(--ac);
    padding: 9px 4px;
    font-weight: 600;
}

.btn-link:hover {
    text-decoration: underline;
}

/* ---------- Formlar ---------- */
.field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.field-row-tight {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

/* Tek basina duran alanlar da bir sonraki bloktan ayrilsin. .field-row icindekiler
   zaten grid gap ile ayrildigi icin onlarda alt bosluk sifirlanir; aksi halde
   satir ici alanlar arasinda cift bosluk olusurdu. */
.field {
    min-width: 0;
    margin-bottom: 16px;
}

.field-row > .field {
    margin-bottom: 0;
}

.field-label,
.form-label {
    font-size: 12px;
    font-weight: 600;
    display: block;
    margin-bottom: 6px;
    color: var(--tx2);
}

.form-control,
.form-select {
    width: 100%;
    padding: 9px 11px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--bd);
    font-family: inherit;
    font-size: 13.5px;
    background: var(--surf);
    color: var(--tx);
}

.form-control[readonly] {
    background: var(--alt);
    color: var(--tx2);
    font-family: var(--font-family-mono);
    font-weight: 600;
    font-size: 13px;
}

textarea.form-control {
    resize: vertical;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    outline: none;
    border-color: var(--ac);
    box-shadow: 0 0 0 3px var(--ac-bg);
}

.form-text {
    font-size: 12px;
    color: var(--tx3);
    margin-top: 4px;
}

.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
}

.form-check-input {
    width: 16px;
    height: 16px;
    margin: 0;
}

.form-check-label {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
}

.status-pill-display {
    padding: 9px 11px;
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    font-weight: 600;
    background: var(--alt);
    color: var(--tx2);
}

/* Salt-okunur deger alani. Kesik cizgili kenarlik birakildi: form icinde
   dikkat ceken tek seyin duzenlenebilir alanlar olmasi gerekiyor; kesik cizgi
   tam tersini yapiyordu. Girilebilir alanlarla ayni yuksekligi korumak icin
   saydam kenarlik durur. */
.readonly-chip {
    padding: 9px 11px;
    border-radius: var(--radius-sm);
    background: var(--alt);
    font-size: 13.5px;
    color: var(--tx2);
    border: 1px solid transparent;
}

.text-danger {
    color: var(--color-danger);
    font-size: 12.5px;
    display: block;
    margin-top: 4px;
}

.validation-summary-errors {
    background: var(--color-danger-bg);
    color: var(--color-danger);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 13px;
}

.validation-summary-errors ul {
    margin: 0;
    padding-left: 18px;
}

.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}

/* ---------- Chip grubu (Hizmet Turu / Anlasma Tipi segmented secim) ---------- */
.chip-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.chip-group input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--bd);
    background: var(--surf);
    color: var(--tx2);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.chip-group input[type="radio"]:checked + .chip {
    border-color: var(--ac);
    background: var(--ac-bg);
    color: var(--ac-text);
}

.chip-group input[type="radio"]:focus-visible + .chip {
    outline: 2px solid var(--ac);
    outline-offset: 2px;
}

/* ---------- Alert / ticket onizleme durumlari ---------- */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    margin-bottom: 16px;
}

.alert-success {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.alert-danger {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.alert-secondary {
    background: var(--alt);
    color: var(--tx2);
}

.alert-warning {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.alert-info {
    background: var(--ac-bg);
    color: var(--ac-text);
}

/* ---------- Aranabilir acilir liste (searchable-select) ---------- */
.ss-wrap {
    position: relative;
}

.ss-native {
    display: none !important;
}

.ss-panel {
    position: absolute;
    z-index: 30;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 2px;
    background: var(--surf);
    border: 1px solid var(--bd);
    border-radius: var(--radius-sm);
    max-height: 240px;
    overflow-y: auto;
    box-shadow: var(--shadow-card-lg);
}

.ss-item {
    padding: 8px 12px;
    font-size: 13.5px;
    cursor: pointer;
}

.ss-item:hover,
.ss-item.active {
    background: var(--alt);
}

.ss-empty {
    padding: 8px 12px;
    font-size: 12.5px;
    color: var(--tx3);
}

/* ---------- Kart-tablo (liste ekranlari) ---------- */
.card-table {
    background: var(--surf);
    border: 1px solid var(--bd);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow-x: auto;
}

.card-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.card-table thead tr {
    background: var(--alt);
}

.card-table th {
    text-align: left;
    padding: 10px 14px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tx3);
    border-bottom: 1px solid var(--bd);
    white-space: nowrap;
}

.card-table--centered th,
.card-table--centered td {
    text-align: center;
}

.card-table th[data-sort-key] {
    cursor: pointer;
    user-select: none;
}

.card-table th .sort-caret {
    color: var(--ac);
    margin-left: 2px;
    font-size: 9px;
}

.card-table td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--bd-l);
    color: var(--tx);
}

.card-table tbody tr:last-child td {
    border-bottom: none;
}

.card-table tbody tr.zebra-alt,
.card-table .list-row.zebra-alt {
    background: var(--alt);
}

.card-table .num {
    font-weight: 600;
    font-size: 12px;
    color: var(--tx2);
}

.card-table .text-right {
    text-align: right;
}

.card-table .text-center {
    text-align: center;
}

/* ---------- E-posta durumu / ticket degeri (ikon + renkli metin) ---------- */
.mail-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 600;
}

.mail-status--ok {
    color: var(--color-success);
}

.mail-status--warn {
    color: var(--color-warning);
}

.ticket-value {
    font-weight: 600;
}

.ticket-value--used {
    color: var(--color-gold);
}

.ticket-value--none {
    color: var(--tx3);
}

/* Sozlesmeler: masaustunde Guncel Sozlesme kolonu Kod'a fazla yakin durmasin diye
   sola biraz daha bosluk verilir. */
#SozlesmeMusteriTable td:nth-child(4),
#SozlesmeMusteriTable th:nth-child(4) {
    padding-left: 56px;
}

/* Sozlesme Kapsami: adlar uzun oldugu icin kolon sinirlanir, tasan metin
   kisaltilir; tamami satir kartinda ve fare ipucunda gorunur. */
#SozlesmeMusteriTable td:nth-child(5),
#SozlesmeMusteriTable th:nth-child(5) {
    max-width: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Kirpilan hucre icindeki blok da kirpilir ----
   text-overflow YALNIZCA elemanin kendi satir ici icerigine uygulanir; ic ice
   bir blok cocuga miras GECMEZ. Ad hucrelerinde metin <div> icinde oldugu icin
   hucre onu kesiyor ama "..." koymuyordu: uzun firma adi sert kesilip yandaki
   sutuna yapisik gorunuyordu (ornegin "... Ltd. ŞtD05").

   Ad hucresi butun listelerde data-mobile-title tasir; kural boylece tek yerden
   tum tablolari kapsar. Kolon zaten genis oldugunda hicbir etkisi olmaz. */
td[data-mobile-title] > div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Musteriler: masaustunde tablo genisligi 100% oldugu ve Firma kolonu herhangi bir
   genislik siniri olmadigi icin, tablonun otomatik yerlesim algoritmasi bos alanin
   buyuk kismini Firma kolonuna veriyor - bu da Firma ile Kod arasinda dev bir bosluk
   olarak gorunuyor. Firma kolonuna sabit/max bir genislik vererek bu bosluk onlenir;
   Kod ve Telefon boylece Firma metninin hemen ardindan baslar. */
#MusteriTable td:nth-child(2),
#MusteriTable th:nth-child(2) {
    width: 260px;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Kirpilan ad ile Kod arasinda gozle secilebilir bir bosluk kalmali:
       8px'te "...Ltd..." ile kod neredeyse bitisik duruyordu. */
    padding-right: 18px;
}

#MusteriTable td:nth-child(3),
#MusteriTable th:nth-child(3) {
    padding-left: 0;
}

/* Telefon ve E-posta 60px saga kaydirilir. */
#MusteriTable td:nth-child(4),
#MusteriTable th:nth-child(4) {
    padding-left: 60px;
}

#MusteriTable td:nth-child(5),
#MusteriTable th:nth-child(5) {
    padding-left: 60px;
    text-align: left;
}

/* Ayni sebeple Temsilci kolonu da sinirsiz genislikte oldugu icin Durum'dan
   uzakta kaliyor; ona da sabit/max genislik verilir. E-posta eklenince Temsilci
   6., Durum 7. kolon oldu. Temsilci sola yaslanir, Durum ve islem butonlari
   saga yaslanir. */
#MusteriTable td:nth-child(6),
#MusteriTable th:nth-child(6) {
    width: 220px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

#MusteriTable td:nth-child(7),
#MusteriTable th:nth-child(7) {
    text-align: right;
    padding-right: 14px;
}

#MusteriTable td:last-child,
#MusteriTable th:last-child {
    text-align: right;
}

/* Satirin herhangi bir yerine tiklaninca detay karti acilan tablolarda
   (Musteriler: .musteri-row-clickable; Sozlesmeler/Destek Kayitlari/Yetkililer:
   data-row-card) tum ekran genisliklerinde imlec elle isaret eder. */
#MusteriTable tbody tr,
table[data-row-card] tbody tr {
    cursor: pointer;
}

/* ---------- Mobil: kompakt tablo satiri + dokununca detay pop-up ---------- */
@media (max-width: 680px) {
    .card-table {
        overflow-x: hidden;
    }

    .card-table table.mobile-compact {
        min-width: 0 !important;
        width: 100%;
    }

    .card-table table.mobile-compact th.col-mobile-hide,
    .card-table table.mobile-compact td.col-mobile-hide {
        display: none;
    }

    .card-table table.mobile-compact tbody tr {
        cursor: pointer;
    }

    .card-table table.mobile-compact td,
    .card-table table.mobile-compact th {
        padding: 10px 6px;
        white-space: nowrap;
    }

    .card-table table.mobile-compact td:not(.col-num):not(:last-child):not([data-mobile-title]) {
        max-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Baslik/ana kolon (data-mobile-title): max-width:0 ile zorla daraltilmaz,
       kalan tum genisligi kullanir; sadece gercekten sigmayan metin ellipsis'lenir. */
    .card-table table.mobile-compact td[data-mobile-title] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Musteriler: firma adi ayri bir div icinde (altinda yetkili etiketleri de var,
       onlar mobilde gizli); ellipsis bu ic div uzerinde uygulanmali. */
    .card-table table.mobile-compact td[data-mobile-title] > div {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .card-table table.mobile-compact th:last-child,
    .card-table table.mobile-compact td:last-child {
        padding-left: 2px;
        padding-right: 6px;
        text-align: left;
        white-space: normal;
    }

    .card-table table.mobile-compact td:last-child .btn-sm {
        padding: 5px 7px;
        font-size: 11px;
        gap: 3px;
    }

    .card-table table.mobile-compact td:last-child form {
        display: inline-block;
    }

    /* Liste (satir) tabanli ekranlar (ör. Personel) icin ayni kompakt+pop-up davranisi.
       .mobile-hide-el yalnizca .list-row icinde gizlenir; pop-up'a klonlanan ayni sinifli
       ogeler (ör. Sifre Sifirla) orada normal gorunur kalir. */
    .list-row.mobile-compact {
        cursor: pointer;
    }

    .list-row.mobile-compact .mobile-hide-el {
        display: none !important;
    }

    .list-row.mobile-compact .list-row-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .list-row.mobile-compact .list-row-actions .btn-sm {
        padding: 5px 7px;
        font-size: 11px;
        gap: 3px;
    }

    /* Destek Kayitlari: mobilde Musteri kolonu ortaya yaslanir, islem butonlari saga yaslanir */
    #RecordsTable.mobile-compact th:not(.col-num):not(:last-child),
    #RecordsTable.mobile-compact td:not(.col-num):not(:last-child) {
        text-align: center;
    }

    #RecordsTable.mobile-compact th:last-child,
    #RecordsTable.mobile-compact td:last-child {
        text-align: right;
        padding-right: 8px;
    }

    /* Musteriler: mobilde Firma kolonunun masaustu icin verilen sabit 260px genisligi
       (bkz. yukaridaki #MusteriTable td:nth-child(2) kurali, id secici oldugu icin
       bu olmadan mobilde de gecerli kalirdi) kaldirilir; Durum ve islem butonlarina
       daha fazla alan kalsin diye Firma kalan genisligi serbestce kullanir. */
    #MusteriTable.mobile-compact th:nth-child(2),
    #MusteriTable.mobile-compact td:nth-child(2) {
        width: auto;
        max-width: none;
    }

    /* Musteriler: mobilde Durum kolonu sola yaslanir (E-posta eklendigi icin artik 7. kolon),
       islem butonlari saga yaslanir */
    #MusteriTable.mobile-compact th:nth-child(7),
    #MusteriTable.mobile-compact td:nth-child(7) {
        text-align: left;
    }

    /* Goruntule butonu kaldirildiginda (satir artik tiklanabilir) islem hucresinde
       yalnizca Duzenle + Sil kalir; bunlarin alt alta sikismasini onlemek icin
       hucre tek satirda kalir ve gerekli genislik acilir. */
    #MusteriTable.mobile-compact th:last-child,
    #MusteriTable.mobile-compact td:last-child {
        text-align: right;
        padding-right: 8px;
        white-space: nowrap;
    }

    /* Yetkililer: mobilde Ad Soyad kolonu sola yaslanir (Ad Soyad artik Firma'dan once geliyor),
       islem butonlari saga yaslanir */
    #YetkiliTable.mobile-compact th:nth-child(2),
    #YetkiliTable.mobile-compact td:nth-child(2) {
        text-align: left;
    }

    #YetkiliTable.mobile-compact th:last-child,
    #YetkiliTable.mobile-compact td:last-child {
        text-align: right;
        padding-right: 8px;
    }

    /* Sozlesmeler: Kod kolonu sadece icerigi kadar dar sabit genislikte olur, boylece
       Firma ile arasinda bosluk kalmadan hemen yaninda hizali durur; Goruntule butonu saga yaslanir. */
    #SozlesmeMusteriTable.mobile-compact th:nth-child(3),
    #SozlesmeMusteriTable.mobile-compact td:nth-child(3) {
        width: 56px;
        max-width: 56px;
        text-align: center;
    }

    #SozlesmeMusteriTable.mobile-compact th:last-child,
    #SozlesmeMusteriTable.mobile-compact td:last-child {
        text-align: right;
        padding-right: 8px;
    }
}

/* Cok dar ekranlarda (ör. kucuk telefonlar): iki ekstra kolonu olan kompakt tablolarda
   ikinci kolon da gizlenir; sadece sira no, birinci kolon ve islem butonlari kalir. */
@media (max-width: 389px) {
    #YetkiliTable.mobile-compact th:nth-child(3),
    #YetkiliTable.mobile-compact td:nth-child(3),
    #SozlesmeMusteriTable.mobile-compact th:nth-child(3),
    #SozlesmeMusteriTable.mobile-compact td:nth-child(3),
    #MusteriTable.mobile-compact th:nth-child(7),
    #MusteriTable.mobile-compact td:nth-child(7) {
        display: none;
    }
}

/* 390-395px arasi: ikinci kolon henuz gizlenmiyor, tablonun kapladigi alani
   arttirmak icin sayfa/kart bosluklari ve hucre dolgusu biraz daraltilir. */
@media (min-width: 390px) and (max-width: 395px) {
    .page-content {
        padding-left: 8px;
        padding-right: 8px;
    }

    .card-table table.mobile-compact td,
    .card-table table.mobile-compact th {
        padding-left: 4px;
        padding-right: 4px;
    }
}

/* Kaydirma cubugu kartin icinde degil, kartin disinda (perdede) yer alir: kart
   icerigi kadar uzar, ekrana sigmadiginda tum kart perde icinde kaydirilir.
   Perde saydamdir: en ufak bir karartma bile arkadaki sidebar'in GORUNEN rengini
   degistirip kart basligiyla ayni lacivertin farkli gorunmesine yol aciyordu.
   Odagi karta cekme isini artik yalnizca kartin guclu golgesi yapiyor (bkz.
   .row-modal box-shadow); disari tiklayinca kapatma calismaya devam eder. */
.row-modal-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 200;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 16px;
    overflow-y: auto;
}

/* max-height yok: kart icerik kadar uzar. Otomatik margin, kart kisa oldugunda
   onu konumlandirir; icerik ekrandan uzun oldugunda 0'a duser, boylece kartin
   tepesi kirpilmaz ve tamami kaydirilarak gorulebilir. overflow:hidden yalnizca
   yuvarlak kose kirpmasi icin - kart icinde kaydirma cubugu olusturmaz. */
.row-modal {
    background: var(--surf);
    width: 100%;
    max-width: 440px;
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 6px rgba(15, 23, 42, .10), 0 28px 64px -16px rgba(15, 23, 42, .45);
    overflow: hidden;
    margin-top: auto;
}

@media (min-width: 561px) {
    .row-modal-backdrop {
        padding: 24px;
    }

    .row-modal {
        margin: auto;
    }
}

/* Kaydirma artik kartin disinda oldugu icin baslik sabitlenmez (sticky), kartla
   birlikte kayar. Kose kirpmasi .row-modal'in overflow:hidden'i ile yapilir.
   Renk dogrudan sidebar degiskenine baglidir; boylece iki lacivert her zaman
   birebir ayni olur (sabit bir deger yazilirsa sidebar rengi degistiginde
   ikisi ayrisir). */
.row-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: var(--color-sidebar-bg);
    color: #fff;
}

/* Uzun firma adi kesilmez/yana kaydirilmaz; basliga sigmayan metin alt satira gecer. */
.row-modal-title {
    flex: 1;
    font-size: 15px;
    font-weight: 700;
    min-width: 0;
    overflow-wrap: anywhere;
}

.row-modal-close {
    background: none;
    border: none;
    color: #fff;
    opacity: .85;
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 2px;
    flex-shrink: 0;
}

.row-modal-close:hover {
    opacity: 1;
}

.row-modal-body {
    padding: 6px 0;
}

/* Etiket sabit, deger kalan alani kullanir; satira sigmayan uzun degerler (adres,
   aciklama vb.) yana kaydirilmaz - satir asagi dogru buyuyerek metni sarar. */
.row-modal-field {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--bd-l);
}

/* Uzun degerler (adres, aciklama vb.): etiket ustte, deger altta tam genislikte.
   Boylece metin, etiketin yanindaki dar kolona sikismak yerine etiketin altinda
   kalan bosluk dahil satirin tamamini kullanir (bkz. list-page.js STACK_THRESHOLD). */
.row-modal-field--stacked {
    display: block;
}

.row-modal-field--stacked .row-modal-label {
    display: block;
    margin-bottom: 4px;
    padding-top: 0;
}

.row-modal-field--stacked .row-modal-value-wrap {
    justify-content: flex-start;
}

.row-modal-field--stacked .row-modal-value {
    text-align: left;
}

.row-modal-field:last-child {
    border-bottom: none;
}

.row-modal-field:nth-child(even) {
    background: var(--alt);
}

.row-modal-label {
    font-size: 12.5px;
    color: var(--tx2);
    flex-shrink: 0;
    padding-top: 1px;
}

.row-modal-value {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--tx);
    text-align: right;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Adres gibi alanlarda deger + Google Maps navigasyon ikonunu bir arada, saga
   yasli tutar (bkz. list-page.js addModalField mapsUrl parametresi). */
.row-modal-value-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.row-modal-map-link {
    display: grid;
    place-items: center;
    color: var(--ac);
    flex-shrink: 0;
    margin-top: 2px;
}

.row-modal-map-link:hover {
    opacity: .75;
}

.row-modal-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border-top: 1px solid var(--bd-l);
}

/* Karti kapatan geri butonu: alt seridin solunda, islem butonlarinin yaninda
   sabit genislikte durur (islem butonlari kalan alani paylasir). */
.row-modal-back {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: none;
    background: none;
    border-radius: var(--radius-sm);
    color: var(--tx2);
    cursor: pointer;
}

.row-modal-back:hover {
    color: var(--ac);
}

.row-modal-actions .btn,
.row-modal-actions form {
    flex: 1;
}

.row-modal-actions .btn {
    width: 100%;
    justify-content: center;
}

/* ---------- Satir ici islem ikonu (Duzenle / kebab) ---------- */
.row-action-btn {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    color: var(--tx3);
    cursor: pointer;
    text-decoration: none;
    border: none;
    background: none;
}

.row-action-btn:hover {
    background: var(--ac-bg);
    color: var(--ac);
    text-decoration: none;
}

.dropdown-menu {
    font-family: var(--font-family);
    font-size: 13px;
    border-color: var(--bd);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card-lg);
    padding: 6px;
}

.dropdown-item {
    border-radius: 6px;
    padding: 7px 10px;
    color: var(--tx2);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--ac-bg);
    color: var(--ac-text);
}

.dropdown-item.text-danger:hover {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}


/* ---------- Tablo ustu genel arama kutusu (list-page.js) ---------- */
.table-search-box {
    position: relative;
    flex: 0 1 50%;
    max-width: 50%;
    min-width: 120px;
    display: flex;
    align-items: center;
    margin-right: auto;
}

.table-search-icon {
    position: absolute;
    left: 12px;
    display: flex;
    align-items: center;
    color: var(--tx3);
    pointer-events: none;
}

.table-search-input {
    width: 100%;
    height: 36px;
    padding: 0 12px 0 36px;
    border: 1px solid var(--bd);
    border-radius: var(--radius-sm);
    background: var(--surf);
    color: var(--tx);
    font-family: inherit;
    font-size: 13px;
}

.table-search-input:focus {
    outline: none;
    border-color: var(--ac);
}

.table-search-input::placeholder {
    color: var(--tx3);
}

/* ---------- Sira numarasi + sayfalama (list-page.js) ---------- */
.card-table th.col-num,
.card-table td.col-num {
    width: 1%;
    white-space: nowrap;
    text-align: right;
    font-family: var(--font-family-mono);
    color: var(--tx3);
    padding-right: 8px;
}

.list-row-num {
    color: var(--tx3);
    font-size: 12px;
    min-width: 20px;
    text-align: right;
    flex-shrink: 0;
}

/* ---------- Tablo ustu ikon-only "Filtrele" butonu + acilir filtreler karti ---------- */
.table-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

/* ---------- "Sırala" menusu (arama kutusunun yaninda) ---------- */
.sort-menu-wrap {
    position: relative;
    flex-shrink: 0;
}


/* Disa aktarma dugmesi, Sirala/Filtrele ile AYNI gorunumu paylasir: ust satirda
   uc ikon ayni dilde durur (bkz. list-page.js buildExportButton). */
.export-btn,
.sort-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px;
    border: none;
    background: none;
    border-radius: var(--radius-sm);
    color: var(--ac);
    cursor: pointer;
}

.export-btn:hover,
.export-btn:focus-visible,
.sort-toggle-btn:hover,
.sort-toggle-btn.has-active-sort {
    background: var(--alt);
    color: var(--ac);
}

.sort-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 280px;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--surf);
    border: 1px solid var(--bd);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 6px rgba(15, 23, 42, .10), 0 20px 44px -14px rgba(15, 23, 42, .40);
    z-index: 130;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.sort-menu-body {
    overflow-y: auto;
    padding: 5px;
    min-height: 0;
}

/* Filtre cekmecesiyle ayni iki adimli akis: once sec, sonra Uygula. */
.sort-menu-footer {
    display: flex;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid var(--bd-l);
    flex-shrink: 0;
}

.sort-menu-footer .filter-clear-btn,
.sort-menu-footer .filter-apply-btn {
    flex: 1;
}

.sort-menu[hidden] {
    display: none;
}

/* Her satir: solda kolon adi, sagda iki yon butonu. */
.sort-menu-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
}

.sort-menu-row:hover {
    background: var(--alt);
}

.sort-menu-label {
    font-size: 12.5px;
    color: var(--tx);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sort-menu-btns {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.sort-dir-btn {
    border: 1px solid var(--bd);
    background: var(--surf);
    color: var(--tx2);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    min-width: 52px;
}

.sort-dir-btn:hover {
    border-color: var(--ac);
    color: var(--ac);
}

.sort-dir-btn.active {
    background: var(--ac);
    border-color: var(--ac);
    color: #fff;
}

.filter-toggle-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px;
    border-radius: var(--radius-sm);
    border: none;
    background: none;
    color: var(--ac);
    cursor: pointer;
}

.filter-toggle-btn:hover,
.filter-toggle-btn.has-active-filters {
    background: var(--alt);
    color: var(--ac);
}

.filter-toggle-btn .filter-count-badge {
    position: absolute;
    top: -6px;
    right: -6px;
}

/* ---------- Filtreler cekmecesi (sag taraftan acilan panel) ---------- */
.filter-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .5);
    z-index: 210;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease;
}

.filter-drawer-backdrop.open {
    opacity: 1;
    visibility: visible;
}

.filter-card {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 211;
    width: 320px;
    max-width: 88vw;
    background: var(--surf);
    box-shadow: var(--shadow-card-lg);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .2s ease;
}

.filter-card.open {
    transform: translateX(0);
}

.filter-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    background: var(--color-sidebar-bg);
    color: #fff;
    flex-shrink: 0;
}

.filter-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.filter-card-close {
    background: none;
    border: none;
    color: #fff;
    opacity: .85;
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 2px;
}

.filter-card-close:hover {
    opacity: 1;
}

.filter-count-badge {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--ac);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.filter-card-search {
    position: relative;
    padding: 12px 18px;
    border-bottom: 1px solid var(--bd);
    flex-shrink: 0;
}

.filter-card-search .table-search-icon {
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
}

.filter-card-search .table-search-input {
    width: 100%;
}

.filter-card-body {
    padding: 18px;
    flex: 1;
    overflow-y: auto;
}

.filter-group {
    margin-bottom: 22px;
}

.filter-group:last-of-type {
    margin-bottom: 16px;
}

.filter-group-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--tx);
    margin-bottom: 12px;
}

.filter-checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}

.filter-checkbox-row input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--ac);
    cursor: pointer;
    flex-shrink: 0;
}

.filter-checkbox-row span {
    font-size: 13.5px;
    color: var(--tx2);
}

/* ---------- Filtre cekmecesi: tarih araligi grubu ---------- */
/* Hazir aralik secim kutusu; "Özel…" secilene kadar tarih alanlari kapalidir. */
.date-preset-select {
    width: 100%;
    font-size: 12.5px;
    padding: 6px 8px;
    margin: 2px 0 8px;
}

/* Hazir aralikta alanlar yalnizca hesaplanan araligi gosterir, duzenlenemez. */
.date-range-row.is-disabled {
    opacity: .6;
}

.date-range-input:disabled {
    background: var(--alt);
    cursor: not-allowed;
}

.date-range-row {
    display: flex;
    gap: 8px;
}

.date-range-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
    font-size: 11px;
    color: var(--tx3);
}

.date-range-input {
    width: 100%;
    border: 1px solid var(--bd);
    border-radius: var(--radius-sm);
    background: var(--surf);
    color: var(--tx);
    font-size: 12px;
    padding: 5px 7px;
    font-family: inherit;
}

.date-range-input:focus {
    outline: none;
    border-color: var(--ac);
}

.filter-card-footer {
    display: flex;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--bd);
    flex-shrink: 0;
}

.filter-clear-btn,
.filter-apply-btn {
    flex: 1;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.filter-clear-btn {
    border: 1px solid var(--bd);
    background: var(--surf);
    color: var(--tx2);
}

.filter-clear-btn:hover {
    color: var(--color-danger);
    border-color: var(--color-danger);
}

.filter-apply-btn {
    border: none;
    background: var(--ac);
    color: #fff;
}

.filter-apply-btn:hover {
    background: var(--ac-strong);
}

.list-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

/* Sol alt seri: [adet secici] << < [sayfa no] > >> */
.pager {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.pager-nav {
    display: flex;
    align-items: center;
    gap: 2px;
}

.table-total-count {
    font-family: var(--font-family-mono);
    font-weight: 600;
    font-size: 11px;
    color: var(--tx3);
    background: var(--alt);
    border: 1px solid var(--bd);
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

/* Sayfalama serisinin en solundaki adet alani (varsayilan 10):
   solda serbest sayi girisi, gri ayraç, sagda hazir degerleri acan ok. */
.page-size-combo {
    position: relative;
    display: flex;
    align-items: stretch;
    height: 28px;
    margin-right: 4px;
    background: var(--surf);
    border: 1px solid var(--bd);
    border-radius: 6px;
}

.page-size-combo:focus-within {
    border-color: var(--ac);
}

.page-size-input {
    width: 44px;
    border: none;
    background: none;
    padding: 0 6px;
    color: var(--tx2);
    font-family: var(--font-family-mono);
    font-weight: 600;
    font-size: 12px;
    text-align: center;
}

.page-size-input:focus {
    outline: none;
}

/* Dar kutuda tarayicinin sayi artirma oklari sigmiyor ve ayraçla karisiyor. */
.page-size-input {
    -moz-appearance: textfield;
    appearance: textfield;
}

.page-size-input::-webkit-outer-spin-button,
.page-size-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Sayi alanini oktan ayiran gri cizgi. */
.page-size-toggle {
    display: grid;
    place-items: center;
    width: 22px;
    padding: 0;
    border: none;
    border-left: 1px solid var(--bd);
    background: none;
    color: var(--tx3);
    cursor: pointer;
    border-radius: 0 5px 5px 0;
}

.page-size-toggle:hover {
    background: var(--alt);
    color: var(--ac);
}

.page-size-menu {
    position: absolute;
    z-index: 30;
    bottom: 100%;
    left: 0;
    min-width: 100%;
    margin-bottom: 2px;
    background: var(--surf);
    border: 1px solid var(--bd);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card-lg);
    overflow: hidden;
}

.page-size-menu .ss-item {
    padding: 6px 12px;
    font-family: var(--font-family-mono);
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
}

/* Yalnizca gosterim: bulunulan sayfa numarasi. Duzenlenebilir bir alan degildir. */
.pager-jump {
    min-width: 56px;
    height: 28px;
    padding: 0 8px;
    margin: 0 4px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--bd);
    border-radius: 6px;
    background: var(--surf);
    color: var(--tx2);
    font-family: var(--font-family-mono);
    font-size: 12px;
    text-align: center;
    user-select: none;
}

.pager-nav-btn {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border: none;
    background: none;
    border-radius: 6px;
    color: var(--tx2);
    cursor: pointer;
}

.pager-nav-btn:hover {
    background: var(--alt);
    color: var(--ac);
}

.pager-nav-btn:disabled {
    opacity: .4;
    cursor: default;
    pointer-events: none;
}

/* ---------- Rozetler ---------- */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

/* Not: Bootstrap'in .bg-* siniflari arka plani !important ile dolu renk yapar; asagida
   !important ile sitenin yumusak (acik zemin + renkli yazi) tasarimini geri kazandiriyoruz,
   aksi halde yazi zeminle ayni tonda kalip okunmuyor. */
.badge.bg-success { background: var(--color-success-bg) !important; color: var(--color-success) !important; }
/* Yazi rengi sabit koyu olamaz: karanlik temada zemin (--bd) de koyulastigi icin
   yazi zeminle ayni tonda kalip okunmaz oluyordu. Temaya gore degisen --tx2 kullanilir. */
.badge.bg-secondary { background: var(--bd) !important; color: var(--tx2) !important; }
.badge.bg-warning { background: var(--color-warning-bg) !important; color: var(--color-warning) !important; }
.badge.bg-info { background: var(--ac-bg) !important; color: var(--ac-text) !important; }

.status-icon-ok { color: var(--color-success); }
.status-icon-fail { color: var(--color-danger); }

/* ---------- Sabit Tanimlar: sol dikey sekme seridi ---------- */
.settings-shell {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.settings-tabs {
    display: flex;
    flex-direction: column;
    flex: 0 0 190px;
    gap: 3px;
}

.settings-tabs-heading {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tx3);
    padding: 0 12px;
    margin: 0 0 var(--space-2);
}

.settings-tabs-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings-tab {
    display: flex;
    align-items: center;
    gap: 9px;
    text-align: left;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    color: var(--tx2);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

.settings-tab:hover {
    text-decoration: none;
    background: var(--alt);
}

.settings-tab.active {
    background: var(--ac-bg);
    color: var(--ac-text);
    font-weight: 600;
}

.settings-tabs-note {
    margin-top: 10px;
    padding: var(--space-3) 12px 0;
    border-top: 1px solid var(--bd-l);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--tx3);
}

.settings-content {
    flex: 1 1 480px;
    min-width: 0;
}

/* Dar ekranda sekmeler alt alta uzun bir liste olusturuyordu (7 modul = 7 satir)
   ve icerik ekranin cok asagisina itiliyordu. Telefonda sekmeler, ekran genisligini
   dolduran iki sutunlu bir izgaraya doner; her modul cerceveli bir kutu olur. */
@media (max-width: 680px) {
    .settings-tabs {
        /* Masaustundeki sabit 190px genislik burada tam genislige birakilir. */
        flex: 1 1 100%;
    }

    .settings-tabs-links {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    /* Not: modul sayisi tek oldugunda sonuncu kutu son satirda yarim genislikte,
       yalniz kalir. Bilerek boyle: iki sutuna yayilan genis bir kutu digerlerinden
       farkli gorunup dikkat cekiyordu. */

    .settings-tab {
        align-items: center;
        gap: 8px;
        padding: 10px 11px;
        min-height: 48px;
        border: 1px solid var(--bd);
        background: var(--surf);
        font-size: 12.5px;
        line-height: 1.25;
    }

    /* Uzun modul adlari iki satira sarar; ikon kuculup bozulmasin. */
    .settings-tab .ic {
        flex-shrink: 0;
    }

    .settings-tab.active {
        border-color: var(--ac);
    }

    .settings-tabs-heading,
    .settings-tabs-note {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ---------- Liste satiri (Hizmet Turleri / Personel / E-posta ayarlari) ---------- */
.list-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 15px;
    border-bottom: 1px solid var(--bd-l);
}

.list-row:last-child {
    border-bottom: none;
}

.list-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.list-row-icon-box {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-tile);
    background: var(--ac-bg);
    color: var(--ac);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.list-row-body {
    flex: 1;
    min-width: 0;
}

.list-row-title {
    font-size: 13.5px;
    font-weight: 600;
}

.list-row-meta {
    font-size: 11.5px;
    color: var(--tx3);
    font-family: var(--font-family-mono);
    font-weight: 600;
}

/* ---------- Panel karti (Musteri / Anlasma Create sayfalari) ---------- */
.panel-card {
    border-radius: var(--radius-md);
    padding: 18px;
    margin-bottom: 18px;
    background: var(--ac-bg);
    border: 1px solid var(--color-pink-border);
}

.panel-card--pink,
.panel-card--amber {
    background: var(--ac-bg);
    border: 1px solid var(--color-pink-border);
}

/* ---------- Hesabim ---------- */
.profile-card {
    background: var(--surf);
    border: 1px solid var(--bd);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card-lg);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.profile-avatar {
    width: 54px;
    height: 54px;
    border-radius: var(--radius-tile);
    background: var(--ac);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 19px;
    font-weight: 700;
    flex-shrink: 0;
}

.profile-name {
    font-size: 17px;
    font-weight: 700;
}

.profile-meta {
    font-size: 13px;
    color: var(--tx2);
    font-family: var(--font-family-mono);
    font-weight: 600;
}

/* ---------- Hesabim: istatistik kartlari ---------- */
.stat-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.stat-card {
    background: var(--surf);
    border: 1px solid var(--bd);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 14px 16px;
}

.stat-card-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--tx2);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 8px;
}

.stat-card-value {
    font-family: var(--font-family-mono);
    font-size: 24px;
    font-weight: 600;
    color: var(--tx);
}

.account-actions {
    display: flex;
    gap: 10px;
}

@media (max-width: 640px) {
    .stat-cards {
        grid-template-columns: 1fr;
    }
}

/* ---------- Genel sayfa kapsayici (form sayfalari) ---------- */
.form-page {
    max-width: 720px;
}

.narrow-page {
    max-width: 560px;
}

.form-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--tx);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--bd-l);
}

/* ---------- Acilir/kapanir form bolumu (ör. Adres Bilgileri) ---------- */
.collapse-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 18px;
    padding: 12px 0;
    border: none;
    border-top: 1px solid var(--bd-l);
    background: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--tx2);
    cursor: pointer;
}

.collapse-toggle:hover {
    color: var(--ac);
}

.collapse-toggle-chevron {
    transition: transform .15s ease;
}

.collapse-toggle.open .collapse-toggle-chevron {
    transform: rotate(180deg);
}

.collapse-panel {
    padding-top: 16px;
}

.form-card {
    background: var(--surf);
    border: 1px solid var(--bd);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card-lg);
    padding: 22px;
}

/* ---------- Takvim ---------- */
.takvim-ustbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.takvim-secim {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* "2026 - Ağustos" — secilebilir bir alan degil, sayfa basligi gibi duz metin.
   Donem yalnizca yanindaki ileri/geri oklariyla degisir. */
.takvim-donem {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--tx);
    white-space: nowrap;
}

.takvim-gezinme {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* Dar ekranda takvim sikismasin: yatayda kendi icinde kayar. */
.takvim-sarmal {
    overflow-x: auto;
    background: var(--surf);
    border: 1px solid var(--bd);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}

.takvim {
    width: 100%;
    /* Taban genislik, kenar cubugu aciktayken bile (viewport ~880px) icerik alanina
       sigacak sekilde secildi; boylece kucuk dizustu ekranlarinda da yatay kaydirma
       cikmaz. 820px altinda zaten tamamen akiskan hale gelir (bkz. media query). */
    min-width: 580px;
    border-collapse: collapse;
    table-layout: fixed;
}

.takvim th {
    padding: 12px 10px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--tx2);
    text-align: center;
    background: var(--alt);
    border-bottom: 1px solid var(--bd);
}

.takvim th.takvim-baslik--haftasonu {
    font-weight: 800;
    color: var(--tx);
}

.takvim-hucre {
    height: 118px;
    vertical-align: top;
    padding: 8px 10px;
    /* Plan ekle dugmesi hucrenin sag ustune mutlak konumlanir. */
    position: relative;
    border-right: 1px solid var(--bd-l);
    border-bottom: 1px solid var(--bd-l);
}

.takvim tr > .takvim-hucre:last-child {
    border-right: none;
}

.takvim tbody tr:last-child .takvim-hucre {
    border-bottom: none;
}

.takvim-gun-no {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--tx);
    font-variant-numeric: tabular-nums;
}

.takvim-hucre--haftasonu .takvim-gun-no {
    font-weight: 700;
}

/* Izgarayi tamamlamak icin eklenen onceki/sonraki ay gunleri. */
.takvim-hucre--disay {
    background: var(--alt);
}

.takvim-hucre--disay .takvim-gun-no {
    color: var(--tx3);
    opacity: .55;
    font-weight: 400;
}

.takvim-hucre--bugun .takvim-gun-no {
    display: inline-grid;
    place-items: center;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--ac);
    color: #fff;
    font-weight: 700;
}

/* Gun hucresindeki destek kaydi etiketleri. Sigmayanlar gizlenir; hucreye
   tiklayinca tumu pop-up'ta listelenir (bkz. Takvim/Index.cshtml). */
.takvim-kayitlar {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 5px;
}

.takvim-kayit {
    display: block;
    padding: 3px 5px;
    border-radius: 4px;
    background: var(--ac-bg);
    border-left: 2px solid var(--ac);
    line-height: 1.2;
    overflow: hidden;
}

.takvim-kayit-firma {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--ac-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hizmet turu solda, sure saginda; dar hucrede once hizmet turu kisalir. */
.takvim-kayit-alt {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px;
}

.takvim-kayit-hizmet {
    font-size: 9.5px;
    color: var(--tx3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.takvim-kayit-sure {
    flex-shrink: 0;
    font-size: 9.5px;
    font-weight: 600;
    color: var(--tx2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Hucrede en fazla 2 kayit gosterilir; gerisi "+N daha" ile belirtilir. */
.takvim-kayit:nth-child(n+3) {
    display: none;
}

.takvim-kayit-daha {
    display: block;
    margin-top: 3px;
    font-size: 9.5px;
    font-weight: 600;
    color: var(--tx3);
}

/* Mobilde kullanilan sayi rozeti; genis ekranda gizli. */
.takvim-kayit-sayi {
    display: none;
}

.takvim-hucre--dolu {
    cursor: pointer;
}

.takvim-hucre--dolu:hover {
    background: var(--alt);
}

.takvim-hucre--dolu:focus-visible {
    outline: 2px solid var(--ac);
    outline-offset: -2px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Mobilde bir gune dokununca takvimin ALTINDA acilan gun ayrinti grid'i.
   Genis ekranda hic gosterilmez; orada ayrinti pop-up ile acilir. */
.takvim-gun-detay {
    display: none;
}

.takvim-hucre--secili {
    background: var(--ac-bg);
    box-shadow: inset 0 0 0 2px var(--ac);
}

/* Genis ekranda kisa gun adlari gizlidir. */
.takvim-gun-kisa {
    display: none;
}

/* Takvim dar ekranda YATAY KAYDIRMADAN ekrana sigar: tam gun adlari yerine
   kisaltmalar, kucultulmus hucreler ve ozel gun adi yerine nokta isareti. */
@media (max-width: 820px) {
    .takvim-donem {
        font-size: 16px;
    }

    .takvim-sarmal {
        overflow-x: visible;
    }

    .takvim {
        min-width: 0;
    }

    .takvim-gun-uzun {
        display: none;
    }

    .takvim-gun-kisa {
        display: inline;
    }

    .takvim th {
        padding: 9px 2px;
        font-size: 10px;
        letter-spacing: .02em;
    }

    .takvim-hucre {
        height: 62px;
        padding: 5px 3px;
        text-align: center;
    }

    .takvim-gun-no {
        font-size: 13px;
    }

    /* Dar hucreye firma adi + hizmet turu sigmaz; yerine kayit sayisi rozeti
       gosterilir, ayrintilar gune dokununca acilan pop-up'ta yer alir. */
    .takvim-kayitlar,
    .takvim-kayit-daha {
        display: none;
    }

    .takvim-kayit-sayi {
        display: inline-grid;
        place-items: center;
        min-width: 18px;
        height: 18px;
        margin-top: 5px;
        padding: 0 5px;
        border-radius: 999px;
        background: var(--ac);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
    }

    /* Panel sayfanin akisinda, takvimin hemen altinda tam genislikte durur. */
    .takvim-gun-detay[hidden] {
        display: none;
    }

    .takvim-gun-detay {
        display: block;
        margin-top: 14px;
        background: var(--surf);
        border: 1px solid var(--bd);
        border-radius: var(--radius-md);
        overflow: hidden;
        box-shadow: var(--shadow-card);
    }

    .takvim-gun-detay-ust {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 12px;
        background: var(--alt);
        border-bottom: 1px solid var(--bd);
    }

    .takvim-gun-detay-tarih {
        font-size: 13.5px;
        font-weight: 700;
        color: var(--tx);
    }

    .takvim-gun-detay-kapat {
        display: grid;
        place-items: center;
        width: 28px;
        height: 28px;
        flex-shrink: 0;
        border: none;
        background: none;
        border-radius: var(--radius-sm);
        color: var(--tx3);
        cursor: pointer;
    }

    .takvim-gun-detay-kapat:active {
        background: var(--bd-l);
    }

    .takvim-gun-detay-grid {
        display: grid;
        grid-template-columns: 1fr auto auto auto;
    }

    .takvim-gun-detay-baslik {
        padding: 8px 12px;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--tx3);
        background: var(--surf);
        border-bottom: 1px solid var(--bd-l);
    }

    .takvim-gun-detay-firma,
    .takvim-gun-detay-hizmet,
    .takvim-gun-detay-sure {
        padding: 10px 12px;
        font-size: 13px;
        border-bottom: 1px solid var(--bd-l);
    }

    .takvim-gun-detay-hizmet {
        padding-right: 6px;
    }

    .takvim-gun-detay-sure {
        padding-left: 6px;
        font-weight: 600;
        color: var(--tx2);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .takvim-gun-detay-firma {
        font-weight: 600;
        color: var(--tx);
    }

    .takvim-gun-detay-hizmet {
        color: var(--tx2);
        white-space: nowrap;
    }

    /* Son satirin alt cizgisi kart kenarligiyla ust uste binmesin. */
    .takvim-gun-detay-grid > :nth-last-child(-n+4) {
        border-bottom: none;
    }

}

/* Cok dar telefonlarda (<=380px) hucreler biraz daha sikilastirilir. */
@media (max-width: 380px) {
    .takvim th {
        font-size: 9px;
        padding: 8px 1px;
    }

    .takvim-hucre {
        height: 54px;
        padding: 4px 1px;
    }

    .takvim-gun-no {
        font-size: 12px;
    }
}

/* ============================================================================
   YENI BILESENLER (yapilacaklar.docx)
   ============================================================================ */

/* ---------- Ortak kayan panel: Filtreler / Sırala ----------
   Mobilde ekranin ALTINDAN yukari acilir (bottom sheet), genis ekranda SAGDAN
   acilir cekmece. Iki panel de ayni bileseni kullanir (bkz. list-page.js
   createSlidePanel). Eski .filter-card / .sort-menu kurallarinin yerini alir. */
.slide-panel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .5);
    z-index: 210;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease;
}

.slide-panel-backdrop.open {
    opacity: 1;
    visibility: visible;
}

.slide-panel {
    position: fixed;
    z-index: 211;
    background: var(--surf);
    box-shadow: var(--shadow-card-lg);
    display: flex;
    flex-direction: column;
    /* Genis ekran varsayilani: sagdan acilan cekmece. */
    top: 0;
    right: 0;
    bottom: 0;
    width: 340px;
    max-width: 88vw;
    transform: translateX(100%);
    transition: transform .22s ease;
}

.slide-panel.open {
    transform: translateX(0);
}

.slide-panel-handle {
    display: none;
}

.slide-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    background: var(--color-sidebar-bg);
    color: #fff;
    flex-shrink: 0;
}

.slide-panel-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.slide-panel-close {
    background: none;
    border: none;
    color: #fff;
    opacity: .85;
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 2px;
}

.slide-panel-close:hover {
    opacity: 1;
}

.slide-panel-body {
    padding: 14px 16px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.slide-panel-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--bd);
    flex-shrink: 0;
}

/* Altta her zaman bulunan geri butonu (istek: "hep geri tuşu altta olsun"). */
.slide-panel-back {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border: none;
    background: var(--alt);
    color: var(--tx2);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.slide-panel-back:hover {
    color: var(--ac);
}

/* Mobil: alttan yukari acilan sayfa. */
@media (max-width: 680px) {
    .slide-panel {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        max-width: none;
        max-height: 86vh;
        border-radius: 18px 18px 0 0;
        transform: translateY(100%);
    }

    .slide-panel.open {
        transform: translateY(0);
    }

    /* Surukleme tutamagi - parmakla asagi cekerek kapatma alani. */
    .slide-panel-handle {
        display: flex;
        justify-content: center;
        padding: 10px 0 2px;
        cursor: grab;
        touch-action: none;
    }

    .slide-panel-handle > span {
        display: block;
        width: 42px;
        height: 4px;
        border-radius: 999px;
        background: var(--bd);
    }

    .slide-panel-header {
        background: transparent;
        color: var(--tx);
        padding: 6px 18px 12px;
    }

    .slide-panel-title {
        color: var(--tx);
        font-size: 17px;
    }

    .slide-panel-close {
        color: var(--tx3);
    }

    /* Alt serit, telefonun ekran altindaki guvenli alaniyla cakismasin. */
    .slide-panel-footer {
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
}

/* ---------- Satir detayi kayan panelde ----------
   Alan satirlari kenardan kenara aksin diye govdenin yatay dolgusu sifirlanir
   (.row-modal-field kendi dolgusunu tasiyor). Alt seritte geri butonu solda,
   satirin kendi islem ikonlari (duzenle/sil) sagda toplanir. */
.slide-panel--satir .slide-panel-body {
    padding: 0;
}

.row-sheet-eylemler {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.row-sheet-eylemler > * {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Filtre paneli: katlanabilir kolon gruplari ---------- */
.filter-panel-search {
    position: relative;
    margin-bottom: 10px;
}

.filter-panel-search .table-search-icon {
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.filter-panel-search .table-search-input {
    width: 100%;
}

.filter-grup {
    border: 1px solid var(--bd-l);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    overflow: hidden;
}

.filter-grup-baslik {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 11px 12px;
    border: none;
    background: var(--surf);
    color: var(--tx);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.filter-grup-baslik:hover {
    background: var(--alt);
}

.filter-grup-ad {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Grupta kac secim yapildigini gosterir; secim yoksa gizlidir. */
.filter-grup-rozet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--ac);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.filter-grup-rozet[hidden] {
    display: none;
}

.filter-grup-ok {
    display: grid;
    place-items: center;
    color: var(--tx3);
    transition: transform .18s ease;
    flex-shrink: 0;
}

.filter-grup.acik .filter-grup-ok {
    transform: rotate(180deg);
}

.filter-grup-govde {
    display: none;
    padding: 4px 12px 12px;
    border-top: 1px solid var(--bd-l);
}

.filter-grup.acik .filter-grup-govde {
    display: block;
}

/* Cok secenekli gruplarda grup ici arama kutusu. */
.filter-grup-arama {
    width: 100%;
    font-size: 12.5px;
    padding: 6px 8px;
    margin: 8px 0 6px;
}

/* Secenek listesi uzun olsa da panel uzayip gitmez; grup icinde kaydirilir. */
.filter-secenekler {
    max-height: 240px;
    overflow-y: auto;
    padding-top: 4px;
}

.filter-tarih-icerik {
    padding-top: 8px;
}

/* ---------- Sırala paneli ---------- */
.sort-panel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 12px;
    border-radius: var(--radius-sm);
    border-bottom: 1px solid var(--bd-l);
}

.sort-panel-row:last-child {
    border-bottom: none;
}

/* Secili kolonun satiri, ornek tasarimdaki gibi vurgulanir. */
.sort-panel-row.is-secili {
    background: var(--alt);
}

.sort-panel-label {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    color: var(--tx);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sort-panel-btns {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}

/* ---------- Destek kaydi durumu (renkli rozet) ----------
   Renk, Sabit Tanimlar'daki tanimdan --durum-renk olarak gelir. Zemin ayni
   rengin saydam hali; boylece her renk secimi okunabilir kaliyor. */
.durum-rozet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--durum-renk, var(--tx2));
    background: color-mix(in oklab, var(--durum-renk, var(--bd)) 14%, transparent);
    border: 1px solid color-mix(in oklab, var(--durum-renk, var(--bd)) 35%, transparent);
}

.durum-rozet::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--durum-renk, var(--tx3));
    flex-shrink: 0;
}

/* Sabit Tanimlar listesindeki renk onizleme noktasi. */
.durum-renk-noktasi {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    flex-shrink: 0;
    border: 1px solid rgba(15, 23, 42, .15);
}

/* Durum secim kutusu: solunda secili durumun rengini gosteren nokta. */
.durum-secim {
    position: relative;
}

.durum-secim .form-select {
    padding-left: 30px;
}

.durum-secim-nokta {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 999px;
    pointer-events: none;
    z-index: 1;
}

/* Renk secici: kare renk kutusu + yanindaki hex metin kutusu. */
.renk-secici {
    display: flex;
    gap: 8px;
    align-items: center;
}

.renk-secici-kutu {
    width: 46px;
    height: 38px;
    padding: 2px;
    border: 1px solid var(--bd);
    border-radius: var(--radius-sm);
    background: var(--surf);
    cursor: pointer;
    flex-shrink: 0;
}

.renk-secici-metin {
    flex: 1;
    min-width: 0;
    font-family: var(--font-family-mono);
}

/* ---------- Doviz cinsi listesi ---------- */
.doviz-sembol {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    background: var(--alt);
    color: var(--tx);
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
}

/* ---------- Sozlesme tutari (detay satiri) ----------
   Tam boy bir form alani degil: sozlesme icerigine ait kucuk bir ayrinti gibi
   durur. Etiket solda, dar kutu yaninda; sol kenardaki ince cizgi satiri
   cevresindeki asil alanlardan ayirir. */
/* Tutar kutusunun SAG kenari, ustundeki "Bitiş tarihi" etiketinde "Bitiş"
   kelimesinin bittigi noktaya hizalanir.
   Hesap: .field-row iki esit sutun + 16px bosluk, yani sag sutun 50% + 8px'te
   baslar; olculen "Bitiş" kelimesi 25px. Hedef sag kenar = 50% + 33px,
   dolayisiyla sagdan bosluk = 50% - 33px.
   Hizalama SAGDAN yapilir (justify-content: flex-end): boylece "Tutar"
   etiketinin genisligi degisse bile kutunun sag kenari yerinde kalir. */
.detay-satiri {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-bottom: 16px;
    margin-right: calc(50% - 33px);
    padding-left: 12px;
    border-left: 2px solid var(--bd-l);
}

/* Dogrulama mesaji span'lari hata yokken bos gelir; bos da olsalar flex ogesi
   sayilip aralarindaki bosluk (gap) kadar yer kapliyor ve kutuyu sola itiyordu. */
.detay-satiri > .text-danger:empty {
    display: none;
}

/* Dar ekranda .field-row tek sutuna dustugu icin "Bitiş" hizasi anlamini yitirir;
   satir sola yaslanip normal bir girinti alir. */
@media (max-width: 680px) {
    .detay-satiri {
        justify-content: flex-start;
        margin-right: 0;
        margin-left: 10px;
    }
}

.detay-satiri-etiket {
    font-size: 12px;
    font-weight: 500;
    color: var(--tx3);
    margin: 0;
}

.tutar-grup {
    display: flex;
    align-items: stretch;
    width: 190px;
    border: 1px solid var(--bd);
    border-radius: var(--radius-sm);
    background: var(--surf);
    overflow: hidden;
}

/* Odak halkasi tek tek alanlarda degil, birlesik kutunun tamaminda gorunur. */
.tutar-grup:focus-within {
    border-color: var(--ac);
}

.tutar-giris {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    color: var(--tx);
    font-family: var(--font-family-mono);
    font-size: 13px;
    text-align: right;
    padding: 6px 8px;
}

.tutar-giris:focus {
    outline: none;
}

/* Sag uctaki para birimi: kutunun icinde, gri zeminli ayri bir bolme. */
.tutar-doviz {
    border: none;
    border-left: 1px solid var(--bd);
    background: var(--alt);
    color: var(--tx2);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 0 4px;
    cursor: pointer;
}

.tutar-doviz:focus {
    outline: none;
}

/* ---------- Telefon alanlari: Ara / WhatsApp kisayollari ---------- */
.telefon-alani {
    display: flex;
    align-items: center;
    gap: 6px;
}

.telefon-alani > input {
    flex: 1;
    min-width: 0;
}

.telefon-eylemler {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.telefon-eylem {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--bd);
    background: var(--surf);
    color: var(--tx2);
    text-decoration: none;
}

.telefon-eylem--ara:hover {
    color: var(--ac);
    border-color: var(--ac);
}

/* WhatsApp'in kendi yesili - ikon tanindik kalsin. */
.telefon-eylem--wa {
    color: #25d366;
}

.telefon-eylem--wa:hover {
    border-color: #25d366;
}

.telefon-eylem.is-disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* Tablodaki telefon hucresi: numara + kucuk ikonlar, cerceve olmadan. */
.telefon-hucre {
    white-space: nowrap;
}

.telefon-hucre .telefon-eylem {
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    vertical-align: middle;
    margin-left: 2px;
}

/* On izleme kartindaki kisayollar. */
.row-modal-tel-link,
.row-modal-wa-link {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--ac);
}

.row-modal-wa-link {
    color: #25d366;
}

/* Musteri formundaki "Google Haritalar'da aç" baglantisi. */
.harita-link {
    align-self: flex-start;
    gap: 6px;
}

/* ---------- Ana ekran: aylik grafikler ---------- */
/* Iki grafik yan yana. auto-fit + minmax: kart 430px'in altina dusecek olursa
   otomatik alt alta gecer; tek grafik varsa (admin olmayan kullanici) tek kart
   tum genisligi kaplar. */
.grafik-ikili {
    display: grid;
    /* min(430px, 100%): ekran 430px'ten darsa sutun genisligi %100'e duser.
       Duz minmax(430px, 1fr) yazilsaydi sutun dar telefonlarda konteynerden
       genis kalir ve TUM SAYFAYI yatay kaydirirdi. */
    grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr));
    gap: 16px;
    /* stretch (varsayilan): iki kartin alt kenari hizali kalir. Soldaki kart ozet
       kutulari yuzunden daha uzun oldugundan, start ile birakilsaydi kartlar
       kademeli gorunurdu. */
    align-items: stretch;
    margin-bottom: 16px;
}

.grafik-ikili > .grafik-kart {
    margin-bottom: 0;
    min-width: 0;
    /* Kart, icerigi dikey diziyor ki grafik gövdesi alta yaslanabilsin (bkz. asagi). */
    display: flex;
    flex-direction: column;
}

/* Iki grafigin TABANI ayni hizada dursun. Soldaki kartta ozet kutulari fazladan
   satir kapladigi icin grafik daha asagida basliyordu; margin-top:auto ile grafik
   kartin altina yaslanir. Kartlar esit yukseklikte (align-items:stretch) ve iki SVG
   ayni viewBox/genislikte oldugundan, alt kenarlar hizalaninca sifir cizgileri de
   hizalanir. */
.grafik-ikili > .grafik-kart .grafik-govde {
    margin-top: auto;
}

.grafik-kart {
    margin-bottom: 16px;
}

.grafik-yil-gezinme {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.grafik-yil {
    font-family: var(--font-family-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--tx);
    min-width: 42px;
    text-align: center;
}

.grafik-lejant {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 10px 0 6px;
}

.grafik-lejant-oge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    color: var(--tx2);
}

.grafik-nokta {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Grafik kartlarinin baslik/alt basligi, diger kartlara gore biraz daha kucuktur:
   iki grafik yan yana durdugu icin ust blok mumkun oldugunca alcak kalmali. */
.grafik-kart .chart-title {
    font-size: 14px;
}

.grafik-kart .chart-sub {
    font-size: 11px;
}

.grafik-govde {
    position: relative;
}

/* ---- Grafik izgarasi: eksen yazilari SVG DISINDA ----
   SVG icindeki <text>, viewBox olcegine tabi oldugu icin yazi boyu ekran
   genisligiyle degisiyordu (telefonda okunmuyor, genis ekranda buyuyordu).
   Eksenler HTML'e alindi: font-size artik her ekranda ayni CSS px. */
.grafik-alan {
    display: grid;
    grid-template-columns: 26px 1fr;
    grid-template-rows: 1fr 18px;
    column-gap: 6px;
}

.grafik-y-ekseni {
    grid-column: 1;
    grid-row: 1;
    position: relative;
}

.grafik-y-ekseni > span {
    position: absolute;
    right: 0;
    transform: translateY(-50%);
    font-size: 11px;
    line-height: 1;
    color: var(--tx3);
    font-variant-numeric: tabular-nums;
}

.grafik-x-ekseni {
    grid-column: 2;
    grid-row: 2;
    position: relative;
}

.grafik-x-ekseni > span {
    position: absolute;
    top: 4px;
    transform: translateX(-50%);
    font-size: 11px;
    line-height: 1;
    color: var(--tx3);
    white-space: nowrap;
}

/* Cizim alani. Yukseklik SABIT CSS px'tir; SVG viewBox="0 0 100 100" +
   preserveAspectRatio="none" ile bu kutuyu tam doldurur, yani yatayda
   kabin genisligine uyar, dikeyde buradaki yukseklige. */
.grafik-tuval {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    height: 210px;
}

.grafik-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.grafik-cubuk {
    transition: opacity .12s ease;
    cursor: default;
}

.grafik-cubuk:hover {
    opacity: .78;
}

/* Cizgi grafigindeki nokta: HTML: SVG <circle> yatay gerilmede elipse donusurdu. */
.grafik-nokta-isaret {
    position: absolute;
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
    border-radius: 999px;
    cursor: default;
    transition: transform .12s ease;
}

.grafik-nokta-isaret:hover {
    transform: scale(1.35);
}

/* Fareyle uzerine gelindiginde cikan deger baloncugu (bkz. chart-tooltip.js). */
.grafik-ipucu {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    background: #1f2937;
    color: #fff;
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    font-size: 12px;
    box-shadow: 0 6px 18px -6px rgba(15, 23, 42, .5);
    white-space: nowrap;
}

.grafik-ipucu[hidden] {
    display: none;
}

.grafik-ipucu-baslik {
    font-weight: 700;
    margin-bottom: 3px;
}

.grafik-ipucu-satir {
    display: flex;
    align-items: center;
    gap: 6px;
}

.grafik-ipucu-kutu {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Dar ekran: yalnizca CIZIM alcalir - eksen yazilari ayni boyutta kalir,
   cunku artik SVG olceginden bagimsizlar. */
@media (max-width: 680px) {
    .grafik-tuval {
        height: 180px;
    }

    .grafik-lejant {
        gap: 4px 12px;
    }
}

/* Cok dar telefonlarda 12 ay etiketi yan yana sigmaz; bir atlayarak gosterilir
   (izgara ve cubuklar aynen kalir, yalnizca etiketler seyrelir). */
@media (max-width: 430px) {
    .grafik-x-ekseni > span:nth-child(even) {
        display: none;
    }
}

/* Takvim gun ayrintisindaki durum kolonu (mobil panel). */
.takvim-gun-detay-durum {
    padding: 8px 12px;
    border-bottom: 1px solid var(--bd-l);
    white-space: nowrap;
}

/* Takvim hucresindeki kaydin sol kenar seridi = is durumu rengi. */
.takvim-kayit {
    border-left: 3px solid var(--durum-renk, transparent);
    padding-left: 5px;
}

/* Saat kutusu: maskeli metin girisi, rakamlar hizali dursun. */
.saat-kutusu {
    font-family: var(--font-family-mono);
    letter-spacing: .5px;
}

/* ---------- Carkli secici (bkz. time-picker.js) ----------
   Saat ve tarih alanlarinin yanindaki ikona basilinca alanin altinda kaydirmali
   bir cark acilir. Sarmalayici ve panel JS tarafindan uretilir; alan yazarak da
   doldurulabildigi icin cark yalnizca EK bir yoldur.

   Satir yuksekligi (--cark-oge) JS'teki OGE_Y ile AYNI olmak zorunda: kaydirma
   konumundan secili sirayi hesaplarken bu sayi kullaniliyor. */
.cark-alani {
    position: relative;
    display: block;
    --cark-oge: 36px;
    --cark-gorunen: 5;
}

/* Alan + ikon satiri. Ikon buna gore ortalanir; panel akisa girince sarmalayici
   uzasa da ikon alanin hizasinda kalir. */
.cark-satir {
    position: relative;
    display: block;
}

/* Ayri bir ikon yok; kutunun kendisi cekmeceyi aciyor. Acikken kenarlik aksana
   doner - alanin bir secici tasidigi buradan anlasilir. */
.cark-kutusu[aria-expanded="true"] {
    border-color: var(--ac);
    box-shadow: 0 0 0 3px var(--ac-bg);
}

.cark-secici {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--surf);
    border: 1px solid var(--bd);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card-lg);
    overflow: hidden;
}

/* Ekranin altina tasarsa yukari acilir. */
.cark-secici--yukari {
    top: auto;
    bottom: calc(100% + 6px);
}

.cark-secici[hidden] {
    display: none;
}

/* Dar ekranda panel AKISIN ICINDE durur: alanin uzerine binmek yerine
   asagidaki alanlari iterek bir cekmece gibi acilir. Ustte yuzen bir kutu,
   telefonda altindaki alanlari orttugu icin nereye dokunuldugu kayboluyordu. */
@media (max-width: 880px) {
    .cark-secici {
        position: static;
        margin-top: 8px;
    }

    .cark-secici--yukari {
        bottom: auto;
    }
}

/* ---- takvim (tarih alani) ---- */

.tkvm {
    padding: 4px 10px 0;
}

.tkvm-ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0 8px;
}

.tkvm-baslik {
    flex: 1;
    text-align: center;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--tx);
}

.tkvm-ok {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--bd);
    border-radius: var(--radius-sm);
    background: var(--surf);
    color: var(--tx2);
    cursor: pointer;
}

.tkvm-ok:hover {
    background: var(--ac-bg);
    border-color: color-mix(in srgb, var(--ac) 30%, transparent);
    color: var(--ac);
}

/* Tek bir chevron simgesi var; onceki ay icin 180 dondurulur. */
.tkvm-ok[data-yon="-1"] .ic {
    transform: rotate(180deg);
}

.tkvm-gunler,
.tkvm-izgara {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.tkvm-gunler {
    margin-bottom: 4px;
}

.tkvm-gunler span {
    text-align: center;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tx3);
}

.tkvm-bos {
    height: 34px;
}

.tkvm-gun {
    height: 34px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--tx);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.tkvm-gun:hover {
    background: var(--alt);
}

/* Bugun: ince aksan cerceve. Secili gun: dolu aksan zemin. */
.tkvm-gun.bugun {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ac) 45%, transparent);
    color: var(--ac-text);
}

.tkvm-gun.secili {
    background: var(--ac);
    color: #fff;
}

.cark-ust {
    display: flex;
    padding: 8px 10px 4px;
    gap: 4px;
}

.cark-baslik {
    flex: 1;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tx3);
}

/* ---- carkin kendisi ---- */

.cark {
    position: relative;
    display: flex;
    gap: 4px;
    padding: 0 10px;
    height: calc(var(--cark-oge) * var(--cark-gorunen));
}

/* Secili satirin zemini. Sutunlarin ALTINDA durur ve tiklamayi gecirir; yoksa
   carkin tam ortasina dokunmak calismazdi. */
.cark-band {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 50%;
    height: var(--cark-oge);
    transform: translateY(-50%);
    border-radius: var(--radius-sm);
    background: var(--alt);
    pointer-events: none;
}

.cark-sutun {
    position: relative;
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Uc satirlar soluklasir: makara hissi bundan geliyor. */
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}

.cark-sutun::-webkit-scrollbar {
    display: none;
}

.cark-sutun:focus-visible {
    outline: 2px solid var(--ac);
    outline-offset: -2px;
    border-radius: var(--radius-sm);
}

/* Ilk ve son secenek de ortaya gelebilsin diye ust/alt bosluk birakilir. */
.cark-ic {
    padding: calc(var(--cark-oge) * (var(--cark-gorunen) - 1) / 2) 0;
}

.cark-oge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--cark-oge);
    padding: 0 4px;
    border: none;
    background: transparent;
    color: var(--tx3);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: pointer;
    scroll-snap-align: center;
    transition: color .12s ease, font-size .12s ease;
}

.cark-oge.secili {
    color: var(--tx);
    font-size: 16px;
    font-weight: 800;
}

/* ---- alt serit ---- */

.cark-alt {
    display: flex;
    gap: 6px;
    padding: 8px 10px 10px;
    border-top: 1px solid var(--bd-l);
    margin-top: 6px;
}

.cark-mini {
    flex: 1;
    padding: 7px 8px;
    border: 1px solid var(--bd);
    border-radius: var(--radius-sm);
    background: var(--surf);
    color: var(--tx2);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.cark-mini:hover {
    background: var(--alt);
    color: var(--tx);
    border-color: var(--tx3);
}

.cark-mini--vurgu {
    background: var(--ac);
    border-color: var(--ac);
    color: #fff;
}

.cark-mini--vurgu:hover {
    background: var(--ac-strong);
    border-color: var(--ac-strong);
    color: #fff;
}


/* =============================================================================
   ERISIM REDDEDILDI
   Yetki sistemi devreye girdikten sonra sikca gorulen bir ekran oldu; duz bir
   paragraf yerine ne yapilacagini soyleyen bir kart. Genislik sinirli: tek
   cumlelik bir mesaji 1400 piksele yaymak okumayi zorlastiriyordu.
   ============================================================================= */
.denied-card {
    max-width: 560px;
    margin: 40px auto;
    padding: 26px 28px;
    background: var(--surf);
    border: 1px solid var(--bd);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    text-align: center;
}

.denied-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.denied-title {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: var(--tx);
}

.denied-text {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--tx2);
}

.denied-text b { color: var(--tx); font-weight: 700; }

.denied-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ---------- Takvim: kisisel planlar ----------
   Planlar destek kayitlarindan AYRI okunmalidir: kayitlar dolu zeminli kartlar,
   planlar ise kesikli cerceveli ve zeminsizdir. "Yapilmis is" ile "yapilacak is"
   ayrimi bir bakista gorunur. */

/* Plan ekle dugmesi: hucrenin sag ustunde, yalnizca uzerine gelince (veya
   klavyeyle odaklaninca) belirir - 42 hucrede surekli duran bir arti isareti
   takvimi gurultuye bogardi. */
.takvim-plan-ekle-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: var(--ac-bg);
    color: var(--ac);
    cursor: pointer;
    opacity: 0;
    transition: opacity .14s ease, background-color .14s ease;
}

.takvim-hucre:hover .takvim-plan-ekle-btn,
.takvim-hucre:focus-within .takvim-plan-ekle-btn {
    opacity: 1;
}

/* Dokunmatik ekranda hover yoktur; dugme her zaman gorunur ama soluk durur. */
@media (hover: none) {
    .takvim-plan-ekle-btn {
        opacity: .55;
    }
}

.takvim-plan-ekle-btn:hover,
.takvim-plan-ekle-btn:focus-visible {
    opacity: 1;
    background: var(--ac);
    color: #fff;
}

.takvim-planlar {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 3px;
}

.takvim-plan {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px;
    border: 1px dashed var(--bd);
    border-radius: 6px;
    background: transparent;
    font-size: 10.5px;
    line-height: 1.25;
    color: var(--tx2);
}

.takvim-plan-metin {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.takvim-plan-saat {
    flex-shrink: 0;
    font-weight: 700;
    color: var(--tx);
    font-variant-numeric: tabular-nums;
}

.takvim-plan-baslik {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Tamamlanan plan: uzeri cizili ve soluk. Silinmez, cunku "bunu yaptim"
   bilgisi gunun kaydinin bir parcasidir. */
.takvim-plan--tamam {
    border-style: solid;
    border-color: var(--color-success);
    background: var(--color-success-bg);
    color: var(--tx3);
}

.takvim-plan--tamam .takvim-plan-baslik,
.takvim-plan--tamam .takvim-plan-saat {
    text-decoration: line-through;
    color: var(--tx3);
}

.takvim-plan-tik,
.takvim-plan-sil {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--tx3);
    cursor: pointer;
    transition: background-color .14s ease, color .14s ease;
}

.takvim-plan-tik:hover,
.takvim-plan-tik:focus-visible {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.takvim-plan--tamam .takvim-plan-tik {
    color: var(--color-success);
}

.takvim-plan-sil:hover,
.takvim-plan-sil:focus-visible {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

/* Silme dugmesi de yalnizca hucreyle ilgilenirken gorunur: her planin yaninda
   surekli duran bir carpi, yanlislikla tiklamayi davet eder. */
.takvim-plan-sil {
    opacity: 0;
}

.takvim-hucre:hover .takvim-plan-sil,
.takvim-hucre:focus-within .takvim-plan-sil,
.takvim-plan:hover .takvim-plan-sil {
    opacity: 1;
}

@media (hover: none) {
    .takvim-plan-sil {
        opacity: .6;
    }
}

/* ---------- Plan ekleme penceresi ---------- */
.plan-dialog {
    width: min(420px, calc(100vw - 32px));
    padding: 0;
    /* Saat carki (time-picker.js) alanin ALTINA, kendi sarmalayicisinin icine
       acilir. <dialog> varsayilan olarak overflow:auto oldugu icin panel
       kirpiliyor ve modal kaydirilabilir hale geliyordu; gorunur birakiliyor. */
    overflow: visible;
    border: 1px solid var(--bd);
    border-radius: var(--radius-lg);
    background: var(--surf);
    color: var(--tx);
    box-shadow: var(--shadow-card-lg);
}

.plan-dialog::backdrop {
    background: rgba(15, 23, 42, .45);
}

.plan-dialog-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px;
}

.plan-dialog-ust {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
}

.plan-dialog-baslik {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.plan-dialog-tarih {
    flex: 1;
    font-size: 12.5px;
    color: var(--tx2);
    font-variant-numeric: tabular-nums;
}

.plan-dialog-kapat {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--tx2);
    cursor: pointer;
}

.plan-dialog-kapat:hover {
    background: var(--alt);
    color: var(--tx);
}

.plan-dialog-etiket {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--tx2);
}

.plan-dialog-istege-bagli {
    font-weight: 500;
    color: var(--tx3);
}

.plan-dialog-alt {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

@media (prefers-reduced-motion: reduce) {

    .takvim-plan-ekle-btn,
    .takvim-plan-tik,
    .takvim-plan-sil {
        transition: none;
    }
}

/* ---------- Yetki fiil kutucuklari (ORTAK) ----------
   Hem Erisim Izinleri panelinde hem Personel formundaki "Sayfa yetkileri"
   bolumunde kullanilir. Once yalnizca izinler.css'te tanimliydi; Personel formu
   o dosyayi yuklemedigi icin kutucuklar TARAYICI VARSAYILANIYLA ciziliyor ve
   isaretsiz olanlarin tik ikonu da gorunuyordu - 60 kutunun hepsi isaretli
   sanilyordu. Ortak dosyaya tasindi.

   ---- FIIL KUTUCUKLARI ----
   Her yetki bagimsiz bir kutucuktur (bkz. izinler.js kutucuklar). Onceki
   "merdiven" tek bir kademeyi secmeye zorluyordu; ekle ile duzenleme
   ayrilamiyordu.

   Sutun genisligi izgara ile baslik seridinde AYNI degiskene baglidir; biri
   degistiginde digeri kaymasin. */
.y-kutucuklar,
.y-kutu-basliklar {
    --y-kutu-sutun: 5;
    display: grid;
    /* minmax(0, 1fr): sutunlar icerikten bagimsiz ESIT kalir. Duz "1fr"
       kullanildiginda "DIŞA AKTAR" gibi uzun bir baslik kendi sutununu
       genisletiyor ve baslik seridi ile kutucuklar birbirinden kayiyordu. */
    grid-template-columns: repeat(var(--y-kutu-sutun), minmax(0, 1fr));
    gap: 4px;
    /* Genislik BURADA VERILMEZ: Erisim Izinleri paneli sabit bir olcu kullanir
       (izinler.css), Personel formunda ise satirin sag sutununu doldurur. */
    width: 100%;
}

/* Baslik seridi, adlandirdigi kutucuklarin hemen ustunde durur ve satirlarla
   AYNI izgarayi paylasir - boylece her yazi kendi sutununun merkezinde kalir.
   Uzun listede kaydirirken yapisik kalmasi icin sticky. */
.y-kutu-basliklar {
    padding: 8px 0 7px;
    margin-left: auto;
    /* .y-satir'in yatay dolgusu (2px) kadar iceri: aksi halde baslikler
       kutucuklarin 2 piksel saginda kaliyordu. */
    margin-right: 2px;
    border-bottom: 1px solid var(--bd);
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surf);
}

.y-kutu-basliklar span {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tx2);
    text-align: center;
    white-space: nowrap;
}

.y-kutu {
    display: grid;
    place-items: center;
    justify-self: center;
    width: 22px;
    height: 22px;
    padding: 0;
    /* Kenarlık --bd iken (çok açık gri) boş kutucuklar beyaz zeminde neredeyse
       görünmüyordu; 14 satır x 6 sütunluk bir ızgarada "burada bir kutu var mı"
       sorusu kalıyordu. --tx3 net görünür ama ağır değil - daha koyusu (--tx2)
       denendi ve GERİ ALINDI: ızgaranın tamamı kutu çerçevesine dönüşüyordu. */
    border: 1.5px solid var(--tx3);
    border-radius: 6px;
    background: var(--surf);
    color: transparent;
    cursor: pointer;
    transition: background-color .13s ease, border-color .13s ease, color .13s ease;
}

.y-kutu:hover:not([disabled]) {
    border-color: var(--ac);
    background: var(--ac-bg);
}

.y-kutu:focus-visible {
    outline: 2px solid var(--ac);
    outline-offset: 2px;
}

/* Isaretli kutu: fiilin kendi rengiyle dolar. Tik isareti yalnizca isaretliyken
   gorunur - bos kutuda soluk bir tik "yari secili" gibi okunurdu. */
/* İşaretli kutu TEK RENK: vurgu mavisi. Önce her fiilin kendi rengi vardı
   (gör mavi, ekle/düzenle yeşil, sil kırmızı, dışa aktar gri); 14 satırlık
   ızgarada bu, satır satır değişen renkli bir mozaik üretiyor ve asıl bilgiyi
   -hangi kutu dolu- okumayı zorlaştırıyordu. Hangi fiil olduğunu zaten sütun
   başlığı söylüyor. */
.y-kutu.isaretli {
    background: var(--ac);
    color: #fff;
    border-color: transparent;
}

.y-kutu .ic {
    width: 12px;
    height: 12px;
}



.y-kutu[disabled] {
    cursor: default;
    opacity: .55;
}

@media (prefers-reduced-motion: reduce) {
    .y-kutu { transition: none; }
}