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

.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-inline {
    display: inline !important;
}

/* ================================================================
   Uygulama kabugu: sol navigasyon (sidebar) + ust cubuk (topbar)
   ================================================================ */
.app-shell {
    display: flex;
    /* MOBILDE dvh SART (kullanici bildirimi, 2026-09-08): "vh" tarayici
       cubuklari GIZLIYKENKI yuksekliktir. Adres cubugu ALTTA olan
       telefonlarda (Samsung Internet, Firefox Android, alt cubuk secili
       Chrome, iOS Safari) kabugun son ~50 pikseli kalici olarak o cubugun
       arkasinda kaliyor; dibe yapisan toplam seridi de oraya dusup alt
       sayfa serisinin (.mobile-pagebar) altinda kayboluyordu. dvh GORUNEN
       yuksekliktir, serit yine tam serinin ustune oturur.

       Kaydirirken yeniden yerlesme KORKUSU YOK: belge kaydirilmiyor
       (burada overflow:hidden, kaydiran oge .page-content), yani tarayici
       cubuklari hic toplanmiyor ve dvh sabit kaliyor. Sirali yazim eski
       tarayicilar icin: dvh bilinmiyorsa 100vh gecerli kalir. */
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* ---------- Sol navigasyon (sidebar) ----------
   ZEMIN = GIRIS EKRANININ ZEMINI. Ayni degrade, ayni devre deseni. Onceki
   duz lacivert (#132037) kabugu girisle iliskisiz bir yuzey yapiyordu;
   kullanici giristen ice girdiginde zemin degisiyordu. Simdi degismiyor,
   yalnizca bir seride daraliyor.

   Uc katman, giristeki dizilimin DIKEY AYNASI (kullanici karari, 2026-09-01:
   isik yukaridan degil asagidan yukari koyulassin):
     1) en altta dip renk (desenin arkasi hicbir yerde acikta kalmasin),
     2) DIPTE acilan isik havuzu - duz degradeyi duzlestirmekten kurtarir,
     3) dip->ust lacivert dusum (aydinlik uc ASAGIDA, yukari dogru koyulasir).
   Duraklar bilerek ESIT DAGILMADI: dip ile orta luminansca cok yakin, esit
   dagilimda cubugun ustteki yarisi duz karanlik okunuyordu. Koyu bolge ust
   ceyrege sikistirildi, dibe de isik karisimi eklendi ki gecis gozle
   izlenebilsin.
   Devre deseni bunlarin USTUNDE ayri bir katmanda (bkz. .sidebar::before):
   arka plan katmanina tek basina opaklik verilemedigi icin ayrildi. */
.sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background-color: var(--sidebar-dip);
    background-image:
        radial-gradient(620px 720px at 50% 4%, var(--sidebar-isik), transparent 74%),
        linear-gradient(172deg,
            color-mix(in srgb, var(--sidebar-isik) 45%, var(--sidebar-ust)) 0%,
            var(--sidebar-ust) 32%,
            var(--sidebar-orta) 74%,
            var(--sidebar-dip) 100%);
    color: var(--color-sidebar-text);
    /* Kabukla ayni olcu (bkz. .app-shell). */
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    /* Sag kenar cizgisi YOK (kullanici istegi, 2026-09-27): ust cubuk logo
       bandiyla ayni boya gelince cizgi menu ile ust cubugu ayiran dikey bir
       sinir olarak okunuyordu; koyu menu zemini zaten ayriligi tasiyor. */
    position: sticky;
    top: 0;
    z-index: 50;
    /* ::before'un yigin baglami disari tasmasin. */
    isolation: isolate;

    /* KENAR CUBUGUNA OZEL yeniden tanimlar. Bu adlari satir detay paneli ve
       rapor ekranlari da kullaniyor ama onlar hala #132037 zeminde duruyor;
       degerleri :root'ta degistirmek o ekranlari da bozardi. Burada
       tanimlaninca yalnizca kenar cubugunun icinde gecerli oluyorlar. */
    --color-sidebar-border: color-mix(in srgb, #8FD8F5 16%, transparent);
    --color-sidebar-muted: #A9BCD8;
    --color-sidebar-section: #7590B8;
}

/* Marka alaninin yuksekligi; .sidebar-head (genis ve dar mod) ve genis
   ekranda .topbar okur - ikisinin alt cizgisi ayni hizada durur (kullanici
   istegi, 2026-09-27). Gerekce .sidebar-head'in yorumunda. :root'ta, cunku
   ust cubuk kenar cubugunun icinde degil. */
:root {
    --marka-yukseklik: 60px;
}

/* Cekmece acilirken odak panele tasiniyor (bkz. site.js, tabindex="-1").
   Panelin kendisi bir hedef degil, yalnizca okuyucunun/klavyenin baslama
   noktasi; butun kenar cubugunu ceviren bir odak halkasi hem cirkin hem
   yaniltici olurdu. Ic baglantilarin kendi halkasi duruyor. */
.sidebar:focus {
    outline: none;
}

/* Devre deseni: giris ekranindaki cizimin kenar cubuguna denk gelen seridi
   (bkz. img/sidebar-devre.svg). Ayri dosya, cunku ayni cizimi her sayfanin
   HTML'ine gomsek her istekte tekrar inerdi; dosya bir kez onbellege giriyor.
   Opaklik dusuk: desen menunun ARKASINDA kalmali, okunurluk desenden once
   gelir. */
.sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../img/sidebar-devre.svg") center center / 100% 100% no-repeat;
    opacity: .55;
    pointer-events: none;
    z-index: 0;
    /* Desen marka alaninin arkasindan da gecer. 2026-09-05'te alanin altina
       maskelenmesi denendi (capraz hat amblemin arkasindan geciyordu) ve
       kullanici karariyla GERI ALINDI: desen kesintisiz akmali. Amblemdeki
       dengesizlik halka kalinligiyla cozuldu (bkz. .sidebar-dar .sidebar-brand). */
}

/* Icerik desenin ustunde. */
.sidebar > * {
    position: relative;
    z-index: 1;
}

/* ---- MARKA ALANI ----
   Marka alani ust cubuga BAGLI DEGIL (kullanici istegi, 2026-09-05): 52
   piksellik ust cubukla ayni yukseklikte tutulunca logo 34 piksele
   sikisiyordu ve kenar cubugunun tepesinde "dar bir yere tikilmis" gibi
   duruyordu.
   Once ust cubuk (52) + sekme seridi (34) = 86 piksele esitlenmisti; boylece
   alt cizgisi sag taraftaki seridin alt cizgisiyle ayni hizadaydi. 2026-09-06'da
   kullanici karariyla serit DARALTILDI (86 -> 74): bant fazla yer kapliyordu.
   Hiza artik tam degil - alt cizgi sekme seridinin 12 piksel yukarisinda
   kaliyor. Tam hizaya donmek gerekirse deger 86'ya cekilir.
   2026-09-07 (kullanici istegi): alan bir kez daha kuculdu, 74 -> 64. Logo
   ve dolgu AYNI ORANLA (x0,865) kuculdu ki logonun cerceveye uzakligi
   degismesin: logo 52 -> 45. Sonra ayni gun alan 60'a indi ve logo birkac
   denemeden sonra 46'da karar kildi (ustte/altta ~6-7px).
   2026-09-08 (kullanici istegi "logo cercevesini ve logoyu kucult"): alan
   60 -> 52 (ust cubukla ayni yukseklik), logo 46 -> 40; dolgu ayni kaldi,
   ustte ~6, altta ~5 piksel bosluk.
   Ayni gun, kullanici: "ust dar gorunuyor" (iki kez). Olculdu: goz alt
   siniri olarak %12'lik ayirici cizgiyi DEGIL arama kutusunu aliyor -
   cizgi bir sinir gibi okunmuyor. Pencere ustu -> amblem 10px, slogan ->
   arama kutusu 16px'ti. Bant 52 -> 56; dolgu 11/0 (SVG duzeltmesinden
   sonra, bkz. .sidebar-logo): 34px'lik logo blogu pencere ustu ile arama
   kutusu arasindaki alanin ortasinda, ustte 17 altta 17.
   SON HAL (ayni gun, kullanici: "guzelce ortala ve boyutunu ayarla"): SVG
   duzeltmesiyle logonun kendisi simetrik olunca yukaridaki dolgu hilesi
   (11 ust / 0 alt) gereksizlesti. Bant 60, dolgu simetrik, logo bandin
   icinde GERCEKTEN ortali; cizgi ile arama kutusu arasi 10.
   Kullanici "biraz daha buyut" dedi: logo 36 -> 40, dolgu 10/9. SVG kutusu
   Son hal: kutu 57,248, logo 42, dolgu 9/8 simetrik (ustte 9, altta
   8 + 1px cizgi). */
