/* Portal TKIT MoTHI — memakai token dari site.css */
body.portal{background:#F4EFE4}
.muted{color:var(--muted)}
.p-shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.p-side{background:var(--night);color:#C9D2CC;padding:22px 16px;position:sticky;top:0;height:100vh;overflow:auto;display:flex;flex-direction:column;gap:8px}
.p-side .brand{color:#fff;margin:0 6px 14px}
.p-side .brand small{display:block;font:800 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--sun);margin-top:4px}
.p-side nav{display:grid;gap:2px}
.p-group{font:800 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#7F928A;margin:16px 10px 6px}
.p-side nav a{color:#E3E9E5;text-decoration:none;padding:9px 12px;border-radius:12px;font-size:14.5px}
.p-side nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.p-side nav a[aria-current="page"]{background:var(--green);color:#fff}
.p-side-foot{margin-top:auto;display:grid;gap:8px;padding:14px 10px 0;border-top:1px solid rgba(255,255,255,.08)}
.p-side-foot a{color:#C9D2CC;font-size:14px;text-decoration:none}
.p-side-foot button{background:transparent;border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:999px;padding:8px 14px;font:600 13px var(--sans);cursor:pointer;justify-self:start}
.p-main{min-width:0}
.p-top{display:flex;align-items:center;gap:14px;padding:18px clamp(16px,3vw,34px);background:rgba(251,247,239,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.p-top h1{font-size:clamp(22px,2.4vw,30px);margin-right:auto}
.p-user{font-size:13.5px;color:var(--muted)}
.p-burger{display:none;width:42px;height:42px;border-radius:50%;border:0;background:var(--green);color:#fff;font-size:18px;cursor:pointer}
.p-content{padding:clamp(16px,3vw,34px);max-width:1180px}
.p-card{background:var(--ivory);border:1px solid var(--line);border-radius:22px;padding:clamp(16px,2.4vw,26px)}
.p-h2{font:600 21px/1.25 var(--serif);margin-bottom:10px}
.p-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.p-bar .btn,.p-card .btn{min-height:42px;padding:10px 20px;font-size:14px}
.pill.on{background:var(--green);border-color:var(--green);color:#fff}
.p-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.p-stat{background:var(--ivory);border:1px solid var(--line);border-left:6px solid var(--c);border-radius:18px;padding:16px 18px;text-decoration:none;color:var(--ink);transition:transform .3s var(--ease)}
.p-stat:hover{transform:translateY(-3px);color:var(--ink)}
.p-stat b{display:block;font:400 34px/1 var(--serif)}
.p-stat span{font-size:13.5px;color:var(--muted)}
.p-cols{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;margin-top:18px;align-items:start}
.p-list{list-style:none;margin:0;padding:0;display:grid}
.p-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line)}
.p-list a{text-decoration:none;color:var(--ink)}
.chip{display:inline-block;padding:4px 10px;border-radius:999px;background:#ECE6D8;color:#5E6B63;font:700 11px/1.3 var(--sans);text-transform:capitalize;white-space:nowrap}
.chip.ok,.chip.s-diterima,.chip.s-dibalas{background:#DDEBD6;color:#0B4A2B}
.chip.s-baru{background:#FCEBC2;color:#6B4B00}
.chip.s-visitasi{background:#DCEBF3;color:#1D4E66}
.chip.s-batal,.chip.s-arsip{background:#EEE;color:#777}
.p-table-wrap{overflow:auto;background:var(--ivory);border:1px solid var(--line);border-radius:18px}
.p-card .p-table-wrap{border:0;border-radius:0}
.p-table{width:100%;border-collapse:collapse;font-size:14.5px}
.p-table th{text-align:left;font:800 10.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--brown);padding:14px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.p-table td{padding:12px 14px;border-bottom:1px solid #F0EADD;vertical-align:middle}
.p-table tr:last-child td{border-bottom:0}
.p-table tbody tr:hover{background:#FBF7EE}
.p-table .thumb{width:64px;height:48px;object-fit:cover;border-radius:10px}
.actions{white-space:nowrap;text-align:right}
.actions form,.actions details{display:inline-block;margin-left:4px}
.btn-mini{display:inline-block;border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font:600 13px var(--sans);color:var(--ink);text-decoration:none;cursor:pointer}
.btn-mini:hover{border-color:var(--green);color:var(--green)}
.btn-mini.danger{color:#A4381A}
.btn-mini.danger:hover{border-color:#A4381A}
.p-inline summary{list-style:none}
.p-inline summary::-webkit-details-marker{display:none}
.p-row{display:flex;gap:6px;margin-top:6px}
.p-row input{padding:6px 10px;border:1px solid var(--line);border-radius:10px;font:inherit;width:150px}
.form .check{display:flex;align-items:center;gap:10px;font-weight:600}
.form .check input{width:20px;min-height:20px;height:20px}
.img-field{display:grid;gap:8px;padding:14px;border:1px dashed #D6CDB9;border-radius:16px;background:#fff}
.img-field .lbl{font-size:14px;font-weight:600}
.img-field img{max-width:260px;max-height:200px;object-fit:cover;border-radius:12px}
.img-field input[type=file]{min-height:0;padding:8px;border:0;background:transparent}
.form input[type=color]{padding:4px;width:90px}
.p-dl{display:grid;grid-template-columns:130px 1fr;gap:8px 14px;margin:6px 0 0;font-size:15px}
.p-dl dt{color:var(--muted)}
.p-dl dd{margin:0}
.p-msgs{display:grid;gap:12px}
.p-msg header{display:flex;justify-content:space-between;gap:10px;align-items:center}
.p-msg-act{display:flex;flex-wrap:wrap;gap:6px}
.p-note{padding:12px 0;border-bottom:1px dashed var(--line)}
.p-note small{font:800 10px/1 var(--sans);letter-spacing:.14em;color:var(--brown);text-transform:uppercase}
.p-note b{display:block;font:600 17px/1.3 var(--serif);margin:4px 0}
.p-note p{font-size:14.5px;color:var(--muted)}
.p-kid{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:center}
.p-kid img{border-radius:58% 42% 55% 45%/45% 55% 45% 55%}
@media (max-width:900px){
  .p-shell{grid-template-columns:1fr}
  .p-side{position:fixed;inset:0 auto 0 0;width:260px;z-index:30;transform:translateX(-105%);transition:transform .35s var(--ease)}
  .side-open .p-side{transform:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.35)}
  .p-burger{display:block}
  .p-user{display:none}
  .p-cols{grid-template-columns:1fr}
  .p-table thead{display:none}
  .p-table,.p-table tbody,.p-table tr,.p-table td{display:block;width:100%}
  .p-table tr{padding:10px 0;border-bottom:1px solid var(--line)}
  .p-table td{border:0;padding:4px 14px}
  .p-table td[data-l]:before{content:attr(data-l);display:block;font:800 9.5px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--brown)}
  .actions{text-align:left}
}
/* ---------- halaman masuk ---------- */
.login{display:grid;grid-template-columns:1.05fr .95fr;min-height:100vh}
.login-art{background:var(--green);color:#D9EADF;padding:clamp(24px,4vw,48px);display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
.login-art img{width:min(360px,70%);align-self:center;border-radius:50%;margin:10px 0}
.login-art h1{color:#fff;font-size:clamp(30px,3.4vw,44px)}
.login-art .brand-mark i{background:var(--green)}
.roles{display:grid;gap:10px;margin-top:6px}
.roles div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:12px 16px}
.roles b{color:#fff;display:block;font:600 16px var(--serif)}
.roles span{font-size:13.5px}
.login-form{display:grid;place-items:center;padding:clamp(24px,5vw,60px);background:var(--cream)}
.login-form .box{width:min(420px,100%);display:grid;gap:14px}
.login-form h2{font-size:clamp(30px,3vw,40px)}
.login-form .links{display:flex;justify-content:space-between;gap:10px;font-size:14px}
@media (max-width:860px){.login{grid-template-columns:1fr}.login-art{order:2}.login-art img{width:180px}}