/* ============================================================
   MIRA ALIMA IO SMART — Garda Profit
   Design system · dark-committed · v45 webapp
   Diadaptasi dari template "Lumi" (T140) dengan identitas Mira.
   ============================================================ */

/* ---------- TOKEN ---------- */
:root{
  --bg:        #071119;
  --bg-2:      #050d13;
  --surface:   #0d1e29;
  --surface-2: #122734;
  --accent:    #37e0a0;                 /* mint profit — rupiah yang tersisa */
  --accent-2:  #7cf0c6;
  --accent-glow: color-mix(in oklab, #37e0a0 26%, transparent);
  --accent-halo: color-mix(in oklab, #37e0a0 12%, transparent);
  --gate:      #f5b13d;                 /* semantik: gerbang / hati-hati */
  --danger:    #ff6b6b;                 /* semantik: ditolak / merah */
  --info:      #58b6ff;                 /* semantik: catatan */
  --locked:    #46606f;                 /* semantik: terkunci */
  --claude:    #d97757;                 /* jingga Claude — dipakai HANYA untuk penanda "berjalan di dalam Claude" */
  --text:      #e9f5f0;
  --text-dim:  color-mix(in oklab, #e9f5f0 68%, transparent);
  --text-low:  color-mix(in oklab, #e9f5f0 42%, transparent);
  --on-accent: #041a12;
  --border:    color-mix(in oklab, #e9f5f0 11%, transparent);
  --border-hi: color-mix(in oklab, #37e0a0 34%, transparent);
  --display: 'Bricolage Grotesque', 'Segoe UI Semibold', system-ui, sans-serif;
  --body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --r-s: 10px; --r-m: 14px; --r-l: 20px;
  --wrap: 1200px;      /* wadah konten utama — nyaman dibaca di layar besar */
}

/* ---------- ANIMASI ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 var(--accent-glow)}50%{box-shadow:0 0 0 7px transparent}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(2%,-3%) scale(1.06)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes blink{50%{opacity:0}}
@keyframes gateSweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes countPop{from{transform:scale(.94);opacity:.4}to{transform:scale(1);opacity:1}}
@keyframes railGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ---------- DASAR ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{
  background:var(--bg);color:var(--text);font-family:var(--body);
  min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;
  line-height:1.6;font-size:16px;
}
/* Latar: langit malam di atas garis pantai. Tiga lapis — aurora yang bergerak
   pelan, kabut cahaya di kaki layar (seperti lampu properti dari kejauhan), dan
   kisi halus yang memberi kedalaman tanpa menarik perhatian dari isi. */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(54% 40% at 84% -6%, color-mix(in oklab,var(--accent) 26%,transparent), transparent 66%),
    radial-gradient(46% 36% at 10% 2%,  color-mix(in oklab,var(--claude) 20%,transparent), transparent 68%),
    radial-gradient(58% 44% at 2% 84%,  color-mix(in oklab,var(--info) 17%,transparent), transparent 70%),
    radial-gradient(84% 34% at 50% 108%, color-mix(in oklab,var(--accent) 22%,transparent), transparent 64%);
  animation:drift 30s ease-in-out infinite;
}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(color-mix(in oklab,var(--text) 6%,transparent) 1px, transparent 1px) 0 0/100% 76px,
    linear-gradient(90deg, color-mix(in oklab,var(--text) 6%,transparent) 1px, transparent 1px) 0 0/76px 100%;
  -webkit-mask-image:radial-gradient(78% 62% at 50% 34%, #000, transparent 82%);
  mask-image:radial-gradient(78% 62% at 50% 34%, #000, transparent 82%);
  opacity:.85;animation:kisiHanyut 44s linear infinite;
}
@keyframes kisiHanyut{from{background-position:0 0,0 0}to{background-position:0 76px,76px 0}}
@media(prefers-reduced-motion:reduce){body::before,body::after{animation:none}}
body>*{position:relative;z-index:1}
img{max-width:100%}
a{color:var(--accent);text-decoration:none}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ---------- TIPOGRAFI ---------- */
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.02em;text-wrap:balance;line-height:1.06}
h1{font-size:clamp(30px,min(4.6vw,5.8vh),48px);font-weight:680}
h2{font-size:clamp(24px,min(3.4vw,4.4vh),38px);font-weight:660;line-height:1.07}
h3{font-size:clamp(19px,1.8vw,25px);font-weight:620;line-height:1.2}
h4{font-size:17px;font-weight:620}
p{max-width:66ch}
.lead{font-size:clamp(15.5px,1.35vw,18.5px);color:var(--text-dim);line-height:1.62;max-width:52ch}
.eyebrow{
  display:inline-flex;align-items:flex-start;gap:9px;font-family:var(--mono);
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:500;line-height:1.5;
}
.eyebrow::before{content:"";width:6px;height:6px;flex:none;margin-top:.55em;border-radius:50%;background:var(--accent);animation:pulseDot 2.4s ease-in-out infinite}
.eyebrow.plain::before{display:none}
.mono{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums}
.dim{color:var(--text-dim)}
.low{color:var(--text-low)}
mark{background:color-mix(in oklab,var(--accent) 22%,transparent);color:var(--text);padding:0 4px;border-radius:4px}

/* ---------- LAYOUT ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.sec{padding:clamp(44px,min(5.6vw,8vh),88px) 0}
.sec-tight{padding:clamp(30px,min(3.6vw,5vh),54px) 0}
.head{max-width:66ch;margin-bottom:clamp(26px,3.6vw,46px);display:flex;flex-direction:column;gap:14px}
.head p{color:var(--text-dim);font-size:clamp(15px,1.3vw,17.5px);max-width:56ch}
.divider{height:1px;background:var(--border);border:0}

/* ---------- NAV ----------
   Empat pintu utama + satu menu "Lainnya" + satu tombol ajakan. Tiap menu
   membawa keterangan satu baris supaya pengunjung baru tahu isinya. */
.nav{
  position:sticky;top:0;z-index:100;
  background:color-mix(in oklab,var(--bg) 86%,transparent);
  backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid var(--border);animation:fadeIn .4s ease-out;
}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:10px 28px;display:flex;align-items:center;gap:18px}
.logo{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;font-size:17px;color:var(--text);letter-spacing:-.02em;flex:none}
.logo .shield{width:34px;height:34px;flex:none;border-radius:50%;filter:drop-shadow(0 0 10px var(--accent-glow))}
.logo small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--accent);font-weight:500;text-transform:uppercase;margin-top:2px;white-space:nowrap}

.nav-isi{display:flex;align-items:center;gap:14px;margin-left:auto;min-width:0}
.nav-utama{list-style:none;display:flex;align-items:stretch;gap:0;flex-wrap:nowrap}
.nav-utama a{
  position:relative;display:flex;flex-direction:column;gap:1px;color:var(--text-dim);
  padding:7px 10px;border-radius:10px;transition:color .2s,background .2s;white-space:nowrap;
}
.nav-utama a>span{font-size:13.5px;font-weight:600;line-height:1.25}
.nav-utama a>small{font-family:var(--mono);font-size:9px;letter-spacing:.03em;color:var(--text-low);line-height:1.3;white-space:nowrap}
.nav-utama a::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.nav-utama a:hover{color:var(--text);background:color-mix(in oklab,var(--accent) 8%,transparent)}
.nav-utama a:hover::after,.nav-utama a[aria-current="page"]::after{transform:scaleX(1)}
.nav-utama a[aria-current="page"]{color:var(--accent)}
.nav-utama a[aria-current="page"]>small{color:color-mix(in oklab,var(--accent) 62%,transparent)}

/* menu "Lainnya" — pakai <details>, jalan tanpa JavaScript */
.nav-lain{position:relative;display:flex;align-items:center}
.nav-lain summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;
  padding:9px 13px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--text-dim);
  border:1px solid transparent;transition:color .2s,background .2s,border-color .2s;
}
.nav-lain summary::-webkit-details-marker{display:none}
.nav-lain summary::after{content:"▾";font-size:11px;transition:transform .25s;opacity:.8}
.nav-lain summary:hover{color:var(--text);background:color-mix(in oklab,var(--accent) 8%,transparent)}
.nav-lain details[open] summary{color:var(--text);border-color:var(--border-hi);background:color-mix(in oklab,var(--accent) 10%,transparent)}
.nav-lain details[open] summary::after{transform:rotate(180deg)}
.nav-lain details>ul{
  position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:238px;list-style:none;
  display:flex;flex-direction:column;gap:2px;padding:8px;
  background:linear-gradient(var(--surface-2),var(--surface));
  border:1px solid var(--border-hi);border-radius:var(--r-m);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9);animation:fadeUp .22s ease-out;
}
.nav-lain details>ul a{display:flex;flex-direction:column;gap:1px;padding:9px 11px;border-radius:9px;color:var(--text-dim)}
.nav-lain details>ul a>span{font-size:13.5px;font-weight:600}
.nav-lain details>ul a>small{font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--text-low)}
.nav-lain details>ul a:hover{background:color-mix(in oklab,var(--accent) 10%,transparent);color:var(--text)}
.nav-lain details>ul a[aria-current="page"]{color:var(--accent)}

/* tombol ajakan di bilah nav — versi ringkas dari tombol beli */
.btn-nav{padding:10px 16px;font-size:13.5px;border-radius:10px;flex:none;animation:none}
.btn-nav svg{width:17px;height:17px}
@media(max-width:1320px){.nav-utama a>small{display:none}}
@media(max-width:1120px){.btn-nav>span{display:none}.btn-nav{padding:10px 12px}}

.navtoggle{display:none;margin-left:auto;background:transparent;border:1px solid var(--border);color:var(--text);border-radius:9px;padding:9px 13px;font-family:var(--mono);font-size:12px;cursor:pointer}
@media(max-width:1040px){
  .navtoggle{display:block}
  .nav.open{background:var(--bg)}
  .nav-isi{display:none;margin-left:0;width:100%;flex-direction:column;align-items:stretch;gap:10px;padding-bottom:12px}
  .nav.open .nav-isi{display:flex;animation:fadeUp .25s ease-out}
  .nav-utama{flex-direction:column;gap:2px}
  .nav-utama a{padding:11px 14px}
  .nav-utama a>small{display:block}
  .nav-lain{display:block}
  .nav-lain summary{padding:11px 14px}
  .nav-lain details>ul{position:static;min-width:0;margin-top:6px;box-shadow:none;background:color-mix(in oklab,var(--bg) 50%,transparent)}
  .btn-nav{width:100%;justify-content:center}
  .btn-nav>span{display:inline}
  .nav-in{flex-wrap:wrap;gap:12px}
}

