@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --zemin: #f4f6f9;
    --yuzey: #ffffff;
    --yuzey-2: #f8fafc;
    --cizgi: #e3e8ef;
    --metin: #111827;
    --soluk: #5b6474;
    --ana: #1e3a8a;
    --ana-koyu: #172e6e;
    --ana-acik: #eef2fb;
    --arti: #067647;
    --arti-zemin: #ecfdf3;
    --eksi: #b42318;
    --eksi-zemin: #fef3f2;
    --uyari: #93370d;
    --uyari-zemin: #fffaeb;
    /* grafik serileri (doğrulanmış kategorik palet, sıra sabit) */
    --s1: #2a78d6;
    --s2: #eb6834;
    --diger: #b8bfca;
    --kpi-mavi: #eff4fc;   --kpi-mavi-i: #1f5fb8;
    --kpi-turuncu: #fdf2ec; --kpi-turuncu-i: #b54708;
    --kpi-yesil: #ecfdf3;  --kpi-yesil-i: #067647;
    --kpi-mor: #f0f2fa;    --kpi-mor-i: #1e3a8a;
    --golge: 0 1px 2px rgba(16, 24, 40, .05);
    --radius: 12px;
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --zemin: #0f141b;
        --yuzey: #161c25;
        --yuzey-2: #1b222d;
        --cizgi: #2a3340;
        --metin: #e8ecf2;
        --soluk: #98a2b3;
        --ana: #8fb0ff;
        --ana-koyu: #b3c8ff;
        --ana-acik: #1c2a47;
        --arti: #47cd89;
        --arti-zemin: #0f2a1d;
        --eksi: #f97066;
        --eksi-zemin: #3a1715;
        --uyari: #fdb022;
        --uyari-zemin: #33260b;
        --s1: #3987e5;
        --s2: #d95926;
        --diger: #4a5566;
        --kpi-mavi: #172538;   --kpi-mavi-i: #7fb0f0;
        --kpi-turuncu: #33200f; --kpi-turuncu-i: #f5a15c;
        --kpi-yesil: #0f2a1d;  --kpi-yesil-i: #47cd89;
        --kpi-mor: #1c2a47;    --kpi-mor-i: #8fb0ff;
        --golge: none;
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --zemin: #0f141b;
    --yuzey: #161c25;
    --yuzey-2: #1b222d;
    --cizgi: #2a3340;
    --metin: #e8ecf2;
    --soluk: #98a2b3;
    --ana: #8fb0ff;
    --ana-koyu: #b3c8ff;
    --ana-acik: #1c2a47;
    --arti: #47cd89;
    --arti-zemin: #0f2a1d;
    --eksi: #f97066;
    --eksi-zemin: #3a1715;
    --uyari: #fdb022;
    --uyari-zemin: #33260b;
    --s1: #3987e5;
    --s2: #d95926;
    --diger: #4a5566;
    --kpi-mavi: #172538;   --kpi-mavi-i: #7fb0f0;
    --kpi-turuncu: #33200f; --kpi-turuncu-i: #f5a15c;
    --kpi-yesil: #0f2a1d;  --kpi-yesil-i: #47cd89;
    --kpi-mor: #1c2a47;    --kpi-mor-i: #8fb0ff;
    --golge: none;
    color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    background: var(--zemin);
    color: var(--metin);
    -webkit-font-smoothing: antialiased;
}
a { color: var(--ana); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.65rem; margin: 0 0 .2rem; letter-spacing: -.01em; font-weight: 900; }
h2 { font-size: 1.05rem; margin: 0; font-weight: 800; display: flex; align-items: center; gap: 8px; }
h2 .ikon { color: var(--ana); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82em; }
.soluk { color: var(--soluk); margin: 0; }
.sag { text-align: right; }
.kucuk-metin { font-size: .84rem; }
.ikon { width: 18px; height: 18px; flex: none; }
.gizli-etiket { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.icerik { max-width: 1320px; margin: 0 auto; padding: 24px 28px 40px; }
.alt { text-align: center; color: var(--soluk); font-size: .8rem; padding: 0 16px 90px; }

.baslik-satir { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.aksiyonlar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Butonlar */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 16px; border-radius: 12px; border: 1px solid var(--cizgi);
    background: var(--yuzey); color: var(--metin); font: inherit; font-weight: 800; cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, filter .12s;
}
.btn:hover { text-decoration: none; filter: brightness(.97); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .7; cursor: progress; }
.btn.birincil { background: var(--ana); border-color: var(--ana); color: #fff; box-shadow: 0 4px 12px rgba(91, 79, 214, .28); }
.btn.giris-btn { background: var(--arti); border-color: var(--arti); color: #fff; }
.btn.cikis-btn { background: var(--eksi); border-color: var(--eksi); color: #fff; }
.btn.tehlike { color: var(--eksi); border-color: color-mix(in srgb, var(--eksi) 40%, transparent); background: transparent; }
.btn.ince { padding: 6px 12px; font-weight: 700; font-size: .88rem; }
.btn.tam { width: 100%; }
.bag { font-weight: 700; font-size: .9rem; }

/* Kartlar */
.kartlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--golge); position: relative; overflow: hidden; }
.kart .etiket { display: block; color: var(--soluk); font-size: .84rem; font-weight: 700; }
.kart .deger { display: block; font-size: 1.6rem; margin: 2px 0; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kartlar.kucuk .deger { font-size: 1.25rem; }
.kartlar.kucuk .kart { padding: 14px 18px; }
.kart .alt-bilgi { color: var(--soluk); font-size: .8rem; font-variant-numeric: tabular-nums; }
.kpi .kpi-ikon { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 10px; }
.kpi .kpi-ikon .ikon { width: 20px; height: 20px; }
.kpi.mavi { background: linear-gradient(160deg, var(--kpi-mavi), var(--yuzey) 70%); }
.kpi.mavi .kpi-ikon { background: var(--kpi-mavi); color: var(--kpi-mavi-i); }
.kpi.turuncu { background: linear-gradient(160deg, var(--kpi-turuncu), var(--yuzey) 70%); }
.kpi.turuncu .kpi-ikon { background: var(--kpi-turuncu); color: var(--kpi-turuncu-i); }
.kpi.yesil { background: linear-gradient(160deg, var(--kpi-yesil), var(--yuzey) 70%); }
.kpi.yesil .kpi-ikon { background: var(--kpi-yesil); color: var(--kpi-yesil-i); }
.kpi.mor { background: linear-gradient(160deg, var(--kpi-mor), var(--yuzey) 70%); }
.kpi.mor .kpi-ikon { background: var(--kpi-mor); color: var(--kpi-mor-i); }
.oran-bar { height: 8px; background: var(--kpi-mor); border-radius: 99px; overflow: hidden; margin-top: 8px; }
.oran-bar span { display: block; height: 100%; background: var(--kpi-mor-i); border-radius: 99px; }
.arti { color: var(--arti); }
.eksi { color: var(--eksi); }

/* Panel */
.panel { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--radius); padding: 20px; box-shadow: var(--golge); margin-bottom: 18px; }
.panel.dar { max-width: 720px; }
.panel h2 { margin-bottom: 12px; }
.panel-bas { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 12px; flex-wrap: wrap; }
.panel-bas h2 { margin: 0; }
.iki-kolon { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; }
.iki-kolon.esit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.iki-kolon .panel { margin-bottom: 0; }
.alt-baslik { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--soluk); margin: 16px 0 8px; font-weight: 800; }
.alt-baslik:first-of-type { margin-top: 0; }
.bos { color: var(--soluk); text-align: center; padding: 24px 0; margin: 0; }
.bos.kucuk { padding: 4px 0; text-align: left; font-size: .9rem; }
.bos-durum { text-align: center; padding: 26px 10px; color: var(--soluk); }
.bos-gorsel { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 22px; display: grid; place-items: center; background: var(--ana-acik); color: var(--ana); }
.bos-gorsel .ikon { width: 28px; height: 28px; }

/* Kasa grafiği (genel bakış) */
.lejant { display: flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--soluk); font-weight: 700; }
.nokta { width: 10px; height: 10px; border-radius: 4px; display: inline-block; flex: none; }
.lejant .nokta { margin-left: 10px; }
.nokta.giris { background: var(--arti); }
.nokta.cikis { background: var(--eksi); }
.nokta.s1 { background: var(--s1); }
.nokta.s2 { background: var(--s2); }
.grafik { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; height: 200px; align-items: end; }
.sutun { display: flex; flex-direction: column; height: 100%; }
.cubuklar { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 3px; border-bottom: 1px solid var(--cizgi); }
.cubuklar .cubuk { width: 40%; max-width: 18px; min-height: 1px; border-radius: 4px 4px 0 0; }
.cubuklar .cubuk.giris { background: var(--arti); }
.cubuklar .cubuk.cikis { background: var(--eksi); opacity: .85; }
.sutun .ay { text-align: center; font-size: .75rem; color: var(--soluk); padding-top: 6px; }

.dagilim { margin-bottom: 10px; }
.dagilim-ust { display: flex; justify-content: space-between; font-size: .88rem; margin-bottom: 4px; gap: 10px; }
.dagilim-ust span:last-child { font-variant-numeric: tabular-nums; color: var(--soluk); }
.bar { height: 6px; background: var(--zemin); border-radius: 3px; overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: 3px; }
.bar .giris { background: var(--arti); }
.bar .cikis { background: var(--eksi); }

