:root{
  --bg-black:#020f0a;
  --bg-deep:#04241a;
  --bg-emerald:#146042;
  --accent-neon:#34ab5c;
  --accent-neon-soft:#59c97e;
  --highlight-lime:#8be8ac;
  --ink:#f5f8f5;
  --ink-muted:#a2c2b1;
  --line: rgba(200,230,210,0.14);
  --glass: rgba(255,255,255,0.045);
  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --maxw: 1180px;
  box-sizing:border-box;
  padding-top: env(safe-area-inset-top,0px);
  padding-bottom: env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit;}
html{scroll-behavior:smooth; scroll-padding-top: calc(84px + env(safe-area-inset-top,0px));}
body{
  margin:0;
  background:var(--bg-black);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Sora',system-ui,sans-serif;
  margin:0;
  letter-spacing:-0.01em;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
section{position:relative; padding:110px 0;}
@media (max-width:640px){ section{padding:76px 0;} }

/* ---------- Reveal ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  html{scroll-behavior:auto;}
}

/* ---------- Background texture ---------- */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Vignette ---------- */
.vignette{
  position:fixed; inset:0; pointer-events:none; z-index:3;
  background:radial-gradient(ellipse 90% 70% at 50% 30%, transparent 45%, rgba(0,4,2,0.55) 100%);
}

/* ---------- Navbar ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  padding-top: env(safe-area-inset-top,0px);
  transition:background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
  border-bottom:1px solid transparent;
}
header.scrolled{
  background:rgba(4,18,12,0.72);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.navbar{display:flex; align-items:center; justify-content:space-between; height:66px;}
.brand{display:flex; align-items:center; gap:5px;}
.brand .logo-img{height:30px; width:auto; display:block;}
footer .brand .logo-img{height:34px;}

nav.links{display:flex; gap:22px; align-items:center;}
nav.links a{font-size:.8rem; font-weight:500; color:var(--ink-muted); position:relative; padding:2px 0; text-transform:uppercase; letter-spacing:.06em;}
nav.links a:hover{color:var(--ink);}
nav.links a::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--accent-neon);
  transition:width .25s ease;
}
nav.links a:hover::after{width:100%;}
.nav-right{display:flex; align-items:center; gap:3px;}

.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  font-weight:700; font-size:.88rem; padding:12px 22px; border-radius:var(--radius-sm);
  border:1px solid transparent; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.97);}
.btn-primary{
  background:linear-gradient(135deg, var(--accent-neon-soft), var(--accent-neon));
  color:var(--ink);
  box-shadow:0 0 0 0 rgba(89,201,126,0);
}
.btn-primary:hover{box-shadow:0 8px 24px -6px rgba(89,201,126,.5); transform:translateY(-2px);}
.btn-ghost{
  background:transparent; color:var(--ink); border-color:var(--line);
}
.btn-ghost:hover{border-color:var(--accent-neon); color:var(--accent-neon);}
.btn-wa{
  background:rgba(52,171,92,0.12); color:var(--accent-neon-soft); border:1px solid rgba(52,171,92,0.35);
}
.btn-wa:hover{background:rgba(52,171,92,0.2);}
.btn-wa svg{width:18px; height:18px;}
.btn-sm{padding:5px 15px; font-size:.85rem;}
.btn-outline{
  background:transparent; color:var(--highlight-lime); border:1.5px solid var(--highlight-lime); border-radius:var(--radius-sm);
}
.btn-outline:hover{background:rgba(139,232,172,0.1);}
.btn-block{width:100%;}

.btn-arrows{padding:6px; gap:0;}
.btn-arrows .arrow-dot{
  width:30px; height:30px; border-radius:var(--radius-sm); flex-shrink:0;
  background:rgba(0,0,0,0.16); display:flex; align-items:center; justify-content:center;
}
.btn-arrows .arrow-dot svg{width:14px; height:14px;}
.btn-arrows .btn-label{padding:0 16px;}
.btn-arrows.btn-sm .arrow-dot{width:26px; height:26px;}
.btn-arrows.btn-sm .arrow-dot svg{width:12px; height:12px;}

.hamburger{display:none; width:40px; height:40px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--glass); align-items:center; justify-content:center; cursor:pointer;}
.hamburger svg{width:19px; height:19px;}

.mobile-menu{
  position:fixed; inset:0; z-index:99; background:rgba(4,18,12,0.98); backdrop-filter:blur(10px);
  display:flex; flex-direction:column; padding:100px 28px 40px;
  overflow-y:auto; pointer-events:none;
  transform:translateY(-100%); transition:transform .35s ease;
}
.mobile-menu.open{transform:translateY(0); pointer-events:auto;}
.mobile-menu nav{display:flex; flex-direction:column;}
.mobile-menu a{font-family:'Sora'; font-size:1.5rem; font-weight:700; padding:14px 0; border-bottom:1px solid var(--line); color:var(--ink);}
.mobile-menu .btn{margin-top:24px;}

/* ---------- Hero ---------- */
.hero{
  min-height:100svh; display:flex; align-items:center; position:relative;
  padding-top:calc(74px + env(safe-area-inset-top,0px));
  background:
    radial-gradient(ellipse 60% 50% at 15% 20%, rgba(52,171,92,0.16), transparent 60%),
    radial-gradient(ellipse 50% 60% at 90% 10%, rgba(89,201,126,0.10), transparent 60%),
    linear-gradient(180deg, var(--bg-black) 0%, var(--bg-deep) 55%, var(--bg-emerald) 100%);
  overflow:hidden;
}
.hero::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.05) 44%, transparent 46%),
    linear-gradient(115deg, transparent 60%, rgba(230,255,92,0.05) 62%, transparent 65%);
  animation:beam-shift 12s ease-in-out infinite alternate;
}
@keyframes beam-shift{ from{opacity:.6; transform:translateX(0);} to{opacity:1; transform:translateX(-3%);} }
@media (prefers-reduced-motion: reduce){ .hero::before{animation:none;} }
.hero-inner{position:relative; z-index:2; display:grid; grid-template-columns:1.15fr .85fr; gap:50px; align-items:center;}
@media (max-width:900px){ .hero-inner{grid-template-columns:1fr;} }