.sidebar-head {
    display: flex;
    align-items: center;
    gap: 10px;
    /* box-sizing acikca border-box: alt kenarlik (1px) yuksekligin ICINDE
       kalsin, disina eklenip hizayi 1 piksel kaydirmasin. */
    box-sizing: border-box;
    height: var(--marka-yukseklik);
    /* Dolgu dikeyde ve yatayda SIMETRIK: logo alanin gercek ortasinda durur.
       Alt kenarlik icerik kutusunu 1px yukari ittigi icin alt dolgu bir
       eksik - esit dolguda logo 1 piksel yukarida kaliyordu.
       Yatay dolgu 18'den 12'ye indi (2026-09-06): logonun yuksekligini
       GENISLIK sinirliyor (4,63:1), yani yanlardan kazanilan her piksel
       logoyu buyutuyor. Dikey dolgu 4/3 (2026-09-07); logo ortalandigi icin
       kalan pay iki yana esit dagilir. */
    padding: 9px 12px 8px;
    justify-content: center;
    /* Zemin YOK: alan kendi rengini tasimiyor, altindaki degrade ve devre
       deseni kesintisiz akiyor - opak bir serit zemini ikiye bolerdi. Geriye
       ayirici sac teli ve logonun arkasindaki hafif isik kaliyor. */
    background: transparent;
    border-bottom: 1px solid color-mix(in srgb, #8FD8F5 12%, transparent);
    position: relative;
}

/* Logonun arkasinda yumusak bir isik: kenar cubugunun dibindeki isikla ayni
   dilde (bkz. .sidebar), ama cok daha soluk. Marka alanini sinirlamadan ona
   bir "sahne" veriyor - vurgu, kutu cizmeden geliyor. Tiklamayi yutmasin
   diye pointer-events kapali. */
.sidebar-head::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* Olcu logoya gore (198x40): hale logodan biraz tasar, logo bandin
       ortasinda oldugu icin merkez de bandin ortasi. */
    background: radial-gradient(
        204px 50px at 50% 50%,
        color-mix(in srgb, #8FD8F5 9%, transparent),
        transparent 72%
    );
}

/* 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 DEGIL: esnerse logo yine sola yaslanir. Kendi genisligi kadar
       yer kaplayip alanda ortalaniyor. Ust sinir MOBIL cekmece icindir: sagda
       mutlak konumlu kapat dugmesi (~22px + 14px kenar) var; logo ortali
       kaldigi icin payin iki yana bolunmesi gerekir - 48 = 2 x 24. Masaustunde
       dugme yok, ust sinir kalkar (bkz. min-width: 881px blogu). */
    flex: none;
    max-width: calc(100% - 48px);
    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 271x59 (yaklasik 4,63:1). Yuksekligi sabitleyip genisligi oranla
   birakiyoruz; object-fit ile hicbir kosulda ezilmez.
   Yukseklik 52 (2026-09-06, kullanici istegi "bant cizgilerine yaklastirarak
   buyut"): genislik ~241px olur, 268 piksellik cubukta iki yanda 12 dolgu
   birakinca ~3px pay ile sigar - bu oran icin ULASILABILIR EN BUYUK olcu.
   74 piksellik bantta ustte ~10, altta ~10 piksel bosluk kaliyor. Daha
   buyutmek icin once yatay dolguyu ya da cubuk genisligini artir; yukseklik
   tek basina artirilirsa max-width devreye girer ve logo yine 52'de kalir.
   2026-09-07: bant 64'e inince logo 45'e indi, sonra 50'ye cikti, bant 60'a
   inince de 46'da kaldi (kullanici: "cerceve icindeki buyuklugunu biraz
   dusur"): ~213px genis, iki yanda 12 dolgudan sonra ~15px pay; 60 piksellik
   bantta ustte ~7, altta ~6 piksel bosluk kaliyor.
   2026-09-08: bant 52'ye, logo once 40'a sonra 36'ya indi (~167px genis, cubugun
   ~%62'si; iki yanda ~50px pay). Menudeki 13px yaziya gore fazla baskin
   durmasin diye.
   SVG DUZELTMESI (ayni gun, kullanici: "logo yukari daha yakin duruyor"):
   ozgun cizimde amblemin merkezi yazi blogunun ("365" ustu - slogan alti)
   merkezinden 4,80 birim yukaridaydi; kutu cizime sikica kirpildigi icin
   kutunun merkezi ne amblemin ne yazinin merkeziydi ve ortalanan logo gozle
   yukarida duruyordu. Once viewBox ustten genisletildi (ara cozum), sonra
   kullanici onerisiyle AMBLEM SVG ICINDE asagi alindi. Ilk deneme 4,80
   birimdi (slogan "p" kuyrugu dahil bloga ortalama); kullanici amblemin
   hala yazi govdesine gore asagida oldugunu fark etti - dogru olcu sloganin
   TABAN CIZGISI. Simdi 3,62 birim (<g transform="translate(0,3.62)">):
   amblem zirvesi "365"in zirvesiyle, tabani slogan taban cizgisiyle 0,12
   birim icinde cakisiyordu. Sonraki "asagi al" istekleri tarayicinin ESKI
   SVG'yi onbellekten gostermesi yuzundendi (img'de surum damgasi yoktu;
   eklendi). SON HAL (kullanici: "365 ile slogan arasinda tam hatasiz hizala"):
   amblem "365"in tepesi ile sloganin TABAN CIZGISI (m harfinin alti, p
   kuyrugu sayilmaz - kullanici karari) arasinin TAM ORTASINDA, translate
   3,615; viewBox amblemin merkezine gore simetrik ("158.60 389.718 271.12
   57.248": alt sinir p kuyrugu, ustte ayni uzaklikta 2,402 birim saydam pay),
   kutu merkezi = amblem merkezi. Ayrinti SVG'nin icindeki yorumda.
   Yukseklik 42 (kullanici karari "biraz daha buyut"): kutu 57,248; amblem
   SVG'de 1,5 birim her yone buyutulunce (52,44 -> 55,44) ekranda 38,5 ->
   40,7px, logo genisligi ~200px (cubugun %75'i, iki yanda ~34px). */
.sidebar-logo {
    display: block;
    position: relative;
    height: 42px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
}

.sidebar-logo--firma {
    height: 42px;
    width: 100%;
    object-position: left center;
}

/* ---- FIRMA LOGOSU BANDININ ZEMINI (kullanici karari, 2026-09-23) ----
   Deger Firma Tanimlari formunda secilir (FirmaLogoZemini), renk
   --logo-zemin ile gelir. Bant DUZ renge boyanir ve devre desenini orter;
   menunun geri kalani degismez. DEGRADE ELENDI (once menunun lacivertine
   inen iki renkli degradenin ust dilimi denendi, kullanici "degrade degil duz
   renkler olsun" dedi) - yeniden onerme. Iki tur:
   RENK - saydam logo, renk listeden secilir; logo normal olcusunde kalir.
   DUZ  - logonun kendi zemini var: renk logodan algilanir, logo bandi
     dolduracak kadar buyur ve ortalanir; kenarlar ayni renkte oldugu icin
     logo kutu gibi degil bandin kendisi gibi durur.
   Iki turde de logonun arkasindaki soluk isik kapanir (zemin artik renkli).
   Ayni kurallar formdaki onizlemede de gecer (.firma-logo-sahne). */
.sidebar-head--renk,
.sidebar-head--duz {
    background: var(--logo-zemin);
}

.sidebar-head--renk::before,
.sidebar-head--duz::before {
    display: none;
}

/* DEGRADE - UC RENK (kullanici karari, 2026-09-23): menunun KENDI degradesi
   (altta lacivert, yukari dogru acik mavi) aynen kalir, secilen renk onun
   USTUNE yalnizca LOGO BANDINDA biner: tepede tam tonda baslar ve TAM RENKLI
   BIR BOLUM OLMADAN kademe kademe azalarak (egri (1-t)^1.2, neredeyse
   dogrusal) 72 px'te - arama kutusu baslamadan - saydamlasir. Kullanici
   once logonun arkasinda duz tam renk (24, sonra 44 px) denedi, sonra
   "tam renk olmasin, kucuk kucuk asagi dogru azalsin" dedi. Sira: lacivert -> acik mavi -> secilen renk.
   Elenenler: iki renkli (secilen renk -> duz lacivert; menunun alt yarisi
   karariyordu) ve rengin menunun %38'ine kadar inmesi (acik renklerde
   "Menüde ara" kutusu okunmuyordu, kullanici "yalnizca cok kucuk bir
   kismi" dedi) - yeniden onerme. Asagidaki iki katman .sidebar'in kendi
   zemininin kopyasidir - orada degisirse burada da degismeli. Devre deseni
   (::before) ustunde akmaya devam eder. Form onizlemesi (.firma-logo-sahne)
   ayni kurali kullanir. */
.sidebar.sidebar--degrade,
.firma-logo-sahne.sidebar--degrade {
    background-image:
        linear-gradient(180deg,
            color-mix(in oklab, var(--logo-zemin) 100.0%, transparent) 0.0px,
            color-mix(in oklab, var(--logo-zemin) 86.8%, transparent) 8.0px,
            color-mix(in oklab, var(--logo-zemin) 74.0%, transparent) 16.0px,
            color-mix(in oklab, var(--logo-zemin) 61.5%, transparent) 24.0px,
            color-mix(in oklab, var(--logo-zemin) 49.4%, transparent) 32.0px,
            color-mix(in oklab, var(--logo-zemin) 37.8%, transparent) 40.0px,
            color-mix(in oklab, var(--logo-zemin) 26.8%, transparent) 48.0px,
            color-mix(in oklab, var(--logo-zemin) 16.4%, transparent) 56.0px,
            color-mix(in oklab, var(--logo-zemin) 7.2%, transparent) 64.0px,
            color-mix(in oklab, var(--logo-zemin) 0.0%, transparent) 72.0px),
        radial-gradient(620px 720px at 50% 4%, var(--sidebar-isik), transparent 74%),
        linear-gradient(172deg,
            color-mix(in srgb, var(--sidebar-isik) 45%, var(--sidebar-ust)) 0%,
            var(--sidebar-ust) 32%,
            var(--sidebar-orta) 74%,
            var(--sidebar-dip) 100%);
}

.sidebar--degrade .sidebar-head::before {
    display: none;
}

.sidebar-head--duz {
    /* Logo bandi doldursun: dolgu kucuk, marka baglantisi bandin tamamini alir. */
    padding: 4px 10px 3px;
}

.sidebar-head--duz .sidebar-brand {
    flex: 1 1 auto;
    align-self: stretch;
    display: flex;
}

.sidebar-head--duz .sidebar-logo--firma {
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: center;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 10px 8px;
    /* Liste ucuna gelince kaydirma arkadaki sayfaya zincirlenmesin (dar
       ekranda cekmece acikken gorunur oluyordu; bkz. site.js cekmece bloku). */
    overscroll-behavior: contain;
}

.sidebar-footer {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    padding: 8px 12px 4px;
    border-top: 1px solid color-mix(in srgb, #8FD8F5 12%, transparent);
}

.sidebar-footer .sidebar-logo {
    height: 42px;
}

/* ---------- Sidebar: uygulama surumu (sol alt, 2026-09-06) ----------
   Menunun altinda tek satir, kucuk ve soluk: dikkat cekmesin, ama "hangi
   surumdeyiz" sorusu bakinca cevaplansin. Ust cizgi menu listesinden
   ayirir. Daraltilmis menude (html.sidebar-dar) yer olmadigi icin gizlenir. */
.sidebar-surum {
    flex-shrink: 0;
    padding: 8px 16px 10px;
    border-top: 1px solid color-mix(in srgb, #8FD8F5 12%, transparent);
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: .02em;
    color: color-mix(in srgb, var(--color-sidebar-text) 55%, transparent);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: text;
}

.sidebar-surum-no {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.sidebar-dar .sidebar-surum {
    display: none;
}

/* Ana sayfa: Aylık Satış Grafiği kartı - sütun grafiği (kullanıcı kararı,
   2026-09-23). Çubuklar HTML'dir ve yüzdeyle konumlanır.

   Kart SOLA YASLIDIR ve tam sayfa kaplamaz. 2026-09-24'te yine KÜÇÜLDÜ
   (kullanıcı isteği, "ayları biraz daha yan yana koyalım"): Cari panelinin
   Özet Bilgiler grafikleriyle aynı ölçü - 480 px, çizim 132 px (2026-09-25: 184 px). Süzgeçler
   ikinci satıra indiği için artık tek satıra sığma derdi yok.
   2026-09-25: kart sayfanın ÜÇTE BİRİNE yayılır (kullanıcı isteği); dar
   pencerede 480 px'in altına inmez, telefonda (≤900px) tam genişliktir. */
.pano-ciro-yuva {
    margin-top: 18px;
    width: min(100%, max(480px, calc(100% / 3)));
    margin-right: auto;
}

.pano-ciro {
    padding: 16px 20px 14px;
    /* Cari'nin borç/alacak renkleri (cari.css :root, tablo.css ile ÜÇÜNCÜ
       kopya): site.css ana sayfada o dosyaları yüklemiyor. Değerler orada
       değişirse burada da değişmeli. */
    --kar-borc: color-mix(in srgb, var(--color-success) 76%, black);
    --kar-alacak: color-mix(in srgb, var(--color-danger) 82%, black);
    /* Çubuk rengi MAVİDİR (kullanıcı kararı, 2026-09-25); eksi ay kırmızı kalır. */
    --ciro-cubuk: var(--ac);
    /* Çizim yüksekliği: eksen ve çubuk alanı ikisi de buradan okur.
       132 → 184 px (kullanıcı isteği, 2026-09-25: "aşağı doğru genişlet"). */
    --ciro-cizim-boy: 184px;
}

:root[data-theme="dark"] .pano-ciro {
    --kar-borc: color-mix(in srgb, var(--color-success) 82%, white);
    --kar-alacak: color-mix(in srgb, var(--color-danger) 78%, white);
}

.pano-ciro--bekliyor {
    opacity: .6;
}

/* ---- başlık şeridi ---- */

/* İKİ SATIR (kullanıcı isteği, 2026-09-25): ÜSTTE "Aylık Satış Grafiği –
   yıl Net Satışlar" ve en sağda yıl + Listele; ALTTA solda döviz, sağda
   temsilci. Esnek sarmal düzendir: ::after satırı kıran tam
   genişlikte görünmez bir öğedir, sıra `order` ile verilir (işaretleme
   sırası da aynıdır: ad, alt, yıl, döviz, temsilci). */
.pano-ciro-baslik {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* Satır aralığını ::after verir: kırıcı kendi (boş) satırında durduğu
       için satır boşluğu iki kez sayılırdı. */
    gap: 0 8px;
    /* Denetimlerin hepsi AYNI BOYDADIR (kullanıcı isteği, 2026-09-25: "biri
       diğerinden uzun kısa olmasın"); tek ölçü buradan. */
    --ciro-denetim-boy: 26px;
}

.pano-ciro-baslik::after {
    content: "";
    order: 4;
    flex-basis: 100%;
    height: 8px;
}

.pano-ciro-baslik .pano-ciro-doviz { order: 5; }
.pano-ciro-baslik .pano-ciro-temsilci { order: 6; }

.pano-ciro-baslik .pano-ciro-ad {
    order: 1;
    flex: 0 1 auto;
    display: block;
    line-height: var(--ciro-denetim-boy);
    min-width: 0;
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pano-ciro-alt {
    order: 2;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--tx2);
    font-size: 12px;
}

/* Adla alt başlık arasındaki tire: metin değil süs, ekran okuyucu atlasın. */
.pano-ciro-alt::before {
    content: "– ";
    content: "– " / "";
}


.pano-ciro-yil-listele {
    order: 3;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Temsilci SAĞA YASLIDIR ve dardır (kullanıcı isteği, 2026-09-25): sağ
   kenarı üst satırdaki Listele ile hizalanır; dar kartta küçülebilir. */
.pano-ciro-baslik .pano-ciro-temsilci {
    flex: 0 1 220px;
    min-width: 0;
    margin-left: auto;
}

/* Döviz seçimi: iki parçalı küçük anahtar (Ana Dvz / Alt Dvz). */
.pano-ciro-doviz {
    display: inline-flex;
    flex-shrink: 0;
    box-sizing: border-box;
    height: var(--ciro-denetim-boy);
    padding: 2px;
    border: 1px solid var(--bd-l);
    border-radius: 999px;
}

.pano-ciro-doviz button {
    padding: 0 9px;
    border: none;
    border-radius: 999px;
    background: none;
    color: var(--tx2);
    font-family: inherit;
    font-size: 11.5px;
    white-space: nowrap;
    cursor: pointer;
}

.pano-ciro-doviz button:hover:not(:disabled) {
    color: var(--ac);
}

.pano-ciro-doviz button[aria-pressed="true"] {
    background: color-mix(in srgb, var(--ac) 13%, transparent);
    color: var(--ac);
    font-weight: 600;
}

.pano-ciro-doviz button:disabled {
    cursor: default;
}

/* Temsilci kutusu: ortak seçim kutusu (.sk), döviz anahtarıyla aynı boy ve
   kapsül köşede. DAR (kullanıcı isteği, 2026-09-23): döviz ile birlikte
   grafik adıyla yıl seçimi arasına sığmalı; uzun seçim üç noktayla kesilir,
   tamamı düğmenin title'ında. Uygula düğmesi kutunun kendi panelindedir. */
.pano-ciro-temsilci {
    min-width: 96px;
}

.pano-ciro-temsilci .sk-dugme {
    height: var(--ciro-denetim-boy);
    padding: 0 10px;
    border-color: var(--bd-l);
    border-radius: 999px;
    font-size: 11.5px;
}

/* Yıl seçimi ÇERÇEVESİZDİR (kullanıcı kararı, 2026-09-21: "buton gibi olmasın,
   çerçeveyi kaldır, yılın yanındaki aşağı butonunu kaldır"): iki ok ile arada
   düz yazılmış yıl. Yıl hâlâ gerçek bir <select>'tir - tıklayınca listesi
   açılır, klavyeyle gezilir - ama kutu görünümü ve açılır oku yoktur. */
.pano-ciro-yil {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.pano-ciro-ok {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: var(--ciro-denetim-boy);
    padding: 0;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--tx2);
    cursor: pointer;
}

.pano-ciro-ok:hover:not(:disabled) {
    background: var(--alt);
    color: var(--ac);
}

.pano-ciro-ok:disabled {
    color: var(--tx3);
    cursor: default;
}

.pano-ciro-yil select {
    appearance: none;
    -webkit-appearance: none;
    height: var(--ciro-denetim-boy);
    padding: 0 4px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--tx);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
    cursor: pointer;
}

.pano-ciro-yil select:hover {
    background: var(--alt);
}

/* Listele artık etiketli düğme değil, komut çubuklarındaki ikon düğmenin
   aynısı (.filter-toggle-btn, kullanıcı isteği 2026-09-21). */
.pano-ciro-listele {
    box-sizing: border-box;
    width: var(--ciro-denetim-boy);
    height: var(--ciro-denetim-boy);
    padding: 0;
}

/* ---- boş / hata durumu ---- */

.pano-ciro-bos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 224px;
    color: var(--tx3);
    text-align: center;
}

.pano-ciro-bos p {
    margin: 0;
    max-width: 320px;
    color: var(--tx2);
    font-size: 13px;
}


/* ---- çizim ---- */

/* Çizim kartın TAMAMINI kullanır. 2026-09-21'de iki deneme de kullanıcı
   kararıyla GERİ ALINDI - yeniden önerme: ızgarayı daraltıp sola yaslamak ve
   eksen yazılarını sola yaslamak. Eksen kolonu dardır (48 px), yazılar sağa
   yaslı durur. */
.pano-ciro-grafik {
    display: grid;
    /* Eksen kolonu YAZIYA GORE genisler (kullanici bildirimi, 2026-09-21:
       milyonlu degerlerde yazi kolondan tasip kartin disina cikiyordu).
       Enini .pano-ciro-y-olcu verir - mutlak konumlu yazilar akista olmadigi
       icin kendileri katki veremiyor. */
    grid-template-columns: max-content minmax(0, 1fr);
    /* Başlıktan 22 px aşağıda (kullanıcı isteği, 2026-09-25; önceki 14 px). */
    margin-top: 22px;
}

/* Eksen yazıları çizgilerin ÜSTÜNE değil hizasına oturur: yarısı kadar
   yukarı/aşağı kaydırılır. SAĞA yaslıdırlar - sola yaslama denendi ve
   kullanıcı kararıyla geri alındı (2026-09-21). */
.pano-ciro-y-ekseni {
    position: relative;
    height: var(--ciro-cizim-boy);
    padding-right: 7px;
    /* Çizimin 1 px'lik alt çizgisinin saydam eşi: iki kutunun da iç yüksekliği
       aynı olsun. Yoksa çizgiler 183 px'e, yazılar 184 px'e göre konumlanıyor
       ve yazılar tepeden dibe doğru giderek aşağı kayıyordu (kullanıcı
       bildirimi, 2026-09-25). */
    border-bottom: 1px solid transparent;
}

/* Akista duran tek oge: gorunmez ama yer kaplar, kolonun enini o belirler. */
.pano-ciro-y-olcu {
    visibility: hidden;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Eksen işaretleri yuvarlak adımlardır (0 · 20k · 40k …) ve her biri kendi
   ızgara çizgisinin hizasına oturur (bkz. YillikCiroViewModel.Isaretler). */
.pano-ciro-y-isaret {
    position: absolute;
    right: 7px;
    color: var(--tx3);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    /* Yazının ortası çizginin ORTASINA: çizgi 1 px kalınlığında ve alt
       kenarı işaretin yüksekliğinde durduğu için ortası yarım piksel yukarıda. */
    transform: translateY(calc(50% - .5px));
}

/* Tabandaki işaretin çizgisi ızgara değil çizimin alt kenarlığıdır: iç
   kutunun hemen ALTINDA durur, ortası yarım piksel aşağıda. */
.pano-ciro-y-olcu + .pano-ciro-y-isaret {
    transform: translateY(calc(50% + .5px));
}

.pano-ciro-cizim {
    position: relative;
    height: var(--ciro-cizim-boy);
    border-bottom: 1px solid var(--grafik-izgara);
}

/* Yatay ızgara: her eksen işaretinde bir çizgi (tavan dahil - işaretler
   yuvarlak adım olduğu için tepedeki çizgi artık bir değeri gösteriyor). */
.pano-ciro-izgara {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid color-mix(in srgb, var(--grafik-izgara) 55%, transparent);
}

.pano-ciro-izgara--sifir {
    border-top-color: var(--grafik-izgara);
}

/* Ortalama çizgisi: kesikli, etiketi sağ uçta çizginin üstünde. Çubukların
   ÜSTÜNDE durur ama fareyi engellemez (ipucu hedefleri altta kalıyor). */
.pano-ciro-ort {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    border-top: 1px dashed color-mix(in srgb, var(--tx2) 70%, transparent);
    pointer-events: none;
}

.pano-ciro-ort span {
    position: absolute;
    right: 2px;
    bottom: 2px;
    padding: 0 4px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--surf) 85%, transparent);
    color: var(--tx2);
    font-size: 10px;
    line-height: 14px;
}

/* Fare hedefleri: ay başına bir sütun. İpucu balonu ortak bileşendir
   (bkz. wwwroot/js/chart-tooltip.js), sütun onu data-ipucu ile besler. */
.pano-ciro-hedefler {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.pano-ciro-hedef {
    position: relative;
    border-radius: 4px;
}

.pano-ciro-hedef--tik {
    cursor: pointer;
}

.pano-ciro-hedef--tik:focus-visible {
    outline: 2px solid var(--ac);
    outline-offset: -2px;
}

/* Zemin BOYANMAZ (Cari Özet Bilgiler grafikleriyle aynı): üzerine gelinen
   ayın çubuğu koyulaşır. */

/* ÇUBUK TASARIMI Cari panelinin Özet Bilgiler grafiklerinden alındı
   (kullanıcı isteği, 2026-09-24; kaynak cari.css .cari-aylik-cubuk - ORADA
   DEĞİŞİRSE BURADA DA DEĞİŞMELİ): 12 px, tamamen oval, eksi ay kırmızı;
   üzerine gelinen ay koyulaşır. RENK Cari'den AYRILDI: MAVİDİR
   (--ciro-cubuk, kullanıcı kararı 2026-09-25). Önceki "en iyi
   ay tam renk, ötekiler açık ton" ayrımı bununla kalktı. Çubuk sıfır
   çizgisinden başlar; ortalamak için auto kenar boşluğu kullanılır, transform
   büyüme animasyonuna ayrıldı. */
.pano-ciro-cubuk {
    position: absolute;
    left: 0;
    right: 0;
    width: 12px;
    min-height: 2px;
    margin: 0 auto;
    border-radius: 999px;
    background: var(--ciro-cubuk);
    transform-origin: bottom;
    animation: pano-ciro-buyu .45s cubic-bezier(.2, .7, .3, 1) both;
    animation-delay: var(--gecikme, 0ms);
}

.pano-ciro-cubuk--eksi {
    background: var(--kar-alacak);
    transform-origin: top;
}

.pano-ciro-hedef:hover .pano-ciro-cubuk,
.pano-ciro-hedef:focus-visible .pano-ciro-cubuk {
    filter: brightness(.82);
}

/* Süren ay: kapanmamış ayın çubuğu taralıdır. */
.pano-ciro-cubuk--suren {
    background: repeating-linear-gradient(
        -45deg,
        var(--ciro-cubuk) 0 4px,
        color-mix(in srgb, var(--ciro-cubuk) 45%, var(--surf)) 4px 8px);
}

@keyframes pano-ciro-buyu {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
    .pano-ciro-cubuk { animation: none; }
}

/* Gelmemiş ay: dipte kısa, soluk bir iz - sağ taraf yarım kalmış görünmesin. */
.pano-ciro-iz {
    position: absolute;
    left: 0;
    right: 0;
    width: 12px;
    height: 3px;
    margin: 0 auto;
    border-radius: 2px;
    background: color-mix(in srgb, var(--grafik-izgara) 70%, transparent);
}

.pano-ciro-aylar {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    margin-top: 5px;
    color: var(--tx2);
    font-size: 10px;
    font-weight: 600;
    text-align: center;
}

.pano-ciro-ay--bos {
    color: var(--tx3);
}

/* ---- ayak ---- */

.pano-ciro-ayak {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    color: var(--tx3);
    font-size: 11px;
}

.pano-ciro-ayak span:first-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pano-ciro-ayak span:last-child {
    font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
    .pano-ciro-yuva { width: 100%; }
}

@media (max-width: 600px) {
    .pano-ciro { padding: 14px; }
    .pano-ciro-cubuk, .pano-ciro-iz { width: 9px; }
}

/* ---- cari dökümü paneli (çubuğa tıklanınca, Home/CiroAyCarileri) ----
   Ortak kayan panel (.slide-panel), 560 px. İçerik sade bir TABLODUR
   (kullanıcı kararları, 2026-09-23): zebra satırlar ve üzerine gelince vurgu
   zemini var; en üstte çizginin üzerinde sade kolon adları (Cari · Net
   Tutar · Pay); gri başlık zemini, dikey kolon çizgileri ve toplam satırı YOK
   (toplam panelin başlığında yazıyor) — yeniden önerme. Net tutar yeşil
   (Cari'nin borç rengi --kar-borc formülü), pay soft yeşil çipte. cari.css
   ana sayfada yüklü olmadığı için renk formülü buraya kopyalandı. */
.slide-panel.ciro-cari-panel {
    width: 560px;
    --cc-yesil: color-mix(in srgb, var(--color-success) 76%, black);
}

:root[data-theme="dark"] .slide-panel.ciro-cari-panel {
    --cc-yesil: color-mix(in srgb, var(--color-success) 82%, white);
}

.ciro-cari-panel .slide-panel-body {
    padding: 0;
}

.ciro-cari-kimlik {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ciro-cari-altbaslik {
    margin-top: 2px;
    font-size: 12px;
    opacity: .85;
    font-variant-numeric: tabular-nums;
}

.ciro-cari-bos {
    margin: 24px 16px;
    color: var(--tx2);
    font-size: 13px;
    text-align: center;
}

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

.ciro-cari-k-tutar { width: 118px; }
.ciro-cari-k-pay { width: 72px; }

/* Sade başlık: zemin panelin kendisi, altında tek çizgi; kaydırırken
   yukarıda kalır. */
.ciro-cari-tablo thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 32px;
    padding: 0 12px;
    background: var(--surf);
    border-bottom: 1px solid color-mix(in srgb, var(--bd) 50%, var(--tx3));
    color: var(--tx2);
    font-size: 11.5px;
    font-weight: 700;
    text-align: left;
}

.ciro-cari-tablo td {
    padding: 0 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ciro-cari-tablo tbody td {
    height: 30px;
    color: var(--tx);
}

/* Net tutar YEŞİL (kullanıcı isteği, 2026-09-23); iade ağırlıklı eksi
   tutar kırmızı kalır. Genel "tbody td" renginden özgül olmalı. */
.ciro-cari-tablo tbody td.ciro-cari-tutar {
    color: var(--cc-yesil);
}

.ciro-cari-tablo tbody td.ciro-cari-tutar--eksi {
    color: var(--color-danger);
}

.ciro-cari-tablo tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--alt) 55%, var(--surf));
}

.ciro-cari-tablo tbody tr:hover td {
    background: var(--ac-bg);
}

.ciro-cari-tablo .ciro-cari-sayi {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ciro-cari-tutar {
    font-weight: 600;
}

/* Pay: soft yeşil zemin + yeşil yazı (kullanıcı isteği, 2026-09-23) - Cari'nin
   borç meblağı çipiyle aynı dil (cari.css .cari-meblag). */
.ciro-cari-pay {
    display: inline-block;
    min-width: 46px;
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-success) 14%, var(--surf));
    color: var(--cc-yesil);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}

@media (max-width: 680px) {
    .slide-panel.ciro-cari-panel { width: auto; }
    .ciro-cari-altbaslik { opacity: 1; color: var(--tx2); }
}

/* ---------- 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-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-sidebar-accent) 26%, 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);
}

/* Bos baslik (henuz ekrani olmayan grup) ile arama sonucu bos mesaji ayni
   dilde: kesik cerceveli, soluk bir bilgi kutusu. */
.sidebar-ara-bos,
.sidebar-grup-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;
    /* Baslik kucuk harfli yazilir (kullanici karari, 2026-09-07): buyuk harf
       degil, yalnizca kelime bas harfi buyuk. Kucuk harfte harf araligi
       acmak okumayi bozar; kalinlik ve punto hiyerarsiyi tasir. */
    /* Alt satirdan BIR BASAMAK BUYUK (2026-09-08): baslik da, aktif alt satir
       da 12,5 px / 700 / beyaz oldugunda ikisi ayni harfe donusuyor ve
       hiyerarsi yalnizca girintide kaliyordu. Punto farki + kalinlik farki
       (aktif satir 600'e indi) merdiveni kurar. */
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .01em;
    /* Alt ogelerden DAHA PARLAK: duz beyaz. Camgobegi katilmis ton denendi
       ve geri alindi (kullanici karari, 2026-09-08: "kalin beyaz kalsin");
       ayrim punto ve kalinlik farkindan gelir. */
    color: var(--color-sidebar-text-active);
    cursor: pointer;
    text-align: left;
    transition: color .16s ease;
}

/* Baslikta zemin YOK: dolu bir zemin "secili satir" gibi okunup gercek aktif
   satirla yarisiyordu. Hover yaziyi beyazlatir, SIMGEYI aksana cevirir -
   yanma etkisi tek bir noktadan, en kucuk ogeden geliyor. */
.sidebar-grup-bas:hover {
    color: var(--color-sidebar-text-active);
}

.sidebar-grup-bas:hover .sidebar-grup-ikon {
    opacity: 1;
    color: var(--color-sidebar-accent);
}

/* Acik grubun simgesi de aksanda kalir: hangi cekmecenin acik oldugu
   yalnizca oka degil, renge de bakarak anlasilir. */
.sidebar-grup-bas[aria-expanded="true"] .sidebar-grup-ikon {
    opacity: 1;
    color: var(--color-sidebar-accent);
}

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

.sidebar-grup-baslik {
    flex: 1;
    /* Inter'in buyuk harfleri satir kutusunun ortasindan ~1,5 px yukarida
       oturur (olculdu, 2026-09-07: "Sabit Tanimlar" ikonun ustunde kaliyordu;
       alt cikintili kelimelerde goze carpmiyor). Metin bir piksel indirilir. */
    position: relative;
    top: 1px;
}

.sidebar-grup-ikon {
    flex-shrink: 0;
    /* Simge boyu da hiyerarsiyi soyler: baslikta 16, alt satirda 14 px.
       Eskiden tersiydi (15 / 16) ve alt satir daha agir gorunuyordu. */
    width: 16px;
    height: 16px;
    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. 16 -> 10 (kullanici istegi, 2026-09-23: "Satış Analizi
       Cari ve Grup Detaylı" iki satira sariyordu, "menüyü biraz daha sola
       çekebiliriz"); ray baslik simgesinin sol kenarina hizalanir.
       10/8 -> 8/6 (ayni gun, "Cari ve Grup Detaylı Satış Raporu" tek satira
       1 piksel sigmiyordu; kullanici: "tek satır olarak sığsın"). */
    margin-left: 8px;
    padding-left: 6px;
    /* --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;
    /* Sag dolgu 9 -> 5, aralik 9 -> 7 (2026-09-23): en uzun etiket tek
       satira sigsin diye; sol dolgu ve aktif cubugun konumu (-9px) degismedi. */
    gap: 7px;
    padding: 6px 5px 6px 9px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--color-sidebar-muted);
}

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

/* HOVER: aksanin cok ince bir yikamasi + solda kisa bir aksan izi.
   Aktif satirla yarismamasi icin izi KISA (satirin yarisi kadar) ve dolgusu
   aktifin yarisindan az; ikisi yan yana geldiginde hangisinin secili oldugu
   tereddutsuz okunuyor. */
.sidebar-grup-ic .sidebar-link:hover {
    background: var(--color-sidebar-hover);
    color: var(--color-sidebar-text-active);
}

.sidebar-grup-ic .sidebar-link:hover .ic {
    opacity: 1;
    color: var(--color-sidebar-accent);
}

.sidebar-grup-ic .sidebar-link:hover::before {
    content: "";
    position: absolute;
    left: -9px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 46%;
    border-radius: 2px;
    background: color-mix(in srgb, var(--color-sidebar-accent) 60%, transparent);
}

/* AKTIF MODUL: ekrandaki tek guclu vurgu - ve artik gercekten YANIYOR.
   Dort sinyal birlikte calisiyor:
     1) soldan saga sonen saydam aksan dolgusu (isik satira soldan giriyor),
     2) sac teli kalinliginda aksan cercevesi - kenari tanimliyor,
     3) DISARI tasan camgobegi isima; "yanma" hissini veren katman bu,
     4) solda tam boy, dolu aksan cubugu.
   Dolgu SAYDAM: dolu camgobegi uzerinde beyaz yazi okunmuyordu. Boylece
   okunurluk laciverdden geliyor, vurgu isiktan. */
.sidebar-grup-ic .sidebar-link.active {
    background: linear-gradient(90deg,
        var(--color-sidebar-bg-active),
        color-mix(in srgb, var(--color-sidebar-accent) 7%, transparent));
    /* YAZI YANMAZ (kullanici karari, 2026-09-08): aktif satirin harfi
       secilmemis satirla AYNI kalir - ayni sonuk renk, ayni 500 kalinlik.
       Beyaz + kalin yazi basligin harfine esitleniyor ve hiyerarsiyi
       bozuyordu; vurgu zaten zemin, cerceve, isima ve cubuktan geliyor. */
    color: var(--color-sidebar-muted);
    font-weight: 500;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--color-sidebar-accent) 32%, transparent),
        0 0 18px -4px color-mix(in srgb, var(--color-sidebar-accent) 60%, transparent);
}

