/* ============================================================
   Qoprall Computer Solution — Design System v2 "Aurora Lux"
   ============================================================ */
:root{
  --blue:#2563eb; --blue-2:#3b82f6; --cyan:#22d3ee; --violet:#7c3aed;
  --ink:#030712; --ink2:#081226; --ink3:#0d1a36;
  --line:rgba(148,163,184,.12);
}
html{ -webkit-font-smoothing:antialiased; scroll-behavior:smooth; }
body{ background:var(--ink); overflow-x:hidden; }
::selection{ background:rgba(37,99,235,.45); color:#fff; }
*:focus-visible{ outline:2px solid rgba(59,130,246,.7); outline-offset:2px; border-radius:4px; }

/* Scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:#050b1c; }
::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,#1d4ed8,#155e75); border-radius:8px; border:2px solid #050b1c; }

/* ---------- Aurora background ---------- */
.aurora{ position:relative; isolation:isolate; }
.aurora::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(42rem 42rem at 82% -8%, rgba(37,99,235,.22), transparent 60%),
    radial-gradient(36rem 36rem at -10% 22%, rgba(124,58,237,.13), transparent 60%),
    radial-gradient(30rem 30rem at 55% 115%, rgba(34,211,238,.10), transparent 60%),
    var(--ink);
}
.aurora::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 18%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 42% 68%, rgba(147,197,253,.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 55%, rgba(255,255,255,.3) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 8% 82%, rgba(103,232,249,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 88%, rgba(147,197,253,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 8%, rgba(255,255,255,.35) 50%, transparent 51%);
}
/* legacy alias */
.stars{ background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 20%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 40% 70%, rgba(147,197,253,.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 85% 60%, rgba(255,255,255,.3) 50%, transparent 51%);
}

/* ---------- Surfaces ---------- */
.glass{ background:rgba(8,18,38,.62); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid var(--line); }
.g-card{
  position:relative; border-radius:1.25rem; padding:1px;
  background:linear-gradient(160deg, rgba(59,130,246,.45), rgba(148,163,184,.08) 30%, rgba(148,163,184,.08) 70%, rgba(34,211,238,.35));
}
.g-card > .g-in{ border-radius:calc(1.25rem - 1px); background:linear-gradient(180deg,#0b1730,#081226); height:100%; }
.card-hover{ transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s, border-color .35s; }
.card-hover:hover{ transform:translateY(-6px);
  box-shadow:0 0 0 1px rgba(59,130,246,.3), 0 30px 70px -28px rgba(37,99,235,.55); }
.tilt{ transition:transform .4s cubic-bezier(.2,.7,.3,1); }
.tilt:hover{ transform:translateY(-6px) rotate(-.4deg) scale(1.01); }

/* ---------- Typographic accents ---------- */
.grad-text{ background:linear-gradient(92deg,#60a5fa 0%,#22d3ee 55%,#93c5fd 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.eyebrow{ display:inline-flex; align-items:center; gap:.6rem;
  letter-spacing:.24em; font-size:.7rem; font-weight:700; text-transform:uppercase; color:#7db4fd; }
.eyebrow::before{ content:""; width:2rem; height:1px; background:linear-gradient(90deg,transparent,#3b82f6); }
.eyebrow::after{ content:""; width:2rem; height:1px; background:linear-gradient(90deg,#3b82f6,transparent); }
.eyebrow.left::before{ display:none; }

/* ---------- Buttons ---------- */
.btn-lux{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.8rem 2rem; border-radius:9999px; font-weight:700; font-size:.9rem; color:#fff;
  background:linear-gradient(92deg,#1d4ed8 0%,#2563eb 45%,#0891b2 100%); background-size:150% 100%;
  box-shadow:0 10px 30px -10px rgba(37,99,235,.65), inset 0 1px 0 rgba(255,255,255,.18);
  transition:background-position .4s, transform .25s, box-shadow .35s;
}
.btn-lux:hover{ background-position:100% 0; transform:translateY(-2px);
  box-shadow:0 16px 40px -12px rgba(34,211,238,.55), inset 0 1px 0 rgba(255,255,255,.2); }
.btn-ghostx{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.8rem 2rem; border-radius:9999px; font-weight:600; font-size:.9rem; color:#dbeafe;
  border:1px solid rgba(148,163,184,.25); background:rgba(255,255,255,.03);
  transition:border-color .3s, background .3s, transform .25s;
}
.btn-ghostx:hover{ border-color:rgba(59,130,246,.7); background:rgba(37,99,235,.12); transform:translateY(-2px); }

/* ---------- Header ---------- */
.nav-shell{ transition:background .35s, box-shadow .35s, border-color .35s; border-bottom:1px solid transparent; }
.nav-shell.scrolled{ background:rgba(3,7,18,.86); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-color:var(--line); box-shadow:0 18px 40px -28px rgba(2,6,23,.9); }
.nav-link{ position:relative; padding:.35rem 0; }
.nav-link::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:linear-gradient(90deg,#3b82f6,#22d3ee); border-radius:2px; transition:right .3s; }
.nav-link:hover::after, .nav-link.active::after{ right:0; }
.nav-link.active{ color:#7db4fd; }

/* dropdown navbar */
.nav-item{ position:relative; }
.nav-drop{
  position:absolute; top:100%; left:50%; transform:translate(-50%, 10px);
  min-width:13.5rem; padding:.5rem; border-radius:1rem; z-index:60;
  background:rgba(8,18,38,.96); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line); box-shadow:0 30px 70px -30px rgba(2,6,23,.95);
  opacity:0; visibility:hidden; transition:opacity .28s, transform .28s, visibility .28s;
}
.nav-item:hover > .nav-drop, .nav-item:focus-within > .nav-drop{ opacity:1; visibility:visible; transform:translate(-50%, 4px); }
.nav-drop a{ display:flex; align-items:center; gap:.6rem; padding:.6rem .9rem; border-radius:.65rem;
  font-size:.85rem; font-weight:500; color:#cbd5e1; white-space:nowrap; transition:background .2s, color .2s; }
.nav-drop a:hover{ background:rgba(37,99,235,.16); color:#fff; }
.nav-drop .sep{ height:1px; margin:.4rem .6rem; background:var(--line); }

/* burger */
.burger{ width:2.6rem; height:2.6rem; border-radius:.8rem; display:inline-flex; flex-direction:column;
  align-items:center; justify-content:center; gap:5px; border:1px solid var(--line);
  background:rgba(255,255,255,.04); transition:border-color .3s, background .3s; cursor:pointer; }
.burger span{ display:block; width:1.15rem; height:2px; border-radius:2px; background:#cbd5e1; transition:transform .3s, opacity .3s, width .3s; }
.burger:hover{ border-color:rgba(59,130,246,.6); background:rgba(37,99,235,.12); }
.burger:hover span{ background:#93c5fd; }

/* ---------- Sidebar (off-canvas) ---------- */
.sidebar{
  position:fixed; top:0; left:0; bottom:0; width:min(21rem,88vw); z-index:80;
  background:linear-gradient(180deg, rgba(10,20,44,.97), rgba(5,11,28,.97));
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-right:1px solid var(--line); box-shadow:40px 0 90px -40px rgba(2,6,23,.9);
  transform:translateX(-102%); transition:transform .42s cubic-bezier(.2,.75,.25,1);
  display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain;
}
.sidebar.open{ transform:translateX(0); }
.sb-overlay{ position:fixed; inset:0; z-index:70; background:rgba(2,6,23,.6); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity .35s, visibility .35s; }
.sb-overlay.show{ opacity:1; visibility:visible; }
.sb-link{ display:flex; align-items:center; gap:.7rem; padding:.6rem .9rem; border-radius:.7rem;
  font-size:.88rem; font-weight:600; color:#cbd5e1; transition:background .25s, color .25s; }
.sb-link:hover{ background:rgba(37,99,235,.14); color:#fff; }
.sb-section{ padding:1.1rem .95rem .35rem; font-size:.6rem; font-weight:800; letter-spacing:.24em;
  text-transform:uppercase; color:#475569; display:flex; align-items:center; gap:.6rem; }
.sb-section::after{ content:""; flex:1; height:1px; background:var(--line); }
.sb-catalog{ display:flex; align-items:center; gap:.7rem; margin:.35rem .35rem 0; padding:.7rem .9rem; border-radius:.8rem;
  font-size:.85rem; font-weight:700; color:#e0f2fe;
  background:linear-gradient(92deg, rgba(29,78,216,.35), rgba(8,145,178,.28));
  border:1px solid rgba(59,130,246,.4); transition:border-color .25s, box-shadow .3s, transform .25s; }
.sb-catalog:hover{ border-color:rgba(34,211,238,.7); transform:translateY(-1px);
  box-shadow:0 14px 34px -16px rgba(34,211,238,.5); }
.sb-link.active{ background:linear-gradient(92deg, rgba(37,99,235,.28), rgba(8,145,178,.18)); color:#fff; }
.sb-caret{ margin-left:auto; transition:transform .3s; opacity:.6; }
.sb-group.open > .sb-link .sb-caret{ transform:rotate(90deg); }
.sb-sub{ max-height:0; overflow:hidden; transition:max-height .45s cubic-bezier(.2,.75,.25,1); }
.sb-group.open > .sb-sub{ max-height:40rem; }
.sb-sub .sb-link{ font-size:.83rem; font-weight:500; color:#94a3b8; padding:.5rem .9rem .5rem 2.2rem; position:relative; }
.sb-sub .sb-link::before{ content:""; position:absolute; left:1.15rem; top:50%; width:.45rem; height:1px; background:#334155; transition:background .25s,width .25s; }
.sb-sub .sb-link:hover::before{ background:#38bdf8; width:.65rem; }
.sb-sub2 .sb-link{ padding-left:3.1rem; font-size:.8rem; }
.sb-sub2 .sb-link::before{ left:2.05rem; }

/* ---------- Hero slider ---------- */
.slide{ opacity:0; visibility:hidden; transition:opacity 1s ease; position:absolute; inset:0; }
.slide.active{ opacity:1; visibility:visible; position:relative; }
.slide .sl-in > *{ opacity:0; transform:translateY(18px); }
.slide.active .sl-in > *{ opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.slide.active .sl-in > *:nth-child(1){ transition-delay:.1s }
.slide.active .sl-in > *:nth-child(2){ transition-delay:.22s }
.slide.active .sl-in > *:nth-child(3){ transition-delay:.34s }
.slide.active .sl-in > *:nth-child(4){ transition-delay:.46s }
.slider-dot{ width:.6rem; height:.6rem; border-radius:9999px; background:rgba(148,163,184,.35); transition:all .35s; cursor:pointer; }
.slider-dot.active{ background:linear-gradient(90deg,#3b82f6,#22d3ee); width:2rem; box-shadow:0 0 12px rgba(59,130,246,.8); }

/* ---------- Page hero ---------- */
.page-hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
/* v3: background futuristik murni CSS (foto --ph-img tidak dipakai lagi) */
.page-hero::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(40rem 24rem at 12% -12%, rgba(37,99,235,.30), transparent 62%),
    radial-gradient(32rem 20rem at 88% -4%, rgba(34,211,238,.18), transparent 62%),
    radial-gradient(28rem 22rem at 50% 125%, rgba(124,58,237,.16), transparent 65%),
    linear-gradient(180deg,#0a1730,#030712); }
.page-hero::after{ content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:linear-gradient(rgba(59,130,246,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,.12) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 75% 85% at 50% 15%, #000 30%, transparent 78%);
  mask-image:radial-gradient(ellipse 75% 85% at 50% 15%, #000 30%, transparent 78%); }
.crumbs{ display:inline-flex; align-items:center; gap:.5rem; font-size:.75rem; color:#64748b; }
.crumbs a{ color:#7db4fd; } .crumbs a:hover{ color:#bfdbfe; }

/* ---------- Reveal on scroll ---------- */
.rv{ opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1); transition-delay:var(--d,0s); }
.rv.rv-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .rv{ opacity:1; transform:none; transition:none } }

/* ---------- Marquee ---------- */
@keyframes marquee{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.marquee-wrap{ overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ animation:marquee 38s linear infinite; }
.marquee-track:hover{ animation-play-state:paused; }

/* ---------- Timeline ---------- */
.timeline-line{ position:absolute; left:1.05rem; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg,rgba(59,130,246,.8),rgba(34,211,238,.2)); }
.timeline-dot{ position:absolute; left:.5rem; top:.3rem; width:1.15rem; height:1.15rem; border-radius:9999px;
  background:var(--ink2); border:3px solid var(--blue-2); box-shadow:0 0 0 5px rgba(59,130,246,.15), 0 0 18px rgba(59,130,246,.5); }

/* ---------- FAQ ---------- */
.faq details{ border:1px solid var(--line); border-radius:1rem; background:rgba(11,23,48,.6); overflow:hidden; transition:border-color .3s; }
.faq details[open]{ border-color:rgba(59,130,246,.5); box-shadow:0 20px 50px -30px rgba(37,99,235,.5); }
.faq summary{ cursor:pointer; list-style:none; display:flex; align-items:center; gap:.9rem;
  padding:1.1rem 1.3rem; font-weight:600; color:#e2e8f0; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .fx{ margin-left:auto; width:1.6rem; height:1.6rem; flex:none; border-radius:9999px;
  display:flex; align-items:center; justify-content:center; font-weight:700;
  background:rgba(37,99,235,.18); color:#7db4fd; transition:transform .3s, background .3s; }
.faq details[open] summary .fx{ transform:rotate(45deg); background:rgba(34,211,238,.22); color:#67e8f9; }
.faq .faq-a{ padding:0 1.3rem 1.2rem 1.3rem; color:#94a3b8; font-size:.9rem; line-height:1.8; }

/* ---------- Pricing ---------- */
.plan-pop{ position:relative; }
.plan-pop::before{ content:attr(data-pop); position:absolute; top:-.8rem; left:50%; transform:translateX(-50%);
  font-size:.6rem; font-weight:800; letter-spacing:.18em; color:#fff; padding:.35rem 1rem; border-radius:9999px;
  background:linear-gradient(92deg,#1d4ed8,#0891b2); box-shadow:0 8px 24px -8px rgba(37,99,235,.8); z-index:2; }

/* ---------- Float / misc ---------- */
@keyframes floaty{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }
.floaty{ animation:floaty 6.5s ease-in-out infinite; }
@keyframes pulse-ring{ 0%{box-shadow:0 0 0 0 rgba(59,130,246,.5)} 70%{box-shadow:0 0 0 16px rgba(59,130,246,0)} 100%{box-shadow:0 0 0 0 rgba(59,130,246,0)} }
.pulse{ animation:pulse-ring 2.6s infinite; }
.divider-glow{ height:1px; background:linear-gradient(90deg,transparent, rgba(59,130,246,.5), rgba(34,211,238,.5), transparent); }

/* ---------- Landing ---------- */
.landing-btn{
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  padding:1.4rem 1rem; border-radius:1.25rem; min-width:8.5rem;
  border:1px solid var(--line); background:rgba(10,20,44,.55); backdrop-filter:blur(14px);
  color:#e2e8f0; font-weight:700; font-size:.9rem;
  transition:transform .3s, border-color .3s, background .3s, box-shadow .35s;
}
.landing-btn .ic{ font-size:1.6rem; }
.landing-btn:hover{ transform:translateY(-6px); border-color:rgba(59,130,246,.7);
  background:rgba(37,99,235,.16); box-shadow:0 24px 60px -24px rgba(37,99,235,.7); }

/* ---------- Artikel ---------- */
.prose-q h2{ color:#bfdbfe; font-weight:700; font-size:1.4rem; margin:2.2rem 0 .8rem; font-family:Sora,'Plus Jakarta Sans',sans-serif; }
.prose-q h3{ color:#bfdbfe; font-weight:700; font-size:1.15rem; margin:1.8rem 0 .6rem; font-family:Sora,'Plus Jakarta Sans',sans-serif; }
.prose-q p{ color:#94a3b8; line-height:1.9; margin-bottom:1rem; }
.prose-q ul,.prose-q ol{ color:#94a3b8; line-height:1.85; list-style:disc; padding-left:1.4rem; margin-bottom:1rem; }
.prose-q ol{ list-style:decimal; }
.prose-q li{ margin-bottom:.4rem; }
.prose-q strong,.prose-q b{ color:#e2e8f0; }
.prose-q a{ color:#60a5fa; text-decoration:underline; text-underline-offset:3px; }
.prose-q blockquote{ border-left:3px solid #2563eb; padding:.4rem 1rem; margin:1.2rem 0; color:#cbd5e1; background:rgba(37,99,235,.08); border-radius:.5rem; }

/* ============================================================
   v3 "Aurora Lux" — slider futuristik + ambience + nav-fx
   ============================================================ */
/* badge brand di bawah logo */
.brand-badge{ display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .65rem; border-radius:9999px;
  font-size:8px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:#93c5fd;
  background:rgba(30,58,138,.35); border:1px solid rgba(59,130,246,.35);
  box-shadow:0 0 12px -4px rgba(37,99,235,.6); white-space:nowrap; }
.brand-badge::before{ content:""; width:4px; height:4px; border-radius:9999px; background:#22d3ee; flex:none;
  animation:pulse-ring 2.6s infinite; }

/* grid holografik + partikel ambient */
.gridfx{background-image:linear-gradient(rgba(59,130,246,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(59,130,246,.055) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(ellipse 75% 62% at 50% 38%,#000 25%,transparent 78%);mask-image:radial-gradient(ellipse 75% 62% at 50% 38%,#000 25%,transparent 78%)}
.pt{position:absolute;bottom:-2vh;width:4px;height:4px;border-radius:50%;background:#60a5fa;box-shadow:0 0 10px 2px rgba(59,130,246,.55);opacity:0;animation:ptFloat linear infinite}
@keyframes ptFloat{0%{transform:translateY(0);opacity:0}12%{opacity:.45}85%{opacity:.3}100%{transform:translateY(-108vh);opacity:0}}

/* slide: crossfade + entrance berjenjang */
.qslide{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .9s ease,visibility 0s linear .9s}
.qslide.active{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .9s ease}
.st{opacity:0;transform:translateY(28px);filter:blur(8px)}
.qslide.active .st{animation:stIn .9s cubic-bezier(.22,1,.36,1) forwards;animation-delay:var(--d,0s)}
@keyframes stIn{to{opacity:1;transform:none;filter:none}}
.simg{opacity:0;transform:scale(.9) translateX(36px)}
.qslide.active .simg{animation:imgIn 1.15s cubic-bezier(.22,1,.36,1) .22s forwards}
@keyframes imgIn{to{opacity:1;transform:none}}
.kb{animation:kenburns 13s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1) translateY(0)}to{transform:scale(1.06) translateY(-10px)}}
.gnum{position:absolute;top:-1.5rem;right:0;font-size:clamp(6rem,12vw,10rem);line-height:1;font-weight:800;color:transparent;-webkit-text-stroke:1.5px rgba(96,165,250,.14);pointer-events:none;user-select:none}

/* dot progres + panah + counter */
.qdot{position:relative;width:10px;height:10px;border-radius:999px;background:rgba(148,163,184,.25);overflow:hidden;transition:width .45s cubic-bezier(.22,1,.36,1),background .3s;cursor:pointer;border:0;padding:0}
.qdot:hover{background:rgba(148,163,184,.5)}
.qdot.active{width:58px;background:rgba(37,99,235,.22);box-shadow:inset 0 0 0 1px rgba(96,165,250,.35),0 0 14px -2px rgba(37,99,235,.6)}
.qdot.active::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#2563eb,#22d3ee);transform-origin:left;transform:scaleX(0);animation:dotFill var(--dur,6.5s) linear forwards}
@keyframes dotFill{to{transform:scaleX(1)}}
.paused .qdot.active::after{animation-play-state:paused}
.qarrow{width:2.75rem;height:2.75rem;border-radius:999px;display:grid;place-items:center;color:#93c5fd;background:rgba(13,26,54,.6);border:1px solid rgba(59,130,246,.25);backdrop-filter:blur(10px);transition:.3s;cursor:pointer}
.qarrow:hover{color:#fff;border-color:rgba(96,165,250,.6);box-shadow:0 0 20px -4px rgba(37,99,235,.7);transform:scale(1.08)}
.qcount{font-variant-numeric:tabular-nums;letter-spacing:.35em;font-size:11px;color:#7cc4ff;text-transform:uppercase}

/* tombol nav futuristik: conic border berputar + shine sweep + HUD corner */
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
.nav-fx{position:relative;display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:1.15rem .75rem 1rem;border-radius:1rem;background:linear-gradient(165deg,rgba(13,26,54,.75),rgba(8,18,38,.55));border:1px solid rgba(59,130,246,.16);backdrop-filter:blur(12px);overflow:hidden;transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s,box-shadow .35s}
.nav-fx::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--ang),transparent 0turn .58turn,rgba(59,130,246,.9) .72turn,rgba(34,211,238,.95) .8turn,transparent .92turn);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:0;transition:opacity .4s;animation:angSpin 3.2s linear infinite;pointer-events:none}
@keyframes angSpin{to{--ang:360deg}}
.nav-fx::after{content:'';position:absolute;top:0;left:-90%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),transparent);transform:skewX(-20deg);transition:left .65s ease;pointer-events:none}
.nav-fx:hover{transform:translateY(-6px);border-color:rgba(96,165,250,.45);box-shadow:0 20px 44px -18px rgba(37,99,235,.6),0 0 26px -8px rgba(34,211,238,.4)}
.nav-fx:hover::before{opacity:1}
.nav-fx:hover::after{left:135%}
.nav-fx .ncr::before,.nav-fx .ncr::after{content:'';position:absolute;width:13px;height:13px;opacity:.45;transition:.35s;pointer-events:none}
.nav-fx .ncr::before{top:7px;left:7px;border-top:1.5px solid #60a5fa;border-left:1.5px solid #60a5fa;border-top-left-radius:3px}
.nav-fx .ncr::after{bottom:7px;right:7px;border-bottom:1.5px solid #22d3ee;border-right:1.5px solid #22d3ee;border-bottom-right-radius:3px}
.nav-fx:hover .ncr::before,.nav-fx:hover .ncr::after{opacity:1;width:17px;height:17px;filter:drop-shadow(0 0 6px rgba(96,165,250,.8))}
.nav-fx .nic{width:2.9rem;height:2.9rem;display:grid;place-items:center;border-radius:.85rem;color:#7cc4ff;background:radial-gradient(120% 120% at 30% 20%,rgba(37,99,235,.35),rgba(8,18,38,.4));border:1px solid rgba(96,165,250,.22);transition:.35s}
.nav-fx:hover .nic{color:#fff;transform:scale(1.1) rotate(-3deg);box-shadow:0 0 20px rgba(59,130,246,.65),inset 0 0 12px rgba(34,211,238,.25)}
.nav-fx .nlb{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#cbd5e1;transition:.3s}
.nav-fx:hover .nlb{color:#fff;text-shadow:0 0 14px rgba(96,165,250,.9)}
/* pemicu entrance v3 di luar slider (hero halaman dalam) */
.v3fx .st{animation:stIn .9s cubic-bezier(.22,1,.36,1) forwards;animation-delay:var(--d,0s)}
@media (prefers-reduced-motion:reduce){.pt,.kb,.nav-fx::before{animation:none}.qslide,.st,.simg{transition:none}}

/* ============================================================
   Navigasi landing (22 Jul 2026): dock kanan desktop + app-bar bawah mobile
   ============================================================ */

/* ---------- dock kanan (desktop) ---------- */
#qside{position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:40;
  flex-direction:column;align-items:center;gap:16px}
.qdock{display:flex;flex-direction:column;gap:10px;padding:11px;border-radius:22px;
  background:linear-gradient(165deg,rgba(17,30,60,.78),rgba(7,14,32,.62));
  border:1px solid rgba(148,183,255,.16);backdrop-filter:blur(12px);
  box-shadow:0 24px 60px -18px rgba(2,8,23,.9),inset 0 1px 0 rgba(255,255,255,.07);
  transition:opacity .3s ease,transform .5s cubic-bezier(.22,1.4,.36,1)}
#qside.closed .qdock{opacity:0;transform:translateX(30px) scale(.82);pointer-events:none}
.qdit{position:relative;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  color:#9fc3ec;background:rgba(255,255,255,.03);border:1px solid transparent;
  transition:color .25s,background .25s,border-color .25s,transform .3s cubic-bezier(.22,1.4,.36,1)}
#qside:not(.closed).anim .qdit{animation:qditIn .55s cubic-bezier(.22,1.4,.36,1) backwards;
  animation-delay:calc(var(--i)*.07s)}
@keyframes qditIn{from{opacity:0;transform:translateX(26px) scale(.7)}}
.qdit:hover{color:#fff;transform:translateX(-5px);
  background:linear-gradient(140deg,rgba(37,99,235,.4),rgba(34,211,238,.16));
  border-color:rgba(103,232,249,.4);
  box-shadow:0 10px 28px -8px rgba(37,99,235,.65),0 0 0 1px rgba(103,232,249,.15)}
.qdit:hover .qdi{animation:qdiPop .45s cubic-bezier(.22,1.6,.36,1)}
@keyframes qdiPop{40%{transform:scale(1.22) rotate(-4deg)}}
.qdit::after{content:"";position:absolute;left:-3px;top:50%;width:3px;height:0;border-radius:2px;
  background:linear-gradient(180deg,#22d3ee,#818cf8);transform:translateY(-50%);
  transition:height .3s cubic-bezier(.22,1.4,.36,1);box-shadow:0 0 8px rgba(34,211,238,.8)}
.qdit:hover::after{height:26px}
.qdl{position:absolute;right:calc(100% + 16px);top:50%;transform:translateY(-50%) translateX(10px);
  padding:7px 14px;border-radius:11px;white-space:nowrap;pointer-events:none;
  background:linear-gradient(160deg,rgba(17,30,60,.92),rgba(7,14,32,.88));
  border:1px solid rgba(148,183,255,.22);color:#dbeafe;
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  opacity:0;transition:opacity .25s,transform .3s cubic-bezier(.22,1.4,.36,1);
  box-shadow:0 12px 30px -10px rgba(2,8,23,.9)}
.qdl::after{content:"";position:absolute;left:100%;top:50%;margin-top:-4px;
  border:4px solid transparent;border-left-color:rgba(148,183,255,.22)}
.qdit:hover .qdl{opacity:1;transform:translateY(-50%) translateX(0)}

/* toggle bundar penuh efek */
.qdt{position:relative;width:58px;height:58px;border-radius:50%;border:0;padding:0;
  background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .3s cubic-bezier(.22,1.4,.36,1)}
.qdt:hover{transform:scale(1.09)}
.qdt:active{transform:scale(.94)}
.qdt-ring{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(#22d3ee,#3b82f6,#818cf8,#22d3ee);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));
  mask:radial-gradient(closest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));
  animation:qdtSpin 3.6s linear infinite;filter:drop-shadow(0 0 6px rgba(34,211,238,.6))}
@keyframes qdtSpin{to{transform:rotate(360deg)}}
.qdt::before{content:"";position:absolute;inset:4px;border-radius:50%;
  background:linear-gradient(160deg,rgba(20,35,70,.92),rgba(8,16,36,.85));
  border:1px solid rgba(148,183,255,.18);
  box-shadow:0 16px 40px -10px rgba(37,99,235,.6),inset 0 1px 0 rgba(255,255,255,.09)}
.qdt-pulse{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(34,211,238,.45);
  animation:sc1pulse 3s ease-out infinite;pointer-events:none}
.qdt-ico{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4.5px}
.qdt-ico i{width:20px;height:2px;border-radius:2px;background:#bfe3ff;display:block;
  transition:transform .4s cubic-bezier(.22,1.4,.36,1),opacity .25s,width .3s;
  box-shadow:0 0 6px rgba(125,211,252,.5)}
/* saat dock TERBUKA: hamburger jadi X */
#qside:not(.closed) .qdt-ico i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
#qside:not(.closed) .qdt-ico i:nth-child(2){opacity:0;transform:scaleX(.2)}
#qside:not(.closed) .qdt-ico i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
#qside.closed .qdt-ico i:nth-child(2){width:14px}

/* ---------- app-bar bawah (mobile, ala Android) ---------- */
.qtab{position:fixed;left:14px;right:14px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:40;
  display:flex;align-items:stretch;padding:8px;border-radius:24px;
  background:linear-gradient(165deg,rgba(15,27,55,.9),rgba(6,12,28,.86));
  border:1px solid rgba(148,183,255,.18);backdrop-filter:blur(14px);
  box-shadow:0 22px 60px -14px rgba(2,8,23,.95),inset 0 1px 0 rgba(255,255,255,.08);
  animation:qtabIn .75s cubic-bezier(.2,.95,.3,1.25) .2s backwards}
@keyframes qtabIn{from{transform:translateY(150%);opacity:0}}
.qpuck{position:absolute;top:8px;bottom:8px;border-radius:17px;
  width:calc((100% - 16px)/4);left:calc(8px + var(--qi,0)*((100% - 16px)/4));
  background:linear-gradient(150deg,rgba(37,99,235,.42),rgba(34,211,238,.14));
  border:1px solid rgba(103,232,249,.32);
  box-shadow:0 8px 22px -8px rgba(37,99,235,.7),inset 0 1px 0 rgba(255,255,255,.1);
  transition:left .45s cubic-bezier(.22,1.35,.36,1)}
.qpuck::after{content:"";position:absolute;left:50%;top:-1px;width:26px;height:2px;margin-left:-13px;
  border-radius:2px;background:linear-gradient(90deg,#22d3ee,#818cf8);
  box-shadow:0 0 10px rgba(34,211,238,.9)}
.qti{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:7px 0 6px;border-radius:17px;color:#8fa8cf;text-decoration:none;overflow:hidden;
  -webkit-tap-highlight-color:transparent;transition:color .3s;
  animation:qtiIn .6s cubic-bezier(.22,1.4,.36,1) backwards;
  animation-delay:calc(.35s + var(--i)*.08s)}
@keyframes qtiIn{from{opacity:0;transform:translateY(26px) scale(.7)}}
.qti.act{color:#e8f4ff}
.qti.act .qtic{filter:drop-shadow(0 0 7px rgba(103,232,249,.8))}
.qtic{display:grid;place-items:center;transition:transform .3s}
.qtic.pop{animation:qticPop .5s cubic-bezier(.22,1.7,.36,1)}
@keyframes qticPop{35%{transform:scale(.72)}70%{transform:scale(1.18) translateY(-2px)}}
.qtl{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.qrip{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:radial-gradient(circle,rgba(160,220,255,.5),rgba(160,220,255,0) 70%);
  pointer-events:none;animation:qrip .55s ease-out forwards}
@keyframes qrip{from{transform:scale(.6);opacity:1}to{transform:scale(9);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .qdt-ring,.qdt-pulse,.qdock,.qdit,.qtab,.qti,.qtic,.qpuck{animation:none!important;transition:none!important}
}


/* status aktif dock + app-bar (semua halaman) */
.qdit.act{color:#fff;background:linear-gradient(140deg,rgba(37,99,235,.42),rgba(34,211,238,.18));
  border-color:rgba(103,232,249,.4)}
.qdit.act::after{height:26px}
.qtab.nopk .qpuck{display:none}
/* ruang utk app-bar bawah di mobile */
@media (max-width:767px){body{padding-bottom:88px}}
/* pill switch bahasa ID|EN */
.qlang{display:inline-flex;align-items:center;border:1px solid rgba(148,183,255,.28);border-radius:999px;
  overflow:hidden;background:rgba(8,16,36,.6);backdrop-filter:blur(6px)}
.qlang a{padding:5px 10px;font:800 10px ui-monospace,Menlo,Consolas,monospace;letter-spacing:.1em;
  color:#7f9bc4;text-decoration:none;transition:.25s}
.qlang a:hover{color:#cfe8ff}
.qlang a.on{background:linear-gradient(140deg,rgba(37,99,235,.55),rgba(34,211,238,.3));color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15)}