/* ============================================================
   stdsquare² — main stylesheet (Hugo production)
   5-theme switcher + full finder layout + responsive
   ============================================================ */

:root {
  /* Theme variables (overridden by JS, default = Japan — D-24 2026-07-15; nilai = data/themes.yaml japan) */
  --accent: #1A3FA0;
  --accent-pop: #BC002D;
  --accent-deep: #122C70;
  --accent-dark: #0C1E4D;
  --accent-tint: rgba(26,63,160,0.10);
  --accent2: #BC002D;
  --accent2-tint: rgba(188,0,45,0.10);

  --col1-bg: #F3F5F8;
  --col2-bg: #FAFBFD;
  --col3-bg: #FFFFFF;
  --welcome-bg: #FBFCFE;
  --topbar-bg: #EDF0F4;
  --text: #1A1A1A;
  --text-muted: #3A3F4A;
  --text-soft: #586072;
  --text-faint: #6E7480;
  --hairline: #E0E4EA;
  --hairline-soft: #EDF0F4;
  --card-bg: #F5F7FA;
  --selection-fg: #FFFFFF;
  --hover-bg: #E8EDF8;
  --hover-fg: #122C70;
  --code-bg: #F1F4F8;

  /* Fonts */
  --font-display: 'VT323', monospace;
  --font-body: 'Lora', serif;
  --font-ui: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100vh; overflow: hidden; }
body {
  font-family: var(--font-ui);
  background: var(--col1-bg);
  color: var(--text);
  transition: background 0.3s ease, color 0.3s ease;
}
* { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; }

@keyframes blink { 50% { opacity: 0; } }
/* W2.2 2026-07-15 — hormati preferensi OS "kurangi gerakan": semua animasi situs
   (blink kursor, fadeIn panel, view-transition) praktis mati; transisi warna tema tetap instan. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* View Transitions API — smooth artikel switch */
::view-transition-old(article-pane) { animation: 180ms ease-out both fadeOut; }
::view-transition-new(article-pane) { animation: 220ms ease-out both fadeInUp; }

.app { display: grid; grid-template-rows: auto 1fr auto; height: 100vh; }

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar {
  padding: 10px 22px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  gap: 16px;
}
.topbar .brand-link { text-decoration: none; color: inherit; }
.topbar .brand {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--text);
  line-height: 1;
}
.topbar .brand sup { font-size: 14px; color: var(--accent-deep); }
.topbar .crumb {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-soft);
}
.topbar .crumb b { color: var(--text); }
.topbar .crumb .arrow { color: var(--text-faint); margin: 0 4px; }

.theme-switcher {
  display: flex;
  gap: 6px;
  padding: 4px 8px;
  background: var(--col2-bg);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  align-items: center;
  position: relative;   /* stacking context agar tooltip nama tema tampil di atas area konten */
  z-index: 60;
}
.theme-switcher .label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0 6px;
  font-weight: 700;
}
.swatch {
  width: 22px; height: 22px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  position: relative;
  transition: transform 0.15s;
}
.swatch:hover { transform: scale(1.15); }
.swatch.active { border-color: var(--accent); }
.swatch.active::after {
  content: '✓';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 700;
  text-shadow: 0 0 3px rgba(0,0,0,0.5);
}
.swatch[data-theme="modern"] {
  background: linear-gradient(135deg, #DEE3ED 50%, #ECEFF6 50%);
  border: 2px solid #C7CCD8;
}
.swatch[data-theme="modern"].active { border-color: var(--accent); }
.swatch[data-theme="light-white"] {
  background: linear-gradient(135deg, #F4F4F5 50%, #FFFFFF 50%);
  border: 2px solid #E4E4E7;
}
.swatch[data-theme="light-white"].active { border-color: var(--accent); }
.swatch[data-theme="retro-cream"] {
  background: linear-gradient(135deg, #E8E0CB 50%, #F2ECD8 50%);
}
.swatch[data-theme="dark-retro"] {
  background: linear-gradient(135deg, #1A1715 50%, #23201D 50%);
}
.swatch[data-theme="cyberpunk"] {
  background: linear-gradient(135deg, #0A0014 50%, #1A0033 50%);
  box-shadow: 0 0 8px rgba(0,255,128,0.4), 0 0 4px rgba(255,0,200,0.3);
}
.swatch[data-theme="morocco"] {
  background: linear-gradient(135deg, #C1272D 50%, #0E8A4F 50%);
  border: 2px solid #E3E4E7;
}
.swatch[data-theme="morocco"].active { border-color: var(--accent); }
.swatch[data-theme="hijau"] {
  background: linear-gradient(135deg, #00C853 50%, #00E676 50%);
  border: 2px solid #E3E4E7;
}
.swatch[data-theme="hijau"].active { border-color: var(--accent); }
.swatch[data-theme="japan"] {
  background: linear-gradient(135deg, #1A3FA0 50%, #BC002D 50%);
  border: 2px solid #E0E4EA;
}
.swatch[data-theme="japan"].active { border-color: var(--accent); }
.swatch[data-theme="arcade"] {
  background: linear-gradient(135deg, #F5EFDC 50%, #D6002A 50%);
  border: 2px solid #1A1608;
  border-radius: 3px;
}
.swatch[data-theme="arcade"].active { border-color: var(--accent); }
.swatch-group-seru {
  display: flex;
  gap: 6px;
  align-items: center;
}
.swatch-group-seru[hidden] { display: none; }
.seru-toggle {
  background: none; border: 1px solid var(--hairline); color: var(--text-soft);
  cursor: pointer; border-radius: 14px; padding: 3px 10px; line-height: 1;
  font-family: var(--font-ui); font-size: 11px; font-weight: 600; white-space: nowrap;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.seru-toggle:hover { border-color: var(--accent); color: var(--accent); }
.seru-toggle[aria-expanded="true"] { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-tint); }
.swatch .tooltip {
  position: absolute;
  bottom: -28px; left: 50%;
  transform: translateX(-50%);
  background: var(--text); color: var(--col3-bg);
  padding: 3px 8px; border-radius: 4px;
  font-family: var(--font-mono); font-size: 10px;
  white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity 0.15s; z-index: 100;
}
.swatch:hover .tooltip { opacity: 1; }

.topbar .actions {
  display: flex; gap: 8px;
  font-family: var(--font-mono); font-size: 11px;
}
.topbar .actions a {
  color: var(--text-soft);
  text-decoration: none;
  padding: 5px 12px;
  border-radius: 4px;
  background: var(--col2-bg);
  border: 1px solid var(--hairline);
  cursor: pointer;
}
.topbar .actions a:hover {
  color: var(--accent-deep);
  background: var(--accent-tint);
  border-color: var(--accent);
}

/* ============================================================
   FINDER LAYOUT
   ============================================================ */
.finder { display: grid; grid-template-columns: var(--col1-w, 200px) var(--col2-w, 288px) 1fr; overflow: hidden; }

.col1, .col2 { overflow-y: auto; padding: 16px 12px; font-family: var(--font-ui); font-size: 14px; }
.col2 { padding: 14px 11px; }
.col1 { background: var(--col1-bg); border-right: 1px solid var(--hairline); }
.col2 { background: var(--col2-bg); border-right: 1px solid var(--hairline); }
.col1::-webkit-scrollbar, .col2::-webkit-scrollbar { width: 6px; }
.col1::-webkit-scrollbar-thumb, .col2::-webkit-scrollbar-thumb { background: var(--hairline-soft); border-radius: 3px; }

/* ===== FINDER COLUMN VIEW — KOLOM 1: daftar Pilar ===== */
.col1 .pillar-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 8px 11px; margin-bottom: 2px;
  border: none; background: none; cursor: pointer; text-align: left;
  border-radius: 6px; color: var(--text-soft);
  font-family: var(--font-ui); font-size: 14px; font-weight: 600;
}
.col1 .pillar-item .chev { color: var(--text-faint); font-size: 16px; opacity: 0; transition: opacity 0.12s; }
.col1 .pillar-item:hover { background: var(--hover-bg); color: var(--hover-fg); }
.col1 .pillar-item:hover .chev { opacity: 0.7; }
.col1 .pillar-item.active { background: var(--accent-dark); color: var(--selection-fg); font-weight: 700; }
.col1 .pillar-item.active .chev { opacity: 1; color: var(--selection-fg); }

/* ===== FINDER COLUMN VIEW — KOLOM 2: panel materi per pilar ===== */
.col2 { background: var(--col2-bg); }
.materi-panel { display: none; }
.materi-panel.active { display: block; animation: fadeIn 0.18s ease-out; }
.col2 .panel-head {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: var(--text);
  padding: 4px 8px 11px; margin-bottom: 6px;
  border-bottom: 1px solid var(--hairline-soft);
}
.col2 .panel-count { color: var(--text-faint); font-weight: 500; font-size: 11px; margin-left: auto; }
.col2 .level {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-faint); font-weight: 700; padding: 12px 8px 5px;
}
.col2 .level:first-of-type { padding-top: 2px; }
.col2 details.matkul-accordion summary.level { cursor: pointer; list-style: none; user-select: none; display: flex; align-items: center; justify-content: space-between; }
.col2 details.matkul-accordion summary.level::-webkit-details-marker { display: none; }
.col2 details.matkul-accordion summary.level::after { content: "▶"; font-size: 8px; transition: transform 0.18s ease; display: inline-block; width: 10px; color: var(--text-faint); text-align: right; }
.col2 details.matkul-accordion[open] > summary.level::after { transform: rotate(90deg); }
.col2 details.matkul-accordion summary.level:hover { color: var(--text-soft); }
.col2 .item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 7px 10px; margin-bottom: 1px; border-radius: 6px;
  color: var(--text-soft); text-decoration: none; position: relative;
  font-family: var(--font-ui); font-size: 14px; line-height: 1.4;
  text-transform: none;
}
.col2 .item .num { color: var(--text-faint); font-weight: 700; font-size: 14px; min-width: 20px; flex-shrink: 0; line-height: 1.4; }
.col2 .item .check { font-size: 10px; margin-left: 4px; color: var(--accent); }
.col2 .item:hover { background: var(--hover-bg); color: var(--hover-fg); }
.col2 .item.active { background: var(--accent-dark); color: var(--selection-fg); font-weight: 600; }
.col2 .item.active .num { color: rgba(255,255,255,0.7); }
.col2 .item.active .check { color: var(--accent-pop); }
.col2 .item.active::before {
  content: ''; position: absolute; left: -7px; top: 4px; bottom: 4px;
  width: 3px; background: var(--accent-pop); border-radius: 0 2px 2px 0;
}
/* Panel Kelas (list matkul per prodi, kolom-2) — tag "Smt N" & "LP" lintas-prodi */
.col2 .item .num-smt { min-width: 40px; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-faint); }
.col2 .item.active .num-smt { color: rgba(255,255,255,0.7); }
.col2 .item .item-title { flex: 1; }
.col2 .item .lp-tag {
  font-size: 9px; font-weight: 800; letter-spacing: 0.03em; padding: 1px 5px;
  border-radius: 4px; background: var(--accent2-tint); color: var(--accent2);
  flex-shrink: 0; align-self: center;
}
.col2 .item.active .lp-tag { background: rgba(255,255,255,0.18); color: var(--selection-fg); }
.col2 .item.hub-kelas-link { font-weight: 700; color: var(--accent2); border-bottom: 1px solid var(--hairline-soft); margin-bottom: 6px; padding-bottom: 9px; border-radius: 0; }
.col2 .item.hub-kelas-link:hover { background: var(--hover-bg); }
.col2 .item.hub-kelas-link .num { min-width: 20px; }

/* Tombol back (mobile drill-down) — disembunyikan di desktop */
.col2-back { display: none; }

/* ===== Sidebar tunggal: pilar = ACCORDION (details/summary), klik = expand/collapse di tempat ===== */
.col1 .pillar-link {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 11px; margin-bottom: 2px;
  border-radius: 6px; cursor: pointer; user-select: none; list-style: none;
  color: var(--text-soft); font-family: var(--font-ui); font-size: 15px; font-weight: 600;
}
.col1 .pillar-link::-webkit-details-marker { display: none; }
.col1 .pillar-link:hover { background: var(--hover-bg); color: var(--hover-fg); }
.col1 .pillar-link.active { color: var(--text); font-weight: 700; }
.col1 .pillar-link .caret::before {
  content: "▶"; font-size: 9px; color: var(--text-faint);
  display: inline-block; width: 12px; transition: transform 0.18s ease;
}
.col1 details.pillar-group[open] > .pillar-link .caret::before { transform: rotate(90deg); }
.col1 details.pillar-group[open] > .pillar-link .caret::before { color: var(--accent); }
.col1 .pillar-tree { margin: 0 0 10px 9px; padding-left: 8px; border-left: 2px solid var(--hairline-soft); }
.col1 .pillar-tree .level { padding-left: 4px; }
.col1 .pillar-tree .item { padding-left: 14px; }
/* ===== Mode fokus: sembunyikan sidebar -> konten full-width ===== */
/* Tombol "Menu" di topbar HANYA muncul saat sidebar disembunyikan (untuk membuka lagi) */
.sidebar-toggle {
  display: none; align-items: center; gap: 5px;
  background: var(--accent-tint); border: 1px solid var(--hairline);
  color: var(--accent-deep); cursor: pointer;
  font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  padding: 5px 10px; border-radius: 7px; line-height: 1;
}
.sidebar-toggle .st-ico { font-size: 14px; }
.sidebar-toggle:hover { background: var(--accent); color: var(--selection-fg); border-color: var(--accent); }
body.nav-collapsed .sidebar-toggle { display: inline-flex; }

/* Tombol "Sembunyikan" jelas di dalam sidebar (col1 header) */
.col1-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px 10px 6px;
}
.col1-head-title {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint);
}
.sidebar-hide-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--accent-tint); border: 1px solid var(--hairline);
  color: var(--accent-deep); cursor: pointer;
  font-family: var(--font-ui); font-size: 11px; font-weight: 600;
  padding: 4px 9px; border-radius: 7px; line-height: 1;
}
.sidebar-hide-btn .sh-ico { font-size: 13px; font-weight: 700; }
.sidebar-hide-btn:hover { background: var(--accent); color: var(--selection-fg); border-color: var(--accent); }

body.nav-collapsed .finder { grid-template-columns: 1fr; }
body.nav-collapsed .col1, body.nav-collapsed .col2 { display: none; }
@media (max-width: 900px) {
  .sidebar-toggle, body.nav-collapsed .sidebar-toggle { display: none; }
  .col1-head { display: none; }
}

.col1 .sec, .col1 .level {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  padding: 14px 10px 7px;
  font-weight: 700;
}
.col1 .sec:first-of-type, .col1 .level:first-of-type { padding-top: 0; }
.col1 .level { color: var(--text); opacity: 0.66; cursor: pointer; list-style: none; user-select: none; display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; letter-spacing: 0.02em; padding: 11px 10px 6px; }
.col1 .level::-webkit-details-marker { display: none; }
.col1 .level::before {
  content: "▶";
  font-size: 8px;
  transition: transform 0.18s ease;
  display: inline-block;
  width: 10px;
  color: var(--text-faint);
}
.col1 details[open] > .level::before { transform: rotate(90deg); }
.col1 .level:hover { opacity: 1; }

/* Expand/collapse animation untuk level group */
.col1 .level-group { padding: 0; }
.col1 .level-group:first-of-type > .level { padding-top: 0; }
.col1 .level-items {
  overflow: hidden;
  animation: levelExpand 0.22s ease-out;
}
@keyframes levelExpand {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.col1 .it, .col1 .item {
  padding: 9px 11px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-soft);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 9px;
  position: relative;
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: 14px;
}
.col1 .item { padding: 8px 11px 8px 18px; font-size: 13px; line-height: 1.5; align-items: flex-start; }

.col1 .it:hover, .col1 .item:hover {
  background: var(--hover-bg);
  color: var(--hover-fg);
}
.col1 .it.active, .col1 .item.active {
  background: var(--accent-dark);
  color: var(--selection-fg);
  font-weight: 700;
}
.col1 .it.active::before, .col1 .item.active::before {
  content: '';
  position: absolute; left: -10px;
  top: 4px; bottom: 4px;
  width: 3px;
  background: var(--accent-pop);
  border-radius: 0 2px 2px 0;
}
.col1 .it .icn { font-size: 13px; min-width: 14px; }

/* Item Kelas non-aktif (mis. "Magister & Doktor (segera)") — N1 Kelas-first */
.col1 .it.it-disabled {
  cursor: default; color: var(--text-faint); opacity: 0.55;
}
.col1 .it.it-disabled:hover { background: none; color: var(--text-faint); }
.col1 .it.it-disabled .it-soon { font-style: normal; font-size: 11px; margin-left: 2px; }

.col1 .item .num { color: var(--text-faint); margin-right: 6px; font-weight: 700; font-size: 13px; min-width: 18px; flex-shrink: 0; }
.col1 .item.active .num { color: rgba(255,255,255,0.7); }
.col1 .item .check { font-size: 10px; margin-left: 4px; color: var(--accent); }
.col1 .item.active .check { color: var(--accent-pop); }

.col1 .folder-head {
  padding: 6px 10px 12px;
  border-bottom: 1px solid var(--hairline-soft);
  margin-bottom: 10px;
}
.col1 .folder-head .title {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.col1 .folder-head .meta { font-size: 10px; color: var(--text-faint); margin-top: 4px; }

/* COL 3 */
.col3 {
  background: var(--col3-bg);
  overflow-y: auto;
  view-transition-name: article-pane;
}
.col3::-webkit-scrollbar { width: 8px; }
.col3::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 4px; }

/* ============================================================
   WELCOME STATE (homepage Col 3)
   ============================================================ */
.welcome { background: var(--welcome-bg); padding: 80px 60px 100px; min-height: 100%; }
.welcome-inner { max-width: 1100px; margin: 0 auto; }
.welcome .label {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.42em;
  color: var(--text-faint);
  text-transform: uppercase;
  margin-bottom: 32px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}
.welcome .label .sq {
  color: var(--accent-deep);
  font-family: var(--font-display);
  font-size: 16px;
  text-transform: none;
  letter-spacing: 0;
}
.welcome .label .dot { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; }
.welcome h1 {
  font-family: var(--font-display);
  font-size: 130px;
  line-height: 0.9;
  margin-bottom: 28px;
  color: var(--text);
  letter-spacing: -0.02em;
}
.welcome h1 .go { color: var(--accent); }
.welcome h1 .cursor {
  display: inline-block;
  width: 14px; height: 88px;
  background: var(--text);
  vertical-align: -10px;
  animation: blink 1.1s steps(2) infinite;
  margin-left: 5px;
}
.welcome .copy {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 740px;
  margin-bottom: 24px;
}
.welcome .sub {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 17px;
  max-width: 700px;
  margin-bottom: 44px;
  color: var(--accent-deep);
  padding: 18px 26px;
  background: var(--accent-tint);
  border-radius: 10px;
  line-height: 1.6;
}
.welcome .sub strong { font-weight: 700; font-style: normal; }
/* HOME-05 — subheadline literal WAJIB di atas game, di kedua state (pemain baru & xp>0) */
.welcome-subhead {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 720px;
  margin: 0 0 28px;
}
.welcome .hint {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-soft);
  margin-bottom: 48px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--card-bg);
  border-radius: 8px;
  width: fit-content;
}
.welcome .hint .arrow { color: var(--accent); font-size: 22px; animation: blink 1.8s steps(2) infinite; }
.welcome .diff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.welcome .diff-card {
  background: var(--card-bg);
  border: 1px solid var(--hairline-soft);
  border-radius: 16px;
  padding: 26px 24px;
  transition: all 0.2s;
}
.welcome .diff-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  border-color: var(--accent);
}
.welcome .diff-card .icon { font-size: 28px; margin-bottom: 12px; }
.welcome .diff-card h3 { font-family: var(--font-ui); font-size: 20px; font-weight: 700; margin-bottom: 10px; color: var(--text); }
.welcome .diff-card p { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--text-muted); }