.sidebar-grup-ic .sidebar-link.active .ic {
    opacity: 1;
    color: var(--color-sidebar-accent);
}

/* Aktif satirin cubugu: dolu aksan + kendi kucuk isimasi. Gozun basliktan
   asagi inip nerede oldugunu bulmasini saglayan isaret budur. */
.sidebar-grup-ic .sidebar-link.active::before,
.sidebar-grup-ic .sidebar-link.active:hover::before {
    content: "";
    position: absolute;
    left: -9px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 100%;
    border-radius: 2px;
    background: var(--color-sidebar-accent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--color-sidebar-accent) 70%, transparent);
}

/* Arama sonuclarinda eslesen harfler. */
.sidebar-link mark {
    background: color-mix(in srgb, var(--color-sidebar-accent) 42%, 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;
}

/* Taban kurallar (grup disinda kullanilan satirlar icin). Grubun icindeki
   satirlar bunlari yukarida kendi isimali surumleriyle geciyor. */
.sidebar-link:hover {
    background: var(--color-sidebar-hover);
    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;
}

/* ETIKET SIGMAYINCA İKİ SATIRA SARAR (2026-09-22): tek satırlık kırpma +
   üç nokta önceden HER satırda geçerliydi; "Satış Analizi Cari ve Grup
   Detaylı" (35 karakter) diğer başlıklardan (en uzunu 27 karakter,
   "Kullanıcı Hareket Kayıtları") belirgin şekilde daha uzun ve tek satırda
   kenar çubuğunun sağ kenarına kırpılmadan yapışıyordu (ölçüldü, sağ dolgu
   yoktu). Kısa etiketler tek satıra sığdığı için sarma tetiklenmiyor,
   davranışları değişmiyor — yalnızca bu türden uzun etiketler ikinci satıra
   iner. */
.sidebar-link-label {
    flex: 1;
    /* min-width:0 ŞART: esnek öğenin varsayılan taban genişliği (auto) içeriğin
       TEK SATIRLIK genişliğidir - break-word bunu görmezden gelir, öğe
       satırı sarmadan konteynerin dışına taşıyordu (ölçüldü: "Satış Analizi
       Cari ve Grup Detaylı" kenar çubuğunun sağ kenarına yapışıyordu). */
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.25;
}

/* ALT MENÜ ETİKETİ TEK SATIRDIR (kullanıcı kararı, 2026-09-23: "tek satır
   olarak sığsın, iki satıra yayılmasın"). Yukarıdaki sarma kuralı üst
   başlıklar için duruyor; alt öğede en uzun ad ("Cari ve Grup Detaylı Satış
   Raporu") hafif sıkıştırılmış harf aralığıyla sığar (ölçüldü). Kaydırma
   çubuğu çıkıp yer daralırsa sarmak yerine üç noktayla kesilir, tamamı
   bağlantının title'ında. */
.sidebar-grup-ic .sidebar-link-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -.1px;
}

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

/* ---- DARALTMA TUTAMAGI (kenar) ----
   UC CIZGI KALKTI. Iki sebep:
   1) Hamburger "burada bir menu var" demektir, "bu menuyu daralt" demez.
      Yonu yoktur; basmadan once ne olacagini soylemez. Kullanici her
      seferinde deneyerek ogrenir.
   2) Logonun yaninda duruyordu ve seridin ortalamasini bozuyordu - marka
      seridin ortasina degil, dugmeden arta kalan yere ortalaniyordu (eski
      52 piksellik sag dolgu tam da bunu telafi etmek icin vardi).

   Yerine gecen tutamak kenar cubugunun SAG KENARINDA, iki alanin sinirinin
   uzerinde duruyor. Uc seyi birden soyluyor: neye ait oldugunu (sinira
   gecirilmis), ne yapacagini (ok, panelin GIDECEGI yone bakar) ve su an
   hangi durumda oldugunu (ok yonu). Dinlenirken soluk durur, kenar cubuguna
   yaklasinca belirginlesir - surekli goz cekmez ama arandiginda oradadir.
   Klavyeden Ctrl+B de ayni isi yapar (bkz. site.js). */
.sidebar-tutamak {
    display: none;
}

