/* Demir Konut – tasarım sistemi */
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations'), url('../fonts/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url('../fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations'), url('../fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --navy: #141E2E; --navy-2: #1E2D44; --navy-3: #2A3C58;
  --accent: #C8963E; --accent-2: #E5B86A; --accent-soft: rgba(200, 150, 62, 0.12); --accent-glow: rgba(200, 150, 62, 0.28);
  --green: #10B981; --green-soft: rgba(16, 185, 129, 0.12);
  --red: #EF4444; --red-soft: rgba(239, 68, 68, 0.12);
  --amber: #F59E0B; --amber-soft: rgba(245, 158, 11, 0.14);
  --teal: #06B6D4; --teal-soft: rgba(6, 182, 212, 0.12);
  --steel: #475569; --steel-soft: rgba(71, 85, 105, 0.14);
  --slate: #64748B; --muted: #94A3B8;
  --bg: #F8FAFC; --surface: #FFFFFF; --surface-2: #F1F5F9; --surface-3: #E2E8F0;
  --line: #E2E8F0; --line-2: #EDF2F7;
  --ink: #0F172A; --ink-2: #334155; --on-accent: #FFFFFF;
  --c-gelir: var(--green); --c-gider: var(--red); --c-odeme: var(--amber); --c-tahsilat: var(--teal); --c-virman: var(--steel);
  --radius: 18px; --radius-md: 14px; --radius-sm: 10px;
  --shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.03);
  --shadow-2: 0 4px 16px -2px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
  --shadow-3: 0 20px 30px -8px rgba(15, 23, 42, 0.12), 0 8px 12px -4px rgba(15, 23, 42, 0.05);
  --shadow-glow: 0 0 20px -3px var(--accent-glow);
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --tabbar-h: 66px; --topbar-h: 58px; --ease: cubic-bezier(.2, .8, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}
[data-theme="dark"] {
  --navy: #0B111A; --navy-2: #131B2A; --navy-3: #1C283C;
  --bg: #090D16; --surface: #111827; --surface-2: #162032; --surface-3: #1E2D44;
  --line: rgba(255, 255, 255, 0.08); --line-2: rgba(255, 255, 255, 0.05);
  --ink: #F8FAFC; --ink-2: #CBD5E1; --muted: #8E9FB5; --slate: #94A3B8;
  --green: #34D399; --green-soft: rgba(52, 211, 153, 0.15);
  --red: #F87171; --red-soft: rgba(248, 113, 113, 0.15);
  --amber: #FBBF24; --amber-soft: rgba(251, 191, 36, 0.15);
  --teal: #22D3EE; --teal-soft: rgba(34, 211, 238, 0.15);
  --steel: #94A3B8; --steel-soft: rgba(148, 163, 184, 0.15);
  --accent: #E5B86A; --accent-2: #F3CF8B; --accent-soft: rgba(229, 184, 106, 0.16);
  --accent-glow: rgba(229, 184, 106, 0.35);
  --shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 18px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-3: 0 20px 40px -10px rgba(0, 0, 0, 0.65);
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); }
body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 15px; line-height: 1.45;
  -webkit-font-smoothing: antialiased; font-feature-settings: 'cv11', 'ss01'; overscroll-behavior-y: contain; }
body.noscroll { overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
.num, .tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); } .small { font-size: 12.5px; } .xs { font-size: 11.5px; } .b { font-weight: 650; }
.pos { color: var(--green); } .neg { color: var(--red); } .warn-t { color: var(--amber); }
.ic { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; }
.ic.s { width: 16px; height: 16px; } .ic.l { width: 24px; height: 24px; }
.row { display: flex; align-items: center; gap: 8px; } .row.wrap { flex-wrap: wrap; } .spacer { flex: 1; }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 14px; } .grid-3 { display: grid; grid-template-columns: 1fr; gap: 14px; }
.mt { margin-top: 14px; } .mt-s { margin-top: 8px; } .mb { margin-bottom: 14px; }

/* ---------------- splash */
/* v5.6: renkler, yazılar ve logo yönetim panelinden (Tema & PWA › Açılış ekranı) gelir; index.html'deki satır içi betik
   son ayarları ilk boyamadan önce --sp-* değişkenlerine yazar. Değişken yoksa eski lacivert/altın görünüm korunur. */