/* ============================================================
   ARTICLE STATE (Col 3 saat artikel terbuka)
   ============================================================ */
.article {
  padding: 36px 56px 100px;
  max-width: 1380px;
  margin: 0 auto;
  animation: fadeIn 0.3s ease-out;
  color: var(--text);
}
.article .pill {
  display: inline-block;
  background: var(--accent-tint);
  color: var(--accent-deep);
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 4px 12px;
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
}
.article h1 {
  font-family: var(--font-body);
  font-size: calc(34px * var(--font-scale, 1));
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 10px;
  color: var(--text);
}
.article > .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hairline-soft);
  margin-bottom: 24px;
}
.article > .meta span { padding: 0 6px; color: var(--hairline); }

.article h2 {
  font-family: var(--font-body);
  font-size: calc(24px * var(--font-scale, 1));
  font-weight: 700;
  margin: 32px 0 12px;
  color: var(--text);
  padding-left: 14px;
  border-left: 3px solid var(--accent);
}
.article h3 {
  font-family: var(--font-body);
  font-size: calc(18px * var(--font-scale, 1));
  font-weight: 600;
  margin: 24px 0 10px;
  color: var(--text);
}
.article p {
  font-family: var(--font-body);
  font-size: calc(16px * var(--font-scale, 1));
  line-height: 1.72;
  color: var(--text-muted);
  margin-bottom: 18px;
}
.article p strong { color: var(--accent-deep); font-weight: 700; }
.article p em { font-style: italic; }
.article ul, .article ol {
  margin: 10px 0 18px 28px;
  font-family: var(--font-body);
  font-size: calc(16px * var(--font-scale, 1));
  line-height: 1.72;
  color: var(--text-muted);
}
.article li { margin-bottom: 6px; }
.article a {
  color: var(--accent-deep);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}
.article a:hover { background: var(--accent-tint); }
.article blockquote {
  border-left: 3px solid var(--accent);
  padding: 14px 20px;
  background: var(--accent-tint);
  margin: 16px 0;
  font-style: italic;
  color: var(--accent-deep);
  font-size: 15px;
  border-radius: 0 8px 8px 0;
}
.article code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--code-bg);
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--accent-deep);
}
.article pre {
  background: var(--code-bg);
  padding: 14px 18px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  overflow-x: auto;
  margin: 12px 0;
  border: 1px solid var(--hairline-soft);
}
.article pre code { background: none; padding: 0; }

/* Formula block — untuk rumus matematika display */
.article .formula {
  background: var(--code-bg);
  border: 1px solid var(--hairline-soft);
  padding: 16px 24px;
  font-family: var(--font-mono);
  font-size: 16px;
  margin: 14px 0;
  border-radius: 6px;
  text-align: center;
  color: var(--text);
}

/* Excel embedded table */
.article .excel {
  background: var(--col3-bg);
  border: 1px solid var(--hairline-soft);
  border-radius: 6px;
  margin: 16px 0;
  overflow-x: auto;
}
.article .excel .head {
  background: var(--accent-tint);
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-deep);
  font-weight: 700;
  border-bottom: 1px solid var(--hairline-soft);
}
.article .excel table { width: 100%; border-collapse: collapse; }
.article .excel td, .article .excel th {
  padding: 7px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  border-bottom: 1px solid var(--hairline-soft);
  border-right: 1px solid var(--hairline-soft);
  color: var(--text);
}
.article .excel th { background: var(--card-bg); color: var(--text-soft); font-weight: 700; }
.article .excel td:last-child, .article .excel th:last-child { border-right: none; }
.article .excel tfoot td { background: var(--accent-tint); font-weight: 700; color: var(--accent-deep); }

/* Tabel markdown (| ... |) — dibungkus .table-wrap oleh render-table hook. Rapi + scroll di HP. */
.article-body .table-wrap { overflow-x: auto; margin: 20px 0; border: 1px solid var(--hairline-soft); border-radius: 8px; }
.article-body .table-wrap table { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: 16px; }
.article-body .table-wrap th,
.article-body .table-wrap td { padding: 10px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hairline-soft); }
.article-body .table-wrap thead th {
  background: var(--card-bg);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  border-bottom: 2px solid var(--hairline);
  white-space: nowrap;
}
.article-body .table-wrap tbody tr:last-child td { border-bottom: none; }
.article-body .table-wrap tbody tr:nth-child(even) { background: color-mix(in srgb, var(--card-bg) 45%, transparent); }
/* Fallback: tabel HTML mentah (bukan markdown-hook / bukan .excel) — biar tetap rapi.
   .excel (0,2,1) & .table-wrap (0,2,1+) menang specificity, jadi rule ini HANYA kena tabel mentah. */
.article-body table { border-collapse: collapse; width: 100%; margin: 20px 0; font-size: 16px; }
.article-body table th, .article-body table td { padding: 10px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hairline-soft); }
.article-body table th { background: var(--card-bg); font-family: var(--font-ui); font-weight: 700; font-size: 13px; color: var(--text-muted); border-bottom: 2px solid var(--hairline); }
.article-body table tr:last-child td { border-bottom: none; }
/* Widget animasi (iframe) — anti-scroll internal; tinggi di-fit ke konten via JS */
.article-body iframe { display: block; width: 100%; max-width: 100%; overflow: hidden; }

.article .download {
  display: inline-block;
  background: var(--accent-deep);
  color: var(--selection-fg);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 10px 16px;
  border-radius: 6px;
  font-weight: 700;
  margin: 12px 0 18px;
  text-decoration: none;
}
.article .download:hover { background: var(--accent-dark); }

/* Blok unduh Excel companion — di BAWAH artikel (setelah materi dibaca) */
.article-excel { margin: 28px 0 8px; padding: 16px 18px; background: var(--accent-tint); border: 1px solid var(--accent); border-radius: 10px; }
.article-excel-head { font-family: var(--font-ui); font-weight: 800; font-size: 15px; color: var(--text); margin-bottom: 4px; }
.article-excel-hint { font-size: 13px; color: var(--text-soft); margin: 0 0 12px; }
.article-excel .download { margin: 0; }

/* Back-link "dipakai di deck P-N" (SPINE-03) */
.article-deck-backlink { margin: 20px 0 8px; padding: 14px 16px; background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 10px; }
.article-deck-backlink-head { font-family: var(--font-ui); font-weight: 700; font-size: 13px; color: var(--text); margin-bottom: 8px; }
.article-deck-backlink-item {
  display: block; font-family: var(--font-ui); font-size: 13px; color: var(--accent-deep);
  text-decoration: none; padding: 4px 0;
}
.article-deck-backlink-item:hover { text-decoration: underline; }

/* Next artikel */
.article .next-article {
  background: var(--card-bg);
  border: 1px solid var(--hairline-soft);
  padding: 16px 22px;
  border-radius: 8px;
  margin-top: 32px;
}
.article .next-article .next-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 6px;
  font-weight: 700;
}
.article .next-article .next-link {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--accent);
  text-decoration: none;
  display: block;
}
.article .next-article .next-link:hover { color: var(--accent-deep); }

/* MathJax adjustments */
.article mjx-container { font-size: 1.05em !important; }
.article mjx-container[display="true"] { margin: 14px 0 !important; }

/* ============================================================
   FOLDER PREVIEW (saat /statistik/ tanpa specific artikel)
   ============================================================ */
.folder-preview {
  padding: 36px 56px 100px;
  max-width: 1100px;
  margin: 0 auto;
  animation: fadeIn 0.3s ease-out;
}
.folder-preview .pill {
  display: inline-block;
  background: var(--accent-tint);
  color: var(--accent-deep);
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 4px 12px;
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
}
.folder-preview h1 {
  font-family: var(--font-display);
  font-size: 64px;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.folder-preview > .meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-soft);
  margin-bottom: 24px;
}
.folder-preview > .meta span { padding: 0 6px; color: var(--hairline); }
.folder-preview .folder-intro {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 32px;
  padding: 18px 24px;
  background: var(--card-bg);
  border-radius: 8px;
  border-left: 3px solid var(--accent);
}
.folder-preview h2 {
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 700;
  margin: 24px 0 14px;
  color: var(--text);
}
.folder-list { display: flex; flex-direction: column; gap: 8px; }
.folder-item {
  display: grid;
  grid-template-columns: 50px 1fr 100px;
  align-items: center;
  padding: 14px 18px;
  background: var(--card-bg);
  border: 1px solid var(--hairline-soft);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  gap: 14px;
  transition: all 0.15s;
}
.folder-item:hover {
  border-color: var(--accent);
  background: var(--accent-tint);
  transform: translateX(2px);
}
.folder-item-num {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-faint);
}
.folder-item-title {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 2px;
}
.folder-item-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
.folder-item-status {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: right;
}
.status-ready { color: var(--accent-deep); }
.status-draft { color: #7D5A00; }
.status-soon { color: var(--text-faint); }

/* Footer tri-link per pertemuan (SPINE-03) — sibling .deck-entry, BUKAN nested <a> di dalamnya */
.folder-item-wrap { display: flex; flex-direction: column; gap: 4px; }
.deck-entry-links { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px; }
.deck-entry-link {
  font-family: var(--font-ui); font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--hairline); background: var(--card-bg);
  color: var(--text-soft); text-decoration: none;
  transition: border-color 0.12s ease, color 0.12s ease;
}
.deck-entry-link:hover { border-color: var(--accent-deep); color: var(--accent-deep); }

/* Panel Status + Misi — halaman matkul /slides/<matkul>/ (SPINE-01, Tahap 1 fallback tanpa KRS) */
.spine-status {
  display: flex;
  gap: 28px;
  padding: 18px 22px;
  margin: 18px 0 14px;
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  border-radius: 12px;
}
.spine-status-item { display: flex; flex-direction: column; }
.spine-status-num {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--accent-deep);
}
.spine-status-label {
  font: 700 10px var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-top: 2px;
}
.spine-misi { margin: 0 0 22px; }
.spine-misi-cta {
  display: inline-block;
  background: var(--accent-deep);
  color: var(--selection-fg);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 15px;
  padding: 12px 22px;
  border-radius: 8px;
  text-decoration: none;
}
.spine-misi-cta:hover { background: var(--accent-dark); }

/* Folder Pintar — sorot minggu aktif, redupkan pertemuan mendatang (tetap klik-able, NOL pointer-events:none) */
.folder-item-active {
  border-left: 3px solid var(--accent);
  background: var(--accent-tint);
}
.folder-item-future { opacity: 0.55; }

