/*
 * assets/css/theme.css
 * Tema "Jalur Cone" (Pilihan C). SATU-SATUNYA tempat warna & token desain.
 * Komponen dan halaman hanya memakai var(--rd-*) atau class Bootstrap, tidak ada hex langsung.
 * Mode: [data-bs-theme="light"] / [data-bs-theme="dark"] di <html> (dipasang theme-init.js).
 */

/* ============ Font Poppins (offline) ============ */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../vendor/fonts/poppins/poppins-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../vendor/fonts/poppins/poppins-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../vendor/fonts/poppins/poppins-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../vendor/fonts/poppins/poppins-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 700; font-display: swap; src: url('../vendor/fonts/poppins/poppins-latin-700-italic.woff2') format('woff2'); }

/* ============ Token non-warna ============ */
:root {
    --rd-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --rd-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --rd-radius-kontrol: 999px;     /* tombol & input berbentuk pil */
    --rd-radius-kartu: 1.25rem;
    --rd-radius-lapis: 1.75rem;
    --rd-transisi: .18s cubic-bezier(.2, .7, .2, 1);
    --rd-pegas: cubic-bezier(.34, 1.56, .64, 1);   /* sedikit memantul */
    --rd-header-tinggi: 4.5rem;
}

/* ============ Warna: terang (bawaan) ============ */
:root, [data-bs-theme="light"] {
    color-scheme: light;
    --rd-bg: #F3F6FA;
    --rd-permukaan: #FFFFFF;
    --rd-permukaan-2: #F6F9FC;
    --rd-garis: #DDE5EE;
    --rd-garis-lembut: #EEF2F6;
    --rd-teks: #0B1F33;
    --rd-teks-redup: #4A5D70;

    --rd-navy: #0B1F33;             /* pita hero, header publik, footer (sama di dua mode) */
    --rd-navy-2: #13314F;
    --rd-navy-garis: #2B4A66;
    --rd-navy-teks: #FFFFFF;
    --rd-navy-redup: #B9C7D6;

    --rd-primary: #0C4A6E;          /* aksi sekunder, tautan */
    --rd-primary-teks: #FFFFFF;
    --rd-primary-lembut: #E3F1FB;
    --rd-aksen: #F26A1B;            /* oranye jersey: CTA utama, cone */
    --rd-aksen-teks: #0B1F33;       /* teks di atas oranye = navy (kontras 5.4:1) */
    --rd-aksen-lembut: #FFF1E8;
    --rd-aksen-tua: #7A2E05;        /* teks di atas aksen-lembut */
    --rd-aksen-label: #B4470B;      /* teks oranye kecil di atas latar terang */
    --rd-langit: #38BDF8;
    --rd-langit-lembut: #BFE6FC;

    --rd-sukses-teks: #0E6B3F;  --rd-sukses-bg: #E1F6EA;
    --rd-peringatan-teks: #7A4A00; --rd-peringatan-bg: #FFF4D6;
    --rd-bahaya-teks: #A1222C;  --rd-bahaya-bg: #FDE8EA;
    --rd-info-teks: #0C4A6E;    --rd-info-bg: #E3F1FB;

    --rd-bayang: 0 1px 2px rgba(11, 31, 51, .06), 0 8px 24px rgba(11, 31, 51, .06);
    --rd-bayang-angkat: 0 2px 4px rgba(11, 31, 51, .06), 0 18px 40px rgba(11, 31, 51, .12);
}

/* ============ Warna: gelap ============ */
[data-bs-theme="dark"] {
    color-scheme: dark;
    --rd-bg: #08131F;
    --rd-permukaan: #0F2236;
    --rd-permukaan-2: #0C1C2D;
    --rd-garis: #213A54;
    --rd-garis-lembut: #18304A;
    --rd-teks: #E8EEF5;
    --rd-teks-redup: #A3B3C4;

    --rd-navy: #050D17;
    --rd-navy-2: #0F2236;
    --rd-navy-garis: #213A54;

    --rd-primary: #7CC4F2;
    --rd-primary-teks: #08131F;
    --rd-primary-lembut: #12324D;
    --rd-aksen: #F58A4B;
    --rd-aksen-teks: #08131F;
    --rd-aksen-lembut: #3A1F10;
    --rd-aksen-tua: #FFC6A3;
    --rd-aksen-label: #F58A4B;
    --rd-langit: #38BDF8;
    --rd-langit-lembut: #12405E;

    --rd-sukses-teks: #7FE0A8;  --rd-sukses-bg: #0F3324;
    --rd-peringatan-teks: #FFD27A; --rd-peringatan-bg: #3A2C08;
    --rd-bahaya-teks: #FF9AA2;  --rd-bahaya-bg: #3A1418;
    --rd-info-teks: #7CC4F2;    --rd-info-bg: #12324D;

    --rd-bayang: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
    --rd-bayang-angkat: 0 2px 4px rgba(0, 0, 0, .3), 0 18px 40px rgba(0, 0, 0, .45);
}