.kicker{display:flex; align-items:center; gap:12px; margin-bottom:22px;}
.badge28{
  background:var(--accent-neon); color:var(--ink); font-family:'Sora'; font-weight:800;
  font-size:.85rem; padding:6px 14px; border-radius:var(--radius-sm); transform:rotate(-2deg);
}
.kicker-text{font-size:.85rem; color:var(--ink-muted); font-weight:500;}

h1.headline{font-size:clamp(2.8rem, 8vw, 5.6rem); font-weight:700; line-height:.98;}
h1.headline .l1{color:var(--ink); display:block;}
h1.headline .l2{
  display:block;
  background:linear-gradient(100deg, var(--highlight-lime), var(--accent-neon) 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.hero-dates{
  margin-top:26px; display:flex; align-items:baseline; gap:14px; font-family:'Sora'; font-weight:700;
  font-size:clamp(1.1rem, 2.6vw, 1.6rem); color:var(--ink);
}
.hero-dates .dots span{color:var(--highlight-lime); margin:0 6px;}
.city-chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px;}
.city-chip{
  display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:rgba(255,255,255,0.04); font-size:.85rem; color:var(--ink-muted);
}
.city-chip b{font-family:'Sora'; font-weight:700; color:var(--accent-neon-soft);}

.hero-desc{max-width:52ch; margin-top:22px; color:var(--ink-muted); font-size:1.05rem;}
.hero-ctas{display:flex; flex-wrap:wrap; gap:14px; margin-top:36px;}

.hero-side{position:relative; display:flex; justify-content:center;}
.orb-card{
  width:100%; max-width:340px; aspect-ratio:1/1.08; border-radius:var(--radius-lg);
  background:linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  border:1px solid var(--line); backdrop-filter:blur(8px);
  box-shadow:0 40px 70px -35px rgba(0,0,0,0.7);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  padding:30px; text-align:center;
}
.orb-glow{
  position:absolute; width:220px; height:220px; border-radius:50%; filter:blur(70px);
  background:var(--accent-neon); opacity:.35; z-index:-1; top:10%; right:10%;
}
.orb-card .num{font-family:'Sora'; font-weight:800; font-size:2.6rem; color:var(--highlight-lime);}
.orb-card .cap{color:var(--ink-muted); font-size:.9rem;}
.orb-card .divider{width:60%; height:1px; background:var(--line); margin:6px 0;}

/* ---------- Section heads ---------- */
.eyebrow{color:var(--accent-neon-soft); font-weight:600; font-size:.85rem; margin-bottom:14px;}
h2.h-title{font-size:clamp(1.9rem, 4vw, 2.7rem); font-weight:700; max-width:16ch;}
.section-head{margin-bottom:52px;}
.section-head p{color:var(--ink-muted); max-width:56ch; margin-top:14px; font-size:1.02rem;}

/* ---------- Tentang / Materi Uji ---------- */
.tentang-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
@media (max-width:860px){ .tentang-grid{grid-template-columns:1fr; gap:40px;} }
.tentang-text p{color:var(--ink-muted); font-size:1.05rem; margin:0 0 18px;}
.materi-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.materi-tile{
  border:1px solid var(--line); border-radius:var(--radius-md); padding:24px 20px;
  background:linear-gradient(160deg, rgba(255,255,255,0.035), transparent);
  box-shadow:0 24px 40px -26px rgba(0,0,0,0.6);
  display:flex; flex-direction:column; gap:10px; position:relative;
}
.materi-tile .ic{width:32px; height:32px; color:var(--accent-neon-soft);}
.materi-tile h3{font-size:1rem; font-weight:700;}
.materi-tile p{color:var(--ink-muted); font-size:.86rem; margin:0;}
.materi-badge{
  align-self:flex-start; font-size:.68rem; font-weight:700; color:var(--bg-black);
  background:var(--highlight-lime); padding:4px 10px; border-radius:var(--radius-sm);
  text-transform:uppercase; letter-spacing:.03em;
}

/* ---------- Info cards ---------- */
.info-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media (max-width:980px){ .info-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .info-grid{grid-template-columns:1fr;} }
.info-card{
  border:1px solid var(--line); border-radius:var(--radius-md); padding:30px 26px;
  background:linear-gradient(165deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01));
  box-shadow:0 30px 50px -28px rgba(0,0,0,0.65);
  position:relative; overflow:hidden; display:block;
}
a.info-card{transition:border-color .2s ease, transform .2s ease;}
a.info-card:hover{border-color:var(--accent-neon); transform:translateY(-3px);}
.info-card::after{
  content:''; position:absolute; width:120px; height:120px; border-radius:50%;
  background:var(--accent-neon); filter:blur(50px); opacity:.16; bottom:-40px; right:-40px;
}
.info-card .ic{width:30px; height:30px; color:var(--highlight-lime); margin-bottom:18px; display:inline-flex;}
.ic{display:inline-flex; align-items:center; justify-content:center;}
.ic svg{width:100%; height:100%; display:block;}
.info-card h3{font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); font-weight:600; margin-bottom:10px;}
.info-card .val{font-family:'Sora'; font-weight:700; font-size:1.18rem; line-height:1.3;}
.date-city-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;}
.date-city-list li{font-size:.95rem; color:var(--ink-muted);}
.date-city-list li b{font-family:'Sora'; font-weight:700; color:var(--ink); margin-right:8px;}
.wa-value{display:flex; align-items:center; gap:8px; font-family:'Sora'; font-weight:700; font-size:1.05rem; position:relative; z-index:1;}
.wa-value svg{width:18px; height:18px; color:var(--accent-neon-soft); flex-shrink:0;}

