/* Penyempurnaan antarmuka LAPERPAK: tinta biru, aksen merah meterai, dan kertas.
   Lapisan terpisah agar berkas tema gelap yang dibuat otomatis tidak perlu disunting.
   Semua selector diberi awalan lp- untuk menghindari perubahan komponen ujian. */
:root { --lp-merah: #c2185b; --lp-merah-muda: #fde4ee; --lp-merah-garis: #e9adc5; }
.topbar { border-bottom: 0; }
.nav a[aria-current="page"], .nav-drop.is-on > summary { box-shadow: none; }
main.page:not(.exam-page) .page-head h1 { text-wrap: balance; }
main.page:not(.exam-page) .card { transition: box-shadow .22s ease, border-color .22s ease; }
main.page:not(.exam-page) .card:focus-within { border-color: var(--lp-merah-garis); }
.lp-eyebrow { display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; font-size: .73rem; font-weight: 800; letter-spacing: .09em; color: var(--lp-merah); }
.lp-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.lp-hero { position: relative; overflow: hidden; border: 1px solid var(--line); border-left: 5px solid var(--lp-merah); border-radius: var(--radius); background: var(--card); padding: clamp(18px, 3vw, 32px); margin: 0 0 20px; }
.lp-hero h1, .lp-hero h2 { max-width: 26ch; margin: 9px 0 8px; }
.lp-hero p { max-width: 65ch; color: var(--muted); }
.lp-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.lp-actions .btn { min-height: 44px; }
.lp-actions a:not(.btn) { font-weight: 650; }
.lp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; margin: 16px 0; }
.lp-step { background: var(--card); padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
.lp-step strong { display: block; color: var(--ink); font-weight: 750; margin: 0 0 4px; }
.lp-step small { display: block; color: var(--muted); font-size: .85rem; }
.lp-step-n { display: inline-flex; align-items: center; justify-content: center; min-width: 27px; height: 27px; border-radius: 8px; background: var(--lp-merah-muda); color: #9a1549; font-weight: 800; margin-bottom: 9px; }
.lp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; margin: 14px 0 20px; }
.lp-kpi { padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.lp-kpi strong { font: 800 1.7rem/1.15 var(--display); color: var(--ink); display: block; }
.lp-kpi span { color: var(--muted); font-size: .85rem; }
.lp-kpi.lp-kpi-attn { border-top: 3px solid var(--lp-merah); }
.lp-result { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px; margin-bottom: 12px; }
.lp-result-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.lp-result h2, .lp-result h3 { margin: 0; }
.lp-result .lp-status { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; background: var(--ink-soft); font-size: .78rem; font-weight: 750; color: var(--ink); }
.lp-result .lp-status.ditunggu { background: var(--hl-soft); color: var(--text); }
.lp-result .lp-status.terbuka { background: var(--green-soft); color: var(--green); }
.lp-result .lp-status.terkunci { background: var(--lp-merah-muda); color: #90123f; }
.lp-result p { color: var(--muted); margin-bottom: 12px; }
.lp-result-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.lp-result-actions form { display: inline-flex; }
.lp-result-actions .btn, .lp-result-actions button { min-height: 44px; }
.lp-result-actions .lp-red-btn, .lp-red-btn { background: var(--lp-merah); border-color: var(--lp-merah); color: #fff; }
.lp-result-actions .lp-red-btn:hover, .lp-red-btn:hover { background: #a5154e; border-color: #a5154e; color: #fff; }
.lp-intro { padding: 16px 18px; border-left: 4px solid var(--lp-merah); background: var(--lp-merah-muda); border-radius: 0 12px 12px 0; margin-bottom: 16px; }
.lp-intro strong { color: #87103a; }
.lp-intro p { margin: 4px 0 0; color: #6c2340; font-size: .9rem; }
.lp-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.lp-section-head h2 { margin: 0; }
.lp-tile-link { display: block; text-decoration: none; color: var(--text); padding: 17px; min-height: 115px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.lp-tile-link:hover, .lp-tile-link:focus-visible { transform: translateY(-2px); color: var(--text); border-color: var(--lp-merah-garis); box-shadow: var(--shadow); }
.lp-tile-link strong { display: block; margin: 0 0 5px; color: var(--ink); font-weight: 750; }
.lp-tile-link span { color: var(--muted); font-size: .85rem; }
.lp-tile-link.lp-tile-utama { border-top: 3px solid var(--lp-merah); }
.lp-admin-todo { border-left: 4px solid var(--lp-merah); }
.lp-admin-todo h2 { margin-bottom: 8px; }
.lp-admin-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 12px; margin: 14px 0 22px; }
.lp-portal-bridge { background: var(--card); border-top: 0; padding: 30px 0; }
.lp-portal-bridge h2 { margin: 0 0 12px; }
.lp-portal-bridge .lp-step { background: var(--paper); }
.lp-portal-bridge .lp-actions { margin-top: 16px; }
.lp-nav-shortcut { border-radius: 8px; background: var(--lp-merah); color: #fff !important; font-weight: 750 !important; }
.lp-nav-shortcut:hover, .lp-nav-shortcut[aria-current="page"] { background: #a5154e !important; color: #fff !important; }
@media (max-width: 560px) {
  .lp-hero { padding: 17px; }
  .lp-hero h1 { font-size: 1.55rem; }
  .lp-result { padding: 14px; }
  .lp-result-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .lp-result-actions form, .lp-result-actions .btn, .lp-result-actions button { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  main.page:not(.exam-page) .card, .lp-tile-link { transition: none; transform: none !important; }
}
html[data-tema="gelap"] {
  --lp-merah: #c2185b;
  --lp-merah-muda: #33242b;
  --lp-merah-garis: #a34b6c;
}
html[data-tema="gelap"] .lp-step-n, html[data-tema="gelap"] .lp-result .lp-status.terkunci { color: #f08cb3; }
html[data-tema="gelap"] .lp-intro strong, html[data-tema="gelap"] .lp-intro p { color: #f5b1ce; }
html[data-tema="gelap"] .lp-tile-link strong, html[data-tema="gelap"] .lp-step strong { color: var(--ink); }
html[data-tema="gelap"] .lp-result .lp-status.ditunggu { color: var(--text); }

/* Navigasi mobile: ikon SVG seragam, indikasi aktif berbasis bidang, aman terhadap safe-area. */
.lp-bottomnav { display: none; }
@media (max-width: 720px) {
  body:has(.lp-bottomnav) { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
  .lp-bottomnav {
    position: fixed; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    inset: auto 0 0; z-index: 46; width: 100%; align-items: center; gap: 4px;
    padding: 7px 10px calc(8px + env(safe-area-inset-bottom));
    background: var(--card); border-top: 1px solid var(--line);
    box-shadow: 0 -6px 22px rgba(18, 23, 41, .07);
  }
  .lp-bottomnav a {
    display: flex; min-width: 0; min-height: 54px; align-items: center; justify-content: center;
    flex-direction: column; gap: 4px; text-align: center; text-decoration: none;
    padding: 6px 2px; border-radius: 14px; color: var(--muted);
    font-size: .69rem; font-weight: 600; line-height: 1.15;
    transition: background-color .16s ease, color .16s ease;
  }
  .lp-bottomnav a[aria-current="page"] {
    color: var(--ink); font-weight: 750; background: var(--ink-soft);
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .lp-bottomnav a[aria-current="page"] .lp-bottom-ikon { color: var(--lp-merah); }
  .lp-bottomnav a:hover, .lp-bottomnav a:focus-visible { background: var(--ink-soft); color: var(--ink); }
  .lp-bottomnav a:focus-visible { outline: 2px solid var(--lp-merah); outline-offset: 1px; }
  .lp-bottom-ikon { width: 23px; height: 23px; display: flex; align-items: center; justify-content: center; }
  .lp-bottom-ikon svg { display: block; width: 22px; height: 22px; flex: none; }
  .lp-bottom-label { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; }
  body:has(.lp-bottomnav) .wa-float { bottom: calc(104px + env(safe-area-inset-bottom)); }
  /* Aksi formulir admin tidak boleh menimpa navigasi maupun konten terakhir. */
  body:has(.lp-bottomnav) .admin-sticky,
  body:has(.lp-bottomnav) .sticky-save,
  body:has(.lp-bottomnav) .form-sticky-actions { bottom: calc(92px + env(safe-area-inset-bottom)); }
}
@media (max-width: 350px) { .lp-bottomnav a { font-size: .61rem; } .lp-bottomnav { gap: 1px; padding-inline: 4px; } }
@media (prefers-reduced-motion: reduce) { .lp-bottomnav a { transition: none; } }
html[data-tema="gelap"] .lp-bottomnav { box-shadow: 0 -7px 24px rgba(0,0,0,.28); }

/* Materi Pajak ditonjolkan di halaman depan dan dashboard, tanpa menambah menu yang tersembunyi. */
.lp-materi-unggulan { background: var(--card); border-block: 0; padding: 34px 0; }
.lp-materi-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(170px, .7fr); align-items: center; gap: 24px; }
.lp-materi-copy h2 { font-size: clamp(1.45rem, 3vw, 2.25rem); margin: 10px 0; }
.lp-materi-copy p { max-width: 65ch; color: var(--muted); }
.lp-materi-chip { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.lp-materi-chip a { text-decoration: none; background: var(--ink-soft); padding: 7px 10px; border-radius: 999px; font-size: .85rem; font-weight: 700; }
.lp-materi-karakter, .lp-hero-figur, .lp-materi-mini-figur, .lp-leader-fig { display: flex; justify-content: center; align-items: end; min-width: 0; overflow: hidden; }
.lp-materi-karakter svg { max-height: 280px; width: auto; max-width: 100%; }
.lp-materi-mini { display: flex; align-items: center; gap: 18px; background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--lp-merah); padding: 18px; border-radius: var(--radius); margin: 0 0 20px; }
.lp-materi-mini-figur { width: 115px; flex: 0 0 115px; align-self: stretch; }
.lp-materi-mini-figur svg { height: 170px; max-width: 100%; }
.lp-materi-mini h2 { margin: 5px 0; }
.lp-materi-mini p { color: var(--muted); margin-bottom: 12px; }
.lp-hero-karakter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(100px, 190px); align-items: center; gap: 14px; }
.lp-hero-figur svg { width: 100%; max-height: 170px; }
.lp-leader-head { border-left: 5px solid var(--lp-merah); border-radius: var(--radius); background: var(--card); display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 18px; margin-bottom: 16px; }
.lp-leader-fig { flex: 0 0 110px; }
.lp-leader-fig svg { max-width: 100%; max-height: 126px; }
.lb-kantor .papan-nama .lb-px, .papan-mini .papan-nama .avatar { display: inline-flex; flex: 0 0 auto; vertical-align: middle; }
@media (max-width: 560px) {
  .lp-materi-grid { grid-template-columns: minmax(0, 1fr) 86px; gap: 9px; }
  .lp-materi-karakter svg { max-height: 170px; }
  .lp-materi-mini-figur { width: 72px; flex-basis: 72px; }
  .lp-materi-mini-figur svg { max-height: 130px; }
  .lp-materi-mini { gap: 10px; padding: 13px; }
  .lp-hero-karakter { grid-template-columns: minmax(0, 1fr) 70px; gap: 6px; }
  .lp-hero-figur svg { max-height: 110px; }
  .lp-leader-fig { flex-basis: 75px; }
  .lp-leader-fig svg { max-height: 85px; }
}
@media (prefers-reduced-motion: no-preference) {
  .lp-materi-karakter svg, .lp-hero-figur svg, .lp-leader-fig svg { animation: lp-melayang 4.8s ease-in-out infinite; }
}
@keyframes lp-melayang { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Discovery cards: tunjukkan manfaat, bukan hanya nama menu. */
.lp-discovery { padding: 30px 0; background: var(--paper); }
.lp-discovery > .wrap > h2, .lp-discovery-participant > h2 { margin: 8px 0 10px; }
.lp-discovery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 225px), 1fr)); gap: 14px; margin-top: 18px; }
.lp-discovery-card { display: flex; flex-direction: column; text-decoration: none; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 18px; min-height: 185px; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.lp-discovery-card:hover, .lp-discovery-card:focus-visible { color: var(--text); border-color: var(--lp-merah-garis); transform: translateY(-2px); box-shadow: var(--shadow); }
.lp-discovery-card h3 { color: var(--ink); margin: 6px 0; font-size: 1.07rem; }
.lp-discovery-card p { font-size: .88rem; color: var(--muted); margin: 0 0 13px; flex: 1; }
.lp-discovery-icon { font-size: 1.7rem; line-height: 1.2; }
.lp-discovery-tag { align-self: flex-start; color: var(--lp-merah); font-weight: 800; font-size: .68rem; letter-spacing: .07em; margin-bottom: 10px; }
.lp-discovery-action { color: var(--lp-merah); font-weight: 750; font-size: .84rem; }
.lp-discovery-participant { padding: 18px; margin-bottom: 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.lp-discovery-participant .lp-discovery-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 185px), 1fr)); }
.lp-discovery-participant .lp-discovery-card { min-height: 165px; background: var(--paper); }
@media (max-width: 560px) {
  .lp-discovery { padding: 22px 0; }
  .lp-discovery-grid, .lp-discovery-participant .lp-discovery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .lp-discovery-card { padding: 12px; min-height: 186px; }
  .lp-discovery-participant { padding: 13px; }
  .lp-discovery-card h3 { font-size: .92rem; }
  .lp-discovery-card p { font-size: .77rem; }
  .lp-discovery-tag { font-size: .6rem; }
}
@media (max-width: 340px) {
  .lp-discovery-grid, .lp-discovery-participant .lp-discovery-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .lp-discovery-card { transition: none; transform: none !important; }
}

/* Form tindak lanjut laporan soal: area tulis lebar dan nyaman pada keyboard HP. */
.lp-laporan-balasan { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 14px; min-width: 0; }
.lp-laporan-balasan label { font-weight: 700; color: var(--ink); }
.lp-laporan-balasan textarea {
  display: block; box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0;
  min-height: 150px; padding: 14px 16px; resize: vertical; border: 1px solid var(--line);
  border-radius: 14px; background: var(--card); color: var(--text); font: inherit;
  line-height: 1.55; overflow-wrap: anywhere;
}
.lp-laporan-balasan textarea:focus-visible { outline: 2px solid var(--lp-merah); outline-offset: 2px; }
.lp-laporan-balasan .btn-small { align-self: flex-start; min-height: 44px; }
.lp-laporan-balasan .small { margin: 0; }
@media (max-width: 720px) {
  .lp-laporan-balasan textarea { font-size: 16px; min-height: 180px; }
  .lp-laporan-balasan .btn-small { width: 100%; }
}

/* Pembayaran: nominal akhir dibedakan dari harga dan fee pihak pengirim. */
.pay-fee-summary{padding:14px 16px;border:1px solid #c9d4e6;border-radius:14px;background:rgba(45,91,159,.06);margin:12px 0}
.pay-fee-summary p{margin:5px 0}
.pay-transfer-total{font-size:1.1rem;font-weight:750;color:#153d76}
.pay-transfer-form select,.pay-transfer-form input{max-width:100%}
.pay-transfer-form label:has([name="konfirmasi_transfer"]){display:flex;align-items:flex-start;gap:10px;line-height:1.5}
.pay-transfer-form label:has([name="konfirmasi_transfer"]) input{width:18px;height:18px;flex:none;margin-top:3px}
@media(prefers-color-scheme:dark){.pay-transfer-total{color:#b8d3ff}}

/* Lencana keanggotaan LAPERPAK: hierarki visual Pass > Hemat 5 > Hemat 3 > Satuan. */
.lp-tier { --tier-bg:#edf1f7; --tier-text:#52627b; --tier-edge:#c8d0dd; display:inline-flex; align-items:center; gap:.38em; position:relative; isolation:isolate; overflow:hidden; vertical-align:middle; max-width:100%; padding:.27em .7em; border:1px solid var(--tier-edge); border-radius:999px; background:var(--tier-bg); color:var(--tier-text); font-size:.76rem; font-weight:800; letter-spacing:.035em; line-height:1.4; white-space:nowrap; }
.lp-tier-icon { display:inline-flex; font-size:1.13em; line-height:1; transform-origin:center; }
.lp-tier--pass { --tier-bg:#14284d; --tier-text:#ffdf81; --tier-edge:#d7ad48; box-shadow:0 2px 12px rgba(209,163,56,.24),inset 0 0 0 1px rgba(255,235,173,.12); }
.lp-tier--p5 { --tier-bg:#f1e6fb; --tier-text:#67328d; --tier-edge:#bd95df; }
.lp-tier--p3 { --tier-bg:#faeddd; --tier-text:#80501d; --tier-edge:#cf9c60; }
.lp-tier--satuan { --tier-bg:#eef1f6; --tier-text:#50647b; --tier-edge:#bec9d7; }
.lp-tier--pass::after,.lp-tier--p5::after { content:""; position:absolute; inset:-80% auto -80% -65%; width:34%; transform:rotate(25deg); pointer-events:none; background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent); animation:lp-tier-shine 6s ease-in-out infinite; }
.lp-tier--p5::after { animation-duration:8s; opacity:.6; }
.lp-tier--pass .lp-tier-icon { animation:lp-tier-glow 3.6s ease-in-out infinite; }
.lp-tier--p5 .lp-tier-icon { animation:lp-tier-float 5s ease-in-out infinite; }
.lp-tier--p3 .lp-tier-icon { animation:lp-tier-float 7s ease-in-out infinite; }
.lp-tier-heading { margin-bottom:12px; }
.lp-tier-card { position:relative; overflow:hidden; }
.lp-tier-card--pass { border-color:#d7ad48; box-shadow:0 8px 30px rgba(193,143,43,.14); }
.lp-tier-card--p5 { border-color:#bd95df; }
.lp-tier-card--p3 { border-color:#cf9c60; }
@keyframes lp-tier-shine { 0%,25%,100% { left:-65%; } 45%,60% { left:135%; } }
@keyframes lp-tier-glow { 0%,100% { filter:drop-shadow(0 0 0 transparent); transform:scale(1); } 50% { filter:drop-shadow(0 0 4px #ffe2a0); transform:scale(1.09); } }
@keyframes lp-tier-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-1px); } }
html[data-tema="gelap"] .lp-tier--p5 { --tier-bg:#342345; --tier-text:#e9c7ff; --tier-edge:#815b9c; }
html[data-tema="gelap"] .lp-tier--p3 { --tier-bg:#3b2c20; --tier-text:#f1c58f; --tier-edge:#95663d; }
html[data-tema="gelap"] .lp-tier--satuan { --tier-bg:#2e394a; --tier-text:#c6d2e3; --tier-edge:#57667b; }
@media (prefers-reduced-motion:reduce) { .lp-tier::after { animation:none; display:none; } .lp-tier-icon { animation:none !important; } }

/* Semua tier memiliki motion; tingkat khusus menentukan intensitas dan durasinya. */
.lp-tier--p3::after,.lp-tier--satuan::after { content:""; position:absolute; inset:-80% auto -80% -65%; width:23%; transform:rotate(25deg); pointer-events:none; background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent); animation:lp-tier-shine 10s ease-in-out infinite; }
.lp-tier--satuan::after { animation-duration:13s; opacity:.45; }
.lp-tier--satuan .lp-tier-icon { animation:lp-tier-float 9s ease-in-out infinite; }
.lp-tier--pass { --tier-bg:#172f5a; --tier-text:#ffe27d; --tier-edge:#ffd362; }
.lp-tier--p5 { --tier-bg:#e7e9fc; --tier-text:#333c9c; --tier-edge:#949deb; }
.lp-tier--p3 { --tier-bg:#ffe9dd; --tier-text:#9b394c; --tier-edge:#e8a0a2; }
.lp-tier--satuan { --tier-bg:#eef5fa; --tier-text:#385d7a; --tier-edge:#a8c9df; }
html[data-tema="gelap"] .lp-tier--p5 { --tier-bg:#282b56; --tier-text:#ced3ff; --tier-edge:#8189d2; }
html[data-tema="gelap"] .lp-tier--p3 { --tier-bg:#4b2933; --tier-text:#ffd0d5; --tier-edge:#bf7c8a; }
html[data-tema="gelap"] .lp-tier--satuan { --tier-bg:#263949; --tier-text:#d2e9f6; --tier-edge:#5c839a; }
@media (prefers-reduced-motion:reduce) { .lp-tier--p3::after,.lp-tier--satuan::after { animation:none; display:none; } }


/* Reset password: two clear, accessible actions instead of a nested card/grid. */
.auth-reset .auth-card { min-width:0; }
.auth-reset .auth-card > h1 { margin-bottom:12px; }
.auth-reset .auth-card > p.muted { line-height:1.7; margin-bottom:20px; }
.auth-reset .auth-card > form[action="/lupa-password"] { display:grid; gap:12px; margin:18px 0 8px; }
.auth-reset .auth-card > form[action="/lupa-password"] label { display:grid; gap:8px; margin:0; font-weight:650; }
.auth-reset .auth-card > form[action="/lupa-password"] input:not([type=hidden]) { min-width:0; width:100%; }
.auth-reset .auth-card > form[action="/lupa-password"] .btn { margin-top:0; }
.auth-reset .reset-admin-panel { margin-top:26px; border:1px solid #d6e0f0; background:linear-gradient(145deg,#f7f9fd,#fff); border-radius:14px; padding:22px; min-width:0; }
.auth-reset .reset-admin-title { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.auth-reset .reset-admin-icon { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; flex:none; background:#e7eefb; color:#203a85; font-size:20px; }
.auth-reset .reset-admin-eyebrow { display:block; font-size:.74rem; font-weight:750; letter-spacing:.075em; color:#516aa4; text-transform:uppercase; margin-bottom:3px; }
.auth-reset .reset-admin-title h2 { margin:0; font-size:1.22rem; line-height:1.3; color:#20293b; }
.auth-reset .reset-admin-desc { margin:0 0 18px; line-height:1.65; font-size:.93rem; color:#4a576a; }
.auth-reset .reset-admin-form { display:grid; grid-template-columns:minmax(0,1fr); gap:9px; align-items:stretch; }
.auth-reset .reset-admin-form label { display:block; margin:0; font-weight:650; font-size:.89rem; }
.auth-reset .reset-admin-form input { display:block; width:100%; min-width:0; margin:0 0 5px; }
.auth-reset .reset-admin-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:4px; }
.auth-reset .reset-admin-actions .btn { display:flex; justify-content:center; align-items:center; min-height:46px; padding:11px 8px; margin:0; font-size:.87rem; text-align:center; line-height:1.35; white-space:normal; }
.auth-reset .reset-admin-note { font-size:.8rem; color:#687689; line-height:1.55; margin:13px 0 0; }
html[data-tema="gelap"] .auth-reset .reset-admin-panel { background:linear-gradient(145deg,#202b3c,#171f2d); border-color:#34435a; }
html[data-tema="gelap"] .auth-reset .reset-admin-title h2 { color:#eff4ff; }
html[data-tema="gelap"] .auth-reset .reset-admin-desc,html[data-tema="gelap"] .auth-reset .reset-admin-note { color:#b7c2d3; }
html[data-tema="gelap"] .auth-reset .reset-admin-icon { background:#293c5f; color:#cad9ff; }
html[data-tema="gelap"] .auth-reset .reset-admin-eyebrow { color:#9db8ff; }
@media(max-width:1000px){ .auth-reset .reset-admin-actions{ grid-template-columns:1fr; } }
@media(max-width:520px){ .auth-reset .auth-card{ padding:22px 18px; } .auth-reset .reset-admin-panel{ padding:18px 15px; margin-top:22px; } .auth-reset .reset-admin-actions{ grid-template-columns:1fr; } .auth-reset .reset-admin-title h2 { font-size:1.15rem; } }

/* Hindari aksen kuning-merah yang bertumpuk pada pemisah antarseksi.
   Warna merek tetap dipakai pada tombol/label, bukan garis panjang full-width. */
.hero { border-bottom:0; }
.lp-portal-bridge, .lp-materi-unggulan, .lp-discovery { outline:0; box-shadow:none; }
.lp-materi-unggulan + .lp-discovery, .lp-discovery + .lp-portal-bridge { border-top:0; }
@media (max-width: 720px) { .lp-materi-unggulan { padding-block:26px; } }


/* Pembahasan UKP: hierarki visual editorial yang nyaman dibaca; soal dan data tetap asli. */
.lp-bahas-hero { position:relative; display:flex; justify-content:space-between; align-items:center; gap:22px; padding:clamp(22px,3.5vw,38px); margin:28px 0 17px; border:1px solid #304e87; border-radius:21px; background:radial-gradient(circle at 92% 10%,rgba(255,224,125,.15),transparent 38%),linear-gradient(120deg,#102f67,#13244a 72%); color:#f6faff; overflow:hidden; }
.lp-bahas-hero::before { content:""; position:absolute; width:180px; height:180px; border:2px solid rgba(255,232,166,.18); border-radius:50%; right:-45px; bottom:-92px; pointer-events:none; }
.lp-bahas-heading{position:relative; z-index:1;min-width:0;flex:1}.lp-bahas-heading h2{font:800 clamp(1.5rem,3vw,2.4rem)/1.15 var(--display);letter-spacing:-.02em;color:#fff;margin:7px 0 12px}.lp-bahas-heading p{max-width:60ch;color:#d6e6fa;line-height:1.65;margin:0}.lp-bahas-kicker{font-size:.72rem;font-weight:800;letter-spacing:.14em;color:#ffe08d}.lp-bahas-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.lp-bahas-pills span{padding:7px 10px;border:1px solid rgba(224,236,255,.25);border-radius:99px;font-size:.75rem;color:#edf5ff;background:rgba(255,255,255,.08)}
.lp-bahas-mark{min-width:180px;max-width:240px;border:1px solid rgba(255,224,141,.4);border-radius:15px;transform:rotate(-3deg);padding:21px 16px;text-align:center;background:linear-gradient(140deg,rgba(225,63,84,.18),rgba(255,220,135,.11));box-shadow:0 12px 30px rgba(0,0,0,.13)}.lp-bahas-mark strong{display:block;color:#ffe5a0;font-size:clamp(1rem,2vw,1.45rem);font-weight:900;letter-spacing:.045em}.lp-bahas-mark span{display:block;margin-top:6px;font-size:.7rem;line-height:1.5;color:#e2ecfc}
.lp-bahas-guide{display:flex;gap:12px;align-items:flex-start;margin:12px 0 21px;padding:15px 18px;border:1px solid #c9d8ee;background:#f1f6ff;border-radius:13px;color:#2c4261}.lp-bahas-guide-icon{font-size:1.5rem;line-height:1.1}.lp-bahas-guide p{margin:0;line-height:1.65;font-size:.88rem}
.lp-bahas-reviews{display:grid;gap:18px}.lp-bahas-reviews .review{margin:0;position:relative;border:1px solid #dae3f1;border-left:5px solid #9eb8e1;border-radius:18px;padding:clamp(17px,2.5vw,28px);box-shadow:0 8px 25px rgba(31,50,97,.06);background:var(--card)}.lp-bahas-reviews .review.benar{border-left-color:#24a16c}.lp-bahas-reviews .review.salah{border-left-color:#e27769}.lp-bahas-reviews .review header{padding-bottom:13px;border-bottom:1px solid var(--line);gap:9px}.lp-bahas-reviews .q-num{font-size:.82rem;font-weight:900}.lp-bahas-reviews .q-topic{font-size:.73rem}.lp-bahas-reviews .q-text{font-weight:650;line-height:1.75;font-size:clamp(1rem,1.25vw,1.14rem);margin:17px 0 20px}.lp-bahas-reviews .opts{display:grid;gap:8px;margin-bottom:17px}.lp-bahas-reviews .opts li{margin:0;padding:12px 13px;border:1px solid #e0e5ef;border-radius:12px;background:var(--card);align-items:flex-start;line-height:1.6}.lp-bahas-reviews .opts li.is-key{background:#e9f7ef;border-color:#91d0ab}.lp-bahas-reviews .opts li.is-wrong{background:#fff1ed;border-color:#efb6a8}.lp-bahas-reviews .opt-key{flex:none;min-width:30px;min-height:30px;background:#e7eef9;color:#203d72;font-weight:850}.lp-bahas-reviews .is-key .opt-key{background:#237c53;color:#fff}.lp-bahas-reviews .is-wrong .opt-key{background:#ae3e39;color:#fff}
.lp-bahas-reviews .lp-expl{background:#f6f8fd;border:1px solid #dde6f4;padding:17px;border-radius:14px;font-size:.93rem}.lp-expl-heading{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-bottom:11px;border-bottom:1px solid #dce4f1;color:#173969}.lp-expl-heading strong{font-size:1rem}.lp-expl-heading small{margin-left:auto;color:#6b7895}.lp-expl-section{padding:14px 0 10px;border-bottom:1px solid #e2e8f2}.lp-expl-section:last-of-type{border-bottom:0}.lp-expl-section h4{margin:0 0 9px;color:#1b3970;font-size:.9rem}.lp-expl-section p{line-height:1.78;margin:0;white-space:pre-line}.lp-expl-law{background:#eff3fc;border-left:3px solid #415faf;margin:13px 0 0;padding:15px;border-radius:0 10px 10px 0}.lp-expl-calc{background:linear-gradient(150deg,#edf5ff,#f8fbff);border:1px solid #d4e5fa;border-radius:12px;margin:14px 0;padding:16px}.lp-expl-calc .ex-steps{counter-reset:lp-step;list-style:none;padding:0;margin:10px 0 0;display:grid;gap:10px}.lp-expl-calc .ex-steps li{counter-increment:lp-step;display:flex;gap:12px;align-items:flex-start;padding:10px 12px;background:#fff;border:1px solid #d9e6f6;border-radius:10px;white-space:pre-line;line-height:1.6}.lp-expl-calc .ex-steps li::before{content:counter(lp-step);flex:none;display:grid;place-items:center;width:27px;height:27px;border-radius:8px;background:#244988;color:#fff;font-weight:850}.lp-bahas-reviews .ex-wrong{line-height:1.7}.lp-bahas-reviews .ex-tip{margin:15px 0 0;padding:14px 15px;border-left:4px solid #ddad35;background:#fff7df;border-radius:0 10px 10px 0;color:#5c4518}.lp-bahas-end{margin:26px 0 12px;padding:22px 25px;background:var(--card);border:1px solid var(--line);border-radius:15px;line-height:1.65}.lp-bahas-end strong{color:var(--ink)}.lp-bahas-end p{color:var(--muted);margin:7px 0}.lp-bahas-end a{font-weight:800}
html[data-tema="gelap"] .lp-bahas-guide{background:#22354f;border-color:#456286;color:#ddeaff}html[data-tema="gelap"] .lp-bahas-reviews .lp-expl{background:#1e2d40;border-color:#435875;color:#e4eeff}html[data-tema="gelap"] .lp-expl-heading,html[data-tema="gelap"] .lp-expl-section h4{color:#c6dbff}html[data-tema="gelap"] .lp-expl-section{border-color:#42536a}html[data-tema="gelap"] .lp-expl-law{background:#2b3851}html[data-tema="gelap"] .lp-expl-calc{background:#1c3452;border-color:#405d7e}html[data-tema="gelap"] .lp-expl-calc .ex-steps li{background:#243950;border-color:#3b5674;color:#e8f1ff}html[data-tema="gelap"] .lp-bahas-reviews .opts li.is-key{background:#183c2d;border-color:#447b59}html[data-tema="gelap"] .lp-bahas-reviews .opts li.is-wrong{background:#4a2929;border-color:#8e5554}html[data-tema="gelap"] .lp-bahas-reviews .ex-tip{background:#514026;color:#ffe1a1}
@media(max-width:680px){.lp-bahas-hero{padding:23px 19px}.lp-bahas-mark{display:none}.lp-bahas-pills{gap:5px}.lp-bahas-pills span{font-size:.69rem}.lp-bahas-reviews .review{padding:17px}.lp-bahas-reviews .lp-expl{padding:12px}.lp-expl-heading small{display:none}}
@media print{.lp-bahas-hero{background:#163465!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}.lp-bahas-reviews .review{break-inside:avoid-page}.lp-bahas-guide,.lp-bahas-end{break-inside:avoid-page}}

/* Pesan Markdown aman: jarak vertikal, daftar dan kode singkat. */
.lp-md p,.fr-teks p,.msg-b p{margin:0 0 .45em;overflow-wrap:anywhere}
.lp-md p:last-child,.fr-teks p:last-child,.msg-b p:last-child{margin-bottom:0}
.lp-md ul,.lp-md ol,.fr-teks ul,.fr-teks ol,.msg-b ul,.msg-b ol{margin:.35em 0 .6em;padding-left:1.5em}
.lp-md li,.fr-teks li,.msg-b li{margin:.2em 0;overflow-wrap:anywhere}
.lp-md code,.fr-teks code,.msg-b code{padding:.1em .3em;border-radius:4px;background:rgba(100,115,145,.14);font:inherit;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.91em}
.lp-md,.fr-teks,.msg-b{overflow-wrap:anywhere}

/* Pratinjau pesan langsung, tanpa mengeksekusi HTML dari pengguna. */
.lp-pesan-preview{margin:10px 0 14px;padding:12px 14px;max-width:100%;min-width:0;background:var(--card,#fff);border:1px solid var(--line,#dce4ed);border-radius:12px;overflow-wrap:anywhere}
.lp-pesan-preview-head{font-size:.79rem;font-weight:800;letter-spacing:.015em;color:var(--lp-merah,#c2185b);margin-bottom:8px}
.lp-pesan-preview-isi{font-size:.94rem;line-height:1.65;max-height:220px;overflow:auto;color:var(--ink,#20334c)}
.lp-pesan-preview-kosong{margin:0;color:var(--muted,#69778b);font-style:italic}
html[data-tema="gelap"] .lp-pesan-preview{background:#1c2b3d;border-color:#44556e}
html[data-tema="gelap"] .lp-pesan-preview-isi{color:#e5ecf5}
html[data-tema="gelap"] .lp-pesan-preview-head{color:#ff8db4}

/* Statistik kunjungan aktif real-time, tampil pada footer untuk semua peran. */
.lp-online-row{flex-basis:100%;width:100%;display:flex;justify-content:center;padding:5px 0 13px}
.lp-online-pill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line,#dce4ed);background:var(--card,#fff);border-radius:999px;padding:8px 13px;font-size:.82rem;font-weight:750;color:var(--ink,#233652);max-width:100%;flex-wrap:wrap}
.lp-online-dot{width:8px;height:8px;border-radius:50%;background:#21aa76;box-shadow:0 0 0 3px rgba(33,170,118,.12);flex-shrink:0}
.lp-online-note{font-size:.72rem;font-weight:500;color:var(--muted,#64748b)}
html[data-tema="gelap"] .lp-online-pill{background:#203249;border-color:#40546b;color:#eaf2ff}
@media(max-width:420px){.lp-online-pill{font-size:.75rem}.lp-online-note{font-size:.68rem}}

.lp-online-rincian{font-size:.76rem;color:var(--muted,#64748b);display:block;width:100%;text-align:center;margin-top:5px;overflow-wrap:anywhere}
.lp-online-row{flex-wrap:wrap}

/* Indikator statistik di atas header; tetap ringkas di layar ponsel. */
body>.lp-online-row{margin:0;background:#102a4d;padding:6px 12px;min-height:36px;align-items:center;box-sizing:border-box}
body>.lp-online-row .lp-online-pill{background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.18);color:#fff;padding:5px 10px}
body>.lp-online-row .lp-online-note,body>.lp-online-row .lp-online-rincian{color:#d7e5f5}
html[data-tema="gelap"] body>.lp-online-row{background:#0b192a}
@media(max-width:420px){body>.lp-online-row{padding:5px 7px}body>.lp-online-row .lp-online-rincian{font-size:.69rem}}

/* Ringkasan online dalam satu baris horizontal tanpa memecah teks. */
body>.lp-online-row{display:flex;justify-content:center;align-items:center;flex-wrap:nowrap;gap:12px;padding:6px 12px;overflow-x:auto;max-width:100%;scrollbar-width:thin}
body>.lp-online-row .lp-online-pill{flex:0 0 auto;display:inline-flex;white-space:nowrap;flex-wrap:nowrap}
body>.lp-online-row .lp-online-rincian{display:inline-block;width:auto;flex:0 0 auto;margin:0;text-align:left;white-space:nowrap;overflow-wrap:normal}
@media(max-width:680px){body>.lp-online-row{justify-content:flex-start;gap:9px}body>.lp-online-row .lp-online-rincian{font-size:.69rem}}

/* Materi gratis setelah login: pratinjau publik, studi kasus, dan direktori. */
.lp-belajar-ajakan,.lp-belajar-pendalaman,.lp-kalk-hero,.lp-kalk-akhir{padding:clamp(18px,3vw,29px);border-radius:17px;margin:18px 0 24px;background:linear-gradient(130deg,#102b52,#193e6e);border:1px solid rgba(103,144,195,.3);color:#fff}
.lp-belajar-ajakan h1,.lp-belajar-ajakan h2,.lp-belajar-pendalaman h2,.lp-kalk-hero h1,.lp-kalk-akhir h2{color:#fff;margin:9px 0 11px;line-height:1.22}
.lp-belajar-ajakan p,.lp-belajar-pendalaman p,.lp-kalk-hero p,.lp-kalk-akhir p{color:#e7effe;line-height:1.75;max-width:78ch}
.lp-belajar-ajakan .lead{color:#e7effe}
.lp-belajar-ajakan ul{padding-left:22px;line-height:1.75}
.lp-belajar-pill{display:inline-flex;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.055em;border-radius:999px;padding:5px 11px}
.lp-belajar-ajakan .btn.ghost,.lp-kalk-akhir .btn.ghost{color:#fff;border-color:rgba(255,255,255,.65)}
.lp-belajar-ajakan--member{background:linear-gradient(130deg,#123e42,#23516b)}
.lp-belajar-pendalaman{background:var(--card,#fff);color:var(--ink,#182a47);border-color:var(--line,#dde3eb)}
.lp-belajar-pendalaman h2{color:var(--ink,#182a47)}
.lp-belajar-pendalaman p{color:var(--ink,#182a47);max-width:100%}
.lp-belajar-pendalaman .lp-belajar-pill{background:#ae1640;color:#fff}
.lp-belajar-peta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:17px}
.lp-belajar-peta>div{display:flex;align-items:flex-start;gap:10px;padding:13px;background:rgba(80,122,175,.08);border-radius:12px}
.lp-belajar-peta>div>span{display:grid;place-items:center;flex:0 0 27px;height:27px;border-radius:9px;background:#b51547;color:#fff;font-weight:800}
.lp-belajar-peta>div p{margin:1px 0;font-size:.9rem;line-height:1.55}
.lp-kasus-heading{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:15px}
.lp-kasus-heading .lp-belajar-pill{background:#b51547}
.lp-kasus-heading h2{margin:10px 0 5px}
.lp-kasus-item{padding:19px 0;border-top:1px solid var(--line,#d7e0eb);scroll-margin-top:100px}
.lp-kasus-item header{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.lp-kasus-item h3{margin:0;font-size:1.05rem;color:var(--ink,#223852)}
.lp-kasus-item h4{margin:13px 0 4px;color:var(--ink,#223852);font-size:.9rem}
.lp-kasus-item p,.lp-kasus-item li{line-height:1.75}
.lp-kasus-item details{margin-top:15px;padding:13px 15px;border-radius:12px;background:rgba(75,110,150,.08);border:1px solid var(--line,#d7e0eb)}
.lp-kasus-item details>summary{cursor:pointer;font-weight:800;color:var(--ink,#223852)}
.lp-kasus-item details[open]>summary{padding-bottom:10px}
.lp-kasus-item ol{padding-left:20px}
.lp-kasus-jawaban{padding:12px;background:rgba(24,142,97,.12);border-radius:9px}
.lp-kasus-cari{padding:15px 17px;margin:20px 0;background:var(--card,#fff);border:1px solid var(--line,#d7e0eb);border-radius:13px}
.lp-kasus-cari label{display:block;font-weight:750;margin-bottom:9px;color:var(--ink,#223852)}
.lp-kasus-cari input{min-width:170px;flex:1;max-width:480px;border:1px solid var(--line,#bdc9d8);background:var(--card,#fff);color:var(--ink,#223852);border-radius:10px;padding:11px 12px;font:inherit}
.lp-kalk-hero{background:linear-gradient(135deg,#102d58,#174b72);margin-top:0}
.lp-kalk-langkah{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.lp-kalk-langkah>span{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:10px;background:rgba(255,255,255,.12);font-size:.86rem}
.lp-kalk-langkah b{display:grid;place-items:center;background:#c8224b;color:#fff;border-radius:50%;width:25px;height:25px}
.lp-kalk-pilih-judul{font-weight:800;color:var(--ink,#243550)}
.lp-kalk-akhir{background:var(--card,#fff);border-color:var(--line,#d7e0eb)}
.lp-kalk-akhir h2,.lp-kalk-akhir p{color:var(--ink,#243550)}
.lp-kalk-akhir .btn.ghost{color:var(--ink,#243550);border-color:var(--line,#d7e0eb)}
.lp-kalk-akhir a:not(.btn){text-decoration:underline;text-underline-offset:3px}
.lp-kalk-instruksi{margin-top:-5px}
.kalk-tab{display:flex;flex-wrap:wrap;gap:7px;overflow-x:visible}
.kalk-tab button{flex:0 1 auto;min-height:40px;white-space:normal;text-align:center}
.kalk-form .kalk-grup summary{cursor:pointer}
@media(max-width:720px){.lp-belajar-peta{grid-template-columns:1fr}.lp-kalk-langkah{display:grid;grid-template-columns:1fr}.kalk-tab button{flex:1 1 calc(50% - 7px);font-size:.84rem}}
@media(max-width:390px){.kalk-tab button{flex:1 1 100%}}
html[data-tema="gelap"] .lp-belajar-pendalaman,html[data-tema="gelap"] .lp-kalk-akhir{background:#1d2e43;border-color:#415a76}
html[data-tema="gelap"] .lp-belajar-pendalaman .lp-belajar-pill{color:#fff}

/* Kelompok pilihan kalkulator berdasarkan pekerjaan, responsif tanpa tab tercecer. */
.kalk-tab{display:grid;grid-template-columns:1fr;gap:13px;margin-bottom:19px}
.lp-kalk-kategori{min-width:0;padding:13px 14px;border:1px solid var(--line,#d8e0ec);background:var(--card,#fff);border-radius:13px}
.lp-kalk-kategori h3{font-size:.86rem;letter-spacing:normal;text-transform:none;color:var(--muted,#607087);font-weight:800;margin:0 0 10px}
.lp-kalk-pills{display:flex;gap:7px;flex-wrap:wrap}
.lp-kalk-pills button{min-width:0;max-width:100%;white-space:normal;text-wrap:balance}
@media(max-width:720px){.lp-kalk-kategori{padding:11px}.lp-kalk-pills button{flex:1 1 calc(50% - 7px)}}
@media(max-width:390px){.lp-kalk-pills button{flex:1 1 100%}}


/* ===== Penyegaran visual November 2026: satu sistem untuk peserta dan admin =====
   Gerak memakai kurva lembut (ease-out-expo), mati otomatis bila perangkat meminta kurangi gerak.
   Tidak menyentuh halaman ujian (exam-page) agar timer dan fokus pengerjaan tetap tenang. */
:root { --lp-ease: cubic-bezier(.22, 1, .36, 1); --lp-pegas: cubic-bezier(.34, 1.56, .64, 1); --lp-r-kartu: 20px; }

/* Garis merek merah-kuning di bawah bilah atas, tersapu saat halaman dibuka. */
.topbar { position: relative; }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, #c2185b, #ffe14d); transform-origin: left; animation: lp-sapu-garis .9s var(--lp-ease) both; pointer-events: none; }
body.exam-page .topbar::after { animation: none; }
@keyframes lp-sapu-garis { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Konten muncul bertahap dari bawah. */
@keyframes lp-naik { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
body:not(.exam-page) main.page > * { animation: lp-naik .55s var(--lp-ease) both; }
body:not(.exam-page) main.page > :nth-child(2) { animation-delay: .05s; }
body:not(.exam-page) main.page > :nth-child(3) { animation-delay: .1s; }
body:not(.exam-page) main.page > :nth-child(4) { animation-delay: .15s; }
body:not(.exam-page) main.page > :nth-child(5) { animation-delay: .2s; }
body:not(.exam-page) main.page > :nth-child(n+6) { animation-delay: .25s; }

/* Kartu: sudut lebih lembut, garis lebih tipis, terangkat halus saat disorot. */
main.page:not(.exam-page) .card { border-radius: var(--lp-r-kartu); border-color: color-mix(in srgb, var(--line) 70%, transparent); transition: transform .35s var(--lp-ease), box-shadow .35s var(--lp-ease), border-color .22s ease; }
.lp-tile-link, .lp-kpi, .lp-step, .lp-result { border-radius: 18px; transition: transform .35s var(--lp-ease), box-shadow .35s var(--lp-ease); }
@media (hover: hover) {
  .lp-tile-link:hover, a.card:hover, .lp-kpi:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(28, 47, 122, .38); }
}

/* Tombol: bentuk pil dan umpan balik tekan yang terasa. */
body:not(.exam-page) .btn { border-radius: 999px; transition: transform .18s var(--lp-ease), background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; }
body:not(.exam-page) .btn:active, body:not(.exam-page) .btn-small:active { transform: scale(.97); }
@media (hover: hover) { body:not(.exam-page) .btn:hover { transform: translateY(-1px); } }

/* Menu samping (peserta dan admin): kartu putih, item aktif terisi tinta. */
.peserta-menu { border-radius: 20px; border-color: color-mix(in srgb, var(--line) 70%, transparent); animation: lp-naik .5s var(--lp-ease) both; }
.peserta-menu .nav :is(a, summary) { font-weight: 600; transition: background-color .2s ease, color .2s ease; }
body .db-shell .peserta-menu.db-menu .nav > a[aria-current="page"], body .db-shell .peserta-menu.db-menu .nav .nav-panel a[aria-current="page"] { background: var(--ink); color: #fff; }
.peserta-menu .nav .is-on > summary { color: var(--ink); background: transparent; }
.peserta-menu .nav .nav-drop > summary { font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); min-height: 40px; }
.peserta-menu .nav .nav-drop .nav-panel { padding-left: 0; }
.peserta-menu .nav .nav-panel a { border-radius: 12px; font-size: .94rem; }
.peserta-menu .nav-drop[open] > .nav-panel { animation: lp-naik .3s var(--lp-ease) both; }

/* Tablet: menu sedikit lebih ramping agar konten tetap lega. */
@media (min-width: 901px) and (max-width: 1180px) {
  .peserta-shell.db-shell { grid-template-columns: 210px minmax(0, 1fr); gap: 18px; }
}
/* Layar lebar: batasi lebar baca agar baris teks tidak terlalu panjang. */
@media (min-width: 1500px) { .peserta-shell.db-shell { width: min(1480px, calc(100% - 64px)); gap: 28px; } }

/* HP: navigasi bawah melayang berwarna tinta, item aktif kuning stabilo. */
@media (max-width: 720px) {
  .lp-bottomnav { left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom)); width: auto; padding: 6px; border-radius: 22px; background: #141a3d; border: 0; box-shadow: 0 14px 34px -12px rgba(20, 26, 61, .55); animation: lp-naik .5s var(--lp-ease) both; }
  .lp-bottomnav a { color: #d6dcf2; border-radius: 16px; transition: background-color .2s ease, color .2s ease, transform .18s var(--lp-ease); }
  .lp-bottomnav a:active { transform: scale(.94); }
  .lp-bottomnav a[aria-current="page"] { background: #ffe14d; color: #141a3d; box-shadow: none; }
  .lp-bottomnav a[aria-current="page"] .lp-bottom-ikon { color: #141a3d; }
  .lp-bottomnav a:hover, .lp-bottomnav a:focus-visible { background: rgba(255, 255, 255, .1); color: #fff; }
  .lp-bottomnav a:focus-visible { outline-color: #ffe14d; }
  body:has(.lp-bottomnav) { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  main.page:not(.exam-page) .card { border-radius: 18px; }
}
html[data-tema="gelap"] .lp-bottomnav { background: #0b0e1a; box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .7); }
html[data-tema="gelap"] body .db-shell .peserta-menu.db-menu .nav > a[aria-current="page"], html[data-tema="gelap"] body .db-shell .peserta-menu.db-menu .nav .nav-panel a[aria-current="page"] { background: #3d55b0; color: #fff; }
html[data-tema="gelap"] .peserta-menu .nav .is-on > summary { color: var(--ink); }
@media (hover: hover) { html[data-tema="gelap"] :is(.lp-tile-link, a.card, .lp-kpi):hover { box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .8); } }

@media (prefers-reduced-motion: reduce) {
  .topbar::after, body:not(.exam-page) main.page > *, .peserta-menu, .peserta-menu .nav-drop[open] > .nav-panel, .lp-bottomnav { animation: none; }
  main.page .card, .lp-tile-link, .lp-kpi, .btn, .lp-bottomnav a { transition: none; transform: none !important; }
}

/* ===== Konsep Gen Z "Langkah kecil, siap UKP" (disetujui pemilik, 7 November 2026) =====
   Neo-brutalist bermain: garis tinta tebal, bayangan offset tegas, sedikit miring saat disorot.
   Berlaku untuk peserta, admin dan halaman depan. Halaman ujian dikecualikan. */
:root { --gz-ink: #141A3D; --gz-garis: 2.5px solid var(--gz-ink); --gz-bayang: 5px 5px 0 var(--gz-ink); --gz-bayang-naik: 8px 8px 0 var(--gz-ink); --gz-pegas: cubic-bezier(.34, 1.56, .64, 1); }
html[data-tema="gelap"] { --gz-ink: #05070f; --gz-garis: 2px solid #3a4258; }

/* Kartu jadi stiker */
body:not(.exam-page) main.page .card, .lp-tile-link, .lp-kpi, .lp-step, .lp-result, .lp-hero {
  border: var(--gz-garis); box-shadow: var(--gz-bayang); border-radius: 22px;
}
.lp-hero { border-left: var(--gz-garis); }
@media (hover: hover) {
  body:not(.exam-page) main.page a.card:hover, .lp-tile-link:hover, .lp-kpi:hover {
    transform: translate(-3px, -3px) rotate(-.4deg); box-shadow: var(--gz-bayang-naik);
  }
}
.lp-kpi:nth-child(3n+1) { background: #FFF6C2; }
.lp-kpi strong { font-size: 2rem; letter-spacing: -.02em; }

/* Tombol tebal dengan bayangan; tertekan saat diklik */
body:not(.exam-page) .btn { border: var(--gz-garis); box-shadow: 4px 4px 0 var(--gz-ink); font-weight: 800; border-radius: 16px; }
body:not(.exam-page) .btn-mark { background: #FFE14D; color: #141A3D; }
@media (hover: hover) { body:not(.exam-page) .btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--gz-ink); } }
body:not(.exam-page) .btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--gz-ink); }
body:not(.exam-page) .btn-small { border-radius: 10px; font-weight: 700; }

/* Judul halaman: ukuran lebih berani dengan sorotan stabilo pada judul utama */
body:not(.exam-page) main.page .page-head h1, body:not(.exam-page) main.page > h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -.03em; }
body:not(.exam-page) main.page .page-head h1::after { content: ""; display: block; width: 64px; height: 8px; margin-top: 10px; border-radius: 8px; background: linear-gradient(90deg, #C2185B, #FFE14D); transform-origin: left; animation: lp-sapu-garis .8s .2s var(--lp-ease) both; }

/* Input: garis jelas dan fokus kuning stabilo */
body:not(.exam-page) main.page :is(input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=tel], input[type=url], input[type=date], select, textarea) { border: 2px solid #c3cae3; border-radius: 12px; }
body:not(.exam-page) main.page :is(input, select, textarea):focus-visible { border-color: var(--gz-ink); outline: 3px solid #FFE14D; outline-offset: 1px; }

/* Menu samping: kartu stiker, item aktif kuning stabilo */
.peserta-menu { border: var(--gz-garis); box-shadow: var(--gz-bayang); }
body .db-shell .peserta-menu.db-menu .nav > a[aria-current="page"], body .db-shell .peserta-menu.db-menu .nav .nav-panel a[aria-current="page"] { background: #FFE14D; color: #141A3D; box-shadow: inset 0 0 0 2px #141A3D; font-weight: 800; }
html[data-tema="gelap"] body .db-shell .peserta-menu.db-menu .nav > a[aria-current="page"], html[data-tema="gelap"] body .db-shell .peserta-menu.db-menu .nav .nav-panel a[aria-current="page"] { background: #FFE14D; color: #141A3D; }

/* Tabel admin: kepala tabel tegas dan baris berselang */
body:not(.exam-page) main.page table th { background: #141A3D; color: #fff; }
body:not(.exam-page) main.page table th a { color: #FFE14D; }
body:not(.exam-page) main.page table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--paper) 70%, transparent); }

/* Halaman depan: hero lebih berani dengan tombol stiker */
.landing .hero h1 { font-size: clamp(2.6rem, 7vw, 5.6rem); line-height: .95; letter-spacing: -.04em; font-weight: 800; }
.landing .hero .btn { animation: gz-denyut 2.6s ease-in-out infinite; }
@keyframes gz-denyut { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }

/* HP: bayangan sedikit lebih kecil agar tidak memakan ruang */
@media (max-width: 720px) {
  :root { --gz-bayang: 4px 4px 0 var(--gz-ink); --gz-bayang-naik: 5px 5px 0 var(--gz-ink); }
  body:not(.exam-page) .btn { box-shadow: 3px 3px 0 var(--gz-ink); }
}
@media (prefers-reduced-motion: reduce) {
  .landing .hero .btn, body:not(.exam-page) main.page .page-head h1::after { animation: none; }
}

/* Audit UI/UX: target sentuh minimal 44 px pada perangkat sentuh (HP, tablet, iPad). */
@media (pointer: coarse) {
  body:not(.exam-page) main.page :is(.btn-small, .btn-sm, button, input[type=submit], .chip-btn, .tab) { min-height: 44px; }
  body:not(.exam-page) main.page .btn-small { display: inline-flex; align-items: center; justify-content: center; padding-inline: 14px; }
}

/* Kartu "Langkah berikutnya" di Beranda (konsep Gen Z) */
body:not(.exam-page) main.page .card.gz-langkah { position: relative; overflow: hidden; margin: 0 0 22px; padding: 26px 28px; background: var(--gz-ink, #141A3D); color: #fff; border: 2.5px solid var(--gz-ink, #141A3D); box-shadow: 6px 6px 0 #E8336D; }
body:not(.exam-page) main.page .card.gz-langkah::after { content: ""; position: absolute; z-index: 0; right: -60px; top: -60px; width: 150px; height: 150px; border-radius: 50%; background: #FFE14D; opacity: .16; animation: gz-denyut 3.2s ease-in-out infinite; }
.gz-langkah-k { margin: 0 0 8px; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #FFE14D; }
.gz-langkah h2 { margin: 0 0 8px; color: #fff; font-size: clamp(1.35rem, 2.6vw, 2rem); line-height: 1.2; }
.gz-langkah p:not(.gz-langkah-k) { margin: 0 0 16px; max-width: 60ch; color: rgba(255,255,255,.86); }
.gz-langkah > * { position: relative; z-index: 1; }
html[data-tema="gelap"] body:not(.exam-page) main.page .card.gz-langkah { background: #0E1230; border-color: #FFE14D; }
@media (max-width: 600px) { body:not(.exam-page) main.page .card.gz-langkah { padding: 20px 18px; box-shadow: 4px 4px 0 #E8336D; } }
@media (prefers-reduced-motion: reduce) { .gz-langkah::after { animation: none; } }

/* Bento Beranda Gen Z */
.gz-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; margin: 0 0 26px; }
.gz-bento > * { min-width: 0; margin: 0 !important; animation: gz-naik .55s cubic-bezier(.22,1,.36,1) both; }
.gz-bento > :nth-child(2) { animation-delay: .05s; } .gz-bento > :nth-child(3) { animation-delay: .1s; } .gz-bento > :nth-child(4) { animation-delay: .15s; }
.gz-bento > :nth-child(5) { animation-delay: .2s; } .gz-bento > :nth-child(6) { animation-delay: .25s; } .gz-bento > :nth-child(7) { animation-delay: .3s; } .gz-bento > :nth-child(8) { animation-delay: .35s; }
@keyframes gz-naik { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.gz-strip { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.gz-pil { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 2.5px solid var(--gz-ink, #141A3D); border-radius: 99px; background: #FFE14D; color: #141A3D; font-weight: 800; font-size: .9rem; box-shadow: 3px 3px 0 var(--gz-ink, #141A3D); }
.gz-pil-ghost { background: #fff; }
.gz-api { display: inline-block; animation: gz-api 1.4s ease-in-out infinite; }
@keyframes gz-api { 0%, 100% { transform: scale(1) rotate(-4deg); } 50% { transform: scale(1.15) rotate(4deg); } }
.gz-b-hero { grid-column: span 8; grid-row: span 2; }
.gz-b-tingkat { grid-column: span 4; grid-row: span 2; }
.gz-b-skor, .gz-b-rank { grid-column: span 3; }
.gz-b-lencana { grid-column: span 6; }
.gz-b-akbar { grid-column: span 6; }
.gz-b-juara { grid-column: span 6; }
body:not(.exam-page) main.page .gz-bento .card { transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s; }
@media (hover: hover) { body:not(.exam-page) main.page .gz-bento .card:not(.gz-langkah):hover { transform: translate(-3px, -3px) rotate(-.4deg); box-shadow: 9px 9px 0 var(--gz-ink, #141A3D); } }
.gz-k { margin: 0 0 6px; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #C2185B; }
.gz-angka { margin: 0; font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 900; line-height: 1; }
.gz-bento h2 { font-size: 1.15rem; margin: 0 0 12px; }
.gz-tugas { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.gz-tugas a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.gz-tugas a:hover { background: rgba(255,255,255,.16); }
.gz-tugas a > span:nth-child(2) { flex: 1; }
.gz-cek { flex: 0 0 22px; height: 22px; border: 2px solid #FFE14D; border-radius: 6px; display: grid; place-items: center; font-weight: 900; color: #141A3D; }
.gz-tugas .selesai .gz-cek { background: #FFE14D; animation: gz-lencana .5s cubic-bezier(.34,1.56,.64,1) both; }
.gz-tugas .selesai a > span:nth-child(2) { text-decoration: line-through; opacity: .7; }
.gz-xp { font-size: .8rem; font-weight: 800; color: #FFE14D; white-space: nowrap; }
.gz-xpbar { margin-top: 16px; }
.gz-xpbar-h { display: flex; justify-content: space-between; font-size: .8rem; font-weight: 700; color: rgba(255,255,255,.85); margin-bottom: 6px; }
.gz-xpbar progress { width: 100%; height: 12px; border: 0; border-radius: 99px; overflow: hidden; background: rgba(255,255,255,.18); appearance: none; -webkit-appearance: none; }
.gz-xpbar progress::-webkit-progress-bar { background: rgba(255,255,255,.18); border-radius: 99px; }
.gz-xpbar progress::-webkit-progress-value { background: linear-gradient(90deg, #C2185B, #FF5FA2, #FFE14D); border-radius: 99px; }
.gz-xpbar progress::-moz-progress-bar { background: linear-gradient(90deg, #C2185B, #FF5FA2, #FFE14D); border-radius: 99px; }
.gz-tingkat-list { display: grid; gap: 10px; }
.gz-tingkat { display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 10px 16px; border: 2.5px solid var(--gz-ink, #141A3D); border-radius: 14px; color: #141A3D; text-decoration: none; font-size: 1.05rem; box-shadow: 3px 3px 0 var(--gz-ink, #141A3D); transition: transform .15s; }
.gz-tingkat:hover { transform: translate(-2px, -2px); }
.gz-t-a { background: #DCE4FF; } .gz-t-b { background: #FFE0EC; } .gz-t-c { background: #FFF3B8; }
.gz-tingkat.terkunci { background: #eee; color: #666; flex-direction: column; align-items: flex-start; box-shadow: none; }
.gz-lanjut { margin-top: 12px; width: 100%; }
.gz-lencana { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gz-lencana li { display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 700; line-height: 1.25; }
.gz-lc { flex: 0 0 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 2.5px solid var(--gz-ink, #141A3D); font-weight: 900; }
.gz-lencana .dapat .gz-lc { background: #FFE14D; animation: gz-lencana .7s cubic-bezier(.34,1.56,.64,1) both; }
.gz-lencana .kunci { color: var(--muted, #666); font-weight: 600; }
.gz-lencana .kunci .gz-lc { background: #f1f1f4; border-style: dashed; color: #888; }
@keyframes gz-lencana { from { transform: scale(0) rotate(-180deg); } to { transform: none; } }
.gz-akbar-n { margin: 0 0 4px; font-weight: 800; font-size: 1.1rem; }
.gz-juara { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.gz-juara li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 10px; background: #f5f6fb; }
.gz-juara li.saya { background: #FFE14D; font-weight: 800; }
.gz-sub { margin: 8px 0 14px; font-size: 1.2rem; }
html[data-tema="gelap"] .gz-pil-ghost { background: #1d2246; color: #fff; }
html[data-tema="gelap"] .gz-juara li { background: #1d2246; }
html[data-tema="gelap"] .gz-juara li.saya { color: #141A3D; }
html[data-tema="gelap"] .gz-lencana .kunci .gz-lc { background: #1d2246; color: #aab; }
@media (max-width: 1100px) {
  .gz-b-hero { grid-column: 1 / -1; grid-row: auto; }
  .gz-b-tingkat { grid-column: 1 / -1; grid-row: auto; }
  .gz-b-skor, .gz-b-rank { grid-column: span 6; }
  .gz-b-lencana, .gz-b-akbar, .gz-b-juara { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .gz-bento { gap: 14px; }
  .gz-lencana { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .gz-bento > *, .gz-api, .gz-lencana .dapat .gz-lc, .gz-tugas .selesai .gz-cek { animation: none !important; } body:not(.exam-page) main.page .gz-bento .card { transition: none; } }

/* Karakter diperbesar agar terlihat jelas (permintaan pemilik) */
body:not(.exam-page) .sapa-fitur { grid-template-columns: minmax(0, 1fr) 140px; }
body:not(.exam-page) .sapa-fitur .sapa-fig { height: 260px; }
body:not(.exam-page) .sapa-fitur .sapa-fig .karakter { width: 110px; max-height: 260px; }
body.beranda-page .db-heading .sapa { grid-template-columns: minmax(0, 1fr) 140px; max-width: none; }
body.beranda-page .db-heading .sapa-fig { height: 230px; }
body.beranda-page .db-heading .sapa-fig .karakter { width: 104px; max-height: 230px; }
.walker { width: 88px; } .walker-btn { width: 88px; height: 132px; } .walker-bubble-lama { bottom: 134px; }
@media (max-width: 560px) {
  body:not(.exam-page) .sapa-fitur, body.beranda-page .db-heading .sapa { grid-template-columns: minmax(0, 1fr) 92px; }
  body:not(.exam-page) .sapa-fitur .sapa-fig, body.beranda-page .db-heading .sapa-fig { height: 180px; }
  body:not(.exam-page) .sapa-fitur .sapa-fig .karakter, body.beranda-page .db-heading .sapa-fig .karakter { width: 76px; max-height: 180px; }
  .walker { width: 72px; } .walker-btn { width: 72px; height: 108px; }
}
.gz-bento .gz-langkah h2 { font-size: clamp(1.4rem, 2.6vw, 2.1rem); margin-bottom: 10px; }
.gz-bento .gz-tugas a, html[data-tema="gelap"] .gz-bento .gz-tugas a { color: #fff; }
.gz-bento .gz-tugas a span { color: inherit; } .gz-bento .gz-tugas .gz-xp { color: #FFE14D; } .gz-bento .gz-tugas .gz-cek { color: #141A3D; }

/* Pita promosi bilah atas */
.tb-promo { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; margin: 0 8px 0 18px; padding: 6px 8px 6px 6px; border: 2px solid rgba(255,225,77,.55); border-radius: 99px; background: rgba(255,255,255,.08); color: #fff; overflow: hidden; }
.tb-list { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; }
.tb-p { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tb-p.masuk { animation: tb-masuk .5s cubic-bezier(.22,1,.36,1) both; }
@keyframes tb-masuk { from { opacity: 0; transform: translateY(70%); } to { opacity: 1; transform: none; } }
.tb-label { flex: 0 0 auto; padding: 4px 10px; border-radius: 99px; background: #FFE14D; color: #141A3D; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.tb-baru .tb-label { background: #FF5FA2; color: #fff; }
.tb-akbar .tb-label { background: #fff; color: #C2185B; }
.tb-paket .tb-label { background: linear-gradient(90deg, #FFE14D, #FFB547); }
.tb-teks { flex: 1; min-width: 0; font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-cta { flex: 0 0 auto; padding: 6px 12px; border-radius: 99px; background: #fff; color: #141A3D !important; font-size: .82rem; font-weight: 800; text-decoration: none; white-space: nowrap; transition: transform .15s, background .15s; }
.tb-cta:hover, .tb-cta:focus-visible { background: #FFE14D; transform: translateY(-1px); }
.tb-jeda { flex: 0 0 auto; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: .7rem; cursor: pointer; }
.tb-jeda:hover, .tb-jeda:focus-visible { background: rgba(255,255,255,.28); }
@media (max-width: 900px) {
  .peserta-shell-page .topbar-inner, .topbar-inner { flex-wrap: wrap; }
  .tb-promo { order: 10; flex-basis: 100%; margin: 4px 0 0; border-radius: 14px; }
  .tb-teks { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: .82rem; line-height: 1.3; }
}
@media (max-width: 480px) { .tb-label { display: none; } .tb-cta { padding: 6px 10px; } }
@media (pointer: coarse) { .tb-cta { min-height: 44px; display: inline-flex; align-items: center; } .tb-jeda { width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .tb-p.masuk { animation: none; } }
body:not(.peserta-shell-page) .tb-promo { order: 10; flex-basis: 100%; margin: 2px 0 0; }

/* Pita promosi: animasi (bingkai berkilau, ikon, bilah waktu, titik) */
.tb-promo { position: relative; isolation: isolate; border: 0; padding: 7px 10px 9px 8px; background: linear-gradient(#24307a, #24307a) padding-box, linear-gradient(90deg, #FFE14D, #FF5FA2, #7C8CFF, #FFE14D) border-box; background-size: 100% 100%, 300% 100%; border: 2px solid transparent; animation: tb-bingkai 6s linear infinite; box-shadow: 0 6px 22px -10px rgba(255, 95, 162, .7); }
@keyframes tb-bingkai { to { background-position: 0 0, 300% 0; } }
.tb-promo::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.14) 45%, transparent 60%); background-size: 250% 100%; animation: tb-kilau 4.5s ease-in-out infinite; pointer-events: none; }
@keyframes tb-kilau { 0% { background-position: 150% 0; } 60%, 100% { background-position: -100% 0; } }
.tb-ikon { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.12); font-size: 1rem; }
.tb-p.masuk .tb-ikon { animation: tb-ikon .7s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes tb-ikon { from { transform: scale(0) rotate(-140deg); } to { transform: none; } }
.tb-p.masuk { animation: tb-masuk .6s cubic-bezier(.22,1,.36,1) both; }
@keyframes tb-masuk { from { opacity: 0; transform: translateY(80%); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.tb-p.masuk .tb-teks { animation: tb-teks .7s .08s cubic-bezier(.22,1,.36,1) both; }
@keyframes tb-teks { from { opacity: 0; letter-spacing: .04em; } to { opacity: 1; letter-spacing: normal; } }
.tb-p.masuk .tb-cta { animation: tb-cta .6s .2s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes tb-cta { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.tb-label { position: relative; overflow: hidden; }
.tb-label::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%); transform: translateX(-120%); animation: tb-sapu 3s 1s ease-in-out infinite; }
@keyframes tb-sapu { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.tb-paket .tb-ikon, .tb-akbar .tb-ikon { animation: tb-denyut 1.6s ease-in-out infinite; }
@keyframes tb-denyut { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,225,77,.6); } 50% { box-shadow: 0 0 0 7px rgba(255,225,77,0); } }
.tb-cta { box-shadow: 0 3px 0 #141A3D; }
.tb-cta:hover, .tb-cta:focus-visible { transform: translateY(-2px); box-shadow: 0 5px 0 #141A3D; }
.tb-cta:active { transform: translateY(1px); box-shadow: 0 1px 0 #141A3D; }
.tb-cta span { display: inline-block; transition: transform .2s; }
.tb-cta:hover span { transform: translateX(3px); }
.tb-titik { flex: 0 0 auto; display: flex; gap: 4px; }
.tb-titik i { width: 6px; height: 6px; border-radius: 99px; background: rgba(255,255,255,.35); transition: width .35s cubic-bezier(.22,1,.36,1), background .35s; }
.tb-titik i.on { width: 18px; background: #FFE14D; }
.tb-waktu { position: absolute; left: 18px; right: 18px; bottom: 2px; height: 3px; border-radius: 99px; background: linear-gradient(90deg, #FFE14D, #FF5FA2); transform-origin: left; transform: scaleX(0); opacity: .9; }
.tb-promo.jalan .tb-waktu { animation: tb-waktu 6s linear forwards; }
.tb-promo.tahan .tb-waktu, .tb-promo.tahan, .tb-promo.tahan::before { animation-play-state: paused; }
@keyframes tb-waktu { to { transform: scaleX(1); } }
@media (max-width: 900px) { .tb-titik { display: none; } .tb-ikon { width: 26px; height: 26px; font-size: .9rem; } }
@media (prefers-reduced-motion: reduce) { .tb-promo, .tb-promo::before, .tb-label::after, .tb-paket .tb-ikon, .tb-akbar .tb-ikon, .tb-p.masuk, .tb-p.masuk * { animation: none !important; } }

/* Tombol kecil ikut gaya Gen Z (tebal, bayangan, tertekan) */
body:not(.exam-page) main.page .btn-small { border: 2px solid var(--gz-ink, #141A3D); box-shadow: 3px 3px 0 var(--gz-ink, #141A3D); border-radius: 12px; padding: 9px 14px; font-weight: 800; transition: transform .15s, box-shadow .15s, background .15s; }
body:not(.exam-page) main.page .btn-small.ghost { background: #fff; color: #141A3D; border-color: var(--gz-ink, #141A3D); }
@media (hover: hover) { body:not(.exam-page) main.page .btn-small:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--gz-ink, #141A3D); } body:not(.exam-page) main.page .btn-small.ghost:hover { background: #FFE14D; color: #141A3D; } }
body:not(.exam-page) main.page .btn-small:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--gz-ink, #141A3D); }
html[data-tema="gelap"] body:not(.exam-page) main.page .btn-small { border-color: #FFE14D; box-shadow: 3px 3px 0 #FFE14D; }
html[data-tema="gelap"] body:not(.exam-page) main.page .btn-small.ghost { background: transparent; color: #fff; }

/* Pita promosi gaya stiker Gen Z (menggantikan bingkai berkilau) */
.tb-promo { background: #fff; border: 2.5px solid #141A3D; color: #141A3D; box-shadow: 4px 4px 0 #E8336D; animation: none; padding: 6px 8px 9px 6px; }
.tb-promo::before { display: none; }
.tb-ikon { background: #FFF3B8; border: 2px solid #141A3D; }
.tb-label { background: #141A3D; color: #FFE14D; border-radius: 8px; transform: rotate(-2deg); }
.tb-baru .tb-label { background: #E8336D; color: #fff; }
.tb-akbar .tb-label { background: #FFE14D; color: #141A3D; }
.tb-paket .tb-label { background: #141A3D; color: #FFE14D; }
.tb-teks { color: #141A3D; font-weight: 700; }
.tb-cta { background: #FFE14D; color: #141A3D !important; border: 2px solid #141A3D; border-radius: 12px; box-shadow: 3px 3px 0 #141A3D; }
.tb-cta:hover, .tb-cta:focus-visible { background: #FFE14D; transform: translate(-2px, -2px); box-shadow: 5px 5px 0 #141A3D; }
.tb-cta:active { transform: translate(2px, 2px); box-shadow: 0 0 0 #141A3D; }
.tb-titik i { background: #c9cde0; } .tb-titik i.on { background: #E8336D; }
.tb-jeda { background: #f1f2f8; color: #141A3D; border: 2px solid #141A3D; }
.tb-jeda:hover, .tb-jeda:focus-visible { background: #FFE14D; }
.tb-waktu { background: #E8336D; left: 14px; right: 14px; }
.tb-promo:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 #E8336D; }
.tb-promo { transition: transform .2s, box-shadow .2s; }

/* Grafik nilai v2: kurva halus, area bergradasi, zona lulus, animasi berkelanjutan */
.chart-v2 .g-zona { fill: rgba(30, 160, 100, .08); }
.chart-v2 .g-zona-t { font: 800 10px var(--body); fill: #1e8a5a; letter-spacing: .06em; text-transform: uppercase; }
.chart-v2 .g-pass { stroke: #1e8a5a; stroke-width: 2; stroke-dasharray: 6 5; animation: g-putus 1.2s linear infinite; }
.chart-v2 .g-pass-t { fill: #1e8a5a; }
@keyframes g-putus { to { stroke-dashoffset: -22; } }
.chart-v2 .g-garis { stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: g-gambar 1.6s .2s cubic-bezier(.65,0,.35,1) forwards; filter: drop-shadow(0 4px 6px rgba(20,26,61,.18)); }
@keyframes g-gambar { to { stroke-dashoffset: 0; } }
.chart-v2 .g-alir { stroke-width: 2; stroke-linecap: round; stroke-dasharray: .06 .94; opacity: .85; animation: g-alir 3s 1.8s linear infinite; stroke-dashoffset: 1; }
@keyframes g-alir { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.chart-v2 .g-area { opacity: 0; animation: g-muncul .9s 1s ease forwards, g-napas 4s 2s ease-in-out infinite; }
@keyframes g-muncul { to { opacity: 1; } }
@keyframes g-napas { 0%, 100% { opacity: 1; } 50% { opacity: .65; } }
.chart-v2 .g-komet { opacity: 0; animation: g-muncul .4s 1.8s forwards; filter: drop-shadow(0 0 5px rgba(255,255,255,.9)); }
.chart-v2 .g-dot { transform-box: fill-box; transform-origin: center; animation: g-pop .5s cubic-bezier(.34,1.56,.64,1) both; transition: transform .2s; }
.chart-v2 .g-d0 { animation-delay: .3s; } .chart-v2 .g-d1 { animation-delay: .45s; } .chart-v2 .g-d2 { animation-delay: .6s; } .chart-v2 .g-d3 { animation-delay: .75s; } .chart-v2 .g-d4 { animation-delay: .9s; }
.chart-v2 .g-d5 { animation-delay: 1.05s; } .chart-v2 .g-d6 { animation-delay: 1.2s; } .chart-v2 .g-d7 { animation-delay: 1.35s; } .chart-v2 .g-d8 { animation-delay: 1.5s; } .chart-v2 .g-d9 { animation-delay: 1.65s; }
@keyframes g-pop { from { transform: scale(0); } to { transform: scale(1); } }
.chart-v2 .g-titik:hover .g-dot, .chart-v2 .g-titik:focus-visible .g-dot { transform: scale(1.35); }
.chart-v2 .g-ping { transform-box: fill-box; transform-origin: center; opacity: .5; animation: g-ping 1.8s ease-out infinite; }
@keyframes g-ping { from { transform: scale(1); opacity: .5; } to { transform: scale(3); opacity: 0; } }
.chart-v2 .g-val { font: 800 11.5px var(--body); paint-order: stroke; stroke: #fff; stroke-width: 3px; }
html[data-tema="gelap"] .chart-v2 .g-val { stroke: #10142e; fill: #fff; }
html[data-tema="gelap"] .chart-v2 .g-grid { stroke: rgba(255,255,255,.1); }
@media (prefers-reduced-motion: reduce) {
  .chart-v2 .g-garis { animation: none; stroke-dashoffset: 0; }
  .chart-v2 .g-area { animation: none; opacity: 1; }
  .chart-v2 .g-alir, .chart-v2 .g-komet, .chart-v2 .g-ping { display: none; }
  .chart-v2 .g-pass, .chart-v2 .g-dot { animation: none; }
}
.chart.chart-v2 .g-pass { stroke: #1e8a5a; } .chart.chart-v2 .g-pass-t { fill: #1e8a5a; font: 800 10.5px var(--body); }
.chart-v2 + .legend .lg-pass, .chart-v2 .legend .lg-pass { color: #1e8a5a; }

/* Garis pembatas bawah bilah atas: warna polos kuning stabilo (permintaan pemilik, tanpa gradasi) */
.topbar::after { background: #FFE14D; height: 3px; }
@media (max-width: 600px) {
  .chart-v2 .g-ax { font-size: 20px; } .chart-v2 .g-val { font-size: 21px; stroke-width: 4px; }
  .chart.chart-v2 .g-pass-t { font-size: 17px; } .chart-v2 .g-zona-t { font-size: 16px; }
  .chart-v2 .g-garis { stroke-width: 5; } .chart-v2 .g-dot { r: 9; stroke-width: 4; } .chart-v2 .g-komet { r: 7; }
}
body.beranda-page .db-main .chart-v2 .g-pass-t { fill: #1e8a5a; } body.beranda-page .db-main .chart-v2 .g-pass { stroke: #1e8a5a; }

/* Pita promosi: hitung mundur berupa cincin di tombol jeda (menggantikan garis bawah) */
@property --tb-p { syntax: '<number>'; inherits: false; initial-value: 0; }
.tb-waktu { display: none; }
.tb-promo { padding-bottom: 6px; }
.tb-jeda { position: relative; border: 0; background: conic-gradient(#141A3D calc(var(--tb-p) * 1%), #dfe2ee 0); }
.tb-jeda::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #fff; }
.tb-jeda > span { position: relative; }
.tb-jeda:hover::before, .tb-jeda:focus-visible::before { background: #FFE14D; }
.tb-promo.jalan .tb-jeda { animation: tb-cincin 6s linear forwards; }
.tb-promo.tahan .tb-jeda { animation-play-state: paused; }
@keyframes tb-cincin { from { --tb-p: 0; } to { --tb-p: 100; } }
.tb-titik i.on { background: #141A3D; }

/* Ikon SVG garis pengganti emoji */
.ikon-svg { width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: 0 0 auto; }
.game-ikon, .portal-ikon, .lp-discovery-icon, .tb-ikon { display: inline-grid; place-items: center; color: #141A3D; }
.game-ikon .ikon-svg, .portal-ikon .ikon-svg, .lp-discovery-icon .ikon-svg { width: 58%; height: 58%; min-width: 22px; min-height: 22px; }
.tb-ikon .ikon-svg { width: 17px; height: 17px; }
.game-head h1 .ikon-svg { color: #C2185B; }
html[data-tema="gelap"] .game-ikon, html[data-tema="gelap"] .portal-ikon, html[data-tema="gelap"] .lp-discovery-icon { color: #FFE14D; }
.game-kartu:hover .game-ikon .ikon-svg, .portal-kartu:hover .portal-ikon .ikon-svg { animation: ik-goyang .5s ease; }
@keyframes ik-goyang { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-10deg) scale(1.08); } 65% { transform: rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .game-kartu:hover .game-ikon .ikon-svg, .portal-kartu:hover .portal-ikon .ikon-svg { animation: none; } }
.lp-discovery-icon .ikon-svg, .portal-ikon .ikon-svg { width: 44px; height: 44px; }
.game-ikon .ikon-svg { width: 26px; height: 26px; }
.pk-ikon { display: grid; place-items: center; color: #141A3D; } .pk-ikon .ikon-svg { width: 34px; height: 34px; }
.set-ring h3 .ikon-svg { color: #C2185B; }

/* Simulasi Coretax */
.ctx-head { margin-bottom: 20px; }
.ctx-kicker { margin: 0 0 4px; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #C2185B; }
.ctx-label { display: inline-block; margin: 8px 0 0; padding: 6px 12px; border: 2px dashed #141A3D; border-radius: 10px; background: #FFF3B8; color: #141A3D; font-size: .85rem; font-weight: 700; }
.ctx-nav { font-size: .9rem; }
.ctx-mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.ctx-mod { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; }
.ctx-mod h2 { font-size: 1.1rem; margin: 6px 0 0; }
.ctx-mod p { margin: 0; flex: 1; }
.ctx-mod-ikon { display: grid; place-items: center; width: 52px; height: 52px; border: 2.5px solid #141A3D; border-radius: 14px; background: #FFE14D; color: #141A3D; }
.ctx-mod-ikon .ikon-svg { width: 28px; height: 28px; }
.ctx-mod-tag { font-weight: 800; color: #C2185B; font-size: .9rem; }
.ctx-mod-nanti { opacity: .65; }
.ctx-mod-nanti .ctx-mod-ikon { background: #eef0f7; }
.ctx-beli { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; background: #141A3D; color: #fff; }
body:not(.exam-page) main.page .card.ctx-beli { background: #141A3D; color: #fff; box-shadow: 6px 6px 0 #E8336D; }
.ctx-beli h2 { color: #fff; margin-top: 0; }
.ctx-beli > div { flex: 1 1 380px; }
.ctx-poin { margin: 10px 0 0; padding-left: 20px; }
.ctx-form h2 { font-size: 1.05rem; margin: 18px 0 10px; }
.ctx-form h2:first-of-type { margin-top: 0; }
.ctx-items input, .ctx-items select { width: 100%; min-width: 72px; }
.ctx-items td:first-child input { min-width: 180px; }
.ctx-c { text-align: center; }
.ctx-dpp { white-space: nowrap; font-weight: 700; }
.ctx-ringkas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0 6px; }
.ctx-ringkas > div { padding: 12px; border: 2px solid #141A3D; border-radius: 12px; background: #f7f8fc; }
.ctx-ringkas span { display: block; font-size: .78rem; color: var(--muted, #555); }
.ctx-ringkas strong { font-size: 1.1rem; }
.ctx-ringkas > div:last-child { background: #FFE14D; }
.ctx-salah input, .ctx-salah select { border-color: #C2185B !important; box-shadow: 0 0 0 3px rgba(194,24,91,.18); }
.ctx-galat ul, .ctx-saran ul { margin: 6px 0 0; padding-left: 20px; }
.ctx-dok-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ctx-dok-head h2 { margin: 0; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.ctx-dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.ctx-dl dt { font-size: .78rem; color: var(--muted, #555); } .ctx-dl dd { margin: 2px 0 0; font-weight: 700; }
.ctx-tabel td, .ctx-tabel th { white-space: nowrap; }
.ctx-st-draft { background: #eef0f7; } .ctx-st-disetujui { background: #d8f3e3; color: #135e3a; } .ctx-st-diganti { background: #fff3b8; } .ctx-st-batal { background: #fde2ea; color: #9b1446; }
.ctx-aksi { margin-top: 14px; flex-wrap: wrap; gap: 10px; }
.ctx-cara { margin-top: 10px; }
html[data-tema="gelap"] .ctx-ringkas > div { background: #1d2246; border-color: #FFE14D; }
html[data-tema="gelap"] .ctx-ringkas > div:last-child { background: #FFE14D; color: #141A3D; }
html[data-tema="gelap"] .ctx-ringkas > div:last-child span { color: #141A3D; }
@media (max-width: 760px) { .ctx-ringkas, .ctx-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ctx-masa input[type=month], .ctx-form input[type=month] { width: 100%; min-height: 44px; padding: 10px 12px; font: inherit; border-radius: 12px; }
.ctx-masa label, .ctx-masa > div { align-self: end; }

.ctx-lamp { margin: 14px 0; border: 2px solid #141A3D; border-radius: 12px; padding: 10px 14px; }
.ctx-lamp > summary { cursor: pointer; font-weight: 800; min-height: 32px; }
.ctx-lamp[open] > summary { margin-bottom: 8px; }
.ctx-items td input { min-width: 130px; }
.ctx-wrap { white-space: normal !important; min-width: 260px; }
.ctx-kodebj-desk { display: block; max-width: 220px; white-space: normal; line-height: 1.3; }
.ctx-items select { min-width: 112px; }
.ctx-items td input[name=item_kode] { min-width: 110px; }
.form-grid > details.ctx-lamp { grid-column: 1 / -1; }

/* Simulasi Coretax: tab Induk/Lampiran dan bilah aksi SPT */
.ctx-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 2px solid var(--garis, #d6d6d6); margin: 12px 0 16px; -webkit-overflow-scrolling: touch; }
.ctx-tabs a { flex: 0 0 auto; padding: 9px 14px; border-radius: 8px 8px 0 0; text-decoration: none; font-weight: 600; color: inherit; white-space: nowrap; border: 1px solid transparent; border-bottom: 0; }
.ctx-tabs a:hover { background: rgba(0,0,0,.05); }
.ctx-tabs a.aktif { background: #1f2a44; color: #fff; border-color: #1f2a44; }
.ctx-aksi-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--garis, #d6d6d6); }
.ctx-aksi-akhir { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; align-items: center; margin: 20px 0; padding: 12px; border-radius: 12px; background: rgba(31,42,68,.06); }
@media (max-width: 600px) { .ctx-aksi-akhir { justify-content: stretch; } .ctx-aksi-akhir > * { flex: 1 1 100%; } .ctx-aksi-akhir .btn, .ctx-aksi-akhir button { width: 100%; } }

/* Animasi berulang konsep "Tinta dan Stabilo" (disetujui pemilik 8 November 2026).
   Satu gerak pelan per area, sisanya hanya saat interaksi. Tanpa glow, tanpa kedipan.
   Mati di halaman ujian, saat Jeda Animasi, saat tab tersembunyi, dan bila perangkat meminta kurangi gerak. */
body:not(.exam-page) .lp-stabilo { background: linear-gradient(transparent 62%, rgba(255,225,77,.7) 62%, rgba(255,225,77,.7) 92%, transparent 92%) no-repeat 0 0; background-size: 100% 100%; animation: lp-stabilo 14s cubic-bezier(.22,1,.36,1) infinite; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
html[data-tema="gelap"] body:not(.exam-page) .lp-stabilo { background-image: linear-gradient(transparent 62%, rgba(185,154,18,.55) 62%, rgba(185,154,18,.55) 92%, transparent 92%); }
@keyframes lp-stabilo { 0% { background-size: 0 100%; } 6%, 88% { background-size: 100% 100%; } 96%, 100% { background-size: 0 100%; background-position: 100% 0; } }
body:not(.exam-page) .btn-mark { position: relative; overflow: hidden; isolation: isolate; }
body:not(.exam-page) .btn-mark::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.7) 50%, transparent 60%) no-repeat; background-size: 250% 100%; background-position: 150% 0; animation: lp-kilau 9s ease-in-out infinite; }
html[data-tema="gelap"] body:not(.exam-page) .btn-mark::after { background-image: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%); }
@keyframes lp-kilau { 0%, 80% { background-position: 150% 0; } 92%, 100% { background-position: -50% 0; } }
body:not(.exam-page) .btn .panah, body:not(.exam-page) .gz-tingkat span[aria-hidden] { display: inline-block; transition: transform .25s cubic-bezier(.22,1,.36,1); }
body:not(.exam-page) .gz-tingkat:hover span[aria-hidden] { transform: translateX(4px); }
/* hentikan denyut lama dan glow ikon pita */
.landing .hero .btn { animation: none; }
.tb-paket .tb-ikon, .tb-akbar .tb-ikon { animation: none; }
.gz-api { animation-duration: 3.2s !important; }
/* karakter: napas lembut */
body:not(.exam-page) .lp-materi-karakter svg, body:not(.exam-page) .lp-hero-figur svg, body:not(.exam-page) .lp-leader-fig svg { animation: lp-napas 5.5s ease-in-out infinite; }
@keyframes lp-napas { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
/* sorotan kartu bergiliran */
.lp-giliran .ikon-svg, .lp-giliran .portal-ikon, .lp-giliran .game-ikon { animation: ik-goyang .6s ease; }
.gz-bento > .card.lp-giliran { animation: lp-angkat .9s cubic-bezier(.22,1,.36,1); }
@keyframes lp-angkat { 40% { transform: translate(-2px,-2px); } 100% { transform: none; } }
/* garis navigasi saat diarahkan */
@media (hover: hover) { body:not(.exam-page) .peserta-menu a:not(.aktif):not([aria-current]) { background-image: linear-gradient(#FFE14D, #FFE14D); background-repeat: no-repeat; background-size: 0 2px; background-position: 12px calc(100% - 4px); transition: background-size .25s cubic-bezier(.22,1,.36,1); } body:not(.exam-page) .peserta-menu a:not(.aktif):not([aria-current]):hover { background-size: calc(100% - 24px) 2px; } }
/* HP: tanpa giliran, kilau lebih jarang */
@media (max-width: 900px) { body:not(.exam-page) .btn-mark::after { animation-duration: 14s; } }
/* jeda, tab tersembunyi, kurangi gerak */
html.lp-diam .lp-stabilo, html.lp-diam .btn-mark::after, html.lp-diam .gz-api, html.lp-diam .lp-hero-figur svg, html.lp-diam .lp-materi-karakter svg, html.lp-diam .lp-leader-fig svg { animation: none !important; }
html.lp-diam .lp-stabilo { background-size: 100% 100%; }
html.lp-tersembunyi body * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .lp-stabilo, .btn-mark::after, .lp-giliran, .lp-giliran * { animation: none !important; } .lp-stabilo { background-size: 100% 100%; } }
body:not(.exam-page) .gz-langkah .lp-stabilo { background-image: linear-gradient(transparent 70%, rgba(255,225,77,.45) 70%, rgba(255,225,77,.45) 94%, transparent 94%); }

/* Katalog layanan: ikon vektor konsisten, hierarki dan aksi sejajar. */
.lp-service-icon { display: block; width: 28px; height: 28px; flex: none; }
.lp-discovery-card .lp-discovery-icon, .portal-kartu .portal-ikon {
  display: grid; place-items: center; width: 52px; height: 52px; flex: none;
  margin: 0 0 16px; border: 1px solid var(--line); border-radius: 15px;
  background: var(--ink-soft); color: var(--ink);
}
.lp-discovery-card .lp-discovery-tag { margin-bottom: 16px; font-size: .72rem; }
.lp-discovery-card h3, .portal-kartu h3 { line-height: 1.4; margin: 0 0 8px; text-wrap: balance; }
.lp-discovery-card p, .portal-kartu p { line-height: 1.7; font-size: .94rem; margin-bottom: 20px; }
.lp-discovery-card .lp-discovery-action, .portal-kartu .portal-cta { margin-top: auto; line-height: 1.5; font-size: .9rem; }
.lp-discovery-grid, .portal-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr)); gap: 20px; }
.lp-discovery-grid > *, .portal-grid > * { min-width: 0; overflow-wrap: anywhere; }
body.landing.portal .lp-discovery-card, body.landing.portal .portal-kartu, .lp-discovery-participant .lp-discovery-card {
  padding: 24px; background: var(--card); border: 1px solid var(--line); box-shadow: none;
  border-radius: 20px; color: var(--text);
}
body.landing.portal :is(.lp-discovery-card, .portal-kartu):is(:hover, :focus-visible),
.lp-discovery-participant .lp-discovery-card:is(:hover, :focus-visible) { border-color: var(--ink); box-shadow: var(--shadow); transform: none; }
.lp-service-category { margin: 28px 0 36px; }
.lp-service-category .sec-head h3 { margin-bottom: 6px; }
.lp-materi-chip a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.lp-materi-chip .lp-service-icon { width: 20px; height: 20px; }
@media (max-width: 560px) {
  .lp-discovery-grid, .portal-grid { gap: 14px; }
  body.landing.portal .lp-discovery-card, body.landing.portal .portal-kartu, .lp-discovery-participant .lp-discovery-card { padding: 20px; }
  .lp-hero .lp-actions > .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }
}

html[data-tema="gelap"] :is(.lp-discovery-tag, .lp-discovery-action, .lp-eyebrow, .portal-cta) { color: var(--ink); }