/* Berkas ini dirakit otomatis oleh: php artisan ui:build
   Jangan disunting langsung. Sunting potongannya di public/assets/parts/ */

/* ==== 00-fondasi.css ==== */
/* ============================================================
   ENGLISH ACADEMY — RUANG BELAJAR
   Arah desain: laboratorium yang terang, bukan kokpit yang gelap.

   Kesan maju di sini dikejar lewat PRESISI, bukan lewat gelap atau
   neon: kanvas putih kebiruan yang dingin, garis 1px yang lurus,
   angka yang sejajar, kisi kelipatan delapan, dan data yang dicetak
   dengan huruf mono seperti angka pada alat ukur.

   Halaman ini dipakai orang untuk belajar berjam-jam, jadi latarnya
   tetap terang. Yang membedakannya dari kertas biasa adalah suhu
   warnanya yang dingin dan disiplin kisinya.

   Tiga peran huruf: serif untuk judul, Inter untuk antarmuka,
   JetBrains Mono untuk segala yang berupa data.
   ============================================================ */

/* ---------- HURUF ---------- */
/* Source Serif 4, huruf editorial dengan dua sumbu: berat dan optical size.
   Sumbu opsz itu yang membuatnya terasa mahal — pada ukuran judul besar
   kontras tebal-tipisnya menajam dan serifnya meruncing, sementara pada
   ukuran isi artikel bentuknya melebar dan menebal supaya tetap nyaman
   dibaca. Satu berkas menggantikan empat berkas statis.
   Inter tetap dipakai untuk antarmuka. */
@font-face{
  font-family:'Source Serif 4';font-style:normal;font-weight:400 700;
  font-display:swap;src:url('fonts/source-serif-4.woff2') format('woff2-variations')
}
@font-face{
  font-family:'Source Serif 4';font-style:italic;font-weight:400 700;
  font-display:swap;src:url('fonts/source-serif-4-italic.woff2') format('woff2-variations')
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;
  font-display:swap;src:url('fonts/jetbrains-mono.woff2') format('woff2-variations')
}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/inter-800.woff2') format('woff2')}

:root{
  /* ---- Permukaan: putih kebiruan yang dingin, bukan krem hangat.
         Pergeseran suhu warna inilah yang mengubah kesannya dari
         kertas lama jadi permukaan alat yang bersih. ---- */
  --paper:#f6f8fc;          /* kanvas halaman */
  --paper-2:#eaeff8;        /* bidang selang-seling */
  --surface:#ffffff;        /* panel dan kartu */

  /* ---- Tinta. Angka di komentar adalah rasio terhadap kanvas ---- */
  --ink:#0d1526;            /* teks utama, 17,1:1 */
  --ink-2:#4a5568;          /* teks pendukung, 7,1:1 */
  --ink-3:#616b7d;          /* keterangan kecil, 5,1:1 (4,6:1 di bidang selang) */

  /* ---- Garis: pemisah bidang, bersuhu dingin seperti kanvasnya ---- */
  --line:#d3dbe9;
  --line-2:#b8c3d6;

  /* Nila: warna lembaga, diambil dari logo */
  --nila:#1f3864;
  --nila-tua:#16294a;
  --nila-muda:#33518a;
  --nila-kabut:#e8edf9;
  /* Sian dipakai khusus untuk angka dan penanda data. Ia satu-satunya
     warna baru di sistem ini, dan sengaja dibatasi ke sana saja. */
  --sian:#0e7490;           /* 5,0:1 di kanvas, aman untuk teks kecil */
  --sian-kabut:#e0f2f7;

  /* Amber: satu aksen, dipakai untuk ajakan dan penanda */
  --amber:#e9a93a;
  --amber-tua:#8a5b00;      /* aman untuk teks di kertas, 5.4:1 */
  --amber-kabut:#fdf3e0;

  /* Semantik */
  --hijau:#1f6b47; --hijau-kabut:#e8f3ec;
  --merah:#a3341f; --merah-kabut:#fbeeea;

  /* Bentuk: sudut dipertajam dari versi kertas supaya terbaca sebagai
     komponen alat, bukan kartu cetak. */
  --r-1:5px;                /* kendali: tombol, input */
  --r-2:7px;                /* panel */
  --r-3:2px;                /* penanda kecil */
  --garis:1px solid var(--line);

  /* Bayangan dipakai sangat hemat, hanya untuk mengangkat saat disentuh */
  --naik:0 10px 30px rgba(16,25,43,.09);
  --naik-halus:0 2px 6px rgba(16,25,43,.05);

  /* Irama */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  --font-judul:'Source Serif 4',Georgia,'Times New Roman',serif;
  /* Optical size otomatis mengikuti ukuran render: judul jadi tajam,
     isi artikel jadi lapang. */
  font-optical-sizing:auto;
  --font-ui:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  /* Apa pun yang berupa data memakai huruf ini: label bagian, kategori,
     kode, satuan, tanggal, dan angka yang berjajar. */
  --font-data:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --gerak:160ms cubic-bezier(.2,.6,.3,1);

  /* Nama lama dipertahankan supaya kelas warisan tidak pecah */
  --navy:var(--nila); --navy2:var(--nila); --blue:var(--nila-muda);
  --gold:var(--amber); --gold2:var(--amber); --gold-soft:var(--amber-kabut);
  --ink-legacy:var(--ink); --mut:var(--ink-2); --bg:var(--paper);
  --card:var(--surface); --r:var(--r-2);
  --shadow:var(--naik-halus);
  --font-display:var(--font-judul); --font-body:var(--font-ui);
  --font-mono:var(--font-data);
}

/* ---------- DASAR ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-ui);
  background:var(--paper);
  color:var(--ink);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
svg{display:block}

h1,h2,h3,h4{font-family:var(--font-judul);font-weight:600;line-height:1.12;letter-spacing:-.011em;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(2.35rem,1.55rem + 3.1vw,4rem);line-height:1.05;letter-spacing:-.022em}
h2{font-size:clamp(1.6rem,1.24rem + 1.35vw,2.3rem)}
h3{font-size:clamp(1.12rem,1.02rem + .42vw,1.35rem);line-height:1.25}
h4{font-size:1.02rem}

p{text-wrap:pretty}

/* Tautan bergaris bawah tipis: bahasa penerbitan, bukan tombol biru */
a{color:var(--nila);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;text-decoration-color:var(--line-2);transition:text-decoration-color var(--gerak),color var(--gerak)}
a:hover{text-decoration-color:var(--amber-tua);color:var(--nila-tua)}

::selection{background:var(--amber-kabut);color:var(--ink)}

/* ---------- KERANGKA ---------- */
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:720px}
.section{padding:var(--s8) 0}
.section-alt{background:var(--paper-2);border-block:var(--garis)}
@media(max-width:700px){
  .section{padding:var(--s7) 0}
  .wrap{padding:0 18px}
}

.grid{display:grid;gap:var(--s5)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.bs-2{grid-column:span 2}
.bs-4{grid-column:span 4}
@media(max-width:940px){.g3,.g4{grid-template-columns:repeat(2,1fr)}.bs-2,.bs-4{grid-column:auto}}
@media(max-width:620px){.g3,.g4{grid-template-columns:1fr}}

/* ---------- KEPALA BAGIAN ---------- */
/* Tanda khas situs ini: kata kunci kecil, lalu garis rambut yang
   memanjang sampai ujung kolom. Struktur terbaca sebelum teks dibaca. */
/* Label bagian dicetak mono dan didahului satu garis pendek, seperti
   penanda kanal pada alat ukur. Ini penanda visual paling khas tema ini. */
.sec-eyebrow,.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-data);font-size:11px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--amber-tua);
}
.sec-eyebrow::before,.eyebrow::before{
  content:"";width:14px;height:2px;background:var(--amber);flex:none
}
.sec-head{margin-bottom:var(--s6)}
.sec-head h2{margin-top:var(--s2)}
.sec-head p{color:var(--ink-2);margin-top:var(--s3);max-width:62ch}
.sec-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s5);margin-bottom:var(--s6);flex-wrap:wrap}
.sec-head-row h2{margin-top:var(--s2)}
.sec-head::after,.sec-head-row::after{content:"";display:block;height:1px;background:var(--line);margin-top:var(--s5);grid-column:1/-1;width:100%}
.sec-head-row::after{order:9}

/* ---------- TOMBOL ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-ui);font-size:15px;font-weight:600;line-height:1;
  padding:13px 20px;min-height:46px;border-radius:var(--r-1);
  border:1px solid transparent;background:none;color:var(--ink);
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background var(--gerak),border-color var(--gerak),color var(--gerak),transform var(--gerak);
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}

.btn-gold{background:var(--amber);color:var(--ink);border-color:#d9982b}
.btn-gold:hover{background:#f0b752;color:var(--ink)}

.btn-navy{background:var(--nila);color:#fff;border-color:var(--nila)}
.btn-navy:hover{background:var(--nila-tua);color:#fff}

.btn-line,.btn-outline{background:var(--surface);border-color:var(--line-2);color:var(--ink)}
.btn-line:hover,.btn-outline:hover{border-color:var(--nila);color:var(--nila)}

.btn-ghost{background:none;border-color:transparent;color:var(--ink-2)}
.btn-ghost:hover{color:var(--ink);background:rgba(16,25,43,.05)}

.btn-sm-card{padding:9px 14px;min-height:38px;font-size:13.5px}
.btn-magnet{position:relative}
/* Tombol akun di bilah navigasi. Kelas ini berdiri sendiri (tidak
   menumpang .btn), jadi seluruh aturan tata letaknya ditulis lengkap di
   sini — dulu panahnya jatuh ke baris kedua karena aturan ini setengah jadi. */
