@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&display=swap');
/* =========================================================
   Tema terang bersama — halaman pegawai & halaman masuk (absensi)
   Dimuat SETELAH <style> bawaan tiap halaman sehingga menimpa gaya lama:
   - hanya mode terang (mode malam & tombolnya dihilangkan)
   - tampilan modern: warna solid, kartu putih, bayangan halus, tanpa gradasi
   - animasi minimal (hanya transisi warna)
   ========================================================= */

:root, :root.light{
  --bg:#f5f6f8; --bg-soft:#f1f3f5; --card:#ffffff; --text:#111827; --muted:#5b6474;
  --brand:#0f5a3f; --brand-2:#0f5a3f; --accent:#0f5a3f; --brand-soft:#e9f4ef;
  --ok:#16794a; --warn:#b25e00; --danger:#c0352b; --info:#2257b8;
  --ring:0 0 0 4px rgba(15,90,63,.14); --radius:14px;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 4px 12px rgba(16,24,40,.05);
  --glass:#ffffff; --glass-br:#e7e9ee;
  --soft-1:#f9fafb; --soft-2:#f9fafb; --stroke:#e7e9ee;
  color-scheme:light;
}

/* ---------- Dasar ---------- */
body{
  background:var(--bg) !important;
  color:var(--text);
  font-family:'Sora',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
#modeBtn, .theme-toggle{display:none !important}   /* mode malam ditiadakan */

/* ---------- Bilah atas & laci menu ---------- */
.topbar{background:#fff !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;border-bottom:1px solid var(--glass-br);box-shadow:none}
.brand{font-weight:700;letter-spacing:-.01em}
.brand i{color:var(--brand)}
.search input{background:#f5f6f8;border-color:var(--glass-br)}
.search input:focus{box-shadow:var(--ring);border-color:var(--brand)}
.user-chip{background:#fff !important;border:1px solid var(--glass-br)}
.mode-toggle, .hamburger{background:#fff;border:1px solid var(--glass-br);color:var(--text)}
.drawer{background:#fff}
.drawer-link{background:#fff;border:1px solid var(--glass-br);color:var(--text);transition:background-color .12s,border-color .12s}
.drawer-link:hover{background:var(--brand-soft);border-color:#cfe5da}
/* Tombol keluar (memakai kelas drawer-link + latar merah inline) */
form[action*="logout"] .drawer-link{background:var(--danger) !important;color:#fff !important;border-color:var(--danger) !important;border-radius:10px;font-weight:600}
form[action*="logout"] .drawer-link:hover{background:#a52b23 !important}

/* ---------- Panel / kartu ---------- */
.panel, .card, .hero{border-color:#eceef2}
.panel{background:#fff;border:1px solid #eceef2;border-radius:var(--radius);box-shadow:var(--shadow)}
.panel-header{border-bottom-color:#f0f1f4}
.panel-title{font-weight:600;letter-spacing:-.01em}
.card::after{display:none !important}

/* ---------- Kartu statistik: putih, angka berwarna ---------- */
.stat{
  background:#fff !important;color:var(--text) !important;border:1px solid #eceef2;
  border-radius:14px;box-shadow:var(--shadow);padding:18px 18px 16px;
}
.stat .icon{
  position:static;transform:none;opacity:1;font-size:1.05rem;margin-bottom:10px;
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:#e8effc;color:var(--info);
}
.stat{display:flex;flex-direction:column;align-items:flex-start}
.stat .icon{order:-1}
.stat .label{color:var(--muted);font-weight:500;opacity:1;font-size:.88rem;line-height:1.35}
.stat .value{color:var(--info);font-weight:700;letter-spacing:-.02em}
.stat.ok .icon{background:#e5f5ec;color:var(--ok)}  .stat.ok .value{color:var(--ok)}
.stat.warn .icon{background:#fff3e0;color:var(--warn)} .stat.warn .value{color:var(--warn)}
.card-stat{background:#fff !important;color:var(--text) !important;border:1px solid #eceef2;box-shadow:var(--shadow)}

/* ---------- Tombol ---------- */
.btn{transition:background-color .12s,border-color .12s,color .12s}
.btn.primary, .cta-btn, .mini-filter .btn, .modal-form button, .acc-btn{background:var(--brand) !important;color:#fff !important;border-color:var(--brand) !important;box-shadow:none !important}
.btn.primary:hover, .cta-btn:hover, .mini-filter .btn:hover, .modal-form button:hover{background:#0c4c35 !important}
.btn.success{background:var(--ok) !important;color:#fff !important;box-shadow:none !important}
.btn.danger{background:var(--danger) !important;color:#fff !important;box-shadow:none !important}
.btn.ghost{background:#fff !important;color:var(--text) !important;border:1px solid #d5d9e0 !important;box-shadow:0 1px 2px rgba(16,24,40,.05) !important}
.btn.ghost:hover{background:#f5f6f8 !important}
.cta .icon{background:var(--brand-soft) !important;color:var(--brand) !important}

/* ---------- Menu ---------- */
.menu-card{transition:border-color .12s,box-shadow .12s}
.menu-card:hover{transform:none !important;border-color:#cfe5da !important;box-shadow:var(--shadow) !important}
.menu-icon{background:var(--brand-soft) !important;color:var(--brand) !important;border:0 !important}

/* ---------- Komponen kecil (tanpa gradasi) ---------- */
.pill{background:var(--brand-soft) !important;color:var(--brand) !important;border:0 !important;font-weight:600}
.pill.good{background:#e5f5ec !important;color:#16794a !important}
.pill.bad{background:#fdecea !important;color:#c0352b !important}
.pill.warn{background:#fff3e0 !important;color:#b25e00 !important}
.pill.points{background:#fbf3e1 !important;color:#8a6512 !important}
.kpi .pill{background:#f9fafb !important;color:var(--text)}
.progress > div, .progress > i, .pw-meter > div{background:var(--brand) !important}
.spark-wrap{background:#fff !important}
.badge, .tag, .skill, .item, .field, .no-bagian, .mini-top, .berkas-ada, .bukti-link{background-image:none !important}
.alert{background-image:none !important}
.tab{background-image:none !important}
.jump.active, .tab.active{background:var(--brand) !important;color:#fff !important}
thead th{background:#f9fafb !important;color:#4b5563 !important}

/* ---------- Kalender ---------- */
.cal-btn, .cal-dow, .cal-day, .note-item{background:#fff !important}
.cal-dow{background:#f9fafb !important}
.cal-day.is-today{box-shadow:0 0 0 2px var(--brand) inset !important}
.legend-dot.blue{background:var(--brand)}

/* ---------- Peringkat (leaderboard) ---------- */
li.rank-item, .rank-item{background:#fff !important}
.rank-item.top1{background:#fdf6e3 !important;border-color:#f1dca6 !important}
.rank-item.top2{background:#f4f5f7 !important;border-color:#dfe2e7 !important}
.rank-item.top3{background:#fbf0e6 !important;border-color:#ecd2bb !important}
.rank-item.bottom{background:#fdecea !important}

/* ---------- Isian ---------- */
input:focus, select:focus, textarea:focus{outline:none}
.field{background:#fff}

/* ---------- Animasi dibuat minimal ---------- */
.menu-card, .btn, .drawer-link, .cal-btn{transform:none}

/* =========================================================
   KERANGKA BARU HALAMAN PEGAWAI (body.ux) — mobile-first
   ========================================================= */
body.ux .topbar, body.ux .drawer, body.ux .drawer-overlay, body.ux .cta-bar{display:none !important}
body.ux{padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))}
@media (min-width:901px){ body.ux{padding-bottom:0} }

/* ---------- Header ---------- */
.ux-top{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid #e7e9ee}
.ux-top-in{max-width:1180px;margin:0 auto;height:62px;padding:0 16px;display:flex;align-items:center;gap:14px}
.ux-brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;flex:none}
.ux-brand img{height:40px;width:auto;object-fit:contain}
.ux-brand span{display:flex;flex-direction:column;line-height:1.15}
.ux-brand strong{font-size:1rem;font-weight:700;letter-spacing:-.01em}
.ux-brand small{font-size:.74rem;color:var(--muted)}
.ux-judul-m{display:none;font-weight:700;font-size:1.05rem;letter-spacing:-.01em}
.ux-desk-nav{display:flex;gap:4px;margin-left:auto}
.ux-desk-nav a{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:10px;color:#4b5563;text-decoration:none;font-weight:500;font-size:.92rem;transition:background-color .12s,color .12s}
.ux-desk-nav a:hover{background:#f5f6f8;color:var(--text)}
.ux-desk-nav a.aktif{background:var(--brand-soft);color:var(--brand);font-weight:600}
.ux-akun{position:relative;flex:none}
.ux-akun summary{list-style:none;cursor:pointer;display:block;border-radius:50%}
.ux-akun summary::-webkit-details-marker{display:none}
.ux-akun summary img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 0 0 1px #e7e9ee}
.ux-akun-pop{position:absolute;right:0;top:calc(100% + 10px);width:250px;background:#fff;border:1px solid #e7e9ee;border-radius:14px;box-shadow:0 16px 40px rgba(16,24,40,.14);padding:6px;z-index:60}
.ux-akun-head{display:flex;gap:10px;align-items:center;padding:10px;border-bottom:1px solid #f0f1f4;margin-bottom:4px}
.ux-akun-head img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.ux-akun-head strong{display:block;font-size:.92rem}
.ux-akun-head small{color:var(--muted);font-size:.78rem}
.ux-akun-pop a, .ux-akun-pop button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:10px;color:var(--text);text-decoration:none;font:inherit;font-weight:500;font-size:.92rem;background:none;border:0;cursor:pointer;text-align:left}
.ux-akun-pop a:hover, .ux-akun-pop button:hover{background:#f5f6f8}
.ux-akun-pop form{margin:0}
.ux-akun-pop button{color:var(--danger)}
@media (max-width:900px){
  .ux-desk-nav{display:none}
  .ux-brand span{display:none}
  .ux-judul-m{display:block;flex:1}
}

/* ---------- Navigasi bawah (mobile) ---------- */
.ux-bottom{position:fixed;left:0;right:0;bottom:0;z-index:1000;display:grid;grid-template-columns:repeat(5,1fr);align-items:end;
  height:calc(66px + env(safe-area-inset-bottom,0px));padding:0 6px env(safe-area-inset-bottom,0px);background:#fff;border-top:1px solid #e7e9ee}
.ux-bottom a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:66px;color:#6b7280;text-decoration:none;font-size:.7rem;font-weight:600}
.ux-bottom a i{font-size:1.25rem}
.ux-bottom a.aktif{color:var(--brand)}
.ux-bottom a.ux-fab{position:relative;justify-content:flex-end;padding-bottom:9px;color:var(--brand)}
.ux-bottom a.ux-fab i{position:absolute;top:-20px;left:50%;margin-left:-29px;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:var(--brand);color:#fff;font-size:1.45rem;box-shadow:0 8px 20px rgba(15,90,63,.35);border:4px solid #fff}
@media (min-width:901px){ .ux-bottom{display:none} }

/* ---------- Area konten ---------- */
.ux-main{max-width:1180px;margin:0 auto;padding:18px 16px 28px}
.ux-main > * + *{margin-top:16px}
.ux-sec{padding:18px}
.ux-sec-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.ux-sec-head h2{margin:0;font-size:1.05rem;font-weight:600;letter-spacing:-.01em}
.ux-sec-head p{margin:3px 0 0;color:var(--muted);font-size:.86rem}
.ux-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ux-grid2 > .panel{margin:0}
@media (max-width:900px){ .ux-grid2{grid-template-columns:1fr} }
.ux-foot{text-align:center;color:var(--muted);font-size:.8rem;padding:18px 0 4px}

.ux-alert{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;font-size:.92rem;line-height:1.5}
.ux-alert > i{font-size:1.2rem;margin-top:1px}
.ux-alert-danger{background:#fdecea;color:#8a1f18;border:1px solid #f6cfca}

/* Tombol */
.ux-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:11px 18px;border-radius:12px;font-weight:600;font-size:.95rem;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background-color .12s,border-color .12s}
.ux-btn-lg{min-height:52px;font-size:1rem;flex:1 1 220px}
.ux-btn-white{background:#fff;color:var(--brand)}
.ux-btn-white:hover{background:#eef5f1}
.ux-btn-white[disabled]{opacity:.7;cursor:not-allowed}
.ux-btn-ghost-w{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.ux-btn-ghost-w:hover{background:rgba(255,255,255,.1)}
.ux-btn-gold{background:#f2c94c;color:#3d2e05}

/* ---------- Kartu sambutan ---------- */
.ux-hero-card{background:var(--brand);color:#fff;border-radius:20px;padding:20px;box-shadow:0 10px 30px rgba(15,90,63,.18)}
.ux-hero-top{display:flex;align-items:center;gap:14px}
.ux-hero-foto{width:58px;height:58px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.85);flex:none;background:#fff}
.ux-hero-id{min-width:0}
.ux-hero-sapa{font-size:.9rem;opacity:.85}
.ux-hero-id h1{margin:2px 0 3px;font-size:1.35rem;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:#fff}
.ux-hero-meta{font-size:.82rem;opacity:.8}
.ux-today{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.ux-today-item{display:flex;gap:11px;align-items:center;padding:12px;border-radius:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14)}
.ux-today-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.14);font-size:1.1rem;flex:none}
.ux-today-item.sudah .ux-today-ic{background:#f2c94c;color:#3d2e05}
.ux-today-item small{display:block;font-size:.75rem;opacity:.8}
.ux-today-item strong{display:block;font-size:1.3rem;font-weight:700;letter-spacing:.01em;line-height:1.2}
.ux-today-item em{display:block;font-style:normal;font-size:.74rem;opacity:.85}
.ux-hero-aksi{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
@media (min-width:901px){
  .ux-hero-card{display:grid;grid-template-columns:1.1fr 1fr;gap:6px 24px;align-items:center;padding:26px 28px}
  .ux-hero-top{grid-row:1}
  .ux-today{grid-column:2;grid-row:1 / span 2;margin-top:0}
  .ux-hero-aksi{grid-column:1;grid-row:2;margin-top:10px}
}
@media (max-width:380px){ .ux-today{grid-template-columns:1fr} }

/* ---------- Statistik ---------- */
.ux-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:700px){ .ux-stats{grid-template-columns:1fr 1fr;gap:10px} }
.ux-stat{display:flex;flex-direction:column;gap:2px;padding:14px;border:1px solid #eceef2;border-radius:14px;background:#fff}
.ux-stat-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;margin-bottom:8px;font-size:1.05rem}
.ux-stat strong{font-size:1.65rem;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.ux-stat small{color:var(--muted);font-size:.84rem}
.ic-brand{background:var(--brand-soft);color:var(--brand)}
.ic-ok{background:#e5f5ec;color:#16794a}
.ic-warn{background:#fff3e0;color:#b25e00}
.ic-info{background:#e8effc;color:#2257b8}
.ic-gold{background:#fbf3e1;color:#8a6512}
.ic-violet{background:#efedfb;color:#5b4bc4}
.ux-progress-wrap{margin-top:16px}
.ux-progress-label{display:flex;justify-content:space-between;font-size:.88rem;margin-bottom:8px;color:var(--muted)}
.ux-progress-label strong{color:var(--text)}
.ux-progress-wrap .progress{height:10px;border:0;background:#eef0f3}
.ux-progress-sub{margin-top:8px;font-size:.84rem;color:var(--muted)}

/* Filter periode ringkas */
.ux-filter{gap:6px !important}
.ux-filter select{height:38px;padding:0 10px;border-radius:10px;border:1px solid #d5d9e0;background:#fff;font:inherit;font-size:.9rem}
.ux-filter .btn{height:38px;width:38px;display:grid;place-items:center;padding:0 !important;border-radius:10px !important}

/* ---------- Menu cepat ---------- */
.ux-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ux-quick a{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px;border:1px solid #eceef2;border-radius:14px;color:var(--text);text-decoration:none;font-size:.82rem;font-weight:600;text-align:center;transition:border-color .12s,background-color .12s}
.ux-quick a:hover{border-color:#cfe5da;background:#fafcfb}
.ux-quick a span{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:1.25rem}

/* Kalender dalam kerangka baru */
.ux-sec .cal-ctrls{gap:6px}
.ux-sec .cal-btn{padding:7px 11px;font-size:.85rem}
.ux-sec .cal-grid{gap:5px}
.ux-sec .cal-dow{padding:6px 2px;font-size:.78rem;border:0}
.ux-sec .cal-day{border-radius:10px}
@media (max-width:560px){ .ux-sec .cal-day .num{font-size:.82rem;top:4px;left:6px} .ux-sec{padding:16px} }

/* Kartu "Ingin izin atau cuti?" */
.ux-izin-card{display:flex;align-items:center;gap:14px;padding:16px 18px;background:#fff;border:1px solid #eceef2;border-left:4px solid #f2c94c;border-radius:14px;box-shadow:var(--shadow);color:var(--text);text-decoration:none;transition:border-color .12s}
.ux-izin-card:hover{border-color:#e5d39a;border-left-color:#e0b62f}
.ux-izin-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#fbf3e1;color:#8a6512;font-size:1.3rem;flex:none}
.ux-izin-teks{flex:1;min-width:0}
.ux-izin-teks strong{display:block;font-size:1rem;font-weight:600}
.ux-izin-teks small{display:block;color:var(--muted);font-size:.86rem;margin-top:2px;line-height:1.4}
.ux-izin-btn{flex:none;display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:10px;background:var(--brand);color:#fff;font-weight:600;font-size:.9rem}
@media (max-width:560px){
  .ux-izin-card{flex-wrap:wrap}
  .ux-izin-btn{width:100%;justify-content:center}
}
/* Tombol aksi kartu sambutan penuh selebar layar di HP */
@media (max-width:560px){ .ux-hero-aksi .ux-btn{flex:1 1 100%} }

/* Tautan bukti izin (dulu teks putih di atas gradasi) */
.bukti-link{background:var(--brand-soft) !important;color:var(--brand) !important;font-weight:600;border:1px solid #cfe5da}

/* =========================================================
   FONT & POLA KARTU
   ========================================================= */
body, button, input, select, textarea{font-family:'Sora',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif !important}
h1, h2, h3, .ux-hero-id h1, .ux-sec-head h2{letter-spacing:-.02em}

/* Pola untuk kartu hijau: titik halus + garis kontur melingkar di pojok */
.ux-pola{position:relative;overflow:hidden;isolation:isolate}
.ux-pola::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.13) 1.2px, transparent 1.3px);background-size:18px 18px;
  -webkit-mask-image:linear-gradient(115deg, transparent 35%, #000 85%);mask-image:linear-gradient(115deg, transparent 35%, #000 85%)}
.ux-pola::after{content:"";position:absolute;z-index:-1;pointer-events:none;width:340px;height:340px;right:-120px;top:-150px;border-radius:50%;
  background:repeating-radial-gradient(circle, transparent 0 22px, rgba(255,255,255,.07) 22px 23px)}
.ux-hero-card, .ab-jam{position:relative;overflow:hidden;isolation:isolate}
.ux-hero-card::before, .ab-jam::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.13) 1.2px, transparent 1.3px);background-size:18px 18px;
  -webkit-mask-image:linear-gradient(115deg, transparent 40%, #000 90%);mask-image:linear-gradient(115deg, transparent 40%, #000 90%)}
.ux-hero-card::after, .ab-jam::after{content:"";position:absolute;z-index:-1;pointer-events:none;width:360px;height:360px;right:-130px;top:-170px;border-radius:50%;
  background:repeating-radial-gradient(circle, transparent 0 22px, rgba(255,255,255,.08) 22px 23px)}
/* Aksen pola samar di pojok kartu statistik & menu cepat */
.ux-stat, .ux-quick a{position:relative;overflow:hidden;isolation:isolate}
.ux-stat::after{content:"";position:absolute;z-index:-1;right:-26px;bottom:-26px;width:96px;height:96px;border-radius:50%;
  background:repeating-radial-gradient(circle, transparent 0 9px, rgba(15,90,63,.06) 9px 10px)}
.ux-izin-card{position:relative;overflow:hidden;isolation:isolate}
.ux-izin-card::after{content:"";position:absolute;z-index:-1;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;
  background:repeating-radial-gradient(circle, transparent 0 11px, rgba(176,125,22,.08) 11px 12px)}

/* =========================================================
   HALAMAN ABSEN (desain baru)
   ========================================================= */
.ab-main{max-width:720px}
.ab-sr{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ab-alert{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;font-weight:600;line-height:1.45}
.ab-alert > i{font-size:1.3rem}
.ab-alert small{display:block;font-weight:500;opacity:.8;margin-top:2px}
.ab-alert.ok{background:#e5f5ec;color:#11603a;border:1px solid #c7e9d4}
.ab-alert.err{background:#fdecea;color:#8a1f18;border:1px solid #f6cfca}
.ab-alert .msg, .ab-alert span{background:none !important;padding:0 !important;color:inherit !important}

/* Jam besar */
.ab-jam{background:var(--brand);color:#fff;border-radius:20px;padding:20px 22px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;box-shadow:0 10px 30px rgba(15,90,63,.18)}
.ab-label{font-size:.8rem;opacity:.8;font-weight:500}
#jamBesar{display:block;font-size:3rem;font-weight:800;letter-spacing:-.03em;line-height:1.05;margin-top:2px;font-variant-numeric:tabular-nums}
#jamBesar span{font-size:1.4rem;opacity:.6;font-weight:700}
.ab-tgl{font-size:.88rem;opacity:.85}
.ab-jadwal{display:flex;gap:8px}
.ab-jadwal div{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:8px 12px;text-align:center}
.ab-jadwal small{display:block;font-size:.68rem;opacity:.8}
.ab-jadwal b{font-size:1rem;font-variant-numeric:tabular-nums}
@media (max-width:560px){ .ab-jadwal{width:100%} .ab-jadwal div{flex:1} #jamBesar{font-size:2.6rem} }

/* Status dua langkah */
.ab-status{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #eceef2;border-radius:16px;padding:14px 16px;box-shadow:var(--shadow)}
.ab-step{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.ab-step-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#f1f3f5;color:#9aa3ab;font-size:1.1rem;flex:none}
.ab-step.aktif .ab-step-ic{background:var(--brand-soft);color:var(--brand)}
.ab-step.done .ab-step-ic{background:var(--brand);color:#fff}
.ab-step small{display:block;font-size:.74rem;color:var(--muted)}
.ab-step b{display:block;font-size:1.05rem;font-variant-numeric:tabular-nums}
.ab-step em{display:block;font-style:normal;font-size:.72rem;font-weight:600}
.ab-step em.tepat{color:#16794a} .ab-step em.telat{color:#b25e00}
.ab-garis{flex:0 0 26px;height:2px;border-radius:2px;background:#e7e9ee}
.ab-garis.done{background:var(--brand)}

/* Kamera */
.ab-kamera-card{background:#fff;border:1px solid #eceef2;border-radius:20px;padding:14px;box-shadow:var(--shadow)}
.ab-kamera{position:relative;aspect-ratio:3/4;max-height:62vh;width:100%;margin:0 auto;border-radius:16px;overflow:hidden;background:#0e1714}
@media (min-width:700px){ .ab-kamera{aspect-ratio:4/3} }
.ab-kamera video, body.ux #selfieVideo{position:absolute;inset:0;width:100% !important;height:100% !important;object-fit:cover;transform:scaleX(-1);border:0 !important;border-radius:0 !important;max-height:none !important;background:#0e1714}
.ab-panduan{position:absolute;left:50%;top:46%;width:58%;aspect-ratio:3/4;transform:translate(-50%,-50%);border:2px dashed rgba(255,255,255,.55);border-radius:50%;pointer-events:none;opacity:0}
.ab-kamera.hidup .ab-panduan{opacity:1}
.ab-kosong{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;color:#cfe0d8;
  background-image:radial-gradient(rgba(255,255,255,.07) 1.2px, transparent 1.3px);background-size:18px 18px}
.ab-kosong-ic{width:76px;height:76px;border-radius:24px;display:grid;place-items:center;background:rgba(255,255,255,.08);font-size:2.2rem;color:#fff}
.ab-kosong p{margin:0;font-size:.88rem;max-width:240px;line-height:1.45}
.ab-kamera.hidup .ab-kosong{display:none}
.ab-btn-cam{display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border-radius:999px;border:0;background:#fff;color:var(--brand) !important;font-weight:700;font-size:.95rem;cursor:pointer}
.ab-btn-stop{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;border:0;background:rgba(0,0,0,.45);color:#fff;font-size:1rem;cursor:pointer;display:none;place-items:center}
.ab-kamera.hidup .ab-btn-stop{display:grid}
.ab-live{position:absolute;top:14px;left:14px;display:none;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.45);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.06em}
.ab-live i{width:7px;height:7px;border-radius:50%;background:#ef4444}
.ab-kamera.hidup .ab-live{display:inline-flex}
.ab-hint{margin:10px 2px 0;font-size:.82rem;color:var(--muted);min-height:1em}
.ab-hint:empty{display:none}

/* Tombol absen */
.ab-aksi{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.ab-btn{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;border:0;cursor:pointer;text-align:left;color:#fff;font:inherit;transition:background-color .12s,opacity .12s}
.ab-btn i{font-size:1.45rem}
.ab-btn b{display:block;font-size:1rem}
.ab-btn small{display:block;font-size:.74rem;opacity:.85;font-weight:500}
.ab-btn-masuk{background:var(--brand)}
.ab-btn-masuk:hover{background:#0c4c35}
.ab-btn-pulang{background:#1f2937}
.ab-btn-pulang:hover{background:#111827}
.ab-btn[disabled]{background:#eef0f3 !important;color:#8b93a1 !important;cursor:not-allowed}
@media (max-width:420px){ .ab-aksi{grid-template-columns:1fr} }
.ab-catatan{text-align:center;color:var(--muted);font-size:.8rem;margin:16px 0 0}

/* =========================================================
   Kepala halaman hijau berpola (riwayat, izin, dst.)
   ========================================================= */
.ux-pola-hijau{position:relative;overflow:hidden;isolation:isolate;background:var(--brand);color:#fff;border-radius:20px;padding:20px 22px;box-shadow:0 10px 30px rgba(15,90,63,.18)}
.ux-pola-hijau::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.13) 1.2px, transparent 1.3px);background-size:18px 18px;
  -webkit-mask-image:linear-gradient(115deg, transparent 40%, #000 90%);mask-image:linear-gradient(115deg, transparent 40%, #000 90%)}
.ux-pola-hijau::after{content:"";position:absolute;z-index:-1;pointer-events:none;width:320px;height:320px;right:-120px;top:-150px;border-radius:50%;
  background:repeating-radial-gradient(circle, transparent 0 22px, rgba(255,255,255,.08) 22px 23px)}
.ux-pola-hijau h1{margin:2px 0 0;font-size:1.45rem;font-weight:800;letter-spacing:-.02em;color:#fff}
.rw-head-label{font-size:.8rem;opacity:.8;font-weight:500}

/* =========================================================
   RIWAYAT — timeline per hari
   ========================================================= */
.rw-main{max-width:820px}
.rw-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.rw-ringkas{display:flex;gap:8px}
.rw-ringkas div{min-width:74px;text-align:center;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16)}
.rw-ringkas b{display:block;font-size:1.25rem;font-weight:800}
.rw-ringkas small{font-size:.7rem;opacity:.85}
@media (max-width:560px){ .rw-ringkas{width:100%} .rw-ringkas div{flex:1} }
.rw-filter{display:flex;gap:8px;align-items:center}
.rw-date{flex:1;display:flex;align-items:center;gap:10px;height:48px;padding:0 14px;background:#fff;border:1px solid #e1e4e9;border-radius:14px;color:var(--muted)}
.rw-date input{flex:1;border:0;background:none;font:inherit;color:var(--text);height:100%;min-width:0}
.rw-btn{height:48px;padding:0 18px;border-radius:14px;border:0;background:var(--brand);color:#fff;font:inherit;font-weight:700;display:inline-flex;align-items:center;gap:8px;cursor:pointer;text-decoration:none}
.rw-btn-ghost{background:#fff;color:var(--text);border:1px solid #e1e4e9;padding:0 16px}
@media (max-width:420px){ .rw-btn span{display:none} }
.rw-list{display:flex;flex-direction:column;gap:10px}
.rw-day{display:flex;gap:12px;background:#fff;border:1px solid #eceef2;border-radius:18px;padding:12px;box-shadow:var(--shadow)}
.rw-date-col{flex:0 0 58px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:14px;background:var(--brand-soft);color:var(--brand);padding:8px 0}
.rw-tgl{font-size:1.5rem;font-weight:800;line-height:1}
.rw-bln{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
.rw-hari{font-size:.68rem;color:var(--muted);margin-top:4px}
.rw-entries{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:8px;min-width:0}
.rw-entry{display:flex;gap:10px;align-items:center;padding:8px;border-radius:14px;background:#f8f9fa;min-width:0}
.rw-entry.kosong{opacity:.65}
.rw-foto{flex:none;width:46px;height:46px;border-radius:12px;overflow:hidden;border:0;padding:0;background:#e9ecef;cursor:zoom-in;display:grid;place-items:center}
.rw-foto img{width:100%;height:100%;object-fit:cover}
.rw-foto-kosong{cursor:default;color:#9aa3ab;font-size:1.1rem}
.rw-info{min-width:0}
.rw-info small{display:block;font-size:.7rem;color:var(--muted);font-weight:600}
.rw-info b{display:block;font-size:1.1rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.2}
.rw-chip{display:inline-flex;align-items:center;gap:4px;margin-top:3px;padding:2px 8px;border-radius:999px;font-size:.68rem;font-weight:700;white-space:nowrap}
.rw-chip.tepat{background:#e5f5ec;color:#16794a}
.rw-chip.telat{background:#fff3e0;color:#b25e00}
.rw-chip.netral{background:var(--brand-soft);color:var(--brand)}
.rw-chip.abu{background:#eef0f3;color:#8b93a1}
@media (max-width:480px){
  .rw-day{flex-direction:column}
  .rw-date-col{flex-direction:row;gap:8px;justify-content:flex-start;padding:8px 12px}
  .rw-tgl{font-size:1.2rem} .rw-bln{margin:0} .rw-hari{margin:0 0 0 auto}
}
.rw-kosong{display:flex;flex-direction:column;align-items:center;gap:6px;padding:40px 16px;text-align:center;color:var(--muted);background:#fff;border:1px dashed #d5d9e0;border-radius:18px}
.rw-kosong i{font-size:2rem;color:#b5bcc4}
.rw-kosong b{color:var(--text)}
.rw-viewer{position:fixed;inset:0;z-index:2000;background:rgba(10,15,13,.85);display:grid;place-items:center;padding:20px}
.rw-viewer[hidden]{display:none}
.rw-viewer img{max-width:100%;max-height:85vh;border-radius:16px}
.rw-viewer-x{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;font-size:1.1rem;cursor:pointer}

/* =========================================================
   IZIN
   ========================================================= */
.iz-main{max-width:820px}
.iz-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.iz-hero-teks{flex:1 1 280px}
.iz-hero p{margin:6px 0 0;opacity:.85;font-size:.9rem;line-height:1.5;max-width:460px}
.iz-btn-buat{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 22px;border-radius:14px;border:0;background:#fff !important;color:var(--brand) !important;font:inherit;font-weight:700;font-size:1rem;cursor:pointer;box-shadow:none !important}
@media (max-width:560px){ .iz-btn-buat{width:100%} }
.iz-status{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.iz-st{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px;border-radius:16px;background:#fff;border:1px solid #eceef2;box-shadow:var(--shadow)}
.iz-st i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;margin-bottom:6px}
.iz-st b{font-size:1.5rem;font-weight:800;line-height:1.1}
.iz-st small{color:var(--muted);font-size:.8rem}
.iz-st.menunggu i{background:#fff3e0;color:#b25e00}
.iz-st.diterima i{background:#e5f5ec;color:#16794a}
.iz-st.ditolak i{background:#fdecea;color:#c0352b}
.iz-judul{font-size:1.05rem;font-weight:700;margin:4px 2px 10px}
.iz-list{display:flex;flex-direction:column;gap:10px}
.iz-item{display:flex;gap:12px;padding:14px;border-radius:18px;background:#fff;border:1px solid #eceef2;box-shadow:var(--shadow)}
.iz-ic{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:1.2rem;background:var(--brand-soft);color:var(--brand)}
.iz-item.st-ditolak .iz-ic{background:#fdecea;color:#c0352b}
.iz-item.st-menunggu .iz-ic{background:#fff3e0;color:#b25e00}
.iz-isi{flex:1;min-width:0}
.iz-baris1{display:flex;justify-content:space-between;align-items:center;gap:10px}
.iz-baris1 b{font-size:1rem}
.iz-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:.74rem;font-weight:700;white-space:nowrap}
.iz-chip.st-menunggu{background:#fff3e0;color:#b25e00}
.iz-chip.st-diterima{background:#e5f5ec;color:#16794a}
.iz-chip.st-ditolak{background:#fdecea;color:#c0352b}
.iz-tgl{margin-top:4px;font-size:.85rem;color:var(--muted)}
.iz-ket{margin:8px 0 0;font-size:.9rem;line-height:1.5;padding:8px 10px;border-radius:10px;background:#f8f9fa}
.iz-kaki{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;font-size:.78rem;color:var(--muted)}
.iz-bukti{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:10px;background:var(--brand-soft);color:var(--brand);font-weight:700;text-decoration:none}

/* Formulir izin: lembar dari bawah di HP, kartu di tengah di desktop */
#modalIzin{background:rgba(10,15,13,.5) !important}
#modalIzin .modal-content{background:#fff;border:0;border-radius:22px;padding:22px 20px 24px;box-shadow:0 20px 50px rgba(16,24,40,.25);max-width:480px}
#modalIzin .modal-content::before{content:"";display:block;width:44px;height:5px;border-radius:5px;background:#dfe2e7;margin:-8px auto 14px}
#modalIzin h2{font-size:1.2rem;font-weight:800}
#modalIzin .close-modal{right:18px;top:14px;width:36px;height:36px;border-radius:50%;background:#f1f3f5;display:grid;place-items:center;font-size:20px;line-height:1}
#modalIzin .modal-form label{color:var(--text);font-size:.85rem}
#modalIzin .modal-form input[type="date"], #modalIzin .modal-form select, #modalIzin .modal-form input[type="file"], #modalIzin .modal-form textarea{
  background:#fff;border:1px solid #d5d9e0;border-radius:12px;padding:12px;font:inherit}
#modalIzin .modal-form button{height:52px;border-radius:14px !important;font-size:1rem !important;font-weight:700 !important}
@media (max-width:600px){
  #modalIzin .modal-content{position:absolute !important;left:0;right:0;bottom:0;margin:0 !important;max-width:none;border-radius:24px 24px 0 0;max-height:92vh;overflow:auto;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
}

/* =========================================================
   FONT SORA (menimpa semua font lama)
   ========================================================= */
body, button, input, select, textarea, .ux-top, .ux-bottom{font-family:'Sora',sans-serif !important}
body{letter-spacing:-.005em}

/* =========================================================
   HEADER BARU — hijau berpola, tidak flat
   ========================================================= */
.ux-top{background:var(--brand) !important;border-bottom:0 !important;color:#fff;
  box-shadow:0 6px 24px rgba(15,90,63,.22);overflow:visible}
.ux-top::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.12) 1.2px, transparent 1.3px);background-size:16px 16px;
  -webkit-mask-image:linear-gradient(90deg, transparent 20%, #000 100%);mask-image:linear-gradient(90deg, transparent 20%, #000 100%)}
.ux-top-in{position:relative;height:66px}
.ux-brand, .ux-judul-m{color:#fff !important}
.ux-brand img{background:#fff;border-radius:12px;padding:3px;height:42px}
.ux-brand small{color:rgba(255,255,255,.75) !important}
.ux-desk-nav a{color:rgba(255,255,255,.82) !important}
.ux-desk-nav a:hover{background:rgba(255,255,255,.12) !important;color:#fff !important}
.ux-desk-nav a.aktif{background:#fff !important;color:var(--brand) !important;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.ux-akun summary img{border:2px solid rgba(255,255,255,.9) !important;box-shadow:0 0 0 3px rgba(255,255,255,.18) !important}
@media (max-width:900px){
  .ux-top-in{height:60px}
  .ux-brand img{height:38px}
  .ux-judul-m{font-size:1.08rem;font-weight:700}
}
/* Konten pertama sedikit naik mendekati header */
body.ux .ux-main{padding-top:20px}

/* Navigasi bawah mengambang */
.ux-bottom{left:10px !important;right:10px !important;bottom:calc(10px + env(safe-area-inset-bottom,0px)) !important;height:64px !important;padding:0 6px !important;
  border:1px solid #eceef2 !important;border-radius:22px;box-shadow:0 12px 32px rgba(16,24,40,.16)}
.ux-bottom a{height:64px}
.ux-bottom a.aktif:not(.ux-fab){position:relative}
.ux-bottom a.aktif:not(.ux-fab)::before{content:"";position:absolute;top:6px;width:36px;height:30px;border-radius:12px;background:var(--brand-soft);z-index:-1}
.ux-bottom a{position:relative;z-index:0}
.ux-bottom a.ux-fab i{top:-22px}
body.ux{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}
@media (min-width:901px){ body.ux{padding-bottom:0} }

/* Ikon dalam kotak lebih tegas */
.ux-quick a span, .ux-stat-ic, .ux-izin-ic, .iz-ic{box-shadow:inset 0 0 0 1px rgba(0,0,0,.03)}
.ux-quick a span{width:50px;height:50px;border-radius:16px;font-size:1.35rem}

/* =========================================================
   HALAMAN DEPAN (index.php)
   ========================================================= */
body.lp{background:#f5f6f8 !important;color:#111827;margin:0}
.lp-in{max-width:1100px;margin:0 auto;padding:0 18px}
.lp-top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid #eceef2}
.lp-top-in{height:66px;display:flex;align-items:center;justify-content:space-between}
.lp-brand{display:flex;align-items:center;gap:10px;color:#111827;text-decoration:none}
.lp-brand img{height:42px;width:auto}
.lp-brand span{display:flex;flex-direction:column;line-height:1.15}
.lp-brand strong{font-size:1.05rem;font-weight:700}
.lp-brand small{font-size:.75rem;color:#5b6474}
.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:52px;padding:0 24px;border-radius:14px;font-weight:700;font-size:1rem;text-decoration:none;transition:background-color .12s,border-color .12s}
.lp-btn-sm{height:42px;padding:0 16px;font-size:.92rem;border-radius:12px}
.lp-btn-ghost{background:var(--brand);color:#fff}
.lp-btn-ghost:hover{background:#0c4c35}
.lp-btn-putih{background:#fff;color:var(--brand)}
.lp-btn-putih:hover{background:#eef5f1}
.lp-btn-garis{border:1.5px solid rgba(255,255,255,.5);color:#fff}
.lp-btn-garis:hover{background:rgba(255,255,255,.1)}
.lp-hero{position:relative;overflow:hidden;isolation:isolate;background:var(--brand);color:#fff;padding:56px 0 76px;border-radius:0 0 36px 36px}
.lp-hero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.12) 1.3px, transparent 1.4px);background-size:20px 20px;
  -webkit-mask-image:linear-gradient(120deg, transparent 30%, #000 85%);mask-image:linear-gradient(120deg, transparent 30%, #000 85%)}
.lp-hero::after{content:"";position:absolute;z-index:-1;width:620px;height:620px;right:-200px;top:-260px;border-radius:50%;
  background:repeating-radial-gradient(circle, transparent 0 28px, rgba(255,255,255,.07) 28px 29px)}
.lp-hero-in{display:grid;grid-template-columns:1.3fr .7fr;gap:30px;align-items:center}
.lp-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);font-size:.82rem;font-weight:600}
.lp-eyebrow i{color:#f2c94c}
.lp-hero h1{margin:16px 0 0;font-size:clamp(2rem,5.5vw,3.2rem);font-weight:800;letter-spacing:-.035em;line-height:1.1;color:#fff}
.lp-hero p{margin:16px 0 0;font-size:1.02rem;line-height:1.65;opacity:.88;max-width:520px}
.lp-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.lp-hero-logo{position:relative;display:grid;place-items:center;aspect-ratio:1;max-width:300px;justify-self:center;width:100%}
.lp-hero-logo img{position:relative;width:62%;filter:drop-shadow(0 18px 30px rgba(0,0,0,.25))}
.lp-cincin{position:absolute;inset:0;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 0 0 22px rgba(255,255,255,.04)}
@media (max-width:820px){
  .lp-hero{padding:34px 0 60px;border-radius:0 0 28px 28px}
  .lp-hero-in{grid-template-columns:1fr}
  .lp-hero-logo{order:-1;max-width:150px;justify-self:start}
  .lp-cta .lp-btn{flex:1 1 100%}
}
.lp-main{margin-top:-30px;position:relative;display:flex;flex-direction:column;gap:22px;padding-bottom:28px}
.lp-h2{font-size:1.2rem;font-weight:700;margin:0 0 12px;letter-spacing:-.02em}
.lp-main > section:first-child{background:#fff;border-radius:22px;padding:20px;box-shadow:0 10px 30px rgba(16,24,40,.08)}
.lp-fitur{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:900px){ .lp-fitur{grid-template-columns:1fr 1fr} }
.lp-fitur article{padding:16px;border:1px solid #eceef2;border-radius:16px;position:relative;overflow:hidden;isolation:isolate}
.lp-fitur article::after{content:"";position:absolute;z-index:-1;right:-28px;bottom:-28px;width:100px;height:100px;border-radius:50%;background:repeating-radial-gradient(circle, transparent 0 9px, rgba(15,90,63,.06) 9px 10px)}
.lp-fitur span{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:1.25rem}
.lp-fitur h3{margin:12px 0 4px;font-size:.98rem;font-weight:700}
.lp-fitur p{margin:0;font-size:.84rem;color:#5b6474;line-height:1.5}
.lp-langkah{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;counter-reset:l}
@media (max-width:820px){ .lp-langkah{grid-template-columns:1fr} }
.lp-langkah li{counter-increment:l;display:flex;flex-direction:column;gap:4px;padding:16px 16px 16px 64px;position:relative;background:#fff;border:1px solid #eceef2;border-radius:16px}
.lp-langkah li::before{content:counter(l);position:absolute;left:16px;top:16px;width:34px;height:34px;border-radius:11px;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:800}
.lp-langkah b{font-size:.98rem}
.lp-langkah span{font-size:.86rem;color:#5b6474}
.lp-verif{display:flex;align-items:center;gap:14px;padding:16px 18px;background:#fff;border:1px solid #eceef2;border-radius:18px;color:#111827;text-decoration:none}
.lp-verif > span:first-child{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:1.25rem;flex:none}
.lp-verif b{display:block}
.lp-verif small{color:#5b6474}
.lp-verif > i{margin-left:auto;color:#9aa3ab}
.lp-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;max-width:1100px;margin:0 auto;padding:18px;color:#6b7280;font-size:.82rem}
.lp-foot i{color:var(--brand)}

/* =========================================================
   HALAMAN LOGIN
   ========================================================= */
body.lg{background:#f5f6f8 !important;margin:0;min-height:100vh}
.lg-wrap{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.lg-panel{position:relative;overflow:hidden;isolation:isolate;background:var(--brand);color:#fff;padding:32px 40px;display:flex;flex-direction:column;justify-content:space-between}
.lg-panel::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.12) 1.3px, transparent 1.4px);background-size:20px 20px;
  -webkit-mask-image:linear-gradient(140deg, transparent 25%, #000 85%);mask-image:linear-gradient(140deg, transparent 25%, #000 85%)}
.lg-panel::after{content:"";position:absolute;z-index:-1;width:560px;height:560px;left:-220px;bottom:-260px;border-radius:50%;background:repeating-radial-gradient(circle, transparent 0 28px, rgba(255,255,255,.07) 28px 29px)}
.lg-brand{color:rgba(255,255,255,.85);text-decoration:none;font-weight:600;font-size:.9rem;display:inline-flex;align-items:center;gap:8px}
.lg-logo{width:96px;height:auto;filter:drop-shadow(0 12px 22px rgba(0,0,0,.25))}
.lg-panel h2{margin:18px 0 4px;font-size:2rem;font-weight:800;letter-spacing:-.03em;color:#fff}
.lg-panel p{margin:0;opacity:.85}
.lg-poin{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.lg-poin li{display:flex;align-items:center;gap:12px;font-size:.95rem}
.lg-poin i{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);color:#f2c94c}
.lg-panel-foot{opacity:.7;font-size:.8rem}
.lg-main{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 20px}
.lg-card{width:100%;max-width:420px;background:#fff;border:1px solid #eceef2;border-radius:24px;padding:30px 28px;box-shadow:0 16px 40px rgba(16,24,40,.08)}
.lg-head h1{margin:0;font-size:1.65rem;font-weight:800;letter-spacing:-.03em;color:#111827}
.lg-head p{margin:6px 0 22px;color:#5b6474;font-size:.92rem}
.lg-alert{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:#fdecea;color:#8a1f18;font-size:.88rem;font-weight:600;margin-bottom:16px}
.lg-label{display:block;font-size:.84rem;font-weight:600;color:#374151;margin:0 0 7px}
.lg-field{display:flex;align-items:center;gap:10px;height:52px;padding:0 14px;border:1.5px solid #e1e4e9;border-radius:14px;background:#fff;margin-bottom:16px;transition:border-color .12s,box-shadow .12s}
.lg-field:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px rgba(15,90,63,.12)}
.lg-field > i{color:#9aa3ab;font-size:1.05rem}
.lg-field input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;font-size:1rem;color:#111827}
.lg-eye{border:0;background:none;color:#6b7280;font-size:1.1rem;cursor:pointer;padding:6px}
.lg-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:-2px 0 20px;font-size:.88rem}
.lg-check{display:inline-flex;align-items:center;gap:8px;color:#374151;cursor:pointer}
.lg-check input{width:18px;height:18px;accent-color:var(--brand)}
.lg-row a{color:var(--brand);font-weight:700;text-decoration:none}
.lg-submit{width:100%;height:54px;border:0;border-radius:14px;background:var(--brand);color:#fff;font-size:1.02rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 10px 22px rgba(15,90,63,.25);transition:background-color .12s}
.lg-submit:hover{background:#0c4c35}
.lg-or{display:flex;align-items:center;gap:12px;margin:22px 0 14px;color:#9aa3ab;font-size:.8rem}
.lg-or::before, .lg-or::after{content:"";flex:1;height:1px;background:#eceef2}
.lg-links{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lg-links a{display:flex;align-items:center;justify-content:center;gap:8px;height:46px;border-radius:12px;border:1.5px solid #e1e4e9;color:#111827;font-weight:600;font-size:.86rem;text-decoration:none;transition:border-color .12s}
.lg-links a:hover{border-color:var(--brand)}
.lg-links i{color:var(--brand)}
.lg-aman{margin:18px 0 0;color:#6b7280;font-size:.8rem}
.lg-aman i{color:var(--brand)}
@media (max-width:900px){
  .lg-wrap{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .lg-panel{padding:22px 20px 70px;border-radius:0 0 32px 32px;min-height:0}
  .lg-panel-isi{display:flex;flex-direction:column;align-items:center;text-align:center}
  .lg-logo{width:70px}
  .lg-panel h2{font-size:1.5rem;margin-top:12px}
  .lg-poin, .lg-panel-foot{display:none}
  .lg-main{justify-content:flex-start;margin-top:-50px;padding:0 16px 24px}
  .lg-card{padding:24px 20px;border-radius:22px;box-shadow:0 16px 40px rgba(16,24,40,.12)}
  .lg-links{grid-template-columns:1fr}
}
.lg-card{position:relative;z-index:2}
.lg-panel{z-index:1}
html, body.lp, body.lg{height:auto}
*, *::before, *::after{box-sizing:border-box}

/* =========================================================
   HALAMAN ABSEN — muat satu layar, tanpa navigasi bawah
   ========================================================= */
.ux-back{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);color:#fff;text-decoration:none;font-size:1.15rem}
.ux-back:hover{background:rgba(255,255,255,.22)}
body.ux.ab-page{padding-bottom:0 !important;height:100dvh;overflow:hidden}
@media (min-width:901px){ body.ux.ab-page{overflow:auto;height:auto} }
.ab-page .ux-foot{display:none}
.ab-page .ab-main{
  display:flex;flex-direction:column;gap:10px;
  height:calc(100dvh - 60px);padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px)) !important;max-width:560px
}
.ab-page .ab-main > * + *{margin-top:0}
@media (min-width:901px){ .ab-page .ab-main{height:calc(100dvh - 66px);padding-top:16px !important} }

/* Kartu atas simetris */
.ab-page .ab-jam{
  flex:none;display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;
  padding:14px 14px 12px;border-radius:20px
}
.ab-page .ab-tgl{font-size:.8rem;opacity:.85;font-weight:500}
.ab-page #jamBesar{font-size:2.4rem;margin:0;line-height:1.1}
.ab-page #jamBesar span{font-size:1.1rem}
.ab-page .ab-jadwal{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;margin-top:10px}
.ab-page .ab-jadwal div{padding:6px 4px;border-radius:12px}
.ab-page .ab-jadwal small{font-size:.66rem}
.ab-page .ab-jadwal b{font-size:.95rem}
.ab-page .ab-status{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin-top:8px;
  background:none;border:0;box-shadow:none;padding:0
}
.ab-page .ab-step{
  justify-content:center;gap:9px;padding:8px 6px;border-radius:12px;text-align:left;
  background:rgba(255,255,255,.95);color:var(--text)
}
.ab-page .ab-step-ic{width:32px;height:32px;border-radius:10px;font-size:.95rem}
.ab-page .ab-step small{font-size:.66rem}
.ab-page .ab-step b{font-size:.95rem;line-height:1.15}
.ab-page .ab-step em{font-size:.64rem}

/* Kamera mengisi sisa ruang layar */
.ab-page .ab-kamera-card{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:10px;border-radius:20px}
.ab-page .ab-kamera{flex:1 1 auto;min-height:150px;aspect-ratio:auto !important;max-height:none;width:100%;border-radius:14px}
@media (min-width:901px){ .ab-page .ab-kamera{max-height:460px} }
.ab-page .ab-panduan{width:auto;height:72%;top:48%}
.ab-page .ab-kosong{gap:8px;padding:14px}
.ab-page .ab-kosong-ic{width:56px;height:56px;border-radius:18px;font-size:1.6rem}
.ab-page .ab-kosong p{font-size:.8rem}
.ab-page .ab-btn-cam{padding:10px 18px;font-size:.9rem}
.ab-page .ab-hint{margin:6px 2px 0;font-size:.76rem}
.ab-page .ab-aksi{flex:none;grid-template-columns:1fr 1fr !important;gap:8px;margin-top:10px}
.ab-page .ab-btn{padding:10px 12px;border-radius:14px;gap:9px}
.ab-page .ab-btn i{font-size:1.25rem}
.ab-page .ab-btn b{font-size:.92rem}
.ab-page .ab-btn small{font-size:.68rem}
.ab-page .ab-alert{flex:none;padding:10px 12px;font-size:.85rem}

/* Layar sangat pendek: rampingkan kartu atas */
@media (max-height:640px){
  .ab-page .ab-jadwal{display:none}
  .ab-page #jamBesar{font-size:2rem}
}
.ab-page .ab-status{align-items:stretch}
.ab-page .ab-step{justify-content:flex-start;padding:8px 10px}
.ab-page .ab-step em{color:var(--muted)}
.ab-page .ab-step em.tepat{color:#16794a} .ab-page .ab-step em.telat{color:#b25e00}
.ab-page .ab-btn b{white-space:nowrap}
@media (max-width:380px){ .ab-page .ab-btn{padding:10px 9px;gap:7px} .ab-page .ab-btn b{font-size:.84rem} .ab-page .ab-btn i{font-size:1.1rem} }

/* =========================================================
   ABSEN — kartu atas v2 (simetris: Masuk | cincin jam | Pulang)
   ========================================================= */
.ab-page .ab-jam2{display:block;padding:16px 16px 14px;text-align:center}
.ab2-atas{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.ab2-sisi{display:flex;flex-direction:column;gap:2px;min-width:0}
.ab2-sisi.kiri{align-items:flex-start;text-align:left}
.ab2-sisi.kanan{align-items:flex-end;text-align:right}
.ab2-label{display:inline-flex;align-items:center;gap:5px;font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.ab2-sisi.done .ab2-label{opacity:1;color:#f2c94c}
.ab2-sisi b{font-size:1.45rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15}
.ab2-sisi.tunggu b{opacity:.45}
.ab2-sisi em{font-style:normal;font-size:.7rem;opacity:.8;white-space:nowrap}
.ab2-sisi em.telat{color:#ffd28a;opacity:1}
.ab2-sisi em.tepat{color:#b8f0cf;opacity:1}

.ab2-ring{position:relative;width:128px;height:128px}
.ab2-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ab2-ring circle{fill:none;stroke-width:7}
.ab2-ring .bg{stroke:rgba(255,255,255,.14)}
.ab2-ring .fg{stroke:#f2c94c;stroke-linecap:round;transition:stroke-dashoffset .6s ease}
.ab2-ring-isi{position:absolute;inset:12px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;flex-direction:column;align-items:center;justify-content:center}
.ab-page .ab2-ring-isi #jamBesar{font-size:1.75rem;font-weight:800;letter-spacing:-.03em;line-height:1;margin:0}
.ab-page .ab2-ring-isi #jamBesar span{font-size:.85rem;opacity:.6}
.ab2-ring-isi small{font-size:.66rem;opacity:.8;margin-top:4px}

.ab2-garis{margin-top:14px;padding:10px 12px 8px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.ab2-track{position:relative;height:4px;margin:6px 8% 0;border-radius:4px;background:rgba(255,255,255,.18)}
.ab2-track i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:#f2c94c;width:0}
.ab2-track span{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(242,201,76,.45);left:0}
.ab2-titik{display:grid;grid-template-columns:repeat(3,1fr);margin-top:-8px}
.ab2-titik div{display:flex;flex-direction:column;align-items:center;gap:1px}
.ab2-titik .dot{width:10px;height:10px;border-radius:50%;background:var(--brand);border:2px solid rgba(255,255,255,.7);margin-bottom:5px;position:relative;z-index:1}
.ab2-titik b{font-size:.82rem;font-variant-numeric:tabular-nums}
.ab2-titik small{font-size:.62rem;opacity:.75;text-transform:uppercase;letter-spacing:.06em}

@media (max-width:380px){
  .ab2-ring{width:108px;height:108px}
  .ab-page .ab2-ring-isi #jamBesar{font-size:1.45rem}
  .ab2-sisi b{font-size:1.2rem}
}
@media (max-height:640px){
  .ab2-garis{display:none}
  .ab2-ring{width:104px;height:104px}
  .ab-page .ab2-ring-isi #jamBesar{font-size:1.4rem}
}
.ab2-track{margin:6px calc(100% / 6) 0}
.ab2-sisi.tunggu b{opacity:.7;font-size:1.15rem}
.ab-page .ab2-ring-isi #jamBesar span{font-size:.75rem}

/* =========================================================
   SISTEM POLA v2 — motif belah ketupat simetris, rata dari tengah
   Menggantikan pola titik/lingkaran sebelumnya di semua permukaan hijau.
   ========================================================= */
.pola, .ux-top, .ux-pola-hijau, .lp-hero, .lg-panel, .ab-jam{position:relative;overflow:hidden;isolation:isolate}
.ux-top{overflow:visible}
.pola::before, .ux-top::before, .ux-pola-hijau::before, .lp-hero::before, .lg-panel::before, .ab-jam::before{
  content:"" !important;position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M22 5 39 22 22 39 5 22Z' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='22' cy='22' r='1.7' fill='%23ffffff'/%3E%3Ccircle cx='0' cy='0' r='1.7' fill='%23ffffff'/%3E%3Ccircle cx='44' cy='0' r='1.7' fill='%23ffffff'/%3E%3Ccircle cx='0' cy='44' r='1.7' fill='%23ffffff'/%3E%3Ccircle cx='44' cy='44' r='1.7' fill='%23ffffff'/%3E%3C/svg%3E") !important;
  background-size:44px 44px !important;background-position:center top !important;background-repeat:repeat !important;
  opacity:.085;-webkit-mask-image:none !important;mask-image:none !important;
  width:auto !important;height:auto !important;border-radius:0 !important;
}
.pola::after, .ux-top::after, .ux-pola-hijau::after, .lp-hero::after, .lg-panel::after, .ab-jam::after{
  content:"" !important;position:absolute;inset:0;z-index:-1;pointer-events:none;
  width:auto !important;height:auto !important;border-radius:0 !important;
  background:radial-gradient(ellipse 70% 60% at 50% -10%, rgba(255,255,255,.18), transparent 70%),
             radial-gradient(ellipse 80% 50% at 50% 115%, rgba(0,0,0,.18), transparent 70%) !important;
}
.ux-top::after{background:radial-gradient(ellipse 60% 120% at 50% -40%, rgba(255,255,255,.16), transparent 70%) !important}
.ux-top::before{opacity:.07;background-size:36px 36px !important}
/* kartu putih: tanpa hiasan pojok supaya bersih */
.ux-stat::after, .ux-izin-card::after, .lp-fitur article::after{content:none !important}

/* =========================================================
   KOMPONEN KARTU JAM (jk) — beranda & absen
   ========================================================= */
.jk{background:var(--brand);color:#fff;border-radius:22px;padding:18px 16px 16px;box-shadow:0 14px 34px rgba(15,90,63,.22)}
.jk-kepala{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin-bottom:16px}
.jk-foto{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.85);background:#fff}
.jk-sapa{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.jk-sapa span{font-size:.78rem;opacity:.8}
.jk-sapa b{font-size:1.08rem;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jk-jabatan{font-size:.7rem;font-weight:600;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);white-space:nowrap;max-width:130px;overflow:hidden;text-overflow:ellipsis}
.jk-atas{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.jk-sisi{display:flex;flex-direction:column;gap:2px;min-width:0}
.jk-sisi.kiri{align-items:flex-start;text-align:left}
.jk-sisi.kanan{align-items:flex-end;text-align:right}
.jk-label{display:inline-flex;align-items:center;gap:5px;font-size:.66rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;opacity:.8}
.jk-sisi.done .jk-label{opacity:1;color:#f2c94c}
.jk-sisi b{font-size:1.4rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15}
.jk-sisi.tunggu b{font-size:1.12rem;opacity:.72}
.jk-sisi em{font-style:normal;font-size:.68rem;opacity:.82;white-space:nowrap}
.jk-sisi em.telat{color:#ffd28a;opacity:1}
.jk-sisi em.tepat{color:#b8f0cf;opacity:1}
.jk-ring{position:relative;width:128px;height:128px}
.jk-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.jk-ring circle{fill:none;stroke-width:7}
.jk-ring .bg{stroke:rgba(255,255,255,.14)}
.jk-ring .fg{stroke:#f2c94c;stroke-linecap:round;transition:stroke-dashoffset .6s ease}
.jk-ring-isi{position:absolute;inset:12px;border-radius:50%;background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);display:flex;flex-direction:column;align-items:center;justify-content:center}
.jk-ring-isi #jamBesar{font-size:1.7rem;font-weight:800;letter-spacing:-.03em;line-height:1;margin:0;font-variant-numeric:tabular-nums}
.jk-ring-isi #jamBesar span{font-size:.72rem;opacity:.6}
.jk-ring-isi small{font-size:.64rem;opacity:.8;margin-top:5px}
.jk-garis{margin-top:14px;padding:10px 0 8px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.jk-track{position:relative;height:4px;margin:6px calc(100% / 6) 0;border-radius:4px;background:rgba(255,255,255,.2)}
.jk-track i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:#f2c94c;width:0}
.jk-track span{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(242,201,76,.45);left:0;z-index:2}
.jk-titik{display:grid;grid-template-columns:repeat(3,1fr);margin-top:-8px}
.jk-titik div{display:flex;flex-direction:column;align-items:center;gap:1px}
.jk-titik .dot{width:10px;height:10px;border-radius:50%;background:var(--brand);border:2px solid rgba(255,255,255,.75);margin-bottom:5px;position:relative;z-index:1}
.jk-titik b{font-size:.8rem;font-variant-numeric:tabular-nums}
.jk-titik small{font-size:.6rem;opacity:.75;text-transform:uppercase;letter-spacing:.07em}
.jk-aksi{display:flex;gap:10px;margin-top:14px}
.jk-aksi .ux-btn{flex:1}
@media (max-width:380px){
  .jk-ring{width:108px;height:108px}
  .jk-ring-isi #jamBesar{font-size:1.4rem}
  .jk-sisi b{font-size:1.15rem}
}
@media (min-width:901px){
  .jk{padding:22px 26px}
  .jk-ring{width:150px;height:150px}
  .jk-ring-isi #jamBesar{font-size:2rem}
  .jk-sisi b{font-size:1.7rem}
  .jk-aksi{max-width:420px;margin-left:auto;margin-right:auto}
}
/* di halaman absen: lebih ringkas agar muat satu layar */
.ab-page .jk{flex:none;padding:14px 14px 12px;border-radius:20px}
@media (max-height:640px){ .ab-page .jk-garis{display:none} .ab-page .jk-ring{width:104px;height:104px} .ab-page .jk-ring-isi #jamBesar{font-size:1.35rem} }

/* =========================================================
   STRIP "MINGGU INI"
   ========================================================= */
.mg-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.mg-hari{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px;border-radius:16px;background:#f8f9fa;border:1px solid #eef0f3;text-align:center}
.mg-hari small{font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.mg-bulat{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:1rem;background:#eef0f3;color:#9aa3ab}
.mg-hari b{font-size:.82rem;font-variant-numeric:tabular-nums}
.mg-hari em{font-style:normal;font-size:.64rem;color:var(--muted);font-weight:600}
.mg-hari.st-tepat .mg-bulat{background:#16794a;color:#fff}
.mg-hari.st-telat .mg-bulat{background:#e0a21b;color:#fff}
.mg-hari.st-izin .mg-bulat{background:#2f6fd6;color:#fff}
.mg-hari.st-alpa .mg-bulat{background:#fdecea;color:#c0352b}
.mg-hari.st-hariini .mg-bulat{background:var(--brand-soft);color:var(--brand)}
.mg-hari.kini{border-color:var(--brand);box-shadow:0 0 0 3px rgba(15,90,63,.1);background:#fff}

/* =========================================================
   DIAGRAM DONAT (ringkasan bulan)
   ========================================================= */
.dn{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.dn-chart{position:relative;width:150px;height:150px}
.dn-chart svg{width:100%;height:100%;transform:rotate(-90deg)}
.dn-tengah{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.dn-tengah b{font-size:1.7rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.dn-tengah small{font-size:.72rem;color:var(--muted);margin-top:3px}
.dn-legend{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dn-legend li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:10px 12px;border-radius:14px;background:#f8f9fa;border:1px solid #eef0f3}
.dn-legend span{grid-row:1 / span 2;width:10px;height:30px;border-radius:6px}
.dn-legend em{font-style:normal;font-size:.74rem;color:var(--muted);font-weight:600}
.dn-legend b{font-size:1.15rem;font-weight:800;line-height:1.1}
.dn-legend small{display:none}
.dn-kaki{display:grid;grid-template-columns:repeat(3,1fr);margin-top:14px;border-top:1px solid #f0f1f4;padding-top:12px;text-align:center}
.dn-kaki div + div{border-left:1px solid #f0f1f4}
.dn-kaki small{display:block;font-size:.72rem;color:var(--muted)}
.dn-kaki b{font-size:1.1rem;font-weight:800}
@media (max-width:560px){
  .dn{grid-template-columns:1fr;justify-items:center}
  .dn-legend{width:100%}
}

/* =========================================================
   DIAGRAM BATANG TREN
   ========================================================= */
.tr-badge{font-size:.74rem;font-weight:700;padding:6px 10px;border-radius:999px;background:#fff3e0;color:#b25e00}
.tr-chart{display:grid;grid-template-columns:auto 1fr;gap:8px;height:150px}
.tr-garis{display:flex;flex-direction:column-reverse;justify-content:space-between;font-size:.64rem;color:var(--faint,#9aa3ab);padding-bottom:2px}
.tr-bar-wrap{display:grid;grid-template-columns:repeat(20,1fr);gap:4px;align-items:end;border-bottom:1px solid #eceef2;
  background:repeating-linear-gradient(to top, transparent 0 calc(50% - 1px), #f1f3f5 calc(50% - 1px) 50%)}
.tr-bar{height:100%;display:flex;align-items:flex-end}
.tr-bar i{display:block;width:100%;border-radius:6px 6px 2px 2px;min-height:4px}
.tr-bar.ok i{background:#cfe5da}
.tr-bar.telat i{background:#e0a21b}
.tr-bar.libur i{background:#eef0f3}
.tr-ket{display:inline-flex;align-items:center;gap:6px}
.tr-ket i{display:inline-block;width:9px;height:9px;border-radius:3px}
.tr-ket i.ok{background:#cfe5da} .tr-ket i.telat{background:#e0a21b} .tr-ket i.libur{background:#eef0f3}