/* Edu-Katik Giriloyo — tampilan portal. Palet nila (indigo) & soga, tema gelap (bawaan) & terang. */
:root{
  --bg:#0c1022;--bg2:#10152b;--card:#131a33;--card2:#18203d;--line:#232c4d;--line2:#2d3860;
  --ink:#eceffa;--ink2:#c6cbe3;--mut:#8a92b5;--track:#222a48;
  --teal:#e0a84e;--teal2:#c98f33;--on-teal:#2a1a04;--green:#22c55e;--green2:#16a34a;--lime:#f2c46d;
  --indigo:#6c7cf5;--violet:#8b5cf6;--blue:#3b82f6;--amber:#f5b400;--orange:#f97316;--pink:#ec4899;--red:#ef4444;--rose:#f43f5e;
  --nila:#1d2a64;--nila2:#2d3f96;--soga:#8a5a2b;--daun:#3f9a6b;
  --sb1:#1d2a64;--sb2:#141d47;--sb-ink:#eef0ff;--sb-mut:#aab4e6;
  --r:16px;--r2:12px;--sh:0 10px 30px rgba(0,0,0,.28);
  --font:'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
[data-theme=light]{
  --bg:#f4f1ea;--bg2:#ede8dd;--card:#ffffff;--card2:#faf7f1;--line:#e6dfd2;--line2:#d9d0bf;
  --ink:#1c1a2e;--ink2:#3d3a52;--mut:#6f6a80;--track:#ebe5d8;--sh:0 8px 24px rgba(40,30,10,.08);
  --teal:#a8641a;--teal2:#8a5214;--on-teal:#ffffff;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);font-size:15px;line-height:1.55}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.25}
p{margin:0 0 .8em}
small{font-size:.8em}
.mut{color:var(--mut)}
.pad{padding:12px 14px;margin:0}
.ic{flex:none;vertical-align:middle}
[hidden]{display:none!important}
.inline{display:inline}
.row{display:flex;gap:8px;align-items:center}
.row.wrap{flex-wrap:wrap}
.row.wrap>.row,.row.wrap>.acts{flex-shrink:0;max-width:100%}
.sp{flex:1}
.right{text-align:right}.center{text-align:center}
.nowrap{white-space:nowrap}
.mt{margin-top:16px}.mb{margin-bottom:16px}.mt0{margin-top:0}
.gap{display:grid;gap:16px}

/* ============ SIDEBAR ============ */
.sb{position:fixed;inset:0 auto 0 0;width:268px;background:linear-gradient(180deg,var(--sb1),var(--sb2));color:var(--sb-ink);display:flex;flex-direction:column;z-index:40;transition:transform .25s;box-shadow:4px 0 24px rgba(0,0,0,.18)}
.sb-brand{display:flex;flex-direction:column;align-items:center;text-align:center;padding:22px 16px 14px;gap:6px;color:inherit}
.sb-brand:hover{text-decoration:none}
.sb-name{font-size:1.45rem;font-weight:800;color:#fff;letter-spacing:-.01em;margin-top:4px}
.sb-name span{color:var(--lime)}
.sb-tag{font-size:.64rem;letter-spacing:.12em;color:var(--sb-mut);font-weight:600;line-height:1.35}
.sb-role{background:rgba(224,168,78,.25);border:1px solid rgba(242,196,109,.35);color:#eafff9;font-size:.64rem;font-weight:700;letter-spacing:.06em;padding:4px 12px;border-radius:999px;margin-top:4px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-nav{flex:1;overflow-y:auto;padding:6px 12px 12px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
.sb-sec{font-size:.66rem;letter-spacing:.14em;font-weight:700;color:var(--sb-mut);padding:14px 12px 6px}
.sb-a{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:12px;color:var(--sb-ink);font:inherit;font-size:.95rem;background:none;border:0;cursor:pointer;text-align:left;position:relative;margin:1px 0}
.sb-a:hover{background:rgba(255,255,255,.08);text-decoration:none}
.sb-a.on{background:rgba(255,255,255,.14);box-shadow:inset 4px 0 0 var(--lime);font-weight:600}
.sb-a.hl{background:rgba(0,0,0,.14);font-weight:700}
.sb-a span{flex:1;min-width:0}
.sb-dot{width:9px;height:9px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px rgba(245,180,0,.18)}
.sb-grp .chev{transition:transform .2s;opacity:.8}
.sb-grp.open .chev{transform:rotate(180deg)}
.sb-kids{display:none;margin:2px 0 6px 12px;padding-left:10px;border-left:1px solid rgba(255,255,255,.14)}
.sb-grp.open .sb-kids{display:block}
.sb-grp.open>.sb-t{background:rgba(255,255,255,.06)}
.sb-k{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:10px;color:var(--sb-ink);font-size:.86rem;opacity:.88}
.sb-k:hover{background:rgba(255,255,255,.08);text-decoration:none;opacity:1}
.sb-k.on{background:rgba(242,196,109,.16);color:#fff;font-weight:600;opacity:1;box-shadow:inset 3px 0 0 var(--lime)}
.sb-out{padding:10px 12px 16px;border-top:1px solid rgba(255,255,255,.1)}
.sb-back{display:none}
body.sb-min .sb{transform:translateX(-100%)}
body.sb-min .main{margin-left:0}

/* ============ MAIN / TOPBAR ============ */
.main{margin-left:268px;min-height:100vh;display:flex;flex-direction:column;transition:margin .25s}
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;padding:10px 22px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-t{font-size:1.12rem;margin:0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.top-r{display:flex;align-items:center;gap:10px}
.ibtn{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--card);border:1px solid var(--line);color:var(--ink2);cursor:pointer;padding:0;font:inherit}
.ibtn:hover{border-color:var(--teal);color:var(--teal)}
.ibtn.sm{width:32px;height:32px;border-radius:10px}
.dot-n{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;border-radius:9px;background:var(--green);color:#052e16;font-size:.66rem;font-weight:800;display:grid;place-items:center;padding:0 4px;font-style:normal;border:2px solid var(--bg)}
[data-theme=dark] .i-moon,[data-theme=light] .i-sun{display:none}
.abs-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;background:linear-gradient(135deg,#1d2a64,#2d3f96);border:2px solid var(--teal);color:#fff;font-weight:700;box-shadow:0 0 0 4px rgba(224,168,78,.12)}
.abs-btn:hover{text-decoration:none;filter:brightness(1.1)}
.abs-btn.on .ic{color:var(--lime)}
.who{text-align:right;line-height:1.2;padding-left:12px;border-left:1px solid var(--line);max-width:230px}
.who b{display:block;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who small{color:var(--teal);font-weight:700;font-size:.66rem;letter-spacing:.06em}
.av{border-radius:50%;object-fit:cover;flex:none;display:inline-block;background:var(--card2)}
.av-i{display:inline-grid;place-items:center;color:#fff;font-weight:700}
.av-btn{background:none;border:0;padding:0;cursor:pointer;border-radius:50%;box-shadow:0 0 0 2px var(--line2)}
.content{padding:22px 26px 30px;flex:1;width:100%;max-width:1480px;margin:0 auto}
.foot{text-align:center;color:var(--mut);font-size:.8rem;padding:18px;border-top:1px solid var(--line)}

/* dropdown */
.dd{position:relative}
.dd-m{position:absolute;right:0;top:calc(100% + 10px);min-width:240px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);display:none;z-index:60;overflow:hidden}
.dd.open .dd-m{display:block}
.dd-m>a,.dd-btn{display:flex;align-items:center;gap:10px;padding:10px 14px;color:var(--ink);font:inherit;font-size:.9rem;background:none;border:0;width:100%;text-align:left;cursor:pointer}
.dd-m>a:hover,.dd-btn:hover{background:var(--card2);text-decoration:none}
.dd-m form{display:block}
.dd-h{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.dd-h small{color:var(--mut)}
.dd-notif{width:340px}
.dd-notif .dd-h{flex-direction:row;justify-content:space-between;align-items:center}
.nt{display:flex!important;flex-direction:column;align-items:flex-start!important;gap:2px!important;border-bottom:1px solid var(--line)}
.nt span{font-size:.86rem;line-height:1.35}
.nt small{color:var(--mut)}
.nt.new{background:color-mix(in srgb,var(--teal) 8%,transparent)}
.nt.new span{font-weight:600}
.dd-f{justify-content:center;color:var(--teal)!important;font-weight:600}

/* ============ KOMPONEN ============ */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;min-width:0}
.card+.card{margin-top:0}
.card-h{display:flex;align-items:center;gap:10px;margin:-2px 0 14px;flex-wrap:wrap}
.card-h h3{margin:0;font-size:1.02rem;display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.card-h h3 .ic{color:var(--teal)}
.card-h .sub{width:100%;color:var(--mut);font-size:.82rem;margin-top:-8px}
.card.flat{padding:0;overflow:hidden}
.card.flat>.card-h{padding:16px 18px 0}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.g6{grid-template-columns:repeat(6,minmax(0,1fr))}
.split{display:grid;grid-template-columns:360px minmax(0,1fr);gap:18px;align-items:start}
.split.r{grid-template-columns:minmax(0,1fr) 360px}
.split.w{grid-template-columns:420px minmax(0,1fr)}
.stack{display:grid;gap:18px}
.sec-t{display:flex;align-items:center;gap:8px;font-size:1rem;font-weight:700;margin:22px 0 12px}
.sec-t .ic{color:var(--teal)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:12px;border:0;background:var(--teal);color:var(--on-teal);font:inherit;font-weight:700;cursor:pointer;font-size:.92rem;white-space:nowrap;text-decoration:none!important}
.btn:hover{filter:brightness(1.08)}
.btn.sm{padding:6px 12px;font-size:.82rem;border-radius:10px}
.btn.lg{padding:13px 22px;font-size:1rem}
.btn.ghost{background:var(--card2);color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--teal);color:var(--teal)}
.btn.green{background:var(--green);color:#052e16}
.btn.indigo{background:var(--indigo);color:#fff}
.btn.danger{background:var(--red);color:#fff}
.btn.amber{background:var(--amber);color:#3a2a00}
.btn.white{background:#fff;color:#1d2a64}
.btn.block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-i{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--card2);border:1px solid var(--line);color:var(--ink2);cursor:pointer;padding:0}
.btn-i:hover{color:var(--teal);border-color:var(--teal);text-decoration:none}
.btn-i.danger:hover{color:var(--red);border-color:var(--red)}
.lnk{background:none;border:0;color:var(--teal);cursor:pointer;font:inherit;padding:0;font-weight:600}
.lnk.sm{font-size:.8rem}
.acts{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap}

/* formulir */
label,.fl{display:block;font-size:.8rem;font-weight:600;color:var(--ink2);margin-bottom:14px;letter-spacing:.01em}
label em,.fl em{color:var(--rose);font-style:normal}
input,select,textarea{display:block;width:100%;margin-top:6px;padding:10px 12px;background:var(--bg2);color:var(--ink);border:1px solid var(--line2);border-radius:11px;font:inherit;font-size:.92rem;font-weight:400}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(224,168,78,.18)}
input[type=checkbox],input[type=radio]{width:auto;display:inline-block;margin:0;accent-color:var(--teal)}
input[type=color]{padding:4px;height:42px}
textarea{min-height:96px;resize:vertical}
.hint{display:block;font-weight:400;color:var(--mut);font-size:.76rem;margin-top:4px}
.fg2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.fg3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 14px}
.chk{display:flex;align-items:center;gap:8px;font-weight:500;font-size:.88rem;padding:9px 12px;border:1px solid var(--line2);border-radius:10px;background:var(--bg2);cursor:pointer;margin:0}
.chk:has(input:checked){border-color:var(--teal);background:color-mix(in srgb,var(--teal) 10%,var(--bg2))}
.chks{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin:6px 0 14px}
.fsec{font-size:.78rem;letter-spacing:.08em;font-weight:800;color:var(--teal);margin:6px 0 12px;display:flex;gap:8px;align-items:center;text-transform:uppercase}
.drop{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px;margin-top:6px;border:1.5px dashed var(--line2);border-radius:12px;background:var(--bg2);color:var(--mut);text-align:center;cursor:pointer}
.drop:hover{border-color:var(--teal);color:var(--teal)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.drop-t{color:var(--indigo);font-weight:700}
.drop.has .drop-t{color:var(--green)}
.cur{display:block;margin-top:6px;font-weight:400}
.form-a{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:6px}
.seg{display:inline-flex;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:4px;gap:4px;flex-wrap:wrap}
.seg a,.seg button{padding:7px 14px;border-radius:9px;color:var(--ink2);font-size:.84rem;font-weight:600;background:none;border:0;cursor:pointer;font-family:inherit}
.seg a.on,.seg button.on{background:var(--teal);color:var(--on-teal);text-decoration:none}
.seg a:hover{text-decoration:none}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.filters label{margin:0;min-width:150px}
.filters input,.filters select{margin-top:4px}
.search{position:relative;flex:1;min-width:200px}
.search .ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--mut)}
.search input{padding-left:38px;margin:0}

/* tabel */
.tbl-w{overflow-x:auto;margin:0 -2px}
table.tbl{width:100%;border-collapse:collapse;font-size:.88rem}
.tbl th{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);font-weight:700;text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--card2)}
.tbl td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:hover td{background:color-mix(in srgb,var(--card2) 60%,transparent)}
.tbl .t-main{font-weight:600;display:block}
.tbl .t-sub{display:block;color:var(--mut);font-size:.78rem}
.tbl td.num,.tbl th.num{text-align:right}
.person{display:flex;gap:10px;align-items:center}
.person b{display:block;font-size:.88rem}
.person small{color:var(--mut)}

.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:.72rem;font-weight:700;white-space:nowrap;background:var(--card2);color:var(--ink2);border:1px solid var(--line)}
.pill.ok{background:rgba(34,197,94,.14);color:#4ade80;border-color:rgba(34,197,94,.3)}
.pill.warn{background:rgba(245,180,0,.14);color:#fbbf24;border-color:rgba(245,180,0,.3)}
.pill.bad{background:rgba(239,68,68,.14);color:#f87171;border-color:rgba(239,68,68,.3)}
.pill.info{background:rgba(91,91,240,.16);color:#a5b4fc;border-color:rgba(91,91,240,.35)}
.pill.teal{background:rgba(224,168,78,.14);color:var(--teal);border-color:rgba(224,168,78,.3)}
[data-theme=light] .pill.ok{color:#15803d}[data-theme=light] .pill.warn{color:#a16207}[data-theme=light] .pill.bad{color:#b91c1c}[data-theme=light] .pill.info{color:#4338ca}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;background:var(--card2);border:1px solid var(--line);color:var(--ink2);font-size:.78rem;font-weight:600}
.chip:hover{color:var(--teal);border-color:var(--teal);text-decoration:none}
.tag{display:inline-block;padding:2px 8px;border-radius:6px;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--indigo);color:#fff}
.tag.teal{background:var(--teal);color:var(--on-teal)}.tag.amber{background:var(--amber);color:#3a2a00}.tag.pink{background:var(--pink)}.tag.mut{background:var(--card2);color:var(--mut);border:1px solid var(--line)}

.alert{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;margin-bottom:14px;font-size:.9rem;border:1px solid}
.alert span{flex:1}
.alert.ok{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.35);color:#86efac}
.alert.bad{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.35);color:#fca5a5}
.alert.warn{background:rgba(245,180,0,.12);border-color:rgba(245,180,0,.35);color:#fde68a}
.alert.info{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.35);color:#bfdbfe}
[data-theme=light] .alert.ok{color:#166534}[data-theme=light] .alert.bad{color:#991b1b}[data-theme=light] .alert.warn{color:#854d0e}[data-theme=light] .alert.info{color:#1e40af}
.alert .x{background:none;border:0;color:inherit;cursor:pointer;opacity:.7}
.alert a{color:inherit;font-weight:700;text-decoration:underline}

.empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:34px 16px;color:var(--mut);text-align:center}
.empty-ic{width:64px;height:64px;border-radius:50%;background:var(--card2);display:grid;place-items:center;margin-bottom:6px;color:var(--mut)}
.empty b{color:var(--ink2);font-weight:600}
.empty.sm{padding:18px}

.pager{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:14px}
.pager a{min-width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:var(--card2);border:1px solid var(--line);color:var(--ink2);font-weight:600;font-size:.85rem;padding:0 8px}
.pager a.on{background:var(--teal);color:var(--on-teal);border-color:var(--teal)}
.pager a:hover{text-decoration:none;border-color:var(--teal)}
.pager span{margin-left:auto;color:var(--mut);font-size:.8rem}

/* kartu statistik */
.stat{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;color:var(--ink);min-width:0}
a.stat:hover{text-decoration:none;border-color:var(--teal)}
.stat-l{display:block;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.stat-v{display:block;font-size:1.9rem;font-weight:800;line-height:1.15;margin-top:4px}
.stat small{color:var(--mut);font-size:.72rem}
.stat-i{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;flex:none}
.t-teal .stat-v{color:var(--teal)}.t-teal .stat-i{background:rgba(224,168,78,.14);color:var(--teal)}
.t-indigo .stat-v{color:#8b8cf8}.t-indigo .stat-i{background:rgba(91,91,240,.16);color:#8b8cf8}
.t-green .stat-v{color:#34d399}.t-green .stat-i{background:rgba(52,211,153,.14);color:#34d399}
.t-pink .stat-v{color:#f472b6}.t-pink .stat-i{background:rgba(236,72,153,.15);color:#f472b6}
.t-amber .stat-v{color:#fbbf24}.t-amber .stat-i{background:rgba(245,180,0,.15);color:#fbbf24}
.t-red .stat-v{color:#f87171}.t-red .stat-i{background:rgba(239,68,68,.15);color:#f87171}
.t-blue .stat-v{color:#60a5fa}.t-blue .stat-i{background:rgba(59,130,246,.15);color:#60a5fa}
.t-solid{background:linear-gradient(135deg,#16a34a,#22c55e);border-color:transparent;color:#fff}
.t-solid .stat-l,.t-solid small{color:rgba(255,255,255,.85)}.t-solid .stat-v{color:#fff}.t-solid .stat-i{background:rgba(255,255,255,.2);color:#fff}

/* hero halaman */
.hero-b{position:relative;overflow:hidden;display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:26px 28px;border-radius:22px;background:linear-gradient(120deg,#1d2a64 0%,#2d3f96 48%,#5a4a8a 76%,#8a5a2b 100%);color:#fff;margin-bottom:18px;box-shadow:var(--sh)}
.hero-b::after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%)}
.hero-b>div{position:relative;z-index:1;max-width:760px}
.hero-b h2{font-size:1.65rem;margin:6px 0 6px;display:flex;align-items:center;gap:10px;font-weight:800}
.hero-b p{margin:0;opacity:.9;font-size:.92rem}
.kicker{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.04em;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22)}
.hero-a{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hero-a select{background:rgba(0,0,0,.25);color:#fff;border-color:rgba(255,255,255,.25);margin:0;width:auto;min-width:130px}
.hero-a select option{color:#000}

/* tab */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.tabs a{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--ink2);font-size:.86rem;font-weight:600}
.tabs a:hover{text-decoration:none;border-color:var(--teal)}
.tabs a.on{background:var(--teal);border-color:var(--teal);color:var(--on-teal)}
.utabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:14px;gap:4px;flex-wrap:wrap}
.utabs a{padding:10px 16px;color:var(--mut);font-weight:600;font-size:.9rem;border-bottom:2px solid transparent;margin-bottom:-1px}
.utabs a.on{color:var(--teal);border-color:var(--teal)}
.utabs a:hover{text-decoration:none;color:var(--ink)}

/* modal */
.modal{position:fixed;inset:0;background:rgba(3,10,14,.66);backdrop-filter:blur(3px);z-index:80;display:grid;place-items:center;padding:16px;overflow-y:auto}
.modal-c{background:var(--card);border:1px solid var(--line);border-radius:18px;width:100%;max-width:640px;box-shadow:0 20px 60px rgba(0,0,0,.4);max-height:calc(100vh - 32px);overflow-y:auto}
.modal-c.sm{max-width:420px}.modal-c.lg{max-width:920px}
.modal-h{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card);z-index:2}
.modal-b{padding:18px 20px}
.modal-h.blue{background:linear-gradient(90deg,#2340c9,#3b5bdb);color:#fff;border:0}

/* grafik */
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .ax{fill:var(--mut);font-size:11px;font-family:var(--font)}
.donut .d-c{fill:var(--ink);font-size:26px;font-weight:800;font-family:var(--font)}
.donut .d-s{fill:var(--mut);font-size:9px;font-weight:700;letter-spacing:.1em;font-family:var(--font);text-transform:uppercase}
.donut-w{display:flex;flex-direction:column;align-items:center;gap:14px}
.legend{display:flex;gap:8px 14px;flex-wrap:wrap;justify-content:center;font-size:.78rem;color:var(--ink2)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.mini-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%}
.mini-stats div{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:6px;text-align:center}
.mini-stats small{display:block;font-size:.62rem;color:var(--mut);font-weight:700}
.mini-stats b{font-size:1.05rem}
.hbars{display:grid;gap:10px}
.hb{display:grid;grid-template-columns:150px 1fr 44px;gap:10px;align-items:center;font-size:.86rem}
.hb-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-t{height:12px;background:var(--track);border-radius:99px;overflow:hidden;display:block}
.hb-t i{display:block;height:100%;border-radius:99px}
.hb b{text-align:right}
.bar-p{height:8px;background:var(--track);border-radius:99px;overflow:hidden}
.bar-p i{display:block;height:100%;border-radius:99px;background:var(--teal)}

/* ============ DASHBOARD ============ */
.welcome{display:flex;align-items:center;gap:22px;padding:24px 28px;border-radius:24px;background:linear-gradient(110deg,#1d2a64,#2d3f96 55%,#8a5a2b);color:#fff;margin-bottom:22px;box-shadow:0 14px 40px rgba(29,42,100,.28);flex-wrap:wrap}
.welcome .av{box-shadow:0 0 0 4px rgba(255,255,255,.35)}
.welcome small{opacity:.9}
.welcome h2{font-size:1.9rem;margin:2px 0 8px;font-weight:800}
.welcome .chips{display:flex;gap:8px;flex-wrap:wrap}
.welcome .chips span{display:inline-flex;gap:6px;align-items:center;background:rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.2);padding:4px 10px;border-radius:8px;font-size:.76rem;font-weight:700}
.presence{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0}
.presence label{margin:0}
.presence input{position:absolute;opacity:0;pointer-events:none}
.presence span{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 10px;border-radius:12px;border:1px solid var(--line2);background:var(--bg2);cursor:pointer;font-weight:600;font-size:.85rem;color:var(--ink2);transition:.15s}
.presence span:hover{border-color:var(--teal)}
.presence input:checked+span{background:var(--green);border-color:#86efac;color:#fff;box-shadow:0 0 0 3px rgba(34,197,94,.25)}
.presence .p-sibuk input:checked+span{background:var(--amber);border-color:#fde68a;color:#3a2a00}
.presence .p-dinas input:checked+span{background:var(--blue);border-color:#bfdbfe}
.presence .p-tidak input:checked+span{background:#475569;border-color:#94a3b8}
.st-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;background:#64748b}
.st-dot.hadir{background:var(--green)}.st-dot.sibuk{background:var(--amber)}.st-dot.dinas{background:var(--blue)}
.ann{display:flex;gap:14px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--card2);align-items:flex-start;margin-bottom:10px}
.ann-d{width:52px;flex:none;text-align:center;border-radius:12px;background:var(--card);border:1px solid var(--line);padding:6px 0;line-height:1.1}
.ann-d small{display:block;font-size:.66rem;font-weight:800;color:var(--teal);letter-spacing:.06em}
.ann-d b{font-size:1.2rem;color:var(--teal)}
.ann h4{margin:0 0 2px;font-size:.92rem;text-transform:uppercase}
.ann p{margin:0;color:var(--mut);font-size:.8rem}
.todo{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.todo:last-child{border:0}
.todo .n{margin-left:auto}

/* ============ KINERJA ============ */
.readonly{display:flex;gap:14px;align-items:center;padding:14px 18px;border:1px solid var(--line);background:var(--card);border-radius:14px;margin-bottom:18px;flex-wrap:wrap}
.readonly .ic-b{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--card2);color:var(--mut)}
.readonly div{flex:1;min-width:200px}
.readonly small{color:var(--mut)}
.adm{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.adm small{color:var(--amber);font-weight:700}
.ss{border:1px solid var(--line);border-radius:16px;margin-bottom:14px;background:var(--card);overflow:hidden}
.ss-h{display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;user-select:none}
.ss-k{background:var(--green);color:#052e16;font-weight:800;font-size:.8rem;padding:5px 10px;border-radius:9px}
.ss-h h4{margin:0;font-size:1rem}
.ss-h small{color:var(--mut)}
.ss-h .cap{margin-left:auto;color:var(--green);font-weight:700;font-size:.82rem;white-space:nowrap}
.ss-b{display:none;border-top:1px solid var(--line)}
.ss.open .ss-b{display:block}
.ss .chev{transition:transform .2s}
.ss.open .chev{transform:rotate(180deg)}
.ind-k{font-family:ui-monospace,Menlo,monospace;color:var(--teal);font-weight:700;font-size:.82rem;white-space:nowrap}
.ind-do{margin-top:8px;padding:8px 10px;border-radius:9px;background:var(--card2);font-size:.76rem;color:var(--mut)}
.ind-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.ind-meta span{font-size:.68rem;padding:2px 8px;border-radius:6px;background:rgba(91,91,240,.14);color:#a5b4fc;font-weight:700}
.ind-meta span.p{background:rgba(224,168,78,.14);color:var(--teal)}
.real{font-weight:800;color:var(--green)}
.real.bad{color:var(--rose)}.real.mid{color:var(--amber)}.real.none{color:var(--mut);font-weight:500}

/* ============ AKADEMIK ============ */
.mhs-card{display:flex;gap:12px;align-items:center;padding:12px;border-radius:14px;border:1px solid var(--line);background:var(--card2);margin-bottom:10px;color:var(--ink)}
.mhs-card:hover{border-color:var(--teal);text-decoration:none}
.mhs-card.on{background:color-mix(in srgb,var(--teal) 16%,var(--card2));border-color:var(--teal)}
.mhs-card b{display:block;font-size:.9rem}
.mhs-card code{font-size:.72rem;color:var(--mut)}
.mhs-card .tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.mhs-card .tags span{font-size:.64rem;padding:2px 7px;border-radius:5px;font-weight:700;background:var(--card);border:1px solid var(--line);color:var(--ink2)}
.mhs-card .tags .y{background:#fde68a;color:#713f12;border:0}.mhs-card .tags .g{background:#bbf7d0;color:#14532d;border:0}.mhs-card .tags .k{background:#1e293b;color:#fff;border:0}
.list-scroll{max-height:640px;overflow-y:auto;padding-right:4px}
.inbox{display:grid;grid-template-columns:220px minmax(0,1fr);gap:18px}
.inbox-nav a{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:10px;color:var(--ink2);font-size:.88rem;font-weight:600;margin-bottom:4px}
.inbox-nav a.on{background:var(--indigo);color:#fff}
.inbox-nav a:hover{text-decoration:none;background:var(--card2)}
.inbox-nav a.on:hover{background:var(--indigo)}
.inbox-nav .n{font-size:.72rem;padding:1px 8px;border-radius:99px;background:rgba(255,255,255,.14)}
.msg{padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--card2);margin-bottom:10px}
.msg.me{border-color:rgba(224,168,78,.35);background:color-mix(in srgb,var(--teal) 7%,var(--card2))}
.msg-h{display:flex;gap:10px;align-items:center;margin-bottom:6px;font-size:.84rem}
.msg-h small{color:var(--mut);margin-left:auto}
.soap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.soap div{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:12px}
.soap b{display:block;color:var(--teal);font-size:.76rem;letter-spacing:.08em;margin-bottom:4px}
.kv{display:grid;grid-template-columns:150px 1fr;gap:6px 12px;font-size:.88rem}
.kv dt{color:var(--mut)}
.kv dd{margin:0;font-weight:500}
.timeline{position:relative;padding-left:22px}
.timeline::before{content:"";position:absolute;left:7px;top:4px;bottom:4px;width:2px;background:var(--line)}
.tl{position:relative;margin-bottom:14px}
.tl::before{content:"";position:absolute;left:-20px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--card);border:2px solid var(--teal)}
.tl.ok::before{background:var(--green);border-color:var(--green)}
.tl.bad::before{background:var(--rose);border-color:var(--rose)}

/* repositori */
.repo{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
.rc{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;color:var(--ink);transition:.18s}
.rc:hover{transform:translateY(-3px);border-color:var(--indigo);text-decoration:none;box-shadow:var(--sh)}
.rc-cv{position:relative;aspect-ratio:3/4;background:linear-gradient(160deg,#4338ca,#6d28d9 60%,#7c3aed);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px;text-align:center;color:#e0e7ff;overflow:hidden}
.rc-cv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rc-cv .ic{opacity:.85}
.rc-cv .ty{font-size:.66rem;letter-spacing:.3em;font-weight:800;margin:10px 0 8px;opacity:.8}
.rc-cv p{font-size:.78rem;opacity:.75;margin:0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.rc-cv::after{content:"";position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(transparent,rgba(9,14,30,.92))}
.rc-in{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;text-align:left}
.rc-in .tag{margin-bottom:6px}
.rc-in h4{margin:0;font-size:.82rem;color:#fff;text-transform:uppercase;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rc-f{display:flex;gap:8px;align-items:center;padding:10px 12px;font-size:.78rem}
.rc-f b{display:block;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-f small{color:var(--mut)}
.rc-f>div{min-width:0}

/* ujian */
.course{margin-bottom:26px}
.course-h{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.course-h h3{margin:0}
.lvls{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.lvl{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:16px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.lvl:hover{border-color:var(--teal);text-decoration:none}
.lvl .lv-n{font-size:.7rem;font-weight:800;letter-spacing:.14em;color:var(--mut)}
.lvl h4{margin:0;font-size:1rem}
.lvl.lock{opacity:.55}
.lvl.done{border-color:rgba(34,197,94,.45)}
.lvl .lv-i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--card2)}
.lvl .lv-s{margin-top:auto;font-size:.8rem;font-weight:700}
.exam{max-width:760px;margin:0 auto}
.ex-top{display:flex;align-items:center;gap:14px;background:#111a22;border:1px solid var(--line);padding:12px 16px;border-radius:14px;position:sticky;top:72px;z-index:5}
.ex-bar{flex:1;height:8px;background:var(--track);border-radius:99px;overflow:hidden}
.ex-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--indigo));width:100%;transition:width 1s linear}
.ex-time{font-weight:800;font-variant-numeric:tabular-nums;background:#0b1419;color:#fff;padding:6px 12px;border-radius:9px}
.ex-q{margin-top:18px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px;border-top:4px solid var(--indigo)}
.ex-q h3{font-size:1.2rem;font-weight:600;line-height:1.5}
.opt{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:12px;border:1px solid var(--line2);background:var(--bg2);margin:0 0 10px;cursor:pointer;font-size:.95rem;font-weight:500;color:var(--ink)}
.opt:hover{border-color:var(--teal)}
.opt input{margin-top:3px}
.opt:has(input:checked){border-color:var(--teal);background:color-mix(in srgb,var(--teal) 14%,var(--bg2))}
.opt b{width:26px;height:26px;border-radius:8px;background:var(--card);display:grid;place-items:center;flex:none;font-size:.8rem}
.qnav{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.qnav button{width:36px;height:36px;border-radius:9px;border:1px solid var(--line);background:var(--card2);color:var(--ink2);font:inherit;font-weight:700;cursor:pointer}
.qnav button.ans{background:var(--teal);color:var(--on-teal);border-color:var(--teal)}
.qnav button.cur{box-shadow:0 0 0 2px var(--indigo)}

/* booking & kalender */
.legend-b{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:.76rem}
.legend-b span{display:inline-flex;gap:6px;align-items:center;padding:4px 10px;border-radius:99px;background:var(--card2);border:1px solid var(--line);font-weight:600}
.legend-b i{width:9px;height:9px;border-radius:50%}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cal .h{background:var(--card2);text-align:center;font-weight:700;font-size:.74rem;letter-spacing:.08em;padding:9px 4px;color:var(--mut);text-transform:uppercase;border-bottom:1px solid var(--line)}
.cal .d{min-height:112px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:6px;font-size:.74rem;position:relative;background:var(--card)}
.cal .d:nth-child(7n){border-right:0}
.cal .d.x{background:var(--bg2);opacity:.55}
.cal .d.today{box-shadow:inset 0 0 0 2px var(--teal)}
.cal .d .n{font-weight:700;color:var(--ink2);display:flex;justify-content:space-between;align-items:center}
.cal .d .n a{color:var(--mut);opacity:0;font-size:.9rem}
.cal .d:hover .n a{opacity:1}
.cal .ev{display:block;margin-top:4px;padding:3px 6px;border-radius:6px;font-size:.68rem;line-height:1.3;border-left:3px solid;background:var(--card2);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.cal .ev:hover{text-decoration:none;filter:brightness(1.15)}
.cal .ev.menunggu{border-color:var(--amber)!important;background:rgba(245,180,0,.12)}
.cal .full{display:block;margin-top:4px;background:var(--red);color:#fff;font-size:.62rem;font-weight:800;text-align:center;border-radius:5px;padding:2px}
.cal-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.cal-nav h3{margin:0 auto;font-size:1.15rem}
.week{display:grid;grid-template-columns:60px repeat(7,minmax(0,1fr));border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:.72rem}
.week>div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:44px;padding:3px;position:relative}
.agenda-l .it{display:flex;gap:12px;padding:12px;border-radius:12px;border:1px solid var(--line);margin-bottom:8px;background:var(--card2);align-items:center}
.agenda-l .it .tm{font-weight:800;color:var(--teal);width:110px;flex:none;font-size:.86rem}

/* pusat data */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.cat{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:16px;background:var(--card);border:1px solid var(--line);color:var(--ink);min-height:128px}
.cat:hover{border-color:var(--indigo);text-decoration:none}
.cat.on{border-color:var(--indigo);background:color-mix(in srgb,var(--indigo) 12%,var(--card))}
.cat .ci{width:44px;height:44px;border-radius:12px;background:#fff;color:var(--indigo);display:grid;place-items:center}
.cat.on .ci{background:var(--indigo);color:#fff}
.cat .ct{position:absolute;top:16px;right:16px;font-size:.72rem;font-weight:700;color:var(--mut)}
.cat b{margin-top:auto}
.cat small{color:var(--mut)}

/* pakta */
.pakta{max-width:760px;margin:0 auto;text-align:center}
.pakta h1{font-family:'Playfair Display',Georgia,serif;font-size:2.4rem;line-height:1.1;margin:10px 0}
.pakta h1 span{color:#c0262d;display:block}
.cert{background:#fff;color:#1e293b;border-radius:18px;border-top:4px solid #c0262d;padding:28px;text-align:left;box-shadow:0 20px 50px rgba(0,0,0,.25);margin-top:20px}
.cert h3{letter-spacing:.08em;font-size:1.05rem;margin:0}
.cert .ok-t{color:#16a34a;font-weight:700;font-size:.8rem}
.cert .idr{float:right;text-align:right;font-family:ui-monospace,Menlo,monospace;font-size:.8rem}
.cert .idr small{display:block;color:#64748b;font-size:.62rem}
.cert .who-c{display:flex;gap:14px;align-items:center;background:#f8fafc;border-radius:12px;padding:14px;margin:16px 0}
.cert .audit{display:grid;grid-template-columns:1fr 1fr;gap:10px;background:#eff6ff;border-radius:12px;padding:12px 14px;font-family:ui-monospace,Menlo,monospace;font-size:.76rem}
.cert .audit b{display:block;font-size:.7rem}
.cert ol{padding-left:20px;font-size:.9rem}
.cert .ttd{display:flex;justify-content:flex-end;margin-top:14px;font-size:.85rem;text-align:center}

/* presensi */
.absen{max-width:460px;margin:0 auto}
.abs-card{border-radius:24px;padding:22px;background:linear-gradient(145deg,#1e1b4b,#312e81 55%,#3730a3);color:#fff;box-shadow:0 20px 50px rgba(49,46,129,.35)}
.abs-card .hi{font-size:.7rem;letter-spacing:.14em;font-weight:800;opacity:.75}
.abs-card h2{font-size:1.35rem;margin:2px 0}
.abs-tip{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.1);border-radius:14px;padding:10px 12px;margin:14px 0;font-size:.8rem}
.abs-tip b{display:block;color:#fde68a;font-size:.72rem;letter-spacing:.08em}
.abs-clock{display:flex;justify-content:space-between;align-items:flex-end}
.abs-clock small{display:block;font-size:.62rem;letter-spacing:.14em;opacity:.7;font-weight:700}
.abs-clock .tm{font-size:1.8rem;font-weight:800;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.abs-act{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.abs-act .btn{padding:14px;border-radius:14px}
.hist .it{display:flex;gap:12px;align-items:center;padding:12px;border-radius:14px;background:var(--card);border:1px solid var(--line);margin-bottom:8px}
.hist .it .ib{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(34,197,94,.14);color:var(--green)}
.hist .it .tm{margin-left:auto;font-weight:800;color:var(--indigo)}
[data-theme=dark] .hist .it .tm{color:#a5b4fc}
.quote{text-align:center;padding:14px;border-radius:14px;background:#0f172a;color:#e2e8f0;font-style:italic;font-size:.86rem;margin-top:16px}

/* chat */
.fab{position:fixed;right:22px;bottom:22px;display:flex;gap:12px;align-items:center;z-index:50}
.lang-pill{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;background:#1d2a64;color:#fff;font-weight:800;font-size:.8rem;border:2px solid var(--teal);box-shadow:var(--sh)}
.lang-pill:hover{text-decoration:none}
.fab-chat{width:54px;height:54px;border-radius:50%;border:0;background:var(--teal);color:var(--on-teal);display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 30px rgba(224,168,78,.4)}
.chat{position:fixed;right:22px;bottom:90px;width:370px;max-width:calc(100vw - 24px);height:520px;max-height:calc(100vh - 120px);background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.45);z-index:70;display:flex;flex-direction:column;overflow:hidden}
.chat-h{display:flex;gap:10px;align-items:center;padding:12px 14px;background:linear-gradient(90deg,#1d2a64,#2d3f96);color:#fff}
.chat-h div{flex:1;line-height:1.2}
.chat-h small{font-size:.66rem;opacity:.9;letter-spacing:.06em}
.chat-h .ibtn{background:rgba(255,255,255,.14);border:0;color:#fff}
.chat-ic{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.18);display:grid;place-items:center}
.chat-body{flex:1;display:flex;min-height:0}
.chat-list,.chat-conv{flex:1;display:flex;flex-direction:column;min-height:0}
.chat-s{position:relative;margin:10px}
.chat-s .ic{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--mut)}
.chat-s input{margin:0;padding-left:32px}
.chat-cap{font-size:.64rem;font-weight:800;letter-spacing:.12em;color:var(--mut);padding:0 14px 6px}
.chat-contacts{overflow-y:auto;flex:1}
.cc{display:flex;gap:10px;align-items:center;padding:9px 14px;cursor:pointer;border:0;background:none;width:100%;text-align:left;color:var(--ink);font:inherit}
.cc:hover{background:var(--card2)}
.cc div{flex:1;min-width:0}
.cc b{display:block;font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc small{color:var(--mut);font-size:.74rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc .n{background:var(--green);color:#052e16;font-size:.66rem;font-weight:800;border-radius:99px;padding:1px 7px}
.cc .on-d{width:8px;height:8px;border-radius:50%;background:var(--green);display:inline-block;margin-right:4px}
.chat-ch{display:flex;gap:8px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--line)}
.chat-msgs{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:6px}
.bub{max-width:80%;padding:8px 12px;border-radius:14px;font-size:.86rem;line-height:1.4;background:var(--card2);border:1px solid var(--line);align-self:flex-start;word-wrap:break-word;white-space:pre-wrap}
.bub.me{align-self:flex-end;background:var(--teal);color:var(--on-teal);border-color:var(--teal)}
.bub small{display:block;font-size:.64rem;opacity:.7;margin-top:2px;text-align:right}
.chat-f{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
.chat-f input{margin:0}

/* kartu digital */
.idcard{margin:16px;padding:16px;border-radius:16px;background:linear-gradient(160deg,#1d2a64,#8a5a2b);color:#fff;text-align:center}
.idc-top{display:flex;gap:10px;align-items:center;text-align:left;margin-bottom:12px}
.idc-top small{display:block;opacity:.8;font-size:.7rem}
.idc-mid{display:flex;gap:12px;align-items:center;text-align:left;background:rgba(0,0,0,.18);border-radius:12px;padding:10px;margin-bottom:12px}
.idc-mid small{display:block;opacity:.85;font-size:.76rem}
.qr{background:#fff;border-radius:12px;padding:10px;display:inline-block;line-height:0}
.qr canvas,.qr svg{width:170px;height:170px}
.idcard .mut{color:rgba(255,255,255,.75);display:block;margin-top:8px}
.qr-code-f{padding:0 16px 16px}
.qr-code-f input{margin:0}

/* umum */
.kpi-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:18px}
.kpi{padding:14px 16px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.kpi small{display:flex;justify-content:space-between;font-size:.66rem;letter-spacing:.1em;font-weight:800;color:var(--mut);text-transform:uppercase}
.kpi b{display:block;font-size:1.6rem;margin-top:4px}
.kpi span{font-size:.7rem;color:var(--mut)}
.kpi.solid{background:linear-gradient(135deg,#16a34a,#22c55e);border:0;color:#fff}
.kpi.solid small,.kpi.solid span{color:rgba(255,255,255,.88)}
.kpi .bar-p{margin-top:8px;background:rgba(255,255,255,.25)}
.kpi .bar-p i{background:#fff}
.prose{font-size:.95rem;line-height:1.75}
.prose img{border-radius:12px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px}
.mag-rack{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:24px}
.mag{display:flex;flex-direction:column;gap:8px;color:var(--ink);text-align:center}
.mag:hover{text-decoration:none}
.mag .cv{aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:linear-gradient(160deg,#1d2a64,#8a5a2b);display:grid;place-items:center;color:#fff;box-shadow:0 14px 30px rgba(0,0,0,.35);transition:.2s;position:relative}
.mag:hover .cv{transform:translateY(-4px) rotate(-1deg)}
.mag .cv img{width:100%;height:100%;object-fit:cover}
.mag .ed{position:absolute;top:8px;right:8px;background:#fde68a;color:#713f12;font-size:.62rem;font-weight:800;padding:2px 6px;border-radius:5px}
.mag b{font-size:.9rem}
.mag small{color:var(--mut)}
.thread .msg-h b{font-size:.86rem}
.progress-s{display:flex;gap:4px}
.progress-s i{flex:1;height:6px;border-radius:9px;background:var(--track)}
.progress-s i.on{background:var(--teal)}
.steps{display:flex;gap:8px;flex-wrap:wrap}
.steps span{padding:6px 12px;border-radius:99px;background:var(--card2);border:1px solid var(--line);font-size:.78rem;font-weight:700;color:var(--mut)}
.steps span.on{background:var(--teal);color:var(--on-teal);border-color:var(--teal)}
.steps span.done{color:var(--green);border-color:rgba(34,197,94,.4)}
.score{font-size:3rem;font-weight:800;line-height:1}
.q-item{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px;background:var(--card2)}
.q-item.ok{border-color:rgba(34,197,94,.45)}.q-item.bad{border-color:rgba(239,68,68,.45)}
.likert{display:flex;gap:6px;flex-wrap:wrap}
.likert label{margin:0}
.likert input{position:absolute;opacity:0}
.likert span{display:grid;place-items:center;width:44px;height:38px;border-radius:10px;border:1px solid var(--line2);background:var(--bg2);cursor:pointer;font-weight:700}
.likert input:checked+span{background:var(--teal);color:var(--on-teal);border-color:var(--teal)}
.ev-row{padding:12px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 262px;gap:12px;align-items:center}
.ev-asp{background:#eef2ff;color:#1e3a8a;font-weight:800;font-size:.72rem;letter-spacing:.08em;padding:9px 12px;border-radius:9px;margin:14px 0 8px;text-transform:uppercase}
.ev-bar{display:flex;justify-content:space-between;font-size:.84rem;margin-top:10px}
.ev-bar b{color:var(--amber)}
.ev-bar b.hi{color:var(--green)}
.ev-track{height:6px;background:var(--track);border-radius:99px;overflow:hidden;margin-top:4px}
.ev-track i{display:block;height:100%;background:var(--amber);border-radius:99px}
.ev-track i.hi{background:var(--green)}

/* halaman publik */
body.pub{background:var(--bg)}
.pub-nav{display:flex;align-items:center;gap:14px;max-width:1180px;margin:0 auto;padding:16px 20px}
.pub-nav .brand{display:flex;gap:10px;align-items:center;font-weight:800;color:var(--ink);font-size:1.05rem}
.pub-nav .brand small{display:block;font-weight:500;color:var(--mut);font-size:.72rem}
.pub-nav .links{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pub-nav .links a:not(.btn){color:var(--ink2);padding:8px 10px;border-radius:9px;font-weight:600;font-size:.9rem}
.pub-nav .links a:not(.btn):hover{background:var(--card);text-decoration:none}
.pub-w{max-width:1180px;margin:0 auto;padding:0 20px}
.p-hero{display:grid;grid-template-columns:1.25fr 1fr;gap:32px;align-items:center;padding:48px 0 40px}
.p-hero h1{font-size:clamp(2rem,4.6vw,3.3rem);line-height:1.08;margin:12px 0 16px;font-weight:800;letter-spacing:-.02em}
.p-hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--teal),#f5d08a);-webkit-background-clip:text;background-clip:text;color:transparent}
.p-hero p{color:var(--ink2);font-size:1.05rem;max-width:56ch}
.p-live{background:linear-gradient(150deg,#1d2a64,#2d3f96 60%,#6b4a2b);color:#fff;border-radius:26px;padding:28px;box-shadow:0 30px 60px rgba(29,42,100,.35)}
.p-live .big{font-size:3.6rem;font-weight:800;line-height:1}
.p-live .mini{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.p-live .mini div{background:rgba(0,0,0,.18);border-radius:14px;padding:12px}
.p-live .mini b{display:block;font-size:1.4rem}
.p-sec{padding:34px 0}
.p-sec h2{font-size:1.7rem;margin-bottom:6px;font-weight:800}
.p-sec .sub{color:var(--mut);margin-bottom:22px}
.p-cta{background:linear-gradient(120deg,#1d2a64,#8a5a2b);color:#fff;border-radius:26px;padding:40px;text-align:center;margin:30px 0 50px}
.news{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.nc{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;color:var(--ink)}
.nc:hover{text-decoration:none;border-color:var(--teal)}
.nc .im{aspect-ratio:16/9;background:linear-gradient(135deg,#1d2a64,#8a5a2b);display:grid;place-items:center;color:#fff}
.nc .im img{width:100%;height:100%;object-fit:cover}
.nc .bd{padding:14px 16px}
.nc h4{margin:6px 0;font-size:1rem}
.nc p{color:var(--mut);font-size:.84rem;margin:0}
.dosen-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.dl{display:flex;gap:12px;align-items:center;padding:14px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.dl b{display:block;font-size:.9rem}
.dl small{color:var(--mut);display:block}

/* instalasi / login */
.auth{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.auth-l{background:linear-gradient(150deg,#1d2a64,#141d47 50%,#5a3d20);color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:space-between}
.auth-l h1{font-size:2.4rem;line-height:1.1;margin:18px 0}
.auth-l ul{list-style:none;padding:0;display:grid;gap:10px}
.auth-l li{display:flex;gap:10px;align-items:center;opacity:.92}
.auth-r{display:grid;place-items:center;padding:30px 20px}
.auth-f{width:100%;max-width:420px}
.auth-f h2{font-size:1.6rem;margin-bottom:4px}
.box{max-width:780px;margin:30px auto;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:28px}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;font-size:.86rem;margin:10px 0 18px}
.checks .y{color:#4ade80}.checks .n{color:#f87171;font-weight:700}

/* cetak */
.print-only{display:none}
@media print{
  .sb,.top,.fab,.chat,.foot,.no-print,.tabs,.btn,.alert{display:none!important}
  .main{margin:0}.content{padding:0;max-width:none}
  body{background:#fff;color:#000}
  .card{border:0;padding:0;background:#fff}
  .print-only{display:block}
  .cert{box-shadow:none}
}

/* responsif */
@media (max-width:1200px){.g6,.kpi-row{grid-template-columns:repeat(3,minmax(0,1fr))}.g5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.split,.split.r,.split.w{grid-template-columns:1fr}.who{display:none}}
@media (max-width:980px){
  .sb{transform:translateX(-100%)}
  body.sb-open .sb{transform:none}
  body.sb-open .sb-back{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:35}
  .main{margin-left:0}
  body.sb-min .sb{transform:translateX(-100%)}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inbox{grid-template-columns:1fr}
  .auth{grid-template-columns:1fr}.auth-l{display:none}
  .p-hero{grid-template-columns:1fr}
}
@media (max-width:700px){
  .content{padding:14px 14px 96px}
  .top{padding:8px 12px;gap:8px}
  .top-r{gap:6px}
  .top .ibtn{width:36px;height:36px;border-radius:10px}.top-t{font-size:1rem}
  .hide-sm{display:none!important}
  .abs-btn span{display:none}.abs-btn{padding:9px 11px}
  .g2,.g3,.g4,.g5,.g6,.kpi-row,.fg2,.fg3,.soap{grid-template-columns:1fr}
  .presence{grid-template-columns:1fr 1fr}
  .hero-b{padding:20px}.hero-b h2{font-size:1.3rem}
  .welcome h2{font-size:1.4rem}
  .cal .d{min-height:70px;padding:3px}.cal .ev{font-size:.6rem;padding:2px 3px}
  .cal .h{font-size:.6rem}
  .hb{grid-template-columns:100px 1fr 36px}
  .ev-row{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr}
  .dd-notif{width:290px;right:-90px}
  .fab{right:12px;bottom:12px}
  .checks,.cert .audit{grid-template-columns:1fr}
  .pub-nav .links a:not(.btn){display:none}
}

/* perbaikan tata letak */
td.acts{display:table-cell;text-align:right;white-space:nowrap}
td.acts>*{vertical-align:middle;margin-left:4px}
td.acts>form{display:inline-block}
.ph{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;margin-bottom:16px}
.ph>:first-child{flex:1 1 320px;min-width:0}
.ph>.row{flex:0 1 auto;justify-content:flex-end}
@media (max-width:420px){.top .hide-xs{display:none!important}.top{gap:6px}.top-r{gap:4px}}

/* kamera presensi */
.cam{position:relative;margin-top:14px;border-radius:18px;overflow:hidden;background:#0b0a24;aspect-ratio:4/3;max-height:340px;width:100%;border:1px solid rgba(255,255,255,.18)}
.cam video,.cam img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cam.mirror video,.cam.mirror img{transform:scaleX(-1)}
.cam-guide{position:absolute;left:50%;top:47%;width:52%;aspect-ratio:3/4;transform:translate(-50%,-50%);border:2px dashed rgba(255,255,255,.55);border-radius:50%;pointer-events:none}
.cam[data-cam=scan] .cam-guide{aspect-ratio:1;border-radius:18px;width:56%;border-style:solid;border-color:rgba(242,196,109,.8)}
.cam-msg{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;text-align:center;padding:18px;font-size:.85rem;background:rgba(11,10,36,.72)}
.cam.live .cam-msg{display:none}
.cam-tag{position:absolute;left:10px;top:10px;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.45);font-size:.7rem;font-weight:700;letter-spacing:.04em}
.cam-btn{position:absolute;right:10px;top:10px;width:36px;height:36px;border-radius:50%;border:0;display:grid;place-items:center;background:rgba(0,0,0,.45);color:#fff;cursor:pointer}
.cam.shot .cam-guide{display:none}
.cam-file{display:flex!important;align-items:center;gap:8px;margin:0 0 10px;padding:12px;border-radius:12px;border:1px dashed rgba(255,255,255,.4);font-size:.82rem;cursor:pointer;color:#fff}
.cam-file[hidden]{display:none!important}
.cam-file input{max-width:100%;font-size:.75rem;color:#fff;background:transparent;border:0;margin:0;padding:0}
.abs-thumb{display:inline-block;margin-left:6px;vertical-align:middle}
.abs-thumb img{width:30px;height:30px;border-radius:8px;object-fit:cover;border:1px solid var(--line)}
.pr-foto{display:inline-flex;gap:6px}.pr-foto img{width:42px;height:42px;border-radius:10px;object-fit:cover;border:1px solid var(--line)}
/* pencarian global */
.cmdk{position:fixed;inset:0;z-index:90;background:rgba(2,6,10,.55);backdrop-filter:blur(3px);display:flex;justify-content:center;align-items:flex-start;padding:10vh 14px 14px}
.cmdk[hidden]{display:none}
.cmdk-c{width:100%;max-width:620px;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:hidden;display:flex;flex-direction:column;max-height:76vh}
.cmdk-in{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.cmdk-in input{flex:1;margin:0;border:0;background:transparent;font-size:1.05rem;padding:6px 0;box-shadow:none}
.cmdk-in input:focus{outline:none;box-shadow:none}
.cmdk kbd,.cmdk-f kbd{font:600 .68rem/1 inherit;padding:3px 6px;border-radius:6px;border:1px solid var(--line);background:var(--card2);color:var(--ink2)}
.cmdk-r{overflow:auto;padding:6px}
.cmdk-g{font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);padding:10px 10px 4px}
.cmdk-it{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:12px;color:var(--ink);text-decoration:none}
.cmdk-it:hover,.cmdk-it.on{background:var(--card2);text-decoration:none}
.cmdk-it .ci{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:rgba(224,168,78,.14);color:var(--teal);flex:none}
.cmdk-it b{display:block;font-weight:600;font-size:.92rem}
.cmdk-it small{display:block;color:var(--mut);font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:480px}
.cmdk-f{display:flex;gap:14px;align-items:center;padding:9px 14px;border-top:1px solid var(--line);font-size:.74rem;color:var(--mut)}
.cmdk-f a{margin-left:auto}
.cmdk-e{padding:22px;text-align:center;color:var(--mut);font-size:.9rem}
@media (max-width:700px){.cmdk{padding:0}.cmdk-c{max-height:100vh;height:100%;border-radius:0}.cmdk-f span{display:none}}
/* sesi presensi QR dinamis */
.qr-timer{height:6px;border-radius:99px;background:var(--card2);overflow:hidden;max-width:220px;margin:10px auto 6px}
.qr-timer span{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--lime,#a3e635));transition:width 1s linear}
.live-feed{display:flex;flex-direction:column;gap:6px;margin-top:12px;text-align:left}
.live-feed div{display:flex;justify-content:space-between;gap:8px;font-size:.82rem;padding:7px 10px;border-radius:10px;background:var(--card2);animation:feedIn .5s ease}
.live-feed div small{color:var(--mut)}
@keyframes feedIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
body.layar{background:radial-gradient(circle at 20% 10%,#1d2a64,#080b1a 62%);min-height:100vh}
.layar-w{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:center;min-height:100vh;padding:40px 5vw;max-width:1500px;margin:0 auto}
.layar-l h1{font-size:clamp(1.8rem,3.6vw,3.2rem);line-height:1.1;margin:26px 0 8px}
.layar-step{font-size:1.05rem;line-height:1.7;padding-left:22px;margin:22px 0;color:var(--ink2)}
.layar-n{display:flex;align-items:baseline;gap:12px;margin-top:10px}.layar-n b{font-size:4rem;color:var(--teal);line-height:1}.layar-n span{font-size:1.2rem;color:var(--mut)}
.live-feed.big div{font-size:1rem;padding:10px 14px}
.layar-r{text-align:center}
.qr.big{padding:18px;border-radius:24px}.qr.big svg{width:min(42vw,62vh);height:min(42vw,62vh)}
.qr-timer.big{height:10px;max-width:min(42vw,62vh)}
.layar-kode{font-size:4rem;font-weight:800;letter-spacing:.2em;color:var(--teal);margin-top:14px}
@media (max-width:900px){.layar-w{grid-template-columns:1fr}.qr.big svg{width:80vw;height:80vw}}
/* kalender terpadu */
.chips-f{display:flex;flex-wrap:wrap;gap:8px}
.chips-f .chip{cursor:pointer;user-select:none;opacity:.45}.chips-f .chip.on{opacity:1;border-color:var(--c)}
.chips-f .chip i{width:10px;height:10px;border-radius:50%;display:inline-block}
.kal .d{cursor:pointer}.kal .d.sel{box-shadow:inset 0 0 0 2px var(--indigo)}
.kal .ev.more{width:100%;text-align:left;border:0;border-left:3px solid var(--line);font:inherit;font-size:.66rem;color:var(--mut)}
.kal-dot{display:none;font-size:.62rem;background:var(--teal);color:#fff;border-radius:99px;padding:1px 6px}
.kal-day{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin:14px 0 6px}
.kal-it{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;background:var(--card2);margin-bottom:6px;color:var(--ink);text-decoration:none}
.kal-it:hover{text-decoration:none;filter:brightness(1.1)}
.kal-it .ki{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none}
.kal-it b{display:block;font-size:.86rem;font-weight:600}.kal-it small{display:block;color:var(--mut);font-size:.74rem}
.kal-hide{display:none!important}
@media (max-width:700px){.kal .ev{display:none}.kal .ev.more{display:none}.kal-dot{display:inline-block}.kal .d{min-height:52px}}

/* =====================================================================
 *  EDU-KATIK — komponen khusus Living Lab
 * ===================================================================== */
.pbar{display:block;height:7px;background:var(--track);border-radius:99px;overflow:hidden;margin-top:6px}
.pbar i{display:block;height:100%;border-radius:99px;background:var(--teal);transition:width .4s}
.req,label em{color:var(--rose);font-style:normal}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.lead{font-size:1.08rem;color:var(--ink2);line-height:1.7;max-width:70ch}
.plain{list-style:none;padding:0;margin:0}.plain li{display:flex;gap:8px;align-items:flex-start;padding:4px 0}.plain li .ic{color:var(--teal);margin-top:3px}
.narrow{max-width:560px}.narrow-w{max-width:900px}
.mini-s{display:block;background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;color:var(--ink)}
a.mini-s:hover{border-color:var(--teal);text-decoration:none}
.mini-s small{display:block;color:var(--mut);font-size:.72rem;font-weight:600}.mini-s b{display:block;font-size:1.35rem;line-height:1.2}
.big-pct b{display:block;font-size:2.4rem;font-weight:800;color:var(--teal);line-height:1}
pre.code{background:#0a0e1f;color:#dbe3ff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;overflow:auto;font-size:.8rem;line-height:1.55;white-space:pre}
[data-theme=light] pre.code{background:#1c1a2e}
code.tok{font-size:.95rem;padding:3px 8px;border-radius:8px;background:rgba(0,0,0,.2);word-break:break-all}

/* Program kerja */
.flow{counter-reset:f;list-style:none;padding:0;margin:0}
.flow li{counter-increment:f;position:relative;padding:0 0 12px 38px;font-size:.86rem;color:var(--ink2)}
.flow li::before{content:counter(f);position:absolute;left:0;top:-2px;width:26px;height:26px;border-radius:50%;background:var(--teal);color:var(--on-teal);display:grid;place-items:center;font-weight:800;font-size:.78rem}
.flow li:not(:last-child)::after{content:"";position:absolute;left:12px;top:26px;bottom:2px;width:2px;background:var(--line)}
.akt{display:flex;gap:12px;align-items:flex-start;padding:8px 0;border-bottom:1px dashed var(--line)}
.akt:last-of-type{border:0}
.akt>span,.akt-b{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;color:#fff;font-weight:800;flex:none}
.akt-b{width:26px;height:26px;font-size:.8rem;margin-right:4px}
.akt b{display:block;font-size:.88rem;line-height:1.35}.akt small{color:var(--mut)}
.akt-c{border-left:4px solid var(--c)}
.bk{border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden}
.bk-h{display:flex;gap:10px;align-items:center;padding:10px 14px;background:var(--card2);flex-wrap:wrap}
.bk-h b{flex:1;min-width:180px;font-size:.9rem}
.bk-i{display:flex;gap:10px;align-items:flex-start;padding:9px 14px;border-top:1px solid var(--line)}
.bk-i.ok .bk-t>span{color:var(--mut);text-decoration:line-through;text-decoration-color:rgba(34,197,94,.6)}
.bk-c{width:22px;height:22px;border-radius:7px;border:2px solid var(--line2);background:transparent;display:grid;place-items:center;flex:none;color:#fff;cursor:pointer;padding:0;margin-top:1px}
.bk-i.ok .bk-c{background:var(--green);border-color:var(--green)}
.bk-t{flex:1;min-width:0;font-size:.86rem}.bk-t small{display:block;color:var(--mut)}
.bk-u{position:relative}.bk-u summary{list-style:none;cursor:pointer}.bk-u summary::-webkit-details-marker{display:none}
.bk-u[open] .bk-f{position:absolute;right:0;top:34px;z-index:20;width:min(340px,80vw);background:var(--card);border:1px solid var(--line2);border-radius:14px;padding:14px;box-shadow:var(--sh)}
.kr{font-size:.78rem;color:var(--mut);line-height:1.45}.kr b{color:var(--ink2)}
.dmp .tbl td{vertical-align:top}
.gantt th.gm{text-align:center;min-width:38px;font-size:.78rem;padding:6px 2px}.gantt th.gm small{display:block;font-weight:500;color:var(--mut);font-size:.62rem}
.gantt th.gm.now{background:rgba(244,63,94,.14);color:var(--rose)}
.gantt td.gc{padding:4px 2px;text-align:center}.gantt td.gc.now{background:rgba(244,63,94,.07)}
.gantt .gbar{display:block;height:14px;border-radius:5px;background:var(--line2)}
.g-ok{background:var(--green)!important}.g-run{background:var(--indigo)!important}.g-sch{background:var(--teal)!important}.g-hold{background:var(--amber)!important}.g-plan{background:var(--line2)!important}
.gantt tr.g-sec td{background:var(--card2);font-weight:700;font-size:.85rem}
.gt{min-width:900px}
.gt-hd,.gt-row{display:grid;grid-template-columns:340px 1fr;align-items:center}
.gt-hd{position:sticky;top:0;background:var(--card);border-bottom:1px solid var(--line);z-index:2}
.gt-hd .gt-r{display:grid;grid-template-columns:repeat(12,1fr)}.gt-hd .gt-r span{font-size:.66rem;color:var(--mut);text-align:center;padding:8px 0;border-left:1px solid var(--line)}
.gt-l{padding:8px 12px;font-size:.82rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gt-row{border-bottom:1px solid var(--line)}.gt-row:hover{background:var(--card2)}
.gt-row .gt-r{position:relative;height:34px;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(100%/12 - 1px),var(--line) calc(100%/12 - 1px),var(--line) calc(100%/12))}
.gt-sec{padding:8px 12px;font-weight:700;font-size:.8rem;background:var(--card2);color:var(--teal);border-bottom:1px solid var(--line)}
.gt-dot{position:absolute;top:9px;width:16px;height:16px;border-radius:50%;margin-left:-8px;box-shadow:0 0 0 3px var(--card)}
.gt-now{position:absolute;top:0;bottom:0;width:2px;background:var(--rose);opacity:.7}
.gt-na{position:absolute;left:10px;top:9px;font-size:.72rem}

/* Indikator ringkas (dashboard, tentang) */
.ind-l{display:grid;gap:4px}
.ind-r{display:flex;gap:12px;align-items:center;padding:8px 6px;border-radius:12px;color:var(--ink)}
a.ind-r:hover{background:var(--card2);text-decoration:none}
.ind-n{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-weight:800;color:#fff;background:var(--nila2);flex:none;font-size:.85rem}
.ind-t{flex:1;min-width:0}.ind-t b{display:block;font-size:.86rem;font-weight:600;line-height:1.35}.ind-t small{color:var(--mut);font-size:.72rem}
.ind-p{font-weight:800;color:var(--teal);min-width:46px;text-align:right}

/* Smart Air */
.air-chip{display:inline-flex;gap:6px;align-items:center;padding:5px 11px;border-radius:99px;font-size:.78rem;font-weight:600;background:var(--card2);border:1px solid var(--line);color:var(--ink)}
.air-chip:hover{text-decoration:none}
.air-chip.lv-baik{border-color:rgba(34,197,94,.5)}.air-chip.lv-baik b{color:#22c55e}
.air-chip.lv-sedang{border-color:rgba(234,179,8,.5)}.air-chip.lv-sedang b{color:#eab308}
.air-chip.lv-sensitif{border-color:rgba(249,115,22,.5)}.air-chip.lv-sensitif b{color:#f97316}
.air-chip.lv-tidak_sehat,.air-chip.lv-sangat_tidak_sehat,.air-chip.lv-berbahaya{border-color:rgba(239,68,68,.6);animation:pulse 1.6s infinite}.air-chip.lv-tidak_sehat b,.air-chip.lv-sangat_tidak_sehat b,.air-chip.lv-berbahaya b{color:#ef4444}
@keyframes pulse{50%{box-shadow:0 0 0 5px rgba(239,68,68,.15)}}
.air-top{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:16px}
.air-dial{text-align:center}
.dial-w{margin:6px auto 0;max-width:260px}
.gauge{display:block;margin:0 auto}.gauge .ax{font-size:10px;fill:var(--mut)}
.g-needle{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.dial-v{margin-top:-8px}.dial-v b{display:block;font-size:3rem;font-weight:800;line-height:1}.dial-v small{color:var(--mut);font-weight:600}
.dial-k{display:inline-block;margin-top:10px;padding:6px 16px;border-radius:99px;color:#fff;font-weight:800;font-size:.9rem;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.air-side{display:grid;gap:16px;align-content:start}
.air-level{display:flex;gap:14px;align-items:center;padding:16px 18px;border-radius:var(--r);border:1px solid var(--line);background:var(--card)}
.air-level .al-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;flex:none;background:rgba(34,197,94,.14);color:#22c55e}
.air-level small{display:block;color:var(--mut);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.air-level b{display:block;font-size:1.5rem;font-weight:800;line-height:1.2}
.air-level span{color:var(--ink2);font-size:.86rem}
.air-level.lv-waspada{border-color:rgba(245,180,0,.5);background:rgba(245,180,0,.07)}.air-level.lv-waspada .al-ic{background:rgba(245,180,0,.16);color:#f5b400}
.air-level.lv-bahaya{border-color:rgba(239,68,68,.6);background:rgba(239,68,68,.08);animation:pulse 1.6s infinite}.air-level.lv-bahaya .al-ic{background:rgba(239,68,68,.16);color:#ef4444}
.air-level.lv-offline{opacity:.75}.air-level.lv-offline .al-ic{background:var(--card2);color:var(--mut)}
.air-stats{gap:12px}.air-s{padding:14px 16px}.air-s .stat-v{font-size:1.5rem}.air-s .stat-i{width:42px;height:42px;background:var(--card2);color:var(--teal)}
.air-s.lv-waspada{border-color:rgba(245,180,0,.6)}.air-s.lv-waspada .stat-v{color:#f5b400}
.air-s.lv-bahaya{border-color:rgba(239,68,68,.7)}.air-s.lv-bahaya .stat-v{color:#ef4444}
.rec p{font-size:.88rem;color:var(--ink2)}
.relay{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rl{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px;border-radius:14px;background:var(--card2);border:1px solid var(--line);color:var(--mut)}
.rl b{color:var(--ink2);font-size:.85rem}.rl small{font-weight:800;letter-spacing:.1em}
.rl.on{color:#22c55e;border-color:rgba(34,197,94,.5)}.rl.on .ic{animation:spin 2s linear infinite}
.rl.on.bad{color:#ef4444;border-color:rgba(239,68,68,.5)}.rl.on.bad .ic{animation:none}
@keyframes spin{to{transform:rotate(360deg)}}
.spark{color:var(--mut);background:var(--card2);border-radius:12px;padding:6px;margin-bottom:10px}.spark svg{display:block}
.tl-a{border-left:3px solid var(--line2);padding:6px 0 8px 12px;margin-bottom:6px}
.tl-a b{display:block;font-size:.85rem}.tl-a small{color:var(--mut)}
.tl-a.lv-waspada{border-color:#f5b400}.tl-a.lv-bahaya{border-color:#ef4444}
.svg-flow{background:#fff;border-radius:12px;padding:8px;overflow:auto}.svg-flow img{display:block;min-width:720px;width:100%}
.air-mini .am-w{display:flex;gap:14px;align-items:center}
.am-g{position:relative;width:150px;flex:none;text-align:center}.am-g b{display:block;font-size:2rem;font-weight:800;line-height:1;margin-top:-6px;color:var(--ink)}.am-g small{color:var(--mut)}
.am-i{flex:1;min-width:0}.am-i .dial-k{margin:0;font-size:.78rem;padding:4px 12px}
.am-v{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}.am-v span{background:var(--card2);border-radius:10px;padding:6px;text-align:center}.am-v small{display:block;color:var(--mut);font-size:.66rem}.am-v b{font-size:.95rem}
.aqi-leg{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-top:12px}
.aqi-leg div{border-radius:14px;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-top:5px solid var(--c)}
.aqi-leg b{display:block;font-size:1.05rem}.aqi-leg span{display:block;font-weight:700;color:var(--c)}.aqi-leg small{display:block;color:var(--mut);margin-top:4px;line-height:1.4}
.pub-air{padding:22px}
.pa-g{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:24px;align-items:center}
.pa-v{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.pa-v div{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:8px 10px}.pa-v small{display:block;color:var(--mut);font-size:.72rem}.pa-v b{font-size:1.15rem}.pa-v b small{display:inline;font-size:.7rem}

/* Publik umum */
.pub-act{display:flex;gap:6px;align-items:center;margin-left:8px}
.pub-menu{position:relative}.pub-menu>summary{list-style:none;cursor:pointer}.pub-menu>summary::-webkit-details-marker{display:none}
.pub-menu-l{position:absolute;right:0;top:44px;z-index:60;min-width:240px;background:var(--card);border:1px solid var(--line2);border-radius:16px;padding:8px;box-shadow:var(--sh);display:grid}
.pub-menu-l a{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;color:var(--ink);font-weight:600;font-size:.9rem}
.pub-menu-l a:hover{background:var(--card2);text-decoration:none}
.pub-nav .links a.on{color:var(--teal)!important;background:var(--card)}
.pub-foot{margin-top:40px;border-top:1px solid var(--line);background:var(--bg2);padding:34px 0 20px}
.pf-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px}
.pf-grid h4,.pf-h{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-bottom:10px}
.pf-grid a{display:block;color:var(--ink2);padding:3px 0;font-size:.88rem}
.pf-grid p{color:var(--mut);font-size:.85rem}
.pf-c,.pf-m{font-size:.8rem;color:var(--mut)}
.pf-h{display:block}.pf-m{display:block;padding:3px 0;color:var(--ink2);font-size:.86rem;line-height:1.3}.pf-m small{display:block;color:var(--mut);font-size:.72rem}
.p-head{padding:34px 0 18px;max-width:880px}
.p-head h1,.p-title{font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.12;margin:10px 0 12px;font-weight:800;letter-spacing:-.01em}
.p-head p{color:var(--ink2);font-size:1.02rem;max-width:70ch}
.kicker-p{display:inline-flex;gap:6px;align-items:center;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);background:var(--card);border:1px solid var(--line);padding:5px 12px;border-radius:99px}
.p-search{display:flex;gap:8px;align-items:center;background:var(--card);border:1px solid var(--line2);border-radius:14px;padding:6px 6px 6px 14px;margin-top:14px;max-width:640px}
.p-search input{border:0;background:transparent;margin:0;flex:1;box-shadow:none;padding:8px 4px}
.p-search input:focus{outline:none;box-shadow:none}
.chips-row{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 18px}
.chip.on{background:var(--teal);color:var(--on-teal);border-color:var(--teal)}.chip.on b{color:inherit}
.chip b{font-size:.72rem;color:var(--mut)}.chip.sm{font-size:.76rem;padding:3px 9px}
.p-bar{height:10px;border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden;margin:12px 0 4px}.p-bar i{display:block;height:100%;background:linear-gradient(90deg,#f2c46d,#e0a84e);border-radius:99px}
.pilar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pl{position:relative;color:var(--ink);border-top:4px solid var(--c);padding-top:22px}
.pl:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--sh)}
.pl h3{font-size:1rem;line-height:1.35;margin-top:10px}.pl p{font-size:.85rem}.pl small{color:var(--c);font-weight:700}
.pl-k{position:absolute;top:14px;right:16px;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:800;color:#fff;background:var(--c)}
.pl-ic{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;background:color-mix(in srgb,var(--c) 18%,transparent);color:var(--c)}
.ph-card{padding:0;overflow:hidden;margin:0;display:flex;flex-direction:column}
.ph-card img{display:block;width:100%;height:100%;max-height:420px;object-fit:cover;background:#fff}
.ph-cap{padding:12px 16px}.ph-cap b{display:block}.ph-cap small{color:var(--mut)}
.quote-c{margin:0}.quote-c p{font-style:italic;color:var(--ink2)}
.stars{color:#f5b400;letter-spacing:2px}.stars span{color:var(--line2)}
.mitra-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.mt-i{display:flex;gap:12px;align-items:center;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:14px}
.mt-i img{width:42px;height:42px;object-fit:contain;border-radius:8px;background:#fff}
.mt-i b{display:block;font-size:.88rem;line-height:1.3}.mt-i small{color:var(--mut)}
.mt-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--card2);color:var(--teal);flex:none}
.tm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.tm-grid.sm{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.tm{display:flex;gap:14px;align-items:flex-start}
.tm h3{margin:8px 0 2px;font-size:1.02rem}
.tm-av{width:64px;height:64px;border-radius:18px;overflow:hidden;flex:none;background:linear-gradient(135deg,var(--nila2),var(--soga));display:grid;place-items:center;color:#fff;font-weight:800;font-size:1.5rem}
.tm-av.sm{width:46px;height:46px;border-radius:14px;font-size:1.1rem}.tm-av img{width:100%;height:100%;object-fit:cover}
.tm-k{font-size:.8rem;color:var(--ink2);margin:6px 0 0}
.tm-d{margin-top:8px;font-size:.84rem}.tm-d summary{cursor:pointer;color:var(--teal);font-weight:600}.tm-d div{margin-top:6px;color:var(--ink2)}

/* Pustaka */
.lib{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.lib-c{display:flex;flex-direction:column;gap:6px;color:var(--ink)}
.lib-c:hover{text-decoration:none}.lib-c:hover .lib-cv{transform:translateY(-3px);box-shadow:var(--sh)}
.lib-cv{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:linear-gradient(150deg,var(--nila),var(--soga));display:grid;place-items:center;transition:.2s;border:1px solid var(--line)}
.lib-cv img{width:100%;height:100%;object-fit:cover}
.lib-ic{color:rgba(255,255,255,.85)}
.lib-t{position:absolute;left:8px;bottom:8px;display:inline-flex;gap:4px;align-items:center;background:rgba(0,0,0,.6);color:#fff;font-size:.66rem;font-weight:700;padding:3px 8px;border-radius:99px}
.lib-d{position:absolute;right:8px;top:8px;background:var(--amber);color:#3a2a00;font-size:.62rem;font-weight:800;padding:2px 7px;border-radius:6px}
.lib-c b{font-size:.88rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.lib-c small{color:var(--mut)}
.viewer{padding:0;overflow:hidden}
.ratio{position:relative;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}.ratio iframe,.ratio video{position:absolute;inset:0;width:100%;height:100%;border:0}
.ratio.pdf{aspect-ratio:auto;height:78vh;background:#525659}
.aud{display:flex;flex-direction:column;align-items:center;gap:14px;padding:30px;background:linear-gradient(150deg,var(--nila),var(--soga));color:#fff;border-radius:12px}

/* Motif & tanaman */
.mf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.mf{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;color:var(--ink)}
.mf:hover{text-decoration:none;border-color:var(--teal)}
.mf-img{position:relative;aspect-ratio:1;background:#f7f3ea;overflow:hidden;display:grid;place-items:center}
.mf-img img{width:100%;height:100%;object-fit:cover}
.mf-img svg{width:100%;height:100%}
.mf-sk{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.55);color:#fff;font-size:.62rem;padding:2px 8px;border-radius:99px}
.mf-b{padding:12px 14px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}.mf-b b{font-size:.95rem}
.mf-big{position:relative;padding:0;overflow:hidden;background:#f7f3ea;display:grid;place-items:center;min-height:320px}
.mf-big img{width:100%;max-height:70vh;object-fit:contain}.mf-big svg{width:100%;height:420px}
.tn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.tn{display:flex;flex-direction:column;gap:6px;color:var(--ink)}.tn:hover{text-decoration:none}
.tn-img{position:relative;aspect-ratio:1;border-radius:16px;overflow:hidden;background:linear-gradient(150deg,#2f5d3f,#1d2a64);display:grid;place-items:center;color:rgba(255,255,255,.8)}
.tn-img img{width:100%;height:100%;object-fit:cover}
.sw{position:absolute;right:8px;bottom:8px;width:26px;height:26px;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.tn-big{position:relative;padding:0;overflow:hidden;min-height:280px;display:grid;place-items:center;background:linear-gradient(150deg,#2f5d3f,#1d2a64);color:rgba(255,255,255,.8)}.tn-big img{width:100%;max-height:60vh;object-fit:cover}
.zona-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.zn{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.zn>span{width:32px;height:32px;border-radius:50%;background:var(--daun);color:#fff;display:grid;place-items:center;font-weight:800;flex:none}
.zn b{display:block;font-size:.9rem}.zn small{display:block;color:var(--mut);line-height:1.4;margin-top:2px}

/* Ekowisata */
.pk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.pk{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;color:var(--ink)}
.pk:hover{text-decoration:none;border-color:var(--teal);box-shadow:var(--sh)}
.pk-img{position:relative;aspect-ratio:16/10;overflow:hidden}.pk-img img,.pk-img svg{width:100%;height:100%;object-fit:cover}
.pk-soon{position:absolute;left:10px;top:10px;background:var(--amber);color:#3a2a00;font-weight:800;font-size:.7rem;padding:3px 10px;border-radius:99px}
.pk-b{padding:14px 16px;display:flex;flex-direction:column;gap:8px}.pk-b b{font-size:1.05rem}.pk-b p{color:var(--mut);font-size:.86rem;margin:0}
.pk-hero{padding:0;overflow:hidden;aspect-ratio:16/9}.pk-hero img,.pk-hero svg{width:100%;height:100%;object-fit:cover}
.res-f{scroll-margin-top:20px}
.res-t{font-size:1.2rem}.res-k{font-family:ui-monospace,Menlo,monospace;font-size:1.8rem;font-weight:800;letter-spacing:.14em;color:var(--teal)}
.rate-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-bottom:1px dashed var(--line);flex-wrap:wrap}
.rate{display:inline-flex;flex-direction:row-reverse;gap:2px}
.rate input{position:absolute;opacity:0;width:1px;height:1px}
.rate label{font-size:1.8rem;line-height:1;color:var(--line2);cursor:pointer;margin:0;padding:0 2px;transition:color .15s}
.rate label:hover,.rate label:hover~label,.rate input:checked~label{color:#f5b400}
.rate input:focus-visible+label{outline:2px solid var(--teal);border-radius:4px}

/* Daftar hadir publik */
body.hadir-pg .box{margin-top:18px}
.hadir-keg{padding:14px 16px;border-radius:14px;background:var(--card2);border:1px solid var(--line);margin-bottom:16px}
.hadir-keg h2{margin:8px 0 4px;font-size:1.25rem}.hadir-keg p{margin:0}
.hadir-ok{text-align:center;padding:10px 0}
.ok-ic{display:inline-grid;place-items:center;width:84px;height:84px;border-radius:50%;background:rgba(34,197,94,.15);color:#22c55e;margin-bottom:6px}
.hadir-ok h3{font-size:1.4rem;margin:6px 0}
.ttd-w{margin:6px 0 14px}
.ttd-w canvas{display:block;width:100%;height:auto;aspect-ratio:600/220;border-radius:12px;border:2px dashed var(--line2);background:#fff;margin:8px 0 4px;cursor:crosshair}
.ttd-w canvas.has{border-style:solid;border-color:var(--teal)}.ttd-w canvas.err{border-color:var(--rose)}
.ttd-s{height:34px;max-width:110px;object-fit:contain;background:#fff;border-radius:6px;padding:2px}

/* Kiosk layar sentuh */
body.kiosk{background:radial-gradient(circle at 15% 0,#2d3f96,#0c1230 55%,#08091a);min-height:100vh;user-select:none;-webkit-user-select:none;overflow-x:hidden;font-size:17px}
.k-top{display:flex;justify-content:space-between;align-items:center;padding:18px 32px;color:#fff}
.k-top b{display:block;font-size:1.5rem}.k-top small{opacity:.8}
.k-clock{font-size:1.6rem;font-weight:800;font-variant-numeric:tabular-nums;opacity:.9}
.k-main{padding:0 32px 110px}
.k-pane{display:none;animation:kin .35s ease}.k-pane.on{display:block}
@keyframes kin{from{opacity:0;transform:translateY(10px)}}
.k-pane h1{font-size:2.3rem;color:#fff;margin:20px 0 24px}.k-pane h2{font-size:1.8rem;color:#fff;display:flex;gap:12px;align-items:center;margin:14px 0 20px}
.k-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.k-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:210px;border:0;border-radius:28px;cursor:pointer;color:#fff;font:inherit;background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.18);transition:transform .15s}
.k-tile:active{transform:scale(.97)}.k-tile b{font-size:1.35rem}.k-tile small{opacity:.8}.k-tile .ic{color:#f2c46d}
.k-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.k-card{display:flex;flex-direction:column;gap:6px;text-align:left;padding:0 0 14px;border-radius:20px;overflow:hidden;cursor:pointer;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;font:inherit}
.k-card b,.k-card small{padding:0 14px}.k-card small{opacity:.75}
.k-img{position:relative;aspect-ratio:4/3;background:#f7f3ea;display:grid;place-items:center;color:#8a5a2b;overflow:hidden}.k-img img,.k-img svg{width:100%;height:100%;object-fit:cover}
.k-zona{margin-top:22px}.k-zona .zn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#fff}.k-zona .zn small{color:rgba(255,255,255,.7)}
.k-air{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.k-aq{border-radius:26px;padding:26px;background:rgba(255,255,255,.08);border:2px solid var(--c);color:#fff;text-align:center}
.k-aq b{display:block;font-size:5rem;line-height:1;color:var(--c);margin:10px 0}.k-aq span{display:inline-block;padding:6px 18px;border-radius:99px;background:var(--c);font-weight:800}.k-aq p{margin:16px 0 0;font-size:1.05rem;opacity:.9}
.k-qrs{display:flex;gap:30px;flex-wrap:wrap;justify-content:center;text-align:center;color:#fff}.k-qrs b{display:block;margin-top:10px;font-size:1.1rem}
.k-qrs .qr.big svg{width:220px;height:220px}
.k-bar{position:fixed;left:0;right:0;bottom:0;display:flex;gap:18px;align-items:center;padding:14px 32px;background:rgba(8,9,26,.86);backdrop-filter:blur(8px);border-top:1px solid rgba(255,255,255,.12)}
.k-home{display:inline-flex;gap:10px;align-items:center;font:inherit;font-weight:800;font-size:1.1rem;padding:14px 26px;border-radius:16px;border:0;background:#e0a84e;color:#2a1a04;cursor:pointer}
.k-modal{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.6);display:grid;place-items:center;padding:30px}
.k-det-c{position:relative;width:min(1000px,94vw);max-height:86vh;overflow:auto;background:var(--card);border-radius:26px;padding:30px 34px}
.k-x{position:absolute;right:16px;top:16px;width:52px;height:52px;border-radius:50%;border:0;background:var(--card2);color:var(--ink);cursor:pointer;display:grid;place-items:center}
.k-det-b{display:grid;grid-template-columns:1fr 220px;gap:24px;align-items:start}.k-det-q{text-align:center}.k-det-q small{display:block;color:var(--mut);margin-top:6px}.k-det-b .prose{font-size:1.05rem}
@media (max-width:1240px){.pub-nav .links{display:none}}
@media (max-width:1100px){.pilar{grid-template-columns:repeat(2,minmax(0,1fr))}.k-tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.air-top,.pa-g{grid-template-columns:1fr}.pf-grid{grid-template-columns:1fr 1fr}.k-det-b{grid-template-columns:1fr}.hide-xs{display:none}}
@media (max-width:700px){.pilar{grid-template-columns:1fr}.relay{grid-template-columns:1fr 1fr}.pf-grid{grid-template-columns:1fr}.am-v{grid-template-columns:repeat(2,1fr)}.air-mini .am-w{flex-direction:column;align-items:stretch}.am-g{margin:0 auto}.p-hero{grid-template-columns:1fr}.pub-nav .links{display:none}.tm-grid{grid-template-columns:1fr}.k-tiles{grid-template-columns:1fr}}
@media print{.pub-nav,.pub-foot,.k-bar,.sb,.topbar,.no-print{display:none!important}}

.pub-nav .links{flex-wrap:nowrap}.pub-nav .links a:not(.btn){padding:8px 9px;font-size:.87rem;white-space:nowrap}
.p-title{font-size:clamp(1.45rem,2.8vw,2.05rem)!important;line-height:1.22!important}
@media (max-width:700px){.box{margin:12px;padding:20px;border-radius:18px}body.hadir-pg .box{margin:10px}}
/* Presensi tanpa kode */
.ses-l{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:12px}
.ses{border:1px solid var(--line);border-radius:16px;padding:14px 16px;background:var(--card2);display:grid;gap:8px;min-width:0}.ses .pill{white-space:normal}
.ses.on{border-color:rgba(34,197,94,.5);box-shadow:0 0 0 3px rgba(34,197,94,.08)}
.ses h3{margin:0;font-size:1.08rem}.ses p{margin:0;font-size:.86rem}
.ps-st{display:inline-flex;gap:4px;flex-wrap:wrap}
.sinergi{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.sinergi .sg{display:flex;gap:10px;align-items:center;padding:8px 12px 8px 8px;border-radius:14px;background:var(--card);border:1px solid var(--line);color:var(--ink);min-width:0}
.sinergi .sg:hover{text-decoration:none;border-color:var(--teal)}
.sinergi .sg-lg{width:46px;height:46px;border-radius:12px;background:#fff;display:grid;place-items:center;overflow:hidden;flex:none}
.sinergi .sg-lg img{width:40px;height:40px;object-fit:contain}
.sinergi .sg b{display:block;font-size:.82rem;line-height:1.2}.sinergi .sg small{color:var(--mut);font-size:.7rem}
.sinergi.min .sg{padding:0;background:transparent;border:0}.sinergi.min .sg-lg{width:40px;height:40px}.sinergi.min .sg-lg img{width:34px;height:34px}
.sinergi-t{font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-bottom:8px}
.auth-l .sinergi .sg{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}.auth-l .sinergi .sg small{color:rgba(255,255,255,.7)}.auth-l .sinergi-t{color:rgba(255,255,255,.7)}