.btn-cta-nav{
  display:inline-flex;align-items:center;gap:7px;flex:none;white-space:nowrap;
  font-family:var(--font-ui);font-size:14px;font-weight:600;line-height:1;
  padding:0 15px;height:38px;border-radius:var(--r-1);
  background:var(--amber);color:var(--ink);border:1px solid #d9982b;
  text-decoration:none;transition:background var(--gerak)
}
.btn-cta-nav:hover{background:#f0b752;text-decoration:none;color:var(--ink)}
.btn-cta-nav .ic{width:15px;height:15px}

/* ---------- PENANDA ---------- */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-data);font-size:11px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;border:var(--garis);background:var(--surface);color:var(--ink-2);
}
.chip-navy{background:var(--nila-kabut);border-color:#dbe1ee;color:var(--nila)}
.chip-gold{background:var(--amber-kabut);border-color:#f0e0bf;color:var(--amber-tua)}
.chip-green-soft{background:var(--hijau-kabut);border-color:#cfe6d9;color:var(--hijau)}
.chip-soon{background:var(--paper-2);border-color:var(--line-2);color:var(--ink-2)}
.cat-pill{
  display:inline-flex;align-items:center;padding:8px 15px;border-radius:999px;
  border:var(--garis);background:var(--surface);color:var(--ink-2);
  font-size:13.5px;font-weight:600;text-decoration:none;transition:all var(--gerak)
}
.cat-pill:hover{border-color:var(--nila);color:var(--nila)}
.cat-pill.on,.cat-pill[aria-current="true"]{background:var(--nila);border-color:var(--nila);color:#fff}
.cat-row{display:flex;flex-wrap:wrap;gap:9px}

/* ---------- KARTU ---------- */
/* Tanpa kaca, tanpa cahaya. Bidang putih di atas kertas, dibatasi garis. */
.card{
  position:relative;background:var(--surface);border:var(--garis);
  border-radius:var(--r-2);padding:var(--s5)
}
/* Tanda sudut: dua garis 1px sepanjang 11px di kiri atas. Kecil, tapi
   inilah yang membuat panel terbaca sebagai bagian dari alat ukur. */
.card::before{
  content:"";position:absolute;top:-1px;left:-1px;width:11px;height:11px;
  border-top:1.5px solid var(--amber);border-left:1.5px solid var(--amber);
  border-top-left-radius:var(--r-2);pointer-events:none
}
.card-link{display:block;text-decoration:none;color:inherit;transition:border-color var(--gerak),box-shadow var(--gerak),transform var(--gerak)}
.card-link:hover{border-color:var(--line-2);box-shadow:var(--naik);transform:translateY(-2px);text-decoration:none}

.icon-chip{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:var(--r-1);
  background:var(--nila-kabut);color:var(--nila);border:1px solid #dbe1ee;flex:none
}

/* ---------- KARTU TULISAN ---------- */
.post-card{
  display:flex;flex-direction:column;background:var(--surface);
  border:var(--garis);border-radius:var(--r-2);overflow:hidden;
  text-decoration:none;color:inherit;height:100%;
  transition:border-color var(--gerak),box-shadow var(--gerak),transform var(--gerak)
}
.post-card:hover{border-color:var(--line-2);box-shadow:var(--naik);transform:translateY(-2px);text-decoration:none}
.post-thumb{aspect-ratio:16/9;overflow:hidden;background:var(--paper-2);border-bottom:var(--garis)}
.post-thumb img{width:100%;height:100%;object-fit:cover;transition:transform 400ms cubic-bezier(.2,.6,.3,1)}
.post-card:hover .post-thumb img{transform:scale(1.03)}
.post-body{padding:var(--s5);display:flex;flex-direction:column;gap:9px;flex:1}
.post-cat{
  font-family:var(--font-data);font-size:10.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber-tua)
}
.post-body h3{font-size:1.14rem;line-height:1.28}
.post-body p{color:var(--ink-2);font-size:14.5px;line-height:1.6}
.post-meta{
  display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
  margin-top:auto;padding-top:var(--s3);border-top:var(--garis);
  font-size:11.5px;color:var(--ink-3);font-family:var(--font-data);font-variant-numeric:tabular-nums
}
.post-mini{display:flex;gap:var(--s3);align-items:flex-start}
.post-feature{grid-column:span 2}
@media(max-width:940px){.post-feature{grid-column:auto}}

/* ---------- TEKS PENDUKUNG ---------- */
.muted-text{color:var(--ink-2);font-size:14.5px}
.stat-label{font-size:12.5px;color:var(--ink-3);font-family:var(--font-ui)}
.empty-note{color:var(--ink-2);padding:var(--s6) 0;text-align:center}
.dot{width:5px;height:5px;border-radius:50%;background:var(--amber);display:inline-block;flex:none}

/* ---------- IKON ---------- */
.ic{width:22px;height:22px;flex:none;stroke-width:1.8}
.ic-s{width:17px;height:17px;flex:none;stroke-width:1.9}

/* ---------- FORMULIR ---------- */
input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],input[type=url],select,textarea,.fill-input{
  width:100%;font-family:var(--font-ui);font-size:15.5px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-1);
  padding:12px 14px;min-height:46px;transition:border-color var(--gerak),box-shadow var(--gerak)
}
/* Jangan menulis outline:none di sini. Aturan itu dulu mematikan tepi fokus
   :focus-visible untuk SEMUA isian di situs; di kertas putih kehilangannya
   tertutupi oleh tepi nila, tapi di kaki halaman yang berlatar nila-tua
   tepinya ikut hilang sehingga fokus jadi benar-benar tak terlihat. */
input:focus,select:focus,textarea:focus{border-color:var(--nila);box-shadow:0 0 0 3px rgba(31,56,100,.13)}
input::placeholder,textarea::placeholder{color:var(--ink-2)}
label{font-family:var(--font-ui)}
.auth-field{display:block;margin-bottom:var(--s4)}
.auth-field span{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:7px}
.opt-label{
  display:flex;align-items:center;gap:11px;padding:14px 16px;
  border:1px solid var(--line-2);border-radius:var(--r-1);background:var(--surface);
  cursor:pointer;transition:border-color var(--gerak),background var(--gerak)
}
.opt-label:hover{border-color:var(--nila)}
.opt-label input{width:auto;min-height:0}
.opt-list{display:flex;flex-direction:column;gap:10px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ---------- UMPAN BALIK ---------- */
.quiz-feedback{
  padding:14px 16px;border-radius:var(--r-1);border:var(--garis);
  background:var(--nila-kabut);color:var(--ink);font-size:14.5px
}
.quiz-feedback.good,.good{background:var(--hijau-kabut);border-color:#cfe6d9;color:#155034}
.quiz-feedback.bad,.bad{background:var(--merah-kabut);border-color:#efd4cc;color:#7d2716}
.foot-ok{color:#bfe3cf;font-size:12.5px;margin-top:var(--s2)}
.foot-err{color:#f3b5a5;font-size:12.5px;margin-top:var(--s2)}

/* ---------- BILAH KEMAJUAN ---------- */
.bar{height:7px;background:var(--paper-2);border-radius:999px;overflow:hidden;border:1px solid var(--line)}
.bar i{display:block;height:100%;background:var(--nila);border-radius:999px;transition:width 500ms cubic-bezier(.2,.6,.3,1)}

/* ---------- LANGKAH ---------- */
.path-step{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:var(--garis)}
.path-step:last-child{border-bottom:none}
.path-ic{width:26px;height:26px;border-radius:50%;background:var(--nila-kabut);color:var(--nila);
  display:inline-flex;align-items:center;justify-content:center;flex:none;border:1px solid #dbe1ee}

/* ---------- PITA PENGUMUMAN ---------- */
/* Muncul di atas bilah navigasi saat ada kuis berhadiah yang berjalan.
   Sebelumnya markahnya dirender tanpa satu pun aturan gaya. */
.announce{background:var(--nila-tua);color:#e7ecf5;font-family:var(--font-ui);font-size:13.5px}
.announce-in{display:flex;align-items:center;gap:10px;padding-block:9px;flex-wrap:wrap}
.announce-in b{color:#fff;font-weight:600}
.announce-in>span:not(.announce-dot){min-width:0}
.announce-in a{margin-left:auto;color:var(--amber);font-weight:600;text-decoration:none;white-space:nowrap}
.announce-in a:hover{color:#f3c274;text-decoration:underline;text-underline-offset:.2em}
.announce-dot{width:7px;height:7px;border-radius:50%;background:var(--amber);flex:none}
.announce-close{
  flex:none;width:30px;height:30px;line-height:1;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:1px solid rgba(255,255,255,.22);border-radius:var(--r-1);
  color:#e7ecf5;font-size:17px;cursor:pointer;transition:border-color var(--gerak),background var(--gerak)
}
.announce-close:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4)}
.announce :focus-visible{outline-color:var(--amber)}
@media(max-width:620px){
  .announce-in a{margin-left:0;order:3;width:100%}
  .announce-close{position:absolute;right:18px;top:6px}
  .announce-in{position:relative;padding-right:38px}
  /* Titik penanda hanya hiasan, dan di layar sempit ia tertinggal sendirian
     di baris pertama karena teksnya turun ke baris berikutnya. */
  .announce-dot{display:none}
}

/* ---------- NAVIGASI ---------- */
/* Bilah rata, menempel di atas kertas, dipisah garis. Bukan pil melayang. */
.site-nav{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:var(--garis)}
.nav-shell{display:flex;align-items:center;gap:var(--s5);padding:14px 0;min-height:70px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;flex:none}
.logo-mark{width:38px;height:38px;flex:none}
.logo-text b{display:block;font-family:var(--font-judul);font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--ink);line-height:1.1}
.logo-text small{display:block;font-family:var(--font-ui);font-size:9.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3)}
.menu{display:flex;align-items:center;gap:var(--s2);margin-left:auto}
.menu>a,.nav-drop{
  font-family:var(--font-ui);font-size:14.5px;font-weight:600;color:var(--ink-2);
  text-decoration:none;padding:9px 12px;border-radius:var(--r-1);border:1px solid transparent;
  background:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  transition:color var(--gerak),background var(--gerak)
}
.menu>a:hover,.nav-drop:hover{color:var(--ink);background:rgba(16,25,43,.05);text-decoration:none}
.menu>a.active,.nav-drop.active{color:var(--nila)}
.menu>a.active{box-shadow:inset 0 -2px 0 var(--amber)}
.nav-item{position:relative}
.caret{width:14px;height:14px;opacity:.6}
.nav-cari{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r-1);color:var(--ink-2)}
.nav-cari:hover{background:rgba(16,25,43,.05);color:var(--ink)}
.lang-switch{
  font-family:var(--font-ui);font-size:12px;font-weight:700;letter-spacing:.06em;
  padding:9px 12px;border:1px solid var(--line-2);border-radius:var(--r-1);
  color:var(--ink-2);text-decoration:none
}
.lang-switch:hover{border-color:var(--nila);color:var(--nila)}
.nav-burger{display:none;width:44px;height:44px;border:1px solid var(--line-2);border-radius:var(--r-1);background:var(--surface);cursor:pointer;flex-direction:column;gap:4px;align-items:center;justify-content:center}
.nav-burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform var(--gerak),opacity var(--gerak)}
.nav-burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Menu besar.
   Pergeseran mendatar disimpan di --geser supaya animasi buka-tutup hanya
   menyentuh sumbu tegak. Sebelumnya keadaan terbuka memakai translateY saja,
   sehingga pemusatan hilang dan panelnya melompat 280px ke kanan. */
.has-mega:hover .mega,.has-mega:focus-within .mega,.has-mega.open .mega{opacity:1;visibility:visible;transform:translate(var(--geser),0)}
.mega{
  --geser:-50%;
  position:absolute;top:calc(100% + 10px);left:50%;transform:translate(var(--geser),6px);
  width:min(560px,88vw);background:var(--surface);border:var(--garis);border-radius:var(--r-2);
  box-shadow:var(--naik);padding:var(--s4);opacity:0;visibility:hidden;
  transition:opacity var(--gerak),transform var(--gerak),visibility var(--gerak);z-index:70
}
/* Kelompok menu terakhir duduk paling dekat tepi kanan. Panelnya disandarkan
   ke kanan supaya tidak menonjol keluar halaman dan memunculkan gulir mendatar. */
.menu>.has-mega:last-of-type>.mega{--geser:0;left:auto;right:0}
.mega-link{display:flex;gap:12px;align-items:flex-start;padding:11px;border-radius:var(--r-1);text-decoration:none;color:inherit;transition:background var(--gerak)}
.mega-link:hover{background:var(--paper-2);text-decoration:none}
.mega-ic{width:34px;height:34px;border-radius:var(--r-1);background:var(--nila-kabut);color:var(--nila);display:inline-flex;align-items:center;justify-content:center;flex:none;border:1px solid #dbe1ee}
.mega-tx b{display:block;font-size:14.5px;font-weight:600;color:var(--ink)}
.mega-tx span,.mega-sm{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.45}
.mega-foot{display:flex;gap:8px;align-items:center;margin-top:var(--s3);padding-top:var(--s3);border-top:var(--garis);font-size:12.5px;color:var(--ink-2)}

/* Panel seluler.
   Nilai top-nya diisi site.js dari tepi bawah bilah navigasi yang sedang
   terlihat, karena tinggi bilah berubah saat ada pita pengumuman atau saat
   halaman digulir. Angka 70px di sini hanya cadangan bila JavaScript mati. */
.mobile-panel{
  position:fixed;top:70px;right:0;bottom:0;left:0;background:var(--paper);z-index:55;
  padding:var(--s5) 24px;overflow-y:auto;display:none
}
.mobile-panel.open{display:block}
.mobile-links{display:flex;flex-direction:column}
.mobile-links a{
  font-family:var(--font-ui);font-size:16px;font-weight:600;color:var(--ink);
  text-decoration:none;padding:15px 0;border-bottom:var(--garis)
}
.mob-cta{margin-top:var(--s5);display:flex;flex-direction:column;gap:10px}
@media(max-width:1000px){
  .menu{display:none}
  .nav-burger{display:flex}
  .nav-shell{gap:var(--s3)}
  /* Menu teks disembunyikan, jadi margin otomatisnya pindah ke tombol akun
     supaya tombol dan burger menempel rapi di tepi kanan. */
  .btn-cta-nav{margin-left:auto}
}
/* Di layar sempit barisnya harus muat: logo, satu tombol, lalu tombol menu.
   Slogan kecil di bawah nama dan ikon panah pada tombol dilepas dulu supaya
   tombol menu tidak terdorong ke luar layar. */
@media(max-width:560px){
  .nav-shell{gap:10px}
  .logo{min-width:0;gap:9px}
  .logo-text small{display:none}
  .logo-text b{font-size:17px}
  .btn-cta-nav{padding:0 12px;font-size:13.5px;height:36px}
  .btn-cta-nav .ic{display:none}
  .nav-burger{width:40px;height:40px}
}
/* Ponsel paling kecil: tautan akun tetap tersedia di dalam panel menu. */
@media(max-width:379px){
  .btn-cta-nav{display:none}
}

/* ---------- KAKI HALAMAN ---------- */
/* Kolofon: blok nila pekat dengan garis pemisah, seperti halaman terakhir buku. */
.site-footer{background:var(--nila-tua);color:#c9d3e4;margin-top:var(--s9);border-top:3px solid var(--amber)}
.site-footer a{color:#c9d3e4;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:.2em}
/* Elemen ini memakai .wrap sekaligus .foot-grid. Jarak tegaknya ditulis dengan
   padding-block supaya jarak tepi milik .wrap tidak ikut terhapus — kalau
   dihapus, isi kaki halaman menempel ke tepi layar di ponsel. */
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.4fr;gap:var(--s6);padding-block:var(--s8) var(--s7)}
.foot-brand b{font-family:var(--font-judul);font-size:20px;color:#fff;display:block;margin-bottom:10px}
.foot-h{font-family:var(--font-ui);font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#8fa0bd;margin-bottom:var(--s3)}
.foot-grid>div>a{display:block;padding:5px 0;font-size:14.5px}
.foot-news{display:flex;gap:8px;margin-top:var(--s3)}
.foot-news input{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);color:#fff;min-height:42px}
.foot-news input::placeholder{color:#8fa0bd}
.foot-news button{background:var(--amber);color:var(--ink);border:none;border-radius:var(--r-1);padding:0 16px;font-family:var(--font-ui);font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap}
.foot-base{border-top:1px solid rgba(255,255,255,.12);padding-block:var(--s5);font-size:13px;color:#8fa0bd;display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
@media(max-width:940px){.foot-grid{grid-template-columns:1fr 1fr;gap:var(--s5)}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* ---------- KEPALA HALAMAN DALAM ---------- */
.bloghead{background:var(--paper-2);border-bottom:var(--garis);padding:var(--s8) 0 var(--s7)}
.bloghead h1{margin-top:var(--s3)}
.bloghead p{color:var(--ink-2);margin-top:var(--s3);max-width:60ch;font-size:17px}

/* ---------- REMAH ---------- */
.crumbs{font-family:var(--font-ui);font-size:13px;color:var(--ink-3);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--nila);text-decoration:underline}
.crumbs span{color:var(--line-2)}

/* ---------- BADAN ARTIKEL ---------- */
/* Dibaca dengan serif: ukuran 19px, ukuran baris 68 karakter. */
.article-body{font-family:var(--font-judul);font-size:19.5px;line-height:1.75;color:#1b2438;max-width:68ch}
.article-body p{margin:0 0 1.1em}
.article-body h2{font-size:1.62rem;margin:1.9em 0 .55em}
.article-body h3{font-size:1.28rem;margin:1.6em 0 .45em}
.article-body ul,.article-body ol{margin:0 0 1.15em 1.3em}
.article-body li{margin-bottom:.42em}
/* Isi artikel datang dari editor, jadi tabelnya bisa selebar apa pun.
   Dibungkus penggulir sendiri supaya halaman tidak ikut meluber ke samping. */
.article-body table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;font-family:var(--font-ui);font-size:15.5px;margin:0 0 1.3em}
.article-body th,.article-body td{border:var(--garis);padding:9px 12px;text-align:left;vertical-align:top}
.article-body th{background:var(--paper-2);font-weight:600}
.article-body pre{overflow-x:auto;background:var(--paper-2);border:var(--garis);border-radius:var(--r-1);padding:var(--s4);font-size:14.5px;margin:0 0 1.3em}
.article-body a{color:var(--nila);text-decoration-color:var(--amber)}
.article-body img{border-radius:var(--r-2);border:var(--garis);margin:1.6em 0}
.article-body blockquote{
  border-left:3px solid var(--amber);padding:.2em 0 .2em 1.15em;margin:1.6em 0;
  font-style:italic;color:var(--ink-2)
}
.article-body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;background:var(--paper-2);padding:2px 6px;border-radius:var(--r-3);border:1px solid var(--line)}
.article-body table{width:100%;border-collapse:collapse;margin:1.5em 0;font-family:var(--font-ui);font-size:15px}
.article-body th,.article-body td{border:var(--garis);padding:10px 12px;text-align:left}
.article-body th{background:var(--paper-2);font-weight:600}

/* ---------- AVATAR ---------- */
img.avatar{object-fit:cover;padding:0}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--nila);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-ui);font-weight:700;font-size:15px;flex:none}
.avatar-lg{width:60px;height:60px;font-size:22px}

/* ---------- PAGINASI ---------- */
.pagination-wrap{margin-top:var(--s7)}
.pager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center}
.pager-link{
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
  padding:0 13px;border-radius:var(--r-1);border:1px solid var(--line-2);background:var(--surface);
  color:var(--ink);font-family:var(--font-ui);font-weight:600;font-size:14px;text-decoration:none;
  transition:border-color var(--gerak),background var(--gerak)
}
.pager-link:hover{border-color:var(--nila);color:var(--nila);text-decoration:none}
.pager-link.is-now{background:var(--nila);border-color:var(--nila);color:#fff}
.pager-link.is-off{opacity:.4;pointer-events:none}
.pager-gap{padding:0 4px;color:var(--ink-3)}

/* ---------- AKSESIBILITAS ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{
  position:absolute;left:16px;top:-100px;z-index:200;
  background:var(--nila);color:#fff;padding:12px 18px;border-radius:var(--r-1);
  font-family:var(--font-ui);font-weight:600;font-size:14px;text-decoration:none;
  transition:top var(--gerak)
}
.skip-link:focus{top:16px;color:#fff}
:focus-visible{outline:2px solid var(--nila);outline-offset:3px;border-radius:var(--r-3)}
.site-footer :focus-visible{outline-color:var(--amber)}

/* ---------- GERAK ---------- */
/* Konten disembunyikan hanya bila JavaScript hidup. */
.js .reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}
.stagger .reveal:nth-child(2){transition-delay:.05s}
.stagger .reveal:nth-child(3){transition-delay:.1s}
.stagger .reveal:nth-child(4){transition-delay:.15s}
.stagger .reveal:nth-child(5){transition-delay:.2s}
.stagger .reveal:nth-child(6){transition-delay:.25s}

.scroll-progress{position:fixed;top:0;left:0;height:2px;background:var(--amber);z-index:100;transition:width 100ms linear}
.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--amber);display:inline-block}

/* Elemen hias lama dimatikan: tidak ada lagi kabut aurora dan noise. */
/* Hiasan desain lama sudah dihapus dari markah, jadi tidak ada lagi yang
   perlu disembunyikan di sini. */

/* Kebijakan pemilik situs: animasi selalu berjalan, juga saat perangkat
   menyalakan Kurangi Gerakan — di iPhone fitur itu sering aktif dan dulu
   membuat seluruh situs tampak mati. Semua gerak di sini halus dan pendek,
   dan pemblokiran total lewat media query sudah dicabut dengan sadar. */

/* ---------- CETAK ---------- */
@media print{
  .site-nav,.site-footer,.chatfab,.chatbox,.no-print,.skip-link,.scroll-progress{display:none !important}
  body{background:#fff}
  .card,.post-card{break-inside:avoid}
}

/* ==== 10-beranda.css ==== */
/* ============================================================
   BERANDA — "Ruang Baca"
   Halaman muka dibaca dari atas ke bawah seperti terbitan:
   halaman judul, pita topik, lalu bab demi bab yang dipisah
   garis rambut. Tidak ada gradien, tidak ada kaca, tidak ada
   cahaya. Semua warna diambil dari token di 00-fondasi.css.
   ============================================================ */

/* ---------- UTILITAS KECIL ---------- */
.hm-flush-b{padding-bottom:0}

/* Tautan "baca lanjut": bahasa penerbitan, bukan tombol.
   Tinggi 44px supaya tetap nyaman disentuh di layar sempit. */
.hm-more{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  min-height:44px;font-family:var(--font-ui);font-size:13.5px;font-weight:600;
  color:var(--nila);text-decoration:none;
  transition:color var(--gerak)
}
.hm-more svg{transition:transform var(--gerak)}
.hm-more:hover{
  color:var(--nila-tua);text-decoration:underline;
  text-decoration-color:var(--amber-tua);text-decoration-thickness:1px;text-underline-offset:.22em
}
.hm-more:hover svg{transform:translateX(3px)}

/* ============================================================
   1. PEMBUKA
   ============================================================ */
/* ---------- LATAR HERO ----------
   Film ambien pendek yang dibuat lewat Higgsfield: pena nila di atas
   kertas kosong, cahaya pagi bergeser pelan, bayangan tirai bernapas.
   Bingkai awal dan akhirnya sengaja dibuat sama persis sehingga
   pengulangannya tidak berjahitan.

   Filmnya diredam dua lapis supaya teks di atasnya selalu menang:
   opasitas videonya sendiri, lalu satu tirai kertas polos (tanpa
   gradien) di atasnya. JavaScript hanya memuat berkas video pada layar
   lebar, saat pengunjung tidak meminta gerak dikurangi dan tidak
   sedang menghemat data; selain itu hero tampil polos dan ringan. */
.hm-hero{position:relative;padding:var(--s8) 0;isolation:isolate;overflow:hidden}
.hm-film{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;opacity:0;transition:opacity 900ms ease
}
.hm-film.jalan{opacity:1}
.hm-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:rgba(246,248,252,.6)
}
@media(max-width:759px){
  /* Di layar sempit teks menimpa film hampir penuh bidang, jadi tirainya
     sedikit dipekatkan supaya paragraf tetap nyaman dibaca. */
  .hm-hero::before{background:rgba(246,248,252,.72)}
}

.hm-hero-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,352px);
  gap:var(--s8);align-items:start
}
.hm-hero-copy{min-width:0}

.hm-eyebrow{display:inline-flex;align-items:center;gap:9px;line-height:1.4}
.hm-eyebrow .pulse-dot{flex:none}

/* Satu kata ditegaskan dengan garis bawah amber tebal.
   Bukan gradien: warnanya rata, tepinya jelas, dan tetap teks biasa. */
.h1-accent{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--amber);
  text-decoration-thickness:.1em;
  text-underline-offset:.1em;
  text-decoration-skip-ink:none
}

/* Judul pembuka tidak ikut animasi reveal supaya langsung terbaca. */
.hm-h1,.hm-hero h1{margin-top:var(--s4)}
.hm-lede{
  margin-top:var(--s5);max-width:56ch;
  font-size:18px;line-height:1.68;color:var(--ink-2)
}
.hm-cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.hm-note{
  margin-top:var(--s4);padding-left:var(--s4);border-left:2px solid var(--amber);
  font-family:var(--font-judul);font-style:italic;font-size:15.5px;
  line-height:1.55;color:var(--ink-2);max-width:52ch
}

/* Statistik dibaca seperti tabel data di halaman terbitan:
   angka serif besar, label kecil huruf kapital, dipisah garis rambut. */
.hm-stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:var(--s7);border-top:1px solid var(--line-2)
}
.hm-stat{padding:var(--s5) var(--s4) 0;border-left:var(--garis);min-width:0}
.hm-stat:nth-child(4n+1){border-left:none;padding-left:0}
.hm-stat b{
  display:block;font-family:var(--font-judul);font-weight:600;
  font-size:clamp(1.7rem,1.4rem + .9vw,2.15rem);line-height:1.05;
  letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums
}
.hm-stat span{
  display:block;margin-top:7px;font-family:var(--font-ui);font-size:11px;
  font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-2);line-height:1.35
}

