/* otoflow+ — "spot ışığı" dili (Cipher referansı): kömür siyahı zemin, üstten vuran yumuşak ışık huzmeleri,
   buzlu grafit cam kartlar, tek vurgu beyaz; Inter (yerel, fonts/) ince ve geniş rakamlar.
   Tek koyu tema bilinçli tercih. Masaüstünde iki telefon + simülasyon paneli. */
@import url('../fonts/inter.css');
:root {
  color-scheme: dark;
  --bg: #0B0C10; --solid: #14151B; --solid-2: #1B1C23;
  --surface: rgba(255, 255, 255, .045); --surface-2: rgba(255, 255, 255, .07);
  --glass: linear-gradient(180deg, rgba(255, 255, 255, .085) 0%, rgba(255, 255, 255, .03) 100%);
  --glass-2: linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .05) 100%);
  --hi: inset 0 1px 0 rgba(255, 255, 255, .13);
  --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .15);
  --ink: #F4F5F7; --ink-2: #A3A6B0; --ink-3: #62656F;
  --brand-1: #004DF2; --brand-2: #08F2FE; /* logodaki artı: yalnızca iki yerde vurgu */
  --primary: #FFFFFF; --accent-ink: #0B0C10; --p-soft: rgba(255, 255, 255, .08); --p-line: rgba(255, 255, 255, .38); --p-shadow: rgba(255, 255, 255, .22);
  --on-grad: #FFFFFF; --grad: #FFFFFF;
  --ok: #4ADE80; --ok-bg: rgba(74, 222, 128, .11); --warn: #FACC15; --warn-bg: rgba(250, 204, 21, .11); --bad: #F87171; --bad-bg: rgba(248, 113, 113, .12);
  --info: #A5C8FF; --info-bg: rgba(165, 200, 255, .11); --pur: #C9B8FF; --pur-bg: rgba(201, 184, 255, .12);
  --scrim: rgba(3, 4, 7, .7); --sh-c: rgba(0, 0, 0, .7);
  --stage: #171920;
  /* üstten vuran ışık: geniş halo + ince huzmeler */
  --spot: radial-gradient(70% 38% at 50% -6%, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .07) 45%, transparent 75%);
  --rays: conic-gradient(from 150deg at 50% -18%, transparent 0deg, rgba(255, 255, 255, .06) 6deg, transparent 13deg, rgba(255, 255, 255, .045) 21deg,
    transparent 27deg, rgba(255, 255, 255, .07) 33deg, transparent 41deg, rgba(255, 255, 255, .04) 48deg, transparent 56deg, transparent 360deg);
  --f-ui: 'Inter', -apple-system, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
  --f-display: var(--f-ui); --f-body: var(--f-ui); --f-mono: var(--f-ui); --f-logo: var(--f-ui);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--stage); color: var(--ink); font: 400 14px/1.45 var(--f-ui); -webkit-font-smoothing: antialiased; font-feature-settings: 'cv11', 'ss01'; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.num, .tab-n, .money, .big { font-variant-numeric: tabular-nums; }

