/* =========================================================
   CLAUDE PERCUMA UNTUK CIKGU — pusat muat turun
   Palet: krim + clay (oren Claude) + dakwat. Bayang keras.
   ========================================================= */
:root{
  --cream:#FAF8F3; --card:#FFFDF9; --ink:#1F1E1D; --muted:#6B6660;
  --clay:#D97757; --clay-deep:#B4522F; --clay-soft:#FBEDE5;
  --line:#E9E1D4; --peach:#F0D6C6; --sand:#EFE7DA;
  --green:#2FA36B; --violet:#7C5CE0; --lock:#A8A199;
  --shadow:6px 8px 0 var(--peach);
  --shadow-sm:4px 5px 0 var(--peach);
  --radius:18px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px}
body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  color:var(--ink);background:var(--cream);line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4{font-family:'Outfit',system-ui,sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1.1;text-wrap:balance}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
:focus-visible{outline:3px solid var(--clay);outline-offset:3px;border-radius:6px}

/* ---------- latar ---------- */
.bg-grid,.aurora{position:fixed;inset:0;z-index:0;pointer-events:none}
.bg-grid{
  background-image:linear-gradient(#EBE4D8 1px,transparent 1px),linear-gradient(90deg,#EBE4D8 1px,transparent 1px);
  background-size:46px 46px;opacity:.55;
}
.aurora::before,.aurora::after{
  content:"";position:absolute;width:54vw;height:54vw;max-width:700px;max-height:700px;
  border-radius:50%;filter:blur(95px);opacity:.45;
}
.aurora::before{background:radial-gradient(circle,rgba(217,119,87,.5),transparent 62%);top:-16vw;left:-12vw}
.aurora::after{background:radial-gradient(circle,rgba(124,92,224,.26),transparent 62%);bottom:-20vw;right:-14vw}

/* ---------- susun atur ---------- */
.wrap{max-width:1120px;margin:0 auto;padding:0 20px;position:relative;z-index:10}
.sec{position:relative;z-index:10;padding:clamp(46px,6vw,84px) 0}
.sec-head{max-width:760px;margin:0 auto clamp(28px,4vw,46px);text-align:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--clay-deep);margin-bottom:13px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--clay);border-radius:2px}
h2.big{font-size:clamp(27px,4.2vw,44px)}
.lede{margin-top:14px;font-size:clamp(15px,1.5vw,17px);color:var(--muted);text-wrap:pretty}

