/* ATLAS — gaya bersama untuk seluruh halaman */
:root{
  --bg:#000; --s1:#0c0c0c; --s2:#121212;
  --line:#242424; --line2:#343434;
  --ink:#fff; --ink2:#a8a8a8; --muted:#7a7a7a; --dim:#565656;
  --aksen:#5A63E8; --aksen2:#7a82ef;
  --disp:'Space Grotesk',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --lebar:1080px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);
     -webkit-font-smoothing:antialiased;line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--lebar);margin:0 auto;padding:0 24px}
section{padding:76px 0}
section.rapat{padding:52px 0}

/* --- bilah atas --- */
.bar{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.82);
     backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;gap:14px;height:64px}
.bar .logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.bar .logo b{font-family:var(--disp);font-size:16px;font-weight:600;letter-spacing:.24em}
.bar nav{margin-left:auto;display:flex;gap:26px;align-items:center}
.bar nav a{text-decoration:none;font-size:14px;color:var(--ink2)}
.bar nav a:hover{color:var(--ink)}
@media(max-width:720px){ .bar nav a.sembunyi-hp{display:none} }

/* --- teks --- */
h1{font-family:var(--disp);font-size:clamp(34px,6vw,60px);line-height:1.04;
   font-weight:700;letter-spacing:-.035em}
h2{font-family:var(--disp);font-size:clamp(25px,3.6vw,36px);line-height:1.12;
   font-weight:600;letter-spacing:-.028em}
h3{font-family:var(--disp);font-size:20px;font-weight:600;letter-spacing:-.015em}
p{color:var(--ink2)}
.lead{font-size:clamp(15px,2vw,18px);color:var(--ink2);max-width:62ch}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.2em;
         text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.tengah{text-align:center}
.tengah .lead{margin-left:auto;margin-right:auto}

/* --- tombol --- */
.tbl{display:inline-flex;align-items:center;justify-content:center;gap:9px;
     background:var(--aksen);color:#fff;text-decoration:none;font-weight:600;
     font-size:16px;padding:15px 30px;border-radius:10px;border:0;cursor:pointer;
     transition:background .15s}
.tbl:hover{background:var(--aksen2)}
.tbl.putih{background:#fff;color:#000}
.tbl.garis{background:transparent;border:1px solid var(--line2);color:var(--ink)}
.tbl.garis:hover{background:var(--s2)}
.tbl.penuh{width:100%}

/* --- kartu --- */
.kartu{border:1px solid var(--line);border-radius:14px;background:var(--s1);padding:26px}
.kartu.sorot{border-color:var(--aksen);background:#0f1024}
.kartu h3{margin-bottom:10px}
.kartu p{font-size:14.5px}

.kisi{display:grid;gap:18px}
.kisi.k2{grid-template-columns:repeat(2,1fr)}
.kisi.k3{grid-template-columns:repeat(3,1fr)}
.kisi.k4{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){ .kisi.k3,.kisi.k4{grid-template-columns:repeat(2,1fr)} }
@media(max-width:620px){ .kisi.k2,.kisi.k3,.kisi.k4{grid-template-columns:1fr} }

/* --- daftar bercentang --- */
.cek{list-style:none;display:flex;flex-direction:column;gap:13px}
.cek li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--ink2)}
.cek li b{color:var(--ink);font-weight:600}
.cek li:before{content:'';flex:0 0 20px;height:20px;border-radius:50%;margin-top:2px;
  background:var(--aksen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat}

/* --- harga --- */
.harga{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.harga .coret{font-family:var(--mono);font-size:17px;color:var(--dim);
              text-decoration:line-through}
.harga .kini{font-family:var(--disp);font-size:clamp(38px,6vw,52px);
             font-weight:700;letter-spacing:-.03em}
.harga .sekali{font-size:14px;color:var(--muted)}

/* --- tabel --- */
.tabel{width:100%;border-collapse:collapse;font-size:14.5px}
.tabel th,.tabel td{border:1px solid var(--line);padding:13px 15px;
                    text-align:left;vertical-align:top}
.tabel th{background:var(--s2);font-family:var(--mono);font-size:10.5px;
          letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:400}
.tabel td{color:var(--ink2)}
.tabel td b{color:var(--ink)}
.gulir{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* --- catatan --- */
.nota{border:1px solid var(--line);border-radius:12px;background:var(--s1);
      padding:18px 20px;display:flex;gap:14px;align-items:flex-start}
.nota .ik{flex:0 0 26px;height:26px;border-radius:50%;background:var(--s2);
          border:1px solid var(--line2);display:grid;place-items:center;
          font-size:13px;color:var(--ink2)}
.nota p{font-size:14.5px}
.nota.tegas{border-color:var(--line2);background:var(--s2)}

/* --- formulir --- */
.isian{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.isian label{font-size:14px;font-weight:500}
.isian small{font-size:12.5px;color:var(--muted)}
.isian input,.isian select{background:var(--s2);border:1px solid var(--line2);
  border-radius:9px;padding:13px 14px;color:var(--ink);font-size:15px;
  font-family:var(--body);width:100%}
.isian input:focus,.isian select:focus{outline:2px solid var(--aksen);outline-offset:1px}

/* --- angka dashboard --- */
.angka{border:1px solid var(--line);border-radius:12px;background:var(--s1);padding:20px 22px}
.angka .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
            text-transform:uppercase;color:var(--muted)}
.angka .val{font-family:var(--disp);font-size:32px;font-weight:700;
            letter-spacing:-.03em;margin-top:8px}
.angka .ket{font-size:13px;color:var(--muted);margin-top:4px}

/* --- kaki --- */
footer{border-top:1px solid var(--line);padding:34px 0;margin-top:20px}
footer .wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:center;
             font-size:13px;color:var(--dim)}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--ink)}

