/* =====================================================================
   GLM.WEB.ID — Design System (shared)
   Glassmorphism 2.0 + aurora depth + real 3D. Dark & Light.
   ===================================================================== */

:root{
  --accent:        oklch(0.66 0.18 286);
  --accent-2:      oklch(0.72 0.15 250);
  --cyan:          oklch(0.74 0.13 205);

  --r-xl:28px; --r-lg:20px; --r-md:14px; --r-sm:10px;
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --ease-quint:cubic-bezier(.22,1,.36,1);
  --maxw:1180px;
  --font-body:"Instrument Sans",system-ui,sans-serif;
  --font-disp:"Space Grotesk",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;

  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
}

/* DARK (default) */
:root, [data-theme="dark"]{
  color-scheme:dark;
  --bg:        oklch(0.17 0.02 282);
  --bg-2:      oklch(0.135 0.018 282);
  --surface:   oklch(0.22 0.022 282 / 0.62);
  --surface-2: oklch(0.26 0.025 282 / 0.7);
  --surface-3: oklch(0.32 0.026 282);
  --text:      oklch(0.965 0.006 280);
  --text-mut:  oklch(0.74 0.014 280);
  --text-dim:  oklch(0.56 0.014 280);
  --line:      oklch(0.85 0.04 285 / 0.16);
  --line-soft: oklch(0.85 0.04 285 / 0.09);

  --accent-hi:  oklch(0.74 0.16 286);
  --on-accent:  oklch(0.99 0.005 286);
  --accent-bg:  oklch(0.66 0.18 286 / 0.14);
  --accent-bd:  oklch(0.66 0.18 286 / 0.34);
  --cyan-bg:    oklch(0.74 0.13 205 / 0.13);
  --green:      oklch(0.78 0.15 155);

  --glow-a: oklch(0.64 0.18 286 / 0.20);
  --glow-b: oklch(0.72 0.15 250 / 0.14);
  --glow-c: oklch(0.74 0.13 205 / 0.12);

  --glass-bg:   oklch(0.24 0.02 282 / 0.45);
  --glass-bd:   oklch(0.9 0.05 285 / 0.16);
  --glass-hi:   oklch(1 0 0 / 0.06);
  --shadow-lg:  0 40px 90px -34px oklch(0.05 0.02 280 / 0.9);
  --shadow-md:  0 22px 55px -30px oklch(0.05 0.02 280 / 0.85);
  --code-bg:    oklch(0.13 0.015 282);

  --grain-op: 0.05;
}

/* LIGHT */
[data-theme="light"]{
  color-scheme:light;
  --bg:        oklch(0.975 0.008 282);
  --bg-2:      oklch(0.955 0.012 282);
  --surface:   oklch(1 0 0 / 0.66);
  --surface-2: oklch(1 0 0 / 0.8);
  --surface-3: oklch(0.93 0.012 282);
  --text:      oklch(0.24 0.02 282);
  --text-mut:  oklch(0.42 0.02 282);
  --text-dim:  oklch(0.56 0.02 282);
  --line:      oklch(0.4 0.05 286 / 0.16);
  --line-soft: oklch(0.4 0.05 286 / 0.10);

  --accent-hi:  oklch(0.55 0.19 286);
  --on-accent:  oklch(0.99 0.005 286);
  --accent-bg:  oklch(0.66 0.18 286 / 0.12);
  --accent-bd:  oklch(0.66 0.18 286 / 0.40);
  --cyan-bg:    oklch(0.74 0.13 205 / 0.14);
  --green:      oklch(0.6 0.15 155);

  --glow-a: oklch(0.66 0.18 286 / 0.22);
  --glow-b: oklch(0.72 0.15 250 / 0.18);
  --glow-c: oklch(0.74 0.13 205 / 0.16);

  --glass-bg:   oklch(1 0 0 / 0.62);
  --glass-bd:   oklch(0.5 0.05 286 / 0.14);
  --glass-hi:   oklch(1 0 0 / 0.55);
  --shadow-lg:  0 40px 90px -38px oklch(0.5 0.1 286 / 0.5);
  --shadow-md:  0 22px 55px -34px oklch(0.5 0.1 286 / 0.42);
  --code-bg:    oklch(0.97 0.008 282);

  --grain-op: 0.04;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:100px;overflow-x:hidden}