/* ---------- sahne ---------- */
.stage { min-height: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 30px;
  padding-block: 26px 46px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
html { background: #4D5368; }
body { min-height: 100%; background: linear-gradient(180deg, #14161C 0%, #2B2F3C 50%, #4D5368 100%) no-repeat; background-size: 100% 100%; }
/* sahnede yavaşça gezinen iki yumuşak ışık */
body::before { content: ""; position: fixed; inset: -20%; pointer-events: none; z-index: 0;
  background: radial-gradient(28% 22% at 30% 20%, rgba(255, 255, 255, .09), transparent 70%), radial-gradient(24% 20% at 72% 70%, rgba(170, 185, 230, .1), transparent 70%);
  animation: drift 30s ease-in-out infinite alternate; }
.stage { position: relative; z-index: 1; }
@keyframes drift { 0% { transform: translate(0, 0); } 50% { transform: translate(8%, 6%); } 100% { transform: translate(-6%, 10%); } }
.device { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(390px, 100%); }
.device-h { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; padding: 0 6px; }
.device-l { font: 500 11px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.device-h select { border: 1px solid var(--line-2); background: var(--solid); border-radius: 10px; padding: 5px 9px; font-size: 12px; max-width: 190px; }
.phone { width: 100%; height: min(844px, calc(100dvh - 80px)); min-height: 660px; background: #0E0F13; border-radius: 56px; padding: 9px; position: relative;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(255, 255, 255, .05), 0 50px 90px -40px rgba(0, 0, 0, .9); }
.screen { position: relative; width: 100%; height: 100%; border-radius: 47px; overflow: hidden; background: var(--bg); isolation: isolate; }
.notch { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 112px; height: 32px; background: #000; border-radius: 20px; z-index: 90; }
@media (max-width: 520px) {
  .stage { padding-left: 0; padding-right: 0; padding-block: 0 30px; gap: 18px; }
  .device { width: 100%; }
  .device-h { padding: 8px 16px 0; }
  .phone { height: calc(100dvh - 40px); min-height: 600px; border-radius: 0; padding: 0; box-shadow: none; }
  .screen { border-radius: 0; }
  .notch { display: none; }
}

/* ---------- ekran iskeleti: spot ışığı + huzmeler + toz zerreleri ---------- */
.scr { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--spot), var(--bg); }
/* huzmeler tepe noktası etrafında yavaşça salınır ve nefes alır */
.scr::before { content: ""; position: absolute; left: -35%; right: -35%; top: -8%; height: 72%; pointer-events: none; z-index: 0; background: var(--rays); filter: blur(6px);
  transform-origin: 50% 0; animation: rays 16s ease-in-out infinite alternate, breathe 7s ease-in-out infinite;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, transparent 100%); }
/* toz zerreleri: tekrarlayan desen yukarı doğru süzülür, iki katman farklı hızda */
.scr::after { content: ""; position: absolute; inset: 0 0 38% 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 78% 9%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 57%, rgba(255, 255, 255, .7) 50%, transparent 51%), radial-gradient(1px 1px at 31% 76%, rgba(255, 255, 255, .6) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 41%, rgba(255, 255, 255, .5) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 45% 32%, rgba(255, 255, 255, .85) 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 63%, rgba(255, 255, 255, .55) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 70% 84%, rgba(255, 255, 255, .7) 50%, transparent 51%),
    radial-gradient(1px 1px at 52% 6%, rgba(255, 255, 255, .6) 50%, transparent 51%), radial-gradient(1px 1px at 94% 72%, rgba(255, 255, 255, .5) 50%, transparent 51%);
  background-size: 190px 240px, 190px 240px, 190px 240px, 190px 240px, 190px 240px, 260px 330px, 260px 330px, 260px 330px, 260px 330px, 260px 330px;
  animation: dust 38s linear infinite, twinkle 4.5s ease-in-out infinite;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%); mask-image: linear-gradient(180deg, #000 30%, transparent 100%); }
@keyframes rays { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes breathe { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes dust { from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 30px -240px, 30px -240px, 30px -240px, 30px -240px, 30px -240px, -20px -330px, -20px -330px, -20px -330px, -20px -330px, -20px -330px; } }
@keyframes twinkle { 0%, 100% { opacity: .38; } 50% { opacity: .7; } }
.scr > * { position: relative; z-index: 1; }
.scr.grad { background: radial-gradient(90% 50% at 50% 0%, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .05) 50%, transparent 78%), var(--bg); color: var(--ink); }
.sb { height: 50px; flex: none; display: flex; justify-content: space-between; align-items: center; padding: 4px 30px 0 34px; font: 600 14px var(--f-ui); }
.sb svg { height: 11px; width: auto; fill: currentColor; }
.hd { flex: none; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 2px 18px 12px; min-height: 52px; }
.hd > span:first-child { display: none; }
.hd h1 { margin: 0; text-align: left; font: 500 17px/1.2 var(--f-ui); letter-spacing: -.01em; text-wrap: balance; }
.hd .sub { display: block; font: 400 11.5px var(--f-ui); color: var(--ink-3); margin-top: 2px; }
.ib { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--glass); display: grid; place-items: center; color: inherit; position: relative;
  box-shadow: var(--hi), inset 0 0 0 1px var(--line); }
.ib:hover { background: var(--glass-2); }
.ib .ic { width: 18px; height: 18px; }
.ib .dot { position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: #fff; color: var(--accent-ink); font: 600 9px/15px var(--f-ui); }
.body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 18px 28px; scrollbar-width: none; }
.body::-webkit-scrollbar { display: none; }
.stack { display: flex; flex-direction: column; gap: 14px; }

/* ---------- tipografi ---------- */
.cap { font: 400 30px/1.15 var(--f-ui); letter-spacing: -.025em; margin: 0; text-wrap: balance; }
.mega { margin: 0; font: 400 34px/1.12 var(--f-ui); letter-spacing: -.03em; text-wrap: balance; color: #fff; }
.lead { margin: 0; font: 400 14.5px/1.5 var(--f-ui); color: var(--ink-2); }
.sec-t { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 2px; font: 500 17px var(--f-ui); color: var(--ink); letter-spacing: -.015em; }
.sec-t a, .sec-t button { font: 500 11.5px var(--f-ui); color: var(--ink-2); background: var(--surface-2); border: 0; border-radius: 99px; padding: 5px 10px; text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); }
.muted { color: var(--ink-2); } .faint { color: var(--ink-3); } .c { text-align: center; }
.small { font-size: 12.5px; } .xs { font-size: 11px; }
.big { font: 400 28px/1.1 var(--f-ui); letter-spacing: -.03em; }
.money { font-weight: 500; white-space: nowrap; letter-spacing: -.01em; }

/* ---------- minimalist ikonlar: ince çizgi simge, düz cam karo, gölge/3B yok ---------- */
.mi { display: grid; place-items: center; width: 50px; height: 50px; flex: none; border-radius: 15px; color: var(--ink);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.mi .ic { width: 21px; height: 21px; stroke-width: 1.5; }
.mi.sm { width: 36px; height: 36px; border-radius: 11px; } .mi.sm .ic { width: 16px; height: 16px; }
.mi.lg { width: 104px; height: 104px; border-radius: 30px; background: rgba(255, 255, 255, .03); } .mi.lg .ic { width: 42px; height: 42px; stroke-width: 1.1; }
.mi.logo-3d { width: 56px; height: 56px; border-radius: 17px; } .mi.logo-3d .ic { width: 24px; height: 24px; }
.sim-brand .mi.logo-3d { width: 44px; height: 44px; border-radius: 13px; } .sim-brand .mi.logo-3d .ic { width: 20px; height: 20px; }
.chat-h .mi.sm { width: 38px; height: 38px; }
.gi, .qa .qi, .logo-pin, .onb-art { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; flex: none; color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.gi .ic, .logo-pin .ic, .onb-art .ic { width: 21px; height: 21px; stroke-width: 1.5; }
.gi.sm { width: 34px; height: 34px; border-radius: 11px; } .gi.sm .ic { width: 16px; height: 16px; }
.gi.lg, .onb-art { width: 104px; height: 104px; border-radius: 30px; } .gi.lg .ic { width: 42px; height: 42px; stroke-width: 1.1; }
.float-ic { position: absolute; z-index: 1; pointer-events: none; }
.float-ic .mi { background: rgba(255, 255, 255, .04); animation: bob 7s ease-in-out infinite; }
.float-ic:nth-child(2n) .mi { animation-delay: -2.5s; animation-duration: 8s; }
.float-ic:nth-child(3n) .mi { animation-delay: -4.5s; }
@keyframes bob { 50% { translate: 0 -8px; } }

/* ---------- butonlar ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; padding: 0 20px; border: 0; border-radius: 15px;
  background: linear-gradient(180deg, #FFFFFF 0%, #E7E8EC 100%); color: var(--accent-ink); font: 500 15px var(--f-ui); letter-spacing: -.01em;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .12), 0 14px 30px -14px rgba(255, 255, 255, .35); transition: transform .12s, filter .12s; }
.btn .ic { width: 18px; height: 18px; }
.btn:hover { filter: brightness(.96); } .btn:active { transform: scale(.985); }
.btn.ghost, .btn.outline-w { background: var(--glass); color: var(--ink); box-shadow: var(--hi), inset 0 0 0 1px var(--line-2), 0 10px 24px -16px rgba(0, 0, 0, .8); }
.btn.ghost:hover, .btn.outline-w:hover { background: var(--glass-2); filter: none; }
.btn.light { background: #fff; color: var(--accent-ink); }
.btn.danger { background: linear-gradient(180deg, #F87171, #DC2626); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn.okb { background: linear-gradient(180deg, #4ADE80, #16A34A); color: #04140A; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn.sm { height: 38px; width: auto; padding: 0 14px; font-size: 13px; border-radius: 12px; }
.btn.sm .ic { width: 15px; height: 15px; }
.btn[disabled] { opacity: .35; pointer-events: none; }
.btns { display: flex; gap: 10px; } .btns > * { flex: 1; }
.link { background: none; border: 0; padding: 0; color: var(--ink); font: 500 12.5px var(--f-ui); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }

/* ---------- form ---------- */
.fld { display: flex; flex-direction: column; gap: 6px; padding: 6px 0; min-width: 0; }
.fld > span { font: 400 12px var(--f-ui); color: var(--ink-2); }
.fld input, .fld select, .fld textarea { width: 100%; border: 0; background: var(--surface); padding: 12px 13px; font: 400 14.5px var(--f-ui);
  color: var(--ink); outline: none; border-radius: 13px; box-shadow: var(--hi), inset 0 0 0 1px var(--line); transition: box-shadow .15s; }
.fld textarea { resize: vertical; min-height: 70px; line-height: 1.45; }
.fld input:focus, .fld select:focus, .fld textarea:focus { box-shadow: var(--hi), inset 0 0 0 1px var(--p-line), 0 0 0 3px rgba(255, 255, 255, .06); }
.fld input::placeholder, .fld textarea::placeholder { color: var(--ink-3); }
.fld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; background-color: var(--surface); }
.fld select option { background: var(--solid); color: var(--ink); }
input[type=date]::-webkit-calendar-picker-indicator { filter: invert(.85); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 10px; }
.sw { position: relative; display: inline-block; width: 46px; height: 28px; flex: none; }
.sw input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.sw i { position: absolute; inset: 0; border-radius: 14px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px var(--line); transition: .2s; }
.sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #8E919B; box-shadow: 0 2px 4px rgba(0, 0, 0, .5); transition: .2s; }
.sw input:checked + i { background: #fff; }
.sw input:checked + i::after { transform: translateX(18px); background: var(--accent-ink); }
.sw input:focus-visible + i { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
.row-sw { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.search { display: flex; align-items: center; gap: 10px; background: var(--surface); border-radius: 15px; padding: 0 15px; height: 48px; box-shadow: var(--hi), inset 0 0 0 1px var(--line); color: var(--ink-3); }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font: 400 14.5px var(--f-ui); color: var(--ink); }
.search:focus-within { box-shadow: var(--hi), inset 0 0 0 1px var(--p-line); }
input[type=range] { width: 100%; accent-color: #fff; }

/* ---------- kart & liste ---------- */
.card { background: var(--glass); border-radius: 22px; padding: 15px 16px; box-shadow: var(--hi), inset 0 0 0 1px var(--line), 0 18px 34px -24px rgba(0, 0, 0, .9); }
.card.flat { background: transparent; }
.li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left; color: inherit; }
.li:last-child { border-bottom: 0; }
.li-m { flex: 1; min-width: 0; }
.li-t { font: 500 14px/1.3 var(--f-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li-s { font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.li-r { text-align: right; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
button.li { cursor: pointer; }
.li.sel { background: var(--surface-2); border-radius: 14px; padding: 12px; border: 0; margin: 4px 0; box-shadow: inset 0 0 0 1px var(--p-line); }
.av { width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center; background: linear-gradient(160deg, #4A4E5A, #23252D); color: #fff;
  font: 500 13px var(--f-ui); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 1px rgba(255, 255, 255, .08); }
.av.sq { border-radius: 13px; background: var(--glass); color: var(--ink); box-shadow: var(--hi), inset 0 0 0 1px var(--line); }
.av.sq .ic { width: 18px; height: 18px; }
.av.sm { width: 34px; height: 34px; font-size: 11.5px; }
.empty { text-align: center; padding: 28px 10px; color: var(--ink-3); font-size: 13px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 13px; margin: 0; }
.kv dt { color: var(--ink-2); } .kv dd { margin: 0; text-align: right; font-weight: 500; min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.divider { height: 1px; background: var(--line); margin: 6px 0; }

/* hap ve çipler */
.pill { display: inline-flex; align-items: center; gap: 4px; font: 500 11px/1 var(--f-ui); padding: 5px 9px; border-radius: 99px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.p-ok { background: var(--ok-bg); color: var(--ok); } .p-warn { background: var(--warn-bg); color: var(--warn); } .p-bad { background: var(--bad-bg); color: var(--bad); }
.p-info { background: var(--info-bg); color: var(--info); } .p-pur { background: var(--pur-bg); color: var(--pur); }
.p-pri { background: rgba(255, 255, 255, .92); color: var(--accent-ink); } .p-mut { background: var(--surface-2); color: var(--ink-2); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips.wrap { flex-wrap: wrap; overflow: visible; }
.chip { flex: none; border: 0; border-radius: 99px; padding: 8px 14px; font: 500 12.5px var(--f-ui); color: var(--ink-2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.chip:hover { color: var(--ink); }
.chip.on { color: var(--accent-ink); background: #fff; box-shadow: none; }
.chip .tab-n { margin-left: 5px; opacity: .6; font-size: 11px; }

/* plaka (TR) — gerçek plaka her temada beyazdır */
.plate { display: inline-flex; align-items: stretch; border: 1.5px solid #1B1B26; border-radius: 4px; background: #FFFFFF; color: #12121C; overflow: hidden; height: 22px; flex: none; }
.plate b { background: #1F4FB5; color: #FFFFFF; font: 700 7px var(--f-ui); padding: 0 3px 2px; display: flex; align-items: flex-end; }
.plate span { font: 600 12px/20px var(--f-ui); letter-spacing: .03em; padding: 0 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.plate.lg { height: 34px; border-width: 2px; } .plate.lg b { font-size: 9px; padding: 0 5px 4px; } .plate.lg span { font-size: 18px; line-height: 30px; padding: 0 10px; }

/* ilerleme */
.bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #9EA2AD, #FFFFFF); }
.bar.ok i { background: var(--ok); } .bar.warn i { background: var(--warn); } .bar.bad i { background: var(--bad); }

/* ---------- ana sayfa ---------- */
.hero { margin: 0; padding: 0 2px 4px; position: relative; }
.hero-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hero-top .r { display: flex; gap: 8px; align-items: center; }
.hero .eyebrow { font: 400 13px var(--f-ui); color: var(--ink-2); margin-top: 18px; }
.hero-num { font: 400 40px/1.1 var(--f-ui); letter-spacing: -.035em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.delta { font: 500 12.5px var(--f-ui); margin-top: 6px; color: var(--ink-2); }
.delta b { font-weight: 500; } .delta.up b { color: var(--ok); } .delta.down b { color: var(--bad); }
.hero h2 { margin: 6px 0 4px; font: 400 26px/1.15 var(--f-ui); letter-spacing: -.025em; }
.hero p { margin: 0; color: var(--ink-2); font-size: 12.5px; }
.acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; aspect-ratio: 1 / .98; max-width: 100%; border: 0; border-radius: 18px;
  background: var(--glass); color: var(--ink); font: 400 12.5px var(--f-ui); box-shadow: var(--hi), inset 0 0 0 1px var(--line), 0 14px 26px -18px rgba(0, 0, 0, .9); }
.act:hover { background: var(--glass-2); }
.act .ic { width: 18px; height: 18px; stroke-width: 1.7; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: relative; z-index: 2; }
.stat { background: var(--glass); border-radius: 18px; padding: 13px 14px; border: 0; text-align: left; color: inherit; box-shadow: var(--hi), inset 0 0 0 1px var(--line); }
.stat:hover { background: var(--glass-2); }
.stat .k { font: 400 12px var(--f-ui); color: var(--ink-2); }
.stat .v { font: 400 24px/1.2 var(--f-ui); letter-spacing: -.03em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.stat .v small { letter-spacing: 0; }
.stat .v.sm { font-size: 17px; }
.stat.hot { background: var(--glass-2); }
.qa { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 6px; }
.qa button { background: none; border: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; font: 400 11.5px/1.2 var(--f-ui); color: var(--ink-2); padding: 0; }
.qa button:hover { color: var(--ink); }
.qa .mi { width: 54px; height: 54px; border-radius: 17px; transition: background .15s, color .15s; }
.qa button:hover .mi { background: #fff; color: var(--accent-ink); }
.hscroll { display: flex; gap: 12px; overflow-x: auto; margin: 0 -18px; padding: 4px 18px 10px; scrollbar-width: none; }
.hscroll::-webkit-scrollbar { display: none; }
.due { flex: none; width: 206px; background: var(--glass); border-radius: 20px; padding: 14px; border: 0; text-align: left; color: inherit;
  display: flex; flex-direction: column; gap: 8px; box-shadow: var(--hi), inset 0 0 0 1px var(--line); }
.due:hover { background: var(--glass-2); }
/* servis özeti grafiği */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .gl { stroke: rgba(255, 255, 255, .06); stroke-width: 1; }
.chart .ax { fill: var(--ink-3); font: 400 9.5px var(--f-ui); }
.chart .col { fill: url(#colg); }
.chart .ln { fill: none; stroke: url(#brandGrad) var(--brand-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(8, 150, 254, .35)); }
.chart .pt { fill: var(--brand-2); stroke: var(--bg); stroke-width: 2; }
.chart .tip { fill: #fff; } .chart .tipt { fill: var(--accent-ink); font: 500 9.5px var(--f-ui); }
.chart .dust { fill: rgba(255, 255, 255, .5); }

/* ---------- alt menü: cam karolar, aktif olan beyaz ---------- */
.tabbar { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; padding: 10px 16px 24px; background: linear-gradient(180deg, transparent, rgba(11, 12, 16, .92) 30%); }
.tabbar > div { display: contents; }
.tb, .tb-c { height: 54px; width: 100%; margin: 0; display: grid; place-items: center; border: 0; border-radius: 17px; color: var(--ink-2); background: var(--glass);
  box-shadow: var(--hi), inset 0 0 0 1px var(--line), 0 12px 22px -14px rgba(0, 0, 0, .9); padding: 0; }
.tb:hover, .tb-c:hover { color: var(--ink); background: var(--glass-2); }
.tb span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tb .ic, .tb-c .ic { width: 20px; height: 20px; stroke-width: 1.7; }
.tb.on { background: linear-gradient(180deg, #FFFFFF, #E4E5EA); color: var(--accent-ink); box-shadow: 0 10px 24px -12px rgba(255, 255, 255, .35); }
.tb-c { color: var(--ink); }
.tb-c .ic { stroke: url(#brandGrad) var(--brand-2); stroke-width: 2.2; }

/* ---------- açılış / tanıtım ---------- */
.splash { background: radial-gradient(80% 45% at 50% 0%, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .06) 50%, transparent 80%), var(--bg); }
.arc { position: absolute; left: 50%; top: 47%; width: 150%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; pointer-events: none; z-index: 0;
  border-top: 1.5px solid rgba(255, 255, 255, .55); box-shadow: inset 0 18px 40px -30px rgba(255, 255, 255, .5);
  -webkit-mask-image: linear-gradient(90deg, transparent 8%, #000 30%, #000 70%, transparent 92%); mask-image: linear-gradient(90deg, transparent 8%, #000 30%, #000 70%, transparent 92%); }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 4px 22px 0; }
.wordmark { display: inline-flex; align-items: center; gap: 7px; font: 600 22px/1 var(--f-ui); letter-spacing: -.03em; color: #fff; }
.wordmark::before { content: ""; width: 17px; height: 17px; border-radius: 50%; border: 3.5px solid #fff; border-right-color: transparent; transform: rotate(-35deg); flex: none; }
.wordmark.sm { font-size: 19px; } .wordmark.sm::before { width: 15px; height: 15px; border-width: 3px; }
/* otoflow+ logosu (img/otoflow-logo.webp: beyaz yazı + mavi-turkuaz artı, şeffaf zemin) */
.logo-img { display: block; height: 24px; width: auto; max-width: 100%; flex: none; user-select: none; }
.logo-img.sm { height: 21px; }
.logo-img.lg { height: 34px; margin-bottom: 14px; }
.logo-img.auth { height: 30px; margin: 0 auto 18px; }
.pulse-o { animation: pulseo 1.6s ease-in-out infinite; }
@keyframes pulseo { 50% { opacity: .55; } }
.logo { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.logo-pin { width: 64px; height: 64px; border-radius: 20px; }
.tagline { font: 400 12px var(--f-ui); letter-spacing: .02em; color: var(--ink-2); }
.center-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 28px; text-align: center; gap: 12px; }
.bottom-col { padding: 0 20px 30px; display: flex; flex-direction: column; gap: 10px; text-align: center; }
.dots { display: flex; gap: 6px; justify-content: center; }
.dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .22); }
.dots i.on { width: 20px; background: #fff; }
.scr.grad p { color: var(--ink-2); font-size: 14px; line-height: 1.55; margin: 0; }
.auth-c { flex: 1; overflow-y: auto; padding: 24px 24px 30px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.auth-c h1 { text-align: center; margin-bottom: 18px; }
.demo { margin-top: 12px; padding: 11px 13px; border-radius: 14px; background: var(--surface); color: var(--ink-2); font-size: 12px; text-align: center; box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- iş emri ---------- */
.steps { display: flex; align-items: flex-start; justify-content: space-between; position: relative; padding: 6px 2px 0; }
.steps::before { content: ""; position: absolute; left: 16px; right: 16px; top: 16px; height: 1.5px; background: var(--line-2); }
.step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 52px; font: 400 10px/1.15 var(--f-ui); color: var(--ink-3); text-align: center; }
.step i { width: 22px; height: 22px; border-radius: 50%; background: var(--solid-2); box-shadow: inset 0 0 0 1.5px var(--line-2); display: grid; place-items: center; }
.step i .ic { width: 12px; height: 12px; stroke-width: 3; }
.step.done i { background: #fff; color: var(--accent-ink); box-shadow: none; }
.step.cur i { box-shadow: inset 0 0 0 2px #fff, 0 0 0 4px rgba(255, 255, 255, .08); }
.step.cur, .step.done { color: var(--ink); }
.item { display: flex; gap: 10px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--line); }
.item:last-child { border-bottom: 0; }
.item .tag { font: 600 8.5px var(--f-ui); letter-spacing: .06em; padding: 3px 6px; border-radius: 6px; margin-top: 2px; flex: none; }
.tag.parca { background: var(--info-bg); color: var(--info); } .tag.iscilik { background: var(--pur-bg); color: var(--pur); }
.item .x { width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--ink-3); display: grid; place-items: center; flex: none; }
.item .x:hover { color: var(--bad); }
.item .x .ic { width: 13px; height: 13px; }
.tot { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; font-size: 13px; }
.tot .k { color: var(--ink-2); } .tot .v { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.total-b { border-radius: 20px; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; color: var(--ink);
  background: radial-gradient(120% 140% at 50% -40%, rgba(255, 255, 255, .2), rgba(255, 255, 255, .03) 65%), var(--solid);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px var(--line-2); }
.total-b .k { font: 400 12.5px var(--f-ui); color: var(--ink-2); }
.total-b .v { font: 400 23px var(--f-ui); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tl { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 1.5px solid var(--line-2); display: flex; flex-direction: column; gap: 11px; }
.tl li { position: relative; font-size: 12.5px; }
.tl li::before { content: ""; position: absolute; left: -21.5px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--bg); }
.tl li small { display: block; color: var(--ink-3); font-size: 11px; }
.hist { display: flex; gap: 12px; position: relative; padding-bottom: 14px; }
.hist::before { content: ""; position: absolute; left: 19px; top: 44px; bottom: 0; width: 1.5px; background: var(--line-2); }
.hist:last-child::before { display: none; }
.hist .hd-ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; flex: none; background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.hist .hd-ic .ic { stroke-width: 1.5; }

/* kroki */
.car { width: 100%; max-width: 230px; height: auto; display: block; margin: 0 auto; }
.cz { fill: rgba(255, 255, 255, .04); stroke: rgba(255, 255, 255, .22); stroke-width: 1.2; cursor: pointer; transition: fill .15s; }
.cz:hover { stroke: #fff; fill: rgba(255, 255, 255, .1); }
.cz.s1 { fill: var(--warn-bg); stroke: var(--warn); } .cz.s2 { fill: var(--info-bg); stroke: var(--info); } .cz.s3 { fill: var(--bad-bg); stroke: var(--bad); } .cz.s4 { fill: var(--pur-bg); stroke: var(--pur); }
.car-glass { fill: rgba(255, 255, 255, .08); stroke: rgba(255, 255, 255, .18); }
.car-lbl { font: 500 7px var(--f-ui); fill: var(--ink-2); pointer-events: none; text-anchor: middle; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: center; font-size: 11px; color: var(--ink-2); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; border: 1.5px solid; }
.sig { width: 100%; height: 120px; border: 1.5px dashed var(--line-2); border-radius: 14px; background: var(--surface); touch-action: none; display: block; }
.photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.photos img, .photos label { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; max-width: 100%; }
.photos label { border: 1.5px dashed var(--line-2); display: grid; place-items: center; color: var(--ink-3); cursor: pointer; }

/* gösterge */
.gauge { position: relative; width: 158px; height: 158px; margin: 0 auto; }
.gauge svg { width: 100%; height: 100%; transform: rotate(135deg); }
.gauge .bg { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 10; stroke-linecap: round; }
.gauge .fg { fill: none; stroke: url(#gg); stroke-width: 10; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(255, 255, 255, .35)); }
.gauge .fg.warn { stroke: var(--warn); filter: none; } .gauge .fg.bad { stroke: var(--bad); filter: none; }
.gauge .in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.gauge .in b { font: 400 30px var(--f-ui); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.gauge .in small { font: 400 10.5px var(--f-ui); letter-spacing: .04em; color: var(--ink-2); }

/* takvim şeridi */
.dstrip { display: flex; gap: 8px; overflow-x: auto; margin: 0 -18px; padding: 4px 18px 10px; scrollbar-width: none; }
.dstrip::-webkit-scrollbar { display: none; }
.dcell { flex: none; width: 62px; border-radius: 17px; background: var(--glass); text-align: center; padding: 9px 4px; border: 0; color: inherit; box-shadow: var(--hi), inset 0 0 0 1px var(--line); position: relative; }
.dcell .m { font: 400 10.5px var(--f-ui); color: var(--ink-3); }
.dcell .d { font: 400 22px/1.25 var(--f-ui); color: var(--ink); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dcell .w { font-size: 10.5px; color: var(--ink-3); }
.dcell.on { background: linear-gradient(180deg, #fff, #E4E5EA); box-shadow: none; }
.dcell.on .m, .dcell.on .w { color: #50535C; } .dcell.on .d { color: var(--accent-ink); }
.dcell .cnt { position: absolute; top: 7px; right: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--warn); }
.slot { display: flex; gap: 12px; align-items: stretch; }
.slot .t { width: 46px; flex: none; font: 500 13px var(--f-ui); color: var(--ink); padding-top: 14px; font-variant-numeric: tabular-nums; }
.slot .card { flex: 1; min-width: 0; }

/* rapor */
.bars { display: flex; align-items: flex-end; gap: 8px; height: 140px; padding-top: 16px; }
.bars .b { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; min-width: 0; }
.bars .b i { display: block; width: 100%; max-width: 30px; border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .05)); min-height: 3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.bars .b.cur i { background: linear-gradient(180deg, #fff, rgba(255, 255, 255, .35)); }
.bars .b span { font: 400 10px var(--f-ui); color: var(--ink-3); }
.bars .b em { font: normal 500 9.5px var(--f-ui); color: var(--ink-2); white-space: nowrap; }
.hbar { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; align-items: center; font-size: 12.5px; margin-bottom: 10px; }
.hbar b { font-weight: 500; font-variant-numeric: tabular-nums; }
.hbar .bar { grid-column: 1 / -1; }

/* ---------- fotoğraf / belge klasörü ---------- */
.thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.thumb { position: relative; aspect-ratio: 1; max-width: 100%; border: 0; padding: 0; border-radius: 13px; overflow: hidden; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb span { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 7px 5px; font: 500 9.5px/1.2 var(--f-ui); color: #fff; text-align: left;
  background: linear-gradient(transparent, rgba(0, 0, 0, .75)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thumb.doc { display: grid; place-items: center; } .thumb.doc .ic { width: 26px; height: 26px; margin-bottom: 14px; }
.viewer { display: block; width: 100%; max-height: 52vh; object-fit: contain; border-radius: 14px; background: #000; }
.drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 12px; margin-top: 8px; border-radius: 16px; border: 1.5px dashed var(--line-2); background: var(--surface); cursor: pointer; text-align: center; }
.drop .ic { width: 24px; height: 24px; margin-bottom: 4px; } .drop b { font-weight: 500; font-size: 13.5px; }
pre.raw { white-space: pre-wrap; font: 400 11px/1.45 ui-monospace, Consolas, monospace; color: var(--ink-2); background: var(--surface); border-radius: 12px; padding: 10px; margin: 8px 0 0; max-height: 220px; overflow: auto; }
label.btn { cursor: pointer; }

/* ---------- katmanlar ---------- */
.ov { position: absolute; inset: 0; background: var(--scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index: 60; display: flex; align-items: flex-end; animation: fade .18s ease-out; }
.sheet { background: radial-gradient(90% 120px at 50% 0%, rgba(255, 255, 255, .1), transparent), var(--solid); width: 100%; max-height: 88%; border-radius: 30px 30px 0 0; padding: 10px 18px 26px;
  overflow-y: auto; animation: up .24s ease-out; scrollbar-width: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 -20px 40px -10px rgba(0, 0, 0, .7); }
.sheet::-webkit-scrollbar { display: none; }
.grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line-2); margin: 0 auto 14px; }
.sheet h3 { margin: 0 0 10px; font: 500 18px var(--f-ui); letter-spacing: -.02em; text-align: center; }
.ov.left { align-items: stretch; justify-content: flex-start; }
.drawer { width: 80%; height: 100%; background: radial-gradient(120% 40% at 0% 0%, rgba(255, 255, 255, .1), transparent 70%), var(--solid); padding: 56px 18px 24px; overflow-y: auto;
  animation: slide .24s ease-out; display: flex; flex-direction: column; scrollbar-width: none; box-shadow: inset -1px 0 0 var(--line); }
.drawer::-webkit-scrollbar { display: none; }
.dr-u { display: flex; gap: 12px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.dr-i { display: flex; align-items: center; gap: 12px; padding: 6px 4px; background: none; border: 0; text-align: left; font: 400 14px var(--f-ui); color: var(--ink); border-radius: 12px; width: 100%; }
.dr-i:hover { background: var(--surface); }
.dr-i .ic { width: 34px; height: 34px; padding: 8px; border-radius: 11px; stroke-width: 1.7; color: var(--ink); background: var(--glass); box-shadow: var(--hi), inset 0 0 0 1px var(--line); overflow: visible; }
.dr-i:hover .ic { background: #fff; color: var(--accent-ink); }
.dr-g { font: 500 10.5px var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 14px 4px 4px; }
.toast { position: absolute; left: 50%; bottom: 100px; transform: translateX(-50%); background: #fff; color: var(--accent-ink); padding: 11px 16px; border-radius: 14px; font: 500 13px var(--f-ui);
  z-index: 80; max-width: 86%; text-align: center; box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .8); animation: toastIn .2s ease-out; }
@keyframes fade { from { opacity: 0; } }
@keyframes up { from { transform: translateY(24px); opacity: 0; } }
@keyframes toastIn { from { transform: translate(-50%, 16px); opacity: 0; } }
@keyframes slide { from { transform: translateX(-100%); } }

/* ---------- belge (teklif / fatura): kâğıt her zaman beyaz ---------- */
.paper { background: #FFFFFF; color: #1A1B20; border-radius: 10px; padding: 18px 16px; font: 10.5px/1.4 var(--f-ui); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .8); font-variant-numeric: tabular-nums; }
.paper h4 { margin: 0; font: 600 15px var(--f-ui); color: #0B0C10; letter-spacing: -.01em; }
.paper .ph { display: flex; justify-content: space-between; gap: 10px; border-bottom: 2px solid #0B0C10; padding-bottom: 10px; margin-bottom: 10px; }
.paper table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.paper th { text-align: left; font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: #6B6E78; border-bottom: 1px solid #DDDFE4; padding: 4px 3px; }
.paper td { border-bottom: 1px solid #F0F1F4; padding: 5px 3px; vertical-align: top; }
.paper .r { text-align: right; white-space: nowrap; }
.paper .box { border: 1px solid #E3E5EA; border-radius: 6px; padding: 7px 8px; }
.paper .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.paper .muted { color: #6B6E78; }
.paper .sum { margin-left: auto; width: 62%; }
.paper .sum div { display: flex; justify-content: space-between; padding: 2px 0; }
.paper .sum .t { border-top: 2px solid #0B0C10; margin-top: 4px; padding-top: 5px; font-weight: 700; font-size: 12.5px; color: #0B0C10; }
.paper img.sigimg { height: 44px; }

/* ---------- müşteri telefonu ---------- */
.chat-h { flex: none; padding: 0 14px 12px; display: flex; align-items: center; gap: 10px; box-shadow: inset 0 -1px 0 var(--line); }
.chat-h b { display: block; font: 500 15px var(--f-ui); letter-spacing: -.01em; }
.chat-h small { color: var(--ink-2); font-size: 11.5px; }
.chat { flex: 1; overflow-y: auto; padding: 12px 12px 18px; background: transparent; display: flex; flex-direction: column; gap: 8px; scrollbar-width: none; }
.chat::-webkit-scrollbar { display: none; }
.dsep { align-self: center; font: 400 10.5px var(--f-ui); color: var(--ink-2); background: var(--surface); padding: 4px 11px; border-radius: 99px; margin: 6px 0; box-shadow: inset 0 0 0 1px var(--line); }
.bub { align-self: flex-start; max-width: 86%; background: var(--glass); border-radius: 18px 18px 18px 6px; padding: 10px 12px 7px; font-size: 13px; line-height: 1.45;
  white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: var(--hi), inset 0 0 0 1px var(--line); }
.bub.new { animation: up .3s ease-out; box-shadow: var(--hi), inset 0 0 0 1px var(--p-line); }
.bub .meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; font: 400 10px var(--f-ui); color: var(--ink-3); }
.bub .ch { text-transform: uppercase; letter-spacing: .06em; }
.bub .lnk { display: flex; align-items: center; gap: 7px; margin-top: 9px; padding: 9px 11px; border-radius: 12px; background: #fff; color: var(--accent-ink); font: 500 12.5px var(--f-ui);
  border: 0; width: 100%; text-align: left; white-space: normal; }
.bub .lnk:hover { background: #E8E9ED; }
.bub .lnk .ic { width: 16px; height: 16px; }
.chat-in { flex: none; display: flex; gap: 8px; padding: 10px 12px 24px; align-items: center; box-shadow: inset 0 1px 0 var(--line); }
.chat-in div { flex: 1; height: 42px; border-radius: 14px; background: var(--surface); color: var(--ink-3); font-size: 13px; display: flex; align-items: center; padding: 0 14px; box-shadow: inset 0 0 0 1px var(--line); }
.notif { position: absolute; top: 48px; left: 10px; right: 10px; z-index: 85; background: rgba(28, 29, 36, .96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-radius: 20px; padding: 11px 12px;
  display: flex; gap: 10px; align-items: flex-start; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px var(--line), 0 20px 34px -14px rgba(0, 0, 0, .85); animation: drop .35s cubic-bezier(.2, .9, .3, 1.2); cursor: pointer; }
.notif .av { width: 34px; height: 34px; border-radius: 11px; }
.notif .av .ic { width: 17px; height: 17px; }
.notif b { font-size: 12px; font-weight: 500; display: block; } .notif p { margin: 1px 0 0; font-size: 11.5px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@keyframes drop { from { transform: translateY(-40px); opacity: 0; } }
.stars { display: flex; gap: 6px; justify-content: center; }
.stars button { background: none; border: 0; color: rgba(255, 255, 255, .14); padding: 2px; }
.stars button.on { color: #fff; }
.stars .ic { width: 34px; height: 34px; fill: currentColor; stroke: none; }

/* ---------- simülasyon paneli ---------- */
.sim { width: min(340px, 100%); display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 1240px) { .sim { order: 3; width: min(390px, 100%); } }
@media (max-width: 520px) { .sim { padding: 0 16px; } }
.sim-card { background: linear-gradient(180deg, rgba(30, 31, 39, .86), rgba(16, 17, 22, .86)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: 26px; padding: 17px 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px var(--line), 0 24px 44px -28px rgba(0, 0, 0, .9); }
.sim-brand { display: flex; align-items: center; gap: 12px; }
.sim-brand b { font: 600 20px/1 var(--f-ui); letter-spacing: -.03em; display: block; } .sim-brand small { color: var(--ink-2); font-size: 11.5px; }
.sim-date { border-radius: 20px; padding: 15px 16px; color: var(--ink);
  background: radial-gradient(120% 150% at 50% -40%, rgba(255, 255, 255, .2), rgba(255, 255, 255, .03) 65%), var(--solid);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px var(--line-2); }
.sim-date .k { font: 400 12px var(--f-ui); color: var(--ink-2); }
.sim-date .d { font: 400 27px/1.15 var(--f-ui); letter-spacing: -.035em; margin-top: 4px; }
.sim-date .w { color: var(--ink-2); font-size: 12px; }
.sim-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.sim-row button { height: 38px; border-radius: 12px; border: 0; background: var(--glass); color: var(--ink); font: 500 12.5px var(--f-ui); box-shadow: var(--hi), inset 0 0 0 1px var(--line-2); }
.sim-row button:hover { background: #fff; color: var(--accent-ink); }
.sim h4 { margin: 0 0 8px; font: 500 16px var(--f-ui); letter-spacing: -.015em; color: var(--ink); }
.scn { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.scn li { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--ink-3); padding: 4px 0; }
.scn li i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); flex: none; display: grid; place-items: center; font: normal 500 9px var(--f-ui); margin-top: 1px; }
.scn li.done { color: var(--ink-2); } .scn li.done i { background: var(--ok); box-shadow: none; color: #04140A; }
.scn li.cur { color: var(--ink); font-weight: 500; } .scn li.cur i { background: #fff; box-shadow: none; color: var(--accent-ink); }
.feed { display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow-y: auto; }
.feed div { font-size: 12px; line-height: 1.4; padding-left: 10px; border-left: 1.5px solid var(--line-2); }
.feed div small { display: block; color: var(--ink-3); font-size: 10.5px; }
.narr { margin-top: 10px; padding: 11px 13px; border-radius: 14px; background: var(--surface); color: var(--ink); font-size: 12.5px; min-height: 40px; box-shadow: inset 0 0 0 1px var(--line); }
.mini-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; text-align: center; }
.mini-stats b { display: block; font: 400 21px var(--f-ui); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mini-stats span { font-size: 10.5px; color: var(--ink-3); }
.pulse { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, .1), 0 0 30px rgba(255, 255, 255, .25); } }

/* çekim / tam ekran modu (?shot=app veya ?shot=cust): yalnızca tek telefon ekranı, çerçevesiz */
body.shot { background: var(--bg); }
body.shot::before { display: none; }
body.shot .stage { padding: 0; gap: 0; min-height: 100vh; background: var(--bg); }
body.shot .sim, body.shot .device-h { display: none; }
body.shot-app .device:last-of-type, body.shot-cust .device:first-of-type { display: none; }
body.shot .device { width: 100vw; max-width: 100vw; gap: 0; }
body.shot .phone { width: 100vw; height: 100vh; min-height: 0; padding: 0; border-radius: 0; box-shadow: none; background: var(--bg); }
body.shot .screen { border-radius: 0; }
body.shot .notch { display: none; }
@media (min-width: 700px) { body.shot .device { width: 430px; } body.shot .stage { justify-content: center; } body.shot .phone { width: 430px; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media print {
  body * { visibility: hidden !important; }
  .paper, .paper * { visibility: visible !important; }
  .paper { position: fixed; inset: 0; box-shadow: none; font-size: 12px; }
}

/* ---------- web arayüzü (web.html): tam ekran, masaüstünde kalıcı yan menü ---------- */
body.web { background: var(--bg); }
body.web::before { display: none; }
.web-shell { position: relative; height: 100vh; height: 100dvh; display: grid; grid-template-columns: 1fr; overflow: hidden; background: var(--bg); }
.web-main { position: relative; min-width: 0; height: 100%; overflow: hidden; }
.web .sb, .web [data-sim] { display: none !important; }
.web .hd { padding-top: 16px; }
.web-nav { display: none; }
@media (min-width: 1000px) {
  body.web.authed .web-shell { grid-template-columns: 268px 1fr; }
  body.web.authed .web-nav { display: flex; }
  .web .tabbar { display: none; }
  /* içerik ortada okunur bir sütun; kaydırma çubuğu sayfanın kenarında kalsın diye boşluk padding ile */
  .web .body, .web .hd { padding-left: max(28px, calc((100% - 900px) / 2)); padding-right: max(28px, calc((100% - 900px) / 2)); }
  .web .hd { min-height: 72px; padding-top: 22px; }
  .web .hd h1 { font-size: 22px; }
  .web .body { padding-bottom: 60px; }
  .web .ov:not(.left) { align-items: center; justify-content: center; }
  .web .sheet { width: min(580px, 92%); max-height: 86%; border-radius: 26px; padding: 16px 24px 26px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9), inset 0 0 0 1px var(--line); }
  .web .sheet .grab { display: none; }
  .web .scr.splash .auth-c, .web .scr.splash > form, .web .scr.splash .bottom-col { width: min(440px, 100%); margin-inline: auto; }
  .web .toast { left: calc(50% + 134px); }
  /* telefona göre ölçeklenen öğeler masaüstünde sabit ölçüde */
  .web .act { aspect-ratio: auto; height: 92px; flex-direction: row; gap: 10px; font-size: 14px; }
  .web .stats { grid-template-columns: repeat(4, 1fr); }
  .web .chart { max-height: 280px; }
}
.web-nav { flex-direction: column; gap: 14px; padding: 22px 16px 16px; border-right: 1px solid var(--line); overflow-y: auto; scrollbar-width: none; position: relative; z-index: 2;
  background: radial-gradient(120% 30% at 0% 0%, rgba(255, 255, 255, .08), transparent 70%), rgba(255, 255, 255, .015); }
.web-nav::-webkit-scrollbar { display: none; }
.web-nav > * { flex: none; }
.wn-top { display: grid; gap: 6px; padding: 2px 6px 6px; }
.wn-logo { height: 26px; width: auto; align-self: start; }
.wn-firm { font-size: 12px; color: var(--ink-3); }
.wn-new { height: 46px; }
.wn-list { display: flex; flex-direction: column; gap: 2px; }
.wn-list .dr-g { margin-top: 12px; }
.wn-list .dr-i { padding: 5px 6px; font-size: 13.5px; }
.wn-list .dr-i .ic { width: 30px; height: 30px; padding: 7px; border-radius: 10px; }
.wn-list .dr-i.on { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.wn-list .dr-i.on .ic { background: #fff; color: var(--accent-ink); }
.wn-user { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 6px 2px; border-top: 1px solid var(--line); }
.wn-user .li-m { flex: 1; min-width: 0; }
.wn-user .li-t, .wn-user .li-s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }