/* ainalyze.live — e-lab. Cihaz paneli görünümü: koyu zemin, camgöbeği telemetri. */
:root {
  --zemin: #04070c; --kart: rgba(140, 200, 255, .045); --cizgi: rgba(110, 230, 215, .16); --cizgi2: rgba(255, 255, 255, .07);
  --yazi: #e6f1f4; --soluk: #8399a6; --vurgu: #35e0c8; --vurgu2: #8f7dff; --vurgu-yazi: #02110f; --vurgu-soluk: rgba(53, 224, 200, .12);
  --yesil: #2fd38a; --sari: #f0b429; --turuncu: #ff8a3d; --kirmizi: #ff4d5e;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --yaricap: 16px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--zemin); }
body {
  margin: 0; color: var(--yazi); min-height: 100dvh;
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background:
    radial-gradient(900px 520px at 85% -10%, rgba(143, 125, 255, .16), transparent 60%),
    radial-gradient(800px 560px at -10% 10%, rgba(53, 224, 200, .13), transparent 60%),
    linear-gradient(rgba(120, 220, 255, .035) 1px, transparent 1px) 0 0 / 100% 34px,
    linear-gradient(90deg, rgba(120, 220, 255, .035) 1px, transparent 1px) 0 0 / 34px 100%,
    var(--zemin);
  background-attachment: fixed;
}
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; text-wrap: balance; letter-spacing: -.02em; }
h1 { font-size: clamp(1.9rem, 6vw, 3.2rem); } h2 { font-size: 1.3rem; } h3 { font-size: 1rem; }
p { margin: 0 0 1em; } a { color: var(--vurgu); }
.sayi, td.s, th.s, .mono { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); }
.soluk { color: var(--soluk); } .kucuk { font-size: .86rem; }
.sarici { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.etiket { font: 600 .68rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--vurgu); display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.etiket::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--vurgu); box-shadow: 0 0 10px var(--vurgu); flex: none; }
.etiket.yan { color: var(--soluk); } .etiket.yan::before { background: var(--soluk); box-shadow: none; }

/* üst çubuk */
.ust { position: sticky; top: 0; z-index: 5; background: rgba(4, 7, 12, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--cizgi2); padding-top: env(safe-area-inset-top); }
.ust .sarici { display: flex; align-items: center; gap: 12px; min-height: 54px; }
.marka { font-weight: 800; letter-spacing: -.03em; font-size: 1.2rem; color: var(--yazi); text-decoration: none; white-space: nowrap; }
.marka b { color: var(--vurgu); text-shadow: 0 0 18px rgba(53, 224, 200, .6); }
.ust nav { margin-left: auto; display: flex; gap: 6px; }
.ekran-baslik { margin-left: auto; font: 600 .7rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--soluk); }

