/* NexBrowser — Liquid Glass teması. Renkli "aurora" zemin sabit durur, cam paneller onu kırarak gösterir. */
:root {
  --bg: #05070a;
  --ink: #f5f7fa;
  --ink-2: rgb(235 240 248 / .72);
  --ink-3: rgb(235 240 248 / .5);
  --accent: #3ddc84;
  --accent-2: #2fd3c4;
  --zen: #9a8cff;
  --glass: rgb(255 255 255 / .07);
  --glass-2: rgb(255 255 255 / .12);
  --rim: rgb(255 255 255 / .22);
  --radius: 28px;
  --radius-s: 18px;
  --blur: 22px;
  --wrap: 1180px;
  --font: 'Inter', -apple-system, 'SF Pro Display', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.6 var(--font); letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.035em; line-height: 1.04; }
p { margin: 0; }
code { font-family: var(--mono); font-size: .86em; }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.muted { color: var(--ink-3); }
.skip { position: absolute; left: -999px; top: 12px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--bg); }
.skip:focus { left: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; }

/* ---------- zemin ---------- */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(120% 80% at 50% 0%, #0b1416 0%, var(--bg) 60%); }
.aurora i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; opacity: .55; will-change: transform; }
.aurora i:nth-child(1) { left: -20vmax; top: -25vmax; background: radial-gradient(closest-side, rgb(61 220 132 / .75), transparent); animation: drift1 26s var(--ease) infinite alternate; }
.aurora i:nth-child(2) { right: -25vmax; top: 10vh; background: radial-gradient(closest-side, rgb(124 92 255 / .6), transparent); animation: drift2 32s var(--ease) infinite alternate; }
.aurora i:nth-child(3) { left: 15vw; bottom: -40vmax; background: radial-gradient(closest-side, rgb(32 196 214 / .55), transparent); animation: drift3 38s var(--ease) infinite alternate; }
.aurora::after { content: ""; position: absolute; inset: 0; background: radial-gradient(transparent 0 55%, rgb(0 0 0 / .55)); }
@keyframes drift1 { to { transform: translate(18vw, 22vh) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-22vw, 30vh) scale(.9); } }
@keyframes drift3 { to { transform: translate(14vw, -26vh) scale(1.1); } }

/* ---------- cam ---------- */
.glass {
  position: relative; isolation: isolate;
  background:
    radial-gradient(120% 90% at 0% 0%, rgb(61 220 132 / .12), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgb(124 92 255 / .10), transparent 60%),
    linear-gradient(150deg, rgb(255 255 255 / .13), rgb(255 255 255 / .04) 45%, rgb(255 255 255 / .07));
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .38), inset 0 -1px 0 rgb(255 255 255 / .06), 0 24px 70px -20px rgb(0 0 0 / .6);
}
/* Bulanıklık yalnızca altından içerik geçen küçük camlarda: büyük panellerin ardında zaten yumuşak aurora var
   ve geniş alanda backdrop-filter kaydırmayı yavaşlatıyor. */
.top-in, .chip, .btn-glass, .eyebrow.glass { -webkit-backdrop-filter: blur(var(--blur)) saturate(175%); backdrop-filter: blur(var(--blur)) saturate(175%); }
/* kenar ışığı: köşelerde parlayan ince halka */
.glass::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgb(255 255 255 / .55), rgb(255 255 255 / .05) 30%, rgb(255 255 255 / 0) 60%, rgb(255 255 255 / .3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* imleci izleyen parlama */
.glass::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgb(255 255 255 / .14), transparent 45%);
}
.glass:hover::after { opacity: 1; }

