/* ================================================================
   portal-modul.css — gaya bersama halaman Portal Murid & Modul Belajar
   Dipakai oleh: portal.html, modul.html
   Sebelumnya CSS ini disalin utuh di dalam <style> kedua halaman
   (18,7 KB x 2). Dipisah agar ter-cache browser dan cukup dirawat
   di satu tempat.
================================================================ */
/* <picture> adalah elemen inline yang menambah tinggi baris. Untuk logo,
   tinggi barisnya dinolkan agar tinggi tetap ditentukan <img> seperti semula. */
.nav-brand picture,.footer-brand picture,.nikola-hero-logo picture{line-height:0;font-size:0}
.nav-brand picture img,.footer-brand picture img,.nikola-hero-logo picture img{display:block}

/* ══ SISTEM GAYA — mengikuti token & tipografi index.html ══ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --c-bg:#f8fafc; --c-card:#ffffff; --c-soft:#eff6ff; --c-glass:rgba(255,255,255,.72); --c-nav:rgba(248,250,252,.88);
  --c-ink:#0c1825; --c-ink-2:#3d5166; --c-ink-3:#64748b; --c-ink-4:#94a3b8;
  --c-primary:#0284c7; --c-primary-2:#6366f1; --c-accent:#059669;
  --c-line:#e2e8f0;
  --grad:linear-gradient(135deg,#0284c7,#6366f1);
  --grad-soft:linear-gradient(135deg,rgba(2,132,199,.10),rgba(99,102,241,.10));
  --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:32px;
  --sh-sm:0 1px 6px rgba(12,24,37,.06);
  --sh:0 4px 24px rgba(2,132,199,.08),0 1px 6px rgba(12,24,37,.04);
  --sh-lg:0 16px 48px rgba(2,132,199,.13),0 4px 16px rgba(12,24,37,.06);
  --ease-spring:cubic-bezier(.16,1,.3,1);
  --ease-smooth:cubic-bezier(.4,0,.2,1);
  --dur-fast:160ms; --dur:280ms; --dur-slow:700ms;
  /* Label & angka. Sebelumnya monospace sistem, sehingga bentuk huruf dan
     lebar angkanya berbeda antar-OS (macOS Menlo, Windows Consolas, Android
     fallback tak tentu). Kini memakai font yang sudah dimuat, dengan angka
     tabular supaya lebarnya seragam di semua perangkat tanpa unduhan tambahan. */
  --font-label:'Plus Jakarta Sans',system-ui,sans-serif;
}
html.theme-dark{
  --c-bg:#070e1c; --c-card:#0d1b30; --c-soft:#0f2138; --c-glass:rgba(13,27,48,.65); --c-nav:rgba(7,14,28,.9);
  --c-ink:#f1f5f9; --c-ink-2:#cbd5e1; --c-ink-3:#94a3b8; --c-ink-4:#64748b;
  --c-primary:#38bdf8; --c-primary-2:#818cf8; --c-accent:#34d399;
  --c-line:rgba(255,255,255,.08);
  --sh-sm:0 2px 10px rgba(0,0,0,.30);
  --sh:0 10px 34px rgba(0,0,0,.40);
  --sh-lg:0 28px 64px rgba(0,0,0,.55);
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;background:var(--c-bg);color:var(--c-ink);min-height:100dvh;overflow-x:clip;line-height:1.65;-webkit-font-smoothing:antialiased}
::selection{background:rgba(99,102,241,.22)}
a{color:inherit}
:focus-visible{outline:2px solid var(--c-primary);outline-offset:3px;border-radius:6px}