/* düğmeler */
button, .dugme {
  font: inherit; cursor: pointer; border-radius: 12px; border: 1px solid var(--cizgi2); background: rgba(255, 255, 255, .04); color: var(--yazi);
  padding: 9px 14px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  user-select: none; -webkit-user-select: none; transition: border-color .15s, background .15s, transform .08s;
}
@media (hover: hover) { button:hover, .dugme:hover { border-color: var(--vurgu); } }
button:active, .dugme:active { transform: scale(.97); }
button:focus-visible, .dugme:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
button.ana, .dugme.ana { background: linear-gradient(135deg, #35e0c8, #25b8e6); color: var(--vurgu-yazi); border-color: transparent; font-weight: 700; box-shadow: 0 0 0 1px rgba(53, 224, 200, .3), 0 8px 28px rgba(53, 224, 200, .28); }
button.duz { border-color: transparent; background: transparent; }
button.tehlike { color: var(--kirmizi); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.buyuk, .dugme.buyuk { padding: 15px 24px; font-size: 1.05rem; border-radius: 14px; }

/* panel */
.kart { position: relative; background: var(--kart); border: 1px solid var(--cizgi2); border-radius: var(--yaricap); padding: 18px; margin: 0 0 14px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.kart.hud { border-color: var(--cizgi); }
.kart.hud::before, .kart.hud::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid var(--vurgu); opacity: .8; pointer-events: none; }
.kart.hud::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-radius: var(--yaricap) 0 0 0; }
.kart.hud::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-radius: 0 0 var(--yaricap) 0; }
button.kart { display: block; width: 100%; text-align: left; font: inherit; min-height: 0; }
.izgara { display: grid; gap: 14px; }
@media (min-width: 820px) { .izgara.iki { grid-template-columns: 1fr 1fr; } .izgara.uc { grid-template-columns: repeat(3, 1fr); } .izgara.genis { grid-template-columns: 1.15fr .85fr; } }
.izgara > .kart { margin: 0; } .izgara { margin-bottom: 14px; }
label { display: block; font-size: .86rem; font-weight: 600; margin: 0 0 12px; }
label span { display: block; margin-bottom: 4px; color: var(--soluk); }
input, select { font: inherit; width: 100%; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--cizgi2); background: rgba(0, 0, 0, .35); color: var(--yazi); min-height: 44px; }
label.onay { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
label.onay span { color: var(--yazi); } label.onay input { width: 20px; height: 20px; min-height: 0; margin-top: 2px; flex: none; accent-color: var(--vurgu); }
.hata { color: var(--kirmizi); font-size: .92rem; min-height: 1.4em; margin: 6px 0; }
.not { border-left: 2px solid var(--vurgu); background: var(--vurgu-soluk); padding: 10px 12px; border-radius: 0 10px 10px 0; font-size: .86rem; margin: 0 0 14px; color: var(--soluk); }
.not.uyari { border-color: var(--sari); background: rgba(240, 180, 41, .08); }

/* tablo */
.tablo-sar { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--cizgi2); white-space: nowrap; }
th { font: 600 .66rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--soluk); }
td.s, th.s { text-align: right; font-family: var(--mono); }

/* e-tahlil: 17 belirteç */
.grup-baslik { font: 600 .66rem/1 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--soluk); margin: 16px 0 6px; display: flex; gap: 8px; align-items: center; }
.grup-baslik::after { content: ""; flex: 1; height: 1px; background: var(--cizgi2); }
.belirtec { display: grid; grid-template-columns: 112px 1fr 40px 62px; align-items: center; gap: 10px; padding: 6px 0; }
.belirtec .ad { font-weight: 600; font-size: .9rem; } .belirtec .ad small { display: block; font: 400 .66rem/1.3 var(--mono); color: var(--soluk); }
.belirtec .p { font: 600 .8rem/1 var(--mono); text-align: right; }
.cubuk { height: 8px; border-radius: 6px; background: rgba(255, 255, 255, .06); position: relative; overflow: hidden; }
.cubuk i { position: absolute; inset: 0 auto 0 0; border-radius: 6px; width: 0; transition: width .9s cubic-bezier(.2, .8, .2, 1); }
.cubuk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 24.7%, #04070c 24.7% 25.3%, transparent 25.3% 49.7%, #04070c 49.7% 50.3%, transparent 50.3% 74.7%, #04070c 74.7% 75.3%, transparent 75.3%); }
.rozet { font: 700 .6rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 0; border-radius: 6px; text-align: center; border: 1px solid currentColor; }
.r-Normal { color: var(--yesil); } .r-İzle { color: var(--sari); } .r-Risk { color: var(--turuncu); } .r-Kritik { color: var(--kirmizi); }
.bulgu { border-top: 1px solid var(--cizgi2); padding: 12px 0; font-size: .94rem; } .bulgu:first-child { border-top: 0; }
.bulgu b { display: block; font: 600 .64rem/1.6 var(--mono); letter-spacing: .14em; color: var(--vurgu); }
.patern { display: flex; gap: 14px; align-items: center; }
.patern .ikon { font-size: 1.8rem; width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; flex: none; border: 1px solid var(--cizgi); }