/* ---------- üst menü ---------- */
.top { position: fixed; z-index: 50; top: 14px; left: 0; right: 0; display: flex; justify-content: center; padding-inline: 12px; pointer-events: none; }
.top-in { pointer-events: auto; display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; }
.brand { display: flex; align-items: center; gap: 9px; padding: 6px 14px 6px 8px; font-weight: 650; letter-spacing: -.02em; }
.brand img { width: 26px; height: 26px; border-radius: 8px; }
.nav { display: flex; gap: 2px; }
.nav a, .lang { padding: 8px 14px; border-radius: 999px; font-size: 15px; color: var(--ink-2); transition: background .25s, color .25s; }
.nav a:hover, .lang:hover { color: var(--ink); background: rgb(255 255 255 / .08); }
.nav a[aria-current="page"] { color: var(--ink); background: rgb(255 255 255 / .16); box-shadow: inset 0 1px 0 rgb(255 255 255 / .3); }
.lang { display: flex; align-items: center; gap: 6px; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic-lg { width: 30px; height: 30px; }

/* ---------- düğmeler ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; font-weight: 600; font-size: 16px; transition: transform .3s var(--ease), background .3s; }
.btn:hover { transform: translateY(-2px); }
.btn-soon { color: #04140b; background: linear-gradient(180deg, #6cf0a8, var(--accent)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), 0 10px 40px -8px rgb(61 220 132 / .7); cursor: default; }
.btn-soon:hover { transform: none; }
.btn-glass { color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.actions.center { justify-content: center; }

/* ---------- tipografi ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: #c9f7dd; }
/* Işıklı nokta arka plan katmanıdır; ::before ve ::after camın kenar ışığına ve parlamasına ayrılmış. */
.eyebrow { padding-left: 28px; }
.eyebrow.glass { background:
  radial-gradient(circle at 15px 50%, var(--accent) 0 3.5px, transparent 4.5px),
  radial-gradient(circle at 15px 50%, rgb(61 220 132 / .45), transparent 12px),
  linear-gradient(150deg, rgb(255 255 255 / .13), rgb(255 255 255 / .04) 45%, rgb(255 255 255 / .07)); }
.lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--ink-2); max-width: 62ch; }
.h-xl { font-size: clamp(48px, 9.5vw, 132px); letter-spacing: -.055em; line-height: .95; }
.h-l { font-size: clamp(36px, 5.5vw, 72px); letter-spacing: -.045em; }
.h-m { font-size: clamp(28px, 3.4vw, 44px); }
.grad { background: linear-gradient(100deg, #8ff5bd, var(--accent) 40%, var(--accent-2) 75%, #8ea2ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sec { padding: clamp(96px, 14vh, 160px) 0; }
.sec-head { display: grid; gap: 18px; margin-bottom: 48px; justify-items: start; }
.sec-head.center { text-align: center; justify-items: center; }

/* kelime kelime giriş */
.kin .w { display: inline-block; }
/* background-clip: text, dönüşümlü kelimelerin içine işlemez; degrade her kelimeye ayrı verilir. */
.grad .w { background: inherit; -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em; }
.js .kin .w { opacity: 0; transform: translateY(.45em) rotate(2deg); filter: blur(10px); animation: wordIn 1s var(--ease) forwards; animation-delay: calc(var(--i) * 90ms + 120ms); }
@keyframes wordIn { to { opacity: 1; transform: none; filter: none; } }

/* görünürken belirme */
.js .reveal { opacity: 0; transform: translateY(40px) scale(.98); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- hero ---------- */
.hero { min-height: 100svh; padding-top: 140px; display: grid; justify-items: center; text-align: center; gap: 28px; }
.hero .lead { margin-inline: auto; }
.hero-stage { width: min(1180px, 100% - 32px); margin-top: 24px; perspective: 1600px; }
.hero-shot { padding: 10px; border-radius: 30px; transform-origin: 50% 0; transform: rotateX(calc((1 - var(--p, 1)) * 24deg)) scale(calc(.84 + var(--p, 1) * .16)); will-change: transform; }
.hero-shot img { border-radius: 21px; width: 100%; }
.hero-chips { position: relative; }
.chip { position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 22px; text-align: left; font-size: 14px; color: var(--ink-2); transform: translateY(calc((1 - var(--p, 1)) * 80px)); }
.chip b { display: block; font-size: 22px; color: var(--ink); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.chip .dot { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; background: rgb(61 220 132 / .18); color: var(--accent); }
.chip-a { left: -28px; top: -40px; }
.chip-b { right: -28px; top: 34%; }
.scroll-cue { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); }
.scroll-cue span { width: 24px; height: 38px; border-radius: 12px; border: 1.5px solid rgb(255 255 255 / .35); position: relative; }
.scroll-cue span::after { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--ink); animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 80%, 100% { transform: translateY(14px); opacity: 0; } }

/* ---------- sabitlenen sahneler ---------- */
.scene { position: relative; }
.js .scene { height: var(--len, 400vh); }
.js .scene > .stick { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
.step-caps { position: relative; display: grid; }
/* Pasif adım solduktan sonra visibility ile tamamen gizlenir: seçime, Ctrl+F'ye ve çeviriye karışmaz. */
.js .step-caps > * { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(26px); filter: blur(6px); transition: opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease), visibility 0s linear .6s; pointer-events: none; }
.js .step-caps > .on { opacity: 1; visibility: visible; transform: none; filter: none; pointer-events: auto; transition-delay: 0s; }
.step-caps > * + * { margin-top: 28px; }
.js .step-caps > * + * { margin-top: 0; }
.cap-k { font-family: var(--mono); font-size: 14px; color: var(--accent); margin-bottom: 14px; }
.cap-t { font-size: clamp(32px, 4.6vw, 64px); letter-spacing: -.045em; line-height: 1.02; margin-bottom: 18px; }
.cap-d { color: var(--ink-2); font-size: 18px; max-width: 44ch; }
.progress { display: flex; gap: 8px; margin-top: 36px; }
.progress i { width: 34px; height: 4px; border-radius: 4px; background: rgb(255 255 255 / .16); overflow: hidden; position: relative; }
.progress i::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(var(--f, 0)); transform-origin: left; }

/* bellek erimesi */
.melt-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.tanks { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 28px; }
.tank-col { display: grid; gap: 14px; justify-items: center; }
.tank-name { font-weight: 650; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.tank-name i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.tank-val { font-size: clamp(30px, 3.4vw, 46px); font-weight: 700; letter-spacing: -.045em; font-variant-numeric: tabular-nums; line-height: 1; }
.tank-val small { font-size: .42em; color: var(--ink-3); font-weight: 600; margin-left: 4px; letter-spacing: 0; }
.tank {
  position: relative; width: min(132px, 100%); height: clamp(220px, 40vh, 380px); border-radius: 999px; overflow: hidden;
  background: linear-gradient(90deg, rgb(255 255 255 / .1), rgb(255 255 255 / .02) 40%, rgb(255 255 255 / .08));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2), inset 0 10px 30px rgb(0 0 0 / .4);
}
.liquid { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--fill, 0) * 100%); background: linear-gradient(180deg, var(--c), color-mix(in oklab, var(--c), #000 45%)); transition: height .25s linear; }
.liquid::before { content: ""; position: absolute; left: 0; right: 0; top: -13px; height: 14px; background: var(--c);
  -webkit-mask: var(--wave) repeat-x 0 0 / 60px 14px; mask: var(--wave) repeat-x 0 0 / 60px 14px; animation: wave 2.4s linear infinite; }
.liquid { --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 14' preserveAspectRatio='none'%3E%3Cpath d='M0 7 Q15 0 30 7 T60 7 V14 H0Z'/%3E%3C/svg%3E"); }
.liquid::after { content: ""; position: absolute; inset: 0 auto 0 14%; width: 16%; background: linear-gradient(90deg, rgb(255 255 255 / .35), transparent); border-radius: 999px; }
/* 3D tank yüklenince CSS çizimi yerini tuvale bırakır (seviye yine .liquid'in --fill'inden okunur). */
.tank.t3d { background: none; box-shadow: none; overflow: visible; border-radius: 0; }
.tank.t3d::after, .tank.t3d > .liquid { visibility: hidden; }
.tank3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: drop-shadow(0 18px 30px rgb(0 0 0 / .45)); }
@keyframes wave { to { -webkit-mask-position: 60px 0; mask-position: 60px 0; } }
.tank::after { content: ""; position: absolute; inset: 8px 22% auto 18%; height: 42%; border-radius: 999px; background: linear-gradient(180deg, rgb(255 255 255 / .28), transparent); pointer-events: none; }
.dots { display: grid; grid-template-columns: repeat(9, 9px); gap: 5px; min-height: 52px; align-content: start; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); transition: transform .45s var(--ease), opacity .45s; }
.dots i.off { transform: scale(0); opacity: 0; }
.procs { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.verdict { margin-top: 18px; text-align: center; font-size: 13px; color: var(--ink-3); }

/* yatay kayan farklar */
.js [data-scene="hs"] > .stick { align-content: center; }
.hs-head { margin-bottom: clamp(24px, 4vh, 44px); }
.track { display: flex; gap: 24px; padding-left: max(16px, (100vw - var(--wrap)) / 2); padding-right: 16px; will-change: transform; transform: translate3d(var(--tx, 0), 0, 0); }
.hcard { flex: none; width: min(560px, 86vw); min-height: 360px; padding: 36px; display: flex; flex-direction: column; gap: 18px; }
.hcard .ic-lg { color: var(--accent); }
.hcard h3 { font-size: 30px; }
.hcard p { color: var(--ink-2); }
.hstat { margin-top: auto; padding-top: 24px; border-top: 1px solid rgb(255 255 255 / .12); }
.hstat b { display: block; font-size: clamp(38px, 4.5vw, 58px); letter-spacing: -.05em; line-height: 1; }
.hstat span { font-size: 14px; color: var(--ink-3); }

/* hesap akışı */
.acc-grid { display: grid; grid-template-columns: .9fr 1.2fr; gap: 56px; align-items: center; }
.device { padding: 10px; border-radius: 30px; }
.screens { position: relative; aspect-ratio: 16 / 10.5; border-radius: 21px; overflow: hidden; background: #16161c; }
.screens img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .7s var(--ease), transform .9s var(--ease); }
.js .screens img { opacity: 0; transform: scale(1.06); }
.screens img.shot-browser { object-fit: cover; object-position: left top; }
.screens img.shot-password { inset: 50% auto auto 50%; width: auto; height: auto; max-width: 78%; transform: translate(-50%, -50%); border-radius: 12px; box-shadow: 0 30px 80px rgb(0 0 0 / .6); }
.js .screens img.shot-password { transform: translate(-50%, -50%) scale(1.15); }
.js .screens img.on { opacity: 1; transform: none; }
.js .screens img.shot-password.on { transform: translate(-50%, -50%); }

/* bento */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tile { padding: 28px; display: grid; gap: 12px; align-content: start; min-height: 230px; }
.tile:nth-child(1) { grid-column: span 2; }
.tile:nth-child(4) { grid-column: span 2; }
.tile .ic-lg { color: var(--accent); margin-bottom: 8px; }
.tile h3 { font-size: 22px; letter-spacing: -.03em; }
.tile p { color: var(--ink-2); font-size: 16px; }

/* kapanış */
.end { text-align: center; display: grid; justify-items: center; gap: 22px; padding: 72px 28px; }
.end-logo { width: 96px; height: 96px; border-radius: 26px; box-shadow: 0 20px 60px -10px rgb(61 220 132 / .55); }

/* ---------- alt sayfalar ---------- */
.page-head { padding-top: 150px; padding-bottom: 40px; display: grid; gap: 22px; justify-items: start; }
.page-head.center { justify-items: center; text-align: center; }
.panel { padding: clamp(24px, 4vw, 44px); }
.result { margin-top: 28px; display: grid; gap: 28px; }
.result-head { display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px; align-items: end; }
.result-head p { color: var(--ink-2); }
.bars { margin: 0; display: grid; gap: 16px; }
.bar { display: grid; grid-template-columns: 120px 1fr auto; gap: 18px; align-items: center; font-size: 15px; color: var(--ink-2); }
.bar.is-nex { color: var(--ink); font-weight: 650; }
.bar-track { height: 18px; border-radius: 999px; background: rgb(255 255 255 / .07); box-shadow: inset 0 1px 3px rgb(0 0 0 / .5), inset 0 0 0 1px rgb(255 255 255 / .08); overflow: hidden; }
.bar-fill { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(180deg, rgb(255 255 255 / .35), rgb(255 255 255 / 0) 55%), rgb(255 255 255 / .28); transform-origin: left; }
.bar.is-nex .bar-fill { background: linear-gradient(180deg, rgb(255 255 255 / .45), rgb(255 255 255 / 0) 55%), linear-gradient(90deg, var(--accent-2), var(--accent)); box-shadow: 0 0 22px rgb(61 220 132 / .5); }
.js .bars .bar-fill { transform: scaleX(0); transition: transform 1.4s var(--ease); }
.js .bars.in .bar-fill { transform: none; }
.bars.t3d { position: relative; }
.bars.t3d .bar-track { background: none; box-shadow: none; overflow: visible; }
.bars.t3d .bar-fill { background: none; }
.bars.t3d .bar:not(.is-nex) .bar-fill { box-shadow: none; }
.bars.t3d .bar.is-nex .bar-fill { box-shadow: 0 0 26px rgb(61 220 132 / .35); }
.bars3d { position: absolute; inset: -14px; width: calc(100% + 28px); height: calc(100% + 28px); pointer-events: none; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .4)); }
.bar-val { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 15px; }
.bar-val b { font-weight: 600; }
.table-wrap { overflow-x: auto; border-radius: var(--radius-s); background: rgb(0 0 0 / .18); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); }
table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
th, td { text-align: left; padding: 15px 18px; border-bottom: 1px solid rgb(255 255 255 / .07); }
thead th { font-size: 13px; font-weight: 500; color: var(--ink-3); }
tbody tr:last-child > * { border-bottom: 0; }
tbody th { font-weight: 600; }
tr.is-nex { background: rgb(61 220 132 / .08); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tag { display: inline-block; margin-left: 10px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #04140b; background: var(--accent); vertical-align: 1px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.steps-list { margin: 20px 0 0; padding-left: 22px; display: grid; gap: 12px; color: var(--ink-2); }
.prefs { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 2px; }
.prefs li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgb(255 255 255 / .07); font-size: 14px; }
.prefs code { color: var(--ink); overflow-wrap: anywhere; }
.prefs span { font-family: var(--mono); font-size: 13px; color: var(--accent); white-space: nowrap; }
.prefs s { color: var(--ink-3); margin-right: 6px; }
.cards { display: grid; gap: 18px; margin-top: 32px; }
.cards.two { grid-template-columns: repeat(2, 1fr); }
.cards.three { grid-template-columns: repeat(3, 1fr); }
.card { padding: 30px; display: grid; gap: 12px; align-content: start; }
.card .ic-lg { color: var(--accent); margin-bottom: 6px; }
.card h3 { font-size: 21px; letter-spacing: -.025em; }
.card p { color: var(--ink-2); font-size: 16px; }
.notes { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.notes li { padding: 18px 22px 18px 50px; position: relative; border-radius: var(--radius-s); background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); color: var(--ink-2); }
.notes li::before { content: ""; position: absolute; left: 22px; top: 27px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.narrow { max-width: 860px; }
.specs { margin: 24px 0 0; display: grid; gap: 2px; }
.specs div { display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid rgb(255 255 255 / .08); }
.specs dt { color: var(--ink-3); }
.specs dd { margin: 0; }
.callout { display: flex; gap: 18px; margin-top: 32px; padding: 26px; }
.callout .ic-lg { color: var(--accent); }
.callout h3 { font-size: 19px; margin-bottom: 6px; }
.callout p { color: var(--ink-2); }
.dl-logo { width: 128px; height: 128px; border-radius: 34px; box-shadow: 0 30px 90px -10px rgb(61 220 132 / .6); }
.js .dl-logo { animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-12px); } }

