:root{
  box-sizing:border-box;color-scheme:light;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
  --bg:#EDF3F7;--surface:#FFFFFF;--surface2:#F1F6F9;--ink:#0F1E2B;--muted:#5D6F7E;--line:#DAE4EB;
  --em:#0A2A52;--em2:#0D4A7A;--em3:#0E7A68;--em-muted:#9EBDD2;
  --gold:#BE8E3C;--gold2:#E0BC72;--gold-soft:#F7EEDB;
  --ok:#23845E;--ok-soft:#DDF2E7;--warn:#B5701A;--warn-soft:#FAEDD6;--bad:#B04A3D;--bad-soft:#F8E1DD;
  --shadow:0 1px 2px rgba(14,58,50,.05),0 10px 30px -14px rgba(14,58,50,.22);
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
}
@media (prefers-color-scheme:dark){:root{
  color-scheme:dark;
  --bg:#0A1219;--surface:#111C25;--surface2:#17242F;--ink:#E4EDF3;--muted:#8FA3B3;--line:#22323F;
  --em:#071D38;--em2:#0B3A63;--em3:#0C5E52;--gold:#E0B96C;--gold2:#EED08F;--gold-soft:#342C1C;
  --ok:#5CC596;--ok-soft:#173528;--warn:#E8AA4F;--warn-soft:#3A2B14;--bad:#E88A7B;--bad-soft:#3E201C;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -14px rgba(0,0,0,.7);
}}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.02em;line-height:1.15;margin:0}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px}
.muted{color:var(--muted)}
.ic{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;border:1px solid var(--line);background:var(--surface);padding:11px 18px;font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap;transition:transform .15s,box-shadow .2s,border-color .2s}
.btn:hover{border-color:var(--muted)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.6;cursor:wait}
.btn.pri{background:linear-gradient(140deg,var(--em3),var(--em));border-color:transparent;color:#fff;box-shadow:0 10px 22px -12px rgba(14,58,50,.8)}
.btn.gold{background:linear-gradient(140deg,var(--gold2),var(--gold));border-color:transparent;color:#2A1E08;box-shadow:0 10px 22px -12px rgba(180,134,58,.9)}
.btn.ghost{background:transparent}
.btn.sm{padding:7px 12px;font-size:13px;border-radius:10px}
.btn.bad{color:var(--bad)}
.btn.block{width:100%}

/* Top nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:21;background:var(--bg)}
.nav .wrap{display:flex;align-items:center;gap:20px;height:68px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:600;font-size:22px;text-decoration:none}
.logo .mk{width:34px;height:34px;border-radius:11px;background:linear-gradient(140deg,var(--gold2),var(--gold));display:grid;place-items:center;color:#2A1E08}
.nav .links{display:flex;gap:22px;margin-left:auto;font-size:15px;font-weight:600}
.nav .links a{text-decoration:none;color:var(--muted)}
.nav .links a:hover{color:var(--ink)}
.nav .acts{display:flex;gap:8px}

/* Forms */
.card{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:var(--shadow)}
.card h2{font-size:22px;margin-bottom:6px}
.fld{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--muted);margin-bottom:14px}
.fld input,.fld select,.fld textarea{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:11px 13px;font-size:15px;font-weight:500;color:var(--ink);width:100%;min-width:0;transition:border-color .2s,box-shadow .2s}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 20%,transparent)}
.fld small{font-weight:500;font-size:12px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.check{display:flex;align-items:flex-start;gap:10px;font-size:14px;margin:4px 0 16px}
.check input{accent-color:var(--em3);width:18px;height:18px;margin-top:2px;flex:none}
.err{display:none;background:var(--bad-soft);color:var(--bad);border-radius:12px;padding:10px 14px;font-size:14px;font-weight:600;margin-bottom:14px}
.err.on{display:block}
.okmsg{background:var(--ok-soft);color:var(--ok);border-radius:12px;padding:10px 14px;font-size:14px;font-weight:600;margin-bottom:14px}

.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px;white-space:nowrap}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.c-ok{background:var(--ok-soft);color:var(--ok)}.c-warn{background:var(--warn-soft);color:var(--warn)}.c-bad{background:var(--bad-soft);color:var(--bad)}.c-mut{background:var(--surface2);color:var(--muted)}.c-gold{background:var(--gold-soft);color:var(--gold)}