/* ---------- Infaq ---------- */
.infaq-panel{
  border-radius:var(--radius-lg); border:1px solid var(--line);
  background:linear-gradient(155deg, rgba(52,171,92,0.10), rgba(255,255,255,0.02));
  padding:64px 40px; text-align:center; position:relative; overflow:hidden;
}
.infaq-panel .glow{position:absolute; width:280px; height:280px; background:var(--highlight-lime); filter:blur(90px); opacity:.18; top:-60px; left:50%; transform:translateX(-50%);}
.infaq-eyebrow{color:var(--ink-muted); font-weight:600; font-size:.85rem; letter-spacing:.04em; position:relative; z-index:1;}
.infaq-amount{
  font-family:'Sora'; font-weight:800; font-size:clamp(3.4rem, 11vw, 6.5rem); line-height:1;
  color:var(--ink); margin:14px 0 4px; position:relative; z-index:1;
}
.infaq-per{color:var(--highlight-lime); font-family:'Sora'; font-weight:700; letter-spacing:.08em; font-size:1rem; position:relative; z-index:1;}
.infaq-note{max-width:46ch; margin:22px auto 0; color:var(--ink-muted); position:relative; z-index:1;}

/* ---------- Syarat & Ketentuan ---------- */
.terms-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
@media (max-width:860px){ .terms-grid{grid-template-columns:1fr;} }
.terms-card{
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:36px 32px;
  background:linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01));
  box-shadow:0 30px 55px -30px rgba(0,0,0,0.65);
}
.terms-card h3{font-size:1.35rem; font-weight:700;}
.terms-card .terms-sub{color:var(--accent-neon-soft); font-size:.85rem; font-weight:600; margin-top:6px; margin-bottom:22px;}
.terms-list{list-style:none; margin:0 0 26px; padding:0; display:flex; flex-direction:column; gap:14px;}
.terms-list li{display:flex; gap:12px; color:var(--ink-muted); font-size:.95rem; line-height:1.5;}
.terms-list .check{
  width:22px; height:22px; border-radius:var(--radius-sm); background:rgba(52,171,92,0.18); color:var(--accent-neon-soft);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px;
}
.terms-list .check svg{width:13px; height:13px;}

/* ---------- Timeline ---------- */
.timeline{position:relative; max-width:720px; margin:0 auto;}
.t-step{display:grid; grid-template-columns:64px 1fr; gap:24px; padding-bottom:44px; position:relative;}
.t-step:last-child{padding-bottom:0;}
.t-step::before{
  content:''; position:absolute; left:31px; top:56px; bottom:0; width:1px;
  background:linear-gradient(var(--accent-neon), transparent);
}
.t-step:last-child::before{display:none;}
.t-num{
  width:64px; height:64px; border-radius:var(--radius-md); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-family:'Sora'; font-weight:800; font-size:1.3rem;
  background:linear-gradient(160deg, rgba(52,171,92,0.14), transparent); color:var(--accent-neon-soft); flex-shrink:0;
}
.t-body h3{font-size:1.12rem; font-weight:700; margin-bottom:4px; padding-top:14px;}
.t-body p{color:var(--ink-muted); margin:0; font-size:.95rem;}

/* ---------- Pengumuman Kelulusan ---------- */
.result-panel{
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:36px;
  background:linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  box-shadow:0 30px 55px -30px rgba(0,0,0,0.65);
}
.result-tabs{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px;}
.result-tab{
  padding:10px 20px; border-radius:var(--radius-sm); border:1px solid var(--line); background:transparent;
  color:var(--ink-muted); font-weight:600; font-size:.9rem; cursor:pointer; transition:all .2s ease;
}
.result-tab:hover{border-color:var(--accent-neon);}
.result-tab.active{background:var(--accent-neon); border-color:var(--accent-neon); color:var(--ink);}

.result-search{
  display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:12px 16px; background:rgba(255,255,255,0.03); margin-bottom:22px;
}
.result-search svg{width:18px; height:18px; color:var(--ink-muted); flex-shrink:0;}
.result-search input{
  flex:1; background:none; border:none; outline:none; color:var(--ink); font-size:.95rem; font-family:'Inter';
}
.result-search input::placeholder{color:var(--ink-muted);}

.result-status{color:var(--ink-muted); font-size:.92rem; padding:20px 0;}
.result-empty{color:var(--ink-muted); font-size:.92rem; padding:30px 0; text-align:center;}

.result-table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-md);}
.result-table{width:100%; border-collapse:collapse; font-size:.92rem;}
.result-table th{
  text-align:left; padding:14px 18px; color:var(--ink-muted); font-weight:600; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--line); background:rgba(255,255,255,0.03);
}
.result-table td{padding:14px 18px; border-bottom:1px solid var(--line); color:var(--ink);}
.result-table tr:last-child td{border-bottom:none;}
.result-table td:first-child{color:var(--ink-muted); width:50px;}
.badge-lulus{
  display:inline-flex; align-items:center; gap:6px; background:rgba(52,171,92,0.15); color:var(--accent-neon-soft);
  padding:4px 12px; border-radius:var(--radius-sm); font-weight:700; font-size:.78rem; text-transform:uppercase;
}
.badge-lulus svg{width:12px; height:12px; flex-shrink:0;}

