/* =====================================================================
   Umayumcha HRIS · Sistem desain v2 ("Tinta navy, satu percik koral")
   Satu berkas: token (CSS custom properties) + komponen.
   Tanpa pustaka, tanpa sumber dari internet. Mobile dulu.
   Titik patah: 560px (form 2 kolom), 760px (menu di kepala), 1000px (tata letak 2 kolom), 1280px (kepala lengkap).
   Nama kelas lama dipertahankan. Kelas baru ditandai "baru" di catatan.
   ===================================================================== */

/* ---------- 1. Token non-warna ---------- */
:root {
  --huruf: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --huruf-judul: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --huruf-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --t-mini: 11px; --t-kecil: 12.5px; --t-sedang: 14px; --t-dasar: 15px; --t-besar: 17px;
  --t-judul-3: 18px; --t-judul-2: 21px; --t-judul-1: 26px; --t-angka: 30px; --t-raksasa: 46px;

  --j-1: 4px; --j-2: 8px; --j-3: 12px; --j-4: 16px; --j-5: 20px; --j-6: 24px; --j-8: 32px; --j-10: 40px; --j-12: 48px;

  /* Sudut lebih kecil dari v1: tabel dan isian tegas, kartu lembut, kapsul hanya untuk + Baru, profil, lencana. */
  --sudut-k: 6px; --sudut-s: 8px; --sudut: 10px; --sudut-b: 14px; --sudut-l: 20px; --bulat: 999px;

  --sentuh: 44px; --tinggi-tombol: 44px; --tinggi-isian: 44px; --tinggi-kepala: 64px;

  /* Gerak. Angka panel dari pengukuran apple.com, dihaluskan. */
  --cepat: 140ms; --sedang: 220ms; --lambat: 320ms;
  --lentur: cubic-bezier(.2, .8, .2, 1);
  --keluar: cubic-bezier(.4, 0, 1, 1);
  --pegas: cubic-bezier(.34, 1.56, .64, 1);
  --kurva-panel: cubic-bezier(.4, 0, .6, 1);
  --panel-jeda: 160ms;      /* jeda sorot sebelum panel terbuka */
  --panel-buka: 260ms;      /* tinggi panel tumbuh */
  --panel-ganti: 120ms;     /* pindah judul: tinggi + isi pudar */
  --panel-tutup: 240ms;

  --lebar-isi: 1240px;
}

