/* ============================================================
   MerCont Muhasebe — MH v0.1.0
   Ana app tema tokenlarıyla uyumlu (src/css/style.css :root kopyası,
   ana dosyaya bağımlılık YOK — muhasebe kendi CSS'ini taşır).
   ============================================================ */

:root {
    --accent-blue: #b3840e;
    --accent-purple: #c99520;
    --accent-green: #34d399;
    --accent-orange: #fb923c;
    --accent-red: #f87171;
    --font-family: 'Inter', system-ui, -apple-system, sans-serif;

    --primary-bg: #121214;
    --glass-bg: rgba(30, 30, 35, 0.5);
    --glass-border: rgba(255, 255, 255, 0.06);
    --text-main: #f0f0f0;
    --text-muted: #8b8b9a;
    --text-faint: #5b5b6a;

    --surface: var(--glass-bg);
    --surface-alt: rgba(255, 255, 255, 0.04);
    --surface-hover: rgba(255, 255, 255, 0.06);
    --border: var(--glass-border);
    --border-strong: rgba(255, 255, 255, 0.12);
    /* review: accent üstü metin rengi — klasik amber üstünde beyaz;
       temalar kendi değerini override eder (liman-dark sarı üstü lacivert vb.) */
    --on-accent: #ffffff;

    --radius-sm: 6px;
    --radius-btn: 12px;
    --radius-input: 12px;
    --radius-card: 16px;

    --seg-ofis: #60a5fa;
    --seg-saha: #fb923c;
}

/* ============================================================
   TEMALAR — ana MerCont ile aynı 10 tema (token değerleri
   src/css/style.css'ten birebir; muhasebe bileşenleri token'lardan
   beslendiği için blok başına yalnız değişkenler yeter).
   ============================================================ */

body[data-theme="klasik-light"] {
    --primary-bg: #e8e8e4; --glass-bg: rgba(255,255,255,.7); --glass-border: rgba(0,0,0,.1);
    --text-main: #1a1a1a; --text-muted: #555b63; --text-faint: #8a8f96;
    --surface: rgba(255,255,255,.7); --surface-alt: rgba(0,0,0,.04); --surface-hover: rgba(0,0,0,.06);
    --border: rgba(0,0,0,.08); --border-strong: rgba(0,0,0,.16); --on-accent: #ffffff;
}
body[data-theme="endustriyel-light"] {
    --primary-bg: #F7F6F2; --glass-bg: #FDFCF9; --glass-border: rgba(30,30,35,.10);
    --text-main: #1A1814; --text-muted: #514D44; --text-faint: #98948A;
    --accent-blue: #1E3A5F; --accent-purple: #3B5E7C; --accent-green: #16693B;
    --accent-orange: #92580B; --accent-red: #A8201C;
    --surface: #FDFCF9; --surface-alt: #EFEDE6; --surface-hover: #F2F0EA;
    --border: rgba(30,30,35,.10); --border-strong: rgba(30,30,35,.20); --on-accent: #FDFCF9;
    --radius-btn: 6px; --radius-input: 6px; --radius-card: 6px; --radius-sm: 4px;
}
body[data-theme="endustriyel-dark"] {
    --primary-bg: #1F1D19; --glass-bg: #2A2823; --glass-border: rgba(255,250,240,.10);
    --text-main: #F0EDE6; --text-muted: #A8A39A; --text-faint: #6B6862;
    --accent-blue: #6B9FB8; --accent-purple: #8AB5CC; --accent-green: #4ADE80;
    --accent-orange: #F59E0B; --accent-red: #F87171;
    --surface: #2A2823; --surface-alt: #34322C; --surface-hover: #38362F;
    --border: rgba(255,250,240,.10); --border-strong: rgba(255,250,240,.20); --on-accent: #1F1D19;
    --radius-btn: 6px; --radius-input: 6px; --radius-card: 6px; --radius-sm: 4px;
}
body[data-theme="saha-light"] {
    --primary-bg: #FFFFFF; --glass-bg: #FFFFFF; --glass-border: #000000;
    --text-main: #000000; --text-muted: #1F2937; --text-faint: #4B5563;
    --accent-blue: #EA580C; --accent-purple: #C2410C; --accent-green: #15803D;
    --accent-orange: #EA580C; --accent-red: #B91C1C;
    --surface: #FFFFFF; --surface-alt: #F3F4F6; --surface-hover: #F9FAFB;
    --border: #000000; --border-strong: #000000; --on-accent: #FFFFFF;
    --radius-btn: 8px; --radius-input: 8px; --radius-card: 8px; --radius-sm: 6px;
}
body[data-theme="saha-dark"] {
    --primary-bg: #000000; --glass-bg: #0A0A0A; --glass-border: #FFFFFF;
    --text-main: #FFFFFF; --text-muted: #E5E5E5; --text-faint: #A3A3A3;
    --accent-blue: #EA580C; --accent-purple: #C2410C; --accent-green: #4ADE80;
    --accent-orange: #EA580C; --accent-red: #F87171;
    --surface: #0A0A0A; --surface-alt: #141414; --surface-hover: #1A1A1A;
    --border: #FFFFFF; --border-strong: #FFFFFF; --on-accent: #FFFFFF;
    --radius-btn: 8px; --radius-input: 8px; --radius-card: 8px; --radius-sm: 6px;
}
body[data-theme="liman-light"] {
    --primary-bg: #FFFBE6; --glass-bg: #FFFFFF; --glass-border: rgba(15,27,45,.18);
    --text-main: #0A1F33; --text-muted: #3D547A; --text-faint: #6B7A8C;
    --accent-blue: #0A3D62; --accent-purple: #0A3D62; --accent-green: #15803D;
    --accent-orange: #B45309; --accent-red: #B91C1C;
    --surface: #FFFFFF; --surface-alt: #FFF6CC; --surface-hover: #FFF1B8;
    --border: rgba(10,61,98,.18); --border-strong: rgba(10,61,98,.35); --on-accent: #FFFBE6;
    --radius-btn: 4px; --radius-input: 4px; --radius-card: 6px; --radius-sm: 3px;
}
body[data-theme="liman-dark"] {
    --primary-bg: #0F1B2D; --glass-bg: #16263F; --glass-border: rgba(244,208,63,.15);
    --text-main: #E8EEF7; --text-muted: #94A8C4; --text-faint: #5F7796;
    --accent-blue: #F4D03F; --accent-purple: #F7DC6F; --accent-green: #2ECC71;
    --accent-orange: #F39C12; --accent-red: #E74C3C;
    --surface: #16263F; --surface-alt: #1D2F4A; --surface-hover: #1A2A42;
    --border: rgba(244,208,63,.15); --border-strong: rgba(244,208,63,.30); --on-accent: #0F1B2D;
    --radius-btn: 4px; --radius-input: 4px; --radius-card: 6px; --radius-sm: 3px;
}
body[data-theme="mono-light"] {
    --primary-bg: #FAFAFA; --glass-bg: #FFFFFF; --glass-border: #1F1F1F;
    --text-main: #0A0A0A; --text-muted: #525252; --text-faint: #A3A3A3;
    --accent-blue: #059669; --accent-purple: #047857; --accent-green: #059669;
    --accent-orange: #525252; --accent-red: #1F1F1F;
    --surface: #FFFFFF; --surface-alt: #F3F3F3; --surface-hover: #F8F8F8;
    --border: #1F1F1F; --border-strong: #0A0A0A; --on-accent: #FAFAFA;
    --radius-btn: 2px; --radius-input: 2px; --radius-card: 2px; --radius-sm: 0;
    --font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, monospace;
}
body[data-theme="mono-dark"] {
    --primary-bg: #000000; --glass-bg: #0A0A0A; --glass-border: #FFFFFF;
    --text-main: #FAFAFA; --text-muted: #A3A3A3; --text-faint: #525252;
    --accent-blue: #10B981; --accent-purple: #34D399; --accent-green: #10B981;
    --accent-orange: #A3A3A3; --accent-red: #FAFAFA;
    --surface: #0A0A0A; --surface-alt: #141414; --surface-hover: #1A1A1A;
    --border: #FFFFFF; --border-strong: #FFFFFF; --on-accent: #000000;
    --radius-btn: 2px; --radius-input: 2px; --radius-card: 2px; --radius-sm: 0;
    --font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, monospace;
}

/* Light temalarda input zemini */
body[data-theme$="-light"] { --input-bg: rgba(0,0,0,.05); }
body[data-theme$="-light"] .mh-select option { background: #ffffff; color: #1a1a1a; }
body[data-theme$="-light"] .acct-dropdown { background: #ffffff; }
body[data-theme$="-light"] .mh-modal { background: var(--surface); }
body[data-theme$="-light"] #mh-toast { background: #ffffff; color: var(--text-main); }

/* Katlanır bölümler (Ayarlar) — <details class="mh-collapse mh-card"> */
.mh-collapse { padding: 0; margin-bottom: 16px; overflow: hidden; }
.mh-collapse > summary {
    list-style: none; cursor: pointer; user-select: none;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 18px;
}
.mh-collapse > summary::-webkit-details-marker { display: none; }
.mh-collapse > summary:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -2px; border-radius: var(--radius-card); }
.mh-collapse .mh-collapse-title {
    font-size: 13px; font-weight: 700; color: var(--text-muted);
    display: flex; align-items: center; gap: 8px;
}
.mh-collapse > summary:hover .mh-collapse-title { color: var(--text-main); }
.mh-collapse .mh-collapse-caret { font-size: 16px; color: var(--text-muted); transition: transform .2s ease; flex: 0 0 auto; }
.mh-collapse[open] > summary .mh-collapse-caret { transform: rotate(180deg); }
.mh-collapse .mh-collapse-body { padding: 0 18px 18px; }

/* ---------- Bölünmüş ekran (1-4 panel) ---------- */
.mh-split-ctl { display: flex; gap: 4px; padding: 8px 10px 2px; }
.mh-split-ctl button {
    flex: 1; padding: 7px 0; border-radius: 8px; background: none;
    border: 1px solid var(--border); color: var(--text-muted); font-size: 15px;
    display: flex; align-items: center; justify-content: center;
}
.mh-split-ctl button:hover { color: var(--text-main); background: var(--surface-hover); }
.mh-split-ctl button.active { color: var(--accent-blue); border-color: var(--accent-blue); background: rgba(179,132,14,.10); }
/* Bölünmüş ekranda içerik alanı 1200px sınırını aşıp EN DİBE kadar kullansın */
.main.mh-split-active { max-width: none; }
/* v0.9.4: start → stretch ŞART — yoksa paneller içerik boyunda kalır ve
   .mh-panel-body'nin flex:1'i yayılacak yükseklik bulamaz. */
#mh-panels { gap: 10px; align-items: stretch; margin-bottom: 16px; }

/* ---- v0.9.4: bölünmüş ekranda scroll PANEL İÇİNE iner (n=1 davranışı değişmez) ----
   Hiçbir katmanda overflow:hidden YOK: zoom'lu .main + sabit yükseklik kombinasyonu
   yanlış çözülürse #mh-scroll emniyet supabı olarak kayar (kilitlenme olmaz). */
#mh-scroll.mh-split-scroll { display: flex; flex-direction: column; }
.main.mh-split-active {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
}
.main.mh-split-active > * { flex: 0 0 auto; }
.main.mh-split-active > #mh-panels { flex: 1 1 auto; min-height: 320px; margin-bottom: 10px; }
.main.mh-split-active .mh-panel { display: flex; flex-direction: column; min-height: 0; }
.main.mh-split-active .mh-panel-head { flex: 0 0 auto; }
.main.mh-split-active .mh-panel-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;   /* masaüstü: çubuk gelip gidince @container eşiği kaymasın */
}
/* Panel gövdesi scroll kutusuna dönünce hesap arama listesi kırpılıyor → kısalt */
.main.mh-split-active .mh-panel-body .acct-dropdown { max-height: 180px; }
.main.mh-split-active .mh-panel-body .acct-search-wrap { scroll-margin-bottom: 200px; }
/* Paneller arası sürüklenebilir ayırıcı — sağa/sola çekerek genişlet/daralt */
.mh-panel-splitter {
    align-self: stretch; min-height: 140px; width: 8px;
    cursor: col-resize; border-radius: 4px;
    background: var(--border-strong);
    transition: background .15s;
    position: relative; touch-action: none; /* dokunmada sayfa kaymasın */
}
.mh-panel-splitter::after { /* tutamak çizgisi */
    content: ''; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 2px; height: 28px; border-radius: 2px; background: var(--text-faint);
}
.mh-panel-splitter:hover, .mh-panel-splitter.dragging { background: var(--accent-blue); }
.mh-panel-splitter:hover::after, .mh-panel-splitter.dragging::after { background: var(--on-accent, #fff); }
.mh-panel {
    border: 1px solid var(--border-strong); border-radius: 14px;
    padding: 12px; min-width: 0; background: var(--surface-alt);
}
.mh-panel-head { margin-bottom: 10px; }
.mh-panel-head .mh-select { width: 100%; font-size: 13px; padding: 8px 10px; }
/* container-type: iç layout'lar VİEWPORT değil PANEL genişliğine göre daralsın */
.mh-panel-body { min-width: 0; container-type: inline-size; }
.mh-panel-body .mh-view { display: block; } /* panel içindeki section her zaman görünür */
.mh-panel-body .mh-view .view-title { font-size: 19px; } /* dar panelde başlık taşmasın */
/* Panel darken iki-sütunlu formlar tek sütuna insin (Gider/Gelir'de "Seçili ay
   kayıtları" sıkışıyordu; media-query viewport'a baktığından panelde tetiklenmiyordu) */
@container (max-width: 820px) {
    .mh-panel-body .entry-layout { grid-template-columns: 1fr; }
    .mh-panel-body .rp-quick { flex-wrap: wrap; }
}
@container (max-width: 560px) { .mh-panel-body .entry-grid2 { grid-template-columns: 1fr; } }
/* v0.9.4: ikinci eksen = telefon yatay (844×390). pointer:coarse ŞART — yoksa
   alta yerleşik DevTools'lu masaüstü penceresi de yakalanır. JS _isSmall() ile BİREBİR. */
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
    .mh-split-ctl { display: none; }   /* küçük/kısa ekranda tek panel */
}

/* Mizandan taslak üretme paneli — tam ekran (küçük ekranda kolay işlem) */
.mizan-fullscreen {
    position: fixed; inset: 0; z-index: 200; margin: 0;
    border-radius: 0; max-height: none;
    height: 100vh; height: 100svh;
    overflow-y: auto; background: var(--primary-bg);
    padding: calc(env(safe-area-inset-top, 0px) + 18px)
             max(env(safe-area-inset-right, 0px), 18px)
             calc(env(safe-area-inset-bottom, 0px) + 18px)
             max(env(safe-area-inset-left, 0px), 18px);
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}
.mizan-fullscreen .mh-table-wrap { max-height: none !important; }

/* Tema seçim kartları (Ayarlar) */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.theme-card {
    border: 1px solid var(--border-strong); border-radius: var(--radius-card);
    padding: 13px 14px; cursor: pointer; background: var(--surface-alt);
    display: flex; flex-direction: column; gap: 8px; transition: border-color .15s, background .15s;
}
.theme-card:hover { background: var(--surface-hover); }
.theme-card.active { border-color: var(--accent-blue); box-shadow: 0 0 0 1px var(--accent-blue); }
.theme-card .tc-name { font-weight: 700; font-size: 13.5px; }
.theme-card .tc-desc { font-size: 11.5px; color: var(--text-muted); line-height: 1.35; }
.theme-card .tc-dots { display: flex; gap: 5px; }
.theme-card .tc-dots span { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(128,128,128,.4); }

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    background: var(--primary-bg);
    color: var(--text-main);
    font-family: var(--font-family);
    min-height: 100vh; min-height: 100svh;
    /* -y ŞART: çıplak `none` macOS trackpad'de iki-parmak "geri" jestini de öldürür */
    overscroll-behavior-y: none;
    font-size: 15px;
}