/* ---------- TOMBOL ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border:0;cursor:pointer;
  background:var(--accent);color:var(--on-accent);border-radius:11px;font-family:var(--body);
  font-weight:700;font-size:14.5px;position:relative;overflow:hidden;
  transition:transform .24s cubic-bezier(.4,0,.2,1),box-shadow .24s,filter .24s;
}
.btn::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.28) 50%,transparent 68%);transform:translateX(-100%);transition:transform .6s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px -12px var(--accent-glow)}
.btn:hover::before{transform:translateX(100%)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);box-shadow:none}
.btn-sm{padding:9px 15px;font-size:13px;border-radius:9px}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- KARTU & GRID ---------- */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-m);
  padding:clamp(20px,2.3vw,28px);position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.4,0,.2,1),border-color .3s,box-shadow .3s;
}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;transition:opacity .3s}
.card:hover{transform:translateY(-3px);border-color:var(--border-hi);box-shadow:0 24px 60px -30px rgba(0,0,0,.7)}
.card:hover::before{opacity:.85}
.card.flat:hover{transform:none;box-shadow:none}
.card h3{margin-bottom:9px}
.card p{font-size:14.5px;color:var(--text-dim);line-height:1.62}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.sp2{grid-column:span 2}.sp3{grid-column:span 3}.sp4{grid-column:span 4}.sp6{grid-column:span 6}
@media(max-width:980px){.g3,.g4{grid-template-columns:repeat(2,1fr)}.bento{grid-template-columns:repeat(2,1fr)}.sp2,.sp3,.sp4,.sp6{grid-column:span 2}}
@media(max-width:620px){.g2,.g3,.g4,.bento{grid-template-columns:1fr}.sp2,.sp3,.sp4,.sp6{grid-column:span 1}}

/* ---------- REVEAL ---------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .62s cubic-bezier(.16,1,.3,1),transform .62s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- HERO ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border)}
/* sorot lembut di belakang pembuka — bintang halus + dua berkas cahaya yang
   bergerak sangat pelan, supaya layar terasa hidup tanpa mengganggu bacaan */
.hero::before{
  content:"";position:absolute;inset:-20% -10% auto -10%;height:150%;pointer-events:none;z-index:0;
  background:
    radial-gradient(38% 52% at 24% 18%, color-mix(in oklab,var(--accent) 20%,transparent), transparent 64%),
    radial-gradient(34% 46% at 88% 30%, color-mix(in oklab,var(--claude) 18%,transparent), transparent 66%);
  filter:blur(14px);animation:sorotHalus 22s ease-in-out infinite alternate;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(1.6px 1.6px at 12% 22%, color-mix(in oklab,var(--text) 62%,transparent), transparent 60%),
    radial-gradient(1.3px 1.3px at 74% 12%, color-mix(in oklab,var(--accent) 78%,transparent), transparent 60%),
    radial-gradient(1.5px 1.5px at 41% 68%, color-mix(in oklab,var(--text) 46%,transparent), transparent 60%),
    radial-gradient(1.2px 1.2px at 92% 58%, color-mix(in oklab,var(--text) 52%,transparent), transparent 60%),
    radial-gradient(1.4px 1.4px at 58% 86%, color-mix(in oklab,var(--accent) 60%,transparent), transparent 60%),
    radial-gradient(1.2px 1.2px at 28% 92%, color-mix(in oklab,var(--text) 40%,transparent), transparent 60%);
  animation:twinkle 6.5s ease-in-out infinite;
}
.hero>*{position:relative;z-index:1}
@keyframes sorotHalus{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(3%,-2%,0) scale(1.08)}}
@media(prefers-reduced-motion:reduce){.hero::before,.hero::after{animation:none}}
.hero .wrap{padding-top:clamp(30px,min(4.6vw,6.4vh),72px);padding-bottom:clamp(26px,min(3.6vw,5vh),56px)}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(26px,4vw,58px);align-items:center}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr;gap:34px}}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero h1{margin:14px 0 18px;max-width:20ch}

/* strip statistik */
.strip{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:color-mix(in oklab,var(--surface) 55%,transparent)}
.strip ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);max-width:var(--wrap);margin:0 auto;padding:0 28px}
.strip li{padding:20px 18px;border-left:1px solid var(--border)}
.strip li:first-child{border-left:0}
.strip .v{font-family:var(--display);font-size:clamp(24px,3vw,36px);font-weight:660;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.strip .v span{color:var(--accent)}
.strip .k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-low);margin-top:5px}
@media(max-width:720px){.strip ul{grid-template-columns:repeat(2,1fr)}.strip li:nth-child(3){border-left:0}}

/* ---------- MARQUEE SINYAL ---------- */
.mq{overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg-2);padding:11px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-in{display:flex;width:max-content;animation:marquee 34s linear infinite}
.mq:hover .mq-in{animation-play-state:paused}
.mq b{font-family:var(--display);font-size:17px;font-weight:660;color:var(--text-dim);margin:0 30px;white-space:nowrap;letter-spacing:-.01em}
.mq b i{font-style:normal;color:var(--gate);margin-right:8px}

/* ---------- KUTIPAN ---------- */
.quote{border-left:2px solid var(--accent);padding:4px 0 4px 20px;font-family:var(--display);font-size:clamp(18px,1.9vw,25px);font-weight:600;line-height:1.24;letter-spacing:-.02em;max-width:22ch}
.quote cite{display:block;font-family:var(--mono);font-size:11px;font-style:normal;letter-spacing:.11em;text-transform:uppercase;color:var(--text-low);margin-top:12px;font-weight:400}

/* ---------- PIL & LENCANA ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;padding:4px 10px;border-radius:999px;border:1px solid var(--border-hi);color:var(--text-dim);white-space:nowrap}
.pill b{color:var(--accent);font-weight:600}
.pill.warn{border-color:color-mix(in oklab,var(--gate) 40%,transparent);color:var(--gate)}
.pill.bad{border-color:color-mix(in oklab,var(--danger) 42%,transparent);color:var(--danger)}
.pill.ok{border-color:var(--border-hi);color:var(--accent)}
.pill.lock{border-color:color-mix(in oklab,var(--locked) 60%,transparent);color:var(--locked)}
.keycap{
  display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 8px;
  font-family:var(--mono);font-size:13px;font-weight:600;color:var(--accent);
  background:color-mix(in oklab,var(--accent) 11%,transparent);
  border:1px solid var(--border-hi);border-radius:7px;box-shadow:0 2px 0 color-mix(in oklab,var(--accent) 22%,transparent)
}

/* ---------- TABEL ---------- */
/* anak grid/flex tidak boleh dipaksa melebar oleh isi yang lebar (tabel, kode) */
.hero-grid>*,.grid>*,.bento>*,.cta-in>*,.gates>*,.calc-body>*,.stack>*{min-width:0}
.tablewrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-m);background:var(--surface);max-width:100%}
table{border-collapse:collapse;width:100%;font-size:14px;min-width:520px}
/* tabel pendek (3 kolom kata) boleh menyusut mengikuti kolomnya */
.tablewrap.rapat table{min-width:0}
th,td{text-align:left;padding:12px 15px;border-bottom:1px solid var(--border);vertical-align:top}
th{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-low);font-weight:500;white-space:nowrap;background:color-mix(in oklab,var(--bg) 40%,transparent)}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .2s}
tbody tr:hover{background:color-mix(in oklab,var(--accent) 4%,transparent)}
td b{color:var(--text)}
td code,p code,li code{font-family:var(--mono);font-size:12.5px;color:var(--accent);background:color-mix(in oklab,var(--accent) 9%,transparent);padding:1px 6px;border-radius:5px}

/* ---------- RUAS / TULANG PUNGGUNG ---------- */
.spine{position:relative;display:flex;flex-direction:column;gap:14px;padding-left:46px}
.spine::before{content:"";position:absolute;left:17px;top:14px;bottom:14px;width:2px;background:linear-gradient(180deg,var(--accent),color-mix(in oklab,var(--accent) 25%,transparent) 60%,var(--locked));transform-origin:top;animation:railGrow 1.3s cubic-bezier(.16,1,.3,1) both}
.ruas{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-m);padding:20px 22px;transition:border-color .3s,transform .3s,box-shadow .3s}
.ruas:hover{border-color:var(--border-hi);transform:translateX(3px);box-shadow:0 20px 46px -30px rgba(0,0,0,.8)}
.ruas .node{
  position:absolute;left:-46px;top:20px;width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:700;font-size:14px;
  background:var(--bg);border:2px solid var(--accent);color:var(--accent);box-shadow:0 0 0 5px var(--bg),0 0 20px var(--accent-glow)
}
.ruas[data-state="lock"] .node{border-color:var(--locked);color:var(--locked);box-shadow:0 0 0 5px var(--bg)}
.ruas .rt{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:8px}
.ruas .rt h3{font-size:20px}
.ruas .rq{font-size:14.5px;color:var(--text-dim);margin-bottom:12px}
.ruas .gate{
  display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--text-dim);
  border-top:1px dashed color-mix(in oklab,var(--gate) 32%,transparent);padding-top:11px;margin-top:11px
}
.ruas .gate>b:first-child{color:var(--gate);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;padding-top:2px}
.ruas .gate span b{color:var(--text)}
.toolrow{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}

/* barrier "ember ditambal" */
.barrier{
  display:flex;align-items:center;gap:12px;margin:2px 0 2px -46px;padding-left:46px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gate)
}
.barrier::before,.barrier::after{content:"";height:1px;flex:1;background:repeating-linear-gradient(90deg,color-mix(in oklab,var(--gate) 50%,transparent) 0 6px,transparent 6px 12px)}