/* ---------- ENTRI KAMUS: WORD OF THE DAY ---------- */
.hm-hero-side{min-width:0}
.hm-entry{
  background:var(--surface);border:var(--garis);border-radius:var(--r-2);
  padding:var(--s5)
}
.hm-entry-kicker{
  font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--amber-tua);
  padding-bottom:var(--s3);border-bottom:var(--garis)
}
.hm-word{
  margin-top:var(--s4);font-family:var(--font-judul);font-weight:600;
  font-size:clamp(2rem,1.6rem + 1.5vw,2.6rem);line-height:1.08;
  letter-spacing:-.022em;color:var(--ink);overflow-wrap:anywhere
}
.hm-pron{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:7px}
.hm-phon{font-family:var(--font-judul);font-style:italic;font-size:17px;color:var(--ink-2)}
.hm-pos{
  font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-2);
  padding-left:10px;border-left:var(--garis)
}
/* Tombol dengar: kotak kecil bergaris, area sentuhnya dilebarkan ke 44px. */
.hm-entry .speak{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex:none;border:1px solid var(--line-2);border-radius:var(--r-1);
  background:var(--surface);color:var(--nila);cursor:pointer;
  transition:border-color var(--gerak),background var(--gerak),color var(--gerak)
}
.hm-entry .speak::after{content:"";position:absolute;inset:-3px}
.hm-entry .speak:hover{border-color:var(--nila);background:var(--nila-kabut)}
.hm-entry .speak:active{background:var(--nila);color:#fff}

.hm-sense{
  display:flex;gap:10px;margin-top:var(--s4);padding-top:var(--s4);
  border-top:var(--garis);
  font-family:var(--font-judul);font-size:18px;line-height:1.55;color:var(--ink)
}
.hm-sense-n{
  flex:none;width:20px;height:20px;margin-top:5px;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-ui);font-size:11px;font-weight:700;
  color:var(--nila);background:var(--nila-kabut);border:1px solid #dbe1ee;border-radius:var(--r-3)
}
.hm-ex{
  margin-top:var(--s4);padding-left:var(--s4);border-left:2px solid var(--amber);
  font-family:var(--font-judul);font-style:italic;font-size:16.5px;
  line-height:1.55;color:var(--ink-2)
}
.hm-ex-id{
  margin-top:5px;padding-left:calc(var(--s4) + 2px);
  font-family:var(--font-ui);font-size:13.5px;line-height:1.55;color:var(--ink-2)
}
.hm-entry-foot{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);
  margin-top:var(--s5);padding-top:var(--s4);border-top:var(--garis)
}
.hm-entry-note{font-family:var(--font-ui);font-size:12.5px;line-height:1.5;color:var(--ink-2)}

/* ============================================================
   2. PITA TOPIK
   Gerak pelan dan abu-abu. Berhenti saat kursor singgah dan
   saat pengguna meminta gerak dikurangi.
   ============================================================ */
.hm-marquee{
  background:var(--paper-2);border-block:var(--garis);
  overflow:hidden;padding:13px 0
}
.hm-marquee-track{
  display:flex;align-items:center;width:max-content;
  animation:hm-slide 72s linear infinite
}
.hm-marquee:hover .hm-marquee-track,
.hm-marquee:focus-within .hm-marquee-track{animation-play-state:paused}
.hm-marquee-track span{
  font-family:var(--font-ui);font-size:11.5px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-2);white-space:nowrap;
  margin-right:26px
}
.hm-marquee-track i{
  display:block;width:1px;height:11px;background:var(--line-2);
  margin-right:26px;flex:none
}
@keyframes hm-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}


/* ============================================================
   3. PITA PENGUMUMAN (KUIS BERHADIAH)
   ============================================================ */
.hm-strip{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:var(--s5);
  background:var(--surface);border:var(--garis);border-radius:var(--r-2);
  padding:var(--s5) var(--s6)
}
.hm-strip-main{min-width:0;flex:1 1 340px}
.hm-strip-main h2{margin-top:var(--s3);font-size:clamp(1.4rem,1.15rem + 1vw,1.9rem)}
.hm-strip-main p{margin-top:var(--s2);color:var(--ink-2);font-size:15px}
.hm-strip-prize{
  background:var(--amber-kabut);border-color:#f0e0bf;
  border-left:3px solid var(--amber)
}

/* ============================================================
   4. ALASAN MEMILIH — bidang putih bergaris
   ============================================================ */
.hm-card{display:flex;flex-direction:column;gap:var(--s3);height:100%}
.hm-card h3{margin-top:var(--s2)}
.hm-card p{color:var(--ink-2);font-size:15px;line-height:1.62}
.hm-card .hm-more{margin-top:auto}
.hm-card-wide p{max-width:62ch}
.hm-byline{
  display:flex;align-items:center;gap:12px;
  margin-top:var(--s2);padding-top:var(--s4);border-top:var(--garis)
}
.hm-byline-tx b{display:block;font-family:var(--font-ui);font-size:14px;font-weight:600;color:var(--ink);line-height:1.3}
.hm-byline-tx small{display:block;margin-top:2px;font-family:var(--font-ui);font-size:12.5px;color:var(--ink-2);line-height:1.4}

/* ============================================================
   5. JALUR CEFR — kolom bergaris atas, seperti daftar isi
   ============================================================ */
.hm-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5)}
.hm-step{
  display:flex;flex-direction:column;gap:var(--s2);
  padding-top:var(--s4);border-top:1px solid var(--line-2);min-width:0
}
.hm-step-n{
  font-family:var(--font-judul);font-weight:600;font-size:1.7rem;line-height:1;
  color:var(--nila-muda);font-variant-numeric:tabular-nums
}
.hm-step h3{margin-top:var(--s1)}
.hm-step p{color:var(--ink-2);font-size:14.5px;line-height:1.6}
.hm-step .hm-more{margin-top:auto}

/* Tangga CEFR: lima sel dalam satu bingkai, dipisah garis rambut.
   Tiga sel pertama diberi garis penekanan amber, menandai sejauh
   mana materi kursus sudah tersedia. */
.hm-scale{margin-top:var(--s7)}
.hm-scale-cap{
  font-family:var(--font-ui);font-size:14px;color:var(--ink-2);
  max-width:64ch;margin-bottom:var(--s4)
}
.hm-cefr{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  background:var(--surface);border:var(--garis);border-radius:var(--r-2);overflow:hidden
}
.hm-cefr li{padding:var(--s4) var(--s3);text-align:center;border-left:var(--garis);min-width:0}
.hm-cefr li:first-child{border-left:none}
.hm-cefr li b{
  display:block;font-family:var(--font-judul);font-weight:600;font-size:1.3rem;
  line-height:1.1;color:var(--ink-2)
}
.hm-cefr li span{
  display:block;margin-top:5px;font-family:var(--font-ui);font-size:10.5px;
  font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);line-height:1.3
}
.hm-cefr li.is-on{background:var(--nila-kabut);box-shadow:inset 0 -3px 0 var(--amber)}
.hm-cefr li.is-on b{color:var(--nila)}
/* Lima kolom tidak muat di layar sempit: label seperti "MENENGAH ATAS" dan
   "UPPER INTERMEDIATE" terpotong. Di bawah 560px tangganya jadi dua baris. */
@media(max-width:560px){
  .hm-cefr{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hm-cefr li{border-top:var(--garis)}
  .hm-cefr li:nth-child(-n+3){border-top:none}
  .hm-cefr li:nth-child(3n+1){border-left:none}
  .hm-cefr li span{font-size:9.5px;letter-spacing:.06em}
}

/* ============================================================
   6. FITUR — daftar bernomor, dibaca seperti daftar isi
   ============================================================ */
/* Garis rambut di bawah setiap entri sudah cukup. Garis atas dilepas
   supaya tidak berdempetan dengan garis milik kepala bagian. */
.hm-index{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--s7)
}
.hm-index-item{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:var(--s4);align-items:start;
  padding:var(--s5) 0;border-bottom:var(--garis);
  text-decoration:none;color:inherit;
  transition:border-color var(--gerak)
}
.hm-index-item:hover{border-bottom-color:var(--nila);text-decoration:none}
/* Angka Newsreader berbentuk oldstyle dan lebarnya tidak sama, jadi
   lebar kolomnya dikunci supaya semua judul rata satu garis. */
.hm-index-n{
  min-width:34px;
  font-family:var(--font-judul);font-weight:600;font-size:1.45rem;line-height:1.15;
  color:var(--nila-muda)
}
.hm-index-body{display:block;min-width:0}
.hm-index-body b{
  display:block;font-family:var(--font-judul);font-weight:600;font-size:1.12rem;
  line-height:1.28;color:var(--ink)
}
.hm-index-body>span{
  display:block;margin-top:6px;font-family:var(--font-ui);font-size:14.5px;
  line-height:1.58;color:var(--ink-2)
}
.hm-index-item:hover .hm-index-body b{
  text-decoration:underline;text-decoration-color:var(--amber-tua);
  text-decoration-thickness:1px;text-underline-offset:.2em
}
.hm-index-go{color:var(--ink-2);margin-top:5px;transition:transform var(--gerak),color var(--gerak)}
.hm-index-item:hover .hm-index-go{transform:translateX(4px);color:var(--nila)}

/* ============================================================
   7. KURSUS — harga di kaki kartu
   ============================================================ */
.hm-price{font-family:var(--font-ui);font-weight:600;color:var(--ink)}
.hm-price-old{margin-left:6px;color:var(--ink-2);font-weight:400}

/* ============================================================
   8. PESAN PENDIRI — kutipan dijepit dua garis
   ============================================================ */
.hm-quote{
  max-width:880px;margin:0 auto;padding:var(--s7) 0;
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)
}
.hm-quote-tx{
  margin-top:var(--s4);
  font-family:var(--font-judul);font-weight:400;
  font-size:clamp(1.35rem,1.05rem + 1.25vw,1.95rem);line-height:1.38;
  letter-spacing:-.012em;color:var(--ink);text-wrap:pretty
}
.hm-quote-tx::before{
  content:"\201C";display:block;
  font-family:var(--font-judul);font-size:3.2rem;line-height:.62;
  color:var(--amber);margin-bottom:var(--s2)
}
.hm-quote-sig{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--s4);
  margin-top:var(--s6);padding-top:var(--s5);border-top:var(--garis)
}
.hm-quote-who{min-width:0;flex:1 1 260px}
.hm-quote-who b{display:block;font-family:var(--font-ui);font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.35}
.hm-quote-who small{display:block;margin-top:3px;font-family:var(--font-ui);font-size:13px;color:var(--ink-2);line-height:1.5}
.hm-quote-sig .btn{margin-left:auto;flex:none}

/* ============================================================
   9. ARTIKEL TERBARU — foto yang bicara
   ============================================================ */
.hm-latest{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--s5);align-items:start}
.hm-latest-side{display:flex;flex-direction:column;gap:var(--s4)}
.hm-mini{flex:1 1 auto}
.hm-mini .post-body{padding:var(--s4) var(--s5);gap:7px}
.hm-mini h3{font-size:1.04rem;line-height:1.32}
.hm-mini-meta{
  margin-top:auto;padding-top:var(--s3);border-top:var(--garis);
  font-family:var(--font-ui);font-size:12.5px;color:var(--ink-2)
}

/* ============================================================
   10. PENUTUP — ajakan terakhir dan catatan kemitraan
   ============================================================ */
/* Kaki halaman sudah membawa jarak var(--s9) di atasnya, jadi bagian
   penutup tidak perlu menambah ruang kosong lagi di bawah. */
.hm-close{padding-bottom:0}
.hm-close-grid{
  display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:var(--s7);align-items:start
}
.hm-close-main h2{margin-top:var(--s3);max-width:20ch}
.hm-close-main>p{margin-top:var(--s4);max-width:54ch;font-size:16.5px;line-height:1.65;color:var(--ink-2)}
.hm-close-main .hm-cta{margin-top:var(--s5)}
.hm-partner{
  background:var(--surface);border:var(--garis);border-radius:var(--r-2);
  padding:var(--s5);display:flex;flex-direction:column;gap:var(--s2)
}
.hm-partner h3{margin-top:var(--s2)}
.hm-partner p{color:var(--ink-2);font-size:14.5px;line-height:1.6}

/* ============================================================
   LAYAR SEMPIT
   ============================================================ */
@media(max-width:1000px){
  .hm-hero-grid{grid-template-columns:minmax(0,1fr);gap:var(--s7)}
  .hm-hero-side{max-width:520px}
  .hm-close-grid{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  .hm-close-main h2{max-width:26ch}
}
@media(max-width:940px){
  .hm-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s5)}
  .hm-latest{grid-template-columns:minmax(0,1fr)}
  .hm-index{column-gap:var(--s6)}
}
@media(max-width:820px){
  .hm-index{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:700px){
  .hm-hero{padding:var(--s7) 0 var(--s7)}
  .hm-lede{font-size:17px}
  .hm-cta .btn{flex:1 1 100%}
  .hm-stats{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--s6)}
  .hm-stat{padding:var(--s4) var(--s4) var(--s4) var(--s4)}
  .hm-stat:nth-child(2n+1){border-left:none;padding-left:0}
  .hm-stat:nth-child(n+3){border-top:var(--garis)}
  .hm-strip{padding:var(--s5)}
  .hm-strip .btn{width:100%}
  .hm-steps{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .hm-step{padding-top:var(--s3)}
  .hm-step .hm-more{margin-top:0}
  .hm-quote{padding:var(--s6) 0}
  .hm-quote-sig .btn{margin-left:0;width:100%}
  .hm-cefr li{padding:var(--s3) 4px}
  .hm-cefr li b{font-size:1.08rem}
  .hm-cefr li span{font-size:9.5px;letter-spacing:.04em}
}
@media(max-width:420px){
  .hm-index-item{gap:var(--s3)}
  .hm-entry{padding:var(--s4)}
}

/* ============================================================
   PAKET YANG SEDANG DISIAPKAN
   Ditempel di bawah kartu kursus yang sudah tayang, dipisah garis rambut.
   Tanpa harga dan tanpa tombol beli, karena memang belum bisa dibeli.
   ============================================================ */
.hm-siap{margin-top:var(--s7);padding-top:var(--s6);border-top:var(--garis)}
.hm-siap-kepala{max-width:64ch;color:var(--ink-2);font-size:15px}
.hm-siap-kepala .sec-eyebrow{display:block;margin-bottom:var(--s2)}
.hm-siap-daftar{
  list-style:none;margin:var(--s5) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--s5)
}
.hm-siap-daftar li{padding:var(--s4) 0;border-top:var(--garis)}
.hm-siap-daftar li:nth-child(-n+3){border-top:none;padding-top:0}
.hm-siap-daftar b{
  display:block;font-family:var(--font-judul);font-size:1.02rem;font-weight:600;
  color:var(--ink-2);line-height:1.25
}
.hm-siap-daftar span{
  display:block;margin-top:5px;font-family:var(--font-ui);font-size:11.5px;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)
}
.hm-siap-daftar .hm-siap-harga{
  font-family:var(--font-ui);font-size:13.5px;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--ink-2);font-variant-numeric:lining-nums
}
.hm-siap-daftar .hm-siap-harga s{color:var(--ink-3);font-weight:400;font-size:12px}

/* ============================================================
   SERTIFIKAT — daftar bukti di kiri, kartu pengecekan di kanan
   ============================================================ */
.hm-sertifikat{display:grid;grid-template-columns:1.35fr .95fr;gap:var(--s7);align-items:start}
.hm-bukti{list-style:none;margin:0;padding:0;counter-reset:bukti}
.hm-bukti li{
  counter-increment:bukti;position:relative;
  padding:var(--s5) 0 var(--s5) 46px;border-top:var(--garis)
}
.hm-bukti li:first-child{border-top:none;padding-top:0}
.hm-bukti li::before{
  content:counter(bukti,decimal-leading-zero);position:absolute;left:0;top:var(--s5);
  font-family:var(--font-judul);font-size:1.12rem;font-weight:600;color:var(--nila-muda);
  font-variant-numeric:lining-nums
}
.hm-bukti li:first-child::before{top:0}
.hm-bukti b{display:block;font-family:var(--font-judul);font-size:1.18rem;font-weight:600;color:var(--ink)}
.hm-bukti span{display:block;margin-top:6px;color:var(--ink-2);font-size:15px;line-height:1.55}

.hm-cek{
  background:var(--surface);border:var(--garis);border-top:3px solid var(--nila);
  border-radius:var(--r-2);padding:var(--s6)
}
.hm-cek-label{
  font-family:var(--font-ui);font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber-tua)
}
.hm-cek-kode{
  margin:var(--s3) 0 var(--s5);padding-bottom:var(--s4);border-bottom:var(--garis);
  font-family:var(--font-judul);font-size:1.5rem;font-weight:600;color:var(--ink);
  letter-spacing:.01em;white-space:nowrap
}
.hm-cek .btn{width:100%}