/* Jangkar KRS + Kartu Presensi (SPINE-02) */
.spine-krs-tag {
  display: block; font-size: 9px; color: var(--text-faint); font-style: italic;
  margin-top: 2px; text-transform: none; letter-spacing: normal;
}
.spine-krs {
  margin: 0 0 22px; background: var(--card-bg); border: 1px solid var(--hairline);
  border-radius: 10px; padding: 4px 16px;
}
.spine-krs[open] { padding-bottom: 14px; }
.spine-krs-summary {
  cursor: pointer; font-family: var(--font-ui); font-size: 0.86rem; font-weight: 600;
  color: var(--text); padding: 12px 0;
}
.spine-krs-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 6px; }
.spine-krs-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; color: var(--text-soft); }
.spine-krs-field select, .spine-krs-field input {
  font-family: var(--font-ui); font-size: 0.84rem; padding: 6px 10px;
  border: 1px solid var(--hairline); border-radius: 6px; background: var(--col3-bg); color: var(--text);
}
.spine-krs-save {
  background: var(--accent-deep); color: var(--selection-fg); border: none;
  font-family: var(--font-ui); font-weight: 700; font-size: 0.82rem;
  padding: 8px 18px; border-radius: 6px; cursor: pointer; height: 34px;
}
.spine-krs-save:hover { background: var(--accent-dark); }
.spine-krs-share {
  margin-top: 12px; background: none; border: 1px solid var(--accent-deep); color: var(--accent-deep);
  font-family: var(--font-ui); font-weight: 700; font-size: 0.8rem;
  padding: 7px 16px; border-radius: 999px; cursor: pointer;
}
.spine-krs-share:hover { background: var(--accent-tint); }
.spine-krs-share-note {
  margin-top: 8px; font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-faint);
  word-break: break-all; background: var(--col3-bg); padding: 6px 10px; border-radius: 6px;
}

.spine-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(10px);
  background: var(--text); color: var(--col3-bg); font-family: var(--font-ui); font-size: 0.86rem;
  padding: 10px 20px; border-radius: 999px; opacity: 0; transition: opacity 0.25s, transform 0.25s;
  z-index: 500; box-shadow: 0 4px 16px rgba(0,0,0,0.2); pointer-events: none;
}
.spine-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.presensi-card {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 24px; padding: 14px 18px; background: var(--card-bg);
  border: 1px solid var(--hairline); border-radius: 10px;
}
.presensi-label { font-family: var(--font-ui); font-size: 0.82rem; color: var(--text-soft); flex: 1; }
.presensi-count { font-family: var(--font-mono); font-weight: 700; font-size: 0.9rem; color: var(--text); }
.presensi-cap {
  display: inline-block; font-family: var(--font-mono); font-weight: 700; font-size: 0.78rem;
  color: var(--accent-deep); padding: 5px 12px; letter-spacing: 0.03em;
  border-radius: 0; border: 2px solid var(--text); box-shadow: 4px 4px 0 var(--text);
  transform: rotate(-2deg); background: var(--col3-bg);
}
@media (max-width: 480px) {
  .spine-krs-form { flex-direction: column; align-items: stretch; }
  .presensi-card { flex-direction: column; align-items: flex-start; }
}

/* Cross-sell paket ujian persisten (SPINE-04) — pola kartu .paket-card existing */
.crosssell-paket {
  margin-top: 18px; padding: 18px 20px; background: var(--accent-tint);
  border: 1px solid var(--accent-deep); border-radius: 10px;
}
.crosssell-paket-label {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  color: var(--accent-deep); text-transform: uppercase; letter-spacing: 0.04em;
}
.crosssell-paket-title { font-size: 1.05rem; font-weight: 700; color: var(--text); margin: 6px 0 4px; }
.crosssell-paket-desc { font-size: 0.86rem; color: var(--text-soft); margin: 0 0 12px; }
.crosssell-paket-cta {
  display: inline-block; background: var(--accent-deep); color: var(--selection-fg);
  font-family: var(--font-ui); font-weight: 700; font-size: 0.86rem;
  padding: 9px 20px; border-radius: 999px; text-decoration: none;
}
.crosssell-paket-cta:hover { background: var(--accent-dark); }
.crosssell-paket-badge {
  display: inline-block; font-family: var(--font-ui); font-weight: 600; font-size: 0.82rem;
  padding: 6px 14px; border-radius: 999px; background: var(--card-bg); border: 1px solid var(--hairline);
}

/* CTA "Kelas tamat" pada halaman matkul (SPINE-06) — muncul hanya saat 14/14, lihat layouts/slides/list.html */
.tamat-cta {
  display: inline-block; margin-top: 10px; background: var(--accent2-tint, var(--accent-tint));
  border: 1px solid var(--accent2, var(--accent)); color: var(--accent-deep);
  font-family: var(--font-ui); font-weight: 700; font-size: 0.86rem;
  padding: 10px 18px; border-radius: 999px; text-decoration: none;
}
.tamat-cta:hover { background: var(--accent2, var(--accent)); color: var(--selection-fg); }

/* Halaman Tamat — Transkrip Mini A5 (SPINE-06, pilot manajemen-keuangan-1). layouts/slides/tamat.html */
.tamat-wrap { max-width: 640px; margin: 0 auto; padding: 8px 4px 40px; }

.tamat-locked { text-align: center; padding: 60px 20px; }
.tamat-locked-icon { font-size: 40px; margin-bottom: 10px; }
.tamat-locked h1 { font-family: var(--font-display, var(--font-ui)); font-size: 1.6rem; color: var(--text); margin: 0 0 12px; }
.tamat-locked p { color: var(--text-soft); font-size: 0.94rem; line-height: 1.6; max-width: 440px; margin: 0 auto 18px; }
.tamat-back-link { color: var(--accent-deep); text-decoration: none; font-weight: 700; font-size: 0.88rem; }
.tamat-back-link:hover { text-decoration: underline; }

.transkrip-a5 {
  position: relative;
  background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 4px;
  padding: 36px 34px 30px; margin: 20px auto 0;
  aspect-ratio: 148 / 210; max-width: 460px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.14);
  display: flex; flex-direction: column;
}
.transkrip-kop { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px dashed var(--hairline); padding-bottom: 10px; margin-bottom: 18px; }
.transkrip-brand { font-family: var(--font-display, monospace); font-size: 20px; color: var(--text); }
.transkrip-brand sup { color: var(--accent); }
.transkrip-doctype { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint); }
.transkrip-judul { font-size: 1.3rem; font-weight: 700; color: var(--text); margin: 0 0 8px; line-height: 1.3; }
.transkrip-sub { font-size: 0.86rem; color: var(--text-soft); line-height: 1.6; margin: 0 0 20px; }

.transkrip-meta { display: flex; flex-direction: column; gap: 12px; margin-bottom: auto; }
.transkrip-meta-item { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; border-top: 1px dashed var(--hairline); }
.tm-label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint); }
.tm-value { font-size: 0.94rem; font-weight: 700; color: var(--text); }
.tm-value.tm-mono { font-family: var(--font-mono); letter-spacing: 0.03em; }

.transkrip-stempel {
  position: absolute; right: 26px; bottom: 64px;
  width: 84px; height: 84px; border-radius: 0;
  border: 2px solid var(--accent, #00C853); box-shadow: 3px 3px 0 var(--accent, #00C853);
  transform: rotate(-9deg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--accent, #00C853); background: var(--card-bg); opacity: 0.92;
}
.transkrip-stempel .ts-line1 { font-family: var(--font-mono); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.06em; }
.transkrip-stempel .ts-line2 { font-family: var(--font-display, monospace); font-weight: 700; font-size: 1.3rem; line-height: 1; }

.transkrip-disclaimer { font-size: 0.68rem; color: var(--text-faint); line-height: 1.5; margin-top: 16px; }

.tamat-actions { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 26px; }
.tamat-print-btn {
  background: var(--accent-deep); color: var(--selection-fg); border: none;
  font-family: var(--font-ui); font-weight: 700; font-size: 0.9rem;
  padding: 11px 22px; border-radius: 999px; cursor: pointer;
}
.tamat-print-btn:hover { background: var(--accent-dark); }
@media (max-width: 480px) {
  .transkrip-a5 { aspect-ratio: auto; padding: 26px 20px 24px; }
  .transkrip-stempel { position: static; margin: 18px auto 0; transform: rotate(-6deg); }
  .transkrip-meta { margin-bottom: 18px; }
  .tamat-actions { flex-direction: column; gap: 12px; }
}

/* Palang aksi kontekstual tunggal (HABIT-05) — mobile ≤900px SAJA, satu tombol,
   BUKAN dock permanen. z-index 180: di atas konten, di bawah drawer Finder (.col1/.col2=200/210). */
.palang-aksi { display: none; }
@media (max-width: 900px) {
  .palang-aksi {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 180;
    background: var(--col3-bg); border-top: 1px solid var(--hairline);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    transform: translateY(0); transition: transform 0.22s ease;
    box-shadow: 0 -4px 14px rgba(0,0,0,0.1);
  }
  .palang-aksi[hidden] { display: none; }
  .palang-aksi-btn {
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-deep); color: var(--selection-fg); text-decoration: none;
    font-family: var(--font-ui); font-weight: 700; font-size: 0.88rem;
    padding: 12px; border-radius: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}

/* Banner instal PWA (HABIT-01) — fixed bottom, dismissable */
.pwa-install-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  box-shadow: 0 12px 26px rgba(2, 8, 20, 0.15);
  max-width: 480px;
  margin: 0 auto;
}
.pwa-install-text { flex: 1; font-size: 13px; color: var(--text); }
.pwa-install-btn {
  background: var(--accent-deep);
  color: var(--selection-fg);
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.pwa-install-btn:hover { background: var(--accent); }
.pwa-install-close {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

/* Kartu Screenshot ber-watermark (HABIT-02) — pilot 1 artikel */
.kartu-ss {
  margin: 24px 0;
  padding: 18px 20px;
  border: 2px solid var(--hairline);
  border-radius: 12px;
  background: var(--col3-bg);
  box-shadow: 0 5px 14px rgba(2, 8, 20, 0.04);
}
.kartu-ss-judul {
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--text);
  margin-bottom: 8px;
}
.kartu-ss-isi {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
}
.kartu-ss-isi p:last-child { margin-bottom: 0; }
.kartu-ss-kaki {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent2);
}
.kartu-ss-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.kartu-ss-btn {
  background: var(--accent-deep);
  color: var(--selection-fg);
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}
.kartu-ss-btn:hover { background: var(--accent); }
@media (max-width: 480px) {
  .kartu-ss { padding: 14px 16px; }
  .kartu-ss-actions { flex-direction: column; }
}

/* ============================================================
   404 ERROR PAGE
   ============================================================ */
.error-404 {
  background: var(--welcome-bg);
  padding: 80px 60px;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.error-inner {
  text-align: center;
  max-width: 600px;
}
.error-code {
  font-family: var(--font-display);
  font-size: 180px;
  color: var(--accent);
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.error-inner h1 {
  font-family: var(--font-body);
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
}
.error-inner p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.error-cta {
  display: inline-block;
  background: var(--accent-deep);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 32px;
  text-decoration: none;
  margin-top: 24px;
}
.error-cta:hover { background: var(--accent-dark); }

/* ============================================================
   CYBERPUNK THEME — special effects
   ============================================================ */
[data-theme="cyberpunk"] .welcome h1 .go {
  text-shadow: 0 0 10px var(--accent), 0 0 20px rgba(0,255,128,0.4);
}
[data-theme="cyberpunk"] .welcome h1 .cursor {
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}
[data-theme="cyberpunk"] .topbar .brand sup,
[data-theme="cyberpunk"] .welcome .label .sq {
  text-shadow: 0 0 6px var(--accent);
}
[data-theme="cyberpunk"] .article .pill,
[data-theme="dark-retro"] .article .pill { color: var(--accent-pop); }
[data-theme="cyberpunk"] .article p strong,
[data-theme="dark-retro"] .article p strong { color: var(--accent-pop); }
[data-theme="cyberpunk"] .article blockquote,
[data-theme="dark-retro"] .article blockquote { color: var(--accent-pop); }

/* ── Warna KEDUA tema (accent2) — identitas navigasi & struktur.
   Morocco: merah (konten/aksi) + hijau (navigasi). Japan: biru (konten) + merah (navigasi).
   Tema lain: accent2 = accent (tanpa perubahan tampak). ── */
.topbar .brand sup { color: var(--accent2); }
.col1 .sec { color: var(--accent2); }
.col1 .pillar-item.active { background: var(--accent2); }
.col1 details.pillar-group[open] > .pillar-link .caret::before { color: var(--accent2); }
.col2 .item.active .check, .col1 .item.active .check { color: var(--accent2); }
.article .pill { background: var(--accent2-tint); color: var(--accent2); }

/* ============================================================
   MOBILE NAV — hamburger toggle + drawer overlay
   ============================================================ */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--text);
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.nav-toggle:hover { background: var(--hover-bg); color: var(--accent-deep); }
.nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.42); z-index: 150; }
.nav-overlay.active { display: block; }

/* ============================================================
   RESPONSIVE (mobile)
   ============================================================ */
@media (max-width: 900px) {
  html, body { height: auto; overflow-y: auto; }
  .app { height: auto; min-height: 100vh; }
  .finder { grid-template-columns: 1fr; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  /* Finder drill-down: col1 (pilar) + col2 (materi) sbg drawer off-canvas; col2 geser di ATAS col1 */
  .col1, .col2 {
    display: block;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 300px;
    max-width: 86vw;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.26s ease;
    box-shadow: 2px 0 24px rgba(0,0,0,0.18);
    padding-top: 16px;
  }
  .col2 { z-index: 210; }
  .col1.drawer-open { transform: translateX(0); }
  body.materi-open .col2 { transform: translateX(0); }
  .col2-back {
    display: flex; align-items: center; gap: 4px;
    background: none; border: none; cursor: pointer;
    color: var(--accent-deep); font-family: var(--font-ui);
    font-size: 14px; font-weight: 600; padding: 2px 8px 12px;
  }
  .welcome { padding: 50px 24px 60px; }
  .welcome h1 { font-size: 70px; }
  .welcome h1 .cursor { height: 48px; }
  .welcome .diff-grid { grid-template-columns: 1fr; }
  .article { padding: 24px 24px 60px; }
  .article h1 { font-size: 28px; }
  .article h2 { font-size: 20px; }
  .article p { font-size: 15px; }
  .folder-preview { padding: 24px 24px 60px; }
  .folder-preview h1 { font-size: 44px; }
  .theme-switcher .label { display: none; }
  .seru-toggle { font-size: 0; padding: 3px 6px; }
  .seru-toggle::before { content: "✨"; font-size: 12px; }
  .topbar .actions { display: none; }
  .topbar { padding: 8px 16px; gap: 10px; }
  .topbar .crumb { font-size: 10px; }
  .error-404 { padding: 40px 24px; }
  .error-code { font-size: 100px; }
}

/* ============================================================
   ARTICLE TOC (Table of Contents) — sticky sidebar di col3
   ============================================================ */
.article-main { display: flex; align-items: flex-start; gap: 56px; }
.article-main > .article-body { flex: 1 1 auto; min-width: 0; max-width: 960px; }
.article-toc {
  position: sticky;
  top: 20px;
  flex: 0 0 252px;
  width: 252px;
  margin: 4px 0 20px 0;
  padding: 16px 18px;
  background: var(--card-bg);
  border: 1px solid var(--hairline-soft);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}
.article-toc .toc-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  font-weight: 700;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hairline-soft);
}
.article-toc nav { margin: 0; }
.article-toc nav ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.article-toc nav ul ul {
  padding-left: 12px;
  margin-top: 2px;
}
.article-toc nav li {
  margin: 4px 0;
  line-height: 1.4;
}
.article-toc nav a {
  color: var(--text-soft);
  text-decoration: none;
  display: block;
  padding: 2px 4px;
  border-radius: 3px;
  transition: all 0.12s;
  font-family: var(--font-ui);
  font-size: 13.5px;
  line-height: 1.45;
}
.article-toc nav a:hover {
  color: var(--accent-deep);
  background: var(--accent-tint);
}
.article-toc nav a.toc-active {
  color: var(--accent-deep);
  font-weight: 700;
  background: var(--accent-tint);
}