button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: inherit; }

/* ---------- Genel bileşenler ---------- */
.mh-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 18px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.mh-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 16px;
    border-radius: var(--radius-btn);
    border: 1px solid var(--border-strong);
    background: var(--surface-alt);
    color: var(--text-main);
    font-weight: 600; font-size: 14px;
    transition: background .15s, transform .05s;
}
.mh-btn:hover { background: var(--surface-hover); }
.mh-btn:active { transform: scale(.98); }
.mh-btn.primary { background: var(--accent-blue); border-color: var(--accent-blue); color: var(--on-accent); }
.mh-btn.primary:hover { filter: brightness(1.1); }
.mh-btn.danger { background: transparent; border-color: var(--accent-red); color: var(--accent-red); }
.mh-btn.small { padding: 5px 10px; font-size: 12.5px; border-radius: 8px; }
.mh-btn:disabled { opacity: .45; cursor: not-allowed; }

.mh-input, .mh-select, .mh-textarea {
    width: 100%;
    /* Ana MerCont input ölçüleriyle birebir (birleştirme hazırlığı):
       padding 12/14, font 1rem, radius 12px. iOS auto-zoom viewport user-scalable=no
       ile zaten engelli, o yüzden <16px güvenli. */
    padding: 12px 14px;
    background: var(--input-bg, rgba(0,0,0,.3));
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-input);
    color: var(--text-main);
    outline: none;
    font-size: 1rem;
    /* Simetri: date/select/text farkı olmasın (box-sizing border-box) */
    height: 46px;
}
.mh-textarea { height: auto; min-height: 46px; }
.mh-input:focus, .mh-select:focus, .mh-textarea:focus { border-color: var(--accent-blue); }
.mh-select option { background: #1e1e23; }

.mh-label { display: block; font-size: 12.5px; color: var(--text-muted); font-weight: 600; margin: 0 0 5px 2px; }
.mh-field { margin-bottom: 14px; }

.mh-muted { color: var(--text-muted); }
.mh-faint { color: var(--text-faint); }
.mono { font-variant-numeric: tabular-nums; }

.badge {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .3px;
}
.badge.ofis { background: rgba(96,165,250,.15); color: var(--seg-ofis); }
.badge.saha { background: rgba(251,146,60,.15); color: var(--seg-saha); }
.badge.seg-other { background: rgba(52,211,153,.15); color: var(--accent-green); }
.badge.gelir { background: rgba(52,211,153,.15); color: var(--accent-green); }
.badge.gider { background: rgba(248,113,113,.15); color: var(--accent-red); }
.badge.pasif { background: rgba(139,139,154,.15); color: var(--text-muted); }
.badge.usd { background: rgba(201,149,32,.18); color: var(--accent-purple); }

/* ---------- Boot splash (auth çözülene kadar; login flash'ını önler) ---------- */
#mh-boot {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    background: var(--primary-bg);
}
#mh-boot .mh-boot-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; }
#mh-boot .mh-boot-logo { height: 56px; width: auto; opacity: .92; }
#mh-boot .mh-boot-spin {
    width: 26px; height: 26px; border-radius: 50%;
    border: 3px solid rgba(128, 128, 128, .18); border-top-color: var(--accent-blue);
    animation: mh-boot-rot .7s linear infinite;
}
#mh-boot .mh-boot-text { font-size: 12.5px; color: var(--text-muted); letter-spacing: .3px; }
@keyframes mh-boot-rot { to { transform: rotate(360deg); } }

