@import url("fonts.css?v=20260811b");

/* ─────────────────────────────────────────────────────────────────────────
   Halaman login (classes/vfs/a.html) — gaya shadcn "login-01".

   Ditulis ulang 2026-07-21 dari sheet lama (685 baris, token HSL Tailwind,
   override bertumpuk 3-4 lapis). Sekarang memakai PALET & UKURAN TEKS b.html
   (token hex dari skins/default.css) supaya seragam dengan chrome aplikasi.
   default.css TIDAK dimuat di sini, jadi tokennya disalin ke :root.

   Alur tetap DUA LANGKAH (username -> password); js/login.js tidak disentuh.
   Semua kait JS dipertahankan: #a #b #login #r #d, #step-username
   #step-password #selected-username #loading, .password-icon i.
   (.theme-toggle i sudah tak ada — ikonnya kini SVG lucide yang diputar CSS;
   penukar ikon di js/login.js jadi tak berlaku, dan itu aman: blok itu
   dijaga `if (icon)` sehingga diam saja saat elemennya nihil.)
   ───────────────────────────────────────────────────────────────────────── */

:root {
    /* teks — persis b.html */
    --text-primary: #000000;
    --text-secondary: #6C6C70;
    --text-muted: rgba(60, 60, 67, .6);
    --title-fg: #000000;              /* --sidebar-fg: teks terkuat (judul) */
    /* permukaan */
    --page-bg: #F2F2F7;              /* = --sidebar-surface b.html; kartu putih mengambang di atasnya */
    --card-bg: #ffffff;
    --card-border: #E5E5EA;          /* --sidebar-border-c: hairline Apple */
    --card-radius: 12px;             /* rounded-xl */
    --card-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    /* input */
    --input-bg: #ffffff;
    --input-border: #8E8E93;
    /* Aksen MENGIKUTI pilihan di aplikasi (localStorage 'accent', dibaca
       inline tiap halaman); picker HANYA di a.html (footer, keputusan owner
       2026-08-07 — mencabut "tanpa chooser"). Tombol & ring = varian
       ACCESSIBLE Apple — nilai default beberapa aksen gagal 4,5:1 dengan
       teks tombol 16px; teks tombol putih di terang, HITAM di gelap
       (isian accessible gelap itu terang) — docs/APPLE_UI.md. */
    --acc-l-rgb: 86, 74, 222;
    --acc-d-rgb: 167, 170, 255;
    --btn-l-hover: #493FBD;
    --btn-d-hover: #6D7CFF;
    --btn-bg: rgb(var(--acc-l-rgb));
    --btn-bg-hover: var(--btn-l-hover);
    --btn-fg: #ffffff;
    --ring: rgb(var(--acc-l-rgb));
    --ring-soft: rgba(var(--acc-l-rgb), .25);
    /* aksen & status */
    --accent-bg: #E5E5EA;            /* hover kontrol sekunder */
    --error: #E9152D;
    --error-bg: rgba(233, 21, 45, .08);
}

:root[data-theme="dark"] {
    --text-primary: #ffffff;
    --text-secondary: #AEAEB2;
    --text-muted: rgba(235, 235, 245, .6);
    --title-fg: #ffffff;
    /* DITUKAR di gelap: latar lebih terang (#2B2B2B), kartu lebih gelap
       (#202020) — seperti login gelap Google; tangga charcoal ikut aplikasi
       (docs/APPLE_UI.md § keputusan 2). Input = "sumur" #1E1E1E Enpass. */
    --page-bg: #2B2B2B;
    --card-bg: #202020;
    --card-border: rgba(84, 84, 88, .6);
    --card-shadow: 0 1px 2px rgba(0, 0, 0, .28);
    --input-bg: #1E1E1E;
    --input-border: #4F4F4F;
    --btn-bg: rgb(var(--acc-d-rgb));
    --btn-bg-hover: var(--btn-d-hover);
    --btn-fg: #000000;
    --ring: rgb(var(--acc-d-rgb));
    --ring-soft: rgba(var(--acc-d-rgb), .35);
    --accent-bg: #414141;
    --error: #FF6165;
    --error-bg: rgba(255, 97, 101, .12);
}

