:root {
  --primary: #2563eb;
  --primary-rgb: 37,99,235;
  --primary-soft: rgba(37,99,235,.12);
  --bg: #f3f6fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --sidebar-bg: linear-gradient(180deg, #1e3a8a 0%, #1d4ed8 100%);
  --sidebar-text: #e0e7ff;
  --topbar-bg: rgba(255,255,255,.8);
  --shadow: 0 8px 30px rgba(15,23,42,.08);
}
html[data-theme="teal"]{--primary:#0d9488;--primary-rgb:13,148,136;--primary-soft:rgba(13,148,136,.12);--sidebar-bg:linear-gradient(180deg,#134e4a 0%,#0d9488 100%);--sidebar-text:#ccfbf1;}
html[data-theme="violet"]{--primary:#7c3aed;--primary-rgb:124,58,237;--primary-soft:rgba(124,58,237,.12);--sidebar-bg:linear-gradient(180deg,#4c1d95 0%,#7c3aed 100%);--sidebar-text:#ede9fe;}
html[data-theme="orange"]{--primary:#ea580c;--primary-rgb:234,88,12;--primary-soft:rgba(234,88,12,.12);--sidebar-bg:linear-gradient(180deg,#7c2d12 0%,#ea580c 100%);--sidebar-text:#ffedd5;}
html[data-theme="rose"]{--primary:#e11d48;--primary-rgb:225,29,72;--primary-soft:rgba(225,29,72,.12);--sidebar-bg:linear-gradient(180deg,#881337 0%,#e11d48 100%);--sidebar-text:#ffe4e6;}
html[data-theme="leaf"]{--primary:#16a34a;--primary-rgb:22,163,74;--primary-soft:rgba(22,163,74,.12);--sidebar-bg:linear-gradient(180deg,#14532d 0%,#15803d 45%,#22c55e 100%);--sidebar-text:#dcfce7;}
html[data-mode="dark"]{
  --bg:#0b1220; --surface:#121a2b; --surface-2:#0f1726; --text:#e5edf8; --muted:#94a3b8; --border:#223049;
  --topbar-bg:rgba(18,26,43,.85); --shadow:0 8px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);}
a{color:var(--primary)}
.app-shell{display:flex;min-height:100vh;}
.sidebar{
  width:272px;background:var(--sidebar-bg);color:var(--sidebar-text);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
  padding:16px 12px;box-shadow:0 18px 50px rgba(15,23,42,.18);z-index:20;
  border-right:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
.sidebar::before{
  content:"";position:absolute;inset:-40% -20% auto auto;width:260px;height:260px;
  background:radial-gradient(circle, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 70%);
  pointer-events:none;filter:blur(2px);
}
.sidebar::after{
  content:"";position:absolute;inset:auto -30% -35% auto;width:240px;height:240px;
  background:radial-gradient(circle, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 70%);
  pointer-events:none;
}
.sidebar-brand{
  position:relative;z-index:1;display:flex;align-items:center;gap:12px;
  padding:8px 10px 16px;margin-bottom:4px;
}
.brand-mark-sm{
  width:42px;height:42px;border-radius:14px;flex:0 0 42px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.18);color:#fff;font-size:1.2rem;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), 0 8px 18px rgba(0,0,0,.12);
  backdrop-filter:blur(6px);
}
.brand-mark-sm img{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.15));}
.brand-text{min-width:0;display:flex;flex-direction:column;line-height:1.15;}
.brand-name{font-size:1rem;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.brand-sub{font-size:.72rem;opacity:.8;color:rgba(255,255,255,.85);letter-spacing:.02em;margin-top:2px;}
.sidebar-nav{flex:1;overflow:auto;position:relative;z-index:1;padding:4px 2px 8px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent;}
.sidebar-nav::-webkit-scrollbar{width:6px;}
.sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:999px;}
.sidebar .nav-link{
  position:relative;color:rgba(255,255,255,.86);display:flex;align-items:center;gap:10px;
  padding:10px 12px 10px 10px;border-radius:12px;margin:2px 0;font-weight:500;
  text-decoration:none;overflow:hidden;
  transition:all .22s ease, transform .18s ease;
}
.sidebar .nav-link::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%) scaleY(.4);
  width:4px;height:58%;border-radius:0 6px 6px 0;background:#fff;opacity:0;
  transition:all .22s ease;
}
.sidebar .nav-link .nav-icon{
  width:34px;height:34px;border-radius:10px;flex:0 0 34px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.95);font-size:1rem;
  transition:all .22s ease;
}
.sidebar .nav-link .nav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sidebar .nav-link:hover{
  background:rgba(255,255,255,.14);color:#fff;transform:translateX(2px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.sidebar .nav-link:hover .nav-icon{background:rgba(255,255,255,.18);transform:scale(1.03);}
.sidebar .nav-link.active{
  background:linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.10));
  color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), 0 8px 18px rgba(0,0,0,.10);
}
.sidebar .nav-link.active::before{opacity:1;transform:translateY(-50%) scaleY(1);}
.sidebar .nav-link.active .nav-icon{
  background:rgba(255,255,255,.95);color:var(--primary);
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}
.sidebar .nav-link:active{transform:scale(.985);}
.nav-section{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700;
  color:rgba(255,255,255,.72);padding:14px 12px 6px;margin-top:2px;
}
.sidebar-footer{
  position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.16);
  padding:12px 4px 2px;margin-top:4px;
}
.user-mini{
  display:flex;gap:10px;align-items:center;color:#fff;
  padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.user-avatar{
  width:36px;height:36px;border-radius:11px;flex:0 0 36px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.92);color:var(--primary);font-size:1.05rem;
}
.user-meta{min-width:0;}
.user-mini .name{font-weight:600;line-height:1.15;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;}
.user-mini .role{font-size:.75rem;opacity:.85;text-transform:capitalize}
.btn-logout{
  border:1px solid rgba(255,255,255,.22);color:#fff;background:rgba(255,255,255,.06);
  border-radius:11px;padding:.5rem .75rem;font-weight:600;
}
.btn-logout:hover{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.3);transform:translateY(-1px);}