/* Pada layar sempit, TOC drop ke bawah header */
@media (max-width: 1100px) {
  .article-main { flex-direction: column; }
  .article-toc {
    order: -1;
    position: static;
    width: auto;
    flex: none;
    margin: 0 0 16px 0;
    max-height: none;
  }
}

/* ============================================================
   ARTICLE NAV (Prev/Next) — bottom of article
   ============================================================ */
.article-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline-soft);
}
.article-nav .nav-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  background: var(--card-bg);
  border: 1px solid var(--hairline-soft);
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.15s;
}
.article-nav .nav-link:hover {
  border-color: var(--accent);
  background: var(--accent-tint);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 200, 83, 0.12);
}
.article-nav .nav-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-faint);
  font-weight: 700;
}
.article-nav .nav-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.article-nav .nav-next {
  text-align: right;
}
.article-nav .nav-empty {
  /* placeholder untuk maintain grid layout */
}

/* ============================================================
   SEARCH — di top col1
   ============================================================ */
.search-wrap {
  position: relative;
  margin: 0 0 14px 0;
  padding: 0 4px;
}
.search-wrap input {
  width: 100%;
  padding: 6px 10px;
  background: var(--col2-bg);
  border: 1px solid var(--hairline);
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text);
  outline: none;
  transition: all 0.15s;
}
.search-wrap input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-tint);
}
.search-wrap input::placeholder {
  color: var(--text-faint);
}
#search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 4px;
  right: 4px;
  background: var(--col3-bg);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  z-index: 50;
  max-height: 400px;
  overflow-y: auto;
  display: none;
}
#search-results.active { display: block; }
.search-result {
  display: block;
  padding: 8px 10px;
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-soft);
  transition: background 0.12s;
}
.search-result:last-child { border-bottom: none; }
.search-result:hover {
  background: var(--accent-tint);
}
.search-result .sr-section {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 2px;
}
.search-result .sr-title {
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
  line-height: 1.3;
}
.search-empty {
  padding: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  text-align: center;
}

/* ============================================================
   RESPONSIVE (phone ≤480px) — rapatkan tipografi + Prev/Next stack
   ============================================================ */
@media (max-width: 480px) {
  .welcome { padding: 36px 18px 48px; }
  .welcome h1 { font-size: 46px; }
  .welcome h1 .cursor { height: 32px; }
  .article { padding: 20px 16px 48px; }
  .article h1 { font-size: 23px; }
  .article h2 { font-size: 18px; }
  .folder-preview { padding: 20px 16px 48px; }
  .folder-preview h1 { font-size: 32px; }
  .article-nav { grid-template-columns: 1fr; }
  .topbar .crumb { display: none; }
  .col1 { width: 264px; }
}

/* ============================================================
   PRINT — export artikel ke PDF bersih (tanpa sidebar/topbar/nav)
   ============================================================ */