@media (min-width: 881px) {
    /* TUTAMAK sinirin USTUNDE duruyor - yarisi kenar cubugunda, yarisi ana
       alanda. Kenara "yapistirilmis" degil sinira "gecirilmis" gorunmesi
       onemli: yaptigi is zaten o sinirin yerini degistirmek. */
    .sidebar > .sidebar-tutamak {
        display: grid;
        place-items: center;
        position: absolute;
        top: 50%;
        right: -11px;
        transform: translateY(-50%);
        z-index: 3;
        width: 22px;
        height: 48px;
        padding: 0;
        border-radius: 11px;
        border: 1px solid color-mix(in srgb, #8FD8F5 22%, transparent);
        /* Kendi kucuk degradesi: seridin degradesinden bagimsiz, boylece
           zeminin hangi yuksekliginde durursa dursun ayni okunur. */
        background: linear-gradient(180deg, #143C74, #0A2450);
        color: color-mix(in srgb, #DCEEFA 78%, transparent);
        cursor: pointer;
        opacity: .32;
        box-shadow: 0 4px 12px -4px rgba(2, 10, 34, .7);
        transition: opacity .16s ease, color .16s ease,
                    border-color .16s ease, box-shadow .16s ease;
    }

    /* Kenar cubugunun herhangi bir yerine yaklasmak tutamagi getiriyor:
       aranacak hedef 22 piksellik dugme degil, koca bir serit. */
    .sidebar:hover > .sidebar-tutamak {
        opacity: 1;
    }

    .sidebar > .sidebar-tutamak:hover {
        opacity: 1;
        color: #fff;
        border-color: color-mix(in srgb, var(--color-sidebar-accent) 55%, transparent);
        box-shadow:
            0 0 14px -2px color-mix(in srgb, var(--color-sidebar-accent) 55%, transparent),
            0 4px 12px -4px rgba(2, 10, 34, .7);
    }

    .sidebar > .sidebar-tutamak:active {
        transform: translateY(-50%) scale(.94);
    }

    .sidebar > .sidebar-tutamak:focus-visible {
        opacity: 1;
        outline: 2px solid var(--color-sidebar-accent);
        outline-offset: 2px;
    }

    /* Ok, panelin GIDECEGI yonu gosterir: genisken sola (daralt), darken
       saga (genislet). Tek simge, 180 derece donuyor. */
    .sidebar-tutamak .ic {
        transition: transform .2s cubic-bezier(.4, 0, .2, 1);
    }

    .sidebar-dar .sidebar-tutamak .ic {
        transform: rotate(180deg);
    }

    /* Dokunmatikte hover yok; tutamak hic belirmezdi. */
    @media (hover: none) {
        .sidebar > .sidebar-tutamak {
            opacity: .85;
        }
    }

    /* Marka artik seridin TAMAMINA ortali: sagindaki dugme kalktigi icin
       telafi dolgusuna (eski 52 piksel) gerek kalmadi. */
    .sidebar-brand {
        max-width: 100%;
    }

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

    /* Dar seritte artik tek oge var: amblem. Eski duzende hamburger de bu
       seride sigmak zorunda oldugu icin serit sutuna donuyor ve olculer
       (2+22+3+22+3=52) ona gore kisiliyordu. Tutamak seridin disina ciktigi
       icin o kisitlama bitti - amblem alana rahatca ortalaniyor. */
    .sidebar-dar .sidebar-head {
        padding: 11px 8px 10px;
    }

    /* Isik genis moddaki logoya gore olculuydu; 68 piksellik sutunda amblemin
       cevresine daralir. */
    .sidebar-dar .sidebar-head::before {
        background: radial-gradient(
            56px 56px at 50% 50%,
            color-mix(in srgb, #8FD8F5 9%, transparent),
            transparent 72%
        );
    }

    .sidebar-dar .sidebar-brand { max-width: none; }

    /* Dar modda 4,6:1 logo sigmaz; yalnizca "H" amblemi gosterilir.
       Kaynak olculer: viewBox "157.0951 389.718 272.6249 57.248" (2026-09-08'de
       amblem dosya icinde yazi blogunun ortasina alinip kutu kirpildi, sonra
       amblem 1,5 birim her yone buyutuldu, bkz. .sidebar-logo), amblem 55.443
       kare, sol kenardan 0, ust kenardan 0,902 birim iceride.

       Cozum: kare pencere + gorseli olcekleyip tam o bolgeye kaydirmak.
       Giris ekranindaki gibi burada da NEFES PAYI var (--simge < --amblem):
       amblem kutuya tam tegetken cemberin sagi kirpilip duzlesiyordu. */
    .sidebar-dar .sidebar-brand {
        /* 36/32: marka alani kendi yuksekligini aldigi icin eski 52'lik sutun
           kisiti (2+22+3+22+3) kalkti. Simge 32: halka 3,4 birim kalin; 28'de ~1,8 piksel
           kaliyor ve bir yani keskin tek piksel, obur yani bulanik iki piksel
           ciziliyordu (dengesiz gorunum); 32'de ~2,1 piksel, tam iki piksel
           satirina oturup her yani ayni okunuyor. Daha buyugu 68 piksellik sutunda menu simgelerini
           (16-18px) eziyor. */
        --amblem: 36px;
        --simge: 32px;
        /* Amblemin viewBox'taki kare kenari; asagidaki olcek bunu kullanir. */
        --amblem-kaynak: 55.443;
        /* Amblemin viewBox ust kenarina uzakligi (viewBox genisletmesi). */
        --amblem-ust: 0.902;
        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(272.6249 / var(--amblem-kaynak) * var(--simge));
        height: calc(57.248 / var(--amblem-kaynak) * var(--simge));
        left: calc((var(--amblem) - var(--simge)) / 2);
        /* Ustteki saydam pay kadar yukari kaydirilir ki pencerede amblem dursun. */
        top: calc((var(--amblem) - var(--simge)) / 2 - var(--amblem-ust) / var(--amblem-kaynak) * var(--simge));
        object-fit: fill;
    }

    /* Yukseklik genis moddaki .sidebar-head ile ayni (--marka-yukseklik):
       daraltip genisletince menu ogeleri asagi yukari ziplamasin. Dolgu
       yukaridaki dar-mod kuralindan gelir. */
    .sidebar-dar .sidebar-head {
        height: var(--marka-yukseklik);
    }

    .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,
    /* Daralmis seritte metin sigmaz: bos baslik aciklamasi da gizlenir. */
    .sidebar-dar .sidebar-grup-bos {
        display: none;
    }
}

/* ---------- Ana alan + ust cubuk (topbar) ---------- */
.main-area {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* Kabukla ayni olcu (bkz. .app-shell): alt kenari GORUNEN alanin dibinde
       bitmeli, yoksa alt dolgusuyla ayirdigi yer de ekran disina duser. */
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* Ust bar temelde 48 piksel; genis ekranda sol menunun marka alaniyla AYNI
   boya (--marka-yukseklik, bugun 60px) cekilir - bkz. hemen asagidaki
   medya blogu. */
.topbar {
    /* 52 -> 44 -> 48 (kullanici istekleri, 2026-09-13): once "sekmeler ile
       sitenin en ust cizgisi arasindaki boslugu kucult" diye 44'e indi;
       sonra 44'te profil blogu (38 px) ust ve alttan 3'er pikselle sikisik
       durdu, "kullanici menusu icin birazcik alan ac" dendi, 48 oldu.
       Sekmeler ust cubugun icinde ve dibinde durdugu icin (bkz. .sekme-kabuk)
       ustlerindeki pay cubugun boyundan gelir: 30 piksellik sekmenin ustunde
       17 piksel (52'de 21'di). Profil dugmesi 38 -> 5'er piksel pay, zil 40. */
    height: 48px;
    flex: 0 0 48px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    padding: 0 18px;
    gap: 16px;
}

/* UST CUBUK LOGO BANDIYLA AYNI BOYDA (kullanici istegi, 2026-09-27): iki alt
   cizgi tek hat olarak okunur. Yalnizca kenar cubugu gorunurken; 880
   pikselin altinda menu cekmecedir, ust cubuk 48'de kalir. Sekmeler dipte
   durdugu icin ustlerindeki pay 17 -> 29 piksel olur. */
@media (min-width: 881px) {
    .topbar {
        height: var(--marka-yukseklik);
        flex-basis: var(--marka-yukseklik);
    }
}

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

.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-home-btn {
    width: 34px;
    height: 34px;
    border: 1px solid var(--bd);
    background: var(--surf);
    /* --radius-sm (10px) idi; kullanici istegi (2026-09-08): koseler daha
       keskin. Sekmelerin 7px'lik kosesinden de az, kutu gibi dursun. */
    border-radius: 5px;
    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);
}

/* display:grid, [hidden] ozniteligini yeniyor; Ana Sayfa'da dugme gizli. */
.topbar-home-btn[hidden] {
    display: none;
}

/* ---------- Bildirim simgesi (islevsiz) ----------
   Burada once acilir bir panel vardi: sekmeler, okunmamis rozeti, son 15
   islem listesi. Panelin tamami kaldirildi; geriye yalnizca simge kaldi.

   Simge tiklanabilir GORUNMUYOR - imlec degismiyor, hover'da renk atmiyor,
   klavyeyle odaklanilmiyor. Sebep: calismayan bir denetim, olmayan bir
   denetimden daha kotudur. Kullanici tiklar, bir sey olmaz ve sistemin
   bozuk oldugunu dusunur. Sonuk duran bir simge ise "burada ileride bir sey
   olacak" der ve yaniltmaz.

   Rengi metnin en sonuk tonu (--tx3): ust cubukta gercekten calisan ogeler
   (ana sayfa dugmesi, profil menusu) daha guclu durmali. */
.topbar-notif-ikon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    color: var(--tx3);
    /* .topbar'in 16px gap'i buradan kismen geri alinir; boylece simge profil
       menusunun ayirici cizgisine yaklasir. */
    margin-right: -8px;
}

/* ---------- 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;
    /* Dikey dolgu 5 -> 3: iki satirlik firma adi (asagida) 52px'lik ust
       cubuga sigsin (16 + 26 + 6 = 48). */
    padding: 3px 10px 3px 5px;
    border: none;
    background: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    /* Sabit 220px idi ve firma adini kesiyordu; genislik sinirini
       .topbar-profile-meta koyar. */
    max-width: none;
}

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

/* Ad + firma blogu (2026-09-06): firma unvanlari uzundur ("... SAN. VE TİC.
   LTD. ŞTİ.") ve sabit 140 pikselde hep yarida kesiliyordu. Ilk deneme blogu
   ada gore 420 piksele kadar genisletmekti; kullanici kart "saga dogru cok
   uzuyor" dedi. Simdiki cozum: blok KISA kalir (en cok 240px), firma adi
   altinda IKI SATIRA sarar. Ust cubuk sabit boyda (48px, 2026-09-13'e kadar
   52) oldugu icin sarma yukseklik degistirmez (bkz. .topbar-profile-btn
   dolgusu). Cok dar ekranda tavan
   "ekran - 340px" olur ki hamburger/zil/avatar ile basliga yer kalsin;
   480px altinda blok zaten gizli.

   BLOGUN GENISLIGINI YALNIZCA AD-SOYAD BELIRLER (kullanici karari 2026-09-08):
   firma satiri genislige HIC katilmaz (bkz. .topbar-profile-firma width:0),
   yani ad tam sigar ve altindaki uzun unvan blogu buyutmez. */
.topbar-profile-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.25;
    min-width: 0;
    max-width: min(240px, calc(100vw - 340px));
}

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

/* Ad-soyadin ALTINDAKI firma adi (2026-09-06). Addan belirgin sekilde kucuk ve
   soluk: iki satir birbiriyle yarismasin, goz once ada dussun.

   Firma Tanimlari'ndaki TAM ad, TEK satirda: bloga sigmayan kisim uc noktayla
   kesilir, tamami title'da durur (kullanici karari 2026-09-08). Onceki iki
   satira sarma duzeni geri alindi.

   SATIR BLOGUN GENISLIGINI BELIRLEMEZ (kullanici karari 2026-09-08): olcusunu
   ad-soyad verir, firma adi ne kadar uzun olursa olsun bloga bir piksel
   eklemez ve tasan kismi uc noktayla kesilir. Yol `width: 0` + `min-width:
   100%`: sifir genislik ogenin kapsayici sutunun ic genisligine katkisini
   sifirlar, yuzde alt sinir ise blogun genisligi belli olduktan SONRA cozulup
   satiri o genislige yayar. Onceki %70'lik piksel tavani (168px) kaldirildi;
   satir artik blogu zaten genisletemedigi icin ek tavan yalnizca gereksiz
   kisaltma olurdu. */
.topbar-profile-firma {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--tx3);
    width: 0;
    min-width: 100%;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Kisiye tanimli firma yok (firma baglami, 2026-09-06): ad yerine kisa uyari. */
.topbar-profile-firma--yok {
    color: var(--color-warning);
}

/* ---------- Firma Değiştir: profil menusundeki satir ----------
   2026-09-07: satir artik menunun icinde liste ACMAZ, ekranin ortasinda
   pencere acar (#firmaSecimPerde; kabuk rapor-secim.css .rsecim-*, kutu
   form.css .f-secim). Kullanici karari: "firma sayisi arttikca sag ustte
   garip durur". Eski alt liste kurallari (.topbar-firma-liste/-oge/-tik/-ad)
   bu yuzden kaldirildi. */
.topbar-firma {
    border-top: 1px solid var(--bd);
    border-bottom: 1px solid var(--bd);
    margin: 4px 0;
    padding: 4px 0;
}

/* Etiket ile ok arasindaki bosluk esnek: ok her zaman saga yaslanir. */
.topbar-firma-ac .topbar-firma-etiket {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.3;
}

/* Etkin firmanin tam adi tek satirda; menunun tavanina (400px) sigmayan
   kisim uc noktayla kesilir, tamami title'da (kullanici karari 2026-09-08). */
.topbar-firma-etkin {
    font-size: 11px;
    font-weight: 600;
    color: var(--tx3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Sag ok: satirin bir pencere actigini soyler (menu ici liste degil). */
.topbar-firma-ok {
    color: var(--tx3);
    flex-shrink: 0;
}

/* Firma secim penceresi: profil menusunun (60) ve kabuk parcalarinin ustunde,
   secim kutusunun paneli (form.css .sk-panel, 230) yine bunun ustunde kalir.
   Pencere ust belgede acildigi icin cerceve icindeki ekranlar da orter. */
#firmaSecimPerde { z-index: 100; }

.firma-secim-kutu .rsecim-form { margin-top: 12px; }

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

.topbar-profile-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    /* Sabit 248px idi; uzun firma adlari yine kesiliyordu. Menu artik EN UZUN
       ICERIGE gore genisler (max-content), 248 pikselden dar olmaz, tavani
       400px ya da ekran genisligi (kenar boslugu 12+12). Tavana dayanan ad
       kesilmez, sarar (bkz. .topbar-firma-ad). Menu right:0 ile sagdan
       hizali oldugu icin genisleme SOLA dogru olur, ekran disina tasmaz. */
    width: max-content;
    min-width: 248px;
    max-width: min(400px, calc(100vw - 24px));
    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;
    /* Ust dolgu 22 -> 12 (kullanici istegi, 2026-09-13): panel sekmelerin
       hemen altinda basladigi icin komut cubugu ve izgara yukari cekilsin,
       panelin tepesinde bos bir bant kalmasin. */
    padding: 12px 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.
   2026-09-14'te 12'ye indi (kullanici istegi: "tablonun alt siniri ekranin
   altina yaklassin"); ust dolguyla (12) ayni, ayak dibe 12 px kala biter.

   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: 12px;
    }
}

/* ---------- 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) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        transform: translateX(-100%);
        transition: transform .18s ease;
    }

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

    /* Cekmecede logo genis modla ayni (42px, ~199px). Olcu, marka seridinde
       kapat carpisi dururken onunla cakismamak icin secilmisti; carpi
       kaldirilinca (2026-09-10) serit tamamen logoya kaldi ama olcu
       degistirilmedi - genis mod yeniden buyurse cekmecenin kendi ust siniri
       olsun diye duruyor. */
    .sidebar-logo {
        height: 42px;
    }

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

    /* Ekranin dibine yapisik sayfa seridi: solda menu dugmesi, ortada baslik. */
    .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);
    }

    /* MENU DUGMESI (kullanici istegi, 2026-09-12): dar ekranda cekmeceyi acan
       tek denetim, seridin SOLUNDA (cekmece soldan acilir). Once cekmecenin
       kenarina gecirili 18 piksellik bir ok vardi; telefonda parmakla bulmasi
       zordu. Seritteki Geri dugmesi ayni gun kaldirildi: telefonun kendi geri
       hareketi var.

       Serit z-index 30, perde 40: cekmece ACIKKEN dugme kararmanin ALTINDA
       kalir ve isaretciyle ikinci kez basilamaz - kapatma perdeye dokunarak
       ya da menuden bir ekran secilerek olur. Klavyeyle (Tab + Enter) yine
       ulasilir, bu yuzden "Menüyü kapat" etiketi ve aria-expanded gercek bir
       yolu anlatir (bkz. site.js). */
    .mobile-pagebar-menu {
        /* 40 px dugme, 24 px simge (kullanici istegi, 2026-09-12: once
           buyutuldu, sonra "biraz kucult"). 24, simgenin viewBox'iyla birebir:
           cizgiler piksele oturur (bkz. _Layout i-menu notu). Denge boslugu da
           ayni genislikte olmali. */
        width: 40px;
        height: 40px;
        /* Seridin ic boyu 49 px (50 - 1 px ust cizgi); ortalanan 40 px'lik
           dugme 4,5 px'e, icindeki simge yarim piksele dusuyor ve uc cizgi
           birden bulaniyordu. Ustten 4 px sabit pay: dugme 799, simge 807
           gibi tam sayilara oturur (olculdu). 1 px'lik alt/ust farki gorunmez. */
        align-self: flex-start;
        margin-top: 4px;
        flex-shrink: 0;
        display: grid;
        place-items: center;
        border: none;
        background: none;
        border-radius: var(--radius-sm);
        color: var(--ac);
        cursor: pointer;
    }

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

    /* Menu dugmesi solda; baslik BARIN ortasinda kalsin diye sagda dugmeyle
       ayni genislikte gorunmez bir denge boslugu durur. */
    .mobile-pagebar-denge {
        width: 40px;
        flex-shrink: 0;
    }

    .mobile-pagebar-title {
        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 çubuğa ayrılan yer .page-content'in DOLGUSUNDA değil,
       .main-area'nın dolgusunda duruyor.

       Fark önemli: dolgu page-content'te olduğunda kaydırılan öğe ekranın
       dibine kadar iniyor ve KAYDIRMA ÇUBUĞU alt çubuğun arkasına giriyordu.
       Kabuk kısalınca kaydırma alanı da alt çubuğun üstünde bitiyor. Ayrıca
       yapışkan alt şeritler (bkz. cari.css .cari-ayak) artık "bottom: 0" ile
       tam çubuğun üstüne oturuyor, arada 16 piksel boşluk kalmıyor. */
    .main-area {
        padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px));
    }

    /* KAYAN PANEL ALT SAYFA ŞERİDİNİ DE ÖRTER (kullanıcı isteği, 2026-09-10).
       Satır künyesi telefonda alttan açılan bir sayfadır; satır içi ekranda
       (kabuğun KENDİ belgesi) ekranın dibine kadar iner ve şeridi kapatır.
       Çerçevedeki ekranda ise panel iframe'in içindedir ve kutusunun dışına
       BOYAYAMAZ: şerit panelin altında aydınlık kalıyor, sayfa adı ve geri
       düğmesi panelin üstündeymiş gibi duruyordu. Panel açıkken şerit gizlenir
       ve ona ayrılan yer bırakılır - çerçeve dibe iner, panel de öyle.
       Sınıfı çerçeve bildirir (site.js DCKaydirmaKilidi -> DCKabuk.panelKipi). */
    .app-shell.kabuk-panelli .mobile-pagebar {
        display: none;
    }

    .app-shell.kabuk-panelli .main-area {
        padding-bottom: 0;
    }

    .page-content {
        padding-bottom: 16px;
    }
}

/* MASAÜSTÜNDE ÜST ÇUBUĞU ÖRTME DENENDİ VE GERİ ALINDI (kullanıcı bildirimi,
   2026-09-22: "popup açıldığında sekmeler kayboluyor" — önceki kural
   `.app-shell.kabuk-panelli .topbar { display:none }`, 681px'ten itibaren,
   çerçevedeki ekranda panelin gerçek ekran tepesine ulaşması İÇİN üst çubuğu
   TAMAMEN gizliyordu). Bedeli beklenenden büyüktü: sekme şeridi (açık
   ekranlar arası geçiş) de `header.topbar` İÇİNDE olduğu için panel açıkken
   kullanıcı hangi sekmelerin açık olduğunu göremiyor, aralarında
   geçemiyordu — dar ekrandaki `.mobile-pagebar`dan farklı olarak (orada tek
   ekran zaten görünürdü, kaybı düşüktü), masaüstünde bu geçiş kabuğun temel
   işlevlerinden. Çerçeve kendi kutusunun dışına boyayamadığı için panelin
   çerçevede üst çubuğu ÖRTMESİ ile sekme şeridinin GÖRÜNÜR/TIKLANABİLİR
   kalması birbirini dışlıyor (aynı pikselde ikisi birden olamaz) — bu yüzden
   çözülmedi, üst çubuk her zaman görünür kalacak şekilde bırakıldı: satır içi
   ekranda panel yine tam ekranı kaplar (z-index üst çubuğu örter).
   ÇELİŞKİ 2026-09-23'TE ÇÖZÜLDÜ: çerçevede üst çubuk gizlenmiyor, etkin
   iframe pencereyi kaplayacak kadar büyüyor ve eski kutusunun ölçülerini
   saydam dolgu olarak alıyor (bkz. "Panel açıkken çerçeve tüm pencereye
   taşar" ve sayfa-sekmeleri.js panelKipiniTazele). Sekmeler görünür kalır,
   Cari'deki gibi perdeyle kararır. */

/* ---------- Dibe yapışan toplam şeridi (Cari + ortak tablo motoru) ----------
   Eşik 900: tablonun kart listesine döndüğü ve şeridin ekranın altına
   yapıştığı genişlik (bkz. tablo.css / cari.css "DAR EKRAN"). Bir süre bu
   kural 880'lik blokta duruyordu ve 881-900 arasında şerit yine havada
   kalıyordu.

   İki ayrı iş yapılıyor:
   · Kaydırma kabuğunun ALT DOLGUSU sıfırlanır - yapışkan konumlandırma dolgu
     kutusuna göre çalıştığı için 16 piksellik dolgu, "bottom: 0" yazan şeridi
     alt çubuktan 16 piksel yukarıda bırakıyordu.
   · Kabuk SÜTUN olur - "position: sticky" bir öğeyi ancak KAYDIRMA varken
     tutar. Liste kısaysa (3 kayıtlık Kdv, ya da henüz Listele'ye basılmamış
     bekleme kartı) kaydırma yok ve şerit listenin bittiği yerde, ekranın
     ortasında havada kalıyordu. Sütun düzeninde ızgara artan yeri yiyor,
     şerit dibe iniyor; liste uzayınca yapışkanlık devralıyor. */
@media (max-width: 900px) {
    .page-content:has(> .cari-ekran),
    .page-content:has(> .tb-ekran) {
        display: flex;
        flex-direction: column;
        /* ÜST dolgu da komut çubuğuna devredilir (bkz. tablo.css / cari.css
           "YAPIŞKAN KOMUT ÇUBUĞU"): "top: 0" yapışkan çubuğu kabuğun DOLGU
           kenarına oturtuyor, dolgu kabukta kalsaydı çubuğun üstünde bir
           yarık kalır ve kartlar oradan görünerek geçerdi. */
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Ekran kabı kısa içerikte GERİLİR, uzun içerikte kendi boyunda kalır. */
    .page-content > .cari-ekran,
    .page-content > .tb-ekran {
        flex: 1 0 auto;
    }
}

@media (max-width: 640px) {
    .page-shell,
    .frame-content,
    .page-content {
        /* Alt çubuğun yeri artık .main-area'da (bkz. 880px bloğu); burada
           yalnızca sayfanın kendi kenar boşluğu var. */
        padding: 16px;
    }
}

/* ---------- Kimlik dogrulama (giris) kabugu ----------
   Giris ekrani TAM SAYFA: iki bolme yan yana, kenar boslugu yok. Kabuk artik
   ortalayan bir kutu degil, yalnizca zemin ve tam yukseklik veriyor. */
.auth-shell {
    min-height: 100vh;
    display: flex;
    background: var(--color-sidebar-bg);
}

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

@media (max-width: 880px) {
}

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

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

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

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

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

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

/* Zemin ve metin ACIKCA yazilir: Bootstrap odaktaki form kutusuna
   background-color:#fff / color:#212529 veriyor ve koyu temada kutu beyaza
   donuyordu (2026-09-05). Token'lar temayla birlikte degisir. */
.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);
    background-color: var(--surf);
    color: var(--tx);
}

/* ---- Mikro secim kutulari (kullanici formu) ----
   Native select form diline oturtulur: tarayicinin sistem oku kaldirilir, yerine
   token renkli iki CSS ucgeninden bir "v" cizilir - resim olmadigi icin tema
   degisince renk kendiliginden uyar ve dis kaynak kurali da ihlal edilmez.
   Yazi tipine dokunulmaz; kutu diger form alanlariyla ayni dili konusur,
   yalnizca "buradan secilir" hissi eklenir. */
.f-secim {
    appearance: none;
    -webkit-appearance: none;
    /* Sag dolgu ok icin ayrilir; uzun "KOD — Ad" metni okun altina girmesin. */
    padding-right: 32px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--tx3) 50%),
        linear-gradient(135deg, var(--tx3) 50%, transparent 50%);
    background-position:
        calc(100% - 17px) calc(50% - 1px),
        calc(100% - 12px) calc(50% - 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* Fareyle uzerine gelince kenar aksana dogru isinir: alan tiklanabilir bir
   secimdir, duz metin kutusu degil. */
.f-secim:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--ac) 45%, var(--bd));
}