.main-wrap{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{height:64px;display:flex;align-items:center;gap:12px;padding:0 20px;position:sticky;top:0;background:var(--topbar-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);z-index:10;}
.topbar-title{font-weight:700;font-size:1.05rem;}
.content{padding:24px;}
.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;}
.card:hover{box-shadow:0 12px 36px rgba(15,23,42,.12);}
.card .card-header{background:transparent;border-bottom:1px solid var(--border);}
.table{color:var(--text);--bs-table-bg:transparent;--bs-table-border-color:var(--border);}
.table-striped>tbody>tr:nth-of-type(odd)>*{--bs-table-bg-type:var(--surface-2);color:var(--text);}
.stat-card{background:linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);}
.stat-card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--primary);opacity:.8;}
.stat-card .fs-3{color:var(--text);}
.btn{border-radius:10px;font-weight:600;}
.btn:active{transform:scale(.98);}
.form-control,.form-select{min-height:44px;}
.form-control,.form-select{background:var(--surface);color:var(--text);border-color:var(--border);border-radius:10px;}
.form-control:focus,.form-select:focus{background:var(--surface);color:var(--text);border-color:var(--primary);box-shadow:0 0 0 .2rem rgba(var(--primary-rgb),.15);}
.btn-primary{background:var(--primary);border-color:var(--primary);} .btn-primary:hover{filter:brightness(.95);background:var(--primary);border-color:var(--primary);}
.btn-outline-primary{color:var(--primary);border-color:var(--primary);} .btn-outline-primary:hover{background:var(--primary);color:#fff;}
.text-muted{color:var(--muted)!important;}
.bg-primary{background:var(--primary)!important;}
.navbar-dark.bg-primary{background:var(--sidebar-bg)!important;}
.btn-icon{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);}
.btn-icon:hover{background:var(--primary-soft);color:var(--primary);}
.stat-card{position:relative;overflow:hidden}
.stat-card .icon{font-size:2rem;opacity:.25;position:absolute;right:14px;bottom:8px;color:var(--primary);}
.theme-swatch{width:34px;height:34px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--border);background:var(--sw);cursor:pointer;}
.theme-swatch.active{outline:3px solid var(--primary);outline-offset:2px;}
html[data-mode="dark"] .dropdown-menu{background:var(--surface);color:var(--text);border-color:var(--border);}
html[data-mode="dark"] .btn-outline-secondary{color:var(--text);border-color:var(--border);}
.role-badge{background:var(--primary-soft);color:var(--primary);text-transform:capitalize;font-weight:600;}
/* Auth */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(1200px 600px at 10% 10%, var(--primary-soft), transparent), var(--bg);}
.login-wrap{max-width:440px;width:100%;margin:0 auto;}
.login-card{border-radius:20px;}
.brand-mark{width:64px;height:64px;border-radius:18px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin:0 auto 10px;}
/* Face */
.face-video { width: 100%; max-width: 520px; border-radius: 12px; background:#000; }
.face-canvas { position:absolute; top:0; left:0; }
.face-container { position: relative; display:inline-block; }
.alert-light{background:var(--surface-2);color:var(--text);border-color:var(--border);}
.bg-light{background:var(--surface-2)!important;color:var(--text)!important;}
.sidebar-overlay{display:none;}
@media (max-width: 991.98px){
  .sidebar{position:fixed;left:-300px;top:0;transition:left .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease;height:100vh;width:286px;z-index:1040;border-right:none;}
  .sidebar.show{left:0;box-shadow:0 24px 60px rgba(0,0,0,.4);}
  .sidebar-overlay{display:block;position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .28s ease;z-index:1035;}
  .sidebar-overlay.show{opacity:1;pointer-events:auto;}
  .content{padding:16px 14px 24px;}
  .topbar{padding:0 12px;height:60px;}
  .topbar-title{font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw;}
  body.nav-open{overflow:hidden;}
}
@media (max-width: 575.98px){
  .content{padding:14px 12px 28px;}
  .card{border-radius:14px;}
  .card.p-3{padding:14px !important;}
  .stat-card .fs-3{font-size:1.6rem !important;}
  .btn{padding:.55rem .85rem;}
  .table-responsive{border-radius:12px;}
  .theme-menu{min-width:210px !important;}
  .row.g-3 > [class*="col-"]{margin-bottom:2px;}
  h3{font-size:1.35rem;} h5{font-size:1.05rem;}
  .login-wrap{max-width:100%;}
  .auth-wrap{padding:16px;align-items:flex-start;padding-top:32px;}
  .login-card.p-4,.login-card.p-5{padding:22px !important;}
}
.table-responsive{-webkit-overflow-scrolling:touch;}
input,select,textarea,button{font-size:16px;}
.card,.btn,.form-control,.form-select{transition:all .2s ease;}
/* SweetAlert2 compact */
.swal2-popup.swal-compact { border-radius: 14px; font-size: 0.95rem; }
.swal2-popup.swal-compact .swal2-title.swal-compact-title { font-size: 1.15rem; margin: 0 0 .25rem; padding: 0; }
.swal2-popup.swal-compact .swal2-html-container.swal-compact-text { font-size: .95rem; margin: .35rem 0 .75rem; }
.swal2-popup.swal-compact .swal2-icon { margin: .5rem auto .25rem; transform: scale(.85); }
.swal2-popup.swal-compact .swal2-actions { margin-top: .5rem; gap: .4rem; }
.swal2-popup.swal-compact .swal-compact-btn { padding: .45rem .9rem; font-size: .9rem; border-radius: 8px; }

/* Dashboard modern */
.dashboard-hero{
  background: var(--sidebar-bg);
  color: #fff;
  border-radius: 20px;
  padding: 24px 26px;
  box-shadow: 0 12px 34px rgba(var(--primary-rgb), .22);
  position: relative;
  overflow: hidden;
}
.dashboard-hero::before{
  content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px;
  background: radial-gradient(circle, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 70%);
}
.dashboard-hero::after{
  content:""; position:absolute; left:-40px; bottom:-60px; width:200px; height:200px;
  background: radial-gradient(circle, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 70%);
}
.dashboard-hero > *{ position:relative; z-index:1; }
.hero-greet{ font-size:1.55rem; font-weight:700; line-height:1.2; }
.hero-greet span{ color:#fff; }
.hero-sub{ margin-top:4px; color: rgba(255,255,255,.88); max-width: 720px; }
.hero-meta{ display:flex; flex-wrap:wrap; gap:8px; }
.hero-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:999px;
  background: rgba(255,255,255,.16); color:#fff; font-size:.85rem;
  backdrop-filter: blur(4px);
}
.hero-actions .btn{ border:none; background: rgba(255,255,255,.92); color: var(--primary); font-weight:600; }
.hero-actions .btn:hover{ background:#fff; transform: translateY(-1px); }

.stat-card-modern{
  padding: 16px 16px 14px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  box-shadow: 0 8px 24px rgba(15,23,42,.06);
  position: relative;
  overflow: hidden;
}
.stat-card-modern::before{
  content:""; position:absolute; left:0; top:12px; bottom:12px; width:4px; border-radius:0 6px 6px 0; background: var(--accent);
}
.stat-card-modern .stat-top{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.stat-card-modern .stat-icon{
  width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background: var(--accent-soft); color: var(--accent); font-size:1.1rem;
}
.stat-card-modern .stat-label{ font-size:.9rem; color: var(--muted); font-weight:600; }
.stat-card-modern .stat-value{ font-size:1.9rem; font-weight:800; line-height:1.1; color: var(--text); margin: 2px 0 2px; }
.stat-card-modern .stat-foot{ font-size:.78rem; color: var(--muted); }
.stat-card-modern:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15,23,42,.10); }

.dash-panel{ border-radius: 18px; border:1px solid var(--border); }
.dash-panel-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 18px 10px;
}
.dash-panel .table thead th{
  font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color: var(--muted);
  border-bottom-color: var(--border); background: transparent;
}
.dash-panel .table td{ border-bottom-color: var(--border); vertical-align: middle; }
.method-chip{
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px;
  background: var(--primary-soft); color: var(--primary); font-size:.8rem; font-weight:600; text-transform: capitalize;
}
.announce-item{
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.announce-item:last-child{ border-bottom: none; padding-bottom: 4px; }
.announce-title{ font-weight:700; color: var(--text); margin-bottom:2px; }
.announce-meta{ font-size:.78rem; color: var(--muted); margin-bottom:4px; }
.announce-body{ color: var(--text); opacity:.92; line-height:1.5; }

/* RFID UI */
.rfid-scan-card{
  border-radius: 20px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
}
.rfid-count-chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px;
  background: var(--primary-soft); color: var(--primary); font-weight:600; font-size:.85rem;
}
.rfid-input-wrap{
  position: relative;
}
.rfid-input-wrap .rfid-input-icon{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background: var(--primary-soft); color: var(--primary); font-size:1rem; z-index:2;
}
.rfid-input-wrap .rfid-input{
  padding-left: 58px; padding-right: 64px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-weight: 600;
  letter-spacing: .03em;
}
.rfid-input-wrap .rfid-input:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 .22rem rgba(var(--primary-rgb), .14);
}
.rfid-input-wrap .rfid-input-hint{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  font-size:.68rem; font-weight:700; letter-spacing:.08em; color: var(--primary);
  background: var(--primary-soft); padding:4px 8px; border-radius:999px;
}
.rfid-input-wrap-sm .rfid-input-icon{ width:28px; height:28px; border-radius:8px; left:10px; font-size:.9rem; }
.rfid-input-wrap-sm .rfid-input{ padding-left:46px; padding-right:12px; border-radius:12px; min-height:42px; font-weight:500; }
.rfid-input-wrap-sm .rfid-input-hint{ display:none; }
.rfid-status-bar{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:12px;
  background: var(--surface); border:1px dashed var(--border); color: var(--muted); font-size:.9rem;
}
.rfid-status-bar.ok{ border-color: rgba(16,185,129,.35); background: rgba(16,185,129,.08); color: #047857; }
.rfid-status-bar.err{ border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.08); color: #b91c1c; }
html[data-mode="dark"] .rfid-status-bar.ok{ color:#6ee7b7; }
html[data-mode="dark"] .rfid-status-bar.err{ color:#fca5a5; }
.rfid-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:999px;
  background: linear-gradient(135deg, rgba(var(--primary-rgb),.14), rgba(var(--primary-rgb),.06));
  color: var(--primary); border:1px solid rgba(var(--primary-rgb),.18);
  font-weight:600; font-size:.82rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
.rfid-chip i{ font-size:.9rem; }
@media (max-width: 575.98px){
  .dashboard-hero{ padding:18px 16px; border-radius:16px; }
  .hero-greet{ font-size:1.28rem; }
  .stat-card-modern .stat-value{ font-size:1.65rem; }
}

/* ===== Public Frontend (Modern, Dinamis, Kokoh, Asri, Nyaman) ===== */
.public-body{ background: var(--bg); }
.public-main{ min-height: 60vh; }
.public-nav{
  position: sticky; top:0; z-index: 50;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 6px 24px rgba(15,23,42,.04);
}
html[data-mode="dark"] .public-nav{ background: rgba(18,26,43,.82); }
.public-nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.public-nav .brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text); min-width:0; }
.brand-logo{
  width:42px; height:42px; border-radius:14px; flex:0 0 42px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--primary-soft), rgba(var(--primary-rgb),.04));
  color: var(--primary); font-size:1.2rem; border:1px solid var(--border);
  box-shadow: 0 6px 14px rgba(var(--primary-rgb),.12);
}
.brand-logo img{ width:28px; height:28px; object-fit:contain; }
.brand-logo-sm{ width:40px; height:40px; border-radius:12px; flex:0 0 40px; }
.brand-text-wrap{ display:flex; flex-direction:column; line-height:1.1; min-width:0; }
.brand-title{ font-weight:800; font-size:1rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 36vw; }
.brand-tagline{ font-size:.72rem; color:var(--muted); margin-top:2px; }
.public-menu{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.nav-pills-public .nav-link{
  color: var(--muted); border-radius: 12px; font-weight:600; padding: .5rem .75rem;
  display:inline-flex; align-items:center; gap:6px; transition: all .2s ease;
}
.nav-pills-public .nav-link:hover{ color: var(--primary); background: var(--primary-soft); transform: translateY(-1px); }
.nav-pills-public .nav-link.active{
  color:#fff; background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 70%, #22c55e));
  box-shadow: 0 8px 18px rgba(var(--primary-rgb), .22);
}
.nav-cta{ border-radius: 12px; font-weight:700; padding:.5rem .85rem; box-shadow: 0 8px 18px rgba(var(--primary-rgb), .18); }

/* Hero */
.pub-hero{
  position: relative; padding: 72px 0 56px; overflow: hidden;
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(var(--primary-rgb), .18), transparent 60%),
    radial-gradient(700px 360px at 95% 10%, rgba(34,197,94,.16), transparent 55%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
}
.pub-hero-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 80% 80%, rgba(34,197,94,.10), transparent 35%),
    radial-gradient(circle at 20% 70%, rgba(var(--primary-rgb),.08), transparent 30%);
  pointer-events:none;
}
.pub-hero-shape{
  position:absolute; border-radius: 50%; filter: blur(2px); opacity:.55; pointer-events:none;
  animation: floatY 8s ease-in-out infinite;
}
.pub-hero-shape.shape-a{
  width: 320px; height: 320px; right: -80px; top: -40px;
  background: radial-gradient(circle, rgba(34,197,94,.22), rgba(34,197,94,0) 70%);
}
.pub-hero-shape.shape-b{
  width: 260px; height: 260px; left: -60px; bottom: -60px; animation-delay: -2s;
  background: radial-gradient(circle, rgba(var(--primary-rgb),.20), rgba(var(--primary-rgb),0) 70%);
}
@keyframes floatY { 0%,100%{ transform: translateY(0px);} 50%{ transform: translateY(-12px);} }
.pub-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 12px; border-radius:999px; font-size:.85rem; font-weight:700;
  color: var(--primary); background: rgba(var(--primary-rgb), .10);
  border: 1px solid rgba(var(--primary-rgb), .14); margin-bottom: 14px;
}
.pub-hero-title{ font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; margin-bottom: 12px; }
.pub-highlight{ color: var(--primary); background: linear-gradient(120deg, var(--primary), #22c55e); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pub-hero-sub{ font-size: 1.08rem; color: var(--muted); max-width: 720px; line-height: 1.7; }
.pub-cta{ border-radius: 14px; font-weight:700; padding: .75rem 1.1rem; }
.pub-hero-badges{ display:flex; flex-wrap:wrap; gap:10px; }
.pub-hero-badges span{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background: var(--surface); border:1px solid var(--border); color: var(--text); font-size:.85rem; font-weight:600;
  box-shadow: 0 6px 16px rgba(15,23,42,.05);
}
.pub-stats-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
.pub-stat-card{
  display:flex; align-items:center; gap:12px; padding:16px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border:1px solid var(--border); border-radius: 18px;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
  backdrop-filter: blur(6px); transition: all .22s ease;
}
.pub-stat-card:hover{ transform: translateY(-3px); box-shadow: 0 16px 30px rgba(15,23,42,.10); }
.pub-stat-icon{
  width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background: color-mix(in srgb, var(--a) 14%, transparent); color: var(--a); font-size:1.2rem; flex:0 0 46px;
}
.pub-stat-val{ font-size:1.7rem; font-weight:800; line-height:1; color:var(--text); }
.pub-stat-lbl{ font-size:.85rem; color:var(--muted); font-weight:600; margin-top:2px; }

/* Sections & cards */
.pub-section{ padding: 52px 0; }
.pub-section.pt-4{ padding-top: 28px; }
.pub-section-title{ font-weight:800; letter-spacing:-.01em; }
.pub-card{
  border-radius: 18px; border:1px solid var(--border);
  background: var(--surface); box-shadow: 0 10px 26px rgba(15,23,42,.05);
}
.pub-card:hover{ box-shadow: 0 16px 34px rgba(15,23,42,.08); }
.pub-feature-card{
  padding: 22px; border-radius: 18px; border:1px solid var(--border);
  background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--primary-soft) 35%, var(--surface)) 100%);
  box-shadow: 0 10px 24px rgba(15,23,42,.05); transition: all .22s ease;
}
.pub-feature-card:hover{ transform: translateY(-3px); }
.pub-feature-icon{
  width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--primary), #22c55e); color:#fff; font-size:1.2rem; margin-bottom:12px;
  box-shadow: 0 10px 18px rgba(var(--primary-rgb), .22);
}
.pub-news-card, .pub-announce-card{ position: relative; overflow:hidden; }
.pub-news-card::before, .pub-announce-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background: linear-gradient(180deg, var(--primary), #22c55e);
}
.pub-announce-body{ white-space: pre-line; line-height: 1.7; color: var(--text); }