@media print {
  :root {
    --col3-bg: #ffffff !important;
    --welcome-bg: #ffffff !important;
    --card-bg: #ffffff !important;
    --code-bg: #f4f4f4 !important;
    --text: #000000 !important;
    --text-muted: #1a1a1a !important;
    --text-soft: #333333 !important;
    --text-faint: #666666 !important;
    --hairline: #cccccc !important;
    --hairline-soft: #dddddd !important;
  }
  html, body { height: auto !important; overflow: visible !important; background: #fff !important; }
  .app { display: block !important; height: auto !important; }
  .finder { display: block !important; }
  .topbar, .col1, .col2, .nav-toggle, .nav-overlay,
  .article-toc, .article-nav, .search-wrap { display: none !important; }
  .col3 { overflow: visible !important; height: auto !important; }
  .article { max-width: 100% !important; padding: 0 !important; }
  .article a { color: #000 !important; text-decoration: underline; }
  .article h1, .article h2, .article h3 { page-break-after: avoid; }
  .article pre, .article table, .article figure, .widget, iframe { page-break-inside: avoid; }
  .article img, .article iframe { max-width: 100% !important; }
}

/* ============ KIT ILUSTRASI v2 (B1) — fig shortcode ============ */
.article .v2fig {
  margin: 1.8rem 0; padding: 1.25rem 1.4rem;
  border: 1px solid var(--hairline-soft); border-radius: 12px;
  background: var(--card-bg); text-align: center;
}
/* Render SVG dibatasi ke lebar viewBox (600) -> skala <=1 -> teks tidak membesar melebihi nilai user-unit.
   Akibatnya teks 16-unit render ~16px = SAMA dengan narasi (stabil lintas artikel). */
.article .v2fig svg { display: block; width: 100%; max-width: 600px; height: auto; margin: 0 auto; }
/* Font ilustrasi DISAMAKAN dengan narasi (16px) + skala mengikuti font-switcher (--font-scale).
   SVG ber-data-figraw dikecualikan (mis. summation-sigma yang punya hierarki Σ-besar). */
.article .v2fig svg:not([data-figraw]) text { font-size: calc(16px * var(--font-scale, 1)); }
/* Formula MathJax (display/block) jangan lebih kecil dari narasi: perbesar base + skala dgn font-switcher */
.article mjx-container[display="true"] { font-size: calc(21px * var(--font-scale, 1)) !important; }
.article .v2fig figcaption {
  margin: 0.9rem auto 0; text-align: left;
  font-family: var(--font-ui); font-size: calc(0.95rem * var(--font-scale, 1)); line-height: 1.65; color: var(--text-soft);
}
.article .v2fig-missing {
  padding: 0.9rem; color: var(--text-faint); font-style: italic;
  border: 1px dashed var(--hairline); border-radius: 6px;
}

/* ============ Font-size switcher (topbar) ============ */
.font-switcher { display: flex; align-items: center; gap: 4px; margin-left: 14px; }
.font-switcher .label { font-family: var(--font-mono); font-size: 11px; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.08em; margin-right: 2px; }
.font-switcher .fsize {
  background: none; border: 1px solid var(--hairline); color: var(--text-soft);
  cursor: pointer; border-radius: 6px; width: 27px; height: 27px; line-height: 1; padding: 0;
  font-family: var(--font-body); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.font-switcher .fsize[data-fontsize="kecil"] { font-size: 11px; }
.font-switcher .fsize[data-fontsize="sedang"] { font-size: 14px; }
.font-switcher .fsize[data-fontsize="besar"] { font-size: 17px; }
.font-switcher .fsize:hover { border-color: var(--accent); color: var(--accent); }
.font-switcher .fsize.active { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-tint); }

/* ============ KARTU METADATA BELAJAR (D-08, S0) ============ */
.learn-card {
  margin: 0.75rem 0 1.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--hairline-soft);
  border-radius: 10px;
  background: var(--card-bg);
  display: flex; flex-direction: column; gap: 0.55rem;
}
.learn-card-top {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
.diff-badge {
  font-size: 1rem; letter-spacing: 0.06em;
  padding: 2px 6px; border-radius: 6px; border: 1px solid var(--hairline);
  font-family: var(--font-mono); cursor: default;
}
.diff-low  { color: var(--accent-deep); background: var(--accent-tint); border-color: var(--accent); }
.diff-mid  { color: #7D5A00; background: #fff8e1; border-color: #f9c825; }
.diff-high { color: #b71c1c; background: #ffebee; border-color: #ef9a9a; }
.level-tag {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-soft);
  padding: 2px 7px; background: var(--col2-bg); border-radius: 5px;
  border: 1px solid var(--hairline);
}
.prereq-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem;
  font-size: calc(0.88rem * var(--font-scale, 1));
}
.prereq-label {
  color: var(--text-faint); font-family: var(--font-ui); white-space: nowrap;
}
.prereq-chip {
  display: inline-flex; align-items: center;
  padding: 2px 10px; border-radius: 20px;
  background: var(--accent-tint); color: var(--accent-deep);
  border: 1px solid var(--accent); font-family: var(--font-ui);
  font-size: calc(0.85rem * var(--font-scale, 1)); text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.prereq-chip:hover { background: var(--accent); color: #fff; }
.prereq-unresolved {
  background: var(--card-bg); color: var(--text-faint);
  border-color: var(--hairline); font-style: italic;
}
.outcomes-details {
  font-size: calc(0.9rem * var(--font-scale, 1));
}
.outcomes-details summary {
  cursor: pointer; color: var(--text-soft); font-family: var(--font-ui);
  padding: 2px 0; list-style: none; user-select: none;
}
.outcomes-details summary::-webkit-details-marker { display: none; }
.outcomes-details summary::before { content: "▶ "; font-size: 0.7em; }
.outcomes-details[open] summary::before { content: "▼ "; }
.outcomes-details ul {
  margin: 0.4rem 0 0 1.2rem; padding: 0; color: var(--text-soft);
  line-height: 1.7;
}
.outcomes-details li { margin-bottom: 0.2rem; }

/* ── Companion callout (D-23, 2-lensa) ── */
.companion-callout {
  margin: 0.5rem 0 1rem;
  padding: 0.6rem 1rem;
  border-left: 3px solid var(--accent);
  background: var(--accent-tint);
  border-radius: 0 8px 8px 0;
  font-size: calc(0.9rem * var(--font-scale, 1));
  color: var(--text);
}
.companion-callout a {
  color: var(--accent-deep); text-decoration: none; font-weight: 600;
}
.companion-callout a:hover { text-decoration: underline; }

/* Print: sembunyikan kartu metadata */
@media print {
  .learn-card, .companion-callout { display: none; }
}

/* ============ SEARCH — badge type & difficulty (T4, S0) ============ */
.sr-section { display: none; } /* superseded by .sr-meta */
.sr-meta {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font-size: 10px; font-family: var(--font-mono); color: var(--text-faint);
  margin-bottom: 2px;
}
.sr-badge {
  padding: 1px 5px; border-radius: 4px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.05em; white-space: nowrap;
}
.sr-tool  { background: var(--accent-tint); color: var(--accent-deep); border: 1px solid var(--accent); }
.sr-diff  { background: var(--card-bg); border: 1px solid var(--hairline); color: var(--text-soft); }
.sr-diff-1, .sr-diff-2 { color: var(--accent-deep); }
.sr-diff-4, .sr-diff-5 { color: #b71c1c; }
.sr-tool-result { border-left: 2px solid var(--accent); }
@media (max-width: 720px) { .font-switcher .label { display: none; } }

/* ============================================================
   TOOLS HUB & LANDING (S1)
   ============================================================ */

/* ── Hub: header ── */
.tools-hub { padding: 24px 28px 40px; max-width: 900px; }
.tools-hub-header { margin-bottom: 20px; }
.tools-hub-header h1 {
  font-family: var(--font-ui); font-size: 1.6rem; font-weight: 800;
  color: var(--text); margin-bottom: 4px;
}
.tools-hub-sub {
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-faint);
  letter-spacing: 0.04em;
}

/* ── Hub: filter strip ── */
.tools-filter {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px;
}
.filter-btn {
  padding: 6px 14px; border-radius: 20px; border: 1px solid var(--hairline);
  background: var(--card-bg); color: var(--text-soft);
  font-family: var(--font-ui); font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.filter-btn:hover { background: var(--hover-bg); color: var(--hover-fg); }
.filter-btn.active {
  background: var(--accent-dark); color: var(--selection-fg);
  border-color: var(--accent-dark); font-weight: 700;
}

/* ── Hub: tools grid ── */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.tool-card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-radius: 8px;
  border: 1px solid var(--hairline); background: var(--card-bg);
  text-decoration: none; color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.tool-card:hover {
  border-color: var(--accent); background: var(--accent-tint);
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
.tool-card-icon { font-size: 22px; line-height: 1; flex-shrink: 0; margin-top: 1px; }
.tool-card-body { flex: 1; min-width: 0; }
.tool-card-title {
  font-family: var(--font-ui); font-size: 14px; font-weight: 700;
  color: var(--text); margin-bottom: 4px; line-height: 1.35;
}
.tool-card-desc {
  font-family: var(--font-ui); font-size: 12px; color: var(--text-soft);
  line-height: 1.5; margin-bottom: 6px;
}
.tool-card-badge {
  display: inline-block; padding: 1px 7px; border-radius: 12px;
  background: var(--accent-tint); color: var(--accent-deep);
  border: 1px solid var(--accent); font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
}

/* ── Landing: header ── */
.tools-landing { padding: 24px 28px 40px; max-width: 800px; }
.tools-landing-header { margin-bottom: 20px; }
.tools-landing-header h1 {
  font-family: var(--font-ui); font-size: 1.5rem; font-weight: 800;
  color: var(--text); margin: 6px 0 8px;
}
.tools-landing-desc {
  font-family: var(--font-ui); font-size: 1rem; color: var(--text-soft);
  line-height: 1.6;
}

/* ── Landing: widget iframe wrapper ── */
.widget-frame-wrap {
  border: 1px solid var(--hairline); border-radius: 8px;
  overflow: hidden; margin: 0 0 20px;
  background: var(--card-bg);
}
.widget-frame {
  display: block; width: 100%; border: none;
  min-height: 320px; background: transparent;
}
.widget-frame-actions {
  display: flex; justify-content: flex-end;
  padding: 8px 12px; border-top: 1px solid var(--hairline-soft);
  background: var(--col2-bg);
}
.widget-fullscreen-btn {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-soft); text-decoration: none;
  padding: 4px 10px; border-radius: 4px; border: 1px solid var(--hairline);
  background: var(--card-bg); cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.widget-fullscreen-btn:hover {
  color: var(--accent-deep); border-color: var(--accent); background: var(--accent-tint);
}

/* ── Landing: prose ── */
.tools-body { margin-bottom: 24px; }
.tools-body h2 {
  font-family: var(--font-ui); font-size: 1.1rem; font-weight: 700;
  color: var(--text); margin: 1.4rem 0 0.5rem; border-bottom: 1px solid var(--hairline-soft);
  padding-bottom: 4px;
}
.tools-body h3 {
  font-family: var(--font-ui); font-size: 1rem; font-weight: 700;
  color: var(--text); margin: 1rem 0 0.35rem;
}
.tools-body p { margin: 0 0 0.75rem; line-height: 1.7; }
.tools-body ul, .tools-body ol { margin: 0.4rem 0 0.75rem 1.4rem; line-height: 1.7; }
.tools-body code {
  font-family: var(--font-mono); font-size: 0.85em;
  background: var(--code-bg); padding: 1px 5px; border-radius: 4px;
  color: var(--accent-deep);
}

/* ── Landing: Excel download button ── */
.tools-excel-dl {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 20px;
}
.excel-dl-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; border-radius: 6px;
  background: var(--accent-dark); color: var(--selection-fg);
  text-decoration: none; font-family: var(--font-ui); font-size: 14px; font-weight: 600;
  border: 1px solid var(--accent-dark); transition: background 0.12s, border-color 0.12s;
}
.excel-dl-btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.excel-dl-note { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }

/* ── Landing: parent article link ── */
.parent-article-link {
  margin: 0 0 20px; padding: 12px 16px;
  border-left: 3px solid var(--accent); background: var(--accent-tint);
  border-radius: 0 6px 6px 0;
  font-family: var(--font-ui); font-size: 14px;
}
.parent-article-link a {
  color: var(--accent-deep); font-weight: 600; text-decoration: none;
}
.parent-article-link a:hover { text-decoration: underline; }

/* ── Landing: CTA placeholder (S7) ── */
.cta-konsultasi { margin: 24px 0 0; min-height: 4px; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .tools-hub { padding: 16px 16px 32px; }
  .tools-grid { grid-template-columns: 1fr; }
  .tools-landing { padding: 16px 16px 32px; }
}

/* ============================================================
   PAKET BELAJAR — hub list + single landing
   ============================================================ */

/* Level badge colors (shared hub + landing) */
.level-pemula   { background: var(--accent-tint); color: var(--accent-deep); }
.level-menengah { background: #FFF3CD; color: #7D5A00; }
.level-lanjut   { background: #FFE8E8; color: #991B1B; }

/* ── Paket Hub (list page) ── */
.paket-hub { padding: 24px 28px 48px; max-width: 900px; }
.paket-hub-header { margin-bottom: 24px; }
.paket-hub-header h1 { font-size: 22px; font-weight: 700; color: var(--text); margin: 0 0 6px; }
.paket-hub-sub { font-size: 14px; color: var(--text-soft); margin: 0; }

.paket-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.paket-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 18px;
  background: var(--card-bg);
  border: 1px solid var(--hairline-soft);
  border-radius: 10px;
  text-decoration: none; color: inherit;
  transition: background 0.12s, border-color 0.12s, transform 0.1s;
}
.paket-card:hover {
  background: var(--hover-bg);
  border-color: var(--accent);
  color: inherit;
  transform: translateY(-1px);
}
.paket-card-badge {
  display: inline-block;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 4px;
  align-self: flex-start;
}
.paket-card-title { font-size: 15px; font-weight: 700; color: var(--text); }
.paket-card-audience { font-size: 12px; color: var(--text-soft); line-height: 1.4; }
.paket-card-meta { font-size: 12px; color: var(--text-faint); font-family: var(--font-mono); display: flex; gap: 6px; }
.paket-card-outcome { font-size: 12px; color: var(--text-muted); line-height: 1.5; border-top: 1px solid var(--hairline-soft); padding-top: 8px; margin-top: 2px; }

/* ── Paket Landing (single page) ── */
.paket-landing { padding: 24px 28px 48px; max-width: 860px; }

.paket-hero { margin-bottom: 20px; }
.paket-level-badge {
  display: inline-block;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 4px; margin-bottom: 8px;
}
.paket-hero h1 { font-size: 22px; font-weight: 700; color: var(--text); margin: 0 0 10px; }
.paket-hero-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-soft); margin-bottom: 10px;
}
.paket-dot { color: var(--hairline); }
.paket-audience, .paket-hours, .paket-count { white-space: nowrap; }
.paket-outcome {
  font-size: 13px; color: var(--text-muted); line-height: 1.6;
  background: var(--card-bg); border-left: 3px solid var(--accent);
  padding: 10px 14px; border-radius: 0 6px 6px 0; margin: 0;
}

/* Progress bar */
.paket-progress-wrap { margin-bottom: 24px; }
.paket-progress-bar {
  height: 6px; border-radius: 3px;
  background: var(--hairline-soft); margin-bottom: 5px;
}
.paket-progress-fill {
  height: 100%; border-radius: 3px;
  background: var(--accent);
  transition: width 0.4s ease;
}
.paket-progress-label { font-size: 12px; color: var(--text-faint); font-family: var(--font-mono); }

/* Heading */
.paket-list-heading { font-size: 15px; font-weight: 600; color: var(--text-muted); margin: 0 0 10px; }

/* Item list */
.paket-list { display: flex; flex-direction: column; gap: 3px; }
.paket-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-radius: 7px;
  text-decoration: none; color: inherit;
  border: 1px solid transparent;
  background: transparent;
  transition: background 0.1s, border-color 0.1s;
}
.paket-item:hover {
  background: var(--hover-bg);
  color: var(--hover-fg);
  border-color: var(--hairline-soft);
}
.paket-item.read {
  background: var(--accent-tint);
  border-color: rgba(0, 200, 83, 0.25);
}
.paket-item-num {
  font-size: 11px; font-family: var(--font-mono);
  color: var(--text-faint); min-width: 22px; text-align: right;
  flex-shrink: 0;
}
.paket-item-body { flex: 1; min-width: 0; }
.paket-item-title { font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paket-item:hover .paket-item-title { color: inherit; }
.paket-item-meta { font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); margin-top: 1px; display: flex; align-items: center; gap: 4px; }
.paket-check {
  font-size: 13px; color: var(--accent);
  opacity: 0; transition: opacity 0.2s; flex-shrink: 0;
}
.paket-item.read .paket-check { opacity: 1; }
.paket-item-missing {
  opacity: 0.4; cursor: default; pointer-events: none;
}

/* CTA slot */
.paket-cta { margin-top: 36px; min-height: 4px; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .paket-hub { padding: 16px 16px 32px; }
  .paket-cards { grid-template-columns: 1fr; }
  .paket-landing { padding: 16px 16px 32px; }
  .paket-hero h1 { font-size: 19px; }
  .paket-item-title { white-space: normal; }
}

/* ── Breadcrumb "← Paket X · N/M" di atas artikel ── */
.paket-breadcrumb-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 500; font-family: var(--font-sans);
  color: var(--accent-deep); text-decoration: none;
  padding: 4px 10px; border-radius: 20px;
  background: var(--accent-tint); border: 1px solid rgba(0,200,83,0.3);
  margin-bottom: 14px; transition: background 0.1s, color 0.1s;
}
.paket-breadcrumb-link:hover {
  background: var(--accent); color: var(--selection-fg);
}

/* ── Slides deck listing ── */
.deck-entry-num {
  font-size: 11px; font-family: var(--font-mono); font-weight: 700;
  color: var(--text-faint); min-width: 28px; text-align: center;
  flex-shrink: 0;
}
.deck-entry-arrow {
  font-size: 15px; color: var(--text-faint);
  flex-shrink: 0; opacity: 0.5;
  transition: opacity 0.15s, transform 0.15s;
}
.deck-entry:hover .deck-entry-arrow { opacity: 1; transform: translate(2px, -2px); }
/* Hover pertemuan — lift ringan + border aksen (lebih jelas dari .folder-item generik) */
.deck-entry {
  position: relative;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.deck-entry:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  background: var(--accent-tint);
  box-shadow: 0 6px 14px rgba(2, 8, 20, 0.08);
}
/* Pertemuan yang pernah dibuka — tanda ✓ + warna aksen2 halus */
.deck-entry.is-visited { border-color: var(--accent2); }
.deck-entry.is-visited .deck-entry-num { color: var(--accent2); }
/* Pertemuan TERAKHIR dibuka — highlight paling menonjol */
.deck-entry.is-last {
  border-color: var(--accent);
  background: var(--accent-tint);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.deck-entry.is-last .deck-entry-num { color: var(--accent-deep); }
.deck-entry-tag {
  font: 700 10px var(--font-mono); letter-spacing: 0.03em;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
  flex-shrink: 0; margin-right: 4px;
}
.deck-entry.is-visited .deck-entry-tag { color: var(--accent2); background: var(--accent2-tint); }
.deck-entry.is-last .deck-entry-tag { color: #fff; background: var(--accent-deep); }
.slides-note {
  font-size: 11px; color: var(--text-faint); font-family: var(--font-mono);
  margin-top: 10px; padding: 0 2px; opacity: 0.7;
}

/* ════════════════════════════════════════════════════════════════════════
   PORTAL DUA PINTU + HUB KELAS (D-L1: P2+S1+K1+C2, 2026-07-03)
   Semua warna via var tema — otomatis ikut 7 tema.
   ════════════════════════════════════════════════════════════════════════ */

/* Topbar — link cepat Kelas */
.topbar-kelas {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 12px;
  font: 700 12.5px var(--font-ui); color: var(--accent-deep); text-decoration: none;
  border: 1px solid var(--hairline); background: var(--accent-tint);
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
}
.topbar-kelas:hover { background: var(--accent-deep); color: #fff; border-color: var(--accent-deep); }

/* Topbar — pill "Untuk Kampus" (HOME-02), aksen accent2 supaya beda dari Kelas */
.topbar-kampus {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 8px;
  font: 700 12.5px var(--font-ui); color: var(--accent2); text-decoration: none;
  border: 1px solid var(--hairline); background: var(--accent2-tint);
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
}
.topbar-kampus:hover { background: var(--accent2); color: #fff; border-color: var(--accent2); }

/* C2 — kartu "Lanjutkan" */
.resume-card {
  display: flex; align-items: center; gap: 12px; max-width: 520px;
  background: var(--card-bg); border: 1px solid var(--hairline);
  border-radius: 12px; padding: 10px 14px; margin: 0 0 26px;
  text-decoration: none; color: var(--text);
  box-shadow: 0 6px 16px rgba(2, 8, 20, 0.05);
  transition: transform 0.15s, border-color 0.15s;
}
.resume-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.resume-card[hidden] { display: none; }
.rc-thumb {
  flex: 0 0 auto; width: 44px; height: 34px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(120deg, var(--accent-tint), var(--accent2-tint));
  border: 1px solid var(--hairline); color: var(--accent); font-size: 13px;
}
.rc-body { flex: 1; min-width: 0; }
.rc-body b { display: block; font: 600 13px var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-bar { display: block; height: 4px; border-radius: 2px; background: var(--hairline); margin-top: 6px; }
.rc-bar i { display: block; height: 4px; border-radius: 2px; background: var(--accent); }
.rc-meta { display: block; font: 500 10.5px var(--font-ui); color: var(--text-faint); margin-top: 4px; }

/* HOME-05 — kartu save-file dua-state, posisi paling atas (di atas .pc-hero) kalau xp>0.
   #sfc-resume-slot diisi dengan MEMINDAHKAN node .resume-card-wrap (JS) — reuse styling
   resume-card di atas apa adanya, di sini hanya bungkus + header Lv/streak. */
.save-file-card {
  max-width: 620px;
  margin: 0 0 26px;
  padding: 16px 18px 4px;
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(2, 8, 20, 0.06);
}
.save-file-card[hidden] { display: none; }
.sfc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sfc-badge {
  display: inline-flex; align-items: center;
  font: 800 12.5px var(--font-ui); letter-spacing: 0.04em;
  color: #fff; background: var(--accent-deep);
  padding: 5px 12px; border-radius: 999px;
}
.sfc-streak {
  font: 700 12px var(--font-mono); color: var(--accent-deep);
}
.save-file-card .resume-card-wrap { margin: 0; max-width: none; }

/* HABIT-03 — pembungkus resume-card di beranda + streak + link profil.
   SPINE-05: .resume-list = wrapper flex-column untuk 1-3 kartu (homepage via
   .resume-card-wrap .resume-list, Hub Kelas via #hub-resume-list berdiri sendiri —
   dua konteks, satu aturan generik .resume-list di bawah menangani keduanya). */
.resume-card-wrap { max-width: 520px; margin: 0 0 26px; }
.resume-card-wrap[hidden] { display: none; }
.resume-list { display: flex; flex-direction: column; gap: 8px; }
.resume-list[hidden] { display: none; }
#hub-resume-list.resume-list { max-width: 520px; margin: 0 0 26px; }
.resume-card-wrap .resume-list { margin-bottom: 6px; }
.resume-list .resume-card { max-width: none; margin: 0; }
.rc-streak { display: block; font: 700 10.5px var(--font-mono); color: var(--accent-deep); margin-top: 4px; }
.rc-profile-link { display: inline-block; font: 500 11px var(--font-ui); color: var(--accent); text-decoration: none; margin-left: 4px; }
.rc-profile-link:hover { text-decoration: underline; }

/* P2 — dua pintu beraura dua-nada */
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 34px; }
.door {
  position: relative; border: 1px solid var(--hairline); border-radius: 16px;
  padding: 24px 22px 20px;
  background:
    radial-gradient(340px 190px at 100% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 65%),
    radial-gradient(300px 190px at 0% 100%, color-mix(in srgb, var(--accent2) 15%, transparent), transparent 60%),
    var(--card-bg);
  transition: transform 0.15s, box-shadow 0.15s;
}
.door:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(2, 8, 20, 0.10); }
.door-mandiri {
  background:
    radial-gradient(340px 190px at 100% 0%, color-mix(in srgb, var(--accent2) 20%, transparent), transparent 65%),
    radial-gradient(300px 190px at 0% 100%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 60%),
    var(--card-bg);
}
.door h3 { font-family: var(--font-display); font-size: 30px; font-weight: 400; letter-spacing: 0.02em; color: var(--text); margin-bottom: 8px; }
.door .dcursor { color: var(--accent); animation: blink 1.8s steps(2) infinite; }
.door p { font: 400 14px/1.6 var(--font-body); color: var(--text-muted); margin-bottom: 14px; }
.door-cta {
  display: inline-block; background: var(--accent-deep); color: #fff; text-decoration: none;
  font: 700 12.5px var(--font-ui); padding: 8px 16px; border-radius: 999px;
}
.door-cta:hover { background: var(--accent-dark); }
.door-mandiri .door-cta { background: var(--accent2); }
.door-mini { display: block; margin-top: 12px; font: 600 10.5px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
.door-mini a { color: var(--accent2); text-decoration: none; }

/* S1 — strip statistik angka serif */
.stats-strip {
  display: flex; gap: 40px; flex-wrap: wrap; align-items: baseline;
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  padding: 16px 4px; margin-bottom: 30px;
}
.stats-strip .n { font-family: 'Source Serif 4', Georgia, serif; font-size: 34px; font-weight: 700; line-height: 1.1; color: var(--accent); }
.stats-strip .l { font: 700 10px var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-soft); margin-top: 2px; }
/* HOME-05 — SEMUA angka stats-strip jadi <a> (pintu auditable: katalog/deck acak/widget/tools) */
.stats-strip a.st {
  display: block; text-decoration: none; cursor: pointer;
  transition: transform 0.15s;
}
.stats-strip a.st:hover { transform: translateY(-2px); }
.stats-strip a.st:hover .n { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 4px; }

/* HOME-05 langkah 6 — widget live terkurasi, embed dekat stats-strip */
.stats-widget-feature {
  max-width: 620px; margin: 0 0 34px;
  background: var(--card-bg); border: 1px solid var(--hairline-soft);
  border-radius: 14px; padding: 16px 18px 18px;
}
.swf-label { font: 700 11px var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 10px; }
.swf-link { display: inline-block; margin-top: 10px; font: 600 12.5px var(--font-ui); color: var(--accent-deep); text-decoration: none; }
.swf-link:hover { text-decoration: underline; }

/* Program Kuliahku — link banner dari Hub Kelas (W4, 2026-07-15) */
.hub-program-link {
  display: inline-block; margin: 0 0 18px; padding: 10px 16px;
  background: var(--accent-tint); border: 1px solid var(--accent-deep); border-radius: 10px;
  color: var(--accent-deep); font: 600 13px var(--font-ui); text-decoration: none;
}
.hub-program-link:hover { background: var(--accent-deep); color: var(--selection-fg); }

/* Program Kuliahku — halaman /program/ (W4, 2026-07-15). Var tema global saja, nol warna baru. */
.program-disclaimer {
  font-size: 0.82rem; color: var(--text-faint); background: var(--card-bg);
  border-left: 3px solid var(--accent-deep); padding: 10px 14px; border-radius: 0 8px 8px 0;
  margin: 0 0 22px; max-width: 640px;
}
.program-picker { display: flex; gap: 16px; flex-wrap: wrap; }
.program-card {
  flex: 1 1 220px; max-width: 280px; text-align: left; cursor: pointer;
  background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 12px;
  padding: 22px 20px; font-family: var(--font-ui); color: var(--text);
  display: flex; flex-direction: column; gap: 6px; transition: border-color 0.15s, transform 0.15s;
}
.program-card:hover { border-color: var(--accent-deep); transform: translateY(-2px); }
.program-card-title { font-size: 1.15rem; font-weight: 700; }
.program-card-count { font-size: 0.82rem; color: var(--text-faint); font-family: var(--font-mono); }

.program-app-header { margin-bottom: 24px; }
.program-ganti-btn {
  background: none; border: none; color: var(--text-faint); font: 600 0.82rem var(--font-ui);
  cursor: pointer; text-decoration: underline; padding: 0; margin-bottom: 14px;
}
.program-dashboard-empty { color: var(--text-faint); font-size: 0.9rem; }
.program-summary { font-size: 0.94rem; color: var(--text); margin-bottom: 12px; }
.program-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.program-course-card {
  display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--text);
  background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 10px; padding: 14px 16px;
}
.program-course-card:hover { border-color: var(--accent-deep); }
.pcc-title { font-weight: 700; font-size: 0.92rem; }
.pcc-bar { display: block; height: 6px; border-radius: 999px; background: var(--hairline); overflow: hidden; }
.pcc-bar-fill { display: block; height: 100%; background: var(--accent-deep); }
.pcc-count { font-size: 0.76rem; color: var(--text-faint); font-family: var(--font-mono); }

.program-sem-group { margin-bottom: 22px; }
.program-sem-title {
  font: 700 0.78rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-faint); margin: 0 0 10px;
}
.program-sem-list { display: flex; flex-direction: column; gap: 4px; }
.program-matkul-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  cursor: pointer; font-size: 0.9rem; color: var(--text);
}
.program-matkul-row:hover { background: var(--hover-bg); }
.program-matkul-check { flex: 0 0 auto; width: 16px; height: 16px; cursor: pointer; }
.pmr-title { flex: 1 1 auto; }
.pmr-lintas {
  font-size: 0.68rem; font-weight: 700; color: var(--text-faint); text-transform: uppercase;
  border: 1px solid var(--hairline); border-radius: 999px; padding: 1px 6px; margin-left: 6px;
}
.pmr-link { color: var(--text-faint); text-decoration: none; font-size: 0.85rem; }
.pmr-link:hover { color: var(--accent-deep); }

/* HUB KELAS — tabs prodi + grid kartu matkul (K1) */
.hub-back { display: inline-block; font: 600 12px var(--font-ui); color: var(--accent-deep); text-decoration: none; margin-bottom: 10px; }
.hub-back:hover { color: var(--accent); }
.hub-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 20px; }
.hub-tab {
  border: 1px solid var(--hairline); background: var(--card-bg); color: var(--text-muted);
  font: 600 12px var(--font-ui); padding: 7px 14px; border-radius: 999px; cursor: pointer;
}
.hub-tab .cnt { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); }
.hub-tab.active { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.hub-tab.active .cnt { color: rgba(255, 255, 255, 0.8); }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.course-card {
  display: block; text-decoration: none; color: var(--text);
  background: color-mix(in srgb, var(--card-bg) 80%, transparent);
  border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden;
  box-shadow: 0 5px 14px rgba(2, 8, 20, 0.04);
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.course-card:hover { transform: translateY(-3px); border-color: var(--accent2); box-shadow: 0 12px 26px rgba(2, 8, 20, 0.09); }
.cc-hd {
  padding: 7px 13px; border-bottom: 1px solid var(--hairline);
  font: 800 9.5px var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent2);
}
.cc-bd { padding: 11px 13px 13px; }
.cc-bd h3 { font: 700 14px/1.35 var(--font-ui); margin-bottom: 4px; color: var(--text); }
.cc-meta { font: 500 10.5px var(--font-ui); color: var(--text-soft); margin-bottom: 9px; }
.cc-dots { display: flex; gap: 3px; flex-wrap: wrap; }
.cc-dots i { width: 9px; height: 9px; border-radius: 2px; background: var(--hairline); }
.cc-dots i.on { background: var(--accent); }

/* Chip filter bidang (sidebar Kelas + Hub) */
.bidang-chips { display: flex; gap: 5px; flex-wrap: wrap; margin: 8px 0 10px; }
.bchip {
  border: 1px solid var(--hairline); background: var(--card-bg); color: var(--text-muted);
  font: 600 10px var(--font-ui); padding: 4px 9px; border-radius: 999px; cursor: pointer;
}
.bchip.active { background: var(--accent2); border-color: var(--accent2); color: #fff; }

/* Sidebar — kelompok semester di dalam prodi */
.smt-group { margin-left: 4px; }
.smt-group > summary.smt-head {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between;
  font: 700 10px var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-soft); border-bottom: 1px dashed var(--hairline);
  padding: 6px 8px 5px; margin: 4px 0 2px;
}
.smt-group > summary.smt-head::-webkit-details-marker { display: none; }
.smt-group > summary.smt-head::after { content: "›"; transition: transform 0.15s; }
.smt-group[open] > summary.smt-head::after { transform: rotate(90deg); }
.smt-group .matkul-accordion { margin-left: 8px; }

/* Sidebar — kelompok prodi di panel slides */
.prodi-group > summary.prodi-head {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between;
  font: 800 10px var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-deep); background: var(--accent-tint);
  border-radius: 7px; padding: 7px 10px; margin: 8px 0 4px;
}
.prodi-group > summary.prodi-head::-webkit-details-marker { display: none; }
.prodi-group > summary.prodi-head::after { content: "›"; transition: transform 0.15s; }
.prodi-group[open] > summary.prodi-head::after { transform: rotate(90deg); }
.prodi-count { font: 600 9px var(--font-mono); color: var(--text-faint); text-transform: none; letter-spacing: 0; }
.prodi-group .matkul-accordion { margin-left: 6px; }