/* ---------- GERBANG (3 gates) ---------- */
.gates{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:g}
@media(max-width:860px){.gates{grid-template-columns:1fr}}
.gatecard{position:relative;background:linear-gradient(160deg,color-mix(in oklab,var(--accent) 6%,var(--surface)),var(--surface));border:1px solid var(--border);border-radius:var(--r-l);padding:26px;overflow:hidden}
.gatecard::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,color-mix(in oklab,var(--accent) 12%,transparent) 50%,transparent 60%);transform:translateX(-100%)}
.gatecard:hover::after{animation:gateSweep 1.1s ease}
.gatecard .no{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--accent)}
.gatecard h3{margin:8px 0 6px;font-size:26px}
.gatecard .guard{margin-top:16px;font-size:14px;color:var(--text-dim);font-style:italic;border-left:2px solid var(--border-hi);padding-left:14px;line-height:1.55}

/* ---------- KOKPIT (kalkulator) ---------- */
.calc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-l);overflow:hidden;margin-bottom:22px}
.calc>header{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:18px 22px;border-bottom:1px solid var(--border);background:color-mix(in oklab,var(--bg) 42%,transparent)}
.calc>header h3{flex:1;min-width:180px;font-size:20px}
.calc>header .sub{font-family:var(--mono);font-size:11px;color:var(--text-low);letter-spacing:.08em;width:100%}
.calc-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:0}
@media(max-width:900px){.calc-body{grid-template-columns:1fr}}
.inputs{padding:20px 22px;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:2px}
@media(max-width:900px){.inputs{border-right:0;border-bottom:1px solid var(--border)}}
.outs{padding:20px 22px;background:color-mix(in oklab,var(--bg) 34%,transparent);display:flex;flex-direction:column;gap:14px}
.fgroup{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--accent);margin:14px 0 8px;padding-top:12px;border-top:1px solid var(--border)}
.fgroup:first-child{margin-top:0;padding-top:0;border-top:0}
.f{display:flex;flex-direction:column;gap:7px;padding:9px 0}
.f + .f{border-top:1px dashed color-mix(in oklab,var(--text) 7%,transparent)}
.f label{font-size:13.5px;color:var(--text-dim);line-height:1.4}
.f label small{display:block;color:var(--text-low);font-size:11.5px}
.f .baris{display:flex;align-items:center;gap:12px}
.f .baris .rng{flex:1;min-width:0}
.f .baris .nilai{width:132px;flex:none}
.f.pilih{display:grid;grid-template-columns:1fr 190px;gap:10px;align-items:center}

/* ---------- PENGGESER ANGKA ---------- */
input[type=range].rng{
  -webkit-appearance:none;appearance:none;height:26px;background:transparent;cursor:grab;padding:0;border:0;
}
input[type=range].rng:active{cursor:grabbing}
input[type=range].rng::-webkit-slider-runnable-track{
  height:6px;border-radius:99px;
  background:linear-gradient(90deg,var(--accent) var(--isi,0%),color-mix(in oklab,var(--text) 12%,transparent) var(--isi,0%));
}
input[type=range].rng::-moz-range-track{height:6px;border-radius:99px;background:color-mix(in oklab,var(--text) 12%,transparent)}
input[type=range].rng::-moz-range-progress{height:6px;border-radius:99px;background:var(--accent)}
input[type=range].rng::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;margin-top:-7px;
  background:var(--accent);border:3px solid var(--surface);
  box-shadow:0 0 0 1px var(--border-hi),0 4px 12px -4px rgba(0,0,0,.8);
  transition:transform .15s,box-shadow .15s;
}
input[type=range].rng::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:var(--accent);border:3px solid var(--surface);
  box-shadow:0 0 0 1px var(--border-hi);
}
input[type=range].rng:hover::-webkit-slider-thumb{transform:scale(1.14)}
input[type=range].rng:active::-webkit-slider-thumb{transform:scale(1.22);box-shadow:0 0 0 1px var(--accent),0 0 0 7px var(--accent-halo)}
input[type=range].rng:focus-visible{outline:none}
input[type=range].rng:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--accent),0 0 0 7px var(--accent-halo)}
@media(max-width:640px){
  .f .baris .nilai{width:112px}
  input[type=range].rng::-webkit-slider-thumb{width:24px;height:24px;margin-top:-9px}
  input[type=range].rng::-moz-range-thumb{width:24px;height:24px}
}
.f input,.f select{
  width:100%;padding:9px 11px;background:var(--bg);border:1px solid var(--border);border-radius:9px;
  color:var(--text);font-family:var(--mono);font-size:13.5px;text-align:right;font-variant-numeric:tabular-nums;
  transition:border-color .2s,box-shadow .2s;
}
.f select{text-align:left;font-family:var(--body)}
.f input:focus,.f select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 16%,transparent)}
.f input[type=range]{padding:0;border:0;background:transparent}
.hero-out{
  border:1px solid var(--border-hi);border-radius:var(--r-m);padding:18px 20px;
  background:linear-gradient(150deg,color-mix(in oklab,var(--accent) 9%,transparent),transparent);
}
.hero-out .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-low)}
.hero-out .val{font-family:var(--display);font-size:clamp(28px,4vw,42px);font-weight:700;color:var(--accent);line-height:1.05;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-top:4px;animation:countPop .3s ease-out}
.hero-out .val.bad{color:var(--danger)}
.hero-out .val.warn{color:var(--gate)}
.hero-out .note{font-size:13.5px;color:var(--text-dim);margin-top:8px;max-width:46ch}
.outrows{display:flex;flex-direction:column;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-m);overflow:hidden}
.outrow{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:10px 15px;background:var(--surface);font-size:13.5px}
.outrow span{color:var(--text-dim)}
.outrow b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.outrow.hi b{color:var(--accent)}
.outrow.bad b{color:var(--danger)}
.outrow.warn b{color:var(--gate)}
.verdict{display:flex;gap:12px;align-items:flex-start;border-radius:var(--r-m);padding:14px 16px;font-size:14px;line-height:1.55;border:1px solid}
.verdict .tag{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;font-weight:600;white-space:nowrap;padding-top:2px}
.v-ok{background:color-mix(in oklab,var(--accent) 8%,transparent);border-color:var(--border-hi)}
.v-ok .tag{color:var(--accent)}
.v-warn{background:color-mix(in oklab,var(--gate) 8%,transparent);border-color:color-mix(in oklab,var(--gate) 34%,transparent)}
.v-warn .tag{color:var(--gate)}
.v-bad{background:color-mix(in oklab,var(--danger) 9%,transparent);border-color:color-mix(in oklab,var(--danger) 36%,transparent)}
.v-bad .tag{color:var(--danger)}
.v-info{background:color-mix(in oklab,var(--info) 7%,transparent);border-color:color-mix(in oklab,var(--info) 30%,transparent)}
.v-info .tag{color:var(--info)}
.bars{display:flex;flex-direction:column;gap:9px}
.bar{display:grid;grid-template-columns:120px 1fr auto;gap:11px;align-items:center;font-size:13px}
.bar .t{color:var(--text-dim);font-size:12.5px}
.bar .track{height:9px;border-radius:5px;background:color-mix(in oklab,var(--text) 8%,transparent);overflow:hidden}
.bar .fill{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .55s cubic-bezier(.16,1,.3,1)}
.bar .fill.gate{background:linear-gradient(90deg,var(--gate),#ffd28a)}
.bar .fill.bad{background:linear-gradient(90deg,var(--danger),#ff9f9f)}
.bar .fill.dim{background:color-mix(in oklab,var(--text) 22%,transparent)}
.bar b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.5px;white-space:nowrap}
.funnel{display:flex;flex-direction:column;gap:8px}
.fstep{display:grid;grid-template-columns:96px 1fr;gap:11px;align-items:center}
.fstep .fb{height:34px;border-radius:8px;background:linear-gradient(90deg,color-mix(in oklab,var(--accent) 62%,transparent),color-mix(in oklab,var(--accent) 20%,transparent));display:flex;align-items:center;padding:0 12px;font-family:var(--mono);font-size:13px;font-weight:600;transition:width .55s cubic-bezier(.16,1,.3,1);min-width:66px}
.fstep .fl{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-low);text-align:right}

/* ---------- PENCARIAN & FILTER ---------- */
.toolbar{display:flex;flex-wrap:wrap;gap:11px;align-items:center;margin-bottom:22px}
.search{position:relative;flex:1;min-width:250px}
.search input{
  width:100%;padding:13px 15px 13px 42px;background:var(--surface);border:1px solid var(--border);
  border-radius:11px;color:var(--text);font-family:var(--body);font-size:15px;transition:border-color .2s,box-shadow .2s
}
.search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 15%,transparent)}
.search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--text-low)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;padding:7px 13px;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid var(--border);color:var(--text-dim);transition:all .2s
}
.chip:hover{border-color:var(--border-hi);color:var(--text)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.count{font-family:var(--mono);font-size:12px;color:var(--text-low);margin-left:auto;white-space:nowrap}
.empty{text-align:center;padding:52px 20px;color:var(--text-low);font-size:15px}

/* kartu hasil pencarian */
.rescard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-m);padding:18px 20px;transition:border-color .25s,transform .25s,box-shadow .25s}
.rescard:hover{border-color:var(--border-hi);transform:translateY(-2px);box-shadow:0 20px 44px -30px rgba(0,0,0,.75)}
.rescard .top{display:flex;gap:11px;align-items:flex-start;margin-bottom:9px}
.rescard h3{font-size:17.5px;flex:1;line-height:1.22}
.rescard .meta{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-low);margin-bottom:7px}
.rescard p{font-size:14px;color:var(--text-dim);line-height:1.58}
.rescard .foot{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px;padding-top:12px;border-top:1px solid var(--border);align-items:center}
.rescard .fn{font-family:var(--mono);font-size:11px;color:var(--text-low)}