/* Page head */
.pub-page-head{
  padding: 44px 0 18px;
  background:
    radial-gradient(700px 260px at 10% 0%, rgba(var(--primary-rgb), .14), transparent 60%),
    radial-gradient(500px 220px at 90% 0%, rgba(34,197,94,.12), transparent 55%);
}
.pub-page-title{ font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 800; margin: 0 0 6px; letter-spacing:-.02em; }
.pub-page-sub{ color: var(--muted); margin:0; max-width: 760px; font-size:1.02rem; }

/* Profile/contact helpers */
.pub-profile-card{ padding: 28px; }
.pub-profile-logo img{ max-width:140px; max-height:140px; object-fit:contain; }
.pub-info-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 12px; border-radius:12px; background: var(--surface-2); border:1px solid var(--border);
}
.pub-info-row span{ color: var(--muted); font-size:.9rem; }
.pub-field label{ display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color: var(--muted); font-weight:700; margin-bottom:4px; }
.pub-field > div{ font-size:1rem; color: var(--text); }
.pub-contact-item{ display:flex; gap:12px; align-items:flex-start; }
.pub-contact-icon{
  width:42px; height:42px; border-radius:12px; flex:0 0 42px; display:flex; align-items:center; justify-content:center;
  background: var(--primary-soft); 
  color: var(--primary); font-size:1.1rem;
}
.pub-cta-card{
  background:
    radial-gradient(500px 200px at 100% 0%, rgba(34,197,94,.14), transparent 60%),
    linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--primary-soft) 30%, var(--surface)) 100%);
}