table.t{width:100%;border-collapse:collapse;font-size:14px}
table.t th{text-align:left;font-size:12px;font-weight:600;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
table.t td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
table.t tr:last-child td{border-bottom:0}
.tw{overflow-x:auto}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(20px);background:var(--em);color:#fff;padding:12px 18px;border-radius:14px;font-size:14px;font-weight:600;opacity:0;transition:.3s;z-index:60;max-width:calc(100% - 32px);pointer-events:none;box-shadow:var(--shadow)}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.bad{background:var(--bad)}

@media (max-width:760px){
  .nav .links{display:none}
  .nav .acts{margin-left:auto}
  .g2{grid-template-columns:1fr}
  .wrap{padding:0 16px}
  .card{padding:20px;border-radius:20px}
}

/* ===== Tema Tidayu ===== */
:root{--brand:linear-gradient(135deg,#0A2A52 0%,#0D4F86 50%,#0E7A68 100%);
  --pat-dayak:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96' fill='none' stroke='white' stroke-opacity='.10' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 48c0-14 11-24 24-24s20 9 20 18-6 13-12 13-10-4-10-9 4-6 6-6'/%3E%3Cpath d='M84 48c0 14-11 24-24 24s-20-9-20-18 6-13 12-13 10 4 10 9-4 6-6 6'/%3E%3Cpath d='M0 8c8 0 12 4 12 10M96 88c-8 0-12-4-12-10M96 8c-8 0-12 4-12 10M0 88c8 0 12-4 12-10'/%3E%3Cpath d='M48 0v6M48 90v6'/%3E%3C/svg%3E");--pat-melayu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 14L14 0L28 14Z' fill='%23D9B46C' fill-opacity='.55'/%3E%3Cpath d='M6 14L14 6L22 14' fill='none' stroke='%230A2A52' stroke-opacity='.55' stroke-width='1.2'/%3E%3Cpath d='M14 9v5' stroke='%230A2A52' stroke-opacity='.55' stroke-width='1.2'/%3E%3C/svg%3E");--pat-rebung:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8' viewBox='0 0 16 8'%3E%3Cpath d='M0 8L8 0L16 8' fill='none' stroke='%230E7A68' stroke-opacity='.5' stroke-width='1.2'/%3E%3Cpath d='M8 4v4' stroke='%231565C0' stroke-opacity='.5' stroke-width='1.2'/%3E%3C/svg%3E");--fret:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8' viewBox='0 0 16 8' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M0 7.2h16M2 7.2V.8h11v4.6H6V3.2h4'/%3E%3C/svg%3E");--pat-songket:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56' fill='none'%3E%3Cpath d='M28 20l8 8-8 8-8-8z' stroke='%231565C0' stroke-opacity='.07' stroke-width='1.4'/%3E%3Cpath d='M28 25l3 3-3 3-3-3z' fill='%230E7A68' fill-opacity='.07'/%3E%3Ccircle cx='0' cy='0' r='2' fill='%23C2913E' fill-opacity='.10'/%3E%3Ccircle cx='56' cy='0' r='2' fill='%23C2913E' fill-opacity='.10'/%3E%3Ccircle cx='0' cy='56' r='2' fill='%23C2913E' fill-opacity='.10'/%3E%3Ccircle cx='56' cy='56' r='2' fill='%23C2913E' fill-opacity='.10'/%3E%3C/svg%3E");--cloud:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='180' viewBox='0 0 300 180' fill='none' stroke='%23E9C987' stroke-opacity='.32' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M40 140c-18 0-28-12-28-24s11-22 25-22c2-20 20-34 40-31 7-18 28-27 46-20 14-14 38-12 50 4 20-2 37 14 35 32 14 4 22 18 17 32'/%3E%3Cpath d='M60 124c-8 0-12-6-12-11s4-9 9-9 7 3 7 7-3 5-5 5'/%3E%3Cpath d='M118 96c-10 0-15-7-15-13s5-11 11-11 9 4 9 8-3 6-6 6'/%3E%3Cpath d='M190 104c8 0 13-6 13-12s-5-10-10-10-8 3-8 7 3 5 5 5'/%3E%3Cpath d='M120 160c30 0 40-14 70-14s40 14 70 14'/%3E%3Cpath d='M150 172c22 0 30-8 52-8'/%3E%3C/svg%3E");
  --hero-bg:var(--pat-melayu) left bottom/28px 14px repeat-x,radial-gradient(70% 90% at 100% 0%,rgba(46,160,140,.35),transparent 60%),var(--brand)}
body{background-image:var(--pat-songket);background-attachment:fixed}
@keyframes drift{to{background-position:192px 96px}}
.btn.pri{background:linear-gradient(135deg,#1565C0,#0E8A70);box-shadow:0 10px 22px -12px rgba(13,74,122,.8)}
.toast{background:linear-gradient(135deg,#0D4A7A,#0E7A68)}
.card h2::before{content:"";display:inline-block;width:10px;height:10px;margin-right:10px;transform:rotate(45deg) translateY(-2px);border:2px solid var(--em3);border-radius:2px;vertical-align:middle}
.fret{height:8px;background:linear-gradient(90deg,#1565C0,#0E8A70,var(--gold));-webkit-mask:var(--fret) left center/16px 8px repeat-x;mask:var(--fret) left center/16px 8px repeat-x;opacity:.75}
.nav{border-bottom:0}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:linear-gradient(90deg,#1565C0,#0E8A70,var(--gold));-webkit-mask:var(--fret) left center/12px 6px repeat-x;mask:var(--fret) left center/12px 6px repeat-x;opacity:.45}
.motif-bg{position:relative;overflow:hidden;background:var(--hero-bg)}
.motif-bg::before{content:"";position:absolute;inset:0;background:var(--pat-dayak);animation:drift 120s linear infinite;pointer-events:none}
.motif-bg::after{content:"";position:absolute;right:-24px;top:-16px;width:320px;height:190px;background:var(--cloud) no-repeat right top/contain;pointer-events:none}
.motif-bg>*{position:relative;z-index:1}
@media (prefers-color-scheme:dark){.btn.pri{background:linear-gradient(135deg,#2E7BD6,#17A383)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ===== Ubin ikon berwarna ===== */
.ic2{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ic2 .f{fill:currentColor;fill-opacity:.32;stroke:none}
.nt,span.nt{color:#fff!important}
.nt{width:34px;height:34px;border-radius:11px;flex:none;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 6px 14px -6px var(--c2),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .35s cubic-bezier(.3,1.6,.5,1),box-shadow .3s,filter .3s,opacity .3s}
.btn.pri{background-image:linear-gradient(120deg,#1565C0 0%,#0E8A70 50%,#1565C0 100%);background-size:200% 100%;transition:background-position .6s,transform .15s,box-shadow .2s}
.btn.pri:hover{background-position:100% 0}