.splash { position: fixed; inset: 0; z-index: 300; background: var(--sp-bg, var(--navy)); color: var(--sp-fg, #fff); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); text-align: center; transition: opacity .35s var(--ease); }
.splash.hide { opacity: 0; pointer-events: none; }
.splash-mark { width: 76px; height: 76px; border-radius: 22px; background: linear-gradient(140deg, var(--sp-acc, var(--accent)), color-mix(in srgb, var(--sp-acc, var(--accent)) 78%, #000));
  color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 28px; letter-spacing: -.5px; box-shadow: 0 14px 40px rgba(0, 0, 0, .35); animation: pop .6s var(--ease-out); }
.splash-logo { display: block; max-width: min(200px, 60vw); max-height: 96px; object-fit: contain; animation: pop .6s var(--ease-out); }
.splash-logo.plate { background: #fff; padding: 14px 18px; border-radius: 18px; box-shadow: 0 14px 40px rgba(0, 0, 0, .25); box-sizing: content-box; max-width: min(180px, 52vw); max-height: 72px; }
.splash-name { font-weight: 700; font-size: 17px; letter-spacing: .2px; line-height: 1.3; max-width: 30ch; margin-top: 4px; animation: spIn .5s .12s var(--ease-out) both; }
.splash-sub { font-size: 13px; line-height: 1.4; opacity: .72; max-width: 36ch; margin-top: -8px; animation: spIn .5s .2s var(--ease-out) both; }
.splash-bar { width: 120px; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--sp-fg, #fff) 15%, transparent); overflow: hidden; margin-top: 10px; }
.splash-bar span { display: block; width: 40%; height: 100%; background: var(--sp-acc, var(--accent-2)); animation: slide 1.1s infinite var(--ease); }
@keyframes spIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes spPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
/* animasyon kapalı (yönetici ayarı) veya cihazda "hareketi azalt" açık: giriş hareketi yok, çubuk yalnızca yavaşça yanıp söner */
html[data-splash-anim="0"] .splash, html[data-splash-anim="0"] .splash *, html.reduce-motion .splash, html.reduce-motion .splash *, .splash.no-anim, .splash.no-anim * { animation: none !important; transition: none !important; }
html[data-splash-anim="0"] .splash-bar span, html.reduce-motion .splash-bar span, .splash.no-anim .splash-bar span { width: 100%; animation: spPulse 1.6s infinite ease-in-out !important; }
@media (prefers-reduced-motion: reduce) {
  .splash, .splash * { animation: none !important; transition: none !important; }
  .splash-bar span { width: 100%; animation: spPulse 1.6s infinite ease-in-out !important; }
}
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@keyframes pop { from { transform: scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------------- layout */
.app { display: flex; min-height: 100vh; min-height: 100dvh; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 30; height: calc(var(--topbar-h) + var(--safe-t)); padding: var(--safe-t) 12px 0 16px;
  display: flex; align-items: center; gap: 8px; background: color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.topbar.scrolled { border-bottom-color: var(--line); }
.tb-title { flex: 1; min-width: 0; }
.tb-title h1 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-title small { display: block; color: var(--muted); font-size: 12px; margin-top: -1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.tb-actions { display: flex; gap: 4px; }
.icon-btn { width: 40px; height: 40px; border-radius: 12px; border: 0; background: transparent; display: grid; place-items: center; color: var(--ink-2);
  transition: background .15s, transform .15s, color .15s; }
.icon-btn:hover { background: var(--surface-3); color: var(--ink); transform: scale(1.04); } .icon-btn:active { transform: scale(.92); }
.icon-btn.solid { background: var(--surface); box-shadow: var(--shadow-1); }
.sync-badge { border: 0; background: var(--amber-soft); color: var(--amber); font-size: 12px; font-weight: 700; border-radius: 999px; padding: 6px 12px;
  display: inline-flex; align-items: center; gap: 6px; }
.offline-bar { background: var(--amber); color: #fff; font-size: 12.5px; font-weight: 600; padding: 7px 14px; display: flex; align-items: center; gap: 8px; }
.view { width: 100%; max-width: 1260px; margin: 0 auto; padding: 8px 16px calc(var(--tabbar-h) + var(--safe-b) + 28px); }
.page { animation: pageIn .32s var(--ease-out); }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.reveal > * { animation: rise .45s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; animation-timing-function: var(--ease); }

/* ---------------- tab bar (telefon) */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: calc(var(--tabbar-h) + var(--safe-b)); padding: 0 6px var(--safe-b);
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; background: color-mix(in srgb, var(--surface) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px); border-top: 1px solid var(--line); }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 100%; font-size: 11px; font-weight: 600;
  color: var(--muted); text-decoration: none; border: 0; background: none; position: relative; transition: color .2s; }
.tab .ic { width: 23px; height: 23px; transition: transform .25s var(--ease-out); }
.tab.active { color: var(--accent); font-weight: 700; }
.tab.active .ic { transform: translateY(-2px) scale(1.08); }
.tab.active::after { content: ''; position: absolute; top: 5px; width: 5px; height: 5px; border-radius: 5px; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.fab { justify-self: center; width: 58px; height: 58px; margin-top: -26px; border-radius: 20px; border: 4px solid var(--bg);
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 50%, #B45309 100%); color: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 24px -4px rgba(217, 119, 6, .55); transition: transform .2s var(--ease-out); }
.fab .ic { width: 28px; height: 28px; } .fab:active { transform: scale(.9) rotate(90deg); }
.fab-desktop { display: none; }

/* ---------------- kenar menü (tablet yatay / masaüstü) */
.sidebar { display: none; }
@media (min-width: 1024px) {
  .tabbar { display: none; }
  .sidebar { display: flex; flex-direction: column; width: 260px; flex: none; position: sticky; top: 0; height: 100vh;
    background: linear-gradient(180deg, #0E1624 0%, #152033 100%); color: #CBD5E1;
    padding: 20px 14px 16px; overflow-y: auto; border-right: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12); }
  .sidebar::-webkit-scrollbar { width: 5px; }
  .sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 99px; }
  .view { padding: 12px 32px 52px; }
  .topbar { padding-left: 32px; padding-right: 24px; }
  .fab-desktop { display: grid; position: fixed; right: 28px; bottom: 28px; z-index: 40; width: 60px; height: 60px; border-radius: 20px; border: 0;
    background: linear-gradient(145deg, #F59E0B 0%, #D97706 50%, #B45309 100%); color: #fff; place-items: center;
    box-shadow: 0 12px 28px -4px rgba(217, 119, 6, .5), 0 0 0 1px rgba(255, 255, 255, .2);
    transition: transform .2s var(--ease-out), box-shadow .2s; }
  .fab-desktop:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 16px 36px -4px rgba(217, 119, 6, .65); }
  .fab-desktop:active { transform: scale(.95); }
  .fab-desktop .ic { width: 28px; height: 28px; }
}
.sb-brand { display: flex; align-items: center; gap: 12px; padding: 6px 8px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); margin-bottom: 8px; }
.sb-mark { width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(140deg, #F59E0B 0%, #B45309 100%); color: #fff; display: grid;
  place-items: center; font-weight: 850; letter-spacing: -.4px; box-shadow: 0 8px 20px rgba(245, 158, 11, 0.35); }
.sb-brand b { display: block; color: #fff; font-size: 16.5px; letter-spacing: .2px; font-weight: 800; }
.sb-brand small { color: #94A3B8; font-size: 11.5px; font-weight: 500; }
.sb-group { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: #64748B; padding: 16px 10px 6px; text-transform: uppercase; }
.sb-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: #94A3B8; text-decoration: none;
  font-size: 13.5px; font-weight: 600; transition: all .18s var(--ease-out); }
.sb-link:hover { background: rgba(255, 255, 255, 0.06); color: #fff; transform: translateX(3px); }
.sb-link.active { background: linear-gradient(90deg, rgba(200, 150, 62, 0.22) 0%, rgba(200, 150, 62, 0.04) 100%);
  color: #fff; box-shadow: inset 3.5px 0 0 var(--accent); font-weight: 700; }
.sb-link .ic { opacity: .9; transition: transform .2s; }
.sb-link:hover .ic { transform: scale(1.1); opacity: 1; }
.sb-foot { margin-top: auto; padding: 16px 8px 4px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 12.5px; }

/* ---------------- kartlar */
.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1); border: 1px solid var(--line-2); padding: 16px; position: relative;
  transition: transform .22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .22s ease, border-color .22s ease; }
.card:hover { box-shadow: var(--shadow-2); border-color: rgba(200, 150, 62, 0.2); }
.card.flat { box-shadow: none; } .card.pad-0 { padding: 0; overflow: hidden; }
.card.glass { background: color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter: blur(16px); }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.card-head h3 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.1px; }
.card-head .sub { color: var(--muted); font-size: 12px; font-weight: 500; }
.card-head .spacer + * { flex: none; }
.section-title { display: flex; align-items: center; gap: 8px; margin: 22px 2px 10px; font-size: 13px; font-weight: 700; color: var(--slate);
  letter-spacing: .3px; text-transform: uppercase; }
.link-btn { border: 0; background: none; color: var(--accent); font-weight: 650; font-size: 13px; padding: 4px 2px; display: inline-flex; align-items: center; gap: 2px;
  transition: transform .15s; }
.link-btn:hover { transform: translateX(2px); }
[data-theme="dark"] .link-btn { color: var(--accent-2); }

/* ---------------- KPI */
.kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kpi { background: var(--surface); border-radius: var(--radius-md); padding: 14px 15px 13px; box-shadow: var(--shadow-1); border: 1px solid var(--line-2);
  position: relative; overflow: hidden; min-width: 0; transition: transform .22s var(--ease-out), box-shadow .22s ease, border-color .22s ease; }
.kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--k, var(--navy)); }
.kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--k, var(--navy)) 0%, color-mix(in srgb, var(--k, var(--navy)) 40%, transparent) 100%);
  border-radius: 4px 0 0 4px; }
.kpi-top { display: flex; align-items: center; gap: 8px; color: var(--slate); }
.kpi-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--k, var(--navy)) 14%, transparent);
  color: var(--k, var(--navy)); flex: none; transition: transform .25s var(--ease-out); }
.kpi:hover .kpi-ico { transform: scale(1.1); }
.kpi-ico .ic { width: 17px; height: 17px; }
.kpi-label { font-size: 11.5px; font-weight: 700; letter-spacing: .35px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-val { font-size: 22px; font-weight: 800; letter-spacing: -.6px; margin-top: 8px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-sub { display: flex; justify-content: space-between; gap: 6px; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.kpi-sub b { color: var(--ink-2); font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.k-green { --k: var(--green); } .k-red { --k: var(--red); } .k-amber { --k: var(--amber); } .k-teal { --k: var(--teal); } .k-accent { --k: var(--accent); }
.k-steel { --k: var(--steel); } .k-navy { --k: var(--navy); } [data-theme="dark"] .k-navy { --k: #7FA2CC; }
@media (min-width: 700px) { .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .kpi-val { font-size: 24px; }
  .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------------- filtre hapları */
.filters { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin: 0 -2px; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.pill-select { position: relative; flex: none; }
.pill-select select { appearance: none; -webkit-appearance: none; border: 1.5px solid var(--line); background: var(--surface); border-radius: 999px;
  padding: 8px 32px 8px 14px; font-size: 13.5px; font-weight: 600; color: var(--ink); box-shadow: var(--shadow-1);
  transition: border-color .15s, box-shadow .15s; }
.pill-select select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.pill-select::after { content: ''; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.chips { display: flex; gap: 7px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips.wrap { flex-wrap: wrap; overflow: visible; }
.chip { flex: none; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 7px 14px; font-size: 13px;
  font-weight: 600; display: inline-flex; align-items: center; gap: 6px; transition: all .18s var(--ease); white-space: nowrap; cursor: pointer; }
.chip:hover { border-color: var(--muted); }
.chip:active { transform: scale(.96); }
.chip.on { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 2px 8px rgba(20, 30, 46, 0.25); }
[data-theme="dark"] .chip.on { background: var(--accent); border-color: var(--accent); color: #0F172A; }
.chip .dot { width: 8px; height: 8px; border-radius: 8px; background: currentColor; }

/* ---------------- segmented */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--surface-3); border-radius: 14px; padding: 4px; gap: 4px; }
.seg button { border: 0; background: transparent; border-radius: 10px; padding: 9px 8px; font-size: 13px; font-weight: 650; color: var(--ink-2);
  transition: all .2s var(--ease); white-space: nowrap; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.seg.types button.on[data-v="gelir"] { background: var(--green); color: #fff; } .seg.types button.on[data-v="gider"] { background: var(--red); color: #fff; }
.seg.types button.on[data-v="odeme"] { background: var(--amber); color: #fff; } .seg.types button.on[data-v="tahsilat"] { background: var(--teal); color: #fff; }
.seg.types button.on[data-v="virman"] { background: var(--steel); color: #fff; }
.seg.wrap { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); }

/* ---------------- düğmeler */
.btn { border: 0; border-radius: 13px; padding: 12px 18px; font-weight: 650; font-size: 14.5px; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; transition: transform .18s var(--ease-out), box-shadow .2s, background .2s, opacity .2s; white-space: nowrap; cursor: pointer; }
.btn:hover { transform: translateY(-1.5px); }
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .55; pointer-events: none; }
.btn-primary { background: linear-gradient(135deg, #1E2D44 0%, #101928 100%); color: #fff; box-shadow: 0 4px 14px rgba(16, 25, 40, .25); border: 1px solid rgba(255, 255, 255, .08); }
.btn-primary:hover { box-shadow: 0 6px 20px rgba(16, 25, 40, .35); }
[data-theme="dark"] .btn-primary { background: linear-gradient(135deg, #C8963E 0%, #A87A2C 100%); color: #fff; box-shadow: 0 4px 16px rgba(200, 150, 62, .3); border: 0; }
.btn-accent { background: linear-gradient(135deg, #F59E0B 0%, #D97706 50%, #B45309 100%); color: #fff; box-shadow: 0 6px 18px rgba(217, 119, 6, .35); border: 1px solid rgba(255, 255, 255, .15); }
.btn-accent:hover { box-shadow: 0 8px 24px rgba(217, 119, 6, .45); }
.btn-ghost { background: var(--surface-3); color: var(--ink); }
.btn-ghost:hover { background: color-mix(in srgb, var(--surface-3) 80%, #000); }
.btn-danger { background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%); color: #fff; box-shadow: 0 4px 14px rgba(239, 68, 68, .3); }
.btn-outline { background: transparent; border: 1.5px solid var(--line); color: var(--ink); }
.btn-outline:hover { border-color: var(--muted); background: var(--surface-2); }
.btn-block { width: 100%; } .btn-sm { padding: 8px 12px; font-size: 13px; border-radius: 10px; } .btn-xs { padding: 3px 8px; font-size: 12px; border-radius: 8px; min-height: 26px; } .mt-xs { margin-top: 6px; }
.btn .spin { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: rot .7s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }

/* ---------------- form */
.form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field > span, .flabel { font-size: 12.5px; font-weight: 650; color: var(--slate); display: flex; align-items: center; gap: 6px; }
.req::after { content: ' *'; color: var(--red); }
.input, .field input, .field select, .field textarea { width: 100%; border: 1.5px solid var(--line); background: var(--surface); border-radius: 12px;
  padding: 12px 13px; font-size: 16px; outline: none; transition: border-color .15s, box-shadow .15s; min-height: 48px; }
.field textarea { min-height: 76px; resize: vertical; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.field.err input, .field.err select, .field.err .picker-btn, .field.err .amount-box { border-color: var(--red); background: var(--red-soft); }
.field .ferr { color: var(--red); font-size: 12.5px; font-weight: 600; }
.field .hint { color: var(--muted); font-size: 12px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row.three { grid-template-columns: 1fr 1fr 1fr; }
.amount-box { display: flex; align-items: center; gap: 6px; border: 1.5px solid var(--line); border-radius: 16px; padding: 6px 14px; background: var(--surface);
  transition: border-color .15s, box-shadow .15s; }
.amount-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.amount-box input { border: 0 !important; box-shadow: none !important; padding: 8px 0 !important; font-size: 30px !important; font-weight: 750;
  letter-spacing: -.6px; background: transparent !important; min-height: 0; font-variant-numeric: tabular-nums; }
.amount-box .cur { font-size: 24px; font-weight: 700; color: var(--muted); }
.picker-btn { width: 100%; text-align: left; border: 1.5px solid var(--line); background: var(--surface); border-radius: 12px; padding: 12px 13px; min-height: 48px;
  display: flex; align-items: center; gap: 10px; font-size: 15.5px; }
.picker-btn .ph { color: var(--muted); } .picker-btn .ic:last-child { margin-left: auto; color: var(--muted); }
.switch { position: relative; width: 48px; height: 28px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; background: var(--line); border-radius: 28px; transition: background .2s; }
.switch span::before { content: ''; position: absolute; width: 22px; height: 22px; left: 3px; top: 3px; background: #fff; border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .25s var(--ease-out); }
.switch input:checked + span { background: var(--green); } .switch input:checked + span::before { transform: translateX(20px); }
.collapse-head { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 6px 0; font-weight: 650; color: var(--slate); font-size: 13.5px; width: 100%; }
.collapse-head .ic { transition: transform .25s; } .collapse-head.open .ic { transform: rotate(180deg); }
.thumb { position: relative; width: 92px; height: 92px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-3); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb button { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 13px; border: 0; background: rgba(0, 0, 0, .55); color: #fff; display: grid; place-items: center; }
.upload { display: flex; align-items: center; gap: 12px; }
.upload label { display: inline-flex; align-items: center; gap: 8px; border: 1.5px dashed var(--line); border-radius: 14px; padding: 12px 14px; color: var(--ink-2);
  font-weight: 600; font-size: 14px; cursor: pointer; }
.upload input { display: none; }

/* ---------------- listeler */
.list { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-1); border: 1px solid var(--line-2); overflow: hidden; }
.li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); text-decoration: none; color: inherit;
  background: var(--surface); width: 100%; border-left: 0; border-right: 0; border-top: 0; text-align: left;
  transition: background .18s var(--ease-out), transform .15s; cursor: pointer; }
.li:last-child { border-bottom: 0; } .li:active { background: var(--surface-2); transform: scale(.995); }
@media (hover: hover) { .li:hover { background: var(--surface-2); } }
.li-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--surface-3); color: var(--ink-2);
  transition: transform .2s var(--ease-out); }
.li:hover .li-ico { transform: scale(1.06); }
.li-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.li-title { font-weight: 650; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.li-sub { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.li-end { text-align: right; flex: none; display: flex; flex-direction: column; align-items: flex-end; }
.li-amt { font-weight: 800; font-size: 15.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.li-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; }
.t-gelir { background: var(--green-soft); color: var(--green); } .t-gider { background: var(--red-soft); color: var(--red); }
.t-odeme { background: var(--amber-soft); color: var(--amber); } .t-tahsilat { background: var(--teal-soft); color: var(--teal); }
.t-virman { background: var(--steel-soft); color: var(--steel); }
.date-head { position: sticky; top: calc(var(--topbar-h) + var(--safe-t)); z-index: 5; display: flex; justify-content: space-between; align-items: center;
  padding: 10px 8px 6px; font-size: 12.5px; font-weight: 750; color: var(--slate); background: var(--bg); }
.date-head b { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }
.tx-group { margin-bottom: 8px; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--surface-3);
  color: var(--ink-2); white-space: nowrap; }
.badge.green { background: var(--green-soft); color: var(--green); } .badge.red { background: var(--red-soft); color: var(--red); }
.badge.amber { background: var(--amber-soft); color: var(--amber); } .badge.teal { background: var(--teal-soft); color: var(--teal); }
.badge.navy { background: var(--steel-soft); color: var(--steel); }
.badge.blue { background: rgba(59, 130, 246, 0.15); color: #3B82F6; }
.sentinel { height: 40px; display: grid; place-items: center; color: var(--muted); font-size: 12.5px; }
.sum-strip { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: none; }
.sum-strip::-webkit-scrollbar { display: none; }
.sum-strip .s { flex: none; background: var(--surface); border-radius: 13px; padding: 10px 14px; border: 1px solid var(--line-2); font-size: 12px; color: var(--muted);
  box-shadow: var(--shadow-1); }
.sum-strip .s b { display: block; color: var(--ink); font-size: 14.5px; font-weight: 750; font-variant-numeric: tabular-nums; margin-top: 2px; }
.search { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px; padding: 0 14px;
  min-height: 48px; flex: 1; transition: border-color .15s, box-shadow .15s; }
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search input { border: 0; outline: none; background: transparent; flex: 1; font-size: 15.5px; padding: 10px 0; min-width: 0; color: inherit; }
.search .ic { color: var(--muted); }
.toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.toolbar.sticky { position: sticky; top: calc(var(--topbar-h) + var(--safe-t)); z-index: 6; background: var(--bg); padding: 4px 0 8px; margin-top: -4px; }

/* ---------------- tablo */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); border: 1px solid var(--line-2); box-shadow: var(--shadow-1); background: var(--surface); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--slate); font-weight: 750; padding: 12px 14px;
  border-bottom: 1.5px solid var(--line); background: var(--surface-2); position: sticky; top: 0; white-space: nowrap; }
.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--line-2); white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); }
.tbl td.wrap { white-space: normal; min-width: 160px; } .tbl .r { text-align: right; } .tbl .c { text-align: center; }
.tbl tr.tot td { font-weight: 800; background: var(--surface-2); border-top: 1.5px solid var(--line); color: var(--ink); }
.tbl tbody tr { transition: background .15s; }
.tbl tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 75%, transparent); }

/* ---------------- ilerleme */
.bar { height: 8px; border-radius: 8px; background: var(--surface-3); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 8px; background: var(--k, var(--accent)); width: 0; transition: width .8s var(--ease-out); }
.bar.thin { height: 5px; }

/* ---------------- uyarı listesi (sistem kontrolleri) */
.alerts .al { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--line-2); text-decoration: none; color: inherit;
  transition: transform .15s, background .15s; border-radius: 10px; }
.alerts .al:hover { background: var(--surface-2); transform: translateX(3px); }
.alerts .al:last-child { border-bottom: 0; }
.al-dot { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.al-dot .ic { width: 16px; height: 16px; }
.al.ok .al-dot { background: var(--green-soft); color: var(--green); } .al.warn .al-dot { background: var(--amber-soft); color: var(--amber); }
.al.err .al-dot { background: var(--red-soft); color: var(--red); } .al.info .al-dot { background: var(--surface-3); color: var(--muted); }
.al.err .al-t { color: var(--red); font-weight: 650; }
.al-t { flex: 1; font-size: 13.5px; } .al-v { font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-row { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: 13.5px; gap: 10px; }
.stat-row:last-child { border-bottom: 0; } .stat-row span { color: var(--slate); } .stat-row b { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; }
.stat-row.big b { font-size: 18px; font-weight: 800; }

/* ---------------- menü karoları */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (min-width: 700px) { .tiles { grid-template-columns: repeat(5, 1fr); } }
.tile { background: var(--surface); border-radius: var(--radius-md); border: 1px solid var(--line-2); box-shadow: var(--shadow-1); padding: 16px 10px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-size: 13px; font-weight: 650;
  text-align: center; transition: transform .2s var(--ease-out), box-shadow .2s, border-color .2s; }
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: rgba(200, 150, 62, 0.3); }
.tile:active { transform: scale(.96); }
.tile-ico { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: var(--k, var(--navy));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transition: transform .25s var(--ease-out); }
.tile:hover .tile-ico { transform: scale(1.08); }
.tile-ico .ic { width: 24px; height: 24px; }

/* ---------------- hero (cari / hesap üst kartı) */
.hero { background: linear-gradient(135deg, #101928 0%, #1A2840 50%, #24364F 100%); color: #fff; border-radius: 22px; padding: 22px; position: relative; overflow: hidden;
  box-shadow: 0 16px 36px rgba(16, 25, 40, .32); border: 1px solid rgba(255, 255, 255, 0.08); }
.hero::after { content: ''; position: absolute; right: -40px; top: -50px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 150, 62, .4), transparent 70%); pointer-events: none; }
.hero .h-label { font-size: 12px; opacity: .8; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.hero .h-val { font-size: 32px; font-weight: 850; letter-spacing: -.8px; margin: 6px 0 3px; font-variant-numeric: tabular-nums; }
.hero .h-sub { font-size: 13.5px; opacity: .88; } .hero .row { position: relative; z-index: 1; }
.hero .btn { background: rgba(255, 255, 255, .15); backdrop-filter: blur(8px); color: #fff; box-shadow: none; border: 1px solid rgba(255, 255, 255, 0.2); }
.hero .btn:hover { background: rgba(255, 255, 255, .25); transform: translateY(-1.5px); }

/* ---------------- boş durum, hata, iskelet */
.empty { text-align: center; padding: 34px 18px; color: var(--muted); }
.empty .e-ico { width: 64px; height: 64px; border-radius: 20px; background: var(--surface-3); display: grid; place-items: center; margin: 0 auto 12px; color: var(--slate); }
.empty .e-ico .ic { width: 28px; height: 28px; } .empty h4 { margin: 0 0 4px; color: var(--ink); font-size: 16px; } .empty p { margin: 0 0 14px; font-size: 13.5px; }
.sk { height: 14px; border-radius: 8px; background: linear-gradient(90deg, var(--surface-3) 25%, var(--line-2) 50%, var(--surface-3) 75%); background-size: 200% 100%;
  animation: shimmer 1.3s infinite linear; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.sk-kpi { height: 92px; border-radius: var(--radius-md); } .sk-card { height: 240px; border-radius: var(--radius); } .sk-row { height: 58px; border-radius: 12px; margin-bottom: 8px; }
.chart { min-height: 260px; } .chart.sm { min-height: 200px; } .chart.lg { min-height: 320px; }

/* ---------------- toast */
.toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabbar-h) + var(--safe-b) + 14px); z-index: 400; display: flex;
  flex-direction: column; gap: 8px; width: min(92vw, 440px); pointer-events: none; }
@media (min-width: 1024px) { .toasts { bottom: 28px; left: auto; right: 104px; transform: none; } }
.toast { pointer-events: auto; background: rgba(15, 23, 42, 0.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  color: #fff; border-radius: 16px; padding: 13px 16px; display: flex; align-items: center; gap: 12px;
  font-size: 14px; font-weight: 600; box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12); transform: translateY(16px) scale(.98); opacity: 0; transition: all .3s var(--ease-out); }
.toast.show { transform: none; opacity: 1; }
.toast.success { border-left: 4px solid #10B981; } .toast.success .ic { color: #34D399; }
.toast.error { border-left: 4px solid #EF4444; } .toast.error .ic { color: #F87171; }
.toast.warn { border-left: 4px solid #F59E0B; } .toast.warn .ic { color: #FBBF24; }
.toast button { margin-left: auto; border: 0; background: rgba(255, 255, 255, .15); color: #fff; border-radius: 9px; padding: 6px 12px; font-weight: 700; font-size: 12.5px; cursor: pointer; transition: background .15s; }
.toast button:hover { background: rgba(255, 255, 255, .25); }

/* ---------------- alt sayfa (bottom sheet) */
.sheet-wrap { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(9, 14, 24, .55); backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s var(--ease); }
.sheet { position: relative; width: 100%; max-width: 680px; max-height: 94vh; max-height: 94dvh; background: var(--surface); border-radius: 26px 26px 0 0;
  transform: translateY(105%); transition: transform .38s var(--ease-out); display: flex; flex-direction: column;
  box-shadow: 0 -16px 50px rgba(0, 0, 0, .25); border-top: 1px solid var(--line-2);
  padding-bottom: var(--safe-b); will-change: transform; }
.sheet.full { height: 94vh; height: 94dvh; } .sheet.tall { height: 80vh; height: 80dvh; }
.sheet-wrap.open .sheet { transform: translateY(0); } .sheet-wrap.open .sheet-backdrop { opacity: 1; }
.sheet-wrap.dragging .sheet { transition: none; }
.sheet-handle { width: 44px; height: 5px; border-radius: 5px; background: var(--line); margin: 10px auto 0; flex: none; opacity: .8; }
.sheet-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px 10px 20px; flex: none; touch-action: none; border-bottom: 1px solid var(--line-2); }
.sheet-head h3 { margin: 0; font-size: 17.5px; font-weight: 800; flex: 1; letter-spacing: -.3px; color: var(--ink); }
.sheet-body { overflow-y: auto; padding: 12px 20px 20px; flex: 1; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.sheet-foot { padding: 14px 20px 16px; border-top: 1px solid var(--line); display: flex; gap: 10px; flex: none; background: var(--surface); }
.sheet-foot .btn { flex: 1; }
@media (min-width: 768px) {
  .sheet-wrap { align-items: center; padding: 24px; }
  .sheet { border-radius: 24px; transform: translateY(24px) scale(.97); opacity: 0; transition: transform .3s var(--ease-out), opacity .25s; max-height: 88vh; }
  .sheet.full { height: 88vh; } .sheet-wrap.open .sheet { transform: none; opacity: 1; } .sheet-handle { display: none; } .sheet-head { padding-top: 16px; }
}
.confirm-msg { margin: 0 0 6px; color: var(--ink-2); font-size: 14.5px; }
.warn-list { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.warn-list li { display: flex; gap: 10px; align-items: flex-start; background: var(--amber-soft); color: var(--ink); border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.warn-list li .ic { color: var(--amber); margin-top: 1px; }
.pk-list { display: grid; }
.pk-item { display: flex; align-items: center; gap: 12px; padding: 12px 6px; border: 0; border-bottom: 1px solid var(--line-2); background: none; text-align: left; width: 100%; }
.pk-item.on { color: var(--accent); font-weight: 700; } .pk-item .li-sub { margin: 0; }
.pk-item.create { color: var(--accent); font-weight: 700; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-2); border-radius: 14px; overflow: hidden; border: 1px solid var(--line-2); }
.detail-grid > div { background: var(--surface); padding: 10px 12px; min-width: 0; }
.detail-grid span { display: block; font-size: 11px; color: var(--muted); font-weight: 650; text-transform: uppercase; letter-spacing: .3px; }
.detail-grid b { font-weight: 620; font-size: 14px; overflow-wrap: anywhere; }
.detail-grid .full { grid-column: 1 / -1; }
.att-img { width: 100%; border-radius: 14px; border: 1px solid var(--line); margin-top: 12px; display: block; }

/* ---------------- giriş ekranı */
.login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 18px; background:
  radial-gradient(1000px 500px at 110% -10%, rgba(200, 150, 62, .25), transparent 60%), linear-gradient(160deg, #1B2A41, #0F1A2B); }
.login-card { width: min(420px, 100%); background: var(--surface); border-radius: 26px; padding: 28px 24px 24px; box-shadow: var(--shadow-3); }
.login-card .brand { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.login-card .brand h1 { margin: 0; font-size: 22px; letter-spacing: -.4px; } .login-card .brand p { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); }
.check input { width: 18px; height: 18px; accent-color: var(--navy); }
.form-error { color: var(--red); font-size: 13.5px; font-weight: 600; min-height: 18px; }
.login-foot { text-align: center; color: rgba(255, 255, 255, .55); font-size: 12px; margin-top: 16px; }

/* ---------------- daire kartları, gantt, yardım */
.unit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .unit-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.unit { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-md); padding: 12px; box-shadow: var(--shadow-1); text-align: left; width: 100%; }
.unit .u-code { font-weight: 800; font-size: 16px; letter-spacing: -.3px; } .unit .u-sub { font-size: 12px; color: var(--muted); margin: 2px 0 8px; }
.st-satilik { --k: var(--steel); } .st-rezerve { --k: var(--amber); } .st-satildi { --k: var(--green); } .st-arsa_sahibi { --k: var(--slate); }
.st-ortak { --k: var(--teal); } .st-kendimize { --k: var(--accent); }
.phase { padding: 12px 0; border-bottom: 1px solid var(--line-2); } .phase:last-child { border-bottom: 0; }
.phase input[type=range] { width: 100%; accent-color: var(--accent); }
.faq details { border-bottom: 1px solid var(--line-2); padding: 12px 2px; } .faq details:last-child { border-bottom: 0; }
.faq summary { font-weight: 650; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.faq summary::-webkit-details-marker { display: none; } .faq details[open] summary .ic { transform: rotate(90deg); }
.faq summary .ic { transition: transform .2s; color: var(--muted); } .faq p { margin: 8px 0 0; color: var(--ink-2); font-size: 14px; }
.scn { border: 1px solid var(--line-2); border-radius: 14px; padding: 12px; margin-bottom: 10px; background: var(--surface); }
.scn h4 { margin: 0 0 4px; font-size: 14.5px; } .scn p { margin: 0 0 8px; font-size: 13px; color: var(--ink-2); }
.scn .kv { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------------- yardımcı */
.divider { height: 1px; background: var(--line-2); margin: 14px 0; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.center { text-align: center; } .right { text-align: right; }
.install-card { background: linear-gradient(135deg, var(--accent-soft), transparent); border: 1px dashed var(--accent); }
@media print { .tabbar, .topbar, .sidebar, .fab-desktop, .toasts { display: none !important; } .view { padding: 0; } }

/* ================================================================ v2 · yerel uygulama hissi */
html { touch-action: manipulation; }
.tabbar, .topbar, .sidebar, .chip, .btn, .seg, .tile, .li, .tab, .fab, .icon-btn, .sheet-head, .kpi, .nudge { -webkit-user-select: none; user-select: none; }
input, textarea, select, .detail-grid b { -webkit-user-select: text; user-select: text; }
.li.tx { -webkit-touch-callout: none; transition: transform .15s var(--ease), background .15s; }
.li.tx.pressed { transform: scale(.975); background: var(--surface-2); }
@media (display-mode: standalone) { body { overscroll-behavior-y: none; } }
.view { view-transition-name: page; padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
.tabbar { padding-left: max(6px, env(safe-area-inset-left)); padding-right: max(6px, env(safe-area-inset-right)); }
::view-transition-old(page), ::view-transition-new(page) { animation-duration: .24s; animation-timing-function: var(--ease); }
@keyframes vt-in-r { from { transform: translateX(26%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes vt-out-l { to { transform: translateX(-10%); opacity: 0; } }
@keyframes vt-in-l { from { transform: translateX(-26%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes vt-out-r { to { transform: translateX(10%); opacity: 0; } }
html[data-nav="forward"]::view-transition-old(page) { animation: vt-out-l .24s var(--ease) both; }
html[data-nav="forward"]::view-transition-new(page) { animation: vt-in-r .3s var(--ease-out) both; }
html[data-nav="back"]::view-transition-old(page) { animation: vt-out-r .24s var(--ease) both; }
html[data-nav="back"]::view-transition-new(page) { animation: vt-in-l .3s var(--ease-out) both; }
/* aşağı çekip yenileme */
.ptr { position: fixed; top: calc(var(--safe-t) + 10px); left: 50%; z-index: 60; width: 40px; height: 40px; border-radius: 20px; background: var(--surface);
  box-shadow: var(--shadow-2); display: grid; place-items: center; color: var(--slate); transform: translate(-50%, -60px); opacity: 0; pointer-events: none; }
.ptr.ready { color: var(--accent); } .ptr.spin .ic { animation: rot .7s linear infinite; }
/* panel öneri kartları */
.nudges { display: grid; gap: 10px; margin-bottom: 12px; }
@media (min-width: 900px) { .nudges { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }
.nudge { display: flex; gap: 12px; padding: 14px; border-radius: var(--radius); background: linear-gradient(135deg, var(--accent-soft), var(--surface) 70%);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.nudge-ico { width: 42px; height: 42px; border-radius: 13px; background: var(--accent); color: #fff; display: grid; place-items: center; flex: none; }
.nudge-main { min-width: 0; } .nudge-main b { display: block; font-size: 14.5px; } .nudge-main > span { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
/* ayar satırları */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-2); cursor: pointer; }
.set-row:last-of-type { border-bottom: 0; } .set-row > span:first-child { min-width: 0; }
.set-row b { display: block; font-size: 14px; font-weight: 620; } .set-row small { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.switch input:disabled + span { opacity: .45; } .seg button:disabled { opacity: .4; }
/* mikrofonlu alan */
.input-wrap { position: relative; } .input-wrap input { padding-right: 50px !important; }
.in-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 10px; border: 0; background: var(--surface-3); color: var(--ink-2); display: grid; place-items: center; }
.in-btn.rec { background: var(--red); color: #fff; animation: pulse 1.2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(178, 58, 58, .5); } 70% { box-shadow: 0 0 0 12px rgba(178, 58, 58, 0); } 100% { box-shadow: 0 0 0 0 rgba(178, 58, 58, 0); } }
.upload { flex-wrap: wrap; }
/* QR okuyucu */
.qr-sheet .sheet-body { padding: 0; background: #000; display: flex; }
.qr-wrap { position: relative; flex: 1; min-height: 360px; background: #000; overflow: hidden; }
.qr-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qr-frame { position: absolute; left: 50%; top: 45%; width: min(68vw, 300px); aspect-ratio: 1; transform: translate(-50%, -50%); box-shadow: 0 0 0 9999px rgba(0, 0, 0, .5); border-radius: 22px; }
.qr-frame i { position: absolute; width: 36px; height: 36px; border: 4px solid var(--accent-2); }
.qr-frame i:nth-child(1) { left: -2px; top: -2px; border-right: 0; border-bottom: 0; border-radius: 20px 0 0 0; }
.qr-frame i:nth-child(2) { right: -2px; top: -2px; border-left: 0; border-bottom: 0; border-radius: 0 20px 0 0; }
.qr-frame i:nth-child(3) { left: -2px; bottom: -2px; border-right: 0; border-top: 0; border-radius: 0 0 0 20px; }
.qr-frame i:nth-child(4) { right: -2px; bottom: -2px; border-left: 0; border-top: 0; border-radius: 0 0 20px 0; }
.qr-line { position: absolute; left: 8%; right: 8%; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-2), transparent); animation: scanline 2.2s ease-in-out infinite; }
@keyframes scanline { 0%, 100% { top: 10%; } 50% { top: 88%; } }
.qr-hint { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; color: #fff; font-size: 13.5px; font-weight: 600; padding: 0 22px; text-shadow: 0 1px 4px rgba(0, 0, 0, .7); }
/* kilit ekranı ve biyometrik giriş */
.lock-screen { position: fixed; inset: 0; z-index: 500; color: #fff; display: grid; place-items: center; padding: 24px; opacity: 0; transition: opacity .3s;
  background: radial-gradient(900px 420px at 110% -10%, rgba(200, 150, 62, .28), transparent 60%), linear-gradient(160deg, #1B2A41, #0F1A2B); }
.lock-screen.show { opacity: 1; }
.lock-inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lock-inner h2 { margin: 10px 0 0; font-size: 20px; } .lock-inner p { margin: 0 0 14px; opacity: .75; font-size: 14px; }
.bio-login { display: grid; gap: 12px; margin-bottom: 16px; }
.divider-text { text-align: center; color: var(--muted); font-size: 12px; }
/* tam duyarlılık: büyük ekran, yatay telefon, dar ekran */
@media (min-width: 1024px) { .view { padding-left: 28px; padding-right: 28px; } }
@media (min-width: 1440px) { .view { max-width: 1400px; } .kpi-val { font-size: 25px; } .unit-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (orientation: landscape) and (max-height: 520px) {
  :root { --tabbar-h: 52px; --topbar-h: 48px; }
  .tab span { display: none; } .fab { width: 48px; height: 48px; margin-top: -12px; border-radius: 16px; }
  .sheet { max-height: 100vh; max-height: 100dvh; } .sheet.full, .sheet.tall { height: 100vh; height: 100dvh; border-radius: 0; }
  .hero .h-val { font-size: 24px; } .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 360px) { .kpi-val { font-size: 18px; } .tab { font-size: 9.5px; } .seg button { font-size: 12px; padding: 8px 3px; } .tiles { grid-template-columns: repeat(2, 1fr); } }
:fullscreen .topbar { padding-top: max(var(--safe-t), 6px); }

/* ================================================================ v3 · yeni modüller */
.dropzone { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 14px; border: 2px dashed var(--line); border-radius: var(--radius); background: var(--surface-2); text-align: center; cursor: pointer; color: var(--ink-2); }
.dropzone .ic { width: 28px; height: 28px; color: var(--accent); } .dropzone b { color: var(--ink); } .dropzone span { font-size: 12.5px; color: var(--muted); } .dropzone input { display: none; }
.imp-edit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; } .imp-edit .input { min-height: 38px; padding: 7px 9px; font-size: 13.5px; }
@media (min-width: 900px) { .imp-edit { grid-template-columns: 120px 1fr 1fr 1fr; } }
.edit-tbl .input { min-height: 36px; padding: 6px 8px; font-size: 13.5px; min-width: 80px; } .edit-tbl td { padding: 4px; } .input.r { text-align: right; }
.sc-item { display: grid; grid-template-columns: 2fr .8fr 1fr 1fr 36px; gap: 6px; margin-bottom: 6px; } .sc-item .input { min-height: 40px; padding: 8px; font-size: 14px; }
@media (max-width: 560px) { .sc-item { grid-template-columns: 1fr 1fr; } .sc-item .input:first-child { grid-column: 1 / -1; } }
.timeline { display: grid; gap: 12px; } .tl-item { display: grid; grid-template-columns: 48px 1fr; gap: 10px; }
.tl-date { text-align: center; padding-top: 10px; } .tl-date b { display: block; font-size: 20px; line-height: 1; } .tl-date span { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; }
.tl-card { cursor: pointer; }
.ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.ph-grid a, .ph-ed { position: relative; display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 1; background: var(--surface-3); }
.ph-grid img, .ph-ed img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-ed { cursor: pointer; } .ph-ed.pub { outline: 3px solid var(--accent); outline-offset: -3px; }
.ph-ed button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 12px; border: 0; background: rgba(0, 0, 0, .55); color: #fff; display: grid; place-items: center; }
.ph-pub { position: absolute; left: 4px; bottom: 4px; background: var(--accent); color: #fff; border-radius: 8px; padding: 2px 4px; display: grid; place-items: center; }
.qrbox { width: 200px; margin: 0 auto 6px; background: #fff; padding: 8px; border-radius: 12px; } .qrbox svg { width: 100%; height: auto; display: block; }
.codes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .codes span { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px; text-align: center; font-size: 15px; }
.quick-fill { display: flex; gap: 8px; align-items: center; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); padding: 8px; border-radius: 14px; }
.quick-fill .input-wrap { flex: 1; min-width: 0; } .quick-fill input { width: 100%; border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; min-height: 44px; background: var(--surface); font-size: 15px; outline: none; }
.quick-fill input:focus { border-color: var(--accent); }
.ocr-ring { width: 84px; height: 84px; border-radius: 50%; border: 6px solid var(--surface-3); border-top-color: var(--accent); margin: 0 auto 12px; display: grid; place-items: center; animation: rot 1.2s linear infinite; }
.ocr-ring span { animation: rot 1.2s linear infinite reverse; font-weight: 800; }
.att-seg button { padding: 8px 4px; font-size: 12.5px; }

/* ===================================================================== v4 */
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.choice{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--card);text-align:left;cursor:pointer;color:inherit;font:inherit}
.choice svg{width:22px;height:22px;color:var(--accent)} .choice small{color:var(--muted);font-size:12px;line-height:1.35}
.choice:active{transform:scale(.98)}
.att-chip{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px dashed var(--line);border-radius:10px;font-size:13px;margin-bottom:6px}
.att-chip small{margin-left:auto;color:var(--muted)}
.hero.sm{padding:14px 16px}.hero.sm .h-val{font-size:26px}
.timeline:not(.reveal){display:flex;flex-direction:column;gap:10px;margin:6px 0 4px}
.tl-i{display:flex;gap:10px;font-size:13.5px}.tl-dot{width:10px;height:10px;border-radius:50%;margin-top:5px;flex:none;background:var(--muted)}
.tl-dot.b-ok{background:#2E7D5B}.tl-dot.b-err{background:#B23A3A}.tl-dot.b-warn{background:#C98A1B}.tl-dot.b-info{background:#2F6FB0}
.act-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.act-grid .btn{justify-content:flex-start}
.ic-in{color:#2E7D5B;background:rgba(46,125,91,.12)}.ic-out{color:#B23A3A;background:rgba(178,58,58,.1)}
.badge.b-muted{background:rgba(138,150,163,.16);color:var(--muted)}.badge.b-info{background:rgba(47,111,176,.12);color:#2F6FB0}
.picker-btn{width:100%;text-align:left;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--input-bg,var(--card));color:inherit;font:inherit;cursor:pointer}
.card.soft{background:var(--soft,rgba(27,42,65,.04));box-shadow:none}
.edit-tbl input,.edit-tbl select{width:100%;min-width:60px;padding:7px 8px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:inherit;font:inherit;font-size:13.5px}
.edit-tbl input.r{text-align:right}.icon-btn.sm{width:30px;height:30px}.icon-btn.sm svg{width:16px;height:16px}
.row-warn td{background:rgba(201,138,27,.08)}
/* takvim */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.cal-head h3{margin:0;font-size:16px}
.cal-sum{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-bottom:10px}.cal-sum b{margin-left:4px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-wd{font-size:11px;text-align:center;color:var(--muted);font-weight:600;padding-bottom:2px}
.cal-day{min-height:54px;border-radius:10px;border:1px solid var(--line);background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:1px;padding:5px 2px;font:inherit;color:inherit;cursor:pointer;position:relative}
.cal-day.empty{border:0;background:none;cursor:default}.cal-day b{font-size:13px}.cal-day small{font-size:10.5px;font-weight:700;line-height:1.1}
.cal-day.today{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.cal-day.sel{background:var(--accent);color:#fff}.cal-day.sel small{color:#fff}
.cal-day.late::after{content:'';position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:50%;background:#B23A3A}
.cal-dot{width:6px;height:6px;border-radius:50%;background:var(--muted);margin-top:3px}
.cal-date{font-size:12px;font-weight:700;color:var(--muted);margin:10px 2px 4px}
/* satın alma */
.stepper{display:flex;gap:4px;overflow-x:auto;padding-bottom:2px}
.stepper span{flex:1;min-width:64px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11.5px;color:var(--muted);position:relative}
.stepper i{font-style:normal;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--line);font-weight:700;font-size:12px;background:var(--card)}
.stepper .done i{background:#2E7D5B;border-color:#2E7D5B;color:#fff}.stepper .cur i{border-color:var(--accent);color:var(--accent)}.stepper .cur{color:inherit;font-weight:700}
.qtbl th small,.qtbl td small{display:block;font-size:10.5px;font-weight:600}.qtbl .best{background:rgba(46,125,91,.12);color:#1F6B4B}.qtbl th.chosen{box-shadow:inset 0 -3px 0 var(--accent)}
.q-act{display:flex;gap:8px;justify-content:flex-end;margin-top:4px}.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.btn-row .btn{flex:1}
.link-btn.muted{color:var(--muted)}
/* açık kalemler */
.aging{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:10px 0}.aging span{padding:8px;border-radius:10px;border:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.aging small{font-size:11px;color:var(--muted)}.aging b{font-size:13px}.aging .warn{border-color:#C98A1B;background:rgba(201,138,27,.08)}
/* panel düzenleme */
.dash-grid{display:grid;grid-template-columns:1fr;gap:14px}.dash-grid>*{min-width:0}
@media (min-width:900px){.dash-grid{grid-template-columns:1fr 1fr}.dash-grid>.wide{grid-column:1/-1}}
.dash-tools{display:flex;align-items:center;gap:8px;margin:-4px -4px 8px;padding:6px 8px;border-radius:10px;background:var(--soft,rgba(27,42,65,.05));font-size:12.5px}
.dash-handle{cursor:grab;font-size:18px;line-height:1;padding:0 4px;touch-action:none;user-select:none}
.dash-grid.editing .dash-card{outline:2px dashed var(--line);outline-offset:2px}.dash-card.is-hidden{opacity:.35}
.dash-ghost{opacity:.4}.dash-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;margin-top:14px;border-radius:12px;background:rgba(232,163,61,.12);font-size:12.5px}
.chart.clickable{cursor:pointer}
/* asistan */
.chat{display:flex;flex-direction:column;gap:10px;padding-bottom:10px;min-height:40vh}
.bubble{max-width:92%;padding:11px 14px;border-radius:16px;font-size:14.5px;line-height:1.45}
.bubble.me{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.bubble.bot{align-self:flex-start;background:var(--card);border:1px solid var(--line);border-bottom-left-radius:4px}
.bubble.err{border-color:#B23A3A;color:#B23A3A}.bubble .list{margin:0}.b-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px}
.typing{display:flex;gap:4px}.typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:dkdot 1s infinite ease-in-out}.typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}
@keyframes dkdot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.chat-in{position:sticky;bottom:calc(var(--tabbar-h,64px) + 8px);display:flex;gap:8px;align-items:center;padding:8px;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:0 6px 20px rgba(0,0,0,.08)}
.chat-in input{flex:1;border:0;background:none;font:inherit;font-size:15px;color:inherit;outline:none;min-width:0}
/* yardım */
.help-list{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-direction:column;gap:10px}.help-list li{display:flex;gap:10px;font-size:14px;line-height:1.45}.help-list svg{flex:none;margin-top:2px;color:var(--accent)}
#helpBtn{margin-left:auto}
/* belge okuyucu */
.pg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.pg-card{border:1px solid var(--line);border-radius:12px;background:var(--card);overflow:hidden}.pg-card.cropping{border-color:#E8A33D}
.pg-view{position:relative;background:#f2f2f2;display:flex;justify-content:center}.pg-view canvas{max-width:100%;height:auto;display:block;touch-action:none}
.pg-tag{position:absolute;left:6px;top:6px}.pg-tools{display:flex;align-items:center;gap:4px;padding:6px 8px;font-size:12.5px}
.icon-btn.on{background:var(--accent);color:#fff}
tr.lowc td,input.lowc{background:rgba(232,163,61,.14)}
.banner{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:12px;font-size:13.5px;margin:10px 0}
.banner.warn{background:rgba(201,138,27,.12);color:#8A5A07}.banner.ok{background:rgba(46,125,91,.1);color:#1F6B4B}
.learn-chip{display:flex;align-items:center;gap:8px;width:100%;margin:-4px 0 6px;padding:8px 10px;border-radius:10px;border:1px dashed var(--accent);background:rgba(232,163,61,.08);color:inherit;font:inherit;text-align:left;cursor:pointer}
.learn-chip span{display:flex;flex-direction:column}.learn-chip small{color:var(--muted);font-size:11.5px}
.cf-tbl label.radio{display:flex;gap:6px;align-items:flex-start;font-size:13px;cursor:pointer}
[data-theme="dark"] .qtbl .best{color:#7FD1A8}[data-theme="dark"] .banner.warn{color:#F0C46B}[data-theme="dark"] .banner.ok{color:#7FD1A8}[data-theme="dark"] .pg-view{background:#20262e}
.chips.quick{display:flex;gap:6px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}.chips.quick .chip{white-space:nowrap;flex:none}

/* ===================================================================== v5 · alt sayfa, klavye, tam uyumluluk */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.sheet-body{scroll-padding-bottom:90px}
@media (max-width:767px){
  input,select,textarea{font-size:16px!important}
  .sheet-wrap{padding-bottom:var(--kb,0px);transition:padding-bottom .18s ease}
  .sheet{max-height:calc(100dvh - var(--kb,0px) - var(--safe-t) - 10px)}
  .sheet.full{height:calc(100dvh - var(--kb,0px) - var(--safe-t) - 10px)}
  .sheet.tall{height:min(80dvh,calc(100dvh - var(--kb,0px) - var(--safe-t) - 10px))}
  .sheet:has(.sheet-foot){padding-bottom:0}
  .sheet-foot{padding-bottom:calc(12px + var(--safe-b))}
  .kb-open .sheet,.kb-open .sheet-foot{padding-bottom:10px}
  .kb-open .tabbar{display:none}
  .seg{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}.seg::-webkit-scrollbar{display:none}.seg button{white-space:nowrap;flex:none}
  .act-grid,.choice-grid{grid-template-columns:1fr}
  .chat-in{bottom:calc(var(--tabbar-h) + var(--safe-b) + 8px)}
  .kb-open .chat-in{bottom:8px}
  .btn-row .btn{min-width:calc(50% - 4px)}
  .tbl{font-size:13px}
}
@media (max-width:380px){.form-row{grid-template-columns:1fr!important}.kpi-val{font-size:18px}.cal-day{min-height:46px}.cal-day small{font-size:9.5px}}
@media (min-width:768px) and (max-width:1023px){.sheet{width:min(720px,94vw);max-width:none}.sheet.full{height:90vh;height:90dvh}.sheet.tall{height:min(80vh,720px)}}
@media (min-width:1024px){.chat-in{bottom:16px}}
@media (hover:hover){.dash-card .chart.clickable:hover{filter:brightness(1.02)}}
/* panel 2.0: 12 sütunlu ızgara, S / M / L */
.dash-grid{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;gap:14px}
.dash-card{grid-column:span 12;min-width:0;animation:wIn .45s var(--ease-out) both;animation-delay:calc(var(--i,0) * 40ms)}
@media (min-width:640px){.dash-card.sz-s,.dash-card.sz-m{grid-column:span 6}.dash-card.sz-l{grid-column:span 12}}
@media (min-width:1100px){.dash-card.sz-s{grid-column:span 4}.dash-card.sz-m{grid-column:span 6}.dash-card.sz-l{grid-column:span 12}}
.dash-card.plain{background:none;box-shadow:none;border:0;padding:0}
@keyframes wIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.dash-card{animation:none}}
.w-card .card-head h3{display:flex;align-items:center;gap:6px}.w-card .card-head h3 svg{width:16px;height:16px;color:var(--accent)}
.w-sub{text-align:center;font-size:12.5px;color:var(--muted);margin-top:-6px}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media (min-width:900px){.quick-grid{grid-template-columns:repeat(8,1fr)}}
.quick-grid .quick{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:inherit;font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:transform .15s,box-shadow .15s}
.quick-grid .quick svg{width:22px;height:22px;color:var(--accent)}.quick-grid .quick:active{transform:scale(.96)}@media (hover:hover){.quick-grid .quick:hover{box-shadow:0 6px 18px rgba(0,0,0,.08);transform:translateY(-2px)}}
.list.compact .li{padding-top:8px;padding-bottom:8px}
.sz-seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}.sz-seg button{border:0;background:none;padding:4px 8px;font:inherit;font-size:11.5px;font-weight:700;color:var(--muted);cursor:pointer}.sz-seg button.on{background:var(--accent);color:#fff}
.dash-handle{cursor:grab;touch-action:none}

/* rehber turu */
.tour{position:fixed;inset:0;z-index:600}
.tour-hole{position:fixed;border-radius:12px;box-shadow:0 0 0 9999px rgba(9,14,24,.62);transition:all .3s var(--ease-out);pointer-events:none;outline:2px solid var(--accent)}
.tour-tip{position:fixed;max-width:min(340px,calc(100vw - 20px));background:var(--surface,#fff);color:inherit;border-radius:14px;padding:14px 14px 10px;box-shadow:0 14px 40px rgba(0,0,0,.3);transition:top .3s var(--ease-out),left .3s var(--ease-out)}
.tt-text{font-size:14.5px;line-height:1.5}.tt-foot{display:flex;align-items:center;gap:6px;margin-top:10px}.tt-n{font-size:12px;color:var(--muted)}
/* akıllı tarih, şablonlar, diğer */
.date-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}.date-chips .chip{padding:5px 10px;font-size:12.5px}
.chips.tpl{display:flex;gap:6px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;margin-bottom:6px}.chips.tpl .chip{white-space:nowrap;flex:none}
.rem-prev{color:var(--muted);margin:-4px 0 6px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}.rem-prev svg{width:14px;height:14px}
.link-card{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;margin-bottom:14px}.link-card>svg:first-child{width:26px;height:26px;color:var(--accent)}.link-card span{flex:1;display:flex;flex-direction:column}.link-card small{color:var(--muted)}
.seg.scroll{overflow-x:auto;flex-wrap:nowrap}.seg.scroll button{white-space:nowrap;flex:none;display:inline-flex;align-items:center;gap:5px}.seg.scroll svg{width:15px;height:15px}
.row-between{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
details.li.log{display:block}details.li.log summary{cursor:pointer;list-style:none}details.li.log pre{white-space:pre-wrap;word-break:break-word;background:var(--soft,rgba(0,0,0,.04));padding:8px;border-radius:8px;margin:6px 0 0}
input[type=file]{max-width:100%;font-size:14px}

/* ===================================================================== v5.1 · tema, medya, tarama, arama, doğrulama */
.reduce-motion *,.reduce-motion *::before,.reduce-motion *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
.sb-mark.has-logo{background:#fff;padding:4px}
.swatches{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:8px}
.sw{width:36px;height:36px;border-radius:50%;border:3px solid var(--surface);box-shadow:0 0 0 1px var(--line);background:var(--c,#ccc);cursor:pointer;position:relative;display:inline-grid;place-items:center;padding:0}
.sw.on{box-shadow:0 0 0 3px var(--c,#ccc)}.sw.custom{background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red)}.sw.custom input{position:absolute;inset:0;opacity:0;cursor:pointer}.sw.custom svg{width:14px;height:14px;color:#fff;filter:drop-shadow(0 0 2px #000)}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:22px 14px;border:2px dashed var(--line);border-radius:var(--radius-md,16px);background:var(--surface-2,rgba(0,0,0,.02));cursor:pointer;transition:border-color .2s,background .2s;position:relative;margin-top:8px}
.drop svg{width:28px;height:28px;color:var(--accent)}.drop.sm{padding:14px}.drop.big{padding:28px 14px}.drop small{color:var(--muted)}
.drop.drag{border-color:var(--accent);background:var(--accent-soft)}.drop.busy{opacity:.6;pointer-events:none}
.logo-prev{max-height:72px;max-width:240px;object-fit:contain}
.icon-prev{display:flex;gap:14px;flex-wrap:wrap;margin:8px 0}.icon-prev figure{margin:0;text-align:center;font-size:11.5px;color:var(--muted)}
.ip{width:58px;height:58px;border-radius:14px;overflow:hidden;background:var(--navy);display:grid;place-items:center;color:#fff;font-weight:800;box-shadow:var(--shadow-1)}.ip img{width:100%;height:100%;object-fit:cover}
.ip.maskable{border-radius:50%}.ip.apple{border-radius:13px}.ip.favicon{width:32px;height:32px;border-radius:6px;font-size:10px}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px;margin:8px 0;font-size:13px}.feat-grid .ok{color:var(--green)}.feat-grid .no{color:var(--muted)}
.up-prog{position:absolute;left:12px;right:12px;bottom:8px;height:5px;border-radius:5px;background:var(--line);overflow:hidden}.up-prog i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}
.m-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
@media (max-width:480px){.m-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.m-item{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius-sm,12px);overflow:hidden;background:var(--surface);padding:0;cursor:pointer;text-align:left;color:inherit;font:inherit}
.m-item img{width:100%;aspect-ratio:4/3;object-fit:cover;background:repeating-conic-gradient(#eee 0 25%,#fff 0 50%) 0 0/16px 16px}
.m-ic{aspect-ratio:4/3;display:grid;place-items:center;align-content:center;gap:4px;background:var(--surface-2,#f4f6f8)}.m-ic svg{width:34px;height:34px;color:var(--steel,#5D6D7E)}.m-ic b{font-size:11px;letter-spacing:.5px}
.m-ic.k-pdf svg{color:#C0453B}.m-ic.k-xml svg{color:#2E8B62}.m-ic.big{aspect-ratio:auto;padding:50px}
.m-cap{padding:6px 8px;display:flex;flex-direction:column;min-width:0}.m-cap span{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.m-cap small{font-size:11px;color:var(--muted)}
.m-check{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.35);display:grid;place-items:center;color:transparent}.m-item.sel{outline:3px solid var(--accent)}.m-item.sel .m-check{background:var(--accent);color:#fff}
.sel-bar{position:sticky;top:calc(var(--topbar-h) + var(--safe-t));z-index:5;display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:8px 10px;margin-top:10px;border-radius:12px;background:var(--surface);box-shadow:var(--shadow-2)}
.m-view{display:flex;justify-content:center;background:repeating-conic-gradient(#eee 0 25%,#fff 0 50%) 0 0/16px 16px;border-radius:12px;overflow:hidden;margin-bottom:10px}
.m-view img{max-width:100%;max-height:60vh;object-fit:contain}.m-view iframe{width:100%;height:62vh;border:0;background:#fff}.m-view video{max-width:100%;max-height:60vh}
.inv-frame{width:100%;height:calc(100% - 10px);min-height:60vh;border:1px solid var(--line);border-radius:12px;background:#fff}
.sig-wrap{position:relative;border:2px dashed var(--line);border-radius:12px;background:#fff;margin:8px 0}.sig-wrap canvas{width:100%;height:220px;display:block;touch-action:none}.sig-wrap .link-btn{position:absolute;right:8px;bottom:6px}
.due-hint,.v-hint{font-size:12.5px;margin-top:4px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;color:var(--amber,#C98A1B)}.due-hint svg,.v-hint svg{width:14px;height:14px}
.v-hint.ok{color:var(--green)}.v-hint.bad{color:var(--red)}input.v-bad{border-color:var(--red)!important}input.v-ok{border-color:var(--green)!important}
.cal-day.hol{background:var(--red-soft,#fdecea)}.cal-day.half{background:var(--amber-soft,#fff4e0)}.cal-day .hol-name{font-style:normal;font-size:8.5px;line-height:1;color:var(--red);max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cal-day.half .hol-name{color:var(--amber,#C98A1B)}
.big-search input{font-size:17px!important;padding:12px 0}
#searchBtn{margin-left:auto}#searchBtn+#helpBtn{margin-left:0}
.link-btn.neg{color:var(--red)}

/* ===================================================================== v5.2 */
.map-box{height:calc(100dvh - var(--topbar-h) - var(--tabbar-h) - 140px);min-height:360px;border-radius:var(--radius-md,16px);overflow:hidden;border:1px solid var(--line);z-index:0}
@media (min-width:1024px){.map-box{height:calc(100dvh - var(--topbar-h) - 140px)}}
.ph-pin img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.gantt-box{overflow:auto;border:1px solid var(--line);border-radius:12px;background:#fff;margin-top:8px}.gantt-box .bar-wrapper.g-gecikme .bar{fill:#C0453B}.gantt-box .bar-wrapper.g-tamam .bar{fill:#2E8B62}
.icon-btn.rec,.btn.rec{background:var(--red)!important;color:#fff!important;animation:recP 1s infinite}@keyframes recP{50%{box-shadow:0 0 0 8px rgba(192,69,59,.25)}}
.ech{width:100%}
#mapF .chip{cursor:pointer}

/* ===================================================================== v5.3 · Bugün, sade form, liste-detay */
.today-wrap{margin-top:14px}.today-card h3{margin:0;font-size:15.5px;display:flex;gap:6px;align-items:center}.today-card h3 svg{color:var(--accent)}
.today-list{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.today-row{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line);transition:opacity .35s,transform .35s}.today-row:last-child{border-bottom:0}
.today-row.done{opacity:0;transform:translateX(30px)}
.tr-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none}.tr-ic.c-err{background:var(--red-soft);color:var(--red)}.tr-ic.c-warn{background:var(--amber-soft);color:var(--amber)}.tr-ic.c-info{background:var(--accent-soft);color:var(--accent-2,var(--accent))}
.tr-main{flex:1;min-width:0;display:flex;flex-direction:column;text-align:left;background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer}.tr-main b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tr-main small{color:var(--muted);font-size:12px}
.tr-amt{font-weight:750;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:13.5px}
.today-empty{display:flex;gap:10px;align-items:center;padding:12px 4px;color:var(--green)}.today-empty svg{width:26px;height:26px}.today-empty small{color:var(--muted)}
@media (max-width:420px){.today-row{flex-wrap:wrap}.today-row .btn{margin-left:42px}}
.field-card{margin-top:14px}.field-card h3{margin:0 0 10px;font-size:15.5px;display:flex;gap:6px;align-items:center}
.more-fields{border:1px dashed var(--line);border-radius:12px;padding:6px 10px;margin:6px 0}.more-fields summary{cursor:pointer;list-style:none;display:flex;gap:6px;align-items:center;font-weight:650;font-size:13.5px;padding:4px 0}
.more-fields summary small{font-weight:400;color:var(--muted)}.more-fields summary svg{transition:transform .2s}.more-fields[open] summary svg{transform:rotate(90deg)}.more-body{padding-top:6px}
.calc-hint{font-size:12.5px;color:var(--accent-2,var(--accent));margin-top:4px}.calc-hint small{color:var(--muted)}
.tr-amt,.li-amt,.kpi-val,.h-val,td.r{font-variant-numeric:tabular-nums}
@media (min-width:1100px){
  .sheet-wrap.side{justify-content:flex-end;align-items:stretch;padding:0;pointer-events:none}
  .sheet-wrap.side .sheet-backdrop{background:transparent}
  .sheet-wrap.side .sheet{pointer-events:auto;width:460px;max-width:460px;height:100vh;max-height:100vh;border-radius:0;box-shadow:-10px 0 40px rgba(0,0,0,.15);transform:translateX(30px);opacity:0}
  .sheet-wrap.side.open .sheet{transform:none;opacity:1}
  body.has-side .view{padding-right:488px;transition:padding .25s}
}

/* ===================================================================== v5.4 */
kbd{font:11px/1 inherit;padding:3px 6px;border:1px solid var(--line);border-radius:6px;color:var(--muted)}
.sel-mode #list .li[data-id]{position:relative;padding-left:44px}.sel-mode #list .li[data-id]::before{content:'';position:absolute;left:12px;top:50%;width:20px;height:20px;margin-top:-10px;border:2px solid var(--line);border-radius:6px;background:var(--surface)}
.sel-mode #list .li.picked{background:var(--accent-soft)}.sel-mode #list .li.picked::before{background:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 3px var(--surface)}
.bulk-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tabbar-h) + var(--safe-b) + 10px);z-index:60;display:flex;align-items:center;gap:8px;flex-wrap:wrap;max-width:min(720px,calc(100vw - 20px));padding:10px 12px;border-radius:16px;background:var(--surface);box-shadow:var(--shadow-3,0 10px 30px rgba(0,0,0,.2))}
@media (min-width:1024px){.bulk-bar{bottom:20px}}
#bellBtn{position:relative}.bell-n{position:absolute;top:4px;right:4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--red);color:#fff;font-size:10.5px;font-weight:800;display:grid;place-items:center;line-height:1}
.news{display:flex;flex-direction:column;gap:14px}.news-i{display:flex;gap:12px}.news-i>svg{width:26px;height:26px;color:var(--accent);flex:none;margin-top:2px}.news-i p{margin:2px 0 0}
.tok-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}.tok{display:flex;flex-direction:column;gap:2px;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:12px}.tok i{height:34px;border-radius:8px;border:1px solid var(--line)}.tok small{color:var(--muted)}
/* v5.5 – satır içi düzenleme */
[data-ie]{cursor:pointer;text-decoration:underline dotted color-mix(in srgb,var(--accent) 70%,transparent);text-underline-offset:3px;text-decoration-thickness:1.5px;border-radius:6px;outline-offset:2px}
td[data-ie]:hover,span[data-ie]:hover,small[data-ie]:hover{background:var(--accent-soft)}[data-ie]:focus-visible{outline:2px solid var(--accent)}
[data-ie][data-locked]{text-decoration:none;cursor:not-allowed}
.ie-add{display:inline-block;margin-left:6px;color:var(--accent);font-weight:700}
td.ie-on,span.ie-on{padding-top:4px!important;padding-bottom:4px!important;background:var(--accent-soft);text-decoration:none}
.ie-input{width:100%;min-width:86px;font:inherit;font-size:max(16px,1em);color:var(--ink);background:var(--surface);border:2px solid var(--accent);border-radius:9px;padding:6px 8px;outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.ie-input.r{text-align:right;font-variant-numeric:tabular-nums}.ie-input:disabled{opacity:.6}
.ie-err .ie-input{border-color:var(--red);box-shadow:0 0 0 4px var(--red-soft)}
.ie-busy{position:relative}.ie-busy::after{content:'';position:absolute;right:10px;top:50%;width:14px;height:14px;margin-top:-7px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:rot .7s linear infinite}
.ie-calc{display:block;font-size:11px;color:var(--muted);text-align:right;margin-top:2px}
.ie-pop{position:absolute;z-index:70;padding:6px;background:var(--surface);border-radius:13px;box-shadow:var(--shadow-3)}
.ie-flash,.ie-flash td{animation:ieFlash .9s ease-out}
@keyframes ieFlash{0%{background:color-mix(in srgb,var(--green) 26%,transparent)}100%{background:transparent}}
.ie-still .reveal>*{animation:none}
.ie-hint{display:flex;align-items:center;gap:6px;margin-top:6px}.ie-hint .ic{width:14px;height:14px;color:var(--accent)}
#ieB.on{background:var(--accent);color:#fff}
.ie-mode #list .li.tx .li-amt,.ie-mode #list .li.tx .li-title,.ie-mode #list .li.tx .li-sub{text-decoration:underline dotted color-mix(in srgb,var(--accent) 75%,transparent);text-underline-offset:3px;text-decoration-thickness:1.5px}
.ie-mode #list .li.tx .li-amt.ie-on,.ie-mode #list .li.tx .li-title.ie-on{background:var(--accent-soft);border-radius:6px}
.ie-mode #list .li.tx.ie-wait{opacity:.6}
.ie-bar{border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);flex-wrap:nowrap;width:min(520px,calc(100vw - 20px))}.ie-bar>.ic{color:var(--accent);flex:none}.ie-bar-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}.ie-bar-t small{color:var(--muted);font-size:12px}
@media (prefers-reduced-motion:reduce){.ie-flash,.ie-flash td{animation:none}}

/* v6.2: döviz girişi, aranabilir kalemler ve model durumları */
.fx-box { padding:14px; border:1px solid var(--line,#e3e7ec); border-radius:14px; background:var(--surface,#f6f8fa); display:grid; gap:8px; }
.fx-box .field { margin:0; }
.chips.sub-choices, .sub-choices { max-height:140px; overflow-x:hidden; overflow-y:auto; padding:4px 0; display:flex; flex-wrap:wrap; gap:6px; align-content:flex-start; overscroll-behavior:contain; }
.sub-choices .chip { white-space:normal; text-align:left; font-size:12.5px; padding:5px 10px; }
.ai-state { margin-top:12px; padding:10px 12px; border-radius:10px; background:var(--surface,#f6f8fa); overflow-wrap:anywhere; }
#aiOut { width:100%; min-height:90px; }
#catBtn span { text-align:left; overflow-wrap:anywhere; }
@media (max-width:480px) { .fx-box .row { flex-wrap:wrap; } .fx-box [data-rate] { flex:1 0 auto; } #semIn { width:100%; min-width:0; } }

/* ---------------- Demir Konut v6.3: İleri Düzey İnovasyon Stilleri */
.telsiz-box { display: flex; flex-direction: column; align-items: center; }
.telsiz-box textarea { width: 100%; border: 1.5px solid var(--line); outline: none; resize: vertical; box-sizing: border-box; }
.telsiz-box textarea:focus { border-color: var(--primary); }
#wxRadarBox .card, #sahaWxRadar .card { box-shadow: 0 2px 8px rgba(0,0,0,0.04); }

/* ---------------- Demir Konut v8.5: Project Fugu & Modern PWA Stilleri */
@media (display-mode: window-controls-overlay) {
  .topbar {
    position: fixed !important;
    top: 0 !important;
    left: env(titlebar-area-x, 0) !important;
    width: env(titlebar-area-width, 100%) !important;
    height: env(titlebar-area-height, var(--topbar-h)) !important;
    padding-top: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    -webkit-app-region: drag;
    app-region: drag;
  }
  .topbar .tb-title {
    -webkit-app-region: drag;
    app-region: drag;
  }
  .topbar button,
  .topbar a,
  .topbar select,
  .topbar input,
  .topbar .icon-btn,
  .topbar .sync-badge {
    -webkit-app-region: no-drag !important;
    app-region: no-drag !important;
  }
  .view {
    padding-top: calc(env(titlebar-area-height, var(--topbar-h)) + 14px) !important;
  }
}

.wco-banner {
  padding: 8px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ---------------- Demir Konut: Donanım & Sensör Modları */
.sunlight-mode {
  --bg: #000000 !important;
  --surface: #111111 !important;
  --surface-2: #222222 !important;
  --ink: #FFFFFF !important;
  --ink-2: #EEEEEE !important;
  --line: #FFFFFF !important;
  --accent: #FFD700 !important;
  filter: contrast(1.2) saturate(1.1);
}

.sensor-gauge {
  width: 100%;
  max-width: 320px;
  margin: 12px auto;
  position: relative;
  text-align: center;
}

.db-meter {
  height: 24px;
  background: var(--surface-3, #223047);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--line);
}
.db-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #2E7D5B 60%, #B8730A 80%, #B23A3A 100%);
  transition: width 0.1s ease-out;
}
.db-target-line {
  position: absolute;
  left: 85%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ff3333;
  z-index: 2;
}

/* ===================================================================== NİHAİ ESTETİK & GÖRSEL DOKUNUŞLAR (ULTRA PREMIUM) */

/* 1. Global Modern Minimalist Scrollbar */
*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 999px;
  transition: background .2s;
}
*::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--ink) 35%, transparent);
}
@supports (scrollbar-color: auto) {
  * {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ink) 20%, transparent) transparent;
  }
}

/* 2. Kristal Cam Paneller (Glassmorphism) */
.glass-panel {
  background: color-mix(in srgb, var(--surface) 85%, transparent) !important;
  backdrop-filter: blur(18px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
  border: 1px solid var(--line-2) !important;
  box-shadow: var(--shadow-2) !important;
}

/* 3. Etkileşimli Hover Işıltısı (Glow) */
.glow-accent {
  box-shadow: 0 0 25px -4px var(--accent-glow) !important;
}
.glow-hover {
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
.glow-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2), 0 0 16px -4px var(--accent-glow);
}

/* 4. Tablo & Liste Mikro Canlandırma */
.tbl tbody tr {
  transition: background-color .15s ease, transform .15s ease;
}
.tbl tbody tr:hover td {
  background-color: color-mix(in srgb, var(--accent) 5%, var(--surface)) !important;
}
.li.tx {
  transition: transform .15s var(--ease-out), background-color .15s ease;
}
.li.tx:hover {
  transform: translateX(4px);
  background-color: var(--surface-2) !important;
}

/* 5. Yumuşak Tema Geçişi */
html, body, .sidebar, .topbar, .card, .kpi, .tabbar, .sheet {
  transition: background-color .22s cubic-bezier(0.16, 1, 0.3, 1),
              border-color .22s cubic-bezier(0.16, 1, 0.3, 1),
              color .22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* =====================================================================
   6. ÇOKLU CİHAZ (TELEFON, TABLET, LAPTOP) DİKEY & YATAY KULLANIM MİMARİSİ
   ===================================================================== */

/* --- A. Telefon & Tablet Yatay (Landscape) Modu (Yükseklik <= 560px) --- */
@media (orientation: landscape) and (max-height: 560px) {
  :root {
    --topbar-h: 46px;
    --tabbar-h: 46px;
  }
  .topbar {
    height: 46px;
    padding: 0 10px;
  }
  .tb-title h1 {
    font-size: 15px;
  }
  .topbar .icon-btn {
    width: 32px;
    height: 32px;
  }
  .topbar .icon-btn svg {
    width: 17px;
    height: 17px;
  }
  .tabbar {
    height: 46px;
    padding: 0 4px;
  }
  .tabbar .tab {
    padding: 3px 0;
    gap: 1px;
  }
  .tabbar .tab svg {
    width: 17px;
    height: 17px;
  }
  .tabbar .tab span {
    font-size: 9.5px;
  }
  .tabbar .fab {
    width: 36px;
    height: 36px;
    margin-top: -10px;
  }
  .tabbar .fab svg {
    width: 18px;
    height: 18px;
  }
  .view {
    padding: 10px 12px 64px !important;
  }
  .sheet {
    max-height: 94vh !important;
    border-radius: 14px 14px 0 0 !important;
  }
  .sheet-body {
    max-height: calc(94vh - 54px) !important;
    overflow-y: auto !important;
    padding: 10px 14px !important;
  }
  .kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 8px !important;
  }
  .kpi {
    padding: 10px 12px !important;
  }
  .kpi-val {
    font-size: 18px !important;
  }
  .card {
    padding: 10px 12px !important;
  }
  .table-wrap {
    max-height: calc(100vh - 120px) !important;
  }
}

/* --- B. Tablet Cihazlar (Dikey & Yatay: 641px - 1024px) --- */
@media (min-width: 641px) and (max-width: 1024px) {
  .view {
    padding: 16px 20px 84px;
  }
  .kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
  }
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
  }
  .dash-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- C. Laptop & Masaüstü Geniş Ekranlar (>= 1025px) --- */
@media (min-width: 1025px) {
  .view {
    padding: 22px 28px 48px;
    max-width: 1600px;
    margin: 0 auto;
  }
  .kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
  }
  .dash-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .dash-grid > .wide {
    grid-column: span 2;
  }
}

/* --- D. Evrensel Dokunmatik & Tablo Veri Bütünlüğü --- */
.table-wrap, .tbl-wrap, .data-table-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.tbl, .data-table {
  min-width: 580px;
}
@media (max-width: 640px) {
  .tbl-compact {
    min-width: 100%;
  }
}