/* Responsif */
@media (max-width: 820px) {
  .doors { grid-template-columns: 1fr; }
  .stats-strip { gap: 22px; }
  .stats-strip .n { font-size: 26px; }
  .topbar-kelas { display: none; }
}

/* ============================================================
   TEMA ARCADE — retro-pixel (arah G1 "Kampus Arcade")
   HANYA aktif saat [data-theme="arcade"]. Tidak menyentuh tema lain.
   Warna: var(--*) sudah di-set via data/themes.yaml (col1-bg #EDE4C8,
   accent #D6002A merah arcade, accent2 #0B1F5C navy).
   Look: border tegas 2-3px + border-radius 0 + box-shadow offset keras
   pada kartu/tombol/chip; VT323 sudah global (head-meta.html), body tetap Inter.
   ============================================================ */
/* Catatan implementasi: longhand border-width/style/color dipakai TERPISAH
   (bukan shorthand `border: var(--x)`) — shorthand var() lewat custom property
   bisa gagal override longhand-color yang sudah di-set rule lain di sejumlah
   browser (color tetap dari tema sebelumnya walau width/style berubah). */

/* Scrollbar senada tema arcade */
[data-theme="arcade"] ::-webkit-scrollbar { width: 12px; height: 12px; }
[data-theme="arcade"] ::-webkit-scrollbar-track { background: var(--col1-bg); }
[data-theme="arcade"] ::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-width: 2px; border-style: solid; border-color: var(--text);
  border-radius: 0;
}
[data-theme="arcade"] ::-webkit-scrollbar-thumb:hover { background: var(--accent-deep); }

/* Kartu — border tegas + shadow offset keras, sudut lancip */
[data-theme="arcade"] .tool-card,
[data-theme="arcade"] .paket-item,
[data-theme="arcade"] .paket-card,
[data-theme="arcade"] .door,
[data-theme="arcade"] .article-excel,
[data-theme="arcade"] .article-body .table-wrap,
[data-theme="arcade"] .cc-bd,
[data-theme="arcade"] .rc-body,
[data-theme="arcade"] .welcome .diff-card,
[data-theme="arcade"] .folder-item,
[data-theme="arcade"] .prodi-group > summary.prodi-head {
  border-radius: 0 !important;
  border-width: 3px !important;
  border-style: solid !important;
  border-color: var(--text) !important;
  box-shadow: 4px 4px 0 var(--text) !important;
}
[data-theme="arcade"] .tool-card:hover,
[data-theme="arcade"] .paket-item:hover,
[data-theme="arcade"] .door:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--text) !important;
}

/* Tombol / CTA / aksi — sudut lancip + shadow offset keras */
[data-theme="arcade"] .door-cta,
[data-theme="arcade"] .excel-dl-btn,
[data-theme="arcade"] .hub-tab,
[data-theme="arcade"] .filter-btn {
  border-radius: 0 !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: var(--text) !important;
  box-shadow: 3px 3px 0 var(--text) !important;
}
[data-theme="arcade"] .door-cta:hover,
[data-theme="arcade"] .excel-dl-btn:hover,
[data-theme="arcade"] .hub-tab:hover,
[data-theme="arcade"] .filter-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--text) !important;
}
[data-theme="arcade"] .door-cta:active,
[data-theme="arcade"] .excel-dl-btn:active,
[data-theme="arcade"] .filter-btn:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--text) !important;
}

/* Chip / badge / pill — border tegas, sudut lancip (bentuk pill dimatikan) */
[data-theme="arcade"] .tool-card-badge,
[data-theme="arcade"] .sr-badge,
[data-theme="arcade"] .paket-item-num,
[data-theme="arcade"] .cc-bd .tag,
[data-theme="arcade"] .article .pill {
  border-radius: 0 !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: var(--text) !important;
  box-shadow: 2px 2px 0 var(--text) !important;
}

/* Theme-switcher swatch aktif + tombol font-size ikut sudut lancip di tema ini */
[data-theme="arcade"] .theme-switcher,
[data-theme="arcade"] .font-switcher,
[data-theme="arcade"] .search-wrap input,
[data-theme="arcade"] .actions a {
  border-radius: 0 !important;
}
[data-theme="arcade"] .fsize.active {
  border-radius: 0 !important;
  box-shadow: 2px 2px 0 var(--text) !important;
}

/* Hover kartu/list generik (search result, paket item, tool card) */
[data-theme="arcade"] .search-result:hover {
  box-shadow: inset 3px 0 0 var(--accent) !important;
}

/* ============================================================
   /mulai/ — landing link-in-bio mobile-first (HOME-06)
   Reuse token tema aktif (--accent, --card-bg, dll); tanpa warna baru.
   ============================================================ */
.mulai-pane {
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}
.mulai-header {
  text-align: center;
  margin-bottom: 24px;
}
.mulai-header h1 {
  font-size: 1.8rem;
  margin: 0 0 6px;
  color: var(--text);
}
.mulai-sub {
  color: var(--text-soft);
  margin: 0;
  font-size: 1rem;
}
.mulai-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mulai-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 14px 18px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--card-bg);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s ease, transform 0.1s ease, background 0.15s ease;
}
.mulai-btn:hover,
.mulai-btn:focus-visible {
  border-color: var(--accent);
  background: var(--hover-bg);
  transform: translateY(-1px);
  outline: none;
}
.mulai-btn-emoji {
  font-size: 1.9rem;
  line-height: 1;
  flex-shrink: 0;
}
.mulai-btn-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mulai-btn-title {
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--text);
}
.mulai-btn-desc {
  font-size: 0.86rem;
  color: var(--text-soft);
}
@media (max-width: 480px) {
  .mulai-pane { padding: 16px 12px 40px; }
  .mulai-btn-title { font-size: 1rem; }
}

/* ============================================================
   /brand/ — lembar brand (BRAND-05)
   Reuse token tema aktif; tanpa warna baru, tanpa gambar statis —
   semua render langsung dari CSS var supaya ikut ganti tema.
   ============================================================ */
.brand-pane {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 20px 56px;
}
.brand-header { margin-bottom: 32px; }
.brand-header h1 { font-size: 1.9rem; margin: 0 0 8px; color: var(--text); }
.brand-sub { color: var(--text-soft); font-size: 1rem; max-width: 560px; line-height: 1.6; }

.brand-section { margin-bottom: 40px; }
.brand-section-title {
  font-size: 1.1rem; font-weight: 700; color: var(--text);
  margin: 0 0 6px; padding-bottom: 8px; border-bottom: 1px solid var(--hairline);
}
.brand-section-desc { color: var(--text-soft); font-size: 0.92rem; margin: 8px 0 16px; }

.brand-wordmark-box {
  background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 12px;
  padding: 32px 24px; text-align: center;
}
.brand-wordmark {
  font-family: var(--font-display); font-size: 3rem; color: var(--text);
  letter-spacing: 0.01em;
}
.brand-wordmark sup { color: var(--accent-deep); }
.brand-wordmark-tagline { color: var(--text-soft); font-family: var(--font-ui); margin-top: 8px; font-size: 0.95rem; }

.brand-swatch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; }
.brand-swatch { background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; }
.brand-swatch-color { height: 64px; }
.brand-swatch-label {
  display: block; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700;
  color: var(--text); padding: 8px 10px 0;
}
.brand-swatch-hex {
  display: block; font-family: var(--font-mono); font-size: 0.72rem;
  color: var(--text-faint); padding: 2px 10px 10px;
}

.brand-font-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.brand-font-sample { background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 10px; padding: 14px 16px; }
.brand-font-label {
  display: block; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px;
}
.brand-font-live { color: var(--text); }