/* ── NAVBAR ── */
.nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--c-bg) 92%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--c-line)}
.nav-inner{max-width:1180px;margin:0 auto;padding:13px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav-brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:16px;color:var(--c-ink);letter-spacing:.02em;text-decoration:none;text-transform:uppercase;flex-shrink:0}
.nav-brand span{white-space:nowrap}
.nav-brand img{height:36px;width:auto}
.brand-accent{background:linear-gradient(90deg,#dc2626 0%,#f87171 38%,#fef08a 50%,#f87171 62%,#dc2626 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:800;letter-spacing:.02em;will-change:background-position;animation:brandShimmer 2.4s linear infinite;display:inline-block}
@keyframes brandShimmer{0%{background-position:0% center}100%{background-position:200% center}}
.nav-links{display:flex;align-items:center;gap:2px;flex-wrap:nowrap}
.nav-link{font-size:14px;font-weight:600;color:var(--c-ink-3);padding:9px 9px;border-radius:11px;text-decoration:none;transition:color var(--dur-fast);white-space:nowrap;flex-shrink:0}
.nav-link:hover,.nav-link.active{color:var(--c-primary)}
.nav-cta{margin-left:6px}
.nav-toggle{display:none;width:42px;height:42px;border:1px solid var(--c-line);background:var(--c-card);border-radius:12px;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px;margin-left:auto;flex-shrink:0}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--c-ink-2);border-radius:2px;transition:.25s}
.nav-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-actions{display:flex;align-items:center;gap:8px}
.nav-actions .nav-cta-desktop{display:inline-flex}
.nav-links .nav-cta-mobile{display:none}
.theme-toggle{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--c-line);background:var(--c-card);cursor:pointer;color:var(--c-ink-3);transition:color var(--dur-fast)}
.theme-toggle:hover{color:var(--c-primary)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .i-moon{display:none}
html.theme-dark .theme-toggle .i-sun{display:none}
html.theme-dark .theme-toggle .i-moon{display:block}
@media(max-width:1100px){
  /* Panel menu: top dirapatkan ke navbar dan dibuat bisa di-scroll, supaya
     seluruh item tetap terjangkau di layar pendek maupun saat HP dimiringkan. */
  .nav-links{position:fixed;inset:76px 12px auto 12px;flex-direction:column;align-items:stretch;gap:4px;padding:16px 18px 22px;background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-lg);box-shadow:var(--sh-lg);transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,transform .25s,visibility .25s;max-height:calc(100dvh - 88px);overflow-y:auto;overscroll-behavior:contain}
  .nav-links.show{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto}
  .nav-link{padding:13px 14px;font-size:15px}
  .nav-cta{margin:6px 0 0}
  .nav-toggle{display:flex}
  .nav-actions .nav-cta-desktop{display:none}
  .nav-links .nav-cta-mobile{display:inline-flex}
}

/* ── TOMBOL ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:inherit;font-weight:700;font-size:14.5px;cursor:pointer;border:none;border-radius:13px;padding:13px 24px;text-decoration:none;transition:transform var(--dur) var(--ease-spring),box-shadow var(--dur),background var(--dur);white-space:nowrap;position:relative;overflow:hidden}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 8px 24px rgba(2,132,199,.32)}
.btn-primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 14px 34px rgba(2,132,199,.42)}
.btn-ghost{background:var(--c-card);color:var(--c-ink-2);border:1.5px solid var(--c-line)}
.btn-ghost:hover{border-color:var(--c-primary);color:var(--c-primary);transform:translateY(-2px)}
.btn-yt{background:#FF0000;color:#fff;box-shadow:0 8px 24px rgba(255,0,0,.3)}
.btn-yt:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 14px 34px rgba(255,0,0,.42)}
.btn-yt::after{content:'';position:absolute;top:0;left:-130%;width:55%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg)}
.btn-yt:hover::after{animation:shine .9s ease}
@keyframes shine{from{left:-130%}to{left:150%}}
.btn-lg{padding:16px 32px;font-size:15.5px;border-radius:15px}
.btn svg{width:18px;height:18px;flex-shrink:0}

/* ── BREADCRUMB ── */
.breadcrumb{max-width:1180px;margin:0 auto;padding:20px 22px 0;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--c-ink-4)}
.breadcrumb a{color:var(--c-ink-4);text-decoration:none;transition:color var(--dur-fast)}
.breadcrumb a:hover{color:var(--c-primary)}

