/* Tema islami modern: hijau, putih, emas */
:root{
  --green:#0f7c4a;
  --green-dark:#0b5e38;
  --green-soft:#e8f5ee;
  --gold:#d4a437;
  --gold-soft:#fff4d6;
  --ink:#1f2937;
  --bg:#f7faf8;
}
*{box-sizing:border-box}
body{
  font-family:'Poppins',system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  min-height:100vh;
}

/* HERO */
.hero{
  min-height:100vh;
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(212,164,55,.25), transparent 60%),
    radial-gradient(900px 500px at 80% 90%, rgba(255,255,255,.15), transparent 60%),
    linear-gradient(135deg,var(--green-dark),var(--green) 60%,#0a4a2c);
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><path d='M40 0l10 30L80 40 50 50 40 80 30 50 0 40l30-10z' fill='%23ffffff' fill-opacity='0.04'/></svg>");
  pointer-events:none;
}
.hero-logo{width:110px;height:110px;object-fit:contain;border-radius:50%;background:#fff;padding:10px;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.hero-logo-placeholder{
  width:110px;height:110px;border-radius:50%;
  background:#fff;color:var(--green);display:inline-flex;align-items:center;justify-content:center;
  font-size:48px;box-shadow:0 8px 30px rgba(0,0,0,.25);
}
.hero-title{
  font-weight:800;font-size:clamp(1.4rem,3.2vw,2.4rem);line-height:1.25;
  text-shadow:0 4px 24px rgba(0,0,0,.35);
}

/* Countdown */
.countdown-wrap{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
.cd-box{
  background:rgba(255,255,255,.12);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.25);
  border-radius:16px;min-width:84px;padding:14px 10px;color:#fff;
}
.cd-box span{display:block;font-size:2rem;font-weight:800;line-height:1;color:var(--gold-soft)}
.cd-box small{display:block;margin-top:4px;letter-spacing:1px;opacity:.85}

/* Footer */
.footer{background:#0a2e1d;color:#e8f5ee}

/* Result page */
.result-page{
  background:linear-gradient(135deg,var(--green-dark),var(--green));
  min-height:100vh;color:#fff;
}
.result-card{border:0;border-radius:24px;background:#fff;color:var(--ink)}
.card-lulus{border-top:6px solid var(--green)}
.card-tidak{border-top:6px solid #dc3545}
.card-warn{border-top:6px solid var(--gold)}
.badge-circle{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center}

.confetti-canvas{position:fixed;inset:0;pointer-events:none;z-index:1050}

/* Admin */
.sidebar{
  width:260px;min-height:100vh;background:linear-gradient(180deg,var(--green-dark),#063722);color:#e8f5ee;
  position:fixed;top:0;left:0;padding:20px 0;transition:transform .2s ease;z-index:1030;
}
.sidebar .brand{padding:0 20px 16px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:12px}
.sidebar a{display:flex;align-items:center;gap:10px;color:#cfe8d8;padding:11px 20px;text-decoration:none;border-left:3px solid transparent}
.sidebar a:hover,.sidebar a.active{background:rgba(255,255,255,.08);color:#fff;border-left-color:var(--gold)}
.admin-main{margin-left:260px;padding:24px;min-height:100vh;background:var(--bg)}
.topbar{background:#fff;border-radius:14px;padding:14px 18px;box-shadow:0 4px 20px rgba(0,0,0,.05);display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.stat-card{border:0;border-radius:18px;color:#fff;overflow:hidden;position:relative}
.stat-card .icon{position:absolute;right:14px;top:14px;font-size:2.4rem;opacity:.35}
.stat-1{background:linear-gradient(135deg,var(--green),var(--green-dark))}
.stat-2{background:linear-gradient(135deg,#16a34a,#0f7c4a)}
.stat-3{background:linear-gradient(135deg,#dc3545,#7a1d28)}
.stat-4{background:linear-gradient(135deg,var(--gold),#a87a1a)}

@media (max-width: 991px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.show{transform:translateX(0)}
  .admin-main{margin-left:0}
}

/* Dark mode */
body.dark{background:#0b1220;color:#e5e7eb}
body.dark .footer{background:#050d0a}
body.dark .topbar,body.dark .card,body.dark .result-card{background:#111827;color:#e5e7eb}
body.dark .table{color:#e5e7eb}
body.dark .form-control,body.dark .form-select{background:#0f172a;color:#e5e7eb;border-color:#334155}