/* ---------- 2. Token warna: terang ---------- */
:root, [data-tema="terang"] {
  --merek: #1f2f6b; --merek-tua: #172352; --merek-gelap: #0b1230; --merek-terang: #2b3f8c;
  --merek-muda: #e9ecf6; --merek-lembut: #f3f5fa;
  --aksen: #ec5f73; --aksen-teks: #c42f48; --aksen-muda: #fde9ec;

  --latar: #f5f6f8; --kartu: #ffffff; --kartu-2: #f8f9fb; --isian-latar: #ffffff;
  --teks: #141829; --redup: #5a6077; --samar: #656c86;
  --teks-menu: rgba(20, 24, 41, .8);
  --garis: #e5e7ee; --garis-kuat: #d4d8e3; --garis-isian: #aab0c3;
  --pada-merek: #ffffff; --pada-merek-redup: rgba(255, 255, 255, .78);

  --hijau: #126b33; --hijau-latar: #e0f5e7;
  --kuning: #8a5a00; --kuning-latar: #fff3cf; --kuning-garis: #e0a000;
  --merah: #c42b1c; --merah-latar: #fde5e2;
  --biru: #1f5fbf; --biru-latar: #e3edfc;
  --abu: #4b5065; --abu-latar: #eceef3;

  --kepala-latar: rgba(255, 255, 255, .96);
  --kepala-kaca: rgba(255, 255, 255, .78);
  --tirai-menu: rgba(232, 232, 237, .4);
  --tirai-padat: rgba(232, 232, 237, .86);
  --tirai: rgba(11, 18, 48, .42);

  --gradasi: linear-gradient(160deg, #2b3f8c 0%, #1f2f6b 45%, #0b1230 100%);
  --gradasi-sorot: linear-gradient(160deg, #34499c 0%, #233579 45%, #0e1638 100%);

  --bayang-1: 0 1px 2px rgba(20, 24, 41, .05);
  --bayang-2: 0 1px 2px rgba(20, 24, 41, .04), 0 2px 8px rgba(20, 24, 41, .04);
  --bayang-3: 0 4px 12px rgba(20, 24, 41, .08), 0 16px 40px rgba(20, 24, 41, .12);
  --bayang-4: 0 24px 64px rgba(11, 18, 48, .28);
  --bayang-merek: 0 6px 18px rgba(11, 18, 48, .24);
  color-scheme: light;
}

/* ---------- 3. Token warna: gelap ---------- */
[data-tema="gelap"] {
  --merek: #8ea2ff; --merek-tua: #b4c1ff; --merek-gelap: #080d24; --merek-terang: #34489a;
  --merek-muda: #1e2547; --merek-lembut: #161b31;
  --aksen: #ff8796; --aksen-teks: #ff8796; --aksen-muda: #3a1c24;
  --latar: #0c0e15; --kartu: #161924; --kartu-2: #1a1e2b; --isian-latar: #11141e;
  --teks: #eef0f8; --redup: #a3a9bf; --samar: #737a93;
  --teks-menu: rgba(238, 240, 248, .8);
  --garis: #262a3a; --garis-kuat: #343a50; --garis-isian: #4b526e;
  --pada-merek: #ffffff; --pada-merek-redup: rgba(255, 255, 255, .78);
  --hijau: #5fd68a; --hijau-latar: #12301e; --kuning: #ffd264; --kuning-latar: #382b07; --kuning-garis: #e8b23a;
  --merah: #ff7a6b; --merah-latar: #41160f; --biru: #7ab2ff; --biru-latar: #122848;
  --abu: #c9cde0; --abu-latar: #252939;
  --kepala-latar: rgba(22, 25, 36, .97);
  --kepala-kaca: rgba(22, 25, 36, .74);
  --tirai-menu: rgba(0, 0, 0, .4);
  --tirai-padat: rgba(6, 8, 14, .84);
  --tirai: rgba(3, 5, 12, .6);
  --gradasi: linear-gradient(160deg, #34489a 0%, #1f2f6b 45%, #080d24 100%);
  --gradasi-sorot: linear-gradient(160deg, #3d53ab 0%, #26387d 45%, #0b1230 100%);
  --bayang-1: 0 1px 2px rgba(0, 0, 0, .35);
  --bayang-2: 0 1px 2px rgba(0, 0, 0, .35);
  --bayang-3: 0 8px 28px rgba(0, 0, 0, .5);
  --bayang-4: 0 24px 64px rgba(0, 0, 0, .6);
  --bayang-merek: 0 6px 18px rgba(0, 0, 0, .45);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) {
    --merek: #8ea2ff; --merek-tua: #b4c1ff; --merek-gelap: #080d24; --merek-terang: #34489a;
    --merek-muda: #1e2547; --merek-lembut: #161b31;
    --aksen: #ff8796; --aksen-teks: #ff8796; --aksen-muda: #3a1c24;
    --latar: #0c0e15; --kartu: #161924; --kartu-2: #1a1e2b; --isian-latar: #11141e;
    --teks: #eef0f8; --redup: #a3a9bf; --samar: #737a93;
    --teks-menu: rgba(238, 240, 248, .8);
    --garis: #262a3a; --garis-kuat: #343a50; --garis-isian: #4b526e;
    --hijau: #5fd68a; --hijau-latar: #12301e; --kuning: #ffd264; --kuning-latar: #382b07; --kuning-garis: #e8b23a;
    --merah: #ff7a6b; --merah-latar: #41160f; --biru: #7ab2ff; --biru-latar: #122848;
    --abu: #c9cde0; --abu-latar: #252939;
    --kepala-latar: rgba(22, 25, 36, .97);
    --kepala-kaca: rgba(22, 25, 36, .74);
    --tirai-menu: rgba(0, 0, 0, .4);
    --tirai-padat: rgba(6, 8, 14, .84);
    --tirai: rgba(3, 5, 12, .6);
    --gradasi: linear-gradient(160deg, #34489a 0%, #1f2f6b 45%, #080d24 100%);
    --gradasi-sorot: linear-gradient(160deg, #3d53ab 0%, #26387d 45%, #0b1230 100%);
    --bayang-1: 0 1px 2px rgba(0, 0, 0, .35);
    --bayang-2: 0 1px 2px rgba(0, 0, 0, .35);
    --bayang-3: 0 8px 28px rgba(0, 0, 0, .5);
    --bayang-4: 0 24px 64px rgba(0, 0, 0, .6);
    --bayang-merek: 0 6px 18px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}

/* Permukaan merek (kartu sorot, tombol utama): status dipetakan ulang supaya terbaca di atas navy. */
.di-merek {
  --teks: #ffffff; --redup: rgba(255, 255, 255, .74); --samar: rgba(255, 255, 255, .5);
  --garis: rgba(255, 255, 255, .12); --garis-kuat: rgba(255, 255, 255, .22);
  --merek: #ffffff; --merek-muda: rgba(255, 255, 255, .12); --merek-lembut: rgba(255, 255, 255, .07);
  --kartu: rgba(255, 255, 255, .08); --kartu-2: rgba(255, 255, 255, .05);
  --hijau: #86e3a8; --hijau-latar: rgba(95, 214, 138, .18);
  --kuning: #ffd77a; --kuning-latar: rgba(255, 210, 100, .16); --kuning-garis: #ffd264;
  --merah: #ffa092; --merah-latar: rgba(255, 122, 107, .2);
  --biru: #a9caff; --biru-latar: rgba(122, 178, 255, .18);
  --abu: #d6d9e8; --abu-latar: rgba(255, 255, 255, .1);
  color: #fff;
}

/* ---------- 4. Dasar ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; background: var(--latar); }
body {
  margin: 0; min-height: 100dvh; background: var(--latar); color: var(--teks);
  font: var(--t-dasar)/1.5 var(--huruf);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overflow-x: clip;
}
button, input, textarea, select { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; letter-spacing: -.015em; font-family: var(--huruf-judul); }
p { margin: 0; }
a { color: var(--merek); }
a:hover { color: var(--merek-tua); }
::selection { background: var(--merek-muda); color: var(--teks); }
:focus-visible { outline: 2.5px solid var(--aksen); outline-offset: 2px; }
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.i-k { width: 16px; height: 16px; }
.i-b { width: 24px; height: 24px; }
.sprite { display: none; }

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 120ms var(--keluar) both pudar-keluar; }
::view-transition-new(root) { animation: var(--sedang) var(--lentur) both masuk; }
@keyframes pudar-keluar { to { opacity: 0; } }
@keyframes masuk { from { opacity: 0; transform: translateY(6px); } }
@keyframes letup { 0% { transform: scale(.85); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  @view-transition { navigation: none; }
}
/* Setelan "kurangi gerakan" di aplikasi (bukan hanya perangkat) */
[data-gerak="kurang"] *, [data-gerak="kurang"] *::before, [data-gerak="kurang"] *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0s !important; }

.sr-saja { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.redup { color: var(--redup); }
.kecil { font-size: var(--t-kecil); }
.tebal { font-weight: 650; }
.angka { font-variant-numeric: tabular-nums; }
.tumpuk { display: grid; gap: var(--j-4); }
.tumpuk-rapat { display: grid; gap: var(--j-2); }
.baris-flex { display: flex; flex-wrap: wrap; align-items: center; gap: var(--j-2); }
.dorong-kanan { margin-left: auto; }
[hidden] { display: none !important; }
@media (min-width: 760px) { .hanya-hp { display: none !important; } }
@media (max-width: 759.98px) { .hanya-laptop { display: none !important; } }

.lewati {
  position: fixed; left: var(--j-3); top: var(--j-3); z-index: 100; padding: var(--j-2) var(--j-4);
  background: var(--kartu); color: var(--teks); border-radius: var(--sudut-s); box-shadow: var(--bayang-3);
  transform: translateY(-160%); transition: transform var(--cepat) var(--lentur);
}
.lewati:focus { transform: none; }

/* ---------- 5. Kepala (header) ---------- */
.kepala {
  position: sticky; top: 0; z-index: 50;
  padding-top: env(safe-area-inset-top);
  background: var(--kepala-latar);
  box-shadow: 0 1px 0 var(--garis);
  transition: background var(--lambat) ease;
  view-transition-name: kepala;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .kepala { background: var(--kepala-kaca); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
}
/* Saat panel terbuka, kepala padat menyatu dengan panel (seperti apple.com). */
.kepala.panel-buka { background: var(--kartu); }
.kepala-dalam {
  max-width: var(--lebar-isi); height: var(--tinggi-kepala); margin: 0 auto;
  display: flex; align-items: center; gap: var(--j-2);
  padding: 0 max(var(--j-3), env(safe-area-inset-right)) 0 max(var(--j-4), env(safe-area-inset-left));
}
@media (min-width: 760px) { .kepala-dalam { gap: var(--j-5); padding: 0 var(--j-6); } }

.merek {
  flex: none; display: inline-flex; align-items: center; gap: 10px; height: var(--tinggi-kepala);
  color: var(--teks); text-decoration: none; border-radius: var(--sudut-s);
}
.merek:hover { color: var(--teks); }
.merek-ikon {
  position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: var(--gradasi); color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: transform var(--sedang) var(--pegas);
}
.merek-ikon::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 12px; height: 2.5px; border-radius: 2px; background: var(--aksen); transform: translateX(-50%); transition: width var(--sedang) var(--lentur); }
.merek:hover .merek-ikon { transform: rotate(-4deg) scale(1.04); }
.merek:hover .merek-ikon::after { width: 18px; }
.merek-teks { display: grid; line-height: 1.1; }
.merek-teks small { font-size: 10px; font-weight: 700; color: var(--aksen-teks); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.merek-teks b { font-size: 15px; font-weight: 750; letter-spacing: -.01em; white-space: nowrap; }

/* Menu utama: paling banyak 4 judul + Dasbor. Judul satu halaman = tautan biasa. */
.menu { display: none; flex: 1; min-width: 0; height: var(--tinggi-kepala); align-items: stretch; gap: 2px; margin: 0; }
@media (min-width: 760px) { .menu { display: flex; } }
.menu-grup { position: static; display: flex; }
.menu-grup > summary { list-style: none; }
.menu-grup > summary::-webkit-details-marker { display: none; }
.menu-judul {
  position: relative; display: flex; align-items: center; gap: 6px; height: var(--tinggi-kepala); padding: 0 12px;
  color: var(--teks-menu); font-size: var(--t-sedang); font-weight: 620; text-decoration: none; white-space: nowrap; cursor: pointer;
  border-radius: var(--sudut-s); -webkit-user-select: none; user-select: none;
  transition: color var(--lambat) ease;
}
.menu-judul:hover, .menu-grup.terbuka > .menu-judul, .menu-grup[open] > .menu-judul { color: var(--teks); }
.menu-judul:focus-visible { outline-offset: -10px; }
.menu-judul[aria-current="page"], .menu-grup.aktif > .menu-judul { color: var(--teks); }
.menu-judul[aria-current="page"]::after, .menu-grup.aktif > .menu-judul::after {
  content: ""; position: absolute; left: 50%; bottom: 13px; width: 14px; height: 2.5px; border-radius: 2px; background: var(--aksen); transform: translateX(-50%);
}
.menu .hitung, .tab .hitung, .hitung {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--bulat); display: inline-grid; place-items: center;
  background: var(--aksen-muda); color: var(--aksen-teks); font-size: var(--t-mini); font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1;
}
.hitung.merah { background: var(--merah); color: #fff; }

/* Panel menu (tanpa JS: details biasa; dengan JS: dipindah ke .panel-menu) */
.panel-isi { display: none; }
.menu-grup[open] > .panel-isi {
  display: block; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--kartu); box-shadow: 0 1px 0 var(--garis), var(--bayang-3);
}
.panel-dalam { max-width: var(--lebar-isi); margin: 0 auto; padding: 28px var(--j-6) 40px calc(var(--j-6) + 154px); display: flex; gap: 64px; }
.panel-kolom { flex: none; min-width: 0; }
.panel-tautan a { white-space: nowrap; }
.panel-kolom:first-child { min-width: 230px; }
.panel-label { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 600; color: var(--redup); }
.panel-tautan { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.panel-tautan a {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; color: var(--teks); text-decoration: none;
  font-size: 13.5px; font-weight: 600; border-radius: 4px; transition: color var(--lambat) ease;
}
.panel-tautan a:hover { color: var(--merek); }
.panel-tautan.besar a { font-size: 22px; font-weight: 700; letter-spacing: -.018em; line-height: 1.25; padding: 3px 0; font-family: var(--huruf-judul); }
.panel-tautan a .hitung { font-family: var(--huruf); letter-spacing: 0; }
.panel-tautan a[aria-current="page"] { color: var(--merek); }
.panel-tautan .ket { color: var(--redup); font-weight: 500; }

.js .menu-grup > .panel-isi { display: none; }
.panel-menu {
  position: absolute; left: 0; right: 0; top: 100%; height: 0; overflow: hidden;
  background: var(--kartu);
  transition: height var(--panel-buka) var(--kurva-panel);
}
.panel-menu.buka { box-shadow: 0 1px 0 var(--garis); }
.panel-menu .panel-isi {
  display: block; position: absolute; left: 0; right: 0; top: 0;
  opacity: 0; visibility: hidden; transition: opacity var(--panel-ganti) linear, visibility 0s linear var(--panel-ganti);
}
.panel-menu .panel-isi.aktif { position: relative; opacity: 1; visibility: visible; transition: opacity var(--panel-ganti) linear; }
.panel-menu .anim { opacity: 0; transform: translateY(-4px); transition: opacity var(--lambat) ease var(--tunda, 0s), transform var(--lambat) ease var(--tunda, 0s); }
.panel-menu.buka .panel-isi.aktif .anim { opacity: 1; transform: none; }
.panel-menu.ganti { transition-duration: var(--panel-ganti); }
.panel-menu.ganti .anim { transition: none; opacity: 1; transform: none; }
.panel-menu.tutup { transition: height var(--panel-tutup) var(--kurva-panel) var(--panel-ganti); }
.panel-menu.buka.tutup .panel-isi .anim { opacity: 0; transform: none; transition: opacity 180ms ease 0s; }

.tirai-menu {
  position: fixed; inset: 0; z-index: 40; background: var(--tirai-padat);
  opacity: 0; visibility: hidden; transition: opacity var(--lambat) ease, visibility 0s linear var(--lambat);
}
.blur-ok .tirai-menu { background: var(--tirai-menu); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.tirai-menu.buka { opacity: 1; visibility: visible; transition: opacity var(--lambat) ease 80ms; }
.tirai-menu.kecil { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Empat tombol kanan */
.kepala-kanan { flex: none; margin-left: auto; display: flex; align-items: center; gap: 6px; }
@media (min-width: 760px) { .kepala-kanan { gap: 8px; } }
.ikon-tombol {
  position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: transparent; color: var(--teks); cursor: pointer; text-decoration: none; list-style: none;
  transition: background var(--cepat), transform var(--cepat) var(--lentur), color var(--cepat);
}
.ikon-tombol::-webkit-details-marker { display: none; }
.ikon-tombol::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; }
.ikon-tombol:hover, .terbuka > .ikon-tombol, details:not(.siap)[open] > .ikon-tombol { background: var(--abu-latar); color: var(--teks); }
.ikon-tombol:active { transform: scale(.92); }
.lonceng .i { transform-origin: 50% 4px; }
.lonceng:hover .i { animation: ayun 600ms var(--lentur); }
@keyframes ayun { 20% { transform: rotate(14deg); } 45% { transform: rotate(-10deg); } 70% { transform: rotate(5deg); } }
.titik-angka {
  position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--bulat);
  display: grid; place-items: center; background: var(--aksen); color: #fff; font-size: var(--t-mini); font-weight: 750;
  border: 2px solid var(--kartu); line-height: 1; font-variant-numeric: tabular-nums;
}
[data-tema="gelap"] .titik-angka { color: #2a0d13; }
.titik-angka.baru { animation: letup 420ms var(--pegas); }

.baru-kapsul {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 11px; border-radius: var(--bulat);
  background: var(--merek); color: #fff; font-size: var(--t-sedang); font-weight: 680; border: 0; cursor: pointer; text-decoration: none; list-style: none; white-space: nowrap;
  transition: background var(--cepat), transform var(--cepat) var(--lentur), box-shadow var(--cepat);
}
[data-tema="gelap"] .baru-kapsul { color: #0b1230; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="terang"]) .baru-kapsul { color: #0b1230; } }
.baru-kapsul::-webkit-details-marker { display: none; }
.baru-kapsul:hover, .terbuka > .baru-kapsul { background: var(--merek-terang); color: #fff; }
[data-tema="gelap"] .baru-kapsul:hover, [data-tema="gelap"] .terbuka > .baru-kapsul { background: var(--merek-tua); color: #0b1230; }
.baru-kapsul:active { transform: scale(.95); }
.baru-kapsul .i { width: 18px; height: 18px; stroke-width: 2.4; }

.profil-kapsul {
  display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 10px 0 4px; border-radius: var(--bulat);
  border: 1px solid var(--garis); background: var(--kartu); cursor: pointer; list-style: none; max-width: 210px;
  transition: background var(--cepat), border-color var(--cepat), transform var(--cepat) var(--lentur);
}
.profil-kapsul::-webkit-details-marker { display: none; }
.profil-kapsul:hover, .terbuka > .profil-kapsul { background: var(--kartu-2); border-color: var(--garis-kuat); }
.profil-kapsul:active { transform: scale(.97); }
.profil-teks { display: grid; min-width: 0; line-height: 1.15; }
.profil-teks small { font-size: 11px; color: var(--redup); font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profil-teks b { font-size: 13px; font-weight: 680; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profil-kapsul > .i { width: 14px; height: 14px; color: var(--redup); transition: transform var(--sedang) var(--lentur); }
.terbuka > .profil-kapsul > .i { transform: rotate(180deg); }

.avatar {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12.5px; font-weight: 750; letter-spacing: .02em; background: var(--aksen-muda); color: var(--aksen-teks);
}
.avatar-merek { background: var(--gradasi); color: #fff; }
.avatar-b { width: 56px; height: 56px; font-size: 19px; }
.avatar-k { width: 28px; height: 28px; font-size: 11px; }

/* 760-1279: profil jadi lingkaran, + Baru jadi ikon */
@media (max-width: 1279.98px) {
  .profil-kapsul { padding: 0; border: 0; background: transparent; width: 44px; justify-content: center; }
  .profil-kapsul:hover, .terbuka > .profil-kapsul { background: transparent; }
  .profil-kapsul .avatar { transition: box-shadow var(--cepat); }
  .profil-kapsul:hover .avatar, .terbuka > .profil-kapsul .avatar { box-shadow: 0 0 0 3px var(--garis-kuat); }
  .profil-teks, .profil-kapsul > .i { display: none; }
  .baru-kapsul { width: 36px; padding: 0; justify-content: center; }
  .baru-kapsul > span { display: none; }
}
/* Di bawah 760: + Baru dan setelan pindah ke menu layar penuh */
@media (max-width: 759.98px) {
  .kepala-kanan > .menu-baru, .kepala-kanan > .menu-setelan { display: none; }
}

/* Panel kecil dari tombol kanan */
.menu-kecil { position: relative; }
.menu-kecil-isi {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 45; width: 300px; max-width: calc(100vw - 24px);
  background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--sudut-b); box-shadow: var(--bayang-3);
  padding: 6px; color: var(--teks);
}
.menu-kecil-isi.lebar { width: 380px; padding: 0; }
.js .menu-kecil-isi {
  visibility: hidden; clip-path: inset(0 0 100% 0 round var(--sudut-b));
  transition: clip-path var(--panel-tutup) var(--kurva-panel) var(--panel-ganti), visibility 0s linear calc(var(--panel-tutup) + var(--panel-ganti));
}
.js .menu-kecil.terbuka .menu-kecil-isi { visibility: visible; clip-path: inset(-20px -20px -40px -20px round var(--sudut-b)); transition: clip-path var(--panel-buka) var(--kurva-panel); }
.js .menu-kecil-isi .anim { opacity: 0; transform: translateY(-4px); transition: opacity 180ms ease, transform 180ms ease; }
.js .menu-kecil.terbuka .menu-kecil-isi .anim { opacity: 1; transform: none; transition: opacity var(--lambat) ease var(--tunda, 0s), transform var(--lambat) ease var(--tunda, 0s); }
@media (max-width: 759.98px) {
  .menu-kecil-isi, .menu-kecil-isi.lebar { position: fixed; left: 8px; right: 8px; width: auto; max-width: none; top: calc(var(--tinggi-kepala) + env(safe-area-inset-top) + 6px); max-height: calc(100dvh - 90px); overflow: auto; }
}

.mk-kepala { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 8px; }
.mk-kepala h2 { font-size: var(--t-dasar); font-weight: 720; }
.mk-garis { height: 1px; margin: 6px 8px; background: var(--garis); border: 0; }
.mk-label { display: block; padding: 8px 10px 4px; font-size: var(--t-mini); font-weight: 650; color: var(--redup); }
.mk-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: var(--sudut-s);
  background: transparent; color: var(--teks); text-decoration: none; font-size: var(--t-sedang); font-weight: 560; cursor: pointer; text-align: left;
  transition: background var(--cepat), color var(--lambat);
}
.mk-item:hover { background: var(--abu-latar); color: var(--teks); }
.mk-item > .i { color: var(--redup); }
.mk-item .mk-ringkas { margin-left: auto; font-size: var(--t-kecil); color: var(--redup); font-weight: 550; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mk-item .mk-ringkas.kuning { color: var(--kuning); }
.mk-item.keluar { color: var(--merah); }
.mk-item.keluar > .i { color: var(--merah); }
.mk-item.keluar:hover { background: var(--merah-latar); }
.mk-profil { display: flex; align-items: center; gap: 12px; padding: 12px 10px 10px; }
.mk-profil b { display: block; font-size: var(--t-dasar); font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.mk-profil span { font-size: var(--t-kecil); color: var(--redup); }
.mk-rahasia { font: inherit; border: 0; background: var(--abu-latar); color: var(--teks); border-radius: var(--bulat); padding: 2px 9px; font-size: var(--t-kecil); font-weight: 650; cursor: pointer; font-variant-numeric: tabular-nums; }
.mk-rahasia[aria-pressed="false"] { letter-spacing: .12em; }

/* Notifikasi */
.notif-daftar { list-style: none; margin: 0; padding: 0 6px 6px; max-height: min(420px, calc(100dvh - 200px)); overflow: auto; }
.notif-item { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 2px 12px; padding: 10px 26px 10px 10px; border-radius: var(--sudut-s); color: var(--teks); text-decoration: none; transition: background var(--cepat); }
.notif-item:hover { background: var(--abu-latar); color: var(--teks); }
.notif-item .ikon-notif { grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--merek-muda); color: var(--merek); }
.notif-item .ikon-notif .i { width: 16px; height: 16px; }
.notif-item .ikon-notif.merah { background: var(--merah-latar); color: var(--merah); }
.notif-item .ikon-notif.hijau { background: var(--hijau-latar); color: var(--hijau); }
.notif-item .ikon-notif.kuning { background: var(--kuning-latar); color: var(--kuning); }
.notif-item b { font-size: var(--t-sedang); font-weight: 560; line-height: 1.35; }
.notif-item.belum b { font-weight: 700; }
.notif-item time { font-size: var(--t-kecil); color: var(--redup); }
.notif-item.belum::after { content: ""; position: absolute; right: 10px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--aksen); }
.notif-kaki { display: flex; border-top: 1px solid var(--garis); }
.notif-kaki a { flex: 1; display: grid; place-items: center; min-height: 44px; font-size: var(--t-sedang); font-weight: 650; text-decoration: none; color: var(--merek); }
.notif-kaki a:hover { background: var(--kartu-2); }

/* Setelan tampilan */
.segmen-tema { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 2px 6px 6px; padding: 3px; border-radius: 10px; background: var(--abu-latar); }
.segmen-tema button { display: grid; justify-items: center; gap: 2px; padding: 7px 4px; border: 0; border-radius: 8px; background: transparent; color: var(--redup); font-size: var(--t-kecil); font-weight: 620; cursor: pointer; transition: background var(--cepat), color var(--cepat), box-shadow var(--cepat); }
.segmen-tema button:hover { color: var(--teks); }
.segmen-tema button[aria-pressed="true"] { background: var(--kartu); color: var(--teks); box-shadow: var(--bayang-2); }
.sakelar { position: relative; flex: none; width: 38px; height: 22px; border-radius: var(--bulat); background: var(--garis-kuat); transition: background var(--sedang); margin-left: auto; }
.sakelar::after { content: ""; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform var(--sedang) var(--lentur); }
[aria-checked="true"] > .sakelar { background: var(--hijau); }
[aria-checked="true"] > .sakelar::after { transform: translateX(16px); }
/* Tombol sakelar mandiri (dipakai di Profil, Notifikasi, Pengaturan OJT) */
.sakelar-tombol { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px 0 8px; border: 0; border-radius: 10px; background: transparent; color: var(--teks); font: 620 13px var(--huruf); cursor: pointer; -webkit-appearance: none; appearance: none; }
.sakelar-tombol:hover { background: var(--abu-latar); }
.sakelar-tombol .sakelar { margin: 0; }
.sakelar-tombol:focus-visible { outline: 2.5px solid var(--aksen); outline-offset: 2px; }
.sakelar-tombol:active .sakelar::after { width: 22px; }
[aria-checked="true"].sakelar-tombol:active .sakelar::after { transform: translateX(12px); }

/* Menu layar penuh (HP, di bawah 760) */
.menu-hp { display: block; }
@media (min-width: 760px) { .menu-hp { display: none; } }
.menu-hp > summary { list-style: none; }
.menu-hp > summary::-webkit-details-marker { display: none; }
.garis-menu { position: relative; width: 18px; height: 12px; }
.garis-menu::before, .garis-menu::after { content: ""; position: absolute; left: 0; right: 0; height: 1.8px; border-radius: 2px; background: currentColor; transition: transform 240ms var(--lentur), top 240ms var(--lentur); }
.garis-menu::before { top: 2px; }
.garis-menu::after { top: 8.5px; }
.menu-hp.terbuka .garis-menu::before, .menu-hp[open]:not(.siap) .garis-menu::before { top: 5.2px; transform: rotate(45deg); }
.menu-hp.terbuka .garis-menu::after, .menu-hp[open]:not(.siap) .garis-menu::after { top: 5.2px; transform: rotate(-45deg); }
.menu-hp-isi {
  position: fixed; left: 0; right: 0; bottom: 0; top: calc(var(--tinggi-kepala) + env(safe-area-inset-top)); z-index: 45;
  overflow: auto; overscroll-behavior: contain; background: var(--kartu);
  padding: 8px max(var(--j-5), env(safe-area-inset-left)) calc(var(--j-8) + env(safe-area-inset-bottom));
}
.js .menu-hp-isi { visibility: hidden; opacity: 0; transition: opacity 200ms ease, visibility 0s linear 200ms; }
.js .menu-hp.terbuka .menu-hp-isi { visibility: visible; opacity: 1; transition: opacity 240ms ease; }
.mh-layar { display: grid; }
.js .mh-layar { transition: opacity 240ms ease, transform 240ms var(--lentur); }
.js .mh-layar.sub { display: none; }
.js .mh-layar.sub.aktif { display: grid; }
.js .menu-hp.di-sub .mh-layar.utama { display: none; }
.mh-layar.masuk-samping { animation: geser-masuk 240ms var(--lentur) both; }
@keyframes geser-masuk { from { opacity: 0; transform: translateX(8px); } }
.mh-layar.masuk-kiri { animation: geser-kiri 240ms var(--lentur) both; }
@keyframes geser-kiri { from { opacity: 0; transform: translateX(-8px); } }
.js .menu-hp-isi .anim { opacity: 0; transform: translateY(-8px); transition: opacity var(--lambat) ease var(--tunda, 0s), transform var(--lambat) ease var(--tunda, 0s); }
.js .menu-hp.terbuka .menu-hp-isi .anim { opacity: 1; transform: none; }
.mh-judul {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 52px; padding: 0;
  border: 0; background: none; color: var(--teks); text-decoration: none; font: 700 24px/1.2 var(--huruf-judul); letter-spacing: -.02em; text-align: left; cursor: pointer;
}
.mh-judul .i { color: var(--samar); }
.mh-judul:hover { color: var(--merek); }
.mh-judul .hitung { font-family: var(--huruf); letter-spacing: 0; margin-left: 8px; }
.mh-judul > span { display: inline-flex; align-items: center; }
.mh-kembali { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--redup); font-size: var(--t-sedang); font-weight: 620; cursor: pointer; }
.mh-sub-judul { font: 700 13px var(--huruf); color: var(--redup); margin: 18px 0 6px; letter-spacing: 0; }
.mh-tautan { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; color: var(--teks); text-decoration: none; font-size: 19px; font-weight: 650; letter-spacing: -.01em; }
.mh-tautan:hover { color: var(--merek); }
.mh-kecil { display: flex; align-items: center; gap: 12px; min-height: 48px; color: var(--teks); text-decoration: none; font-size: var(--t-dasar); font-weight: 600; border: 0; background: none; padding: 0; width: 100%; cursor: pointer; text-align: left; }
.mh-kecil .i { color: var(--redup); }
.mh-pisah { height: 1px; background: var(--garis); margin: 16px 0 6px; }

/* ---------- 6. Isi halaman ---------- */
.isi {
  max-width: var(--lebar-isi); margin: 0 auto;
  padding: var(--j-5) max(var(--j-4), env(safe-area-inset-right)) calc(var(--j-12) + env(safe-area-inset-bottom)) max(var(--j-4), env(safe-area-inset-left));
}
@media (min-width: 760px) { .isi { padding: var(--j-6) var(--j-6) var(--j-12); } }
.halaman > * { animation: masuk var(--sedang) var(--lentur) both; }
.halaman > :nth-child(2) { animation-delay: 30ms; }
.halaman > :nth-child(3) { animation-delay: 60ms; }
.halaman > :nth-child(n+4) { animation-delay: 90ms; }

.kepala-halaman { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--j-3) var(--j-4); margin-bottom: var(--j-5); }
.kepala-halaman > div { min-width: 0; }
.judul-halaman { font-size: var(--t-judul-1); font-weight: 750; letter-spacing: -.025em; line-height: 1.2; text-wrap: balance; }
.sub-halaman { margin-top: 2px; color: var(--redup); text-wrap: pretty; }
@media (min-width: 760px) { .judul-halaman { font-size: 28px; } }
.judul-bagian { display: flex; align-items: center; justify-content: space-between; gap: var(--j-3); font-size: var(--t-dasar); font-weight: 720; margin: var(--j-6) 0 var(--j-3); }
.label-kecil { font-size: var(--t-mini); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--redup); }

.dua-kolom { display: grid; gap: var(--j-4); }
@media (min-width: 1000px) {
  .dua-kolom { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--j-5); align-items: start; }
  .lengket { position: sticky; top: 88px; }
}

/* ---------- 7. Tautan ---------- */
.tautan {
  color: var(--merek); font-weight: 620; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
  text-decoration-thickness: 1.5px; border-radius: 4px; transition: text-decoration-color var(--cepat), color var(--cepat);
}
.tautan:hover { color: var(--merek-tua); text-decoration-color: currentColor; }
.tautan .i { display: inline; vertical-align: -3px; width: 15px; height: 15px; }

/* ---------- 8. Tombol ---------- */
.tombol {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tinggi-tombol); padding: 0 16px; border-radius: 10px;
  border: 1px solid var(--garis-kuat); background: var(--kartu); color: var(--teks);
  font-weight: 650; font-size: var(--t-sedang); line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer;
  -webkit-user-select: none; user-select: none;
  transition: background var(--cepat), border-color var(--cepat), color var(--cepat), box-shadow var(--cepat), transform var(--cepat) var(--lentur);
}
@media (min-width: 760px) { .tombol { min-height: 38px; } }
.tombol:hover { background: var(--kartu-2); border-color: color-mix(in srgb, var(--teks) 25%, var(--garis-kuat)); color: var(--teks); }
.tombol:active { transform: scale(.97); }
.tombol-utama { background: var(--merek); border-color: transparent; color: #fff; }
.tombol-utama:hover { background: var(--merek-terang); border-color: transparent; color: #fff; }
[data-tema="gelap"] .tombol-utama { color: #0b1230; }
[data-tema="gelap"] .tombol-utama:hover { background: var(--merek-tua); color: #0b1230; }
.di-merek .tombol-utama, .di-merek .tombol-utama:hover { background: #fff; color: #1f2f6b; }
.tombol-bahaya { color: var(--merah); }
.tombol-bahaya:hover { background: var(--merah-latar); border-color: var(--merah); color: var(--merah); }
.tombol-bahaya-penuh { background: var(--merah); border-color: transparent; color: #fff; }
.tombol-bahaya-penuh:hover { background: #a92415; border-color: transparent; color: #fff; }
.tombol-hantu { border-color: transparent; background: transparent; color: var(--merek); }
.tombol-hantu:hover { background: var(--merek-muda); border-color: transparent; color: var(--merek); }
.tombol-kecil { min-height: 32px; padding: 0 11px; font-size: 13px; border-radius: 8px; gap: 6px; }
@media (min-width: 760px) { .tombol-kecil { min-height: 30px; } }
.tombol-kecil::before { content: ""; position: absolute; inset: -6px 0; }
.tombol-ikon { width: var(--tinggi-tombol); padding: 0; }
.tombol-blok { width: 100%; }
.tombol[disabled], .tombol[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.riak { position: absolute; z-index: -1; border-radius: 50%; transform: scale(0); background: currentColor; opacity: .18; pointer-events: none; animation: riak 520ms var(--lentur) forwards; }
@keyframes riak { to { transform: scale(2.6); opacity: 0; } }
.grup-tombol { display: flex; flex-wrap: wrap; gap: var(--j-2); }

/* ---------- 9. Lencana status & urgensi ---------- */
.lencana {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; min-height: 22px; border-radius: var(--bulat);
  font-size: 12px; font-weight: 650; line-height: 1.3; white-space: nowrap; border: 1px solid transparent;
}
.lencana::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lencana.ikon::before, .lencana.polos::before { display: none; }
.lencana .i { width: 12px; height: 12px; stroke-width: 2.6; }
.l-hijau { background: var(--hijau-latar); color: var(--hijau); }
.l-kuning { background: var(--kuning-latar); color: var(--kuning); }
.l-merah { background: var(--merah-latar); color: var(--merah); }
.l-biru { background: var(--biru-latar); color: var(--biru); }
.l-abu { background: var(--abu-latar); color: var(--abu); }
.l-merek { background: var(--merek-muda); color: var(--merek); }
.l-aksen { background: var(--aksen-muda); color: var(--aksen-teks); }
.l-tunda { background: transparent; color: var(--kuning); border: 1.5px dashed var(--kuning-garis); }
.l-batal { background: var(--abu-latar); color: var(--abu); text-decoration: line-through; text-decoration-thickness: 1.5px; }
/* "Ditolak" bergaris tepi dengan ikon silang; "Hari ini" penuh dengan ikon jam. Sama merah, bentuk beda. */
.l-tolak { background: transparent; color: var(--merah); border-color: currentColor; }
.l-hari-ini { background: var(--merah); color: #fff; }
[data-tema="gelap"] .l-hari-ini { background: #e0412f; }
.urgensi { display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0 5px; border-radius: 5px; font-size: var(--t-mini); font-weight: 800; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.urgensi.p1 { background: var(--merah); color: #fff; }
[data-tema="gelap"] .urgensi.p1 { background: #e0412f; }
.urgensi.p2 { background: var(--kuning-latar); color: var(--kuning); box-shadow: inset 0 0 0 1.5px var(--kuning-garis); }
.urgensi.p3 { background: var(--biru-latar); color: var(--biru); }
.urgensi.p4 { background: var(--abu-latar); color: var(--abu); }
.baris-lencana { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Titik progres (baru): lowongan terisi, tahap pengajuan */
.titik-progres { display: inline-flex; align-items: center; gap: 3px; }
.titik-progres i { display: block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--abu-latar); box-shadow: inset 0 0 0 1px var(--garis-kuat); }
.titik-progres i.penuh { background: var(--hijau); box-shadow: none; }
.titik-progres i.jalan { background: var(--biru); box-shadow: none; }
.titik-progres i.tunggu { background: var(--kuning-garis); box-shadow: none; }
.langkah-titik { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.langkah-titik li { display: grid; gap: 6px; font-size: var(--t-mini); font-weight: 600; color: var(--redup); }
.langkah-titik li::before { content: ""; height: 4px; border-radius: 4px; background: var(--garis); }
.langkah-titik li.selesai { color: var(--teks); }
.langkah-titik li.selesai::before { background: var(--hijau); }
.langkah-titik li.sekarang { color: var(--teks); }
.langkah-titik li.sekarang::before { background: linear-gradient(90deg, var(--biru) 50%, var(--garis) 50%); }

/* ---------- 10. Kartu ---------- */
.kartu { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--sudut-b); min-width: 0; }
.kartu-isi { padding: var(--j-4); }
@media (min-width: 760px) { .kartu-isi { padding: var(--j-5); } }
.kartu-kepala { display: flex; align-items: center; justify-content: space-between; gap: var(--j-3); padding: 14px var(--j-4) 10px; }
@media (min-width: 760px) { .kartu-kepala { padding: 16px var(--j-5) 10px; } }
.kartu-kepala h2, .kartu-kepala h3 { font-size: var(--t-dasar); font-weight: 720; display: flex; align-items: center; gap: var(--j-2); }
.kartu-kepala .tautan { font-size: 13px; white-space: nowrap; }
.kartu-kaki { display: flex; flex-wrap: wrap; gap: var(--j-2); justify-content: flex-end; padding: var(--j-3) var(--j-4); border-top: 1px solid var(--garis); }
.kartu-tautan { display: block; color: inherit; text-decoration: none; transition: border-color var(--cepat), background var(--cepat); }
.kartu-tautan:hover { color: inherit; border-color: var(--garis-kuat); background: var(--kartu-2); }
.kartu-tautan:active { transform: scale(.99); }

/* Kartu sorot (baru): satu per dasbor, paling menonjol */
.sorot { position: relative; border-radius: var(--sudut-l); background: var(--gradasi); overflow: hidden; isolation: isolate; }
.sorot::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 60% at 0% 0%, rgba(255, 255, 255, .1), transparent 60%); pointer-events: none; }
.sorot-kepala { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--j-3); padding: 18px var(--j-5) 6px; }
@media (min-width: 760px) { .sorot-kepala { padding: 22px var(--j-6) 8px; } }
.sorot-kepala h2 { font-size: var(--t-judul-3); font-weight: 720; letter-spacing: -.015em; }
.sorot-kepala p { font-size: 13px; color: var(--redup); margin-top: 2px; }

/* Angka kartu (lama, dipertahankan untuk pendukung) */
.angka-kartu {
  position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 14px 16px; border-radius: var(--sudut-b);
  background: var(--kartu); border: 1px solid var(--garis); color: inherit; text-decoration: none;
  transition: border-color var(--cepat), background var(--cepat);
}
.angka-kartu:hover { color: inherit; border-color: var(--garis-kuat); background: var(--kartu-2); }
.angka-kartu .label { font-size: var(--t-kecil); color: var(--redup); font-weight: 620; }
.angka-kartu .nilai { font-size: 28px; font-weight: 760; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; font-family: var(--huruf-judul); }
.angka-kartu .ket { font-size: var(--t-kecil); color: var(--redup); }

/* ---------- 11. Baris daftar ---------- */
.daftar { list-style: none; margin: 0; padding: 0; }
.daftar > li + li { border-top: 1px solid var(--garis); }
.baris {
  position: relative; display: flex; align-items: center; gap: var(--j-3); min-height: 52px; padding: 10px var(--j-4);
  color: inherit; text-decoration: none; transition: background var(--cepat);
}
@media (min-width: 760px) { .baris { padding: 9px var(--j-5); } }
.baris:hover { background: var(--kartu-2); color: inherit; }
.baris:active { background: var(--merek-lembut); }
.baris:focus-visible { outline-offset: -3px; border-radius: var(--sudut-s); }
.baris .ikon-bulat { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--merek-muda); color: var(--merek); }
.baris .ikon-bulat .i { width: 16px; height: 16px; }
.baris.lewat .ikon-bulat { background: var(--merah-latar); color: var(--merah); }
.baris .teks { flex: 1; min-width: 0; display: grid; gap: 1px; }
.baris .judul { font-weight: 640; font-size: var(--t-sedang); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.baris .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: var(--t-kecil); color: var(--redup); }
.baris .meta .pisah { width: 3px; height: 3px; border-radius: 50%; background: var(--samar); }
.baris .panah { flex: none; width: 16px; height: 16px; color: var(--samar); transition: transform var(--cepat) var(--lentur), color var(--cepat); }
.baris:hover .panah { transform: translateX(3px); color: var(--merek); }
.baris .ujung { flex: none; display: flex; align-items: center; gap: 8px; font-size: var(--t-kecil); color: var(--redup); font-variant-numeric: tabular-nums; }
/* Tugas: bentuk penanda urgensi di kiri (bukan hanya warna) */
.baris .tanda-urgensi { flex: none; }

/* ---------- 12. Chip, tab, segmen ---------- */
.chip-grup { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { position: relative; display: inline-flex; cursor: pointer; }
.chip > input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip > span, a.chip, button.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: var(--bulat);
  border: 1px solid var(--garis-kuat); background: var(--kartu); color: var(--teks); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--cepat), border-color var(--cepat), color var(--cepat), transform var(--cepat) var(--lentur);
}
.chip i { font-style: normal; color: var(--redup); font-weight: 650; font-variant-numeric: tabular-nums; }
.chip:hover > span, a.chip:hover, button.chip:hover { border-color: var(--teks); color: var(--teks); }
.chip > input:checked + span, a.chip[aria-pressed="true"], button.chip[aria-pressed="true"] { background: var(--teks); border-color: var(--teks); color: var(--kartu); }
.chip > input:checked + span i, a.chip[aria-pressed="true"] i, button.chip[aria-pressed="true"] i { color: inherit; opacity: .75; }
.chip > input:focus-visible + span { outline: 2.5px solid var(--aksen); outline-offset: 2px; }

.grup-segmen { display: inline-flex; padding: 3px; gap: 2px; background: var(--abu-latar); border-radius: 10px; }
.grup-segmen a, .grup-segmen button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent;
  color: var(--redup); font-weight: 620; font-size: 13px; cursor: pointer; text-decoration: none; transition: background var(--cepat), color var(--cepat), box-shadow var(--cepat);
}
.grup-segmen a:hover, .grup-segmen button:hover { color: var(--teks); }
.grup-segmen [aria-pressed="true"], .grup-segmen [aria-current="page"] { background: var(--kartu); color: var(--teks); box-shadow: var(--bayang-2); }

/* ---------- 13. Pesan kilat ---------- */
.kilat-wadah { position: fixed; z-index: 60; left: 50%; top: calc(12px + env(safe-area-inset-top)); transform: translateX(-50%); width: min(calc(100% - 24px), 420px); display: grid; gap: 8px; pointer-events: none; }
@media (min-width: 760px) { .kilat-wadah { top: 76px; } }
.kilat {
  pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 12px; border-radius: 12px;
  background: #141829; color: #fff; font-weight: 600; font-size: var(--t-sedang); box-shadow: 0 14px 36px rgba(5, 8, 20, .3);
  animation: kilat-masuk var(--lambat) var(--lentur) both;
}
[data-tema="gelap"] .kilat { background: #262b42; }
.kilat.keluar { animation: kilat-keluar 180ms var(--keluar) both; }
@keyframes kilat-masuk { from { opacity: 0; transform: translateY(-12px) scale(.97); } }
@keyframes kilat-keluar { to { opacity: 0; transform: translateY(-8px) scale(.98); } }
.kilat .tanda { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #2fbf6b; color: #fff; }
.kilat .tanda .i { width: 14px; height: 14px; stroke-width: 3; }
.kilat-galat .tanda { background: #ff6b5b; }
.kilat-info .tanda { background: #5b7cff; }
.kilat .teks-kilat { flex: 1; min-width: 0; }
.kilat .tutup-kilat { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: rgba(255, 255, 255, .7); cursor: pointer; }
.kilat .tutup-kilat:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* ---------- 14. Keadaan kosong ---------- */
.kosong { display: grid; justify-items: center; text-align: center; gap: 6px; padding: var(--j-8) var(--j-5); }
.kosong .maskot { width: 96px; height: auto; margin-bottom: 4px; }
.kosong h3 { font-size: var(--t-besar); font-weight: 720; }
.kosong p { max-width: 320px; color: var(--redup); font-size: var(--t-sedang); text-wrap: pretty; }

/* ---------- 15. Dasbor (baru) ---------- */
.sapa-blok { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 20px; margin: 4px 0 20px; }
.sapa-blok > div { min-width: 0; flex: 1 1 480px; }
.sapa-blok > .ajak-notif { flex: none; }
.sapa { font-size: var(--t-judul-1); font-weight: 760; letter-spacing: -.028em; line-height: 1.15; font-family: var(--huruf-judul); }
@media (min-width: 760px) { .sapa { font-size: 30px; } }
.sapa-sub { margin-top: 4px; color: var(--redup); font-size: var(--t-dasar); text-wrap: pretty; }
.sapa-sub a { color: var(--teks); font-weight: 680; text-decoration: underline; text-decoration-color: var(--garis-kuat); text-underline-offset: 3px; text-decoration-thickness: 1.5px; transition: text-decoration-color var(--cepat); }
.sapa-sub a:hover { text-decoration-color: var(--aksen); }

/* Ajakan notifikasi HP: kecil, tidak merah */
.ajak-notif { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 12px; border-radius: var(--bulat); background: var(--kartu); border: 1px solid var(--garis); font-size: 13px; color: var(--redup); }
.ajak-notif .i { width: 15px; height: 15px; }
.ajak-notif button { font: inherit; border: 0; background: transparent; cursor: pointer; border-radius: var(--bulat); }
.ajak-notif .ya { padding: 4px 10px; color: var(--merek); font-weight: 650; }
.ajak-notif .ya:hover { background: var(--merek-muda); }
.ajak-notif .tidak { display: grid; place-items: center; width: 26px; height: 26px; color: var(--redup); }
.ajak-notif .tidak:hover { background: var(--abu-latar); }
.ajak-notif.keluar { animation: banner-keluar var(--sedang) var(--keluar) forwards; }
@keyframes banner-keluar { to { opacity: 0; transform: scale(.96); } }

/* Jadwal hari ini per jam */
.lini { list-style: none; margin: 0; padding: 4px 0 8px; }
.lini-baris {
  position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 44px; padding: 5px var(--j-5); color: inherit; text-decoration: none; transition: background var(--cepat);
}
@media (min-width: 760px) { .lini-baris { padding: 5px var(--j-6); grid-template-columns: 56px minmax(0, 1fr) auto; } }
a.lini-baris:hover { background: var(--merek-lembut); color: inherit; }
.lini-jam { font-size: 13.5px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--redup); }
.lini-nama { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.lini-nama b { flex: 0 1 auto; font-weight: 650; font-size: var(--t-sedang); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lini-nama span { font-size: var(--t-kecil); color: var(--redup); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 0; min-width: 40px; }
.lini-baris.lewat .lini-nama b { font-weight: 560; color: var(--redup); }
.lini-baris.berikut { background: var(--kartu); }
.lini-baris.berikut .lini-jam { color: var(--teks); }
.lini-baris.berikut .lini-nama b { font-size: var(--t-dasar); }
.lini-sekarang { position: relative; height: 0; margin: 2px var(--j-5); border-top: 1.5px solid var(--aksen); }
@media (min-width: 760px) { .lini-sekarang { margin: 2px var(--j-6); } }
.lini-sekarang::before { content: ""; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--aksen); }
.lini-sekarang span { position: absolute; right: 0; top: -9px; padding: 0 6px; border-radius: 4px; background: var(--aksen); color: #fff; font-size: 10.5px; font-weight: 750; line-height: 16px; font-variant-numeric: tabular-nums; }
[data-tema="gelap"] .lini-sekarang span { color: #2a0d13; }
.lini-lagi { display: block; padding: 8px var(--j-6) 12px; font-size: 13px; font-weight: 650; color: var(--redup); text-decoration: none; }
.lini-lagi:hover { color: var(--teks); }

/* Hitungan besar (angka utama di kartu pendukung) */
.angka-besar { font: 760 40px/1 var(--huruf-judul); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.angka-besar small { font: 600 var(--t-sedang) var(--huruf); letter-spacing: 0; color: var(--redup); margin-left: 6px; }

/* Batch per hari */
.batch { display: grid; gap: 2px; }
.batch-hari { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px var(--j-5) 4px; font-size: 13px; font-weight: 700; }
.batch-hari .lencana { font-size: 11.5px; }

/* Mata uang tersembunyi */
.rahasia { display: inline-flex; align-items: center; gap: 10px; border: 0; padding: 0; background: none; color: inherit; cursor: pointer; text-align: left; font: inherit; }
.rahasia .nominal { font: 760 34px/1.05 var(--huruf-judul); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rahasia[aria-pressed="false"] .nominal { letter-spacing: .06em; }
.rahasia .ketuk { font-size: var(--t-kecil); color: var(--redup); display: inline-flex; align-items: center; gap: 4px; }
.rahasia .nominal.ganti { animation: ganti-angka 300ms var(--lentur); }
@keyframes ganti-angka { 0% { transform: translateY(-25%); opacity: .2; } 100% { transform: none; opacity: 1; } }

/* Hari masuk sebagai titik per tanggal */
.titik-hari { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 5px; }
.titik-hari i { aspect-ratio: 1; border-radius: 50%; background: var(--abu-latar); }
.titik-hari i.masuk { background: var(--hijau); }
.titik-hari i.izin { background: transparent; box-shadow: inset 0 0 0 2px var(--kuning-garis); }
.titik-hari i.libur { background: transparent; box-shadow: inset 0 0 0 1px var(--garis-kuat); }
.titik-hari i.ini { box-shadow: 0 0 0 2px var(--kartu), 0 0 0 3.5px var(--aksen); }
.di-merek .titik-hari i.ini { box-shadow: 0 0 0 2px #1f2f6b, 0 0 0 3.5px var(--aksen); }
.legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--t-kecil); color: var(--redup); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.legenda i { width: 9px; height: 9px; border-radius: 50%; background: var(--hijau); }
.legenda i.izin { background: transparent; box-shadow: inset 0 0 0 2px var(--kuning-garis); }
.legenda i.libur { background: transparent; box-shadow: inset 0 0 0 1px var(--garis-kuat); }

/* Bar aksi menempel di bawah (HP) */
.bar-bawah {
  position: sticky; bottom: 0; z-index: 20; display: flex; gap: 10px;
  margin: var(--j-5) calc(-1 * var(--j-4)) calc(-1 * var(--j-12) - env(safe-area-inset-bottom));
  padding: 10px var(--j-4) calc(10px + env(safe-area-inset-bottom));
  background: var(--kepala-kaca); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); box-shadow: 0 -1px 0 var(--garis);
}
.bar-bawah .tombol { flex: 1; min-height: 50px; font-size: var(--t-dasar); border-radius: 12px; }

html:not(.js) .mh-kembali { display: none; }

/* ---------- 16. Susunan dasbor (baru) ---------- */
.susun { display: grid; gap: var(--j-4); margin-bottom: var(--j-4); }
@media (min-width: 1000px) {
  .susun.utama-kanan { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); align-items: start; gap: var(--j-5); margin-bottom: var(--j-5); }
  .susun.tiga { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: var(--j-5); margin-bottom: var(--j-5); }
  .susun.hari { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--j-4); margin-bottom: var(--j-5); }
}
.tumpuk-kanan { display: grid; gap: var(--j-4); align-content: start; min-width: 0; }
@media (min-width: 1000px) { .tumpuk-kanan { gap: var(--j-5); } }

/* Baris jadwal di kartu sorot */
.lini-baris .aksi-lini { display: flex; align-items: center; gap: 8px; }
.lini-baris a.lini-nama { color: inherit; text-decoration: none; border-radius: 4px; }
.lini-baris a.lini-nama:hover b { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.di-merek .lini-baris.berikut { background: rgba(255, 255, 255, .1); box-shadow: inset 3px 0 0 var(--aksen); }
.di-merek .lini-baris.berikut .lini-nama span { color: rgba(255, 255, 255, .82); }
.lini-baris .menit { font-size: var(--t-kecil); font-weight: 700; color: var(--aksen); white-space: nowrap; }
.di-merek .lini-baris .menit { color: #ffb3bd; }
.di-merek .tombol { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: #fff; }
.di-merek .tombol:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .32); color: #fff; }
.di-merek .tombol-utama, .di-merek .tombol-utama:hover { background: #fff; border-color: transparent; color: #1f2f6b; }
.di-merek .tombol-hantu { background: transparent; border-color: transparent; }
.di-merek .lencana.l-kuning { color: #ffe199; }
.di-merek a { color: #fff; }
.di-merek .tautan { color: #fff; }
.di-merek .tautan:hover { color: #fff; }
.sorot .kaki-sorot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--j-6) 16px; font-size: 13px; color: var(--redup); border-top: 1px solid var(--garis); flex-wrap: wrap; }

/* Lowongan per urgensi */
.lowongan-baris { display: grid; grid-template-columns: 30px minmax(0, 1fr) 16px; gap: 3px 12px; align-items: center; padding: 10px var(--j-4); color: inherit; text-decoration: none; transition: background var(--cepat); }
.lowongan-baris:hover { background: var(--kartu-2); color: inherit; }
.lowongan-baris .lw-nama { font-weight: 640; font-size: var(--t-sedang); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lowongan-baris .lw-nama small { font-weight: 500; color: var(--redup); font-size: var(--t-kecil); margin-left: 6px; }
.lowongan-baris .lw-info { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; font-size: var(--t-kecil); color: var(--redup); font-variant-numeric: tabular-nums; }
.lowongan-baris .lw-info .lama { color: var(--merah); font-weight: 650; }
.lowongan-baris .panah { width: 16px; height: 16px; color: var(--samar); grid-row: 1 / span 2; grid-column: 3; transition: transform var(--cepat) var(--lentur), color var(--cepat); }
.lowongan-baris:hover .panah { transform: translateX(3px); color: var(--merek); }
.lowongan-baris .urgensi { grid-row: 1 / span 2; }
@media (min-width: 1000px) {
  .lowongan-baris { grid-template-columns: 30px minmax(0, 1fr) 150px 96px 78px 16px; padding: 9px var(--j-5); }
  .lowongan-baris .lw-info { display: contents; }
  .lowongan-baris .urgensi, .lowongan-baris .panah { grid-row: auto; grid-column: auto; }
  .lowongan-baris .lw-info > span { white-space: nowrap; }
  .lowongan-baris .lw-info > span:last-child { text-align: right; }
}
.terisi { display: inline-flex; align-items: center; gap: 8px; }

/* Strip hari (batch per hari) */
.hari-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.hari-chip { position: relative; display: grid; gap: 1px; padding: 12px 12px 10px; border-radius: var(--sudut); border: 1px solid var(--garis); background: var(--kartu); color: inherit; text-decoration: none; overflow: hidden; transition: border-color var(--cepat), background var(--cepat); }
.hari-chip:hover { border-color: var(--garis-kuat); background: var(--kartu-2); color: inherit; }
.hari-chip::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--hijau); }
.hari-chip.ini::before { background: var(--merah); }
.hari-chip.besok::before { background: var(--kuning-garis); }
.hari-chip.kosong-hari::before { background: var(--garis); }
.hari-chip small { font-size: var(--t-kecil); color: var(--redup); font-weight: 600; }
.hari-chip b { font: 760 24px/1.1 var(--huruf-judul); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hari-chip span { font-size: var(--t-kecil); color: var(--redup); }
@media (max-width: 759.98px) { .hari-strip { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 30%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } }

/* Berikutnya (kartu sorot besar) */
.berikutnya { display: grid; gap: 0; }
@media (min-width: 1000px) { .berikutnya { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.berikutnya-utama { padding: 24px var(--j-6) 24px; display: grid; gap: 4px; align-content: start; }
.berikutnya-utama .label-kecil { color: #ffb3bd; letter-spacing: .08em; }
.berikutnya-utama .jam-besar { font: 780 64px/1 var(--huruf-judul); letter-spacing: -.045em; font-variant-numeric: tabular-nums; margin-top: 10px; }
.berikutnya-utama h2 { font-size: 26px; font-weight: 740; letter-spacing: -.025em; margin-top: 8px; overflow-wrap: anywhere; }
.berikutnya-utama p { color: var(--redup); font-size: var(--t-sedang); }
.berikutnya-utama .grup-tombol { margin-top: 18px; }
.berikutnya-daftar { border-top: 1px solid var(--garis); padding: 14px 0 10px; }
@media (min-width: 1000px) { .berikutnya-daftar { border-top: 0; border-left: 1px solid var(--garis); } }
.berikutnya-daftar .lini-baris { min-height: 34px; padding-top: 2px; padding-bottom: 2px; }
.berikutnya-daftar .lini-nama b { font-size: 13.5px; }

/* Kalimat ringkas (susunan C) */
.ringkas-kalimat { font: 720 30px/1.3 var(--huruf-judul); letter-spacing: -.03em; max-width: 920px; text-wrap: balance; color: var(--redup); margin: 4px 0 22px; }
@media (min-width: 760px) { .ringkas-kalimat { font-size: 38px; } }
.ringkas-kalimat a { color: var(--teks); text-decoration: underline; text-decoration-color: var(--garis-kuat); text-decoration-thickness: 3px; text-underline-offset: 6px; transition: text-decoration-color var(--cepat); }
.ringkas-kalimat a:hover { text-decoration-color: var(--aksen); }
.ringkas-kalimat .tanggal { display: block; font: 600 var(--t-dasar) var(--huruf); letter-spacing: 0; color: var(--redup); margin-bottom: 8px; }

.kolom-hari { min-width: 0; }
.kolom-hari .kartu-kepala { padding-bottom: 6px; }

/* Crew */
.crew { max-width: 560px; margin: 0 auto; }
.pita-sambut { position: relative; height: 168px; margin: calc(-1 * var(--j-5)) calc(-1 * var(--j-4)) 0; padding: 22px var(--j-5) 0; background: #a9c9ec url(aset/sambut-pagi.jpg) center 30% / cover no-repeat; color: #0b1230; overflow: hidden; }
.pita-sambut::after { content: ""; position: absolute; inset: auto 0 0; height: 96px; background: linear-gradient(to bottom, transparent, var(--latar)); }
@media (min-width: 760px) { .pita-sambut { margin: calc(-1 * var(--j-6)) 0 0; border-radius: 0 0 var(--sudut-l) var(--sudut-l); } .pita-sambut::after { display: none; } }
.pita-sambut .sapa { position: relative; z-index: 1; color: #0b1230; }
.pita-sambut p { position: relative; z-index: 1; color: #2a3350; font-weight: 560; margin-top: 2px; }
.pita-sambut + .sorot { margin-top: -44px; }
@media (min-width: 760px) { .pita-sambut + .sorot { margin-top: -40px; margin-left: var(--j-4); margin-right: var(--j-4); } }

.uang-kartu { display: grid; gap: 14px; padding: 18px var(--j-5) 18px; }
.uang-kartu .atas { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.uang-kartu .atas span { font-size: 13px; color: var(--redup); font-weight: 600; }
.uang-kartu .rahasia { min-height: 56px; }
.uang-kartu .bawah { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--garis); }
.segera { display: grid; gap: 6px; padding: 18px var(--j-5) 20px; }
.segera b { font: 720 var(--t-judul-3) var(--huruf-judul); letter-spacing: -.015em; }
.segera p { color: var(--redup); font-size: var(--t-sedang); max-width: 400px; }

.pengajuan { display: grid; gap: 8px; padding: 12px var(--j-4) 14px; }
.pengajuan + .pengajuan { border-top: 1px solid var(--garis); }
.pengajuan .atas { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pengajuan .atas b { font-weight: 650; font-size: var(--t-sedang); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pengajuan .atas span { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pengajuan .ket { font-size: var(--t-kecil); color: var(--redup); }

.ubin-grup { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ubin { display: grid; gap: 14px; align-content: space-between; min-height: 92px; padding: 14px; border-radius: var(--sudut-b); background: var(--kartu); border: 1px solid var(--garis); color: var(--teks); text-decoration: none; font-weight: 650; font-size: var(--t-dasar); transition: background var(--cepat), border-color var(--cepat), transform var(--cepat) var(--lentur); }
.ubin:hover { background: var(--kartu-2); border-color: var(--garis-kuat); color: var(--teks); }
.ubin:active { transform: scale(.97); }
.ubin .i { width: 22px; height: 22px; color: var(--merek); }
.ubin small { display: block; font-size: var(--t-kecil); color: var(--redup); font-weight: 550; margin-top: 2px; }

.rincian-uang { margin: 0; display: grid; }
.rincian-uang > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--garis); font-size: var(--t-sedang); }
.rincian-uang > div:last-child { border-bottom: 0; }
.rincian-uang dt { color: var(--redup); }
.rincian-uang dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; }

.kalender { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.kalender .kal-nama { font-size: var(--t-mini); font-weight: 650; color: var(--redup); text-align: center; padding-bottom: 4px; }
.kal-hari { aspect-ratio: 1; display: grid; place-items: center; border-radius: 10px; font-size: var(--t-sedang); font-weight: 620; font-variant-numeric: tabular-nums; color: var(--redup); }
.kal-hari.masuk { background: var(--hijau-latar); color: var(--hijau); }
.kal-hari.izin { box-shadow: inset 0 0 0 1.5px var(--kuning-garis); color: var(--kuning); border-radius: 50%; }
.kal-hari.libur { color: var(--samar); text-decoration: line-through; text-decoration-color: var(--garis-kuat); }
.kal-hari.ini { box-shadow: 0 0 0 2px var(--kartu), 0 0 0 4px var(--aksen); }
.kal-hari.nanti { color: var(--teks); opacity: .55; }

.strip-uang { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px var(--j-5); }
.strip-uang .rahasia .nominal { font-size: 24px; }
.pita-sambut[data-waktu="siang"] { background-image: url(aset/sambut-siang.jpg); }
.pita-sambut[data-waktu="sore"] { background-image: url(aset/sambut-sore.jpg); color: #fff; }
.pita-sambut[data-waktu="sore"] .sapa, .pita-sambut[data-waktu="malam"] .sapa { color: #fff; }
.pita-sambut[data-waktu="sore"] p, .pita-sambut[data-waktu="malam"] p { color: rgba(255, 255, 255, .86); }
.pita-sambut[data-waktu="malam"] { background-image: url(aset/sambut-malam.jpg); }

.uang-tengah { justify-items: center; text-align: center; padding-top: 26px; padding-bottom: 22px; }
.uang-tengah > span, .uang-tengah .ketuk { white-space: nowrap; }
.uang-tengah .rahasia { display: grid; justify-items: center; gap: 6px; text-align: center; }
.uang-tengah .rahasia .nominal { font-size: 42px; }
.strip-uang > div { display: grid; gap: 2px; min-width: 0; }
.strip-uang span, .strip-uang .ketuk { white-space: nowrap; }
.kartu-kepala > span { white-space: nowrap; }

/* Panel menu besar tidak dipakai di bawah 760 px (diganti menu layar penuh) */
@media (max-width: 759.98px) { .panel-menu { display: none; } }