.admin-panel{
  margin-top:32px; padding:24px; border:1.5px dashed var(--line); border-radius:var(--radius-md);
  background:rgba(255,255,255,0.02);
}
.admin-tag{
  display:inline-block; background:var(--highlight-lime); color:var(--bg-black); font-weight:700; font-size:.7rem;
  text-transform:uppercase; letter-spacing:.04em; padding:4px 10px; border-radius:var(--radius-sm); margin-bottom:12px;
}
.admin-panel h3{font-size:1.05rem; font-weight:700; margin-bottom:8px;}
.admin-hint{color:var(--ink-muted); font-size:.85rem; margin:0 0 18px;}
.admin-row{display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
.admin-row select, .admin-row input[type="file"]{
  background:rgba(255,255,255,0.04); border:1px solid var(--line); border-radius:var(--radius-sm);
  color:var(--ink); padding:10px 14px; font-size:.88rem; font-family:'Inter';
}
.admin-row input[type="file"]{flex:1; min-width:200px;}
.admin-status{margin-top:14px; font-size:.88rem; min-height:1.2em;}
.admin-status.success{color:var(--accent-neon-soft);}
.admin-status.error{color:#ff8a7a;}

/* ---------- Gallery ---------- */
.gallery-grid{columns:3 220px; column-gap:16px;}
@media (max-width:760px){ .gallery-grid{columns:2 150px;} }
.g-item{
  break-inside:avoid; margin-bottom:16px; border-radius:var(--radius-md); overflow:hidden;
  position:relative; cursor:pointer; border:1px solid var(--line);
  box-shadow:0 26px 46px -28px rgba(0,0,0,0.65);
}
.g-item .ph{
  width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(160deg, var(--bg-emerald), var(--bg-deep));
  color:var(--ink-muted); padding:20px; text-align:center; transition:transform .4s ease;
}
.g-item:nth-child(1) .ph, .g-item:nth-child(5) .ph{aspect-ratio:3/4;}
.g-item:nth-child(2) .ph, .g-item:nth-child(7) .ph{aspect-ratio:1/1;}
.g-item:nth-child(3) .ph, .g-item:nth-child(8) .ph{aspect-ratio:4/5;}
.g-item:nth-child(4) .ph, .g-item:nth-child(9) .ph{aspect-ratio:3/4;}
.g-item:nth-child(6) .ph{aspect-ratio:1/1;}
.g-item .ph svg{width:30px; height:30px; opacity:.7;}
.g-item .ph span{font-size:.82rem; font-weight:500;}
.g-item .ph img{width:100%; height:100%; object-fit:cover; display:block;}
.g-item .overlay{
  position:absolute; inset:0; background:linear-gradient(0deg, rgba(4,18,12,0.75), transparent 55%);
  opacity:0; transition:opacity .3s ease; display:flex; align-items:flex-end; padding:16px;
}
.g-item .overlay span{font-family:'Sora'; font-weight:700; font-size:.9rem;}
.g-item:hover .overlay{opacity:1;}
.g-item:hover .ph{transform:scale(1.04);}

/* ---------- Modal (gallery + terms examples) ---------- */
.modal{
  position:fixed; inset:0; z-index:200; background:rgba(2,10,7,0.92); backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center; padding:24px;
}
.modal.open{display:flex;}
.modal-box{
  max-width:480px; width:100%; min-height:280px; border-radius:var(--radius-lg);
  background:linear-gradient(160deg, var(--bg-emerald), var(--bg-deep));
  border:1px solid var(--line); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  color:var(--ink-muted); text-align:center; padding:30px;
}
.modal-box svg{width:44px; height:44px; opacity:.7;}
.modal-box strong{color:var(--ink); font-family:'Sora'; font-size:1.15rem;}
.modal-box.has-image{
  max-width:640px; padding:0; min-height:0; background:var(--bg-deep); overflow:hidden;
}
.modal-box.has-image img{width:100%; max-height:82vh; object-fit:contain; display:block; background:#000;}
.modal-close{
  position:absolute; top:26px; right:26px; width:44px; height:44px; border-radius:var(--radius-sm);
  background:var(--glass); border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--ink);
}

/* ---------- FAQ ---------- */
.faq-list{max-width:800px; margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px;
  background:none; border:none; color:var(--ink); text-align:left; padding:26px 4px; cursor:pointer;
  font-family:'Sora'; font-weight:700; font-size:1.05rem;
}
.faq-q svg{width:20px; height:20px; flex-shrink:0; color:var(--accent-neon-soft); transition:transform .3s ease;}
.faq-item.open .faq-q svg{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .35s ease;}
.faq-a p{color:var(--ink-muted); padding:0 4px 26px; margin:0; max-width:70ch;}

/* ---------- CTA ---------- */
.cta-section{
  background:
    radial-gradient(ellipse 70% 80% at 50% 0%, rgba(52,171,92,0.22), transparent 65%),
    linear-gradient(180deg, var(--bg-deep), var(--bg-black));
  text-align:center;
}
.cta-section h2{font-size:clamp(2.2rem, 6vw, 3.4rem); font-weight:700; line-height:1.05;}
.cta-section .sub{max-width:52ch; margin:20px auto 34px; color:var(--ink-muted); font-size:1.05rem;}
.cta-actions{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:16px;}
.cta-actions .link-alt{display:inline-flex; align-items:center; gap:8px; color:var(--ink-muted); font-weight:600;}
.cta-actions .link-alt svg{width:18px; height:18px; color:var(--accent-neon-soft);}
.cta-actions .link-alt:hover{color:var(--ink);}

/* ---------- Footer ---------- */
footer{background:#031007; border-top:1px solid var(--line); padding:60px 0 30px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px;}
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr; gap:32px;} }
footer .brand{margin-bottom:14px;}
footer p{color:var(--ink-muted); font-size:.92rem; margin:4px 0;}
footer h4{font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-muted); margin-bottom:14px; font-weight:600;}
footer .flinks{display:flex; flex-direction:column; gap:10px;}
footer .flinks a{color:var(--ink); font-size:.92rem; display:inline-flex; align-items:center; gap:8px;}
footer .flinks a:hover{color:var(--accent-neon-soft);}
footer .flinks svg{width:16px; height:16px; color:var(--accent-neon-soft);}
.foot-bottom{margin-top:44px; padding-top:24px; border-top:1px solid var(--line); text-align:center; color:var(--ink-muted); font-size:.82rem;}