/* ============ Hubungkan ke Bootstrap ============ */
:root, [data-bs-theme] {
    --bs-body-font-family: var(--rd-font);
    --bs-body-bg: var(--rd-bg);
    --bs-body-color: var(--rd-teks);
    --bs-secondary-color: var(--rd-teks-redup);
    --bs-tertiary-bg: var(--rd-permukaan-2);
    --bs-border-color: var(--rd-garis);
    --bs-primary: var(--rd-primary);
    --bs-link-color: var(--rd-primary);
    --bs-link-hover-color: var(--rd-primary);
    --bs-link-color-rgb: 12, 74, 110;
    --bs-emphasis-color: var(--rd-teks);
    --bs-card-bg: var(--rd-permukaan);
    --bs-focus-ring-color: color-mix(in srgb, var(--rd-aksen) 45%, transparent);
}
[data-bs-theme="dark"] { --bs-link-color-rgb: 124, 196, 242; }

/* ============ Dasar ============ */
html { scroll-behavior: smooth; }
body {
    font-family: var(--rd-font);
    background: var(--rd-bg);
    color: var(--rd-teks);
    -webkit-font-smoothing: antialiased;
    transition: background-color .3s ease, color .3s ease;
}
h1, h2, h3, .rd-judul { text-wrap: balance; letter-spacing: -.02em; }
.rd-judul-miring { font-weight: 700; font-style: italic; letter-spacing: -.03em; }
.rd-angka { font-variant-numeric: tabular-nums; }
.rd-mono { font-family: var(--rd-mono); letter-spacing: .04em; }
a { text-decoration: none; }
:focus-visible { outline: 3px solid var(--rd-aksen); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--rd-aksen); color: var(--rd-aksen-teks); }

/* ============ Tombol ============ */
.rd-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    min-height: 2.875rem; padding: 0 1.5rem; border-radius: var(--rd-radius-kontrol);
    font-weight: 600; font-size: .95rem; border: 1px solid transparent; cursor: pointer;
    transition: transform var(--rd-transisi), background-color var(--rd-transisi), box-shadow var(--rd-transisi), border-color var(--rd-transisi);
    white-space: nowrap; position: relative; overflow: hidden;
}
.rd-btn:active { transform: scale(.97); }
.rd-btn i { transition: transform var(--rd-transisi); }
.rd-btn:hover i.rd-geser { transform: translateX(4px); }
.rd-btn-aksen { background: var(--rd-aksen); color: var(--rd-aksen-teks); }
.rd-btn-aksen:hover { color: var(--rd-aksen-teks); box-shadow: 0 8px 22px color-mix(in srgb, var(--rd-aksen) 40%, transparent); transform: translateY(-1px); }
.rd-btn-primary { background: var(--rd-primary); color: var(--rd-primary-teks); }
.rd-btn-primary:hover { color: var(--rd-primary-teks); filter: brightness(1.08); }
.rd-btn-garis { background: transparent; color: var(--rd-teks); border-color: var(--rd-garis); }
.rd-btn-garis:hover { color: var(--rd-teks); border-color: var(--rd-teks-redup); background: var(--rd-permukaan-2); }
.rd-btn-navy-garis { background: transparent; color: var(--rd-navy-teks); border: 2px solid var(--rd-navy-garis); }
.rd-btn-navy-garis:hover { color: var(--rd-navy-teks); border-color: var(--rd-navy-redup); }
.rd-btn-sm { min-height: 2.25rem; padding: 0 1rem; font-size: .85rem; }
.rd-btn-ikon {
    width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--rd-garis); background: var(--rd-permukaan); color: var(--rd-teks); cursor: pointer;
    transition: background-color var(--rd-transisi), transform var(--rd-transisi);
}
.rd-btn-ikon:hover { background: var(--rd-permukaan-2); }
.rd-btn-ikon:active { transform: scale(.94); }

/* Tombol sedang memuat */
.rd-btn.is-memuat { pointer-events: none; color: transparent !important; }
.rd-btn.is-memuat::after {
    content: ""; position: absolute; width: 1.15rem; height: 1.15rem; border-radius: 50%;
    border: 2.5px solid var(--rd-aksen-teks); border-right-color: transparent; animation: rd-putar .7s linear infinite;
}
@keyframes rd-putar { to { transform: rotate(360deg); } }

/* ============ Kartu & status ============ */
.rd-kartu { background: var(--rd-permukaan); border: 1px solid var(--rd-garis); border-radius: var(--rd-radius-kartu); }
.rd-kartu-angkat { transition: transform var(--rd-transisi), box-shadow var(--rd-transisi), border-color var(--rd-transisi); }
.rd-kartu-angkat:hover { transform: translateY(-3px); box-shadow: var(--rd-bayang-angkat); border-color: color-mix(in srgb, var(--rd-aksen) 45%, var(--rd-garis)); }