@media(max-width:940px){
  .hm-sertifikat{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  .hm-siap-daftar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-siap-daftar li:nth-child(-n+3){border-top:var(--garis);padding-top:var(--s4)}
  .hm-siap-daftar li:nth-child(-n+2){border-top:none;padding-top:0}
}
@media(max-width:620px){
  .hm-siap-daftar{grid-template-columns:minmax(0,1fr)}
  .hm-siap-daftar li:nth-child(-n+2){border-top:var(--garis);padding-top:var(--s4)}
  .hm-siap-daftar li:first-child{border-top:none;padding-top:0}
  .hm-cek{padding:var(--s5)}
  .hm-cek-kode{font-size:1.24rem}
}

/* ============================================================
   GERAK PEMBUKA
   Halaman ini dibuka seperti orang membuka terbitan: judulnya sudah
   ada sejak detik pertama, lalu keterangan di sekitarnya menyusul naik
   satu per satu, dan terakhir garis amber di bawah judul menghitam
   seperti tinta yang baru mengering.

   Judul sengaja TIDAK ikut beranimasi. Ia elemen terbesar di halaman dan
   penentu LCP, jadi ia harus terbaca pada frame pertama.
   ============================================================ */
@keyframes hm-naik{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
@keyframes hm-tinta{
  from{text-decoration-color:transparent}
  to{text-decoration-color:var(--amber)}
}

.hm-eyebrow,.hm-lede,.hm-cta,.hm-note,.hm-stats,.hm-hero-side{
  animation:hm-naik .5s cubic-bezier(.2,.6,.3,1) backwards
}
.hm-eyebrow{animation-delay:.05s}
.hm-lede{animation-delay:.14s}
.hm-cta{animation-delay:.22s}
.hm-note{animation-delay:.26s}
.hm-stats{animation-delay:.3s}
.hm-hero-side{animation-delay:.18s}

/* Garisnya muncul setelah judul mendarat, bukan bersamaan. */
.h1-accent{animation:hm-tinta .45s .38s ease-out backwards}

/* Satu-satunya paket yang tayang ditampilkan melebar: gambar di kiri,
   keterangan di kanan, sehingga kisi tiga kolom tidak menyisakan dua
   kolom kosong di sebelahnya. */
.hm-kursus-tunggal{grid-template-columns:minmax(0,1fr)}
.hm-kursus-tunggal .post-card{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:stretch
}
.hm-kursus-tunggal .post-thumb{height:100%;border-radius:var(--r-2) 0 0 var(--r-2)}
.hm-kursus-tunggal .post-thumb img{height:100%;object-fit:cover}
.hm-kursus-tunggal .post-body{padding:var(--s6);display:flex;flex-direction:column}
.hm-kursus-tunggal .post-body h3{font-size:clamp(1.35rem,1.1rem + 1vw,1.85rem)}
.hm-kursus-tunggal .post-body p{margin-top:var(--s3);font-size:16px;max-width:52ch}
.hm-kursus-tunggal .post-meta{margin-top:auto;padding-top:var(--s5)}
@media(max-width:760px){
  .hm-kursus-tunggal .post-card{grid-template-columns:minmax(0,1fr)}
  .hm-kursus-tunggal .post-thumb{border-radius:var(--r-2) var(--r-2) 0 0}
  .hm-kursus-tunggal .post-thumb img{height:auto}
  .hm-kursus-tunggal .post-body{padding:var(--s5)}
}

/* ============================================================
   LAPISAN DATA
   Segala yang berupa ukuran, kode, satuan, atau label kanal dicetak
   dengan huruf mono. Angka besarnya tetap serif karena ia dibaca
   sebagai pernyataan, bukan sebagai bacaan alat.
   ============================================================ */
.hm-stat b,.hm-cefr li b{font-variant-numeric:tabular-nums lining-nums}
.hm-stat span,
.hm-cefr li span,
.hm-siap-daftar span,
.hm-mini-meta,
.hm-entry-kicker,
.hm-pos{
  font-family:var(--font-data);font-weight:500;letter-spacing:.1em
}
.hm-stat span{font-size:10.5px}
.hm-cefr li span{font-size:9.5px;letter-spacing:.07em}
.hm-siap-daftar span{font-size:10.5px}
.hm-mini-meta{font-size:11px;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.hm-entry-kicker{font-size:10.5px;letter-spacing:.16em}
.hm-pos{font-size:10.5px}

/* Nomor urut pada daftar fitur dan daftar bukti: ini penanda posisi,
   bukan angka yang dibaca, jadi mono dengan lebar tetap. */
.hm-index-n,.hm-step-n,.hm-bukti li::before{
  font-family:var(--font-data);font-weight:500;font-variant-numeric:tabular-nums
}
/* Contoh kode sertifikat memang kode, jadi harus mono. */
.hm-cek-kode{font-family:var(--font-data);font-size:1.14rem;font-weight:500;letter-spacing:.02em}

/* Tombol dengar untuk kalimat contoh: lebih kecil daripada tombol kata dan
   duduk di ujung kalimatnya, dengan area sentuh yang tetap 44px. */
.hm-entry .speak-kalimat{
  width:26px;height:26px;vertical-align:-7px;margin-left:7px;border-radius:var(--r-3)
}
.hm-entry .speak-kalimat .ic-s{width:13px;height:13px}

/* Tombol menuju halaman tanya jawab lengkap, di bawah akordeon beranda. */
.hm-faq-semua{margin-top:var(--s5);display:flex;justify-content:center}

/* ==== 20-blog.css ==== */
/* ============================================================
   20-blog.css — PENGALAMAN BACA
   Daftar tulisan, halaman artikel, halaman penulis, halaman statis.
   Semuanya memakai token dari 00-fondasi.css. Struktur dibentuk
   garis rambut dan ruang kosong; tidak ada bayangan sebagai hiasan.
   ============================================================ */

/* ============================================================
   1. DAFTAR BLOG
   Kepala halaman, pencarian, pil kategori, lalu kisi kartu
   dengan satu tulisan utama yang dibentangkan.
   ============================================================ */

.bloghead-blog .blog-head-tx{max-width:56ch}
.bloghead-blog .blog-head-tx h1{margin-top:var(--s3)}
.bloghead-blog .blog-head-tx p{margin-top:var(--s4)}

/* Pencarian: satu baris, sama tinggi, tanpa hiasan. */
.blog-search{display:flex;gap:var(--s2);max-width:440px;margin-top:var(--s6)}
.blog-search input{flex:1 1 auto;min-width:0}
.blog-search button{
  flex:none;min-height:46px;padding:0 var(--s5);
  border:1px solid var(--nila);border-radius:var(--r-1);
  background:var(--nila);color:#fff;cursor:pointer;
  font-family:var(--font-ui);font-size:15px;font-weight:600;line-height:1;
  transition:background var(--gerak),border-color var(--gerak)
}
.blog-search button:hover{background:var(--nila-tua);border-color:var(--nila-tua)}

.bloghead-blog .cat-row{margin-top:var(--s6);padding-top:var(--s5);border-top:var(--garis)}

/* Hitungan tulisan: keterangan redaksi kecil di atas kisi. */
.blog-list{padding-top:var(--s7)}
.blog-count{
  font-family:var(--font-ui);font-size:12px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);
  margin-bottom:var(--s5);padding-bottom:var(--s4);border-bottom:var(--garis)
}

.blog-grid{align-items:stretch}

/* Tulisan utama: gambar di kiri, teks di kanan, membentang selebar kisi. */
.blog-grid .post-feature{grid-column:1/-1}
@media(min-width:941px){
  .blog-grid .post-feature{flex-direction:row;align-items:stretch}
  .blog-grid .post-feature .post-thumb{
    flex:0 0 46%;aspect-ratio:auto;min-height:300px;
    border-bottom:none;border-right:var(--garis)
  }
  .blog-grid .post-feature .post-body{padding:var(--s6);gap:var(--s3)}
  .blog-grid .post-feature .post-cat{font-size:11.5px}
  .blog-grid .post-feature h3{font-size:clamp(1.5rem,1.1rem + 1.1vw,2.05rem);line-height:1.18}
  .blog-grid .post-feature p{font-size:16px;line-height:1.62;max-width:56ch}
  .blog-grid .post-feature .post-meta{font-size:13px;padding-top:var(--s4)}
}

/* ============================================================
   2. HALAMAN ARTIKEL
   Tata letak terbitan: kepala di kolom sempit, sampul lebar,
   badan artikel di kolom baca, bagikan menempel di margin kiri.
   ============================================================ */

.article{--kolom:700px;--kolom-lebar:900px;padding-bottom:var(--s7)}

/* --- Kepala --- */
.article .article-hero{padding:var(--s7) 0 0}
.article .article-hero .wrap-narrow{max-width:calc(var(--kolom) + 48px)}
.article .article-hero h1{
  margin-top:var(--s5);
  font-size:clamp(2rem,1.42rem + 2.3vw,3.05rem);
  line-height:1.08;letter-spacing:-.018em
}
.article .crumbs .crumbs-now{color:var(--ink-2)}

/* Baris keterangan: penulis, tanggal, waktu baca, dipisah titik tengah. */
.article-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);
  margin-top:var(--s6);padding-top:var(--s5);border-top:var(--garis);
  font-family:var(--font-ui);font-size:14px;color:var(--ink-2)
}
.meta-orang{display:inline-flex;align-items:center;gap:var(--s3);min-width:0}
.article-by b{display:block;font-weight:600;font-size:14.5px;color:var(--ink);line-height:1.3}
.article-by em{
  display:block;font-style:normal;font-size:12px;font-weight:600;
  letter-spacing:.05em;color:var(--amber-tua);line-height:1.3
}
/* Tanggal dan waktu baca selalu satu kesatuan, jadi titik tengahnya
   tidak pernah tertinggal sendirian di ujung baris. */
.meta-fakta{display:inline-flex;align-items:center;gap:var(--s3);white-space:nowrap}
.meta-sep{color:var(--line-2);user-select:none}

/* --- Sampul --- */
.article-cover{
  max-width:calc(var(--kolom-lebar) + 48px);
  margin:var(--s7) auto 0;padding:0 24px
}
.article-cover img{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  background:var(--paper-2);border:var(--garis);border-radius:var(--r-2)
}

/* --- Kerangka dua kolom --- */
.article-shell{display:grid;grid-template-columns:minmax(0,1fr);padding-top:var(--s7)}
.article-main{min-width:0}

/* --- Kotak rangkuman: catatan redaksi di atas artikel --- */
.rangkuman{
  margin:0 0 var(--s7);padding:var(--s5);
  background:var(--amber-kabut);
  border:1px solid #f0e0bf;border-left:3px solid var(--amber);
  border-radius:0 var(--r-2) var(--r-2) 0
}
.rangkuman-label{
  display:flex;align-items:center;gap:7px;margin-bottom:var(--s3);
  font-family:var(--font-ui);font-size:11.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--amber-tua)
}
.rangkuman-label .ic-s{width:15px;height:15px}
.rangkuman-tx{font-family:var(--font-judul);font-size:18.5px;line-height:1.6;color:var(--ink)}

/* --- Topik --- */
.article-tags{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);
  margin-top:var(--s7);padding-top:var(--s5);border-top:var(--garis)
}
.article-tags-label{
  margin-right:var(--s2);font-family:var(--font-ui);font-size:11.5px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)
}
.article-tags a{
  display:inline-flex;align-items:center;min-height:40px;padding:0 15px;
  border:var(--garis);border-radius:999px;background:var(--surface);
  font-family:var(--font-ui);font-size:13.5px;font-weight:600;
  color:var(--ink-2);text-decoration:none;
  transition:border-color var(--gerak),color var(--gerak)
}
.article-tags a::before{content:"#";margin-right:3px;color:var(--ink-3)}
.article-tags a:hover{border-color:var(--nila);color:var(--nila);text-decoration:none}

/* --- Kartu penulis --- */
.author-box{
  display:flex;gap:var(--s5);align-items:flex-start;
  margin-top:var(--s7);padding:var(--s5);
  background:var(--paper-2);border:var(--garis);border-radius:var(--r-2)
}
.author-box-tx{min-width:0}
.author-kicker{
  font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3)
}
.author-name{
  font-family:var(--font-judul);font-size:1.3rem;font-weight:600;
  line-height:1.2;color:var(--ink);margin-top:6px
}
.author-cred{
  font-family:var(--font-ui);font-size:13px;font-weight:600;
  color:var(--amber-tua);margin-top:4px
}
.author-bio{
  font-family:var(--font-ui);font-size:14.5px;line-height:1.62;
  color:var(--ink-2);margin-top:var(--s3);max-width:58ch
}
.author-more{
  display:inline-flex;align-items:center;gap:7px;min-height:44px;margin-top:var(--s1);
  font-family:var(--font-ui);font-size:13.5px;font-weight:600;
  color:var(--nila);text-decoration:none
}
.author-more:hover{color:var(--nila-tua);text-decoration:underline;text-underline-offset:.2em}
.author-more .ic-s{width:15px;height:15px}

/* --- Kolom bagikan --- */
.article-rail{margin-top:var(--s7);padding-top:var(--s5);border-top:var(--garis)}
.rail-label{
  font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s3)
}
.share-row{display:flex;flex-wrap:wrap;gap:var(--s2)}
.share-row a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
  border:var(--garis);border-radius:var(--r-1);background:var(--surface);
  font-family:var(--font-ui);font-size:13.5px;font-weight:600;
  color:var(--ink-2);text-decoration:none;
  transition:border-color var(--gerak),color var(--gerak)
}
.share-row a:hover{border-color:var(--nila);color:var(--nila);text-decoration:none}

/* --- Artikel sebelumnya / berikutnya --- */
.article-nav{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s7)}
.artnav{
  flex:1 1 240px;min-width:0;display:block;padding:var(--s4) var(--s5);
  background:var(--surface);border:var(--garis);border-radius:var(--r-2);
  text-decoration:none;color:inherit;
  transition:border-color var(--gerak),background var(--gerak)
}
.artnav:hover{border-color:var(--line-2);background:var(--paper-2);text-decoration:none}
.artnav-k{
  display:flex;align-items:center;gap:7px;
  font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber-tua)
}
.artnav-t{
  display:block;margin-top:8px;font-family:var(--font-judul);
  font-size:1.06rem;font-weight:600;line-height:1.32;color:var(--ink)
}
.artnav-prev .artnav-k::before{content:"\2190"}
.artnav-next{text-align:right}
.artnav-next .artnav-k{justify-content:flex-end}
.artnav-next .artnav-k::after{content:"\2192"}

/* --- Baca juga --- */
.related-wrap{margin-top:var(--s9);padding-top:var(--s7);border-top:var(--garis)}
.related-h{margin-top:var(--s2)}
.related-grid{margin-top:0}

/* --- Layar lebar: bagikan pindah ke margin kiri dan ikut menggulir --- */
@media(min-width:1080px){
  .article-shell{grid-template-columns:minmax(0,1fr) minmax(0,var(--kolom)) minmax(0,1fr)}
  .article-main{grid-column:2;grid-row:1}
  .article-nav{grid-column:2;grid-row:2}
  /* Menggantung di margin kiri halaman, sejajar dengan tepi wrap. */
  .article-rail{
    grid-column:1;grid-row:1;align-self:start;justify-self:start;
    position:sticky;top:96px;width:100%;padding:0 var(--s6) 0 0;
    margin-top:var(--s1);border-top:none
  }
  .article-rail .share-row{flex-direction:column;flex-wrap:nowrap;gap:0}
  .article-rail .share-row a{
    min-height:42px;padding:0;border:none;border-radius:0;
    border-bottom:var(--garis);background:none
  }
  .article-rail .share-row a:first-child{border-top:var(--garis)}
  .article-rail .share-row a:hover{border-color:var(--line);color:var(--nila)}
}

/* ============================================================
   3. HALAMAN PENULIS
   ============================================================ */

.bloghead-penulis .penulis-kartu{display:flex;gap:var(--s5);align-items:flex-start;margin-top:var(--s5)}
.penulis-tx{min-width:0}
.bloghead-penulis .penulis-tx h1{margin-top:var(--s3);font-size:clamp(2rem,1.5rem + 1.9vw,2.9rem)}
.bloghead-penulis .penulis-cred{
  margin-top:var(--s3);font-family:var(--font-ui);font-size:14px;font-weight:600;
  letter-spacing:.02em;color:var(--amber-tua);max-width:60ch
}
.bloghead-penulis .author-bio-top{margin-top:var(--s4);max-width:62ch}
.bloghead-penulis .penulis-hitung{
  margin-top:var(--s5);padding-top:var(--s4);border-top:var(--garis);
  font-family:var(--font-ui);font-size:12px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);max-width:none
}
.avatar-xl{width:84px;height:84px;font-size:31px}

.penulis-tulisan{padding-top:var(--s7)}
.penulis-grid{align-items:stretch}

/* ============================================================
   4. HALAMAN STATIS
   Bukan pita berwarna, tapi kepala dokumen dengan garis pemisah.
   ============================================================ */

.doc{padding-bottom:var(--s7)}
.doc-head{padding:var(--s8) 0 0}
.doc-head .wrap-narrow{padding-bottom:var(--s5);border-bottom:var(--garis)}
.doc-head h1{margin-top:var(--s5);font-size:clamp(2rem,1.45rem + 2.1vw,2.9rem)}
.doc-date{
  margin-top:var(--s4);font-family:var(--font-ui);font-size:13px;color:var(--ink-3)
}
.doc-date time{color:var(--ink-2);font-weight:600}
.doc-body{padding-top:var(--s7)}

/* ============================================================
   5. LAYAR SEMPIT
   ============================================================ */

@media(max-width:700px){
  .blog-search{max-width:none;margin-top:var(--s5)}
  .blog-search button{padding:0 var(--s4)}
  .bloghead-blog .cat-row{margin-top:var(--s5);padding-top:var(--s4)}

  .article .article-hero{padding-top:var(--s6)}
  .article .article-hero h1{margin-top:var(--s4)}
  .article-meta{gap:10px var(--s4);margin-top:var(--s5);padding-top:var(--s4);font-size:13.5px}
  .article-meta .avatar{width:34px;height:34px;font-size:14px}
  .article-cover{margin-top:var(--s6);padding:0 18px}
  .article-shell{padding-top:var(--s6)}

  .rangkuman{padding:var(--s4);margin-bottom:var(--s6)}
  .rangkuman-tx{font-size:17.5px}

  .author-box{flex-direction:column;gap:var(--s4);padding:var(--s4)}
  .article-tags a{min-height:44px}
  .share-row a{flex:1 1 auto;justify-content:center;padding:0 12px}

  .artnav{flex:1 1 100%;padding:var(--s4)}
  .artnav-next{text-align:left}
  .artnav-next .artnav-k{justify-content:flex-start}

  .related-wrap{margin-top:var(--s8);padding-top:var(--s6)}

  .bloghead-penulis .penulis-kartu{flex-direction:column;gap:var(--s4)}
  .avatar-xl{width:64px;height:64px;font-size:24px}

  .doc-head{padding-top:var(--s7)}
  .doc-head h1{margin-top:var(--s4)}
  .doc-body{padding-top:var(--s6)}
}

/* ============================================================
   6. CETAK
   ============================================================ */

