/* anon4me.com: shared palette, static background, viewport-aware motion. */

@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* Onest (Google Fonts, SIL OFL), self-hosted: the CSP only allows fonts from this site. One variable file per script, weights 100–900. */
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(onest-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(onest-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bg: #05070d;
  --bg-2: #0a0e18;
  --surface: rgba(16, 22, 36, 0.72);
  --surface-solid: #111827;
  --surface-2: rgba(26, 34, 52, 0.8);
  --line: rgba(148, 163, 184, 0.14);
  --line-strong: rgba(148, 163, 184, 0.26);
  --text: #eaf0f8;
  --dim: #a7b2c6;
  --faint: #7c88a0;
  --accent: #38bdf8;
  --accent-hi: #7dd3fc;
  --indigo: #818cf8;
  --violet: #c084fc;
  --ok: #34d399;
  --warn: #fbbf24;
  --danger: #f87171;
  --radius: 22px;
  --radius-sm: 14px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --font: 'Onest', 'Segoe UI Variable Display', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'Cascadia Code', 'Cascadia Mono', Consolas, 'SF Mono', Menlo, monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 var(--font);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
code { font-family: var(--mono); font-size: 0.88em; background: rgba(148, 163, 184, 0.1); border: 1px solid var(--line); padding: 0.1em 0.4em; border-radius: 6px; word-break: break-all; }
::selection { background: rgba(56, 189, 248, 0.35); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 860px; }
.center { text-align: center; }
.muted { color: var(--faint); }
.small { font-size: 0.86rem; }
.right { text-align: right; }

/* ── background layers ─────────────────────────────────────────────────── */

.aurora { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -3; display: block; }
.aurora-fallback { position: fixed; inset: -20%; z-index: -3; display: none; overflow: hidden; }
.no-webgl .aurora { display: none; }
.no-webgl .aurora-fallback { display: block; }
.aurora-fallback i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; opacity: 0.55; will-change: transform; }
.aurora-fallback i:nth-child(1) { background: radial-gradient(circle, rgba(37, 99, 235, 0.55), transparent 62%); left: -10%; top: -20%; animation: drift1 26s ease-in-out infinite alternate; }
.aurora-fallback i:nth-child(2) { background: radial-gradient(circle, rgba(56, 189, 248, 0.38), transparent 62%); right: -15%; top: 10%; animation: drift2 32s ease-in-out infinite alternate; }
.aurora-fallback i:nth-child(3) { background: radial-gradient(circle, rgba(129, 140, 248, 0.4), transparent 62%); left: 20%; bottom: -30%; animation: drift3 38s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate3d(18vw, 14vh, 0) scale(1.15); } }
@keyframes drift2 { to { transform: translate3d(-22vw, 18vh, 0) scale(0.9); } }
@keyframes drift3 { to { transform: translate3d(10vw, -20vh, 0) scale(1.2); } }

.grain {
  position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.cursor-glow {
  position: fixed; left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; z-index: -1; pointer-events: none;
  border-radius: 50%; background: radial-gradient(circle, rgba(56, 189, 248, 0.13), rgba(129, 140, 248, 0.06) 35%, transparent 65%);
  opacity: 0; transition: opacity 0.6s; will-change: transform;
}
.has-pointer .cursor-glow { opacity: 1; }
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; transform-origin: 0 50%; transform: scaleX(var(--sp, 0));
  background: linear-gradient(90deg, var(--accent), var(--indigo), var(--violet)); box-shadow: 0 0 12px rgba(56, 189, 248, 0.7); }

/* ── type ──────────────────────────────────────────────────────────────── */

h1, h2, h3 { line-height: 1.12; letter-spacing: -0.025em; margin: 0; font-weight: 750; }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h3 { font-size: 1.16rem; letter-spacing: -0.01em; }
p { margin: 0; }
.grad {
  background: linear-gradient(100deg, var(--accent-hi), var(--accent) 25%, var(--indigo) 55%, var(--violet) 80%, var(--accent-hi));
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradmove 7s linear infinite;
}
@keyframes gradmove { to { background-position: 220% center; } }
.kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.kicker::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--accent)); }

.ico { width: 20px; height: 20px; flex: none; }
.ico-sm { width: 16px; height: 16px; }
.flip { transform: scaleX(-1); }

/* ── buttons ───────────────────────────────────────────────────────────── */

.btn {
  --btn-bg: var(--surface-2);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 20px; border-radius: 14px; border: 1px solid var(--line-strong);
  background: var(--btn-bg); color: var(--text); font: 600 0.95rem/1.2 var(--font); cursor: pointer;
  transition: transform 0.35s var(--spring), box-shadow 0.35s var(--ease), background-color 0.25s, border-color 0.25s, color 0.25s;
  -webkit-tap-highlight-color: transparent; white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.97); transition-duration: 0.1s; }
.btn-primary { --btn-bg: linear-gradient(135deg, #3cc4fa, #3b82f6 60%, #6366f1); border-color: transparent; color: #04101d; background: var(--btn-bg);
  box-shadow: 0 10px 30px -8px rgba(56, 189, 248, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.btn-primary:hover { box-shadow: 0 16px 44px -10px rgba(56, 189, 248, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.btn-ghost { background: rgba(255, 255, 255, 0.03); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(148, 163, 184, 0.4); }
.btn-danger { background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.4); color: var(--danger); }
.btn-danger:hover { background: rgba(248, 113, 113, 0.2); }
.btn-sm { padding: 8px 14px; font-size: 0.86rem; border-radius: 11px; }
.btn-lg { padding: 16px 26px; font-size: 1.02rem; border-radius: 16px; }
.btn-block { width: 100%; }
.btn-beam {
  border: 2px solid transparent;
  background: var(--btn-bg) padding-box, conic-gradient(from var(--a), rgba(255, 255, 255, 0.0) 0deg, rgba(255, 255, 255, 0.95) 40deg, rgba(125, 211, 252, 0.6) 80deg, rgba(255, 255, 255, 0) 140deg, rgba(255, 255, 255, 0) 360deg) border-box;
  animation: beam 3.2s linear infinite;
}
@keyframes beam { to { --a: 360deg; } }
.btn .ico { transition: transform 0.35s var(--spring); }
.btn:hover .ico:last-child:not(:first-child) { transform: translateX(3px); }

/* ── nav ───────────────────────────────────────────────────────────────── */

.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 14px 0; transition: background-color 0.35s, padding 0.35s, border-color 0.35s; border-bottom: 1px solid transparent; }
.nav.scrolled { background: rgba(5, 7, 13, 0.86); border-bottom-color: var(--line); padding: 10px 0; }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 750; font-size: 1.18rem; letter-spacing: -0.02em; }
.brand-mark { position: relative; display: grid; place-items: center; }
.brand-mark::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; background: radial-gradient(circle, rgba(56, 189, 248, 0.35), transparent 70%); animation: pulse 3s ease-in-out infinite; z-index: -1; }
.brand-name em { font-style: normal; font-weight: 500; color: var(--faint); margin-left: 4px; }
.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links > a:not(.btn) { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; color: var(--dim); font-weight: 550; font-size: 0.94rem; transition: color 0.2s, background-color 0.2s; position: relative; }
.nav-links > a:not(.btn)::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--indigo)); transform: scaleX(0); transition: transform 0.35s var(--ease); transform-origin: left; }
.nav-links > a:not(.btn):hover, .nav-links > a.on { color: var(--text); }
.nav-links > a:not(.btn):hover::after, .nav-links > a.on::after { transform: scaleX(1); }
.nav-cta { margin-left: 8px; }
.inline-form { display: inline; margin: 0 0 0 8px; }
.menu-btn { display: none; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(255, 255, 255, 0.04); cursor: pointer; position: relative; }
.menu-btn span { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.35s var(--spring), top 0.35s; }
.menu-btn span:first-child { top: 16px; }
.menu-btn span:last-child { top: 25px; }
.menu-btn[aria-expanded="true"] span:first-child { top: 20.5px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { top: 20.5px; transform: rotate(-45deg); }

/* ── reveal + stagger (only when JS runs) ─────────────────────────────── */

.js .reveal { opacity: 0; transform: translate3d(0, 28px, 0) scale(0.985); transition: opacity 0.9s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; filter: none; }
.js [data-stagger] .w { display: inline-block; opacity: 0; transform: translate3d(0, 0.55em, 0) rotateX(-55deg); transform-origin: 50% 100%; transition: opacity 0.9s var(--ease), transform 1.1s var(--spring); transition-delay: calc(var(--i, 0) * 85ms + 0.1s); }
.js [data-stagger].in .w { opacity: 1; transform: none; filter: none; }
[data-stagger] { perspective: 800px; }

.paused, .paused *, .paused *::before, .paused *::after { animation-play-state: paused !important; }

/* ── hero ──────────────────────────────────────────────────────────────── */

.hero { position: relative; padding: 150px 0 90px; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(148, 163, 184, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, 0.07) 1px, transparent 1px);
  background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 20%, transparent 75%); }
.hero-in { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 56px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(15, 23, 42, 0.6); color: var(--dim); font-size: 0.86rem; font-weight: 550; transition: border-color 0.25s, color 0.25s; }
.eyebrow:hover { border-color: rgba(56, 189, 248, 0.5); color: var(--text); }
.eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6); animation: ping 2s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); } 80%, 100% { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); } }
.hero-title { font-size: clamp(2.7rem, 6.4vw, 5rem); line-height: 1.02; letter-spacing: -0.045em; margin: 22px 0 22px; font-weight: 800; }
.hero-sub { font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--dim); max-width: 560px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-cta.center { justify-content: center; }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; color: var(--faint); font-size: 0.88rem; }
.hero-meta i { width: 4px; height: 4px; border-radius: 50%; background: var(--line-strong); }
.live { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding: 8px 14px; border-radius: 999px; background: rgba(52, 211, 153, 0.08); border: 1px solid rgba(52, 211, 153, 0.25); color: #a7f3d0; font-size: 0.9rem; }
.live b { color: #fff; font-variant-numeric: tabular-nums; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: ping 1.6s infinite; }

/* the app preview: a 3D scene the pointer tilts */
.hero-visual { perspective: 1300px; }
.scene { position: relative; transform-style: preserve-3d; transform: rotateX(var(--rx, 6deg)) rotateY(var(--ry, -12deg)); transition: transform 0.6s var(--ease); animation: float 7s ease-in-out infinite; margin: 0 auto; max-width: 400px; }
.scene.tilting { transition: transform 0.12s linear; }
@keyframes float { 50% { translate: 0 -14px; } }
.mock {
  position: relative; transform: translateZ(0); border-radius: 26px; padding: 0 0 12px; overflow: hidden;
  background: linear-gradient(160deg, rgba(20, 28, 46, 0.97), rgba(9, 13, 24, 0.98));
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: 0 50px 100px -30px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(56, 189, 248, 0.06), 0 30px 80px -40px rgba(56, 189, 248, 0.55);
}
.mock::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(500px circle at var(--gx, 30%) var(--gy, 0%), rgba(255, 255, 255, 0.1), transparent 45%); }
.mock-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 0.78rem; color: var(--faint); }
.mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: #334155; }
.mock-bar i:nth-child(1) { background: #f87171; } .mock-bar i:nth-child(2) { background: #fbbf24; } .mock-bar i:nth-child(3) { background: #34d399; }
.mock-bar span { margin-left: 8px; }
.mock-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; }
.mock-head div { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.mock-head b { font-size: 0.95rem; } .mock-head small { color: var(--faint); font-size: 0.74rem; }
.pill { display: grid; align-items: center; grid-template-columns: auto 1fr; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 650; animation: pillBg 10s infinite; }
.pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill em { font-style: normal; grid-area: 1 / 2; }
@keyframes pillBg { 0%, 38% { background: rgba(248, 113, 113, 0.14); color: var(--danger); } 44%, 95% { background: rgba(52, 211, 153, 0.14); color: var(--ok); } 100% { background: rgba(248, 113, 113, 0.14); color: var(--danger); } }
.s-off { animation: sOff 10s infinite; }
.s-on { animation: sOn 10s infinite; }
@keyframes sOff { 0%, 38% { opacity: 1; } 44%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes sOn { 0%, 38% { opacity: 0; } 44%, 95% { opacity: 1; } 100% { opacity: 0; } }
.mock-shield { position: relative; width: 168px; height: 168px; margin: 18px auto 6px; display: grid; place-items: center; }
.halo { position: absolute; inset: -28px; border-radius: 50%; background: radial-gradient(circle, rgba(56, 189, 248, 0.32), transparent 65%); animation: haloOn 10s infinite; }
@keyframes haloOn { 0%, 38% { opacity: 0; transform: scale(0.6); } 46%, 95% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.6); } }
.ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(56, 189, 248, 0.5); opacity: 0; }
.mock .ring { animation: radar 3.3s cubic-bezier(0.2, 0.6, 0.3, 1) infinite, ringGate 10s infinite; }
.mock .ring.r2 { animation-delay: 1.1s, 0s; } .mock .ring.r3 { animation-delay: 2.2s, 0s; }
@keyframes radar { 0% { transform: scale(0.55); opacity: 0.9; } 100% { transform: scale(1.45); opacity: 0; } }
@keyframes ringGate { 0%, 40% { visibility: hidden; } 44%, 95% { visibility: visible; } 100% { visibility: hidden; } }
.orbit { position: absolute; inset: 6px; border-radius: 50%; border: 1px dashed rgba(148, 163, 184, 0.25); animation: spin 14s linear infinite; }
.orbit i { position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
@keyframes spin { to { transform: rotate(360deg); } }
.shield-core { position: relative; width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-strong); background: radial-gradient(circle at 50% 30%, rgba(56, 189, 248, 0.18), rgba(15, 23, 42, 0.9) 70%); animation: coreOn 10s infinite; }
.shield-core .ico { grid-area: 1 / 1; width: 54px; height: 54px; stroke-width: 1.4; }
.shield-core .s-off { color: var(--faint); }
.shield-core .s-on { color: var(--accent); filter: drop-shadow(0 0 14px rgba(56, 189, 248, 0.8)); }
@keyframes coreOn { 0%, 38% { border-color: var(--line-strong); box-shadow: none; } 44%, 95% { border-color: rgba(56, 189, 248, 0.55); box-shadow: 0 0 40px -6px rgba(56, 189, 248, 0.6); } }
.mock-status { display: grid; text-align: center; padding: 8px 18px 4px; }
.mock-status > * { grid-area: 1 / 1; }
.mock-status small { grid-area: 2 / 1; color: var(--faint); font-size: 0.8rem; }
.mock-status b { font-size: 1.5rem; letter-spacing: -0.02em; }
.mock-status b.s-on { color: var(--accent); }
.mock-btn { position: relative; display: grid; margin: 14px 22px 0; padding: 12px; border-radius: 14px; text-align: center; font-weight: 650; font-size: 0.92rem; overflow: hidden; animation: btnBg 10s infinite; }
.mock-btn span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
@keyframes btnBg { 0%, 38% { background: linear-gradient(135deg, #3cc4fa, #3b82f6); color: #04101d; } 44%, 95% { background: rgba(248, 113, 113, 0.12); color: var(--danger); box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.4); } 100% { background: linear-gradient(135deg, #3cc4fa, #3b82f6); color: #04101d; } }
.tap { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; background: rgba(255, 255, 255, 0.7); opacity: 0; animation: tap 10s infinite; }
@keyframes tap { 0%, 36% { transform: scale(0); opacity: 0; } 38% { transform: scale(0.4); opacity: 0.7; } 46% { transform: scale(6); opacity: 0; } 100% { opacity: 0; } }
.mock-toast { display: flex; align-items: center; gap: 8px; margin: 12px 22px 0; padding: 10px 12px; border-radius: 12px; font-size: 0.85rem; font-weight: 600; color: var(--ok); background: rgba(52, 211, 153, 0.1); border: 1px solid rgba(52, 211, 153, 0.3); animation: toast 10s infinite; }
@keyframes toast { 0%, 56% { opacity: 0; transform: translateY(12px) scale(0.96); } 62%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(12px) scale(0.96); } }
.mock-nav { display: flex; justify-content: space-around; margin: 14px 12px 0; padding-top: 12px; border-top: 1px solid var(--line); }
.mock-nav i { width: 20px; height: 20px; border-radius: 6px; background: rgba(148, 163, 184, 0.16); }
.mock-nav i.on { background: var(--accent); box-shadow: 0 0 12px rgba(56, 189, 248, 0.6); }
.chip { position: absolute; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; font-size: 0.82rem; font-weight: 650; white-space: nowrap;
  background: rgba(13, 19, 33, 0.92); border: 1px solid var(--line-strong); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.8); color: var(--text); }
.chip .ico { color: var(--ok); }
.chip-1 { top: 12%; left: -22%; animation: chip 6s ease-in-out infinite; --z: 90px; }
.chip-2 { top: 40%; right: -24%; animation: chip 7s ease-in-out infinite -2s; --z: 120px; }
.chip-2 .ico { color: var(--accent); }
.chip-3 { bottom: 20%; left: -26%; animation: chip 8s ease-in-out infinite -4s; --z: 70px; }
.chip-3 .ico { color: var(--indigo); }
.chip-4 { bottom: 4%; right: -14%; animation: chip 6.5s ease-in-out infinite -1s; --z: 100px; }
@keyframes chip { 0%, 100% { transform: translate3d(0, 0, var(--z)); } 50% { transform: translate3d(0, -12px, var(--z)); } }

/* ── marquee ───────────────────────────────────────────────────────────── */

.marquee { position: relative; overflow: hidden; padding: 22px 0; border-block: 1px solid var(--line); background: rgba(10, 14, 24, 0.55);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-row { display: flex; gap: 14px; padding-right: 14px; }
.mq-item { --tint: 56, 189, 248; display: inline-flex; align-items: center; gap: 11px; padding: 8px 20px 8px 8px; border-radius: 999px; white-space: nowrap;
  border: 1px solid rgba(var(--tint), 0.22); background: linear-gradient(135deg, rgba(var(--tint), 0.10), rgba(255, 255, 255, 0.02) 60%);
  color: var(--text); font: 650 0.95rem var(--font); letter-spacing: -0.01em; transition: border-color 0.25s, transform 0.25s var(--spring), box-shadow 0.25s; }
.mq-item:hover { border-color: rgba(var(--tint), 0.55); transform: translateY(-2px); box-shadow: 0 10px 28px -14px rgba(var(--tint), 0.7); }
.mq-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: none;
  color: rgb(var(--tint)); background: rgba(var(--tint), 0.14); box-shadow: inset 0 0 0 1px rgba(var(--tint), 0.28), 0 0 18px -4px rgba(var(--tint), 0.6); }
.mq-ico .ico { width: 16px; height: 16px; }
.mq-item.t2 { --tint: 167, 139, 250; }
.mq-item.t3 { --tint: 52, 211, 153; }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }

/* ── stats ─────────────────────────────────────────────────────────────── */

.stats { padding: 0 0 20px; }
#nasil { padding-bottom: 56px; }   /* the stats band follows straight on */
.stats-in { display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px; overflow: hidden;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.06), rgba(129, 140, 248, 0.04) 50%, rgba(10, 14, 24, 0.6)); }
.stat { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 26px 14px 24px; text-align: center; border-radius: calc(var(--radius) - 6px); transition: background-color 0.3s; }
.stat + .stat::before { content: ''; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: linear-gradient(transparent, var(--line), transparent); }
.stat:hover { background: rgba(56, 189, 248, 0.05); }
.stat-ico { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 8px; border-radius: 13px; color: var(--accent);
  background: rgba(56, 189, 248, 0.1); box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.25), 0 0 22px -6px rgba(56, 189, 248, 0.7); }
.stat-ico .ico { width: 19px; height: 19px; }
.stat b { display: block; font-size: clamp(2.2rem, 4.4vw, 3.1rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff, #9fb3d1); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-label { color: var(--text); font-weight: 650; font-size: 0.98rem; }
.stat small { color: var(--faint); font-size: 0.82rem; line-height: 1.4; }

/* ── sections + cards ──────────────────────────────────────────────────── */

.section { padding: 110px 0; position: relative; }
.section.tight { padding: 40px 0; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 60px; }
.section-head h2 { margin: 16px 0 16px; }
.section-head p { color: var(--dim); font-size: 1.08rem; }

.card { position: relative; border-radius: var(--radius); padding: 28px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 30px 60px -40px rgba(0, 0, 0, 0.7); transition: border-color 0.35s, transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.spot::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(56, 189, 248, 0.14), transparent 45%); }
.spot::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.4s; padding: 1px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(125, 211, 252, 0.7), transparent 50%);
  -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); }
.spot:hover::before, .spot:hover::after { opacity: 1; }
.card:hover { border-color: var(--line-strong); }

/* 6 sütun: üstte 2 geniş kart, ortada 3, altta 2: hiçbir satırda yalnız kalan kart olmaz */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.bento .card { grid-column: span 2; }
.bento .card.big, .bento .card.wide { grid-column: span 3; }
.bento .card:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 40px 80px -40px rgba(56, 189, 248, 0.35); }
.card h3 { margin: 18px 0 8px; }
.card p { color: var(--dim); font-size: 0.97rem; }
.card-ico { position: relative; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: var(--accent);
  background: linear-gradient(145deg, rgba(56, 189, 248, 0.18), rgba(129, 140, 248, 0.1)); border: 1px solid rgba(56, 189, 248, 0.28); transition: transform 0.5s var(--spring); }
.card-ico .ico { width: 24px; height: 24px; }
.card:hover .card-ico { transform: rotate(-8deg) scale(1.1); }

.route-demo { display: grid; gap: 10px; margin-top: 22px; }
.route { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 12px; font-size: 0.86rem; }
.host { font-family: var(--mono); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.path { position: relative; height: 2px; border-radius: 2px; background: var(--line-strong); overflow: hidden; }
.path i { position: absolute; top: -2px; left: -30%; width: 30%; height: 6px; border-radius: 6px; animation: flow 2.2s linear infinite; }
.path.via i { background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.path.direct i { background: linear-gradient(90deg, transparent, var(--ok), transparent); animation-duration: 1.6s; }
.route:nth-child(2) .path i { animation-delay: -0.8s; } .route:nth-child(3) .path i { animation-delay: -0.4s; } .route:nth-child(4) .path i { animation-delay: -1.2s; }
@keyframes flow { to { left: 100%; } }
.tag { padding: 3px 10px; border-radius: 999px; font-size: 0.76rem; font-weight: 700; }
.tag-blue { color: var(--accent); background: rgba(56, 189, 248, 0.12); }
.tag-green { color: var(--ok); background: rgba(52, 211, 153, 0.12); }

.dns-demo { position: relative; display: grid; gap: 10px; margin-top: 22px; overflow: hidden; border-radius: 14px; padding: 14px; background: rgba(2, 6, 14, 0.6); border: 1px solid var(--line); }
.dns-line { display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 10px; font-size: 0.84rem; }
.dns-line span { color: var(--faint); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; }
.dns-line code { background: none; border: 0; padding: 0; }
.dns-line b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; }
.dns-line.bad code { color: #fca5a5; text-decoration: line-through; text-decoration-color: rgba(248, 113, 113, 0.6); }
.dns-line.bad b { color: var(--danger); background: rgba(248, 113, 113, 0.14); animation: shake 3s infinite; }
.dns-line.good code { color: #a7f3d0; }
.dns-line.good b { color: var(--ok); background: rgba(52, 211, 153, 0.14); animation: pop 3s infinite; }
.dns-scan { position: absolute; left: 0; right: 0; top: 0; height: 40%; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(56, 189, 248, 0.12), transparent); animation: scan 3s ease-in-out infinite; }
@keyframes scan { 0% { transform: translateY(-100%); } 100% { transform: translateY(260%); } }
@keyframes shake { 0%, 70%, 100% { transform: none; } 74% { transform: translateX(-3px) rotate(-8deg); } 78% { transform: translateX(3px) rotate(8deg); } 82% { transform: translateX(-2px); } 86% { transform: none; } }
@keyframes pop { 0%, 40%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } 60% { transform: scale(1); } }
@keyframes pulse { 0%, 100% { opacity: 0.4; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.1); } }

/* ── diagram (SVG, SMIL packets paused off screen by site.js) ──────────── */

