<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Template Dashboard — MA As-Syafi'iyah 02</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Outfit:wght@300;400;500;600;700;800;900&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
/* ════════════════════════════════════════
   DESIGN TOKENS
════════════════════════════════════════ */
:root {
  --ob:    #080C14; --ob-m: #0E1520; --ob-l: #141D2E; --ob-ll: #1C2840;
  --g:     #C9A84C; --g-l:  #E0C06A; --g-d:  #A8893A; --g-fg:  #FDF0C8;
  --bg:    #F7F5F2; --sf:   #FFFFFF; --sf2:  #FAFAF9;
  --tx:    #131820; --txm:  #5A6478; --txl:  #9BA4B5;
  --bd:    #E8E4DC; --bd-d: #D4CCBF;
  --em:    #0C6B58; --sc:   #1D4ED8; --ru:   #9B1C1C; --am:    #B45309;
  --sh:    rgba(8,12,20,.06); --sh-m: rgba(8,12,20,.10); --sh-s: rgba(8,12,20,.18);
  --sw:    272px;
}
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Outfit',sans-serif; background:var(--bg); color:var(--tx); min-height:100vh; display:flex; -webkit-font-smoothing:antialiased; }

/* ════════════════════════════════════════
   LOADER
════════════════════════════════════════ */
.loader { position:fixed;inset:0;z-index:9999;background:var(--ob);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;transition:opacity .7s ease,visibility .7s ease; }
.loader.gone { opacity:0;visibility:hidden;pointer-events:none; }
.loader-ring { width:100px;height:100px;position:relative; }
.loader-ring::before,.loader-ring::after { content:'';position:absolute;border-radius:50%; }
.loader-ring::before { inset:0;border:2px solid rgba(201,168,76,.15); }
.loader-ring::after  { inset:4px;border:2px solid transparent;border-top-color:var(--g);animation:spin 1s linear infinite; }
.loader-inner { position:absolute;inset:18px;background:var(--ob-l);border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid rgba(201,168,76,.2);font-size:1.8rem; }
.loader-txt   { font-family:'DM Serif Display',serif;font-size:1.25rem;color:rgba(255,255,255,.6);letter-spacing:.05em; }
.loader-dots  { display:flex;gap:.5rem;margin-top:-.5rem; }
.loader-dot   { width:6px;height:6px;border-radius:50%;background:var(--g);animation:ldot .8s ease-in-out infinite; }
.loader-dot:nth-child(2){animation-delay:.15s} .loader-dot:nth-child(3){animation-delay:.3s}
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes ldot { 0%,80%,100%{transform:scale(.6);opacity:.4} 40%{transform:scale(1);opacity:1} }
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes meshDrift { 0%,100%{transform:translate(0,0)} 50%{transform:translate(30px,-20px)} }

/* ════════════════════════════════════════
   TOPBAR — mobile only
════════════════════════════════════════ */
.topbar { display:none;position:fixed;top:0;left:0;right:0;height:60px;background:var(--ob);border-bottom:1px solid rgba(201,168,76,.12);z-index:198;padding:0 1rem;align-items:center;justify-content:space-between;box-shadow:0 2px 16px rgba(0,0,0,.25); }
.topbar-brand { display:flex;align-items:center;gap:.625rem; }
.topbar-logo  { width:34px;height:34px;border-radius:9px;background:var(--ob-l);border:1.5px solid var(--g-d);display:flex;align-items:center;justify-content:center;font-size:1.1rem; }
.topbar-name  { font-family:'DM Serif Display',serif;font-size:.85rem;color:var(--g-fg); }
.mob-toggle   { width:42px;height:42px;background:rgba(201,168,76,.1);border:1.5px solid rgba(201,168,76,.2);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;cursor:pointer;transition:background .2s; }
.mob-toggle:hover { background:rgba(201,168,76,.18); }

/* ════════════════════════════════════════
   SIDEBAR OVERLAY
════════════════════════════════════════ */
.sb-overlay { display:none;position:fixed;inset:0;z-index:199;background:rgba(8,12,20,.55);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s; }
.sb-overlay.show { opacity:1;pointer-events:all; }

/* ════════════════════════════════════════
   SIDEBAR
════════════════════════════════════════ */
.sb { position:fixed;top:0;left:0;bottom:0;width:var(--sw);background:var(--ob);display:flex;flex-direction:column;z-index:200;overflow:hidden;transition:transform .3s cubic-bezier(.4,0,.2,1); }
.sb::before { content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(201,168,76,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(201,168,76,.04) 1px,transparent 1px);background-size:32px 32px; }
.sb::after  { content:'';position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:200px;height:120px;background:radial-gradient(ellipse,rgba(201,168,76,.18) 0%,transparent 70%);pointer-events:none; }

.sb-brand { padding:1.75rem 1.5rem 1.5rem;display:flex;align-items:center;gap:.875rem;border-bottom:1px solid rgba(201,168,76,.1);position:relative;z-index:1;flex-shrink:0; }
.sb-logo  { width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,var(--ob-ll),var(--ob-l));border:1.5px solid var(--g-d);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;box-shadow:0 0 0 3px rgba(201,168,76,.15),0 8px 20px rgba(0,0,0,.3);font-size:1.6rem; }
.sb-name  { font-family:'DM Serif Display',serif;font-size:.95rem;color:var(--g-fg);line-height:1.2; }
.sb-short { font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-top:.1rem; }

.sb-nav { flex:1;padding:1rem 0;overflow-y:auto;position:relative;z-index:1; }
.sb-nav::-webkit-scrollbar { width:0; }
.sb-sec-lbl { font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.25);padding:1rem 1.5rem .5rem; }

.nav-a { display:flex;align-items:center;gap:.875rem;padding:.75rem 1.5rem;color:rgba(255,255,255,.5);text-decoration:none;font-size:.875rem;font-weight:500;position:relative;transition:color .22s;cursor:pointer; }
.nav-a::before { content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(201,168,76,.07),transparent);transform:translateX(-100%);transition:transform .5s ease;pointer-events:none; }
.nav-a::after  { content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:0;background:var(--g);border-radius:0 3px 3px 0;transition:height .22s cubic-bezier(.34,1.56,.64,1); }
.nav-a:hover,.nav-a.on { color:var(--g-l);background:rgba(201,168,76,.06); }
.nav-a:hover::before,.nav-a.on::before { transform:translateX(100%); }
.nav-a:hover::after,.nav-a.on::after   { height:70%; }
.nav-ico { width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;font-size:1.05rem;flex-shrink:0;transition:all .25s cubic-bezier(.34,1.56,.64,1); }
.nav-a:hover .nav-ico,.nav-a.on .nav-ico { background:rgba(201,168,76,.15);transform:scale(1.15) rotate(-5deg); }