/* ---------- Floating WA ---------- */
.fab-wa{
  position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom,0px)); z-index:90;
  width:56px; height:56px; border-radius:var(--radius-md);
  background:linear-gradient(150deg, var(--accent-neon-soft), var(--bg-emerald)); color:var(--ink);
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px -6px rgba(52,171,92,0.55);
  transition:transform .2s ease;
}
.fab-wa:hover{transform:scale(1.07);}
.fab-wa svg{width:26px; height:26px;}
.fab-tooltip{
  position:absolute; right:66px; top:50%; transform:translateY(-50%);
  background:var(--bg-deep); color:var(--ink); padding:8px 14px; border-radius:var(--radius-sm); font-size:.82rem; font-weight:600;
  white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.fab-wa:hover .fab-tooltip{opacity:1;}
@media (max-width:600px){ .fab-tooltip{display:none;} .fab-wa{width:50px; height:50px;} .fab-wa svg{width:22px; height:22px;} }

@media (max-width:900px){ nav.links{display:none;} .nav-right .btn-ghost{display:none;} .hamburger{display:flex;} }
@media (max-width:600px){ .hero-ctas .btn{flex:0 1 auto; padding:12px 20px; font-size:.86rem;} .cta-actions .btn{width:100%;} }

/* ===================================================================
   SISTEM INFORMASI: Kelulusan publik, Pengumuman, Infaq modal, Admin
=================================================================== */

/* ---------- Infaq modal + trigger ---------- */
a.info-card.infaq-trigger{cursor:pointer;}
a.info-card.infaq-trigger:hover{
  border-color:#25D366; background:linear-gradient(165deg, rgba(37,211,102,0.14), rgba(255,255,255,0.01));
}
a.info-card.infaq-trigger:hover .ic{color:#25D366;}
.infaq-modal-box{
  max-width:420px; width:100%; border-radius:var(--radius-lg); padding:34px;
  background:linear-gradient(160deg, var(--bg-emerald), var(--bg-deep)); border:1px solid var(--line);
  text-align:center;
}
.infaq-modal-box .eyebrow{justify-content:center; display:flex;}
.account-box{
  margin:22px 0; padding:22px; border-radius:var(--radius-md); background:rgba(255,255,255,0.05); border:1px solid var(--line);
}
.account-box .bank-name{font-family:'Sora'; font-weight:800; font-size:1.1rem; color:var(--accent-neon-soft); margin-bottom:10px;}
.account-box .acc-number{font-family:'Sora'; font-weight:800; font-size:1.7rem; letter-spacing:.04em; margin-bottom:6px;}
.account-box .acc-name{color:var(--ink-muted); font-size:.92rem;}
.copy-feedback{color:var(--accent-neon-soft); font-size:.85rem; font-weight:600; min-height:1.3em; margin-top:10px;}

/* ---------- Kelulusan: kategori + kota sub-tabs ---------- */
.kategori-tabs{display:flex; gap:10px; margin-bottom:22px;}
.kategori-tab{
  flex:1; padding:16px; border-radius:var(--radius-md); border:1.5px solid var(--line); background:transparent;
  color:var(--ink-muted); font-family:'Sora'; font-weight:700; font-size:1rem; cursor:pointer; transition:all .2s ease;
}
.kategori-tab.active{border-color:var(--accent-neon); background:rgba(52,171,92,0.1); color:var(--ink);}
.kelulusan-summary{color:var(--ink-muted); font-size:.9rem; margin-bottom:18px;}
.kelulusan-summary b{color:var(--ink);}

/* Mobile card layout untuk hasil kelulusan */
.kelulusan-cards{display:none; flex-direction:column; gap:14px;}
.kelulusan-card{
  border:1px solid var(--line); border-radius:var(--radius-md); padding:20px;
  background:linear-gradient(160deg, rgba(255,255,255,0.04), transparent);
}
.kelulusan-card .kc-no{color:var(--accent-neon-soft); font-family:'Sora'; font-weight:800; font-size:.85rem; margin-bottom:6px;}
.kelulusan-card .kc-name{font-family:'Sora'; font-weight:700; font-size:1.1rem; margin-bottom:4px;}
.kelulusan-card .kc-ttl{color:var(--ink-muted); font-size:.88rem; margin-bottom:14px;}
.kelulusan-card .kc-stats{display:flex; gap:20px; margin-bottom:14px;}
.kelulusan-card .kc-stat small{display:block; color:var(--ink-muted); font-size:.72rem; text-transform:uppercase;}
.kelulusan-card .kc-stat strong{font-family:'Sora'; font-size:1.1rem;}
.badge-tidak-lulus{
  display:inline-flex; align-items:center; gap:6px; background:rgba(255,120,100,0.14); color:#ff8a7a;
  padding:4px 12px; border-radius:var(--radius-sm); font-weight:700; font-size:.78rem; text-transform:uppercase;
}
@media (max-width:760px){
  .result-table-wrap{display:none !important;}
  .kelulusan-cards{display:flex;}
}

/* ---------- Pengumuman feed/thread ---------- */
.feed{display:flex; flex-direction:column; gap:20px; max-width:680px; margin:0 auto;}
.feed-card{
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px;
  background:linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  box-shadow:0 30px 50px -30px rgba(0,0,0,0.6);
}
.feed-header{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
.feed-avatar{
  width:42px; height:42px; border-radius:var(--radius-sm); background:linear-gradient(145deg,var(--accent-neon),var(--bg-emerald));
  display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--ink); flex-shrink:0;
}
.feed-meta strong{display:block; font-family:'Sora'; font-size:.95rem;}
.feed-meta span{color:var(--ink-muted); font-size:.78rem;}
.feed-title{font-family:'Sora'; font-weight:700; font-size:1.15rem; margin-bottom:8px;}
.feed-content{color:var(--ink-muted); font-size:.95rem; line-height:1.65; white-space:pre-wrap;}
.feed-photo{margin-top:16px; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--line);}
.feed-actions{display:flex; align-items:center; gap:22px; margin-top:20px; padding-top:16px; border-top:1px solid var(--line);}
.feed-action{
  display:inline-flex; align-items:center; gap:7px; background:none; border:none; color:var(--ink-muted);
  font-size:.88rem; font-weight:600; cursor:pointer; transition:color .2s ease;
}
.feed-action svg{width:18px; height:18px;}
.feed-action:hover{color:var(--ink);}
.feed-action.liked{color:#ff5a6e;}
.feed-action.liked svg{fill:#ff5a6e;}

.comment-section{margin-top:18px; padding-top:18px; border-top:1px solid var(--line); display:none;}
.comment-section.open{display:block;}
.comment-list{display:flex; flex-direction:column; gap:14px; margin-bottom:16px;}
.comment-item{display:flex; gap:10px;}
.comment-item .feed-avatar{width:32px; height:32px; font-size:.78rem;}
.comment-body{background:rgba(255,255,255,0.04); border-radius:var(--radius-sm); padding:10px 14px; flex:1;}
.comment-body strong{display:block; font-size:.85rem; margin-bottom:2px;}
.comment-body p{margin:0; font-size:.88rem; color:var(--ink-muted);}
.comment-form{display:flex; flex-direction:column; gap:10px;}
.comment-form input, .comment-form textarea{
  background:rgba(255,255,255,0.04); border:1px solid var(--line); border-radius:var(--radius-sm);
  color:var(--ink); padding:10px 14px; font-size:.88rem; font-family:'Inter'; resize:vertical;
}
.feed-empty{text-align:center; color:var(--ink-muted); padding:60px 0;}

/* ---------- Admin: login page ---------- */
.login-wrap{
  min-height:100svh; display:flex; align-items:center; justify-content:center; padding:24px;
  background:
    radial-gradient(ellipse 60% 50% at 20% 20%, rgba(52,171,92,0.16), transparent 60%),
    radial-gradient(ellipse 50% 60% at 85% 80%, rgba(89,201,126,0.10), transparent 60%),
    var(--bg-black);
}
.login-card{
  width:100%; max-width:400px; border:1px solid var(--line); border-radius:var(--radius-lg); padding:40px 36px;
  background:linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01));
  box-shadow:0 40px 70px -35px rgba(0,0,0,0.7);
}
.login-card .brand{justify-content:center; margin-bottom:24px;}
.login-card h1{font-size:1.4rem; font-weight:700; text-align:center; margin-bottom:6px;}
.login-card .sub{color:var(--ink-muted); font-size:.9rem; text-align:center; margin-bottom:28px;}
.form-field{margin-bottom:18px;}
.form-field label{display:block; font-size:.82rem; color:var(--ink-muted); margin-bottom:8px; font-weight:600;}
.form-field input, .form-field select, .form-field textarea{
  width:100%; background:rgba(255,255,255,0.04); border:1px solid var(--line); border-radius:var(--radius-sm);
  color:var(--ink); padding:12px 14px; font-size:.92rem; font-family:'Inter';
}
.form-field textarea{resize:vertical; min-height:100px;}
.form-error{color:#ff8a7a; font-size:.85rem; margin-top:10px; min-height:1.2em;}
.form-hint{color:var(--ink-muted); font-size:.78rem; margin-top:30px; text-align:center;}
.spinner{
  width:16px; height:16px; border:2px solid rgba(255,255,255,0.3); border-top-color:#fff; border-radius:50%;
  display:inline-block; animation:spin .7s linear infinite;
}
@keyframes spin{ to{transform:rotate(360deg);} }

/* ---------- Admin: dashboard shell ---------- */
.admin-shell{display:grid; grid-template-columns:240px 1fr; min-height:100vh;}
@media (max-width:860px){ .admin-shell{grid-template-columns:1fr;} }
.admin-sidebar{
  background:var(--bg-black); border-right:1px solid var(--line); padding:26px 18px; position:sticky; top:0; height:100vh;
}
@media (max-width:860px){ .admin-sidebar{position:relative; height:auto; border-right:none; border-bottom:1px solid var(--line);} }
.admin-sidebar .brand{margin-bottom:30px; padding:0 8px;}
.admin-nav{display:flex; flex-direction:column; gap:4px;}
.admin-nav a{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--radius-sm);
  color:var(--ink-muted); font-size:.92rem; font-weight:600;
}
.admin-nav a svg{width:18px; height:18px; flex-shrink:0;}
.admin-nav a:hover{background:rgba(255,255,255,0.04); color:var(--ink);}
.admin-nav a.active{background:rgba(52,171,92,0.14); color:var(--accent-neon-soft);}
.admin-nav .logout-link{margin-top:20px; border-top:1px solid var(--line); padding-top:20px; color:#ff8a7a;}

.admin-main{padding:36px 40px;}
@media (max-width:640px){ .admin-main{padding:24px 18px;} }
.admin-header{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:30px; flex-wrap:wrap; gap:14px;}
.admin-header h1{font-size:1.6rem; font-weight:700;}
.admin-header p{color:var(--ink-muted); font-size:.92rem; margin-top:4px;}

.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:10px;}
@media (max-width:760px){ .stat-grid{grid-template-columns:1fr 1fr;} }
.stat-card{
  border:1px solid var(--line); border-radius:var(--radius-md); padding:22px;
  background:linear-gradient(160deg, rgba(255,255,255,0.04), transparent);
}
.stat-card .stat-label{color:var(--ink-muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px;}
.stat-card .stat-value{font-family:'Sora'; font-weight:800; font-size:1.8rem;}

.admin-card{
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px; margin-bottom:24px;
  background:linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
}
.admin-card h2{font-size:1.1rem; font-weight:700; margin-bottom:18px;}
.admin-card h3{font-size:.95rem; font-weight:700; margin:0 0 14px;}

.upload-row{display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; margin-bottom:18px;}
.upload-row .form-field{flex:1; min-width:160px; margin-bottom:0;}

.data-table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-md); margin-bottom:18px;}
.data-table{width:100%; border-collapse:collapse; font-size:.85rem; white-space:nowrap;}
.data-table th{
  text-align:left; padding:12px 16px; color:var(--ink-muted); font-weight:600; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.03em; border-bottom:1px solid var(--line); background:rgba(255,255,255,0.03);
}
.data-table td{padding:12px 16px; border-bottom:1px solid var(--line);}
.data-table tr:last-child td{border-bottom:none;}