/* ── TATA LETAK UMUM ── */
.wrap{max-width:1000px;margin:0 auto;padding:0 22px}
.sec{padding:74px 0;border-top:1px solid var(--c-line)}
.sec:first-of-type{border-top:0}
.sec-label{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-label);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--c-ink-4);margin-bottom:14px}
.sec-label::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--grad);flex-shrink:0}
.sec-title{font-size:clamp(26px,3vw,38px);font-weight:800;letter-spacing:-.025em;line-height:1.18;color:var(--c-ink)}
.sec-title em{font-style:normal;background-image:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* Mode gelap: gradien asli terlalu redup di latar gelap (4.3:1). Dinaikkan ke
   nada terang agar tetap nyaman dibaca (9.0:1 dan 6.5:1). */
html.theme-dark .sec-title em,
html.theme-dark .hero h1 em{background-image:linear-gradient(135deg,#38bdf8,#818cf8)}
.sec-sub{font-size:clamp(15px,1.3vw,17.5px);color:var(--c-ink-3);line-height:1.7;margin-top:14px;max-width:62ch}
/* Ajakan doa di ujung kalimat panjang, mengikuti pola .lead-em di beranda.
   Di dalam judul, ukurannya diturunkan agar tidak mewarisi skala h2. */
.lead-em{display:block;margin-top:.7em;font-style:italic;font-weight:600;color:var(--c-ink-2)}
.sec-title .lead-em{font-size:clamp(17px,1.6vw,21px);letter-spacing:0;margin-top:.5em}

/* ── HERO ── */
.hero{padding:56px 0 8px}
.hero h1{font-size:clamp(32px,4.6vw,56px);font-weight:800;letter-spacing:-.03em;line-height:1.12;color:var(--c-ink)}
.hero h1 em{font-style:normal;background-image:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-lead{font-size:clamp(16px,1.45vw,19px);color:var(--c-ink-3);line-height:1.72;margin-top:18px;max-width:64ch}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero-meta{margin-top:20px;font-size:13px;color:var(--c-ink-4);line-height:1.6}
.hero-meta b{color:var(--c-ink-2);font-weight:700}

/* ── LEDGER (daftar baris bergaris tipis) ── */
.ledger{list-style:none;margin-top:26px;border-top:1px solid var(--c-line)}
.ledger li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--c-line)}
.ledger .no{font-family:var(--font-label);font-size:11.5px;font-weight:700;color:var(--c-ink-4);padding-top:3px}
.ledger .t{font-size:15px;font-weight:700;color:var(--c-ink);line-height:1.5}
.ledger .d{font-size:13.5px;color:var(--c-ink-3);line-height:1.62;margin-top:3px}
.ledger .tag{display:inline-block;font-family:var(--font-label);font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-primary);border:1px solid currentColor;border-radius:99px;padding:2px 8px;margin-left:8px;vertical-align:2px}
html.theme-dark .ledger .tag{color:var(--c-primary-2)}

/* ── GRUP MENU PORTAL ── */
.groups{list-style:none;margin-top:26px;border-top:1px solid var(--c-line)}
.groups li{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:20px;padding:15px 0;border-bottom:1px solid var(--c-line);align-items:baseline}
.groups .g{font-family:var(--font-label);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-ink-4)}
.groups .items{font-size:14px;color:var(--c-ink-2);line-height:1.6}
@media(max-width:640px){
  .groups li{grid-template-columns:1fr;gap:5px}
}

/* ── GAMBAR ── */
figure.shot{margin:0;border:1px solid var(--c-line);border-radius:var(--r-lg);background:var(--c-card);overflow:hidden;box-shadow:var(--sh-sm)}
figure.shot picture,figure.shot img{display:block;width:100%;height:auto}
figure.shot figcaption{display:block;padding:11px 16px;border-top:1px solid var(--c-line);font-size:11.5px;font-weight:600;color:var(--c-ink-4);line-height:1.5}
.shots-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:26px}
@media(max-width:700px){.shots-2{grid-template-columns:1fr}}
.mt-fig{margin-top:26px}
.lede-fig{margin-top:30px}