@media print{
  .article-rail,.article-nav,.related-wrap,.blog-search,.cat-row,.pagination-wrap{display:none !important}
  .article-shell{display:block}
  .article-cover img{border:none}
  .rangkuman,.author-box,.artnav{break-inside:avoid}
}

/* ==== 30-kursus.css ==== */
/* ============================================================
   30-KURSUS — katalog, halaman kursus, halaman materi, pembayaran
   Bahasa visualnya: daftar isi buku dan halaman kolofon.
   Struktur dibentuk garis rambut dan ruang kosong. Amber hanya
   dipakai untuk satu ajakan dan penanda kategori.
   ============================================================ */

/* ---------- HARGA ---------- */
/* Angka harga memakai Inter dengan angka tabular supaya kolom rapi,
   dan harga coret ditempatkan sebagai keterangan kecil, bukan sebagai
   pengumuman diskon. */
.price-tag{
  display:inline-flex;align-items:baseline;gap:8px;
  font-family:var(--font-ui);font-size:15px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em
}
.price-strike{
  font-size:12.5px;font-weight:500;color:var(--ink-2);
  text-decoration:line-through;text-decoration-thickness:1px
}
.price-free{color:var(--hijau)}
.price-tag-lg{font-size:32px;font-weight:800;line-height:1.05;letter-spacing:-.02em}
@media(max-width:620px){.price-tag-lg{font-size:28px}}

/* ---------- PENANDA JALUR CEFR ---------- */
/* Garis pendek lalu label level: penanda kecil khas halaman rujukan. */
.cefr-track{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-ui);font-size:11.5px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2)
}
.cefr-track::before{content:"";width:16px;height:1px;background:var(--line-2);flex:none}

/* ---------- KATALOG ---------- */
.kursus-kabar{margin-bottom:var(--s5)}
.katalog-kosong{
  border:var(--garis);border-radius:var(--r-2);background:var(--surface);
  padding:var(--s7) var(--s5);text-align:center;color:var(--ink-2);
  font-size:15.5px;max-width:60ch;margin:0 auto
}
/* Jumlah program duduk di ujung kanan baris kepala; saat baris itu
   membungkus di layar sempit, margin auto menahannya tetap di kanan. */
.katalog-hitung{
  margin-left:auto;
  font-family:var(--font-ui);font-size:12.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap
}
.post-card .cefr-track{margin-top:var(--s1)}

/* Kartu rencana: sengaja lebih sunyi. Tanpa foto, tanpa harga,
   tanpa bayangan, dan tanpa gerak saat disentuh. */
.plan-card{
  display:flex;flex-direction:column;gap:10px;
  background:transparent;border:var(--garis);border-radius:var(--r-2);
  padding:var(--s5);height:100%
}
.plan-card .chip-soon{align-self:flex-start}
.plan-judul{font-size:1.06rem;line-height:1.3;color:var(--ink)}
.plan-teks{color:var(--ink-2);font-size:14.5px;line-height:1.6}
/* Harga rencana: tegas tapi jujur — keterangan "saat dibuka" selalu ikut. */
.plan-harga{
  margin-top:auto;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-family:var(--font-ui)
}
.plan-harga b{font-family:var(--font-judul);font-size:1.22rem;font-weight:600;color:var(--ink);font-variant-numeric:lining-nums}
.plan-harga s{color:var(--ink-3);font-size:13px;text-decoration-thickness:1px}
.plan-harga-ket{font-family:var(--font-data);font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.plan-kaki{padding-top:var(--s3);border-top:var(--garis)}

/* ---------- KEPALA HALAMAN KURSUS ---------- */
.kursus-kepala .crumbs{margin-bottom:var(--s4)}
.kursus-kepala h1{margin-top:var(--s3)}
.kursus-fakta{
  list-style:none;display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--s2) var(--s4);margin-top:var(--s5);
  font-family:var(--font-ui);font-size:13px;color:var(--ink-2)
}
/* Pemisah antar fakta memakai garis tegak tipis, bukan titik tengah:
   lebih dekat ke bahasa halaman rujukan. */
.kursus-fakta li{display:inline}
.kursus-fakta li+li::before{
  content:"";display:inline-block;width:1px;height:12px;vertical-align:-1px;
  background:var(--line-2);margin-right:var(--s4)
}
.kursus-fakta b{font-weight:600;color:var(--ink)}
/* Di layar sempit barisnya membungkus, dan garis pemisah bisa jatuh di awal
   baris. Lebih rapi dihapus dan diganti jarak yang lebih lapang. */
@media(max-width:700px){
  .kursus-fakta{gap:var(--s2) var(--s5)}
  .kursus-fakta li+li::before{display:none}
}

/* ---------- KERANGKA DUA KOLOM ---------- */
.kursus-layout{
  display:grid;grid-template-columns:minmax(0,1.72fr) minmax(0,1fr);
  gap:var(--s7);align-items:start
}
.kursus-utama{min-width:0}
.kursus-samping{min-width:0;position:sticky;top:90px}
@media(max-width:980px){
  .kursus-layout{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  /* Di layar sempit kartu harga naik ke atas: pembaca tahu biayanya
     sebelum menggulir tujuh modul. */
  .kursus-samping{position:static;order:-1}
}

.kursus-nota{display:flex;gap:10px;align-items:flex-start;margin-bottom:var(--s5)}
.kursus-nota svg{margin-top:3px;color:var(--nila)}
.kursus-utama>.quiz-feedback{margin-bottom:var(--s5)}

/* ---------- DAFTAR ISI KURSUS ---------- */
.daftar-kepala{margin-top:var(--s7)}
.daftar-kepala h2{margin-top:var(--s2)}
.daftar-kepala p{margin-top:var(--s3)}

.modul-list{list-style:none;display:grid;gap:var(--s4);margin:0;padding:0}
.modul{
  background:var(--surface);border:var(--garis);border-radius:var(--r-2);overflow:hidden
}
.modul-kepala{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;
  gap:var(--s3) var(--s4);padding:var(--s4) var(--s5);
  background:var(--paper-2);border-bottom:var(--garis)
}
.modul-no{
  font-family:var(--font-judul);font-size:15px;font-weight:600;color:var(--amber-tua);
  font-variant-numeric:tabular-nums;letter-spacing:.02em
}
.modul-judul{font-size:1.02rem;line-height:1.3;margin:0}
.modul-jumlah{
  font-family:var(--font-ui);font-size:12px;color:var(--ink-3);white-space:nowrap;
  font-variant-numeric:tabular-nums
}

.isi-list{list-style:none;margin:0;padding:0 var(--s5)}
.isi-item{
  display:grid;grid-template-columns:22px minmax(0,auto) minmax(14px,1fr) auto;
  align-items:center;gap:0 var(--s3);padding:11px 0
}
.isi-item+.isi-item{border-top:var(--garis)}
.isi-ikon{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;color:var(--ink-3)
}
.isi-item.is-done .isi-ikon{color:var(--hijau)}
.isi-item.is-open .isi-ikon{color:var(--nila)}
.isi-item.is-free .isi-ikon{color:var(--amber-tua)}
.isi-judul{
  font-family:var(--font-ui);font-size:14.5px;line-height:1.45;color:var(--ink);
  text-decoration:none;min-width:0
}
a.isi-judul{text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:.18em}
a.isi-judul:hover{text-decoration-color:var(--amber-tua);color:var(--nila-tua)}
.isi-item.is-locked .isi-judul{color:var(--ink-2)}
.isi-garis{display:block;height:1px;background:var(--line);margin:0 var(--s2)}
.isi-durasi{
  font-family:var(--font-ui);font-size:12.5px;color:var(--ink-3);white-space:nowrap;
  font-variant-numeric:tabular-nums
}
@media(max-width:620px){
  .isi-item{grid-template-columns:22px minmax(0,1fr) auto}
  .isi-garis{display:none}
  .modul-kepala{grid-template-columns:auto minmax(0,1fr);gap:var(--s1) var(--s4);padding:var(--s4)}
  .modul-jumlah{grid-column:2}
  .isi-list{padding:0 var(--s4)}
}

/* ---------- KARTU HARGA ---------- */
.harga-kartu{background:var(--surface);border:var(--garis);border-radius:var(--r-2);padding:var(--s5)}
.harga-label{
  font-family:var(--font-ui);font-size:11.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3)
}
.harga-baris{display:flex;flex-direction:column;gap:var(--s1);margin-top:10px}
.harga-cta{width:100%;margin-top:var(--s5)}
.harga-kedua{width:100%;margin-top:10px}
.harga-fitur{list-style:none;display:grid;gap:11px;margin:var(--s5) 0 0;padding-top:var(--s5);border-top:var(--garis)}
.harga-fitur li{
  display:grid;grid-template-columns:17px minmax(0,1fr);gap:10px;align-items:start;
  font-family:var(--font-ui);font-size:14px;line-height:1.5;color:var(--ink-2)
}
.harga-fitur svg{color:var(--hijau);margin-top:3px}

.progres-blok{margin-top:var(--s5);padding-top:var(--s5);border-top:var(--garis)}
.progres-baris{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);
  font-family:var(--font-ui);font-size:13px;font-weight:600;color:var(--ink)
}
.progres-baris b{font-variant-numeric:tabular-nums}
.progres-blok .bar{margin-top:10px}
.progres-catatan{margin-top:10px;font-family:var(--font-ui);font-size:12.5px;color:var(--ink-3)}

/* ---------- HALAMAN MATERI ---------- */
/* Halaman baca: kepalanya dinaikkan sedikit supaya judul materi
   berdiri lebih dekat dengan bilah navigasi. */
.pelajaran{padding-top:var(--s6)}
.pelajaran-layout{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);
  gap:var(--s7);align-items:start
}
.pelajaran-utama{min-width:0}
.pelajaran-samping{min-width:0;position:sticky;top:90px}
@media(max-width:980px){
  .pelajaran-layout{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  .pelajaran-samping{position:static}
  /* Daftar materi tidak lagi digulir di dalam kartu: di layar sempit
     dua area gulir yang bertumpuk membingungkan. */
  .daftar-gulir{max-height:none;overflow:visible}
}

.pelajaran-judul{font-size:clamp(1.65rem,1.25rem + 1.5vw,2.2rem);margin-top:var(--s3)}
.pelajaran-kemajuan{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s5);max-width:400px}
.pelajaran-kemajuan .bar{flex:1;height:5px}
.pelajaran-persen{
  font-family:var(--font-ui);font-size:12px;font-weight:600;color:var(--ink-3);
  white-space:nowrap;font-variant-numeric:tabular-nums
}
.pelajaran-utama>.quiz-feedback{margin-top:var(--s5)}
.pelajaran-video{
  aspect-ratio:16/9;margin-top:var(--s6);border:var(--garis);border-radius:var(--r-2);
  overflow:hidden;background:var(--ink)
}
.pelajaran-video iframe{width:100%;height:100%;border:0;display:block}
.pelajaran-tautan{margin-top:var(--s5)}
.pelajaran-isi{margin-top:var(--s6)}
.pelajaran-aksi{
  margin-top:var(--s7);padding-top:var(--s5);border-top:var(--garis);
  display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap
}
.pelajaran-aksi-nota{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-ui);font-size:13px;color:var(--ink-2)
}
.pelajaran-aksi-nota svg{color:var(--hijau);flex:none}

/* Sidebar daftar materi */
.daftar-kartu{background:var(--surface);border:var(--garis);border-radius:var(--r-2);padding:var(--s5)}
.daftar-atas{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);
  font-family:var(--font-ui);font-size:13px;font-weight:600;color:var(--ink)
}
.daftar-atas b{font-variant-numeric:tabular-nums}
.daftar-kartu .bar{margin-top:10px}
.daftar-gulir{margin-top:var(--s5);max-height:min(58vh,460px);overflow-y:auto;overscroll-behavior:contain}
.daftar-modul{
  font-family:var(--font-ui);font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin:var(--s4) 0 var(--s2);line-height:1.5
}
.daftar-modul:first-child{margin-top:0}
.daftar-list{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.daftar-item{
  display:grid;grid-template-columns:18px minmax(0,1fr);gap:9px;align-items:start;
  padding:8px 10px;margin:0 -10px;border-radius:var(--r-1);border-left:2px solid transparent;
  font-family:var(--font-ui);font-size:13.5px;line-height:1.45;color:var(--ink-2)
}
.daftar-item svg{margin-top:2px;color:var(--line-2)}
.daftar-item a{color:var(--ink-2);text-decoration:none}
.daftar-item a:hover{color:var(--nila);text-decoration:underline;text-underline-offset:.18em}
.daftar-item.is-done{color:var(--ink-2)}
.daftar-item.is-done svg{color:var(--hijau)}
.daftar-item.is-now{
  background:var(--amber-kabut);border-left-color:var(--amber);color:var(--ink);font-weight:600
}
.daftar-item.is-now svg{color:var(--amber-tua)}
.daftar-item.is-locked{color:var(--ink-3)}
.daftar-kaki{
  margin-top:var(--s4);padding-top:var(--s4);border-top:var(--garis);
  font-family:var(--font-ui);font-size:12.5px;color:var(--ink-3)
}

/* ---------- PEMBAYARAN ---------- */
.bayar-wrap{max-width:560px}
.bayar-kartu{background:var(--surface);border:var(--garis);border-radius:var(--r-2);padding:var(--s6)}
.bayar-judul{font-size:1.7rem;margin-top:var(--s2)}
.bayar-item{
  display:grid;grid-template-columns:42px minmax(0,1fr);gap:var(--s4);align-items:center;
  margin-top:var(--s5);padding:var(--s4) 0;border-top:var(--garis);border-bottom:var(--garis)
}
.bayar-ikon{
  display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:var(--r-1);background:var(--nila-kabut);border:1px solid #dbe1ee;color:var(--nila)
}
.bayar-item-tx b{display:block;font-family:var(--font-ui);font-size:15px;font-weight:600;color:var(--ink);line-height:1.35}
.bayar-item-tx span{display:block;font-family:var(--font-ui);font-size:13.5px;color:var(--ink-2);margin-top:2px;line-height:1.45}

.rincian{margin:var(--s5) 0 0;display:grid;gap:11px}
.rincian-baris{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);
  font-family:var(--font-ui);font-size:14.5px;color:var(--ink-2)
}
.rincian-baris dt{color:var(--ink-2)}
.rincian-baris dd{margin:0;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.rincian-total{margin-top:var(--s2);padding-top:var(--s4);border-top:var(--garis);align-items:center}
.rincian-total dt{
  font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap
}
.bayar-form{margin-top:var(--s5)}
.input-kapital{text-transform:uppercase}
.input-kapital::placeholder{text-transform:none}
.bayar-cta{width:100%;margin-top:var(--s2)}
.bayar-catatan{
  display:grid;grid-template-columns:17px minmax(0,1fr);gap:10px;align-items:start;
  margin-top:var(--s5);font-family:var(--font-ui);font-size:13.5px;line-height:1.55;color:var(--ink-2)
}
.bayar-catatan svg{margin-top:3px;color:var(--ink-3)}
.bayar-metode{
  list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:var(--s4) 0 0;padding:0
}
.bayar-metode li{
  font-family:var(--font-ui);font-size:11.5px;font-weight:600;letter-spacing:.06em;
  color:var(--ink-2);background:var(--paper-2);border:var(--garis);border-radius:var(--r-3);padding:5px 10px
}
.bayar-peringatan{margin-top:var(--s5)}
@media(max-width:620px){.bayar-kartu{padding:var(--s5)}}

/* ---------- HASIL PEMBAYARAN ---------- */
.hasil{max-width:620px;text-align:center}
.hasil-ikon{
  display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;
  border-radius:50%;border:var(--garis);background:var(--surface);color:var(--ink-2);margin-bottom:var(--s5)
}
.hasil-ikon svg{width:28px;height:28px}
.hasil-ikon.is-ok{background:var(--hijau-kabut);border-color:#cfe6d9;color:var(--hijau)}
.hasil-ikon.is-tunggu{background:var(--amber-kabut);border-color:#f0e0bf;color:var(--amber-tua)}
.hasil-judul{font-size:clamp(1.7rem,1.3rem + 1.4vw,2.3rem)}
.hasil-teks{color:var(--ink-2);margin-top:var(--s4);font-size:16px;max-width:52ch;margin-inline:auto}
.hasil-kode{
  display:inline-flex;align-items:center;gap:9px;margin-top:var(--s5);padding:8px 14px;
  border:var(--garis);border-radius:var(--r-1);background:var(--paper-2);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--ink-2)
}
.hasil-kode b{color:var(--ink);font-weight:600}
.hasil-aksi{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:var(--s6)}

/* Catatan bahasa di kepala kursus versi Inggris: satu baris kecil yang
   jujur bahwa isi materinya ditulis dalam bahasa Indonesia. */
.kursus-nota-bahasa{font-size:.86rem;color:var(--ink-3);margin:-4px 0 10px}

/* ==== 40-member.css ==== */
/* ============================================================
   40-member.css — RUANG BELAJAR, UJIAN, DAN SERTIFIKAT
   Bagian tempat orang bekerja, bukan tempat orang dirayu.
   Karena itu semuanya tenang: satu angka besar bersempit serif,
   sisanya garis rambut dan ruang kosong. Sertifikat digarap
   seperti dokumen cetak sungguhan, bukan piala berkilau.
   Semua warna dan jarak diambil dari 00-fondasi.css.
   ============================================================ */

/* ============================================================
   1. KEPALA HALAMAN BELAJARKU
   ============================================================ */
.mb-head-in{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s5);flex-wrap:wrap}
.mb-head-tx{max-width:56ch}
.mb-head-tx .eyebrow{display:block}
.mb-head h1{margin-top:var(--s2);font-size:clamp(2rem,1.5rem + 2.1vw,3.05rem)}
.mb-head-out{flex:none;padding-top:2px}

/* ============================================================
   2. PANEL DASBOR
   Tiap panel dibuka label kecil yang disambung garis rambut
   sampai ujung kolom. Struktur terbaca sebelum isinya dibaca.
   ============================================================ */
.mb-flash{margin-bottom:var(--s5)}

.mb-top{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);gap:var(--s5);align-items:start}
.mb-side{display:grid;gap:var(--s5)}