/* ---------- Login ---------- */
/* v0.9.4: align-items:center DEĞİL — ortalanmış flex taşınca ÜST taraf scroll ile
   ulaşılamaz olur (yatayda klavye açılınca "Giriş" butonu kaybolur). margin:auto
   ile ortalama taşmada 0'a çöker → her zaman erişilebilir. */
#view-login {
    min-height: 100vh; min-height: 100svh;
    display: flex; justify-content: center; overflow-y: auto;
    padding: calc(env(safe-area-inset-top, 0px) + 20px)
             max(env(safe-area-inset-right, 0px), 20px)
             calc(env(safe-area-inset-bottom, 0px) + 20px)
             max(env(safe-area-inset-left, 0px), 20px);
}
.login-box { width: 100%; max-width: 380px; text-align: center; margin: auto; }
.login-box .logo { font-size: 42px; color: var(--accent-blue); margin-bottom: 6px; }
.login-box h1 { font-size: 22px; margin-bottom: 2px; }
.login-box .sub { color: var(--text-muted); font-size: 13px; margin-bottom: 24px; }
.login-box form { text-align: left; }
.login-note { margin-top: 16px; font-size: 12px; color: var(--text-faint); }

/* Şifre göster/gizle */
.pass-wrap { position: relative; }
.pass-wrap .mh-input { padding-right: 46px; }
.pass-toggle {
    position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: var(--text-muted);
    font-size: 20px; padding: 12px; line-height: 1; border-radius: 8px; /* 44px dokunma hedefi */
}
.pass-toggle:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -2px; }
.pass-toggle:hover { color: var(--text-main); background: var(--surface-hover); }