/* FOKUS terlihat (aksesibilitas) */
a:focus-visible,button:focus-visible,input:focus-visible,.tab:focus-visible,.plan-opt:focus-visible{outline:2px solid var(--accent-hi);outline-offset:2px;border-radius:var(--r-sm)}
::selection{background:var(--accent-hi);color:var(--on-accent)}
body{
  font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.62;
  -webkit-font-smoothing:antialiased;font-optical-sizing:auto;overflow-x:hidden;
  transition:background .55s var(--ease-expo),color .55s var(--ease-expo);
  min-height:100vh;
}
h1,h2,h3,h4{font-family:var(--font-disp);line-height:1.04;letter-spacing:-0.022em;text-wrap:balance}
::selection{background:var(--accent-hi);color:var(--on-accent)}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--font-mono)}

/* AMBIENT BACKGROUND */
.bg-fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-fx .aurora{position:absolute;inset:-20% -10%;filter:blur(40px) saturate(135%);opacity:.9;
  background:
    radial-gradient(46% 42% at 80% 6%, var(--glow-a), transparent 60%),
    radial-gradient(40% 38% at 8% 12%, var(--glow-b), transparent 60%),
    radial-gradient(54% 46% at 50% 104%, var(--glow-c), transparent 58%);
  animation:aurora 18s ease-in-out infinite alternate;
}
.bg-fx .grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 85% 60% at 50% -5%,#000,transparent 78%);
          mask-image:radial-gradient(ellipse 85% 60% at 50% -5%,#000,transparent 78%);
}
.bg-fx .grain{position:absolute;inset:0;background-image:var(--grain);background-size:160px 160px;opacity:var(--grain-op);mix-blend-mode:overlay}
.bg-fx .orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;mix-blend-mode:screen;animation:float 14s ease-in-out infinite}
.bg-fx .orb.a{width:340px;height:340px;left:-60px;top:8%;background:radial-gradient(circle,var(--glow-a),transparent 70%)}
.bg-fx .orb.b{width:300px;height:300px;right:-40px;top:34%;background:radial-gradient(circle,var(--glow-c),transparent 70%);animation-delay:-4s}
.bg-fx .orb.c{width:260px;height:260px;left:30%;bottom:-40px;background:radial-gradient(circle,var(--glow-b),transparent 70%);animation-delay:-8s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(24px,-18px) scale(1.06)}66%{transform:translate(-16px,12px) scale(.96)}}
@keyframes aurora{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(2%,-2%,0) scale(1.08)}}
@media(prefers-reduced-motion:reduce){.bg-fx .aurora{animation:none}}

/* LAYOUT */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:28px;position:relative;z-index:1}
section{padding:92px 0;position:relative;z-index:1}
.sec-head{max-width:660px;margin-bottom:52px}
.kicker{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-hi);font-weight:600;margin-bottom:16px;display:block}
.sec-head h2{font-size:clamp(2rem,3.7vw,2.95rem);font-weight:700}
.sec-head p{margin-top:16px;color:var(--text-mut);font-size:1.08rem;max-width:54ch}

/* GLASS */
.glass{
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  border:1px solid var(--glass-bd);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-md), inset 0 1px 0 0 var(--glass-hi);
  position:relative;
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .glass{background:var(--surface-2)}
}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.94rem;padding:12px 22px;border-radius:var(--r-sm);cursor:pointer;border:1px solid transparent;font-family:var(--font-body);white-space:nowrap;transition:transform .35s var(--ease-quint),background .25s,border-color .25s,box-shadow .35s}
.btn:active{transform:scale(.97)}
.btn i{width:17px;height:17px}
.btn-accent{background:linear-gradient(135deg,var(--accent-hi),var(--accent));color:var(--on-accent);box-shadow:0 10px 30px var(--accent-bd)}
.btn-accent:hover{transform:translateY(-2px);box-shadow:0 16px 44px var(--accent-bd)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--accent);background:var(--accent-bg)}
.btn-cyan{background:var(--cyan);color:oklch(0.15 0.03 205);box-shadow:0 10px 30px var(--cyan-bg)}
.btn-cyan:hover{transform:translateY(-2px)}

