/* Layout: masaüstünde ortada telefon çerçevesi, telefonda tam ekran uygulama. Tek görünüm (açık), renkler bilerek sabit. */
:root{
  --navy:#0F2A47; --navy-2:#1C3F66; --navy-ink:#0A1A2C; --black:#0A0D12;
  --ground:#F1F2F4; --card:#FFFFFF; --line:#E2E4E8; --mute:#6B7280; --ink:#0A0D12;
  --red:#E0182D; --red-d:#A50E1F; --red-s:#FDE8EA;
  --lv1:#23834A; --lv2:#E2AD28; --lv3:#D96A2B; --lv4:#E0182D;
  --green:#1C3F66; --green-s:#E4EAF2; --yellow:#1C3F66; --yellow-s:#E4EAF2; --yellow-ink:#0F2A47;
  --orange:#0A0D12; --orange-s:#ECEDEF; --violet:#374151; --violet-s:#ECEEF1;
  --f-ui:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-disp:"Archivo","Arial Black",system-ui,sans-serif;
  color-scheme:light;
}
html,body{height:100%}
body{background:#E4E6EA;color:var(--ink);font-family:var(--f-ui);margin:0;-webkit-tap-highlight-color:transparent}
*{box-sizing:border-box}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
input,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid #6EA8E0;outline-offset:2px}

.device.dk{background:var(--black)}
.device{position:relative;width:390px;height:min(844px,calc(100vh - 48px));border-radius:48px;background:var(--ground);box-shadow:0 0 0 11px #0A0D12,0 0 0 13px #2B2F36,0 40px 80px -20px rgba(10,13,18,.55);overflow:hidden;flex-shrink:0}
.sbar{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 28px 0 34px;font-size:15px;font-weight:600;color:var(--ink);position:relative;z-index:5}
.sbar .isl{position:absolute;left:50%;top:10px;transform:translateX(-50%);width:110px;height:30px;border-radius:20px;background:#0D1B2A}
.sbar.dark{color:#fff}
@media (max-width:560px){
  body.dk{background:#0A0D12}
      .device{width:100%;height:100%;border-radius:0;box-shadow:none}
  .sbar{display:none}
}
.app{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--ground)}
.has-sbar .app{top:44px}
@media (max-width:560px){.has-sbar .app{top:0}}
.scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:4px 18px 24px}
.scroll::-webkit-scrollbar{display:none}

/* Üst başlık */
.top{display:flex;align-items:center;gap:10px;padding:10px 18px 8px;min-height:52px}
.top h2{font-size:19px;font-weight:700;margin:0;flex:1;letter-spacing:-.2px}
.iconbtn{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--card);border:1px solid var(--line);flex-shrink:0}
.iconbtn svg{width:20px;height:20px}

/* Alt sekme menüsü */
.tabs{display:grid;grid-template-columns:repeat(5,1fr);background:var(--black);padding:6px 6px calc(8px + env(safe-area-inset-bottom,0px))}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;font-weight:600;color:#7C8593;padding:6px 0;border-radius:12px}
.tab svg{width:23px;height:23px}
.tab.on{color:#fff}
.tab.on .ti{background:var(--red)}
.tab.on::after{content:"";position:absolute;top:-6px;display:none;width:22px;height:3px;border-radius:0 0 3px 3px;background:var(--red)}
.ti{width:44px;height:28px;border-radius:14px;display:grid;place-items:center}

svg.i{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Genel parçalar */
.card{background:var(--card);border:1px solid var(--line);border-radius:18px}
.sec{display:flex;align-items:baseline;justify-content:space-between;margin:22px 2px 10px}
.sec h3{font-size:15px;margin:0;font-weight:700}
.sec button{font-size:13px;color:var(--navy-2);font-weight:600}
.muted{color:var(--mute)}
.small{font-size:12.5px}
.row{display:flex;align-items:center;gap:12px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:6px 10px;border-radius:999px;background:#EDEFF2;color:#2B323C;white-space:nowrap}
.chip svg{width:14px;height:14px}
.chip.ok{background:var(--green-s);color:var(--navy)}
.chip.warn{background:var(--yellow-s);color:var(--yellow-ink)}
.chip.bad{background:var(--red-s);color:var(--red-d)}
.pill{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:6px}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:15px 16px;border-radius:15px;font-weight:700;font-size:15.5px;background:var(--navy);color:#fff}
.btn.red{background:var(--red)}
.btn.dark{background:var(--black)}
.btn.ghost{background:var(--card);color:var(--navy);border:1.5px solid var(--line)}
.btn svg{width:20px;height:20px}
.stack{display:flex;flex-direction:column;gap:10px}
.demo-note{display:flex;gap:8px;align-items:flex-start;font-size:12px;line-height:1.45;color:#4B5563;background:#E7E9ED;border-radius:12px;padding:10px 12px;margin-top:14px}
.demo-note svg{width:16px;height:16px;flex-shrink:0;margin-top:1px}
.lbl{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:18px 2px 8px}

/* Ana ekran */
.hero{margin:-4px -18px 0;padding:6px 18px 22px;background:linear-gradient(180deg,var(--black) 0%,var(--navy-ink) 62%,var(--navy) 100%);color:#fff;border-radius:0 0 30px 30px}
.hello{display:flex;align-items:center;justify-content:space-between;padding:4px 0 2px}
.hello .t{font-size:13px;color:#9AA3B0}
.hello .n{font-family:var(--f-disp);font-weight:800;font-stretch:115%;font-size:30px;line-height:1.05;margin-top:2px;letter-spacing:-.6px}
.hello .n i{font-style:normal;color:var(--red)}
.avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(140deg,#2C4D74,#0F2A47);border:2px solid rgba(255,255,255,.18);display:grid;place-items:center;font-weight:700;color:#fff}
.status{margin-top:14px;padding:12px;display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#fff}
.status .dot{width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.12);display:grid;place-items:center}
.status .dot svg{width:24px;height:24px}
.status b{font-size:15px}
.status .s{font-size:12px;opacity:.75;margin-top:2px}
.status .chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.status .chip{background:rgba(255,255,255,.13);color:#fff;font-size:11px;padding:4px 8px}

.sos-wrap{display:flex;flex-direction:column;align-items:center;padding:22px 0 6px}
.sos{position:relative;width:184px;height:184px;border-radius:50%;display:grid;place-items:center;touch-action:none;user-select:none;-webkit-user-select:none}
.sos .ring{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(224,24,45,.35) 55%,rgba(224,24,45,0) 70%);animation:pulse 2.4s ease-out infinite}
.sos .core{position:relative;width:148px;height:148px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FF3B4E,#C40F23 72%);box-shadow:0 0 0 7px rgba(255,255,255,.07),0 18px 40px -8px rgba(224,24,45,.7),inset 0 -6px 14px rgba(0,0,0,.2);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform .15s}
.sos.hold .core{transform:scale(.95)}
.sos .core b{font-family:var(--f-disp);font-stretch:125%;font-size:40px;letter-spacing:1px;font-weight:900}
.sos .core span{font-size:11.5px;opacity:.9;margin-top:2px;font-weight:600}
.sos svg.prog{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);visibility:hidden}
.sos.hold svg.prog{visibility:visible}
.sos svg.prog circle{fill:none;stroke:#fff;stroke-width:7;stroke-dasharray:553;stroke-dashoffset:553;stroke-linecap:round}
.sos svg.prog circle{opacity:0}
.sos.hold svg.prog circle{opacity:1;animation:fill 3s linear forwards}
@keyframes fill{to{stroke-dashoffset:0}}
@keyframes pulse{0%{transform:scale(.85);opacity:1}100%{transform:scale(1.15);opacity:0}}
.sos-hint{font-size:12px;color:#8E97A5;margin-top:8px}

.levels{display:flex;flex-direction:column;gap:8px}
.lvr{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:14px;border-radius:18px;background:var(--card);border:1px solid var(--line)}
.lvr .lt{flex:1;min-width:0}
.lvr .k{display:block;font-size:10.5px;letter-spacing:.12em;font-weight:700;color:var(--mute)}
.lvr b{display:block;font-size:16px;margin-top:1px}
.lvr .d{display:block;font-size:12.5px;color:var(--mute);margin-top:1px}
.lvr .chev{width:18px;height:18px;opacity:.5;flex-shrink:0}
.meter{display:flex;align-items:flex-end;gap:3px;height:30px;width:30px;flex-shrink:0}
.meter i{flex:1;border-radius:2px;background:#DADDE2}
.meter i:nth-child(1){height:30%}.meter i:nth-child(2){height:55%}.meter i:nth-child(3){height:78%}.meter i:nth-child(4){height:100%}
.lvr.l1{background:var(--lv1)} .lvr.l2{background:var(--lv2)} .lvr.l3{background:var(--lv3)} .lvr.l4{background:var(--lv4)}
.lvr.l1,.lvr.l3,.lvr.l4{border-color:transparent;color:#fff} .lvr.l2{border-color:transparent;color:#3E2D00}
.lvr.l1 .k,.lvr.l1 .d,.lvr.l3 .k,.lvr.l3 .d,.lvr.l4 .k,.lvr.l4 .d{color:rgba(255,255,255,.85)} .lvr.l2 .k,.lvr.l2 .d{color:rgba(62,45,0,.75)}
.lvr .meter i{background:rgba(255,255,255,.32)} .lvr .meter i.on{background:#fff}
.lvr.l2 .meter i{background:rgba(62,45,0,.18)} .lvr.l2 .meter i.on{background:#3E2D00}
.lv{text-align:left;border-radius:18px;padding:14px;min-height:112px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;position:relative;overflow:hidden}
.lv .ic{width:36px;height:36px;border-radius:11px;background:rgba(255,255,255,.2);display:grid;place-items:center}
.lv .ic svg{width:20px;height:20px}
.lv .k{font-size:10.5px;letter-spacing:.12em;font-weight:700;opacity:.85}
.lv .h{font-size:16px;font-weight:700;margin-top:2px}
.lv .d{font-size:11.5px;opacity:.85;margin-top:1px}
.lv.g{background:var(--green)} .lv.y{background:var(--yellow);color:#3E2D00} .lv.o{background:var(--orange)} .lv.r{background:var(--red)}
.lv.y .ic{background:rgba(255,255,255,.35)}

.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.q{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:11.5px;font-weight:600;text-align:center;line-height:1.2;color:#33465C}
.q .b{width:58px;height:58px;border-radius:18px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;color:var(--navy)}
.q:first-child .b{background:var(--navy);color:#fff;border-color:var(--navy)}
.q .b svg{width:24px;height:24px}

.banner{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:16px;margin-top:12px}
.banner .bi{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex-shrink:0}
.banner .bi svg{width:20px;height:20px}
.banner b{font-size:14px}
.banner .s{font-size:12px;margin-top:1px}
.banner.y{background:rgba(224,24,45,.14);color:#fff;border:1px solid rgba(224,24,45,.35)} .banner.y .bi{background:var(--red);color:#fff} .banner.y .act{background:var(--red);color:#fff}
.banner.b{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.12)} .banner.b .bi{background:#fff;color:var(--navy)} .banner.b .act{background:#fff;color:var(--navy)}
.scroll > .banner.y{background:var(--black);border:0}
.banner .act{margin-left:auto;font-size:12.5px;font-weight:700;padding:8px 11px;border-radius:10px;background:rgba(255,255,255,.75)}
.tnum{font-variant-numeric:tabular-nums}

/* Liste satırları */
.list{display:flex;flex-direction:column}
.li{display:flex;align-items:center;gap:12px;padding:12px 14px;text-align:left;width:100%}
.li+.li{border-top:1px solid var(--line)}
.li .lic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex-shrink:0}
.li .lic svg{width:20px;height:20px}
.li .lt{flex:1;min-width:0}
.li .lt b{display:block;font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .lt span{display:block;font-size:12.5px;color:var(--mute);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .chev{width:18px;height:18px;color:#A3AEBD;flex-shrink:0}
.li .rt{font-size:12px;color:var(--mute);text-align:right;flex-shrink:0}
.c-g{background:#E5F3EA;color:#23834A} .c-y{background:#FCF3DA;color:#9B7208} .c-o{background:#FBEADF;color:#D96A2B} .c-r{background:var(--red-s);color:var(--red)} .c-k{background:#E5E6E9;color:#0A0D12} .c-n{background:#E4EAF2;color:var(--navy)} .c-v{background:#ECEEF1;color:#374151}

/* Form */
.field{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;width:100%;resize:none;outline:none;font-size:14.5px;line-height:1.45}
.field:focus{border-color:#8DB3DA}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tagb{font-size:13px;font-weight:600;padding:9px 12px;border-radius:12px;background:var(--card);border:1.5px solid var(--line);color:#2B323C}
.tagb.on{border-color:var(--navy);background:var(--navy);color:#fff}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;background:#E3E5E9;padding:4px;border-radius:13px}
.seg button{padding:9px 4px;border-radius:10px;font-size:13px;font-weight:600;color:#4A5B70}
.seg button.on{background:var(--black);color:#fff;box-shadow:0 1px 3px rgba(20,32,46,.12)}
.tgl{width:46px;height:28px;border-radius:14px;background:#CDD1D7;position:relative;flex-shrink:0;transition:background .2s}
.tgl::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s}
.tgl.on{background:var(--red)}
.tgl.on::after{transform:translateX(18px)}
.attach{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.att{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border-radius:14px;background:var(--card);border:1px solid var(--line);font-size:12px;font-weight:600;color:#33465C}
.att svg{width:22px;height:22px;color:var(--navy)}
.att .n{font-size:10.5px;color:var(--green);font-weight:700}

/* Seviye başlıkları */
.lvhead{border-radius:22px;padding:18px;color:#fff;display:flex;gap:14px;align-items:center}
.lvhead .ic{width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.2);display:grid;place-items:center;flex-shrink:0}
.lvhead .ic svg{width:28px;height:28px}
.lvhead b{font-family:var(--f-disp);font-stretch:110%;font-weight:800;font-size:20px;display:block;letter-spacing:-.3px}
.lvhead span{font-size:13px;opacity:.88}

/* Tam ekran katmanlar */
.overlay{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column}
.sheet-bg{position:absolute;inset:0;background:rgba(14,34,54,.45);z-index:25;animation:fade .2s}
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--ground);border-radius:26px 26px 0 0;z-index:26;padding:10px 18px calc(22px + env(safe-area-inset-bottom,0px));max-height:88%;overflow-y:auto;animation:up .25s ease-out}
.sheet .grab{width:42px;height:5px;border-radius:3px;background:#C9D2DD;margin:0 auto 14px}
@keyframes up{from{transform:translateY(40px);opacity:.4}}
@keyframes fade{from{opacity:0}}

.sosv{background:radial-gradient(120% 70% at 50% 0%,#F0263A,#8F0A18 70%,#4A0610);color:#fff;padding:18px 20px calc(24px + env(safe-area-inset-bottom,0px))}
.has-sbar .sosv{padding-top:58px}
@media (max-width:560px){.has-sbar .sosv{padding-top:18px}}
.count{font-family:var(--f-disp);font-stretch:125%;font-size:150px;font-weight:900;line-height:1;text-align:center;font-variant-numeric:tabular-nums}
.sosv .steps{display:flex;flex-direction:column;gap:8px}
.step{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.1);border-radius:14px;padding:11px 12px}
.step .si{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.18);flex-shrink:0}
.step .si svg{width:17px;height:17px}
.step b{font-size:14px;display:block}
.step span{font-size:12px;opacity:.82;display:block;margin-top:2px;line-height:1.4}
.btn.white{background:#fff;color:var(--red-d)}
.btn.clear{background:rgba(255,255,255,.14);color:#fff}
.rec{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;background:rgba(0,0,0,.22);padding:6px 10px;border-radius:999px}
.rec i{width:8px;height:8px;border-radius:50%;background:#FF6B6B;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}

.call{background:linear-gradient(180deg,#1F2731,#0A0D12);color:#fff;align-items:center;padding:70px 24px calc(50px + env(safe-area-inset-bottom,0px));text-align:center}
.call .av{width:110px;height:110px;border-radius:50%;background:linear-gradient(140deg,#5A6472,#2B323C);display:grid;place-items:center;font-size:42px;font-weight:700;color:#fff;margin:26px auto 16px}
.call h1{font-weight:500;font-size:32px;margin:0}
.call .sub{opacity:.7;margin-top:6px}
.callbtns{margin-top:auto;display:flex;justify-content:space-around;width:100%}
.cb{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px}
.cb .c{width:72px;height:72px;border-radius:50%;display:grid;place-items:center}
.cb .c svg{width:30px;height:30px}

/* Harita */
.map{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#ECEEF1}
.map svg{display:block;width:100%;height:auto}
.map .legend{position:absolute;left:10px;bottom:10px;display:flex;gap:6px;flex-wrap:wrap}
.map .legend span{font-size:10.5px;font-weight:600;background:rgba(255,255,255,.92);padding:4px 7px;border-radius:7px}

/* Kasa */
.pinpad{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:270px;margin:0 auto}
.pinpad button{height:66px;border-radius:50%;width:66px;margin:0 auto;font-size:26px;font-weight:500;background:var(--card);border:1px solid var(--line)}
.dots{display:flex;gap:14px;justify-content:center;margin:20px 0 28px}
.dots i{width:14px;height:14px;border-radius:50%;border:2px solid var(--navy)}
.dots i.f{background:var(--red);border-color:var(--red)}
.dots.err{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.vstat{padding:12px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.vstat b{font-size:22px;display:block;font-variant-numeric:tabular-nums}
.vstat span{font-size:11.5px;color:var(--mute)}
.hash{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11px;word-break:break-all;background:var(--black);padding:12px;border-radius:12px;color:#C9CED6;line-height:1.5}
.meta{display:grid;grid-template-columns:auto 1fr;gap:9px 14px;font-size:13.5px}
.meta dt{color:var(--mute)}
.meta dd{margin:0;font-weight:600;text-align:right}
.preview{height:170px;border-radius:18px;display:grid;place-items:center;color:#fff;position:relative;overflow:hidden}
.wave{display:flex;align-items:center;gap:3px;height:60px}
.wave i{width:4px;border-radius:2px;background:rgba(255,255,255,.85)}

/* Günlük */
.day{font-size:12px;font-weight:700;color:var(--mute);margin:18px 4px 8px;letter-spacing:.04em;text-transform:uppercase}
.tl{position:relative}
.ev{display:flex;gap:12px;padding:12px 14px;text-align:left;width:100%}
.ev+.ev{border-top:1px solid var(--line)}
.ev .bar{width:4px;border-radius:2px;flex-shrink:0}
.ev b{font-size:14.5px;display:block}
.ev p{margin:3px 0 0;font-size:12.5px;color:var(--mute);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ev .mt{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.ev .mt .chip{font-size:10.5px;padding:3px 7px}
.hstrip{display:flex;gap:8px;overflow-x:auto;margin:0 -18px;padding:0 18px 2px}
.hstrip::-webkit-scrollbar{display:none}
.bars{display:flex;align-items:flex-end;gap:5px;height:64px;margin-top:10px}
.bars div{flex:1;border-radius:4px 4px 0 0;display:flex;flex-direction:column-reverse;overflow:hidden;background:#EDEFF2}

/* Destek */
.hot{display:flex;gap:12px;align-items:center;padding:14px}
.hot .num{display:block;white-space:nowrap;line-height:1.1;margin-bottom:4px;font-family:var(--f-disp);font-stretch:112%;font-size:20px;font-weight:800;color:var(--red);font-variant-numeric:tabular-nums}
.hot b{font-size:14px;display:block}
.hot span{font-size:12px;color:var(--mute);display:block;margin-top:2px;line-height:1.35}
.hot+.hot{border-top:1px solid var(--line)}
.callbtn{margin-left:auto;width:40px;height:40px;border-radius:12px;background:var(--black);color:#fff;display:grid;place-items:center;flex-shrink:0}
.callbtn svg{width:19px;height:19px}
.read{font-size:14px;line-height:1.6;color:#2B3A4C}
.read h4{font-size:15px;margin:16px 0 6px;color:var(--ink)}
.read p{margin:0 0 10px}
.read li{margin-bottom:6px}
.chk{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;text-align:left;width:100%;font-size:14px;line-height:1.4}
.chk+.chk{border-top:1px solid var(--line)}
.chk .bx{width:24px;height:24px;border-radius:8px;border:2px solid #BFC4CC;flex-shrink:0;display:grid;place-items:center;color:#fff}
.chk.on .bx{background:var(--green);border-color:var(--green)}
.chk.on .bx svg{width:15px;height:15px}
.chk.on span{color:var(--mute);text-decoration:line-through}
.prog{height:8px;border-radius:4px;background:#E3E5E9;overflow:hidden}
.prog i{display:block;height:100%;background:var(--green);border-radius:4px;transition:width .3s}

/* Hesap makinesi (gizli mod) */
.calc{background:#000;color:#fff;padding:20px 18px calc(26px + env(safe-area-inset-bottom,0px));justify-content:flex-end}
.has-sbar .calc{padding-top:60px}
.calc .disp{font-size:76px;font-weight:300;text-align:right;padding:0 10px 16px;font-variant-numeric:tabular-nums;overflow:hidden;white-space:nowrap}
.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.keys button{aspect-ratio:1;border-radius:50%;font-size:30px;background:#333;color:#fff;max-width:100%}
.keys .op{background:#FF9F0A}
.keys .fn{background:#A5A5A5;color:#000}
.keys .zero{grid-column:span 2;aspect-ratio:auto;border-radius:40px;text-align:left;padding-left:28px}

.toast{position:absolute;left:18px;right:18px;bottom:96px;z-index:60;background:#1A1F27;color:#fff;border-radius:14px;padding:12px 14px;font-size:13.5px;display:flex;gap:10px;align-items:center;box-shadow:0 10px 30px -10px rgba(0,0,0,.5);animation:up .25s}
.toast svg{width:18px;height:18px;color:#FF4D5E;flex-shrink:0}
.onb{background:linear-gradient(170deg,var(--black) 0%,var(--navy-ink) 55%,var(--navy) 100%);color:#fff;padding:30px 24px calc(28px + env(safe-area-inset-bottom,0px))}
.has-sbar .onb{padding-top:70px}
@media (max-width:560px){.has-sbar .onb,.has-sbar .calc{padding-top:30px}}
.onb h1{font-family:var(--f-disp);font-weight:900;font-stretch:120%;font-size:46px;line-height:1;margin:0;letter-spacing:-1.5px}
.onb h1 i{font-style:normal;color:var(--red)}
.onb p{opacity:.82;line-height:1.55;font-size:15px}
.feat{display:flex;gap:12px;align-items:flex-start;margin-top:14px}
.feat .fi{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.12);display:grid;place-items:center;flex-shrink:0}
.feat .fi svg{width:20px;height:20px}
.feat b{display:block;font-size:14.5px}
.feat span{font-size:12.5px;opacity:.75;line-height:1.4}
.shield-art{width:84px;height:84px;border-radius:26px;background:var(--red);box-shadow:0 18px 40px -10px rgba(224,24,45,.6);display:grid;place-items:center;margin-bottom:22px}
.shield-art svg{width:46px;height:46px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- Gerçek uygulama: tam ekran, çerçevesiz ---- */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{background:var(--black)}
.device{position:fixed;inset:0;width:auto;height:auto;border-radius:0;box-shadow:none;background:var(--ground);max-width:520px;margin:0 auto}
.device.dk{background:var(--black)}
@media (min-width:521px){body{background:#E4E6EA}}
.app{top:env(safe-area-inset-top,0px)}
.overlay{padding-top:calc(24px + env(safe-area-inset-top,0px))}
.call{padding-top:calc(60px + env(safe-area-inset-top,0px))}
.sheet{max-height:calc(100% - env(safe-area-inset-top,0px) - 20px)}
.toast{bottom:calc(96px + env(safe-area-inset-bottom,0px))}
.sos{-webkit-touch-callout:none}
a.btn,a.callbtn,a.li{text-decoration:none;color:inherit}
a.btn{color:#fff}
a.btn.ghost{color:var(--navy)}
a.btn.white{color:var(--red-d)}

/* Harita */
.lmap{height:200px;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#ECEEF1;position:relative;isolation:isolate}
.lmap.tall{height:260px}
.mapfb{height:100%;display:grid;place-items:center;text-align:center;padding:16px;font-size:13px;color:var(--mute);line-height:1.5}
.leaflet-control-attribution{font-size:9px!important}

/* Form */
input.field{height:50px}
.flabel{font-size:12.5px;font-weight:600;color:var(--mute);margin:12px 2px 6px;display:block}
.err{color:var(--red-d);font-size:12.5px;margin-top:8px;font-weight:600}
.empty{padding:22px 16px;text-align:center;color:var(--mute);font-size:13.5px;line-height:1.5}
.empty b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}

/* Ana ekran kayıt şeridi */
.recbar{display:flex;align-items:center;gap:10px;background:var(--red);color:#fff;border-radius:16px;padding:12px 14px;margin-top:12px}
.recbar i{width:10px;height:10px;border-radius:50%;background:#fff;animation:blink 1s infinite}
.recbar b{flex:1;font-size:14px}
.recbar button{background:#fff;color:var(--red-d);font-weight:700;font-size:13px;padding:8px 12px;border-radius:10px}

/* Kurulum */
.onb .field{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}
.onb .field::placeholder{color:rgba(255,255,255,.45)}
.onb .flabel{color:rgba(255,255,255,.7)}
.onb .err{color:#FF8A95}
.onb .li{color:#fff}
.onb .li+.li{border-top-color:rgba(255,255,255,.1)}
.onb .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
.onb .pinpad button{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#fff}
.onb .dots i{border-color:#fff}
.stepdots{display:flex;gap:6px;margin-bottom:22px}
.stepdots i{height:4px;flex:1;border-radius:2px;background:rgba(255,255,255,.18)}
.stepdots i.on{background:var(--red)}
.perm{display:flex;gap:12px;align-items:center;padding:14px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);width:100%;text-align:left;color:#fff}
.perm+.perm{margin-top:10px}
.perm .fi{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.12);display:grid;place-items:center;flex-shrink:0}
.perm .fi svg{width:20px;height:20px}
.perm b{display:block;font-size:14.5px}
.perm span{font-size:12.5px;opacity:.7}
.perm .st{margin-left:auto;font-size:12px;font-weight:700;padding:6px 10px;border-radius:9px;background:var(--red);flex-shrink:0;opacity:1}
.perm .st.ok{background:rgba(255,255,255,.14)}

/* Alarm */
.alarm{background:radial-gradient(120% 70% at 50% 0%,#1C3F66,#0A0D12 70%);color:#fff;padding-left:22px;padding-right:22px;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
.alarm h1{font-family:var(--f-disp);font-weight:900;font-stretch:118%;font-size:44px;line-height:1;margin:30px 0 10px;letter-spacing:-1px}
.alarm .count{font-size:96px}

/* Kanıt önizleme */
.preview img,.preview video{width:100%;height:100%;object-fit:cover}
.preview audio{width:90%}
.preview.media{height:auto;min-height:120px;background:var(--black)!important}
.notebox{padding:18px;font-size:15px;line-height:1.55;white-space:pre-wrap;text-align:left;width:100%}

.install{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:16px;background:var(--card);border:1px solid var(--line);margin-top:14px;width:100%;text-align:left}
.install .fi{width:38px;height:38px;border-radius:11px;background:var(--red);color:#fff;display:grid;place-items:center;flex-shrink:0}
.install .fi svg{width:20px;height:20px}
.install b{display:block;font-size:14px}
.install span{font-size:12px;color:var(--mute)}
.steps-ol{margin:0;padding-left:20px;line-height:1.7;font-size:14.5px}
.install .chev{width:18px;height:18px;color:#A3AEBD;flex-shrink:0}
.install{color:var(--ink)}
:where(svg.i){width:18px;height:18px;flex-shrink:0}
.leaflet-tile-pane{filter:grayscale(1) contrast(.92) brightness(1.04)}