/* ---------- App kabuğu ---------- */
/* ===== v0.9.4: sabit yükseklikli kabuk + iç-scroll (pencere scroll'u YOK) =====
   100svh, 100dvh DEĞİL: dvh araç çubuğuyla animasyonlanıp her rubber-band'de reflow yapar.
   overflow:clip, hidden DEĞİL: `hidden` scroll KONTEYNERİ oluşturur — Tab ile odaklanan
   eleman kutuyu kaydırır ve kullanıcının geri getirecek aracı olmaz (görünmez odak tuzağı).
   `clip` scroll konteyneri kurmaz; programatik kaydırma da imkânsızdır. */
#app-shell { display: none; }
#app-shell.active {
    display: flex;
    height: 100vh; height: 100svh;
    overflow: hidden; overflow: clip;
}

.sidebar {
    width: 218px; flex: 0 0 auto;
    border-right: 1px solid var(--border);
    /* safe-area: fallback 0px ŞART — env() desteklenmezse fallback'siz calc() BÜTÜNÜYLE
       geçersizdir ve padding hiç uygulanmaz. Yanlarda max(): landscape'te inset ~50px,
       üstüne 12px daha eklemek rayı gereksiz genişletir. */
    padding: calc(env(safe-area-inset-top, 0px) + 18px)
             12px
             calc(env(safe-area-inset-bottom, 0px) + 18px)
             max(env(safe-area-inset-left, 0px), 12px);
    display: flex; flex-direction: column; gap: 4px;
    /* position:sticky + height:100vh KALDIRILDI (iOS'ta pencere-scroll ile güvenilmez).
       min-height:0 ŞART: flex çocuğunun min-height:auto varsayılanı overflow'u hiç
       tetiklemez — bu desenin en sık sessiz başarısızlık nedeni (yatayda kesilmenin ilacı). */
    min-height: 0; overflow-y: auto;
    overscroll-behavior-y: contain;
}

/* Zoom'suz scroll katmanı — .main zoom hedefi olduğu için scroller OLAMAZ
   (WebKit scroll uzantısını layout px'te hesaplayıp zoom'lu boyar → %130'da içeriğin
   altı erişilemez kalır, height:100svh de 1.3× ölçeklenir). */
#mh-scroll {
    flex: 1 1 auto; min-width: 0; min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    /* safe-area BURADA, .main'de DEĞİL: .main zoom'lu, env() değerleri zoom ile çarpılır. */
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    scroll-padding: 16px;   /* klavyeyle odaklanan alan kenara yapışmasın */
}
#mh-zoom-bar, #mh-zoom-ver { flex: 0 0 auto; }
.sidebar .brand {
    display: flex; align-items: center; gap: 9px;
    font-weight: 800; font-size: 16px; padding: 4px 10px 16px;
}
.sidebar .brand i { color: var(--accent-blue); font-size: 22px; }
.sidebar .brand .mh-ver { font-size: 10px; color: var(--text-faint); font-weight: 600; }

.nav-btn {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 10px;
    background: transparent; border: none;
    color: var(--text-muted); font-size: 14px; font-weight: 600;
    text-align: left; width: 100%;
}
.nav-btn i { font-size: 18px; }
.nav-btn:hover { background: var(--surface-hover); color: var(--text-main); }
.nav-btn.active { background: rgba(179,132,14,.14); color: var(--accent-blue); }
.sidebar .spacer { flex: 1; }
.sidebar .whoami { padding: 10px 12px; font-size: 12.5px; color: var(--text-muted); border-top: 1px solid var(--border); }
.sidebar .whoami b { color: var(--text-main); display: block; }

/* v0.9.4: flex:1 KALDIRILDI — artık blok konteyner (#mh-scroll) içinde; genişlik zaten auto.
   max-width:1200px + sola hizalı davranış birebir korunur. */
.main { padding: 24px 28px 60px; max-width: 1200px; }
.view-title { font-size: 20px; font-weight: 800; margin-bottom: 4px; display: inline-flex; align-items: center; gap: 9px; }

/* Sayfa başı "i" info butonu (yuvarlak) — her sayfada nasıl çalıştığını anlatır */
.info-btn {
    width: 24px; height: 24px; flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px solid var(--accent-blue);
    background: transparent; color: var(--accent-blue);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; cursor: pointer; padding: 0;
    transition: background .15s, transform .1s;
}
.info-btn:hover { background: var(--accent-blue); color: var(--on-accent); }
.info-btn:active { transform: scale(0.9); }
.info-btn:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }

/* Info / kılavuz modal içeriği — okunur, adım adım */
.info-body { font-size: 14px; line-height: 1.62; color: var(--text-main); }
.info-body h4 { font-size: 14.5px; margin: 16px 0 6px; color: var(--accent-blue); display: flex; align-items: center; gap: 7px; }
.info-body h4:first-child { margin-top: 0; }
.info-body p { margin: 0 0 9px; color: var(--text-muted); }
.info-body ol, .info-body ul { margin: 0 0 10px; padding-left: 20px; color: var(--text-muted); }
.info-body li { margin-bottom: 5px; }
.info-body b { color: var(--text-main); }
.info-body .tip { background: var(--surface-alt); border-left: 3px solid var(--accent-green); border-radius: 8px; padding: 9px 12px; margin: 10px 0; font-size: 13px; }
.info-body .warn { background: var(--surface-alt); border-left: 3px solid var(--accent-orange); border-radius: 8px; padding: 9px 12px; margin: 10px 0; font-size: 13px; }
.info-body code { background: var(--surface-alt); border-radius: 5px; padding: 1px 6px; font-size: 12.5px; color: var(--accent-purple); }
.mh-modal.wide { max-width: 640px; }
.guide-toc { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.guide-toc button { font-size: 12.5px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface-alt); color: var(--text-main); cursor: pointer; }
.guide-toc button:hover { background: var(--surface-hover); }

