/* ============================================================================
   onox-site.css — PANELTR Lisans premium marketing design system
   "PANELTR tadında": rose #ef305e + slate, Figtree, rounded-xl, magazine-grade.
   Light default · full dark via [data-bs-theme="dark"] · prefers-reduced-motion.
   Self-contained: no CDN, no framework. Vendored fonts only.
   ============================================================================ */

/* ---- FONTS (vendored) — Inter + metrik-uyumlu "Inter Fallback" (swap, sıfır CLS) ----
   optional KALDIRILDI (tutarsız uygulama → yükler-arası font değişimi); Figtree
   ikinci web-font'u zincirden çıkarıldı (ayrı swap → FOUT). Inter Fallback = local
   Arial + metric-override → Inter yüklenene kadar AYNI yer kaplar, flaş/CLS yok. */
@font-face { font-family:"Inter"; font-style:normal; font-display:swap; font-weight:300 900; src:url("fonts/inter-var.woff2") format("woff2"); }
@font-face { font-family:"Inter Fallback"; src:local("Arial"); ascent-override:90.20%; descent-override:22.48%; line-gap-override:0%; size-adjust:107.40%; }
@font-face { font-family:"JetBrains Mono Variable"; font-style:normal; font-display:swap; font-weight:100 800; src:url("fonts/jetbrains-mono-var.woff2") format("woff2"); }

/* ============================================================================
   DESIGN TOKENS
   ============================================================================ */
:root {
  /* brand */
  --rose:        #ef305e;
  --rose-600:    #ef305e;
  --rose-700:    #c81e4e;
  --rose-400:    #f76a8c;
  --rose-glow:   rgba(239,48,94,.45);
  --grad-rose:   linear-gradient(120deg, #ef305e 0%, #c81e4e 100%);
  --grad-rose-warm: linear-gradient(110deg, #ef305e 0%, #f97316 110%);

  /* slate palette */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;

  /* semantic (light) */
  --st-bg:        #ffffff;
  --st-bg-soft:   #f8fafc;
  --st-bg-mute:   #f1f5f9;
  --st-surface:   #ffffff;
  --st-text:      #0f172a;
  --st-text-soft: #475569;
  --st-text-mute: #64748b;
  --st-border:    #e2e8f0;
  --st-border-strong: #cbd5e1;
  --st-hero-bg:   #0b1020;
  --st-hero-text: #f1f5f9;

  /* fonts */
  --st-font:  "Inter","Inter Fallback",-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,sans-serif;
  --st-mono:  "JetBrains Mono Variable",ui-monospace,"SF Mono",Menlo,monospace;

  /* spacing scale */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem; --sp-8:3rem; --sp-10:4rem; --sp-12:5rem; --sp-16:7rem; --sp-20:9rem;

  /* radii */
  --r-sm:.5rem; --r-md:.75rem; --r-lg:1rem; --r-xl:1.25rem; --r-2xl:1.75rem; --r-pill:9999px;

  /* shadows */
  --sh-xs: 0 1px 2px rgba(15,23,42,.05);
  --sh-sm: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --sh-md: 0 8px 24px -8px rgba(15,23,42,.14), 0 2px 6px rgba(15,23,42,.05);
  --sh-lg: 0 24px 56px -18px rgba(15,23,42,.24), 0 6px 14px rgba(15,23,42,.06);
  --sh-rose: 0 14px 34px -10px rgba(239,48,94,.5);
  --sh-rose-sm: 0 8px 20px -8px rgba(239,48,94,.55);

  /* layout */
  --st-container: 1180px;
  --st-nav-h: 64px;
}

[data-bs-theme="dark"] {
  --st-bg:        #020617;
  --st-bg-soft:   #060b18;
  --st-bg-mute:   #0b1220;
  --st-surface:   #0f172a;
  --st-text:      #f1f5f9;
  --st-text-soft: #cbd5e1;
  --st-text-mute: #94a3b8;
  --st-border:    #1e293b;
  --st-border-strong: #334155;
  --st-hero-bg:   #020617;
  --sh-xs: 0 1px 2px rgba(0,0,0,.4);
  --sh-sm: 0 1px 3px rgba(0,0,0,.5);
  --sh-md: 0 8px 24px -8px rgba(0,0,0,.6);
  --sh-lg: 0 24px 56px -18px rgba(0,0,0,.7);
}

/* ============================================================================
   BASE / RESET-ish
   ============================================================================ */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body.st-body {
  margin:0;
  font-family:var(--st-font);
  background:var(--st-bg);
  color:var(--st-text);
  line-height:1.6;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-synthesis:none;
  overflow-x:hidden;
}
.st-body img { max-width:100%; height:auto; display:block; }
.st-body a { color:inherit; text-decoration:none; }
.st-body h1,.st-body h2,.st-body h3,.st-body h4 { margin:0; line-height:1.12; letter-spacing:-.028em; font-weight:800; }
.st-body p { margin:0; }
.st-mono { font-family:var(--st-mono); }
:focus-visible { outline:2px solid var(--rose); outline-offset:2px; border-radius:4px; }

/* ============================================================================
   LAYOUT PRIMITIVES
   ============================================================================ */
.st-container { width:100%; max-width:var(--st-container); margin-inline:auto; padding-inline:24px; }
.st-section { padding:88px 0; position:relative; }
.st-section--tight { padding:64px 0; }
.st-grid { display:grid; gap:24px; }
@media (max-width:768px){ .st-section{ padding:60px 0; } .st-container{ padding-inline:18px; } }

/* section header */
.st-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--rose);
}
.st-eyebrow::before { content:""; width:22px; height:2px; border-radius:2px; background:var(--rose); display:inline-block; }
.st-head { max-width:680px; margin-inline:auto; text-align:center; margin-bottom:56px; }
.st-head h2 { font-size:clamp(1.85rem,3.4vw,2.7rem); margin:16px 0 14px; }
.st-head p { color:var(--st-text-mute); font-size:1.06rem; max-width:560px; margin-inline:auto; }
.st-head--left { text-align:left; margin-inline:0; }