.diagram { border-radius: var(--radius); padding: 24px; background: linear-gradient(160deg, rgba(14, 20, 34, 0.85), rgba(7, 10, 18, 0.9)); border: 1px solid var(--line); overflow: hidden; }
.diagram svg { width: 100%; height: auto; display: block; overflow: visible; }
.lane-label { font: 700 13px var(--font); letter-spacing: 0.14em; text-transform: uppercase; text-anchor: middle; }
.lane-label.bad { fill: #fca5a5; } .lane-label.good { fill: var(--accent-hi); }
.wire { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.wire-bad { stroke: rgba(248, 113, 113, 0.45); }
.wire-bad.dash { stroke-dasharray: 6 8; animation: dashmove 1.2s linear infinite; }
.wire-good { stroke: rgba(56, 189, 248, 0.35); }
.wire-flow { fill: none; stroke: url(#gBlue); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 18 26; animation: dashmove 1.4s linear infinite; filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.8)); }
@keyframes dashmove { to { stroke-dashoffset: -44; } }
.node-ring { fill: none; stroke: rgba(56, 189, 248, 0.4); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: nodePulse 2.6s ease-in-out infinite; }
@keyframes nodePulse { 50% { transform: scale(1.12); opacity: 0.4; } }
.node-bg { fill: #0f172a; stroke: rgba(148, 163, 184, 0.35); stroke-width: 1.5; }
.node-t { fill: #eaf0f8; font: 700 16px var(--font); text-anchor: middle; }
.node-s { fill: #94a3b8; font: 500 12px var(--font); text-anchor: middle; }
.box-bg { fill: #0f172a; stroke: rgba(148, 163, 184, 0.35); stroke-width: 1.5; }
.box-bg.bad { stroke: rgba(248, 113, 113, 0.6); fill: rgba(60, 14, 20, 0.85); }
.box-bg.good { stroke: rgba(56, 189, 248, 0.6); fill: rgba(8, 34, 56, 0.9); }
.box-bg.ok { stroke: rgba(52, 211, 153, 0.6); fill: rgba(6, 44, 34, 0.9); }
.xmark circle { fill: #ef4444; } .xmark path { stroke: #fff; stroke-width: 2.5; stroke-linecap: round; fill: none; }
.blocked { animation: none; }
.blocked .xmark { transform-box: fill-box; transform-origin: center; animation: xshake 1.1s ease-in-out infinite; }
@keyframes xshake { 0%, 60%, 100% { transform: translate(70px, -30px) rotate(0); } 70% { transform: translate(70px, -30px) rotate(-18deg); } 80% { transform: translate(70px, -30px) rotate(18deg); } 90% { transform: translate(70px, -30px) rotate(-8deg); } }
.okmark circle { fill: #10b981; } .okmark path { stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.reached .okmark { transform-box: fill-box; transform-origin: center; animation: okpop 1.1s ease-in-out infinite; }
@keyframes okpop { 0%, 100% { transform: translate(70px, -30px) scale(1); } 50% { transform: translate(70px, -30px) scale(1.18); } }
.lockmark circle { fill: #0284c7; } .lockmark path { stroke: #fff; stroke-width: 1.8; fill: none; stroke-linejoin: round; }
.pkt-bad { fill: #f87171; } .pkt-good { fill: #7dd3fc; }

/* ── steps ─────────────────────────────────────────────────────────────── */

/* steps: a track of numbered nodes that fills as you scroll, a card under each */
.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 64px; }
.steps-line { position: absolute; top: 17px; left: 16.66%; right: 16.66%; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.steps-line i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--accent), var(--indigo), var(--violet)); box-shadow: 0 0 14px var(--accent); }
.step { position: relative; display: grid; justify-items: center; gap: 22px; }
.step-n { position: relative; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font: 800 0.9rem var(--font); color: #04101d;
  background: linear-gradient(135deg, var(--accent), var(--indigo)); box-shadow: 0 0 0 6px var(--bg, #05070d), 0 0 24px rgba(56, 189, 248, 0.65); }
.step-card { position: relative; width: 100%; height: 100%; padding: 26px 24px 24px; overflow: hidden; transition: transform 0.4s var(--spring), border-color 0.3s; }
.step:hover .step-card { transform: translateY(-4px); border-color: rgba(56, 189, 248, 0.35); }
.step-big { position: absolute; right: 16px; top: 4px; font: 800 4.6rem/1 var(--font); letter-spacing: -0.05em; color: transparent;
  -webkit-text-stroke: 1px rgba(148, 163, 184, 0.14); pointer-events: none; transition: -webkit-text-stroke-color 0.3s; }
.step:hover .step-big { -webkit-text-stroke-color: rgba(56, 189, 248, 0.35); }
.step-ico { position: relative; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 16px; display: grid; place-items: center; color: var(--accent);
  background: linear-gradient(145deg, #0f1b2e, #0a1120); border: 1px solid rgba(56, 189, 248, 0.3); box-shadow: 0 14px 30px -16px rgba(56, 189, 248, 0.6); transition: transform 0.5s var(--spring); }
.step-ico .ico { width: 24px; height: 24px; }
.step:hover .step-ico { transform: translateY(-3px) rotate(-6deg); }
.step-card h3 { font-size: 1.15rem; }
.step-card p { color: var(--dim); margin-top: 8px; line-height: 1.55; font-size: 0.95rem; }

/* ── FAQ ───────────────────────────────────────────────────────────────── */

.faq { display: grid; gap: 12px; }
.faq-item { border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); transition: border-color 0.3s, background-color 0.3s; }
.faq-item.open { border-color: rgba(56, 189, 248, 0.35); background: rgba(14, 24, 40, 0.85); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; background: none; border: 0; color: var(--text); font: 650 1.02rem var(--font); text-align: left; cursor: pointer; }
.faq-q .ico { color: var(--faint); transition: transform 0.45s var(--spring), color 0.3s; }
.faq-item.open .faq-q .ico { transform: rotate(180deg); color: var(--accent); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease); }
.faq-a > div { overflow: hidden; }
.faq-a p { padding: 0 22px 20px; color: var(--dim); opacity: 0; transform: translateY(-6px); transition: opacity 0.4s, transform 0.5s var(--ease); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-item.open .faq-a p { opacity: 1; transform: none; transition-delay: 0.1s; }
.section-head p a { color: var(--accent-hi); text-decoration: underline; text-underline-offset: 3px; }

/* "anon4me nedir" page */
.about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.about-grid h3 { margin: 14px 0 10px; font-size: 1.2rem; }
.about-grid p { color: var(--dim); line-height: 1.6; }
.about-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; color: var(--dim); }
.about-list li { position: relative; padding-left: 22px; line-height: 1.5; }
.about-list li::before { content: ''; position: absolute; left: 2px; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px rgba(52, 211, 153, 0.7); }
.about-list.no li::before { background: #f87171; box-shadow: 0 0 10px rgba(248, 113, 113, 0.6); }
.block-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.block-card { --c: 52, 211, 153; display: flex; flex-direction: column; gap: 10px; padding: 22px; border-top: 2px solid rgba(var(--c), 0.6); }
.block-card.is-no { --c: 248, 113, 113; }
.block-card h3 { font-size: 1.08rem; }
.block-card p { color: var(--dim); font-size: 0.92rem; line-height: 1.55; flex: 1; }
.block-verdict { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: 0.86rem;
  color: rgb(var(--c)); background: rgba(var(--c), 0.12); border: 1px solid rgba(var(--c), 0.3); }
.block-card small { color: var(--faint); font-size: 0.8rem; }
.compare { padding: 6px 0; overflow: hidden; }
.compare-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 12px; align-items: center; padding: 14px 22px; border-top: 1px solid var(--line); color: var(--dim); }
.compare-row:first-child { border-top: 0; }
.compare-row > span:first-child { color: var(--text); font-weight: 650; }
.compare-head { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.compare-head img { vertical-align: -5px; margin-right: 8px; }
.compare-head span:nth-child(2) { color: var(--accent-hi); }
.compare-row .c-ugi { color: var(--accent-hi); font-weight: 650; }
.compare-row:not(.compare-head):hover { background: rgba(56, 189, 248, 0.04); }
.plat-card { display: flex; flex-direction: column; color: inherit; text-decoration: none; transition: transform 0.3s var(--spring), border-color 0.3s; }
.plat-card:hover { transform: translateY(-4px); border-color: rgba(56, 189, 248, 0.4); }
.plat-card p { flex: 1; }
.plat-kind { margin-left: 6px; padding: 2px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; vertical-align: 3px; color: var(--accent-hi); background: rgba(56, 189, 248, 0.12); }
.plat-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-weight: 650; font-size: 0.92rem; color: var(--accent-hi); }
.privacy { padding: 34px; }
.privacy-head { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
.privacy-head .card-ico { flex: none; }
.privacy-head .h2-sm { margin-top: 6px; }
.privacy-cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; }
.privacy-col { --c: 52, 211, 153; padding: 22px; border-radius: var(--radius-sm); border: 1px solid rgba(var(--c), 0.22);
  background: linear-gradient(160deg, rgba(var(--c), 0.07), rgba(10, 14, 24, 0.4) 55%); }
.privacy-col.never { --c: 248, 113, 113; }
.privacy-col h3 { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; font-size: 1rem; }
.privacy-col h3 .ico { width: 22px; height: 22px; padding: 4px; border-radius: 50%; color: rgb(var(--c)); background: rgba(var(--c), 0.14); }
.privacy-col ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.privacy-col li b { display: block; margin-bottom: 3px; color: var(--text); }
.privacy-col li span { color: var(--dim); font-size: 0.92rem; line-height: 1.55; }
.privacy-chips { display: flex !important; flex-wrap: wrap; gap: 8px !important; }
.privacy-chips li { padding: 7px 13px; border-radius: 999px; font-size: 0.88rem; font-weight: 600; color: #fecaca;
  background: rgba(248, 113, 113, 0.08); border: 1px solid rgba(248, 113, 113, 0.22); text-decoration: line-through; text-decoration-color: rgba(248, 113, 113, 0.55); }
.privacy-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.privacy-foot p { display: flex; align-items: center; gap: 9px; color: var(--dim); font-size: 0.93rem; }
.privacy-foot p .ico { color: var(--accent); flex: none; }
.faq-more.static { opacity: 1; margin: 0; }
@media (max-width: 960px) {
  .about-grid { grid-template-columns: 1fr; }
  .block-grid { grid-template-columns: 1fr 1fr; }
  .privacy-cols { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .block-grid { grid-template-columns: 1fr; }
  .compare-row { grid-template-columns: 1fr 1fr; padding: 12px 16px; }
  .compare-row > span:first-child { grid-column: 1 / -1; }
  .compare-head > span:first-child { display: none; }
  .privacy { padding: 22px; }
  .privacy-head { align-items: flex-start; }
}

/* FAQ topics: chips filter the groups; "Tümü" shows every group with its title */
.faq-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 30px; }
.faq-tabs button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 12px; border: 1px solid var(--line); background: rgba(10, 14, 24, 0.6);
  color: var(--dim); font: 650 0.9rem var(--font); cursor: pointer; transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.25s var(--spring); }
.faq-tabs button:hover { color: var(--text); transform: translateY(-1px); }
.faq-tabs button.on { color: var(--text); border-color: rgba(56, 189, 248, 0.45); background: rgba(56, 189, 248, 0.14); }
.faq-tabs button .ico { color: var(--accent); }
.faq-tabs em { font-style: normal; font-size: 0.75rem; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: rgba(148, 163, 184, 0.16); color: var(--faint); text-align: center; }
.faq-tabs button.on em { background: rgba(56, 189, 248, 0.22); color: var(--accent-hi); }
.faq { gap: 26px; }
.faq-group { display: grid; gap: 12px; }
.faq-group.hide { display: none; }
.faq-cat { display: flex; align-items: center; gap: 9px; margin: 0 0 2px 4px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.faq-cat .ico { color: var(--accent); }
.faq.one .faq-cat { display: none; }
.faq-more { display: inline-flex; align-items: center; gap: 6px; margin: -8px 22px 20px; font-weight: 650; font-size: 0.92rem; color: var(--accent-hi);
  opacity: 0; transition: opacity 0.4s 0.15s; }
.faq-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.faq-item.open .faq-more { opacity: 1; }

/* ── CTA ───────────────────────────────────────────────────────────────── */

.cta-card { text-align: center; padding: 80px 28px; overflow: hidden; background: linear-gradient(160deg, rgba(14, 26, 48, 0.92), rgba(8, 11, 22, 0.95)); border-color: rgba(56, 189, 248, 0.25); }
.cta-card h2 { margin: 26px 0 14px; }
.cta-card p { color: var(--dim); font-size: 1.08rem; }
.cta-glow { position: absolute; left: 50%; top: -60%; width: 900px; height: 900px; margin-left: -450px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent, rgba(56, 189, 248, 0.22), transparent 30%, rgba(129, 140, 248, 0.2), transparent 60%, rgba(192, 132, 252, 0.16), transparent 85%); animation: spin 18s linear infinite; }
.cta-logo { position: relative; margin: 0 auto; filter: drop-shadow(0 0 30px rgba(56, 189, 248, 0.6)); animation: float 6s ease-in-out infinite; }
.cta-card > *:not(.cta-glow) { position: relative; }

/* ── page hero (download / releases / 404) ─────────────────────────────── */

.page-hero { padding: 160px 0 40px; }
.page-title { font-size: clamp(2.5rem, 6vw, 4.4rem); letter-spacing: -0.045em; margin: 18px 0 16px; font-weight: 800; }
.page-sub { color: var(--dim); font-size: 1.1rem; }

.dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; max-width: 900px; margin: 0 auto; }
.dl-card { padding: 32px; }
.dl-card.rec { border-color: rgba(56, 189, 248, 0.35); background: linear-gradient(160deg, rgba(14, 30, 52, 0.9), rgba(10, 14, 26, 0.92)); }
.dl-card:hover { transform: translateY(-4px); }
.badge { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; font-size: 0.74rem; font-weight: 750; letter-spacing: 0.04em; color: #04101d; background: linear-gradient(135deg, var(--accent-hi), var(--accent)); }
.badge.sm { padding: 2px 8px; font-size: 0.7rem; }
.dl-card .badge { position: absolute; top: 22px; right: 22px; }
.dl-ico { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; color: var(--accent); background: rgba(56, 189, 248, 0.12); border: 1px solid rgba(56, 189, 248, 0.3); }
.dl-ico .ico { width: 30px; height: 30px; }
.dl-card h3 { margin: 20px 0 8px; font-size: 1.3rem; }
.dl-desc { color: var(--dim); min-height: 3.2em; margin-bottom: 24px; }
.hash { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; padding: 10px 12px; border-radius: 12px; background: rgba(2, 6, 14, 0.55); border: 1px solid var(--line); font-size: 0.8rem; }
.hash-label { color: var(--faint); font-weight: 700; letter-spacing: 0.06em; }
.hash code { background: none; border: 0; padding: 0; color: var(--dim); flex: 1; min-width: 0; }
.copy { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.04); color: var(--dim); font: 600 0.78rem var(--font); cursor: pointer; transition: color 0.2s, border-color 0.2s, background-color 0.2s, transform 0.3s var(--spring); }
.copy:hover { color: var(--text); border-color: rgba(56, 189, 248, 0.5); }
.copy.done { color: var(--ok); border-color: rgba(52, 211, 153, 0.5); background: rgba(52, 211, 153, 0.1); transform: scale(1.05); }
.copy.mini { padding: 4px 8px; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.h2-sm { font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 14px 0 22px; }
.install { list-style: none; counter-reset: s; padding: 0; margin: 0 0 22px; display: grid; gap: 16px; }
.install li { counter-increment: s; position: relative; padding-left: 52px; color: var(--dim); }
.install li::before { content: counter(s); position: absolute; left: 0; top: -2px; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-weight: 800; color: var(--accent); background: rgba(56, 189, 248, 0.12); border: 1px solid rgba(56, 189, 248, 0.3); }
.install b { color: var(--text); }
.install em { font-style: normal; color: var(--accent-hi); font-weight: 600; }

/* SmartScreen walkthrough */
.smartscreen { display: grid; place-items: center; }
.ss-window { position: relative; width: 100%; max-width: 420px; padding: 26px; border-radius: 6px; background: #1f3a68; color: #fff; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8); font-family: 'Segoe UI', system-ui, sans-serif; overflow: hidden; }
.ss-title { font-size: 1.45rem; font-weight: 300; margin-bottom: 14px; }
.ss-text { font-size: 0.9rem; opacity: 0.9; }
.ss-more { margin-top: 10px; font-size: 0.9rem; }
.ss-link { text-decoration: underline; animation: ssLink 8s infinite; }
.ss-app { margin-top: 12px; font-size: 0.86rem; opacity: 0; animation: ssApp 8s infinite; }
.ss-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
.ss-buttons span { padding: 7px 16px; border: 2px solid #fff; font-size: 0.86rem; }
.ss-run { opacity: 0; animation: ssRun 8s infinite; }
.ss-no { background: #fff; color: #1f3a68; }
.ss-cursor { position: absolute; width: 18px; height: 18px; border-radius: 50% 50% 50% 0; background: #fff; transform: rotate(-30deg); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); left: 70%; top: 85%; animation: ssCursor 8s infinite; }
@keyframes ssLink { 0%, 22% { color: #fff; } 26%, 100% { color: #93c5fd; } }
@keyframes ssApp { 0%, 28% { opacity: 0; } 34%, 100% { opacity: 1; } }
@keyframes ssRun { 0%, 30% { opacity: 0; transform: scale(0.9); } 36%, 64% { opacity: 1; transform: none; } 66% { background: rgba(255, 255, 255, 0.35); } 72%, 100% { opacity: 1; background: none; } }
@keyframes ssCursor { 0% { left: 70%; top: 85%; } 18% { left: 12%; top: 49%; } 24% { left: 12%; top: 49%; transform: rotate(-30deg) scale(0.8); } 28% { transform: rotate(-30deg) scale(1); } 50% { left: 56%; top: 84%; } 62% { left: 56%; top: 84%; transform: rotate(-30deg) scale(1); } 66% { transform: rotate(-30deg) scale(0.8); } 70%, 100% { left: 56%; top: 84%; transform: rotate(-30deg) scale(1); } }

/* empty states */
.empty { max-width: 560px; margin: 0 auto; text-align: center; padding: 50px 28px; }
.empty h3 { margin: 22px 0 10px; }
.empty p { color: var(--dim); }
.loader { display: inline-flex; gap: 8px; }
.loader i { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); animation: bounce 1.2s var(--ease) infinite; }
.loader i:nth-child(2) { animation-delay: 0.15s; background: var(--indigo); } .loader i:nth-child(3) { animation-delay: 0.3s; background: var(--violet); }
@keyframes bounce { 0%, 100% { transform: translateY(0); opacity: 0.5; } 40% { transform: translateY(-14px); opacity: 1; } }

/* ── releases timeline ─────────────────────────────────────────────────── */

.timeline { position: relative; list-style: none; padding: 0 0 0 46px; margin: 0; }
.timeline-line { position: absolute; left: 13px; top: 10px; bottom: 10px; width: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.timeline-line i { position: absolute; inset: 0; transform-origin: 50% 0; transform: scaleY(var(--p, 0)); background: linear-gradient(180deg, var(--accent), var(--indigo), var(--violet)); box-shadow: 0 0 12px var(--accent); }
.tl-item { position: relative; margin-bottom: 26px; }
.tl-dot { position: absolute; left: -41px; top: 32px; width: 18px; height: 18px; border-radius: 50%; background: #0f172a; border: 2px solid var(--line-strong); }
.tl-item.latest .tl-dot { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.5); animation: pingBlue 2s infinite; }
@keyframes pingBlue { 0% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.55); } 80%, 100% { box-shadow: 0 0 0 14px rgba(56, 189, 248, 0); } }
.tl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.tl-head h2 { font-size: 1.5rem; }
.tl-head time { margin-left: auto; color: var(--faint); font-size: 0.9rem; }
.notes { color: var(--dim); }
.notes p, .notes ul { margin: 0 0 10px; }
.notes ul { padding-left: 20px; }
.notes li { margin: 4px 0; }
.notes li::marker { color: var(--accent); }
.notes h4 { color: var(--text); margin: 14px 0 6px; font-size: 1rem; }
.notes strong { color: var(--text); }
.tl-files { list-style: none; padding: 16px 0 0; margin: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.tl-files li { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 0.92rem; }
.tl-files a { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-hi); font-weight: 600; }
.tl-files a:hover { text-decoration: underline; }

/* ── 404 ───────────────────────────────────────────────────────────────── */

.nf-code { display: flex; justify-content: center; align-items: center; gap: 10px; font-size: clamp(6rem, 18vw, 11rem); font-weight: 800; line-height: 1; letter-spacing: -0.06em; }
.nf-code > span:not(.nf-shield) { background: linear-gradient(180deg, #fff, #5b6b86); -webkit-background-clip: text; background-clip: text; color: transparent; animation: glitch 4s infinite; }
.nf-shield img { width: 0.9em; height: 0.9em; animation: float 5s ease-in-out infinite; filter: drop-shadow(0 0 30px rgba(56, 189, 248, 0.6)); }
@keyframes glitch { 0%, 92%, 100% { transform: none; } 93% { transform: translate(-4px, 2px) skewX(8deg); } 95% { transform: translate(4px, -2px) skewX(-8deg); } 97% { transform: translate(-2px, 0); } }

/* ── footer ────────────────────────────────────────────────────────────── */

.footer { margin-top: 60px; border-top: 1px solid var(--line); background: rgba(5, 7, 13, 0.7); }
.footer-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; padding-top: 44px; padding-bottom: 30px; }
.footer-brand p { color: var(--faint); margin-top: 10px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: center; }
.footer-links a { color: var(--dim); font-weight: 550; transition: color 0.2s; }
.footer-links a:hover { color: var(--text); }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 18px; padding-bottom: 30px; border-top: 1px solid var(--line); color: var(--faint); font-size: 0.86rem; }
.footer-base a { color: var(--dim); text-decoration: underline; text-decoration-color: var(--line-strong); }

/* ── admin ─────────────────────────────────────────────────────────────── */

.admin-main { padding: 110px 0 60px; }
.auth-main { min-height: 100vh; display: grid; place-items: center; padding: 40px 16px; }
.auth-main > .wrap { position: fixed; top: 20px; left: 0; right: 0; max-width: 460px; z-index: 5; }
.auth-card { width: 100%; max-width: 440px; padding: 40px 34px; text-align: center; background: linear-gradient(160deg, rgba(16, 24, 42, 0.92), rgba(8, 11, 22, 0.94)); }
.auth-card h1 { font-size: 1.7rem; margin: 22px 0 8px; }
.auth-card .muted { margin-bottom: 24px; }
.auth-logo { margin: 0 auto; filter: drop-shadow(0 0 24px rgba(56, 189, 248, 0.55)); animation: float 6s ease-in-out infinite; }
.auth-emblem { position: relative; width: 120px; height: 120px; margin: 0 auto; display: grid; place-items: center; }
.auth-emblem img { position: relative; filter: drop-shadow(0 0 24px rgba(56, 189, 248, 0.55)); }
.auth-emblem .ring { animation: radar 3s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; }
.auth-emblem .ring.r2 { animation-delay: 1.5s; }
.back-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; color: var(--faint); font-size: 0.88rem; transition: color 0.2s, gap 0.3s var(--spring); }
.back-link:hover { color: var(--text); gap: 10px; }
.admin-head .back-link { margin: 0 0 10px; }

.form { display: grid; gap: 16px; text-align: left; }
.form h2 { font-size: 1.15rem; }
.field { display: grid; gap: 7px; }
.field > span { font-size: 0.84rem; font-weight: 650; color: var(--dim); }
.field em { font-style: normal; font-weight: 500; color: var(--faint); }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: rgba(2, 6, 14, 0.6); color: var(--text);
  font: 500 0.95rem var(--font); transition: border-color 0.2s, box-shadow 0.25s, background-color 0.2s; }
.field textarea { font-family: var(--mono); font-size: 0.88rem; line-height: 1.6; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.15); background: rgba(2, 6, 14, 0.85); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.flash { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; margin-bottom: 20px; font-weight: 550; font-size: 0.92rem; animation: flashIn 0.6s var(--spring); text-align: left; }
.flash-ok { color: #a7f3d0; background: rgba(52, 211, 153, 0.1); border: 1px solid rgba(52, 211, 153, 0.35); }
.flash-err { color: #fecaca; background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.4); }
.flash.gone { opacity: 0; transform: translateY(-8px); transition: opacity 0.5s, transform 0.5s; }
.shake { animation: flashIn 0.6s var(--spring), shakeX 0.5s 0.1s; }
@keyframes flashIn { from { opacity: 0; transform: translateY(-10px) scale(0.97); } }
@keyframes shakeX { 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }

.admin-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.admin-head h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-top: 8px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; }
.kpi { display: grid; gap: 4px; padding: 22px; }
.kpi span { color: var(--faint); font-size: 0.86rem; font-weight: 600; }
.kpi b { font-size: 2.1rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.kpi-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--accent); background: rgba(56, 189, 248, 0.12); margin-bottom: 10px; }
.live-ico { color: var(--ok); background: rgba(52, 211, 153, 0.12); position: relative; }
.live-ico::after { content: ''; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); animation: ping 1.6s infinite; }
.table-card { padding: 0; overflow: hidden; }
.table-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.table-head h2 { font-size: 1.2rem; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.table th { text-align: left; color: var(--faint); font-weight: 650; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 12px 24px; }
.table td { padding: 14px 24px; border-top: 1px solid var(--line); white-space: nowrap; }
.table tbody tr { transition: background-color 0.2s; }
.table tbody tr:hover { background: rgba(56, 189, 248, 0.05); }
.empty-inline { padding: 30px 24px; display: grid; gap: 16px; justify-items: start; color: var(--dim); }
.status { display: inline-flex; align-items: center; gap: 7px; font-size: 0.84rem; font-weight: 650; padding: 4px 11px; border-radius: 999px; }
.status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status.on { color: var(--ok); background: rgba(52, 211, 153, 0.12); }
.status.on i { animation: ping 1.8s infinite; }
.status.off { color: var(--warn); background: rgba(251, 191, 36, 0.12); }
.status.big { font-size: 0.95rem; padding: 7px 14px; }

.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.stack { display: grid; gap: 20px; }
.stack .card h2 { font-size: 1.15rem; margin-bottom: 14px; }
.switch-row { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(2, 6, 14, 0.4); cursor: pointer; }
.switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch-row small { display: block; color: var(--faint); font-size: 0.82rem; }
.switch { position: relative; width: 48px; height: 28px; border-radius: 999px; background: rgba(148, 163, 184, 0.25); flex: none; transition: background-color 0.3s; }
.switch i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform 0.4s var(--spring); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }
.switch-row input:checked + .switch { background: linear-gradient(135deg, var(--accent), #3b82f6); }
.switch-row input:checked + .switch i { transform: translateX(20px); }
.switch-row input:focus-visible + .switch { outline: 2px solid var(--accent); outline-offset: 3px; }
.assets { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.assets li { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(2, 6, 14, 0.4); animation: flashIn 0.5s var(--ease); }
.asset-ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: var(--accent); background: rgba(56, 189, 248, 0.1); flex: none; }
.asset-info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.asset-info small { color: var(--faint); overflow-wrap: anywhere; }
.asset-info .sha { font-size: 0.72rem; color: var(--faint); background: none; border: 0; padding: 0; }
.icon-btn { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.03); color: var(--dim); cursor: pointer; transition: color 0.2s, border-color 0.2s, background-color 0.2s, transform 0.3s var(--spring); }
.icon-btn:hover { transform: scale(1.08); }
.icon-btn.danger:hover { color: var(--danger); border-color: rgba(248, 113, 113, 0.5); background: rgba(248, 113, 113, 0.1); }
.tabs { display: flex; gap: 6px; padding: 5px; border-radius: 14px; background: rgba(2, 6, 14, 0.5); border: 1px solid var(--line); margin-bottom: 18px; }
.tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border-radius: 10px; border: 0; background: none; color: var(--faint); font: 650 0.9rem var(--font); cursor: pointer; transition: color 0.25s, background-color 0.25s; }
.tab.on { color: var(--text); background: rgba(56, 189, 248, 0.14); box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.3); }
.tab-panel { display: none; }
.tab-panel.on { display: grid; animation: flashIn 0.45s var(--ease); }
.drop { position: relative; display: grid; justify-items: center; gap: 6px; padding: 30px 20px; border-radius: 16px; border: 2px dashed var(--line-strong); background: rgba(2, 6, 14, 0.35); text-align: center; cursor: pointer; transition: border-color 0.25s, background-color 0.25s, transform 0.35s var(--spring); }
.drop:hover, .drop.over { border-color: var(--accent); background: rgba(56, 189, 248, 0.07); }
.drop.over { transform: scale(1.02); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop-ico { width: 34px; height: 34px; color: var(--accent); animation: float 3s ease-in-out infinite; }
.drop small { color: var(--faint); }
.drop.has b { color: var(--accent-hi); }
.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-color: rgba(248, 113, 113, 0.25); }
.danger-zone small { display: block; color: var(--faint); font-size: 0.84rem; }

/* ── responsive ────────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .hero-in { grid-template-columns: 1fr; gap: 70px; }
  .hero-text { text-align: center; }
  .hero-sub { margin: 0 auto; }
  .hero-cta, .hero-meta { justify-content: center; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento .card, .bento .card.wide { grid-column: span 1; }
  .bento .card.big, .bento .card:last-child { grid-column: span 2; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .admin-grid, .two-col { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .menu-btn { display: block; }
  .nav-links { position: absolute; top: calc(100% + 8px); left: 16px; right: 16px; flex-direction: column; align-items: stretch; gap: 4px; padding: 12px; border-radius: 18px;
    background: rgba(8, 12, 22, 0.97); border: 1px solid var(--line-strong); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8);
    visibility: hidden; opacity: 0; transform: translateY(-10px) scale(0.98); pointer-events: none; transition: opacity 0.3s, transform 0.4s var(--spring); }
  .nav-links.open { visibility: visible; opacity: 1; transform: none; pointer-events: auto; }
  .nav-links > a:not(.btn) { padding: 12px 14px; }
  .nav-cta, .inline-form { margin: 6px 0 0; }
  .inline-form .btn { width: 100%; }
  .stats-in { grid-template-columns: repeat(2, 1fr); }
  .stat + .stat::before { display: none; }
  .steps { grid-template-columns: 1fr; gap: 26px; }
  .steps-line { display: none; }
  .step { gap: 14px; }
  .section { padding: 80px 0; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 16px; }
  .hero { padding: 120px 0 60px; }
  .bento { grid-template-columns: 1fr; }
  .bento .card, .bento .card.big, .bento .card.wide, .bento .card:last-child { grid-column: span 1; }
  .route { grid-template-columns: 1fr auto; }
  .route .path { display: none; }
  .chip-1 { left: -6%; } .chip-2 { right: -6%; } .chip-3 { left: -8%; } .chip-4 { right: -4%; }
  .scene { max-width: 320px; }
  .card { padding: 22px; }
  .row2 { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi b { font-size: 1.6rem; }
  .tl-head time { margin-left: 0; width: 100%; }
  .diagram { padding: 10px; }
  .footer-in, .footer-base { flex-direction: column; }
}
@media (hover: none) { .cursor-glow { display: none; } }

/* A static atmosphere needs no WebGL context, animation loop or large moving layers. */
.site-backdrop {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 15% 0%, rgba(56,189,248,.13), transparent 55%),
              radial-gradient(ellipse at 90% 25%, rgba(129,140,248,.1), transparent 50%);
}
.upload-status { margin-top: 18px; padding: 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg-2); }
.upload-status progress { display: block; width: 100%; height: 10px; accent-color: var(--accent); border: 0; border-radius: 6px; overflow: hidden; }
.upload-status progress::-webkit-progress-bar { background: var(--surface-2); }
.upload-status progress::-webkit-progress-value { background: linear-gradient(90deg, var(--accent), var(--indigo)); }
.upload-status p { margin-top: 10px; color: var(--dim); font-size: .85rem; }
.upload-error { border-color: var(--danger); }
.upload-error p { color: var(--danger); }
.js .reveal, .js [data-stagger] .w { filter: none; transition-property: opacity, transform; }
.tab-hidden *, .tab-hidden *::before, .tab-hidden *::after { animation-play-state: paused !important; }

/* ── download page: platform blocks + Android install walkthrough ─────── */

.platform-jump { display: inline-flex; gap: 8px; margin-top: 26px; padding: 6px; border-radius: 16px; border: 1px solid var(--line); background: rgba(10, 14, 24, 0.7); }
.platform-jump a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 11px; color: var(--dim); font-weight: 650; font-size: 0.92rem; transition: color 0.2s, background-color 0.2s; }
.platform-jump a:hover { color: var(--text); background: rgba(56, 189, 248, 0.12); }
.platform-block { scroll-margin-top: 90px; }
.platform-block + .platform-block { border-top: 1px solid var(--line); }
.platform-head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; max-width: 900px; margin: 0 auto 26px; }
.platform-head .h2-sm { margin: 0 0 2px; }
.platform-ico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; color: var(--accent); background: rgba(56, 189, 248, 0.12); border: 1px solid rgba(56, 189, 248, 0.3); }
.platform-ico .ico { width: 26px; height: 26px; }
.platform-notes { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--accent-hi); font-weight: 600; font-size: 0.9rem; }
.platform-notes:hover { text-decoration: underline; }
.install-block { margin-top: 56px; }
.h3-install { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 12px 0 20px; letter-spacing: -0.02em; }

.phone-demo { display: grid; place-items: center; }
.phone { position: relative; width: 250px; height: 510px; padding: 10px; border-radius: 40px; background: linear-gradient(160deg, #1c2539, #0a0f1b); border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: 0 50px 90px -30px rgba(0, 0, 0, 0.85), 0 30px 70px -40px rgba(56, 189, 248, 0.5), inset 0 0 0 2px rgba(255, 255, 255, 0.04); animation: float 7s ease-in-out infinite; }
.phone-notch { position: absolute; top: 18px; left: 50%; width: 70px; height: 18px; margin-left: -35px; border-radius: 12px; background: #05070d; z-index: 5; }
.phone-screen { position: relative; height: 100%; border-radius: 31px; overflow: hidden; background: radial-gradient(circle at 50% 20%, #13213a, #0a1020 70%); }
.phone-screen::before { content: ''; position: absolute; inset: 0; z-index: 2; background: rgba(2, 5, 12, 0.62); opacity: 0; animation: phDim 12s infinite; }
.ph-app { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; }
.ph-app img { filter: drop-shadow(0 0 18px rgba(56, 189, 248, 0.55)); margin-bottom: 6px; }
.ph-app b { font-size: 1.1rem; }
.ph-app small { color: var(--faint); font-size: 0.78rem; }
.ph-sheet { position: absolute; z-index: 3; left: 12px; right: 12px; padding: 16px; border-radius: 20px; background: #1b2436; border: 1px solid rgba(148, 163, 184, 0.2); box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.8); font-size: 0.8rem; opacity: 0; }
.ph-sheet > b { display: block; font-size: 0.92rem; margin-bottom: 6px; }
.ph-sheet p { color: var(--dim); line-height: 1.45; margin-bottom: 12px; }
.ph-step1 { bottom: 14px; animation: phS1 12s var(--ease) infinite; }
.ph-step2 { top: 50%; margin-top: -78px; animation: phS2 12s var(--ease) infinite; }
.ph-step3 { top: 50%; margin-top: -100px; animation: phS3 12s var(--ease) infinite; }
.ph-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); font-weight: 600; }
.ph-switch { position: relative; width: 36px; height: 20px; border-radius: 999px; background: rgba(148, 163, 184, 0.35); flex: none; animation: phSwitch 12s infinite; }
.ph-switch i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; animation: phKnob 12s var(--spring) infinite; }
.ph-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ph-head b { font-size: 0.95rem; }
.ph-key { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: var(--accent); background: rgba(56, 189, 248, 0.14); }
.ph-actions { display: flex; justify-content: flex-end; gap: 18px; font-weight: 700; color: var(--accent-hi); }
.ph-actions span { position: relative; padding: 6px 10px; border-radius: 10px; }
.ph-yes { overflow: hidden; }
.ph-switch::after, .ph-yes::after { content: ''; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px; border-radius: 50%; background: rgba(125, 211, 252, 0.55); transform: scale(0); opacity: 0; }
.ph-step1 .ph-switch::after { animation: phTap1 12s infinite; }
.ph-step2 .ph-yes::after { animation: phTap2 12s infinite; }
.ph-step3 .ph-yes::after { animation: phTap3 12s infinite; }
.ph-step2 .ph-yes { animation: phBtn2 12s infinite; }
.ph-step3 .ph-yes { animation: phBtn3 12s infinite; }
.ph-done { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: 12px; opacity: 0; animation: phDone 12s var(--ease) infinite;
  background: radial-gradient(circle at 50% 40%, rgba(56, 189, 248, 0.22), #0a1020 70%); }
.ph-done .ico { width: 64px; height: 64px; color: var(--accent); filter: drop-shadow(0 0 16px rgba(56, 189, 248, 0.9)); position: relative; }
.ph-done b { font-size: 1.15rem; color: var(--accent-hi); }
.ph-ring { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -88px 0 0 -60px; border-radius: 50%; border: 2px solid rgba(56, 189, 248, 0.6); animation: radar 2s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; }
.ph-tap { display: none; }

@keyframes phDim  { 0%, 2% { opacity: 0; } 5%, 76% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes phS1   { 0% { opacity: 0; transform: translateY(40px); } 5%, 26% { opacity: 1; transform: none; } 30%, 100% { opacity: 0; transform: translateY(40px); } }
@keyframes phS2   { 0%, 30% { opacity: 0; transform: scale(0.9); } 34%, 50% { opacity: 1; transform: none; } 54%, 100% { opacity: 0; transform: scale(0.9); } }
@keyframes phS3   { 0%, 56% { opacity: 0; transform: scale(0.9); } 60%, 76% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; transform: scale(0.9); } }
@keyframes phDone { 0%, 79% { opacity: 0; transform: scale(0.94); } 84%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes phSwitch { 0%, 16% { background: rgba(148, 163, 184, 0.35); } 18%, 100% { background: #38bdf8; } }
@keyframes phKnob   { 0%, 16% { transform: none; } 19%, 100% { transform: translateX(16px); } }
@keyframes phTap1 { 0%, 13% { transform: scale(0); opacity: 0; } 15% { transform: scale(0.4); opacity: 0.9; } 21%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes phTap2 { 0%, 42% { transform: scale(0); opacity: 0; } 44% { transform: scale(0.4); opacity: 0.9; } 50%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes phTap3 { 0%, 68% { transform: scale(0); opacity: 0; } 70% { transform: scale(0.4); opacity: 0.9; } 76%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes phBtn2 { 0%, 43% { background: transparent; } 45%, 52% { background: rgba(56, 189, 248, 0.18); } 54%, 100% { background: transparent; } }
@keyframes phBtn3 { 0%, 69% { background: transparent; } 71%, 78% { background: rgba(56, 189, 248, 0.18); } 80%, 100% { background: transparent; } }

/* iPhone variant: a centred alert first, then the profile sheet, then the DNS
   list where "anon4me DNS" gets picked. Same 12 s timeline as Android. */
.phone.ios { border-radius: 46px; }
.phone.ios .phone-notch { width: 84px; height: 24px; margin-left: -42px; top: 20px; border-radius: 14px; }
.phone.ios .phone-screen { border-radius: 37px; }
.phone.ios .ph-step1 { top: 50%; bottom: auto; margin-top: -84px; }
.phone.ios .ph-step1 .ph-yes::after { animation: phTap1 12s infinite; }
.phone.ios .ph-step1 .ph-yes { animation: phBtn1 12s infinite; }
.ph-list { display: grid; gap: 6px; }
.ph-opt { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); font-weight: 600; color: var(--text); }
.ph-check { width: 13px; height: 7px; margin-top: -4px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg) scale(0); animation: phCheck 12s var(--spring) infinite; }
@keyframes phBtn1  { 0%, 14% { background: transparent; } 16%, 23% { background: rgba(56, 189, 248, 0.18); } 25%, 100% { background: transparent; } }
@keyframes phCheck { 0%, 70% { transform: rotate(-45deg) scale(0); } 73%, 100% { transform: rotate(-45deg) scale(1); } }

.ios-howto { display: grid; gap: 10px; margin: 6px 0 16px; }
.ios-howto p { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(10, 14, 24, 0.55); color: var(--dim); font-size: 0.9rem; line-height: 1.55; }
.ios-howto b { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--text); }
.ios-howto b .ico { color: var(--accent); }

/* download buttons: asked for an address on click (site.js) */
[data-dl] { cursor: pointer; user-select: none; }
[data-dl].is-busy { opacity: 0.78; pointer-events: none; }
[data-dl].is-busy .ico { animation: dlPulse 0.9s ease-in-out infinite; }
@keyframes dlPulse { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
.dl-note { margin-top: 10px; font-size: 0.85rem; line-height: 1.45; color: var(--dim); text-align: center; }
.dl-note.err { color: #fca5a5; }

/* releases page: platform filter */
.rel-filter { display: flex; justify-content: center; gap: 8px; margin: 0 auto 34px; }
.rel-filter button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 11px; border: 1px solid var(--line); background: rgba(10, 14, 24, 0.6); color: var(--dim); font: 650 0.9rem var(--font); cursor: pointer; transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
.rel-filter button.on { color: var(--text); border-color: rgba(56, 189, 248, 0.45); background: rgba(56, 189, 248, 0.14); }
.plat-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 0.76rem; font-weight: 700; color: var(--dim); background: rgba(148, 163, 184, 0.12); }
.plat-tag.android { color: #86efac; background: rgba(52, 211, 153, 0.12); }
.plat-tag.windows { color: var(--accent-hi); background: rgba(56, 189, 248, 0.12); }
.tl-item.filtered { display: none; }

@media (max-width: 600px) {
  .platform-notes { margin-left: 0; width: 100%; }
  .phone { width: 230px; height: 470px; }
}

/* admin: platform picker + header actions */
.head-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.seg { display: flex; gap: 6px; padding: 5px; border-radius: 14px; background: rgba(2, 6, 14, 0.5); border: 1px solid var(--line); }
.seg-opt { flex: 1; position: relative; cursor: pointer; }
.seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.seg-opt span { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border-radius: 10px; color: var(--faint); font-weight: 650; transition: color 0.25s, background-color 0.25s, box-shadow 0.25s; }
.seg-opt input:checked + span { color: var(--text); background: rgba(56, 189, 248, 0.14); box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.35); }
.seg-opt input:disabled + span { opacity: 0.4; cursor: not-allowed; }
.seg-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── admin: "Daha fazla" açılır menüsü ─────────────────────────────────── */
.nav-more { position: relative; margin-left: 4px; }
.nav-more > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; color: var(--dim); font-weight: 550; font-size: 0.94rem; cursor: pointer; user-select: none; border: 1px solid var(--line-strong); }
.nav-more > summary::-webkit-details-marker { display: none; }
.nav-more > summary:hover, .nav-more[open] > summary { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.nav-more[open] > summary .ico { transform: rotate(180deg); }
.nav-more-panel { position: absolute; right: 0; top: calc(100% + 8px); min-width: 190px; display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 14px; background: rgba(12, 16, 28, 0.96); border: 1px solid var(--line-strong); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5); z-index: 60; }
.nav-more-panel a, .nav-more-panel button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border-radius: 9px; color: var(--dim); font: inherit; font-size: 0.92rem; font-weight: 550; background: none; border: 0; cursor: pointer; text-align: left; }
.nav-more-panel a:hover, .nav-more-panel button:hover, .nav-more-panel a.on { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.admin-nav .nav-links { gap: 2px; }
.admin-nav .nav-links > a:not(.btn) { padding: 8px 12px; font-size: 0.92rem; }
.nav-account { margin-left: 4px; }

/* ── Oyun Modu sayfası ────────────────────────────────────────────────── */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.price-card { padding: 1.6rem 1.4rem; display: flex; flex-direction: column; gap: 6px; }
.price-card .price-name { font-weight: 700; font-size: 1.05rem; }
.price-card .price-amount { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; }
.price-card .price-dur { color: var(--dim); font-size: 0.95rem; }
.price-card.is-trial { border-color: rgba(56, 189, 248, 0.45); }
.problem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.pill-note { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--dim); font-size: 0.85rem; }
@media (max-width: 860px) {
  .nav-more { margin: 6px 0 0; }
  .nav-more > summary { width: 100%; justify-content: space-between; }
  .nav-more-panel { position: static; box-shadow: none; margin-top: 6px; background: rgba(255, 255, 255, 0.03); }
  .nav-account { margin: 6px 0 0; }
}
/* ── hesap ve admin formları (CSP satır içi stile izin vermez; hepsi sınıf) ── */
.acct-page { padding: 150px 24px 90px; min-height: 72vh; }
.acct-page .auth-card { margin: 0 auto; max-width: 460px; }
.acct-page .admin-head { margin-bottom: 24px; }
.box { padding: 26px; margin-bottom: 20px; }
.box h2 { margin-bottom: 12px; }
.row-form { display: flex; flex-wrap: wrap; gap: 12px; }
.row-form.end { align-items: flex-end; }
.row-form.center { align-items: center; }
.row-form > .field { min-width: 0; }
.inline { display: inline; margin: 0; }
.select-all { user-select: all; }
.lh { line-height: 1.7; }
.mt-1 { margin-top: 16px; } .mt-2 { margin-top: 22px; } .mt-half { margin-top: 8px; } .mt-btn { margin-top: 14px; align-self: flex-start; }
.mb-1 { margin-bottom: 16px; } .mb-2 { margin-bottom: 22px; } .mb-half { margin-bottom: 12px; }
.w-6 { width: 6.5rem; } .w-7 { width: 7.5rem; }
.field.check { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.field.check input { width: auto; }
.card.form { padding: 26px; }
.card.form h2 { margin-bottom: 4px; }
.card.form p { margin: 0; }
.card.form > .form { margin-top: 14px; }
.card + .card { margin-top: 0; }
.card.form code, .box code { font-family: var(--mono); font-size: 0.86em; padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.06); }
.auth-card .form { margin-top: 6px; }
.auth-card .flash { margin-bottom: 16px; }
dl.muted > div { margin: 2px 0; }
.admin-main .narrow { max-width: 900px; }
.admin-main .table-card + .card, .admin-main .card + .card { margin-top: 22px; }
.admin-main .card.form + .card.form { margin-top: 22px; }
select { font: inherit; }
.auth-card a, .box a, .card.form a, .page-sub a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.auth-card a:hover, .box a:hover, .card.form a:hover, .page-sub a:hover { color: var(--accent-hi); }

.box h2, .card.form h2, .admin-main .table-head h2 { font-size: 1.2rem; letter-spacing: -0.01em; line-height: 1.3; }
.box h2 { margin-bottom: 10px; }
.acct-page .admin-head { margin-bottom: 26px; }

.kpis { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
a.kpi { color: inherit; }

.field-inline { padding: 12px 14px; min-width: 220px; border-radius: 12px; border: 1px solid var(--line-strong); background: rgba(2, 6, 14, 0.6); color: var(--text); font: 500 0.95rem var(--font); }
.field-inline:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.15); }
.badge.warn { color: var(--warn); background: rgba(251, 191, 36, 0.14); }
.edit-row td { padding-top: 0; border-top: 0; }
.pkg-edit summary { cursor: pointer; color: var(--accent); font-size: 0.86rem; font-weight: 600; width: max-content; }
.pkg-edit[open] summary { margin-bottom: 12px; }

/* ═══ Paketler, karşılaştırma, akış, hesap, sepet (v2.4.4 tasarımı) ═══ */
.contact-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.contact-row.center { justify-content: center; }
.btn.is-off { opacity: 0.55; pointer-events: none; }
.hero-game { position: relative; }
.hero-game::before { content: ''; position: absolute; left: 50%; top: 40%; width: 640px; height: 420px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(129, 140, 248, 0.22), transparent); pointer-events: none; z-index: -1; animation: glowBreath 7s ease-in-out infinite; }
@keyframes glowBreath { 50% { opacity: 0.55; transform: translate(-50%, -50%) scale(1.08); } }

/* deneme bandı */
.trial-band { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 30px 34px; margin-bottom: 22px;
  background: linear-gradient(120deg, rgba(56, 189, 248, 0.14), rgba(129, 140, 248, 0.12) 55%, rgba(16, 22, 36, 0.7)); border-color: rgba(56, 189, 248, 0.38); }
.trial-band h3 { margin: 10px 0 6px; font-size: 1.6rem; letter-spacing: -0.02em; }
.trial-band p { margin: 0; max-width: 560px; }
.trial-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; color: #0b1020; background: linear-gradient(90deg, var(--accent), var(--indigo)); }

/* paket kartları */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; align-items: stretch; }
.plan { display: flex; flex-direction: column; gap: 4px; padding: 30px 26px 26px; transition: transform 0.35s var(--spring), border-color 0.3s, box-shadow 0.4s; }
.plan:hover { transform: translateY(-6px); border-color: rgba(56, 189, 248, 0.42); box-shadow: 0 40px 70px -40px rgba(56, 189, 248, 0.45); }
.plan.is-best { border-color: rgba(129, 140, 248, 0.6); background: linear-gradient(170deg, rgba(129, 140, 248, 0.16), rgba(16, 22, 36, 0.75) 60%); }
.plan-flag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 4px 14px; border-radius: 999px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; color: #0b1020; background: linear-gradient(90deg, #c084fc, #38bdf8); white-space: nowrap; }
.plan-name { margin: 0 !important; font-size: 1.15rem; color: var(--dim); }
.plan-price { display: flex; align-items: baseline; gap: 6px; margin: 6px 0 2px; }
.plan-price b { font-size: 3rem; line-height: 1; font-weight: 800; letter-spacing: -0.04em; }
.plan-price b.soon { font-size: 1.8rem; color: var(--faint); }
.plan-price span { font-size: 1.15rem; font-weight: 700; color: var(--accent-hi); }
.plan-dur { margin: 0 0 14px; font-size: 0.92rem; color: var(--faint); }
.plan-perks { display: grid; gap: 9px; margin: 0 0 22px; padding: 14px 0 0; border-top: 1px solid var(--line); list-style: none; flex: 1; align-content: start; }
.plan-perks li { display: flex; align-items: center; gap: 9px; color: var(--dim); font-size: 0.93rem; }
.plan-perks .ico { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 50%; color: var(--ok); background: rgba(52, 211, 153, 0.14); }
.plan-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; color: var(--faint); font-size: 0.9rem; text-align: center; }

/* karşılaştırma */
.vs { border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.vs-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr; align-items: stretch; border-top: 1px solid var(--line); }
.vs-row:first-child { border-top: 0; }
.vs-row > span { padding: 15px 20px; display: flex; align-items: center; }
.vs-label { color: var(--text); font-weight: 650; }
.vs-head > span { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); padding-top: 18px; padding-bottom: 18px; }
.vs-head .vs-hot { color: var(--accent-hi); gap: 8px; }
.vs-hot { background: linear-gradient(180deg, rgba(56, 189, 248, 0.09), rgba(129, 140, 248, 0.05)); }
.vs-row:not(.vs-head):hover { background: rgba(255, 255, 255, 0.025); }
.vs-cell { display: inline-flex; align-items: center; gap: 10px; }
.vs-cell em { font-style: normal; color: var(--dim); font-size: 0.95rem; }
.vs-hot .vs-cell em { color: var(--text); font-weight: 600; }
.vs-cell i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--faint); background: rgba(148, 163, 184, 0.14); }
.vs-cell i .ico { width: 13px; height: 13px; }
.vs-cell.yes i { color: var(--ok); background: rgba(52, 211, 153, 0.16); }
.vs-cell.no i { color: #fca5a5; background: rgba(248, 113, 113, 0.14); }
.vs-cell.mid i { color: var(--accent-hi); background: rgba(56, 189, 248, 0.14); }
@media (max-width: 640px) {
  .vs-row { grid-template-columns: 1fr 1fr; }
  .vs-row > .vs-label, .vs-row > span[role="columnheader"]:first-child { grid-column: 1 / -1; padding-bottom: 2px; background: rgba(255, 255, 255, 0.03); }
  .vs-head > span:first-child { display: none; }
  .vs-row > span { padding: 12px 16px; }
}

/* Oyun Modu akışı */
.flow { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 34px 24px; flex-wrap: wrap; }
.flow-node { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 130px; text-align: center; }
.flow-node small { color: var(--faint); }
.flow-ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: rgba(148, 163, 184, 0.1); border: 1px solid var(--line-strong); color: var(--dim); }
.flow-ico .ico { width: 28px; height: 28px; }
.flow-node.hot .flow-ico { color: var(--accent-hi); border-color: rgba(56, 189, 248, 0.6); background: rgba(56, 189, 248, 0.12); box-shadow: 0 0 40px -6px rgba(56, 189, 248, 0.6); animation: nodePulse 3s ease-in-out infinite; }
@keyframes nodePulse { 50% { box-shadow: 0 0 60px 0 rgba(56, 189, 248, 0.75); } }
.flow-line { display: flex; gap: 8px; width: 90px; justify-content: center; }
.flow-line i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); opacity: 0.25; animation: dotRun 1.5s ease-in-out infinite; }
.flow-line i:nth-child(2) { animation-delay: 0.25s; } .flow-line i:nth-child(3) { animation-delay: 0.5s; }
@keyframes dotRun { 40% { opacity: 1; transform: scale(1.35); } }
@media (max-width: 640px) { .flow-line { width: 100%; } }
.perks-bento { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .perks-bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .perks-bento { grid-template-columns: 1fr; } }

/* "bilmen gerekenler" artık üstü çizili kırmızı değil, bilgi kutusu */
.privacy-col.know { --c: 56, 189, 248; }
.know-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.know-list li b { display: block; margin-bottom: 3px; }
.know-list li span { color: var(--dim); font-size: 0.92rem; line-height: 1.55; }
.about-list.mid li::before { background: var(--accent); box-shadow: 0 0 10px rgba(56, 189, 248, 0.6); }
.block-card.is-no { --c: 251, 191, 36; }

/* ═══ hesap (animasyonsuz, sakin) ═══ */
.acct-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 26px 28px; margin-bottom: 20px; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(120deg, rgba(56, 189, 248, 0.1), rgba(129, 140, 248, 0.08) 60%, rgba(16, 22, 36, 0.7)); }
.acct-who { display: flex; align-items: center; gap: 16px; min-width: 0; }
.acct-who h1 { font-size: 1.35rem; margin: 2px 0 0; overflow-wrap: anywhere; }
.avatar { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px; font-size: 1.5rem; font-weight: 800; color: #0b1020; background: linear-gradient(135deg, var(--accent), var(--indigo)); }
.verify-banner { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 18px 22px; margin-bottom: 20px; border-radius: var(--radius-sm); border: 1px solid rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.08); }
.verify-banner p { margin: 4px 0 0; color: var(--dim); font-size: 0.92rem; max-width: 560px; }
.acct-top { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; margin-bottom: 20px; }
.license-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 28px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.license-card.is-on { border-color: rgba(52, 211, 153, 0.45); background: linear-gradient(150deg, rgba(52, 211, 153, 0.12), rgba(16, 22, 36, 0.75) 60%); }
.license-label { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.license-big { font-size: 2.4rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.license-card p { margin: 0; color: var(--dim); }
.license-cta { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.license-cta small { color: var(--faint); }
.acct-steps { margin: 0; }
.check-steps { display: grid; gap: 12px; margin: 0 0 18px; padding: 0; list-style: none; }
.check-steps li { display: flex; align-items: center; gap: 12px; color: var(--dim); }
.check-steps li.done { color: var(--text); }
.cs-mark { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 0.85rem; font-weight: 700; border: 1px solid var(--line-strong); color: var(--faint); }
.check-steps li.done .cs-mark { border-color: transparent; color: #04130d; background: var(--ok); }
.pay-card { border-color: rgba(129, 140, 248, 0.5); background: linear-gradient(150deg, rgba(129, 140, 248, 0.12), rgba(16, 22, 36, 0.75) 60%); }
.pay-line { padding: 12px 0; border-top: 1px solid var(--line); }
.acct-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 30px 0 14px; }
.acct-section-head h2 { font-size: 1.3rem; }
.mini-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.mini-plan { display: flex; flex-direction: column; gap: 3px; padding: 20px; color: inherit; transition: border-color 0.2s; }
.mini-plan:hover { border-color: rgba(56, 189, 248, 0.5); }
.mp-price { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; }
.mini-plan small { color: var(--faint); }
.mp-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--accent-hi); font-weight: 650; font-size: 0.9rem; }
.help-strip { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 34px; color: var(--faint); }
.help-strip a { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-hi); }
.acct-page .reveal { opacity: 1; transform: none; }
@media (max-width: 860px) { .acct-top { grid-template-columns: 1fr; } }

/* ═══ sepet ═══ */
.cart-title { display: flex; align-items: center; gap: 12px; margin: 14px 0 22px; font-size: 1.8rem; }
.cart-title .ico { width: 30px; height: 30px; color: var(--accent); }
.cart-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; align-items: start; }
.cart-sum { position: sticky; top: 100px; margin: 0; }
.pick-list { display: grid; gap: 10px; }
.pick { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-strong); cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.pick:hover { border-color: rgba(56, 189, 248, 0.5); }
.pick:has(input:checked) { border-color: var(--accent); background: rgba(56, 189, 248, 0.08); }
.pick input { accent-color: var(--accent); width: 18px; height: 18px; flex: none; }
.pick-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pick-body small { color: var(--faint); }
.pick-price { font-size: 1.15rem; font-weight: 800; white-space: nowrap; }
.how-pay { display: grid; gap: 10px; margin: 0; padding-left: 20px; color: var(--dim); }
.how-pay b { color: var(--text); }
.sum-line { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.sum-line:first-of-type { border-top: 0; font-size: 1.15rem; }
.cart-page .reveal { opacity: 1; transform: none; }
.cart-page button[disabled] { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 860px) { .cart-grid { grid-template-columns: 1fr; } .cart-sum { position: static; } }

.hero-meta.center { justify-content: center; }

/* sözleşme sayfaları */
.legal { padding: 34px 38px; }
.legal h2 { font-size: 1.15rem; margin: 30px 0 10px; letter-spacing: -0.01em; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { color: var(--dim); line-height: 1.75; font-size: 0.98rem; }
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 14px; padding-left: 22px; display: grid; gap: 6px; }
.legal b { color: var(--text); }
.legal-seller { display: inline-block; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.03); color: var(--dim); line-height: 1.7; }
.legal-missing { color: var(--warn); }
.legal-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.legal-link { display: flex; flex-direction: column; color: inherit; transition: transform 0.3s var(--spring), border-color 0.3s; }
.legal-link:hover { transform: translateY(-4px); border-color: rgba(56, 189, 248, 0.4); }
.legal-link p { flex: 1; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; margin-top: 24px; font-size: 0.9rem; }
.legal-nav a { color: var(--accent); }
.footer-legal { margin-top: 14px; font-size: 0.85rem; opacity: 0.8; }
.field.grow { flex: 1 1 180px; }
.field.terms { align-items: flex-start; margin: 4px 0 12px; text-align: left; }
.field.terms span { font-size: 0.88rem; color: var(--dim); line-height: 1.5; }
.field.terms input { margin-top: 3px; flex: none; }
.field.check span a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .legal { padding: 24px 20px; } }