/* Ayarlar kılavuz kartı */
.guide-launch { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.view-sub { color: var(--text-muted); font-size: 13px; margin-bottom: 20px; }
.mh-view { display: none; }
.mh-view.active { display: block; }

.view-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

/* ---------- Dashboard ---------- */
.dash-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.dash-controls .mh-select { width: auto; min-width: 130px; }

.seg-toggle { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; }
.seg-toggle button {
    padding: 8px 14px; border: none; background: transparent;
    color: var(--text-muted); font-weight: 600; font-size: 13px;
}
.seg-toggle button.active { background: var(--accent-blue); color: var(--on-accent); }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 20px; }
.kpi { padding: 16px 18px; }
.kpi .k-title { font-size: 12.5px; font-weight: 700; color: var(--text-muted); display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.kpi .k-val { font-size: 21px; font-weight: 800; }
.kpi .k-val.neg { color: var(--accent-red); }
.kpi .k-val.pos { color: var(--accent-green); }
.kpi .k-sub { margin-top: 5px; font-size: 12px; color: var(--text-faint); display:flex; justify-content: space-between; }

.bar-row { display: grid; grid-template-columns: 200px 1fr 130px; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.bar-row:last-child { border-bottom: none; }
.bar-track { background: var(--surface-alt); border-radius: 6px; height: 14px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 6px; background: var(--accent-red); min-width: 2px; }
.bar-fill.gelir { background: var(--accent-green); }
.bar-amt { text-align: right; font-weight: 700; }

/* ---------- Tablolar ---------- */
.mh-table-wrap { overflow-x: auto; }
.mh-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.mh-table th {
    text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px;
    color: var(--text-muted); padding: 9px 10px; border-bottom: 1px solid var(--border-strong);
    white-space: nowrap;
}
.mh-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.mh-table tr:hover td { background: var(--surface-alt); }
.mh-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Ağaçlar (hesap planı / merkezler) ---------- */
.tree { list-style: none; }
.tree li { margin: 1px 0; }
.tree-node {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 9px; border-radius: 8px; font-size: 13.5px;
}
.tree-node:hover { background: var(--surface-alt); }
.tree-node .t-code { color: var(--accent-purple); font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.mc-icon-wrap { display: inline-flex; align-items: center; color: var(--text-muted); flex-shrink: 0; }
.mh-mc-icon { width: 22px; height: 22px; display: block; }
i.mh-mc-icon { font-size: 18px; width: auto; height: auto; }
.tree-node .t-name { flex: 1 1 140px; min-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-node .t-name.inactive { color: var(--text-faint); text-decoration: line-through; }
.tree-node .t-actions { display: flex; gap: 4px; opacity: 0; }
.tree-node:hover .t-actions { opacity: 1; }
.tree-toggle {
    background: none; border: none; color: var(--text-muted); width: 20px; flex-shrink: 0;
    font-size: 12px; padding: 0;
}
.tree-children { margin-left: 22px; border-left: 1px solid var(--border); padding-left: 6px; }
.tree-children.collapsed { display: none; }

/* Dokunmatik cihazda hover yok → aksiyonlar hep görünür */
@media (hover: none) { .tree-node .t-actions { opacity: 1; } }
/* Dar ekranda düğüm içeriği sarılır; isim asla ezilmez */
@media (max-width: 760px) {
    .tree-node { flex-wrap: wrap; row-gap: 5px; }
    .tree-node .t-name {
        white-space: normal; overflow: visible; text-overflow: clip;
        flex: 1 1 55%; min-width: 130px; line-height: 1.3;
    }
    .tree-node .t-actions { flex-basis: 100%; justify-content: flex-end; display: flex; }
    .tree-children { margin-left: 12px; }
}

/* ---------- Hesap arama dropdown ---------- */
.acct-search-wrap { position: relative; }
.acct-dropdown {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
    background: #1c1c21; border: 1px solid var(--border-strong); border-radius: 12px;
    max-height: 290px; overflow-y: auto; display: none;
    box-shadow: 0 12px 30px rgba(0,0,0,.5);
}
.acct-dropdown.open { display: block; }
.acct-opt { padding: 9px 13px; cursor: pointer; font-size: 13.5px; display: flex; gap: 9px; align-items: baseline; }
.acct-opt:hover, .acct-opt.hl { background: var(--surface-hover); }
.acct-opt .code { color: var(--accent-purple); font-weight: 700; font-size: 12px; white-space: nowrap; }
.acct-opt .name { flex: 1; }

/* ---------- Kayıt girişi ---------- */
.entry-layout { display: grid; grid-template-columns: minmax(340px, 460px) 1fr; gap: 20px; align-items: start; }
/* Grid item'ların min-width:auto'su tabloyu grid'e dayatıp yatay taşma yaratıyordu —
   kartlar daralabilsin, tablo kendi wrap'ında (overflow-x) kaysın */
.entry-layout > * { min-width: 0; }
@media (max-width: 980px) { .entry-layout { grid-template-columns: 1fr; } }
.entry-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Grid taşma koruması: hücreler daralabilsin (iOS date input doğal genişliği
   hücreyi büyütüp komşusuyla üst üste bindiriyordu) */
.entry-grid2 > * { min-width: 0; }
.mh-input, .mh-select { min-width: 0; }
input[type="date"].mh-input, input[type="datetime-local"].mh-input {
    -webkit-appearance: none; appearance: none;
    min-height: 44px; /* iOS'ta appearance:none yüksekliği sıfırlamasın */
}
/* iOS: appearance:none sonrası tarih değeri ortalanıyordu — diğer inputlarla hizala */
input.mh-input::-webkit-date-and-time-value { text-align: left; }
@media (max-width: 560px) { .entry-grid2 { grid-template-columns: 1fr; } }
.cur-rate-note { font-size: 12px; color: var(--text-faint); margin-top: 4px; min-height: 15px; }

/* ---------- Mizan import ---------- */
.mizan-step { margin-bottom: 18px; }
.mizan-pick-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.mizan-pick-row .mh-btn { flex-shrink: 0; }
.mizan-pick-row .mh-field { min-width: 170px; } /* Dönem seçici ezilmesin; dar ekranda buton alta sarar */
.mizan-summary-strip { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); margin: 10px 0; }
.mizan-summary-strip b { color: var(--text-main); }
.diff-ok { color: var(--accent-green); }
.diff-bad { color: var(--accent-red); font-weight: 700; }

/* ---------- İzin matrisi ---------- */
.perm-check { width: 18px; height: 18px; accent-color: var(--accent-blue); cursor: pointer; }
.access-row { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.access-row:hover { background: var(--surface-alt); }

/* ---------- Modal ---------- */
.mh-modal-backdrop {
    /* z-index 300: .mizan-fullscreen (200) ÜSTÜNDE olmalı — tam-ekran mizan panelinden
       "＋ Yeni merkez" modalı arkada kalıyordu */
    position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 300;
    display: none; align-items: center; justify-content: center;
    padding: calc(env(safe-area-inset-top, 0px) + 20px)
             max(env(safe-area-inset-right, 0px), 20px)
             calc(env(safe-area-inset-bottom, 0px) + 20px)
             max(env(safe-area-inset-left, 0px), 20px);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.mh-modal-backdrop.open { display: flex; }
.mh-modal {
    background: #1a1a1f; border: 1px solid var(--border-strong); border-radius: var(--radius-card);
    /* v0.9.4: 88vh DEĞİL — backdrop'un safe-area padding'i hesaba katılmıyordu
       (iPhone'da 750px isteyip 719px alana sığmıyor, "Kaydet" satırı kırpılıyordu).
       %100 = flex ebeveynin content box'ı, padding'i zaten dışlar. */
    width: 100%; max-width: 520px; max-height: 100%; overflow-y: auto; padding: 22px;
}
/* Kısa ekranda (telefon yatay + klavye) modalı ortalama — üstten hizala, backdrop kaysın;
   aksi halde "Kaydet" butonu klavyenin altında kalıyor ve ulaşılamıyor. */
@media (max-height: 500px) and (pointer: coarse) {
    .mh-modal-backdrop { align-items: flex-start; overflow-y: auto; }
    .mh-modal { max-height: none; }
}
.mh-modal h3 { margin-bottom: 16px; font-size: 17px; }
.mh-modal .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* ---------- Bildirim ---------- */
#mh-toast {
    position: fixed; bottom: calc(env(safe-area-inset-bottom, 0px) + 26px);
    left: 50%; transform: translateX(-50%) translateY(20px);
    background: #26262c; color: var(--text-main);
    border: 1px solid var(--border-strong); border-left: 4px solid var(--accent-green);
    padding: 12px 20px; border-radius: 12px; font-size: 14px; font-weight: 600;
    opacity: 0; pointer-events: none; transition: all .25s; z-index: 400; max-width: 90vw;
}
#mh-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#mh-toast.err { border-left-color: var(--accent-red); }

/* ---------- Raporlar ---------- */
.rp-quick { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.rp-quick .mh-btn.active { background: var(--accent-blue); border-color: var(--accent-blue); color: var(--on-accent); }
.rp-range { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.rp-range .mh-field { flex: 1 1 160px; min-width: 150px; max-width: 220px; }
.rp-range .mh-btn { flex-shrink: 0; height: 44px; }

/* ---------- Ödeme şekilleri ---------- */
.pay-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.pay-row:last-child { border-bottom: none; }
.pay-row.inactive { opacity: .5; }
.pay-row > div { min-width: 120px; }

/* ---------- Bildirimler ---------- */
.notif-badge {
    position: absolute; top: 6px; left: 24px;
    min-width: 17px; height: 17px; padding: 0 4px;
    background: var(--accent-red); color: #fff;
    border-radius: 999px; font-size: 10.5px; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
}
.notif-row {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 12px 8px; border-bottom: 1px solid var(--border); cursor: pointer;
}
.notif-row:last-child { border-bottom: none; }
.notif-row:hover { background: var(--surface-alt); }
.notif-row .n-icon { font-size: 20px; margin-top: 2px; }
.notif-row.unread .n-title { font-weight: 800; }
.notif-row .n-title { font-size: 14px; font-weight: 600; }
.notif-row .n-body { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.notif-row .n-time { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; margin-left: auto; }
.notif-row .n-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-blue); margin-top: 8px; flex-shrink: 0; }

/* ---------- Zoom kontrolü (ana MerCont .btn.glass ile birebir) ---------- */
.zbtn.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.zbtn.glass:hover { background: var(--surface-hover); transform: translateY(-1px); }
.zbtn.glass:active { transform: scale(0.94); }
.zbtn.glass:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
/* Light temalarda cam kenarı görünmez kalmasın (ana app deseni) */
body[data-theme$="-light"] .zbtn.glass { border-color: var(--border-strong); box-shadow: 0 4px 16px rgba(0,0,0,0.10); }
body[data-theme$="-light"] #mh-zoom-control { background: var(--surface-alt); border-color: var(--border-strong); }

/* ---------- Erişim kapalı ---------- */
.no-access { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.no-access i { font-size: 52px; color: var(--accent-orange); display: block; margin-bottom: 14px; }

/* ---------- Mobil ----------
   v0.9.4: ikinci eksen (max-height) telefon YATAYINI (844×390) yakalar — eski
   max-width:760px kuralı yatayda hiç eşleşmiyordu, bu yüzden dikey ray devrede
   kalıyor ve 390px yüksekliğe sığmayıp kesiliyordu.
   orientation:landscape KULLANMA — iPad'i (768-1024px yükseklik) de yakalar.
   pointer:coarse, alta yerleşik DevTools'lu masaüstü penceresini dışarıda tutar. */
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
    #app-shell.active { flex-direction: column; }
    .sidebar {
        width: 100%; height: auto; flex: 0 0 auto; z-index: 50;
        position: static;                      /* sticky KALDIRILDI */
        background: var(--primary-bg);
        flex-direction: row; align-items: center;
        overflow-x: auto; overflow-y: hidden;
        padding: calc(env(safe-area-inset-top, 0px) + 10px)
                 max(env(safe-area-inset-right, 0px), 10px)
                 10px
                 max(env(safe-area-inset-left, 0px), 10px);
        border-right: none; border-bottom: 1px solid var(--border);
        /* şeridin sağda devam ettiği belli olsun (iOS scroll çubuğunu gizliyor) */
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
                mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
    }
    /* Şerit düzeninde sol inset içerik sütununa ait (yatayda çentik SOLDA olabilir) */
    #mh-scroll { padding-left: env(safe-area-inset-left, 0px); }
    .sidebar .brand { padding: 0 8px; white-space: nowrap; }
    .sidebar .whoami, .sidebar .spacer { display: none; }
    .nav-btn {
        width: auto; white-space: nowrap; padding: 8px 10px;
        min-height: 44px; min-width: 44px; justify-content: center;
    }
    /* :not(.notif-badge) ŞART — #notif-badge de bir <span>; eski kural onu da gizliyordu,
       yani okunmamış bildirim rozeti telefonda HİÇ görünmüyordu. */
    .nav-btn > span:not(.notif-badge) { display: none; }
    .nav-btn .notif-badge { display: inline-flex; }
    .main { padding: 16px 14px 50px; }
    .bar-row { grid-template-columns: 110px 1fr 100px; font-size: 12.5px; }
}

/* ---------- v0.9.4: svh desteklemeyen tarayıcı (iOS < 15.4) güvenliği ----------
   iOS'ta 100vh = LARGE viewport (adres çubuğu gizliyken) → sabit kabuk görünür alandan
   uzun olur ve overflow:clip yüzünden altı kalıcı kesik kalırdı. Eski davranışa dön. */
@supports not (height: 100svh) {
    #app-shell.active { height: auto; min-height: 100vh; overflow: visible; }
    .sidebar { position: sticky; top: 0; max-height: 100vh; }
    #mh-scroll { overflow: visible; }
}

/* ---------- v0.9.4: klavye odak halkası ----------
   #mh-scroll scroll konteyneri olunca odak halkası kritikleşiyor: kutu kayıyor ama
   nerede olduğun belli olmuyor. */
.nav-btn:focus-visible, .mh-btn:focus-visible, .seg-toggle button:focus-visible,
.mh-split-ctl button:focus-visible, .tree-toggle:focus-visible,
.theme-card:focus-visible, .acct-opt:focus-visible, .notif-row:focus-visible {
    outline: 2px solid var(--accent-blue); outline-offset: 2px;
}
.mh-input:focus-visible, .mh-select:focus-visible, .mh-textarea:focus-visible {
    outline: 2px solid var(--accent-blue); outline-offset: 1px;
}

/* ---------- v0.9.4: yazdırma ----------
   Sabit kabuk + iç-scroll, yazdırmada yalnız ilk ekranı basardı. */
@media print {
    #app-shell.active { display: block; height: auto; overflow: visible; }
    .sidebar, #mh-zoom-bar, #mh-zoom-ver, #mh-toast, .mh-split-ctl { display: none !important; }
    #mh-scroll, .main, .main.mh-split-active,
    .main.mh-split-active .mh-panel-body, .mh-table-wrap {
        overflow: visible !important; height: auto !important; max-height: none !important;
    }
    #mh-panels { display: block !important; }
}