/* Footer (minimal, responsif, dinamis) */
.site-footer{
  position: relative;
  margin-top: 40px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  color: var(--text);
  overflow: hidden;
}
.site-footer.has-bg{
  border-top: none;
  background-color: #0f172a;
  background-image:
    linear-gradient(180deg, rgba(15,23,42,.78) 0%, rgba(15,23,42,.62) 45%, rgba(15,23,42,.82) 100%),
    var(--footer-bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.site-footer.has-bg .site-footer-main,
.site-footer.has-bg .site-footer-bottom{ position: relative; z-index: 1; }
.site-footer.has-bg .footer-name{ color:#fff; }
.site-footer.has-bg .footer-tag,
.site-footer.has-bg .footer-desc,
.site-footer.has-bg .footer-col-title,
.site-footer.has-bg .footer-links a,
.site-footer.has-bg .footer-contact a,
.site-footer.has-bg .footer-contact li,
.site-footer.has-bg .footer-copy,
.site-footer.has-bg .footer-bottom-inner{ color: rgba(255,255,255,.88); }
.site-footer.has-bg .footer-col-title{ color:#fff; }
.site-footer.has-bg .footer-links a:hover,
.site-footer.has-bg .footer-contact a:hover{ color:#fff; }
.site-footer.has-bg .footer-contact li > i{ color:#86efac; }
.site-footer.has-bg .footer-logo{ background: rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.18); backdrop-filter: blur(4px); }
.site-footer.has-bg .site-footer-bottom{ border-top: 1px solid rgba(255,255,255,.16); background: rgba(15,23,42,.18); backdrop-filter: blur(2px); }
.site-footer.has-bg .footer-hitcounter{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); }
.site-footer.has-bg .hitcounter-label{ color: rgba(255,255,255,.9); }
.site-footer.has-bg .hitcounter-digit{ background: rgba(255,255,255,.92); color:#0f172a; }

.site-footer-main{ padding: 36px 0 24px; }
.footer-logo{
  width:40px; height:40px; border-radius:12px; flex:0 0 40px;
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--primary-soft); color: var(--primary); font-size:1.1rem;
}
.footer-logo img{ width:24px; height:24px; object-fit:contain; }
.footer-name{ font-size:1.05rem; font-weight:700; line-height:1.2; color:var(--text); }
.footer-tag{ font-size:.78rem; color:var(--muted); margin-top:2px; }
.footer-desc{ color: var(--muted); font-size:.9rem; line-height:1.65; max-width: 420px; }
.footer-col-title{
  font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color: var(--text); margin-bottom: 10px;
}
.footer-links, .footer-contact{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.footer-links-grid{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px 14px;
}
.footer-links-grid li{ min-width:0; }
.footer-links a, .footer-contact a{
  color: var(--muted); text-decoration:none; font-size:.92rem; transition: color .15s ease;
  display:inline-block; line-height:1.45;
}
.footer-links a:hover, .footer-contact a:hover{ color: var(--primary); }
.footer-contact li{ display:flex; align-items:flex-start; gap:10px; color: var(--muted); font-size:.9rem; line-height:1.55; }
.footer-contact li > i{ color: var(--primary); margin-top:3px; font-size:.95rem; flex:0 0 16px; }
.footer-contact span, .footer-contact a{ overflow-wrap:anywhere; word-break:break-word; min-width:0; }
.site-footer-bottom{ border-top: 1px solid var(--border); background: var(--surface-2); }
.footer-bottom-inner{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding: 12px 0; font-size:.85rem; color: var(--muted);
}
.footer-copy{ color: var(--muted); line-height:1.5; }
.site-footer .footer-hitcounter{
  padding:4px 8px; border-radius:10px; gap:6px;
  background: var(--surface); border:1px solid var(--border);
}
.site-footer .hitcounter-label{ font-size:.78rem; }
.site-footer .hitcounter-digit{
  min-width:18px; height:24px; font-size:.78rem; border-radius:6px;
  box-shadow:none; background: var(--primary);
}

@media (max-width: 767.98px){
  .site-footer-main{ padding: 28px 0 18px; }
  .site-footer-main .row, .footer-grid{ --bs-gutter-y: 1.25rem; }
  .site-footer-main .container,
  .site-footer-bottom .container{
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media (max-width: 575.98px){
  .site-footer{ margin-top: 28px; }
  .site-footer-main{ padding: 28px 0 22px; }
  .site-footer-main .container,
  .site-footer-bottom .container{
    padding-left: max(24px, calc(env(safe-area-inset-left, 0px) + 20px));
    padding-right: max(24px, calc(env(safe-area-inset-right, 0px) + 20px));
  }
  .footer-grid{ --bs-gutter-y: 1.15rem; }
  .footer-brand{ gap:10px !important; align-items:flex-start !important; }
  .footer-brand-text{ min-width:0; flex:1; }
  .footer-name{ font-size:1rem; line-height:1.25; }
  .footer-desc{ font-size:.88rem; line-height:1.65; margin-top:2px; }
  .footer-col-brand, .footer-col-menu, .footer-col-contact{
    padding-top:2px;
  }
  .footer-col-menu, .footer-col-contact{
    border-top: 1px solid var(--border);
    padding-top:14px;
  }
  .site-footer.has-bg .footer-col-menu, .site-footer.has-bg .footer-col-contact{
    border-top-color: rgba(255,255,255,.16);
  }
  .footer-col-title{ margin-bottom:8px; font-size:.8rem; letter-spacing:.06em; }
  .footer-links-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px 12px; }
  .footer-links li a{ font-size:.9rem; padding:2px 0; }
  .footer-contact{ gap:8px; }
  .footer-contact li, .footer-contact a, .footer-contact span{ font-size:.9rem; line-height:1.55; }
  .footer-bottom-inner{
    flex-direction:column; align-items:flex-start; gap:8px; padding: 12px 0 14px;
  }
  .footer-copy{ line-height:1.5; }
  .site-footer .footer-hitcounter{ width:auto; align-self:flex-start; }
}

/* Public e-learning tweaks */
.pub-card .list-group-item-action:hover{ background: var(--primary-soft) !important; }
.public-body .brand-mark{ margin:0 auto 10px; }

/* Responsive */
@media (max-width: 991.98px){
  .brand-tagline{ display:none; }
  .brand-title{ max-width: 52vw; }
  .pub-hero{ padding: 52px 0 40px; }
}
@media (max-width: 575.98px){
  .public-menu .nav-link span, .nav-cta span{ display:none; }
  .nav-pills-public .nav-link{ padding:.5rem .6rem; }
  .pub-stats-grid{ grid-template-columns: 1fr 1fr; gap:10px; }
  .pub-stat-card{ padding:12px; }
  .pub-stat-val{ font-size:1.45rem; }
  .pub-hero-badges span{ font-size:.78rem; }
  .pub-section{ padding: 36px 0; }
}

/* Hit counter */
.footer-hitcounter{
  display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:6px 10px; border-radius:14px;
  background: linear-gradient(135deg, rgba(var(--primary-rgb), .12), rgba(34,197,94,.10));
  border: 1px solid rgba(var(--primary-rgb), .18);
  max-width: 100%;
}
.hitcounter-label{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.8rem; font-weight:700; color: var(--muted);
  white-space: nowrap;
}
.hitcounter-label i{ color: var(--primary); }
.hitcounter-digits{ display:inline-flex; gap:4px; flex-wrap:wrap; }
.hitcounter-digit{
  min-width: 22px; height: 28px; padding: 0 4px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px; font-weight:800; font-size:.9rem; line-height:1;
  color:#fff;
  background: linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--primary) 70%, #16a34a));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 12px rgba(var(--primary-rgb), .22);
}
@media (max-width: 767.98px){
  .footer-hitcounter{ width:100%; justify-content:space-between; }
}
@media (max-width: 575.98px){
  .footer-hitcounter{ gap:6px; padding:8px 10px; }
  .hitcounter-digits{ gap:3px; }
  .hitcounter-digit{ min-width:20px; height:26px; font-size:.82rem; border-radius:7px; }
}

/* Map Lokasi Sekolah */
.school-map{
  width: 100%; height: 340px; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}
.school-map-sm{ height: 260px; margin-top: 4px; }
.school-map .leaflet-control-attribution{ font-size: 10px; }
@media (max-width: 575.98px){
  .school-map{ height: 260px; border-radius: 14px; }
  .school-map-sm{ height: 220px; }
}

/* Galeri modern + Swal popup */
.galeri-admin-card, .galeri-item.card { overflow:hidden; border-radius:16px; }
.galeri-thumb, .galeri-admin-thumb{
  position:relative; aspect-ratio: 4/3; overflow:hidden; background: var(--surface-2);
}
.galeri-thumb img, .galeri-admin-thumb img{
  width:100%; height:100%; object-fit:cover; transition: transform .45s ease, filter .45s ease;
}
.galeri-item:hover .galeri-thumb img,
.galeri-admin-card:hover .galeri-admin-thumb img{ transform: scale(1.06); }
.galeri-thumb-fallback{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  color: var(--muted); font-size:2rem;
  background: linear-gradient(135deg, var(--surface-2), var(--primary-soft));
}
.galeri-badge{
  position:absolute; left:10px; top:10px; z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px; font-size:.72rem; font-weight:700; text-transform:capitalize;
  color:#fff; background: rgba(15,23,42,.55); backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,.18);
}
.galeri-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, rgba(15,23,42,.05), rgba(15,23,42,.45));
  color:#fff; font-size:2rem; opacity:0; transition: opacity .25s ease;
}
.galeri-item:hover .galeri-overlay,
.galeri-admin-card:hover .galeri-overlay,
.galeri-admin-thumb:hover .galeri-overlay{ opacity:1; }
.galeri-overlay i{
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.25); backdrop-filter: blur(4px);
  font-size:1.1rem;
}
.galeri-overlay-btn{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  background: rgba(15,23,42,.35); border:1px solid rgba(255,255,255,.22); backdrop-filter: blur(4px);
  font-size:.9rem; font-weight:600;
}
.galeri-overlay-btn i{ width:auto; height:auto; border:none; background:transparent; font-size:1rem; }
.galeri-item{ cursor:pointer; }
.galeri-kat-pill{
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:999px; font-size:.72rem; font-weight:600;
  color: var(--primary); background: var(--primary-soft);
}
.swal-galeri-popup{
  border-radius: 10px !important;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(15,23,42,.35) !important;
}
.swal-galeri-media{ max-width: 100%; }
.swal-galeri-close{ box-shadow:none !important; }
.swal-galeri-html{ margin: 0 !important; }
@media (max-width: 575.98px){
  .galeri-overlay{ opacity:1; background: linear-gradient(180deg, rgba(15,23,42,0), rgba(15,23,42,.35)); align-items:flex-end; justify-content:flex-end; padding:8px; }
  .galeri-overlay-btn{ padding:6px 10px; font-size:.8rem; }
  .swal-galeri-popup{ width: calc(100vw - 20px) !important; padding: 8px !important; }
}