.mb-panel{background:var(--surface);border:var(--garis);border-radius:var(--r-2);padding:var(--s5)}
.mb-panel>*+*{margin-top:var(--s3)}
.mb-panel>.mb-figure{margin-top:var(--s4)}
.mb-panel>.streak-grid,.mb-panel>.mb-act,.mb-panel>.mb-done{margin-top:var(--s5)}

.mb-panel-h{
  display:flex;align-items:center;gap:var(--s3);
  font-family:var(--font-ui);font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.mb-panel-h::after{content:"";flex:1;height:1px;background:var(--line)}

/* Angka besar bersempit serif: satu-satunya suara keras di halaman ini. */
.mb-figure{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.mb-num{
  font-family:var(--font-judul);font-weight:600;font-size:2.45rem;line-height:1;
  letter-spacing:-.022em;color:var(--nila);
}
.mb-streak .mb-num{font-size:clamp(3rem,2.1rem + 2.6vw,4.3rem)}
.mb-num.mb-num-tx{font-size:1.45rem;color:var(--ink-2);letter-spacing:-.01em}
.mb-unit{font-family:var(--font-ui);font-size:14px;color:var(--ink-2)}
.mb-level{font-family:var(--font-judul);font-weight:600;font-size:2.6rem;line-height:1;letter-spacing:-.022em;color:var(--nila)}
.mb-panel .muted-text{font-size:13.5px;line-height:1.55}
.mb-done{display:flex;align-items:center;gap:8px;font-family:var(--font-ui);font-size:13.5px;color:var(--hijau)}
.mb-push{min-height:1.3em}
.mb-act{align-self:flex-start}

/* ============================================================
   3. KALENDER RUNTUTAN 28 HARI
   Kotak terisi nila, kotak kosong kertas, semua dibatasi garis
   rambut. Hari ini ditandai satu-satunya aksen amber di panel.
   ============================================================ */
.streak-grid{display:grid;grid-template-columns:repeat(14,1fr);gap:5px;max-width:392px}
.streak-cell{
  display:block;aspect-ratio:1;border:1px solid var(--line);
  border-radius:var(--r-3);background:var(--paper-2);
}
.streak-cell.hit{background:var(--nila);border-color:var(--nila)}
.streak-cell.today{box-shadow:0 0 0 2px var(--amber)}
.streak-legend{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);
  font-family:var(--font-ui);font-size:12px;color:var(--ink-3);
}
.streak-key{display:inline-flex;align-items:center;gap:7px}
.streak-key .streak-cell{width:12px;height:12px;aspect-ratio:auto;flex:none}

/* ============================================================
   4. KEPALA BAGIAN DI DALAM DASBOR
   ============================================================ */
.mb-sec{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
  margin:var(--s8) 0 var(--s5);padding-bottom:var(--s3);border-bottom:var(--garis);
}
.mb-sec h2{font-size:clamp(1.28rem,1.1rem + .68vw,1.62rem)}
.mb-sec-note{font-family:var(--font-ui);font-size:12.5px;color:var(--ink-3)}

/* ============================================================
   5. LAJUR ANGKA
   Satu bidang putih dibagi garis rambut, seperti tabel neraca.
   ============================================================ */
.mb-stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  background:var(--surface);border:var(--garis);border-radius:var(--r-2);overflow:hidden;
}
.mb-stat{padding:var(--s5);border-left:var(--garis);min-width:0}
.mb-stat:first-child{border-left:none}
.mb-stat .mb-num{display:block;margin:var(--s2) 0 var(--s1)}
.mb-stat .muted-text{font-size:13px;line-height:1.5}

/* ============================================================
   6. DAFTAR KURSUS
   ============================================================ */
.mb-list{background:var(--surface);border:var(--garis);border-radius:var(--r-2);padding:0 var(--s5)}
.mb-course{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 208px;
  gap:var(--s5);align-items:center;padding:var(--s5) 0;border-top:var(--garis);
}
.mb-course:first-child{border-top:none}
.mb-course-tx{min-width:0}
.mb-course-kind{
  font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--amber-tua);
}
.mb-course-tx h3{margin-top:6px;font-size:1.08rem}
.mb-course-tx .muted-text{margin-top:5px;font-size:13px}
.mb-course-prog{min-width:0}
.mb-prog-row{
  display:flex;justify-content:space-between;gap:var(--s3);margin-bottom:8px;
  font-family:var(--font-ui);font-size:12.5px;color:var(--ink-2);
}
.mb-prog-row b{color:var(--ink);font-weight:600}
.mb-course-act{display:flex;flex-direction:column;align-items:stretch;gap:9px;text-align:right;min-width:0}
.mb-course-act .btn{width:100%;min-width:0;overflow:hidden}
.mb-course-act .btn span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-course-done{
  display:flex;align-items:center;justify-content:flex-end;gap:6px;
  font-family:var(--font-ui);font-size:12.5px;color:var(--hijau);
}
.mb-course-act .muted-text{font-size:12.5px}

/* ============================================================
   7. SERTIFIKAT YANG DIRAIH
   ============================================================ */
.mb-cert{display:flex;align-items:center;gap:var(--s4);padding:var(--s5) 0;border-top:var(--garis);flex-wrap:wrap}
.mb-cert:first-child{border-top:none}
.mb-cert-mark{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:42px;height:42px;border-radius:var(--r-1);
  background:var(--amber-kabut);border:var(--garis);color:var(--amber-tua);
}
.mb-cert-tx{flex:1;min-width:200px}
.mb-cert-tx h3{font-size:1.05rem}
.mb-cert-code{
  margin-top:4px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;letter-spacing:.05em;color:var(--ink-2);
}

/* ============================================================
   8. RIWAYAT KUIS — TABEL RINGAN BERGARIS
   ============================================================ */
.mb-log-wrap{background:var(--surface);border:var(--garis);border-radius:var(--r-2);overflow-x:auto}
.mb-log{width:100%;border-collapse:collapse;font-family:var(--font-ui);font-size:14px}
.mb-log th,.mb-log td{padding:13px var(--s5);text-align:left;border-top:var(--garis)}
.mb-log thead th{
  border-top:none;background:var(--paper-2);color:var(--ink-3);
  font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
}
.mb-log td{color:var(--ink-2)}
.mb-log-day{color:var(--ink)}
.mb-log-score{font-weight:600;color:var(--ink);white-space:nowrap}
.mb-log-meter{display:flex;align-items:center;gap:11px;min-width:150px}
.mb-log-meter .bar{flex:1}
.mb-log-meter b{font-size:12.5px;font-weight:600;color:var(--ink-2);width:36px;text-align:right}

/* ============================================================
   9. KEADAAN KOSONG DAN TAUTAN KAKI
   ============================================================ */
.mb-empty{background:var(--surface);border:var(--garis);border-radius:var(--r-2);padding:var(--s6)}
.mb-empty h3{margin-top:var(--s3)}
.mb-empty p{margin-top:var(--s3);color:var(--ink-2);max-width:62ch;font-size:15px}
.mb-empty .btn{margin-top:var(--s5)}
.mb-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:var(--s7);padding-top:var(--s5);border-top:var(--garis)}

@media(max-width:1000px){
  .mb-top{grid-template-columns:1fr}
  .mb-side{grid-template-columns:1fr 1fr}
}
@media(max-width:940px){
  .mb-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mb-stat:nth-child(odd){border-left:none}
  .mb-stat:nth-child(n+3){border-top:var(--garis)}
}
@media(max-width:860px){
  .mb-course{grid-template-columns:1fr;gap:var(--s4)}
  .mb-course-act{align-items:flex-start;text-align:left}
  .mb-course-act .btn{width:auto;max-width:100%}
  .mb-course-done{justify-content:flex-start}
}
@media(max-width:700px){
  .mb-side{grid-template-columns:1fr}
  .mb-sec{margin-top:var(--s7)}
  .mb-list{padding:0 var(--s4)}
  .mb-log th,.mb-log td{padding:12px var(--s4)}
}
@media(max-width:560px){
  /* Di layar sempit bilah kemajuan dilepas, angkanya sudah cukup bicara. */
  .mb-log th,.mb-log td{padding:12px var(--s3)}
  .mb-log-meter{min-width:0}
  .mb-log-meter .bar{display:none}
  .mb-log-meter b{width:auto}
}
@media(max-width:520px){
  .mb-stats{grid-template-columns:1fr}
  .mb-stat{border-left:none}
  .mb-stat+.mb-stat{border-top:var(--garis)}
  .mb-head-out{margin-left:auto}
}

/* ============================================================
   10. MASUK DAN DAFTAR
   Satu kartu sempit di tengah kertas. Tidak ada hiasan apa pun.
   ============================================================ */
.auth-shell{max-width:430px;margin:0 auto}
.auth-card{background:var(--surface);border:var(--garis);border-radius:var(--r-2);padding:var(--s6)}
.auth-head{text-align:center;padding-bottom:var(--s5);border-bottom:var(--garis);margin-bottom:var(--s5)}
.auth-head .eyebrow{display:block;margin-bottom:var(--s2)}
.auth-head h1{font-size:clamp(1.7rem,1.45rem + 1vw,2.1rem)}
.auth-head p{margin-top:var(--s2);color:var(--ink-2);font-size:14.5px}
.auth-msg{margin-bottom:var(--s5)}
.auth-check{
  display:flex;align-items:center;gap:10px;min-height:44px;margin:var(--s2) 0 var(--s4);
  font-family:var(--font-ui);font-size:13.5px;color:var(--ink-2);cursor:pointer;
}
.auth-check input{width:18px;height:18px;min-height:0;flex:none;accent-color:var(--nila)}
.auth-full{width:100%}
.auth-sub{
  margin-top:var(--s5);padding-top:var(--s5);border-top:var(--garis);
  text-align:center;font-family:var(--font-ui);font-size:14px;color:var(--ink-2);
}
.auth-note{margin-top:var(--s4);text-align:center;font-size:12.5px;color:var(--ink-3);line-height:1.55}

/* ============================================================
   11. TES LEVEL — PEMILIHAN TUJUAN
   ============================================================ */
.goal-grid{display:grid;gap:var(--s3);margin-top:var(--s5)}
.goal-btn{
  display:flex;align-items:center;gap:var(--s4);width:100%;min-height:76px;
  padding:var(--s4) var(--s5);text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-1);
  font-family:var(--font-ui);color:var(--ink);
  transition:border-color var(--gerak),background var(--gerak);
}
.goal-btn:hover{border-color:var(--nila);background:var(--nila-kabut)}
.goal-ic{width:26px;height:26px;flex:none;color:var(--nila)}
.goal-tx{flex:1;min-width:0}
.goal-tx b{display:block;font-size:15.5px;font-weight:600;line-height:1.3}
.goal-tx small{display:block;margin-top:3px;font-size:13.5px;color:var(--ink-2);line-height:1.45}
.goal-go{width:18px;height:18px;flex:none;color:var(--ink-3)}
.goal-btn:hover .goal-go{color:var(--nila)}
.goal-foot{margin-top:var(--s5);text-align:center;font-size:13px;color:var(--ink-3)}

/* ============================================================
   12. SATU PERTANYAAN, SATU HALAMAN
   Soal diberi ruang. Tidak ada apa pun di sekelilingnya yang
   menarik mata selain kalimat yang harus dijawab.
   ============================================================ */
.quiz-meta{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);flex-wrap:wrap;
  margin-bottom:var(--s3);font-family:var(--font-ui);font-size:12.5px;color:var(--ink-2);
}
.quiz-level{letter-spacing:.22em;color:var(--nila)}
.q-feedback{margin-top:var(--s5)}
.quiz-feedback .ic-s{display:inline-block;vertical-align:-3px;margin-right:4px}

.q-card{background:var(--surface);border:var(--garis);border-radius:var(--r-2);padding:var(--s7) var(--s6);margin-top:var(--s5)}
.q-skill{
  font-family:var(--font-ui);font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber-tua);
}
.q-prompt{
  margin:var(--s3) 0 var(--s6);font-family:var(--font-judul);font-weight:600;
  font-size:clamp(1.35rem,1.1rem + 1.05vw,1.8rem);line-height:1.3;letter-spacing:-.012em;color:var(--ink);
}
.q-next{margin-top:var(--s6)}

/* Pilihan jawaban: keadaan terpilih dibuat tegas tanpa bayangan. */
.opt-label{min-height:52px;font-family:var(--font-ui);font-size:15px;line-height:1.45}
.opt-label input[type=radio]{width:19px;height:19px;flex:none;accent-color:var(--nila)}
.opt-label>span{flex:1;min-width:0}
.opt-label:has(input:checked){border-color:var(--nila);background:var(--nila-kabut);box-shadow:inset 0 0 0 1px var(--nila)}
.opt-label:has(input:focus-visible){outline:2px solid var(--nila);outline-offset:3px}

/* ============================================================
   13. HASIL TES LEVEL
   ============================================================ */
.level-wrap{text-align:center}
.level-big{
  display:block;margin-top:var(--s4);font-family:var(--font-judul);font-weight:600;
  font-size:clamp(4rem,2.2rem + 7.4vw,7rem);line-height:.94;letter-spacing:-.035em;color:var(--nila);
}
.level-rule{display:block;width:120px;height:1px;margin:var(--s5) auto 0;background:var(--line-2)}
.level-lead{margin:var(--s5) auto 0;max-width:52ch;font-size:16px;color:var(--ink-2)}
.level-score{margin-top:var(--s2);font-family:var(--font-ui);font-size:13.5px;color:var(--ink-3)}

.res-card{background:var(--surface);border:var(--garis);border-radius:var(--r-2);padding:var(--s6)}
.res-card+.res-card{margin-top:var(--s5)}
.res-note{margin-top:var(--s5);padding-top:var(--s4);border-top:var(--garis);font-size:13px;color:var(--ink-3);line-height:1.6}

.skill-list{margin-top:0}
.skill-row{display:grid;grid-template-columns:minmax(84px,1fr) minmax(0,3fr) 46px;align-items:center;gap:var(--s4);padding:13px 0;border-top:var(--garis)}
.skill-row:first-child{border-top:none}
.skill-row label{font-family:var(--font-ui);font-size:13.5px;font-weight:600;color:var(--ink)}
.skill-row b{font-family:var(--font-ui);font-size:13.5px;font-weight:600;color:var(--ink-2);text-align:right}

.path-step p{font-size:15px;color:var(--ink-2)}
.path-step .path-ic{font-family:var(--font-ui);font-size:12.5px;font-weight:600}
.res-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:var(--s6)}

/* ============================================================
   14. KUIS HARIAN
   ============================================================ */
.daily-guest{margin-bottom:var(--s5)}
.daily-form{background:var(--surface);border:var(--garis);border-radius:var(--r-2);padding:var(--s6)}
/* Kolom tersembunyi @csrf jadi anak pertama form, jadi pemisah dipasang
   antar-soal, bukan lewat :first-child. */
.daily-q{padding:var(--s6) 0}
.daily-q:first-of-type{padding-top:0}
.daily-q:last-of-type{padding-bottom:var(--s5)}
.daily-q+.daily-q{border-top:var(--garis)}
.daily-num{
  font-family:var(--font-ui);font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber-tua);
}
.daily-q h3{
  margin:var(--s3) 0 var(--s5);font-family:var(--font-judul);
  font-size:clamp(1.12rem,1.02rem + .55vw,1.4rem);line-height:1.35;color:var(--ink);
}
.daily-send{padding-top:var(--s5);border-top:var(--garis)}
.daily-done{background:var(--surface);border:var(--garis);border-radius:var(--r-2);padding:var(--s7) var(--s6);text-align:center}
.daily-done h2{font-size:1.5rem;margin-top:var(--s4)}
.daily-done p{margin-top:var(--s3);color:var(--ink-2)}
.daily-done .btn{margin-top:var(--s5)}
.daily-streak{display:flex;justify-content:center;align-items:center;gap:8px;color:var(--ink)}
.daily-streak .ic-s{color:var(--amber-tua)}

/* ============================================================
   15. HASIL KUIS HARIAN
   ============================================================ */
.score-head{text-align:center}
.score-big{
  display:block;margin-top:var(--s4);font-family:var(--font-judul);font-weight:600;
  font-size:clamp(3rem,2rem + 4.4vw,4.6rem);line-height:1;letter-spacing:-.03em;color:var(--nila);
}
.score-of{font-size:.44em;color:var(--ink-3);letter-spacing:0}
.score-note{margin-top:var(--s4);font-size:15px;color:var(--ink-2)}
.score-note b{color:var(--ink)}
/* svg dibuat block di fondasi, jadi ikon di dalam kalimat dikembalikan jadi inline. */
.score-note .ic-s,.daily-done .ic-s,.mb-empty .chip .ic-s{display:inline-block;vertical-align:-3px}
.score-note .ic-s{margin-right:6px}

.review-list{display:grid;gap:var(--s3);margin-top:var(--s5)}
.review-item{
  padding:var(--s4) var(--s5);background:var(--surface);
  border:var(--garis);border-left:3px solid var(--line-2);border-radius:var(--r-1);
}
.review-item.good{background:var(--surface);border-color:var(--line);border-left-color:var(--hijau);color:var(--ink)}
.review-item.bad{background:var(--surface);border-color:var(--line);border-left-color:var(--merah);color:var(--ink)}
.review-q{display:flex;gap:9px;align-items:flex-start;font-size:15px;font-weight:600;color:var(--ink)}
.review-mark{flex:none;margin-top:3px;color:var(--hijau)}
.review-item.bad .review-mark{color:var(--merah)}
.review-item .muted-text{margin-top:6px;padding-left:26px}

/* ============================================================
   16. SERTIFIKAT — DOKUMEN CETAK
   Bidang putih, bingkai garis ganda, nama dalam serif besar.
   Ukuran di dalamnya memakai satuan cqi supaya proporsi kertas
   tetap sama entah dilihat di layar kecil atau dicetak A4.
   ============================================================ */