.footer-legal { flex: 1 0 100%; margin-top: 0; }

/* captcha */
.captcha { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 4px 0 8px; }
.captcha-img { border-radius: 12px; border: 1px solid var(--line-strong); background: #0c1322; max-width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.captcha-new { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.04); color: var(--dim); cursor: pointer; }
.captcha-new:hover { color: var(--text); border-color: var(--accent); }

/* hesap: kod, davet, cihazlar */
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.two-col > .card { margin: 0; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }
.invite-box { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.invite-box code { flex: 1 1 220px; padding: 10px 12px; border-radius: 10px; }
.acct-section-head.tight { margin: 0 0 8px; }
.device-list { display: grid; gap: 10px; }
.device { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); }
.device-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(56, 189, 248, 0.1); color: var(--accent); }
.device-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.device-body small { color: var(--faint); }
td .code, .code { font-family: var(--mono); letter-spacing: 0.04em; }

/* hero: uygulama görseli artık Oyun Modu */
.mock-modes { display: flex; gap: 6px; margin: 0 18px 2px; padding: 4px; border-radius: 12px; background: rgba(148, 163, 184, 0.1); }
.mock-modes span { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 6px; border-radius: 9px; font-size: 0.78rem; font-weight: 650; color: var(--faint); }
.mock-modes span.on { color: #04101c; background: linear-gradient(90deg, var(--accent), var(--indigo)); }
.mock-modes .ico { width: 14px; height: 14px; }

/* ping bölümü */
.ping-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; }
.ping-side { display: grid; gap: 18px; }
.ping-card { display: flex; flex-direction: column; gap: 18px; padding: 30px; }
.ping-card h3 { margin: 0; font-size: 1.3rem; }
.ping-row { display: grid; gap: 8px; }
.ping-label { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; color: var(--dim); font-size: 0.95rem; }
.ping-label b.bad { color: #fca5a5; } .ping-label b.good { color: var(--ok); }
.ping-track { height: 16px; border-radius: 999px; background: rgba(148, 163, 184, 0.12); overflow: hidden; }
.ping-bar { display: block; height: 100%; width: 0; border-radius: 999px; transition: width 1.4s var(--ease) 0.2s; }
.pb-bad { background: linear-gradient(90deg, #fb923c, #f87171); }
.pb-good { background: linear-gradient(90deg, var(--ok), var(--accent)); }

.ping-note { margin: 0; color: var(--faint); font-size: 0.86rem; line-height: 1.55; }
.game-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.game-chips span { padding: 6px 13px; border-radius: 999px; font-size: 0.85rem; font-weight: 650; color: var(--accent-hi); background: rgba(56, 189, 248, 0.1); border: 1px solid rgba(56, 189, 248, 0.28); }
@media (max-width: 900px) { .ping-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ping-bar { transition: none; } }
.ping-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: auto; }
.ping-stats > div { padding: 14px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); text-align: center; }
.ping-stats b { display: block; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--text); }
.ping-stats span { display: block; margin-top: 2px; font-size: 0.8rem; color: var(--faint); }

