/* 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;
}
button:hover, .dugme:hover { border-color: var(--vurgu); }
button:active { transform: scale(.98); }
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; }