/* ── KARTU AJAKAN (CTA) ── */
.cta{margin-top:0;padding:64px 0 78px;border-top:1px solid var(--c-line);text-align:center}
.cta h2{font-size:clamp(24px,2.8vw,34px);font-weight:800;letter-spacing:-.025em;line-height:1.2;color:var(--c-ink)}
.cta p{font-size:15.5px;color:var(--c-ink-3);line-height:1.7;margin:14px auto 0;max-width:56ch}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:28px}

/* ── FOOTER ── Ft5 Statement: satu kalimat penutup mendominasi, tautan jadi rail horizontal */
.footer{border-top:1px solid var(--c-line);background:var(--c-card)}
.footer-inner{max-width:1180px;margin:0 auto;padding:clamp(48px,6vw,76px) 22px 0}

.footer-lead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px 40px}
.footer-lead-text{max-width:min(60ch,640px);min-width:0}
.footer-ar{font-family:'Amiri',serif;font-size:clamp(20px,2.4vw,26px);line-height:1.5;color:var(--c-primary);direction:rtl;text-align:left;margin:0 0 12px}
.footer-line{font-size:clamp(21px,3.2vw,34px);font-weight:800;letter-spacing:-.025em;line-height:1.2;color:var(--c-ink);margin:0;overflow-wrap:anywhere}
.footer-cta{flex-shrink:0}
/* Gradien .btn-primary asli hanya mencapai 4.35:1 dengan teks putih (di bawah AA
   untuk teks 14.5px). Di footer saja gradiennya diperdalam agar lulus AA,
   tanpa mengubah tombol yang sama di navbar/hero. */
.footer-cta.btn-primary{background:linear-gradient(135deg,#0369a1,#4f46e5)}
.footer-cta.btn-primary:hover{box-shadow:0 14px 34px rgba(3,105,161,.34)}

.footer-nav{display:flex;flex-direction:column;gap:12px;margin-top:clamp(34px,4.5vw,52px)}
.footer-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px}
.footer-row h2{flex:0 0 auto;width:104px;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-3);margin:0;line-height:1.2}
.footer-row a{font-size:14.5px;line-height:1.2;color:var(--c-ink-3);text-decoration:none;white-space:nowrap;transition:color var(--dur-fast)}
.footer-row a:hover{color:var(--c-primary)}
.footer-row a:focus-visible{outline:2px solid var(--c-primary);outline-offset:3px;border-radius:4px}

.footer-meta{margin-top:clamp(34px,4.5vw,52px);border-top:1px solid var(--c-line);padding:20px 0 28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.footer-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:15px;letter-spacing:.02em;text-transform:uppercase;color:var(--c-ink)}
.footer-brand img{height:28px;width:auto}
.footer-brand span{white-space:nowrap}
.footer-copy{font-size:13px;color:var(--c-ink-3);margin:0}

/* Beri ruang untuk tombol mengambang sekaligus home indicator iPhone di layar sempit. */
@media(max-width:640px){
  .footer-lead{align-items:flex-start}
  .footer-cta{width:100%}
  .footer-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px;margin-top:clamp(30px,7vw,40px)}
  .footer-row{display:contents}
  .footer-row h2{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .footer-row a{display:flex;align-items:center;min-height:44px;font-size:15px}
  .footer-meta{display:block;padding:18px 0 42px}
  .footer-brand{margin-bottom:10px}
  .footer-copy{max-width:22ch}
}