/* telemetri kutuları */
.olcu { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.olcu div { background: rgba(0, 0, 0, .3); border: 1px solid var(--cizgi2); border-radius: 12px; padding: 10px 12px; }
.olcu small { display: block; color: var(--soluk); font: 600 .62rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.olcu strong { font: 600 1.3rem/1.2 var(--mono); } .olcu em { font-style: normal; font: .7rem var(--mono); color: var(--soluk); margin-left: 4px; }
.olcu em.art { color: var(--vurgu); display: block; margin: 2px 0 0; }

/* sistemler */
.sistemler { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
.sistem { border: 1px solid var(--cizgi2); border-radius: 12px; padding: 10px 12px 10px 16px; background: rgba(0, 0, 0, .3); position: relative; overflow: hidden; }
.sistem::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: currentColor; box-shadow: 0 0 14px currentColor; }
.sistem small { display: block; font: 600 .62rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--soluk); }
.sistem strong { font: 700 .8rem var(--mono); letter-spacing: .06em; }

/* kahraman halka */
.kahraman-halka { position: relative; display: grid; place-items: center; margin: 0 auto; max-width: 340px; }
.kahraman-halka canvas { width: 100%; }
.kahraman-halka .orta { position: absolute; text-align: center; pointer-events: none; }
.kahraman-halka .orta strong { display: block; font: 700 clamp(2rem, 9vw, 2.7rem)/1 var(--mono); text-shadow: 0 0 26px rgba(53, 224, 200, .55); }
.kahraman-halka .orta small { font: 600 .62rem var(--mono); letter-spacing: .16em; color: var(--soluk); text-transform: uppercase; }

/* kayıt ekranı */
.kayit { text-align: center; padding: 22px 16px; }
.adimlar { display: flex; gap: 6px; justify-content: center; margin: 0 0 16px; }
.adimlar i { width: 34px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .1); } .adimlar i.tamam { background: var(--vurgu); box-shadow: 0 0 8px var(--vurgu); } .adimlar i.simdi { background: rgba(53, 224, 200, .5); }
.osiloskop { width: 100%; max-width: 560px; height: 150px; border-radius: 14px; border: 1px solid var(--cizgi); background: #02050a; display: block; margin: 14px auto 8px; }
.seviye { height: 10px; border-radius: 8px; background: rgba(255, 255, 255, .07); position: relative; margin: 8px auto 14px; max-width: 560px; overflow: hidden; }
.seviye i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #25b8e6, #35e0c8); transition: width .08s linear; }
.seviye b { position: absolute; top: 0; bottom: 0; background: rgba(47, 211, 138, .22); border-inline: 2px solid var(--yesil); }
.sayac { font: 700 3.2rem/1 var(--mono); margin: 6px 0; min-height: 3.2rem; text-shadow: 0 0 30px rgba(53, 224, 200, .5); }
.nokta { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--kirmizi); box-shadow: 0 0 12px var(--kirmizi); animation: nabiz 1s infinite; vertical-align: middle; margin-right: 8px; }
@keyframes nabiz { 50% { opacity: .25; } }
.dugme-sira { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }
.olcum { margin: 6px 0 0; font-family: var(--mono); font-size: .74rem; }
.islem { text-align: left; max-width: 400px; margin: 14px auto 0; font: .82rem/2 var(--mono); color: var(--soluk); }
.islem div::before { content: "○  "; } .islem div.tamam { color: var(--vurgu); } .islem div.tamam::before { content: "●  "; } .islem div.simdi { color: var(--yazi); } .islem div.simdi::before { content: "◐  "; }

canvas { max-width: 100%; height: auto; border-radius: 12px; display: block; margin: 0 auto; }
.egri { width: 100%; height: 70px; display: block; }
.egri-kutu { background: rgba(0, 0, 0, .3); border: 1px solid var(--cizgi2); border-radius: 12px; padding: 10px 12px; }
.egri-kutu header { display: flex; justify-content: space-between; align-items: baseline; font: 600 .64rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--soluk); } .egri-kutu header strong { font: 600 1rem var(--mono); color: var(--yazi); letter-spacing: 0; }