.cert-section{padding-top:var(--s6)}
.cert-hint{display:none;font-family:var(--font-ui);font-size:13px;color:var(--ink-3);text-align:center;margin-bottom:var(--s3)}
.cert-scroll{overflow-x:auto;padding-bottom:var(--s2)}
.cert-stage{min-width:600px;max-width:980px;margin:0 auto;container-type:inline-size}

.cert-sheet{
  position:relative;aspect-ratio:297/210;overflow:hidden;
  background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--naik-halus);
}
.cert-edge{position:absolute;inset:2.6cqi;border:1.5px solid var(--nila);pointer-events:none}
.cert-edge::after{content:"";position:absolute;inset:.85cqi;border:1px solid var(--line-2)}
/* Cap air: hanya boleh terasa, tidak boleh terbaca. */
.cert-watermark{position:absolute;top:50%;left:50%;width:24cqi;transform:translate(-50%,-50%);opacity:.025;pointer-events:none}

.cert-inner{
  position:relative;height:100%;display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:6.2cqi 9.4cqi 5.4cqi;
}
.cert-body{
  flex:1;min-height:0;width:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
}
.cert-head{display:flex;align-items:center;gap:1.6cqi}
.cert-logo{width:4.4cqi;height:4.4cqi}
.cert-brand{text-align:left;line-height:1.2}
.cert-brand b{
  display:block;font-family:var(--font-judul);font-weight:600;
  font-size:max(13px,2.15cqi);letter-spacing:.14em;color:var(--nila);
}
.cert-brand small{
  display:block;margin-top:.3cqi;font-family:var(--font-ui);font-size:max(7.5px,1.15cqi);
  font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
}

.cert-rule{display:flex;align-items:center;gap:1cqi;width:17cqi;margin-top:1.8cqi}
.cert-rule i{flex:1;height:1px;background:var(--line-2)}
.cert-rule span{width:.55cqi;height:.55cqi;flex:none;background:var(--nila);transform:rotate(45deg)}

.cert-kind{
  font-family:var(--font-ui);font-weight:600;font-size:max(9px,1.3cqi);line-height:1.5;
  letter-spacing:.28em;text-transform:uppercase;color:var(--amber-tua);
}
.cert-lead{margin-top:1.8cqi;font-family:var(--font-judul);font-style:italic;font-size:max(11px,1.8cqi);line-height:1.4;color:var(--ink-2)}
.cert-name{
  margin-top:.8cqi;font-family:var(--font-judul);font-weight:600;font-size:max(24px,5.9cqi);
  line-height:1.04;letter-spacing:-.022em;color:var(--nila-tua);max-width:100%;
  overflow-wrap:break-word;text-wrap:balance;
}
.cert-name-rule{display:block;width:34cqi;max-width:76%;height:1px;margin-top:1.5cqi;background:var(--line-2)}
.cert-course{
  margin-top:.6cqi;font-family:var(--font-judul);font-weight:600;font-size:max(15px,2.85cqi);
  line-height:1.2;color:var(--ink);max-width:86%;
}
.cert-meta{margin-top:1.6cqi;font-family:var(--font-ui);font-size:max(8.5px,1.3cqi);line-height:1.5;color:var(--ink-2)}
.cert-meta i{font-style:normal;color:var(--line-2);margin:0 .5cqi}

.cert-foot{width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:2cqi;padding-top:2.4cqi}
.cert-cell{min-width:0}
.cert-cell-qr{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.cert-qr{width:9.4cqi;padding:.5cqi;background:var(--surface);border:1px solid var(--line-2)}
.cert-qr div{line-height:0}
/* qrcode.js menaruh canvas lalu menyembunyikannya dan memakai <img> hasil toDataURL.
   Jadi jangan paksa display, cukup samakan ukurannya. */
.cert-qr canvas,.cert-qr img{width:100% !important;height:auto !important}
.cert-cap{margin-top:.7cqi;font-family:var(--font-ui);font-size:max(7px,1.02cqi);line-height:1.45;color:var(--ink-3)}
.cert-cell-seal{display:flex;justify-content:center}
.cert-seal{width:12.4cqi;height:12.4cqi;color:var(--nila)}
.cert-seal-tx{font-family:var(--font-ui);font-size:9px;font-weight:600;letter-spacing:.16em;fill:var(--amber-tua)}
.cert-cell-sign{text-align:center;padding-bottom:.4cqi}
.cert-sign-rule{display:block;width:88%;margin:0 auto 1cqi;height:1px;background:var(--ink)}
.cert-sign-name{font-family:var(--font-judul);font-weight:600;font-size:max(10px,1.72cqi);line-height:1.3;color:var(--nila-tua)}
.cert-sign-role{margin-top:.4cqi;font-family:var(--font-ui);font-size:max(7.5px,1.18cqi);color:var(--ink-2)}

/* Tombol dan tautan di bawah kertas */
.cert-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:var(--s6)}
.cert-actions .ic{width:18px;height:18px}
.cert-actions-sub{
  display:flex;gap:var(--s2) var(--s5);justify-content:center;flex-wrap:wrap;
  margin-top:var(--s4);padding-top:var(--s4);border-top:var(--garis);
  font-family:var(--font-ui);font-size:13.5px;
}
.cert-actions-sub a,.cert-actions-sub button{
  background:none;border:none;padding:4px 0;min-height:32px;cursor:pointer;
  font-family:var(--font-ui);font-size:13.5px;color:var(--nila);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;
  text-decoration-color:var(--line-2);
}
.cert-actions-sub a:hover,.cert-actions-sub button:hover{color:var(--nila-tua);text-decoration-color:var(--amber-tua)}
.cert-copyok{text-align:center;margin-top:var(--s3)}

@media(max-width:820px){
  .cert-hint{display:block}
  .cert-section{padding-top:var(--s5)}
}
@media(max-width:700px){
  /* Di layar sempit kertas dikecilkan sampai batas masih terbaca,
     sisanya digeser mendatar di dalam wadahnya sendiri. */
  .cert-stage{min-width:480px}
}
@media(max-width:560px){
  .cert-actions{flex-direction:column}
  .cert-actions .btn{width:100%}
  .cert-actions-sub{gap:var(--s2) var(--s4)}
}

/* ---------- Cetak sertifikat: A4 lanskap, tanpa cangkang situs ---------- */
@media print{
  @page{size:A4 landscape;margin:9mm}
  /* Cangkang situs yang belum tercakup aturan cetak fondasi, dimatikan
     hanya di halaman yang memang memuat kertas sertifikat. */
  body:has(.cert-sheet){background:var(--surface) !important}
  body:has(.cert-sheet) .announce,
  body:has(.cert-sheet) .mobile-panel,
  body:has(.cert-sheet) .chat-nudge{display:none !important}
  .cert-section{padding:0 !important}
  .cert-section .wrap{max-width:none !important;width:100% !important;padding:0 !important;margin:0 !important}
  .cert-scroll{overflow:visible !important;padding:0 !important}
  /* Lebar dan tinggi dikunci dalam milimeter dengan perbandingan A4 lanskap,
     jadi proporsi yang keluar dari printer persis seperti yang terlihat di layar. */
  .cert-stage{min-width:0 !important;max-width:none !important;width:262mm !important;margin:0 auto !important}
  .cert-sheet{
    aspect-ratio:auto !important;width:100% !important;height:185mm !important;
    border:none !important;box-shadow:none !important;
    break-inside:avoid;page-break-inside:avoid;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  .cert-hint{display:none !important}
}

/* ============================================================
   17. HALAMAN VERIFIKASI
   ============================================================ */
.vf-section{padding-top:var(--s7)}
.vf-status{
  display:flex;gap:var(--s5);align-items:flex-start;padding:var(--s6);
  background:var(--surface);border:var(--garis);border-radius:var(--r-2);
}
.vf-status h1{margin-top:var(--s3);font-size:clamp(1.7rem,1.4rem + 1.5vw,2.45rem)}
.vf-status p{margin-top:var(--s3);color:var(--ink-2);font-size:15px}
.vf-status p b{color:var(--ink)}
.vf-badge{
  flex:none;width:54px;height:54px;border-radius:var(--r-1);
  display:flex;align-items:center;justify-content:center;border:var(--garis);
}
.vf-badge .ic{width:26px;height:26px}
.vf-ok{border-left:3px solid var(--hijau)}
.vf-ok .vf-badge{background:var(--hijau-kabut);color:var(--hijau)}
.vf-bad{border-left:3px solid var(--merah)}
.vf-bad .vf-badge{background:var(--merah-kabut);color:var(--merah)}
.chip-red-soft{background:var(--merah-kabut);border-color:var(--line-2);color:var(--merah)}

.vf-card{margin-top:var(--s5);background:var(--surface);border:var(--garis);border-radius:var(--r-2);overflow:hidden}
.vf-card-top{
  display:flex;align-items:center;gap:10px;padding:12px var(--s5);
  background:var(--nila);color:#fff;
  font-family:var(--font-ui);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
}
.vf-card-top img{width:22px;height:22px;filter:brightness(0) invert(1);opacity:.9}
.vf-list{padding:0 var(--s5) var(--s5)}
.vf-list>div{
  display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:var(--s2) var(--s5);
  padding:var(--s4) 0;border-top:var(--garis);
}
.vf-list>div:first-child{border-top:none}
.vf-list dt{
  padding-top:4px;font-family:var(--font-ui);font-size:11.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
}
.vf-list dd{font-family:var(--font-judul);font-size:1.15rem;line-height:1.35;color:var(--ink)}
.vf-list dd.vf-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;letter-spacing:.08em;color:var(--nila)}
.vf-list dd .muted-text{font-family:var(--font-ui);font-size:13.5px}
.vf-tips{padding:var(--s4) var(--s5) var(--s5);margin-left:1.2em;display:grid;gap:var(--s3);font-size:14.5px;color:var(--ink-2)}
.vf-tips b{color:var(--ink)}
.vf-note{margin-top:var(--s4);font-size:13px;color:var(--ink-3);line-height:1.6}

.vf-form{margin-top:var(--s6);padding-top:var(--s5);border-top:var(--garis)}
.vf-form label{display:block;margin-bottom:8px;font-family:var(--font-ui);font-size:13.5px;font-weight:600;color:var(--ink)}
.vf-row{display:flex;gap:var(--s2);flex-wrap:wrap}
.vf-row input{flex:1;min-width:220px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.07em;text-transform:uppercase}

.vf-how{margin-top:var(--s7);padding:var(--s6);background:var(--paper-2);border:var(--garis);border-radius:var(--r-2)}
.vf-how h2{font-size:1.32rem}
.vf-how ol{margin:var(--s4) 0 0 1.25em;display:grid;gap:var(--s3);font-size:15px;color:var(--ink-2);line-height:1.6}
.vf-how ol b{color:var(--ink)}
.vf-how .muted-text{display:block;margin-top:var(--s5);padding-top:var(--s4);border-top:var(--garis);line-height:1.6}

.vf-cta{margin-top:var(--s7);padding-top:var(--s5);border-top:var(--garis);text-align:center}
.vf-cta p{font-family:var(--font-judul);font-size:1.2rem;color:var(--ink);margin-bottom:var(--s4)}
.vf-cta .ic{width:18px;height:18px}

@media(max-width:560px){
  .q-card{padding:var(--s6) var(--s5)}
  .daily-form,.auth-card,.res-card,.mb-empty,.daily-done{padding:var(--s5)}
  .vf-section{padding-top:var(--s6)}
  .vf-status{flex-direction:column;gap:var(--s4);padding:var(--s5)}
  .vf-list>div{grid-template-columns:1fr}
  .vf-row input{min-width:0;width:100%}
  .vf-row .btn{width:100%}
  .vf-how{padding:var(--s5)}
}

/* ==== 50-halaman.css ==== */
/* ============================================================
   50-halaman.css — HALAMAN PENDUKUNG
   Pencarian, FAQ, Pendiri, Metode, Kebijakan Editorial,
   Kuis Berhadiah, asisten EVA, dan halaman kesalahan.

   Semua bahan diambil dari 00-fondasi.css: kertas, tinta nila,
   satu aksen amber, garis rambut, dan ruang kosong. Tidak ada
   gradien, kaca, maupun cahaya di berkas ini.
   ============================================================ */

/* ============================================================
   1. PENCARIAN
   Hasil dibaca seperti indeks buku: kelompok berjudul kecil,
   garis rambut memisahkan tiap catatan.
   ============================================================ */

.search-form{display:flex;gap:var(--s2);max-width:580px;margin-top:var(--s5)}
.search-form input[type=search]{flex:1;min-width:0;-webkit-appearance:none;appearance:none}
.search-form input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
.search-form button{
  flex:none;min-height:46px;padding:0 20px;cursor:pointer;
  font-family:var(--font-ui);font-size:15px;font-weight:600;
  color:#fff;background:var(--nila);border:1px solid var(--nila);border-radius:var(--r-1);
  transition:background var(--gerak)
}
.search-form button:hover{background:var(--nila-tua)}

.search-count{margin-top:var(--s4);font-family:var(--font-ui);font-size:14.5px;color:var(--ink-2)}
.search-count b{color:var(--ink);font-weight:600}

/* Satu kolom baca untuk hasil, selebar kolom naskah. Kisi bacaan populer
   di bawahnya tetap memakai lebar penuh. */
.search-group,.search-invite,.search-foot{max-width:790px}

/* Kepala kelompok: label kecil lalu garis yang memanjang ke ujung kolom. */
.search-group + .search-group{margin-top:var(--s7)}
.search-group-h{
  display:flex;align-items:center;gap:10px;margin:0 0 var(--s2);
  font-family:var(--font-ui);font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);line-height:1
}
.search-group-h .ic-s{color:var(--amber-tua)}
.search-group-h::after{content:"";flex:1;height:1px;background:var(--line)}
.search-group-n{
  font-size:12px;font-weight:600;letter-spacing:0;color:var(--ink-2);
  font-variant-numeric:tabular-nums
}

.search-list{border-top:var(--garis);margin-top:var(--s4)}
.search-item{
  position:relative;display:block;padding:var(--s5) 46px var(--s5) 0;
  border-bottom:var(--garis);color:inherit;text-decoration:none
}
.search-item .chip{margin-bottom:10px}
.search-item h3{font-size:1.16rem;line-height:1.3;color:var(--ink)}
.search-item p{
  margin-top:8px;font-family:var(--font-ui);font-size:15px;
  line-height:1.6;color:var(--ink-2)
}
.search-item:hover{text-decoration:none}
.search-item:hover h3{color:var(--nila)}

/* Sorotan kata kunci: kertas amber pucat, tinta tetap gelap. */
.search-item mark{
  background:var(--amber-kabut);color:var(--ink);
  padding:.05em .12em;border-radius:var(--r-3);
  -webkit-box-decoration-break:clone;box-decoration-break:clone
}

.search-meta{
  display:flex;flex-wrap:wrap;align-items:center;margin-top:10px;
  font-family:var(--font-ui);font-size:12.5px;color:var(--ink-2)
}
.search-meta span + span::before{content:"·";padding:0 8px;color:var(--line-2)}

.search-go,.prize-go{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  color:var(--line-2);transition:color var(--gerak),transform var(--gerak)
}
.search-item:hover .search-go,.prize-row:hover .prize-go{
  color:var(--nila);transform:translateY(-50%) translateX(3px)
}

.search-foot{
  margin-top:var(--s7);padding-top:var(--s5);border-top:var(--garis);
  font-size:14.5px;color:var(--ink-2)
}

/* Halaman ajakan: dipakai saat belum ada kata kunci dan saat hasil nihil. */
.search-invite{
  background:var(--surface);border:var(--garis);border-radius:var(--r-2);
  padding:var(--s6)
}
.search-invite h2{font-size:clamp(1.3rem,1.1rem + .7vw,1.65rem)}
.search-invite p{margin-top:var(--s3);max-width:66ch}
.search-keys{display:flex;flex-wrap:wrap;gap:9px;margin-top:var(--s5)}
.search-keys a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
  font-family:var(--font-ui);font-size:14px;font-weight:600;
  color:var(--ink-2);background:var(--paper);text-decoration:none;
  border:1px solid var(--line-2);border-radius:999px;
  transition:border-color var(--gerak),color var(--gerak)
}
.search-keys a:hover{border-color:var(--nila);color:var(--nila);text-decoration:none}
.search-outs{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-top:var(--s5);padding-top:var(--s5);border-top:var(--garis)
}
.search-invite + .search-group-h,.search-invite + .search-pop{margin-top:var(--s8)}
.search-pop{margin-top:var(--s8)}
.search-pop .grid{margin-top:var(--s5)}

@media(max-width:560px){
  .search-item{padding-right:0}
  .search-go{display:none}
  .search-invite{padding:var(--s5)}
  .search-form{flex-wrap:wrap}
  .search-form button{width:100%}
}

/* ============================================================
   2. TANYA JAWAB
   Daftar bergaris rambut. Pertanyaan serif, jawaban Inter.
   ============================================================ */

.faq-intro{margin-bottom:var(--s6);color:var(--ink-2);font-size:15.5px}
.faq-list{border-top:var(--garis)}
.faq-item{border-bottom:var(--garis)}
.faq-q{
  position:relative;display:block;cursor:pointer;list-style:none;
  padding:var(--s5) 42px var(--s5) 0;
  font-family:var(--font-judul);font-size:1.15rem;font-weight:600;
  line-height:1.35;color:var(--ink)
}
.faq-q::-webkit-details-marker{display:none}
.faq-q::after{
  content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-family:var(--font-ui);font-size:20px;font-weight:400;line-height:1;
  color:var(--amber-tua)
}
.faq-item[open] > .faq-q::after{content:"\2212"}
.faq-item[open] > .faq-q{color:var(--nila)}
.faq-q:hover{color:var(--nila)}
.faq-a{
  padding:0 42px var(--s5) 0;max-width:70ch;
  font-family:var(--font-ui);font-size:15.5px;line-height:1.72;color:var(--ink-2)
}
.faq-a p + p{margin-top:.85em}
.faq-more{margin-top:var(--s4)}
.faq-more a{
  display:inline-flex;align-items:center;gap:7px;min-height:34px;
  font-size:14.5px;font-weight:600;color:var(--nila);text-decoration:none;
  border-bottom:1px solid var(--line-2);transition:border-color var(--gerak)
}
.faq-more a:hover{border-bottom-color:var(--amber);text-decoration:none}