.sb-foot { padding:1.25rem 1.5rem;border-top:1px solid rgba(201,168,76,.1);flex-shrink:0;position:relative;z-index:1; }
.sb-user { display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:12px;margin-bottom:.875rem; }
.sb-uav  { width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--g-d),var(--g));display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;border:1.5px solid rgba(201,168,76,.4); }
.sb-uname { font-size:.825rem;font-weight:700;color:rgba(255,255,255,.85);line-height:1.2; }
.sb-urole { display:inline-block;margin-top:.15rem;font-size:.58rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.1rem .5rem;border-radius:50px;background:rgba(201,168,76,.2);color:var(--g-l);border:1px solid rgba(201,168,76,.25); }
.logout-btn { display:flex;align-items:center;justify-content:center;gap:.625rem;width:100%;padding:.75rem;background:linear-gradient(135deg,rgba(155,28,28,.7),rgba(185,28,28,.6));color:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.08);border-radius:10px;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-family:'Outfit',sans-serif;text-decoration:none;cursor:pointer;transition:all .25s; }
.logout-btn:hover { background:linear-gradient(135deg,#9B1C1C,#B91C1C);transform:translateY(-2px);box-shadow:0 6px 20px rgba(155,28,28,.35); }

/* ════════════════════════════════════════
   MAIN
════════════════════════════════════════ */
.main { margin-left:var(--sw);flex:1;min-height:100vh;display:flex;flex-direction:column; }
.wrap { max-width:1400px;margin:0 auto;padding:2rem 2.5rem;flex:1;width:100%; }

/* ════════════════════════════════════════
   HERO
════════════════════════════════════════ */
.hero { position:relative;overflow:hidden;border-radius:24px;margin-bottom:1.75rem;background:var(--ob);min-height:220px;display:flex;align-items:stretch;box-shadow:0 20px 60px rgba(8,12,20,.2);animation:fadeUp .7s cubic-bezier(.16,1,.3,1) both; }
.hero-mesh { position:absolute;inset:0;pointer-events:none;overflow:hidden; }
.hero-mesh::before { content:'';position:absolute;width:600px;height:600px;top:-200px;right:-100px;background:radial-gradient(circle,rgba(201,168,76,.12) 0%,transparent 60%);animation:meshDrift 12s ease-in-out infinite; }
.hero-mesh::after  { content:'';position:absolute;width:400px;height:400px;bottom:-150px;left:100px;background:radial-gradient(circle,rgba(29,78,216,.1) 0%,transparent 60%);animation:meshDrift 9s ease-in-out infinite reverse; }
.hero-lines { position:absolute;inset:0;pointer-events:none;overflow:hidden; }
.hero-lines::before { content:'';position:absolute;width:120%;height:1px;top:35%;left:-10%;background:linear-gradient(90deg,transparent,rgba(201,168,76,.12),transparent);transform:rotate(-8deg); }
.hero-lines::after  { content:'';position:absolute;width:120%;height:1px;top:65%;left:-10%;background:linear-gradient(90deg,transparent,rgba(201,168,76,.08),transparent);transform:rotate(-8deg); }
.hero-content { position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:2.25rem 2.75rem;width:100%;gap:2rem;flex-wrap:wrap; }
.hero-eyebrow { display:inline-flex;align-items:center;gap:.5rem;padding:.35rem 1rem;background:rgba(201,168,76,.12);border:1px solid rgba(201,168,76,.2);border-radius:50px;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--g-l);margin-bottom:1.125rem; }
.hero-name { font-family:'DM Serif Display',serif;font-size:2.375rem;color:#FFF;line-height:1.1;letter-spacing:-.01em;margin-bottom:.5rem; }
.hero-name span { color:var(--g-l);font-style:italic; }
.hero-sub  { font-size:.9rem;font-weight:400;color:rgba(255,255,255,.5);margin-bottom:1.5rem; }
.hero-meta { display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap; }
.hero-meta-item { display:flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:500;color:rgba(255,255,255,.45); }
.hero-meta-item strong { color:rgba(255,255,255,.7); }
.hero-r    { display:flex;gap:1rem;flex-shrink:0; }
.hero-stat { background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:1.25rem 1.625rem;text-align:center;min-width:110px;backdrop-filter:blur(10px);transition:all .3s ease;position:relative;overflow:hidden; }
.hero-stat::before { content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--g),transparent);opacity:0;transition:opacity .3s; }
.hero-stat:hover { background:rgba(255,255,255,.09);transform:translateY(-4px); }
.hero-stat:hover::before { opacity:1; }
.hero-stat-n { font-family:'DM Mono',monospace;font-size:2.25rem;font-weight:500;color:white;line-height:1;margin-bottom:.35rem; }
.hero-stat-l { font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4); }