/* Tablolar */
.tablo-kap { overflow-x: auto; margin: -4px; padding: 4px; }
.tablo { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tablo th { text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--soluk); font-weight: 800; padding: 9px 10px; border-bottom: 1px solid var(--cizgi); white-space: nowrap; }
.tablo td { padding: 10px; border-bottom: 1px solid var(--cizgi); vertical-align: top; }
.tablo tbody tr:last-child td { border-bottom: none; }
.tablo tfoot td { font-weight: 800; border-top: 2px solid var(--cizgi); border-bottom: none; }
.tablo th.sag { text-align: right; }
.tablo tr.tik { cursor: pointer; }
.tablo tr.tik:hover td { background: var(--yuzey-2); }
.tablo .tarih { white-space: nowrap; color: var(--soluk); font-variant-numeric: tabular-nums; }
.tablo .tutar { white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
.tablo .aciklama { max-width: 280px; color: var(--soluk); font-size: .86rem; }

.rozet { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 800; white-space: nowrap; }
.rozet.giris, .rozet.r-gelir { background: var(--kpi-mavi); color: var(--kpi-mavi-i); }
.rozet.cikis, .rozet.r-gider { background: var(--kpi-turuncu); color: var(--kpi-turuncu-i); }
.rozet.giris { background: var(--arti-zemin); color: var(--arti); }
.rozet.cikis { background: var(--eksi-zemin); color: var(--eksi); }
.rozet.hatali { background: var(--uyari-zemin); color: var(--uyari); }
.rozet.zaman_asimi { background: var(--ana-acik); color: var(--ana); }
.mini-rozet { display: inline-block; margin-top: 3px; padding: 0 7px; border-radius: 6px; background: var(--zemin); color: var(--soluk); font-size: .72rem; font-weight: 800; }

.oturum-liste { list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.oturum-liste li { padding: 6px 0; border-bottom: 1px solid var(--cizgi); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.oturum-liste li:last-child { border-bottom: none; }

/* Formlar */
.form { display: flex; flex-direction: column; gap: 14px; }
.form label, .filtre label { display: flex; flex-direction: column; gap: 5px; font-size: .84rem; font-weight: 800; color: var(--soluk); }
input, select, textarea {
    font: inherit; font-weight: 600; color: var(--metin); background: var(--yuzey);
    border: 1px solid var(--cizgi); border-radius: 12px; padding: 9px 12px; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ana); outline-offset: -1px; border-color: transparent; }
.satir { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-alt { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.sil-form { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--cizgi); }

.tur-secim { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tur-secim label { cursor: pointer; }
.tur-secim input { position: absolute; opacity: 0; pointer-events: none; }
.tur-secim span { display: block; padding: 12px 14px; border: 2px solid var(--cizgi); border-radius: 14px; font-size: 1rem; color: var(--metin); }
.tur-secim small { display: block; font-weight: 600; color: var(--soluk); font-size: .8rem; }
.tur-secim .giris input:checked + span { border-color: var(--arti); background: var(--arti-zemin); color: var(--arti); }
.tur-secim .cikis input:checked + span { border-color: var(--eksi); background: var(--eksi-zemin); color: var(--eksi); }
.tur-secim input:focus-visible + span { outline: 2px solid var(--ana); }

.filtre { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)) 2fr auto; gap: 12px; align-items: end; }
.filtre-btn { display: flex; gap: 6px; }

/* Uyarılar */
.uyari { padding: 12px 16px; border-radius: 14px; margin-bottom: 16px; font-size: .92rem; font-weight: 700; background: var(--uyari-zemin); color: var(--uyari); }
.uyari.ok { background: var(--arti-zemin); color: var(--arti); }
.uyari.hata { background: var(--eksi-zemin); color: var(--eksi); }

/* Giriş sayfası */
body.auth {
    min-height: 100vh; display: grid; place-items: center; padding: 16px;
    background:
        radial-gradient(600px 400px at 10% 10%, color-mix(in srgb, #7b6ff0 22%, transparent), transparent 70%),
        radial-gradient(500px 400px at 90% 90%, color-mix(in srgb, #4a8fe0 20%, transparent), transparent 70%),
        var(--zemin);
}
.auth-kart { width: 100%; max-width: 410px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 24px; padding: 30px; box-shadow: 0 20px 60px rgba(35, 31, 58, .12); }
.auth-kart .marka { margin-bottom: 24px; }
.auth-kart h1 { font-size: 1.35rem; margin-bottom: 14px; }
.auth-kart .soluk { margin-bottom: 14px; }
.alt-not { text-align: center; color: var(--soluk); font-size: .78rem; margin: 20px 0 0; }

/* ================= RAPORLAR ================= */
.rapor-ust { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.firma-secim { display: flex; align-items: center; gap: 8px; background: var(--yuzey); border: 1px solid var(--cizgi); padding: 6px 8px 6px 6px; border-radius: 16px; box-shadow: var(--golge); margin: 0; }
.firma-secim select { width: auto; border: none; padding: 6px 8px; font-weight: 800; background: transparent; }
.firma-secim select + select { border-left: 1px solid var(--cizgi); border-radius: 0; }
.firma-rozet {
    width: 34px; height: 34px; border-radius: 11px; display: inline-grid; place-items: center; flex: none;
    background: var(--firma, var(--ana)); color: #fff; font-weight: 900; font-size: .85rem; letter-spacing: .02em;
}
.firma-rozet.kucuk { width: 24px; height: 24px; border-radius: 8px; font-size: .68rem; vertical-align: middle; margin-right: 4px; }
.sekmeler { display: flex; gap: 4px; flex-wrap: wrap; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 16px; padding: 5px; box-shadow: var(--golge); }
.sekmeler a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 12px; color: var(--soluk); font-weight: 800; font-size: .9rem; }
.sekmeler a:hover { background: var(--zemin); color: var(--metin); text-decoration: none; }
.sekmeler a.aktif { background: var(--ana); color: #fff; box-shadow: 0 4px 12px rgba(91, 79, 214, .28); }
.sekmeler .ikon { width: 16px; height: 16px; }

/* Hero */
.hero {
    position: relative; overflow: hidden; border-radius: 24px; padding: 26px 28px; margin-bottom: 18px; color: #fff;
    display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
    background: linear-gradient(125deg, #6a5ef0 0%, #5b4fd6 45%, #3f86dc 100%);
    box-shadow: 0 14px 40px rgba(91, 79, 214, .28);
}
.hero-metin, .hero-deger { position: relative; z-index: 1; }
.hero-ust { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .16); padding: 5px 12px; border-radius: 99px; font-weight: 800; font-size: .85rem; }
.hero h1 { margin: 12px 0 4px; font-size: 1.7rem; }
.hero p { margin: 0; opacity: .88; font-weight: 600; }
.hero-deger { text-align: right; }
.hero-deger > span:first-child { display: block; font-weight: 800; opacity: .85; font-size: .88rem; }
.hero-deger strong { display: block; font-size: 2.5rem; font-weight: 900; line-height: 1.1; margin: 4px 0 8px; font-variant-numeric: tabular-nums; }
.hero-deger strong.eksi-acik { color: #ffd3cf; }
.hero-cip { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: #4639c4; padding: 5px 12px; border-radius: 99px; font-weight: 900; font-size: .85rem; }
.hero-sus { position: absolute; right: -30px; top: -30px; width: 360px; height: 360px; opacity: .14; pointer-events: none; }
.hero-sus circle { fill: #fff; }

/* Aylık SVG grafik */
.grafik-kap { width: 100%; overflow-x: auto; }
.grafik-svg { width: 100%; min-width: 560px; height: auto; display: block; }
.grafik-svg .izgara { stroke: var(--cizgi); stroke-width: 1; stroke-dasharray: 3 4; }
.grafik-svg .taban { stroke: var(--soluk); stroke-opacity: .45; stroke-width: 1; }
.grafik-svg .eksen { fill: var(--soluk); font-size: 11px; font-weight: 700; font-family: inherit; font-variant-numeric: tabular-nums; }
.grafik-svg .cubuk.s1 { fill: var(--s1); }
.grafik-svg .cubuk.s2 { fill: var(--s2); }
.grafik-svg .vurgu-alan { fill: var(--ana); opacity: 0; transition: opacity .15s; }
.grafik-svg .ay-grup { cursor: pointer; }
.grafik-svg .ay-grup.ipucu-aktif .vurgu-alan { opacity: .07; }
.grafik-svg .bos-ay .eksen { opacity: .5; }
.ay-cipleri { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ay-cip { display: flex; flex-direction: column; padding: 8px 14px; border-radius: 14px; background: var(--yuzey-2); border: 1px solid var(--cizgi); color: var(--metin); min-width: 120px; }
.ay-cip:hover { text-decoration: none; border-color: var(--ana); }
.ay-cip span { font-size: .78rem; color: var(--soluk); font-weight: 800; }
.ay-cip strong { font-variant-numeric: tabular-nums; font-weight: 900; }

.grafik-gorunum[hidden] { display: none; }
.segment button { padding: 6px 12px; border-radius: 10px; font: inherit; font-weight: 800; font-size: .84rem; color: var(--soluk); background: none; border: none; cursor: pointer; }
.segment button:hover { color: var(--metin); }
.segment button.aktif { background: var(--ana-acik); color: var(--ana); }

/* Halka grafik */
.pasta-kap { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: center; }
.pasta { width: 100%; max-width: 200px; height: auto; }
.pasta .dilim, .pasta circle { stroke: var(--yuzey); stroke-width: 2; cursor: pointer; transition: opacity .15s; }
.pasta:hover .dilim:not(.ipucu-aktif) { opacity: .55; }
.pasta-ust { fill: var(--soluk); font-size: 10px; font-weight: 800; font-family: inherit; }
.pasta-deger { fill: var(--metin); font-size: 15px; font-weight: 900; font-family: inherit; }
.pasta-lejant { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pasta-lejant li { display: flex; align-items: center; gap: 9px; font-size: .9rem; font-weight: 700; }
.pasta-lejant a { color: var(--metin); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pasta-lejant li > span:nth-child(2) { flex: 1; color: var(--soluk); }
.lejant-deger { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lejant-deger small { color: var(--soluk); margin-left: 4px; }

/* Yatay çubuk listeleri */
.yatay-bar, .sirali { display: block; color: var(--metin); padding: 8px 10px; margin: 0 -10px; border-radius: 12px; }
.yatay-bar:hover, .sirali:hover { background: var(--yuzey-2); text-decoration: none; }
.yb-ust { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; font-weight: 700; margin-bottom: 5px; }
.yb-ust > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yb-ust strong { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 900; }
.yb-iz { display: block; height: 10px; background: var(--zemin); border-radius: 99px; overflow: hidden; }
.yb-iz.ince { height: 7px; }
.yb-iz > span { display: block; height: 100%; border-radius: 99px; }
.s1 { background: var(--s1); }
.s2 { background: var(--s2); }
.yb-alt { display: block; font-size: .75rem; color: var(--soluk); font-weight: 700; margin-top: 3px; }
.sirali { display: flex; align-items: center; gap: 12px; }
.sira-no { width: 28px; height: 28px; border-radius: 10px; display: grid; place-items: center; background: var(--kpi-turuncu); color: var(--kpi-turuncu-i); font-weight: 900; font-size: .82rem; flex: none; }
.sirali-govde { flex: 1; min-width: 0; }

/* Sorumluluk merkezleri */
.merkezler { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.merkez { display: block; padding: 16px; border-radius: 16px; background: var(--yuzey-2); border: 1px solid var(--cizgi); color: var(--metin); transition: transform .15s, border-color .15s; }
.merkez:hover { text-decoration: none; border-color: var(--ana); transform: translateY(-2px); }
.merkez-bas { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.merkez-bas strong { display: block; font-weight: 900; }
.merkez-bas small { color: var(--soluk); font-weight: 700; }
.merkez-harf { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--ana-acik); color: var(--ana); font-weight: 900; }
.merkez-satir { display: grid; grid-template-columns: 42px 1fr auto; gap: 8px; align-items: center; font-size: .82rem; font-weight: 700; color: var(--soluk); margin-bottom: 6px; }
.merkez-satir b { color: var(--metin); font-variant-numeric: tabular-nums; }
.mini-iz { height: 7px; background: var(--zemin); border-radius: 99px; overflow: hidden; }
.mini-iz span { display: block; height: 100%; border-radius: 99px; }
.merkez-net { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--cizgi); font-weight: 900; font-variant-numeric: tabular-nums; }

/* Cariler */
.cari-liste { list-style: none; margin: 0; padding: 0; }
.cari-liste li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--cizgi); }
.cari-liste li:last-child { border-bottom: none; }
.cari-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; background: var(--kpi-mavi); color: var(--kpi-mavi-i); flex: none; }
.cari-liste li:nth-child(2n) .cari-avatar { background: var(--kpi-turuncu); color: var(--kpi-turuncu-i); }
.cari-liste li:nth-child(3n) .cari-avatar { background: var(--kpi-yesil); color: var(--kpi-yesil-i); }
.cari-ad { flex: 1; min-width: 0; }
.cari-ad a { display: block; color: var(--metin); font-weight: 800; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cari-ad small { color: var(--soluk); font-weight: 600; }
.cari-liste strong { font-variant-numeric: tabular-nums; font-weight: 900; white-space: nowrap; }

/* Pivot / kırılım tablosu */
.segment { display: inline-flex; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 14px; padding: 4px; gap: 2px; flex-wrap: wrap; }
.segment a { padding: 7px 12px; border-radius: 10px; font-weight: 800; font-size: .84rem; color: var(--soluk); }
.segment a:hover { text-decoration: none; color: var(--metin); }
.segment a.aktif { background: var(--ana-acik); color: var(--ana); }
.pivot td { padding: 8px 10px; vertical-align: middle; }
.pivot tbody tr.acilir { cursor: pointer; }
.pivot tbody tr:hover td { background: var(--yuzey-2); }
.agac-ad { padding-left: calc(10px + var(--sv) * 22px) !important; white-space: nowrap; min-width: 280px; }
.agac-ad a { color: var(--metin); font-weight: 700; }
.agac-ad .adet { margin-left: 6px; color: var(--soluk); font-size: .72rem; font-weight: 800; background: var(--zemin); padding: 0 6px; border-radius: 6px; }
.ac-kapa { width: 22px; height: 22px; border-radius: 7px; border: none; background: var(--ana-acik); color: var(--ana); cursor: pointer; margin-right: 6px; vertical-align: middle; position: relative; }
.ac-kapa::before { content: ""; position: absolute; left: 7px; top: 6px; border: solid currentColor; border-width: 0 2px 2px 0; padding: 3px; transform: rotate(-45deg); transition: transform .15s; }
.ac-kapa[aria-expanded="true"]::before { transform: rotate(45deg); left: 7px; top: 5px; }
.yaprak { display: inline-block; width: 22px; margin-right: 6px; text-align: center; }
.yaprak::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--cizgi); vertical-align: middle; }
.pivot tr.sv0 td { background: var(--yuzey-2); font-weight: 900; }
.pivot tr.sv0 .agac-ad a { font-weight: 900; font-size: 1rem; }
.pivot tr.sv1 .agac-ad a { font-weight: 800; }
.pivot tr.sv3 td, .pivot tr.sv2 td { font-size: .88rem; }
.pivot .sifir { color: var(--soluk); opacity: .6; }
.pivot .toplam-hucre { font-weight: 900; }
.pay-hucre { min-width: 120px; white-space: nowrap; }
.pay-hucre small { color: var(--soluk); font-weight: 700; margin-left: 6px; font-variant-numeric: tabular-nums; }
.pay-iz { display: inline-block; width: 60px; height: 7px; border-radius: 99px; background: var(--zemin); overflow: hidden; vertical-align: middle; }
.pay-iz span { display: block; height: 100%; border-radius: 99px; }
.ara-toplam td { font-weight: 900; border-top: 2px solid var(--cizgi); }
.ara-toplam.gelir td:first-child { color: var(--kpi-mavi-i); }
.ara-toplam.gider td:first-child { color: var(--kpi-turuncu-i); }
.kar-satir td { background: var(--ana-acik); font-size: 1.02rem; font-weight: 900; }
.kar-satir td:first-child { border-radius: 12px 0 0 12px; color: var(--ana); }
.kar-satir td:last-child { border-radius: 0 12px 12px 0; }

/* Hareketler filtre çipleri */
.rapor-filtre { grid-template-columns: repeat(4, minmax(130px, 1fr)) 1.6fr auto; }
.filtre-cipleri { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: -6px 0 16px; }
.cip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 99px; background: var(--ana-acik); color: var(--ana); font-weight: 800; font-size: .85rem; }
.cip:hover { text-decoration: none; filter: brightness(.96); }
.cip small { opacity: .75; }
.sayfalama { display: flex; gap: 4px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.sayfalama a, .sayfalama span { min-width: 36px; padding: 6px 10px; border-radius: 10px; text-align: center; font-weight: 800; color: var(--soluk); }
.sayfalama a:hover { background: var(--zemin); text-decoration: none; }
.sayfalama a.aktif { background: var(--ana); color: #fff; }

/* Gelir tablosu */
.gt td { padding: 8px 12px; vertical-align: middle; }
.gt .kod { width: 70px; color: var(--soluk); font-variant-numeric: tabular-nums; font-weight: 700; }
.gt-hesap td:nth-child(2) { padding-left: 24px; }
.gt-hesap.sifir td { color: var(--soluk); opacity: .6; }
.gt-bolum td { background: var(--yuzey-2); font-weight: 900; border-top: 1px solid var(--cizgi); }
.harf { width: 26px; height: 26px; border-radius: 9px; display: inline-grid; place-items: center; background: var(--ana-acik); color: var(--ana); font-weight: 900; font-size: .82rem; }
.gt-sonuc td { background: var(--kpi-yesil); color: var(--kpi-yesil-i); font-weight: 900; font-size: 1rem; }
.gt-sonuc.zarar td { background: var(--eksi-zemin); color: var(--eksi); }
.gt-sonuc .harf { background: var(--yuzey); }

/* Yükleme */
.dosya-alani {
    position: relative; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 6px !important;
    padding: 30px 16px; border: 2px dashed var(--cizgi); border-radius: 18px; background: var(--yuzey-2); text-align: center; cursor: pointer;
    transition: border-color .15s, background .15s;
}
.dosya-alani:hover, .dosya-alani.surukle { border-color: var(--ana); background: var(--ana-acik); }
.dosya-alani.secildi { border-style: solid; border-color: var(--arti); background: var(--arti-zemin); }
.dosya-alani input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dosya-ikon { width: 52px; height: 52px; border-radius: 18px; display: grid; place-items: center; background: var(--ana); color: #fff; box-shadow: 0 6px 16px rgba(91, 79, 214, .3); }
.dosya-ikon .ikon { width: 24px; height: 24px; }
.dosya-alani strong { color: var(--metin); font-size: .98rem; }
.dosya-alani small { color: var(--soluk); font-weight: 600; }
.ipucu-panel { background: linear-gradient(160deg, var(--kpi-mor), var(--yuzey) 60%); }
.adimlar { margin: 0; padding: 0; list-style: none; counter-reset: adim; display: flex; flex-direction: column; gap: 14px; }
.adimlar li { counter-increment: adim; position: relative; padding-left: 44px; color: var(--soluk); font-size: .92rem; }
.adimlar li strong { display: block; color: var(--metin); }
.adimlar li::before { content: counter(adim); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 10px; background: var(--ana); color: #fff; font-weight: 900; display: grid; place-items: center; }

/* İpucu kutusu */
.ipucu {
    position: fixed; z-index: 100; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s;
    background: #231f3a; color: #fff; padding: 9px 12px; border-radius: 12px; font-size: .82rem; line-height: 1.45;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25); max-width: 300px; font-variant-numeric: tabular-nums;
}
.ipucu.gorunur { opacity: 1; transform: none; }
.ipucu strong { display: block; font-weight: 900; margin-bottom: 2px; }
.ipucu span { display: block; opacity: .9; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ipucu { background: #f1f0f7; color: #231f3a; } }
:root[data-theme="dark"] .ipucu { background: #f1f0f7; color: #231f3a; }


/* ================= FECRİ ASİSTAN ================= */
.fecri { position: fixed; right: 20px; bottom: 20px; z-index: 50; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.fecri-avatar {
    position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none;
    font-weight: 900; color: #fff; background: linear-gradient(135deg, #8b7ff5, #5b4fd6 55%, #4a8fe0);
}
.fecri-avatar.buyuk { width: 44px; height: 44px; font-size: 1.15rem; }
.fecri-avatar i { position: absolute; right: 0; bottom: 1px; width: 10px; height: 10px; border-radius: 50%; background: #2fce83; border: 2px solid var(--yuzey); }
.fecri-balon {
    display: flex; align-items: center; gap: 10px; padding: 6px 18px 6px 6px; border-radius: 99px; border: 1px solid var(--cizgi);
    background: var(--yuzey); color: var(--metin); font: inherit; font-weight: 900; cursor: pointer;
    box-shadow: 0 10px 30px rgba(91, 79, 214, .25); transition: transform .15s;
}
.fecri-balon:hover { transform: translateY(-2px); }
.fecri.acik .fecri-balon-metin { display: none; }
.fecri.acik .fecri-balon { padding: 6px; }
.fecri-pencere {
    width: 370px; max-width: calc(100vw - 32px); height: 540px; max-height: calc(100vh - 110px);
    display: flex; flex-direction: column; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 24px; overflow: hidden;
    box-shadow: 0 24px 60px rgba(35, 31, 58, .22); animation: fecriAc .18s ease-out;
}
.fecri-pencere[hidden] { display: none; }
@keyframes fecriAc { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.fecri-bas { display: flex; align-items: center; gap: 10px; padding: 14px 16px; color: #fff; background: linear-gradient(125deg, #6a5ef0, #5b4fd6 50%, #3f86dc); }
.fecri-bas .fecri-avatar { background: rgba(255, 255, 255, .2); }
.fecri-bas .fecri-avatar i { border-color: #5b4fd6; }
.fecri-bas div { flex: 1; }
.fecri-bas strong { display: block; font-weight: 900; font-size: 1.02rem; line-height: 1.1; }
.fecri-bas small { opacity: .85; font-weight: 700; font-size: .78rem; }
.fecri-kapat { width: 32px; height: 32px; border-radius: 10px; border: none; background: rgba(255, 255, 255, .16); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.fecri-kapat:hover { background: rgba(255, 255, 255, .28); }
.fecri-mesajlar { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--yuzey-2); }
.fecri-mesaj { max-width: 88%; padding: 10px 13px; border-radius: 18px; font-size: .9rem; line-height: 1.45; }
.fecri-mesaj p { margin: 0; }
.fecri-mesaj p + p { margin-top: 4px; }
.fecri-mesaj.bot { align-self: flex-start; background: var(--yuzey); border: 1px solid var(--cizgi); border-bottom-left-radius: 6px; }
.fecri-mesaj.ben { align-self: flex-end; background: var(--ana); color: #fff; border-bottom-right-radius: 6px; font-weight: 700; }
.fecri-mesaj strong { font-weight: 900; }
.fecri-mesaj.bot strong { color: var(--ana-koyu); }
.fecri-liste { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.fecri-liste a, .fecri-liste span { color: var(--metin); }
.fecri-liste a { display: grid; grid-template-columns: 22px 1fr; gap: 0 8px; padding: 6px 8px; border-radius: 10px; background: var(--yuzey-2); font-size: .84rem; }
.fecri-liste a:hover { text-decoration: none; background: var(--ana-acik); }
.fecri-liste b { grid-row: span 2; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--ana-acik); color: var(--ana); font-size: .75rem; }
.fecri-liste a > span { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fecri-liste em { font-style: normal; color: var(--soluk); font-weight: 700; font-size: .78rem; font-variant-numeric: tabular-nums; }
.fecri-baglantilar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fecri-baglantilar a { padding: 5px 10px; border-radius: 99px; background: var(--ana-acik); color: var(--ana); font-weight: 800; font-size: .8rem; }
.fecri-baglantilar a:hover { text-decoration: none; filter: brightness(.96); }
.fecri-mesaj.yaziyor { display: flex; gap: 4px; padding: 13px 14px; }
.fecri-mesaj.yaziyor span { width: 7px; height: 7px; border-radius: 50%; background: var(--soluk); opacity: .4; animation: fecriNokta 1s infinite; }
.fecri-mesaj.yaziyor span:nth-child(2) { animation-delay: .15s; }
.fecri-mesaj.yaziyor span:nth-child(3) { animation-delay: .3s; }
@keyframes fecriNokta { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.fecri-oneriler { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px 0; background: var(--yuzey); scrollbar-width: none; }
.fecri-oneriler:empty { display: none; }
.fecri-oneriler button { flex: none; padding: 6px 11px; border-radius: 99px; border: 1px solid var(--cizgi); background: var(--yuzey); color: var(--ana); font: inherit; font-weight: 800; font-size: .8rem; cursor: pointer; white-space: nowrap; }
.fecri-oneriler button:hover { border-color: var(--ana); background: var(--ana-acik); }
.fecri-form { display: flex; gap: 8px; padding: 12px; background: var(--yuzey); }
.fecri-form input { border-radius: 99px; padding: 10px 16px; }
.fecri-form button { width: 42px; height: 42px; flex: none; border-radius: 50%; border: none; background: var(--ana); color: #fff; display: grid; place-items: center; cursor: pointer; }
.fecri-form button svg { width: 18px; height: 18px; }
@media (max-width: 560px) {
    .fecri { right: 12px; bottom: 12px; }
    .fecri-balon-metin { display: none; }
    .fecri-balon { padding: 6px; }
    .fecri-pencere { height: calc(100vh - 100px); }
}
@media print { .fecri { display: none; } }


/* ================= GÖREV TAKİBİ (Google Sheets) ================= */
:root { --d-yeni: #8a86a0; --d-devam: #2a78d6; --d-engel: #d03b3b; --d-tamam: #0ca30c; --d-diger: #7b6ff0; }
.d-yeni { --d: var(--d-yeni); } .d-devam { --d: var(--d-devam); } .d-engel { --d: var(--d-engel); } .d-tamam { --d: var(--d-tamam); } .d-diger { --d: var(--d-diger); }
.canli-satir { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .86rem; }
.canli-nokta { width: 9px; height: 9px; border-radius: 50%; background: var(--soluk); flex: none; }
.canli-nokta.canli { background: #0ca30c; box-shadow: 0 0 0 0 rgba(12, 163, 12, .5); animation: nabiz 2s infinite; }
.canli-nokta.yukleniyor { background: var(--s1); animation: nabiz 1s infinite; }
.canli-nokta.hata { background: var(--eksi); }
@keyframes nabiz { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 0%, rgba(12, 163, 12, .45)); } 70% { box-shadow: 0 0 0 8px rgba(12, 163, 12, 0); } 100% { box-shadow: 0 0 0 0 rgba(12, 163, 12, 0); } }
.sheet-ayar[hidden] { display: none; }
.kart.iskelet { min-height: 118px; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.kart.iskelet span { display: block; height: 14px; border-radius: 8px; background: linear-gradient(90deg, var(--zemin), var(--cizgi), var(--zemin)); background-size: 200% 100%; animation: iskelet 1.2s infinite; }
.kart.iskelet span:first-child { width: 50%; } .kart.iskelet span:last-child { width: 30%; height: 26px; }
@keyframes iskelet { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.durum-kart { border-top: 4px solid var(--d, var(--ana)); }
.durum-kart.toplam-kart { border-top-color: var(--ana); background: linear-gradient(160deg, var(--kpi-mor), var(--yuzey) 70%); }
.durum-ikon { width: 34px; height: 34px; border-radius: 11px; display: inline-grid; place-items: center; font-weight: 900; font-size: 1rem; color: var(--d); background: color-mix(in srgb, var(--d) 14%, transparent); margin-bottom: 8px; }
.ilerleme-yuzde { font-size: 1.1rem; font-weight: 900; color: var(--d-tamam); }
.ilerleme-cubuk { display: flex; gap: 3px; height: 16px; border-radius: 99px; overflow: hidden; background: var(--zemin); }
.ilerleme-cubuk span { display: block; height: 100%; background: var(--d); transition: width .6s cubic-bezier(.2, .8, .2, 1); cursor: pointer; }
.ilerleme-cubuk span:first-child { border-radius: 99px 0 0 99px; } .ilerleme-cubuk span:last-child { border-radius: 0 99px 99px 0; }
.ilerleme-lejant { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: .84rem; font-weight: 800; color: var(--soluk); }
.ilerleme-lejant span { display: inline-flex; align-items: center; gap: 7px; }
.ilerleme-lejant .nokta { background: var(--d); }
.pano { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 18px; }
.pano-sutun { background: color-mix(in srgb, var(--d) 6%, var(--yuzey-2)); border: 1px solid var(--cizgi); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 160px; }
.pano-bas { display: flex; align-items: center; gap: 8px; padding: 2px 4px 6px; }
.pano-bas .durum-ikon { width: 28px; height: 28px; font-size: .85rem; margin: 0; border-radius: 9px; }
.pano-bas strong { flex: 1; font-weight: 900; }
.pano-sayi { min-width: 26px; padding: 1px 8px; border-radius: 99px; background: var(--yuzey); border: 1px solid var(--cizgi); text-align: center; font-weight: 900; font-size: .8rem; color: var(--soluk); }
.pano-kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-left: 4px solid var(--d); border-radius: 14px; padding: 12px 14px; box-shadow: var(--golge); display: flex; flex-direction: column; gap: 8px; transition: transform .15s, box-shadow .15s; }
.pano-kart:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(35, 31, 58, .1); }
.pano-baslik { font-weight: 900; font-size: .95rem; }
.pano-etiket { align-self: flex-start; padding: 2px 9px; border-radius: 99px; background: var(--ana-acik); color: var(--ana); font-size: .74rem; font-weight: 800; }
.pano-not { margin: 0; color: var(--soluk); font-size: .84rem; }
.pano-alt { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .8rem; font-weight: 700; color: var(--soluk); }
.pano-kisi { display: inline-flex; align-items: center; gap: 6px; }
.pano-kisi.bos { font-style: italic; opacity: .7; }
.mini-avatar { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-style: normal; font-weight: 900; font-size: .7rem; background: var(--kpi-mavi); color: var(--kpi-mavi-i); }
.pano-tarih.gecikti, td.gecikti { color: var(--eksi); font-weight: 900; }
.rozet.d-yeni, .rozet.d-devam, .rozet.d-engel, .rozet.d-tamam, .rozet.d-diger { background: color-mix(in srgb, var(--d) 14%, transparent); color: var(--d); }
.sheet-tablo th.siralanabilir { cursor: pointer; user-select: none; }
.sheet-tablo th.siralanabilir:hover { color: var(--metin); }
.sheet-tablo th.artan::after { content: " ▲"; } .sheet-tablo th.azalan::after { content: " ▼"; }


/* ================= NAKİT AKIŞ ================= */
:root { --n-pos: #2a78d6; --n-cekt: #1baf7a; --n-diger: #eda100; --n-gider: #eb6834; --n-ceko: #e87ba4; }
:root[data-theme="dark"] { --n-pos: #3987e5; --n-cekt: #199e70; --n-diger: #c98500; --n-gider: #d95926; --n-ceko: #d55181; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --n-pos: #3987e5; --n-cekt: #199e70; --n-diger: #c98500; --n-gider: #d95926; --n-ceko: #d55181; } }
.nokta.n-pos, .yb-iz .n-pos { background: var(--n-pos); } .nokta.n-cekt, .yb-iz .n-cekt { background: var(--n-cekt); }
.nokta.n-diger, .yb-iz .n-diger { background: var(--n-diger); } .nokta.n-gider, .yb-iz .n-gider { background: var(--n-gider); }
.nokta.n-ceko, .yb-iz .n-ceko { background: var(--n-ceko); }
.akis-cubuk.n-pos { fill: var(--n-pos); } .akis-cubuk.n-cekt { fill: var(--n-cekt); } .akis-cubuk.n-diger { fill: var(--n-diger); }
.akis-cubuk.n-gider { fill: var(--n-gider); } .akis-cubuk.n-ceko { fill: var(--n-ceko); }
.nokta.uyari-nokta { background: #fab219; }
.nakit-hero {
    position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    padding: 24px 28px; margin-bottom: 18px; border-radius: 24px; color: #fff;
    background: linear-gradient(125deg, #0f9b6c 0%, #14866a 40%, #2a78d6 100%); box-shadow: 0 14px 40px rgba(20, 134, 106, .28);
}
.nakit-hero.dusus { background: linear-gradient(125deg, #5b4fd6 0%, #4a5fd8 45%, #2a78d6 100%); box-shadow: 0 14px 40px rgba(91, 79, 214, .28); }
.nh-sol { display: flex; flex-direction: column; gap: 4px; z-index: 1; }
.nh-etiket { font-weight: 800; opacity: .85; font-size: .9rem; }
.nh-deger { font-size: 2.6rem; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.nh-alt { font-weight: 700; opacity: .88; font-size: .88rem; }
.nh-grafik { width: min(360px, 100%); height: 90px; }
.nh-grafik svg { width: 100%; height: 100%; overflow: visible; }
.nh-cizgi { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.nh-alan { fill: rgba(255, 255, 255, .16); }
.nh-nokta { fill: #fff; stroke: rgba(255, 255, 255, .4); stroke-width: 6; }
.metin-ikon { font-weight: 900; font-size: 1.1rem; }
.kpi.kirmizi { background: linear-gradient(160deg, var(--eksi-zemin), var(--yuzey) 70%); }
.kpi.kirmizi .kpi-ikon { background: var(--eksi-zemin); color: var(--eksi); }
.nakit-svg { min-width: 680px; }
.bk-cizgi { fill: none; stroke: var(--s1); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.bk-nokta { fill: var(--yuzey); stroke: var(--s1); stroke-width: 2; }
.bk-nokta.son { fill: var(--s1); r: 5; }
.bk-uyari { fill: none; stroke: #fab219; stroke-width: 3; }
.bk-sicrama { stroke: #fab219; stroke-width: 2; stroke-dasharray: 4 3; }
.bk-hedef { fill: transparent; cursor: crosshair; }
.bk-capraz { stroke: var(--soluk); stroke-opacity: 0; stroke-dasharray: 3 3; pointer-events: none; transition: stroke-opacity .1s; }
.bk-capraz.gorunur { stroke-opacity: .6; }
.akis-hedef { fill: var(--ana); opacity: 0; transition: opacity .15s; }
.akis-gun { cursor: pointer; }
.akis-gun.ipucu-aktif .akis-hedef { opacity: .07; }
.panel.gorundu .akis-cubuk { transform-box: fill-box; animation: akisBuyu .6s cubic-bezier(.2, .8, .2, 1) both; }
.panel.gorundu .akis-cubuk.n-gider, .panel.gorundu .akis-cubuk.n-ceko { transform-origin: 50% 0; }
.panel.gorundu .akis-cubuk.n-pos, .panel.gorundu .akis-cubuk.n-cekt, .panel.gorundu .akis-cubuk.n-diger { transform-origin: 50% 100%; }
@keyframes akisBuyu { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.kontrol-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.kontrol { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--cizgi); background: var(--yuzey-2); }
.kontrol strong { display: block; font-weight: 900; font-size: .92rem; }
.kontrol div > span { color: var(--soluk); font-size: .86rem; }
.kontrol-ikon { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex: none; font-weight: 900; }
.kontrol.devir { border-color: color-mix(in srgb, #fab219 45%, var(--cizgi)); background: var(--uyari-zemin); }
.kontrol.devir .kontrol-ikon { background: #fab219; color: #3a2e00; }
.kontrol.hesap .kontrol-ikon, .kontrol.eksi-bakiye .kontrol-ikon { background: var(--eksi); color: #fff; }
.kontrol.bilgi .kontrol-ikon { background: var(--ana-acik); color: var(--ana); }
.nakit-tablo td { vertical-align: middle; }
.nakit-tablo .sifir { color: var(--soluk); opacity: .5; }
.nakit-tablo .kalin { font-weight: 900; }
.nakit-tablo .tarih small { margin-left: 6px; }
.nakit-tablo tr.satir-uyari td { background: color-mix(in srgb, #fab219 10%, transparent); }
.nakit-tablo .devir-hucre { box-shadow: inset 3px 0 0 #fab219; }
.rozet.r-uyari { background: var(--uyari-zemin); color: var(--uyari); }
.rozet.r-hata { background: var(--eksi-zemin); color: var(--eksi); }
.rozet.r-ok { background: var(--arti-zemin); color: var(--arti); }
@media (max-width: 560px) { .nh-deger { font-size: 2rem; } .nakit-hero { padding: 20px; } }


/* ================= HESAP DEFTERİ (Sayfa5) ================= */
.defter-filtre { grid-template-columns: repeat(4, minmax(130px, 1fr)) 1.6fr auto; }
button.ay-cip { font: inherit; text-align: left; cursor: pointer; }
.ay-cip.secili { border-color: var(--ana); background: var(--ana-acik); }
.grafik-svg .soluk-ay { opacity: .35; }
.dugme-bar { width: calc(100% + 20px); border: none; background: none; font: inherit; text-align: left; cursor: pointer; color: var(--metin); }
button.tm-kutu { border: none; background: none; font: inherit; cursor: pointer; }
.hesap-satir { display: block; width: 100%; padding: 10px 12px; margin-bottom: 6px; border-radius: 14px; border: 1px solid var(--cizgi); background: var(--yuzey-2); font: inherit; color: var(--metin); text-align: left; cursor: pointer; transition: border-color .15s; }
.hesap-satir:hover { border-color: var(--ana); }
.hs-bas { display: flex; align-items: center; gap: 10px; }
.hs-bas > div { flex: 1; min-width: 0; }
.hs-bas strong { display: block; font-weight: 900; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-bas small { color: var(--soluk); font-weight: 700; font-size: .76rem; }
.hs-ikon { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--kpi-mavi); color: var(--kpi-mavi-i); flex: none; font-size: .95rem; }
.hs-net { font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .88rem; }
.hs-iki { display: flex; align-items: center; margin-top: 8px; height: 8px; }
.hs-yari { flex: 1; display: flex; height: 100%; background: var(--zemin); overflow: hidden; }
.hs-yari.sol { justify-content: flex-end; border-radius: 99px 0 0 99px; }
.hs-yari.sag { border-radius: 0 99px 99px 0; }
.hs-giris { background: var(--s1); height: 100%; border-radius: 0 99px 99px 0; }
.hs-cikis { background: var(--s2); height: 100%; border-radius: 99px 0 0 99px; }
.hs-orta { width: 2px; height: 14px; background: var(--soluk); opacity: .5; flex: none; }
.hs-lejant { justify-content: center; margin-top: 8px; }
.kat-rozet { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; }
.kat-rozet::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--renk, var(--diger)); }
.rozet.tur-1 { background: var(--kpi-mavi); color: var(--kpi-mavi-i); }
.rozet.tur-2 { background: var(--kpi-turuncu); color: var(--kpi-turuncu-i); }
.rozet.tur-3 { background: var(--kpi-mor); color: var(--kpi-mor-i); }
.rozet.tur-4 { background: var(--kpi-yesil); color: var(--kpi-yesil-i); }
.rozet.tur-5, .rozet.tur-0 { background: var(--zemin); color: var(--soluk); }
.defter-tablo td { vertical-align: middle; }
#turSec button { white-space: nowrap; }
@media (max-width: 980px) { .defter-filtre { grid-template-columns: 1fr 1fr; } }

/* ================= UYGULAMA KABUĞU ================= */
body.uygulama { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; }
.yan {
    position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 18px; padding: 20px 14px;
    background: var(--yuzey); border-right: 1px solid var(--cizgi); overflow-y: auto; z-index: 40;
}
.yan .marka { padding: 4px 8px 8px; display: flex; align-items: center; gap: 10px; color: var(--metin); }
.yan .marka:hover { text-decoration: none; }
.yan .marka strong { display: block; font-size: 1.05rem; line-height: 1.1; font-weight: 900; }
.yan .marka small { color: var(--soluk); font-size: .76rem; font-weight: 700; }
.logo {
    width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; font-weight: 900; letter-spacing: .02em;
    color: #fff; background: linear-gradient(135deg, #8b7ff5, #5b4fd6 55%, #4a8fe0); box-shadow: 0 6px 16px rgba(91, 79, 214, .35); flex: none;
}
.marka { display: flex; align-items: center; gap: 10px; }
.marka strong { display: block; font-weight: 900; }
.marka small { display: block; color: var(--soluk); font-size: .75rem; }
.yan-menu { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.yan-grup { font-size: .7rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; color: var(--soluk); opacity: .8; padding: 14px 12px 6px; }
.yan-menu a {
    position: relative; display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 12px;
    color: var(--soluk); font-weight: 800; font-size: .93rem; transition: background .15s, color .15s;
}
.yan-menu a .ikon { width: 19px; height: 19px; }
.yan-menu a:hover { background: var(--zemin); color: var(--metin); text-decoration: none; }
.yan-menu a.aktif { background: var(--ana-acik); color: var(--ana); }
.yan-menu a.aktif::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--ana); }
.yan-alt { display: flex; flex-direction: column; gap: 10px; }
.tema-dugme { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border-radius: 12px; border: 1px dashed var(--cizgi); background: none; color: var(--soluk); font: inherit; font-weight: 800; font-size: .82rem; cursor: pointer; }
.tema-dugme:hover { color: var(--metin); border-color: var(--soluk); }
.tema-dugme > span { display: none; align-items: center; gap: 6px; }
.tema-dugme .ikon { width: 16px; height: 16px; }
body[data-tema="oto"] .tema-oto, body:not([data-tema]) .tema-oto, body[data-tema="light"] .tema-acik, body[data-tema="dark"] .tema-koyu { display: inline-flex; }
.kullanici-kart { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 16px; background: var(--yuzey-2); border: 1px solid var(--cizgi); }
.kullanici-kart > div { flex: 1; min-width: 0; }
.kullanici-kart strong { display: block; font-size: .88rem; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kullanici-kart small { color: var(--soluk); font-weight: 700; font-size: .76rem; }
.kullanici-kart form { margin: 0; }
.avatar { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--kpi-turuncu); color: var(--kpi-turuncu-i); font-weight: 900; flex: none; }
.ikon-dugme { width: 36px; height: 36px; border-radius: 11px; border: 1px solid var(--cizgi); background: var(--yuzey); color: var(--soluk); display: grid; place-items: center; cursor: pointer; flex: none; }
.ikon-dugme:hover { color: var(--eksi); border-color: currentColor; }
.menu-dugme:hover { color: var(--ana); }
.yan-ortu { display: none; }

.ana { min-width: 0; display: flex; flex-direction: column; }
.ust-bar {
    position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; padding: 12px 28px;
    background: color-mix(in srgb, var(--zemin) 82%, transparent); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
    border-bottom: 1px solid color-mix(in srgb, var(--cizgi) 70%, transparent);
}
.menu-dugme { display: none; }
.ust-baslik { font-weight: 900; font-size: 1.02rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.komut-dugme {
    display: flex; align-items: center; gap: 10px; width: min(420px, 45vw); padding: 9px 10px 9px 14px; border-radius: 14px;
    border: 1px solid var(--cizgi); background: var(--yuzey); color: var(--soluk); font: inherit; font-weight: 700; font-size: .88rem; cursor: text; box-shadow: var(--golge);
}
.komut-dugme:hover { border-color: var(--ana); }
.komut-dugme .ikon { color: var(--ana); }
.komut-dugme span { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.komut-dugme em { font-style: normal; opacity: .7; }
.komut-dugme kbd { font-family: inherit; font-size: .72rem; font-weight: 900; padding: 3px 7px; border-radius: 7px; background: var(--zemin); border: 1px solid var(--cizgi); color: var(--soluk); }
.alt { margin-top: auto; }

/* Rapor başlığı: firma seçici + dönem */
.rapor-donem { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 14px; background: var(--yuzey); border: 1px solid var(--cizgi); color: var(--soluk); font-weight: 800; font-size: .86rem; }
.rapor-donem .ikon { width: 16px; height: 16px; color: var(--ana); }

/* KPI kartları: değişim rozeti + sparkline */
.kpi-satir .kart { display: flex; flex-direction: column; color: var(--metin); text-decoration: none; transition: transform .18s, box-shadow .18s, border-color .18s; }
a.kart:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--ana) 35%, var(--cizgi)); box-shadow: 0 14px 34px rgba(35, 31, 58, .1); text-decoration: none; }
.kpi-ust { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.kpi-degisim { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 99px; font-size: .75rem; font-weight: 900; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kpi-degisim small { font-weight: 700; opacity: .75; }
.kpi-degisim.iyi { background: var(--arti-zemin); color: var(--arti); }
.kpi-degisim.kotu { background: var(--eksi-zemin); color: var(--eksi); }
.kpi-degisim.notr { background: var(--zemin); color: var(--soluk); font-weight: 700; }
.spark { width: 100%; height: 38px; margin-top: 10px; overflow: visible; }
.spark-cizgi { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark-alan { opacity: .14; }
.spark circle { stroke: var(--yuzey); stroke-width: 2; }
.spark.s1 .spark-cizgi { stroke: var(--s1); } .spark.s1 .spark-alan, .spark.s1 circle { fill: var(--s1); }
.spark.s2 .spark-cizgi { stroke: var(--s2); } .spark.s2 .spark-alan, .spark.s2 circle { fill: var(--s2); }
.spark.yesil-cizgi .spark-cizgi { stroke: var(--kpi-yesil-i); } .spark.yesil-cizgi .spark-alan, .spark.yesil-cizgi circle { fill: var(--kpi-yesil-i); }

/* Hero: kâr halkası */
.hero-sag { display: flex; align-items: center; gap: 22px; position: relative; z-index: 1; }
.hero-alt { display: block; font-size: .82rem; opacity: .8; font-weight: 700; font-variant-numeric: tabular-nums; }
.hero-not { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px !important; font-size: .82rem; opacity: .8 !important; }
.hero-not .ikon { width: 14px; height: 14px; }
.hero-halka { position: relative; width: 104px; height: 104px; flex: none; }
.hero-halka svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.halka-iz { fill: none; stroke: rgba(255, 255, 255, .18); stroke-width: 9; }
.halka-dolu { fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round; }
.animasyonlu .hero:not(.gorundu) .halka-dolu { stroke-dashoffset: var(--bos) !important; }
.halka-dolu { transition: stroke-dashoffset 1.2s cubic-bezier(.2, .8, .2, 1) .2s; }
.hero-halka > span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; }
.hero-halka strong { font-size: 1.15rem; font-weight: 900; }
.hero-halka small { font-size: .68rem; font-weight: 800; opacity: .85; }

/* Para akışı (sankey) */
.sankey-kap { overflow-x: auto; margin: 0 -6px; padding: 0 6px; }
.sankey { width: 100%; min-width: 760px; height: auto; display: block; }
.sk-bant { mix-blend-mode: multiply; transition: opacity .2s, filter .2s; cursor: pointer; }
:root[data-theme="dark"] .sk-bant { mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sk-bant { mix-blend-mode: screen; } }
.sankey:hover .sk-bant { opacity: .45; }
.sankey .sk-bant.ipucu-aktif { opacity: 1; filter: saturate(1.8); }
.sk-dugum { rx: 3; }
.sk-dugum.s1 { fill: var(--s1); } .sk-dugum.s2 { fill: var(--s2); } .sk-dugum.kar { fill: var(--kpi-yesil-i); } .sk-dugum.orta { fill: var(--ana); }
.sk-etiket { fill: var(--metin); font-size: 12.5px; font-weight: 800; font-family: inherit; }
.sk-etiket.kalin { font-weight: 900; font-size: 13.5px; fill: var(--kpi-yesil-i); }
.sk-etiket.orta { fill: var(--ana); font-weight: 900; }
.sk-deger { fill: var(--soluk); font-size: 11px; font-weight: 700; font-family: inherit; font-variant-numeric: tabular-nums; }
.sankey a:hover .sk-etiket { text-decoration: underline; }
.animasyonlu .panel:not(.gorundu) .sk-bant { opacity: 0; }
.panel.gorundu .sk-bant { animation: skGir .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes skGir { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }

/* Kutu haritası (treemap) */
.treemap { position: relative; width: 100%; aspect-ratio: 5 / 3; border-radius: 16px; overflow: hidden; background: var(--zemin); }
.tm-kutu {
    position: absolute; box-sizing: border-box; padding: 3px; color: #fff; text-decoration: none;
    transition: filter .15s;
}
.tm-kutu .tm-ic {
    position: absolute; inset: 2px; border-radius: 12px; padding: 10px 12px; overflow: hidden;
    background: linear-gradient(150deg, color-mix(in srgb, var(--renk) 88%, #fff), var(--renk));
    display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
}
.tm-kutu:hover { text-decoration: none; filter: brightness(1.08) saturate(1.1); z-index: 2; }
.tm-kutu strong { font-weight: 900; font-size: .88rem; line-height: 1.15; text-shadow: 0 1px 2px rgba(0, 0, 0, .18); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tm-kutu .tm-ic > span { font-size: .76rem; font-weight: 800; opacity: .92; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tm-kutu.buyuk strong { font-size: 1.05rem; }
.tm-kutu.buyuk .tm-ic > span { font-size: .85rem; }
.tm-kutu.kucuk .tm-ic { padding: 4px 6px; }
.tm-kutu.kucuk strong, .tm-kutu.kucuk .tm-ic > span { display: none; }
.tm-not { margin-top: 10px !important; }
.animasyonlu .panel:not(.gorundu) .tm-kutu { opacity: 0; transform: scale(.94); }
.panel.gorundu .tm-kutu { animation: tmGir .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 40ms); }
@keyframes tmGir { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* Şelale */
.selale { width: 100%; min-width: 720px; height: auto; display: block; }
.selale .taban { stroke: var(--soluk); stroke-opacity: .4; }
.sl-bag { stroke: var(--soluk); stroke-opacity: .5; stroke-dasharray: 3 3; }
.sl-cubuk.toplam { fill: var(--ana); }
.sl-cubuk.artis { fill: var(--s1); }
.sl-cubuk.azalis { fill: var(--s2); }
.sl-grup { cursor: pointer; }
.sl-grup:hover .sl-cubuk, .sl-grup.ipucu-aktif .sl-cubuk { filter: brightness(1.1); }
.sl-deger { fill: var(--metin); font-size: 11px; font-weight: 900; font-family: inherit; font-variant-numeric: tabular-nums; }
.sl-etiket { fill: var(--soluk); font-size: 10.5px; font-weight: 800; font-family: inherit; }
.nokta.toplam { background: var(--ana); } .nokta.artis { background: var(--s1); } .nokta.azalis { background: var(--s2); }
.panel.gorundu .sl-cubuk, .panel.gorundu .grafik-svg .cubuk { transform-box: fill-box; transform-origin: 50% 100%; animation: cubukBuyu .7s cubic-bezier(.2, .8, .2, 1) both; }
.panel.gorundu .sl-grup { animation: solGir .5s ease-out both; animation-delay: calc(var(--i) * 50ms); }
@keyframes cubukBuyu { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes solGir { from { opacity: 0; } to { opacity: 1; } }

/* Kırılım: ısı haritası, sabit başlık, arama */
.pivot-kap { max-height: 72vh; overflow: auto; border-radius: 14px; border: 1px solid var(--cizgi); margin: 0; padding: 0; }
.pivot thead th { position: sticky; top: 0; z-index: 3; background: var(--yuzey); box-shadow: 0 1px 0 var(--cizgi); }
.pivot tbody td:first-child, .pivot thead th:first-child, .pivot tfoot td:first-child { position: sticky; left: 0; z-index: 2; background: var(--yuzey); }
.pivot thead th:first-child { z-index: 4; }
.pivot tr.sv0 td:first-child, .pivot tbody tr:hover td:first-child { background: var(--yuzey-2); }
.pivot tfoot td { position: sticky; bottom: 0; z-index: 2; }
.pivot td.isi { background: color-mix(in srgb, var(--isi-renk, var(--s1)) calc(var(--isi, 0) * 32%), transparent); }
.pivot td.isi.gider { --isi-renk: var(--s2); }
.pivot td.isi.gelir { --isi-renk: var(--s1); }
.pivot tr.sv0 td.isi { background: var(--yuzey-2); }
.pivot tr.eslesme .agac-ad a { background: color-mix(in srgb, var(--uyari) 25%, transparent); border-radius: 4px; padding: 0 3px; }
.tablo-ara { display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--cizgi); border-radius: 12px; background: var(--yuzey); }
.tablo-ara .ikon { width: 16px; height: 16px; color: var(--soluk); }
.tablo-ara input { border: none; padding: 7px 0; width: 220px; background: none; }
.tablo-ara input:focus { outline: none; }
.tablo-ara:focus-within { border-color: var(--ana); box-shadow: 0 0 0 3px var(--ana-acik); }

/* Fecri liste çubuğu */
.fecri-iz { grid-column: 2; display: block; height: 4px; margin-top: 4px; border-radius: 99px; background: var(--cizgi); overflow: hidden; }
.fecri-iz i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--ana), var(--s1)); }

/* Görünme animasyonları */
.animasyonlu .icerik > .kartlar:not(.gorundu) > *, .animasyonlu .icerik > .panel:not(.gorundu),
.animasyonlu .icerik > .iki-kolon > .panel:not(.gorundu), .animasyonlu .icerik > .hero:not(.gorundu), .animasyonlu .icerik > .baslik-satir:not(.gorundu) { opacity: 0; transform: translateY(14px); }
.animasyonlu .icerik > .panel, .animasyonlu .icerik > .iki-kolon > .panel, .animasyonlu .icerik > .hero, .animasyonlu .icerik > .baslik-satir,
.animasyonlu .icerik > .kartlar > * { transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.animasyonlu .icerik > .kartlar > *:nth-child(2) { transition-delay: .06s; }
.animasyonlu .icerik > .kartlar > *:nth-child(3) { transition-delay: .12s; }
.animasyonlu .icerik > .kartlar > *:nth-child(4) { transition-delay: .18s; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 1100px) {
    .komut-dugme em { display: none; }
}
@media (max-width: 980px) {
    body.uygulama { grid-template-columns: minmax(0, 1fr); }
    .yan { position: fixed; left: 0; top: 0; bottom: 0; width: 280px; transform: translateX(-102%); transition: transform .25s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 0 60px rgba(0, 0, 0, .2); }
    body.menu-acik .yan { transform: none; }
    body.menu-acik .yan-ortu { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(20, 18, 29, .45); backdrop-filter: blur(2px); }
    .menu-dugme { display: grid; }
    .ust-bar { padding: 10px 16px; }
    .icerik { padding: 18px 16px 40px; }
    .iki-kolon, .iki-kolon.esit { grid-template-columns: minmax(0, 1fr); }
    .filtre, .rapor-filtre { grid-template-columns: 1fr 1fr; }
    .filtre .genis, .filtre-btn { grid-column: 1 / -1; }
    .hero-deger { text-align: left; }
}
@media (max-width: 560px) {
    .satir { grid-template-columns: 1fr; }
    .komut-dugme { width: auto; flex: none; padding: 9px; }
    .komut-dugme span, .komut-dugme kbd { display: none; }
    .grafik { gap: 2px; height: 160px; }
    .kart .deger { font-size: 1.3rem; }
    h1 { font-size: 1.35rem; }
    .hero { padding: 20px; }
    .hero h1 { font-size: 1.3rem; }
    .hero-sag { width: 100%; justify-content: space-between; }
    .hero-deger strong { font-size: 1.9rem; }
    .hero-halka { width: 84px; height: 84px; }
    .firma-secim { width: 100%; }
    .firma-secim select:first-of-type { flex: 1; min-width: 0; }
    .rapor-donem { width: 100%; justify-content: center; }
    .treemap { aspect-ratio: 1 / 1; }
    .tablo-ara { width: 100%; }
    .tablo-ara input { width: 100%; }
}

@media print {
    .yan, .ust-bar, .rapor-ust, .alt, .btn, .aksiyonlar, .fecri { display: none !important; }
    body.uygulama { display: block; background: #fff; }
    .panel, .kart { box-shadow: none; break-inside: avoid; }
    .animasyonlu .icerik * { opacity: 1 !important; transform: none !important; }
    .pivot-kap { max-height: none; overflow: visible; }
}
.pivot .kar-satir td:first-child { background: var(--ana-acik); }

/* ================= PROFESYONEL (MUHASEBE) GÖRÜNÜM KATMANI ================= */
body { font-size: 14px; letter-spacing: -.003em; font-feature-settings: "tnum" 1, "cv11" 1; }
h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: .98rem; font-weight: 600; letter-spacing: -.01em; }
h2 .ikon { color: var(--soluk); width: 17px; height: 17px; }
.logo { background: var(--ana); box-shadow: none; border-radius: 10px; font-weight: 700; }
.yan { background: var(--yuzey); }
.yan-menu a { font-weight: 500; border-radius: 8px; padding: 8px 11px; }
.yan-menu a.aktif { font-weight: 600; }
.yan-grup { font-weight: 600; letter-spacing: .06em; }
.ust-bar { background: color-mix(in srgb, var(--yuzey) 88%, transparent); }
.komut-dugme, .btn, input, select, textarea { border-radius: 8px; }
.btn { font-weight: 600; box-shadow: var(--golge); }
.btn.birincil { box-shadow: none; }
.panel, .kart { border-radius: var(--radius); }
.panel { padding: 20px 22px; }
.panel-bas { padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--cizgi); }
.kart .etiket { font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.kart .deger { font-weight: 700; font-size: 1.55rem; letter-spacing: -.02em; }
.kartlar { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.kpi.mavi, .kpi.turuncu, .kpi.yesil, .kpi.mor, .kpi.kirmizi, .durum-kart.toplam-kart, .ipucu-panel { background: var(--yuzey); }
.kpi .kpi-ikon { width: 32px; height: 32px; border-radius: 8px; margin-bottom: 12px; }
.kpi.mavi { box-shadow: inset 0 3px 0 var(--kpi-mavi-i), var(--golge); }
.kpi.turuncu { box-shadow: inset 0 3px 0 var(--kpi-turuncu-i), var(--golge); }
.kpi.yesil { box-shadow: inset 0 3px 0 var(--kpi-yesil-i), var(--golge); }
.kpi.mor { box-shadow: inset 0 3px 0 var(--kpi-mor-i), var(--golge); }
.kpi.kirmizi { box-shadow: inset 0 3px 0 var(--eksi), var(--golge); }
.tablo th { font-weight: 600; font-size: .72rem; letter-spacing: .06em; background: var(--yuzey-2); }
.tablo .tutar { font-weight: 600; }
.rozet { font-weight: 600; border-radius: 6px; }
.hero, .nakit-hero { border-radius: 14px; box-shadow: none; background: linear-gradient(120deg, #172e6e, #1e3a8a 55%, #1f5fb8); }
.nakit-hero.dusus { background: linear-gradient(120deg, #172e6e, #1e3a8a 55%, #1f5fb8); box-shadow: none; }
.hero-sus { opacity: .06; }
.fecri-avatar, .fecri-bas { background: var(--ana); }
.fecri-bas .fecri-avatar { background: rgba(255, 255, 255, .18); }
.fecri-balon { box-shadow: 0 6px 20px rgba(16, 24, 40, .14); font-weight: 600; }
.fecri-pencere { border-radius: 16px; }
.segment { border-radius: 10px; }
.segment a, .segment button { border-radius: 7px; font-weight: 600; }
.yb-ust, .cari-ad a, .merkez-bas strong, .pano-baslik { font-weight: 600; }
.yb-ust strong, .cari-liste strong, .merkez-satir b { font-weight: 700; }
.aciklama-not { margin: -4px 0 14px; color: var(--soluk); font-size: .84rem; line-height: 1.55; max-width: 780px; }

/* Dönem özeti: gelir tablosu düzeni */
.ozet-izgara { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 28px; align-items: start; }
.mali-tablo { width: 100%; border-collapse: collapse; font-size: .9rem; }
.mali-tablo th { text-align: left; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--soluk); padding: 0 8px 8px; border-bottom: 1px solid var(--cizgi); }
.mali-tablo th:nth-child(3), .mali-tablo th:nth-child(4) { text-align: right; }
.mali-tablo td { padding: 7px 8px; border-bottom: 1px solid color-mix(in srgb, var(--cizgi) 60%, transparent); }
.mali-tablo .mt-kod { width: 28px; color: var(--soluk); font-weight: 600; }
.mali-tablo .mt-tutar, .mali-tablo .mt-oran { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mali-tablo .mt-oran { color: var(--soluk); width: 90px; font-size: .84rem; }
.mali-tablo .mt-bolum td { padding-top: 16px; font-weight: 700; font-size: .78rem; letter-spacing: .06em; color: var(--ana); border-bottom: 1px solid var(--cizgi); }
.mali-tablo .mt-kalem .mt-ad { padding-left: 18px; }
.mali-tablo .mt-toplam td { font-weight: 700; border-top: 1px solid var(--metin); border-bottom: none; background: var(--yuzey-2); }
.mali-tablo .mt-net td { font-weight: 700; font-size: 1rem; padding: 12px 8px; border-top: 2px solid var(--metin); border-bottom: 3px double var(--metin); color: var(--arti); background: var(--arti-zemin); }
.mali-tablo .mt-net.zarar td { color: var(--eksi); background: var(--eksi-zemin); }
.mali-tablo .mt-kalem .mt-tutar { color: var(--metin); }
.ozet-yan { display: flex; flex-direction: column; gap: 16px; }
.oranlar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.oran { border: 1px solid var(--cizgi); border-radius: 10px; padding: 12px 14px; background: var(--yuzey-2); display: flex; flex-direction: column; gap: 4px; }
.oran-ad { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--soluk); }
.oran-deger { font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.oran-iz { height: 5px; border-radius: 99px; background: var(--cizgi); overflow: hidden; margin-top: 4px; }
.oran-dol { display: block; height: 100%; border-radius: 99px; }
.oran-dol.iyi { background: var(--arti); } .oran-dol.dikkat { background: var(--s2); }
.yorum { border-left: 3px solid var(--ana); padding: 4px 0 4px 14px; }
.yorum-baslik { display: block; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ana); margin-bottom: 6px; }
.yorum p { margin: 0 0 6px; font-size: .88rem; line-height: 1.55; }

/* Aylık grafik: kâr çizgisi, en iyi/zayıf ay */
.net-cizgi { fill: none; stroke: var(--arti); stroke-width: 2; stroke-linejoin: round; }
.net-nokta { fill: var(--yuzey); stroke: var(--arti); stroke-width: 2.5; }
.net-nokta.zarar { stroke: var(--eksi); }
.cizgi-lejant { display: inline-block; width: 18px; height: 0; border-top: 2px solid var(--arti); margin: 0 4px 0 10px; vertical-align: middle; }
.ay-notu { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ay-not { padding: 5px 10px; border-radius: 6px; font-size: .8rem; font-weight: 600; }
.ay-not.iyi { background: var(--arti-zemin); color: var(--arti); }
.ay-not.kotu { background: var(--eksi-zemin); color: var(--eksi); }

/* Para akışı (defter) bant renkleri */
.sk-bant.gelir { fill: color-mix(in srgb, var(--s1) 30%, transparent); }
.sk-bant.gider { fill: color-mix(in srgb, var(--renk, var(--s2)) 38%, transparent); }
.sk-bant.kar { fill: color-mix(in srgb, var(--arti) 32%, transparent); }
.sk-bant.acik { fill: color-mix(in srgb, var(--eksi) 25%, transparent); }
.sk-dugum.gider { fill: var(--s2); } .sk-dugum.acik { fill: var(--eksi); }
.sk-etiket { font-weight: 600; font-size: 12px; }
.sk-etiket.kalin { font-weight: 700; fill: var(--arti); }

/* Harcama takvimi */
.takvim-kap { overflow-x: auto; }
.takvim { width: 100%; min-width: 760px; height: auto; display: block; }
.tk-gun { cursor: default; stroke: var(--yuzey); stroke-width: 1; }
.tk-gun:not(.tk-0) { cursor: pointer; }
.tk-gun:hover { stroke: var(--metin); stroke-width: 1.5; }
.tk-0 { fill: var(--zemin); }
.tk-1 { fill: color-mix(in srgb, var(--s2) 22%, var(--yuzey)); }
.tk-2 { fill: color-mix(in srgb, var(--s2) 42%, var(--yuzey)); }
.tk-3 { fill: color-mix(in srgb, var(--s2) 62%, var(--yuzey)); }
.tk-4 { fill: color-mix(in srgb, var(--s2) 82%, var(--yuzey)); }
.tk-5 { fill: color-mix(in srgb, var(--s2) 100%, #000 18%); }
.takvim-lejant { gap: 3px; }
.tk-kutu { display: inline-block; width: 11px; height: 11px; border-radius: 3px; }
.tk-kutu.tk-0 { background: var(--zemin); border: 1px solid var(--cizgi); }
.tk-kutu.tk-1 { background: color-mix(in srgb, var(--s2) 22%, var(--yuzey)); }
.tk-kutu.tk-2 { background: color-mix(in srgb, var(--s2) 42%, var(--yuzey)); }
.tk-kutu.tk-3 { background: color-mix(in srgb, var(--s2) 62%, var(--yuzey)); }
.tk-kutu.tk-4 { background: color-mix(in srgb, var(--s2) 82%, var(--yuzey)); }
.tk-kutu.tk-5 { background: color-mix(in srgb, var(--s2) 100%, #000 18%); }

/* Harcama yerleri */
.yerler { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px 20px; }
.yer { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; background: none; font: inherit; color: var(--metin); text-align: left; cursor: pointer; }
.yer:hover { border-color: var(--cizgi); background: var(--yuzey-2); }
.yer-sira { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--zemin); color: var(--soluk); font-weight: 700; font-size: .8rem; flex: none; }
.yer-govde { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.yer-ust { display: flex; justify-content: space-between; gap: 10px; }
.yer-ust strong { font-weight: 600; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yer-ust b { font-weight: 700; white-space: nowrap; }
.yer small { color: var(--soluk); font-size: .76rem; }
@media (max-width: 980px) { .ozet-izgara { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .oranlar { grid-template-columns: 1fr 1fr; } }
.mali-tablo .mt-eksi { color: var(--metin); }
.mali-tablo .mt-toplam .mt-eksi { color: var(--eksi); }
button.tm-kutu { text-align: left; }
.tm-kutu strong { text-shadow: none; font-weight: 600; }
.takvim .eksen { font-size: 10px; }
/* Esnek sütun içinde auto kenar boşluğu genişliği içeriğe göre büyütmesin */
.ana > .icerik { width: 100%; min-width: 0; }

/* ================= HESAP DEFTERİ · AYLIK TABLO ================= */
.alt-sekmeler { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 16px; border: 1px solid var(--cizgi); border-radius: 10px; background: var(--yuzey); box-shadow: var(--golge); }
.alt-sekmeler a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 7px; color: var(--soluk); font-weight: 600; font-size: .88rem; }
.alt-sekmeler a:hover { color: var(--metin); text-decoration: none; background: var(--zemin); }
.alt-sekmeler a.aktif { background: var(--ana); color: #fff; }
.alt-sekmeler .ikon { width: 16px; height: 16px; }
.pivot-ayar { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: flex-end; }
.pivot-ayar > label { display: flex; flex-direction: column; gap: 5px; font-size: .78rem; font-weight: 600; color: var(--soluk); min-width: 140px; }
.pa-grup { display: flex; flex-direction: column; gap: 5px; }
.pa-grup > span { font-size: .78rem; font-weight: 600; color: var(--soluk); }
.secim-cipleri { display: flex; gap: 6px; flex-wrap: wrap; }
.secim-cip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border: 1px solid var(--cizgi); border-radius: 8px; background: var(--yuzey); font-size: .84rem; font-weight: 500; color: var(--metin); cursor: pointer; user-select: none; }
.secim-cip input { width: auto; margin: 0; accent-color: var(--ana); }
.secim-cip:has(input:checked) { border-color: var(--ana); background: var(--ana-acik); color: var(--ana); font-weight: 600; }
.aylik-kap { max-height: 76vh; overflow: auto; border: 1px solid var(--cizgi); border-radius: 10px; margin: 0; padding: 0; }
.aylik-pivot { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .84rem; font-variant-numeric: tabular-nums; }
.aylik-pivot th { position: sticky; top: 0; z-index: 3; background: var(--yuzey-2); color: var(--soluk); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; padding: 10px 10px; border-bottom: 1px solid var(--cizgi); text-align: right; white-space: nowrap; }
.aylik-pivot th.p-ad { text-align: left; left: 0; z-index: 4; min-width: 230px; }
.aylik-pivot td { padding: 6px 10px; border-bottom: 1px solid color-mix(in srgb, var(--cizgi) 55%, transparent); text-align: right; white-space: nowrap; }
.aylik-pivot td.p-ad { position: sticky; left: 0; z-index: 2; background: var(--yuzey); text-align: left; border-right: 1px solid var(--cizgi); }
.aylik-pivot th.p-top, .aylik-pivot td.p-top { font-weight: 700; border-left: 1px solid var(--cizgi); background: var(--yuzey-2); }
.aylik-pivot .p-trend { text-align: center; width: 100px; }
.aylik-pivot td.eksi { color: var(--eksi); }
.aylik-pivot .p-satir td.p-ad { padding-left: 38px; color: var(--metin); }
.aylik-pivot .p-satir:hover td { background: var(--ana-acik); }
.aylik-pivot .p-satir:hover td.p-ad { background: var(--ana-acik); }
.aylik-pivot td.dolu { cursor: pointer; }
.aylik-pivot.isi-acik .p-satir td.dolu { background: color-mix(in srgb, var(--isi-renk) calc(var(--isi) * 26%), transparent); }
.aylik-pivot .p-satir td.dolu:hover { outline: 2px solid var(--ana); outline-offset: -2px; }
.aylik-pivot .sutun-vurgu:not(.p-ad) { box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--ana) 6%, transparent); }
.aylik-pivot th.sutun-vurgu { color: var(--ana); }
.p-gelir { --isi-renk: var(--s1); --grup-renk: var(--kpi-mavi-i); }
.p-gider { --isi-renk: var(--s2); --grup-renk: var(--kpi-turuncu-i); }
.p-diger { --isi-renk: var(--ana); --grup-renk: var(--ana); }
.aylik-pivot .p-grup td { background: var(--yuzey-2); border-top: 1px solid var(--cizgi); padding-top: 9px; padding-bottom: 9px; }
.aylik-pivot .p-grup td.p-ad { background: var(--yuzey-2); }
.aylik-pivot .p-grup strong { color: var(--grup-renk); font-weight: 700; }
.p-ackapa { width: 20px; height: 20px; margin-right: 8px; border-radius: 5px; border: 1px solid var(--cizgi); background: var(--yuzey); color: var(--soluk); font: inherit; font-weight: 700; line-height: 1; cursor: pointer; vertical-align: middle; }
.p-ackapa:hover { border-color: var(--ana); color: var(--ana); }
.p-say { margin-left: 8px; color: var(--soluk); font-size: .72rem; }
.aylik-pivot .p-ara td { font-weight: 700; color: var(--grup-renk); border-top: 1px solid var(--metin); background: color-mix(in srgb, var(--grup-renk) 7%, var(--yuzey)); }
.aylik-pivot .p-ara td.p-ad { background: color-mix(in srgb, var(--grup-renk) 7%, var(--yuzey)); }
.aylik-pivot .p-ara td.eksi { color: var(--eksi); }
.aylik-pivot tfoot td { position: sticky; bottom: 0; z-index: 2; font-weight: 700; font-size: .9rem; background: var(--ana-acik); border-top: 2px solid var(--metin); border-bottom: 3px double var(--metin); padding: 10px; }
.aylik-pivot tfoot td.p-ad { z-index: 3; background: var(--ana-acik); color: var(--ana); }
.aylik-pivot tfoot td:not(.eksi):not(.p-ad) { color: var(--arti); }
.p-mini { width: 84px; height: 22px; display: block; margin: 0 auto; }
.p-mini .m-arti { fill: var(--s1); } .p-mini .m-eksi { fill: var(--s2); }