/* NAV */
header{position:sticky;top:0;z-index:60;transition:background .4s var(--ease-expo),border-color .4s,box-shadow .4s}
header.scrolled{background:color-mix(in oklch,var(--bg) 78%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);border-bottom:1px solid var(--line-soft)}
header.menu-open{background:color-mix(in oklch,var(--bg) 92%,transparent);-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);border-bottom:1px solid var(--line-soft)}
nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--font-disp);font-weight:600;font-size:1.18rem;letter-spacing:-0.02em}
.brand .mark{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(150deg,var(--accent-hi),var(--accent-2));color:var(--on-accent);box-shadow:0 6px 22px var(--accent-bd);font-weight:700;font-size:1.05rem;transition:box-shadow .4s,transform .5s var(--ease-quint)}
.brand:hover .mark{transform:translateY(-1px) rotate(-4deg)}
.brand .dom{color:var(--text-dim);font-weight:400;font-size:.82rem}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{color:var(--text-mut);font-size:.94rem;font-weight:500;transition:color .2s;position:relative}
.nav-links a:hover{color:var(--text)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--accent-hi);transition:width .3s var(--ease-quint)}
.nav-links a:hover::after{width:100%}
.nav-cta{display:flex;gap:10px;align-items:center}
.nav-toggle{display:none;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px;color:var(--text);cursor:pointer}
.nav-toggle svg{width:20px;height:20px;transition:transform .35s var(--ease-quint)}
.nav-toggle[aria-expanded="true"] svg{transform:rotate(90deg)}

.theme-toggle{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:var(--surface);color:var(--text-mut);cursor:pointer;transition:border-color .25s,color .25s,transform .4s}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent-hi)}
.theme-toggle:active{transform:scale(.92)}
.theme-toggle svg{width:19px;height:19px}
.theme-toggle .i-sun{display:none}
[data-theme="light"] .theme-toggle .i-moon{display:none}
[data-theme="light"] .theme-toggle .i-sun{display:block}

/* REVEAL */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease-expo),transform .8s var(--ease-expo)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* FOOTER */
footer{border-top:1px solid var(--line-soft);padding:56px 0 40px;position:relative;z-index:1}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.foot-brand p{color:var(--text-mut);font-size:.92rem;margin-top:16px;max-width:34ch}
.foot-col h4{font-family:var(--font-disp);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);margin-bottom:16px;font-weight:600}
.foot-col a{display:block;color:var(--text-mut);font-size:.92rem;padding:6px 0;transition:color .2s}
.foot-col a:hover{color:var(--accent-hi)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:48px;padding-top:26px;border-top:1px solid var(--line-soft);color:var(--text-dim);font-size:.85rem;flex-wrap:wrap;gap:14px}
.foot-bottom .mono{font-size:.8rem}

/* ===== 3D HERO — real depth ===== */
.hero3d{position:relative;perspective:1200px;transform-style:preserve-3d;min-height:360px;display:grid;place-items:center}
.hero3d .stage{position:relative;transform-style:preserve-3d;transition:transform .25s var(--ease-quint);will-change:transform}