/* Acikken/odaktayken ok da aksan rengine doner - halka ile ayni dili konusur. */
.f-secim:focus {
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ac) 50%),
        linear-gradient(135deg, var(--ac) 50%, transparent 50%);
}

/* Bos secim ("— Eşleşme yok —") soluk durur: goz gezdirirken dolu/bos kutular
   tek bakista ayrilsin. :has desteklemeyen tarayicida yalnizca bu incelik
   kaybolur, kutu normal renkte calisir. */
.f-secim:has(option:checked[value=""]) {
    color: var(--tx3);
}

/* Acilan listede secenekler her temada okunur kalsin: koyu temada tarayicinin
   varsayilan beyaz listesi metni yutabiliyor. */
.f-secim option {
    color: var(--tx);
    background: var(--surf);
}

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

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

/* ---------- 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-warning {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

/* ---------- Acilir liste secenek satiri (.ss-item) ----------
   Kalan tek parca: secenekleri cari.js / tablo.js ciziyor. */

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

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

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

}

@media (min-width: 561px) {

}

/* ---------- "Sırala" menusu (arama kutusunun yaninda) ---------- */

/* Sirala/Filtrele dugmeleri: ust satirda ikonlar ayni dilde durur. */
.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-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;
}

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

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

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

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

@media (max-width: 640px) {
}

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

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

/* 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; paneli cari.js /
   tablo.js uretir. Eski .filter-card / .sort-menu kurallari 2026-09-06'da
   silindi. */
.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%);
    /* KAPALI PANEL GÖRÜNMEZDİR (kullanıcı bildirimi, 2026-09-23: "sayfa
       geçişlerinde sağ altta bir sayfayı aşağıdan sağa doğru atar gibi bir
       görsel çıkıyor"). Kapalı panel telefonda ekranın ALTINDA
       (translateY(100%)), genişte SAĞINDA (translateX(100%)) bekler. Belgenin
       genişliği 680 px sınırını geçince — çerçeve yeniden boyutlanınca,
       panel taşması açılıp kapanınca, pencere daralıp genişleyince — iki konum
       arasındaki geçiş animasyonu oynuyor ve kapalı panel ~250 ms ekranın
       içinden alttan sağa kayıyordu (ölçüldü). Kapanışta görünürlük animasyon
       BİTİNCE kalkar (gecikmeli), açılışta hemen gelir. Yan kazanç: kapalı
       paneldeki düğmelere Tab ile odak gitmez. */
    visibility: hidden;
    transition: transform .22s ease, visibility 0s linear .22s;
}

.slide-panel.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .22s ease, visibility 0s;
}

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

.slide-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    /* Kenar cubugunun ACIK ucuyla ayni mavi (kullanici istegi, 2026-09-04):
       koyu lacivert baslik cekmecede fazla agir duruyordu. Genis ekranda
       asagidaki kural bunun ustune kenar cubugunun renk gecisini ve devre
       desenini serer. */
    background: var(--sidebar-ust);
    color: #fff;
    flex-shrink: 0;
}

/* BUTUN SAGDAN ACILAN PANELLERIN BASLIGI AYNI ZEMIN (kullanici karari,
   2026-09-17): satir detay panelinin basligi (cari.css .cari-detay-bas,
   2026-09-15) kenar cubugunun renk gecisi + devre desenini tasiyordu, Filtre /
   Sirala cekmeceleri duz maviydi; ikisi yan yana iki ayri aileden gorunuyordu.
   Kural buraya alindi, Cari ve ortak motor artik kendi kopyasini tasimaz.
   Olculer o gunku karardan: desen tam cizimden (img/devre-tam.svg,
   1920x1080) dogal boyunda, pencere x 24 / y 336; renk gecisi cubugun kendi
   boyunda (100dvh) cizilir, basliga cubugun alt ceyreginin tonu duser.
   Yalnizca >=681px: telefonda panel alttan acilan sayfadir, basligi saydam
   ve yazisi koyudur (asagida), mavi zemin orada okunmazdi. */
@media (min-width: 681px) {
    .slide-panel-header {
        position: relative;
        isolation: isolate;
        background-color: var(--sidebar-dip);
        background-image:
            radial-gradient(620px 720px at 50% 96%, var(--sidebar-isik), transparent 74%),
            linear-gradient(172deg,
                var(--sidebar-dip) 0%,
                var(--sidebar-orta) 26%,
                var(--sidebar-ust) 68%,
                color-mix(in srgb, var(--sidebar-isik) 45%, var(--sidebar-ust)) 100%);
        background-size: 100% 100dvh;
        background-position: 0 calc(35px - 76.5dvh);
        background-repeat: no-repeat;
    }

    .slide-panel-header::before {
        content: "";
        position: absolute;
        inset: 0;
        background: url("../img/devre-tam.svg") -24px -346px / 1920px 1080px no-repeat;
        opacity: .55;
        pointer-events: none;
        z-index: 0;
    }

    .slide-panel-header > * {
        position: relative;
        z-index: 1;
    }
}

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

/* KAPATMA DÜĞMESİ = SAĞA BAKAN OK (kullanıcı kararı, 2026-09-16): çekmece
   geldiği yöne, sağa kayar; ok bunu söyler. Önce çarpı vardı, sonra kısa
   yatay çizgi denendi (aynı gün); elenen ötekiler: hayalet daire, ince çarpı,
   "Kapat" metni, çarpısız. İşaretlemeye dokunulmadı: düğmelerin içindeki
   çarpı SVG'si gizlenir, ok ::before ile çizilir - Cari, Filtre/Sırala
   çekmeceleri ve satır paneli tek kuraldan değişir. Alt şeritteki Geri oku
   da aynı yöne bakar (aşağıda .slide-panel-back). Tıklanabilir alan 30 px,
   erişilebilirlik adı düğmelerin aria-label'ında ("Kapat") durur.
   TELEFONDA (≤680px, alttan açılan sayfa) BAŞLIKTA DÜĞME YOK: sayfa aşağı
   kayarak kapanır, ok yön yalan söylerdi; kapatma tutamak, perde ve alt
   şeritteki ok ile. */
.slide-panel-close {
    position: relative;
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    border-radius: 6px;
    color: #fff;
    opacity: .85;
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 0;
}

.slide-panel-close > svg {
    display: none;
}

/* Ok, alt seritteki Geri okuna yakin boyda (kullanici istegi, 2026-09-17:
   once "fazla buyuk", sonra "cok az buyut"): 8 px kenar, 1,8 px cizgi.
   Cok satirli basliklarda (satir paneli: kod + ad) dikeyde ORTALI durur;
   baslik kabi ustten hizaliyor, dugme kendini ortalar. */
.slide-panel-close::before {
    content: "";
    width: 8px;
    height: 8px;
    margin-left: -3px;
    border-top: 1.8px solid currentColor;
    border-right: 1.8px solid currentColor;
    transform: rotate(45deg);
}

.slide-panel-header .slide-panel-close {
    align-self: center;
}

.slide-panel-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, .14);
}

.slide-panel-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
}

@media (max-width: 680px) {
    /* Iki sinifla: satir panelinin dugmesi .tb-detay-eylem ile "display: grid"
       aliyor (tablo.css, sonra yuklenir) ve tek sinifli kurali eziyordu. */
    .slide-panel .slide-panel-close {
        display: none;
    }
}

.slide-panel-body {
    padding: 14px 16px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    /* Panel dibine gelince kaydırma arkadaki sayfaya zincirlenmesin. */
    overscroll-behavior: contain;
}

/* Kayan panel açıkken kaydırma kilidi (bkz. site.js DCKaydirmaKilidi): dar
   ekranda asıl kaydırılan öğe .page-content; body'yi kilitlemek yetmiyordu.
   Yalnızca dar ekranda: masaüstünde kaydırma çubuğu kalkınca içerik kayardı. */
@media (max-width: 900px) {
    html.dc-kilit .page-content {
        overflow: hidden !important;
    }
}

.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"). */
/* Cercevesiz, yalnizca ikon (kullanici karari, 2026-09-10): panel ayagindaki
   islem ikonlariyla ayni dil. */
.slide-panel-back {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--tx2);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

/* Geri oku da SAĞA bakar (kullanıcı kararı, 2026-09-16): panel sağa kayarak
   kapanır, başlıktaki okla aynı dil. Simge i-back (sola ok) yerinde durur,
   yalnızca yansıtılır. */
.slide-panel-back > svg {
    transform: scaleX(-1);
}

.slide-panel-back:hover {
    color: var(--ac);
    background: color-mix(in srgb, currentColor 10%, transparent);
}

/* 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;
        /* iOS'ta vh alt araç çubuğunu saymaz, panelin dibi çubuğun altında
           kalıyordu; dvh görünen alana göre ölçer (bilmeyen tarayıcı atlar). */
        max-height: 86dvh;
        /* Kaydırma kabı panelden taşarsa (eski WebKit, bkz. site.js olcekle)
           çerçevenin altına sarkmasın; yüzen seçim listesi body'de durur,
           kırpılmaz. */
        overflow: hidden;
        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));
    }
}

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

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

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

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

/* ============================================================================
   ACIK EKRAN SEKMELERI
   Ust cubugun altinda, kullanicinin actigi ekranlarin seridi (bkz.
   wwwroot/js/sayfa-sekmeleri.js). Serit bos basilir, iceriğini JS cizer.
   ============================================================================ */
/* Zemin --alt DEGIL, ondan bir tik daha "yuzeyden uzak" bir ton (2026-09-06,
   kullanici: serit sonuk kaliyor). --tx ile karisim iki temada da DOGRU YONE
   gider: aydinlik temada --alt koyulasir (etkin sekmenin beyazi one cikar),
   koyu temada --alt acilir (etkin sekme --surf zaten daha koyudur). Sabit hex
   yazilsaydi bir temada ters duserdi.
   2026-09-07: seridin sayfa zeminiyle ayni renge boyanmasi ve alt cizginin
   kaldirilmasi denendi, ikisi de ayni gun kullanici karariyla geri alindi -
   zemin bu karisimda, cizgi yerinde.
   2026-09-08: ekran cercevesiyle gelen gri calisma zemini (--zemin-calisma)
   2026-09-13'te cerceveyle birlikte kaldirildi (kullanici karari); serit ust
   cubugun icinde, ust cubuk beyaz ve kalici alt cizgisiyle ayrilir. */

.sekme-serit {
    /* Sekme eni tek yerden (bkz. .sekme). */
    --sekme-en: 210px;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    /* Dolgu YOK: serit tam sekme sayisina olceklenirken (sayfa-sekmeleri.js
       seridiOlcekle) kaydirma sonu sekme sinirina denk gelmeli; bir dolgu
       sona o kadar kayma eklerdi. Zemin ve cizgi de seridin degil, icinde
       durdugu ust cubugun (bkz. .sekme-kabuk). */
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

/* Kaydirma cubugu 34 piksellik seritte kendisi kadar yer kapliyordu; serit
   tekerlekle de kaydiriliyor (bkz. sayfa-sekmeleri.js wheel). */
.sekme-serit::-webkit-scrollbar {
    display: none;
}

.sekme-serit:empty {
    display: none;
}

/* ---- kabuk ve kaydirma oklari ----
   Serit bir kabugun icindedir (sayfa-sekmeleri.js kurar). Kabuk yatay bir
   satirdir: solda kayan serit, sagda ok YUVASI. Yuva seridin uzerine
   binmez, yanina oturur - sekmeler hicbir zaman oklarin arkasina girmez.
   Yuva BEYAZ (icerik alaninin cikintisi gibi, kullanici istegi 2026-09-04):
   ustu yuvarlak, alt cizgisi yok, kabugun cizgisinin 1 piksel altina
   sarkarak altindaki beyaz alanla birlesir. Oklar ici dolu ucgen.

   KABUK UST CUBUGUN ICINDE DURUR (kullanici karari, 2026-09-13; bkz.
   _Layout.cshtml'deki aciklama): ust cubugun esnek satirinda Ana Sayfa
   dugmesi ile zil arasindaki yeri doldurur, tam boy uzanir ve sekmeleri
   DIBINE dizer - etkin sekme ust cubugun alt cizgisine oturur. Kendi zemini
   ve cizgisi YOK; ikisi de ust cubugun (bkz. asagida .topbar:has kurali).
   Onceki duzen (ust cubugun altinda ayri 35 piksellik satir) git
   gecmisindedir. */
.sekme-kabuk {
    display: flex;
    align-items: flex-end;
    align-self: stretch;
    /* Taban SIFIR, auto degil: kabuk yalnizca komsularindan (Ana Sayfa
       dugmesi, sekmesiz ekranda baslik, zil, profil) ARTAN yeri alir. Taban
       auto olunca sekmelerin toplam eni taban sayiliyor, esnek satir once
       basligi eziyordu ("Ana Sa...") ve serit olcekleme sonrasi sabit ene
       gecince (sayfa-sekmeleri.js seridiOlcekle, flex-shrink 0) ok yuvasi
       zilin ustune tasiyordu. */
    flex: 1 1 0;
    min-width: 0;
}

.sekme-kabuk[hidden] {
    display: none;
}

/* Ana Sayfa dugmesi (ya da sekmesiz ekranda baslik) ile ilk sekme arasinda
   ust cubugun diger ayiricilariyla ayni 22 piksellik dikey cizgi
   (bkz. .topbar-info::before). Ortalanir; sekmeler dipte kalir. */
.sekme-kabuk::before {
    content: "";
    flex: none;
    align-self: center;
    width: 1px;
    height: 22px;
    margin-right: 7px;
    background: var(--bd);
}

.sekme-oklar {
    display: none;
    flex: none;
    align-self: flex-end;
    height: 27px;
    /* Yuva sagda: serit tam sekme sayisina olceklenip daraldiginda kalan bir
       kac piksel serit ile yuva arasina duser, yuva zilin yanindan ayrilmaz. */
    margin: 0 0 0 auto;
    position: relative;
    bottom: -1px;
    background: var(--surf);
    border: 1px solid var(--bd);
    border-bottom: none;
    border-radius: 9px 9px 0 0;
    overflow: hidden;
    z-index: 2;
}

.sekme-kabuk--tasiyor .sekme-oklar {
    display: flex;
}

/* Son tam sekme ile yuva arasinda en az 6 piksel: olcekleme kalan yeri
   sifira kadar indirebiliyor, yuva sekmeye yapismasin. Olcum yuva acildiktan
   sonra yapildigi icin (sayfa-sekmeleri.js oklariGuncelle) bu pay hesaba
   girer. */
.sekme-kabuk--tasiyor .sekme-serit {
    margin-right: 6px;
}

.sekme-ok {
    display: grid;
    place-items: center;
    width: 28px;
    height: 100%;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--tx2);
    cursor: pointer;
}

/* Ici dolu ucgen: kenarlik hilesiyle cizilir, resim yok. */
.sekme-ok::before {
    content: "";
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.sekme-ok--sol::before {
    border-right: 9px solid currentColor;
}

.sekme-ok--sag::before {
    border-left: 9px solid currentColor;
}

.sekme-ok:hover:not(:disabled) {
    color: var(--ac);
}

/* Gidilecek yer kalmayan yon soluk ve tiklanmaz; iki ok yan yana durdugu
   icin biri kaybolursa duzen zipliyordu. */
.sekme-ok:disabled {
    color: var(--tx3);
    opacity: .45;
    cursor: default;
}

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

/* Pasif sekme ARTIK SAYDAM DEGIL: eskiden yalnizca imlec ustundeyken zemin
   aliyordu, bu yuzden serit "yan yana dizilmis yazilar" gibi duruyordu.
   2026-09-07 (kullanici istegi "sekmelerin rengi beyaz olsun"): yari saydam
   govde gitti; ayni gun ikinci karar: sekme govdesi, seridin alt cizgisinin
   ALTINDAKI icerik alaniyla AYNI zeminde (--color-page-bg) - sekme ile
   icerik tek parca okunsun. Etkin sekme zeminle degil, ALTINDAKI mavi
   cubukla ayrilir.
   position: relative etkin sekmenin vurgu cubugu icin. */
.sekme {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    /* SABIT GENISLIK (kullanici karari, 2026-09-08): her sekme ayni ende,
       uzun ad ucu noktali kesilir. Boylece serit kaydirildiginda en soldaki
       sekme her zaman sol kenara tam hizali gelir - kaydirma adimi bu enin
       (+ serit araligi) tam kati (bkz. sayfa-sekmeleri.js sekmeAdimi). */
    flex: 0 0 var(--sekme-en);
    width: var(--sekme-en);
    height: 30px;
    margin-top: 4px;
    padding: 0 8px 0 10px;
    background: var(--color-page-bg);
    border: 1px solid color-mix(in srgb, var(--bd) 70%, transparent);
    border-bottom: none;
    border-radius: 7px 7px 0 0;
    color: var(--tx2);
    font-size: 12.5px;
    /* Kalinlik etkin/pasif DEGISMEZ: degisseydi sekme her tiklamada bir kac
       piksel genisleyip serit oynardi. Ayrim renk ve vurgu cubugundan gelir. */
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}

/* Imlec ustundeyken govde hafif mavi bir ton alir ki vurgu okunsun. */
.sekme:hover {
    background: color-mix(in srgb, var(--ac) 6%, var(--color-page-bg));
    border-color: var(--bd);
    color: var(--tx);
    text-decoration: none;
}

/* Etkin sekme seridin alt cizgisinin uzerine 1 piksel sarkar: cizgi sekmenin
   altindan gecmez, mavi cubuk onun yerini alir. Golge sekmeyi seritten bir
   parca KALDIRIR - klasor sekmesi izlenimini veren sey bu. */
.sekme.etkin {
    background: var(--color-page-bg);
    border-color: var(--bd);
    color: var(--tx);
    margin-bottom: -1px;
    padding-bottom: 1px;
    box-shadow: 0 -2px 4px color-mix(in srgb, var(--tx) 7%, transparent);
}

/* Vurgu cubugu: "burasi sekme seridi" mesajini tek basina veren oge.
   2026-09-07 (kullanici istegi): cubuk sekmenin USTUNDEN ALTINA indi. Etkin
   sekme seridin alt cizgisinin uzerine 1 piksel sarktigi icin (margin-bottom
   -1px) kutusunun tabani cizgiyle ayni satirda biter; bottom: 0 ile cubuk o
   cizgiyi de orter, iceriğe tasmaz. left/right -1px kenarligin uzerine
   oturmasi icindir, yoksa cubugun iki yaninda gri bir tel kalir. Koseler DUZ:
   sekmenin tabani yuvarlak degil. */
.sekme.etkin::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: -1px;
    right: -1px;
    height: 3px;
    background: var(--ac);
    pointer-events: none;
}

.sekme-ikon {
    display: grid;
    place-items: center;
    flex: none;
    /* --tx3 idi: cip zemini gelince ikon zeminin icinde kayboluyordu. */
    color: var(--tx2);
}