.rd-status { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .7rem; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.rd-status-sukses { color: var(--rd-sukses-teks); background: var(--rd-sukses-bg); }
.rd-status-peringatan { color: var(--rd-peringatan-teks); background: var(--rd-peringatan-bg); }
.rd-status-bahaya { color: var(--rd-bahaya-teks); background: var(--rd-bahaya-bg); }
.rd-status-info { color: var(--rd-info-teks); background: var(--rd-info-bg); }
.rd-status-aksen { color: var(--rd-aksen-tua); background: var(--rd-aksen-lembut); }

/* ============ Logo ============ */
.rd-logo { display: inline-flex; align-items: center; gap: .55rem; color: inherit; }
.rd-logo:hover { color: inherit; }
.rd-logo-teks { font-weight: 700; font-style: italic; font-size: 1.5rem; letter-spacing: .06em; line-height: 1; }
.rd-logo-tanda { flex: none; overflow: visible; width: 2.6rem; height: 2.6rem; margin: -.3rem 0; }
.rd-logo-roda { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .55s var(--rd-pegas); }
.rd-logo-garis { transition: transform .4s ease, opacity .4s ease; }
.rd-logo:hover .rd-logo-roda { transform: translateY(-6px); }
.rd-logo:hover .rd-logo-garis { transform: translateX(-4px); opacity: .7; }
.rd-logo-masuk .rd-logo-roda { animation: rd-roda-mendarat .9s .2s var(--rd-pegas) both; }
.rd-logo-masuk .rd-logo-garis { animation: rd-garis-masuk .6s .2s ease-out both; }
@keyframes rd-roda-mendarat { from { transform: translate(-40px, -18px); } }
@keyframes rd-garis-masuk { from { transform: translateX(-24px); opacity: 0; } }

/* ============ Form ============ */
.rd-input {
    width: 100%; min-height: 3.125rem; padding: 0 1.25rem; border-radius: var(--rd-radius-kontrol);
    border: 1px solid var(--rd-garis); background: var(--rd-permukaan); color: var(--rd-teks); font: inherit;
    transition: border-color var(--rd-transisi), box-shadow var(--rd-transisi);
}
.rd-input::placeholder { color: var(--rd-teks-redup); opacity: .85; }
.rd-input:focus { outline: none; border-color: var(--rd-aksen); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rd-aksen) 22%, transparent); }
.rd-label { font-size: .85rem; font-weight: 600; margin-bottom: .4rem; display: block; }

/* ============ Ganti tema: lingkaran meluas dari tombol (View Transitions) ============ */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: rd-tema-masuk .55s cubic-bezier(.6, 0, .2, 1); }
@keyframes rd-tema-masuk { from { clip-path: circle(0 at var(--rd-tema-x, 100%) var(--rd-tema-y, 0)); } to { clip-path: circle(var(--rd-tema-r, 150vmax) at var(--rd-tema-x, 100%) var(--rd-tema-y, 0)); } }

/* Ikon matahari/bulan berputar saat ganti */
.rd-ikon-tema { transition: transform .5s var(--rd-pegas); }
[data-bs-theme="dark"] .rd-ikon-tema { transform: rotate(-200deg); }

/* ============ Muncul saat digulir (keadaan awal tetap terlihat) ============ */
.rd-siap [data-rd-muncul] { opacity: .35; transform: translateY(22px); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--rd-urut, 0) * 70ms); }
.rd-siap [data-rd-muncul].is-terlihat { opacity: 1; transform: none; }

/* ============ Toast kecil ============ */
.rd-toast {
    position: fixed; left: 50%; bottom: 1.5rem; z-index: 1090; translate: -50% 140%;
    background: var(--rd-navy); color: var(--rd-navy-teks); padding: .8rem 1.25rem; border-radius: 999px;
    font-size: .9rem; font-weight: 500; box-shadow: var(--rd-bayang-angkat); display: flex; gap: .6rem; align-items: center;
    transition: translate .45s var(--rd-pegas);
}
.rd-toast.is-tampil { translate: -50% 0; }
.rd-toast i { color: var(--rd-aksen); }

/* ============ Kurangi gerak ============ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
    .rd-siap [data-rd-muncul] { opacity: 1; transform: none; }
}

/* Penanda label form (tandaLabel()): wajib = bintang merah, tidak wajib = (opsional) */
.rd-wajib { color: var(--rd-bahaya-teks); font-weight: 700; margin-left: .2rem; }
.rd-opsional { color: var(--rd-teks-redup); font-weight: 400; font-size: .85em; }