.brand-component-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.brand-component-demo {
  background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 10px;
  padding: 16px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.brand-component-label {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em;
}
.brand-demo-card {
  background: var(--col3-bg); border: 1px solid var(--hairline); border-radius: 8px;
  padding: 12px 14px; width: 100%;
}
.brand-demo-card-title { font-weight: 700; font-size: 0.92rem; color: var(--text); margin-bottom: 4px; }
.brand-demo-card-desc { font-size: 0.82rem; color: var(--text-soft); }
.brand-demo-btn {
  display: inline-block; background: var(--accent-deep); color: var(--selection-fg);
  font-family: var(--font-ui); font-weight: 700; font-size: 0.85rem;
  padding: 9px 18px; border-radius: 999px; text-decoration: none;
}
.brand-demo-btn:hover { background: var(--accent-dark); }
.brand-demo-badge {
  display: inline-block; background: var(--accent-deep); color: var(--selection-fg);
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
}
.brand-demo-chip {
  display: inline-block; background: var(--accent2-tint); color: var(--accent-deep);
  font-family: var(--font-ui); font-size: 0.8rem; font-weight: 600;
  padding: 5px 12px; border-radius: 999px;
}
@media (max-width: 480px) {
  .brand-pane { padding: 20px 14px 40px; }
  .brand-wordmark { font-size: 2.2rem; }
}

/* ── Halaman single di section brand (mis. /brand/kontras/) ── */
.brand-body { color: var(--text); font-size: 0.95rem; line-height: 1.7; }
.brand-body p { margin: 0 0 16px; max-width: 720px; }
.brand-body table {
  width: 100%; border-collapse: collapse; margin: 20px 0 28px;
  font-size: 0.86rem; background: var(--card-bg); border: 1px solid var(--hairline);
  border-radius: 10px; overflow: hidden;
}
.brand-body th, .brand-body td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--hairline-soft); }
.brand-body th {
  font-family: var(--font-ui); font-weight: 700; color: var(--text-soft);
  font-size: 0.76rem; text-transform: uppercase; background: var(--accent-tint);
}
.brand-body tr:last-child td { border-bottom: none; }
.brand-body code {
  font-family: var(--font-mono); font-size: 0.85em; background: var(--accent-tint);
  color: var(--accent-deep); padding: 1px 5px; border-radius: 4px;
}
@media (max-width: 640px) {
  .brand-body table { font-size: 0.76rem; }
  .brand-body th, .brand-body td { padding: 8px 8px; }
}

/* ============================================================
   /demo — matkul flagship terbuka penuh (COMMERCIAL-04 + HOME-04, digabung)
   Header serif (--font-body, BUKAN --font-display) sesuai spek: kesan formal,
   bukan gaya retro-arcade situs. Reuse harga-tabel-jangkar.html (COMMERCIAL-01).
   ============================================================ */
.demo-pane { max-width: 680px; margin: 0 auto; padding: 28px 20px 56px; }
.demo-header { text-align: center; margin-bottom: 28px; }
.demo-eyebrow {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  color: var(--accent-deep); text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.demo-title { font-family: var(--font-body); font-size: 2.1rem; color: var(--text); margin: 0 0 10px; }
.demo-sub { color: var(--text-soft); font-size: 0.98rem; max-width: 520px; margin: 0 auto; line-height: 1.6; }

.demo-pertemuan-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 40px; }
.demo-pertemuan-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 10px;
  padding: 12px 16px; text-decoration: none; color: var(--text);
  transition: border-color 0.15s, transform 0.12s;
}
.demo-pertemuan-item:hover { border-color: var(--accent-deep); transform: translateX(2px); }
.demo-pertemuan-num {
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700;
  color: var(--accent-deep); flex-shrink: 0; width: 24px;
}
.demo-pertemuan-title { flex: 1; font-size: 0.92rem; }
.demo-pertemuan-arrow { color: var(--text-faint); flex-shrink: 0; }

.demo-jangkar { margin-bottom: 32px; }
.demo-jangkar-title { font-family: var(--font-body); font-size: 1.3rem; color: var(--text); margin: 0 0 14px; }

.demo-cta-box {
  background: var(--accent-tint); border: 1px solid var(--accent-deep); border-radius: 12px;
  padding: 22px; text-align: center; margin-bottom: 20px;
}
.demo-cta-text { color: var(--text); font-size: 0.95rem; margin: 0 0 12px; }
.demo-cta-btn {
  display: inline-block; background: var(--accent-deep); color: var(--selection-fg);
  font-family: var(--font-ui); font-weight: 700; font-size: 0.9rem;
  padding: 11px 22px; border-radius: 999px; text-decoration: none;
}
.demo-cta-btn:hover { background: var(--accent-dark); }
.demo-cta-note { font-size: 0.75rem; font-weight: 400; opacity: 0.85; }

.demo-build-note { text-align: center; font-size: 0.78rem; color: var(--text-faint); font-family: var(--font-mono); }
@media (max-width: 480px) {
  .demo-pane { padding: 20px 14px 40px; }
  .demo-title { font-size: 1.7rem; }
}

/* ============================================================
   /layanan — hub 5 produk B2B (COMMERCIAL-02)
   ============================================================ */
.layanan-pane { max-width: 900px; margin: 0 auto; padding: 28px 20px 56px; }
.layanan-header { text-align: center; margin-bottom: 22px; }
.layanan-header h1 { font-size: 1.9rem; margin: 0 0 8px; color: var(--text); }
.layanan-sub { color: var(--text-soft); font-size: 1rem; max-width: 560px; margin: 0 auto; }

.layanan-proof-banner {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center; text-decoration: none;
  background: var(--accent-tint); border: 1px solid var(--accent-deep); border-radius: 12px;
  padding: 16px 20px; margin-bottom: 32px;
}
.layanan-proof-label { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; color: var(--accent-deep); text-transform: uppercase; letter-spacing: 0.04em; }
.layanan-proof-text { font-size: 0.98rem; font-weight: 600; color: var(--text); }

.layanan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 44px; }
.layanan-card {
  background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 12px;
  padding: 18px 20px; display: flex; flex-direction: column; gap: 8px;
}
.layanan-card-title { font-size: 1.05rem; color: var(--text); margin: 0; }
.layanan-card-desc { font-size: 0.86rem; color: var(--text-soft); line-height: 1.5; flex: 1; }
.layanan-card-anggaran { font-size: 0.76rem; color: var(--text-faint); font-family: var(--font-mono); }
.layanan-card-harga, .layanan-card-harga-multi { margin-top: 4px; }
.layanan-card-harga-multi { font-size: 0.82rem; display: flex; flex-direction: column; gap: 4px; }
.layanan-card-link { font-size: 0.84rem; font-weight: 700; color: var(--accent-deep); text-decoration: none; margin-top: 4px; }
.layanan-card-link:hover { text-decoration: underline; }

.layanan-faq { max-width: 640px; margin: 0 auto; }
.layanan-faq-title { font-size: 1.2rem; color: var(--text); margin: 0 0 16px; text-align: center; }
.layanan-faq-item {
  background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 10px;
  padding: 12px 16px; margin-bottom: 10px;
}
.layanan-faq-item summary { cursor: pointer; font-weight: 600; color: var(--text); font-size: 0.92rem; }
.layanan-faq-item p { margin-top: 10px; color: var(--text-soft); font-size: 0.86rem; line-height: 1.6; }
@media (max-width: 480px) {
  .layanan-pane { padding: 20px 14px 40px; }
}

/* ============================================================
   /harga (COMMERCIAL-03)
   ============================================================ */
.harga-pane { max-width: 680px; margin: 0 auto; padding: 28px 20px 56px; }
.harga-header { text-align: center; margin-bottom: 28px; }
.harga-header h1 { font-size: 1.9rem; margin: 0 0 8px; color: var(--text); }
.harga-sub { color: var(--text-soft); font-size: 1rem; }

.harga-section { margin-bottom: 36px; }
.harga-section-title {
  font-size: 1.15rem; font-weight: 700; color: var(--text);
  margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--hairline);
}
.harga-b2b-list { display: flex; flex-direction: column; gap: 2px; }
.harga-b2b-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 4px; border-bottom: 1px solid var(--hairline-soft);
}
.harga-b2b-label { font-size: 0.92rem; color: var(--text); }
.harga-b2c-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.harga-b2c-card {
  background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 10px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
}
.harga-b2c-label { font-size: 0.88rem; font-weight: 600; color: var(--text); }
.harga-note { margin-top: 12px; font-size: 0.86rem; }
.harga-note a { color: var(--accent-deep); text-decoration: none; font-weight: 700; }
.harga-note a:hover { text-decoration: underline; }
.harga-jangkar-note { font-size: 0.8rem; color: var(--text-faint); margin-top: 10px; font-style: italic; }
@media (max-width: 480px) {
  .harga-pane { padding: 20px 14px 40px; }
  .harga-b2b-row { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ============================================================
   /workshop — silabus, jadwal, minat in-house (COMMERCIAL-05)
   ============================================================ */
.workshop-pane { max-width: 760px; margin: 0 auto; padding: 28px 20px 56px; }
.workshop-back-link { display: inline-block; font-size: 0.84rem; color: var(--accent-deep); text-decoration: none; font-weight: 600; margin-bottom: 18px; }
.workshop-back-link:hover { text-decoration: underline; }

.workshop-header { text-align: center; margin-bottom: 28px; }
.workshop-header h1 { font-size: 1.9rem; margin: 0 0 8px; color: var(--text); }
.workshop-sub { color: var(--text-soft); font-size: 1rem; max-width: 560px; margin: 0 auto; }

.workshop-section { margin-bottom: 36px; }
.workshop-section-title {
  font-size: 1.15rem; font-weight: 700; color: var(--text);
  margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--hairline);
}
.workshop-draft-note {
  font-size: 0.82rem; color: var(--text-faint); font-style: italic;
  background: var(--accent-tint); border: 1px solid var(--hairline); border-radius: 8px;
  padding: 10px 14px; margin: 0 0 16px;
}
.workshop-empty-note { font-size: 0.88rem; color: var(--text-faint); font-style: italic; }

.workshop-syllabus-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.workshop-session-card {
  background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 12px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 6px;
}
.workshop-session-num { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; color: var(--accent-deep); text-transform: uppercase; letter-spacing: 0.04em; }
.workshop-session-title { font-size: 1rem; color: var(--text); margin: 0; }
.workshop-session-desc { font-size: 0.86rem; color: var(--text-soft); line-height: 1.5; }

.workshop-table-wrap { overflow-x: auto; }
.workshop-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.workshop-table th, .workshop-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hairline-soft); }
.workshop-table th { color: var(--text-faint); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.workshop-table td { color: var(--text); }

.workshop-btn-tbd {
  display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: baseline;
  font-size: 0.84rem; font-weight: 700; color: var(--accent-deep); text-decoration: none;
}
.workshop-btn-tbd:hover { text-decoration: underline; }
.workshop-btn-note { font-size: 0.74rem; font-weight: 400; font-style: italic; color: var(--text-faint); }

.workshop-inhouse-card {
  background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 12px;
  padding: 18px 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px;
}

.workshop-crosslinks { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; font-size: 0.86rem; margin-top: 8px; }
.workshop-crosslinks a { color: var(--accent-deep); text-decoration: none; font-weight: 700; }
.workshop-crosslinks a:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .workshop-pane { padding: 20px 14px 40px; }
  .workshop-inhouse-card { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   /katalog — tabel 99 matkul + filter + print-to-PDF (HOME-03)
   ============================================================ */
.katalog-pane { max-width: 920px; margin: 0 auto; padding: 28px 20px 56px; }
.katalog-header { text-align: center; margin-bottom: 20px; }
.katalog-header h1 { font-size: 1.9rem; margin: 0 0 8px; color: var(--text); }
.katalog-sub { color: var(--text-soft); font-size: 0.96rem; margin: 0 0 14px; }
.katalog-print-btn {
  background: var(--accent-deep); color: var(--selection-fg); border: none;
  font-family: var(--font-ui); font-weight: 700; font-size: 0.86rem;
  padding: 9px 20px; border-radius: 999px; cursor: pointer;
}
.katalog-print-btn:hover { background: var(--accent-dark); }

.katalog-filters { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; justify-content: center; }
.katalog-filter-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.katalog-filter-label { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; color: var(--text-faint); text-transform: uppercase; }
.katalog-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.katalog-chip {
  background: var(--card-bg); border: 1px solid var(--hairline); color: var(--text-soft);
  font-family: var(--font-ui); font-size: 0.78rem; font-weight: 600;
  padding: 5px 12px; border-radius: 999px; cursor: pointer;
}
.katalog-chip.active { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--selection-fg); }

.katalog-print-header { display: none; }

.katalog-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.katalog-table th, .katalog-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--hairline-soft); }
.katalog-table th { font-family: var(--font-ui); font-weight: 700; color: var(--text-soft); font-size: 0.76rem; text-transform: uppercase; }
.katalog-table td a { color: var(--accent-deep); text-decoration: none; font-weight: 600; }
.katalog-table td a:hover { text-decoration: underline; }
.katalog-empty-msg { text-align: center; color: var(--text-faint); padding: 24px 0; }

@media (max-width: 640px) {
  .katalog-table { font-size: 0.78rem; }
  .katalog-table th:nth-child(4), .katalog-table td:nth-child(4) { display: none; }
}

/* Cetak/unduh PDF — shell Finder (.topbar/.col1/.nav-overlay) sudah disembunyikan
   oleh blok @media print global (baris ~1386) — di sini HANYA tambahan spesifik
   katalog: sembunyikan filter/tombol/subheadline, tampilkan header cetak. */