/* ping yarışı: sayılar sayılır, çubuklar dolar, noktalar gidip gelir */
.ping-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ping-tag { padding: 4px 11px; border-radius: 999px; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em; color: var(--faint); border: 1px dashed var(--line-strong); }
.pv { display: grid; gap: 10px; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.025); }
.pv.good { border-color: rgba(52, 211, 153, 0.4); background: linear-gradient(150deg, rgba(52, 211, 153, 0.1), rgba(255, 255, 255, 0.02) 70%); }
.pv.bad { border-color: rgba(248, 113, 113, 0.28); }
.pv-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pv-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--dim); }
.pv.good .pv-name { color: var(--text); }
.pv-num { font-size: 2.4rem; line-height: 1; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.pv.good .pv-num { color: var(--ok); } .pv.bad .pv-num { color: #fca5a5; }
.pv small { color: var(--faint); font-size: 0.85rem; }
.ping-track { position: relative; }
.pv-dot { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px rgba(255, 255, 255, 0.8); opacity: 0; }
.in .pd-fast { animation: pvRun 0.9s ease-in-out 1.6s infinite; }
.in .pd-slow { animation: pvRun 3.6s ease-in-out 1.6s infinite; }
@keyframes pvRun { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pv-dot { display: none; } }

.ping-scn { display: flex; flex-direction: column; gap: 1px; margin-top: 6px; padding-bottom: 2px; border-bottom: 1px solid var(--line); }
.ping-scn b { font-size: 1.02rem; color: var(--text); }
.ping-scn span { font-size: 0.84rem; color: var(--faint); }
.ping-card .pv { padding: 14px 18px; gap: 8px; }
.ping-card .pv-num { font-size: 1.9rem; }

/* oyun sekmeleri */
.ping-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.ping-tabs button { position: relative; overflow: hidden; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.03); color: var(--dim); font: 650 0.86rem var(--font); cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s; }
.ping-tabs button:hover { color: var(--text); }
.ping-tabs button.on { color: var(--text); border-color: rgba(56, 189, 248, 0.6); background: rgba(56, 189, 248, 0.12); }
.ping-tabs button i { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--accent), var(--indigo)); }
.ping-tabs button.on i { animation: tabFill 5.5s linear forwards; }
.ping-tabs.paused button.on i { animation: none; width: 100%; }
@keyframes tabFill { to { width: 100%; } }
.ping-panel { display: grid; gap: 12px; animation: panelIn 0.45s var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .ping-panel { animation: none; } .ping-tabs button.on i { animation: none; width: 100%; } }
/* ping bölümü: büyük kart tam genişlik, iki küçük kart altında yan yana (boşluk kalmaz) */
.ping-grid { grid-template-columns: 1fr; }
.ping-side { grid-template-columns: repeat(2, 1fr); }
.ping-side > .card { display: flex; flex-direction: column; }
.ping-card { gap: 16px; }
@media (max-width: 700px) { .ping-side { grid-template-columns: 1fr; } }

.city-note { margin-top: 8px; font-size: 0.86rem; color: var(--faint); }

/* neden düşük: en yakın noktaya bağlanma görseli */
.ping-why { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: center; margin-bottom: 18px; padding: 32px; background: linear-gradient(120deg, rgba(56, 189, 248, 0.1), rgba(129, 140, 248, 0.08) 60%, rgba(16, 22, 36, 0.7)); border-color: rgba(56, 189, 248, 0.35); }
.why-text h3 { margin: 12px 0 10px; font-size: 1.6rem; letter-spacing: -0.02em; }
.why-text p { margin: 0 0 10px; color: var(--dim); line-height: 1.65; }
.why-map { position: relative; min-height: 260px; border-radius: 18px; border: 1px solid var(--line); background: radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.08), transparent 70%), rgba(255, 255, 255, 0.02); overflow: hidden; }
.wm-node { position: absolute; padding: 6px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 650; color: var(--faint); background: rgba(148, 163, 184, 0.1); border: 1px solid var(--line-strong); }
.wm-ist { left: 10%; top: 14%; } .wm-ank { left: 42%; top: 40%; } .wm-izm { left: 6%; top: 62%; } .wm-more { right: 6%; top: 12%; }
.wm-ank { color: #04101c; background: linear-gradient(90deg, var(--accent), var(--indigo)); border-color: transparent; box-shadow: 0 0 26px rgba(56, 189, 248, 0.55); animation: wmPick 5s ease-in-out infinite; }
@keyframes wmPick { 50% { box-shadow: 0 0 40px rgba(56, 189, 248, 0.9); } }
.wm-you { position: absolute; right: 12%; bottom: 14%; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; font-size: 0.85rem; font-weight: 700; color: var(--ok); background: rgba(52, 211, 153, 0.12); border: 1px solid rgba(52, 211, 153, 0.45); }
.wm-line { position: absolute; left: 53%; top: 49%; width: 25%; height: 2px; transform-origin: left center; transform: rotate(38deg); background: linear-gradient(90deg, var(--accent), var(--ok)); opacity: 0.9; }
.wm-pulse { position: absolute; left: 53%; top: 49%; width: 10px; height: 10px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px #fff; animation: wmTravel 1.8s ease-in-out infinite; }
@keyframes wmTravel { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(calc(var(--wm-dx, 78px)), calc(var(--wm-dy, 62px))); opacity: 0; } }
.wm-badge { position: absolute; left: 36%; top: 30%; padding: 3px 9px; border-radius: 8px; font-size: 0.72rem; font-weight: 700; color: var(--accent-hi); background: rgba(56, 189, 248, 0.14); }
@media (max-width: 900px) { .ping-why { grid-template-columns: 1fr; padding: 24px; } .why-map { min-height: 240px; } }
@media (prefers-reduced-motion: reduce) { .wm-ank, .wm-pulse { animation: none; } }

/* ── liste tasarımı (tablo yerine): satır kartları ───────────────────────── */
.ulist { display: grid; gap: 10px; padding: 16px; }
.uitem { border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, 0.025); transition: border-color 0.25s, background-color 0.25s, transform 0.25s var(--ease); }
.uitem:hover { border-color: rgba(56, 189, 248, 0.38); background: rgba(56, 189, 248, 0.045); transform: translateY(-1px); }
.urow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 14px 16px; }
.urow-ico { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: var(--accent-hi); background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(129, 140, 248, 0.2)); }
.urow-ico .ico { width: 20px; height: 20px; }
.urow-ico.ok { color: var(--ok); background: rgba(52, 211, 153, 0.14); }
.urow-ico.warn { color: var(--warn); background: rgba(251, 191, 36, 0.14); }
.urow-ico.off { color: var(--faint); background: rgba(148, 163, 184, 0.12); }
.urow-main { flex: 1 1 220px; min-width: 0; }
.urow-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; font-weight: 700; font-size: 1rem; overflow-wrap: anywhere; }
.urow-sub { margin-top: 3px; font-size: 0.84rem; color: var(--faint); overflow-wrap: anywhere; }
.urow-sub a { color: var(--accent); }
.urow-meta { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.urow-kv { display: grid; gap: 3px; min-width: 64px; }
.urow-kv small { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); }
.urow-kv span, .urow-kv b { font-size: 0.93rem; font-weight: 650; }
.urow-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.urow-act form { display: inline-flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.urow-edit { border-top: 1px solid var(--line); padding: 10px 16px 14px; }
.urow-edit summary { cursor: pointer; width: max-content; font-size: 0.86rem; font-weight: 650; color: var(--accent); }
.urow-edit[open] summary { margin-bottom: 12px; }
.codechip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 11px; border: 1px dashed var(--line-strong); background: rgba(2, 6, 14, 0.55); font-family: var(--mono); font-size: 0.95rem; font-weight: 650; letter-spacing: 0.06em; color: var(--accent-hi); user-select: all; }
.copy-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line-strong); background: transparent; color: var(--dim); cursor: pointer; transition: color 0.2s, border-color 0.2s, background-color 0.2s; }
.copy-btn:hover { color: var(--accent); border-color: var(--accent); }
.copy-btn.done { color: var(--ok); border-color: var(--ok); background: rgba(52, 211, 153, 0.12); }
.copy-btn .ico { width: 16px; height: 16px; }
.fpills { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 20px 0; }
.fpills a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 0.86rem; font-weight: 650; color: var(--dim); transition: all 0.2s; }
.fpills a b { font-size: 0.78rem; padding: 1px 8px; border-radius: 999px; background: rgba(148, 163, 184, 0.14); color: var(--text); }
.fpills a:hover { border-color: var(--accent); color: var(--text); }
.fpills a.on { color: #04101d; border-color: transparent; background: linear-gradient(135deg, var(--accent-hi), var(--accent)); }
.fpills a.on b { background: rgba(4, 16, 29, 0.18); color: #04101d; }
.list-filter { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 20px 0; }
.list-filter .field-inline, .list-filter select { min-width: 0; flex: 1 1 180px; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 4px 16px 18px; color: var(--faint); font-size: 0.86rem; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.stat-tile { padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.025); display: grid; gap: 4px; }
.stat-tile small { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.stat-tile b { font-size: 1.5rem; letter-spacing: -0.02em; }
.stat-tile code { font-size: 0.78rem; color: var(--accent-hi); }
@media (max-width: 680px) { .urow-act { margin-left: 0; width: 100%; } .urow-meta { width: 100%; } .ulist { padding: 12px; } }

/* ── bayilik paneli ─────────────────────────────────────────────────────── */
.rs-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: stretch; margin-bottom: 18px; }
.rs-hero .card { padding: 26px; }
.rs-hero h1 { margin: 10px 0 6px; font-size: 1.9rem; letter-spacing: -0.02em; }
.rs-hero p { margin: 0; color: var(--dim); line-height: 1.6; }
.rs-discount { display: grid; align-content: center; justify-items: center; text-align: center; gap: 6px; background: linear-gradient(135deg, rgba(56, 189, 248, 0.14), rgba(129, 140, 248, 0.14)); border-color: rgba(56, 189, 248, 0.35); }
.rs-discount b { font-size: 3rem; line-height: 1; letter-spacing: -0.04em; }
.rs-discount span { color: var(--dim); font-size: 0.9rem; }
.rs-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.rs-step { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); font-size: 0.88rem; color: var(--dim); line-height: 1.45; }
.rs-step i { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 0.8rem; color: #04101d; background: linear-gradient(135deg, var(--accent-hi), var(--accent)); }
.rs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.rs-grid > .card { padding: 22px; }
.rs-grid h2, .rs-sec h2 { font-size: 1.15rem; margin: 0 0 4px; }
.rs-sec { margin-top: 18px; }
.rs-price { display: grid; gap: 8px; margin-top: 12px; }
.rs-price-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); }
.rs-price-row b { font-size: 1rem; }
.rs-price-row s { color: var(--faint); font-size: 0.85rem; margin-right: 8px; }
.rs-price-row .now { color: var(--ok); font-weight: 750; }
.rs-total { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; margin-top: 12px; border-radius: 14px; border: 1px dashed var(--line-strong); font-weight: 650; }
.rs-total b { color: var(--ok); font-size: 1.2rem; }
.rs-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 12px; }
.rs-code { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.025); }
.rs-code.used { opacity: 0.55; }
.rs-code.used .codechip { text-decoration: line-through; border-style: solid; color: var(--faint); }
.rs-code small { display: block; margin-top: 4px; font-size: 0.76rem; color: var(--faint); }
@media (max-width: 860px) { .rs-hero, .rs-grid, .rs-steps { grid-template-columns: 1fr; } }