/* görev fazları (ISS) */
.fazlar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 0 12px; }
.fazlar button { flex-direction: column; gap: 0; min-height: 52px; padding: 6px 2px; font: 600 .68rem var(--mono); letter-spacing: .04em; }
.fazlar button small { color: var(--soluk); font-weight: 400; } .fazlar button.secili { border-color: var(--vurgu); background: var(--vurgu-soluk); color: var(--vurgu); }

/* uygulama kabuğu */
body.uygulama { overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
body.uygulama #icerik { padding-top: 10px; padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
body.uygulama #icerik > * { animation: gir .28s ease-out both; }
@keyframes gir { from { opacity: 0; transform: translateY(8px); } }
.sekmeler { position: fixed; z-index: 6; left: 50%; transform: translateX(-50%); bottom: calc(10px + env(safe-area-inset-bottom)); width: min(460px, calc(100vw - 20px));
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; padding: 6px; border-radius: 26px;
  background: rgba(10, 16, 24, .82); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid var(--cizgi); box-shadow: 0 10px 40px rgba(0, 0, 0, .6), 0 0 30px rgba(53, 224, 200, .08); }
.sekmeler button { flex-direction: column; gap: 3px; border: 0; background: transparent; padding: 6px 2px; min-height: 52px; border-radius: 18px; color: var(--soluk); font: 600 .58rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.sekmeler button:active { transform: none; }
.sekmeler svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sekmeler button.secili { color: var(--vurgu); text-shadow: 0 0 12px rgba(53, 224, 200, .7); }
.sekmeler button.orta { background: linear-gradient(135deg, #35e0c8, #25b8e6); color: var(--vurgu-yazi); width: 60px; height: 60px; min-height: 60px; border-radius: 50%; margin: -20px auto 0; box-shadow: 0 0 0 6px rgba(53, 224, 200, .12), 0 0 32px rgba(53, 224, 200, .55); text-shadow: none; }
.sekmeler button.orta span { display: none; } .sekmeler button.orta svg { width: 27px; height: 27px; stroke-width: 2; }

.karsilama { padding: 6px 2px 10px; } .karsilama p { margin: 0 0 2px; } .karsilama h1 { font-size: clamp(1.4rem, 5.5vw, 1.9rem); margin: 0; }
.govde { display: flex; flex-direction: column; flex: 1; min-width: 0; } .govde small { color: var(--soluk); font: .7rem var(--mono); } .govde strong { font-size: 1.02rem; }
.ok { color: var(--soluk); font-size: 1.5rem; flex: none; }
.liste { border: 1px solid var(--cizgi2); border-radius: var(--yaricap); overflow: hidden; margin-bottom: 14px; background: var(--kart); }
.satir { display: flex; width: 100%; gap: 12px; align-items: center; text-align: left; border: 0; border-bottom: 1px solid var(--cizgi2); border-radius: 0; padding: 12px 14px; background: transparent; }
.satir:last-child { border-bottom: 0; } .benek { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.acilis { text-align: center; padding: 18px 0 0; } .acilis canvas { width: 170px; } .acilis h1 { margin: 2px 0 0; font-size: 2.1rem; } .acilis h1 b { color: var(--vurgu); text-shadow: 0 0 22px rgba(53, 224, 200, .6); } .acilis p { margin: 2px 0 0; }
.giris-form { max-width: 460px; margin: 18px auto; }

/* vitrin */
.kahraman { padding: clamp(24px, 6vw, 64px) 0 18px; display: grid; gap: 20px; align-items: center; }
@media (min-width: 860px) { .kahraman { grid-template-columns: 1.1fr .9fr; } }
.kahraman p { font-size: 1.1rem; max-width: 58ch; color: var(--soluk); }
.kahraman h1 em { font-style: normal; background: linear-gradient(90deg, #35e0c8, #8f7dff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kahraman .dugmeler { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.serit { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 8px 0 22px; }
.serit div { border: 1px solid var(--cizgi2); border-radius: 12px; padding: 12px; background: rgba(0, 0, 0, .3); } .serit strong { display: block; font: 700 1.5rem var(--mono); color: var(--vurgu); } .serit small { color: var(--soluk); font: .66rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.ozellik h3 { margin-top: 0; } .ozellik p { color: var(--soluk); margin: 0; font-size: .93rem; }
.ozellik .no { font: 700 .66rem var(--mono); color: var(--vurgu); letter-spacing: .14em; margin-bottom: 8px; }
footer { border-top: 1px solid var(--cizgi2); margin-top: 36px; padding: 22px 0 40px; color: var(--soluk); font-size: .84rem; }
.gizli { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (max-width: 420px) { .belirtec { grid-template-columns: 94px 1fr 36px 54px; gap: 8px; } }

/* ölçüm akışı: aşama şeridi, durum rozeti, yönerge */
body.olcumde .sekmeler { display: none; }
body.olcumde { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.kayit { padding-top: 16px; }
.cikis { position: absolute; top: 6px; right: 6px; min-height: 40px; width: 40px; padding: 0; color: var(--soluk); font-size: 1.1rem; z-index: 1; }
.asamalar { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; margin: 0 28px 16px 0; padding: 0; }
.asamalar li { display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative; font: 600 .56rem/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--soluk); }
.asamalar li::before { content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px; background: rgba(255, 255, 255, .1); }
.asamalar li:first-child::before { display: none; }
.asamalar li.tamam::before, .asamalar li.simdi::before { background: var(--vurgu); }
.asamalar i { position: relative; font-style: normal; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #0a1018; border: 2px solid rgba(255, 255, 255, .14); font-size: .74rem; color: var(--soluk); }
.asamalar li.tamam i { background: var(--vurgu); border-color: var(--vurgu); color: var(--vurgu-yazi); }
.asamalar li.simdi { color: var(--yazi); } .asamalar li.simdi i { border-color: var(--vurgu); color: var(--vurgu); box-shadow: 0 0 0 4px rgba(53, 224, 200, .15), 0 0 18px rgba(53, 224, 200, .5); }
.durum-rozet { display: inline-flex; align-items: center; gap: 8px; font: 700 .68rem/1 var(--mono); letter-spacing: .16em; padding: 7px 12px; border: 1px solid currentColor; border-radius: 999px; margin: 0 0 12px; }
.durum-rozet::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.kayit h2 { font-size: clamp(1.3rem, 5.5vw, 1.7rem); }
.nasil { text-align: left; max-width: 440px; margin: 12px auto; padding: 0; list-style: none; counter-reset: n; }
.nasil li { counter-increment: n; position: relative; padding: 9px 0 9px 40px; border-top: 1px solid var(--cizgi2); } .nasil li:first-child { border-top: 0; }
.nasil li::before { content: counter(n); position: absolute; left: 0; top: 8px; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font: 700 .76rem var(--mono); color: var(--vurgu); background: var(--vurgu-soluk); }
.soyle { font-size: 1.15rem; font-weight: 600; margin: 4px 0 0; }

/* çarpışma çizimleri */
.goruntu { margin: 0; } .goruntu figcaption { font: 600 .62rem/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--soluk); margin-bottom: 4px; }
.goruntu canvas { image-rendering: pixelated; border-radius: 10px; }
.goruntu .eksen { display: flex; justify-content: space-between; font: .6rem var(--mono); color: var(--soluk); margin-top: 3px; }
details.kart > summary { cursor: pointer; }

/* uygulama düzeni: üst ve alt çubuk sabit, yalnız içerik kayar; uzun ekranlar yana kaydırılan bölümlere ayrılır */
html:has(body.uygulama) { overscroll-behavior: none; }
body.uygulama { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; padding-bottom: 0; background-attachment: scroll;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
body.uygulama input, body.uygulama select, body.uygulama code { user-select: text; -webkit-user-select: text; }
body.uygulama .ust { position: relative; flex: none; }
body.uygulama .ust .sarici { min-height: 52px; gap: 6px; }
body.uygulama #icerik { flex: 1; min-height: 0; width: 100%; overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
body.uygulama.olcumde #icerik { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
.geri { min-height: 40px; width: 40px; padding: 0; margin-left: -10px; border: 0; background: transparent; color: var(--yazi); font-size: 1.9rem; line-height: 1; }
.ust.derin .marka { display: none; }
.ust.derin .ekran-baslik { margin-left: 0; font: 700 1.05rem/1.2 system-ui, -apple-system, Roboto, sans-serif; letter-spacing: 0; text-transform: none; color: var(--yazi); }

body.uygulama #icerik.sayfali { overflow: hidden; display: flex; flex-direction: column; padding: 0; }
.sayfa-ust { flex: none; padding: 10px max(14px, env(safe-area-inset-left)) 0; }
.bolum-cubuk { flex: none; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px max(14px, env(safe-area-inset-left)) 10px; }
.bolum-cubuk::-webkit-scrollbar, .sayfalayici::-webkit-scrollbar, .yatay::-webkit-scrollbar { display: none; }
.bolum-cubuk button { flex: none; min-height: 36px; padding: 6px 14px; border-radius: 999px; font: 600 .7rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--soluk); }
.bolum-cubuk button.secili { color: var(--vurgu-yazi); background: var(--vurgu); border-color: transparent; box-shadow: 0 0 18px rgba(53, 224, 200, .35); }
.sayfalayici { flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.sayfa { flex: 0 0 100%; width: 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; overflow-y: auto; overscroll-behavior-y: contain;
  padding: 2px max(14px, env(safe-area-inset-right)) calc(104px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
.sayfa > .sarici-ic { max-width: 1080px; margin: 0 auto; }

/* rapor başlığı */
.rapor-ust { display: flex; align-items: center; gap: 12px; }
.rapor-ust .ikon { font-size: 1.4rem; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex: none; border: 1px solid var(--cizgi); }
.rapor-ust h2 { margin: 0; font-size: 1.15rem; }
.rapor-ust .govde small { display: block; }
.ikon-dugme { width: 44px; height: 44px; padding: 0; flex: none; border-radius: 14px; color: var(--vurgu); border-color: var(--cizgi); }

/* simgeler ve kısayollar */
.ik { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.kisayol { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 14px; }
.kisayol > * { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 10px; min-height: 92px; padding: 14px; border-radius: var(--yaricap); text-align: left; background: var(--kart); border: 1px solid var(--cizgi2); color: var(--yazi); }
.kisayol .ik { color: var(--vurgu); width: 26px; height: 26px; }
.kisayol strong { display: block; font-size: .98rem; } .kisayol small { display: block; color: var(--soluk); font: .68rem/1.3 var(--mono); }
.kisayol .ana .ik, .kisayol .ana small { color: var(--vurgu-yazi); }
.yatay { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin: 0 -18px; padding: 0 18px 2px; }
.yatay > * { flex: 0 0 auto; min-width: 116px; scroll-snap-align: start; }
.kahraman-halka.kucuk { max-width: 250px; }

/* ayarlar listesi */
.kimlik { display: flex; align-items: center; gap: 14px; padding: 6px 2px 16px; }
.kimlik .avatar { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font: 700 1.4rem var(--mono); color: var(--vurgu-yazi); background: linear-gradient(135deg, #35e0c8, #25b8e6); flex: none; }
.satir .ik { color: var(--vurgu); }
a.satir { color: var(--yazi); text-decoration: none; }
.satir.tehlike, .satir.tehlike .ik { color: var(--kirmizi); }

/* ölçüm ekranı ekranı doldurur, ana düğme altta */
body.olcumde #icerik > .kayit { min-height: calc(100% - 4px); display: flex; flex-direction: column; margin: 0; }
body.olcumde #icerik > .kayit > .dugme-sira:last-child { margin-top: auto; padding-top: 16px; }
body.olcumde .ust { display: none; }
body.olcumde #icerik { padding-top: calc(10px + env(safe-area-inset-top)); }
@media (max-height: 760px) { .osiloskop { height: 110px; margin: 8px auto 6px; } .nasil li { padding: 6px 0 6px 40px; } .nasil li::before { top: 5px; } .kayit h2 { margin-bottom: .3em; } }

/* pano: tek ekran, kaydırma yok */
body.uygulama #icerik.tam { overflow: hidden; display: flex; flex-direction: column; gap: 10px; }
#icerik.tam > * { margin: 0; flex: none; }
#icerik.tam .karsilama { padding: 0; }
#icerik.tam .karsilama h1 { font-size: clamp(1.25rem, 5vw, 1.6rem); }
#icerik.tam > .halka-kart { flex: 1 1 0; min-height: 110px; display: flex; flex-direction: column; align-items: center; padding: 10px 12px; width: 100%; }
.halka-kart .etiket { align-self: flex-start; margin-bottom: 4px; }
.halka-kart .kahraman-halka { flex: 1; min-height: 0; width: 100%; max-width: none; }
.halka-kart .kahraman-halka canvas { height: 100%; width: auto; max-width: 100%; aspect-ratio: 1; object-fit: contain; }
#icerik.tam .kisayol > * { min-height: 0; padding: 11px 12px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; }
#icerik.tam .yatay { margin: 0 calc(-1 * max(14px, env(safe-area-inset-left))); padding: 0 max(14px, env(safe-area-inset-left)); }
#icerik.tam .olcu div { padding: 7px 10px; } #icerik.tam .olcu strong { font-size: 1.05rem; }
#icerik.tam .sistem { padding: 7px 10px 7px 14px; }
@media (max-height: 680px) { #icerik.tam .karsilama p { display: none; } #icerik.tam > .olcu { display: none; } }
.halka-kart .kahraman-halka { position: relative; display: block; }
.halka-kart .kahraman-halka canvas { position: absolute; inset: 0; margin: auto; }
.halka-kart .kahraman-halka .orta { inset: 0; display: grid; place-content: center; }
body.olcumde .kayit > .durum-rozet { align-self: center; }
body.olcumde .kayit > .dugme-sira:last-child > button.buyuk { flex: 1; max-width: 420px; }
.sayfa-ust, .bolum-cubuk { width: 100%; max-width: 1080px; margin: 0 auto; }

/* uygulama içi onay penceresi (WebView confirm() göstermiyor) */
.pencere-zemin { position: fixed; inset: 0; z-index: 30; display: grid; place-items: end center; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); background: rgba(0, 0, 0, .62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: gir .2s ease-out both; }
.pencere { width: min(440px, 100%); margin: 0; background: #0a1119; }
.pencere p { font-size: 1.02rem; margin: 0 0 4px; }
.pencere .dugme-sira { flex-wrap: nowrap; } .pencere .dugme-sira button { flex: 1; }
@media (min-height: 600px) and (min-width: 700px) { .pencere-zemin { place-items: center; } }
/* ölçümden çıkış düğmesi belirgin olsun */
.cikis { width: 44px; min-height: 44px; border-radius: 50%; color: var(--yazi); background: rgba(255, 255, 255, .08); border-color: var(--cizgi2); font-size: 1.15rem; top: 8px; right: 8px; }

/* tanıtım: masaüstünde akan sayfa; telefonda yana kaydırılan tam ekran slaytlar, aşağı kaydırma yok */
.mobil, .slayt-nokta { display: none; }
.slayt.izgara { margin-bottom: 14px; }
.kahraman canvas { width: 100%; max-width: 440px; }
@media (max-width: 820px) {
  html:has(.slaytlar) { overscroll-behavior: none; }
  body:has(.slaytlar) { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; background-attachment: scroll; }
  body:has(.slaytlar) > footer { display: none; }
  .ust { position: relative; flex: none; }
  .slaytlar { flex: 1; min-height: 0; width: 100%; max-width: none; padding: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .slaytlar::-webkit-scrollbar { display: none; }
  .slayt { flex: 0 0 100%; width: 100%; min-width: 0; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden;
    display: flex; flex-direction: column; justify-content: center; gap: 14px; margin: 0 !important; padding: 12px max(18px, env(safe-area-inset-left)) 12px; }
  .slayt.izgara { display: flex; }
  .slayt > .kart { margin: 0; }
  .mobil { display: block; }
  a.mobil.dugme { display: inline-flex; }
  .kahraman { padding: 8px 18px; gap: 10px; }
  .kahraman h1 { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .kahraman p { font-size: 1rem; margin-bottom: 0; }
  .kahraman .dugmeler { margin-top: 14px; }
  .kahraman canvas { width: auto; max-width: 100%; height: auto; max-height: 34dvh; aspect-ratio: 1; }
  .serit { grid-template-columns: 1fr 1fr; margin: 0; } .serit div:last-child { grid-column: 1 / -1; } .serit strong { font-size: 2rem; }
  .ozellik p { font-size: .98rem; }
  .slayt.son { text-align: center; } .slayt.son .not { text-align: left; }
  .slayt-nokta { display: flex; flex: none; justify-content: center; align-items: center; gap: 10px; padding: 10px 0 calc(14px + env(safe-area-inset-bottom)); }
  .slayt-nokta button { min-height: 0; width: 9px; height: 9px; padding: 0; border-radius: 9px; border: 0; background: rgba(255, 255, 255, .22); transition: width .2s, background .2s; }
  .slayt-nokta button[aria-current] { width: 26px; background: var(--vurgu); box-shadow: 0 0 10px var(--vurgu); }
  .slayt-nokta .ileri { width: auto; height: 34px; padding: 0 14px; margin-left: 8px; background: var(--vurgu-soluk); color: var(--vurgu); font: 600 .72rem var(--mono); letter-spacing: .08em; border-radius: 999px; }
}
@media (max-width: 820px) and (max-height: 640px) { .kahraman canvas { display: none; } }
.sarici-ic { display: flow-root; }
.sayfa { overflow-y: auto; scrollbar-width: none; } .sayfa::-webkit-scrollbar { display: none; }
.uclu { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 8px; } .uclu label { margin-bottom: 8px; } .uclu select, .uclu input { padding: 11px 8px; }
.acilis.kucuk { display: flex; align-items: center; justify-content: center; gap: 10px; padding-top: 6px; } .acilis.kucuk canvas { width: 54px; } .acilis.kucuk h1 { font-size: 1.6rem; } .acilis.kucuk p { display: none; }
body.uygulama .giris-form { margin: 14px auto; }
@media (max-height: 700px) { .acilis canvas { width: 120px; } }
body.uygulama:has(#menu.gizli) #icerik { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.acilis canvas { width: 150px; }
.ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
@media (max-height: 700px) {
  .kimlik { padding: 0 2px 10px; } .kimlik .avatar { width: 46px; height: 46px; font-size: 1.15rem; }
  .satir { padding: 9px 14px; } .liste { margin-bottom: 10px; }
  label { margin-bottom: 8px; } input, select { min-height: 40px; padding: 8px 10px; }
  .kayit { padding-top: 10px; } .asamalar { margin-bottom: 10px; } .durum-rozet { margin-bottom: 8px; } .kayit p { margin-bottom: .6em; }
}
@media (max-width: 820px) { .slayt { justify-content: safe center; } }