/* ---------- AKORDEON ---------- */
details.acc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-m);margin-bottom:10px;overflow:hidden}
details.acc>summary{cursor:pointer;padding:15px 20px;font-weight:600;font-size:15.5px;list-style:none;display:flex;gap:12px;align-items:center;transition:background .2s}
details.acc>summary::-webkit-details-marker{display:none}
details.acc>summary::after{content:"+";margin-left:auto;font-family:var(--mono);font-size:19px;color:var(--accent);transition:transform .25s}
details.acc[open]>summary::after{transform:rotate(45deg)}
details.acc>summary:hover{background:color-mix(in oklab,var(--accent) 5%,transparent)}
details.acc .accbody{padding:0 20px 18px;font-size:14.5px;color:var(--text-dim);line-height:1.65;display:flex;flex-direction:column;gap:12px}
details.acc .accbody ul{padding-left:20px;display:flex;flex-direction:column;gap:7px}

/* ---------- CTA & FOOTER ---------- */
.cta{position:relative;border:1px solid var(--border);border-radius:var(--r-l);background:var(--surface);padding:clamp(30px,4.4vw,58px);overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 130% at 100% 0,var(--accent-halo),transparent 56%);pointer-events:none}
.cta-in{position:relative;display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,44px);align-items:center}
@media(max-width:820px){.cta-in{grid-template-columns:1fr}}
footer.ft{border-top:1px solid var(--border);margin-top:20px;background:var(--bg-2)}
footer.ft .in{max-width:var(--wrap);margin:0 auto;padding:34px 28px;display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;font-size:13px;color:var(--text-low)}
footer.ft a{color:var(--text-dim)}
footer.ft a:hover{color:var(--accent)}
footer.ft .cols{display:flex;gap:34px;flex-wrap:wrap}
footer.ft .cols div{min-width:120px}
footer.ft .cols div{display:flex;flex-direction:column;gap:7px}
footer.ft .cols b{color:var(--text);font-size:12px;font-family:var(--mono);letter-spacing:.11em;text-transform:uppercase;font-weight:500}

/* ---------- LAINNYA ---------- */
/* ---------- BILAH AJAKAN YANG MENEMPEL ----------
   Muncul begitu pengunjung melewati bagian pembuka, dan bisa ditutup. Satu
   tujuan saja: memasang skill-nya. */
.ajakan-lekat{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  background:color-mix(in oklab,var(--bg-2) 92%,transparent);
  backdrop-filter:blur(20px) saturate(150%);
  border-top:1px solid color-mix(in oklab,var(--claude) 34%,transparent);
  box-shadow:0 -22px 60px -34px rgba(0,0,0,.95);
  animation:naikPelan .45s cubic-bezier(.16,1,.3,1);
}
@keyframes naikPelan{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}
.al-in{
  max-width:var(--wrap);margin:0 auto;padding:12px 28px;
  display:flex;align-items:center;gap:18px;
}
.al-tanda{
  flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
  background:color-mix(in oklab,var(--claude) 16%,transparent);
  border:1px solid color-mix(in oklab,var(--claude) 40%,transparent);
}
.al-tanda svg{width:24px;height:24px}
.al-teks{display:flex;flex-direction:column;gap:2px;min-width:0}
.al-teks b{font-family:var(--display);font-size:16px;font-weight:680;letter-spacing:-.01em}
.al-teks small{font-size:12.5px;color:var(--text-dim)}
.al-teks code{font-family:var(--mono);font-size:12px;color:var(--accent);background:color-mix(in oklab,var(--accent) 12%,transparent);padding:1px 6px;border-radius:5px}
.al-tombol{margin-left:auto;align-items:center;flex:none}
.al-tombol>small{white-space:nowrap}
.al-tutup{
  flex:none;background:transparent;border:1px solid var(--border);color:var(--text-low);
  width:30px;height:30px;border-radius:8px;font-size:17px;line-height:1;cursor:pointer;transition:color .2s,border-color .2s
}
.al-tutup:hover{color:var(--text);border-color:var(--border-hi)}
@media(max-width:900px){
  .al-in{padding:10px 18px;gap:12px}
  .al-tanda,.al-teks small{display:none}
  .al-teks b{font-size:14px}
  .al-tombol>small{font-size:10.5px}
}
@media(max-width:520px){
  .al-teks{display:none}
  .al-tombol{margin-left:0;flex:1}
  .al-tombol .btn{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){.ajakan-lekat{animation:none}}
body:has(.ajakan-lekat:not([hidden])){padding-bottom:112px}
.notice{display:flex;gap:12px;align-items:flex-start;background:color-mix(in oklab,var(--gate) 7%,transparent);border:1px solid color-mix(in oklab,var(--gate) 30%,transparent);border-radius:var(--r-m);padding:15px 17px;font-size:14px;color:var(--text-dim);line-height:1.6}
.notice b{color:var(--gate)}
.notice.ok{background:color-mix(in oklab,var(--accent) 6%,transparent);border-color:var(--border-hi)}
.notice.ok b{color:var(--accent)}
.notice.bad{background:color-mix(in oklab,var(--danger) 7%,transparent);border-color:color-mix(in oklab,var(--danger) 30%,transparent)}
.notice.bad b{color:var(--danger)}
.stack{display:flex;flex-direction:column;gap:14px}
.stack-sm{display:flex;flex-direction:column;gap:8px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--on-accent);padding:10px 16px;border-radius:0 0 8px 0;z-index:200}
.skip:focus{left:0}

/* ---------- PENYESUAIAN LAYAR KECIL ---------- */
@media(max-width:640px){
  .wrap{padding:0 18px}
  .actions{gap:10px}
  .actions .btn{flex:1 1 100%;justify-content:center;text-align:center}
  .eyebrow{letter-spacing:.12em;font-size:11px}
  .pill{white-space:normal}
  .bar{grid-template-columns:84px 1fr auto;gap:8px}
  .bar .t{font-size:11.5px}
  .bar b{font-size:11.5px}
  .f.pilih{grid-template-columns:1fr;gap:6px}
  .fstep{grid-template-columns:74px 1fr}
  .outrow{flex-wrap:wrap;gap:2px}
  .calc>header{padding:15px 17px}
  .inputs,.outs{padding:17px}
  .quote{font-size:20px;max-width:none}
  .strip li{padding:16px 14px}
  .spine{padding-left:34px}
  .ruas{padding:17px 16px}
  .ruas .node{left:-34px;width:28px;height:28px;font-size:12px;top:17px}
  .barrier{margin-left:-34px;padding-left:34px;font-size:10px}
  .nav-in{padding:12px 18px}
  footer.ft .cols{gap:22px}
}

/* ============================================================
   ADEGAN PANTAI · VILLA · HOTEL — ilustrasi animatif
   Semua gambar dibuat dengan SVG di dalam berkas ini sendiri:
   tidak ada aset luar, tidak ada permintaan jaringan.
   ============================================================ */
.scene{position:relative;overflow:hidden;background:#030e16;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.scene svg{display:block;width:100%;height:auto;max-height:68vh}
/* di layar sempit gambarnya dibuat lebih tinggi & dipotong di sisi kiri-kanan,
   supaya villa, kolam, hotel, dan pohonnya tetap terbaca besar */
@media(max-width:820px){
  .scene svg{height:clamp(210px,46vw,300px)}
  a.pill{padding:9px 14px}                 /* sasaran sentuh lebih lega */
  .chip{padding:10px 14px}
  .nav ul a{padding:11px 14px}
  details.acc>summary{padding:17px 20px}
}
.scene-cap{background:var(--bg-2);border-top:1px solid var(--border)}
.scene-cap>.wrap{
  display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;justify-content:space-between;
  padding-top:18px;padding-bottom:18px;
}
.scene-cap p{font-size:14px;color:var(--text-dim);max-width:52ch;margin:0}
.scene-cap b{color:var(--text)}
.scene-legend{display:flex;flex-wrap:wrap;gap:8px}
.scene-legend span{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;color:var(--text-dim);background:color-mix(in oklab,#03131d 78%,transparent);
  border:1px solid var(--border);border-radius:999px;padding:5px 11px;backdrop-filter:blur(6px)
}
.scene-legend i{width:8px;height:8px;border-radius:2px;display:inline-block}
.scene-legend .on{background:#ffd88a;box-shadow:0 0 8px #ffd88a}
.scene-legend .off{background:#1d3d4f}
@media(max-width:640px){
  .scene-cap>.wrap{padding-top:15px;padding-bottom:15px}
  .scene-cap p{font-size:13px}
}

/* --- gerak --- */
@keyframes twinkle{0%,100%{opacity:.15}50%{opacity:.9}}
@keyframes sunBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes sunHalo{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.6;transform:scale(1.07)}}
@keyframes cloudDrift{from{transform:translateX(-14%)}to{transform:translateX(114%)}}
@keyframes waveRoll{from{transform:translateX(0)}to{transform:translateX(-300px)}}
@keyframes foamPulse{0%,100%{opacity:.28}50%{opacity:.7}}
@keyframes boatSail{from{transform:translateX(-60px)}to{transform:translateX(940px)}}
@keyframes boatBob{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-3px) rotate(1.4deg)}}
@keyframes palmSway{from{transform:rotate(-2.2deg)}to{transform:rotate(2.6deg)}}
@keyframes windowOn{0%,12%{opacity:.12}22%,72%{opacity:1}86%,100%{opacity:.12}}
@keyframes poolShimmer{0%,100%{transform:translateX(0);opacity:.25}50%{transform:translateX(9px);opacity:.7}}
@keyframes birdFly{from{transform:translate(-40px,26px)}to{transform:translate(920px,-14px)}}
@keyframes birdFlap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.42)}}

.scene .sun{animation:sunBob 9s ease-in-out infinite}
.scene .halo{animation:sunHalo 7s ease-in-out infinite;transform-origin:700px 168px}
.scene .star{animation:twinkle 4s ease-in-out infinite}
.scene .cloud{animation:cloudDrift linear infinite}
.scene .wave{animation:waveRoll linear infinite}
.scene .foam{animation:foamPulse 5s ease-in-out infinite}
.scene .boat{animation:boatSail 46s linear infinite}
.scene .boat>g{animation:boatBob 4s ease-in-out infinite}
.scene .palm{transform-box:fill-box;transform-origin:bottom center;animation:palmSway 5.5s ease-in-out infinite alternate}
.scene .w{animation:windowOn 7s ease-in-out infinite;animation-delay:calc(var(--i,0)*.42s)}
.scene .w.mati{animation:none;opacity:.1}
.scene .shim{animation:poolShimmer 4.5s ease-in-out infinite;animation-delay:calc(var(--i,0)*.6s)}
.scene .bird{animation:birdFly 34s linear infinite}
.scene .bird>path{transform-box:fill-box;transform-origin:center;animation:birdFlap .5s ease-in-out infinite}