/* Kalau tema belum dipatok atribut (a.html memaksanya, ini sekadar jaring
   pengaman), ikut preferensi sistem. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --text-primary: #ffffff; --text-secondary: #AEAEB2; --text-muted: rgba(235, 235, 245, .6);
        --title-fg: #ffffff; --page-bg: #2B2B2B; --card-bg: #202020;   /* ditukar, lihat blok [data-theme=dark] */
        --card-border: rgba(84, 84, 88, .6); --card-shadow: 0 1px 2px rgba(0, 0, 0, .28);
        --input-bg: #1E1E1E; --input-border: #4F4F4F;
        --btn-bg: rgb(var(--acc-d-rgb)); --btn-bg-hover: var(--btn-d-hover); --btn-fg: #000000;
        --ring: rgb(var(--acc-d-rgb)); --ring-soft: rgba(var(--acc-d-rgb), .35);
        --accent-bg: #414141; --error: #FF6165; --error-bg: rgba(255, 97, 101, .12);
    }
}

/* Aksen non-bawaan (data-accent dari localStorage aplikasi). Empat nilai per
   aksen: isian terang/gelap (accessible) + hover (terang = accessible x0.85,
   gelap = nilai default Apple) — docs/APPLE_UI.md. Indigo = bawaan :root. */