@media print {
  .katalog-filters, .katalog-print-btn, .katalog-sub { display: none !important; }
  .katalog-pane { max-width: 100%; padding: 0; }
  .katalog-header { text-align: left; margin-bottom: 10px; }
  .katalog-print-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; border-bottom: 2px solid #000; padding-bottom: 8px; }
  .katalog-print-title { font-weight: 700; font-size: 1.1rem; }
  .katalog-print-date { font-size: 0.8rem; color: #444; }
  .katalog-table { font-size: 10pt; }
  .katalog-table th, .katalog-table td { border-bottom: 1px solid #ccc; }
}

/* ============================================================
   Footer global "topbar-mirror" (HOME-02) — strip tipis persisten,
   BUKAN mega-footer. Baris grid ke-3 pada .app (lihat .app di atas,
   grid-template-rows: auto 1fr auto) — sibling .finder, tidak ikut
   ter-swap HTMX karena berada di LUAR #col3.
   ============================================================ */
.site-footer {
  padding: 10px 22px;
  background: var(--topbar-bg);
  border-top: 1px solid var(--hairline);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.site-footer-brand {
  font-family: var(--font-display); font-size: 16px; color: var(--text-faint); line-height: 1;
}
.site-footer-links { display: flex; gap: 14px; }
.site-footer-links a {
  font-family: var(--font-ui); font-size: 0.78rem; font-weight: 600;
  color: var(--text-soft); text-decoration: none;
}
.site-footer-links a:hover { color: var(--accent-deep); text-decoration: underline; }
#footer-email-capture:empty { display: none; }
@media (max-width: 480px) {
  .site-footer { padding: 8px 14px; gap: 10px; }
  .site-footer-links { gap: 10px; }
}
@media print {
  .site-footer { display: none !important; }
}

/* ============================================================
   Email capture 2-magnet di footer global (HOME-07) — NOL JS custom,
   pakai HTML5 <details>/<summary> untuk expand-collapse. Reuse token
   .download (tombol) dan gaya input .search-wrap (font-mono, col2-bg).
   Form statis action="#" — lihat TODO di layouts/partials/email-capture.html.
   ============================================================ */
.email-capture { position: relative; }
.email-capture-toggle {
  cursor: pointer; list-style: none;
  font-family: var(--font-ui); font-size: 0.78rem; font-weight: 600;
  color: var(--text-soft); padding: 4px 8px; border-radius: 6px;
  user-select: none;
}
.email-capture-toggle::-webkit-details-marker { display: none; }
.email-capture-toggle:hover { color: var(--accent-deep); }
.email-capture[open] .email-capture-toggle { color: var(--accent-deep); }
.email-capture-panel {
  position: absolute; bottom: calc(100% + 8px); right: 0;
  display: flex; gap: 12px; flex-wrap: wrap;
  background: var(--col3-bg); border: 1px solid var(--hairline); border-radius: 10px;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
  padding: 16px; width: 520px; max-width: min(520px, 90vw); z-index: 60;
}
.email-capture-card { flex: 1; min-width: 200px; }
.email-capture-card-head { font-family: var(--font-ui); font-weight: 800; font-size: 0.85rem; color: var(--text); margin-bottom: 4px; }
.email-capture-card-desc { font-size: 0.78rem; color: var(--text-soft); line-height: 1.5; margin: 0 0 10px; }
.email-capture-form { display: flex; flex-direction: column; gap: 8px; }
.email-capture-input {
  width: 100%; padding: 8px 10px; background: var(--col2-bg);
  border: 1px solid var(--hairline); border-radius: 5px;
  font-family: var(--font-mono); font-size: 12px; color: var(--text); outline: none;
  transition: all 0.15s;
}
.email-capture-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-tint); }
.email-capture-input::placeholder { color: var(--text-faint); }
.email-capture-submit.download { width: 100%; text-align: center; border: none; cursor: pointer; margin: 0; font-size: 12px; padding: 8px 12px; }
@media (max-width: 480px) {
  .email-capture-panel { position: fixed; left: 12px; right: 12px; bottom: 60px; width: auto; max-width: none; flex-direction: column; }
}
@media print {
  .email-capture { display: none !important; }
}

/* ============================================================
   /langganan — email mingguan "Materi Minggu Ini" (HABIT-04)
   100% statis: form Buttondown (endpoint placeholder), preview
   email mock dari data/kalender-materi-mingguan.yaml, 2 lead magnet.
   ============================================================ */
.langganan-pane { max-width: 680px; margin: 0 auto; padding: 28px 20px 56px; }
.langganan-header { text-align: center; margin-bottom: 28px; }
.langganan-eyebrow {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  color: var(--accent-deep); text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.langganan-title { font-family: var(--font-body); font-size: 2rem; color: var(--text); margin: 0 0 10px; }
.langganan-sub { color: var(--text-soft); font-size: 0.95rem; max-width: 480px; margin: 0 auto; line-height: 1.6; }

.langganan-form { margin: 0 auto 40px; max-width: 560px; }
.langganan-form-row { display: flex; gap: 8px; flex-wrap: wrap; }
.langganan-input, .langganan-select {
  font-family: var(--font-ui); font-size: 0.9rem;
  padding: 10px 14px; border: 1px solid var(--hairline); border-radius: 8px;
  background: var(--col3-bg); color: var(--text);
}
.langganan-input { flex: 2; min-width: 180px; }
.langganan-select { flex: 1; min-width: 140px; }
.langganan-input:focus, .langganan-select:focus { outline: none; border-color: var(--accent); }
.langganan-submit {
  font-family: var(--font-ui); font-weight: 700; font-size: 0.9rem;
  padding: 10px 20px; border: none; border-radius: 999px;
  background: var(--accent-deep); color: var(--selection-fg); cursor: pointer;
}
.langganan-submit:hover { background: var(--accent-dark); }

.langganan-preview-title { font-family: var(--font-body); font-size: 1.2rem; color: var(--text); margin: 0 0 14px; text-align: center; }
.langganan-mock-email {
  max-width: 480px; margin: 0 auto; border: 1px solid var(--hairline); border-radius: 12px;
  overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,0.05);
}
.langganan-mock-kop { background: var(--accent-deep); padding: 12px 18px; }
.langganan-mock-brand { font-family: var(--font-ui); font-weight: 700; font-size: 0.85rem; color: var(--selection-fg); }
.langganan-mock-body { padding: 20px 22px; background: var(--col3-bg); color: var(--text); font-size: 0.9rem; line-height: 1.6; }
.langganan-mock-greet { margin: 0 0 4px; }
.langganan-mock-materi { font-family: var(--font-body); font-size: 1.1rem; color: var(--text); margin: 8px 0 12px; }
.langganan-mock-tips { background: var(--accent-tint); border-radius: 8px; padding: 10px 14px; margin: 0 0 14px; }
.langganan-mock-cta { color: var(--accent-deep); font-weight: 700; text-decoration: none; }
.langganan-mock-cta:hover { text-decoration: underline; }
.langganan-preview-note { text-align: center; font-size: 0.78rem; color: var(--text-faint); margin: 10px 0 40px; }

.langganan-magnet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.langganan-magnet-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 20px 16px; text-align: center;
  background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 12px;
  text-decoration: none; color: var(--text);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.langganan-magnet-card:hover { transform: translateY(-2px); border-color: var(--accent-deep); }
.langganan-magnet-icon { font-size: 26px; }
.langganan-magnet-label { font-family: var(--font-ui); font-size: 0.88rem; font-weight: 600; }

@media (max-width: 480px) {
  .langganan-pane { padding: 20px 14px 40px; }
  .langganan-title { font-size: 1.6rem; }
  .langganan-form-row { flex-direction: column; }
  .langganan-input, .langganan-select, .langganan-submit { width: 100%; }
}

/* ============================================================
   /prodi-in-a-box + /k/<slug> — katalog matkul terfilter (COMMERCIAL-07)
   ============================================================ */
.pib-pane { max-width: 920px; margin: 0 auto; padding: 28px 20px 56px; }
.pib-header { text-align: center; margin-bottom: 22px; }
.pib-header h1 { font-size: 1.9rem; margin: 0 0 8px; color: var(--text); }
.pib-sub { color: var(--text-soft); font-size: 1rem; max-width: 640px; margin: 0 auto; }

.k-body { max-width: 640px; margin: 0 auto 28px; color: var(--text-soft); font-size: 0.92rem; line-height: 1.7; }
.k-body p { margin: 0 0 10px; }

.pib-section-title {
  font-size: 1.15rem; font-weight: 700; color: var(--text);
  margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--hairline);
}

.pib-deliverable { margin-bottom: 32px; }
.pib-deliverable-flow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  justify-content: center;
}
.pib-deliverable-item {
  background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 10px;
  padding: 10px 14px; font-size: 0.86rem; color: var(--text);
}
.pib-deliverable-item strong { color: var(--accent-deep); font-size: 1rem; }
.pib-deliverable-op { color: var(--text-faint); font-weight: 700; font-size: 1rem; }

.pib-pricing { margin-bottom: 32px; }
.pib-pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.pib-pricing-card {
  background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 12px;
  padding: 18px 20px; display: flex; flex-direction: column; gap: 6px;
}
.pib-pricing-label { font-size: 0.92rem; font-weight: 700; color: var(--text); }
.pib-pricing-value { font-size: 1rem; }
.pib-pricing-note { font-size: 0.78rem; color: var(--text-faint); margin: 0; }

.pib-katalog { margin-bottom: 28px; }

.pib-crosslinks {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--hairline-soft);
}
.pib-crosslinks a { font-size: 0.86rem; font-weight: 700; color: var(--accent-deep); text-decoration: none; }
.pib-crosslinks a:hover { text-decoration: underline; }

/* ----- prodi-katalog-app (partial dipakai di kedua halaman) ----- */
.prodi-katalog-app { display: flex; flex-direction: column; gap: 14px; }

.pk-highlight-banner {
  background: var(--accent-tint); border: 1px solid var(--accent-deep); border-radius: 10px;
  padding: 10px 14px; font-size: 0.86rem; color: var(--text); font-weight: 600;
}

.pk-filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px;
  background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 12px;
  padding: 14px 16px;
}
.pk-filter-group { display: flex; flex-direction: column; gap: 4px; border: none; padding: 0; margin: 0; }
.pk-filter-group label, .pk-filter-group legend {
  font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-faint); padding: 0;
}
.pk-filter-group select {
  background: var(--col3-bg); color: var(--text); border: 1px solid var(--hairline);
  border-radius: 8px; padding: 6px 10px; font-size: 0.86rem; min-width: 160px;
}
.pk-filter-bidang { flex: 1 1 260px; }
.pk-bidang-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.pk-bidang-chip {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--hairline); border-radius: 20px;
  padding: 3px 10px; font-size: 0.78rem; color: var(--text-soft); cursor: pointer;
  background: var(--col3-bg);
}
.pk-bidang-chip input { accent-color: var(--accent-deep); }
.pk-reset-btn {
  background: none; border: 1px solid var(--hairline); border-radius: 8px;
  padding: 7px 12px; font-size: 0.8rem; color: var(--text-soft); cursor: pointer;
  height: fit-content;
}
.pk-reset-btn:hover { border-color: var(--accent-deep); color: var(--accent-deep); }

.pk-summary { font-size: 0.82rem; color: var(--text-faint); }

.pk-results { overflow-x: auto; }
.pk-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.pk-table th, .pk-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--hairline-soft); }
.pk-table th { color: var(--text-faint); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.pk-table td { color: var(--text); }
.pk-table a { color: var(--accent-deep); text-decoration: none; font-weight: 600; }
.pk-table a:hover { text-decoration: underline; }
.pk-row-highlight { background: var(--accent-tint); }
.pk-empty { font-size: 0.88rem; color: var(--text-faint); font-style: italic; padding: 12px 0; }

.pk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pk-print-btn {
  background: var(--accent-deep); color: var(--selection-fg); border: none; border-radius: 999px;
  padding: 9px 18px; font-size: 0.86rem; font-weight: 700; cursor: pointer;
}
.pk-print-btn:hover { background: var(--accent-dark); }
.pk-print-note { font-size: 0.76rem; color: var(--text-faint); }

@media (max-width: 480px) {
  .pib-pane { padding: 20px 14px 40px; }
  .pib-header h1 { font-size: 1.6rem; }
  .pk-filters { flex-direction: column; align-items: stretch; }
  .pk-filter-group select { width: 100%; }
}

/* Print: sembunyikan filter/aksi, tampilkan hanya ringkasan + tabel hasil filter saat ini */
@media print {
  .pk-filters, .pk-actions, .pk-highlight-banner, .layanan-proof-banner, .pib-crosslinks { display: none !important; }
  .pk-table { font-size: 11px; }
}

/* ============================================================
   /prodi-in-a-box/hitung — kalkulator penghematan vs PKKM (COMMERCIAL-08)
   ============================================================ */
.kh-body { max-width: 640px; margin: 0 auto 24px; color: var(--text-soft); font-size: 0.92rem; line-height: 1.7; }
.kh-body p { margin: 0 0 10px; }

.kh-app {
  background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 14px;
  padding: 20px 22px; margin-bottom: 24px;
}
.kh-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-bottom: 18px; }
.kh-field { display: flex; flex-direction: column; gap: 4px; }
.kh-field label {
  font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-faint);
}
.kh-field input {
  background: var(--col3-bg); color: var(--text); border: 1px solid var(--hairline);
  border-radius: 8px; padding: 7px 10px; font-size: 0.9rem; width: 140px;
}
.kh-submit-btn {
  background: var(--accent-deep); color: var(--selection-fg); border: none; border-radius: 999px;
  padding: 9px 20px; font-size: 0.86rem; font-weight: 700; cursor: pointer; height: fit-content;
}
.kh-submit-btn:hover { background: var(--accent-dark); }

.kh-result { border-top: 1px solid var(--hairline-soft); padding-top: 16px; }
.kh-result-summary { font-size: 0.9rem; color: var(--text); margin: 0 0 12px; }

.kh-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.kh-table th, .kh-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--hairline-soft); }
.kh-table th { color: var(--text-faint); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.kh-table td { color: var(--text); }
.kh-table tr:first-child td { font-weight: 700; color: var(--accent-deep); }
.kh-rujukan-tbd { color: var(--text-faint); }
.kh-disclaimer { font-size: 0.76rem; color: var(--text-faint); margin: 12px 0 0; }

.kh-cta-box {
  background: var(--accent-tint); border: 1px solid var(--accent-deep); border-radius: 12px;
  padding: 18px 20px; text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.kh-cta-text { font-size: 0.92rem; color: var(--text); margin: 0; max-width: 480px; }
.kh-cta-btn {
  display: inline-block; background: var(--accent-deep); color: var(--selection-fg); border: none;
  border-radius: 999px; padding: 10px 20px; font-size: 0.86rem; font-weight: 700; text-decoration: none;
}
.kh-cta-btn:hover { background: var(--accent-dark); }
.kh-cta-note { font-size: 0.7rem; font-weight: 400; opacity: 0.85; }

@media (max-width: 480px) {
  .kh-form { flex-direction: column; align-items: stretch; }
  .kh-field input { width: 100%; }
}

/* ----- pib-whitelabel — seksi "Contoh Subdomain White-Label" di /prodi-in-a-box/ (COMMERCIAL-08) ----- */
.pib-whitelabel { margin-top: 8px; margin-bottom: 28px; }
.pib-whitelabel p { color: var(--text-soft); font-size: 0.9rem; line-height: 1.7; margin: 0 0 12px; }
.pib-whitelabel code {
  background: var(--col3-bg); border: 1px solid var(--hairline); border-radius: 4px;
  padding: 1px 6px; font-family: var(--font-mono); font-size: 0.85em;
}
.pib-whitelabel-badge {
  display: inline-block; background: var(--accent-tint); color: var(--accent-deep);
  border: 1px solid var(--accent-deep); border-radius: 999px; padding: 4px 12px;
  font-size: 0.74rem; font-weight: 700; margin-bottom: 14px;
}
.pib-whitelabel img {
  max-width: 100%; height: auto; border: 1px solid var(--hairline); border-radius: 10px;
  margin: 4px 0 14px; display: block;
}
.pib-whitelabel-note { font-size: 0.8rem; color: var(--text-faint); }

/* ============================================================
   MENU BERANDA (.pc-menu) — dipindah dari pixel-campus.css
   2026-07-20: mini-game "Kampus Pixel" di-hide (welcome.html),
   pixel-campus.css tidak lagi dimuat. Style menu 4 kartu ini
   TETAP DIPERLUKAN beranda, jadi dipindah ke sini.
   Untuk menghidupkan lagi game: kembalikan 4 referensi di
   layouts/partials/welcome.html (link css, .pc-hero, noscript, script js).
   ============================================================ */
.pc-menu {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 0 0 40px;
}
.pc-menu-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px 20px;
  background: var(--card-bg);
  border: 1px solid var(--hairline-soft);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.pc-menu-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.06);
  border-color: var(--accent);
}
.pc-menu-card .pc-ico { font-size: 22px; }
.pc-menu-card .pc-t {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
}
.pc-menu-card .pc-d {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}
@media (max-width: 900px) {
  .pc-menu { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .pc-menu { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-menu-card { transition: none; }
}