@media(max-width:560px){
  .faq-q{font-size:1.06rem;padding-right:36px}
  .faq-a{padding-right:0}
}

/* ============================================================
   3. AJAKAN PENUTUP HALAMAN KEPERCAYAAN
   ============================================================ */

.founder-cta{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:var(--s5);
  margin-top:var(--s8);padding:var(--s6);
  background:var(--paper-2);border:var(--garis);border-radius:var(--r-2)
}
.founder-cta h3{font-size:1.26rem}
.founder-cta p{margin-top:var(--s2);max-width:48ch;color:var(--ink-2);font-size:15px}
.founder-cta-acts{display:flex;flex-wrap:wrap;gap:10px}
@media(max-width:620px){
  .founder-cta{padding:var(--s5)}
  .founder-cta-acts,.founder-cta-acts .btn{width:100%}
}

/* ============================================================
   4. HALAMAN PENDIRI
   Halaman kepercayaan yang paling penting: pelat potret,
   nama besar, kutipan serif miring, lalu kredensial bergaris.
   ============================================================ */

.founder-hero{background:var(--paper-2);border-bottom:var(--garis);padding:var(--s7) 0 var(--s8)}
.founder-head{
  display:grid;grid-template-columns:186px 1fr;gap:var(--s6);
  align-items:center;margin-top:var(--s6)
}
.founder-photo{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-2)
}
.founder-photo img{width:100%;height:100%;object-fit:cover}
.founder-photo::after{
  content:"";position:absolute;inset:10px;border:1px solid var(--line);
  border-radius:var(--r-3);pointer-events:none
}
.founder-mono{
  font-family:var(--font-judul);font-size:92px;font-weight:600;line-height:1;
  color:var(--nila);letter-spacing:.01em
}
.founder-id h1{margin-top:var(--s3);font-size:clamp(1.7rem,1.3rem + 1.5vw,2.3rem)}
.founder-deg{
  margin-top:var(--s3);font-family:var(--font-ui);font-size:14.5px;
  font-weight:600;letter-spacing:.02em;color:var(--ink-2)
}
.founder-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s5)}

.founder-quote{
  margin-top:var(--s2);padding-left:var(--s5);
  border-left:3px solid var(--amber);
  font-family:var(--font-judul);font-style:italic;font-weight:400;
  font-size:clamp(1.28rem,1.05rem + 1.05vw,1.72rem);line-height:1.45;
  color:var(--ink)
}

.founder-facts{margin:var(--s7) 0;border-top:var(--garis)}
.founder-facts > div{
  display:grid;grid-template-columns:180px 1fr;gap:var(--s4);
  padding:13px 0;border-bottom:var(--garis)
}
.founder-facts dt{
  font-family:var(--font-ui);font-size:11.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);padding-top:3px
}
.founder-facts dd{font-family:var(--font-ui);font-size:15.5px;color:var(--ink)}
.founder-facts + .article-body > h2:first-child{margin-top:0}

@media(max-width:820px){
  .founder-head{grid-template-columns:156px 1fr;gap:var(--s5)}
  .founder-mono{font-size:68px}
}
@media(max-width:620px){
  .founder-head{grid-template-columns:1fr;gap:var(--s5);align-items:start}
  .founder-photo{width:150px;aspect-ratio:4/5}
  .founder-facts > div{grid-template-columns:1fr;gap:5px}
}

/* ============================================================
   5. HALAMAN NASKAH PANJANG (METODE, EDITORIAL)
   ============================================================ */

.trust-body{margin-top:var(--s2)}
.trust-links{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);
  margin-top:var(--s8);padding-top:var(--s5);border-top:var(--garis)
}
.trust-links-h{
  margin-top:var(--s8);padding-top:var(--s7);border-top:var(--garis);
  display:block
}
.trust-links-h + .trust-links{margin-top:var(--s5);padding-top:0;border-top:none}
.trust-link{
  display:block;padding:var(--s4);color:inherit;text-decoration:none;
  background:var(--surface);border:var(--garis);border-radius:var(--r-2);
  transition:border-color var(--gerak)
}
.trust-link:hover{border-color:var(--line-2);text-decoration:none}
.trust-link b{
  display:block;font-family:var(--font-judul);font-size:1.04rem;
  font-weight:600;color:var(--ink);line-height:1.25;text-wrap:balance
}
.trust-link span{display:block;margin-top:5px;font-size:13.5px;color:var(--ink-2);line-height:1.5}
@media(max-width:760px){.trust-links{grid-template-columns:1fr}}

/* ============================================================
   6. KUIS BERHADIAH
   ============================================================ */

/* Arsip: satu baris satu kuis, dipisah garis rambut. */
.prize-list{border-top:var(--garis)}
.prize-row{
  position:relative;display:grid;grid-template-columns:auto 1fr;
  gap:var(--s4);align-items:start;
  padding:var(--s5) 46px var(--s5) 0;border-bottom:var(--garis);
  color:inherit;text-decoration:none
}
.prize-row:hover{text-decoration:none}
.prize-row-title{
  display:block;font-family:var(--font-judul);font-size:1.16rem;font-weight:600;
  line-height:1.3;color:var(--ink)
}
.prize-row:hover .prize-row-title{color:var(--nila)}
.prize-row-meta{
  display:flex;flex-wrap:wrap;align-items:center;margin-top:7px;
  font-family:var(--font-ui);font-size:13.5px;color:var(--ink-2)
}
.prize-row-meta span + span::before{content:"·";padding:0 8px;color:var(--line-2)}
@media(max-width:560px){
  .prize-row{padding-right:0}
  .prize-go{display:none}
}

/* Kepala kuis: fakta pokok berjajar di bawah garis. */
.prize-facts{
  display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);
  margin-top:var(--s5);padding-top:var(--s5);border-top:var(--garis)
}
.prize-fact{min-width:104px}
.prize-fact span{
  display:block;font-family:var(--font-ui);font-size:11.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)
}
.prize-fact b{
  display:block;margin-top:5px;font-family:var(--font-ui);
  font-size:16px;font-weight:600;color:var(--ink)
}

.prize-panel{
  background:var(--surface);border:var(--garis);border-radius:var(--r-2);
  padding:var(--s6)
}
.prize-panel + .prize-panel{margin-top:var(--s5)}
.prize-panel h2{font-size:1.26rem}
.prize-panel > p{margin-top:var(--s3);color:var(--ink-2);font-size:15px;line-height:1.65}
.prize-panel .btn{margin-top:var(--s5)}
.prize-note{
  margin-top:var(--s5);padding-top:var(--s4);border-top:var(--garis);
  font-size:13.5px;color:var(--ink-2)
}
.prize-done{text-align:center}
.prize-check{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;margin-bottom:var(--s4);
  border-radius:50%;background:var(--hijau-kabut);
  border:1px solid #cfe6d9;color:var(--hijau)
}
.prize-empty{padding:var(--s7) 0;text-align:center;color:var(--ink-2)}
.prize-flash{margin-bottom:var(--s5)}

/* Papan skor: tabel ringan, hanya garis mendatar. */
.prize-board-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s4)
}
.prize-board-head p{font-family:var(--font-ui);font-size:13px;color:var(--ink-2)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.prize-board{
  width:100%;border-collapse:collapse;
  font-family:var(--font-ui);font-size:14.5px
}
.prize-board th{
  padding:0 var(--s3) 10px;text-align:left;border-bottom:var(--garis);
  font-size:11.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);white-space:nowrap
}
.prize-board td{padding:11px var(--s3);border-bottom:var(--garis);color:var(--ink)}
.prize-board tbody tr:last-child td{border-bottom:none}
.prize-board th:first-child,.prize-board td:first-child{padding-left:0;width:52px}
.prize-board th:last-child,.prize-board td:last-child{
  padding-right:0;text-align:right;color:var(--ink-2);
  font-variant-numeric:tabular-nums;white-space:nowrap
}
.prize-board th:nth-child(3),.prize-board td:nth-child(3){text-align:right;width:76px}
.prize-board .prize-name{font-weight:600;color:var(--ink)}
.prize-board .prize-score{font-variant-numeric:tabular-nums;white-space:nowrap}
.prize-rank{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:28px;height:28px;border-radius:50%;
  background:var(--paper-2);border:1px solid var(--line);
  font-size:13px;font-weight:700;color:var(--ink-2);
  font-variant-numeric:tabular-nums
}
.prize-rank.top{background:var(--amber-kabut);border-color:#f0e0bf;color:var(--amber-tua)}

@media(max-width:560px){
  .prize-board{font-size:13.5px}
  .prize-board th,.prize-board td{padding:10px 8px}
  .prize-board th:first-child,.prize-board td:first-child{width:40px}
  .prize-board th:nth-child(3),.prize-board td:nth-child(3){width:52px}
  .prize-rank{min-width:24px;height:24px;font-size:12px}
  .prize-panel{padding:var(--s5)}
}

/* Ruang main: bilah waktu menempel di atas selama soal digulir. */
.prize-head{
  position:sticky;top:70px;z-index:20;
  padding:var(--s4) 0 var(--s3);background:var(--paper)
}
.prize-bar{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s4);margin-bottom:10px
}
.prize-bar b{font-family:var(--font-judul);font-size:1.08rem;font-weight:600;color:var(--ink)}
.prize-timer{
  font-family:var(--font-ui);font-size:20px;font-weight:700;
  color:var(--nila);font-variant-numeric:tabular-nums;letter-spacing:.02em
}
.prize-form{
  margin-top:var(--s5);padding:var(--s6);
  background:var(--surface);border:var(--garis);border-radius:var(--r-2)
}
.prize-q{padding-bottom:var(--s6);margin-bottom:var(--s6);border-bottom:var(--garis)}
.prize-qnum{
  font-family:var(--font-ui);font-size:11.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--amber-tua)
}
.prize-q h3{margin:var(--s3) 0 var(--s4);font-size:1.14rem;line-height:1.35}
@media(max-width:700px){
  .prize-head{top:66px}
  .prize-form{padding:var(--s5)}
}

/* ============================================================
   7. EVA — ASISTEN OBROLAN
   Tenang dan profesional: satu tombol nila, satu jendela kertas.
   .chatfab-ring sudah dimatikan di fondasi, tidak ada cincin cahaya.
   ============================================================ */

.chatfab{
  position:fixed;right:20px;bottom:20px;z-index:95;
  width:56px;height:56px;border-radius:50%;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;background:var(--nila);border:1px solid var(--nila-tua);
  box-shadow:var(--naik-halus);
  transition:background var(--gerak),transform var(--gerak)
}
.chatfab:hover{background:var(--nila-tua)}
.chatfab:active{transform:translateY(1px)}
.chatfab-ic,.chatfab-x{width:25px;height:25px;color:#fff}
.chatfab-x{display:none}
.chatfab.open .chatfab-ic{display:none}
.chatfab.open .chatfab-x{display:block}

.chat-nudge{
  position:fixed;right:20px;bottom:86px;z-index:92;
  max-width:min(258px,calc(100vw - 40px));padding:11px 14px;cursor:pointer;
  font-family:var(--font-ui);font-size:13.5px;line-height:1.5;color:var(--ink-2);
  background:var(--surface);border:var(--garis);border-radius:var(--r-2);
  box-shadow:var(--naik-halus)
}
.chat-nudge[hidden]{display:none}

.chatbox{
  position:fixed;right:20px;bottom:88px;z-index:90;
  display:flex;flex-direction:column;overflow:hidden;
  width:min(384px,calc(100vw - 40px));
  height:min(600px,calc(100vh - 150px));
  background:var(--surface);border:var(--garis);border-radius:var(--r-2);
  box-shadow:var(--naik);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity var(--gerak),transform var(--gerak),visibility var(--gerak)
}
.chatbox.open{opacity:1;visibility:visible;transform:none}

.chat-head{
  display:flex;align-items:center;gap:11px;flex:none;
  padding:10px 10px 10px var(--s4);
  background:var(--paper-2);border-bottom:var(--garis)
}
.chat-ava{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:36px;height:36px;border-radius:var(--r-1);
  background:var(--nila);color:#fff
}
.chat-ava .ic{width:19px;height:19px}
.chat-id{display:block;flex:1;min-width:0}
.chat-id b{
  display:block;font-family:var(--font-judul);font-size:16px;
  font-weight:600;line-height:1.2;color:var(--ink)
}
.chat-id small{
  display:flex;align-items:center;gap:6px;margin-top:2px;
  font-family:var(--font-ui);font-size:11.5px;color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.chat-dot{
  width:6px;height:6px;border-radius:50%;background:var(--hijau);
  flex:none;display:inline-block
}
.chat-min{
  flex:none;width:44px;height:44px;cursor:pointer;
  font-family:var(--font-ui);font-size:22px;line-height:1;
  color:var(--ink-2);background:none;border:1px solid transparent;border-radius:var(--r-1);
  transition:background var(--gerak),color var(--gerak)
}
.chat-min:hover{background:rgba(16,25,43,.06);color:var(--ink)}

.chat-msgs{
  flex:1;min-height:0;overflow-y:auto;
  display:flex;flex-direction:column;gap:10px;
  padding:var(--s4);background:var(--paper)
}
.chat-msgs .msg{
  max-width:86%;padding:10px 13px;border-radius:var(--r-2);
  font-family:var(--font-ui);font-size:14.8px;line-height:1.6
}
.chat-msgs .msg p{margin:0}
.chat-msgs .msg p + p{margin-top:.7em}
.chat-msgs .msg.bot{
  align-self:flex-start;color:var(--ink);
  background:var(--surface);border:var(--garis);border-bottom-left-radius:var(--r-3)
}
.chat-msgs .msg.user{
  align-self:flex-end;color:var(--ink);
  background:var(--nila-kabut);border:1px solid #dbe1ee;border-bottom-right-radius:var(--r-3)
}
.chat-msgs .msg a{color:var(--nila);text-decoration-color:var(--line-2)}
.chat-msgs .msg.typing{display:flex;align-items:center;gap:5px;padding:15px 14px}
.chat-msgs .msg.typing span{
  width:6px;height:6px;border-radius:50%;background:var(--ink-3);
  animation:chat-blink 1.2s infinite
}
.chat-msgs .msg.typing span:nth-child(2){animation-delay:.18s}
.chat-msgs .msg.typing span:nth-child(3){animation-delay:.36s}
@keyframes chat-blink{0%,60%,100%{opacity:.28}30%{opacity:1}}

.chat-chips{
  display:flex;flex-wrap:wrap;gap:7px;flex:none;
  padding:0 var(--s4) var(--s3);background:var(--paper)
}
.chat-chips:empty{display:none}
.chat-chip{
  display:inline-flex;align-items:center;min-height:44px;padding:0 14px;cursor:pointer;
  font-family:var(--font-ui);font-size:13px;font-weight:600;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line-2);border-radius:999px;
  transition:border-color var(--gerak),color var(--gerak)
}
.chat-chip:hover{border-color:var(--nila);color:var(--nila)}

.chat-in{
  display:flex;gap:8px;flex:none;padding:var(--s3);
  background:var(--surface);border-top:var(--garis)
}
.chat-in input{flex:1;min-width:0;min-height:44px;font-size:15px}
.chat-send{
  flex:none;width:44px;height:44px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;background:var(--nila);border:1px solid var(--nila);border-radius:var(--r-1);
  transition:background var(--gerak)
}
.chat-send:hover{background:var(--nila-tua)}
.chat-send .ic{width:19px;height:19px}

@media(max-width:520px){
  .chatfab{right:16px;bottom:16px}
  .chat-nudge{right:16px;bottom:82px;max-width:min(262px,calc(100vw - 84px))}
  .chatbox{
    right:12px;left:12px;bottom:82px;width:auto;
    height:min(560px,calc(100vh - 130px));
    height:min(560px,calc(100dvh - 130px))
  }
}

/* ============================================================
   8. HALAMAN KESALAHAN
   Tenang dan manusiawi: kode besar dengan serif, satu garis
   amber, lalu jalan keluar yang jelas.
   ============================================================ */

.notfound{padding:var(--s9) 0;text-align:center}
.notfound > .wrap{width:100%}
.notfound .nf-code{
  font-family:var(--font-judul);font-weight:600;line-height:1;
  font-size:clamp(3.6rem,2.2rem + 6vw,6.4rem);letter-spacing:-.022em;
  color:var(--ink-2);font-variant-numeric:lining-nums
}
.notfound .nf-code::after{
  content:"";display:block;width:40px;height:2px;
  background:var(--amber);margin:var(--s5) auto 0
}
.notfound h1{margin-top:var(--s6);font-size:clamp(1.5rem,1.2rem + 1.3vw,2.15rem)}
.notfound p:not(.nf-code){
  margin:var(--s4) auto 0;max-width:52ch;
  color:var(--ink-2);font-size:16.5px
}
.notfound .hero-cta{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:var(--s6)
}
@media(max-width:700px){
  .notfound{padding:var(--s8) 0}
}

/* Riwayat pendidikan pendiri: lini masa bergaris dengan tahun mono,
   mengikuti bahasa tabel fakta di atasnya. */
.founder-almamater{list-style:none;margin:var(--s5) 0 0;padding:0}
.founder-almamater li{
  display:flex;gap:var(--s5);align-items:baseline;
  padding:var(--s4) 0;border-top:var(--garis)
}
.founder-almamater li:first-child{border-top:none;padding-top:0}
.alma-tahun{
  flex:none;width:92px;font-family:var(--font-data);font-size:12px;
  font-weight:500;letter-spacing:.05em;color:var(--ink-3);font-variant-numeric:tabular-nums
}
.alma-isi b{display:block;font-family:var(--font-judul);font-size:1.06rem;font-weight:600;color:var(--ink);line-height:1.3}
.alma-isi small{display:block;margin-top:3px;font-size:13.5px;color:var(--ink-2)}
@media(max-width:560px){
  .founder-almamater li{gap:var(--s4)}
  .alma-tahun{width:74px}
}