/* ════════════════════════════════════════
   STAT CARDS
════════════════════════════════════════ */
.srow { display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-bottom:1.75rem; }
.sc { background:var(--sf);border-radius:20px;border:1px solid var(--bd);padding:1.625rem 1.75rem;position:relative;overflow:hidden;box-shadow:0 2px 12px var(--sh);transition:all .35s cubic-bezier(.34,1.56,.64,1);animation:fadeUp .6s ease-out backwards;cursor:default; }
.sc:hover { transform:translateY(-8px) scale(1.02);box-shadow:0 20px 48px var(--sh-s);border-color:var(--bd-d); }
.sc::after  { content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.6) 0%,transparent 100%);border-radius:20px 20px 0 0;pointer-events:none; }
.sc::before { content:'';position:absolute;top:0;left:0;right:0;height:4px;border-radius:20px 20px 0 0;transition:height .3s; }
.sc:hover::before { height:6px; }
.sc.c1::before{background:linear-gradient(90deg,#1D4ED8,#3B82F6)} .sc.c2::before{background:linear-gradient(90deg,#9B1C1C,#DC2626)}
.sc.c3::before{background:linear-gradient(90deg,#0C6B58,#10B981)} .sc.c4::before{background:linear-gradient(90deg,#B45309,#F59E0B)}
.sc.c5::before{background:linear-gradient(90deg,#7C3AED,#A855F7)} .sc.c6::before{background:linear-gradient(90deg,#0891B2,#06B6D4)}
.sc-top { display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.25rem;position:relative;z-index:1; }
.sc-lbl { font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--txl); }
.sc-ico { width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;transition:all .3s cubic-bezier(.34,1.56,.64,1); }
.sc:hover .sc-ico { transform:rotate(-10deg) scale(1.15); }
.sc.c1 .sc-ico{background:linear-gradient(135deg,#DBEAFE,#BFDBFE)} .sc.c2 .sc-ico{background:linear-gradient(135deg,#FEE2E2,#FECACA)}
.sc.c3 .sc-ico{background:linear-gradient(135deg,#D1FAE5,#A7F3D0)} .sc.c4 .sc-ico{background:linear-gradient(135deg,#FEF3C7,#FDE68A)}
.sc.c5 .sc-ico{background:linear-gradient(135deg,#F5F3FF,#EDE9FE)} .sc.c6 .sc-ico{background:linear-gradient(135deg,#CFFAFE,#A5F3FC)}
.sc-val { font-family:'DM Serif Display',serif;font-size:2.75rem;color:var(--tx);line-height:1;margin-bottom:.375rem;position:relative;z-index:1; }
.sc-cap { font-size:.8rem;font-weight:500;color:var(--txm);position:relative;z-index:1; }

/* ════════════════════════════════════════
   SECTION HEADER
════════════════════════════════════════ */
.sec-hdr   { display:flex;align-items:center;gap:1rem;margin-bottom:1.125rem; }
.sec-orn   { width:4px;height:28px;background:linear-gradient(180deg,var(--g),var(--g-d));border-radius:50px;flex-shrink:0; }
.sec-title { font-family:'DM Serif Display',serif;font-size:1.375rem;color:var(--tx); }
.sec-sub   { font-size:.8rem;font-weight:500;color:var(--txl);margin-left:auto; }

/* ════════════════════════════════════════
   MENU CARDS
════════════════════════════════════════ */
.menu-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:.875rem;margin-bottom:2rem; }
.mcard { background:var(--sf);border-radius:14px;border:1px solid var(--bd);padding:1.125rem 1rem 1rem;text-decoration:none;color:var(--tx);box-shadow:0 2px 10px var(--sh);position:relative;overflow:hidden;transition:all .32s cubic-bezier(.34,1.56,.64,1);display:flex;flex-direction:column;animation:fadeUp .6s ease-out backwards; }
.mcard::before { content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:14px 14px 0 0;transition:height .3s; }
.mcard:hover::before { height:5px; }
.mcard::after { content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.38) 50%,rgba(255,255,255,0) 60%);transform:translateX(-200%) skewX(-15deg);transition:transform .55s ease;pointer-events:none; }
.mcard:hover::after { transform:translateX(300%) skewX(-15deg); }
.mcard:hover { transform:translateY(-6px) scale(1.012);box-shadow:0 18px 40px var(--sh-s);border-color:var(--bd-d); }
.mc1::before{background:linear-gradient(90deg,#4F46E5,#7C3AED)} .mc2::before{background:linear-gradient(90deg,#0C6B58,#059669)}
.mc3::before{background:linear-gradient(90deg,#1D4ED8,#0EA5E9)} .mc4::before{background:linear-gradient(90deg,#F97316,#EF4444)}
.mc5::before{background:linear-gradient(90deg,#7C3AED,#EC4899)} .mc6::before{background:linear-gradient(90deg,#EC4899,#F43F5E)}
.mc7::before{background:linear-gradient(90deg,#F59E0B,#D97706)} .mc8::before{background:linear-gradient(90deg,#0C6B58,#0EA5E9)}
.mc9::before{background:linear-gradient(90deg,#DC2626,#F97316)}
.mcard:nth-child(1){animation-delay:.07s} .mcard:nth-child(2){animation-delay:.11s} .mcard:nth-child(3){animation-delay:.15s}
.mcard:nth-child(4){animation-delay:.19s} .mcard:nth-child(5){animation-delay:.23s} .mcard:nth-child(6){animation-delay:.27s}
.mcard:nth-child(7){animation-delay:.31s} .mcard:nth-child(8){animation-delay:.35s} .mcard:nth-child(9){animation-delay:.39s}
.mcard-ico  { width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.35rem;margin-bottom:.75rem;border:1.5px solid var(--bd);background:var(--sf2);transition:all .35s cubic-bezier(.34,1.56,.64,1);position:relative;z-index:1;flex-shrink:0; }
.mcard:hover .mcard-ico { transform:scale(1.18) rotate(-8deg);border-color:transparent; }
.mc1:hover .mcard-ico{background:linear-gradient(135deg,#EEF2FF,#E0E7FF)} .mc2:hover .mcard-ico{background:linear-gradient(135deg,#ECFDF5,#D1FAE5)}
.mc3:hover .mcard-ico{background:linear-gradient(135deg,#EFF6FF,#DBEAFE)} .mc4:hover .mcard-ico{background:linear-gradient(135deg,#FFF7ED,#FFEDD5)}
.mc5:hover .mcard-ico{background:linear-gradient(135deg,#F5F3FF,#EDE9FE)} .mc6:hover .mcard-ico{background:linear-gradient(135deg,#FFF1F2,#FFE4E6)}
.mc7:hover .mcard-ico{background:linear-gradient(135deg,#FFFBEB,#FEF3C7)} .mc8:hover .mcard-ico{background:linear-gradient(135deg,#F0FDFA,#CCFBF1)}
.mc9:hover .mcard-ico{background:linear-gradient(135deg,#FEF2F2,#FEE2E2)}
.mcard-name { font-family:'DM Serif Display',serif;font-size:.95rem;color:var(--tx);margin-bottom:.3rem;position:relative;z-index:1;transition:color .2s;line-height:1.25; }
.mcard:hover .mcard-name { color:var(--ob); }
.mcard-desc { font-size:.75rem;font-weight:400;color:var(--txm);line-height:1.5;flex:1;position:relative;z-index:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.mcard-cta  { display:inline-flex;align-items:center;gap:.375rem;margin-top:.75rem;padding:.35rem .9rem;border-radius:50px;font-size:.7rem;font-weight:700;letter-spacing:.04em;background:var(--sf2);border:1.5px solid var(--bd);color:var(--txm);transition:all .25s cubic-bezier(.34,1.56,.64,1);align-self:flex-start;position:relative;z-index:1; }
.mcard:hover .mcard-cta { padding-right:1.25rem;border-color:transparent;color:white; }
.mc1:hover .mcard-cta{background:linear-gradient(135deg,#4F46E5,#7C3AED);box-shadow:0 3px 12px rgba(79,70,229,.3)}
.mc2:hover .mcard-cta{background:linear-gradient(135deg,#0C6B58,#059669);box-shadow:0 3px 12px rgba(12,107,88,.3)}
.mc3:hover .mcard-cta{background:linear-gradient(135deg,#1D4ED8,#0EA5E9);box-shadow:0 3px 12px rgba(29,78,216,.3)}
.mc4:hover .mcard-cta{background:linear-gradient(135deg,#F97316,#EF4444);box-shadow:0 3px 12px rgba(249,115,22,.3)}
.mc5:hover .mcard-cta{background:linear-gradient(135deg,#7C3AED,#EC4899);box-shadow:0 3px 12px rgba(124,58,237,.3)}
.mc6:hover .mcard-cta{background:linear-gradient(135deg,#EC4899,#F43F5E);box-shadow:0 3px 12px rgba(236,72,153,.3)}
.mc7:hover .mcard-cta{background:linear-gradient(135deg,#F59E0B,#D97706);box-shadow:0 3px 12px rgba(245,158,11,.3)}
.mc8:hover .mcard-cta{background:linear-gradient(135deg,#0C6B58,#0EA5E9);box-shadow:0 3px 12px rgba(14,165,233,.3)}
.mc9:hover .mcard-cta{background:linear-gradient(135deg,#DC2626,#F97316);box-shadow:0 3px 12px rgba(220,38,38,.3)}

/* ════════════════════════════════════════
   CARD & TABLE COMPONENTS
════════════════════════════════════════ */
.card { background:var(--sf);border-radius:20px;border:1px solid var(--bd);padding:1.75rem;box-shadow:0 2px 12px var(--sh);animation:fadeUp .55s ease both;margin-bottom:1.5rem; }
.card-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;padding-bottom:1.25rem;border-bottom:1px solid var(--bd);flex-wrap:wrap;gap:1rem; }
.card-title  { font-family:'DM Serif Display',serif;font-size:1.125rem;color:var(--tx); }
.card-sub    { font-size:.78rem;font-weight:500;color:var(--txl);margin-top:.2rem; }
.tbl-wrap    { overflow-x:auto;border-radius:16px;border:1px solid var(--bd); }
.tbl         { width:100%;border-collapse:collapse;font-size:.84rem;background:var(--sf);border-radius:16px;overflow:hidden; }
.tbl thead tr{ background:var(--ob);color:rgba(255,255,255,.75); }
.tbl thead th{ padding:.875rem 1.25rem;text-align:left;font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap; }
.tbl thead th:first-child{border-radius:16px 0 0 0} .tbl thead th:last-child{border-radius:0 16px 0 0}
.tbl tbody tr{ border-bottom:1px solid var(--bd);transition:background .18s; }
.tbl tbody tr:last-child { border-bottom:none; }
.tbl tbody tr:hover { background:var(--sf2); }
.tbl tbody td{ padding:.875rem 1.25rem;color:var(--tx);vertical-align:middle; }
.tbl-num     { font-family:'DM Mono',monospace;font-size:.8rem;color:var(--txl); }

/* ════════════════════════════════════════
   BADGES
════════════════════════════════════════ */
.badge        { display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .75rem;border-radius:50px;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase; }
.badge-green  { background:#D1FAE5;color:#065F46;border:1px solid #A7F3D0; }
.badge-red    { background:#FEE2E2;color:#7F1D1D;border:1px solid #FECACA; }
.badge-amber  { background:#FEF3C7;color:#78350F;border:1px solid #FDE68A; }
.badge-blue   { background:#DBEAFE;color:#1E3A8A;border:1px solid #BFDBFE; }
.badge-purple { background:#F5F3FF;color:#4C1D95;border:1px solid #DDD6FE; }
.badge-gray   { background:#F1F5F9;color:#475569;border:1px solid #E2E8F0; }

/* ════════════════════════════════════════
   BUTTONS
════════════════════════════════════════ */
.btn        { display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.7rem 1.5rem;border-radius:11px;border:none;cursor:pointer;font-family:'Outfit',sans-serif;font-size:.83rem;font-weight:700;letter-spacing:.03em;text-decoration:none;transition:all .28s cubic-bezier(.34,1.56,.64,1);white-space:nowrap; }
.btn:hover  { transform:translateY(-2px); }
.btn-gold   { background:linear-gradient(135deg,var(--g-d),var(--g-l));color:var(--ob);box-shadow:0 4px 16px rgba(201,168,76,.3); }
.btn-gold:hover   { box-shadow:0 8px 24px rgba(201,168,76,.4); }
.btn-dark   { background:var(--ob);color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.08); }
.btn-dark:hover   { background:var(--ob-l); }
.btn-green  { background:linear-gradient(135deg,#065F46,#059669);color:#fff;box-shadow:0 4px 16px rgba(6,95,70,.25); }
.btn-green:hover  { box-shadow:0 8px 24px rgba(6,95,70,.35); }
.btn-red    { background:linear-gradient(135deg,#9B1C1C,#B91C1C);color:#fff;box-shadow:0 4px 16px rgba(155,28,28,.25); }
.btn-red:hover    { box-shadow:0 8px 24px rgba(155,28,28,.35); }
.btn-blue   { background:linear-gradient(135deg,#1D4ED8,#3B82F6);color:#fff;box-shadow:0 4px 16px rgba(29,78,216,.25); }
.btn-blue:hover   { box-shadow:0 8px 24px rgba(29,78,216,.35); }
.btn-outline{ background:transparent;color:var(--txm);border:1.5px solid var(--bd); }
.btn-outline:hover{ background:var(--sf2);border-color:var(--bd-d);color:var(--tx); }
.btn-sm     { padding:.45rem 1rem;font-size:.76rem;border-radius:9px; }
.btn-lg     { padding:.95rem 2rem;font-size:.95rem;border-radius:13px; }
.btn-icon   { padding:.7rem;border-radius:10px;aspect-ratio:1; }

/* ════════════════════════════════════════
   FORM ELEMENTS
════════════════════════════════════════ */
.form-group   { margin-bottom:1.25rem; }
.form-label   { display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--txm);margin-bottom:.5rem; }
.form-control { width:100%;padding:.75rem 1rem;background:var(--sf);border:1.5px solid var(--bd);border-radius:11px;font-family:'Outfit',sans-serif;font-size:.875rem;color:var(--tx);outline:none;transition:border-color .2s,box-shadow .2s; }
.form-control:focus { border-color:var(--g);box-shadow:0 0 0 3px rgba(201,168,76,.12); }
.form-control::placeholder { color:var(--txl); }
.form-hint    { font-size:.72rem;color:var(--txl);margin-top:.375rem; }
.search-bar   { position:relative;display:flex;align-items:center; }
.search-bar input { padding:.7rem 1rem .7rem 2.75rem;background:var(--sf);border:1.5px solid var(--bd);border-radius:11px;font-family:'Outfit',sans-serif;font-size:.85rem;color:var(--tx);outline:none;transition:border-color .2s;width:100%; }
.search-bar input:focus { border-color:var(--g);box-shadow:0 0 0 3px rgba(201,168,76,.12); }
.search-ico   { position:absolute;left:.875rem;font-size:1rem;pointer-events:none; }

/* ════════════════════════════════════════
   ALERTS
════════════════════════════════════════ */
.alert         { display:flex;align-items:flex-start;gap:.75rem;padding:1rem 1.25rem;border-radius:12px;font-size:.84rem;font-weight:500;margin-bottom:1.25rem;animation:fadeUp .4s ease both; }
.alert-success { background:#D1FAE5;border:1px solid #A7F3D0;color:#065F46; }
.alert-error   { background:#FEE2E2;border:1px solid #FECACA;color:#7F1D1D; }
.alert-warning { background:#FEF3C7;border:1px solid #FDE68A;color:#78350F; }
.alert-info    { background:#DBEAFE;border:1px solid #BFDBFE;color:#1E3A8A; }
.alert-ico     { font-size:1.1rem;flex-shrink:0; }
.alert-close   { margin-left:auto;cursor:pointer;opacity:.6;font-size:1rem;background:none;border:none;flex-shrink:0; }
.alert-close:hover { opacity:1; }

/* ════════════════════════════════════════
   PAGINATION
════════════════════════════════════════ */
.pagination { display:flex;align-items:center;gap:.375rem;flex-wrap:wrap; }
.pg-btn     { min-width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:600;cursor:pointer;border:1.5px solid var(--bd);background:var(--sf);color:var(--txm);text-decoration:none;transition:all .2s; }
.pg-btn:hover  { border-color:var(--g);color:var(--g);background:rgba(201,168,76,.06); }
.pg-btn.active { background:var(--ob);color:var(--g-l);border-color:var(--ob); }
.pg-btn.disabled { opacity:.4;cursor:not-allowed;pointer-events:none; }

/* ════════════════════════════════════════
   MODAL
════════════════════════════════════════ */
.modal-overlay { position:fixed;inset:0;z-index:500;background:rgba(8,12,20,.55);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:1.5rem;opacity:0;visibility:hidden;transition:all .3s ease; }
.modal-overlay.open { opacity:1;visibility:visible; }
.modal        { background:var(--sf);border-radius:22px;border:1px solid var(--bd);box-shadow:0 30px 80px var(--sh-s);width:100%;max-width:540px;max-height:90vh;overflow-y:auto;transform:translateY(20px) scale(.97);transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
.modal-overlay.open .modal { transform:translateY(0) scale(1); }
.modal-header { padding:1.625rem 1.75rem 1.25rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--bd); }
.modal-title  { font-family:'DM Serif Display',serif;font-size:1.25rem;color:var(--tx); }
.modal-close  { width:32px;height:32px;border-radius:9px;background:var(--sf2);border:1.5px solid var(--bd);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.9rem;transition:all .2s; }
.modal-close:hover { background:#FEE2E2;border-color:#FECACA;color:#DC2626; }
.modal-body   { padding:1.5rem 1.75rem; }
.modal-footer { padding:1.25rem 1.75rem 1.625rem;display:flex;align-items:center;justify-content:flex-end;gap:.75rem;border-top:1px solid var(--bd); }

/* ════════════════════════════════════════
   BREADCRUMB
════════════════════════════════════════ */
.breadcrumb     { display:flex;align-items:center;gap:.5rem;margin-bottom:1.5rem;font-size:.78rem;font-weight:500;color:var(--txl); }
.breadcrumb a   { color:var(--txl);text-decoration:none;transition:color .2s; }
.breadcrumb a:hover { color:var(--g); }
.breadcrumb-sep { opacity:.4; }
.breadcrumb-cur { color:var(--txm); }

/* ════════════════════════════════════════
   PAGE HEADER
════════════════════════════════════════ */
.page-hdr     { display:flex;align-items:center;justify-content:space-between;margin-bottom:1.75rem;flex-wrap:wrap;gap:1rem;animation:fadeUp .55s ease both; }
.page-hdr-l   { display:flex;align-items:center;gap:.875rem; }
.page-hdr-orn { width:4px;height:36px;border-radius:50px;background:linear-gradient(180deg,var(--g),var(--g-d));flex-shrink:0; }
.page-hdr-title { font-family:'DM Serif Display',serif;font-size:1.75rem;color:var(--tx);line-height:1.1; }
.page-hdr-sub   { font-size:.8rem;font-weight:500;color:var(--txl);margin-top:.2rem; }

/* ════════════════════════════════════════
   FOOTER ZONE
════════════════════════════════════════ */
.foot-zone       { background:var(--sf);border-radius:20px;border:1px solid var(--bd);padding:2rem 2.5rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;box-shadow:0 2px 12px var(--sh);margin-bottom:2rem;animation:fadeUp .6s .5s ease-out backwards; }
.foot-info       { display:flex;align-items:center;gap:1rem; }
.foot-seal       { width:52px;height:52px;border-radius:50%;background:var(--ob);border:2px solid var(--g-d);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;font-size:1.5rem; }
.foot-txt-title  { font-family:'DM Serif Display',serif;font-size:1rem;color:var(--tx);margin-bottom:.1rem; }
.foot-txt-sub    { font-size:.75rem;font-weight:500;color:var(--txl); }
.foot-acts       { display:flex;gap:.875rem;align-items:center; }
.foot-copy       { font-size:.72rem;font-weight:500;color:var(--txl); }
.btn-logout      { display:flex;align-items:center;gap:.625rem;padding:.8rem 1.75rem;background:linear-gradient(135deg,#9B1C1C,#B91C1C);color:white;border:none;border-radius:12px;font-size:.825rem;font-weight:700;letter-spacing:.04em;font-family:'Outfit',sans-serif;text-decoration:none;cursor:pointer;box-shadow:0 4px 16px rgba(155,28,28,.25);transition:all .28s cubic-bezier(.34,1.56,.64,1); }
.btn-logout:hover { transform:translateY(-3px);box-shadow:0 8px 24px rgba(155,28,28,.35); }

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media(max-width:1400px){ .wrap{padding:1.75rem 2rem} }
@media(max-width:1280px){ .srow{grid-template-columns:1fr 1fr} .menu-grid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:1024px){ :root{--sw:240px} .menu-grid{grid-template-columns:repeat(3,1fr)} .hero-name{font-size:2rem} }
@media(max-width:900px) { .menu-grid{grid-template-columns:repeat(2,1fr)} .srow{grid-template-columns:1fr 1fr} }
@media(max-width:768px) {
  .topbar{display:flex} .sb-overlay{display:block}
  .sb{transform:translateX(-100%)} .sb.open{transform:translateX(0)}
  .main{margin-left:0;padding-top:60px} .wrap{padding:1.25rem 1rem}
  .hero{border-radius:18px;min-height:auto} .hero-content{padding:1.5rem;flex-direction:column;align-items:flex-start;gap:1.25rem}
  .hero-name{font-size:1.75rem} .hero-r{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:.625rem}
  .srow{grid-template-columns:1fr 1fr;gap:.875rem} .menu-grid{grid-template-columns:repeat(2,1fr);gap:.75rem}
  .sec-sub{display:none} .foot-zone{padding:1.5rem;flex-direction:column;align-items:flex-start;gap:1.25rem}
  .foot-acts{width:100%;justify-content:space-between} .page-hdr{flex-direction:column;align-items:flex-start}
}
@media(max-width:480px){
  .wrap{padding:1rem .875rem} .hero{border-radius:16px} .hero-content{padding:1.25rem}
  .hero-name{font-size:1.5rem} .srow{grid-template-columns:1fr 1fr;gap:.625rem}
  .menu-grid{grid-template-columns:1fr 1fr;gap:.625rem} .sc{padding:1rem} .sc-val{font-size:2rem}
}
@media(max-width:360px){ .menu-grid{grid-template-columns:1fr} }
</style>
</head>
<body>

<!-- ══ LOADER ══ -->
<div class="loader" id="ldr">
  <div class="loader-ring">
    <div class="loader-inner">🏛</div>
  </div>
  <div class="loader-txt">Memuat Template</div>
  <div class="loader-dots">
    <div class="loader-dot"></div>
    <div class="loader-dot"></div>
    <div class="loader-dot"></div>
  </div>
</div>

<!-- ══ TOPBAR mobile ══ -->
<div class="topbar">
  <div class="topbar-brand">
    <div class="topbar-logo">🏛</div>
    <div class="topbar-name">MA As-Syafi'iyah 02</div>
  </div>
  <div class="mob-toggle" id="menuToggle">☰</div>
</div>

<!-- ══ OVERLAY ══ -->
<div class="sb-overlay" id="sbOverlay"></div>

<!-- ══ SIDEBAR ══ -->
<aside class="sb" id="sidebar">
  <div class="sb-brand">
    <div class="sb-logo">🏛</div>
    <div>
      <div class="sb-name">MA As-Syafi'iyah 02</div>
      <div class="sb-short">Portal Akademik</div>
    </div>
  </div>

  <nav class="sb-nav">
    <div class="sb-sec-lbl">Dashboard</div>
    <a href="dashboard.php" class="nav-a on" onclick="showSection('dashboard',this)">
      <div class="nav-ico">📊</div>Overview
    </a>

    <div class="sb-sec-lbl">Manajemen Data</div>
    <a href="#surat"   class="nav-a" onclick="showSection('surat',this)"><div class="nav-ico">📄</div>Arsip Surat</a>
    <a href="#siswa"   class="nav-a" onclick="showSection('siswa',this)"><div class="nav-ico">👨‍🎓</div>Buku Induk Siswa</a>
    <a href="#guru"    class="nav-a" onclick="showSection('guru',this)"><div class="nav-ico">👨‍🏫</div>Data Guru</a>
    <a href="#kelas"   class="nav-a" onclick="showSection('kelas',this)"><div class="nav-ico">🏫</div>Data Kelas</a>
    <a href="#mapel"   class="nav-a" onclick="showSection('mapel',this)"><div class="nav-ico">📚</div>Mata Pelajaran</a>

    <div class="sb-sec-lbl">Akademik</div>
    <a href="#absensi" class="nav-a" onclick="showSection('absensi',this)"><div class="nav-ico">✅</div>Absensi Siswa</a>
    <a href="#nilai"   class="nav-a" onclick="showSection('nilai',this)"><div class="nav-ico">📝</div>Nilai Siswa</a>

    <div class="sb-sec-lbl">Keuangan</div>
    <a href="#spp"     class="nav-a" onclick="showSection('spp',this)"><div class="nav-ico">💰</div>Pembayaran SPP</a>

    <div class="sb-sec-lbl">Laporan</div>
    <a href="#laporan" class="nav-a" onclick="showSection('laporan',this)"><div class="nav-ico">📈</div>Statistik</a>

    <div class="sb-sec-lbl">Sistem</div>
    <a href="#user"        class="nav-a" onclick="showSection('user',this)"><div class="nav-ico">🔐</div>Manajemen User</a>
    <a href="#komponen"    class="nav-a" onclick="showSection('komponen',this)"><div class="nav-ico">🧩</div>Komponen UI</a>
  </nav>

  <div class="sb-foot">
    <div class="sb-user">
      <div class="sb-uav">👤</div>
      <div>
        <div class="sb-uname">Admin Sekolah</div>
        <span class="sb-urole">Admin</span>
      </div>
    </div>
    <a href="#" class="logout-btn" onclick="return confirm('Yakin ingin keluar?')">🚪 &nbsp;Keluar dari Sistem</a>
  </div>
</aside>

<!-- ══ MAIN ══ -->
<div class="main">
<div class="wrap">

<!-- ═══════════════════════════════════════════
     SECTION: DASHBOARD (DEFAULT)
═══════════════════════════════════════════ -->
<section id="sec-dashboard">

  <!-- HERO -->
  <header class="hero">
    <div class="hero-mesh"></div>
    <div class="hero-lines"></div>
    <div class="hero-content">
      <div class="hero-l">
        <div class="hero-eyebrow">🌅 Selamat Pagi · Admin Panel</div>
        <h1 class="hero-name">Halo, <span>Admin Sekolah</span> 👋</h1>
        <p class="hero-sub">Semangat memimpin hari ini!</p>
        <div class="hero-meta">
          <div class="hero-meta-item">📅 <strong>Rabu, 04 Maret 2026</strong></div>
          <div class="hero-meta-item">🏫 <strong>MA As-Syafi'iyah 02 Bekasi</strong></div>
        </div>
      </div>
      <div class="hero-r">
        <div class="hero-stat">
          <div class="hero-stat-n">128</div>
          <div class="hero-stat-l">Siswa Aktif</div>
        </div>
        <div class="hero-stat">
          <div class="hero-stat-n">87%</div>
          <div class="hero-stat-l">SPP Lunas</div>
        </div>
        <div class="hero-stat">
          <div class="hero-stat-n">47</div>
          <div class="hero-stat-l">Total Surat</div>
        </div>
      </div>
    </div>
  </header>

  <!-- STAT CARDS -->
  <div class="srow">
    <div class="sc c1" style="animation-delay:.08s">
      <div class="sc-top"><div class="sc-lbl">Siswa Aktif</div><div class="sc-ico">👥</div></div>
      <div class="sc-val">128</div><div class="sc-cap">Terdaftar di sistem</div>
    </div>
    <div class="sc c2" style="animation-delay:.14s">
      <div class="sc-top"><div class="sc-lbl">Arsip Surat</div><div class="sc-ico">📬</div></div>
      <div class="sc-val">47</div><div class="sc-cap">Dokumen tersimpan</div>
    </div>
    <div class="sc c3" style="animation-delay:.2s">
      <div class="sc-top"><div class="sc-lbl">SPP Lunas</div><div class="sc-ico">💳</div></div>
      <div class="sc-val">87%</div><div class="sc-cap">Bulan Maret 2026</div>
    </div>
    <div class="sc c4" style="animation-delay:.26s">
      <div class="sc-top"><div class="sc-lbl">Siswa Baru</div><div class="sc-ico">⭐</div></div>
      <div class="sc-val">3</div><div class="sc-cap">Daftar hari ini</div>
    </div>
  </div>

  <!-- MENU GRID -->
  <div class="sec-hdr">
    <div class="sec-orn"></div>
    <div class="sec-title">Menu Utama</div>
    <div class="sec-sub">Pilih modul yang ingin dikelola</div>
  </div>
  <div class="menu-grid">
    <a href="#" class="mcard mc1" onclick="showSection('surat',document.querySelector('.nav-a:nth-child(3)'));return false">
      <div class="mcard-ico">📬</div>
      <div class="mcard-name">Arsip Surat</div>
      <div class="mcard-desc">Kelola surat masuk & keluar, pantau status dokumen, dan arsipkan persuratan sekolah</div>
      <div class="mcard-cta">Buka →</div>
    </a>
    <a href="#" class="mcard mc2" onclick="showSection('spp',null);return false">
      <div class="mcard-ico">💰</div>
      <div class="mcard-name">Pembayaran SPP</div>
      <div class="mcard-desc">Pantau dan catat pembayaran SPP siswa secara real-time dengan laporan lengkap</div>
      <div class="mcard-cta">Buka →</div>
    </a>
    <a href="#" class="mcard mc3" onclick="showSection('siswa',null);return false">
      <div class="mcard-ico">👨‍🎓</div>
      <div class="mcard-name">Buku Induk Siswa</div>
      <div class="mcard-desc">Kelola biodata, data orang tua, dan informasi akademik seluruh siswa sekolah</div>
      <div class="mcard-cta">Buka →</div>
    </a>
    <a href="#" class="mcard mc4" onclick="showSection('absensi',null);return false">
      <div class="mcard-ico">✅</div>
      <div class="mcard-name">Absensi Siswa</div>
      <div class="mcard-desc">Catat dan pantau kehadiran siswa setiap hari dengan sistem absensi terintegrasi</div>
      <div class="mcard-cta">Buka →</div>
    </a>
    <a href="#" class="mcard mc5" onclick="showSection('kelas',null);return false">
      <div class="mcard-ico">🏫</div>
      <div class="mcard-name">Data Kelas</div>
      <div class="mcard-desc">Kelola kelas, wali kelas, dan pembagian siswa per kelas secara mudah</div>
      <div class="mcard-cta">Buka →</div>
    </a>
    <a href="#" class="mcard mc6" onclick="showSection('mapel',null);return false">
      <div class="mcard-ico">📚</div>
      <div class="mcard-name">Mata Pelajaran</div>
      <div class="mcard-desc">Atur daftar mata pelajaran, kurikulum, KKM, dan jadwal pelajaran sekolah</div>
      <div class="mcard-cta">Buka →</div>
    </a>
    <a href="#" class="mcard mc7" onclick="showSection('nilai',null);return false">
      <div class="mcard-ico">📝</div>
      <div class="mcard-name">Nilai Siswa</div>
      <div class="mcard-desc">Input, kelola, dan cetak nilai akademik setiap semester dengan cepat dan praktis</div>
      <div class="mcard-cta">Buka →</div>
    </a>
    <a href="#" class="mcard mc8" onclick="showSection('laporan',null);return false">
      <div class="mcard-ico">📊</div>
      <div class="mcard-name">Laporan & Statistik</div>
      <div class="mcard-desc">Lihat laporan lengkap, grafik, dan statistik dari seluruh aktivitas sistem</div>
      <div class="mcard-cta">Buka →</div>
    </a>
    <a href="#" class="mcard mc9" onclick="showSection('user',null);return false">
      <div class="mcard-ico">🔐</div>
      <div class="mcard-name">Manajemen Pengguna</div>
      <div class="mcard-desc">Kelola username, password & hak akses Admin, Guru dan Staff TU sistem</div>
      <div class="mcard-cta">Buka →</div>
    </a>
  </div>

  <!-- FOOTER -->
  <div class="foot-zone">
    <div class="foot-info">
      <div class="foot-seal">🏛</div>
      <div>
        <div class="foot-txt-title">MA As-Syafi'iyah 02 Bekasi</div>
        <div class="foot-txt-sub">Sistem Informasi Akademik &nbsp;·&nbsp; 2026</div>
      </div>
    </div>
    <div class="foot-acts">
      <div class="foot-copy">Dibuat dengan ❤️ dan ☕</div>
      <a href="#" class="btn-logout" onclick="return confirm('Yakin ingin keluar?')">🚪 Keluar</a>
    </div>
  </div>
</section>

<!-- ═══════════════════════════════════════════
     SECTION: HALAMAN KONTEN (shared template)
═══════════════════════════════════════════ -->
<section id="sec-siswa"   style="display:none"> <div id="content-siswa"></div>   </section>
<section id="sec-surat"   style="display:none"> <div id="content-surat"></div>   </section>
<section id="sec-guru"    style="display:none"> <div id="content-guru"></div>    </section>
<section id="sec-kelas"   style="display:none"> <div id="content-kelas"></div>   </section>
<section id="sec-mapel"   style="display:none"> <div id="content-mapel"></div>   </section>
<section id="sec-absensi" style="display:none"> <div id="content-absensi"></div> </section>
<section id="sec-nilai"   style="display:none"> <div id="content-nilai"></div>   </section>
<section id="sec-spp"     style="display:none"> <div id="content-spp"></div>     </section>
<section id="sec-laporan" style="display:none"> <div id="content-laporan"></div> </section>
<section id="sec-user"    style="display:none"> <div id="content-user"></div>    </section>

<!-- ═══════════════════════════════════════════
     SECTION: KOMPONEN UI
═══════════════════════════════════════════ -->
<section id="sec-komponen" style="display:none">
  <div class="page-hdr">
    <div class="page-hdr-l">
      <div class="page-hdr-orn"></div>
      <div>
        <h1 class="page-hdr-title">Komponen UI</h1>
        <p class="page-hdr-sub">Semua komponen siap pakai dalam design system ini</p>
      </div>
    </div>
  </div>

  <!-- BADGES -->
  <div class="sec-hdr" style="margin-top:1.5rem"><div class="sec-orn"></div><div class="sec-title">Badge / Status</div></div>
  <div class="card">
    <div style="display:flex;gap:.75rem;flex-wrap:wrap;align-items:center">
      <span class="badge badge-green">✅ Lunas</span>
      <span class="badge badge-red">✕ Belum Bayar</span>
      <span class="badge badge-amber">⏳ Pending</span>
      <span class="badge badge-blue">ℹ️ Info</span>
      <span class="badge badge-purple">★ Premium</span>
      <span class="badge badge-gray">— Nonaktif</span>
    </div>
  </div>

  <!-- BUTTONS -->
  <div class="sec-hdr" style="margin-top:1.5rem"><div class="sec-orn"></div><div class="sec-title">Tombol</div></div>
  <div class="card">
    <div style="display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;margin-bottom:1rem">
      <button class="btn btn-gold">✨ Gold Primary</button>
      <button class="btn btn-dark">🌑 Dark</button>
      <button class="btn btn-green">✅ Green</button>
      <button class="btn btn-red">🗑 Hapus</button>
      <button class="btn btn-blue">💾 Simpan</button>
      <button class="btn btn-outline">↩ Outline</button>
    </div>
    <div style="display:flex;gap:.75rem;flex-wrap:wrap;align-items:center">
      <button class="btn btn-gold btn-sm">＋ Tambah</button>
      <button class="btn btn-outline btn-sm">📥 Export</button>
      <button class="btn btn-blue btn-sm btn-icon" title="Lihat">👁</button>
      <button class="btn btn-outline btn-sm btn-icon" title="Edit">✏️</button>
      <button class="btn btn-red btn-sm btn-icon" title="Hapus">🗑</button>
      <button class="btn btn-green btn-lg">🚀 Large Button</button>
    </div>
  </div>

  <!-- ALERTS -->
  <div class="sec-hdr" style="margin-top:1.5rem"><div class="sec-orn"></div><div class="sec-title">Alert / Notifikasi</div></div>
  <div class="card">
    <div class="alert alert-success"><span class="alert-ico">✅</span><div><strong>Berhasil!</strong> Data siswa berhasil disimpan ke sistem.</div><button class="alert-close" onclick="this.closest('.alert').remove()">✕</button></div>
    <div class="alert alert-error">  <span class="alert-ico">❌</span><div><strong>Error!</strong> Gagal memuat data. Silakan coba kembali.</div><button class="alert-close" onclick="this.closest('.alert').remove()">✕</button></div>
    <div class="alert alert-warning"><span class="alert-ico">⚠️</span><div><strong>Perhatian!</strong> SPP bulan ini belum lunas untuk 13 siswa.</div><button class="alert-close" onclick="this.closest('.alert').remove()">✕</button></div>
    <div class="alert alert-info" style="margin-bottom:0">   <span class="alert-ico">ℹ️</span><div><strong>Info.</strong> Tahun ajaran baru dimulai 15 Juli 2026.</div><button class="alert-close" onclick="this.closest('.alert').remove()">✕</button></div>
  </div>

  <!-- FORM -->
  <div class="sec-hdr" style="margin-top:1.5rem"><div class="sec-orn"></div><div class="sec-title">Form Elements</div></div>
  <div class="card">
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:1.25rem">
      <div class="form-group" style="margin-bottom:0">
        <label class="form-label">Nama Lengkap</label>
        <input type="text" class="form-control" placeholder="Masukkan nama...">
      </div>
      <div class="form-group" style="margin-bottom:0">
        <label class="form-label">Kelas</label>
        <select class="form-control">
          <option>Pilih Kelas...</option>
          <option>X IPA 1</option><option>XI IPS 2</option><option>XII IPA 1</option>
        </select>
      </div>
      <div class="form-group" style="margin-bottom:0">
        <label class="form-label">Tanggal Lahir</label>
        <input type="date" class="form-control">
      </div>
      <div class="form-group" style="margin-bottom:0">
        <label class="form-label">Cari Siswa</label>
        <div class="search-bar">
          <span class="search-ico">🔍</span>
          <input type="text" placeholder="Nama / NISN...">
        </div>
      </div>
    </div>
    <div class="form-group" style="margin-top:1.25rem;margin-bottom:0">
      <label class="form-label">Keterangan</label>
      <textarea class="form-control" style="min-height:80px" placeholder="Tulis keterangan..."></textarea>
      <div class="form-hint">Maksimal 500 karakter</div>
    </div>
  </div>

  <!-- TABLE -->
  <div class="sec-hdr" style="margin-top:1.5rem"><div class="sec-orn"></div><div class="sec-title">Tabel Data</div></div>
  <div class="card">
    <div class="card-header">
      <div><div class="card-title">Daftar Siswa</div><div class="card-sub">Tahun Ajaran 2025/2026</div></div>
      <div style="display:flex;gap:.75rem;flex-wrap:wrap">
        <div class="search-bar" style="width:200px"><span class="search-ico">🔍</span><input type="text" placeholder="Cari..."></div>
        <button class="btn btn-gold btn-sm">＋ Tambah</button>
      </div>
    </div>
    <div class="tbl-wrap">
      <table class="tbl">
        <thead><tr><th>No</th><th>Nama</th><th>Kelas</th><th>Status</th><th>Aksi</th></tr></thead>
        <tbody>
          <tr>
            <td class="tbl-num">1</td>
            <td><strong>Ahmad Fauzi</strong><div style="font-size:.72rem;color:var(--txl)">NISN: 1234567890</div></td>
            <td><span class="badge badge-blue">X IPA 1</span></td>
            <td><span class="badge badge-green">Aktif</span></td>
            <td><div style="display:flex;gap:.4rem"><button class="btn btn-blue btn-sm btn-icon">👁</button><button class="btn btn-outline btn-sm btn-icon">✏️</button><button class="btn btn-red btn-sm btn-icon">🗑</button></div></td>
          </tr>
          <tr>
            <td class="tbl-num">2</td>
            <td><strong>Siti Rahmawati</strong><div style="font-size:.72rem;color:var(--txl)">NISN: 0987654321</div></td>
            <td><span class="badge badge-purple">XI IPS 2</span></td>
            <td><span class="badge badge-green">Aktif</span></td>
            <td><div style="display:flex;gap:.4rem"><button class="btn btn-blue btn-sm btn-icon">👁</button><button class="btn btn-outline btn-sm btn-icon">✏️</button><button class="btn btn-red btn-sm btn-icon">🗑</button></div></td>
          </tr>
          <tr>
            <td class="tbl-num">3</td>
            <td><strong>Muhammad Rizky</strong><div style="font-size:.72rem;color:var(--txl)">NISN: 1122334455</div></td>
            <td><span class="badge badge-amber">XII IPA 1</span></td>
            <td><span class="badge badge-amber">Alumni</span></td>
            <td><div style="display:flex;gap:.4rem"><button class="btn btn-blue btn-sm btn-icon">👁</button><button class="btn btn-outline btn-sm btn-icon">✏️</button><button class="btn btn-red btn-sm btn-icon">🗑</button></div></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div style="display:flex;justify-content:space-between;align-items:center;padding:1rem 0 0;flex-wrap:wrap;gap:.75rem">
      <div style="font-size:.78rem;color:var(--txl)">Menampilkan <strong>1–3</strong> dari <strong>128</strong> data</div>
      <div class="pagination">
        <a href="#" class="pg-btn disabled">‹</a>
        <a href="#" class="pg-btn active">1</a>
        <a href="#" class="pg-btn">2</a>
        <a href="#" class="pg-btn">3</a>
        <span class="pg-btn" style="cursor:default;border:none">…</span>
        <a href="#" class="pg-btn">13</a>
        <a href="#" class="pg-btn">›</a>
      </div>
    </div>
  </div>

  <!-- MODAL DEMO -->
  <div class="sec-hdr" style="margin-top:1.5rem"><div class="sec-orn"></div><div class="sec-title">Modal Dialog</div></div>
  <div class="card">
    <div style="display:flex;gap:.75rem;flex-wrap:wrap">
      <button class="btn btn-gold" onclick="openModal('modalDemo')">📝 Buka Modal Form</button>
      <button class="btn btn-red" onclick="openModal('modalKonfirmasi')">⚠️ Modal Konfirmasi</button>
    </div>
  </div>

  <!-- STAT CARDS DEMO -->
  <div class="sec-hdr" style="margin-top:1.5rem"><div class="sec-orn"></div><div class="sec-title">Stat Cards (c1–c6)</div></div>
  <div class="srow" style="grid-template-columns:repeat(3,1fr)">
    <div class="sc c1"><div class="sc-top"><div class="sc-lbl">Blue / c1</div><div class="sc-ico">📊</div></div><div class="sc-val">128</div><div class="sc-cap">Siswa aktif</div></div>
    <div class="sc c2"><div class="sc-top"><div class="sc-lbl">Red / c2</div><div class="sc-ico">📬</div></div><div class="sc-val">47</div><div class="sc-cap">Arsip surat</div></div>
    <div class="sc c3"><div class="sc-top"><div class="sc-lbl">Green / c3</div><div class="sc-ico">💳</div></div><div class="sc-val">87%</div><div class="sc-cap">SPP lunas</div></div>
    <div class="sc c4"><div class="sc-top"><div class="sc-lbl">Amber / c4</div><div class="sc-ico">⭐</div></div><div class="sc-val">12</div><div class="sc-cap">Siswa baru</div></div>
    <div class="sc c5"><div class="sc-top"><div class="sc-lbl">Purple / c5</div><div class="sc-ico">📚</div></div><div class="sc-val">6</div><div class="sc-cap">Mata pelajaran</div></div>
    <div class="sc c6"><div class="sc-top"><div class="sc-lbl">Cyan / c6</div><div class="sc-ico">✅</div></div><div class="sc-val">94%</div><div class="sc-cap">Kehadiran</div></div>
  </div>

  <!-- FOOTER -->
  <div class="foot-zone">
    <div class="foot-info">
      <div class="foot-seal">🏛</div>
      <div>
        <div class="foot-txt-title">MA As-Syafi'iyah 02 Bekasi</div>
        <div class="foot-txt-sub">Sistem Informasi Akademik &nbsp;·&nbsp; 2026</div>
      </div>
    </div>
    <div class="foot-acts">
      <div class="foot-copy">Template Design System</div>
      <a href="#" class="btn-logout">🚪 Keluar</a>
    </div>
  </div>
</section>

</div><!-- /wrap -->
</div><!-- /main -->

<!-- ══ MODAL FORM ══ -->
<div class="modal-overlay" id="modalDemo">
  <div class="modal">
    <div class="modal-header">
      <div class="modal-title">Tambah Data Baru</div>
      <div class="modal-close" onclick="closeModal('modalDemo')">✕</div>
    </div>
    <div class="modal-body">
      <div class="form-group">
        <label class="form-label">Nama Lengkap</label>
        <input type="text" class="form-control" placeholder="Masukkan nama...">
      </div>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">
        <div class="form-group" style="margin-bottom:0">
          <label class="form-label">Kelas</label>
          <select class="form-control"><option>X IPA 1</option><option>XI IPS 2</option></select>
        </div>
        <div class="form-group" style="margin-bottom:0">
          <label class="form-label">Status</label>
          <select class="form-control"><option>Aktif</option><option>Nonaktif</option></select>
        </div>
      </div>
      <div class="form-group" style="margin-top:1rem;margin-bottom:0">
        <label class="form-label">Keterangan</label>
        <textarea class="form-control" placeholder="Tulis keterangan..."></textarea>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-outline" onclick="closeModal('modalDemo')">Batal</button>
      <button class="btn btn-gold">💾 Simpan</button>
    </div>
  </div>
</div>

<!-- ══ MODAL KONFIRMASI ══ -->
<div class="modal-overlay" id="modalKonfirmasi">
  <div class="modal" style="max-width:420px">
    <div class="modal-header">
      <div class="modal-title" style="color:var(--ru)">Konfirmasi Hapus</div>
      <div class="modal-close" onclick="closeModal('modalKonfirmasi')">✕</div>
    </div>
    <div class="modal-body" style="text-align:center;padding:2rem 1.75rem">
      <div style="font-size:3rem;margin-bottom:1rem">⚠️</div>
      <p style="font-size:.95rem;font-weight:700;color:var(--tx);margin-bottom:.5rem">Hapus data ini?</p>
      <p style="font-size:.85rem;color:var(--txm)">Tindakan ini tidak dapat dibatalkan setelah dikonfirmasi.</p>
    </div>
    <div class="modal-footer" style="justify-content:center">
      <button class="btn btn-outline" onclick="closeModal('modalKonfirmasi')">Batal</button>
      <button class="btn btn-red" onclick="closeModal('modalKonfirmasi')">🗑 Ya, Hapus</button>
    </div>
  </div>
</div>

<script>
/* ── Loader ── */
window.addEventListener('load', () => setTimeout(() => document.getElementById('ldr').classList.add('gone'), 600));

/* ── Sidebar (mobile) ── */
const sidebar    = document.getElementById('sidebar');
const overlay    = document.getElementById('sbOverlay');
const menuToggle = document.getElementById('menuToggle');
function openSidebar()  { sidebar.classList.add('open');    overlay.classList.add('show');    menuToggle.textContent = '✕'; }
function closeSidebar() { sidebar.classList.remove('open'); overlay.classList.remove('show'); menuToggle.textContent = '☰'; }
menuToggle.addEventListener('click', () => sidebar.classList.contains('open') ? closeSidebar() : openSidebar());
overlay.addEventListener('click', closeSidebar);
sidebar.querySelectorAll('.nav-a').forEach(l => l.addEventListener('click', () => { if(window.innerWidth <= 768) closeSidebar(); }));
window.addEventListener('resize', () => { if(window.innerWidth > 768) closeSidebar(); });

/* ── Section switcher ── */
const sections = ['dashboard','siswa','surat','guru','kelas','mapel','absensi','nilai','spp','laporan','user','komponen'];
const pageContent = {
  siswa:   buildPage('Buku Induk Siswa',   'siswa',   '👨‍🎓', 'Kelola biodata seluruh siswa aktif'),
  surat:   buildPage('Arsip Surat',         'surat',   '📄',  'Kelola surat masuk & keluar'),
  guru:    buildPage('Data Guru',           'guru',    '👨‍🏫', 'Manajemen data seluruh guru'),
  kelas:   buildPage('Data Kelas',          'kelas',   '🏫',  'Kelola kelas dan wali kelas'),
  mapel:   buildPage('Mata Pelajaran',      'mapel',   '📚',  'Atur kurikulum dan KKM'),
  absensi: buildPage('Absensi Siswa',       'absensi', '✅',  'Catat kehadiran siswa harian'),
  nilai:   buildPage('Nilai Siswa',         'nilai',   '📝',  'Input dan kelola nilai akademik'),
  spp:     buildPage('Pembayaran SPP',      'spp',     '💰',  'Pantau dan catat pembayaran SPP'),
  laporan: buildPage('Laporan & Statistik', 'laporan', '📈',  'Laporan dan grafik aktivitas'),
  user:    buildPage('Manajemen User',      'user',    '🔐',  'Kelola hak akses pengguna'),
};

function buildPage(title, slug, ico, sub) {
  return `
    <div class="page-hdr">
      <div class="page-hdr-l">
        <div class="page-hdr-orn"></div>
        <div><h1 class="page-hdr-title">${ico} ${title}</h1><p class="page-hdr-sub">${sub}</p></div>
      </div>
      <div style="display:flex;gap:.75rem">
        <div class="search-bar" style="width:220px"><span class="search-ico">🔍</span><input type="text" placeholder="Cari data..."></div>
        <button class="btn btn-gold btn-sm" onclick="openModal('modalDemo')">＋ Tambah</button>
        <button class="btn btn-outline btn-sm">📥 Export</button>
      </div>
    </div>
    <div class="breadcrumb"><a href="#" onclick="showSection('dashboard',null);return false">🏠 Dashboard</a><span class="breadcrumb-sep">›</span><span class="breadcrumb-cur">${title}</span></div>
    <div class="srow">
      <div class="sc c1" style="animation-delay:.06s"><div class="sc-top"><div class="sc-lbl">Total Data</div><div class="sc-ico">${ico}</div></div><div class="sc-val">128</div><div class="sc-cap">Terdaftar</div></div>
      <div class="sc c3" style="animation-delay:.12s"><div class="sc-top"><div class="sc-lbl">Aktif</div><div class="sc-ico">✅</div></div><div class="sc-val">115</div><div class="sc-cap">Status aktif</div></div>
      <div class="sc c4" style="animation-delay:.18s"><div class="sc-top"><div class="sc-lbl">Bulan Ini</div><div class="sc-ico">📅</div></div><div class="sc-val">13</div><div class="sc-cap">Transaksi baru</div></div>
      <div class="sc c2" style="animation-delay:.24s"><div class="sc-top"><div class="sc-lbl">Perlu Aksi</div><div class="sc-ico">⚠️</div></div><div class="sc-val">3</div><div class="sc-cap">Menunggu review</div></div>
    </div>
    <div class="card">
      <div class="card-header">
        <div><div class="card-title">Daftar ${title}</div><div class="card-sub">Tahun Ajaran 2025/2026</div></div>
      </div>
      <div class="tbl-wrap">
        <table class="tbl">
          <thead><tr><th>No</th><th>Nama / Judul</th><th>Kategori</th><th>Tanggal</th><th>Status</th><th>Aksi</th></tr></thead>
          <tbody>
            ${[1,2,3,4,5].map((i,idx) => `
            <tr>
              <td class="tbl-num">${i}</td>
              <td><strong>Contoh Data ${i}</strong><div style="font-size:.72rem;color:var(--txl)">ID-${String(1000+i).padStart(5,'0')}</div></td>
              <td>Kategori ${['A','B','C','A','B'][idx]}</td>
              <td>${['01 Jan','15 Feb','20 Mar','05 Apr','12 Mei'][idx]} 2026</td>
              <td><span class="badge ${['badge-green','badge-amber','badge-green','badge-red','badge-blue'][idx]}">${['Aktif','Pending','Aktif','Nonaktif','Info'][idx]}</span></td>
              <td><div style="display:flex;gap:.4rem">
                <button class="btn btn-blue btn-sm btn-icon" title="Lihat">👁</button>
                <button class="btn btn-outline btn-sm btn-icon" title="Edit">✏️</button>
                <button class="btn btn-red btn-sm btn-icon" title="Hapus" onclick="openModal('modalKonfirmasi')">🗑</button>
              </div></td>
            </tr>`).join('')}
          </tbody>
        </table>
      </div>
      <div style="display:flex;justify-content:space-between;align-items:center;padding:1rem 0 0;flex-wrap:wrap;gap:.75rem">
        <div style="font-size:.78rem;color:var(--txl)">Menampilkan <strong>1–5</strong> dari <strong>128</strong> data</div>
        <div class="pagination">
          <span class="pg-btn disabled">‹</span>
          <a href="#" class="pg-btn active">1</a>
          <a href="#" class="pg-btn">2</a>
          <a href="#" class="pg-btn">3</a>
          <span class="pg-btn" style="border:none;cursor:default">…</span>
          <a href="#" class="pg-btn">13</a>
          <a href="#" class="pg-btn">›</a>
        </div>
      </div>
    </div>
    <div class="foot-zone">
      <div class="foot-info"><div class="foot-seal">🏛</div><div><div class="foot-txt-title">MA As-Syafi'iyah 02 Bekasi</div><div class="foot-txt-sub">Sistem Informasi Akademik · 2026</div></div></div>
      <div class="foot-acts"><div class="foot-copy">Dibuat dengan ❤️ dan ☕</div><a href="#" class="btn-logout">🚪 Keluar</a></div>
    </div>`;
}

function showSection(name, clickedEl) {
  sections.forEach(s => {
    const el = document.getElementById('sec-'+s);
    if (el) el.style.display = (s === name) ? '' : 'none';
  });
  document.querySelectorAll('.nav-a').forEach(a => a.classList.remove('on'));
  if (clickedEl) clickedEl.classList.add('on');
  else {
    document.querySelectorAll('.nav-a').forEach(a => {
      if (a.getAttribute('onclick') && a.getAttribute('onclick').includes("'"+name+"'")) a.classList.add('on');
    });
  }
  if (name !== 'dashboard' && name !== 'komponen') {
    const container = document.getElementById('content-'+name);
    if (container && !container.innerHTML) container.innerHTML = pageContent[name] || '';
  }
  window.scrollTo({top:0,behavior:'smooth'});
}

/* ── Modal ── */
function openModal(id)  { document.getElementById(id)?.classList.add('open');    document.body.style.overflow='hidden'; }
function closeModal(id) { document.getElementById(id)?.classList.remove('open'); document.body.style.overflow=''; }
document.querySelectorAll('.modal-overlay').forEach(o => o.addEventListener('click', e => { if(e.target===o) closeModal(o.id); }));
document.addEventListener('keydown', e => { if(e.key==='Escape') document.querySelectorAll('.modal-overlay.open').forEach(m => closeModal(m.id)); });
</script>
</body>
</html>