.sekme.etkin .sekme-ikon {
    color: var(--ac);
}

.sekme-ad {
    /* Ad kalan yeri doldurur: kapatma carpisi her sekmede ayni yerde durur. */
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sekme-kapat {
    display: grid;
    place-items: center;
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    color: var(--tx3);
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s ease, background .12s ease;
}

/* Kapatma carpisi yalnizca imlec sekmenin uzerindeyken ya da sekme etkinken
   gorunur: on sekmelik bir seritte on carpi, adlari okumayi zorlastiriyordu.
   Klavye ile gezildiginde de gorunur olmali. */
.sekme:hover .sekme-kapat,
.sekme.etkin .sekme-kapat,
.sekme-kapat:focus-visible {
    opacity: 1;
}

.sekme-kapat:hover {
    background: color-mix(in srgb, currentColor 16%, transparent);
    color: var(--tx);
}

/* Dar ekranda serit YOK: telefonda alttaki sayfa serisi (.mobile-pagebar) zaten
   nerede olundugunu soyluyor ve iki serit birden ekranin ucte birini yerdi. */
@media (max-width: 900px) {
    .sekme-kabuk,
    .sekme-serit {
        display: none;
    }

    /* Seritsiz ust cubukta Ana Sayfa'dayken dugme gizli, baslik yazar
       (masaustunde dugme yanik sekme olarak durur; bkz. _Layout). */
    .topbar-home-btn.etkin {
        display: none;
    }
}

/* ============================================================================
   VERI YUKLEME GOSTERGESI
   Varsayilan KAPALI; yalnizca gercekten beklenen bir yukleme varsa acilir
   (bkz. wwwroot/js/yukleme.js - kisa suren yuklemelerde hic gorunmez).
   ============================================================================ */
.yukleme-perde {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: grid;
    place-items: center;
    /* Daire ve yazi doğrudan bu kararmanın üzerinde durur; arkalarında kutu
       yok. Bu yüzden kararma biraz daha koyu: beyaz simge ve yazının AÇIK
       zeminli bir sayfanın üstünde de okunması gerekiyor. Yine de dolu bir perde
       değil - arkadaki ekran seçilmeye devam ediyor, yoksa yükleme bir hatadan
       ayırt edilemezdi. */
    background: rgba(15, 23, 42, .45);
    backdrop-filter: blur(1.5px);
    /* Kapali durum VARSAYILAN: gosterge yalnizca "acik" sinifiyla gelir. Tersi
       olsaydi (HTML'de acik, JS ile kapali) betik calismadan once her sayfa bir
       an icin kararmis gorunurdu. */
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
}

.yukleme-perde.acik {
    opacity: 1;
    visibility: visible;
}

.yukleme-pano {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

/* Donen daire: cemberin yalnizca bir yayi dolu, gerisi soluk. Renk aksan degil
   BEYAZ: kararmanin uzerinde duruyor ve aksan mavisi koyu zeminde soluyor. */
.yukleme-daire {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, .28);
    border-top-color: #fff;
    animation: yukleme-don .8s linear infinite;
}

@keyframes yukleme-don {
    to { transform: rotate(360deg); }
}

.yukleme-yazi {
    font-size: 14.5px;
    font-weight: 600;
    color: #fff;
    letter-spacing: .01em;
    /* Kararma her zaman yeterli kontrasti vermeyebilir (cok acik bir tablo,
       beyaz bir bosluk); ince bir golge yaziyi her zeminde ayakta tutuyor. */
    text-shadow: 0 1px 3px rgba(15, 23, 42, .45);
}

/* Hareket azaltma isteyen kullanicida daire DONMEZ, nefes alir: gosterge
   kaybolmamali ama surekli donen bir sekil rahatsiz edici olabiliyor. */
@media (prefers-reduced-motion: reduce) {
    .yukleme-daire {
        animation: yukleme-nefes 1.4s ease-in-out infinite;
        border-color: rgba(255, 255, 255, .75);
    }

    @keyframes yukleme-nefes {
        0%, 100% { opacity: .35; }
        50% { opacity: 1; }
    }
}

/* Dar ekranda daire biraz kucuk. */
@media (max-width: 560px) {
    .yukleme-pano {
        gap: 16px;
    }

    .yukleme-daire {
        width: 44px;
        height: 44px;
        border-width: 3px;
    }
}

/* ============================================================================
   ANA SAYFA: CARI BORC BLOKLARI
   Solda "Borç Bakiyesi En Yüksek 10 Cari" (yatay çubuk grafiği + eksen + özet
   paneli), sağda "Temsilci Bakiye Dağılımı". İkisinin verisi tek istekte gelir
   (bkz. Home/Index.cshtml ve CariController.EnCokBorclu).
   ============================================================================ */
.borclu-satir {
    display: grid;
    /* Çubuk grafiği okumak yer ister; dağılım listesi dar kalabilir. */
    grid-template-columns: 1.75fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
    align-items: stretch;
}

.borclu-blok,
.borclu-temsilci-blok {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 20px 22px;
}

.borclu-bas {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}

/* Grafik solda, özet sağda - kart içinde kabaca 3:1. */
.borclu-icerik {
    display: grid;
    /* Ozet kartinin genisligini SAYI belirliyor, etiket degil: gercek veride
       toplamlar milyari asiyor ("1.168.857.198 TL") ve 208 pikselde iki satira
       bolunuyordu. 236, on dort haneli bir tutari tek satirda tasiyan olculmus
       genislik. */
    grid-template-columns: minmax(0, 1fr) 236px;
    gap: 18px;
    flex: 1;
    min-height: 0;
}

.borclu-satirlar {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.borclu-grafik {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
    gap: 2px;
    /* Ipucu baloncugu buna gore konumlanir (bkz. .grafik-ipucu). Baloncuk
       position:absolute oldugu icin sutunun akisina girmez, satirlari itmez. */
    position: relative;
}

/* Satır YÜKSEK: on çubuğun sıkışık durmaması için ad, çubuk ve değer tek
   satırda ama bol aralıklı. */
.borclu-cubuk-satir {
    display: grid;
    /* Ad sutunu 168'den 152'ye: unvanlar zaten kirpiliyordu, 16 piksel daha
       kirpmak okunurlugu degistirmiyor ama cubuk alanini uzatiyor. */
    grid-template-columns: 26px minmax(90px, 152px) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 30px;
    padding: 2px 4px;
    border-radius: 7px;
    color: var(--tx);
    text-decoration: none;
}

.borclu-cubuk-satir:hover {
    background: var(--alt);
    text-decoration: none;
}

/* Sıra numarası kendi hafif zeminli rozetinde. */
.borclu-sira {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--alt);
    font-size: 11px;
    font-weight: 600;
    color: var(--tx2);
    font-variant-numeric: tabular-nums;
}

.borclu-ad {
    font-size: 12.5px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Çizim alanı: çubuk ve hemen ardından değer etiketi. */
.borclu-cubuk-alan {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

/* Çubuklar KESKİN: 999px yuvarlaklık kapsül görünümü veriyordu, ucu nerede
   bittiği belirsizleşiyor ve grafikten çok etiket şeridi gibi duruyordu. */
.borclu-cubuk {
    flex: none;
    height: 13px;
    border-radius: 2px;
    background: var(--ac);
}

/* ---- vade kirilimi: bolunmus cubuk ----
   Cubuk TOPLAM boyunu korur (genislik yine .borclu-cubuk'a inline geliyor),
   yalnizca icini iki parcaya boler: sifirdan itibaren once vadesi gecmis, sonra
   vadesi gelmemis. Boylece siralama okumasi hic degismez.

   Kapsayicinin kendi zemini KALKAR: renk artik segmentlerde. */
.borclu-cubuk--bolunmus {
    display: flex;
    /* Iki dolgu arasinda yuzey boslugu - bitisik iki renk birbirine
       karistiginda sinirin tam nerede oldugu okunmuyordu. Bosluk cubugu
       bildirilen genisliginden 3px tasirir; on satirin hepsinde ayni oldugu
       icin olcegi bozmaz, kenarlik kullanmak ise satir uzerine gelindiginde
       zemin rengi degistigi icin beyaz bir cizgi birakirdi.

       2px degil 3px: kirmizi ile yesil arasindaki sinir, kirmizi ile mavide
       oldugundan daha zor secilir (iki renk de benzer parlaklikta). Bir piksel
       daha bosluk, iki parcayi renkten bagimsiz olarak da ayirir. */
    gap: 3px;
    background: none;
}

.borclu-seg {
    border-radius: 2px;
    /* Cok kucuk paylarda (bakiyenin %1'i) segment yarim piksele dusup tamamen
       kayboluyordu; "az" ile "hic yok" ayni gorunmemeli. */
    min-width: 3px;
}

/* Yuzde inline flex-basis olarak geliyor; buradaki auto onu ezmez. */
.borclu-seg--gecmis {
    flex: 0 0 auto;
    background: var(--vade-gecmis);
}

.borclu-seg--gelecek {
    flex: 1 1 auto;
    background: var(--vade-gelmemis);
}

/* ---- grafik ustu serit: ornek veri notu + gosterge ---- */
.borclu-ust {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

/* Not artik seridin icinde; kendi alt bosluguna gerek yok. */
.borclu-ust .borclu-not {
    margin: 0;
}

.borclu-gosterge {
    display: flex;
    gap: 14px;
    font-size: 11px;
    font-weight: 500;
    color: var(--tx2);
    white-space: nowrap;
}

.borclu-gosterge span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.borclu-gosterge-kutu {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.borclu-gosterge-kutu--gecmis {
    background: var(--vade-gecmis);
}

.borclu-gosterge-kutu--gelecek {
    background: var(--vade-gelmemis);
}

/* Çubuk alanının SOLUNDA ince bir taban çizgisi; çubuklar oraya yaslanır.
   Çizgi olmadan çubuklar boşlukta başlıyordu ve ortak bir sıfır noktaları
   olduğu görünmüyordu - grafik değil, yan yana dizilmiş şeritler gibiydi. */
.borclu-cubuk-alan {
    position: relative;
}

.borclu-cubuk-alan::before {
    content: "";
    position: absolute;
    /* Tam SIFIR noktasinda: cubuklar cizgiye yaslanir. Bir dolguyla araya
       bosluk konsaydi cizgi "cubuklarin basladigi yer" olmaktan cikar,
       yanlarinda duran ayri bir sus olurdu. */
    left: -1px;
    top: -4px;
    bottom: -4px;
    width: 1px;
    background: var(--bd);
}

.borclu-deger {
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--tx2);
    white-space: nowrap;
}

/* ---- yatay eksen ---- */
.borclu-eksen {
    position: relative;
    height: 20px;
    /* Çentikler çubuk alanının SIFIR noktasından başlar: sıra rozeti + ad +
       iki aralık. Dikey taban çizgisi de aynı noktada; ikisi 0'da birleşip
       eksenin köşesini oluşturur. */
    margin: 6px 0 0 calc(26px + 152px + 24px + 4px);
}

/* Çizgi son çentikte biter (%82), alanın sağ ucunda değil: kalan %18 değer
   etiketlerine ayrılmış yerdir, oraya kadar uzayan bir eksen çubukların daha
   ileri gidebileceğini ima ediyordu. */
.borclu-eksen-cizgi {
    position: absolute;
    top: 0;
    left: 0;
    /* %76: çubukların üst sınırı. Sağdaki pay değer etiketlerine ait; eksen
       oraya kadar uzasaydı çubukların daha ileri gidebileceğini ima ederdi. */
    right: 24%;
    height: 1px;
    background: var(--bd);
}

.borclu-centik {
    position: absolute;
    top: 5px;
    transform: translateX(-50%);
    font-size: 10.5px;
    color: var(--tx3);
    white-space: nowrap;
}

/* ---- özet sütunu ----
   Kendi kenarlığı olan bir kart: referans tasarımda da grafikten ayrı bir
   yüzey olarak duruyor. */
/* Kart icerigi ESIT ARALIKLA yayilir. Once yalnizca alttaki not "margin-top:
   auto" ile dibe itiliyordu ve ortada kocaman bir bosluk kaliyordu. */
.borclu-ozet {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--bd);
    border-radius: var(--radius-md);
    background: var(--surf);
}

.borclu-ozet-kart {
    display: flex;
    align-items: center;
    gap: 12px;
}

.borclu-ozet-ikon {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ac-bg);
    color: var(--ac);
}

.borclu-ozet-govde {
    min-width: 0;
}

.borclu-ozet-etiket {
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--tx2);
}

/* nowrap YOK: kisa bicim kullaniliyor ama para birimi uzun bir kodsa
   (ornegin cok basamakli bir toplam + "USD") satir yine de sarabilmeli -
   tasmaktansa iki satira insin. */
.borclu-ozet-deger {
    /* 17'den 16'ya: tek basina kart genisligini buyutmek cizim alanindan
       goturuyordu; punto bir kucuk olunca ayni sayi daha dar bir kartta tek
       satira siginca ikisi de kazanciyor. */
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--tx);
    overflow-wrap: anywhere;
}

.borclu-ozet-deger span {
    font-size: 12px;
    font-weight: 600;
    color: var(--tx2);
}

/* Ikincil tutar: ilk 10 toplamindan kucuk puntoda - kartin basligi o, bu
   onu yerine oturtan referans. */
.borclu-ozet-ara {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    color: var(--tx2);
    overflow-wrap: anywhere;
}

.borclu-ozet-ara span {
    font-size: 11px;
    font-weight: 600;
    color: var(--tx3);
}

/* Vadesi gecen tutar: grafikteki mor segmentle AYNI renk - panelde ayri bir
   sayi degil, cubuklardaki morlarin toplami oldugu anlasilsin. */
.borclu-ozet-ara--gecmis {
    color: var(--vade-gecmis);
}

.borclu-ozet-ara--gecmis span {
    color: var(--vade-gecmis);
    opacity: .75;
}

/* Oran, tutarin PESINE degil ALTINA duser: 236 pikselde ikisi yan yana
   sigmiyor ve uzun tutarlarda yuzde bir alt satira tek basina kaliyordu. */
.borclu-ozet-ara--gecmis em {
    display: block;
    margin-top: 1px;
    font-size: 11.5px;
    font-style: normal;
    font-weight: 600;
    color: var(--tx2);
    font-variant-numeric: tabular-nums;
}

.borclu-ozet-oran {
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--ac);
    line-height: 1.1;
}

.borclu-ozet-not {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 12px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--color-success) 9%, var(--surf));
}

.borclu-ozet-not p {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--tx2);
}

.borclu-ozet-not-ikon {
    flex: none;
    color: var(--color-success);
    margin-top: 1px;
}

.borclu-not {
    margin: 0 0 10px;
    font-size: 11px;
    color: var(--color-warning, var(--tx3));
}

/* Veri gelene kadar kart yer tutar; satir ziplamaz. */
.borclu-iskelet {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.borclu-iskelet > span {
    height: 26px;
    border-radius: 6px;
    background: var(--alt);
}

/* Dağılım listesi de seyrelir: iki kart aynı boyda, sıkışık durmasın. */
.borclu-temsilci .hizmet-row {
    margin-bottom: 20px;
}

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

@media (max-width: 1150px) {
    .borclu-satir {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    /* Özet dar ekranda grafiğin ALTINA geçer: 236 piksellik sütun kalınca
       çubuklara ad sığmıyordu. Eksen de kalkar - çubuklar o genişlikte ölçek
       değil sıralama anlatıyor. */
    .borclu-icerik {
        grid-template-columns: 1fr;
    }

    .borclu-cubuk-satir {
        grid-template-columns: 22px minmax(0, 1fr) auto;
    }

    .borclu-cubuk-alan {
        display: contents;
    }

    .borclu-cubuk {
        display: none;
    }

    .borclu-eksen {
        display: none;
    }
}

/* Temsilci dagilimi basligindaki sayi: listede yalnizca ilk birkaci var,
   kac kisi arasinda bolundugunu baslik soyluyor. */
.borclu-sayac {
    margin-left: auto;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--alt);
    font-size: 11px;
    font-weight: 600;
    color: var(--tx3);
    white-space: nowrap;
}

/* "Diğer (n temsilci)" satiri: tek bir kisi degil, artakalanlarin toplami.
   Sonuk cizilir ki siralamanin parcasi sanilmasin. */
.borclu-temsilci .hizmet-row--diger {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--bd-l);
}

.borclu-temsilci .hizmet-row--diger .hizmet-ad { color: var(--tx3); }
.borclu-temsilci .hizmet-row--diger .hizmet-count,
.borclu-temsilci .hizmet-row--diger .hizmet-pct { color: var(--tx3); }

/* Tek bir temsilci toplamin yarisini tasiyabiliyor; o zaman digerlerinin
   cubugu bir pikselin altina dusup GORUNMEZ oluyordu. Asgari genislik,
   "sifir" ile "cok kucuk" arasindaki farki koruyor. */
.borclu-temsilci .hizmet-bar-fill { min-width: 3px; }

/* Satirlar siklasti: yedi kalem + "Diğer" ile blok, yanindaki grafigin iki
   katina uzuyordu. */
.borclu-temsilci .hizmet-row { margin-bottom: 13px; }

/* "Diğer" satirinin dibe oturabilmesi icin (margin-top: auto). */
.borclu-temsilci { display: flex; flex-direction: column; flex: 1; }

/* =========================================================================
   GIRIS EKRANI - tek kart
   Iki yatay serit: govde (ortalanmis kart) ve alt cubuk (kunye). Ust cubuk
   ve soldaki tanitim sutunu KALDIRILDI - ekranda tek is var, marka da zaten
   kartin kendi icinde duruyor. Kart hem yatay hem dikey ortada; tek oge
   kaldigi icin ekranin ekseni artik kartin ekseni.
   Renkler uygulamanin kendi paletinden (sidebar laciverti + camgobegi).
   ========================================================================= */