/* --- penyesuaian layar kecil --- */
@media(max-width:620px){
  section{padding:52px 0}
  .harga{gap:8px}
  .harga .coret{font-size:15px}
  h1{word-break:normal;overflow-wrap:break-word}
  .tbl{width:100%}
  .bar nav{gap:16px}
}

/* ============================================================
 *  PORTAL PEMBELI — tata letak menu samping
 * ============================================================ */

:root{ --sisi:248px; }

/* --- kerangka --- */
.app{display:flex;min-height:100vh}

.sisi{position:fixed;top:0;left:0;bottom:0;width:var(--sisi);z-index:60;
  background:var(--s1);border-right:1px solid var(--line);
  display:flex;flex-direction:column;overflow-y:auto}
.utama{flex:1;min-width:0;margin-left:var(--sisi)}

/* --- kepala menu samping --- */
.sisi-atas{display:flex;align-items:center;gap:11px;padding:20px 22px 18px;
  border-bottom:1px solid var(--line)}
.sisi-atas .nama{font-family:var(--disp);font-size:14.5px;font-weight:600;
  letter-spacing:.22em;line-height:1.1}
.sisi-atas .sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);margin-top:3px}

/* --- kelompok menu --- */
.sisi nav{padding:18px 12px 24px}
.grup{margin-bottom:22px}
.grup-judul{font-family:var(--mono);font-size:10px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--dim);padding:0 12px;margin-bottom:8px}

.menu{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:8px;
  text-decoration:none;color:var(--ink2);font-size:14.5px;line-height:1.3;
  position:relative;transition:background .13s,color .13s}
.menu:hover{background:var(--s2);color:var(--ink)}
.menu .mi{flex:none;width:19px;height:19px;display:block;color:var(--muted)}
.menu .mi svg{width:19px;height:19px;display:block}
.menu .mx{margin-left:auto;font-size:12px;color:var(--dim)}

.menu.kini{background:#15162e;color:var(--ink);font-weight:600}
.menu.kini .mi{color:var(--aksen2)}
.menu.kini::before{content:'';position:absolute;left:-12px;top:50%;transform:translateY(-50%);
  width:3px;height:19px;border-radius:0 3px 3px 0;background:var(--aksen)}
.menu.mati{opacity:.42;cursor:default}
.menu.mati:hover{background:none;color:var(--ink2)}

/* --- bilah atas halaman --- */
.atas{position:sticky;top:0;z-index:40;background:rgba(0,0,0,.86);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px;padding:0 30px;height:62px}
.atas h1{font-family:var(--disp);font-size:19px;font-weight:600;letter-spacing:-.015em;
  line-height:1.2}
.atas .ket{font-size:13px;color:var(--muted);margin-left:2px}

#tombolMenu{display:none;background:none;border:1px solid var(--line2);
  color:var(--ink);border-radius:8px;width:36px;height:36px;cursor:pointer;
  align-items:center;justify-content:center;flex:none;padding:0}