/* gradient text */
.st-grad-text {
  background:var(--grad-rose-warm);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ============================================================================
   BUTTONS
   ============================================================================ */
.st-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:inherit; font-size:15px; font-weight:650; letter-spacing:-.01em;
  padding:13px 26px; border-radius:var(--r-md); border:1px solid transparent;
  cursor:pointer; white-space:nowrap; user-select:none;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .2s, background .18s, color .18s, border-color .18s;
}
.st-btn svg { width:18px; height:18px; }
.st-btn--primary { background:var(--grad-rose); color:#fff; box-shadow:var(--sh-rose); }
.st-btn--primary:hover { transform:translateY(-2px); box-shadow:0 18px 40px -10px rgba(239,48,94,.62); }
.st-btn--primary:active { transform:translateY(0); }
.st-btn--ghost { background:rgba(255,255,255,.06); color:#e6edf6; border-color:rgba(255,255,255,.16); backdrop-filter:blur(6px); }
.st-btn--ghost:hover { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.28); transform:translateY(-2px); }
.st-btn--light { background:var(--st-surface); color:var(--st-text); border-color:var(--st-border-strong); box-shadow:var(--sh-sm); }
.st-btn--light:hover { transform:translateY(-2px); box-shadow:var(--sh-md); border-color:var(--rose); }
.st-btn--outline { background:transparent; color:var(--st-text); border-color:var(--st-border-strong); }
.st-btn--outline:hover { border-color:var(--rose); color:var(--rose); transform:translateY(-2px); }
.st-btn--sm { padding:9px 18px; font-size:14px; }
.st-btn--lg { padding:15px 32px; font-size:16px; }
.st-btn--block { width:100%; }

/* ============================================================================
   PILLS / BADGES
   ============================================================================ */
.st-pill {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; border-radius:var(--r-pill);
  font-size:13px; font-weight:600; letter-spacing:.01em;
  background:var(--st-bg-mute); color:var(--st-text-soft); border:1px solid var(--st-border);
}
.st-pill--rose { background:rgba(239,48,94,.1); color:var(--rose); border-color:rgba(239,48,94,.22); }
.st-pill--dark { background:rgba(239,48,94,.14); color:#ff7a9c; border:1px solid rgba(239,48,94,.3); }
.st-pill--glow { box-shadow:0 0 0 0 var(--rose-glow); }
.st-dot { width:7px; height:7px; border-radius:50%; background:var(--rose); position:relative; flex:none; }
.st-dot--live::after {
  content:""; position:absolute; inset:0; border-radius:50%; background:var(--rose);
  animation:st-ping 1.8s cubic-bezier(0,0,.2,1) infinite;
}

/* ============================================================================
   CARDS
   ============================================================================ */
.st-card {
  background:var(--st-surface); border:1px solid var(--st-border); border-radius:var(--r-lg);
  padding:26px; box-shadow:var(--sh-sm); position:relative;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s;
}
.st-card--lift:hover { transform:translateY(-6px); box-shadow:var(--sh-lg); border-color:var(--st-border-strong); }
.st-card__icon {
  width:48px; height:48px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
}
.st-card__icon svg { width:23px; height:23px; stroke-width:1.9; }
.st-card h3 { font-size:17px; font-weight:700; margin-bottom:9px; letter-spacing:-.02em; }
.st-card p { color:var(--st-text-mute); font-size:14.5px; line-height:1.62; }

/* tinted icon helpers */
.st-ic-rose   { background:rgba(239,48,94,.12); color:#ef305e; }
.st-ic-indigo { background:rgba(99,102,241,.12); color:#6366f1; }
.st-ic-sky    { background:rgba(14,165,233,.12); color:#0ea5e9; }
.st-ic-emerald{ background:rgba(16,185,129,.12); color:#10b981; }
.st-ic-amber  { background:rgba(245,158,11,.13); color:#f59e0b; }
.st-ic-violet { background:rgba(139,92,246,.13); color:#8b5cf6; }
.st-ic-cyan   { background:rgba(6,182,212,.12);  color:#06b6d4; }
.st-ic-slate  { background:rgba(100,116,139,.13);color:#64748b; }
[data-bs-theme="dark"] .st-ic-slate { color:#94a3b8; }

/* ============================================================================
   HERO
   ============================================================================ */
.st-hero {
  position:relative; overflow:hidden;
  background:var(--st-hero-bg); color:var(--st-hero-text);
  padding:120px 0 96px;
  isolation:isolate;
}
.st-hero__mesh {
  position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60% 50% at 78% 18%, rgba(239,48,94,.30) 0%, transparent 60%),
    radial-gradient(48% 44% at 12% 78%, rgba(99,102,241,.24) 0%, transparent 62%),
    radial-gradient(70% 60% at 50% -10%, rgba(249,115,22,.10) 0%, transparent 60%),
    linear-gradient(160deg, #0b1020 0%, #140a22 48%, #0b1020 100%);
  background-size:200% 200%, 200% 200%, 100% 100%, 100% 100%;
  animation:st-mesh 22s ease infinite;
}
.st-hero__grid {
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.4;
  background-image:
    linear-gradient(rgba(148,163,184,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.06) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 72%);
}
.st-orb { position:absolute; border-radius:50%; filter:blur(34px); pointer-events:none; z-index:-1; opacity:.5; }
.st-orb--1 { width:280px; height:280px; top:8%; right:6%;  background:radial-gradient(circle,rgba(239,48,94,.6),transparent 70%); animation:st-float 9s ease-in-out infinite; }
.st-orb--2 { width:220px; height:220px; bottom:6%; left:4%; background:radial-gradient(circle,rgba(99,102,241,.5),transparent 70%); animation:st-float 11s ease-in-out infinite reverse; }

.st-hero__inner { display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.st-hero__copy { max-width:600px; }
.st-hero h1 {
  font-size:clamp(2.5rem,5.4vw,4.05rem); font-weight:850; line-height:1.05; letter-spacing:-.035em;
  margin:22px 0 20px;
}
.st-hero__sub { color:#9fb0c6; font-size:1.18rem; line-height:1.62; max-width:520px; margin-bottom:32px; }
.st-hero__cta { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:36px; }
.st-hero__trust { display:flex; flex-wrap:wrap; gap:10px 22px; }
.st-hero__trust span { display:inline-flex; align-items:center; gap:7px; color:#7e90a8; font-size:13.5px; font-weight:550; }
.st-hero__trust svg { width:16px; height:16px; color:var(--rose); stroke-width:2.6; }

@media (max-width:980px){
  .st-hero__inner { grid-template-columns:1fr; gap:48px; }
  .st-hero { padding:96px 0 72px; }
  .st-hero__copy { max-width:none; }
  .st-hero__sub { max-width:none; }
}

/* ---- HERO product mockup (pure CSS browser frame) ---- */
.st-mock {
  border-radius:16px; overflow:hidden; background:#0d1426;
  border:1px solid rgba(148,163,184,.16);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.03);
  animation:st-floaty 7s ease-in-out infinite;
  transform:perspective(1400px) rotateY(-7deg) rotateX(3deg);
  transform-origin:center;
}
.st-mock__bar { display:flex; align-items:center; gap:10px; padding:11px 14px; background:#0a1120; border-bottom:1px solid rgba(148,163,184,.12); }
.st-mock__dots { display:flex; gap:6px; }
.st-mock__dots i { width:11px; height:11px; border-radius:50%; display:block; }
.st-mock__dots i:nth-child(1){ background:#ff5f57; } .st-mock__dots i:nth-child(2){ background:#febc2e; } .st-mock__dots i:nth-child(3){ background:#28c840; }
.st-mock__url { flex:1; background:rgba(148,163,184,.1); border-radius:6px; padding:5px 12px; font-size:11px; color:#7e90a8; font-family:var(--st-mono); display:flex; align-items:center; gap:6px; }
.st-mock__url svg{ width:11px; height:11px; color:#28c840; }
.st-mock__body { display:grid; grid-template-columns:142px 1fr; min-height:316px; }
.st-mock__side { background:#0a1020; border-right:1px solid rgba(148,163,184,.1); padding:14px 10px; }
.st-mock__logo { display:flex; align-items:center; gap:8px; margin-bottom:16px; padding:0 4px; }
.st-mock__logo b { width:22px; height:22px; border-radius:6px; background:var(--grad-rose); color:#fff; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.st-mock__logo span { font-size:12px; color:#cdd6e3; font-weight:700; }
.st-mock__nav { display:flex; flex-direction:column; gap:3px; }
.st-mock__nav i { height:28px; border-radius:7px; display:flex; align-items:center; padding:0 10px; gap:8px; font-size:11px; color:#7e90a8; font-style:normal; }
.st-mock__nav i::before { content:""; width:13px; height:13px; border-radius:4px; background:rgba(148,163,184,.22); flex:none; }
.st-mock__nav i.on { background:var(--grad-rose); color:#fff; box-shadow:var(--sh-rose-sm); }
.st-mock__nav i.on::before { background:rgba(255,255,255,.85); }
.st-mock__main { padding:16px; }
.st-mock__stats { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:14px; }
.st-mock__stat { background:#101a30; border:1px solid rgba(148,163,184,.1); border-radius:9px; padding:10px; }
.st-mock__stat small { font-size:9px; color:#7e90a8; text-transform:uppercase; letter-spacing:.05em; }
.st-mock__stat b { display:block; font-size:18px; color:#f1f5f9; font-weight:800; margin-top:3px; letter-spacing:-.02em; }
.st-mock__stat b.up { color:#34d399; }
.st-mock__chart { background:#101a30; border:1px solid rgba(148,163,184,.1); border-radius:10px; padding:12px; }
.st-mock__chart small { font-size:9px; color:#7e90a8; text-transform:uppercase; letter-spacing:.05em; display:block; margin-bottom:8px; }
.st-mock__chart svg { width:100%; height:78px; display:block; }
@media (max-width:520px){ .st-mock{ transform:none; } .st-mock__body{ grid-template-columns:1fr; } .st-mock__side{ display:none; } }

/* ============================================================================
   STATS BAND
   ============================================================================ */
.st-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.st-stat { text-align:center; padding:8px; }
.st-stat__num { font-size:clamp(2rem,3.6vw,2.9rem); font-weight:850; letter-spacing:-.04em; line-height:1; background:var(--grad-rose); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.st-stat__label { color:var(--st-text-mute); font-size:14px; margin-top:9px; font-weight:550; }
@media (max-width:680px){ .st-stats{ grid-template-columns:repeat(2,1fr); gap:30px; } }

/* ============================================================================
   PROBLEM → SOLUTION
   ============================================================================ */
.st-ps { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.st-ps__card { background:var(--st-surface); border:1px solid var(--st-border); border-radius:var(--r-lg); padding:26px; box-shadow:var(--sh-sm); }
.st-ps__pain { display:flex; align-items:center; gap:9px; color:#b91c1c; font-weight:650; font-size:14px; margin-bottom:12px; }
[data-bs-theme="dark"] .st-ps__pain { color:#f87171; }
.st-ps__pain svg { width:18px; height:18px; flex:none; }
.st-ps__sol { display:flex; align-items:flex-start; gap:9px; color:var(--st-text); font-weight:600; font-size:15px; padding-top:14px; border-top:1px dashed var(--st-border); margin-top:14px; }
.st-ps__sol svg { width:18px; height:18px; color:#10b981; flex:none; margin-top:2px; stroke-width:2.6; }
.st-ps__sol p { color:var(--st-text-mute); font-weight:450; font-size:14px; margin-top:3px; }
@media (max-width:820px){ .st-ps{ grid-template-columns:1fr; } }

/* ============================================================================
   FEATURE GRID
   ============================================================================ */
.st-feat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:920px){ .st-feat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .st-feat-grid{ grid-template-columns:1fr; } }

/* ============================================================================
   VERIFY DEMO
   ============================================================================ */
.st-demo { background:var(--st-hero-bg); color:var(--st-hero-text); border-radius:var(--r-2xl); overflow:hidden; position:relative; isolation:isolate; }
.st-demo__mesh { position:absolute; inset:0; z-index:-1; background:radial-gradient(50% 60% at 80% 10%, rgba(239,48,94,.22), transparent 60%), radial-gradient(40% 50% at 10% 90%, rgba(99,102,241,.2), transparent 60%), #0b1020; }
.st-demo__inner { display:grid; grid-template-columns:1fr 1fr; gap:40px; padding:48px; align-items:center; }
.st-demo__copy h2 { color:#f1f5f9; font-size:clamp(1.7rem,3vw,2.3rem); margin-bottom:14px; }
.st-demo__copy p { color:#9fb0c6; font-size:15.5px; line-height:1.65; margin-bottom:22px; }
.st-demo__form { display:flex; gap:10px; flex-wrap:wrap; }
.st-demo__input {
  flex:1; min-width:200px; font-family:var(--st-mono); font-size:13.5px;
  padding:13px 15px; border-radius:var(--r-md); border:1px solid rgba(148,163,184,.24);
  background:rgba(8,13,26,.7); color:#e6edf6;
}
.st-demo__input::placeholder { color:#5f7290; }
.st-demo__input:focus { outline:none; border-color:var(--rose); box-shadow:0 0 0 3px rgba(239,48,94,.25); }
.st-demo__console {
  background:#070c18; border:1px solid rgba(148,163,184,.16); border-radius:var(--r-lg);
  padding:20px; font-family:var(--st-mono); font-size:13px; min-height:268px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 30px 60px -30px rgba(0,0,0,.6);
}
.st-demo__title-bar { display:flex; align-items:center; gap:8px; padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid rgba(148,163,184,.12); color:#7e90a8; font-size:11px; letter-spacing:.05em; text-transform:uppercase; }
.st-demo__title-bar i { width:8px; height:8px; border-radius:50%; background:#28c840; box-shadow:0 0 8px #28c840; display:inline-block; }
.st-demo__step { display:flex; align-items:center; gap:10px; padding:6px 0; color:#9fb0c6; opacity:0; transform:translateY(4px); transition:opacity .3s, transform .3s; }
.st-demo__step.show { opacity:1; transform:none; }
.st-demo__step .tick { width:18px; height:18px; flex:none; display:inline-flex; align-items:center; justify-content:center; }
.st-demo__step .tick svg { width:16px; height:16px; }
.st-demo__step.pending .tick { color:#f59e0b; }
.st-demo__step.pending .tick::before { content:""; width:13px; height:13px; border:2px solid rgba(245,158,11,.35); border-top-color:#f59e0b; border-radius:50%; animation:st-spin .7s linear infinite; }
.st-demo__step.done .tick { color:#34d399; }
.st-demo__result { margin-top:14px; padding:14px; border-radius:var(--r-md); background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.3); color:#34d399; font-weight:700; display:none; align-items:center; gap:10px; font-size:14px; }
.st-demo__result.show { display:flex; animation:st-pop .4s cubic-bezier(.2,.8,.3,1.3); }
.st-demo__result svg { width:20px; height:20px; }
.st-demo__payload { margin-top:12px; font-size:11.5px; color:#7e90a8; background:rgba(148,163,184,.07); border-radius:8px; padding:12px; white-space:pre-wrap; word-break:break-all; display:none; line-height:1.55; }
.st-demo__payload.show { display:block; }
.st-demo__payload .k { color:#f76a8c; } .st-demo__payload .v { color:#7dd3fc; }
@media (max-width:880px){ .st-demo__inner{ grid-template-columns:1fr; padding:34px 24px; } }

/* ============================================================================
   HOW IT WORKS
   ============================================================================ */
.st-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; position:relative; }
.st-steps::before {
  content:""; position:absolute; top:34px; left:16%; right:16%; height:2px;
  background:linear-gradient(90deg, transparent, var(--st-border-strong) 12%, var(--st-border-strong) 88%, transparent);
  z-index:0;
}
.st-step { text-align:center; position:relative; z-index:1; }
.st-step__num {
  width:68px; height:68px; border-radius:20px; margin:0 auto 20px;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:850; color:#fff; background:var(--grad-rose);
  box-shadow:var(--sh-rose); position:relative;
}
.st-step__num::after { content:""; position:absolute; inset:-6px; border-radius:24px; border:1px solid rgba(239,48,94,.25); }
.st-step h3 { font-size:18px; margin-bottom:10px; }
.st-step p { color:var(--st-text-mute); font-size:14.5px; max-width:260px; margin-inline:auto; }
@media (max-width:820px){ .st-steps{ grid-template-columns:1fr; gap:36px; } .st-steps::before{ display:none; } }

/* ============================================================================
   COMPARISON TABLE
   ============================================================================ */
.st-compare-wrap { overflow-x:auto; border-radius:var(--r-lg); border:1px solid var(--st-border); box-shadow:var(--sh-sm); }
.st-compare { width:100%; min-width:720px; border-collapse:collapse; background:var(--st-surface); }
.st-compare th,.st-compare td { padding:16px 18px; text-align:center; font-size:14px; border-bottom:1px solid var(--st-border); }
.st-compare thead th { font-weight:700; color:var(--st-text-soft); font-size:13px; }
.st-compare tbody td:first-child,.st-compare thead th:first-child { text-align:left; font-weight:600; color:var(--st-text); }
.st-compare__onox {
  background:linear-gradient(180deg, rgba(239,48,94,.07), rgba(239,48,94,.03));
  position:relative;
}
.st-compare thead .st-compare__onox {
  color:#fff; background:var(--grad-rose); border-radius:12px 12px 0 0; font-weight:800;
}
.st-compare thead .st-compare__onox b { display:block; font-size:16px; }
.st-compare thead .st-compare__onox small { font-size:10.5px; opacity:.85; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.st-compare tbody tr:last-child td { border-bottom:none; }
.st-compare .yes { color:#10b981; } .st-compare .no { color:#cbd5e1; }
[data-bs-theme="dark"] .st-compare .no { color:#475569; }
.st-compare__onox .yes { color:#ef305e; }
.st-compare svg { width:20px; height:20px; stroke-width:2.6; }

/* ============================================================================
   PRICING PREVIEW
   ============================================================================ */
.st-plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px; max-width:1000px; margin-inline:auto; }
.st-plan {
  background:var(--st-surface); border:1px solid var(--st-border); border-radius:var(--r-lg);
  padding:28px; box-shadow:var(--sh-sm); display:flex; flex-direction:column; position:relative;
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.st-plan:hover { transform:translateY(-5px); box-shadow:var(--sh-lg); }
.st-plan--rec { border-color:var(--rose); border-width:2px; box-shadow:var(--sh-rose-sm); }
.st-plan__badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--grad-rose); color:#fff; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:5px 16px; border-radius:var(--r-pill); box-shadow:var(--sh-rose-sm); white-space:nowrap; }
.st-plan__name { font-size:16px; font-weight:750; }
.st-plan__tag { color:var(--st-text-mute); font-size:13px; margin-top:4px; min-height:18px; }
.st-plan__price { margin:18px 0; }
.st-plan__price b { font-size:2.6rem; font-weight:850; letter-spacing:-.04em; }
.st-plan__price span { color:var(--st-text-mute); font-size:14px; }
.st-plan__feats { list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:11px; flex:1; }
.st-plan__feats li { display:flex; align-items:flex-start; gap:9px; font-size:14px; color:var(--st-text-soft); }
.st-plan__feats svg { width:17px; height:17px; color:var(--rose); flex:none; margin-top:2px; stroke-width:2.6; }
.st-plan__inf { font-size:1.05em; font-weight:800; color:var(--rose); }

/* ============================================================================
   SECURITY
   ============================================================================ */
.st-sec { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.st-sec__shield { position:relative; aspect-ratio:1; max-width:380px; margin-inline:auto; display:flex; align-items:center; justify-content:center; }
.st-sec__shield svg { width:62%; color:var(--rose); filter:drop-shadow(0 18px 40px rgba(239,48,94,.4)); animation:st-floaty 6s ease-in-out infinite; }
.st-sec__ring { position:absolute; border:1.5px solid rgba(239,48,94,.18); border-radius:50%; }
.st-sec__ring.r1 { inset:6%; animation:st-spin 24s linear infinite; }
.st-sec__ring.r2 { inset:18%; border-style:dashed; border-color:rgba(99,102,241,.22); animation:st-spin 18s linear infinite reverse; }
.st-sec__ring.r3 { inset:30%; border-color:rgba(239,48,94,.12); }
.st-sec__list { display:flex; flex-direction:column; gap:16px; }
.st-sec__item { display:flex; gap:15px; align-items:flex-start; }
.st-sec__item .ic { width:42px; height:42px; border-radius:11px; flex:none; display:flex; align-items:center; justify-content:center; background:rgba(239,48,94,.1); color:var(--rose); }
.st-sec__item .ic svg { width:21px; height:21px; }
.st-sec__item h4 { font-size:15.5px; font-weight:700; margin-bottom:3px; }
.st-sec__item p { color:var(--st-text-mute); font-size:14px; }
@media (max-width:820px){ .st-sec{ grid-template-columns:1fr; gap:36px; } .st-sec__shield{ order:-1; max-width:280px; } }

/* ============================================================================
   TESTIMONIALS
   ============================================================================ */
.st-quotes { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.st-quote { background:var(--st-surface); border:1px solid var(--st-border); border-radius:var(--r-lg); padding:28px; box-shadow:var(--sh-sm); display:flex; flex-direction:column; }
.st-quote__stars { color:#f59e0b; font-size:15px; letter-spacing:2px; margin-bottom:14px; }
.st-quote__text { color:var(--st-text); font-size:15px; line-height:1.6; flex:1; font-weight:450; }
.st-quote__who { display:flex; align-items:center; gap:12px; margin-top:20px; padding-top:18px; border-top:1px solid var(--st-border); }
.st-quote__av { width:44px; height:44px; border-radius:12px; background:var(--grad-rose); color:#fff; font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; flex:none; }
.st-quote__who b { font-size:14px; display:block; } .st-quote__who span { font-size:12.5px; color:var(--st-text-mute); }
@media (max-width:880px){ .st-quotes{ grid-template-columns:1fr; } }

/* ============================================================================
   FAQ (pure CSS details/summary)
   ============================================================================ */
.st-faq { max-width:760px; margin-inline:auto; display:flex; flex-direction:column; gap:12px; }
.st-faq details { background:var(--st-surface); border:1px solid var(--st-border); border-radius:var(--r-md); overflow:hidden; transition:border-color .2s, box-shadow .2s; }
.st-faq details[open] { border-color:var(--st-border-strong); box-shadow:var(--sh-sm); }
.st-faq summary { list-style:none; cursor:pointer; padding:18px 22px; font-weight:650; font-size:15.5px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.st-faq summary::-webkit-details-marker { display:none; }
.st-faq summary .chev { width:20px; height:20px; flex:none; transition:transform .25s; color:var(--st-text-mute); }
.st-faq details[open] summary .chev { transform:rotate(180deg); color:var(--rose); }
.st-faq__a { padding:0 22px 20px; color:var(--st-text-mute); font-size:14.5px; line-height:1.65; }

/* ============================================================================
   FINAL CTA
   ============================================================================ */
.st-cta {
  background:var(--grad-rose); color:#fff; border-radius:var(--r-2xl);
  padding:64px 48px; text-align:center; position:relative; overflow:hidden; isolation:isolate;
  box-shadow:0 30px 80px -24px rgba(239,48,94,.5);
}
.st-cta::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.5; background:radial-gradient(40% 80% at 80% 0%, rgba(255,255,255,.25), transparent 60%), radial-gradient(50% 90% at 10% 100%, rgba(0,0,0,.2), transparent 60%); }
.st-cta h2 { font-size:clamp(1.9rem,3.6vw,2.8rem); margin-bottom:14px; color:#fff; }
.st-cta p { color:rgba(255,255,255,.88); font-size:1.1rem; max-width:540px; margin:0 auto 30px; }
.st-cta .st-btn--light { background:#fff; color:var(--rose-700); border-color:transparent; }
.st-cta .st-btn--ghost { color:#fff; border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.1); }
.st-cta__cta { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

/* ============================================================================
   NAVBAR (premium frosted glass)
   ============================================================================ */
.st-nav { position:sticky; top:0; z-index:1000; background:rgba(255,255,255,.72); backdrop-filter:blur(16px) saturate(180%); -webkit-backdrop-filter:blur(16px) saturate(180%); border-bottom:1px solid var(--st-border); }
[data-bs-theme="dark"] .st-nav { background:rgba(2,6,23,.72); }
.st-nav__inner { height:var(--st-nav-h); display:flex; align-items:center; gap:18px; }
.st-nav__brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:17px; letter-spacing:-.02em; color:var(--st-text); }
.st-nav__logo { width:30px; height:30px; border-radius:9px; background:var(--grad-rose); color:#fff; font-weight:850; font-size:12px; display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-rose-sm); }
.st-nav__links { display:flex; align-items:center; gap:2px; margin-left:14px; }
.st-nav__links a { padding:8px 13px; border-radius:var(--r-sm); font-size:14px; font-weight:550; color:var(--st-text-soft); transition:color .15s, background .15s; }
.st-nav__links a:hover { color:var(--st-text); background:var(--st-bg-mute); }
.st-nav__links a.active { color:var(--rose); }
.st-nav__actions { display:flex; align-items:center; gap:10px; margin-left:auto; }
.st-nav__login { font-size:14px; font-weight:600; color:var(--st-text-soft); padding:8px 12px; border-radius:var(--r-sm); }
.st-nav__login:hover { color:var(--st-text); background:var(--st-bg-mute); }
.st-theme-toggle { width:38px; height:38px; border-radius:var(--r-sm); border:1px solid var(--st-border); background:var(--st-surface); color:var(--st-text-soft); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:color .15s, border-color .15s, background .15s; }
.st-theme-toggle:hover { color:var(--rose); border-color:var(--st-border-strong); }
.st-theme-toggle svg { width:18px; height:18px; }
.st-theme-toggle .moon { display:none; } .st-theme-toggle .sun { display:block; }
[data-bs-theme="dark"] .st-theme-toggle .moon { display:block; } [data-bs-theme="dark"] .st-theme-toggle .sun { display:none; }
.st-nav__burger { display:none; width:40px; height:40px; border-radius:var(--r-sm); border:1px solid var(--st-border); background:var(--st-surface); color:var(--st-text); align-items:center; justify-content:center; cursor:pointer; }
.st-nav__burger svg { width:20px; height:20px; }

/* ---- Mega menü açılır panelleri (anasayfa header'ı ile tutarlı) ---- */
.st-has-menu { position:relative; }
.st-menu-trigger { display:inline-flex; align-items:center; gap:5px; padding:8px 13px; border-radius:var(--r-sm); font-size:14px; font-weight:550; color:var(--st-text-soft); transition:color .15s, background .15s; cursor:pointer; }
.st-menu-trigger:hover, .st-has-menu:hover .st-menu-trigger { color:var(--st-text); background:var(--st-bg-mute); }
.st-menu-trigger svg { width:12px; height:12px; opacity:.7; }
.st-menu { position:absolute; top:100%; left:0; padding-top:14px; z-index:120; opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .16s ease, transform .16s ease, visibility .16s; }
.st-menu--right { left:auto; right:0; }
.st-has-menu:hover .st-menu, .st-has-menu:focus-within .st-menu { opacity:1; visibility:visible; transform:translateY(0); }
.st-menu__panel { background:var(--st-surface); border:1px solid var(--st-border); border-radius:18px; box-shadow:0 26px 56px -22px rgba(15,23,42,.28); padding:14px; }
[data-bs-theme="dark"] .st-menu__panel { box-shadow:0 26px 56px -22px rgba(0,0,0,.6); }
.st-menu__grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.st-menu__ctitle { font-size:10.5px; font-weight:800; color:var(--st-text-mute); letter-spacing:.8px; padding:6px 12px 4px; }
.st-menu__item { display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:11px; transition:background .14s; }
.st-menu__item:hover { background:var(--st-bg-mute); }
.st-menu__ic { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.st-menu__ic span { width:11px; height:11px; border-radius:3px; display:block; }
.st-menu__nm { display:block; font-size:13.5px; font-weight:700; color:var(--st-text); }
.st-menu__ds { display:block; font-size:11.5px; color:var(--st-text-mute); font-weight:500; margin-top:2px; }
.st-menu__cta { display:flex; align-items:center; justify-content:space-between; margin-top:8px; padding:13px 15px; border-radius:13px; background:#0B1020; }
.st-login-menu { position:relative; }

@media (max-width:880px){
  .st-nav__links { display:none; position:absolute; top:var(--st-nav-h); left:0; right:0; flex-direction:column; align-items:stretch; gap:2px; margin:0; padding:12px; background:var(--st-bg); border-bottom:1px solid var(--st-border); box-shadow:var(--sh-md); }
  .st-nav__links.open { display:flex; }
  .st-nav__links a, .st-nav__links .st-menu-trigger { padding:12px 14px; font-size:15px; }
  .st-nav__burger { display:inline-flex; }
  .st-nav__login, .st-login-menu { display:none; }
  /* Mobilde mega panel yok — trigger link gibi davranır (kendi bölümüne gider) */
  .st-menu { display:none !important; }
  .st-nav__links .st-has-menu { width:100%; }
  .st-nav__links .st-menu-trigger { width:100%; justify-content:space-between; }
}

/* ============================================================================
   FOOTER (premium multi-column)
   ============================================================================ */
.st-footer { background:#0b1020; color:#9fb0c6; padding:64px 0 28px; border-top:1px solid rgba(148,163,184,.1); }
.st-footer__grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.4fr; gap:40px; }
.st-footer__brand b { display:flex; align-items:center; gap:10px; color:#f1f5f9; font-weight:800; font-size:16px; margin-bottom:14px; }
.st-footer__brand .lg { width:30px; height:30px; border-radius:9px; background:var(--grad-rose); color:#fff; font-weight:850; font-size:12px; display:flex; align-items:center; justify-content:center; }
.st-footer__brand p { font-size:14px; line-height:1.6; max-width:300px; color:#7e90a8; }
.st-footer__col h5 { color:#cdd6e3; font-size:11px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; margin-bottom:16px; }
.st-footer__col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.st-footer__col a { font-size:14px; color:#9fb0c6; transition:color .15s; }
.st-footer__col a:hover { color:#fff; }
.st-footer__news p { font-size:13.5px; color:#7e90a8; margin-bottom:12px; }
.st-footer__news form { display:flex; gap:8px; }
.st-footer__news input { flex:1; min-width:0; padding:10px 13px; border-radius:var(--r-sm); border:1px solid rgba(148,163,184,.2); background:rgba(148,163,184,.08); color:#e6edf6; font-size:13.5px; font-family:inherit; }
.st-footer__news input::placeholder { color:#5f7290; }
.st-footer__news input:focus { outline:none; border-color:var(--rose); }
.st-footer__news button { padding:10px 16px; border-radius:var(--r-sm); border:none; background:var(--grad-rose); color:#fff; font-weight:650; font-size:13.5px; cursor:pointer; white-space:nowrap; }
.st-footer__social { display:flex; gap:10px; margin-top:18px; }
.st-footer__social a { width:36px; height:36px; border-radius:10px; border:1px solid rgba(148,163,184,.16); display:flex; align-items:center; justify-content:center; color:#9fb0c6; transition:color .15s, border-color .15s, background .15s; }
.st-footer__social a:hover { color:#fff; border-color:var(--rose); background:rgba(239,48,94,.14); }
.st-footer__social svg { width:17px; height:17px; }
.st-footer__bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-top:44px; padding-top:24px; border-top:1px solid rgba(148,163,184,.1); }
.st-footer__bar span { font-size:13px; color:#5f7290; }
.st-footer__bar a { font-size:13px; color:#5f7290; }
.st-footer__bar a:hover { color:#9fb0c6; }
@media (max-width:880px){ .st-footer__grid{ grid-template-columns:1fr 1fr; gap:32px; } .st-footer__brand{ grid-column:1/-1; } }
@media (max-width:520px){ .st-footer__grid{ grid-template-columns:1fr; } }

/* ============================================================================
   ANIMATIONS / KEYFRAMES
   ============================================================================ */
@keyframes st-mesh   { 0%,100%{ background-position:0% 50%,100% 50%,0 0,0 0; } 50%{ background-position:100% 50%,0% 50%,0 0,0 0; } }
@keyframes st-float  { 0%,100%{ transform:translateY(0) translateX(0); } 50%{ transform:translateY(-26px) translateX(12px); } }
@keyframes st-floaty { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }
@keyframes st-ping   { 0%{ transform:scale(1); opacity:.7; } 80%,100%{ transform:scale(2.6); opacity:0; } }
@keyframes st-spin   { to{ transform:rotate(360deg); } }
@keyframes st-pop    { 0%{ transform:scale(.92); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
@keyframes st-shimmer{ 0%{ background-position:-200% 0; } 100%{ background-position:200% 0; } }
@keyframes st-glow   { 0%,100%{ box-shadow:0 0 0 0 var(--rose-glow); } 50%{ box-shadow:0 0 0 8px transparent; } }

/* re-floaty for mock + others tag with class to reuse keyframes for hero floaty */

/* shimmer utility (skeleton / accents) */
.st-shimmer { background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.14) 40%, transparent 60%); background-size:200% 100%; animation:st-shimmer 2.4s linear infinite; }

/* ---- SCROLL REVEAL ---- */
/* default visible (no-JS safe). When <html class="js">, hide until .in. */
.reveal { opacity:1; transform:none; }
html.js .reveal { opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); will-change:opacity,transform; }
html.js .reveal.in { opacity:1; transform:none; }
html.js .reveal-d1 { transition-delay:.08s; }
html.js .reveal-d2 { transition-delay:.16s; }
html.js .reveal-d3 { transition-delay:.24s; }
html.js .reveal-d4 { transition-delay:.32s; }
html.js .reveal-scale { transform:translateY(26px) scale(.97); }
html.js .reveal-scale.in { transform:none; }

/* ============================================================================
   INNER PAGES — shared page header ("st-pagehead")
   Premium dark hero strip reused by pricing / features / news / contact.
   ============================================================================ */
.st-pagehead {
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--st-hero-bg); color:var(--st-hero-text);
  padding:92px 0 76px;
}
.st-pagehead__mesh {
  position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(55% 50% at 80% 12%, rgba(239,48,94,.26) 0%, transparent 60%),
    radial-gradient(46% 46% at 10% 88%, rgba(99,102,241,.20) 0%, transparent 62%),
    linear-gradient(160deg, #0b1020 0%, #140a22 52%, #0b1020 100%);
}
.st-pagehead__inner { max-width:720px; }
.st-pagehead h1 {
  font-size:clamp(2.1rem,4.6vw,3.3rem); font-weight:850; line-height:1.08; letter-spacing:-.032em;
  margin:18px 0 16px; color:#f1f5f9;
}
.st-pagehead p { color:#9fb0c6; font-size:1.1rem; line-height:1.6; max-width:560px; }
.st-pagehead__cta { display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.st-pagehead__trust { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:26px; }
.st-pagehead__trust span { display:inline-flex; align-items:center; gap:7px; color:#7e90a8; font-size:13.5px; font-weight:550; }
.st-pagehead__trust svg { width:16px; height:16px; color:var(--rose); stroke-width:2.6; }
.st-pagehead .st-orb--1 { top:-10%; right:4%; opacity:.45; }
.st-pagehead .st-orb--2 { bottom:-12%; left:2%; opacity:.4; }
.st-pagehead--article .st-pagehead__inner { max-width:820px; }
@media (max-width:768px){ .st-pagehead{ padding:72px 0 58px; } }

/* breadcrumb (article header) */
.st-breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:7px; font-size:13px; color:#7e90a8; margin-bottom:22px; }
.st-breadcrumb a { color:#9fb0c6; transition:color .15s; }
.st-breadcrumb a:hover { color:#fff; }
.st-breadcrumb .sep { width:14px; height:14px; color:#5f7290; flex:none; }
.st-breadcrumb .cur { color:#cbd5e1; font-weight:600; }

/* ============================================================================
   PRICING — comparison extras + static stat
   ============================================================================ */
.st-compare--pricing th,.st-compare--pricing td { vertical-align:middle; }
.st-compare__num { font-weight:800; font-size:15px; color:var(--st-text); letter-spacing:-.02em; display:inline-block; }
.st-compare .st-compare__onox .st-compare__num { color:var(--rose); }
.st-compare__price-row td { border-top:2px solid var(--st-border); }
.st-compare__price-row td .st-btn { display:inline-flex; }
.st-stat__num--static {
  -webkit-text-fill-color:initial; color:transparent;
  background:var(--grad-rose); -webkit-background-clip:text; background-clip:text;
}

/* ============================================================================
   FEATURES — section head + card top
   ============================================================================ */
.st-feat-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:40px; flex-wrap:wrap; }
.st-feat-head__left { display:flex; align-items:center; gap:16px; }
.st-feat-head__left .st-card__icon { margin-bottom:0; flex:none; }
.st-feat-head h2 { font-size:clamp(1.5rem,2.8vw,2rem); margin-top:6px; }
.st-feat-head__link { display:inline-flex; align-items:center; gap:7px; color:var(--rose); font-weight:650; font-size:14px; white-space:nowrap; transition:gap .18s; }
.st-feat-head__link svg { width:17px; height:17px; }
.st-feat-head__link:hover { gap:11px; }
.st-feat-card__top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:14px; }
.st-feat-card__top .st-card__icon { margin-bottom:0; }
.st-feat-card__hint { font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--rose); background:rgba(239,48,94,.1); border:1px solid rgba(239,48,94,.2); padding:4px 10px; border-radius:var(--r-pill); white-space:nowrap; }
@media (max-width:560px){ .st-feat-head{ align-items:flex-start; } }

/* ============================================================================
   NEWS — card grid + tags
   ============================================================================ */
.st-news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:8px; }
@media (max-width:920px){ .st-news-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .st-news-grid{ grid-template-columns:1fr; } }
.st-news-card {
  display:flex; flex-direction:column; gap:12px;
  background:var(--st-surface); border:1px solid var(--st-border); border-radius:var(--r-lg);
  padding:24px; box-shadow:var(--sh-sm); color:inherit;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s;
}
.st-news-card--pinned { border-color:var(--rose); box-shadow:var(--sh-rose-sm); }
.st-news-card__meta { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.st-news-card__ver { font-size:11.5px; color:var(--st-text-mute); }
.st-news-card__title { font-size:18px; font-weight:750; letter-spacing:-.02em; line-height:1.32; color:var(--st-text); }
.st-news-card__excerpt { color:var(--st-text-mute); font-size:14px; line-height:1.6; flex:1; }
.st-news-card__foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; padding-top:14px; border-top:1px solid var(--st-border); }
.st-news-card__date { color:var(--st-text-mute); font-size:12.5px; font-weight:550; }
.st-news-card__read { display:inline-flex; align-items:center; gap:6px; color:var(--rose); font-weight:650; font-size:13.5px; transition:gap .18s; }
.st-news-card__read svg { width:16px; height:16px; }
.st-news-card:hover .st-news-card__read { gap:10px; }

/* tags / badges (reusable) */
.st-tag { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:4px 10px; border-radius:var(--r-pill); border:1px solid transparent; }
.st-tag svg { width:12px; height:12px; }
.st-tag--rose   { background:rgba(239,48,94,.1);  color:var(--rose);  border-color:rgba(239,48,94,.22); }
.st-tag--indigo { background:rgba(99,102,241,.1); color:#6366f1;      border-color:rgba(99,102,241,.22); }
.st-tag--amber  { background:rgba(245,158,11,.12);color:#b45309;      border-color:rgba(245,158,11,.24); }
[data-bs-theme="dark"] .st-tag--amber { color:#fbbf24; }
.st-tag--ghost  { background:var(--st-bg-mute); color:var(--st-text-soft); border-color:var(--st-border); text-transform:none; letter-spacing:0; }

/* ============================================================================
   NEWSLETTER block (inline, reusable)
   ============================================================================ */
.st-newsletter {
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:var(--st-hero-bg); color:#f1f5f9; border-radius:var(--r-xl);
  padding:28px 32px; margin-top:40px; position:relative; overflow:hidden; isolation:isolate;
}
.st-newsletter::before { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(50% 80% at 88% 0%, rgba(239,48,94,.2), transparent 60%); }
.st-newsletter__copy { display:flex; align-items:center; gap:16px; min-width:240px; }
.st-newsletter__icon { width:46px; height:46px; border-radius:12px; flex:none; display:flex; align-items:center; justify-content:center; background:rgba(239,48,94,.16); color:#ff7a9c; }
.st-newsletter__icon svg { width:22px; height:22px; }
.st-newsletter h3 { font-size:17px; font-weight:750; color:#f1f5f9; margin-bottom:3px; }
.st-newsletter p { font-size:13.5px; color:#9fb0c6; }
.st-newsletter__form { display:flex; gap:9px; flex-wrap:wrap; }
.st-newsletter__form input[type=email] {
  flex:1; min-width:220px; padding:12px 15px; border-radius:var(--r-md);
  border:1px solid rgba(148,163,184,.24); background:rgba(8,13,26,.6); color:#e6edf6;
  font-family:inherit; font-size:14px;
}
.st-newsletter__form input[type=email]::placeholder { color:#5f7290; }
.st-newsletter__form input[type=email]:focus { outline:none; border-color:var(--rose); box-shadow:0 0 0 3px rgba(239,48,94,.22); }
.st-newsletter__form--stack { flex-direction:column; align-items:stretch; }
.st-newsletter__form--stack input[type=email] { min-width:0; }
@media (max-width:680px){ .st-newsletter{ flex-direction:column; align-items:stretch; } .st-newsletter__form input[type=email]{ min-width:0; } }

/* ============================================================================
   ALERTS (reusable)
   ============================================================================ */
.st-alert { border-radius:var(--r-md); padding:14px 18px; font-size:14px; font-weight:550; margin-bottom:20px; border:1px solid transparent; }
.st-alert--success { background:rgba(16,185,129,.1); color:#047857; border-color:rgba(16,185,129,.28); }
.st-alert--warn    { background:rgba(245,158,11,.1); color:#b45309; border-color:rgba(245,158,11,.28); }
.st-alert--danger  { background:rgba(239,48,94,.08); color:#be123c; border-color:rgba(239,48,94,.24); }
[data-bs-theme="dark"] .st-alert--success { color:#34d399; }
[data-bs-theme="dark"] .st-alert--warn { color:#fbbf24; }
[data-bs-theme="dark"] .st-alert--danger { color:#fb7185; }

/* ============================================================================
   EMPTY STATE (reusable)
   ============================================================================ */
.st-empty { max-width:460px; margin:24px auto; text-align:center; padding:48px 24px; }
.st-empty__icon { width:64px; height:64px; border-radius:18px; margin:0 auto 20px; display:flex; align-items:center; justify-content:center; background:var(--st-bg-mute); color:var(--st-text-mute); border:1px solid var(--st-border); }
.st-empty__icon svg { width:28px; height:28px; }
.st-empty h3 { font-size:19px; margin-bottom:10px; }
.st-empty p { color:var(--st-text-mute); font-size:14.5px; line-height:1.6; margin-bottom:24px; }

/* ============================================================================
   ARTICLE — prose body
   ============================================================================ */
.st-article { max-width:760px; margin-inline:auto; }
.st-prose {
  background:var(--st-surface); border:1px solid var(--st-border); border-radius:var(--r-lg);
  padding:40px 44px; box-shadow:var(--sh-sm);
  color:var(--st-text-soft); font-size:16px; line-height:1.8;
}
.st-prose > :first-child { margin-top:0; }
.st-prose > :last-child { margin-bottom:0; }
.st-prose h3 { font-size:1.3rem; font-weight:750; color:var(--st-text); margin:1.6em 0 .6em; letter-spacing:-.02em; }
.st-prose p { margin:0 0 1.05em; }
.st-prose strong { color:var(--st-text); font-weight:700; }
.st-prose em { font-style:italic; }
.st-prose a { color:var(--rose); text-decoration:underline; text-decoration-color:rgba(239,48,94,.35); text-underline-offset:2px; transition:text-decoration-color .15s; }
.st-prose a:hover { text-decoration-color:var(--rose); }
.st-article__foot { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:28px; }
@media (max-width:560px){ .st-prose{ padding:28px 22px; } .st-article__foot{ flex-direction:column; align-items:stretch; } }

/* ============================================================================
   CONTACT — two-column grid, form, channels
   ============================================================================ */
.st-contact { display:grid; grid-template-columns:1.6fr 1fr; gap:28px; align-items:start; }
@media (max-width:880px){ .st-contact{ grid-template-columns:1fr; } }
.st-contact__card { padding:34px; }
.st-contact__title { font-size:20px; font-weight:750; letter-spacing:-.02em; margin-bottom:6px; }
.st-contact__subtitle { color:var(--st-text-mute); font-size:13.5px; margin-bottom:24px; }
.st-contact__success { background:var(--st-surface); border:1px solid var(--st-border); border-radius:var(--r-lg); box-shadow:var(--sh-sm); padding:48px 36px; text-align:center; }
.st-contact__success-icon { width:64px; height:64px; border-radius:50%; margin:0 auto 20px; display:flex; align-items:center; justify-content:center; background:rgba(16,185,129,.12); color:#10b981; }
.st-contact__success-icon svg { width:30px; height:30px; stroke-width:2.8; }
.st-contact__success h2 { font-size:22px; margin-bottom:10px; }
.st-contact__success p { color:var(--st-text-mute); font-size:15px; line-height:1.6; margin-bottom:26px; max-width:420px; margin-inline:auto; }
.st-contact__side { display:flex; flex-direction:column; gap:20px; }
.st-contact__channels, .st-contact__news { padding:26px; }
.st-contact__channels h3, .st-contact__news h3 { font-size:16px; font-weight:750; margin-bottom:18px; }
.st-contact__news p { color:var(--st-text-mute); font-size:13.5px; line-height:1.55; margin-bottom:16px; }

.st-channels { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.st-channels li { display:flex; align-items:flex-start; gap:13px; }
.st-channels__ic { width:40px; height:40px; border-radius:11px; flex:none; display:flex; align-items:center; justify-content:center; }
.st-channels__ic svg { width:19px; height:19px; }
.st-channels__body { display:flex; flex-direction:column; gap:2px; }
.st-channels__body small { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--st-text-mute); }
.st-channels__body a { font-size:14px; font-weight:600; color:var(--st-text); transition:color .15s; }
.st-channels__body a:hover { color:var(--rose); }

/* ============================================================================
   FORM controls (reusable, light/dark aware)
   ============================================================================ */
.st-form { display:flex; flex-direction:column; gap:18px; }
.st-form__row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .st-form__row{ grid-template-columns:1fr; } }
.st-form__group { display:flex; flex-direction:column; gap:7px; }
.st-form__group label { font-size:13px; font-weight:650; color:var(--st-text-soft); }
.st-form__group label .req { color:var(--rose); }
.st-form__group input, .st-form__group textarea {
  width:100%; font-family:inherit; font-size:14.5px; color:var(--st-text);
  padding:12px 14px; border-radius:var(--r-md); border:1px solid var(--st-border-strong);
  background:var(--st-bg); transition:border-color .15s, box-shadow .15s;
}
.st-form__group textarea { resize:vertical; min-height:120px; line-height:1.55; }
.st-form__group input::placeholder, .st-form__group textarea::placeholder { color:var(--st-text-mute); }
.st-form__group input:focus, .st-form__group textarea:focus { outline:none; border-color:var(--rose); box-shadow:0 0 0 3px rgba(239,48,94,.16); }
.st-form__group input.is-invalid, .st-form__group textarea.is-invalid { border-color:#ef4444; }
.st-form__err { font-size:12.5px; color:#dc2626; font-weight:550; }
[data-bs-theme="dark"] .st-form__err { color:#fb7185; }

/* ============================================================================
   NEWSLETTER CONFIRM page
   ============================================================================ */
.st-confirm { position:relative; overflow:hidden; isolation:isolate; min-height:72vh; display:flex; align-items:center; padding:80px 0; background:var(--st-bg-soft); }
.st-confirm__mesh { position:absolute; inset:0; z-index:-2; pointer-events:none; background:radial-gradient(50% 50% at 50% 0%, rgba(239,48,94,.08), transparent 70%); }
.st-confirm .st-orb--1 { top:-6%; left:50%; transform:translateX(-50%); opacity:.18; }
.st-confirm__card { max-width:520px; margin-inline:auto; text-align:center; background:var(--st-surface); border:1px solid var(--st-border); border-radius:var(--r-2xl); box-shadow:var(--sh-lg); padding:54px 40px; }
.st-confirm__icon { width:78px; height:78px; border-radius:50%; margin:0 auto 24px; display:flex; align-items:center; justify-content:center; }
.st-confirm__icon svg { width:36px; height:36px; }
.st-confirm__icon--ok { background:rgba(16,185,129,.12); color:#10b981; }
.st-confirm__icon--already { background:rgba(99,102,241,.12); color:#6366f1; }
.st-confirm__icon--bad { background:rgba(239,48,94,.12); color:var(--rose); }
.st-confirm__card h1 { font-size:clamp(1.6rem,3vw,2rem); margin-bottom:12px; }
.st-confirm__card p { color:var(--st-text-mute); font-size:15px; line-height:1.7; margin-bottom:30px; }
.st-confirm__cta { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

/* ============================================================================
   CANLI DEMO PAGE — interactive faux PANELTR panel tour (/demo)
   Appended block. Slate + rose, mirrors the real admin panel look.
   ============================================================================ */
.st-demopage { position:relative; overflow:hidden; isolation:isolate; padding:72px 0 96px; background:var(--st-bg-soft); }
.st-demopage__mesh { position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:radial-gradient(60% 44% at 50% -6%, rgba(239,48,94,.10), transparent 70%); }
.st-demopage .st-orb--1 { top:-8%; left:8%; opacity:.16; }
.st-demopage .st-orb--2 { top:18%; right:4%; opacity:.12; }

.st-demopage__head { max-width:720px; margin:0 auto 40px; text-align:center; }
.st-demopage__head h1 { font-size:clamp(2rem,4.2vw,3.1rem); margin:18px 0 14px; }
.st-demopage__sub { color:var(--st-text-soft); font-size:1.08rem; max-width:600px; margin:0 auto; line-height:1.7; }
.st-demopage__cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px; }
.st-demopage__note { display:inline-flex; align-items:center; gap:7px; margin-top:18px;
  font-size:13px; color:var(--st-text-mute); }
.st-demopage__note svg { width:15px; height:15px; color:var(--rose); }

/* ---- panel shell (browser chrome) ---- */
.st-panel { position:relative; max-width:1080px; margin:0 auto; background:var(--st-surface);
  border:1px solid var(--st-border); border-radius:var(--r-2xl); box-shadow:var(--sh-lg);
  overflow:hidden; }
.st-panel__bar { display:flex; align-items:center; gap:14px; padding:12px 16px;
  background:var(--st-bg-mute); border-bottom:1px solid var(--st-border); }
.st-panel__dots { display:flex; gap:7px; flex:none; }
.st-panel__dots i { width:11px; height:11px; border-radius:50%; background:var(--slate-300); }
.st-panel__dots i:nth-child(1){ background:#f87171; } .st-panel__dots i:nth-child(2){ background:#fbbf24; } .st-panel__dots i:nth-child(3){ background:#34d399; }
.st-panel__url { flex:1; display:flex; align-items:center; gap:8px; min-width:0;
  font-family:var(--st-mono); font-size:12.5px; color:var(--st-text-mute);
  background:var(--st-surface); border:1px solid var(--st-border); border-radius:var(--r-pill);
  padding:6px 14px; max-width:420px; }
.st-panel__url svg { width:13px; height:13px; flex:none; color:#34d399; }
.st-panel__url-path { color:var(--st-text-soft); }
.st-panel__demo-tag { flex:none; font-size:10.5px; font-weight:800; letter-spacing:.12em;
  color:var(--rose); background:rgba(239,48,94,.10); border:1px solid rgba(239,48,94,.25);
  padding:3px 9px; border-radius:var(--r-pill); }

.st-panel__body { display:grid; grid-template-columns:212px 1fr; min-height:540px; }

/* ---- sidebar ---- */
.st-panel__side { background:var(--slate-900); color:#cbd5e1; padding:16px 12px;
  display:flex; flex-direction:column; gap:4px; border-right:1px solid rgba(255,255,255,.06); }
[data-bs-theme="dark"] .st-panel__side { background:#0a0f1d; }
.st-panel__logo { display:flex; align-items:center; gap:10px; padding:6px 8px 16px; }
.st-panel__logo b { width:30px; height:30px; border-radius:9px; background:var(--grad-rose);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; box-shadow:var(--sh-rose-sm); }
.st-panel__logo span { font-weight:800; color:#fff; letter-spacing:.02em; font-size:15px; }
.st-panel__navitem { display:flex; align-items:center; gap:11px; width:100%;
  padding:10px 12px; border:0; background:transparent; color:#94a3b8; cursor:pointer;
  border-radius:10px; font:inherit; font-size:13.5px; font-weight:600; text-align:left;
  transition:background .15s, color .15s; }
.st-panel__navitem svg { width:17px; height:17px; flex:none; }
.st-panel__navitem:hover { background:rgba(255,255,255,.05); color:#e2e8f0; }
.st-panel__navitem.is-active { background:var(--grad-rose); color:#fff; box-shadow:var(--sh-rose-sm); }
.st-panel__navitem:focus-visible { outline:2px solid var(--rose-400); outline-offset:2px; }
.st-panel__side-foot { margin-top:auto; padding-top:14px; border-top:1px solid rgba(255,255,255,.07); }
.st-panel__user { display:flex; align-items:center; gap:10px; padding:6px 8px; }
.st-panel__avatar { width:30px; height:30px; border-radius:50%; flex:none;
  background:var(--slate-700); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; }
.st-panel__user-meta { display:flex; flex-direction:column; min-width:0; }
.st-panel__user-meta b { color:#e2e8f0; font-size:12.5px; }
.st-panel__user-meta small { color:#64748b; font-size:11px; overflow:hidden; text-overflow:ellipsis; }

/* ---- main ---- */
.st-panel__main { display:flex; flex-direction:column; min-width:0; background:var(--st-bg); }
.st-panel__top { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 22px; border-bottom:1px solid var(--st-border); }
.st-panel__crumb { font-weight:800; font-size:16px; color:var(--st-text); }
.st-panel__top-actions { display:flex; align-items:center; gap:10px; }
.st-panel__searchbox { display:inline-flex; align-items:center; gap:8px; font-size:13px;
  color:var(--st-text-mute); background:var(--st-bg-soft); border:1px solid var(--st-border);
  border-radius:var(--r-pill); padding:7px 14px; }
.st-panel__searchbox svg { width:14px; height:14px; }
.st-panel__iconbtn { position:relative; display:inline-flex; color:var(--st-text-soft); }
.st-panel__iconbtn svg { width:19px; height:19px; }
.st-panel__badge-dot { position:absolute; top:-1px; right:-1px; width:7px; height:7px;
  border-radius:50%; background:var(--rose); border:2px solid var(--st-bg); }

.st-panel__panes { padding:22px; flex:1; min-width:0; }
.st-pane { display:none; animation:dmPaneIn .26s ease both; }
.st-pane.is-active { display:block; }
.st-pane[hidden] { display:none; }
@keyframes dmPaneIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* stat row */
.st-pane__statrow { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px; }
.st-pstat { background:var(--st-surface); border:1px solid var(--st-border); border-radius:var(--r-lg);
  padding:14px 16px; box-shadow:var(--sh-xs); }
.st-pstat small { display:block; font-size:11.5px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--st-text-mute); }
.st-pstat b { display:block; font-size:1.7rem; font-weight:800; margin:4px 0 2px; line-height:1; letter-spacing:-.02em; }
.st-pstat b.g { color:#10b981; } .st-pstat b.w { color:#f59e0b; } .st-pstat b.r { color:var(--rose); }
.st-pstat__trend { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--st-text-mute); }
.st-pstat__trend.up { color:#10b981; } .st-pstat__trend.warn { color:#f59e0b; }

.st-pane__cardhead { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 0 14px; }
.st-pane__cardhead h3 { font-size:1.05rem; font-weight:800; }
.st-pane__hint { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--st-text-mute); }
.st-pane__hint svg { width:14px; height:14px; }
.st-pane__btn { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700;
  color:#fff; background:var(--grad-rose); border-radius:var(--r-pill); padding:7px 14px; box-shadow:var(--sh-rose-sm); cursor:pointer; }
.st-pane__btn svg { width:14px; height:14px; }

/* table */
.st-ptable-wrap { border:1px solid var(--st-border); border-radius:var(--r-lg); overflow:hidden; overflow-x:auto; }
.st-ptable { width:100%; border-collapse:collapse; font-size:13px; min-width:520px; }
.st-ptable thead th { text-align:left; font-size:11px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--st-text-mute); background:var(--st-bg-soft);
  padding:11px 16px; border-bottom:1px solid var(--st-border); white-space:nowrap; }
.st-ptable tbody td { padding:12px 16px; border-bottom:1px solid var(--st-border); color:var(--st-text-soft); white-space:nowrap; }
.st-ptable tbody tr:last-child td { border-bottom:0; }
.st-ptable tbody tr:hover td { background:var(--st-bg-soft); }
.st-ptable .mono { font-family:var(--st-mono); font-size:12px; color:var(--st-text); }
.st-ptable .ta-r { text-align:right; }
.st-amt--in { color:#10b981; } .st-amt--out { color:var(--rose); }

/* tier badges */
.st-tier { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700;
  padding:3px 9px; border-radius:var(--r-pill); letter-spacing:.01em; }
.st-tier svg { width:12px; height:12px; }
.st-tier--ent { background:rgba(99,102,241,.12); color:#6366f1; }
.st-tier--pro { background:rgba(239,48,94,.12); color:var(--rose); }
.st-tier--start { background:rgba(14,165,233,.12); color:#0ea5e9; }
.st-tier--reseller { background:rgba(245,158,11,.14); color:#d97706; padding:4px 6px; }
[data-bs-theme="dark"] .st-tier--ent { color:#a5b4fc; }
[data-bs-theme="dark"] .st-tier--start { color:#7dd3fc; }
[data-bs-theme="dark"] .st-tier--reseller { color:#fbbf24; }

/* status badges */
.st-badge { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700;
  padding:3px 10px; border-radius:var(--r-pill); }
.st-badge i { width:6px; height:6px; border-radius:50%; }
.st-badge--ok { background:rgba(16,185,129,.12); color:#059669; } .st-badge--ok i { background:#10b981; }
.st-badge--live { background:rgba(16,185,129,.12); color:#059669; } .st-badge--live i { background:#10b981; animation:dmPulse 1.6s ease-out infinite; }
.st-badge--warn { background:rgba(245,158,11,.14); color:#b45309; } .st-badge--warn i { background:#f59e0b; }
.st-badge--off { background:rgba(100,116,139,.14); color:var(--slate-500); } .st-badge--off i { background:var(--slate-400); }
[data-bs-theme="dark"] .st-badge--ok,[data-bs-theme="dark"] .st-badge--live { color:#34d399; }
[data-bs-theme="dark"] .st-badge--warn { color:#fbbf24; }

/* fleet list */
.st-fleet { list-style:none; margin:0; padding:0; border:1px solid var(--st-border);
  border-radius:var(--r-lg); overflow:hidden; }
.st-fleet__row { display:grid; grid-template-columns:auto 1.4fr 1fr auto; align-items:center; gap:14px;
  padding:12px 16px; border-bottom:1px solid var(--st-border); font-size:13px; }
.st-fleet__row:last-child { border-bottom:0; }
.st-fleet__row:hover { background:var(--st-bg-soft); }
.st-fleet__host { display:flex; flex-direction:column; min-width:0; }
.st-fleet__host b { font-size:13px; color:var(--st-text); }
.st-fleet__host small { font-size:11.5px; color:var(--st-text-mute); }
.st-fleet__panel { color:var(--st-text-soft); font-size:12.5px; }
.st-fleet__seen { color:var(--st-text-mute); font-size:12px; text-align:right; }
.st-livedot { width:9px; height:9px; border-radius:50%; flex:none; display:inline-block; }
.st-livedot.live { background:#10b981; box-shadow:0 0 0 0 rgba(16,185,129,.5); animation:dmPulse 1.8s ease-out infinite; }
.st-livedot.idle { background:#f59e0b; }
.st-livedot.off { background:var(--slate-400); }
@keyframes dmPulse { 0%{ box-shadow:0 0 0 0 rgba(16,185,129,.45);} 70%{ box-shadow:0 0 0 7px rgba(16,185,129,0);} 100%{ box-shadow:0 0 0 0 rgba(16,185,129,0);} }

/* customer grid */
.st-custgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.st-custcard { display:flex; align-items:center; gap:13px; background:var(--st-surface);
  border:1px solid var(--st-border); border-radius:var(--r-lg); padding:14px 16px; box-shadow:var(--sh-xs); }
.st-custcard__av { width:42px; height:42px; border-radius:12px; flex:none; color:#fff;
  background:linear-gradient(135deg,var(--slate-700),var(--slate-900)); display:flex;
  align-items:center; justify-content:center; font-size:14px; font-weight:700; }
.st-custcard__meta { flex:1; min-width:0; }
.st-custcard__meta b { display:block; font-size:13.5px; color:var(--st-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-custcard__meta small { font-size:11.5px; color:var(--st-text-mute); }
.st-custcard__lic { text-align:right; flex:none; }
.st-custcard__lic b { display:block; font-size:1.25rem; font-weight:800; color:var(--rose); line-height:1; }
.st-custcard__lic small { font-size:10.5px; color:var(--st-text-mute); }

/* wallet */
.st-wallet { display:grid; grid-template-columns:1fr 1.3fr; gap:14px; margin-bottom:22px; }
.st-wallet__bal { background:linear-gradient(135deg,var(--slate-900),var(--slate-800)); color:#fff;
  border-radius:var(--r-lg); padding:18px 20px; }
.st-wallet__bal small { font-size:12px; color:#94a3b8; letter-spacing:.03em; }
.st-wallet__bal b { display:block; font-size:2.1rem; font-weight:800; margin:6px 0 8px; line-height:1; letter-spacing:-.02em; }
.st-wallet__bal b span { font-size:1.2rem; color:#94a3b8; }
.st-wallet__bal .st-pstat__trend.up { color:#34d399; }
.st-wallet__chart { background:var(--st-surface); border:1px solid var(--st-border); border-radius:var(--r-lg); padding:16px 18px; box-shadow:var(--sh-xs); }
.st-wallet__chart small { font-size:12px; color:var(--st-text-mute); font-weight:600; }
.st-wallet__bars { display:flex; align-items:flex-end; gap:10px; height:88px; margin-top:14px; }
.st-wallet__bar { flex:1; height:var(--h,40%); min-height:6px; border-radius:6px 6px 3px 3px;
  background:var(--grad-rose); opacity:.9; transform-origin:bottom; animation:dmBar .6s cubic-bezier(.2,.8,.2,1) both; }
.st-wallet__bar:last-child { background:var(--grad-rose-warm); box-shadow:var(--sh-rose-sm); }
@keyframes dmBar { from { transform:scaleY(0); } to { transform:scaleY(1); } }

/* versions */
.st-vers { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.st-vers__row { display:grid; grid-template-columns:auto auto 1fr auto; align-items:center; gap:14px;
  background:var(--st-surface); border:1px solid var(--st-border); border-radius:var(--r-lg);
  padding:13px 16px; box-shadow:var(--sh-xs); }
.st-vers__v { font-size:13.5px; font-weight:700; color:var(--st-text); }
.st-vers__note { font-size:12.5px; color:var(--st-text-soft); min-width:0; }
.st-vers__dl { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
  color:var(--st-text-soft); background:var(--st-bg-soft); border:1px solid var(--st-border);
  border-radius:var(--r-pill); padding:5px 11px; white-space:nowrap; }
.st-vers__dl svg { width:13px; height:13px; color:var(--rose); }
.st-chan { font-size:11px; font-weight:700; padding:3px 10px; border-radius:var(--r-pill); white-space:nowrap; }
.st-chan--stable { background:rgba(16,185,129,.12); color:#059669; }
.st-chan--lts { background:rgba(99,102,241,.12); color:#6366f1; }
.st-chan--beta { background:rgba(245,158,11,.14); color:#b45309; }
[data-bs-theme="dark"] .st-chan--stable { color:#34d399; }
[data-bs-theme="dark"] .st-chan--beta { color:#fbbf24; }

/* ---- coachmark tour ---- */
.st-coach-target { position:relative; z-index:60; box-shadow:0 0 0 3px var(--rose), 0 0 0 9px rgba(239,48,94,.22) !important;
  border-radius:12px; transition:box-shadow .2s; }
.st-coach-active::before { content:""; position:fixed; inset:0; background:rgba(2,6,23,.5);
  z-index:50; backdrop-filter:blur(1px); animation:dmFade .2s ease both; }
@keyframes dmFade { from { opacity:0; } to { opacity:1; } }
.st-coach { position:absolute; z-index:70; width:300px; max-width:calc(100vw - 32px); }
.st-coach__bubble { background:var(--st-surface); border:1px solid var(--st-border-strong);
  border-radius:var(--r-lg); box-shadow:var(--sh-lg); padding:16px 18px; }
.st-coach__step { font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--rose); margin-bottom:6px; }
.st-coach__bubble h4 { font-size:15px; font-weight:800; margin:0 0 6px; }
.st-coach__bubble p { font-size:13px; color:var(--st-text-soft); line-height:1.55; margin:0 0 14px; }
.st-coach__nav { display:flex; align-items:center; gap:8px; }
.st-coach__spacer { flex:1; }
.st-coach__btn { display:inline-flex; align-items:center; gap:5px; font:inherit; font-size:12.5px;
  font-weight:700; border-radius:var(--r-pill); padding:7px 13px; cursor:pointer; border:1px solid transparent; }
.st-coach__btn svg { width:13px; height:13px; }
.st-coach__btn.ghost { background:transparent; color:var(--st-text-mute); }
.st-coach__btn.ghost:hover { color:var(--st-text); background:var(--st-bg-soft); }
.st-coach__btn.solid { background:var(--grad-rose); color:#fff; box-shadow:var(--sh-rose-sm); }
.st-coach__btn:disabled { opacity:.4; cursor:not-allowed; }

/* ---- responsive ---- */
@media (max-width:820px) {
  .st-panel__body { grid-template-columns:1fr; min-height:0; }
  .st-panel__side { flex-direction:row; overflow-x:auto; gap:6px; padding:10px 12px;
    border-right:0; border-bottom:1px solid rgba(255,255,255,.06); scrollbar-width:none; }
  .st-panel__side::-webkit-scrollbar { display:none; }
  .st-panel__logo { display:none; }
  .st-panel__navitem { flex:none; white-space:nowrap; padding:9px 13px; }
  .st-panel__side-foot { display:none; }
  .st-pane__statrow { grid-template-columns:1fr; }
  .st-wallet { grid-template-columns:1fr; }
  .st-panel__searchbox span { display:none; }
  .st-fleet__row { grid-template-columns:auto 1fr auto; }
  .st-fleet__panel { display:none; }
  .st-vers__row { grid-template-columns:auto 1fr; row-gap:6px; }
  .st-vers__note { grid-column:1 / -1; }
  .st-coach { position:fixed !important; left:16px !important; right:16px !important;
    bottom:16px !important; top:auto !important; width:auto; }
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .st-hero__mesh, .st-orb, .st-mock, .st-sec__shield svg, .st-sec__ring,
  .st-shimmer, .st-dot--live::after, .st-livedot.live, .st-badge--live i,
  .st-wallet__bar, .st-pane { animation:none !important; }
  html.js .reveal { opacity:1 !important; transform:none !important; }
  .st-mock { transform:perspective(1400px) rotateY(-7deg) rotateX(3deg); }
  .st-wallet__bar { transform:none !important; }
  .st-hero__mascot, .st-cta__mascot { animation:none !important; }
}

/* ============================================================================
   ONOXSOFT REBRAND ADDITIONS (append-only)
   Brand logo imgs · hero mascot + panel mockup extras · panel screenshots ·
   mascot-flanked final CTA. Pure CSS/inline-SVG, zero external requests.
   ============================================================================ */

/* ---- Brand logo images (nav + footer) ---- */
/* NOT: .st-body img (height:auto, 0-1-1) global kuralı logo height:30px'i EZİYORDU
   → logo header'da 506x114'e taşıyordu. Specificity'yi (0-2-0) yaparak düzeltildi. */
.st-nav .st-nav__brand-img { display:block; height:30px; width:auto; }
[data-bs-theme="dark"] .st-nav .st-nav__brand-img { filter:brightness(0) invert(1) brightness(.96); }
.st-footer__brand b { margin-bottom:16px; }
.st-footer .st-footer__brand-img { display:block; height:30px; width:auto; }

/* ---- HERO visual: mascot alongside panel mockup ---- */
.st-hero__visual { position:relative; }
.st-hero__mascot {
  position:absolute; left:-26px; bottom:-30px; z-index:3;
  width:150px; height:150px; pointer-events:none;
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.45));
  animation:st-croc-bob 5.5s ease-in-out infinite;
}
@keyframes st-croc-bob {
  0%,100% { transform:translateY(0) rotate(-2deg); }
  50%     { transform:translateY(-12px) rotate(2deg); }
}
.st-hero__mock { position:relative; z-index:1; }

/* ---- HERO mockup: file-list strip (added under the chart) ---- */
.st-mock__files { margin-top:12px; display:flex; flex-direction:column; gap:2px; }
.st-mock__file {
  display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:7px;
  font-size:11px; color:#c2cee0; background:#101a30; border:1px solid rgba(148,163,184,.08);
}
.st-mock__file:hover { background:#16223c; }
.st-mock__file em { margin-left:auto; font-style:normal; color:#6f819b; font-size:10px; }
.st-mock__file .ic { width:14px; height:14px; border-radius:3px; flex:none; background:rgba(148,163,184,.28); }
.st-mock__file .ic--dir { background:var(--grad-rose); }
.st-mock__file .ic--img { background:rgba(16,185,129,.7); }

@media (max-width:980px){
  .st-hero__mascot { width:118px; height:118px; left:auto; right:6%; bottom:-22px; }
}
@media (max-width:560px){
  .st-hero__mascot { width:92px; height:92px; right:2%; bottom:-14px; }
}

/* ---- PANEL SCREENSHOTS showcase ---- */
.st-shots { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:940px){ .st-shots{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .st-shots{ grid-template-columns:1fr; } }
.st-shot { margin:0; display:flex; flex-direction:column; gap:14px; }
.st-shot__frame {
  border-radius:14px; overflow:hidden; background:#0d1426;
  border:1px solid rgba(148,163,184,.16);
  box-shadow:var(--sh-lg); transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;
}
.st-shot:hover .st-shot__frame { transform:translateY(-6px); box-shadow:0 32px 70px -24px rgba(15,23,42,.5); }
.st-shot__bar { display:flex; align-items:center; gap:10px; padding:9px 12px; background:#0a1120; border-bottom:1px solid rgba(148,163,184,.12); }
.st-shot__dots { display:flex; gap:5px; }
.st-shot__dots i { width:9px; height:9px; border-radius:50%; display:block; }
.st-shot__dots i:nth-child(1){ background:#ff5f57; } .st-shot__dots i:nth-child(2){ background:#febc2e; } .st-shot__dots i:nth-child(3){ background:#28c840; }
.st-shot__addr { font-size:11px; color:#8a9bb4; font-weight:600; letter-spacing:.01em; }
.st-shot__body { padding:14px; min-height:230px; }
.st-shot figcaption { text-align:center; font-size:14px; font-weight:650; color:var(--st-text-soft); }

/* screenshot: file manager */
.st-shot__path { font-family:var(--st-mono); font-size:10.5px; color:#7e90a8; padding:6px 10px; background:#101a30; border-radius:7px; margin-bottom:10px; }
.st-shot__row { display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center; padding:7px 8px; border-radius:7px; font-size:11.5px; color:#c2cee0; }
.st-shot__row:hover { background:#16223c; }
.st-shot__row--head { color:#6f819b; font-size:10px; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid rgba(148,163,184,.1); border-radius:0; margin-bottom:2px; }
.st-shot__row--head:hover { background:none; }
.st-shot__row .nm { display:flex; align-items:center; gap:8px; }
.st-shot__row span:not(.nm):not(.fic) { color:#7e90a8; font-variant-numeric:tabular-nums; }
.st-shot__row .fic { width:14px; height:14px; border-radius:3px; flex:none; background:rgba(148,163,184,.28); }
.st-shot__row .fic--dir { background:var(--grad-rose); }
.st-shot__row .fic--cfg { background:rgba(99,102,241,.7); }

/* screenshot: email accounts */
.st-shot__mailrow { display:flex; align-items:center; gap:11px; padding:9px 6px; border-bottom:1px solid rgba(148,163,184,.08); }
.st-shot__mailrow .av { width:30px; height:30px; border-radius:8px; flex:none; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:#fff; background:var(--grad-rose); }
.st-shot__mailrow:nth-child(2) .av { background:linear-gradient(120deg,#6366f1,#4f46e5); }
.st-shot__mailrow:nth-child(3) .av { background:linear-gradient(120deg,#0ea5e9,#0284c7); }
.st-shot__mailrow:nth-child(4) .av { background:linear-gradient(120deg,#10b981,#059669); }
.st-shot__mailrow .mt { display:flex; flex-direction:column; gap:1px; min-width:0; }
.st-shot__mailrow .mt b { font-size:12px; color:#e2e8f0; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-shot__mailrow .mt small { font-size:10px; color:#7e90a8; }
.st-shot__mailrow .bar { margin-left:auto; width:48px; height:6px; border-radius:4px; background:rgba(148,163,184,.18); overflow:hidden; flex:none; }
.st-shot__mailrow .bar i { display:block; height:100%; background:var(--grad-rose); border-radius:4px; }
.st-shot__mailadd { margin-top:12px; text-align:center; font-size:11.5px; font-weight:650; color:#ff7a9c; padding:8px; border:1px dashed rgba(239,48,94,.4); border-radius:8px; }

/* screenshot: stats / gauges */
.st-shot__gauges { display:flex; justify-content:space-around; gap:8px; margin-bottom:16px; }
.st-gauge { position:relative; width:64px; text-align:center; }
.st-gauge svg { width:64px; height:64px; transform:rotate(-90deg); }
.st-gauge svg .bg { fill:none; stroke:rgba(148,163,184,.16); stroke-width:3; }
.st-gauge svg .fg { fill:none; stroke:#ef305e; stroke-width:3; stroke-linecap:round; }
.st-gauge b { position:absolute; top:22px; left:0; right:0; font-size:14px; font-weight:800; color:#e2e8f0; }
.st-gauge small { display:block; margin-top:6px; font-size:10px; color:#7e90a8; text-transform:uppercase; letter-spacing:.04em; }
.st-shot__bars { display:flex; align-items:flex-end; justify-content:space-between; gap:5px; height:74px; padding:0 4px; }
.st-shot__bars span { flex:1; background:var(--grad-rose); border-radius:4px 4px 0 0; opacity:.85; min-height:6px; }
.st-shot__bars span:nth-child(even) { opacity:.55; }
.st-shot__cap { display:block; text-align:center; margin-top:10px; font-size:10px; color:#7e90a8; text-transform:uppercase; letter-spacing:.05em; }

/* ---- FINAL CTA with mascot ---- */
.st-cta--mascot { display:flex; align-items:center; gap:36px; text-align:left; }
.st-cta--mascot .st-cta__copy { flex:1; }
.st-cta--mascot h2 { margin-bottom:14px; }
.st-cta--mascot p { margin:0 0 26px; }
.st-cta--mascot .st-cta__cta { justify-content:flex-start; }
.st-cta__mascot {
  width:132px; height:132px; flex:none; pointer-events:none;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.3));
  animation:st-croc-bob 6s ease-in-out infinite;
}
@media (max-width:680px){
  .st-cta--mascot { flex-direction:column; text-align:center; gap:18px; }
  .st-cta--mascot .st-cta__cta { justify-content:center; }
  .st-cta__mascot { width:104px; height:104px; }
}

/* ============================================================================
   CANLI DEMO — HOSTING CONTROL PANEL panes (append-only)
   Hosting-specific UI inside the faux #dm-panel: overview stats + area chart +
   quick actions, file manager rows, e-mail quota bars, DB lists, DNS, SSL/
   security cards, backups, WordPress sites, resource gauges. Reuses the shared
   .st-panel/.st-pane/.st-ptable/.st-badge/.st-tier/.st-coach framework above.
   Pure CSS + inline SVG, zero external requests.
   ============================================================================ */

/* panel user avatar holds the croc-head mascot img */
.st-panel__avatar img { width:100%; height:100%; border-radius:50%; display:block; object-fit:cover; }

/* ---- Genel Bakış: stat cards (5-up, responsive) ---- */
.st-hstatgrid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:20px; }
.st-hstat { background:var(--st-surface); border:1px solid var(--st-border); border-radius:var(--r-lg);
  padding:14px 15px; box-shadow:var(--sh-xs); }
.st-hstat small { display:block; font-size:11px; font-weight:600; letter-spacing:.03em; color:var(--st-text-mute); }
.st-hstat b { display:block; font-size:1.35rem; font-weight:800; margin:5px 0 3px; line-height:1; letter-spacing:-.02em; }
.st-hstat b.g { color:#10b981; } .st-hstat b.w { color:#f59e0b; } .st-hstat b.r { color:var(--rose); }
.st-hstat__sub { font-size:11.5px; color:var(--st-text-mute); }

/* ---- Genel Bakış: split (chart + quick actions) ---- */
.st-hsplit { display:grid; grid-template-columns:1.5fr 1fr; gap:16px; }
.st-hcard { background:var(--st-surface); border:1px solid var(--st-border); border-radius:var(--r-lg);
  padding:16px 18px; box-shadow:var(--sh-xs); }
.st-hcard .st-pane__cardhead { margin:0 0 14px; }
.st-harea { width:100%; }
.st-harea svg { width:100%; height:96px; display:block; }

/* quick-action tiles */
.st-qa { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.st-qa__tile { display:flex; flex-direction:column; align-items:flex-start; gap:9px; font:inherit;
  text-align:left; cursor:pointer; padding:13px 14px; border-radius:var(--r-md);
  border:1px solid var(--st-border); background:var(--st-bg-soft); color:var(--st-text);
  font-size:12.5px; font-weight:700; transition:border-color .15s, transform .15s, box-shadow .15s; }
.st-qa__tile svg { width:20px; height:20px; color:var(--rose); }
.st-qa__tile:hover { border-color:var(--rose); transform:translateY(-2px); box-shadow:var(--sh-rose-sm); }

/* ---- Dosya Yöneticisi ---- */
.st-htoolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.st-hcrumb { display:inline-flex; align-items:center; gap:7px; margin-left:auto; font-family:var(--st-mono);
  font-size:11.5px; color:var(--st-text-soft); background:var(--st-bg-soft); border:1px solid var(--st-border);
  padding:6px 11px; border-radius:var(--r-pill); white-space:nowrap; }
.st-hcrumb svg { width:13px; height:13px; color:var(--rose); }
.st-ftable td:first-child { color:var(--st-text); font-weight:600; }
.st-fic { display:inline-flex; vertical-align:middle; margin-right:8px; }
.st-fic svg { width:16px; height:16px; }
.st-fic--dir svg, .st-fic--globe svg { color:var(--rose); }
.st-fic--cfg svg { color:#6366f1; }
.st-fic--arch svg { color:#f59e0b; }
.st-fic--ssl svg { color:#10b981; }
.st-fic--file svg { color:var(--st-text-mute); }
[data-bs-theme="dark"] .st-fic--cfg svg { color:#a5b4fc; }

/* ---- E-posta: quota bars ---- */
.st-quota { display:flex; align-items:center; gap:10px; min-width:170px; }
.st-quota__bar { flex:1; height:7px; border-radius:5px; background:var(--st-bg-mute); overflow:hidden; min-width:80px; }
.st-quota__bar i { display:block; height:100%; border-radius:5px; background:var(--grad-rose); }
.st-quota small { color:var(--st-text-mute); white-space:nowrap; }

/* ---- SSL / Güvenlik cards ---- */
.st-secgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:22px; }
.st-seccard { display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  background:var(--st-surface); border:1px solid var(--st-border); border-radius:var(--r-lg);
  padding:16px; box-shadow:var(--sh-xs); }
.st-seccard__ic { width:40px; height:40px; border-radius:11px; flex:none; display:flex; align-items:center; justify-content:center;
  background:rgba(100,116,139,.12); color:var(--slate-500); }
.st-seccard__ic.ok { background:rgba(16,185,129,.12); color:#059669; }
.st-seccard__ic svg { width:20px; height:20px; }
[data-bs-theme="dark"] .st-seccard__ic.ok { color:#34d399; }
.st-seccard b { display:block; font-size:13.5px; color:var(--st-text); }
.st-seccard small { display:block; font-size:11.5px; color:var(--st-text-mute); margin-top:2px; }

/* ---- WordPress site list ---- */
.st-wplist { list-style:none; margin:0; padding:0; border:1px solid var(--st-border);
  border-radius:var(--r-lg); overflow:hidden; }
.st-wprow { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px;
  padding:13px 16px; border-bottom:1px solid var(--st-border); }
.st-wprow:last-child { border-bottom:0; }
.st-wprow:hover { background:var(--st-bg-soft); }
.st-wprow__ic { width:34px; height:34px; border-radius:10px; flex:none; display:flex; align-items:center; justify-content:center;
  background:rgba(14,165,233,.12); color:#0284c7; }
.st-wprow__ic svg { width:19px; height:19px; }
[data-bs-theme="dark"] .st-wprow__ic { color:#38bdf8; }
.st-wprow__meta { display:flex; flex-direction:column; min-width:0; }
.st-wprow__meta b { font-size:13.5px; color:var(--st-text); }
.st-wprow__meta small { font-size:11.5px; color:var(--st-text-mute); }

/* ---- İstatistikler: resource gauges (CSS, like home.php) ---- */
.st-gaugerow { display:flex; gap:18px; flex-wrap:wrap; margin-bottom:22px; }
.st-hgauge { position:relative; width:96px; text-align:center; }
.st-hgauge svg { width:96px; height:96px; transform:rotate(-90deg); }
.st-hgauge svg .bg { fill:none; stroke:var(--st-border-strong); stroke-width:3; }
.st-hgauge svg .fg { fill:none; stroke:var(--rose); stroke-width:3; stroke-linecap:round; }
.st-hgauge b { position:absolute; top:36px; left:0; right:0; font-size:18px; font-weight:800; color:var(--st-text); }
.st-hgauge small { display:block; margin-top:8px; font-size:11px; color:var(--st-text-mute); text-transform:uppercase; letter-spacing:.04em; }
.st-panel .st-wallet__bars { height:100px; }

/* ---- responsive (demo hosting panes) ---- */
@media (max-width:820px) {
  .st-hstatgrid { grid-template-columns:1fr 1fr; }
  .st-hsplit { grid-template-columns:1fr; }
  .st-secgrid { grid-template-columns:1fr; }
  .st-qa { grid-template-columns:1fr 1fr; }
  .st-htoolbar { gap:6px; }
  .st-hcrumb { margin-left:0; width:100%; justify-content:center; order:99; }
  .st-wprow { grid-template-columns:auto 1fr; row-gap:8px; }
  .st-wprow .st-badge { grid-column:1 / -1; }
}

/* ============================================================================
   Yeni public sayfalar (cozumler/durum/marketplace/lisans-sorgula) için eksik
   utility + bileşen sınıfları — token-eşlemeli, mevcut tasarım diliyle uyumlu.
   ========================================================================== */
.st-surface       { background: var(--st-surface); }
.st-bg-soft       { background: var(--st-bg-soft); }
.st-bg-mute       { background: var(--st-bg-mute); }
.st-text          { color: var(--st-text); }
.st-text-soft     { color: var(--st-text-soft); }
.st-text-mute     { color: var(--st-text-mute); }
.st-border        { border-color: var(--st-border); }
.st-border-soft   { border-color: var(--st-border); }
.st-border-strong { border-color: var(--st-border-strong); }

/* CTA band — koyu gradient, ortalanmış (st-cta'nın kart varyantı) */
.st-ctaband        { position:relative; overflow:hidden; border-radius:24px; padding:54px 48px;
                     background:linear-gradient(135deg,#0b1020,#13182b); color:#fff; text-align:center; }
.st-ctaband__mesh  { position:absolute; inset:0; pointer-events:none;
                     background:radial-gradient(60% 120% at 80% 0%, rgba(239,48,94,.28), transparent 60%); }
.st-ctaband__inner { position:relative; z-index:1; max-width:680px; margin:0 auto; }
.st-ctaband__inner h2 { margin:0; font-size:28px; font-weight:800; letter-spacing:-.6px; }
.st-ctaband__inner p  { margin:14px 0 24px; font-size:15px; color:rgba(255,255,255,.85); line-height:1.6; }
.st-ctaband__btns  { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
@media (max-width:640px){ .st-ctaband{ padding:38px 22px; } }

/* pagehead koyu modifier (zaten koyu — emniyet) + sola hizalı inner */
.st-pagehead--dark         { background: var(--st-hero-bg); }
.st-pagehead__inner--start { text-align:left; align-items:flex-start; }