/* ===== Supervisi Guru — tema glassmorphic indigo/violet ===== */
:root{
  --ink:#1F1B3A;
  --muted:#635F82;
  --line:rgba(255,255,255,.65);
  --card:rgba(255,255,255,.62);
  --card-solid:#ffffff;
  --accent:#4F46E5;
  --accent2:#8B5CF6;
  --ok:#0e9f6e;
  --warn:#d97706;
  --err:#dc2626;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 12px 34px -14px rgba(50,35,120,.35), 0 2px 8px -4px rgba(50,35,120,.18);
  --sidebar-w:286px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,sans-serif;
  color:var(--ink);
  background:#F3F0FF;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0;line-height:1.25;font-weight:700;letter-spacing:-.01em}
h1{font-size:1.45rem}
h2{font-size:1.12rem}
h3{font-size:1rem}
svg.ic{flex:0 0 auto}

/* latar dekoratif */
.bg-deco{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bg-deco span{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55}
.bg-deco .b1{width:520px;height:520px;background:#a5b4fc;top:-160px;left:-120px}
.bg-deco .b2{width:440px;height:440px;background:#f0abfc;top:20%;right:-140px;opacity:.42}
.bg-deco .b3{width:600px;height:600px;background:#93c5fd;bottom:-260px;left:32%;opacity:.38}

/* ===== Sidebar ===== */
.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);
  padding:22px 16px;display:flex;flex-direction:column;gap:18px;
  background:rgba(255,255,255,.55);backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border-right:1px solid var(--line);z-index:40;
  overflow-y:auto;
}
.brand{display:flex;align-items:center;gap:12px;padding:2px 6px 4px}
.brand-logo{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 8px 20px -8px rgba(79,70,229,.75);
}
.brand-name{font-weight:800;font-size:1.02rem;letter-spacing:-.02em}
.brand-sub{font-size:.74rem;color:var(--muted);max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav{display:flex;flex-direction:column;gap:4px}
.nav-sec{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:700;margin:14px 8px 6px}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;
  color:var(--ink);font-size:.9rem;font-weight:500;transition:.16s;border:1px solid transparent;
}
.nav-item:hover{background:rgba(255,255,255,.75);text-decoration:none;transform:translateX(2px)}
.nav-item.on{
  background:linear-gradient(135deg,rgba(79,70,229,.96),rgba(139,92,246,.96));color:#fff;
  box-shadow:0 10px 22px -12px rgba(79,70,229,.9);
}
.nav-item.on svg{color:#fff}
.sidebar-foot{margin-top:auto;display:flex;flex-direction:column;gap:12px;border-top:1px solid rgba(99,95,130,.16);padding-top:16px}
.who{display:flex;align-items:center;gap:10px;padding:0 4px}
.who-txt{min-width:0}
.who-txt strong{display:block;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.who-txt small{color:var(--muted);font-size:.72rem}
.avatar{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:.9rem;
  background:linear-gradient(135deg,#6366f1,#a855f7);flex:0 0 auto;
}

/* ===== Main ===== */
.main{margin-left:var(--sidebar-w);padding:26px 30px 40px;min-height:100vh;display:flex;flex-direction:column}
.topbar{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.topbar-sub{margin:6px 0 0;color:var(--muted);font-size:.83rem}
.topbar-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.content{display:flex;flex-direction:column;gap:26px;flex:1}
.foot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:.76rem;margin-top:34px;padding-top:16px;border-top:1px solid rgba(99,95,130,.16)}

/* ===== Kartu ===== */
.card{
  background:var(--card);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 22px;
}
.card-tight{padding:16px 18px}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.card-head p{margin:4px 0 0;color:var(--muted);font-size:.82rem}
.section-title{display:flex;align-items:center;gap:10px;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}

.grid{display:grid;gap:20px}
.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))}
.g21{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.g12{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}

/* stat */
.stat{display:flex;gap:14px;align-items:flex-start;padding:18px 20px}
.stat-ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2))}
.stat-ic.g{background:linear-gradient(135deg,#10b981,#059669)}
.stat-ic.o{background:linear-gradient(135deg,#f59e0b,#ea580c)}
.stat-ic.p{background:linear-gradient(135deg,#ec4899,#c026d3)}
.stat-ic.s{background:linear-gradient(135deg,#0ea5e9,#2563eb)}
.stat-num{font-size:1.7rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.stat-lbl{color:var(--muted);font-size:.79rem;margin-top:3px}
.stat-hint{font-size:.73rem;color:var(--muted);margin-top:6px}

/* ===== Tombol ===== */
.btn{
  display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:11px;border:1px solid transparent;
  font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;transition:.16s;background:rgba(255,255,255,.7);color:var(--ink);
  white-space:nowrap;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 10px 22px -12px rgba(79,70,229,.95)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:rgba(255,255,255,.65);border-color:rgba(99,95,130,.2)}
.btn-danger{background:rgba(220,38,38,.1);color:var(--err);border-color:rgba(220,38,38,.28)}
.btn-ok{background:rgba(14,159,110,.12);color:var(--ok);border-color:rgba(14,159,110,.3)}
.btn-sm{padding:7px 11px;font-size:.79rem;border-radius:9px}
.btn.full{width:100%;justify-content:center}
.btn-ico{padding:7px;border-radius:9px}

/* ===== Tabel ===== */
.table-wrap{overflow-x:auto;border-radius:var(--radius-sm)}
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:.86rem;background:rgba(255,255,255,.55);border-radius:var(--radius-sm);overflow:hidden}
table.tbl th{
  text-align:left;padding:12px 14px;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);font-weight:700;background:rgba(255,255,255,.7);border-bottom:1px solid rgba(99,95,130,.14);
  white-space:nowrap;
}
table.tbl td{padding:12px 14px;border-bottom:1px solid rgba(99,95,130,.1);vertical-align:middle}
table.tbl tbody tr:last-child td{border-bottom:none}
table.tbl tbody tr:hover td{background:rgba(255,255,255,.6)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl .ctr{text-align:center}
.tbl-sub{display:block;color:var(--muted);font-size:.75rem;margin-top:2px}
.row-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}

/* ===== Badge / pill ===== */
.pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:.74rem;font-weight:700;border:1px solid transparent}
.pill-A{background:rgba(16,185,129,.15);color:#047857;border-color:rgba(16,185,129,.3)}
.pill-B{background:rgba(59,130,246,.15);color:#1d4ed8;border-color:rgba(59,130,246,.3)}
.pill-C{background:rgba(245,158,11,.16);color:#b45309;border-color:rgba(245,158,11,.32)}
.pill-D{background:rgba(220,38,38,.14);color:#b91c1c;border-color:rgba(220,38,38,.3)}
.pill-gray{background:rgba(99,95,130,.13);color:var(--muted);border-color:rgba(99,95,130,.22)}
.pill-ok{background:rgba(14,159,110,.14);color:#047857;border-color:rgba(14,159,110,.28)}
.pill-warn{background:rgba(217,119,6,.15);color:#b45309;border-color:rgba(217,119,6,.3)}
.bar-mini{height:7px;border-radius:99px;background:rgba(99,95,130,.16);overflow:hidden;min-width:74px}
.bar-mini i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.bar-mini i.lvA{background:linear-gradient(90deg,#10b981,#34d399)}
.bar-mini i.lvB{background:linear-gradient(90deg,#3b82f6,#60a5fa)}
.bar-mini i.lvC{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.bar-mini i.lvD{background:linear-gradient(90deg,#dc2626,#f87171)}

/* ===== Form ===== */
.form-grid{display:grid;gap:16px}
label.f{display:block;font-size:.78rem;font-weight:700;color:var(--muted);margin-bottom:6px}
input[type=text],input[type=password],input[type=date],input[type=number],input[type=search],select,textarea{
  width:100%;padding:10px 12px;border-radius:11px;border:1px solid rgba(99,95,130,.25);
  background:rgba(255,255,255,.82);font:inherit;font-size:.88rem;color:var(--ink);outline:none;transition:.16s;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,70,229,.16);background:#fff}
textarea{resize:vertical;min-height:74px;line-height:1.5}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23635F82' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:32px}
.hint{font-size:.74rem;color:var(--muted);margin-top:6px}
.form-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px}
.filterbar{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.filterbar > div{min-width:150px;flex:0 1 auto}

/* ===== Alert ===== */
.alert{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-radius:13px;margin-bottom:18px;font-size:.86rem;border:1px solid transparent}
.alert-ok{background:rgba(16,185,129,.13);border-color:rgba(16,185,129,.3);color:#065f46}
.alert-warn{background:rgba(217,119,6,.13);border-color:rgba(217,119,6,.3);color:#92400e}
.alert-err{background:rgba(220,38,38,.11);border-color:rgba(220,38,38,.28);color:#991b1b}

/* ===== Penilaian skor ===== */
.butir{border:1px solid rgba(99,95,130,.16);border-radius:14px;background:rgba(255,255,255,.5);padding:15px 16px;margin-bottom:12px}
.butir:last-child{margin-bottom:0}
.butir-head{display:flex;gap:12px;align-items:flex-start}
.butir-no{
  width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;
  display:grid;place-items:center;font-size:.78rem;font-weight:800;flex:0 0 auto;margin-top:1px;
}
.butir-komponen{font-weight:700;font-size:.9rem}
.butir-indikator{color:var(--muted);font-size:.8rem;margin-top:3px;line-height:1.45}
.skala{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.skala label{
  flex:1 1 130px;display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:11px;cursor:pointer;
  border:1px solid rgba(99,95,130,.2);background:rgba(255,255,255,.72);font-size:.79rem;transition:.14s;
}
.skala label:hover{background:#fff;border-color:rgba(79,70,229,.4)}
.skala input{accent-color:var(--accent);width:16px;height:16px;margin:0;flex:0 0 auto}
.skala label.sel{background:linear-gradient(135deg,rgba(79,70,229,.14),rgba(139,92,246,.14));border-color:var(--accent);font-weight:600}
.butir-note{margin-top:10px}

/* ===== Foto profil ===== */
.avatar-img{padding:0;overflow:hidden;background:rgba(99,95,130,.18)}
.avatar-img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.avatar-besar{box-shadow:0 12px 28px -12px rgba(79,70,229,.65);border:3px solid #fff}
.foto-baris{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap}
.foto-sisi{display:flex;flex-direction:column;gap:10px;align-items:center;flex:0 0 auto}
.foto-form{flex:1 1 320px;min-width:240px}
.foto-input-baris{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.foto-preview-wrap{display:flex;flex-direction:column;gap:6px;align-items:center}
.foto-preview{
  width:96px;height:96px;border-radius:14px;overflow:hidden;border:1px solid rgba(99,95,130,.25);
  background:rgba(255,255,255,.8);display:grid;place-items:center;
}
.foto-preview img{width:100%;height:100%;object-fit:cover;display:block}
input[type=file]{
  width:100%;padding:9px 11px;border-radius:11px;border:1px dashed rgba(99,95,130,.4);
  background:rgba(255,255,255,.7);font:inherit;font-size:.83rem;color:var(--muted);cursor:pointer;
}
input[type=file]:hover{border-color:var(--accent);background:#fff}
/* Kotak logo sekolah/madrasah (pengaturan & kop cetak) */
.logo-kotak{
  width:104px;height:104px;border-radius:14px;border:1px solid rgba(99,95,130,.25);
  background:#fff;display:grid;place-items:center;overflow:hidden;flex:0 0 auto;
}
.logo-kotak img{width:100%;height:100%;object-fit:contain;display:block}
.logo-kosong{
  width:104px;height:104px;border-radius:14px;border:1px dashed rgba(99,95,130,.4);
  background:rgba(255,255,255,.6);display:grid;place-items:center;color:var(--muted);flex:0 0 auto;
}
.mini-avatar{display:inline-flex;align-items:center;gap:9px}
.mini-avatar .avatar{font-size:.78rem}
.foto-cetak{width:28mm;height:38mm;border:1px solid #b9b6cc;object-fit:cover;display:block}

/* panel edit di dalam kartu butir */
details.editbox{margin-top:12px;border-top:1px dashed rgba(99,95,130,.22);padding-top:2px}
details.editbox > summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;
  font-size:.78rem;font-weight:700;color:var(--accent);padding:8px 0 2px;
}
details.editbox > summary::-webkit-details-marker{display:none}
details.editbox > summary::after{content:'▾';font-size:.7rem;color:var(--muted)}
details.editbox[open] > summary::after{content:'▴'}
details.editbox > summary:hover{text-decoration:underline}
.skorlive{
  position:sticky;top:16px;display:flex;flex-direction:column;gap:14px;
}
.skorbig{font-size:2.4rem;font-weight:800;letter-spacing:-.03em;line-height:1}

/* chart */
.chart-box{position:relative;height:270px}
.chart-box.tall{height:330px}
.chart-box.short{height:210px}

/* cetak */
.print-sheet{background:#fff;padding:30px 34px;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid rgba(99,95,130,.14)}
.sheet-head{text-align:center;border-bottom:2.5px solid var(--ink);padding-bottom:14px;margin-bottom:18px}
/* Kop dengan logo: logo di kiri, teks kop tetap di tengah */
.sheet-head.kop-logo{display:flex;align-items:center;gap:18px;text-align:left}
.sheet-head.kop-logo .kop-gambar{flex:0 0 auto}
.sheet-head.kop-logo .kop-gambar img{width:26mm;height:26mm;object-fit:contain;display:block}
.sheet-head.kop-logo .kop-teks{flex:1;text-align:center}
.sheet-head h2{font-size:1.15rem;text-transform:uppercase}
.sheet-head p{margin:4px 0 0;font-size:.83rem;color:var(--muted)}
.sheet-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;font-size:.86rem;margin-bottom:20px}
.sheet-meta b{display:inline-block;min-width:132px;color:var(--muted);font-weight:600}
.sheet-foto{float:right;margin:0 0 14px 18px}
table.sheet{width:100%;border-collapse:collapse;font-size:.82rem}
table.sheet th,table.sheet td{border:1px solid #b9b6cc;padding:7px 9px;vertical-align:top;text-align:left}
table.sheet th{background:#efeaff;font-weight:700;font-size:.78rem}
table.sheet td.ctr,table.sheet th.ctr{text-align:center}
.sheet-foot{display:flex;justify-content:space-between;gap:30px;margin-top:34px;font-size:.85rem}
.sheet-sign{text-align:center;flex:1}
.sheet-sign .space{height:64px}
.sheet-sign u{font-weight:700}
.nilai-box{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin:18px 0}
.nilai-chip{min-width:132px;text-align:center;border:1px solid rgba(99,95,130,.22);border-radius:12px;padding:11px 16px;background:#faf9ff}
.nilai-chip b{display:block;font-size:1.5rem;font-weight:800}
.nilai-chip span{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}

/* log aktivitas: penanda pengguna yang sedang online */
.dot-online{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.2);animation:denyut 2.2s ease-in-out infinite}
@keyframes denyut{0%,100%{box-shadow:0 0 0 3px rgba(16,185,129,.2)}50%{box-shadow:0 0 0 6px rgba(16,185,129,.08)}}

/* empty */
.empty{text-align:center;padding:36px 20px;color:var(--muted)}
.empty svg{opacity:.5;margin-bottom:10px}
.empty h3{color:var(--ink);margin-bottom:6px}
.empty p{margin:0 0 16px;font-size:.86rem}

/* utilitas */
.mut{color:var(--muted)}
.sm{font-size:.8rem}
.xs{font-size:.74rem}
.b{font-weight:700}
.nowrap{white-space:nowrap}
.mt0{margin-top:0}.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.mb0{margin-bottom:0}.mb8{margin-bottom:8px}.mb16{margin-bottom:16px}
.center{text-align:center}
.right{text-align:right}
.flex{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}
.divider{height:1px;background:rgba(99,95,130,.14);margin:16px 0}
.chip-list{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.75);border:1px solid rgba(99,95,130,.2);font-size:.78rem;font-weight:600}
.chip.on{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-color:transparent}

/* ===== halaman masuk berbentuk PORTAL (login.php) =====
   Tema mengikuti aplikasi: latar indigo/violet + kartu glassmorphic.
   Dua kolom: penjelasan aplikasi (kiri) + formulir masuk (kanan, sticky). */
.portal-wrap{min-height:100vh;padding:30px 20px 44px}
.portal-inner{max-width:1240px;margin:0 auto}
.portal-head{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:22px;border-bottom:1px solid rgba(99,95,130,.22);
}
.portal-brand{display:flex;align-items:center;gap:15px;min-width:0}
.portal-logo{
  width:62px;height:62px;border-radius:18px;display:grid;place-items:center;color:#fff;flex:0 0 auto;
  background:linear-gradient(160deg,var(--accent),var(--accent2));
  box-shadow:0 16px 32px -16px rgba(79,70,229,.95);
}
.portal-brand h1{margin:0;font-size:1.5rem;letter-spacing:-.01em}
.portal-tagline{display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--accent);vertical-align:middle;margin-left:9px}
.portal-brand p{margin:6px 0 0;color:var(--muted);font-size:.85rem}
.portal-head-kanan{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.portal-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(330px,1fr);gap:22px;align-items:start}
.portal-info{display:flex;flex-direction:column;gap:20px;min-width:0}
.portal-side{display:flex;flex-direction:column;gap:18px;position:sticky;top:22px}

.portal-hero .portal-lead{margin:0 0 10px;font-size:.92rem;line-height:1.65}
.portal-lead b{color:var(--accent)}
.portal-lead:last-child{margin-bottom:0}

/* daftar menu supervisi (mengikuti menu yang benar-benar ada di aplikasi) */
.portal-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.portal-menu-item{
  display:flex;gap:11px;align-items:flex-start;background:rgba(255,255,255,.72);
  border:1px solid rgba(99,95,130,.16);border-left:3px solid var(--accent2);
  border-radius:12px;padding:11px 13px;
}
.portal-menu-ico{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;color:#fff;
  background:linear-gradient(150deg,var(--accent),var(--accent2));
}
.portal-menu-item b{display:block;font-size:.85rem;color:var(--ink)}
.portal-menu-item span{font-size:.77rem;color:var(--muted);line-height:1.45}

/* Kartu "Pengguna Aplikasi" (daftar peran: Guru, Kepala Sekolah, Pengawas, Super Admin) telah
   DIHAPUS dari halaman masuk atas permintaan pemilik — beserta seluruh gaya CSS-nya.
   Jangan menambahkan kembali kartu maupun kelas gayanya. */

.portal-alur{margin:0 0 12px;padding-left:20px;font-size:.84rem;line-height:1.65}
.portal-alur li{margin-bottom:6px}
.portal-alur b{color:var(--accent)}
.portal-cek{margin:0;padding-left:20px;font-size:.8rem;color:var(--muted);line-height:1.6}
.portal-cek li{margin-bottom:5px}
.portal-cek b{color:var(--ink)}

.portal-login h2{display:flex;align-items:center;gap:8px;font-size:1.05rem}
.portal-bantuan{
  background:rgba(79,70,229,.07);border:1px dashed rgba(79,70,229,.35);border-radius:12px;padding:11px 13px;
  font-size:.78rem;line-height:1.5;color:var(--muted);
}
.portal-bantuan b{display:block;color:var(--ink);margin-bottom:3px}

.portal-foot{
  display:flex;justify-content:center;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:.75rem;
  margin-top:28px;padding-top:14px;border-top:1px solid rgba(99,95,130,.22);text-align:center;
}
.portal-pengembang{font-weight:600;color:var(--ink)}

@media (max-width:1080px){
  .portal-grid{grid-template-columns:minmax(0,1fr)}
  .portal-side{position:static}
}
@media (max-width:640px){
  .portal-wrap{padding:20px 14px 34px}
  .portal-head-kanan{width:100%}
  .portal-brand h1{font-size:1.26rem}
  .portal-tagline{display:block;margin:4px 0 0}
  .portal-menu{grid-template-columns:minmax(0,1fr)}
  .portal-foot{flex-direction:column;gap:6px}
}

/* nav toggle mobile */
.nav-toggle{display:none;position:fixed;top:14px;left:14px;z-index:60;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.85);backdrop-filter:blur(14px);cursor:pointer;align-items:center;justify-content:center;color:var(--ink)}
.scrim{display:none;position:fixed;inset:0;background:rgba(31,27,58,.42);z-index:35;backdrop-filter:blur(2px)}

@media (max-width:1080px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g21,.g12,.g3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .nav-toggle{display:flex}
  .sidebar{transform:translateX(-100%);transition:transform .22s ease}
  .sidebar.open{transform:none}
  .scrim.on{display:block}
  .main{margin-left:0;padding:70px 16px 32px}
  .g2{grid-template-columns:minmax(0,1fr)}
  .topbar{align-items:flex-start}
  .print-sheet{padding:18px 14px}
  .sheet-meta{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  .g4{grid-template-columns:minmax(0,1fr)}
  .stat-num{font-size:1.45rem}
  .foto-baris{gap:16px}
  .foto-sisi{flex-direction:row;align-items:center;width:100%}
}

@media print{
  body{background:#fff}
  .bg-deco,.sidebar,.nav-toggle,.topbar,.foot,.no-print,.scrim{display:none !important}
  .main{margin:0;padding:0}
  .content{gap:0}
  .print-sheet{box-shadow:none;border:none;padding:0;border-radius:0}
  .sheet-foto{float:right}
  .card{background:#fff;box-shadow:none;border:none}
  a{color:inherit;text-decoration:none}
  @page{size:A4;margin:14mm}
}