#tombolMenu svg{width:17px;height:17px}

#lapis{display:none;position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:55}
#lapis.tampil{display:block}

/* --- badan halaman --- */
.badan{padding:34px 30px 70px;max-width:920px}
.badan > h2:first-child{margin-bottom:6px}

/* --- kotak masuk (halaman masuk, tanpa menu samping) --- */
.kotak{max-width:420px;margin:0 auto}
.kotak .kartu{padding:32px}

/* --- formulir --- */
.baris{margin-bottom:18px}
.baris label{display:block;font-size:13px;font-weight:600;color:var(--ink);
  margin-bottom:7px;letter-spacing:.01em}
.baris .bantu{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.5}
.baris input,.baris select,.baris textarea{
  width:100%;background:var(--s2);border:1px solid var(--line2);color:var(--ink);
  font:inherit;font-size:15px;padding:12px 14px;border-radius:9px;outline:none}
.baris input:focus,.baris select:focus,.baris textarea:focus{border-color:var(--aksen)}
.baris input::placeholder,.baris textarea::placeholder{color:var(--dim)}
.baris textarea{resize:vertical;min-height:78px}
.baris input.mono{font-family:var(--mono);letter-spacing:.06em}

/* --- pesan --- */
.pesan{display:none;font-size:14px;padding:11px 14px;border-radius:9px;margin-bottom:18px;
  line-height:1.5}
.pesan.tampil{display:block}
.pesan.salah{background:#2a1113;border:1px solid #5c2226;color:#ffb3b8}
.pesan.benar{background:#0f2318;border:1px solid #1f4d33;color:#9be7bb}
.pesan.info{background:var(--s2);border:1px solid var(--line2);color:var(--ink2)}

/* --- daftar materi --- */
.materi{display:grid;gap:13px}
.mat{display:flex;align-items:flex-start;gap:16px;border:1px solid var(--line);
  border-radius:13px;background:var(--s1);padding:18px 20px;text-decoration:none;
  transition:border-color .15s,background .15s}
.mat:hover{border-color:var(--line2);background:var(--s2)}
.mat .ikon{flex:none;width:42px;height:42px;border-radius:10px;display:grid;
  place-items:center;font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.06em;background:#191a33;color:var(--aksen2);border:1px solid #262848}
.mat .ikon.ppt{background:#2a1a10;color:#e0a06a;border-color:#40281a}
.mat .ikon.vid{background:#2a1116;color:#e07a90;border-color:#40202a}
.mat .isi{flex:1;min-width:0}
.mat .judul{font-weight:600;font-size:15.5px;color:var(--ink);margin-bottom:3px}
.mat .ket{font-size:13.5px;color:var(--ink2);line-height:1.5}
.mat .panah{flex:none;color:var(--dim);font-size:19px;align-self:center}

.kelompok{margin-bottom:32px}
.kelompok > h3{margin-bottom:14px;display:flex;align-items:center;gap:12px;
  font-size:16px}
.kelompok > h3::after{content:'';flex:1;height:1px;background:var(--line)}

/* --- video --- */
.video{max-width:720px;position:relative;padding-top:min(56.25%,405px);
  border-radius:13px;overflow:hidden;border:1px solid var(--line);
  background:var(--s1);margin-bottom:10px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* --- kotak info kecil --- */
.info-kv{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;font-size:14px}
.info-kv dt{color:var(--muted)}
.info-kv dd{color:var(--ink);font-family:var(--mono);font-size:13.5px}

.muat{text-align:center;color:var(--muted);font-size:14px;padding:44px 0}

/* --- layar kecil: menu samping jadi laci --- */
@media(max-width:860px){
  .sisi{transform:translateX(-100%);transition:transform .22s ease}
  .sisi.buka{transform:none}
  .utama{margin-left:0}
  #tombolMenu{display:flex}
  .atas{padding:0 18px}
  .badan{padding:26px 18px 60px}
  .mat{padding:16px}
  .mat .ikon{width:36px;height:36px;font-size:9.5px}
}