.manage-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
@media (max-width:760px){ .manage-grid{grid-template-columns:1fr;} }
.manage-tile{
  border:1px solid var(--line); border-radius:var(--radius-md); padding:18px; display:flex; justify-content:space-between; align-items:center;
}
.manage-tile .mt-title{font-family:'Sora'; font-weight:700; font-size:.92rem;}
.manage-tile .mt-count{color:var(--ink-muted); font-size:.8rem; margin-top:2px;}
.manage-tile .mt-actions{display:flex; gap:8px;}
.icon-btn{
  width:34px; height:34px; border-radius:var(--radius-sm); border:1px solid var(--line); background:transparent;
  color:var(--ink-muted); display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.icon-btn:hover{border-color:var(--accent-neon); color:var(--accent-neon-soft);}
.icon-btn svg{width:16px; height:16px;}
.icon-btn.danger:hover{border-color:#ff5a6e; color:#ff5a6e;}

.ann-list{display:flex; flex-direction:column; gap:12px;}
.ann-row{
  display:flex; justify-content:space-between; align-items:center; gap:14px; padding:14px 18px;
  border:1px solid var(--line); border-radius:var(--radius-md); flex-wrap:wrap;
}
.ann-row .ann-title{font-family:'Sora'; font-weight:700; font-size:.92rem;}
.ann-row .ann-meta{color:var(--ink-muted); font-size:.78rem; margin-top:2px;}
.status-pill{padding:3px 10px; border-radius:var(--radius-sm); font-size:.7rem; font-weight:700; text-transform:uppercase;}
.status-pill.DRAFT{background:rgba(255,255,255,0.08); color:var(--ink-muted);}
.status-pill.PUBLISHED{background:rgba(52,171,92,0.15); color:var(--accent-neon-soft);}

.photo-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px;}
.photo-tile{border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--line); position:relative;}
.photo-tile img{width:100%; aspect-ratio:1/1; object-fit:cover; display:block;}
.photo-tile .pt-actions{position:absolute; top:8px; right:8px; display:flex; gap:6px;}
.photo-tile .pt-actions .icon-btn{background:rgba(2,15,10,0.7); backdrop-filter:blur(4px);}