/* layered key card */
.key3d{position:relative;width:min(330px,86%);aspect-ratio:1.62/1;transform-style:preserve-3d;animation:bob 7s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(-12px)}50%{transform:translateY(12px)}}
.key3d .layer{position:absolute;inset:0;border-radius:22px;border:1px solid var(--glass-bd);box-shadow:inset 0 1px 0 var(--glass-hi)}
.key3d .k-back{transform:translateZ(-70px);background:linear-gradient(145deg,var(--accent-bg),transparent 70%);opacity:.5}
.key3d .k-mid{transform:translateZ(-35px);background:var(--glass-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);opacity:.8}
.key3d .k-front{transform:translateZ(0);background:linear-gradient(160deg,oklch(0.92 0.02 282 / 0.92),oklch(0.6 0.08 286 / 0.88));-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:22px;overflow:hidden}
[data-theme="light"] .key3d .k-front{background:linear-gradient(160deg,oklch(1 0 0 / 0.94),oklch(0.86 0.05 286 / 0.92))}
.key3d .k-front::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 80% 0%,var(--accent-bd),transparent 60%);opacity:.6;pointer-events:none}
.key3d .k-brand{display:flex;align-items:center;gap:9px;font-family:var(--font-disp);font-weight:600;font-size:.95rem;color:var(--text);position:relative;z-index:1}
.key3d .k-brand .mk{width:26px;height:26px;border-radius:8px;background:linear-gradient(150deg,var(--accent-hi),var(--accent-2));display:grid;place-items:center;color:#fff;font-weight:700;font-size:.8rem}
.key3d .k-label{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;color:var(--text-mut);text-transform:uppercase;margin:20px 0 6px;position:relative;z-index:1}
.key3d .k-key{font-family:var(--font-mono);font-size:1.02rem;color:var(--accent-hi);font-weight:600;word-break:break-all;line-height:1.4;position:relative;z-index:1}
.key3d .k-foot{position:absolute;right:20px;bottom:16px;display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:.72rem;color:var(--text-mut);z-index:1}
.key3d .k-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
.key3d .k-glow{position:absolute;inset:-30% -10%;transform:translateZ(-90px);background:radial-gradient(closest-side,var(--accent-bg),transparent);filter:blur(20px);opacity:.85}

/* spinning wireframe cube */
.cube3d{position:absolute;top:-26px;right:-18px;width:92px;height:92px;transform-style:preserve-3d;animation:spin3d 16s linear infinite;transform:translateZ(120px)}
@keyframes spin3d{from{transform:translateZ(120px) rotateX(-22deg) rotateY(0)}to{transform:translateZ(120px) rotateX(-22deg) rotateY(360deg)}}
.cube3d .cf{position:absolute;width:92px;height:92px;border:1.5px solid var(--accent-bd);background:var(--accent-bg);border-radius:6px}
.cube3d .cf.front{transform:translateZ(46px)}
.cube3d .cf.back{transform:rotateY(180deg) translateZ(46px)}
.cube3d .cf.right{transform:rotateY(90deg) translateZ(46px)}
.cube3d .cf.left{transform:rotateY(-90deg) translateZ(46px)}
.cube3d .cf.top{transform:rotateX(90deg) translateZ(46px)}
.cube3d .cf.bottom{transform:rotateX(-90deg) translateZ(46px)}

.ring3d{position:absolute;inset:-12% -6%;border:1px solid var(--line-soft);border-radius:50%;transform:translateZ(60px) rotateX(74deg);opacity:.6;animation:ringspin 22s linear infinite}
@keyframes ringspin{to{transform:translateZ(60px) rotateX(74deg) rotateZ(360deg)}}

@media(prefers-reduced-motion:reduce){.key3d,.cube3d,.ring3d{animation:none}}

/* RESPONSIVE — mobile friendly */
@media(max-width:960px){
  .hero3d{min-height:320px}
  .bento{grid-template-columns:1fr 1fr}
  .cell.tall{grid-column:1 / -1;grid-row:auto}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media(max-width:680px){
  .wrap{padding-inline:20px}
  .nav-toggle{display:block}
  /* CTA header ikon-only biar tidak gepeng di mobile */
  .nav-cta .btn span{display:none}
  .nav-cta .btn{padding:11px 14px;min-height:44px}
  .nav-cta .btn i{margin:0}
  /* backdrop drawer */
  .nav-backdrop{position:fixed;inset:0;z-index:55;background:oklch(0.05 0.02 280 / 0.5);opacity:0;pointer-events:none;transition:opacity .3s var(--ease-quint)}
  .nav-backdrop.show{opacity:1;pointer-events:auto}
  /* hamburger drawer */
  .nav-links{
    display:flex;flex-direction:column;align-items:stretch;gap:2px;
    position:fixed;top:72px;left:0;right:0;z-index:58;
    padding:14px 20px 22px;
    background:color-mix(in oklch,var(--bg) 94%,transparent);
    -webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);
    border-bottom:1px solid var(--line-soft);
    box-shadow:0 24px 40px -24px oklch(0.05 0.02 280 / 0.7);
    transform:translateY(-14px);opacity:0;pointer-events:none;
    transition:opacity .3s var(--ease-quint),transform .3s var(--ease-quint);
  }
  .nav-links.open{transform:none;opacity:1;pointer-events:auto}
  .nav-links a{display:flex;align-items:center;min-height:48px;padding:12px 8px;font-size:1.02rem;border-bottom:1px solid var(--line-soft)}
  .nav-links a::after{display:none}
  .nav-links a:last-child{border-bottom:none}
  section{padding:56px 0}
  .sec-head{margin-bottom:34px}
  .hero3d .cube3d{transform:translateZ(60px) scale(.78);top:-14px;right:-6px}
}
@media(max-width:480px){
  .wrap{padding-inline:16px}
  .foot-grid{grid-template-columns:1fr}
  .hero3d{min-height:280px}
  .key3d{width:90%}
}

/* ===== QUICKSTART (gaya bynara) ===== */
.quickstart{position:relative;max-width:920px;margin-inline:auto;margin-top:24px}
.tabs-wrap{position:relative;padding:6px}
.quick-card.glass{padding:0;overflow:hidden}
.quick-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line-soft);background:color-mix(in oklch,var(--bg) 50%,transparent)}
.quick-head .ql{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);font-weight:600}
.dots{display:inline-flex;gap:6px}
.dots .dot{width:11px;height:11px;border-radius:50%}
.dots .dot.r{background:oklch(0.7 0.18 20)}
.dots .dot.y{background:oklch(0.82 0.16 85)}
.dots .dot.g{background:oklch(0.78 0.15 155)}
.tabs{display:flex;gap:4px;flex-wrap:wrap}
.tab{font-family:var(--font-mono);font-size:.74rem;padding:7px 13px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--text-mut);cursor:pointer;transition:all .2s}
.tab:hover{color:var(--text);background:var(--surface)}
.tab.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.tabpane{display:none}
.tabpane.active{display:block}
pre{background:var(--code-bg);border:0;border-top:1px solid var(--line-soft);border-radius:0;padding:20px 22px;overflow-x:auto;font-family:var(--font-mono);font-size:.84rem;line-height:1.7;color:var(--text);position:relative;margin:0}
pre .c{color:var(--text-dim)}pre .k{color:var(--accent-hi)}pre .s{color:var(--cyan)}pre .v{color:var(--green)}
.copy{position:absolute;top:14px;right:14px;background:var(--surface-2);border:1px solid var(--line);color:var(--text-mut);border-radius:8px;padding:6px 11px;font-size:.7rem;cursor:pointer;font-family:var(--font-mono);transition:all .2s;z-index:2}
.copy:hover{border-color:var(--accent);color:var(--accent-hi)}
.copy:active{transform:scale(.95)}
.quick-foot{display:flex;align-items:center;gap:10px;padding:14px 18px;border-top:1px solid var(--line-soft);font-family:var(--font-mono);font-size:.76rem;color:var(--text-dim);flex-wrap:wrap}
.quick-foot code{color:var(--accent-hi);background:var(--code-bg);padding:3px 8px;border-radius:6px;border:1px solid var(--line-soft)}
@media(max-width:880px){.quickstart{max-width:100%}}
@media(max-width:560px){
  .quick-head{flex-direction:column;align-items:stretch;gap:12px}
  .tabs{justify-content:space-between}
  .tab{flex:1;text-align:center}
  pre{padding:16px 16px;font-size:.8rem}
  .copy{top:10px;right:10px}
}