/* ── tarih seçici (takvim) ──────────────────────────────────────────────── */
.dp { position: relative; display: block; }
.dp-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: rgba(2, 6, 14, 0.6); color: var(--text); font: 500 0.95rem var(--font); cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; }
.dp-btn:hover, .dp.open .dp-btn { border-color: var(--accent); }
.dp.open .dp-btn { box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.15); }
.dp-btn .ico { width: 18px; height: 18px; color: var(--accent); flex: none; }
.dp-btn .ph { color: var(--faint); }
.dp-pop { position: fixed; z-index: 200; top: 0; left: 0; width: 300px; max-width: calc(100vw - 32px); padding: 14px; border-radius: 18px; border: 1px solid var(--line-strong); background: var(--surface-solid); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); }
.dp-pop[hidden] { display: none; }
.dp-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.dp-top b { font-size: 1rem; text-transform: capitalize; }
.dp-nav { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line-strong); background: transparent; color: var(--text); font-size: 1.1rem; cursor: pointer; }
.dp-nav:hover { border-color: var(--accent); color: var(--accent); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.dp-dow { text-align: center; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; color: var(--faint); padding: 4px 0; }
.dp-day { aspect-ratio: 1; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--text); font: 600 0.88rem var(--font); cursor: pointer; transition: background-color 0.15s, border-color 0.15s; }
.dp-day:hover { background: rgba(56, 189, 248, 0.16); }
.dp-day.today { border-color: var(--accent); }
.dp-day.sel { color: #04101d; background: linear-gradient(135deg, var(--accent-hi), var(--accent)); }
.dp-day.void { visibility: hidden; }
.dp-foot { display: flex; justify-content: space-between; margin-top: 10px; }
.dp-link { background: none; border: 0; padding: 4px 6px; color: var(--accent); font: 650 0.84rem var(--font); cursor: pointer; }

.rs-pad { padding: 22px; }
.rs-plain { padding: 0 0 12px; border: 0; }

/* sürüm dosyası imza durumu */
.sig-state { display: block; margin-top: 6px; font-size: 0.8rem; color: var(--warn); }
.sig-state.ok { color: var(--ok); }
.sig-state.bad { color: var(--danger); }
.sig-edit summary { margin-top: 6px; cursor: pointer; width: max-content; font-size: 0.82rem; font-weight: 650; color: var(--accent); }
.sig-edit[open] summary { margin-bottom: 10px; }

/* ── hesap alanı: sol menü + sade sayfa (Hesabım, Sepet, Bayilik paneli) ───── */
.dx-page { padding: 112px 24px 90px; min-height: 76vh; }
.dx { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 40px; max-width: 1200px; margin: 0 auto; }
.dx-side { position: sticky; top: 92px; align-self: start; display: grid; gap: 4px; }
.dx-side-k { padding: 0 12px; font: 600 0.66rem var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.dx-side-t { padding: 0 12px 10px; font-size: 1.02rem; font-weight: 700; }
.dx-nav { display: grid; gap: 2px; }
.dx-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 9px 12px; border: 0; border-radius: 7px; background: none; color: var(--dim); font: 550 0.92rem var(--font); text-align: left; cursor: pointer; transition: color 0.18s, background-color 0.18s; }
.dx-link:hover { color: var(--text); background: rgba(255, 255, 255, 0.045); }
.dx-link.on { color: var(--accent-hi); background: rgba(56, 189, 248, 0.11); }
.dx-ext { width: 12px; height: 12px; transform: rotate(-45deg); opacity: 0.7; }
.dx-sep { height: 1px; margin: 16px 0 14px; background: var(--line); }
.dx-nav form { margin: 0; }
.dx-out { color: var(--faint); }
.dx-main { min-width: 0; display: grid; gap: 16px; align-content: start; }

.dx-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 20px; margin-bottom: 4px; }
.dx-eyebrow { font: 600 0.72rem var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.dx-head h1 { margin: 8px 0 6px; font-size: clamp(1.8rem, 3.4vw, 2.5rem); line-height: 1.1; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.dx-head p { margin: 0; color: var(--dim); max-width: 60ch; }
.dx-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.dx-chip { padding: 7px 12px; border-radius: 6px; font: 700 0.7rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #04101d; background: var(--accent); }
.dx-chip.warn { background: var(--warn); }

.dx-box { border: 1px solid var(--line); border-radius: 10px; background: rgba(16, 22, 36, 0.55); padding: 22px; display: grid; gap: 12px; align-content: start; }
.dx-box > * { margin-top: 0; margin-bottom: 0; }
.dx-flush { padding: 0; gap: 0; }
.dx-pad { padding: 4px 18px 16px; }
.dx-accent { border-left: 3px solid var(--line-strong); }
.dx-accent.is-on { border-left-color: var(--ok); }
.dx-warn { border-color: rgba(251, 191, 36, 0.45); background: rgba(251, 191, 36, 0.06); }
.dx-pay { border-color: rgba(129, 140, 248, 0.5); background: rgba(129, 140, 248, 0.07); }
.dx-center { justify-items: center; text-align: center; padding: 40px 22px; }
.dx-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.dx-label { font: 600 0.68rem var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.dx-note { margin: 0; color: var(--dim); font-size: 0.92rem; line-height: 1.55; }
.dx-big { font-size: 1.9rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; }
.dx-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.dx-actions form { margin: 0; }
.dx-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
.dx-steps { margin: 0; }
.dx-pay-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; }

.dx-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dx-stat { display: grid; gap: 6px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px; background: rgba(16, 22, 36, 0.4); }
.dx-stat small { color: var(--faint); font-size: 0.86rem; }
.dx-stat b { font-size: 1.9rem; letter-spacing: -0.02em; line-height: 1.1; }

.dx-sec { margin-top: 10px; font: 600 0.7rem var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.dx-sec-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.dx-sec-row .dx-sec { margin: 0; }
.dx-kv { grid-template-columns: 1fr 1fr; gap: 14px 40px; }
.dx-kv div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; color: var(--faint); font-size: 0.9rem; }
.dx-kv b { color: var(--text); font-weight: 550; text-align: right; overflow-wrap: anywhere; }
.dx-kv b.ok { color: var(--ok); }
.dx-kv b.warn { color: var(--warn); }
.dx-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dx-tile { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px; background: rgba(16, 22, 36, 0.4); transition: border-color 0.2s, background-color 0.2s; }
.dx-tile b { font-size: 1.02rem; }
.dx-tile small { color: var(--faint); }
.dx-tile:hover { border-color: rgba(56, 189, 248, 0.5); background: rgba(56, 189, 248, 0.06); }

.dx-cart { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 14px; align-items: start; }
.dx-cart-main { display: grid; gap: 14px; }
.dx-sum { position: sticky; top: 92px; }

/* aynı çerçevedeki eski bileşenleri sadeleştir */
.dx .btn { border-radius: 8px; }
.dx .field input, .dx .field select, .dx .field textarea { border-radius: 8px; }
.dx .pick, .dx .device, .dx .rs-price-row, .dx .rs-code, .dx .rs-step, .dx .rs-total { border-radius: 8px; }
.dx .mini-plan { gap: 3px; padding: 18px; }
.dx .uitem { border-radius: 10px; }
.dx .ulist { padding: 14px; }
.dx .flash { border-radius: 8px; }
.dx .invite-box code { border-radius: 8px; }
.dx .rs-steps { margin-top: 0; }
.dx .rs-grid { gap: 14px; }
.dx .rs-grid > .dx-box { padding: 22px; }
.dx .rs-codes { margin-top: 0; }
@media (max-width: 960px) {
  .dx { grid-template-columns: 1fr; gap: 22px; }
  .dx-side { position: static; }
  .dx-side-k, .dx-side-t, .dx-sep { display: none; }
  .dx-side { display: block; }
  .dx-nav { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; }
  .dx-nav + .dx-nav { margin-top: 0; }
  .dx-link { width: auto; white-space: nowrap; border: 1px solid var(--line); }
  .dx-nav form { display: contents; }
  .dx-cart { grid-template-columns: 1fr; }
  .dx-sum { position: static; }
  .dx-quick { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) { .dx-two, .dx-stats, .dx-kv { grid-template-columns: 1fr; } .dx-page { padding-top: 96px; } }
.dx { max-width: 1152px; }
.dx .mini-plans { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.dx .invite-box code { font-size: 0.8rem; overflow-wrap: anywhere; }
.dx .codechip { font-size: 0.84rem; letter-spacing: 0.03em; white-space: nowrap; }
.dx .rs-codes { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.dx > *, .dx-side, .dx-nav { min-width: 0; max-width: 100%; }
@media (max-width: 960px) { .dx { grid-template-columns: minmax(0, 1fr); } .dx-nav { flex-wrap: nowrap; } }
/* telefon: menü kaydırma çubuğu yerine alt satıra geçen küçük düğmeler */
@media (max-width: 960px) {
  .dx-side { display: grid; gap: 8px; }
  .dx-nav { display: flex; flex-wrap: wrap; gap: 6px; overflow: visible; padding-bottom: 0; }
  .dx-link { padding: 7px 11px; font-size: 0.84rem; border-radius: 8px; }
  .dx-ext { display: none; }
}
/* menüden bölüme gidince başlık üst çubuğun altında kalmasın */
.dx-main [id] { scroll-margin-top: 110px; }
html { scroll-behavior: smooth; }

/* ── sade görünüm: Paketler, İndir, Sürümler, SSS, Nedir, Sözleşmeler ve yönetim paneli ─────────────── */
.dx .dx-block { display: grid; gap: 16px; align-content: start; }
.dx .dx-block + .dx-block { margin-top: 18px; }
.dx .wrap { max-width: none; padding: 0; }
.dx .section, .dx .section.tight { padding: 0; }
.dx .section-head { text-align: left; max-width: none; margin: 0 0 4px; }
.dx .section-head h2 { margin: 8px 0 8px; font-size: 1.5rem; letter-spacing: -0.02em; }
.dx .section-head p { font-size: 0.95rem; margin: 0; }
.dx .kicker { font: 600 0.68rem var(--mono); letter-spacing: 0.16em; color: var(--faint); }
.dx .kicker::before { display: none; }
.dx .grad { background: none; -webkit-text-fill-color: currentColor; color: var(--accent-hi); }
.dx .center { text-align: left; justify-content: flex-start; }
.dx .h2-sm { font-size: 1.5rem; margin: 0; }
.dx .card, .dx .dx-box.card { border-radius: 10px; box-shadow: none; padding: 22px; background: rgba(16, 22, 36, 0.55); }
.dx .card::before, .dx .card::after { display: none; }
.dx .card:hover { transform: none; }
.dx .card h3 { margin: 10px 0 6px; font-size: 1.05rem; }
.dx .card-ico { width: 38px; height: 38px; border-radius: 9px; }
.dx .card-ico .ico { width: 19px; height: 19px; }
.dx .card:hover .card-ico { transform: none; }
.dx .spot::before, .dx .spot::after { display: none; }
.dx .btn-lg { padding: 11px 18px; font-size: 0.95rem; }
.dx .btn-beam::after, .dx .btn-beam::before { display: none; }
.dx .reveal { opacity: 1; transform: none; }

/* paketler */
.dx .trial-band { padding: 22px; border-radius: 10px; margin: 0; }
.dx .trial-band h3 { font-size: 1.3rem; }
.dx .plan-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.dx .plan { padding: 22px; border-radius: 10px; }
.dx .plan:hover { transform: none; box-shadow: none; border-color: rgba(56, 189, 248, 0.5); }
.dx .plan.is-best { border-color: rgba(56, 189, 248, 0.55); background: rgba(56, 189, 248, 0.07); }
.dx .plan-flag { top: 14px; left: auto; right: 14px; transform: none; border-radius: 6px; font: 700 0.64rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; background: var(--accent); }
.dx .plan-price b { font-size: 2.4rem; }
.dx .plan-note { text-align: left; margin: 4px 0 0; }
.dx .vs { border-radius: 8px; background: none; }
.dx .dx-three { grid-template-columns: repeat(3, 1fr); }

/* indir */
.dx .platform-jump { margin: 0; padding: 4px; border-radius: 9px; }
.dx .platform-jump a { padding: 7px 12px; border-radius: 7px; font-size: 0.88rem; }
.dx .platform-head { max-width: none; margin: 0; gap: 14px; }
.dx .platform-ico { width: 44px; height: 44px; border-radius: 10px; }
.dx .dl-grid { max-width: none; margin: 0; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.dx .dl-card { padding: 22px; }
.dx .dl-card:hover { transform: none; }
.dx .dl-card.rec { background: rgba(56, 189, 248, 0.06); }
.dx .dl-card h3 { font-size: 1.15rem; margin: 12px 0 6px; }
.dx .dl-card .badge { top: 18px; right: 18px; border-radius: 6px; font: 700 0.62rem var(--mono); letter-spacing: 0.1em; }
.dx .install-block { margin-top: 18px; gap: 22px; align-items: start; }
.dx .two-col { gap: 22px; }
.dx .h3-install { font-size: 1.3rem; margin: 8px 0 14px; }
.dx .install li::before { border-radius: 8px; width: 30px; height: 30px; }
.dx .install li { padding-left: 44px; }
.dx .phone-demo, .dx .smartscreen { transform: scale(0.92); transform-origin: top center; }

/* sürümler */
.dx .rel-list { display: grid; gap: 14px; }
.dx .tl-item { margin: 0; position: static; padding: 22px; }
.dx .tl-item::before, .dx .tl-item::after { display: none; }
.dx .dx-rel-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dx .dx-rel-title h2 { font-size: 1.3rem; margin: 0; }
.dx .tl-files { margin-top: 6px; }
.dx .fpills button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: none; font: 650 0.86rem var(--font); color: var(--dim); cursor: pointer; transition: all 0.2s; }
.dx .fpills button:hover { border-color: var(--accent); color: var(--text); }
.dx .fpills button.on { color: #04101d; border-color: transparent; background: linear-gradient(135deg, var(--accent-hi), var(--accent)); }
.dx .fpills { padding: 0; }
.dx .fpills button em { font-style: normal; padding: 1px 8px; border-radius: 999px; font-size: 0.76rem; background: rgba(148, 163, 184, 0.16); }
.dx .fpills button.on em { background: rgba(4, 16, 29, 0.18); }

/* sss */
.dx .faq { gap: 22px; }
.dx .faq-group { gap: 8px; }
.dx .faq-item { border-radius: 8px; background: rgba(16, 22, 36, 0.45); }
.dx .faq-q { padding: 16px 18px; font-size: 0.97rem; }
.dx .faq-a p { padding: 0 18px 16px; }
.dx .faq-cat { margin-left: 0; font: 600 0.68rem var(--mono); letter-spacing: 0.16em; }

/* nedir */
.dx .about-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.dx .block-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.dx .block-card { border-radius: 10px; padding: 20px; }
.dx .privacy { padding: 22px; }
.dx .cta-card { padding: 34px 24px; text-align: left; }
.dx .cta-glow, .dx .cta-logo { display: none; }
.dx .plat-card:hover { transform: none; }

/* sözleşmeler */
.dx .legal { padding: 26px 28px; }
.dx .legal-index { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.dx .legal-link:hover { transform: none; border-color: rgba(56, 189, 248, 0.5); }
.dx .legal-nav { justify-content: flex-start; }
.dx .dx-box h3 { margin: 6px 0 4px; font-size: 1.02rem; }

/* yönetim paneli */
.dxa .dxa-brand { margin: 0 12px 14px; }
.dxa .dxa-brand .brand-name em { font-style: normal; color: var(--faint); font-weight: 500; }
.dx-count { min-width: 20px; padding: 1px 7px; border-radius: 999px; font: 700 0.72rem var(--font); color: #04101d; background: var(--warn); text-align: center; }
.dxa .admin-main { padding: 0; }
.dxa .admin-main .narrow { max-width: none; }
.dxa .admin-head { margin: 0 0 6px; gap: 14px; }
.dxa .admin-head h1 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 6px 0 0; letter-spacing: -0.025em; }
.dxa .admin-head .kicker { font: 600 0.72rem var(--mono); letter-spacing: 0.16em; color: var(--accent); }
.dxa .admin-head .kicker::before { display: none; }
.dxa .admin-head .kicker::after { content: ''; }
.dxa .admin-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.dxa .stack { gap: 14px; }
.dxa .card { border-radius: 10px; box-shadow: none; padding: 22px; background: rgba(16, 22, 36, 0.55); }
.dxa .card::before, .dxa .card::after { display: none; }
.dxa .card:hover { transform: none; }
.dxa .card.form { padding: 22px; }
.dxa .table-card { padding: 0; }
.dxa .table-head { padding: 18px 20px; }
.dxa .admin-main .card + .card, .dxa .admin-main .table-card + .card, .dxa .admin-main .card.form + .card.form, .dxa .admin-main .mt-2, .dxa .admin-main .mb-2 { margin-top: 0; margin-bottom: 0; }
.dxa .admin-main > *, .dxa .admin-main > .wrap > * { margin-top: 0; }
.dxa .admin-main > .wrap { display: grid; gap: 14px; }
.dxa .admin-main > .wrap > section, .dxa .admin-main > .wrap > form, .dxa .admin-main > .wrap > div { margin: 0; }
.dxa .kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 0; }
.dxa .kpi { padding: 16px 18px; border-radius: 10px; }
.dxa .kpi-ico { width: 32px; height: 32px; border-radius: 8px; }
.dxa .kpi b { font-size: 1.7rem; }
.dxa .btn, .dxa .field input, .dxa .field select, .dxa .field textarea, .dxa .field-inline { border-radius: 8px; }
.dxa .flash { border-radius: 8px; }
.dxa .head-actions .btn-beam::after, .dxa .head-actions .btn-beam::before { display: none; }
.dxa .grad { background: none; -webkit-text-fill-color: currentColor; color: var(--accent-hi); }
.dxa .status.big { border-radius: 6px; }
.dxa .assets li, .dxa .drop, .dxa .danger-zone { border-radius: 10px; }
@media (max-width: 960px) { .dxa .dxa-brand { display: none; } .dx .dx-three { grid-template-columns: 1fr; } .dxa .admin-grid { grid-template-columns: 1fr; } }

/* giriş / kayıt kartları */
.auth-card { border-radius: 10px; box-shadow: none; background: rgba(16, 22, 36, 0.6); }
.auth-card::before, .auth-card::after { display: none; }
.auth-card .btn, .auth-card .field input { border-radius: 8px; }
.auth-card h1 { font-size: 1.7rem; letter-spacing: -0.02em; }
.dx .dl-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.dx .hash { flex-wrap: nowrap; }
.dx .hash code { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx .cta-card h2 { font-size: 1.7rem; margin: 0 0 8px; }
.dx .cta-card p { font-size: 0.95rem; }
.dxa .admin-head .kicker::before { display: inline; content: '// '; width: auto; height: auto; background: none; margin-right: 4px; }
.dxa .dxa-brand { margin-bottom: 22px; }
.field.check.pb { padding-bottom: 12px; }
/* yönetim: üst çubuk olmadığı için üst boşluk az; indir: bölümler arası çizgiyle başlık birleşmesin */
.dxa .dx-page, .dx-page:has(.dxa-brand) { padding-top: 40px; }
.dx .platform-block, .dx .dx-block { scroll-margin-top: 100px; }
.dx .platform-block + .platform-block { margin-top: 34px; padding-top: 34px; border-top: 1px solid var(--line); }

.dx-trial { border-color: rgba(52, 211, 153, 0.45); background: rgba(52, 211, 153, 0.07); }
.dx-trial .dx-big { font-size: 1.5rem; margin: 4px 0; }
.dx-stats-4 { margin-bottom: 0; }
.dxa .dx-inner { padding: 0; }

/* indirim: eski fiyat ve rozet */
.old-price { font-weight: 600; color: var(--faint); text-decoration: line-through; font-size: 0.55em; margin-right: 4px; }
.plan-price .old-price { font-size: 1.3rem; align-self: center; }
.plan-disc { margin: 0 0 4px; font-size: 0.9rem; color: var(--accent-hi); }
.pick-price s { color: var(--faint); font-weight: 600; font-size: 0.85rem; }
.mp-price .old-price { font-size: 0.9rem; }

/* bildirim çanı */
.bell { position: relative; }
.bell-btn { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(255, 255, 255, 0.04); color: var(--text); cursor: pointer; transition: background-color 0.2s; }
.bell-btn:hover, .bell-btn[aria-expanded="true"] { background: rgba(255, 255, 255, 0.09); }
.bell-btn .ico { width: 20px; height: 20px; }
.bell-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #031018; font-size: 0.7rem; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--bg, #05070d); }
.bell-badge[hidden], .bell-pop[hidden] { display: none; }
.bell-pop { position: absolute; top: calc(100% + 10px); right: 0; width: 360px; max-height: min(70vh, 480px); overflow: auto; border: 1px solid var(--line-strong); border-radius: 16px; background: #0b1020; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); z-index: 60; }
.bell-head { padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.bell-empty { margin: 0; padding: 28px 16px; text-align: center; color: var(--faint); }
.bell-item { display: flex; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.bell-item:last-child { border-bottom: 0; }
a.bell-item:hover { background: rgba(255, 255, 255, 0.05); }
.bell-dot { flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: transparent; }
.bell-item.unread .bell-dot { background: var(--accent); }
.bell-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bell-text b { font-size: 0.95rem; }
.bell-text span { color: var(--dim); font-size: 0.88rem; overflow-wrap: anywhere; }
.bell-text small { color: var(--faint); font-size: 0.78rem; }
@media (max-width: 860px) {
  .bell { position: static; margin-left: auto; margin-right: 8px; }
  .bell-pop { position: fixed; top: 72px; left: 12px; right: 12px; width: auto; max-height: calc(100vh - 96px); }
}

/* sepet: özet, kupon, ödeme adımları */
.how-pay { list-style: none; padding: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.how-pay li { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 0.86rem; line-height: 1.4; }
.how-pay li i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(56, 189, 248, 0.16); color: var(--accent-hi); font: 700 0.78rem var(--font); font-style: normal; }
.how-pay li b { display: block; margin-bottom: 2px; }
@media (max-width: 900px) { .how-pay { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sum-pack { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sum-pack b { font-size: 1.15rem; }
.sum-pack span { color: var(--faint); font-size: 0.88rem; }
.sum-lines { display: grid; }
.sum-lines .sum-line:first-child { border-top: 0; font-size: 1rem; }
.sum-line[hidden] { display: none; }
.sum-line.disc { color: var(--ok, #34d399); }
.sum-coupon { padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sum-coupon .field { margin: 0; }
.coupon-in { display: flex; gap: 8px; align-items: stretch; }
.coupon-in input { flex: 1; min-width: 0; text-transform: uppercase; }
.coupon-on { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.92rem; }
.coupon-on span { display: inline-flex; align-items: center; gap: 6px; color: var(--ok, #34d399); }
.link-btn { background: none; border: 0; padding: 4px 2px; color: var(--accent); font: 650 0.86rem var(--font); cursor: pointer; }
.sum-total { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding-top: 4px; }
.sum-total span { display: flex; flex-direction: column; font-weight: 650; }
.sum-total small { color: var(--faint); font-weight: 500; font-size: 0.78rem; }
.sum-total b { font-size: 1.8rem; letter-spacing: -0.02em; line-height: 1; }

/* bildirim ikonları */
.bell-ico { position: relative; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(56, 189, 248, 0.12); color: var(--accent-hi); }
.bell-item.unread .bell-ico::after { content: ''; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px #0b1020; }
.bell-item.unread .bell-text b { color: #fff; }

/* duyuru bandı: sayfanın en üstünde, tam genişlikte, sade ve ince; rengi duyurunun kendi rengi (--c, /banner.css) */
:root { --ann-h: 36px; }
.ann { position: fixed; top: 0; left: 0; right: 0; z-index: 70; height: var(--ann-h); overflow: hidden; background: #070b14; color: #e8eefc; font-size: 0.84rem; }
.ann-slide { --c: #38bdf8; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 20px; color: inherit; text-decoration: none; visibility: hidden; pointer-events: none; will-change: transform, opacity;
  background: #0b1220; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 20%, #070b14), color-mix(in srgb, var(--c) 7%, #070b14) 50%, color-mix(in srgb, var(--c) 20%, #070b14));
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--c) 38%, transparent); }
.ann-slide.on { visibility: visible; pointer-events: auto; }
.ann.run .ann-slide.on { animation: annIn 0.8s cubic-bezier(0.22, 0.8, 0.2, 1) both; }
.ann-slide.out { visibility: visible; animation: annOut 0.8s cubic-bezier(0.22, 0.8, 0.2, 1) both; }
@keyframes annIn { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes annOut { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-100%); opacity: 0; } }
.ann-chip { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, var(--c) 24%, transparent); color: color-mix(in srgb, var(--c) 70%, #fff); }
.ann-chip .ico { width: 12px; height: 12px; }
.ann-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; letter-spacing: 0.005em; }
.ann-go { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 0.78rem; font-weight: 600; color: color-mix(in srgb, var(--c) 70%, #fff); opacity: 0.85; transition: opacity 0.2s, gap 0.2s; }
.ann-go .ico { width: 12px; height: 12px; }
a.ann-slide:hover .ann-go { opacity: 1; gap: 7px; }
body.has-ann { padding-top: var(--ann-h); }
body.has-ann .nav { top: var(--ann-h); }
@media (max-width: 860px) { body.has-ann .bell-pop { top: calc(72px + var(--ann-h)); max-height: calc(100vh - 110px - var(--ann-h)); } }
@media (max-width: 560px) { .ann { font-size: 0.8rem; } .ann-slide { padding: 0 12px; gap: 8px; } .ann-go { font-size: 0; gap: 0; } .ann-go .ico { width: 14px; height: 14px; } }
/* yönetim: ikon seçici ve renk */
.icon-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.icon-pick label { cursor: pointer; }
.icon-pick input { position: absolute; opacity: 0; pointer-events: none; }
.icon-pick span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line-strong); color: var(--dim); transition: border-color 0.15s, background-color 0.15s, color 0.15s; }
.icon-pick span .ico { width: 19px; height: 19px; }
.icon-pick label:hover span { border-color: rgba(56, 189, 248, 0.5); }
.icon-pick input:checked + span { border-color: var(--accent); background: rgba(56, 189, 248, 0.14); color: var(--accent-hi); }
.icon-pick input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* yönetim: renk seçici ve önizleme */
.color-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; background: var(--c, #38bdf8); cursor: pointer; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18); transition: transform 0.15s, box-shadow 0.15s; }
.swatch:hover { transform: scale(1.1); }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px #0b1020, 0 0 0 4px var(--c, #38bdf8); }
.swatch-custom { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px 0 4px; border-radius: 14px; border: 1px solid var(--line-strong); color: var(--dim); font-size: 0.84rem; cursor: pointer; }
.swatch-custom input { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.ann-prev { position: relative; height: var(--ann-h); margin-top: 10px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.ann-prev .ann-slide { position: absolute; }
.urow-ico.tint { background: color-mix(in srgb, var(--c, #38bdf8) 20%, transparent); color: color-mix(in srgb, var(--c, #38bdf8) 75%, #fff); }
/* yönetim: kenar menü içerikle aynı hizadan başlasın (sayfa uzunsa aşağı itilmesin); ekrandan uzunsa kendi içinde kaysın */
@media (min-width: 961px) {
  .dxa .dx-side { top: 40px; max-height: calc(100vh - 64px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-bottom: 8px; }
}

/* paket ızgaraları: kart sayısına göre sütun; hiçbir satırda tek başına kalan kart olmasın (data-n = paket sayısı, 7 = çok) */
.plan-grid[data-n], .mini-plans[data-n] { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .plan-grid[data-n], .mini-plans[data-n] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-grid[data-n="1"] > :last-child, .plan-grid[data-n="3"] > :last-child, .plan-grid[data-n="5"] > :last-child, .plan-grid[data-n="7"] > :last-child,
  .mini-plans[data-n="1"] > :last-child, .mini-plans[data-n="3"] > :last-child, .mini-plans[data-n="5"] > :last-child, .mini-plans[data-n="7"] > :last-child { grid-column: span 2; }
}
@media (min-width: 1250px) {
  .plan-grid[data-n="3"], .mini-plans[data-n="3"], .plan-grid[data-n="6"], .mini-plans[data-n="6"], .plan-grid[data-n="7"], .mini-plans[data-n="7"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plan-grid[data-n="3"] > :last-child, .mini-plans[data-n="3"] > :last-child, .plan-grid[data-n="7"] > :last-child, .mini-plans[data-n="7"] > :last-child { grid-column: auto; }
  .plan-grid[data-n="5"], .mini-plans[data-n="5"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .plan-grid[data-n="5"] > *, .mini-plans[data-n="5"] > * { grid-column: span 2; }
  .plan-grid[data-n="5"] > :nth-child(n+4), .mini-plans[data-n="5"] > :nth-child(n+4) { grid-column: span 3; }
}
@media (min-width: 1500px) {
  .plan-grid[data-n="4"], .mini-plans[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* hesabım: lisans kartındaki küçük sayaçlar */
.dx-mini { display: flex; gap: 22px; flex-wrap: wrap; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); color: var(--faint); font-size: 0.82rem; }
.dx-mini span { display: flex; align-items: baseline; gap: 6px; }
.dx-mini b { color: var(--text); font-size: 1.25rem; font-weight: 800; }

/* sayfa açılırken duyuru bandı, kaldığı yer bulunana kadar gizli kalır (betik çalışmazsa 1,5 sn sonra yine görünür) */
.ann.wait .ann-slide.on { visibility: hidden; animation: annReveal 0.01s 1.5s forwards; }
@keyframes annReveal { to { visibility: visible; } }

/* ── Hesabım: tek durum kartı, ince uyarı şeritleri, sekmeler ─────────────── */
.ac-notes { display: grid; gap: 8px; }
.ac-note { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line-strong); background: rgba(16, 22, 36, 0.55); font-size: 0.9rem; }
.ac-note > .ico { flex: none; width: 18px; height: 18px; }
.ac-note p { margin: 0; flex: 1; min-width: 0; color: var(--dim); line-height: 1.45; }
.ac-note p b { color: var(--text); }
.ac-note.warn { border-color: rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.07); } .ac-note.warn > .ico { color: #fbbf24; }
.ac-note.pay { border-color: rgba(56, 189, 248, 0.4); background: rgba(56, 189, 248, 0.07); } .ac-note.pay > .ico { color: var(--accent); }
.ac-note.free { border-color: rgba(52, 211, 153, 0.4); background: rgba(52, 211, 153, 0.07); } .ac-note.free > .ico { color: #34d399; }
.ac-note-btns { display: flex; gap: 8px; flex: none; }
.ac-note .btn { flex: none; }

.ac-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); border: 1px solid var(--line-strong); border-radius: 14px; overflow: hidden; background: rgba(16, 22, 36, 0.55); }
.ac-status { padding: 26px 28px; display: grid; gap: 6px; align-content: start; position: relative; }
.ac-status::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--faint); }
.ac-on .ac-status::before { background: #34d399; }
.ac-ended .ac-status::before { background: #fbbf24; }
.ac-kicker { font: 600 0.7rem var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.ac-big { margin-top: 6px; font-size: clamp(2rem, 4.2vw, 2.9rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.ac-big small { margin-left: 10px; font-size: 1.1rem; font-weight: 600; color: var(--dim); letter-spacing: 0; }
.ac-sub { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; color: var(--dim); font-size: 0.92rem; }
.ac-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.ac-on .ac-dot { background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18); }
.ac-ended .ac-dot { background: #fbbf24; }
.ac-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.ac-figs { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--faint); font-size: 0.84rem; }
.ac-figs span { display: flex; align-items: baseline; gap: 6px; }
.ac-figs b { color: var(--text); font-size: 1.3rem; font-weight: 800; }

.ac-start { padding: 26px 24px; border-left: 1px solid var(--line); display: grid; gap: 14px; align-content: start; background: rgba(5, 8, 16, 0.35); }
.ac-start-head { display: flex; align-items: center; justify-content: space-between; }
.ac-count { font: 700 0.8rem var(--mono); color: var(--accent-hi); }
.ac-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.ac-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), #34d399); transition: width 0.6s ease; }
.ac-bar-0 { width: 0; } .ac-bar-1 { width: 33.3%; } .ac-bar-2 { width: 66.6%; } .ac-bar-3 { width: 100%; }
.ac-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ac-steps li { display: flex; align-items: center; gap: 12px; color: var(--dim); font-size: 0.92rem; }
.ac-steps li.done { color: var(--text); }
.ac-mark { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-strong); font: 700 0.75rem var(--font); }
.ac-steps li.done .ac-mark { border-color: transparent; background: #34d399; color: #04130d; }

.ac-buy { border: 1px solid var(--line); border-radius: 14px; background: rgba(16, 22, 36, 0.45); padding: 18px 20px 20px; display: grid; gap: 14px; }
.ac-buy-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ac-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ac-pills[data-n="1"] > :last-child, .ac-pills[data-n="3"] > :last-child, .ac-pills[data-n="5"] > :last-child, .ac-pills[data-n="7"] > :last-child { grid-column: span 2; }
@media (min-width: 640px) {
  .ac-pills[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
  .ac-pills[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ac-pills[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ac-pills[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ac-pills[data-n="5"], .ac-pills[data-n="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ac-pills[data-n="7"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ac-pills > :last-child { grid-column: auto !important; }
  .ac-pills[data-n="5"] > :nth-child(n+4) { grid-column: auto; }
}
.ac-pill { display: grid; gap: 2px; align-content: start; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line-strong); background: rgba(5, 8, 16, 0.4); color: inherit; text-decoration: none; transition: border-color 0.2s, background-color 0.2s, transform 0.2s; }
.ac-pill:hover { border-color: var(--accent); background: rgba(56, 189, 248, 0.08); transform: translateY(-2px); }
.ac-pill-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ac-pill-top b { font-size: 0.92rem; }
.ac-pill-top em { font: 700 0.68rem var(--mono); font-style: normal; padding: 2px 7px; border-radius: 999px; background: rgba(52, 211, 153, 0.16); color: #34d399; white-space: nowrap; }
.ac-pill-price { margin-top: 6px; font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.ac-pill-old { min-height: 1.1em; font-size: 0.8rem; color: var(--faint); }
.ac-pill-old s { text-decoration-thickness: 1px; }
.ac-pill small { margin-top: 4px; color: var(--faint); font-size: 0.8rem; }
.ac-tabs { border: 1px solid var(--line); border-radius: 14px; background: rgba(16, 22, 36, 0.45); overflow: hidden; }
.ac-tablist { display: flex; gap: 4px; padding: 8px 8px 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.ac-tablist button { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border: 0; border-radius: 10px 10px 0 0; background: none; color: var(--dim); font: 600 0.92rem var(--font); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.2s; }
.ac-tablist button:hover { color: var(--text); }
.ac-tablist button.on { color: var(--accent-hi); border-bottom-color: var(--accent); }
.ac-tablist em { font: 700 0.72rem var(--mono); font-style: normal; padding: 2px 7px; border-radius: 999px; background: rgba(56, 189, 248, 0.14); color: var(--accent-hi); }
.ac-panel { padding: 20px; }
.ac-tabs:not(.js) .ac-panel + .ac-panel { border-top: 1px solid var(--line); }
.ac-tabs.js .ac-panel { display: none; }
.ac-tabs.js .ac-panel.on { display: block; }
.ac-tabs:not(.js) .ac-tablist { display: none; }
.ac-panel .ulist { margin: -4px 0; }
.ac-empty { margin: 0; padding: 18px 4px; text-align: center; color: var(--faint); }
.ac-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.ac-block { display: grid; gap: 10px; align-content: start; }
.ac-block h3 { margin: 0; font-size: 1.02rem; }
.ac-block .dx-note { margin: 0; }
.ac-inline { display: flex; gap: 10px; align-items: stretch; }
.ac-inline input { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--line-strong); background: rgba(2, 6, 14, 0.6); color: var(--text); font: 500 0.95rem var(--font); }
.ac-invite code { flex: 1; min-width: 0; display: flex; align-items: center; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--line-strong); background: rgba(2, 6, 14, 0.6); font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-small { margin: 0; color: var(--faint); font-size: 0.84rem; }
.ac-devhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.ac-devhead .dx-note { margin: 0; }
.ac-devhead form { flex: none; }

@media (max-width: 860px) {
  .ac-hero { grid-template-columns: 1fr; }
  .ac-start { border-left: 0; border-top: 1px solid var(--line); }
  .ac-cols { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 640px) {
  .ac-note { flex-wrap: wrap; }
  .ac-note p { flex-basis: calc(100% - 40px); }
  .ac-status, .ac-start { padding: 22px 20px; }
  .ac-buy { align-items: flex-start; flex-direction: column; gap: 10px; }
  .ac-inline { flex-direction: column; }
  .ac-devhead { flex-direction: column; }
}

/* bakiye: hızlı tutar, hareketler, bayi kod alma kartı */
.topup-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(5, 8, 16, 0.4); color: var(--text); font: 600 0.84rem var(--font); cursor: pointer; transition: border-color 0.2s, background-color 0.2s; }
.chip-btn:hover { border-color: var(--accent); background: rgba(56, 189, 248, 0.1); }
.bal-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.bal-head b { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; }
.bal-head .ac-small { flex-basis: 100%; }
.bal-log { display: grid; gap: 4px; }
.bal-row { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--line); }
.bal-row:last-child { border-bottom: 0; }
.bal-ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; }
.bal-ico.in { background: rgba(52, 211, 153, 0.15); color: #34d399; }
.bal-ico.out { background: rgba(251, 191, 36, 0.14); color: #fbbf24; }
.bal-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bal-main b { font-size: 0.92rem; }
.bal-main small { color: var(--faint); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bal-amt { flex: none; font-weight: 800; font-variant-numeric: tabular-nums; }
.bal-amt.in { color: #34d399; }
.bal-amt.out { color: var(--text); }
.ac-sub-h { margin: 22px 0 8px; font-size: 1rem; }
.rs-buy { gap: 12px; }
.rs-buy .field { margin: 0; }
.rs-buy .rs-total { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); }
.rs-buy .rs-total b { font-size: 1.4rem; }

/* sepet: adım başlıkları, paket kartları (radyo), ödeme yöntemi seçenekleri */
.cart-step { border: 1px solid var(--line); border-radius: 14px; background: rgba(16, 22, 36, 0.45); padding: 18px 20px 20px; display: grid; gap: 14px; align-content: start; }
.cart-step[hidden] { display: none; }
.cart-step h2 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 1.02rem; }
.cart-step h2 i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(56, 189, 248, 0.16); color: var(--accent-hi); font: 700 0.78rem var(--font); font-style: normal; }
.cart-step .dx-note { margin: 0; }
.cart-step .row-form { margin: 0; }
.dx-cart-main { display: grid; gap: 14px; align-content: start; }
.cart-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cart-pills .pk { position: relative; cursor: pointer; }
.cart-pills .pk input { position: absolute; opacity: 0; pointer-events: none; }
.cart-pills .pk:has(input:checked) { border-color: var(--accent); background: rgba(56, 189, 248, 0.1); box-shadow: 0 0 0 1px var(--accent) inset; }
.cart-pills .pk:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (min-width: 640px) {
  .cart-pills[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cart-pills[data-n="4"], .cart-pills[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cart-pills[data-n="5"], .cart-pills[data-n="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pay-opts { display: grid; gap: 10px; }
.pay-opt { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line-strong); background: rgba(5, 8, 16, 0.4); cursor: pointer; transition: border-color 0.2s, background-color 0.2s; }
.pay-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pay-opt.on { border-color: var(--accent); background: rgba(56, 189, 248, 0.1); box-shadow: 0 0 0 1px var(--accent) inset; }
.pay-opt:has(input:disabled) { opacity: 0.6; cursor: not-allowed; }
.pay-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.pay-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(56, 189, 248, 0.14); color: var(--accent-hi); }
.pay-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pay-body b { font-size: 0.96rem; }
.pay-body small { color: var(--faint); font-size: 0.82rem; }
.pay-link { flex: none; font-size: 0.84rem; font-weight: 650; color: var(--accent); text-decoration: none; }
.pay-link:hover { text-decoration: underline; }
.cart-more { border: 1px dashed var(--line-strong); border-radius: 10px; padding: 10px 14px; }
.cart-more summary { cursor: pointer; font-weight: 600; font-size: 0.92rem; }
.cart-more summary em { color: var(--faint); font-style: normal; font-weight: 500; }
.cart-more[open] { display: grid; gap: 10px; }
.cart-step .how-pay { margin: 0; }
@media (max-width: 640px) { .pay-opt { flex-wrap: wrap; } .pay-link { margin-left: 52px; } }

/* mobil menü (site, hesap, yönetim): hamburger düğmesi, tıklayınca açılan liste */
.dx-burger { display: none; }
@media (max-width: 960px) {
  .dx-burger { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(16, 22, 36, 0.7); color: var(--text); font: 650 0.95rem var(--font); text-align: left; cursor: pointer; }
  .dx-burger-ico { position: relative; flex: none; width: 20px; height: 14px; }
  .dx-burger-ico i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.3s var(--spring), opacity 0.2s, top 0.3s; }
  .dx-burger-ico i:nth-child(1) { top: 0; } .dx-burger-ico i:nth-child(2) { top: 6px; } .dx-burger-ico i:nth-child(3) { top: 12px; }
  .dx-burger.open .dx-burger-ico i:nth-child(1) { top: 6px; transform: rotate(45deg); }
  .dx-burger.open .dx-burger-ico i:nth-child(2) { opacity: 0; }
  .dx-burger.open .dx-burger-ico i:nth-child(3) { top: 6px; transform: rotate(-45deg); }
  .dx-burger-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dx-burger-k { flex: none; font: 600 0.7rem var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
  .dx.js-burger .dx-side { display: none; position: static; margin: 0; padding: 8px; border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(10, 15, 26, 0.96); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7); max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .dx.js-burger .dx-side.open { display: block; animation: dxDrop 0.25s ease both; }
  @keyframes dxDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .dx.js-burger .dx-nav { display: grid; gap: 2px; }
  .dx.js-burger .dx-side-k { display: block; padding: 8px 12px 4px; }
  .dx.js-burger .dx-side-t { display: none; }
  .dx.js-burger .dx-sep { display: block; width: auto; height: 1px; margin: 8px 4px; background: var(--line); }
  .dx.js-burger .dx-link { width: 100%; padding: 12px; border: 0; border-radius: 8px; background: none; font-size: 0.95rem; }
  .dx.js-burger .dx-link.on { background: rgba(56, 189, 248, 0.14); color: var(--accent-hi); }
  .dx.js-burger .dx-link .dx-ext { display: inline; }
  .dx.js-burger .dx-nav form { display: block; }
}@media (max-width: 480px) { .ac-pill { padding: 12px; } .ac-pill-top { gap: 6px; } .ac-pill-top em { font-size: 0.62rem; padding: 2px 5px; } .ac-pill-top b { font-size: 0.86rem; } .ac-pill-price { font-size: 1.3rem; } }

/* bakiye yükleme: kısa, tek bakışta sığan form + yanında kaydırılabilir hareket listesi */
.topup { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.topup-form { display: grid; gap: 12px; align-content: start; }
.topup-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.topup-head h3, .topup-log h3 { margin: 0; font-size: 1.02rem; }
.topup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.topup-grid .field { margin: 0; }
.topup-grid .topup-amt { grid-column: 1 / -1; }
.topup-grid input { padding: 11px 13px; }
.topup-form .terms { margin: 0; font-size: 0.84rem; }
.topup-form .btn { justify-self: start; }
.topup-log { display: grid; gap: 8px; align-content: start; padding-left: 28px; border-left: 1px solid var(--line); }
.topup-log .bal-log { max-height: 340px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; }
.topup-log .ac-empty { padding: 14px 0; text-align: left; }
@media (max-width: 900px) {
  .topup { grid-template-columns: 1fr; gap: 22px; }
  .topup-log { padding-left: 0; border-left: 0; padding-top: 18px; border-top: 1px solid var(--line); }
}
.ac-pill-note { font-style: normal; font-size: 0.7rem; color: #34d399; margin-left: 4px; }

/* altbilgi: marka + 3 sütun, altta ince şerit */
.footer { margin-top: 80px; padding-top: 8px; }
.ft-top { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 36px 40px; padding: 52px 0 40px; }
.ft-brand p { margin: 14px 0 0; max-width: 34ch; color: var(--faint); line-height: 1.6; font-size: 0.94rem; }
.ft-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.ft-col { display: grid; gap: 4px; align-content: start; }
.ft-col h4 { margin: 0 0 8px; font: 600 0.7rem var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.ft-col a { padding: 5px 0; color: var(--dim); font-weight: 550; font-size: 0.93rem; transition: color 0.2s, transform 0.2s; }
.ft-col a:hover { color: var(--text); transform: translateX(3px); }
.ft-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 20px 0 32px; border-top: 1px solid var(--line); color: var(--faint); font-size: 0.84rem; }
.ft-bottom strong { color: var(--dim); }
@media (max-width: 860px) { .ft-top { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 40px 0 28px; } .ft-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .ft-top { gap: 28px 20px; } .ft-bottom { flex-direction: column; } }

/* sözleşme sayfaları: içindekiler, numaralı bölümler, kartlı dizin */
.lg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lg-meta .dx-chip { display: inline-flex; align-items: center; gap: 6px; }
.lg { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; }
.lg-toc { position: sticky; top: 100px; border: 1px solid var(--line); border-radius: 14px; background: rgba(16, 22, 36, 0.45); padding: 6px; max-height: calc(100vh - 130px); overflow-y: auto; scrollbar-width: thin; }
.lg-toc summary { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; cursor: pointer; list-style: none; font: 600 0.7rem var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.lg-toc summary::-webkit-details-marker { display: none; }
.lg-toc summary .ico { transition: transform 0.25s; }
.lg-toc[open] summary .ico { transform: rotate(180deg); }
.lg-toc ol { list-style: none; margin: 0; padding: 0 0 4px; display: grid; gap: 2px; }
.lg-toc a { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px; border-radius: 8px; color: var(--dim); font-size: 0.88rem; line-height: 1.35; transition: background-color 0.2s, color 0.2s; }
.lg-toc a i { flex: none; width: 18px; font: 700 0.72rem var(--mono); font-style: normal; color: var(--faint); }
.lg-toc a:hover { background: rgba(255, 255, 255, 0.04); color: var(--text); }
.lg-toc a.on { background: rgba(56, 189, 248, 0.12); color: var(--accent-hi); }
.lg-toc a.on i { color: var(--accent); }
.lg-doc { border: 1px solid var(--line); border-radius: 14px; background: rgba(16, 22, 36, 0.45); padding: 12px 36px; }
.lg-sec { padding: 28px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 100px; }
.lg-sec:last-child { border-bottom: 0; }
.lg-sec h2 { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; font-size: 1.2rem; letter-spacing: -0.015em; }
.lg-n { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(56, 189, 248, 0.14); color: var(--accent-hi); font: 700 0.85rem var(--mono); }
.lg-body { padding-left: 44px; max-width: 72ch; }
.lg-body p, .lg-body li { color: var(--dim); line-height: 1.8; font-size: 0.97rem; }
.lg-body p { margin: 0 0 12px; }
.lg-body ul { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 6px; }
.lg-body b { color: var(--text); }
.lg-body a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(56, 189, 248, 0.4); text-underline-offset: 3px; }
.lg-others { display: grid; gap: 12px; margin-top: 8px; }
.lg-others-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.lg-mini { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: rgba(16, 22, 36, 0.45); color: var(--text); font-weight: 600; font-size: 0.92rem; transition: border-color 0.2s, background-color 0.2s; }
.lg-mini .ico { color: var(--accent); flex: none; }
.lg-mini:hover { border-color: var(--accent); background: rgba(56, 189, 248, 0.07); }
.lg-help { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 22px; border-radius: 14px; border: 1px solid rgba(56, 189, 248, 0.3); background: rgba(56, 189, 248, 0.06); }
.lg-help p { margin: 4px 0 0; color: var(--dim); font-size: 0.9rem; }
.lg-help-btns { display: flex; gap: 8px; }
.lg-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lg-card { position: relative; display: flex; align-items: flex-start; gap: 16px; padding: 22px; border-radius: 14px; border: 1px solid var(--line); background: rgba(16, 22, 36, 0.45); color: inherit; transition: border-color 0.2s, background-color 0.2s, transform 0.2s; }
.lg-card:hover { border-color: rgba(56, 189, 248, 0.5); background: rgba(56, 189, 248, 0.06); transform: translateY(-2px); }
.lg-card-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(56, 189, 248, 0.14); color: var(--accent-hi); }
.lg-card-body { display: grid; gap: 6px; min-width: 0; padding-right: 22px; }
.lg-card-body b { font-size: 1.04rem; }
.lg-card-body span { color: var(--dim); font-size: 0.9rem; line-height: 1.5; }
.lg-card-body small { color: var(--faint); font-size: 0.8rem; }
.lg-card-go { position: absolute; right: 18px; top: 22px; color: var(--faint); transition: color 0.2s, transform 0.2s; }
.lg-card:hover .lg-card-go { color: var(--accent); transform: translateX(3px); }
@media (max-width: 1100px) { .lg { grid-template-columns: 1fr; } .lg-toc { position: static; max-height: none; } .lg-toc:not([open]) summary { border-radius: 10px; } }
@media (max-width: 780px) { .lg-index { grid-template-columns: 1fr; } .lg-doc { padding: 6px 20px; } .lg-body { padding-left: 0; } }
/* sözleşme: içindekiler yatay hap sırası, metin tam genişlikte (dar ekranda açılır liste) */
.lg { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.lg-toc { position: static; max-height: none; padding: 0; border: 0; background: none; overflow: visible; }
.lg-toc summary { display: none; }
.lg-toc ol { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; }
.lg-toc a { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(16, 22, 36, 0.45); }
.lg-toc a.on { border-color: var(--accent); }
.lg-doc { padding: 10px 44px; }
.lg-body { padding-left: 0; max-width: none; }
.lg-sec h2 { margin-bottom: 12px; }
@media (max-width: 780px) {
  .lg-toc { border: 1px solid var(--line); border-radius: 14px; background: rgba(16, 22, 36, 0.45); padding: 6px; }
  .lg-toc summary { display: flex; }
  .lg-toc ol { display: grid; gap: 2px; }
  .lg-toc a { border: 0; border-radius: 8px; background: none; }
  .lg-doc { padding: 6px 20px; }
}
/* Admin game page: VPS card */
.gm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.gm-head h2 { margin: 0; }
.gm-rows { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 14px; overflow: hidden; }
.gm-rows > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: start; padding: 11px 14px; }
.gm-rows > div + div { border-top: 1px solid var(--line); }
.gm-rows > div > span { font-size: 0.8rem; font-weight: 650; color: var(--faint); padding-top: 3px; }
.gm-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.gm-chips code { font-size: 0.8rem; padding: 3px 8px; border-radius: 6px; background: rgba(148, 163, 184, 0.1); border: 1px solid var(--line); overflow-wrap: anywhere; }
.gm-ok { display: inline-flex; align-items: center; gap: 5px; font-size: 0.84rem; color: #34d399; }
.gm-help { margin: 0 0 14px; line-height: 1.6; }
.gm-actions { display: flex; justify-content: flex-end; }
@media (max-width: 560px) { .gm-rows > div { grid-template-columns: 1fr; gap: 6px; } }

/* Ping section: compact two-column layout (card + map side by side) */
.ping-grid { grid-template-columns: 1.15fr 1fr; align-items: stretch; }
.ping-grid > .ping-why { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 22px; }
.ping-grid > .ping-why .why-map { width: 100%; align-self: stretch; min-height: 190px; flex: 1 1 auto; }
.ping-grid > .ping-why .why-text { width: 100%; }
.ping-grid > .ping-why .why-text h3 { margin: 0 0 8px; font-size: 1.2rem; }
.ping-grid > .ping-why .why-text p { margin: 0 0 12px; font-size: 0.92rem; line-height: 1.55; }
.ping-card { padding: 22px; gap: 12px; }
.ping-card h3 { font-size: 1.1rem; }
.ping-card .pv { padding: 12px 16px; }
.ping-card .pv-num { font-size: 1.6rem; }
@media (max-width: 900px) { .ping-grid { grid-template-columns: 1fr; } }

/* Ping section: Turkey map */
.ping-grid > .ping-why .why-map { display: grid; place-items: center; padding: 8px; min-height: 0; }
.tr-map { width: 100%; height: auto; display: block; overflow: visible; }
.tr-land { fill: rgba(56, 189, 248, 0.08); stroke: rgba(125, 211, 252, 0.5); stroke-width: 1.4; stroke-linejoin: round; }
.tr-link { fill: none; stroke: rgba(148, 163, 184, 0.35); stroke-width: 1; stroke-dasharray: 3 4; }
.tr-route { fill: none; stroke: url(#trLine); stroke-width: 2; stroke-linecap: round; }
.tr-pulse { fill: #fff; filter: drop-shadow(0 0 5px #fff); }
.tr-dot { fill: #94a3b8; }
.tr-hub { fill: var(--accent); filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.9)); }
.tr-ring { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.tr-you { fill: var(--ok); filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.8)); }
.tr-lbl { fill: var(--dim); font: 600 10.5px var(--font); text-anchor: middle; }
.tr-l { text-anchor: start; transform: translateX(-12px); }
.tr-hubl { fill: var(--accent-hi); font-weight: 700; }
.tr-yl { fill: var(--ok); font-weight: 700; }

.tr-ms rect { fill: rgba(8, 14, 26, 0.92); stroke: rgba(148, 163, 184, 0.4); stroke-width: 1; }
.tr-ms text { fill: var(--dim); font: 700 9.5px var(--font); text-anchor: middle; }
.tr-ms-main rect { stroke: rgba(52, 211, 153, 0.7); }
.tr-ms-main text { fill: var(--ok); }

/* Turkey map: pick your city */
.tr-city { cursor: pointer; outline: none; }
.tr-hit { fill: transparent; }
.tr-city .tr-dot { fill: #94a3b8; transition: fill 0.2s; }
.tr-city:hover .tr-dot, .tr-city:focus-visible .tr-dot { fill: #e2e8f0; }
.tr-city.me .tr-dot { fill: var(--ok); filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.9)); r: 6; }
.tr-city.me .tr-lbl { fill: var(--ok); font-weight: 700; }
.tr-hubg .tr-dot { fill: var(--accent); filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.9)); }
.tr-hubg .tr-lbl { fill: var(--accent-hi); font-weight: 700; }
.tr-hubg.me .tr-dot { fill: var(--accent); }
.tr-city .tr-lbl { text-anchor: middle; pointer-events: none; }
.tr-route.off, .tr-pulse.off, .tr-ms.off { display: none; }
.tr-read { margin: 0 0 6px; font-size: 1rem; color: var(--text); font-weight: 650; }
.tr-read b { color: var(--ok); }

.tr-land.pickable { cursor: pointer; }
.tr-me { pointer-events: none; }
.tr-me.off { display: none; }

/* Admin: visitors */
.vz-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 16px; margin-bottom: 16px; }
.vz-range { display: inline-flex; gap: 4px; padding: 3px; border-radius: 10px; background: rgba(148, 163, 184, 0.1); }
.vz-range a { padding: 6px 12px; border-radius: 8px; font-size: 0.86rem; font-weight: 650; color: var(--dim); }
.vz-range a.on { background: rgba(56, 189, 248, 0.18); color: var(--text); }
.vz-filter select, .vz-q { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line-strong); background: rgba(2, 6, 14, 0.6); color: var(--text); font: 500 0.9rem var(--font); }
.vz-q { flex: 1 1 200px; min-width: 0; }
.vz-check { display: inline-flex; align-items: center; gap: 7px; font-size: 0.86rem; color: var(--dim); }
.vz-live { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px #34d399; }
.vz-chart { display: block; width: 100%; height: 150px; margin-top: 8px; }
.vz-bar { fill: rgba(56, 189, 248, 0.55); }
.vz-bar2 { fill: #34d399; }
.vz-chart g:hover .vz-bar { fill: rgba(56, 189, 248, 0.85); }
.vz-axis { display: flex; justify-content: space-between; margin-top: 4px; font-size: 0.78rem; color: var(--faint); }
.vz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
.vz-grid > .card { padding: 18px 20px; }
.vz-h { margin: 0 0 12px; font-size: 1rem; }
.vz-h2 { margin-top: 18px; }
.vz-li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin-bottom: 11px; font-size: 0.92rem; }
.vz-li small { display: block; color: var(--faint); font-size: 0.76rem; }
.vz-li b { font-variant-numeric: tabular-nums; }
.vz-li progress { grid-column: 1 / -1; width: 100%; height: 5px; border: 0; border-radius: 3px; overflow: hidden; background: rgba(148, 163, 184, 0.14); appearance: none; }
.vz-li progress::-webkit-progress-bar { background: rgba(148, 163, 184, 0.14); }
.vz-li progress::-webkit-progress-value { background: linear-gradient(90deg, #38bdf8, #6366f1); border-radius: 3px; }
.vz-li progress::-moz-progress-bar { background: linear-gradient(90deg, #38bdf8, #6366f1); border-radius: 3px; }
.vz-refs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.vz-refs a, .vz-refs span { padding: 4px 10px; border-radius: 999px; font-size: 0.8rem; color: var(--dim); background: rgba(148, 163, 184, 0.1); border: 1px solid var(--line); }
.vz-refs b { margin-left: 4px; color: var(--text); }
.vz-list { display: grid; }
.vz-row { display: grid; grid-template-columns: minmax(180px, 1.2fr) minmax(120px, 1fr) minmax(130px, 1fr) minmax(200px, 2fr) 110px; gap: 14px; align-items: center; padding: 13px 18px; border-top: 1px solid var(--line); color: inherit; }
.vz-row:hover { background: rgba(56, 189, 248, 0.05); }
.vz-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.vz-ip { font-family: var(--mono); font-size: 0.9rem; }
.vz-kv { display: grid; gap: 1px; min-width: 0; font-size: 0.88rem; }
.vz-kv small { color: var(--faint); font-size: 0.74rem; }
.vz-kv span { overflow-wrap: anywhere; }
.vz-when { text-align: right; }
.vz-pages { display: flex; flex-wrap: wrap; gap: 5px; }
.vz-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 0.76rem; color: var(--dim); background: rgba(148, 163, 184, 0.1); }
.vz-chip.dl { color: #34d399; background: rgba(52, 211, 153, 0.12); }
.vz-chip.more { color: var(--faint); }
.vz-pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 14px; border-top: 1px solid var(--line); }
.vz-foot { margin: 14px 4px 0; }
.vz-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; padding: 18px 20px; margin-bottom: 16px; }
.vz-sum small { display: block; color: var(--faint); font-size: 0.76rem; margin-bottom: 2px; }
.vz-tl { display: grid; }
.vz-ev { display: grid; grid-template-columns: 112px 28px 1fr; gap: 10px; align-items: start; padding: 11px 18px; border-top: 1px solid var(--line); }
.vz-ev time { font-family: var(--mono); font-size: 0.8rem; color: var(--faint); padding-top: 3px; }
.vz-dot { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(148, 163, 184, 0.12); color: var(--dim); }
.vz-ev.dl .vz-dot { background: rgba(52, 211, 153, 0.14); color: #34d399; }
.vz-ev small { display: block; color: var(--faint); font-size: 0.78rem; overflow-wrap: anywhere; }
@media (max-width: 980px) {
  .vz-grid { grid-template-columns: 1fr; }
  .vz-row { grid-template-columns: 1fr 1fr; gap: 8px 14px; }
  .vz-who, .vz-pages { grid-column: 1 / -1; }
  .vz-when { text-align: left; }
}
@media (max-width: 560px) { .vz-ev { grid-template-columns: 1fr; gap: 4px; } .vz-ev .vz-dot { display: none; } }

/* Visitors: flat, minimal look (overrides the first pass above) */
.vz-filter { padding: 0 0 16px; gap: 10px 12px; }
.vz-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 26px; }
.vz-stats > div { padding: 18px 0 16px; }
.vz-stats > div + div { padding-left: 22px; border-left: 1px solid var(--line); }
.vz-stats b { display: block; font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.vz-stats span { font-size: 0.8rem; color: var(--faint); }
.vz-block { margin-bottom: 30px; min-width: 0; }
.vz-grid { gap: 40px; margin: 0; }
.vz-grid > .vz-block { padding: 0; }
.vz-h { margin: 0 0 14px; font-size: 0.78rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.vz-bh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vz-bh .vz-h { margin-bottom: 8px; }
.vz-chart { height: 120px; margin-top: 0; }
.vz-bar { fill: rgba(148, 163, 184, 0.35); }
.vz-bar2 { fill: #38bdf8; }
.vz-chart g:hover .vz-bar { fill: rgba(148, 163, 184, 0.6); }
.vz-li { margin-bottom: 6px; gap: 2px 12px; font-size: 0.86rem; }
.vz-li progress { height: 2px; }
.vz-block { margin-bottom: 20px; }
.vz-stats { margin-bottom: 16px; }
.vz-stats > div { padding: 12px 0 10px; }
.vz-stats b { font-size: 1.5rem; }
.vz-chart { height: 90px; }
.vz-h { margin-bottom: 10px; }
.vz-li progress::-webkit-progress-value { background: #38bdf8; }
.vz-li progress::-moz-progress-bar { background: #38bdf8; }
.vz-refs a, .vz-refs span { border: 0; padding: 3px 9px; }
.vz-row { grid-template-columns: minmax(170px, 1.3fr) minmax(130px, 1fr) minmax(180px, 2fr) 96px; padding: 12px 4px; }
.vz-row:hover { background: rgba(148, 163, 184, 0.06); }
.vz-list .vz-row:first-child { border-top: 0; }
.vz-kv small { font-size: 0.76rem; }
.vz-tag { padding: 2px 8px; border-radius: 6px; font-size: 0.72rem; color: var(--faint); background: rgba(148, 163, 184, 0.1); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vz-tag.in { color: #34d399; background: rgba(52, 211, 153, 0.12); }
.vz-chip { padding: 2px 8px; border-radius: 6px; }
.vz-sum { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 16px 0; }
.vz-mini .vz-bh { margin-bottom: 14px; align-items: center; }
.vz-mini .vz-bh .dx-note { margin: 0; }
.vz-row-s { grid-template-columns: minmax(130px, 1fr) minmax(110px, 1fr) minmax(160px, 2fr) 80px; }
@media (max-width: 980px) {
  .vz-grid { gap: 0; }
  .vz-row, .vz-row-s { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .vz-stats { grid-template-columns: repeat(2, 1fr); } .vz-stats > div:nth-child(3) { padding-left: 0; border-left: 0; } .vz-stats > div:nth-child(n+3) { border-top: 1px solid var(--line); } }
.vz-sum > div { min-width: 0; }
.vz-sum b { display: block; overflow-wrap: anywhere; }

/* Destek talepleri (üye ve yönetim) */
.tk-list { display: grid; gap: 8px; margin: 14px 0 24px; }
.tk-row { display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 14px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.02); color: inherit; text-decoration: none; }
.tk-row:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.04); }
.tk-row.new { border-color: rgba(56, 189, 248, 0.45); }
.tk-id { color: var(--faint); font-family: var(--mono); font-size: 0.85rem; }
.tk-main { display: grid; gap: 2px; min-width: 0; }
.tk-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-main small, .tk-when { color: var(--faint); font-size: 0.8rem; }
.tk-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.tk-empty { display: grid; justify-items: center; gap: 14px; padding: 48px 16px; color: var(--dim); text-align: center; }
.tk-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.tk-filter a { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--dim); text-decoration: none; font-size: 0.88rem; }
.tk-filter a.on { color: var(--text); border-color: var(--accent); }
.tk-filter em { font-style: normal; margin-left: 8px; color: var(--faint); }
.tk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 6px 0 18px; }
.tk-bar small { color: var(--faint); margin-right: auto; }
.tk-thread { display: grid; gap: 14px; margin-bottom: 22px; }
.tk-msg { max-width: min(760px, 100%); padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.02); }
.tk-msg.staff { border-color: rgba(56, 189, 248, 0.35); background: rgba(56, 189, 248, 0.05); }
.tk-msg.mine { justify-self: end; }
.tk-msg header { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 8px; font-size: 0.85rem; }
.tk-msg time { color: var(--faint); }
.tk-body { overflow-wrap: anywhere; line-height: 1.65; }
.tk-body p { margin: 0 0 0.7em; }
.tk-body p:last-child { margin-bottom: 0; }
.tk-body ul, .tk-body ol { margin: 0 0 0.7em 1.3em; padding: 0; }
.tk-body blockquote { margin: 0 0 0.7em; padding: 4px 12px; border-left: 3px solid var(--line-strong); color: var(--dim); }
.tk-body code { padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); font-family: var(--mono); font-size: 0.9em; }
.tk-body pre { margin: 0 0 0.7em; padding: 12px; border-radius: 10px; background: rgba(2, 6, 14, 0.7); overflow-x: auto; font-family: var(--mono); font-size: 0.86rem; }
.tk-body h4 { margin: 0 0 0.4em; font-size: 1rem; }
.tk-body a { color: var(--accent); }
.tk-imgs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.tk-imgs img { display: block; max-width: 220px; max-height: 160px; border-radius: 10px; border: 1px solid var(--line); object-fit: cover; }
.tk-gone { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; border: 1px dashed var(--line); color: var(--faint); font-size: 0.82rem; }
.tk-form { display: grid; gap: 14px; max-width: 860px; }
.tk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tk-attach { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tk-attach input[type="file"] { display: none; }
.tk-files { color: var(--faint); font-size: 0.82rem; margin-right: auto; overflow-wrap: anywhere; }
.tk-editor { max-width: none; }
.tk-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-tools button { min-width: 36px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); color: var(--text); font: 600 0.85rem var(--font); cursor: pointer; }
.tk-tools button:hover { border-color: var(--accent); }
.tk-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tk-preview { min-height: 190px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(2, 6, 14, 0.4); }
.tk-danger { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--faint); font-size: 0.85rem; }
.tk-st-open { color: #fbbf24; }
.admin-bellbar { display: flex; justify-content: flex-end; margin-bottom: 8px; }
@media (max-width: 720px) {
  .tk-row { grid-template-columns: auto 1fr auto; }
  .tk-row .status, .tk-row .tk-when { grid-column: 2 / -1; }
  .tk-two, .tk-split { grid-template-columns: 1fr; }
  .tk-msg.mine { justify-self: stretch; }
}

.field[hidden] { display: none; }
.tk-team { display: grid; gap: 8px; margin: 14px 0 22px; }
.tk-team .tk-row { grid-template-columns: 1fr auto; }
.tk-add { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; max-width: 560px; }
.tk-add .field { flex: 1 1 260px; }

.tk-msg.theirs { justify-self: start; }
.tk-msg.mine { justify-self: end; }

/* Special panels in the member menu (Bayilik, Destek ekibi): their own colour so they are not mistaken for ordinary links */
.dx-panels { gap: 8px; }
.dx-panel { --pn: 56, 189, 248; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(var(--pn), 0.35); background: rgba(var(--pn), 0.1); color: rgb(var(--pn)); font-weight: 650; text-decoration: none; }
.dx-panel:hover, .dx-panel.on { background: rgba(var(--pn), 0.2); border-color: rgba(var(--pn), 0.65); }
.dx-panel .ico { flex: none; }
.dx-panel.pn-reseller { --pn: 251, 191, 36; }
.dx-panel.pn-team { --pn: 52, 211, 153; }

.tk-two:has(> [hidden]) { grid-template-columns: 1fr; }

/* Destek ekibi editörü: Trix (assets/trix.css) koyu temaya uyarlandı. Trix'in eklediği <style> CSP yüzünden uygulanmaz; gerekenler burada. */
.tk-editor trix-toolbar, .tk-editor trix-editor { display: block; }
.tk-editor trix-toolbar { margin-bottom: 8px; }
.tk-editor trix-toolbar .trix-button-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-editor trix-toolbar .trix-button-group { display: flex; margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: rgba(255, 255, 255, 0.03); }
.tk-editor trix-toolbar .trix-button { border: 0; border-radius: 0; background: transparent; color: var(--text); }
.tk-editor trix-toolbar .trix-button:not(:first-child) { border-left: 1px solid var(--line); }
.tk-editor trix-toolbar .trix-button::before { filter: invert(1); opacity: 0.85; }
.tk-editor trix-toolbar .trix-button:disabled::before { opacity: 0.25; }
.tk-editor trix-toolbar .trix-button:hover { background: rgba(255, 255, 255, 0.08); }
.tk-editor trix-toolbar .trix-button.trix-active { background: rgba(56, 189, 248, 0.28); }
.tk-editor trix-toolbar .trix-button-group--file-tools, .tk-editor trix-toolbar .trix-button-group-spacer { display: none; }
.tk-editor trix-toolbar .trix-dialog { background: #0b1220; border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); color: var(--text); }
.tk-editor trix-toolbar .trix-input--dialog { background: rgba(2, 6, 14, 0.85); color: var(--text); border: 1px solid var(--line-strong); border-radius: 8px; }
.tk-editor trix-toolbar .trix-button--dialog { background: rgba(255, 255, 255, 0.06); color: var(--text); border: 1px solid var(--line-strong); border-radius: 8px; }
.tk-editor trix-editor.tk-trix { min-height: 190px; max-height: 460px; overflow: auto; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(2, 6, 14, 0.6); color: var(--text); font: inherit; line-height: 1.6; }
.tk-editor trix-editor.tk-trix:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.15); }
.tk-editor trix-editor.tk-trix:empty:not(:focus)::before { color: var(--faint); }
.tk-editor trix-editor.tk-trix a { color: var(--accent); }
.tk-editor trix-editor.tk-trix pre { padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.07); color: inherit; font-family: var(--mono); }
.tk-editor trix-editor.tk-trix blockquote { margin: 0 0 0 4px; padding-left: 12px; border-left: 3px solid var(--line-strong); color: var(--dim); }
.tk-editor trix-editor.tk-trix h1 { font-size: 1.15rem; margin: 0 0 0.3em; }
.tk-body div { margin: 0; }
.tk-editor trix-toolbar [data-trix-dialog] { display: none; }
.tk-editor trix-toolbar [data-trix-dialog][data-trix-active] { display: block; }
.tk-editor trix-toolbar .trix-dialog { position: relative; margin-top: 8px; padding: 12px; }
.tk-editor trix-toolbar .trix-dialog__link-fields { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tk-editor trix-toolbar .trix-dialog__link-fields .trix-input { flex: 1 1 240px; padding: 8px 10px; }
.tk-editor trix-toolbar .trix-button-row { justify-content: flex-start; }
.tk-editor trix-toolbar .trix-button-group { flex: none; }
.tk-editor trix-editor.tk-trix:empty:not(:focus)::before { content: attr(placeholder); pointer-events: none; }

.tk-tpl { display: flex; flex-wrap: wrap; align-items: end; gap: 6px 14px; }
.tk-tpl .field { flex: 1 1 320px; max-width: 520px; }
.tk-tpl small { padding-bottom: 12px; }

/* Bildirim şeridi kaybolurken yerini de bırakır */
.flash[data-flash] { max-height: 240px; overflow: hidden; }
.flash[data-flash].gone { max-height: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0; transition: opacity 0.5s, transform 0.5s, max-height 0.5s 0.2s, margin 0.5s 0.2s, padding 0.5s 0.2s, border-width 0.5s 0.2s; }

/* Bildirimler (toast) */
.toasts { position: fixed; z-index: 1200; top: 18px; right: 18px; display: grid; gap: 10px; width: min(380px, calc(100vw - 36px)); pointer-events: none; }
.toast { --tc: 52, 211, 153; position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 13px 12px 15px 14px; border-radius: 14px; overflow: hidden; pointer-events: auto;
  background: rgba(10, 16, 28, 0.94); border: 1px solid rgba(var(--tc), 0.35); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  color: var(--text); animation: toast-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
.toast-err { --tc: 248, 113, 113; }
.toast.out { animation: toast-out 0.3s ease forwards; }
.toast-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(var(--tc), 0.16); color: rgb(var(--tc)); }
.toast-ico svg { width: 16px; height: 16px; }
.toast p { margin: 0; font-size: 0.92rem; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.toast-x { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--faint); cursor: pointer; }
.toast-x:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }
.toast-x svg { width: 14px; height: 14px; }
.toast-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: rgb(var(--tc)); transform-origin: left; animation: toast-bar 5s linear forwards; }
.toast-err .toast-bar { animation-duration: 8s; }
.toast:hover .toast-bar { animation-play-state: paused; }
@keyframes toast-in { from { opacity: 0; transform: translateX(24px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(24px) scale(0.96); } }
@keyframes toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 560px) { .toasts { top: 10px; right: 10px; left: 10px; width: auto; } }
@media (prefers-reduced-motion: reduce) { .toast, .toast.out { animation-duration: 0.01s; } }

/* Sohbet kutusu: sabit yükseklik, kendi içinde kayar; en son mesajlar altta (WhatsApp gibi) */
.tk-thread { max-height: min(62vh, 600px); min-height: 160px; overflow-y: auto; overscroll-behavior: contain; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.015); align-content: start; scrollbar-width: thin; }
.tk-thread::-webkit-scrollbar { width: 8px; }
.tk-thread::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 8px; }
.tk-msg { max-width: min(640px, 88%); }
.tk-msg.mine { background: rgba(56, 189, 248, 0.1); border-color: rgba(56, 189, 248, 0.35); border-bottom-right-radius: 4px; }
.tk-msg.theirs { border-bottom-left-radius: 4px; }
.tk-msg.staff.theirs { background: rgba(255, 255, 255, 0.04); border-color: var(--line-strong); }
@media (max-width: 720px) { .tk-thread { max-height: 56vh; padding: 10px; } .tk-msg { max-width: 96%; } }

.tk-closed { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 14px; background: rgba(255, 255, 255, 0.03); color: var(--dim); }
.tk-closed b { color: var(--text); }
.tk-closed span { flex: 1 1 260px; font-size: 0.9rem; }

/* Özel paneller: sade ama ayırt edilir. Sol renkli çizgi + renkli simge, kutu dolgusu yok. */
.dx-panels { gap: 2px; }
.dx-panel { gap: 10px; padding: 9px 12px 9px 11px; border: 0; border-left: 3px solid rgb(var(--pn)); border-radius: 0 10px 10px 0; background: transparent; color: var(--text); font-weight: 600; }
.dx-panel .ico { color: rgb(var(--pn)); }
.dx-panel:hover { background: rgba(var(--pn), 0.1); border-color: rgb(var(--pn)); }
.dx-panel.on { background: rgba(var(--pn), 0.14); border-color: rgb(var(--pn)); }

.dx-panel .dx-count { margin-left: auto; font-style: normal; }

/* ───────── Bayilik paneli ───────── */
.by-nav { display: flex; gap: 4px; margin: 0 0 22px; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.02); overflow-x: auto; scrollbar-width: none; }
.by-nav::-webkit-scrollbar { display: none; }
.by-nav a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; color: var(--dim); font-weight: 600; font-size: 0.9rem; white-space: nowrap; text-decoration: none; }
.by-nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.by-nav a.on { color: var(--text); background: rgba(251, 191, 36, 0.14); box-shadow: inset 0 -2px 0 rgb(251, 191, 36); }
.by-nav em { font-style: normal; min-width: 18px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: var(--text); font-size: 0.72rem; line-height: 18px; text-align: center; }
.by-sec { margin: 0 0 30px; }
.by-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.by-sec-head h2 { margin: 0; font-size: 1.1rem; }
.by-sec-head a { font-size: 0.85rem; color: var(--accent); text-decoration: none; }
.by-sub { margin: 20px 0 10px; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.by-note { margin-top: 12px; }
.by-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.by-tiles-2 { grid-template-columns: repeat(2, 1fr); }
.by-tile { display: grid; gap: 4px; align-content: start; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.02); }
.by-tile small { color: var(--dim); font-size: 0.78rem; font-weight: 600; }
.by-tile b { font-size: 1.6rem; line-height: 1.15; letter-spacing: -0.01em; }
.by-tile span { color: var(--faint); font-size: 0.78rem; line-height: 1.35; }
.by-tile.accent { border-color: rgba(56, 189, 248, 0.35); background: rgba(56, 189, 248, 0.06); }
.by-tile.good { border-color: rgba(52, 211, 153, 0.35); background: rgba(52, 211, 153, 0.06); }
.by-tile.warn { border-color: rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.06); }
.by-list { display: grid; gap: 8px; }
.by-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.02); }
.by-row.dim { opacity: 0.72; }
.by-who, .by-meta { display: grid; gap: 3px; min-width: 0; }
.by-who b, .by-meta b { font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.by-who small, .by-meta small { color: var(--faint); font-size: 0.78rem; overflow-wrap: anywhere; }
.by-acts { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.by-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; background: rgba(255, 255, 255, 0.08); color: var(--dim); }
.by-chip.st-active, .by-chip.st-used { background: rgba(52, 211, 153, 0.16); color: #6ee7b7; }
.by-chip.st-soon { background: rgba(251, 191, 36, 0.18); color: #fcd34d; }
.by-chip.st-ended { background: rgba(248, 113, 113, 0.16); color: #fca5a5; }
.by-chip.st-wait { background: rgba(56, 189, 248, 0.16); color: #7dd3fc; }
.by-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.by-filter a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--dim); font-size: 0.86rem; text-decoration: none; }
.by-filter a.on { color: var(--text); border-color: var(--accent); background: rgba(56, 189, 248, 0.08); }
.by-filter em { font-style: normal; color: var(--faint); font-size: 0.78rem; }
.by-pager { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 18px 0 0; color: var(--dim); font-size: 0.88rem; }
.by-pager a { padding: 7px 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); text-decoration: none; }
.by-pager a:hover { border-color: var(--accent); }
.by-pager small { color: var(--faint); }
.by-empty { display: grid; gap: 10px; justify-items: start; padding: 22px; border: 1px dashed var(--line-strong); border-radius: 14px; color: var(--dim); }
.by-empty b { color: var(--text); }
.by-buy { display: grid; grid-template-columns: minmax(0, 380px) 1fr; gap: 20px; align-items: start; }
.by-prices { display: grid; gap: 8px; align-content: start; }
.by-price { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; }
.by-price span { display: grid; gap: 2px; }
.by-price small { color: var(--faint); font-size: 0.76rem; }
.by-price-n { text-align: right; }
.by-price-n b { font-size: 1.05rem; }
.by-share { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 0 0 24px; padding: 16px 18px; border: 1px solid rgba(56, 189, 248, 0.35); border-radius: 14px; background: rgba(56, 189, 248, 0.06); }
.by-share > div:first-child { display: grid; gap: 6px; min-width: 0; }
.by-share code { font-size: 0.95rem; overflow-wrap: anywhere; }
.by-share-btns { display: flex; gap: 8px; }
.by-form { display: grid; gap: 16px; max-width: 640px; }
.by-two { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
.by-slug { display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(2, 6, 14, 0.6); overflow: hidden; }
.by-slug i { padding: 0 4px 0 14px; font-style: normal; color: var(--faint); white-space: nowrap; font-size: 0.9rem; }
.by-slug input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; padding-left: 0 !important; }
.by-form-actions { display: flex; gap: 10px; }
.by-how { margin: 0; padding-left: 20px; display: grid; gap: 10px; color: var(--dim); line-height: 1.55; }
.by-how b { color: var(--text); }
.by-msgs { display: grid; gap: 14px; }
.by-msg { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.02); }
.by-msg header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.by-msg h3 { margin: 0; font-size: 1rem; }
.by-msg pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 0.9rem; line-height: 1.6; color: var(--dim); }
/* bayinin herkese açık sayfası */
.by-pub { padding-top: 40px; padding-bottom: 60px; }
.by-pub-card { display: grid; gap: 18px; padding: 34px; text-align: center; justify-items: center; }
.by-pub-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.1); color: #fcd34d; font-size: 0.8rem; font-weight: 700; }
.by-pub h1 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.4rem); }
.by-pub-text { margin: 0; max-width: 520px; color: var(--dim); line-height: 1.65; overflow-wrap: anywhere; }
.by-pub-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.by-pub-points { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; text-align: left; max-width: 480px; }
.by-pub-points li { display: flex; gap: 10px; color: var(--dim); font-size: 0.92rem; line-height: 1.5; }
.by-pub-points .ico { flex: none; margin-top: 3px; color: #34d399; }
.by-pub-points b { color: var(--text); }
.by-pub-links { margin: 0; font-size: 0.85rem; color: var(--faint); }
@media (max-width: 900px) { .by-tiles { grid-template-columns: repeat(2, 1fr); } .by-buy { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .by-row { grid-template-columns: 1fr auto; }
  .by-row .by-meta { grid-column: 1 / -1; grid-row: 2; }
  .by-acts { grid-row: 1; grid-column: 2; }
  .by-two { grid-template-columns: 1fr; }
  .by-pub-card { padding: 22px 16px; }
}
@media (max-width: 420px) { .by-tiles { gap: 8px; } .by-tile { padding: 12px; } .by-tile b { font-size: 1.3rem; } }

.by-pub { padding-top: 120px; }

.by-row > .by-chip { justify-self: start; }
.by-meta b .by-chip { vertical-align: middle; }

.by-who .codechip { justify-self: start; width: fit-content; max-width: 100%; }

.by-two { align-items: start; }

.by-nav { margin: 0 0 26px; }

.by-setup { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 22px; padding: 14px 16px; border: 1px solid rgba(251, 191, 36, 0.45); border-left-width: 4px; border-radius: 14px; background: rgba(251, 191, 36, 0.08); }
.by-setup .ico { flex: none; color: #fbbf24; width: 22px; height: 22px; }
.by-setup p { flex: 1 1 320px; margin: 0; color: var(--dim); font-size: 0.9rem; line-height: 1.5; }
.by-setup p b { color: var(--text); }

.by-empty { margin-top: 16px; gap: 14px; padding: 24px; }
.by-tiles + .by-list, .by-tiles + .by-empty { margin-top: 16px; }

.by-hint { color: var(--faint); font-size: 0.8rem; line-height: 1.4; }
.by-hint.ok { color: #6ee7b7; font-weight: 600; }
.by-hint.err { color: #fca5a5; font-weight: 600; }
.by-hint a { color: var(--accent); text-decoration: none; }
.by-result { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 0 0 18px; padding: 13px 16px; border-radius: 14px; border: 1px solid rgba(52, 211, 153, 0.45); background: rgba(52, 211, 153, 0.09); }
.by-result .ico { flex: none; color: #34d399; }
.by-result p { flex: 1 1 240px; margin: 0; font-weight: 600; }
.by-result.err { border-color: rgba(248, 113, 113, 0.5); background: rgba(248, 113, 113, 0.09); }
.by-result.err .ico { color: #f87171; }

/* ───────── Bayinin kendi sayfası (kendi çerçevesi, kendi rengi) ───────── */
.by-site { --by: 56, 189, 248; min-height: 100vh; display: flex; flex-direction: column; background: #05070d; color: var(--text); }
.by-theme-cyan { --by: 34, 211, 238; } .by-theme-green { --by: 52, 211, 153; } .by-theme-purple { --by: 167, 139, 250; } .by-theme-amber { --by: 251, 191, 36; } .by-theme-rose { --by: 251, 113, 133; }
.by-site main { flex: 1; width: min(920px, 100% - 32px); margin: 0 auto; padding: 8px 0 40px; display: grid; gap: 56px; }
.by-glow { position: fixed; inset: 0 0 auto 0; height: 560px; pointer-events: none; z-index: 0; background: radial-gradient(60% 80% at 50% -10%, rgba(var(--by), 0.28), transparent 70%), radial-gradient(40% 50% at 85% 10%, rgba(var(--by), 0.12), transparent 70%); }
.by-top, .by-site main, .by-foot { position: relative; z-index: 1; }
.by-top { padding: 14px 0; }
.by-top-in { width: min(920px, 100% - 32px); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.by-top-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.by-top-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.98rem; }
.by-av { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-style: normal; font-weight: 800; color: #04101d; background: linear-gradient(135deg, rgb(var(--by)), rgba(var(--by), 0.6)); }
.by-av-lg { width: 76px; height: 76px; border-radius: 22px; font-size: 2rem; box-shadow: 0 14px 40px rgba(var(--by), 0.35); }
.by-top-brand { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--dim); font-size: 0.82rem; font-weight: 600; text-decoration: none; }
.by-top-brand:hover { color: var(--text); border-color: var(--line-strong); }
.by-hero { display: grid; justify-items: center; gap: 18px; padding: 56px 0 8px; text-align: center; }
.by-hero-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(var(--by), 0.45); background: rgba(var(--by), 0.12); color: rgb(var(--by)); font-size: 0.8rem; font-weight: 700; }
.by-hero h1 { margin: 0; font-size: clamp(2.1rem, 6vw, 3.6rem); line-height: 1.08; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.by-hero-text { margin: 0; max-width: 560px; color: var(--dim); font-size: 1.08rem; line-height: 1.7; overflow-wrap: anywhere; }
.by-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 6px; }
.by-site .btn-primary { background: linear-gradient(135deg, rgb(var(--by)), rgba(var(--by), 0.72)); box-shadow: 0 10px 30px rgba(var(--by), 0.3); color: #04101d; }
.by-steps h2, .by-why h2, .by-final h2 { margin: 0 0 20px; font-size: 1.35rem; text-align: center; }
.by-steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.by-steps li { display: flex; gap: 16px; align-items: flex-start; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.025); }
.by-steps li i { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-style: normal; font-weight: 800; color: rgb(var(--by)); background: rgba(var(--by), 0.14); border: 1px solid rgba(var(--by), 0.4); }
.by-steps li div { display: grid; gap: 4px; }
.by-steps li span { color: var(--dim); line-height: 1.55; font-size: 0.94rem; }
.by-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.by-why article { display: grid; gap: 8px; align-content: start; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.025); }
.by-why article .ico { width: 22px; height: 22px; color: rgb(var(--by)); }
.by-why article span { color: var(--dim); font-size: 0.9rem; line-height: 1.5; }
.by-final { display: grid; justify-items: center; padding: 34px 20px; border: 1px solid rgba(var(--by), 0.35); border-radius: 22px; background: linear-gradient(180deg, rgba(var(--by), 0.12), rgba(var(--by), 0.03)); text-align: center; }
.by-final h2 { margin-bottom: 18px; }
.by-foot { padding: 24px 16px 34px; text-align: center; color: var(--faint); font-size: 0.82rem; border-top: 1px solid var(--line); }
.by-foot p { margin: 4px 0; }
.by-foot a { color: var(--dim); text-decoration: none; }
.by-foot a:hover { color: var(--text); }
@media (max-width: 720px) { .by-why-grid { grid-template-columns: 1fr; } .by-site main { gap: 40px; } .by-hero { padding-top: 30px; } .by-top-brand span { display: none; } }
/* sayfa rengi seçici (panelde) */
.by-colors { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.by-colors legend { margin: 0 0 8px; padding: 0; font-size: 0.84rem; font-weight: 650; color: var(--dim); }
.by-sw { --by: 56, 189, 248; position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 0.84rem; color: var(--dim); }
.by-sw.c-cyan { --by: 34, 211, 238; } .by-sw.c-green { --by: 52, 211, 153; } .by-sw.c-purple { --by: 167, 139, 250; } .by-sw.c-amber { --by: 251, 191, 36; } .by-sw.c-rose { --by: 251, 113, 133; }
.by-sw input { position: absolute; opacity: 0; pointer-events: none; }
.by-sw::before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: rgb(var(--by)); }
.by-sw:has(input:checked) { color: var(--text); border-color: rgb(var(--by)); background: rgba(var(--by), 0.12); }
.by-sw:has(input:focus-visible) { outline: 2px solid rgb(var(--by)); outline-offset: 2px; }

/* Bayi sayfası v2: onaylı bayi kartı, ayrıcalıklar */
.by-hero2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 36px; align-items: center; padding: 48px 0 4px; }
.by-hero2-main { display: grid; gap: 18px; justify-items: start; }
.by-hero2 h1 { margin: 0; font-size: clamp(2.1rem, 5.4vw, 3.4rem); line-height: 1.08; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.by-hero2 .by-hero-text { max-width: 520px; }
.by-hero-cta.by-left { justify-content: flex-start; }
.by-verified { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(var(--by), 0.5); background: rgba(var(--by), 0.12); color: rgb(var(--by)); font-size: 0.82rem; }
.by-verified em { font-style: normal; color: var(--dim); font-weight: 500; }
.by-verified em::before { content: '·'; margin-right: 8px; color: var(--faint); }
.by-card { display: grid; gap: 16px; padding: 22px; border: 1px solid rgba(var(--by), 0.4); border-radius: 22px; background: linear-gradient(180deg, rgba(var(--by), 0.14), rgba(255, 255, 255, 0.02)); box-shadow: 0 20px 60px rgba(var(--by), 0.16); }
.by-card-top { display: flex; align-items: center; gap: 14px; min-width: 0; }
.by-card-top .by-av-lg { width: 56px; height: 56px; border-radius: 16px; font-size: 1.5rem; }
.by-card-top > div { display: grid; gap: 4px; min-width: 0; }
.by-card-top b { overflow-wrap: anywhere; line-height: 1.2; }
.by-card-ok { display: inline-flex; align-items: center; gap: 6px; color: rgb(var(--by)); font-size: 0.8rem; font-weight: 700; }
.by-card dl { margin: 0; display: grid; gap: 0; }
.by-card dl > div { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.86rem; }
.by-card dt { color: var(--faint); }
.by-card dd { margin: 0; color: var(--text); text-align: right; overflow-wrap: anywhere; }
.by-mono { font-family: var(--mono); font-size: 0.8rem; }
.by-card-note { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.25); color: var(--dim); font-size: 0.8rem; line-height: 1.45; }
.by-card-note b { color: var(--text); }
.by-perks h2 { margin: 0 0 20px; font-size: 1.35rem; text-align: center; }
.by-perks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.by-perks article { display: grid; gap: 8px; align-content: start; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.025); transition: border-color 0.2s, transform 0.2s; }
.by-perks article:hover { border-color: rgba(var(--by), 0.5); transform: translateY(-2px); }
.by-perks article .ico { width: 24px; height: 24px; padding: 5px; box-sizing: content-box; border-radius: 10px; color: rgb(var(--by)); background: rgba(var(--by), 0.14); }
.by-perks article b { font-size: 1rem; }
.by-perks article span { color: var(--dim); font-size: 0.88rem; line-height: 1.55; }
.by-steps-row ol { grid-template-columns: repeat(3, 1fr); }
.by-steps-row li { flex-direction: column; gap: 12px; }
@media (max-width: 860px) { .by-hero2 { grid-template-columns: 1fr; gap: 24px; padding-top: 28px; } .by-perks-grid, .by-steps-row ol { grid-template-columns: 1fr; } .by-steps-row li { flex-direction: row; } }

/* bayi sayfası: güvenli kullanım kuralları */
.by-safe { display: grid; gap: 18px; padding: 26px; border: 1px solid rgba(251, 191, 36, 0.4); border-radius: 22px; background: linear-gradient(180deg, rgba(251, 191, 36, 0.1), rgba(251, 191, 36, 0.02)); }
.by-safe-head { display: flex; align-items: center; gap: 12px; }
.by-safe-head .ico { flex: none; width: 26px; height: 26px; color: #fbbf24; }
.by-safe-head h2 { margin: 0; font-size: 1.3rem; }
.by-safe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.by-safe-grid article { display: grid; gap: 8px; align-content: start; padding: 18px; border: 1px solid rgba(251, 191, 36, 0.25); border-radius: 16px; background: rgba(0, 0, 0, 0.22); }
.by-safe-grid i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-style: normal; font-weight: 800; font-size: 0.85rem; color: #1a1203; background: #fbbf24; }
.by-safe-grid b { font-size: 1rem; }
.by-safe-grid span { color: var(--dim); font-size: 0.88rem; line-height: 1.55; }
.by-safe-grid span b { color: var(--text); font-size: inherit; }
.by-safe-grid a { color: #fcd34d; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) { .by-safe { padding: 18px; } .by-safe-grid { grid-template-columns: 1fr; } }

/* Aynı kutu düzeninde, farklı renkli uyarı kartları (amber) */
.by-perks article.warn { border-color: rgba(251, 191, 36, 0.35); background: rgba(251, 191, 36, 0.05); }
.by-perks article.warn:hover { border-color: rgba(251, 191, 36, 0.7); }
.by-perks article.warn .ico { color: #fbbf24; background: rgba(251, 191, 36, 0.14); }
.by-perks article.warn a { color: #fcd34d; text-decoration: underline; text-underline-offset: 3px; }
.by-perks article.warn span b { color: var(--text); font-size: inherit; }

.by-codeex { justify-self: start; width: fit-content; font-size: 0.85rem; }
.by-perks article.warn .by-codeex { margin-top: 2px; }

/* Bayilik: tanıtım ve başvuru sayfaları */
.bk-sec { margin: 0 0 40px; }
.bk-sec h2 { margin: 0 0 14px; font-size: 1.35rem; }
.bk-lead { margin: 0 0 18px; color: var(--dim); line-height: 1.7; max-width: 760px; }
.bk-lead b { color: var(--text); }
.bk-code { display: grid; gap: 12px; padding: 20px; border: 1px solid rgba(56, 189, 248, 0.35); border-radius: 16px; background: rgba(56, 189, 248, 0.06); }
.bk-code > div { display: grid; gap: 8px; justify-items: start; }
.bk-code-k { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.bk-code .codechip { font-size: 1.25rem; padding: 10px 16px; }
.bk-code p { margin: 0; color: var(--dim); line-height: 1.6; font-size: 0.92rem; }
.bk-code p b { color: var(--text); }
.bk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bk-two article { padding: 20px; border-radius: 16px; border: 1px solid var(--line); }
.bk-two h3 { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; font-size: 1rem; }
.bk-two ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: var(--dim); font-size: 0.92rem; line-height: 1.55; }
.bk-two b { color: var(--text); }
.bk-two a { color: var(--accent); }
.bk-yes { border-color: rgba(52, 211, 153, 0.35) !important; background: rgba(52, 211, 153, 0.05); }
.bk-yes h3 .ico { color: #34d399; }
.bk-no { border-color: rgba(251, 191, 36, 0.35) !important; background: rgba(251, 191, 36, 0.05); }
.bk-no h3 .ico { color: #fbbf24; }
.bk-note { margin: 14px 0 0; padding: 14px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); color: var(--dim); font-size: 0.9rem; line-height: 1.6; }
.bk-note b { color: var(--text); }
.bk-note code { font-family: var(--mono); color: var(--text); }
.bk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.bk-grid article { display: grid; gap: 8px; align-content: start; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.02); }
.bk-grid .ico { width: 22px; height: 22px; padding: 5px; box-sizing: content-box; border-radius: 10px; color: var(--accent); background: rgba(56, 189, 248, 0.12); }
.bk-grid span { color: var(--dim); font-size: 0.88rem; line-height: 1.55; }
.bk-steps { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.bk-steps li { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1px solid var(--line); border-radius: 14px; }
.bk-steps i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-style: normal; font-weight: 800; color: var(--accent); background: rgba(56, 189, 248, 0.12); border: 1px solid rgba(56, 189, 248, 0.4); }
.bk-steps li div { display: grid; gap: 3px; }
.bk-steps li span { color: var(--dim); font-size: 0.9rem; line-height: 1.5; }
.bk-steps a { color: var(--accent); }
.bk-cta { display: flex; }
.bk-faq { display: grid; gap: 8px; }
.bk-faq details { border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.02); }
.bk-faq summary { padding: 14px 16px; cursor: pointer; font-weight: 650; list-style: none; }
.bk-faq summary::-webkit-details-marker { display: none; }
.bk-faq summary::after { content: '+'; float: right; color: var(--faint); font-weight: 400; }
.bk-faq details[open] summary::after { content: '–'; }
.bk-faq p { margin: 0; padding: 0 16px 16px; color: var(--dim); line-height: 1.65; font-size: 0.92rem; }
.bk-form { display: grid; gap: 16px; max-width: 760px; }
.bk-two2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.bk-done { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border: 1px solid rgba(52, 211, 153, 0.45); border-radius: 16px; background: rgba(52, 211, 153, 0.08); max-width: 760px; }
.bk-done .ico { flex: none; color: #34d399; width: 24px; height: 24px; }
.bk-done div { display: grid; gap: 6px; }
.bk-done span { color: var(--dim); line-height: 1.6; }
.bk-done a { color: var(--accent); }
.bk-apps { display: grid; gap: 12px; }
.bk-app { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.02); display: grid; gap: 10px; }
.bk-app header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.bk-app header div { display: grid; gap: 3px; min-width: 0; }
.bk-app header small { color: var(--faint); overflow-wrap: anywhere; }
.bk-app-meta { margin: 0; color: var(--faint); font-size: 0.82rem; }
.bk-app-about { margin: 0; color: var(--dim); line-height: 1.6; font-size: 0.92rem; overflow-wrap: anywhere; }
.bk-app-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bk-app-acts form { display: flex; gap: 8px; align-items: center; }
.bk-disc { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--dim); }
.bk-disc input { width: 70px; padding: 6px 8px; }
@media (max-width: 860px) { .bk-two, .bk-grid, .bk-two2 { grid-template-columns: 1fr; } }

.bk-disc input { background: rgba(2, 6, 14, 0.6); color: var(--text); border: 1px solid var(--line-strong); border-radius: 8px; }

/* Başvuru onayı: indirim kutusu */
.bk-app-acts { padding-top: 4px; }
.bk-app-acts form { align-items: center; flex-wrap: wrap; }
.bk-disc { display: inline-flex; align-items: center; gap: 10px; color: var(--dim); font-size: 0.82rem; font-weight: 600; }
.bk-disc-box { display: inline-flex; align-items: center; height: 38px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(2, 6, 14, 0.7); transition: border-color 0.15s, box-shadow 0.15s; }
.bk-disc-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.15); }
.bk-disc-box i { font-style: normal; color: var(--faint); font-weight: 700; margin-right: 4px; }
.bk-disc input { width: 48px; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--text); font: 700 1rem var(--font); text-align: center; appearance: textfield; -moz-appearance: textfield; }
.bk-disc input:focus { outline: none; }
.bk-disc input::-webkit-outer-spin-button, .bk-disc input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.bk-app-acts .btn-sm { min-height: 38px; }

/* Bakiye yetmiyorsa: düğme ve uyarı */
.rs-buy .btn.is-short, .rs-buy .btn.is-short:hover { background: rgba(251, 191, 36, 0.14); color: #fcd34d; border: 1px solid rgba(251, 191, 36, 0.55); box-shadow: none; cursor: not-allowed; transform: none; }
.rs-buy [data-rs-hint]:not([hidden]) { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin: 12px 0 0; padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(251, 191, 36, 0.45); background: rgba(251, 191, 36, 0.09); color: var(--dim); font-size: 0.86rem; line-height: 1.45; }
.rs-buy [data-rs-hint] b { color: #fcd34d; }
.rs-buy [data-rs-hint] a { color: var(--accent); font-weight: 700; text-decoration: none; margin-left: auto; }

.bk-three { display: grid; grid-template-columns: 1.4fr 0.6fr 1fr; gap: 14px; align-items: start; }
.bk-three small { font-size: 0.78rem; }
.bk-app header small a { color: var(--accent); text-decoration: none; }
@media (max-width: 860px) { .bk-three { grid-template-columns: 1fr; } }

.by-slug.locked { opacity: 0.85; background: rgba(255, 255, 255, 0.04); }
.by-slug.locked input { cursor: not-allowed; color: var(--dim); }
.by-slug.locked .ico { margin-right: 12px; color: var(--faint); }

.bk-done .btn { justify-self: start; margin-top: 4px; }

/* Açılır pencere (popup): alert/confirm yerine. Bulanıklık yok (sayfayı yavaşlatır), düz koyu zemin. */
.ui-dialog { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 20px; background: rgba(2, 4, 10, 0.78); animation: ui-fade 0.15s ease both; }
.ui-dialog.out { animation: ui-fade-out 0.16s ease forwards; }
.ui-dialog-box { --uc: 56, 189, 248; width: min(440px, 100%); display: grid; justify-items: center; gap: 10px; padding: 28px 24px 22px; border: 1px solid rgba(var(--uc), 0.35); border-radius: 22px; background: #0b1220; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); text-align: center; animation: ui-pop 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.15) both; }
.ui-dialog-box.danger { --uc: 248, 113, 113; }
.ui-dialog-ico { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(var(--uc), 0.14); color: rgb(var(--uc)); }
.ui-dialog-ico svg { width: 26px; height: 26px; }
.ui-dialog-box h2 { margin: 6px 0 0; font-size: 1.25rem; }
.ui-dialog-box p { margin: 0; color: var(--dim); line-height: 1.6; font-size: 0.95rem; white-space: pre-line; overflow-wrap: anywhere; }
.ui-dialog-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 14px; width: 100%; }
.ui-dialog-btns .btn { flex: 1 1 130px; justify-content: center; }
@keyframes ui-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-fade-out { to { opacity: 0; } }
@keyframes ui-pop { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ui-dialog, .ui-dialog-box, .ui-dialog.out { animation-duration: 0.01s; } }

.bk-slugrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.bk-slugrow .by-slug { max-width: 340px; }

.tk-cathint { margin: -4px 0 0; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.08); color: var(--dim); line-height: 1.5; }
.tk-cathint[hidden] { display: none; }

/* Rehber yazıları */
.gd-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.gd-card { display: grid; gap: 8px; align-content: start; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.025); color: inherit; text-decoration: none; transition: border-color 0.2s, transform 0.2s; }
.gd-card:hover { border-color: rgba(56, 189, 248, 0.5); transform: translateY(-2px); }
.gd-card b { font-size: 1.08rem; line-height: 1.3; }
.gd-card span { color: var(--dim); font-size: 0.9rem; line-height: 1.55; }
.gd-card em { font-style: normal; color: var(--accent); font-size: 0.85rem; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.dx-eyebrow a { color: inherit; text-decoration: none; }
.gd-article { max-width: 760px; display: grid; gap: 30px; }
.gd-article section { display: grid; gap: 12px; }
.gd-article h2 { margin: 0; font-size: 1.3rem; }
.gd-article p { margin: 0; color: var(--dim); line-height: 1.75; font-size: 1rem; }
.gd-article p b, .gd-article li b { color: var(--text); }
.gd-article a { color: var(--accent); text-underline-offset: 3px; }
.gd-article ul, .gd-article ol { margin: 0; padding-left: 22px; display: grid; gap: 8px; color: var(--dim); line-height: 1.7; }
.gd-article li::marker { color: var(--accent); font-weight: 700; }
.gd-faq details { border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.02); }
.gd-faq summary { padding: 14px 16px; cursor: pointer; font-weight: 650; list-style: none; }
.gd-faq summary::-webkit-details-marker { display: none; }
.gd-faq summary::after { content: '+'; float: right; color: var(--faint); font-weight: 400; }
.gd-faq details[open] summary::after { content: '–'; }
.gd-faq details p { padding: 0 16px 16px; font-size: 0.94rem; }
.gd-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; padding: 20px; border: 1px solid rgba(56, 189, 248, 0.4); border-radius: 18px; background: rgba(56, 189, 248, 0.07); }
.gd-cta > div:first-child { display: grid; gap: 4px; }
.gd-cta span { color: var(--dim); font-size: 0.9rem; }
.gd-cta-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.gd-related { display: grid; gap: 8px; }
.gd-related h2 { font-size: 1.05rem; }
.gd-related a { display: inline-flex; align-items: center; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); text-decoration: none; font-weight: 600; }
.gd-related a:hover { border-color: var(--accent); }
@media (max-width: 760px) { .gd-list { grid-template-columns: 1fr; } }

.gd-article a.btn { text-decoration: none; }
.gd-article a.btn-ghost { color: var(--text); }
.gd-article a.btn-primary { color: #04101d; }

/* cookie consent (assets/cookie-consent.js): a card at the bottom left, a full-width strip on phones */
.ck-banner { position: fixed; left: 20px; bottom: 20px; z-index: 900; width: min(400px, calc(100vw - 32px)); padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line-strong); background: var(--surface-solid); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.8); }
.ck-banner b { display: block; margin-bottom: 4px; font-size: 0.98rem; }
.ck-banner p { margin: 0 0 12px; color: var(--dim); font-size: 0.86rem; line-height: 1.5; }
.ck-banner p a { color: var(--accent); text-decoration: underline; }
.ck-btns { display: flex; gap: 8px; }
.ck-btns .btn { flex: 1; justify-content: center; }
@media (max-width: 560px) { .ck-banner { left: 16px; right: 16px; bottom: 16px; width: auto; } }

/* visitor list: long IPv6 addresses wrap instead of running into the next column; the place sits under the address */
.vz-ip { overflow-wrap: anywhere; word-break: break-all; min-width: 0; }
.vz-who .vz-ip { flex: 1 1 100%; }
.vz-geo { flex: 1 1 100%; margin-top: -3px; color: var(--faint); font-size: 0.78rem; }
.vz-row { grid-template-columns: minmax(200px, 1.5fr) minmax(130px, 1fr) minmax(180px, 2fr) 96px; }

/* visits: tabs, download alert, 404 list */
.vz-tabs { margin-bottom: 14px; flex-wrap: wrap; }
.vz-tabs a.vz-sep { margin-left: 10px; }
.vz-note { margin: 0 0 16px; max-width: 70ch; }
.vz-alert { margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.08); }
.vz-alert > b { display: block; margin-bottom: 6px; color: var(--warn); }
.vz-alert p { margin: 0 0 4px; font-size: 0.88rem; overflow-wrap: anywhere; }
.vz-alert small { display: block; margin-top: 6px; color: var(--faint); font-size: 0.78rem; }
.vz-li .vz-ip small { display: block; color: var(--faint); font-size: 0.74rem; font-family: var(--font); }
.vz-miss { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(110px, 0.7fr); gap: 6px 14px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
.vz-list .vz-miss:first-child { border-top: 0; }
.vz-sample { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; }
.vz-tag.warn { color: var(--warn); background: rgba(251, 191, 36, 0.12); }

.vz-tabs .vz-n { font-size: 0.72em; font-weight: 700; color: var(--warn); vertical-align: 1px; }

/* 404 list, tidier: address and label on one line, place and counts under it, the pages tried last */
.vz-miss { display: block; padding: 12px 0; }
.vz-miss-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vz-miss-top .vz-ip { flex: 0 1 auto; }
.vz-miss-meta { margin: 3px 0 7px; color: var(--faint); font-size: 0.8rem; overflow-wrap: anywhere; }
.vz-miss .vz-sample { margin-top: 0; }