:root[data-accent="blue"] { --acc-l-rgb: 30, 110, 244; --acc-d-rgb: 92, 184, 255; --btn-l-hover: #1A5ECF; --btn-d-hover: #0091FF; }
:root[data-accent="purple"] { --acc-l-rgb: 176, 47, 194; --acc-d-rgb: 234, 141, 255; --btn-l-hover: #9628A5; --btn-d-hover: #DB34F2; }
:root[data-accent="pink"] { --acc-l-rgb: 231, 18, 77; --acc-d-rgb: 255, 138, 196; --btn-l-hover: #C40F41; --btn-d-hover: #FF375F; }
:root[data-accent="red"] { --acc-l-rgb: 233, 21, 45; --acc-d-rgb: 255, 97, 101; --btn-l-hover: #C61226; --btn-d-hover: #FF4245; }
:root[data-accent="orange"] { --acc-l-rgb: 197, 83, 0; --acc-d-rgb: 255, 160, 86; --btn-l-hover: #A74700; --btn-d-hover: #FF9230; }
:root[data-accent="yellow"] { --acc-l-rgb: 161, 106, 0; --acc-d-rgb: 254, 223, 67; --btn-l-hover: #895A00; --btn-d-hover: #FFD600; }
:root[data-accent="green"] { --acc-l-rgb: 0, 137, 50; --acc-d-rgb: 74, 217, 104; --btn-l-hover: #00742B; --btn-d-hover: #30D158; }
:root[data-accent="graphite"] { --acc-l-rgb: 108, 108, 112; --acc-d-rgb: 174, 174, 178; --btn-l-hover: #5C5C5F; --btn-d-hover: #8E8E93; }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-sans);
    background-color: var(--page-bg);
    color: var(--text-primary);
    /* svh, bukan vh: di ponsel bilah URL tidak menyisakan ekor kosong.
       login-01 shadcn juga memakai min-h-svh. */
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    line-height: 1.5;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color .3s ease, color .3s ease;
}

/* ── Kolom terpusat — proporsi ala Google sign-in, styling shadcn ──────── */
.login-container {
    width: 100%;
    /* 520px (keputusan owner 2026-07-21; sempat 512 -> 480 -> 520).
       Tak ada lagi batas terukur yang mengikat di sini: angka 512 dulu lahir
       saat nama PT tampil sebagai subjudul 16px (~370px) dan membungkus di
       bawah ~448px. Subjudul kini teks statis, dan nama PT turun ke footer
       pada 12px (~280px) — muat lega bahkan di 480px. Jadi lebar kartu murni
       soal proporsi, dan 520px adalah pilihan owner. Yang masih perlu diukur
       ulang hanyalah kalau kartu DISEMPITKAN jauh di bawah 448px. */
    max-width: 520px;
}

/* ── Logo institusi — DI DALAM kartu, rata kiri di atas judul ─────────── */
.logo-container {
    display: flex;
    justify-content: flex-start;   /* rata kiri, sejajar judul & label */
    margin-bottom: 24px;
}

.logo-container img {
    max-height: 64px;              /* tinggi dibatasi; lebar ikut rasio */
    width: auto;
    max-width: 100%;               /* jangan meluber dari kartu */
    display: block;
}

.institution-name,
.subtitle { display: none; }        /* sisa markup lama, tak dipakai */

/* ── Kartu (shadcn Card: rounded-xl border bg-card shadow-sm) ──────────── */
.card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: 40px;                  /* lega ala Google, bukan 24px */
    transition: background-color .3s ease, border-color .3s ease;
}

/* CardHeader — judul besar ala Google sign-in */
.card-title {
    font-size: 30px;                /* text-3xl; Google memakai heading besar */
    font-weight: 600;
    line-height: 1.2;
    color: var(--title-fg);         /* teks terkuat, seperti b.html */
    text-align: left;
}

.card-description {
    margin-top: 8px;
    margin-bottom: 32px;            /* jeda longgar sebelum form, seperti Google */
    /* 16px + teks primer (bukan 14px muted) — meniru "Use your Google Account"
       yang sengaja dibuat terbaca jelas, bukan keterangan samar. Hierarki tetap
       jaga: judul 30px/600 lebih kuat, ini 16px/400. */
    font-size: 16px;
    color: var(--text-primary);
    text-align: left;
}

/* ── Field: Label di atas Input (login-01: grid gap-3) ─────────────────── */
.input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;            /* gap-6 antar-field */
}

.label {
    font-size: 14px;
    font-weight: 500;               /* font-medium, seperti label b.html */
    color: var(--text-primary);
    line-height: 1;
}

.input {
    width: 100%;
    height: 42px;                   /* metrik input b.html */
    padding: 0 12px;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    background-color: var(--input-bg);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 16px;                /* 16px: cegah zoom otomatis iOS saat fokus */
    transition: border-color .15s ease, box-shadow .15s ease;
}

.input::placeholder { color: var(--text-muted); }

/* Terkunci = semiran datar (bahasa yang sama dgn aplikasi: enabled = sumur,
   readonly = fill quaternary), teks sekunder, border melunak. Menggantikan
   hack opacity .75 yang dulu ditulis per halaman admisi. */
.input[readonly],
.input[disabled] {
    background-color: rgba(116, 116, 128, .08);
    color: var(--text-secondary);
    border-color: var(--card-border);
    opacity: 1;
}

:root[data-theme="dark"] .input[readonly],
:root[data-theme="dark"] .input[disabled] {
    background-color: rgba(118, 118, 128, .12);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .input[readonly],
    :root:not([data-theme="light"]) .input[disabled] {
        background-color: rgba(118, 118, 128, .12);
    }
}

.input:focus,
.input:focus-visible {
    outline: none;
    border-color: var(--ring);
    box-shadow: 0 0 0 3px var(--ring-soft);
}

/* ── Password + tombol lihat/sembunyi ─────────────────────────────────── */
.password-container { position: relative; }

.password-container .input { padding-right: 44px; }

.password-icon {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    font-size: 14px;
}

.password-icon:hover { color: var(--text-primary); }

/* ── Langkah 2: baris "kembali ke username" ───────────────────────────── */
.step-container { transition: opacity .3s ease; }

.user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: color .2s ease;
}

.user-info:hover { color: var(--text-primary); }

.user-info i { font-size: 13px; }

#selected-username { font-weight: 500; }

/* ── Tombol utama — auto-width KANAN-BAWAH ala Google (bukan lebar-penuh) ─
   Link sekunder di kiri, tombol di kanan (justify-content:flex-end). Kalau ada
   link .forgot-password sebagai anak pertama, ia didorong ke kiri lewat
   margin-right:auto — pola "Create account ....... Next" milik Google, dan
   kebetulan sama dengan "Batalkan ....... Daftar" di form onboarding yang
   berbagi stylesheet ini. */
.button-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 32px;               /* jeda longgar sebelum tombol, seperti Google */
}

.button-group > .forgot-password:first-child { margin-right: auto; }

.button {
    min-width: 96px;                /* auto-width, tidak mengisi kartu */
    height: 42px;                   /* metrik tombol CRUD b.html */
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 6px;
    background-color: var(--btn-bg);
    color: var(--btn-fg);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease;
}

.button:hover { background-color: var(--btn-bg-hover); }

.button:focus-visible {
    outline: none;
    box-shadow: var(--card-shadow), 0 0 0 3px var(--ring-soft);
}

.button:active { transform: translateY(1px); }

.button:disabled { opacity: .5; pointer-events: none; }

/* ── Tautan sekunder (Register / Forgot / footer) ─────────────────────── */
.forgot-password {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    transition: color .2s ease;
}

.forgot-password:hover {
    color: var(--text-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.forgot-password:focus-visible {
    outline: none;
    border-radius: 4px;
    box-shadow: 0 0 0 3px var(--ring-soft);
}

/* ── Pesan error (#r) ─────────────────────────────────────────────────── */
.error-message {
    margin-bottom: 20px;
    padding: 10px 12px;
    border-radius: 6px;
    background-color: var(--error-bg);
    color: var(--error);
    font-size: 14px;
    display: none;
}

.error-message:not(:empty):not([style*="display: none"]) { display: block; }

/* ── Footer identitas — DI DALAM kartu, dipisah hairline dari form ─────── */
/* Turunan .footerNote di b.html/default.css: link tanpa garis bawah (termasuk
   saat hover — b.html sengaja tak menggarisbawahinya). Ukuran/bobot/warna
   dipatok owner: seluruh footer 12px --text-primary, "Powered by" 300,
   nama PT 300, "Gamelan ERP" 600.
   Susunannya SATU BARIS FLEX: blok dua baris teks di kiri, toggle tema di
   kanan. Dulu toggle ikut duduk di dalam baris "Powered by", dan itu keliru —
   tombol 32px menjadi butir tertinggi di baris itu, jadi tinggi barisnya
   melar dari 18px ke 32px dan menyisipkan ~7px kosong DI ANTARA nama PT dan
   "Powered by". Jaraknya jadi tak rata dan toggle-nya terbaca menggantung.
   Sekarang toggle sejajar terhadap SELURUH blok: dua baris 12px/2 = 48px,
   tombolnya 32px, ter-center vertikal terhadap blok itu. */
.footer {
    /* 72px. Dimulai dari 24px, yang kebetulan sama persis dengan jarak
       antar-field (.input-group margin-bottom) — footer jadi terbaca seperti
       baris form BERIKUTNYA. Dinaikkan bertahap atas permintaan owner
       (24 -> 40 -> 56 -> 72) sampai footer benar-benar lepas dari zona tombol.
       72px hampir dua kali padding kartu (40px): footer jelas milik tepi bawah
       kartu, bukan ekor form.
       Di ponsel angka ini tak terpakai: media query menggantinya dengan
       margin-top:auto yang mendorong footer ke dasar layar. */
    margin-top: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    /* warna dasar footer = kata "Powered by" saja. Nama PT, "Gamelan ERP",
       dan tautannya punya aturannya sendiri di --text-primary, jadi tidak
       ikut meredup. */
    color: var(--text-secondary);   /* #666666 terang; #a1a1a1 di mode gelap */
    font-size: 12px;
    font-weight: 300;               /* "Powered by" tipis; "Gamelan ERP" tetap 600 */
    /* 2 (=24px), naik bertahap dari 1,4 -> 1,5 -> 2 atas pilihan owner.
       Kedua baris kini berukuran DAN berbobot sama (12px/300), jadi tak ada
       beda bentuk yang memisahkan keduanya — hanya jarak yang bekerja, dan
       pada 1,4 celahnya tinggal ~8px (setipis jarak antarkata) sehingga
       keduanya menggumpal. Spasi ditaruh di line-height, BUKAN margin: margin
       membuat keduanya terbaca sebagai DUA butir terpisah, padahal ini satu
       blok identitas. */
    line-height: 2;
}

/* kolom kiri: nama PT + kredit. min-width 0 supaya nama PT terpanjang
   membungkus di dalam kolomnya, bukan mendorong toggle keluar kartu. */
.footer-lines {
    min-width: 0;
}

.footer strong {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.footer a,
.footer a:hover {
    color: var(--text-primary);
    text-decoration: none;
}

/* nama PT: seukuran & sebobot baris kredit di bawahnya — dibedakan oleh
   urutan, bukan oleh tebal huruf. Jarak keduanya diatur line-height .footer. */
.footer-pt {
    font-size: 12px;
    font-weight: 300;
    color: var(--text-primary);     /* #333333 terang; #fafafa di mode gelap */
}

/* ── Toggle tema — DI DALAM kartu, ujung kanan blok footer ─────────────
   Dulu tombol bulat ber-border yang `position: fixed` di pojok kanan atas
   layar. Dipindah 2026-07-21 karena di <=480px kartu jadi full-bleed dan
   --page-bg disamakan dengan --card-bg: yang tersisa dari tombol itu cuma
   cincin border + shadow di atas latar sewarna (terbaca sebagai stiker),
   dan pada top/right:16px ia jatuh tepat di pita logo.
   Di footer ia ikut terdorong ke dasar layar oleh .footer{margin-top:auto},
   jadi di ponsel justru mendarat di jangkauan jempol. Ini juga elemen
   `fixed` terakhir di halaman pre-session — hilang sudah urusan tumpang
   tindih dengan logo, banner hint desktop-site, dan overlay #loading. */
.theme-toggle {
    flex: none;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Lingkaran abu SELALU tampak (keputusan owner) — bukan cuma saat hover.
       Tanpa latar, tombol ini cuma ikon 18px menggantung di ujung baris teks
       dan tak terbaca sebagai sesuatu yang bisa diklik; di layar sentuh malah
       tak ada isyarat hover sama sekali. Tetap tanpa border & shadow: bentuk
       tombolnya dibawa oleh bidang warna, bukan garis. */
    border: 0;
    border-radius: 9999px;
    background-color: var(--accent-bg);
    color: var(--text-secondary);
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease;
}

/* Latar sudah terpakai di keadaan diam, jadi umpan balik hover pindah ke
   ikonnya: warnanya menguat ke teks primer. */
.theme-toggle:hover {
    color: var(--text-primary);
}

.theme-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ring-soft);
}

/* Ikon lucide "contrast", sama dengan toggle di bar b.html (default.css
   § .menu li.theme-toggle-menu). Ikon TUNGGAL: karena bentuknya simetris,
   separuhnya yang padat diputar 180° di mode gelap sebagai penanda tema
   aktif — tak perlu menukar kelas ikon dari JS seperti sun/moon dulu.
   Itu disengaja: penukaran lamanya hidup di js/login.js, berkas yang tak
   boleh disentuh (docs/LOGIN_PAGES.md § HARD RULES). */
.theme-toggle svg {
    width: 18px;
    height: 18px;
    transition: transform .3s ease;
}

:root[data-theme="dark"] .theme-toggle svg { transform: rotate(180deg); }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle svg { transform: rotate(180deg); }
}

/* label khusus pembaca layar — tombol ikon tanpa teks tidak terbaca */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Overlay loading (js/login.js menyalakan #loading.show) ────────────── */
#loading {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
}

#loading.show { display: block; }

.loading-spinner {
    position: absolute;
    inset: 0;
    background: url(loading.gif) center center no-repeat;
}

/* ── Responsif ────────────────────────────────────────────────────────── */
/* Ponsel: kartu MENGAMBIL ALIH seluruh layar — full-bleed, seakan tak ada
   container. Latar halaman disamakan dengan kartu supaya tak ada jahitan;
   border/radius/shadow dilepas dan kartu mengisi tinggi penuh (100svh). */
@media (max-width: 480px) {
    body {
        padding: 0;
        background-color: var(--card-bg);   /* = kartu, tak ada tepi terlihat */
        align-items: stretch;               /* kartu isi lebar penuh */
    }
    .login-container { max-width: none; }
    .card {
        width: 100%;
        min-height: 100svh;                 /* isi tinggi layar */
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 24px;
        /* kolom flex: isi (logo/judul/form) di atas, footer didorong ke DASAR
           layar lewat margin-top:auto — persis layout mobile Google. */
        display: flex;
        flex-direction: column;
    }
    /* margin-top:auto -> footer menempel dasar layar, bukan bawah form.
       flex-shrink:0 WAJIB ikut: .card kini kolom flex, dan tanpa ini footer
       ikut dimampatkan saat isi form melebihi tinggi layar. */
    .footer {
        margin-top: auto;
        flex-shrink: 0;
    }
    /* Isi (logo->form) DIPUSATKAN vertikal (owner 2026-08-07): auto di sini
       + auto milik .footer membagi rata ruang kosong. Form yang lebih tinggi
       dari layar membuat kedua auto mengempis ke 0 -> kembali top-aligned
       yang bisa digulir, jadi onboarding panjang tidak terpengaruh. */
    .logo-container {
        margin-top: auto;
    }
    /* sasaran sentuh diperbesar di layar sentuh — 32px terlalu kecil untuk
       jempol. Aman dilakukan sekarang: toggle sudah jadi saudara flex dari
       blok teks, jadi tombol yang lebih tinggi TIDAK lagi menyisipkan jarak
       di antara nama PT dan baris "Powered by" (dulu ia menaikkannya). */
    .theme-toggle {
        width: 40px;
        height: 40px;
    }
    .logo-container img { max-height: 52px; }
    .card-title { font-size: 24px; }        /* text-2xl; masih lega di layar penuh */
}

/* Aksesibilitas sistem — mengikuti default.css (docs/APPLE_UI.md) */
@media (prefers-contrast: more) {
    :root {
        --input-border: #6C6C70;
        --card-border: #AEAEB2;
        --text-muted: rgba(60, 60, 67, .75);
    }

    :root[data-theme="dark"] {
        --input-border: #7C7C80;
        --card-border: #7C7C80;
        --text-muted: rgba(235, 235, 245, .75);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* ── Picker aksen footer a.html — NONAKTIF (owner 2026-08-07: dibangun lalu
   dibatalkan hari yang sama; markup + JS-nya di-COMMENT di a.html, CSS di
   bawah SENGAJA dibiarkan hidup supaya menghidupkan lagi = melepas dua
   comment saja; tanpa markup, aturan ini tak berefek apa pun).
   Desainnya: swatch bulat --btn-bg (aksen aktif); panel membuka KE ATAS
   (footer di dasar layar); titik panel memakai nilai DEFAULT Apple yang
   pekat supaya warnanya dikenali — docs/APPLE_UI.md. */
.accent-wrap {
    position: relative;
    display: inline-flex;
    /* margin-left auto menyerap ruang space-between .footer, jadi picker
       menempel di kanan BERSAMA toggle tema — bukan menggantung di tengah;
       .footer sendiri tak boleh diubah (dipakai 10 halaman, 9 tanpa picker) */
    margin-left: auto;
    margin-right: 8px;
}

.accent-toggle {
    flex: none;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9999px;
    background-color: var(--accent-bg);
    cursor: pointer;
}

.accent-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--btn-bg);
    display: block;
}

.accent-panel {
    display: grid;
    grid-template-columns: repeat(3, 16px);
    gap: 10px;
    position: absolute;
    bottom: 100%;
    right: 0;
    z-index: 10;
    margin: 0 0 6px;
    padding: 10px;
    list-style: none;
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    box-shadow: var(--card-shadow);
}

.accent-panel[hidden] {
    display: none;
}

.accent-opt {
    display: block;
    width: 16px;
    height: 16px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .15);
    box-sizing: border-box;
    cursor: pointer;
}

:root:not([data-accent]) .accent-opt[data-accent="indigo"],
:root[data-accent="indigo"] .accent-opt[data-accent="indigo"],
:root[data-accent="blue"] .accent-opt[data-accent="blue"],
:root[data-accent="purple"] .accent-opt[data-accent="purple"],
:root[data-accent="pink"] .accent-opt[data-accent="pink"],
:root[data-accent="red"] .accent-opt[data-accent="red"],
:root[data-accent="orange"] .accent-opt[data-accent="orange"],
:root[data-accent="yellow"] .accent-opt[data-accent="yellow"],
:root[data-accent="green"] .accent-opt[data-accent="green"],
:root[data-accent="graphite"] .accent-opt[data-accent="graphite"] {
    box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 4px var(--text-secondary);
}

.accent-opt[data-accent="indigo"] { background-color: #6155F5; }
.accent-opt[data-accent="blue"] { background-color: #0088FF; }
.accent-opt[data-accent="purple"] { background-color: #CB30E0; }
.accent-opt[data-accent="pink"] { background-color: #FF2D55; }
.accent-opt[data-accent="red"] { background-color: #FF383C; }
.accent-opt[data-accent="orange"] { background-color: #FF8D28; }
.accent-opt[data-accent="yellow"] { background-color: #FFCC00; }
.accent-opt[data-accent="green"] { background-color: #34C759; }
.accent-opt[data-accent="graphite"] { background-color: #8E8E93; }

:root[data-theme="dark"] .accent-opt { border-color: rgba(255, 255, 255, .2); }
:root[data-theme="dark"] .accent-opt[data-accent="indigo"] { background-color: #6D7CFF; }
:root[data-theme="dark"] .accent-opt[data-accent="blue"] { background-color: #0091FF; }
:root[data-theme="dark"] .accent-opt[data-accent="purple"] { background-color: #DB34F2; }
:root[data-theme="dark"] .accent-opt[data-accent="pink"] { background-color: #FF375F; }
:root[data-theme="dark"] .accent-opt[data-accent="red"] { background-color: #FF4245; }
:root[data-theme="dark"] .accent-opt[data-accent="orange"] { background-color: #FF9230; }
:root[data-theme="dark"] .accent-opt[data-accent="yellow"] { background-color: #FFD600; }
:root[data-theme="dark"] .accent-opt[data-accent="green"] { background-color: #30D158; }

/* ---------------------------------------------------------------------------
   KERANGKA HALAMAN KATALOG (.kat-*) — dipakai BERSAMA oleh dua halaman
   publik: admisi/onboarding/Katalog (daftar jalur) dan .../Katalog/prodi
   (indeks program studi). Ditambahkan 2026-08-25.

   Kenapa di sini dan bukan di <style> masing-masing halaman: begitu halaman
   keduanya lahir, bar navigasi harus TERLIHAT SAMA di keduanya — kalau tidak,
   berpindah tab terasa seperti berpindah situs. Menyalin bloknya ke dua
   berkas menjamin keduanya melenceng pada suntingan berikutnya.

   Yang tinggal di <style> tiap halaman hanyalah yang benar-benar khas
   halaman itu: kartu jalur + toast di Katalog.html, kartu prodi + tab
   jenjang di KatalogProdi.html.

   body di login.css adalah wadah flex yang MEMUSATKAN kartu login; halaman
   katalog bukan kartu tunggal, jadi ia dikembalikan ke aliran biasa.
   --------------------------------------------------------------------------- */
body.kat-page { display: block; align-items: stretch; justify-content: flex-start;
                padding: 0; background: var(--page-bg); }

.kat-wrap { max-width: 1100px; margin: 0 auto; padding: 32px 20px 64px; }

/* Bar navigasi. Dua tautan saja — Poltekmuh (siakadcloud) memakai empat,
   tapi dua di antaranya (Beranda, Informasi) menunjuk halaman yang di sini
   BELUM ADA: "/" adalah layar masuk aplikasi, bukan beranda publik, dan
   pengumuman belum dibangun. Tautan yang menunjuk tempat salah lebih buruk
   daripada tautan yang tidak ada. */
.kat-nav { border-bottom: 1px solid var(--card-border); background: var(--card-bg); }
.kat-nav-in { max-width: 1100px; margin: 0 auto; padding: 0 20px;
              display: flex; align-items: center; gap: 20px; min-height: 56px;
              flex-wrap: wrap; }
.kat-brand { font-size: 14px; font-weight: 600; color: var(--title-fg);
             text-decoration: none; margin-right: auto; }
.kat-nav a.kat-tautan { font-size: 14px; color: var(--text-secondary);
                        text-decoration: none; padding: 18px 0; white-space: nowrap;
                        border-bottom: 2px solid transparent; margin-bottom: -1px; }
.kat-nav a.kat-tautan:hover { color: var(--text-primary); }
/* Penanda halaman aktif digambar oleh border-bottom, BUKAN warna saja:
   warna sendirian tidak terbaca oleh mata yang sulit membedakan warna. */
.kat-nav a.kat-tautan.kini { color: var(--text-primary); font-weight: 600;
                             border-bottom-color: var(--btn-bg); }
.kat-nav .kat-masuk { font-size: 13px; color: var(--text-secondary); white-space: nowrap; }

.kat-head { text-align: center; margin-bottom: 28px; }
.kat-head h1 { font-size: 26px; font-weight: 600; color: var(--title-fg); margin: 0 0 8px; }
.kat-head p { font-size: 14px; color: var(--text-secondary); margin: 0; }
.kat-sapa { font-size: 13px; color: var(--text-secondary); margin-top: 6px; }

.kat-kosong { background: var(--card-bg); border: 1px solid var(--card-border);
              border-radius: var(--card-radius); box-shadow: var(--card-shadow);
              padding: 48px 24px; text-align: center; }
.kat-kosong h2 { font-size: 17px; font-weight: 600; color: var(--title-fg); margin: 0 0 8px; }
.kat-kosong p { font-size: 14px; color: var(--text-secondary); margin: 0; line-height: 1.6; }
.kat-kosong-cta { margin-top: 20px; }
.kat-kosong-cta a { display: inline-block; text-decoration: none; font-size: 14px; font-weight: 500;
                    padding: 11px 24px; border-radius: 8px; background: var(--btn-bg); color: var(--btn-fg); }
.kat-kosong-cta a:hover { background: var(--btn-bg-hover); }

.kat-foot { display: flex; align-items: center; justify-content: center; gap: 12px;
            margin-top: 32px; font-size: 13px; color: var(--text-muted); }
.kat-foot a { color: var(--text-secondary); }

@media (max-width: 480px) {
  .kat-wrap { padding: 24px 14px 48px; }
  .kat-nav-in { gap: 14px; padding: 10px 14px; min-height: 0; }
  .kat-brand { margin-right: 0; flex: 1 1 100%; }
  .kat-nav a.kat-tautan { padding: 6px 0; }
}