.confirm-overlay{
  position:fixed; inset:0; z-index:300; background:rgba(2,10,7,0.85); display:none; align-items:center; justify-content:center; padding:24px;
}
.confirm-overlay.open{display:flex;}
.confirm-box{
  max-width:380px; width:100%; border-radius:var(--radius-lg); padding:28px; text-align:center;
  background:linear-gradient(160deg, var(--bg-emerald), var(--bg-deep)); border:1px solid var(--line);
}
.confirm-box p{color:var(--ink-muted); margin:12px 0 22px; font-size:.92rem;}
.confirm-box .confirm-actions{display:flex; gap:10px; justify-content:center;}

.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); z-index:400;
  background:var(--bg-deep); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 20px;
  font-size:.88rem; font-weight:600; opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.toast.success{border-color:var(--accent-neon); color:var(--accent-neon-soft);}
.toast.error{border-color:#ff5a6e; color:#ff8a7a;}

.api-warning{
  margin:0 0 24px; padding:16px 20px; border:1px solid rgba(255,138,122,0.4); background:rgba(255,90,110,0.08);
  border-radius:var(--radius-md); color:#ff8a7a; font-size:.88rem;
}

/* =========================================================
   MOBILE RESPONSIVE OPTIMIZATION
   ========================================================= */

@media (max-width: 600px){

  /* ---------- GLOBAL ---------- */

  .wrap{
    padding-left:16px;
    padding-right:16px;
  }

  section{
    padding:64px 0;
  }


  /* ---------- NAVBAR ---------- */

  .navbar{
    height:60px;
  }

  .brand .logo-img{
    height:26px;
  }


  /* ---------- HERO ---------- */

  .hero{
    min-height:auto;
    padding-top:105px;
    padding-bottom:70px;
  }

  .hero-inner{
    grid-template-columns:1fr;
    gap:36px;
  }

  h1.headline{
    font-size:clamp(2.35rem,12vw,3.2rem);
    line-height:1;
  }

  .kicker{
    gap:8px;
    margin-bottom:18px;
  }

  .badge28{
    font-size:.72rem;
    padding:5px 10px;
  }

  .kicker-text{
    font-size:.75rem;
  }

  .hero-dates{
    font-size:1.05rem;
    gap:8px;
    flex-wrap:wrap;
  }

  .city-chips{
    gap:7px;
  }

  .city-chip{
    font-size:.76rem;
    padding:6px 10px;
  }

  .hero-desc{
    font-size:.94rem;
    line-height:1.65;
  }

  .hero-ctas{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-top:28px;
  }

  .hero-ctas .btn{
    width:100%;
    min-height:46px;
  }

  .orb-card{
    max-width:300px;
    padding:24px;
  }


  /* ---------- SECTION HEAD ---------- */

  .section-head{
    margin-bottom:34px;
  }

  h2.h-title{
    font-size:clamp(1.7rem,8vw,2.2rem);
  }

  .section-head p{
    font-size:.92rem;
  }


  /* ---------- TENTANG ---------- */

  .tentang-grid{
    grid-template-columns:1fr;
    gap:32px;
  }

  .tentang-text p{
    font-size:.95rem;
  }


  /* ---------- MATERI ---------- */

  .materi-grid{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }

  .materi-tile{
    padding:18px 14px;
  }

  .materi-tile h3{
    font-size:.9rem;
  }

  .materi-tile p{
    font-size:.78rem;
  }


  /* ---------- INFO ---------- */

  .info-grid{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }

  .info-card{
    padding:18px 14px;
  }

  .info-card .ic{
    width:25px;
    height:25px;
    margin-bottom:12px;
  }

  .info-card h3{
    font-size:.68rem;
  }

  .info-card .val{
    font-size:.9rem;
  }

  .date-city-list li{
    font-size:.8rem;
  }


  /* ---------- INFAQ ---------- */

  .infaq-panel{
    padding:40px 20px;
    border-radius:20px;
  }

  .infaq-amount{
    font-size:clamp(2.7rem,13vw,4.5rem);
  }


  /* ---------- TERMS ---------- */

  .terms-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .terms-card{
    padding:24px 18px;
    border-radius:20px;
  }

  .terms-card h3{
    font-size:1.15rem;
  }

  .terms-list{
    gap:11px;
  }

  .terms-list li{
    font-size:.88rem;
  }


  /* ---------- TIMELINE ---------- */

  .t-step{
    grid-template-columns:46px 1fr;
    gap:14px;
    padding-bottom:32px;
  }

  .t-step::before{
    left:22px;
    top:46px;
  }

  .t-num{
    width:46px;
    height:46px;
    border-radius:12px;
    font-size:1rem;
  }

  .t-body h3{
    font-size:1rem;
    padding-top:8px;
  }

  .t-body p{
    font-size:.85rem;
  }


  /* ---------- RESULT / KELULUSAN ---------- */

  .result-panel{
    padding:20px 14px;
    border-radius:18px;
  }

  .result-tabs{
    gap:7px;
  }

  .result-tab{
    padding:9px 12px;
    font-size:.8rem;
  }

  .result-search{
    padding:10px 12px;
  }

  .kelulusan-card{
    padding:16px;
  }

  .kelulusan-card .kc-name{
    font-size:1rem;
  }

  .kelulusan-card .kc-stats{
    gap:14px;
    flex-wrap:wrap;
  }


  /* ---------- CATEGORY TABS ---------- */

  .kategori-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .kategori-tab{
    padding:12px 8px;
    font-size:.85rem;
  }


  /* ---------- GALLERY ---------- */

  .gallery-grid{
    columns:2 130px;
    column-gap:8px;
  }

  .g-item{
    margin-bottom:8px;
    border-radius:12px;
  }


  /* ---------- MODAL ---------- */

  .modal{
    padding:12px;
  }

  .modal-box{
    padding:20px;
    border-radius:18px;
  }

  .modal-close{
    top:12px;
    right:12px;
    width:40px;
    height:40px;
  }


  /* ---------- FAQ ---------- */

  .faq-q{
    gap:12px;
    padding:20px 2px;
    font-size:.92rem;
  }

  .faq-a p{
    font-size:.88rem;
    padding-bottom:20px;
  }


  /* ---------- CTA ---------- */

  .cta-section h2{
    font-size:clamp(2rem,9vw,2.8rem);
  }

  .cta-section .sub{
    font-size:.92rem;
  }

  .cta-actions{
    width:100%;
    flex-direction:column;
  }

  .cta-actions .btn{
    width:100%;
    min-height:46px;
  }


  /* ---------- FOOTER ---------- */

  footer{
    padding:45px 0 25px;
  }

  .foot-grid{
    grid-template-columns:1fr;
    gap:28px;
  }


  /* ---------- FLOATING WHATSAPP ---------- */

  .fab-wa{
    right:14px;
    bottom:calc(14px + env(safe-area-inset-bottom,0px));
    width:50px;
    height:50px;
  }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width:400px){

  .wrap{
    padding-left:14px;
    padding-right:14px;
  }

  section{
    padding:56px 0;
  }

  .materi-grid{
    grid-template-columns:1fr;
  }

  .info-grid{
    gap:8px;
  }

  .info-card{
    padding:15px 11px;
  }

  .info-card .val{
    font-size:.82rem;
  }

  .stat-card{
    padding:15px 12px;
  }

  .stat-card .stat-value{
    font-size:1.4rem;
  }

}


/* =========================================================
   ADMIN MOBILE
   ========================================================= */

@media (max-width:860px){

  .admin-sidebar{
    padding:14px 16px;
  }

  .admin-sidebar .brand{
    margin-bottom:14px;
  }

  .admin-nav{
    flex-direction:row;
    overflow-x:auto;
    gap:6px;
    padding-bottom:4px;
    scrollbar-width:none;
  }

  .admin-nav::-webkit-scrollbar{
    display:none;
  }

  .admin-nav a{
    flex:0 0 auto;
    padding:9px 12px;
    font-size:.8rem;
    white-space:nowrap;
  }

  .admin-nav .logout-link{
    margin-top:0;
    border-top:none;
    padding-top:9px;
  }

}

@media (max-width:600px){

  .admin-main{
    padding:20px 14px;
  }

  .admin-card{
    padding:18px 14px;
    border-radius:18px;
  }

  .admin-header{
    margin-bottom:22px;
  }

  .admin-header h1{
    font-size:1.35rem;
  }

  .upload-row{
    flex-direction:column;
    align-items:stretch;
  }

  .upload-row .form-field{
    width:100%;
    min-width:0;
  }

  .upload-row .btn{
    width:100%;
  }

}

.hero-ctas{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

.hero-ctas .btn{
  min-width:0;
}

@media (max-width:600px){

  .hero-ctas{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
    gap:10px;
  }

  .hero-ctas .btn{
    width:100%;
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
    justify-content:center;
    text-align:center;
    white-space:normal;
    padding:13px 14px;
  }

}

/* FIX POSISI JUDUL HASIL KELULUSAN */
.result-panel{
  padding-left:24px;
  padding-right:24px;
}

.result-panel > *{
  max-width:100%;
}

@media (max-width:600px){
  .result-panel{
    padding-left:14px;
    padding-right:14px;
  }
}