.giris-ekran {
    display: grid;
    /* Alt cubuk icerigine gore: dar ekranda iki satira dusunce kirpilmasin. */
    grid-template-rows: 1fr auto;
    width: 100%;
    min-height: 100vh;
    /* Mavi zemin: ortada acilan bir isik havuzu, kenarlara dogru koyulasan
       lacivert. Duz tek renk zemin ustundeki ince devre yollarini
       duzlestiriyordu; radyal acilim desene derinlik veriyor. */
    background:
        radial-gradient(920px 660px at 50% 46%, #205FAE, transparent 68%),
        linear-gradient(158deg, #14417F, #0B2A5C 56%, #071B3F);
}

/* IOS 26 SAFARI - DURUM CUBUGU VE ALT CUBUK RENGI + TASMA ZEMINI (2026-09-10).
   Safari 26 <meta name="theme-color"> etiketini ARTIK OKUMUYOR. Iki cubugun
   tonunu sayfadan turetiyor: once o kenara yapisik (fixed/sticky) bir ogenin
   background-color'i, o yoksa GOVDENIN background-color'i. Giris ekraninin
   laciverti bir COCUK ogenin (.giris-ekran) uzerinde durdugu icin Safari
   govdeyi okuyordu; o da aydinlik temada beyaz, yani telefonda mavi kartin
   ustunde ve altinda beyaz seritler kaliyordu.

   Govdenin rengi AYNI ZAMANDA belgenin bittigi yerden sonrasini boyar. Ekran
   klavyesi acilinca Safari sayfayi belgenin sonundan da ileri kaydirabiliyor
   ve orada govde rengi gorunuyor - bu yuzden deger gradyanin UST degil ALT
   ucundan alindi (dar ekranda alt kenar #08214A ile #071B3F arasinda gezer,
   #081E44 ortasidir): kaydirinca cikan alan gradyanin devami gibi durur,
   dikis gorunmez. Cubuklar da o tonu alir.

   ALT CUBUGA AYRI RENK VERMEK ICIN EKRANIN DIBINE FIXED SERIT KOYMA: klavye
   acikken iOS o seridi ekranin ortasina birakiyor ve gradyanin uzerinde koyu
   bir cizgi olarak goze carpiyor (denendi ve geri alindi, 2026-09-10). */
body:has(.giris-ekran) {
    background: #081E44;
}

/* ------------------------------------------------------------- alt cubuk */
.giris-alt {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 40px;
    border-top: 1px solid color-mix(in srgb, #fff 8%, transparent);
    font-size: 12px;
    color: color-mix(in srgb, #fff 30%, transparent);
}

/* ------------------------------------------------------------------ govde */
.giris-govde {
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    /* SUTUN SINIRI SART: ortulu izgara sutunu varsayilan olarak icerige gore
       (max-content) buyur, yani 384 piksellik kart sutunu de 384'e cikariyordu.
       O zaman kartin max-width:100%'i 384'e cozuluyor ve HICBIR SEYI
       sinirlamiyordu: 390 piksellik telefonda kart 16..400 arasina tasip
       overflow:hidden ile sag kenarindan kirpiliyordu. minmax(0,1fr) sutunu
       govdenin ic genisligine kilitler, kart da gercekten daralir. */
    grid-template-columns: minmax(0, 1fr);
    /* Yatay dolgu kartin dar ekranda kenara dayanmasini engelliyor. */
    padding: 32px 20px;
}

/* Desen artik kosede duran bir NESNE degil, govdeyi bastan sona kaplayan bir
   DOKU. viewBox "slice" ile oranini bozmadan yayiliyor, tasan kenarlar
   kirpiliyor - yani 1366'da da 2560'ta da ayni sikliktaki cizgiler.
   Opaklik dusuk: desen metnin arkasina dusuyor, okunurluk desenden once
   gelir. */
.giris-gorsel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: .5;
    pointer-events: none;
}

/* Konteyner artik tek sutun ve kart genisliginde (384 px): govdenin
   place-items:center'i onu hem yatay hem dikey ortaliyor. Genislik burada
   duruyor, kartin kendisinde degil - kartin olcusu bastan beri bu sutundan
   geliyordu. Dar ekranda max-width:100% devraliyor. */
.giris-kolonlar {
    position: relative;
    width: 384px;
    max-width: 100%;
}

/* -------------------------------------------------------------- marka */
/* MARKA KILIDI - hepsi TEK bir olcekten (--k) turetiliyor.
   Neden: amblem ve yazi ayni SVG'nin iki parcasi. Ikisini ayri ayri piksel
   degeriyle boyutlandirinca olcekleri birbirinden kayiyor (amblem yazidan
   %9 buyuk kalmisti) ve aralarindaki bosluk da yanlis cikiyor. Tek olcek
   bunu yapisal olarak imkansiz kiliyor.

   Kaynak olculer (piksel taramasiyla, viewBox "158.60 388.43 271.12 58.56"):
     amblem      : 52.42 kare, viewBox kosesinden basliyor
     yazi blogu  : 204.35 x 54.76, (66.74, 3.72) noktasindan basliyor
     aradaki bosluk: 66.74 - 52.42 = 14.32 birim
   Boslugun bir kismini amblemin NEFES PAYI zaten dolduruyor (bkz.
   .giris-amblem), o yuzden CSS boslugundan yarim pay dusuluyor. */
.giris-marka {
    --k: .62;
    display: flex;
    align-items: center;
    gap: calc(14.32px * var(--k) - 3px);
}

/* KARTIN ICINDEKI marka: MAVI logo, dogrudan beyaz kartin uzerinde.
   Kart opak beyaza dondugu icin logoya ayri bir beyaz plaka vermeye gerek
   kalmadi - istenen "beyaz icerisinde logo patlar" durumu artik kartin
   kendisinde saglaniyor.
   Altindaki ince ayrac markanin kartin BASLIGI oldugunu, formun ayri bir
   blok oldugunu soyluyor. */
.giris-marka-kart {
    /* ORTALI: kartin ekseni logodan geciyor. Formun etiketleri sola hizali
       kaliyor - okuma sirasi onlarda soldan basliyor, markada ise tek bir
       nesne var, onu ortalamak ekseni bozmuyor. */
    --k: 1;
    justify-content: center;
    margin-bottom: 24px;
    padding-bottom: 22px;
    border-bottom: 1px solid #E6EDF6;
}

/* ORTALAMA DUZELTMESI - 3 piksellik gercek bir kayma duzeltiyor, sus degil.
   Amblem kutusunun iki yaninda --pay kadar bosluk var (kenar yumusatmasi
   kirpilmasin diye, bkz. .giris-amblem). Yazi blogunun sagindaysa boyle bir
   pay YOK: blok murekkeple bitiyor. Flex kutuyu ortaladigi icin bu tek
   tarafli pay, GORUNEN logoyu kart ekseninin --pay/2 kadar sagina itiyordu.
   Olculdu (Chrome, 6x olcek, 384 px kart): sol 58.00 px / sag 55.00 px.
   Negatif kenar boslugu payi ortalama hesabindan dusuyor; pay kutuda
   duruyor, yalnizca yer kaplamiyor. Duzeltme sonrasi 56.50 / 56.50. */
.giris-marka-kart .giris-amblem {
    margin-left: calc(var(--pay) * -1);
}

/* Amblem ve yazi, logo SVG'sinden kirpiliyor. NEFES PAYI sart: amblem kutuya
   tam tegetken cemberin sagi kutu kenarina degiyor, kenar yumusatmasi
   kirpiliyor ve daire orada DUZLESMIS gorunuyordu. Bu yuzden iki olcu ayri -
   --amblem kutunun boyu, --simge amblemin o kutu icinde cizildigi boy.

   Kaynak olculer piksel taramasiyla: viewBox "158.60 388.43 271.12 58.56",
   amblem 52.42 kare ve viewBox kosesinden BASLIYOR (ofset yok). */
/* DIKEY KAYMA DUZELTMESI
   Kaynak dosyadan olculen dikey araliklar (viewBox y0 = 388.43):
     amblem       : 0.07 .. 52.52  -> merkez 26.30
     yazi blogu   : 3.72 .. 58.48  -> merkez 31.10
   Yani ozgun cizimde amblemin merkezi, yazi blogunun merkezinden 4.80 birim
   YUKARIDA. Sebebi belli: yazi blogu ustte "365"i, altta "simple is the best"i
   de iceriyor; tasarimci cemberi bloğun tamamina degil, "heysem" yazisinin
   kendisine hizalamis.

   "align-items: center" iki kutunun MERKEZLERINI esitliyor, dolayisiyla amblem
   4.80 birim asagi kaciyordu. Burada o kadar yukari cekiliyor - olcekle
   birlikte, cunku fark da olcekleniyor. */
.giris-amblem {
    --amblem-kaynak: 52.42;
    --simge: calc(52.42px * var(--k));
    /* Nefes payi tek yerde tanimli: asagidaki ortalama duzeltmesi de bunu
       kullaniyor, ikisi birbirinden kayamaz. */
    --pay: 3px;
    --amblem: calc(var(--simge) + var(--pay) * 2);
    transform: translateY(calc(-4.8px * var(--k)));
    position: relative;
    display: block;
    flex: none;
    width: var(--amblem);
    height: var(--amblem);
    overflow: hidden;
}

.giris-amblem img {
    position: absolute;
    max-width: none;
    width: calc(271.12 / var(--amblem-kaynak) * var(--simge));
    height: calc(58.56 / var(--amblem-kaynak) * var(--simge));
    left: calc((var(--amblem) - var(--simge)) / 2);
    top: calc((var(--amblem) - var(--simge)) / 2);
}

/* Ad + "365" + slogan: ayni SVG'nin SAG bolumu, dikdortgen pencereyle
   kirpiliyor. Yazi blogu 204.35 x 54.76, viewBox kosesinden 66.74 / 3.72
   iceride - olculdu. */
.giris-yazi {
    --yazi-kaynak: 204.35;
    --yazi-en: calc(204.35px * var(--k));
    position: relative;
    display: block;
    flex: none;
    width: var(--yazi-en);
    height: calc(54.76 / var(--yazi-kaynak) * var(--yazi-en));
    overflow: hidden;
}

.giris-yazi img {
    position: absolute;
    max-width: none;
    width: calc(271.12 / var(--yazi-kaynak) * var(--yazi-en));
    height: calc(58.56 / var(--yazi-kaynak) * var(--yazi-en));
    left: calc(-66.74 / var(--yazi-kaynak) * var(--yazi-en));
    top: calc(-3.72 / var(--yazi-kaynak) * var(--yazi-en));
}

/* Buyuk kullanim: olculer .giris-amblem / .giris-yazi UZERINDE degistirilmeli -
   ozel ozellikler o ogelerin kendisinde tanimli, ustten miras almiyorlar. */
/* Kartta --k: 1, yani logo KENDI olcusunde ciziliyor: 52.42 + 14.32 + 204.35
   = 271.09 piksel. Kartin ic genisligi 384 - 72 dolgu = 312 piksel oldugu
   icin iki yanda 20'ser piksel nefes payi kaliyor - daha buyugu kenara
   dayanirdi. */

/* ------------------------------------------------------------------ form */
/* TAMAMEN BEYAZ, BOMBELI KART
   Saydam kartta bombeyi kirilma anlatabiliyordu: arkadaki desenin kenara
   dogru kaymasi. Opak beyazda o arac yok; geriye yalnizca golgeleme, kenar
   davranisi ve GOLGENIN BICIMI kaliyor. Bes katman birlikte calisiyor:

   1) Yuzeyin isik dusumu - merkez saf beyaz, kenarlara dogru hafifce
      koyulasip soguyor. Kabarik bir yuzey izleyiciye donuk oldugu yerde en
      parlaktir. RADYAL olmasi sart: tek yonlu olursa yuzey kabarik degil
      EGIK okunur.
   2) Kenar haresi - dusumun en dibinde, tam perimetrede 1 px saf beyaz.
      Gercek bir yastikta uc kenar isigi yakalar. Cevresi artik #E7EEF7
      oldugu icin beyaz kartta bile goruluyor.
   3) Yuvarlanan kenar - halkanin hemen icinde 3 px'lik ince koyulasma.
      Yuzeyin izleyiciden dondugu yer burasi; "pah kirilmis" degil
      "yuvarlanmis" bir kenar hissi veriyor.
   4) GOLGENIN BICIMI - en cok ise yarayan ama en cok atlanan detay. Duz bir
      levhanin golgesi kendi konturuyla aynidir; kabarik bir nesnenin golgesi
      KENDINDEN KUCUKTUR, cunku kenarlari kivrilip altina isik sizdirir. CSS
      karsiligi buyuk negatif yayilma (-34px). Yanina dipte dar bir temas
      golgesi.
   5) Icbukey alanlar - form kutulari yuzeyden bir tik koyu ve iceri gomulu
      (bkz. .giris-girdi). Disbukey kart / icbukey alan zitligi bombeyi tek
      basina yapabileceginden daha fazla guclendiriyor.

   Kose yaricapi 28: ince kenar duz okunur, kalin nesne genis kenar ister. */
/* DISBUKEY (disa dogru bombeli) KART
   Onceki surum ICE dogru cukur gorunuyordu ve sebebi netti: kartin dort
   kenarina birden ic golge koymustum. Cepecevre esit bir ic golge, gorsel
   dilde "basilmis / oyulmus" demektir - bir cukurun kenarinda isik boyle
   davranir. "Her tarafi ayni yogunlukta olsun" istegini birebir uygularken
   yuzeyi ters cevirmisim.

   Disbukey bir yuzeyi disbukey yapan sey YON. Isik yukaridan gelir varsayimi
   altinda fizik sudur:
     - yuzeyin UST kismi isiga doner  -> AYDINLIK, ust ic kenarda parlak hare
     - ALT kismi isiktan kacar        -> KOYU,    alt ic kenarda golge
     - YAN kenarlar hafifce doner     -> cok az koyulasma
     - nesnenin ALTINDA disa dusen golge
   Icbukey yuzeyde bunlarin hepsi TERSTIR (ustte golge, altta isik). Ayni
   ogeleri sadece yer degistirerek cukur ya da tumsek yapabilirsiniz; belirleyen
   sey miktar degil, YON.

   Bu yuzden burada TEK BIR cepecevre ic golge yok. Ust ve alt ayri ayri
   yaziliyor ve zit yonde. */
.giris-kart {
    position: relative;
    padding: 40px 36px 34px;
    border: 0;
    border-radius: 34px;
    background:
        /* Yan kenarlarda koyulasma: yuzeyin YATAY eksende de yuvarlandigini
           soyluyor. Olculu olmali - fazlasi yuzeyi silindire cevirir. */
        linear-gradient(90deg,
            rgba(19, 52, 102, .13) 0%, rgba(19, 52, 102, 0) 17%,
            rgba(19, 52, 102, 0) 83%, rgba(19, 52, 102, .13) 100%),
        /* Ana dusum DIKEY ve artik SERT. Iki incelik var:
           1) En ust satir saf beyaz DEGIL, bir tik koyu (#F0F6FC). Cunku
              yuzeyin en tepesi zaten kivrilip izleyiciden kaciyor; en parlak
              nokta tepenin biraz ALTINDA. Bu kucuk detay, kenari "kesilmis"
              degil "yuvarlanmis" gosteren sey - ve ustteki beyaz hare
              cizgisine uzerinde parlayacagi bir zemin veriyor.
           2) Etek belirgin koyu: #DBE7F4 -> #C6D8EC. Merkez ile kenar
              arasindaki fark buyudukce egrilik okunuyor; onceki fark goze
              carpmiyordu. */
        linear-gradient(180deg,
            #F0F6FC 0%, #FFFFFF 6%, #FFFFFF 30%,
            #F3F8FC 58%, #DEE9F5 80%, #C6D8EC 100%);
    box-shadow:
        /* --- UST: isiga donuk yuz ------------------------------------- */
        /* Uc kenarda keskin beyaz cizgi - kabaran yuzeyin tepesi. Zemin artik
           orada saf beyaz olmadigi icin bu cizgi gercekten goruluyor. */
        inset 0 2px 0 rgba(255, 255, 255, 1),
        /* Cizginin altinda yumusak aydinlanma: kenarin YUVARLAK oldugunu
           soyluyor, keskin bir pah degil. */
        inset 0 14px 20px -12px rgba(255, 255, 255, 1),

        /* --- ALT: isiktan kacan etek ---------------------------------- */
        /* Genis, yumusak golge: yuzey burada izleyiciden doner. Deger neredeyse
           iki katina cikti (.38 -> .58) - egriligi tasiyan katman bu. */
        inset 0 -30px 42px -24px rgba(19, 52, 102, .58),
        /* En dipte koyu cizgi - alt kenarin kendisi. */
        inset 0 -2px 0 rgba(19, 52, 102, .22),

        /* --- CEVRE GOLGESI (ust dahil) --------------------------------
           Onceki surumde butun dis golgeler ASAGI kaydirilmisti, yani ust
           kenarin uzerinde hic golge yoktu: alt taraf agir golgeli, ust taraf
           ciplak kaliyor ve kart orada mavi zemine karisiyordu. Bu asimetri
           onu "kati bir nesne" olmaktan cikariyordu.

           Cozum ust kenara IC golge koymak DEGIL - o, yuzeyi yeniden cukura
           cevirirdi. Gereken sey DIS golge: gercek bir nesne zeminden
           kaldirildiginda cevresinde her yonde ortam golgesi olusur, ustte
           yalnizca daha az olur. Bu yuzden asagidaki iki golgenin dikey
           kaydirmasi sifir ya da negatif - kartin ustune ve yanlarina da
           dusuyorlar. */

        /* Cepecevre ortam golgesi: karti zeminden her yonde ayiriyor. */
        0 0 46px -8px rgba(2, 10, 34, .50),
        /* Ust kenara ozel, dar golge: kalinligin ust kenarda birakti izi. */
        0 -5px 16px -6px rgba(2, 10, 34, .45),

        /* --- ALTINDAKI GOLGE ------------------------------------------
           Kart sayfanin UZERINDE duruyor; bunu soyleyen sey uc kademeli
           golge. Temas onu yere oturtuyor, yakin golge kalinlik, zemin
           golgesi yukseklik veriyor. */
        0 5px 10px -3px rgba(3, 14, 40, .55),
        0 22px 40px -12px rgba(3, 14, 40, .62),
        0 62px 96px -14px rgba(2, 10, 34, .78),
        0 110px 150px -50px rgba(1, 8, 28, .85);
}

.giris-baslik {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
    /* Kart beyazladi: kartin ICINDEKI her renk donmek zorunda. Disaridaki
       (mavi zemin ustundeki) beyaz yazilara dokunulmadi. */
    color: #12294A;
}

.giris-alt-baslik {
    margin: 7px 0 24px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #6B8099;
}

.giris-alan { margin-bottom: 16px; }

.giris-etiket {
    display: block;
    margin-bottom: 7px;
    font-size: 12.5px;
    font-weight: 500;
    color: #5A7189;
}

/* Ikon SAGDA, girdi solda.
   Alanlar yuzeyden bir tik KOYU ve ustten ince bir ic golge aliyor: kartin
   disbukeyligine karsi icbukey duruyorlar. Kart kadar beyaz olsalardi yuzey
   duzlesirdi - bombeyi ayakta tutan zitliklardan biri bu. */
.giris-girdi {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 14px;
    border: 1px solid #DCE5F0;
    border-radius: 11px;
    background: #EFF4FA;
    box-shadow: inset 0 2px 3px rgba(16, 44, 92, .12);
    transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

.giris-girdi:focus-within {
    border-color: #2c74e0;
    background: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, #2c74e0 20%, transparent);
}

.giris-girdi-ikon {
    display: grid;
    place-items: center;
    flex: none;
    color: #9BB0C6;
}

.giris-girdi:focus-within .giris-girdi-ikon { color: #2c74e0; }

.giris-girdi input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    outline: none;
    font: inherit;
    font-size: 14px;
    color: #12294A;
}

.giris-girdi input::placeholder { color: #9FB1C4; }

/* Tarayicinin otomatik doldurma zeminini bastirmaya artik gerek yok - kutu
   zaten acik. Yalnizca yazi rengi sabitleniyor, yoksa Chrome kendi koyu
   tonunu basiyor. */
.giris-girdi input:-webkit-autofill,
.giris-girdi input:-webkit-autofill:focus {
    -webkit-text-fill-color: #12294A;
    transition: background-color 9999s ease-in-out 0s;
}

.giris-goz {
    display: grid;
    place-items: center;
    flex: none;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: none;
    color: #9BB0C6;
    cursor: pointer;
}

.giris-goz:hover { color: #12294A; }

/* Sifre gorunur haldeyken dugme VURGU rengine gecer - ayri bir "kapali goz"
   simgesi olmadigi icin durumu renk anlatiyor. */
.giris-goz[aria-pressed="true"] { color: #2c74e0; }

.giris-satir {
    display: flex;
    align-items: center;
    margin: 2px 0 22px;
}

/* ---- beni hatirla: ANAHTAR (toggle) ----
   Durum hem KONUMLA hem renkle bildiriliyor, yalnizca renge yaslanmiyor.
   Gercek onay kutusu goze gorunmez halde duruyor: klavye ve ekran okuyucu
   icin degisen bir sey yok, degisen yalnizca gorunum. */
.giris-hatirla {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 13px;
    color: #5A7189;
    cursor: pointer;
}

.giris-hatirla input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.giris-anahtar {
    position: relative;
    flex: none;
    width: 38px;
    height: 22px;
    border: 1px solid #D2DEEB;
    border-radius: 999px;
    background: #E6EDF5;
    transition: background .15s ease, border-color .15s ease;
}

.giris-anahtar::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(12, 38, 80, .28);
    transition: left .16s ease, background .16s ease;
}

.giris-hatirla input:checked + .giris-anahtar {
    border-color: transparent;
    background: linear-gradient(90deg, #2aa9e0, #2c74e0);
}

.giris-hatirla input:checked + .giris-anahtar::after {
    left: 18px;
    background: #fff;
}

/* Odak halkasi da donmek zorunda: beyaz kartin uzerinde beyaz halka
   gorunmezdi. */
.giris-hatirla input:focus-visible + .giris-anahtar {
    outline: 2px solid #2c74e0;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .giris-anahtar,
    .giris-anahtar::after { transition: none; }
}

.giris-dugme {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 11px;
    background: linear-gradient(90deg, #2aa9e0, #2c74e0);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: 0 10px 24px -14px rgba(44, 116, 224, .9);
    transition: filter .14s ease, transform .1s ease;
}

.giris-dugme:hover { filter: brightness(1.08); }
.giris-dugme:active { transform: translateY(1px); }

.giris-dugme:focus-visible {
    outline: 2px solid #12294A;
    outline-offset: 3px;
}

/* ---- hata / uyari ---- */
.giris-uyari:not(:empty) {
    margin-bottom: 18px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--color-danger) 45%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--color-danger) 10%, #fff);
    font-size: 12.5px;
    color: #8C1D18;
}

.giris-uyari ul { margin: 0; padding-left: 16px; }

.giris-hata {
    display: block;
    margin-top: 6px;
    font-size: 11.5px;
    color: #B3261E;
}

/* Kayit olma YOK - hesaplari yonetici aciyor. Dugme yerine duz bir cumle. */
.giris-not {
    margin: 18px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: #7B8DA4;
}

/* ---------------------------------------------------------------- dar ekran */
/* Kart sabit 384 piksel oldugu icin genis ekranlarda ayarlanacak bir sey yok;
   dar ekranda yalnizca kartin kendi dolgusu ve alt cubuk toparlaniyor. */
@media (max-width: 560px) {
    .giris-govde { padding: 24px 16px 32px; }

    /* Kartin icindeki marka: tek marka o oldugu icin duruyor, sadece
       kuculuyor. */
    .giris-marka-kart {
        --k: .84;
        margin-bottom: 18px;
        padding-bottom: 16px;
    }

    .giris-kart { padding: 26px 22px 24px; }

    /* Dar ekranda desen daha soluk: alan kucululdugu icin ayni opaklikta cok
       daha yogun gorunuyordu. */
    .giris-gorsel { opacity: .34; }

    .giris-alt {
        min-height: 48px;
        padding: 12px 20px;
        flex-direction: column;
        gap: 4px;
        text-align: center;
    }

    /* 16 PIKSEL SART: altindaki her deger iOS Safari'de alana odaklaninca
       sayfayi kendiliginden buyutuyor - kullanici e-postayi yazdiktan sonra
       parmakla kucultmek zorunda kaliyordu. */
    .giris-girdi input { font-size: 16px; }

    /* Parmak hedefi: goz dugmesi 30 pikseldi, "beni hatirla" anahtari 22.
       Ikisi de parmak icin kucuk; anahtarin GORUNEN olcusu degismiyor,
       tiklanabilir satir buyuyor. */
    .giris-goz {
        width: 44px;
        height: 44px;
    }

    .giris-hatirla { min-height: 44px; }
}

/* ================================================================
   KABUK / CERCEVE  (sekme gecisinde yukleme olmasin)
   ----------------------------------------------------------------
   Acik her ekran ust belgenin altinda kendi iframe'inde CANLI durur;
   sekme degistirmek yalnizca birini gosterip otekini gizler - istek
   gitmez, betikler yeniden kurulmaz, ekranin durumu bozulmaz
   (bkz. sayfa-sekmeleri.js). Iki taraf var:

     · KABUK   - ust belge: menu, ust cubuk, serit ve cerceve kabi.
     · CERCEVE - ekranin kendisi: kendi kabuk parcalarini gizler,
                 cunku onlar zaten ustte duruyor.
   ================================================================ */

/* Cerceveler icerik alaninin tamamini kaplar; ayni anda YALNIZCA biri
   gorunur, otekiler [hidden] ile bekler (gizli olan da yasamaya devam
   eder - amac zaten bu). */
.kabuk-cerceveler {
    flex: 1;
    min-height: 0;
    position: relative;
    /* Yeni bir ekran ilk kez acilirken cerceve bir an bos kalir; zemin
       verilmezse koyu temada beyaz bir kare cakiyor. */
    background: var(--color-page-bg);
}

.kabuk-cerceve {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* .page-content--tam dar olmayan ekranlarda display:flex aliyor ve sinif
   secicisi [hidden] ozniteligini yeniyordu: gizlenmesi istenen icerik
   gorunur kaliyordu. */
.page-content[hidden],
.kabuk-cerceveler[hidden],
.kabuk-cerceve[hidden] { display: none !important; }

/* ---------- Yeni ekran yuklenirken ----------
   Bir ekran ILK KEZ acilirken eski ekran ekranda kalir, yeni cerceve arkada
   yuklenir ve ancak boyandiginda one alinir (bkz. sayfa-sekmeleri.js
   gorunurluguTazele). Eskiden yeni cerceve hemen one aliniyordu; bos oldugu
   icin icerik alani bir kare bombos kaliyor, bu da titresim gibi
   goruluyordu (kullanici bildirimi, 2026-09-06).

   display:none DEGIL visibility: gizlenen cerceve 0x0 yuklenir ve tablo
   motoru kolon genisliklerini sifir genislikte olcerdi. */
.kabuk-cerceve--bekleyen { visibility: hidden; }

/* Satir ici ekran (ust belgenin kendi sayfasi) hala ekrandayken kap onun
   yerini ALMAMALI: akistan cikip ayni kutunun uzerine oturur. Zemini saydam
   ve tiklamayi gecirir - altindaki ekran normal calismaya devam eder.
   Kutunun olculeri JS'ten gelir (kabiIcerigeOturt). */
.kabuk-cerceveler--bekleyen {
    position: fixed;
    background: transparent;
    pointer-events: none;
}

/* ---------- Ekran cercevesi: GERI ALINDI (kullanici karari, 2026-09-13) ----------
   2026-09-08'de eklenen gri calisma zemini (--zemin-calisma) ve icerik
   alaninin kenarlikli/golgeli "havada duran" paneli kaldirildi: ust cubuk
   her genislikte temel halinde (beyaz, kalici alt cizgi, 18 px yan dolgu),
   icerik alani ust cubugun hemen altindan kenara kadar uzanir. Asagidaki
   blokta kalanlar 2026-09-13 sekme duzenidir (sekmeler ust cubukta, Ana
   Sayfa dugmesi sekme gibi, dikey ayiricilar) ve bilerek korunmustur.
   900 pikselin altinda bu blok hic uygulanmaz. */
@media (min-width: 901px) {
    /* SEKMELER UST CUBUKTA (kullanici karari, 2026-09-13). Serit gorunurken:
       - etkin sekme ust cubugun alt cizgisine oturur (klasor sekmesi);
       - bosluk tutucu gizlenir: kabuk zaten kalan yeri doldurur, ikisi
         birden acik kalsa yeri paylasir ve serit gercekte sigarken tasiyor
         sanilirdi (sayfa-sekmeleri.js oklariGuncelle clientWidth olcer);
       - ETKIN sekme varsa sayfa basligi basilmaz - baslik zaten etkin
         sekmenin adidir, iki kez yazmak yer yerdi. Etkin sekme yoksa (acik
         sekmeler dururken Ana Sayfa'ya donulmus) baslik kalir, ayirici cizgi
         basligin sagina duser: kullanici nerede oldugunu yine gorur. */
    .topbar:has(> .sekme-kabuk:not([hidden])) {
        border-bottom-color: var(--bd);
    }

    .topbar:has(> .sekme-kabuk:not([hidden])) > .topbar-spacer {
        display: none;
    }

    .topbar:has(> .sekme-kabuk .sekme.etkin, > .topbar-home-btn.etkin) > .topbar-info {
        display: none;
    }

    /* ANA SAYFA DUGMESI DE BIR SEKMEDIR (kullanici karari, 2026-09-13; uc
       mockup'tan "1"): 34 piksellik ortali kare dugme ustten 9, cizgiye
       oturan 30 piksellik sekmeler 21 pikselden basliyordu - 12 piksellik
       kayma sol kumeyi iki ayri satir gibi gosteriyordu (kullanici ekran
       goruntusu). Dugme sekmelerin geometrisini alir: ayni boy, ust koseler
       yuvarlak, alt kenarlik yok, cizgiye oturur - tarayicilarin
       sabitlenmis sekmesi gibi. HIC SEKME YOKKEN DE (kullanici karari,
       2026-09-28): eskiden serit yokken kare dugmeydi ve Ana Sayfa'da
       gizliydi; ilk ekrana gecince ust cubuk gidip geliyordu. */
    .topbar > .topbar-home-btn {
        align-self: flex-end;
        width: 38px;
        height: 30px;
        background: var(--color-page-bg);
        border-color: color-mix(in srgb, var(--bd) 70%, transparent);
        border-bottom: none;
        border-radius: 7px 7px 0 0;
    }

    /* ANA SAYFA'DAYKEN DUGME YANAR (kullanici karari, 2026-09-13; 2026-09-28'den
       beri serit bos olsa da): diger sekmeler gibi ETKIN cizilir (ilk ekranda
       _Layout, sonra sayfa-sekmeleri.js evDugmesiniTazele "etkin" sinifini
       yazar) ve "Ana Sayfa" basligi basilmaz. Gorunum .sekme.etkin ile birebir:
       cizginin uzerine 1 piksel sarkar, altinda mavi vurgu cubugu, hafif
       golge; ikon mavi. */
    .topbar > .topbar-home-btn.etkin {
        position: relative;
        border-color: var(--bd);
        color: var(--ac);
        margin-bottom: -1px;
        padding-bottom: 1px;
        box-shadow: 0 -2px 4px color-mix(in srgb, var(--tx) 7%, transparent);
    }

    .topbar > .topbar-home-btn.etkin::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: -1px;
        right: -1px;
        height: 3px;
        background: var(--ac);
        pointer-events: none;
    }

    /* Sol kumede etkin bir sekme (ya da yanan Ana Sayfa dugmesi) varken dugme
       ile ilk sekme arasinda ayirici cizgi degil, sekmeler arasindaki 2
       piksellik aralik durur (dugme seridin ilk sekmesi gibi okunur). Etkin
       bir sey yokken (Hesabim + acik sekmeler) arada sayfa basligi var;
       ayirici ve 16 piksellik aralik kalir. */
    .topbar:has(> .topbar-home-btn:not([hidden])):has(> .sekme-kabuk .sekme.etkin, > .topbar-home-btn.etkin) > .sekme-kabuk {
        margin-left: -14px;
    }

    .topbar:has(> .topbar-home-btn:not([hidden])):has(> .sekme-kabuk .sekme.etkin, > .topbar-home-btn.etkin) > .sekme-kabuk::before {
        display: none;
    }

    /* Ana Sayfa dugmesi ile sayfa basligi arasinda dikey cizgi. Isaretlemeye
       oge eklenmedi (Razor gorunumu derli; CSS diskten canli sunulur):
       cizgi baslik kutusunun ilk esnek cocugu olarak cizilir. Dugme Ana
       Sayfa'da gizli ([hidden]); cizgi de onunla gizlenir. */
    .topbar-info::before {
        content: "";
        flex: none;
        width: 1px;
        height: 22px;
        margin-right: 7px;
        background: var(--bd);
    }

    .topbar-home-btn[hidden] + .topbar-info::before {
        display: none;
    }

    /* Bildirim simgesi ile profil blogu arasindaki cizgi de ayni dilde:
       blogun tam boy kenarligi yerine ortalanmis 22 px'lik cizgi. */
    .topbar-profile {
        border-left: none;
        padding-left: 16px;
    }

    .topbar-profile::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 1px;
        height: 22px;
        transform: translateY(-50%);
        background: var(--bd);
        pointer-events: none;
    }
}

/* ---------- Cerceve kipi: kabuk parcalari gizlenir ---------- */
html.cerceve .sidebar,
html.cerceve .topbar,
html.cerceve .sekme-kabuk,
html.cerceve .sekme-serit,
html.cerceve .nav-overlay,
html.cerceve .mobile-pagebar { display: none !important; }

/* Kabuk parcalari gidince ekran cercevenin tamamini kaplar. */
html.cerceve,
html.cerceve body { height: 100%; }

html.cerceve .app-shell,
html.cerceve .main-area { height: 100%; }

/* ---------- Panel açıkken çerçeve tüm pencereye taşar (2026-09-23) ----------
   Satır içi ekranda kayan panel ve perdesi üst çubuğu ve sol menüyü de örter;
   çerçevede panel iframe'in kutusuna hapsoluyordu. Kabuk etkin iframe'i
   pencereyi kaplayacak şekilde büyütür (kabuk tarafı), çerçeve belgesi de eski
   kutusunun ölçülerini SAYDAM dolgu olarak alır (çerçeve tarafı): içerik
   yerinden oynamaz, üst çubuk ve sekmeler dolgunun arkasında görünmeye devam
   eder, yalnızca panelin perdesiyle kararır. Ayrıntı: sayfa-sekmeleri.js
   panelKipiniTazele. z-index kabuğun menülerinin (60) üstünde, firma
   penceresinin (100) altında. */
.kabuk-cerceve--tasma {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: transparent;
}

/* Kök ve gövde saydam: gövdenin zemini tuvale yayılırdı (CSS zemin yayılımı),
   sayfanın zemini kabuğa taşınır. */
html.cerceve.cerceve-tasma,
html.cerceve.cerceve-tasma body { background: transparent; }

html.cerceve.cerceve-tasma body {
    padding: var(--tasma-ust, 0) var(--tasma-sag, 0) var(--tasma-alt, 0) var(--tasma-sol, 0);
}

html.cerceve.cerceve-tasma .app-shell { background: var(--color-page-bg); }

/* Dar ekranda kabuk sayfa akisiyla calisiyor (bkz. .mobile-pagebar);
   cerceve icinde alt serit gizlendigi icin ona ayrilan yer de gereksiz. */
@media (max-width: 900px) {
    /* ALT ÇUBUĞUN YERİ ÇERÇEVEDE İKİ KEZ AYRILIYORDU. Üst belgede .main-area
       50 piksel alt dolgu bırakıyor ve çerçeve kabı (#kabukCerceveler) zaten
       çubuğun ÜSTÜNDE bitiyor; çerçevenin kendi .main-area'sı aynı dolguyu
       bir daha ekleyince kaydırma alanı 50 piksel erken kapanıyor, dibe
       yapışan toplam şeridi de çubuktan bir tutam yukarıda, havada kalıyordu.
       Çerçevede alt çubuk zaten gizli (yukarıdaki kural) - yer de gereksiz. */
    html.cerceve .main-area { padding-bottom: 0; }

    html.cerceve .page-content { padding-bottom: 24px; }

    /* ...ama alt şeridi dibe yapıştıran tablo ekranlarında 24 piksel de
       şeridi havada bırakır (bkz. yukarıdaki .page-content:has kuralı;
       "html.cerceve" ondan daha özgül olduğu için burada tekrar ediliyor). */
    html.cerceve .page-content:has(> .cari-ekran),
    html.cerceve .page-content:has(> .tb-ekran) { padding-bottom: 0; }
}

/* ===== İLETİŞİM ALANLARI (iletisim-baglanti.js, 2026-09-20) =================
   Telefon / e-posta / adres degerleri tiklanabilir: deger dugme gibi davranir
   ama METIN GIBI gorunur - panelin alan listesinde bir sira dugme olmasi
   kunyeyi form gibi gosterirdi. Ipucu yalnizca uzerine gelince: alti cizili
   ve vurgu renginde.
   Menu kilik olarak komut cubugunun Aktar menusunun aynisidir
   (rapor1.css .r1-aktar-menu); burada ayri durmasinin sebebi rapor1.css'in
   yalnizca tablo ekranlarina yuklenmesi - bu bilesen her sayfada calisir. */
.il-baglanti {
    display: inline;
    max-width: 100%;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    overflow-wrap: anywhere;
}

.il-baglanti:hover,
.il-baglanti:focus-visible {
    color: var(--ac);
    text-decoration: underline;
}

.il-menu {
    position: fixed;
    z-index: 2400;
    min-width: 200px;
    padding: 5px;
    background: var(--surf);
    border: 1px solid var(--bd);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card-lg);
}

.il-menu > button {
    display: block;
    width: 100%;
    padding: 7px 10px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--tx);
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.il-menu > button:hover {
    background: var(--ac-bg);
    color: var(--ac-text);
}

.il-menu > button > span {
    display: block;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--tx3);
    overflow-wrap: anywhere;
}