@media(prefers-reduced-motion:reduce){
  .scene .sun,.scene .halo,.scene .star,.scene .cloud,.scene .wave,.scene .foam,
  .scene .boat,.scene .boat>g,.scene .palm,.scene .w,.scene .shim,.scene .bird,.scene .bird>path{animation:none}
  .scene .w{opacity:.85}
}

/* --- kartu tipe properti dengan ikon animatif --- */
.tipe{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
@media(max-width:980px){.tipe{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.tipe{grid-template-columns:repeat(2,1fr)}}
.tipe article{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-m);
  padding:18px 14px;text-align:center;transition:border-color .3s,transform .3s
}
.tipe article:hover{border-color:var(--border-hi);transform:translateY(-3px)}
.tipe svg{width:46px;height:46px;margin-bottom:10px}
.tipe h4{font-size:14.5px;margin-bottom:4px}
.tipe p{font-size:12px;color:var(--text-low);margin:0 auto;max-width:18ch}
.tipe article:hover .swing{transform-box:fill-box;transform-origin:top center;animation:palmSway 1.6s ease-in-out infinite alternate}

/* --- kamus istilah --- */
.istilah{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:940px){.istilah{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.istilah{grid-template-columns:1fr}}
.istilah article{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-m);padding:18px 20px;
  transition:border-color .28s,transform .28s,box-shadow .28s;position:relative;overflow:hidden
}
.istilah article::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);
  transform:scaleY(0);transform-origin:top;transition:transform .32s cubic-bezier(.16,1,.3,1)
}
.istilah article:hover{border-color:var(--border-hi);transform:translateY(-3px);box-shadow:0 22px 48px -32px rgba(0,0,0,.8)}
.istilah article:hover::after{transform:scaleY(1)}
.istilah .kode{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:4px}
.istilah .kode b{font-family:var(--display);font-size:19px;letter-spacing:-.01em}
.istilah .kode span{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-low)}
.istilah .arti{font-size:14px;color:var(--text-dim);line-height:1.58}
.istilah .warung{
  font-size:13.5px;color:var(--text);margin-top:10px;padding-top:10px;
  border-top:1px dashed color-mix(in oklab,var(--accent) 26%,transparent)
}
.istilah .warung::before{content:"Bahasa warungnya · ";font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}

/* --- CTA pasang skill --- */
.langkah{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;counter-reset:lang}
@media(max-width:860px){.langkah{grid-template-columns:1fr}}
.langkah article{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-m);padding:20px 22px;position:relative}
.langkah article::before{
  counter-increment:lang;content:counter(lang);
  font-family:var(--mono);font-size:11px;font-weight:600;color:var(--on-accent);background:var(--accent);
  width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;margin-bottom:12px
}
.langkah h4{margin-bottom:7px;font-size:16px}
.langkah p{font-size:13.5px;color:var(--text-dim);line-height:1.6;margin:0}
.langkah code{display:inline-block;margin-top:8px}
.only-artifact{display:none}


/* ---------- KARTU KENALAN + IKON MIRA ---------- */
.kenalan{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,38px);align-items:center;
  background:linear-gradient(140deg,color-mix(in oklab,var(--accent) 7%,var(--surface)),var(--surface));
  border:1px solid var(--border-hi);border-radius:var(--r-l);padding:clamp(22px,3vw,34px);
  position:relative;overflow:hidden
}
.kenalan::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 120% at 0 0,var(--accent-halo),transparent 60%);pointer-events:none}
@media(max-width:720px){.kenalan{grid-template-columns:1fr;text-align:left}}
.kenalan .avatar{position:relative;width:clamp(122px,15vw,176px);flex:none}
.kenalan .avatar img,.kenalan .avatar svg{width:100%;height:auto;display:block;border-radius:50%;filter:drop-shadow(0 16px 34px rgba(0,0,0,.6))}
.kenalan .avatar::after{
  content:"";position:absolute;inset:-8%;border-radius:50%;border:1px dashed color-mix(in oklab,var(--accent) 30%,transparent);pointer-events:none;
  animation:spinSlow 34s linear infinite
}
@keyframes spinSlow{to{transform:rotate(360deg)}}
.kenalan .isi{position:relative;display:flex;flex-direction:column;gap:12px}
.kenalan .nama{font-family:var(--display);font-size:clamp(22px,2.4vw,30px);font-weight:680;letter-spacing:-.02em}
.kenalan .nama span{color:var(--accent)}
.kenalan .kata{font-size:clamp(15px,1.4vw,18px);line-height:1.55;color:var(--text);max-width:44ch}
.kenalan .kata b{color:var(--accent)}
@media(prefers-reduced-motion:reduce){.kenalan .avatar::after{animation:none}}

/* deretan ikon dalam berbagai ukuran */
.ikonrow{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.ikonrow figure{display:flex;flex-direction:column;align-items:center;gap:7px}
.ikonrow svg{display:block}
.ikonrow figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--text-low)}


/* ---------- TOMBOL BELI (pasang & unduh skill) ---------- */
.btn-beli{
  background:linear-gradient(135deg,#ff4324,#d81409);color:#fff;font-weight:800;
  box-shadow:0 12px 30px -14px rgba(255,67,36,.75);
  animation:beliDenyut 3s ease-in-out infinite;
}
.btn-beli::before{background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.42) 50%,transparent 68%)}
.btn-beli:hover{filter:brightness(1.07);box-shadow:0 18px 40px -14px rgba(255,67,36,.9)}
@keyframes beliDenyut{
  0%,100%{box-shadow:0 12px 30px -16px rgba(255,67,36,.6)}
  50%{box-shadow:0 14px 42px -12px rgba(255,67,36,1)}
}
.tombol-ket{display:inline-flex;flex-direction:column;gap:7px;align-items:flex-start}
.tombol-ket>small{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--text-low);
  padding-left:2px;white-space:nowrap
}
.tombol-ket>small b{color:#ff8b73;font-weight:600;letter-spacing:.02em}
@media(prefers-reduced-motion:reduce){.btn-beli{animation:none}}
@media(max-width:640px){
  .actions .tombol-ket{flex:1 1 100%}
  .actions .tombol-ket .btn{width:100%}
  .tombol-ket>small{align-self:center;white-space:normal;text-align:center}
}

/* ---------- KARTU NAVIGASI BERANDA ---------- */
.kartu-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:980px){.kartu-nav{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.kartu-nav{grid-template-columns:1fr}}
.knav{
  display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-m);
  padding:20px 20px 18px;color:inherit;
  transition:transform .28s cubic-bezier(.4,0,.2,1),border-color .28s,box-shadow .28s;
}
.knav::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),transparent);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.knav:hover{transform:translateY(-4px);border-color:var(--border-hi);box-shadow:0 24px 52px -34px rgba(0,0,0,.85)}
.knav:hover::before{transform:scaleX(1)}
.knav .ik{font-size:26px;line-height:1;margin-bottom:2px}
.knav h3{font-size:19px}
.knav p{font-size:13.5px;color:var(--text-dim);line-height:1.55;margin:0}
.knav .pergi{margin-top:auto;padding-top:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--accent);transition:transform .25s;display:inline-block}
.knav:hover .pergi{transform:translateX(4px)}
.knav.utama{
  grid-column:span 2;
  background:linear-gradient(140deg,color-mix(in oklab,var(--accent) 10%,var(--surface)),var(--surface));
  border-color:var(--border-hi)
}
.knav.utama h3{font-size:23px}
.knav.utama p{font-size:14.5px;max-width:42ch}
@media(max-width:520px){.knav.utama{grid-column:span 1}}

/* ---------- LANGKAH BERNOMOR BESAR (cara pakai) ---------- */
.tangga{display:flex;flex-direction:column;gap:14px;counter-reset:tg}
.tangga article{
  display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:start;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-m);padding:22px 24px;
  transition:border-color .3s,transform .3s
}
.tangga article:hover{border-color:var(--border-hi);transform:translateX(3px)}
.tangga article::before{
  counter-increment:tg;content:counter(tg);
  font-family:var(--display);font-size:26px;font-weight:700;color:var(--on-accent);
  background:var(--accent);width:52px;height:52px;border-radius:14px;
  display:flex;align-items:center;justify-content:center
}
.tangga h3{margin-bottom:8px}
.tangga p{font-size:14.5px;color:var(--text-dim);line-height:1.62;margin:0 0 8px}
.tangga p:last-child{margin-bottom:0}
@media(max-width:560px){
  .tangga article{grid-template-columns:1fr;gap:12px}
  .tangga article::before{width:40px;height:40px;font-size:20px;border-radius:11px}
}

/* ---------- PETA SITUS ---------- */
.peta{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.peta{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.peta{grid-template-columns:1fr}}
.peta section{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-m);padding:20px 22px}
.peta section:hover{border-color:var(--border-hi)}
.peta h3{font-size:18px;margin-bottom:4px}
.peta .url{font-family:var(--mono);font-size:11px;color:var(--text-low);letter-spacing:.04em;display:block;margin-bottom:12px}
.peta ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.peta li a{display:flex;gap:9px;font-size:13.5px;color:var(--text-dim);line-height:1.45}
.peta li a::before{content:"›";color:var(--accent);font-weight:700}
.peta li a:hover{color:var(--accent)}