/* hesaplar sayfası adımları (sabitlenmez) */
.flow { display: grid; gap: 28px; margin-top: 20px; }
.flow-step { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: center; padding: clamp(20px, 3vw, 36px); }
.num-badge { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; margin-bottom: 18px; font-family: var(--mono); color: var(--accent); background: rgb(61 220 132 / .14); box-shadow: inset 0 0 0 1px rgb(61 220 132 / .3); }
.flow-copy h2 { font-size: clamp(26px, 3vw, 38px); margin-bottom: 12px; }
.flow-copy p { color: var(--ink-2); }
.flow-media { border-radius: 20px; overflow: hidden; background: #16161c; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
.flow-media:has(.shot-password) { display: grid; place-items: center; padding: clamp(28px, 6vw, 64px) 16px; background: #050506; }
.shot { width: 100%; }
.shot-password { width: auto; max-width: 100%; border-radius: 12px; box-shadow: 0 18px 50px rgb(0 0 0 / .5); }

/* ---------- alt bilgi ---------- */
.foot { margin-top: 120px; padding: 0 0 40px; }
.foot-in { padding: 34px; display: grid; gap: 14px; font-size: 14px; color: var(--ink-2); }
.foot-brand { display: flex; align-items: center; gap: 10px; font-weight: 650; color: var(--ink); }
.foot-brand img { border-radius: 7px; }
.foot-nav { display: flex; gap: 18px; flex-wrap: wrap; }
.foot-nav a:hover { color: var(--ink); }

/* ---------- uyumluluk ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgb(22 26 32 / .92); }
}

@media (max-width: 960px) {
  .melt-grid, .acc-grid, .result-head, .two-col, .flow-step { grid-template-columns: 1fr; }
  .melt-grid, .acc-grid { gap: 28px; }
  .js .scene > .stick { align-items: start; padding-top: 96px; }
  .cap-t { font-size: clamp(28px, 7vw, 44px); margin-bottom: 10px; }
  .cap-d { font-size: 16px; }
  .progress { margin-top: 18px; }
  .tank { height: clamp(150px, 28vh, 260px); }
  .tanks { padding: 20px; }
  .bento { grid-template-columns: 1fr 1fr; }
  .tile:nth-child(n) { grid-column: span 1; }
  .cards.three { grid-template-columns: 1fr; }
  .chip-a { left: 8px; top: -30px; }
  .chip-b { right: 8px; }
}
@media (max-width: 640px) {
  :root { --blur: 16px; }
  body { font-size: 16px; }
  .brand span { display: none; }
  .brand { padding: 6px; }
  .nav a, .lang { padding: 8px 11px; font-size: 14px; }
  .lang span { display: none; }
  .hero { padding-top: 112px; }
  .chip { display: none; }
  .bento, .cards.two { grid-template-columns: 1fr; }
  .bar { grid-template-columns: 1fr auto; gap: 8px 12px; }
  .bar-track { grid-column: 1 / -1; grid-row: 2; }
  .specs div { grid-template-columns: 1fr; gap: 4px; }
  .dots { grid-template-columns: repeat(9, 7px); gap: 4px; min-height: 40px; }
  .dots i { width: 7px; height: 7px; }
  .hcard { min-height: 320px; padding: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .aurora i, .liquid::before, .scroll-cue span::after { animation: none; }
  .hero-shot, .chip { transform: none; }
}