/* ── REVEAL ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
html.js [data-reveal]{opacity:0}
html.js [data-reveal].in{animation:fadeUp .65s var(--ease-spring) both}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  html.js [data-reveal]{opacity:1!important;transform:none!important}
  .brand-accent{animation:none;background:none;-webkit-text-fill-color:#dc2626;color:#dc2626}
}

/* ══════════════════════════════════════════════════════════════════════
   PERBAIKAN LAYAR HP
   Semua aturan di bawah dibungkus media query / @supports sehingga
   tampilan desktop dan laptop tidak berubah sama sekali.
   ══════════════════════════════════════════════════════════════════════ */

/* Token teks mikro: --c-ink-4 (#94a3b8) hanya 2.45:1 di latar terang. */
:root{--c-ink-micro:#5c6b7e}
html.theme-dark{--c-ink-micro:#94a3b8}

/* ── T-02 · Tombol navbar 40px → 44px ── */
/* Sengaja 900px, bukan 1100px: pada 901–1100px (laptop kecil) ukuran
   tombol tetap persis seperti semula. */
@media(max-width:900px){
  .theme-toggle{width:44px;height:44px}
  .nav-toggle{width:44px;height:44px}
  .nav-brand{min-height:44px}
  /* CTA punya padding inline di markup; selector dipersempit ke .nav-links
     agar tombol desktop .nav-cta-desktop tidak ikut berubah. */
  .nav-links .nav-cta-mobile{padding:13px 20px!important}
}

@media(max-width:640px){
  /* ── T-01 · Skala tipografi HP ── */
  .sec-label,.ledger .no,.groups .g{font-size:12px}
  .breadcrumb,.hero-meta,.ledger .d{font-size:14px}
  .ledger .tag{font-size:11.5px;padding:3px 9px}
  figure.shot figcaption{font-size:13px}

  /* ── T-02 · Area ketuk ── */
  .breadcrumb a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}

  /* ── T-05 · Kontras teks mikro ── */
  /* Breadcrumb: selector harus sepanjang aturan dasar (baris 118–120)
     supaya tidak kalah spesifisitas. */
  .breadcrumb,.breadcrumb span,.breadcrumb a{color:var(--c-ink-micro)}
  .sec-label,.ledger .no,.groups .g,figure.shot figcaption,.hero-meta{color:var(--c-ink-micro)}
  /* #0284c7 hanya 3.91:1 di latar --c-bg; nilai ini 5.67:1. */
  .ledger .tag{color:color-mix(in srgb,var(--c-primary) 72%,#0c4a6e)}
}

/* ── T-09 · pada 320px .nav-actions melampaui viewport sehingga tombol tema
   terpotong. Ruang didapat dengan merapatkan padding dan mengecilkan logo,
   bukan dengan memperkecil area ketuk. ── */
@media(max-width:360px){
  .nav-inner{padding:9px 12px;gap:8px}
  .nav-brand{font-size:14.5px;gap:9px;min-height:44px}
  .nav-brand img{height:28px}
  .nav-actions{gap:6px}
  .theme-toggle,.nav-toggle{width:44px;height:44px}
}

@supports(padding:max(0px)){
  .nav-inner{padding-top:max(13px,env(safe-area-inset-top))}
  .fab-group{right:max(16px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom))}
}
/* Padding safe-area panel menu hanya saat panel dipakai (<=1100px). */
@media(max-width:1100px){
  @supports(padding:max(0px)){
    .nav-links{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
  }
}

/* Tautan di dalam paragraf meta: tampilannya mengikuti teks, tetapi area
   ketuknya dinaikkan ke 44px di layar sentuh supaya nyaman disentuh. */
.meta-link{color:color-mix(in srgb,var(--c-primary) 72%,#0c4a6e);font-weight:700}
/* #0284c7 hanya 3.91:1 di latar --c-bg; campuran ini 5.67:1. */
@media(max-width:900px){
  .meta-link{display:inline-flex;align-items:center;min-height:44px}
}

/* Angka tabular: lebar digit seragam, jadi '01' dan '09' sama lebar
   dan tidak menggeser tata letak di perangkat mana pun. */
.turn-item-no,.stat-no,.alur-no b,.modul-list .ml-no,.ledger .no{font-variant-numeric:tabular-nums}