/* ---------- LENCANA KECOCOKAN CLAUDE ---------- */
.claude-badge{
  display:inline-flex;align-items:center;gap:9px;padding:8px 15px 8px 11px;border-radius:999px;
  background:color-mix(in oklab,#d97757 9%,transparent);
  border:1px solid color-mix(in oklab,#d97757 40%,transparent);
  font-size:13px;color:var(--text-dim);white-space:nowrap;
  transition:border-color .25s,background .25s
}
.claude-badge b{color:#eda184;font-weight:700;letter-spacing:-.01em}
.claude-badge:hover{border-color:color-mix(in oklab,#d97757 65%,transparent);background:color-mix(in oklab,#d97757 14%,transparent)}
.claude-mark{width:22px;height:22px;flex:none;animation:claudeSpin 26s linear infinite}
.claude-badge.besar{padding:11px 20px 11px 15px;font-size:15px}
.claude-badge.besar .claude-mark{width:28px;height:28px}
@keyframes claudeSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.claude-mark{animation:none}}
.jejak-claude{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.jejak-claude .claude-mark{width:34px;height:34px}
footer.ft .merek{width:100%;padding-top:18px;margin-top:4px;border-top:1px solid var(--border);font-size:12px;color:var(--text-low);max-width:none}

/* ---------- PITA AJAKAN PASANG SKILL (di kaki tiap halaman) ---------- */
.pita-skill{padding-bottom:clamp(34px,4vw,56px)}
.pita{
  display:grid;grid-template-columns:1fr auto;gap:clamp(18px,3vw,38px);align-items:center;
  background:linear-gradient(120deg,color-mix(in oklab,#d97757 10%,var(--surface)),var(--surface) 62%);
  border:1px solid color-mix(in oklab,#d97757 32%,transparent);
  border-radius:var(--r-l);padding:clamp(20px,2.6vw,30px);position:relative;overflow:hidden
}
.pita::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 120% at 0 0,color-mix(in oklab,#d97757 14%,transparent),transparent 60%);pointer-events:none}
.pita-kiri{display:flex;gap:16px;align-items:flex-start;position:relative;min-width:0}
.pita-tanda{flex:none;display:flex}
.pita-tanda .claude-mark{width:44px;height:44px;animation-duration:34s}
.pita h3{font-size:clamp(19px,1.9vw,24px);margin-bottom:6px}
.pita p{font-size:14px;color:var(--text-dim);line-height:1.58;margin:0;max-width:52ch}
.pita .btn-beli{gap:11px}
.pita .btn-beli .claude-mark{width:20px;height:20px;animation:none;filter:brightness(0) invert(1)}
.pita .tombol-ket{position:relative}
.pita .tombol-ket>small{white-space:normal}
@media(max-width:860px){
  .pita{grid-template-columns:1fr;gap:20px}
  .pita .tombol-ket{align-items:stretch}
  .pita .tombol-ket .btn{justify-content:center}
  .pita .tombol-ket>small{text-align:center}
}

/* ============================================================
   PASANG DALAM TIGA LANGKAH + LAYAR CLAUDE
   Ditaruh tepat di bawah pembuka beranda: pengunjung baru harus melihat
   betapa pendeknya jarak antara "penasaran" dan "Mira sudah menghitung".
   ============================================================ */
.pasang3{
  position:relative;overflow:hidden;
  background:linear-gradient(150deg,
    color-mix(in oklab,var(--claude) 10%,var(--surface)),
    color-mix(in oklab,var(--accent) 5%,var(--surface)));
  border:1px solid color-mix(in oklab,var(--claude) 30%,transparent);
  border-radius:var(--r-l);padding:clamp(22px,3vw,36px);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(22px,3vw,40px);align-items:center;
}
.pasang3::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(64% 90% at 100% 0, color-mix(in oklab,var(--claude) 20%,transparent), transparent 62%);
}
.pasang3>*{position:relative}
@media(max-width:940px){.pasang3{grid-template-columns:1fr}}

.p3-judul{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:20px}
.p3-judul h2{font-size:clamp(22px,2.8vw,32px)}
.p3-judul p{color:var(--text-dim);font-size:15px;max-width:48ch}

.tangga3{display:flex;flex-direction:column;gap:2px;counter-reset:t3}
.tangga3 li{
  list-style:none;display:grid;grid-template-columns:38px 1fr;gap:14px;align-items:start;
  padding:13px 0;border-top:1px solid var(--border);
}
.tangga3 li:first-child{border-top:0}
.tangga3 li::before{
  counter-increment:t3;content:counter(t3);
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  font-family:var(--mono);font-size:14px;font-weight:600;
  color:var(--claude);background:color-mix(in oklab,var(--claude) 14%,transparent);
  border:1px solid color-mix(in oklab,var(--claude) 42%,transparent);
}
.tangga3 b{display:block;font-family:var(--display);font-size:17px;font-weight:660;letter-spacing:-.01em}
.tangga3 span{display:block;font-size:13.5px;color:var(--text-dim);line-height:1.55;margin-top:3px}
.tangga3 span b{display:inline;font-size:inherit;font-family:inherit;color:var(--text);font-weight:700}
.tangga3 code{font-family:var(--mono);font-size:13px;color:var(--accent);background:color-mix(in oklab,var(--accent) 13%,transparent);padding:2px 7px;border-radius:6px}

/* layar Claude tiruan — memperlihatkan bentuk percakapannya */
.layar{
  background:color-mix(in oklab,var(--bg-2) 92%,transparent);
  border:1px solid var(--border);border-radius:var(--r-m);overflow:hidden;
  box-shadow:0 34px 80px -40px rgba(0,0,0,.95);
}
.layar-bar{
  display:flex;align-items:center;gap:9px;padding:10px 14px;
  border-bottom:1px solid var(--border);background:color-mix(in oklab,var(--surface) 70%,transparent);
}
.layar-bar i{width:10px;height:10px;border-radius:50%;background:var(--border);flex:none}
.layar-bar i:first-child{background:color-mix(in oklab,var(--danger) 70%,transparent)}
.layar-bar i:nth-child(2){background:color-mix(in oklab,var(--gate) 70%,transparent)}
.layar-bar i:nth-child(3){background:color-mix(in oklab,var(--accent) 70%,transparent)}
.layar-bar span{margin-left:6px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--text-low)}
.layar-isi{padding:16px 16px 18px;display:flex;flex-direction:column;gap:12px}
.gel{display:flex;gap:10px;align-items:flex-start}
.gel .siapa{
  flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.04em;
  background:color-mix(in oklab,var(--text) 8%,transparent);color:var(--text-low)
}
.gel.mira .siapa{background:color-mix(in oklab,var(--accent) 15%,transparent);color:var(--accent)}
.gel .kata{
  flex:1;min-width:0;background:color-mix(in oklab,var(--surface) 82%,transparent);
  border:1px solid var(--border);border-radius:11px;padding:10px 13px;font-size:13.5px;line-height:1.6
}
.gel.mira .kata{border-color:var(--border-hi);background:color-mix(in oklab,var(--accent) 7%,var(--surface))}
.gel .kata code{font-family:var(--mono);font-size:13.5px;color:var(--accent);font-weight:600}
.gel .kata b{color:var(--text)}
.ketik::after{content:"▋";color:var(--accent);animation:blink 1.05s step-end infinite;margin-left:2px}
.layar-kaki{
  border-top:1px solid var(--border);padding:10px 14px;font-family:var(--mono);font-size:11px;
  color:var(--text-low);letter-spacing:.05em;display:flex;gap:8px;align-items:center;flex-wrap:wrap
}
@media(prefers-reduced-motion:reduce){.ketik::after{animation:none}}

/* tombol ajakan utama — sedikit lebih besar dari tombol biasa */
.btn-besar{padding:15px 26px;font-size:15.5px;border-radius:12px}
.btn-besar svg{width:20px;height:20px}

@media(max-width:520px){
  .btn-besar{font-size:14px;padding:14px 16px}
  .btn-besar>span{text-align:center;line-height:1.3}
  .btn-besar svg{width:18px;height:18px}
}

/* ============================================================
   NOL → 10 — PERJALANAN TRANSFORMASI
   Rel yang terisi dari NOL ke 10, lalu empat tahap perubahan.
   Tiap tahap menyebut apa yang berubah DAN ke mana harus pergi,
   supaya klaimnya bisa langsung diperiksa sendiri oleh pengunjung.
   ============================================================ */
.n10{
  position:relative;overflow:hidden;
  margin-bottom:clamp(26px,3.6vw,46px);
  padding:clamp(24px,3.2vw,42px) clamp(20px,3vw,38px) clamp(22px,2.8vw,34px);
  background:
    radial-gradient(88% 120% at 100% 0,color-mix(in oklab,var(--accent) 9%,transparent),transparent 62%),
    linear-gradient(160deg,var(--surface-2),var(--surface) 58%);
  border:1px solid var(--border-hi);border-radius:var(--r-l);
  box-shadow:0 34px 90px -56px rgba(0,0,0,1);
}
.n10-kepala{display:flex;flex-direction:column;align-items:flex-start;gap:16px}

/* --- tanda NOL ————— 10 --- */
.n10-mark{display:flex;align-items:center;gap:clamp(12px,1.8vw,22px);width:100%}
.n10-ujung{
  font-family:var(--display);font-weight:800;letter-spacing:-.045em;line-height:.92;
  font-size:clamp(34px,5.6vw,68px);font-variant-numeric:tabular-nums;flex:none;
}
.n10-ujung.awal{color:var(--text-low)}
.n10-ujung.akhir{color:var(--accent);text-shadow:0 0 34px var(--accent-glow)}

.n10-rel{position:relative;flex:1;min-width:60px;height:22px;display:flex;align-items:center}
.n10-rel::before{content:"";position:absolute;left:0;right:0;height:2px;background:var(--border)}
/* garis yang terisi — ditarik saat bagian ini masuk layar */
.n10-rel>b{
  position:absolute;left:0;right:0;height:2px;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,color-mix(in oklab,var(--accent) 30%,transparent),var(--accent));
  box-shadow:0 0 14px var(--accent-glow);
  transition:transform 1.5s cubic-bezier(.16,1,.3,1) .2s;
}
.n10.in .n10-rel>b{transform:scaleX(1)}
/* empat simpul perhentian */
.n10-rel>i{
  position:absolute;width:11px;height:11px;border-radius:50%;
  background:var(--bg);border:2px solid var(--border);
  transform:translateX(-50%) scale(.7);opacity:.5;
  transition:border-color .4s,background .4s,opacity .4s,transform .4s;
}
.n10-rel>i:nth-of-type(1){left:12%}
.n10-rel>i:nth-of-type(2){left:38%}
.n10-rel>i:nth-of-type(3){left:64%}
.n10-rel>i:nth-of-type(4){left:90%}
.n10.in .n10-rel>i{border-color:var(--accent);opacity:1;transform:translateX(-50%) scale(1);box-shadow:0 0 0 4px color-mix(in oklab,var(--accent) 14%,transparent)}
.n10.in .n10-rel>i:nth-of-type(1){transition-delay:.42s}
.n10.in .n10-rel>i:nth-of-type(2){transition-delay:.72s}
.n10.in .n10-rel>i:nth-of-type(3){transition-delay:1.02s}
.n10.in .n10-rel>i:nth-of-type(4){transition-delay:1.32s}

.n10-kata{color:var(--text-dim);font-size:clamp(14.5px,1.32vw,17px);line-height:1.6;max-width:62ch}

/* --- empat tahap --- */
.n10-jalur{
  list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  margin-top:clamp(22px,2.8vw,34px);counter-reset:none;
}
@media(max-width:1000px){.n10-jalur{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.n10-jalur{grid-template-columns:1fr}}
.n10-jalur>li{display:flex}
.n10-jalur a{
  display:flex;flex-direction:column;gap:12px;width:100%;position:relative;overflow:hidden;
  padding:18px 18px 16px;border-radius:var(--r-m);color:inherit;
  background:color-mix(in oklab,var(--bg) 42%,transparent);
  border:1px solid var(--border);
  transition:transform .28s cubic-bezier(.4,0,.2,1),border-color .28s,background .28s;
}
.n10-jalur a::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--accent),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .38s cubic-bezier(.16,1,.3,1);
}
.n10-jalur a:hover{transform:translateY(-4px);border-color:var(--border-hi);background:color-mix(in oklab,var(--accent) 6%,var(--surface))}
.n10-jalur a:hover::before{transform:scaleX(1)}

.n10-atas{display:flex;align-items:center;justify-content:space-between;gap:10px}
.n10-no{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--text-low)}
.n10-ikon{display:grid;place-items:center;width:40px;height:40px;color:var(--accent);flex:none}
.n10-ikon svg{width:100%;height:100%}
.n10-jalur a:hover .n10-ikon{color:var(--accent-2)}

.n10-ubah{display:flex;flex-direction:column;gap:2px}
.n10-ubah em{
  display:block;font-style:normal;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-low);margin-bottom:1px
}
.n10-dari{font-family:var(--display);font-size:clamp(17px,1.6vw,20px);font-weight:600;color:var(--text-low);letter-spacing:-.02em;line-height:1.15}
.n10-panah{display:block;color:var(--accent);margin:5px 0 6px;opacity:.85}
.n10-panah svg{width:15px;height:21px;display:block}
.n10-jalur a:hover .n10-panah{opacity:1}
.n10-jadi{font-family:var(--display);font-size:clamp(20px,2vw,25px);font-weight:760;color:var(--accent);letter-spacing:-.025em;line-height:1.12}
.n10-jalur p{font-size:13.5px;line-height:1.6;color:var(--text-dim);margin:0}
.n10-jalur p b{color:var(--text);font-weight:700}
.n10-pergi{
  margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);
  transition:transform .25s
}
.n10-jalur a:hover .n10-pergi{transform:translateX(4px)}

/* ikon yang bergerak sedikit — penanda "ada yang berubah", bukan hiasan */
.n10-kilat{animation:n10Denyut 2.8s ease-in-out infinite}
.n10-naik{animation:n10Denyut 2.4s ease-in-out infinite}
.n10-simpul{animation:n10Denyut 3.2s ease-in-out infinite}
.n10-centang{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .6s cubic-bezier(.16,1,.3,1)}
.n10.in .n10-centang{stroke-dashoffset:0;transition-delay:.55s}
@keyframes n10Denyut{0%,100%{opacity:.4}50%{opacity:1}}

.n10-jujur{
  margin-top:clamp(18px,2.2vw,26px);padding-top:16px;border-top:1px solid var(--border);
  font-size:13.5px;line-height:1.65;color:var(--text-dim);max-width:78ch
}
.n10-jujur b{color:var(--text)}

@media(max-width:640px){
  .n10-mark{gap:10px}
  .n10-rel{height:16px}
}
/* jaminan — kalimat yang bisa diperiksa sendiri, bukan lencana hiasan */
.n10-jaminan{
  list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 26px;margin-top:16px
}
@media(max-width:760px){.n10-jaminan{grid-template-columns:1fr}}
.n10-jaminan li{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.55;color:var(--text-dim)}
.n10-jaminan svg{
  width:15px;height:15px;flex:none;margin-top:3px;color:var(--accent);
  padding:0;border-radius:50%;box-shadow:0 0 0 1px color-mix(in oklab,var(--accent) 35%,transparent)
}
.n10-jaminan b{color:var(--text);font-weight:650}

@media(prefers-reduced-motion:reduce){
  .n10-rel>b{transition:none;transform:scaleX(1)}
  .n10-rel>i{transition:none}
  .n10-centang{transition:none;stroke-dashoffset:0}
  .n10-kilat,.n10-naik,.n10-simpul{animation:none;opacity:.8}
}

/* peta situs ringkas di kaki halaman — satu baris tautan ke SEMUA halaman,
   supaya perayap mesin pencari menemukan seluruh situs dari halaman mana pun */
.ft-peta{
  width:100%;padding:16px 0 2px;margin-top:4px;border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  font-size:13px;color:var(--text-low)
}
.ft-peta b{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-low)}
.ft-peta a{color:var(--text-dim);transition:color .2s}
.ft-peta a:hover{color:var(--accent)}

/* dua tautan berkas (sitemap.xml, robots.txt) di kolom kaki: bungkusnya jangan
   memutus tata letak kolom — pakai display:contents supaya keduanya tetap
   jadi anak langsung kolom, sementara kelas .only-file tetap bisa
   menyembunyikannya di dalam Artifact */
footer.ft .cols .only-file{display:contents}

/* ============================================================
   DUA ALASAN — webapp gratis vs skill berbayar
   Tiap poin dibuka satu kalimat yang langsung nyantol (metode BLINK),
   penjelasannya menyusul di baris kedua dengan warna lebih redup.
   ============================================================ */
.dua-alasan{display:grid;grid-template-columns:1fr 1.06fr;gap:clamp(14px,1.8vw,22px);align-items:start}
@media(max-width:900px){.dua-alasan{grid-template-columns:1fr}}
.dua-alasan>article{
  display:flex;flex-direction:column;gap:18px;position:relative;overflow:hidden;
  padding:clamp(20px,2.6vw,30px);border-radius:var(--r-l);
  background:color-mix(in oklab,var(--bg) 38%,var(--surface));
  border:1px solid var(--border);
}
.dua-alasan>article.utama{
  background:
    radial-gradient(84% 110% at 100% 0,color-mix(in oklab,var(--claude) 13%,transparent),transparent 60%),
    linear-gradient(158deg,color-mix(in oklab,var(--accent) 7%,var(--surface)),var(--surface));
  border-color:var(--border-hi);
  box-shadow:0 30px 80px -50px rgba(0,0,0,1);
}
.dua-alasan header{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.dua-alasan h3{font-size:clamp(20px,2.1vw,26px);line-height:1.14}
.da-sub{font-size:13.5px;color:var(--text-low);margin:0}
.da-tanda{
  display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:999px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
}
.da-tanda.gratis{background:color-mix(in oklab,var(--accent) 13%,transparent);color:var(--accent);border:1px solid var(--border-hi)}
.da-tanda.bayar{background:color-mix(in oklab,var(--claude) 15%,transparent);color:#eda184;border:1px solid color-mix(in oklab,var(--claude) 45%,transparent)}
.da-tanda .claude-mark{width:15px;height:15px}

.da-poin{list-style:none;display:flex;flex-direction:column;gap:0}
.da-poin li{
  display:grid;grid-template-columns:20px 1fr;gap:2px 11px;align-items:start;
  padding:13px 0;border-top:1px solid var(--border);
}
.da-poin li:first-child{border-top:0;padding-top:2px}
.da-poin li::before{
  content:"\2713";grid-row:1 / span 2;width:20px;height:20px;margin-top:4px;border-radius:50%;
  display:grid;place-items:center;font-size:11px;line-height:1;font-weight:700;
  color:var(--accent);background:color-mix(in oklab,var(--accent) 13%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--accent) 34%,transparent);
}
.dua-alasan .utama .da-poin li::before{color:var(--accent)}
.da-poin b{
  font-family:var(--display);font-size:clamp(15px,1.5vw,17.5px);font-weight:660;
  letter-spacing:-.015em;line-height:1.3;color:var(--text)
}
.da-poin span{font-size:13.5px;line-height:1.6;color:var(--text-dim)}
.dua-alasan .tombol-ket{margin-top:auto;align-items:stretch}
.dua-alasan .tombol-ket .btn{justify-content:center}
.dua-alasan .tombol-ket>small{text-align:center;white-space:normal}

/* tiga janji kecil yang menempel di bawah tombol ajakan */
.cta-poin{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;
  margin-top:-4px
}
.cta-poin li{
  display:flex;align-items:center;gap:6px;
  font-size:12px;color:var(--text-low);line-height:1.4
}
.cta-poin li::before{
  content:"\2713";width:14px;height:14px;flex:none;border-radius:50%;
  display:grid;place-items:center;font-size:9px;line-height:1;font-weight:700;
  color:var(--accent);background:color-mix(in oklab,var(--accent) 14%,transparent)
}
@media(max-width:520px){.cta-poin{justify-content:flex-start}}
.cta-poin.kiri{justify-content:flex-start;margin-top:2px}
.pita .cta-poin{margin-top:10px}

/* ============================================================
   SISTEM NADA WARNA — warna yang MENGAJAR, bukan menghias
   ------------------------------------------------------------
   Empat nada saja, dan semuanya sudah punya arti di dalam produk
   ini — jadi pengunjung belajar kodenya tanpa perlu diberi tahu:

     hitung  · mint    → uang yang tersisa · aman · jalan terus
     gerbang · kuning  → hati-hati · ada syarat yang harus lulus
     rugi    · merah   → laba tergerus · ditolak · jangan
     belajar · biru    → keterangan · bacaan · tenang, tidak mendesak
     skill   · jingga  → satu-satunya nada yang mengarah ke pemasangan

   Satu mekanisme untuk semua: tiap kartu cukup diberi data-nada,
   sisanya diurus variabel --nada.
   ============================================================ */
:root{
  --surface-3: #17303f;
  --kilau: inset 0 1px 0 color-mix(in oklab, #ffffff 5%, transparent);
  --kilau-kuat: inset 0 1px 0 color-mix(in oklab, #ffffff 9%, transparent);
}

[data-nada]{--nada:var(--accent)}
[data-nada="gerbang"]{--nada:var(--gate)}
[data-nada="rugi"]{--nada:var(--danger)}
[data-nada="belajar"]{--nada:var(--info)}
[data-nada="skill"]{--nada:var(--claude)}

/* dasar kartu bernada — tetap gelap, cuma dihangatkan oleh nadanya */
.card[data-nada], .rescard[data-nada], .knav[data-nada]{
  background:
    radial-gradient(120% 100% at 0 0, color-mix(in oklab, var(--nada) 9%, transparent), transparent 58%),
    linear-gradient(168deg, var(--surface-2), var(--surface) 62%);
  border-color:color-mix(in oklab, var(--nada) 22%, var(--border));
  box-shadow:var(--kilau);
}
/* rel warna di tepi kiri — penanda golongan yang terbaca sambil menggulir */
.rescard[data-nada]{position:relative;overflow:hidden;padding-left:23px}
.rescard[data-nada]::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(var(--nada), color-mix(in oklab, var(--nada) 25%, transparent));
  opacity:.75;transition:opacity .25s,width .25s;
}
.rescard[data-nada]:hover::after{opacity:1;width:4px}
.rescard[data-nada]:hover{
  border-color:color-mix(in oklab, var(--nada) 52%, transparent);
  box-shadow:var(--kilau-kuat), 0 22px 50px -30px rgba(0,0,0,.85),
             0 0 34px -18px color-mix(in oklab, var(--nada) 70%, transparent);
}
.rescard[data-nada] .meta{color:color-mix(in oklab, var(--nada) 72%, var(--text-low))}

.card[data-nada]::before{background:linear-gradient(90deg, var(--nada), transparent)}
.card[data-nada]:hover{
  border-color:color-mix(in oklab, var(--nada) 48%, transparent);
  box-shadow:var(--kilau-kuat), 0 26px 62px -32px rgba(0,0,0,.8),
             0 0 40px -20px color-mix(in oklab, var(--nada) 62%, transparent);
}

/* kartu navigasi beranda ikut bernada */
.knav[data-nada]::before{background:linear-gradient(90deg,var(--nada),transparent)}
.knav[data-nada]:hover{
  border-color:color-mix(in oklab, var(--nada) 50%, transparent);
  box-shadow:var(--kilau-kuat), 0 24px 52px -32px rgba(0,0,0,.85),
             0 0 38px -20px color-mix(in oklab, var(--nada) 62%, transparent);
}
.knav[data-nada] .pergi{color:var(--nada)}
.knav[data-nada] .ik{filter:drop-shadow(0 0 12px color-mix(in oklab,var(--nada) 45%,transparent))}

/* semua kartu polos ikut dapat kilau atas — bahan terasa memantulkan cahaya */
.card,.rescard,.calc,.layar,.pasang3,.n10,.dua-alasan>article{box-shadow:var(--kilau)}
.card:hover,.rescard:hover{box-shadow:var(--kilau-kuat), 0 24px 58px -32px rgba(0,0,0,.8)}

/* ============================================================
   PERJALANAN SUHU — dingin saat berpikir, hangat saat memutuskan
   ------------------------------------------------------------
   Bagian analitis (angka, referensi, diagnosa) dibiarkan sejuk supaya
   enak dibaca lama. Bagian yang mengarah ke keputusan dihangatkan
   pelan-pelan, sehingga tombol merahnya terasa sebagai UJUNG dari
   perjalanan — bukan iklan yang menyela di tengah bacaan.
   ============================================================ */
.zona-putus{position:relative;isolation:isolate}
.zona-putus::before{
  content:"";position:absolute;inset:-6% -20% -10%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(50% 60% at 50% 100%, color-mix(in oklab, var(--claude) 13%, transparent), transparent 72%),
    radial-gradient(60% 70% at 82% 10%, color-mix(in oklab, var(--danger) 7%, transparent), transparent 70%);
}
/* garis pengantar: terang di kiri, memudar ke kanan — mata diajak maju */
.zona-putus::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:-1;
  background:linear-gradient(90deg, color-mix(in oklab, var(--claude) 55%, transparent), transparent 62%);
}

/* judul bagian: rel pendek di depan mata — penanda "bagian baru dimulai" */
.head .eyebrow::after{
  content:"";display:inline-block;width:clamp(18px,3vw,42px);height:1px;margin-left:11px;
  vertical-align:middle;
  background:linear-gradient(90deg, color-mix(in oklab,var(--accent) 60%,transparent), transparent);
}

/* kalkulator bernada — kepala kartu memakai warna sesuai yang dijaganya,
   supaya delapan alat di halaman sepanjang ini tidak lagi terlihat kembar */
.calc[data-nada]{border-color:color-mix(in oklab,var(--nada) 20%,var(--border))}
.calc[data-nada]>header{
  background:
    linear-gradient(100deg, color-mix(in oklab,var(--nada) 12%,transparent), transparent 58%),
    color-mix(in oklab,var(--bg) 42%,transparent);
  border-bottom-color:color-mix(in oklab,var(--nada) 26%,var(--border));
}
.calc[data-nada]>header::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(var(--nada), color-mix(in oklab,var(--nada) 20%,transparent));
}
.calc[data-nada]>header{position:relative}
.calc[data-nada] .keycap{
  border-color:color-mix(in oklab,var(--nada) 55%,transparent);
  color:var(--nada);
  box-shadow:0 0 18px -6px color-mix(in oklab,var(--nada) 70%,transparent);
}
.calc[data-nada]:hover{box-shadow:var(--kilau-kuat),0 0 46px -26px color-mix(in oklab,var(--nada) 70%,transparent)}
/* pil pintasan di pembuka kokpit ikut mewarisi kode yang sama */
.hero .pill b{color:var(--accent)}

/* permukaan lain ikut memantulkan cahaya dari atas, supaya tidak ada bidang
   yang terlihat "belum selesai" di sebelah kartu yang sudah bernada */
.tipe article,.istilah article,.ruas,.acc,.knav,.n10-jalur a,.tangga3 .layar{box-shadow:var(--kilau)}
.tipe article,.istilah article{
  background:linear-gradient(168deg,var(--surface-2),var(--surface) 64%);
  transition:transform .26s cubic-bezier(.4,0,.2,1),border-color .26s,box-shadow .26s
}
.tipe article:hover,.istilah article:hover{
  transform:translateY(-3px);border-color:var(--border-hi);
  box-shadow:var(--kilau-kuat),0 22px 50px -32px rgba(0,0,0,.85),
             0 0 34px -20px var(--accent-glow)
}
.ruas{background:linear-gradient(168deg,var(--surface-2),var(--surface) 64%)}
.ruas:hover{box-shadow:var(--kilau-kuat),0 20px 46px -30px rgba(0,0,0,.8),0 0 32px -20px var(--accent-glow)}

/* ---------- pesan penutup bagian "sepi": satu paragraf yang mengajak maju ---------- */
.pesan-nlp{
  margin-top:clamp(18px,2.4vw,28px);padding:clamp(20px,2.6vw,30px);
  border-radius:var(--r-l);position:relative;overflow:hidden;
  background:
    radial-gradient(70% 120% at 0 0,color-mix(in oklab,var(--accent) 10%,transparent),transparent 60%),
    linear-gradient(160deg,var(--surface-2),var(--surface) 62%);
  border:1px solid var(--border-hi);box-shadow:var(--kilau)
}
.pesan-nlp>p{font-size:clamp(15px,1.45vw,18px);line-height:1.62;color:var(--text-dim);max-width:64ch}
.pesan-nlp>p b{color:var(--text)}

/* ---------- blok Diego (jual silang, produk terpisah) ---------- */
.diego{
  display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(20px,3vw,38px);align-items:center;
  padding:clamp(22px,3vw,38px);border-radius:var(--r-l);position:relative;overflow:hidden;
  background:
    radial-gradient(70% 110% at 100% 0,color-mix(in oklab,var(--gate) 12%,transparent),transparent 62%),
    linear-gradient(158deg,var(--surface-2),var(--surface) 64%);
  border:1px solid color-mix(in oklab,var(--gate) 28%,var(--border));
  box-shadow:var(--kilau)
}
@media(max-width:900px){.diego{grid-template-columns:1fr}}
.diego h2{font-size:clamp(21px,2.5vw,30px);margin:12px 0 12px}
.diego>div>p{color:var(--text-dim);font-size:15px;max-width:56ch}
.diego .eyebrow::after{background:linear-gradient(90deg,color-mix(in oklab,var(--gate) 60%,transparent),transparent)}
.diego .da-poin li::before{color:var(--gate);background:color-mix(in oklab,var(--gate) 13%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gate) 34%,transparent)}
.diego-kartu{
  padding:22px;border-radius:var(--r-m);
  background:color-mix(in oklab,var(--bg) 46%,transparent);
  border:1px solid color-mix(in oklab,var(--gate) 26%,transparent);box-shadow:var(--kilau)
}
.diego-tanda{
  display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.24em;
  color:var(--gate);padding:5px 12px;border-radius:999px;
  border:1px solid color-mix(in oklab,var(--gate) 42%,transparent);
  background:color-mix(in oklab,var(--gate) 12%,transparent)
}
.diego-kata{
  margin-top:14px;font-family:var(--display);font-size:clamp(16px,1.7vw,20px);
  font-weight:620;line-height:1.4;letter-spacing:-.015em;color:var(--text)
}