/* ---------- butang ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border-radius:13px;font-weight:700;font-size:15px;
  border:2px solid var(--ink);transition:transform .14s ease,box-shadow .14s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--clay);color:#fff;box-shadow:var(--shadow-sm)}
.btn-ghost{background:var(--card);color:var(--ink);box-shadow:var(--shadow-sm)}
.btn-dark{background:var(--ink);color:#FFF7F2;box-shadow:var(--shadow-sm)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 7px 0 var(--peach)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 2px 0 var(--peach)}
.btn-sm{padding:9px 15px;font-size:13.5px;border-radius:11px}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none!important}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:60;background:rgba(250,248,243,.86);backdrop-filter:blur(12px);border-bottom:2px solid var(--line)}
.top-in{max-width:1120px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:10px;font-family:'Outfit',sans-serif;font-weight:800;font-size:17px;letter-spacing:-.02em}
.brand-mark{width:32px;height:32px;border-radius:9px;background:var(--clay);display:grid;place-items:center;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--peach);flex:none}
.brand .by{color:var(--clay-deep)}
.top nav{display:flex;gap:20px;margin-left:auto;font-size:14.5px;font-weight:600;color:var(--muted)}
.top nav a:hover{color:var(--clay-deep)}
.top-act{display:flex;align-items:center;gap:9px;margin-left:auto}
.top nav+.top-act{margin-left:14px}
.lang{display:flex;border:2px solid var(--ink);border-radius:11px;overflow:hidden;box-shadow:3px 3px 0 var(--peach)}
.lang a{padding:6px 11px;font-size:12.5px;font-weight:700;background:var(--card)}
.lang a.on{background:var(--ink);color:#FFF7F2}
@media(max-width:900px){.top nav{display:none}}
@media(max-width:520px){.lang{display:none}.brand span.brand-name{font-size:15px}}

/* ---------- hero ---------- */
.hero{padding:clamp(44px,6.5vw,84px) 0 clamp(30px,4vw,50px);text-align:center}
.pill{
  display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:999px;
  background:var(--clay-soft);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--peach);
  font-size:12.5px;font-weight:700;color:var(--clay-deep);margin-bottom:20px;
}
h1.hero-t{font-size:clamp(32px,6vw,62px)}
h1.hero-t em{font-style:normal;color:var(--clay-deep);position:relative;white-space:nowrap}
h1.hero-t em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.24em;background:var(--peach);z-index:-1;border-radius:3px}
.hero p.lede{max-width:640px;margin:18px auto 0}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.hero-note{margin-top:14px;font-size:13px;color:var(--muted)}
.stats{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.stat{background:var(--card);border:2px solid var(--ink);border-radius:14px;box-shadow:var(--shadow-sm);padding:14px 20px;min-width:132px}
.stat b{display:block;font-family:'Outfit',sans-serif;font-size:26px;color:var(--clay-deep);line-height:1}
.stat>span{font-size:12.5px;color:var(--muted);font-weight:600}

/* ---------- kad umum ---------- */
.card{background:var(--card);border:2px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}

/* ---------- langkah ---------- */
.steps{counter-reset:s;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.step{position:relative;padding-top:30px}
.step::before{
  counter-increment:s;content:counter(s);position:absolute;top:-14px;left:20px;
  width:38px;height:38px;border-radius:11px;background:var(--ink);color:#FFF7F2;
  display:grid;place-items:center;font-family:'Outfit',sans-serif;font-weight:800;font-size:17px;
  border:2px solid var(--ink);box-shadow:3px 3px 0 var(--clay);
}
.step h3{font-size:18px;margin-bottom:7px}
.step p{font-size:14.5px;color:var(--muted)}

/* ---------- senarai muat turun ---------- */
.dl-list{display:grid;gap:14px}
.dl{
  background:var(--card);border:2px solid var(--ink);border-radius:16px;box-shadow:var(--shadow-sm);
  padding:18px 20px;display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;
}
.dl-ico{width:46px;height:46px;flex:none;border-radius:12px;display:grid;place-items:center;font-size:21px;border:2px solid var(--ink);background:var(--clay-soft)}
.dl-body{flex:1 1 260px;min-width:0}
.dl-body h3{font-size:17.5px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.dl-body p{font-size:14px;color:var(--muted);margin-top:5px}
.dl-meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:9px;font-size:12px;color:var(--muted);font-weight:600}
.dl-meta span{display:inline-flex;align-items:center;gap:5px}
.dl-act{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tag{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;border:2px solid var(--ink)}
.tag-free{background:#DEF5E9;color:#1D6B45}
.tag-lock{background:var(--sand);color:var(--lock)}
.dl.locked{opacity:.92;background:repeating-linear-gradient(135deg,#FFFDF9,#FFFDF9 12px,#FBF6EE 12px,#FBF6EE 24px)}
.dl.locked .dl-ico{background:var(--sand);filter:grayscale(.35)}

/* gerbang log masuk atas senarai */
.gate{
  border:2px dashed var(--clay);background:var(--clay-soft);border-radius:16px;
  padding:20px 22px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:20px;
}
.gate p{font-size:14.5px;flex:1 1 260px}
.gate b{display:block;font-family:'Outfit',sans-serif;font-size:17px;margin-bottom:3px}
.is-signed .gate{display:none}
.only-signed{display:none}
.is-signed .only-signed{display:block}
.is-signed .only-guest{display:none}

/* ---------- pratonton materi ---------- */
.prev{border:2px solid var(--ink);border-radius:16px;background:var(--card);box-shadow:var(--shadow-sm);overflow:hidden}
.prev-h{width:100%;text-align:left;padding:16px 18px;display:flex;align-items:center;gap:12px;font-weight:700;font-size:15.5px;background:var(--card)}
.prev-h .n{width:28px;height:28px;flex:none;border-radius:9px;background:var(--clay);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800;border:2px solid var(--ink)}
.prev-h .chev{margin-left:auto;transition:transform .2s ease;color:var(--clay-deep);font-size:18px}
.prev.open .chev{transform:rotate(180deg)}
.prev-b{display:none;padding:0 18px 20px;border-top:2px solid var(--line)}
.prev.open .prev-b{display:block}
.prev-b h4{margin:16px 0 6px;font-size:15px}
.prev-b p,.prev-b li{font-size:14.5px;color:#3A3733}
.prev-b ol,.prev-b ul{margin:8px 0 8px 20px;display:grid;gap:5px}
.promptbox{
  margin-top:12px;background:#FFF7F2;border:2px solid var(--peach);border-radius:12px;padding:13px 15px;
  font-family:'JetBrains Mono',monospace;font-size:12.8px;line-height:1.65;white-space:pre-wrap;color:#3A3733;
}
.copy{margin-top:9px}
.tipbox{margin-top:14px;background:#EEF7F3;border-left:5px solid var(--green);border-radius:10px;padding:12px 14px;font-size:14px}

/* ---------- upsell ---------- */
.upsell{
  background:linear-gradient(150deg,#FFF3EC,#FDE7DA);border:2px solid var(--ink);
  border-radius:22px;box-shadow:8px 10px 0 var(--peach);padding:clamp(26px,4vw,44px);text-align:center;
}
.upsell h2{font-size:clamp(25px,3.6vw,38px)}
.upsell p{max-width:600px;margin:14px auto 0;color:#4A453F;font-size:15.5px}
.upsell ul{list-style:none;display:grid;gap:9px;max-width:520px;margin:22px auto 0;text-align:left}
.upsell li{display:flex;gap:10px;align-items:flex-start;font-size:14.8px;font-weight:600}
.upsell li::before{content:"✓";flex:none;width:22px;height:22px;border-radius:7px;background:var(--green);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800;margin-top:1px}
.price{margin:26px 0 6px;font-family:'Outfit',sans-serif;font-weight:800;font-size:44px;line-height:1;color:var(--clay-deep)}
.price small{font-size:15px;color:var(--muted);font-weight:600;display:block;margin-top:6px;font-family:'Plus Jakarta Sans',sans-serif}

/* ---------- faq ---------- */
.faq{border-bottom:2px solid var(--line)}
.faq:first-child{border-top:2px solid var(--line)}
.faq button{width:100%;text-align:left;padding:17px 4px;display:flex;gap:12px;font-weight:700;font-size:15.5px}
.faq button .chev{margin-left:auto;color:var(--clay-deep)}
.faq p{display:none;padding:0 4px 18px;font-size:14.5px;color:var(--muted)}
.faq.open p{display:block}

/* ---------- footer ---------- */
footer{border-top:2px solid var(--line);background:#F6F2EA;padding:34px 0;position:relative;z-index:10}
footer .in{max-width:1120px;margin:0 auto;padding:0 20px;display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:space-between;font-size:13.5px;color:var(--muted)}

/* ---------- modal onboarding ---------- */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(31,30,29,.5);backdrop-filter:blur(4px)}
.modal.show{display:flex}
.modal-in{background:var(--card);border:2px solid var(--ink);border-radius:20px;box-shadow:8px 10px 0 var(--clay);max-width:460px;width:100%;padding:26px;max-height:92vh;overflow:auto}
.modal-in h3{font-size:22px}
.modal-in>p{font-size:14px;color:var(--muted);margin-top:7px}
.field{margin-top:15px}
.field label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
.field input,.field select{
  width:100%;padding:11px 13px;border:2px solid var(--ink);border-radius:11px;background:#fff;
  font:inherit;font-size:14.5px;color:var(--ink);
}
.field input:focus,.field select:focus{outline:none;box-shadow:3px 3px 0 var(--peach)}
.modal .row{display:flex;gap:10px;margin-top:20px}
.modal .row .btn{flex:1}
.hint{font-size:12px;color:var(--muted);margin-top:12px;text-align:center}

/* ---------- toast ---------- */
#toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:300;
  background:var(--ink);color:#FFF7F2;padding:12px 20px;border-radius:12px;font-size:14px;font-weight:600;
  opacity:0;pointer-events:none;transition:.25s ease;box-shadow:4px 5px 0 var(--clay);
}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- pengguna (dashboard) ---------- */
.userbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--card);border:2px solid var(--ink);border-radius:16px;box-shadow:var(--shadow-sm);padding:15px 18px;margin-bottom:26px}
.avatar{width:44px;height:44px;border-radius:12px;background:var(--clay);color:#fff;display:grid;place-items:center;font-family:'Outfit',sans-serif;font-weight:800;font-size:18px;border:2px solid var(--ink);flex:none;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.userbar .u b{display:block;font-family:'Outfit',sans-serif;font-size:16px}
.userbar .u span{font-size:13px;color:var(--muted)}
.userbar .sp{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:520px){.userbar .sp{margin-left:0;width:100%}}
.skel{color:var(--muted);font-size:14.5px;text-align:center;padding:26px}