/* ============================================
   PANTAU26 — Design System & Styles
   PK SMAN 26 Jakarta
   ============================================ */

/* --- Google Fonts Import --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800;900&display=swap');

/* --- CSS Custom Properties --- */
:root {
  /* Base Backgrounds */
  --bg-primary: #07070b;
  --bg-secondary: #0d0e14;
  --bg-tertiary: #13151e;
  --bg-elevated: #1a1c28;
  --bg-card: rgba(18, 20, 30, 0.55);
  --bg-card-hover: rgba(26, 28, 42, 0.75);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-border-hover: rgba(255, 255, 255, 0.12);

  /* Brand — Red (from logo) */
  --red: #c92a2a;
  --red-bright: #e03131;
  --red-muted: #a82222;
  --red-glow: rgba(201, 42, 42, 0.25);
  --red-surface: rgba(201, 42, 42, 0.08);

  /* Brand — Green (success) */
  --green: #27ae60;
  --green-bright: #2ecc71;
  --green-muted: #1e8449;
  --green-glow: rgba(39, 174, 96, 0.25);
  --green-surface: rgba(39, 174, 96, 0.08);

  /* Brand — Gold (from logo) */
  --gold: #d4a520;
  --gold-bright: #ecc94b;
  --gold-muted: #a88419;
  --gold-glow: rgba(212, 165, 32, 0.25);
  --gold-surface: rgba(212, 165, 32, 0.08);

  /* Neutral Text */
  --text-primary: #ede8e0;
  --text-secondary: #9e9690;
  /* Dulu #5e5650 — hanya 2,70:1 di atas kartu kaca, gagal bahkan untuk teks besar.
     Nada hangatnya dipertahankan, kecerahannya dinaikkan sampai lulus di SEMUA
     permukaan: 5,57:1 di kartu kaca, 4,87:1 di panel terangkat (modal dan dropdown),
     5,23:1 di panel tersier. Nilai #8a8078 sempat dicoba tapi jatuh ke 4,38:1 di
     panel terangkat — permukaan paling terang yang dipakai teks ini. */
  --text-muted: #918880;
  --text-inverse: #07070b;

  /* Status Colors */
  --status-done: #27ae60;
  --status-done-bg: rgba(39, 174, 96, 0.12);
  --status-progress: #f39c12;
  --status-progress-bg: rgba(243, 156, 18, 0.12);
  /* Menunggu itu keadaan netral: aspirasinya belum diapa-apakan, bukan bermasalah.
     Merah dipindah ke Ditolak, yang memang keputusan berakhir. Sebelumnya terbalik,
     dan itu membuat aspirasi baru masuk terlihat seperti keluhan darurat sementara
     yang benar-benar ditolak justru pucat tak bersuara. */
  --status-waiting: #7f8c8d;
  --status-waiting-bg: rgba(127, 140, 141, 0.12);
  --status-rejected: #e74c3c;
  --status-rejected-bg: rgba(231, 76, 60, 0.12);

  /* Spacing Scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Typography */
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-heading: 'Outfit', 'Inter', sans-serif;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Transitions
     ------------------------------------------------------------------
     Kurvanya dulu cubic-bezier(0.4, 0, 0.2, 1) — kurva yang melambat di awal
     lalu melambat lagi di akhir. Untuk elemen yang muncul dan menghilang itu
     terbalik: gerakan harus berangkat cepat, karena awal gerakan justru detik
     yang paling diperhatikan mata. Sesuatu yang berangkat pelan terbaca
     sebagai lamban, walau durasinya sama persis.

     Sekarang memakai ease-out yang tegas. Satu perubahan di sini menyetel
     ulang 78 transisi di seluruh berkas sekaligus — itulah gunanya variabel. */
  --transition-fast: 150ms cubic-bezier(0.23, 1, 0.32, 1);
  --transition-base: 250ms cubic-bezier(0.23, 1, 0.32, 1);
  --transition-slow: 400ms cubic-bezier(0.23, 1, 0.32, 1);

  /* Sengaja dibiarkan melewati tujuan sedikit lalu kembali. Dipakai hanya untuk
     gerakan yang memang ingin terasa lentur, bukan untuk transisi umum. */
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Shadows */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3);
  --shadow-elevated: 0 8px 40px rgba(0, 0, 0, 0.45);
  --shadow-glow-red: 0 0 30px var(--red-glow);
  --shadow-glow-gold: 0 0 30px var(--gold-glow);

  /* Layout */
  --navbar-height: 64px;
  --container-max: 1440px;
  --container-padding: 1.5rem;
}

/* --- Reset & Base --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
}

::selection {
  background: var(--red);
  color: white;
}

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}
::-webkit-scrollbar-thumb {
  background: var(--bg-elevated);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input, textarea, select {
  font-family: inherit;
  background: transparent;
  border: 1.5px solid var(--glass-border-hover);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.2rem;
  color: var(--text-primary);
  outline: none;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}

input:focus, textarea:focus, select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-surface);
}

/* --- Utility --- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.section-header h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  margin-bottom: var(--space-sm);
  background: linear-gradient(135deg, var(--text-primary), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-header p {
  color: var(--text-secondary);
  font-size: 1.05rem;
  max-width: 560px;
  margin: 0 auto;
}

.section-subheader {
  margin-bottom: var(--space-2xl);
}

.section-subheader h3 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: var(--space-xs);
}

.section-subheader p {
  color: var(--text-secondary);
}

.gold-text {
  color: var(--gold);
  -webkit-text-fill-color: var(--gold);
}

.red-text {
  color: var(--red-bright);
}

/* --- Background Noise Texture --- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* ============================================
   NAVBAR
   ============================================ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--navbar-height);
  z-index: 1000;
  background: rgba(7, 7, 11, 0.8);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border-bottom: 1px solid var(--glass-border);
  transition: var(--transition-base);
}

.navbar.scrolled {
  background: rgba(7, 7, 11, 0.95);
  box-shadow: var(--shadow-card);
}

.navbar-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar-logo {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  user-select: none;
}

.logo-accent {
  color: var(--gold);
  position: relative;
}

.logo-dot {
  width: 6px;
  height: 6px;
  background: var(--red);
  border-radius: 50%;
  display: inline-block;
  margin-left: 2px;
  vertical-align: super;
  font-size: 0.7em;
}

.navbar-links {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.nav-link {
  padding: 0.45rem 0.85rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
  position: relative;
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}

.nav-link.active {
  color: var(--gold);
  background: var(--gold-surface);
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 2px;
  background: var(--gold);
  border-radius: var(--radius-full);
}

.navbar-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  z-index: 1001;
}

.navbar-hamburger span {
  width: 22px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: var(--transition-base);
}

/* --- Mobile Menu --- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 1001; /* Higher than navbar (1000) */
  background: rgba(7, 7, 11, 0.97);
  backdrop-filter: var(--glass-blur-strong);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 5rem 1rem 3rem; /* Space for close button at top, and safe area at bottom */
  gap: var(--space-md);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-slow);
}

.mobile-menu.open {
  opacity: 1;
  visibility: visible;
}

.mobile-nav-link {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  padding: var(--space-sm) var(--space-lg);
  transition: var(--transition-base);
  transform: translateY(20px);
  opacity: 0;
}

.mobile-menu.open .mobile-nav-link {
  transform: translateY(0);
  opacity: 1;
}

.mobile-nav-link:nth-child(1) { transition-delay: 50ms; }
.mobile-nav-link:nth-child(2) { transition-delay: 100ms; }
.mobile-nav-link:nth-child(3) { transition-delay: 150ms; }
.mobile-nav-link:nth-child(4) { transition-delay: 200ms; }
.mobile-nav-link:nth-child(5) { transition-delay: 250ms; }
.mobile-nav-link:nth-child(6) { transition-delay: 300ms; }

.mobile-nav-link:hover,
.mobile-nav-link.active {
  color: var(--gold);
}

.mobile-close {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  font-size: 2rem;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
  z-index: 10;
}

.mobile-close:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

/* ============================================
   PAGES — Common
   ============================================ */
.main-content {
  position: relative;
  z-index: 1;
}

.page {
  display: none;
  min-height: 100vh;
  padding-top: var(--navbar-height);
}

.page.active {
  display: block;
}

/* Halaman yang punya bilah tab utama dikecualikan dari animasi menyeluruh.
   Kalau bilah tabnya ikut memudar, perpindahan terasa terputus — padahal tab
   justru harus terasa sebagai titik yang diam. Kepala halaman dan bilah tab
   dibiarkan tetap; hanya isi di bawahnya yang bergerak. */
#page-regulasi.active,
#page-tatib.active {
  animation: none;
}

/* Animasinya sengaja TIDAK ditulis di sini. Aturan CSS hanya dijalankan sekali
   per elemen — membuka halaman yang sama lagi tidak mengulanginya. Karena itu
   animasi dipasang langsung dari JavaScript setiap perpindahan; lihat
   mulaiUlangAnimasiMasuk(). */

/* Melebur dari buram ke tajam, bukan sekadar memudar. Ini bahasa gerak yang
   sama dengan panel kaca di seluruh situs, dan buramnya sekaligus menyamarkan
   isi yang masih menata diri di frame-frame awal. */
/* Dulu blok ini ikut menganimasikan `filter: blur(10px)`. Efeknya bagus dilihat,
   tapi blur memaksa browser menggambar ulang SELURUH halaman di setiap frame —
   properti termahal yang bisa dianimasikan, dijalankan pada aksi yang paling
   sering dilakukan. Di ponsel kelas menengah frame-nya jatuh.

   Sekarang hanya opacity dan transform, keduanya dikerjakan kartu grafis. */
@keyframes pageFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ============================================
   HOME — Hero
   ============================================ */
.hero {
  position: relative;
  min-height: calc(100vh - var(--navbar-height));
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: var(--space-3xl) 0;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* Parallax Geometry */
.parallax-geometry {
  position: absolute;
  inset: 0;
  z-index: 1; 
  pointer-events: none;
  overflow: hidden;
}

.p-shape {
  position: absolute;
  opacity: 0.15;
  transition: translate 0.1s ease-out;
}

.p-circle {
  width: 450px;
  height: 450px;
  border-radius: 50%;
  border: 4px solid var(--gold);
}

.p-circle-small {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: var(--red-bright);
}

.p-square {
  width: 250px;
  height: 250px;
  background-color: var(--gold);
  rotate: 45deg;
}

.p-square-outline {
  width: 350px;
  height: 350px;
  border: 4px solid var(--red-bright);
  rotate: 15deg;
}

.p-triangle {
  width: 0;
  height: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-bottom: 260px solid var(--gold);
  opacity: 0.1;
  rotate: -20deg;
}

.p-dots {
  width: 400px;
  height: 400px;
  background-image: radial-gradient(var(--text-muted) 3px, transparent 3px);
  background-size: 30px 30px;
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  animation: orbFloat 12s ease-in-out infinite;
}

.hero-orb--red {
  width: 420px;
  height: 420px;
  background: var(--red);
  top: 10%;
  left: 15%;
  animation-delay: 0s;
}

.hero-orb--gold {
  width: 350px;
  height: 350px;
  background: var(--gold);
  bottom: 15%;
  right: 10%;
  animation-delay: -4s;
}

.hero-orb--dark {
  width: 500px;
  height: 500px;
  background: var(--bg-primary);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(60px);
  opacity: 0.7;
}

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(25px, -30px) scale(1.05); }
  66% { transform: translate(-15px, 20px) scale(0.95); }
}

/* Diagonal decoration inspired by logo */
.hero-decoration {
  position: absolute;
  right: -5%;
  top: 10%;
  width: 45%;
  height: 80%;
  z-index: 0;
  opacity: 0.04;
  background: linear-gradient(135deg, var(--red) 50%, transparent 50%);
  clip-path: polygon(30% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  width: 100%;
}

.hero-logo {
  width: 90px;
  height: auto;
  margin-bottom: var(--space-xl);
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.4));
  animation: fadeSlideUp 400ms cubic-bezier(0.23, 1, 0.32, 1) 60ms both;
  transition: transform var(--transition-base), filter var(--transition-base);
}

.hero-logo:hover {
  transform: scale(1.1) rotate(3deg);
  filter: drop-shadow(0 12px 24px rgba(255,193,7,0.4));
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.4rem 1rem;
  background: var(--red-surface);
  border: 1px solid rgba(201, 42, 42, 0.2);
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--red-bright);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-xl);
  animation: fadeSlideUp 400ms cubic-bezier(0.23, 1, 0.32, 1) 120ms both;
}

.hero-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--red);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

.hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.75rem, 7vw, 5rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-lg);
  max-width: 700px;
  animation: fadeSlideUp 400ms cubic-bezier(0.23, 1, 0.32, 1) 180ms both;
}

.rolling-text-wrapper {
  display: inline-block;
  vertical-align: bottom;
  overflow: hidden;
  height: 1.05em; /* Match line-height */
}

.rolling-text {
  display: flex;
  flex-direction: column;
  animation: rollUp 10s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}

.r-item {
  height: 1.05em;
  line-height: 1.05;
  display: flex;
  align-items: center;
}

@keyframes rollUp {
  0%, 15% { transform: translateY(0); }
  25%, 40% { transform: translateY(-20%); } /* -1/5 because there are 5 items */
  50%, 65% { transform: translateY(-40%); }
  75%, 90% { transform: translateY(-60%); }
  100% { transform: translateY(-80%); } /* Last item matches first item */
}

.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--text-secondary);
  max-width: 520px;
  line-height: 1.7;
  margin-bottom: var(--space-2xl);
  animation: fadeSlideUp 400ms cubic-bezier(0.23, 1, 0.32, 1) 240ms both;
}

.hero-cta {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  animation: fadeSlideUp 400ms cubic-bezier(0.23, 1, 0.32, 1) 300ms both;
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.75rem 1.75rem;
  font-size: 0.925rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: var(--transition-base);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--red), var(--red-muted));
  color: white;
  box-shadow: 0 4px 16px var(--red-glow);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px var(--red-glow), var(--shadow-glow-red);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border-hover);
  color: var(--text-primary);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--gold-muted);
  color: var(--gold);
  transform: translateY(-2px);
}

/* ============================================
   HOME — Stats
   ============================================ */
.stats-section {
  padding: var(--space-4xl) 0;
  position: relative;
}

.stats-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-border-hover), transparent);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.stat-card {
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: var(--glass-blur);
  transition: var(--transition-base);
}

.stat-card:hover {
  transform: translateY(-4px);
  border-color: var(--glass-border-hover);
  box-shadow: var(--shadow-card);
}

.stat-number {
  font-family: var(--font-heading);
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: var(--space-sm);
}

.stat-number.red { color: var(--red-bright); }
.stat-number.gold { color: var(--gold); }
.stat-number.green { color: var(--status-done); }
.stat-number.white { color: var(--text-primary); }

.stat-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ============================================
   HOME — Quick Access
   ============================================ */
.quick-access {
  padding: var(--space-4xl) 0;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

.quick-card {
  position: relative;
  padding: var(--space-2xl);
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: var(--glass-blur);
  transition: var(--transition-base);
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  display: block;
}

.quick-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--red), var(--gold));
  opacity: 0;
  transition: var(--transition-base);
}

.quick-card:hover {
  transform: translateY(-6px);
  border-color: var(--glass-border-hover);
  box-shadow: var(--shadow-elevated);
  background: var(--bg-card-hover);
}

.quick-card:hover::before {
  opacity: 1;
}

.quick-icon {
  font-size: 2rem;
  margin-bottom: var(--space-lg);
  display: block;
}

.quick-card h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.quick-card p {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-lg);
}

.quick-arrow {
  font-size: 1.1rem;
  color: var(--text-muted);
  transition: var(--transition-base);
}

.quick-card:hover .quick-arrow {
  color: var(--gold);
  transform: translateX(4px);
}

/* ============================================
   HOME — Recent Updates
   ============================================ */
.recent-updates {
  padding: var(--space-4xl) 0;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.updates-feed {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 700px;
  margin: 0 auto;
}

.update-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--glass-border);
  position: relative;
}

.update-item:last-child {
  border-bottom: none;
}

.update-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
  position: relative;
}

.update-dot::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: calc(100% + var(--space-lg));
  background: var(--glass-border);
}

.update-item:last-child .update-dot::before {
  display: none;
}

.update-dot.red { background: var(--red); }
.update-dot.gold { background: var(--gold); }
.update-dot.green { background: var(--status-done); }

.update-content {
  flex: 1;
}

.update-content strong {
  font-weight: 600;
}

.update-content p {
  font-size: 0.925rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.update-time {
  font-size: 0.775rem;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ============================================
   ASPIRASI
   ============================================ */
.aspirasi-header {
  padding: var(--space-3xl) 0 var(--space-2xl);
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.aspirasi-header h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.aspirasi-header > p {
  color: var(--text-secondary);
  margin-bottom: var(--space-2xl);
}

.aspirasi-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
  max-width: 1000px;
  margin: 0 auto;
}

.summary-card {
  padding: var(--space-lg);
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  text-align: center;
}

.summary-number {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: var(--space-xs);
}

.summary-label {
  font-size: 0.775rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}

/* Controls */
.aspirasi-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  max-width: var(--container-max);
  margin: 0 auto var(--space-2xl);
  padding: 0 var(--container-padding);
}

.aspirasi-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--container-padding);
}

.filter-group {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.filter-btn {
  padding: 0.45rem 1rem;
  font-size: 0.825rem;
  font-weight: 500;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  transition: var(--transition-fast);
}

.filter-btn:hover {
  color: var(--text-primary);
  border-color: var(--glass-border-hover);
}

.filter-btn.active {
  background: var(--gold-surface);
  color: var(--gold);
  border-color: var(--gold-muted);
}

.search-group {
  position: relative;
}

.search-input {
  padding: 0.5rem 1rem 0.5rem 2.25rem;
  font-size: 0.875rem;
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  width: 240px;
  transition: var(--transition-base);
}

.search-input::placeholder {
  color: var(--text-muted);
}

.search-input:focus {
  border-color: var(--gold-muted);
  box-shadow: 0 0 0 3px var(--gold-glow);
  width: 280px;
}

.search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  color: var(--text-muted);
  pointer-events: none;
}

/* Aspirasi Summary (Student View) */
.aspirasi-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.summary-card {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
  transition: transform var(--transition-fast);
}

.summary-card:hover {
  transform: translateY(-4px);
  border-color: var(--glass-border-hover);
}

.summary-number {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: var(--space-xs);
}

.summary-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

@media (max-width: 768px) {
  /* No need to force 2 columns since auto-fit handles it, but we can keep gap adjustment if needed */
}

/* Aspirasi Grid */
.aspirasi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--space-lg);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding) var(--space-4xl);
}

.aspirasi-card {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  transition: var(--transition-base);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.aspirasi-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  transition: var(--transition-base);
}

.aspirasi-card[data-status="selesai"]::after { background: var(--status-done); }
.aspirasi-card[data-status="proses"]::after { background: var(--status-progress); }
.aspirasi-card[data-status="menunggu"]::after { background: var(--status-waiting); }
.aspirasi-card[data-status="ditolak"]::after { background: var(--status-rejected); }

.aspirasi-card:hover {
  transform: translateY(-4px);
  border-color: var(--glass-border-hover);
  box-shadow: var(--shadow-card);
}

.aspirasi-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.aspirasi-category {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.775rem;
  color: var(--text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.aspirasi-status {
  padding: 0.2rem 0.65rem;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.aspirasi-status[data-status="selesai"] {
  background: var(--status-done-bg);
  color: var(--status-done);
}
.aspirasi-status[data-status="proses"] {
  background: var(--status-progress-bg);
  color: var(--status-progress);
}
.aspirasi-status[data-status="menunggu"] {
  background: var(--status-waiting-bg);
  color: var(--status-waiting);
}
.aspirasi-status[data-status="ditolak"] {
  background: var(--status-rejected-bg);
  color: var(--status-rejected);
}

.aspirasi-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: var(--space-sm);
  line-height: 1.35;
}

.aspirasi-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-md);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.aspirasi-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.775rem;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}

.aspirasi-support {
  display: flex;
  align-items: center;
  gap: 4px;
}

.aspirasi-progress {
  height: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--space-sm);
}

.progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 1s ease;
}

.progress-fill.done { background: var(--status-done); }
.progress-fill.progress { background: var(--status-progress); }
.progress-fill.waiting { background: var(--status-waiting); }
.progress-fill.rejected { background: var(--status-rejected); }

.aspirasi-expand-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  padding-top: var(--space-sm);
  opacity: 0;
  transition: var(--transition-fast);
}

.aspirasi-card:hover .aspirasi-expand-hint {
  opacity: 1;
}

/* No results */
.no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-4xl) var(--space-lg);
  color: var(--text-muted);
}

.no-results-icon {
  font-size: 3rem;
  margin-bottom: var(--space-md);
  opacity: 0.5;
}

/* ============================================
   KEGIATAN
   ============================================ */
.kegiatan-header {
  padding: var(--space-3xl) 0 var(--space-2xl);
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.kegiatan-header h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.kegiatan-header > p {
  color: var(--text-secondary);
}

.kegiatan-highlight {
  max-width: var(--container-max);
  margin: 0 auto var(--space-2xl);
  padding: 0 var(--container-padding);
}

.highlight-card {
  background: linear-gradient(135deg, rgba(201, 42, 42, 0.12), rgba(212, 165, 32, 0.08));
  border: 1px solid rgba(201, 42, 42, 0.2);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl) var(--space-3xl);
  position: relative;
  overflow: hidden;
}

.highlight-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, var(--red-glow), transparent);
  pointer-events: none;
}

.highlight-badge {
  display: inline-flex;
  padding: 0.3rem 0.8rem;
  background: var(--red-surface);
  border: 1px solid rgba(201, 42, 42, 0.3);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--red-bright);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-md);
  position: relative;
  z-index: 1;
}

.highlight-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--red-bright);
  border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
  margin-right: var(--space-sm);
}

.highlight-card h3 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: var(--space-sm);
  position: relative;
  z-index: 1;
}

.highlight-card .highlight-meta {
  display: flex;
  gap: var(--space-xl);
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin-bottom: var(--space-md);
  position: relative;
  z-index: 1;
}

.highlight-card .highlight-meta span {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.highlight-card .highlight-desc {
  color: var(--text-secondary);
  font-size: 0.925rem;
  line-height: 1.7;
  position: relative;
  z-index: 1;
  max-width: 600px;
}

/* Kegiatan Grid */
.kegiatan-section-title {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  margin-bottom: var(--space-lg);
}

.kegiatan-section-title h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.kegiatan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--space-lg);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding) var(--space-4xl);
}

.kegiatan-card {
  display: flex;
  gap: var(--space-lg);
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  transition: var(--transition-base);
}

.kegiatan-card:hover {
  transform: translateY(-3px);
  border-color: var(--glass-border-hover);
  box-shadow: var(--shadow-card);
}

.kegiatan-card-date {
  flex-shrink: 0;
  text-align: center;
  min-width: 52px;
}

.kegiatan-card-date .day {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  color: var(--gold);
}

.kegiatan-card-date .month {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.kegiatan-card-content {
  flex: 1;
  min-width: 0;
}

.kegiatan-tag {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  background: var(--gold-surface);
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-sm);
}

.kegiatan-card-content h3 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: var(--space-xs);
  line-height: 1.3;
}

.kegiatan-card-content > p {
  font-size: 0.825rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-sm);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kegiatan-meta {
  display: flex;
  gap: var(--space-md);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.kegiatan-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.kegiatan-card-status {
  padding: 0.2rem 0.5rem;
  font-size: 0.65rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  align-self: flex-start;
  flex-shrink: 0;
}

.kegiatan-card-status.mendatang {
  background: var(--status-progress-bg);
  color: var(--status-progress);
}
.kegiatan-card-status.berlangsung {
  background: var(--status-done-bg);
  color: var(--status-done);
}
.kegiatan-card-status.selesai {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
}

/* ============================================
   TATA TERTIB
   ============================================ */
.tatib-header {
  padding: var(--space-3xl) 0 var(--space-xl);
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.tatib-header h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.tatib-header > p {
  color: var(--text-secondary);
  margin-bottom: var(--space-xl);
}

.tatib-search {
  max-width: var(--container-max);
  margin: 0 auto var(--space-xl);
  padding: 0 var(--container-padding);
}

.tatib-search-input {
  width: 100%;
  max-width: 480px;
  padding: 0.75rem 1.25rem 0.75rem 2.5rem;
  font-size: 0.925rem;
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  transition: var(--transition-base);
}

.tatib-search-input::placeholder {
  color: var(--text-muted);
}

.tatib-search-input:focus {
  border-color: var(--gold-muted);
  box-shadow: 0 0 0 3px var(--gold-glow);
}

.tatib-search-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 480px;
}

.tatib-search-wrapper .search-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}

.tatib-tabs {
  display: flex;
  gap: var(--space-xs);
  max-width: var(--container-max);
  margin: 0 auto var(--space-2xl);
  padding: 0 var(--container-padding);
  overflow-x: auto;
  scrollbar-width: none;
}

.tatib-tabs::-webkit-scrollbar { display: none; }

.tatib-tab {
  padding: 0.5rem 1.15rem;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  white-space: nowrap;
  transition: var(--transition-fast);
}

.tatib-tab:hover {
  color: var(--text-primary);
  border-color: var(--glass-border-hover);
}

.tatib-tab.active {
  background: var(--gold-surface);
  color: var(--gold);
  border-color: var(--gold-muted);
}

.tatib-content {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.tatib-category {
  display: none;
}

.tatib-category.active {
  display: block;
  animation: pageFadeIn 0.3s ease;
}

.tatib-rule {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  align-items: flex-start;
  transition: var(--transition-fast);
  cursor: pointer;
}

.tatib-rule:hover {
  border-color: var(--glass-border-hover);
  background: var(--bg-card-hover);
}

.rule-severity {
  flex-shrink: 0;
  padding: 0.2rem 0.6rem;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

.rule-severity.ringan {
  background: var(--status-done-bg);
  color: var(--status-done);
}
.rule-severity.sedang {
  background: var(--status-progress-bg);
  color: var(--status-progress);
}
.rule-severity.berat {
  background: var(--status-waiting-bg);
  color: var(--status-waiting);
}
.rule-severity.ketentuan {
  background: var(--status-rejected-bg);
  color: var(--text-secondary);
}

.rule-content h4 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.rule-content p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rule-points {
  margin-top: var(--space-sm);
  font-size: 0.775rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* FAQ */
.tatib-faq {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-3xl) var(--container-padding) var(--space-4xl);
}

.tatib-faq > h3 {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: var(--space-xl);
  color: var(--text-primary);
}

.faq-item {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
  overflow: hidden;
  transition: var(--transition-fast);
}

.faq-item.open {
  border-color: var(--glass-border-hover);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1.75rem 2.5rem;
  font-size: 1.15rem;
  font-weight: 600;
  text-align: left;
  color: var(--text-primary);
  background: var(--bg-card);
  cursor: pointer;
  transition: var(--transition-fast);
}

.faq-question:hover {
  background: var(--bg-card-hover);
}

.faq-toggle {
  font-size: 1.75rem;
  color: var(--text-muted);
  transition: var(--transition-base);
  flex-shrink: 0;
  margin-left: var(--space-md);
}

.faq-item.open .faq-toggle {
  transform: rotate(45deg);
  color: var(--gold);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}

.faq-item.open .faq-answer {
  max-height: 500px; /* Increased max-height in case text is long */
}

/* Jarak atas dibuat sedikit lebih longgar dari nol supaya jawaban tidak menempel ke
   pertanyaannya. Padding kiri-kanannya harus sama persis dengan .faq-question, kalau
   berbeda teks jawaban akan terlihat meleset dari judulnya. */
.faq-answer-inner {
  padding: 0.85rem 2.5rem 1.9rem;
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.75;
}

/* Layar kecil: padding samping 2,5rem menyisakan ruang teks yang terlalu sempit.
   Pertanyaan dan jawaban diturunkan bersama-sama supaya tetap sejajar. */
@media (max-width: 600px) {
  .faq-question {
    padding: 1.35rem 1.5rem;
    font-size: 1.05rem;
  }

  .faq-answer-inner {
    padding: 0.7rem 1.5rem 1.5rem;
    font-size: 0.98rem;
  }
}

/* ============================================
   MULTIMEDIA
   ============================================ */
.multimedia-header {
  padding: var(--space-3xl) 0 var(--space-xl);
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.multimedia-header h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.multimedia-header > p {
  color: var(--text-secondary);
}

.multimedia-filters {
  display: flex;
  gap: var(--space-xs);
  max-width: var(--container-max);
  margin: 0 auto var(--space-2xl);
  padding: 0 var(--container-padding);
}

.media-filter {
  padding: 0.45rem 1rem;
  font-size: 0.825rem;
  font-weight: 500;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  transition: var(--transition-fast);
}

.media-filter:hover {
  color: var(--text-primary);
  border-color: var(--glass-border-hover);
}

.media-filter.active {
  background: var(--gold-surface);
  color: var(--gold);
  border-color: var(--gold-muted);
}

.multimedia-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding) var(--space-4xl);
}

.media-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 4/3;
  background: var(--bg-tertiary);
  transition: var(--transition-base);
}

.media-card:nth-child(3n+1) { aspect-ratio: 4/3; }
.media-card:nth-child(3n+2) { aspect-ratio: 1/1; }
.media-card:nth-child(3n+3) { aspect-ratio: 3/4; }

.media-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-slow);
}

/* Gradient placeholders for demo */
.media-card .media-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
}

.media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7, 7, 11, 0.9) 0%, transparent 50%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-lg);
  opacity: 0;
  transition: var(--transition-base);
}

.media-card:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-elevated);
}

.media-card:hover .media-overlay {
  opacity: 1;
}

.media-card:hover .media-thumbnail,
.media-card:hover .media-placeholder {
  transform: scale(1.05);
}

.media-type-badge {
  align-self: flex-start;
  padding: 0.15rem 0.5rem;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  background: var(--red);
  color: white;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

.media-overlay h4 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.media-meta {
  font-size: 0.725rem;
  color: var(--text-secondary);
}

/* Lightbox */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: var(--glass-blur-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-slow);
}

.lightbox-overlay.open {
  opacity: 1;
  visibility: visible;
}

.lightbox-content {
  max-width: 85vw;
  max-height: 85vh;
  position: relative;
  text-align: center;
}

.lightbox-media {
  max-width: 100%;
  max-height: 75vh;
  border-radius: var(--radius-md);
}

.lightbox-caption {
  margin-top: var(--space-md);
  font-size: 0.925rem;
  color: var(--text-secondary);
}

.lightbox-close {
  position: fixed;
  top: var(--space-xl);
  right: var(--space-xl);
  font-size: 1.75rem;
  color: var(--text-secondary);
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
  z-index: 2001;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

/* ============================================
   ABOUT
   ============================================ */
.about-header {
  padding: var(--space-3xl) 0 var(--space-2xl);
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  text-align: center;
}

.about-header h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.about-header > p {
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
}

/* Visi Misi */
.about-visimisi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  max-width: var(--container-max);
  margin: 0 auto var(--space-4xl);
  padding: 0 var(--container-padding);
}

.visi-card, .misi-card {
  padding: var(--space-2xl);
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
}

.visi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--red), var(--red-muted));
}

.misi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-muted));
}

.vm-label {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-lg);
}

.visi-card .vm-label { color: var(--red-bright); }
.misi-card .vm-label { color: var(--gold); }

.visi-card p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.misi-card ol {
  list-style: none;
  counter-reset: misi;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.misi-card ol li {
  counter-increment: misi;
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.misi-card ol li::before {
  content: counter(misi);
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold-surface);
  color: var(--gold);
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
  margin-top: 2px;
}

/* Roles */
.about-roles {
  max-width: var(--container-max);
  margin: 0 auto var(--space-4xl);
  padding: 0 var(--container-padding);
}

.roles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}

.role-card {
  padding: var(--space-2xl);
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  transition: var(--transition-base);
}

.role-card:hover {
  border-color: var(--glass-border-hover);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}

.role-icon {
  font-size: 2.25rem;
  margin-bottom: var(--space-lg);
}

.role-card h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.role-card > p {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-lg);
}

.role-card ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.role-card ul li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Penanda butir. Digambar sebagai bentuk, bukan karakter panah — karakter panah
   rupanya ikut berubah menurut huruf yang tersedia di perangkat, dan pada sebagian
   perangkat ia tampil lebih tebal atau lebih tinggi daripada teksnya. */
.role-card ul li::before {
  content: '';
  flex-shrink: 0;
  width: 0.42rem;
  height: 0.42rem;
  margin-top: 0.5em;
  border-radius: 1px;
  transform: rotate(45deg);
  background: var(--gold);
}

/* Members */
.about-structure {
  max-width: var(--container-max);
  margin: 0 auto var(--space-4xl);
  padding: 0 var(--container-padding);
}

.structure-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-lg);
}

.member-card {
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  transition: var(--transition-base);
}

.member-card:hover {
  transform: translateY(-4px);
  border-color: var(--glass-border-hover);
  box-shadow: var(--shadow-card);
}

.member-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin: 0 auto var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
}

.member-card h4 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 2px;
}

.member-position {
  font-size: 0.775rem;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 2px;
}

.member-class {
  font-size: 0.725rem;
  color: var(--text-muted);
}

/* Timeline */
.about-timeline {
  max-width: var(--container-max);
  margin: 0 auto var(--space-4xl);
  padding: 0 var(--container-padding);
}

.timeline {
  position: relative;
  max-width: 650px;
  margin: 0 auto;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--red), var(--gold), var(--glass-border));
}

.timeline-item {
  position: relative;
  padding-left: 56px;
  padding-bottom: var(--space-2xl);
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-marker {
  position: absolute;
  left: 12px;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 3px solid var(--red);
}

.timeline-item:nth-child(even) .timeline-marker {
  border-color: var(--gold);
}

.timeline-year {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-xs);
}

.timeline-item h4 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.timeline-item p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Contact */
.about-contact {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding) var(--space-4xl);
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.contact-card {
  text-align: center;
  padding: var(--space-2xl);
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  transition: var(--transition-base);
}

.contact-card:hover {
  border-color: var(--glass-border-hover);
  transform: translateY(-3px);
}

.contact-icon {
  font-size: 1.75rem;
  margin-bottom: var(--space-md);
}

.contact-card h4 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: var(--space-xs);
}

.contact-card p {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* ============================================
   MODAL
   ============================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: var(--glass-blur);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-slow);
  padding: var(--space-xl);
}

.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background: var(--bg-elevated);
  border: 1px solid var(--glass-border-hover);
  border-radius: var(--radius-xl);
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  transform: translateY(20px) scale(0.97);
  transition: var(--transition-slow);
}

.modal-overlay.open .modal-content {
  transform: translateY(0) scale(1);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-xl) var(--space-xl) var(--space-md);
  border-bottom: 1px solid var(--glass-border);
}

.modal-header h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
}

.modal-close {
  font-size: 1.5rem;
  color: var(--text-muted);
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.modal-body {
  padding: var(--space-xl);
}

.modal-status-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.modal-category {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.modal-desc {
  font-size: 0.925rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-xl);
}

.modal-section-title {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: var(--space-lg);
}

.modal-timeline {
  position: relative;
  padding-left: 24px;
}

.modal-timeline::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: linear-gradient(to bottom, var(--gold), var(--glass-border));
}

.modal-timeline-item {
  position: relative;
  padding-bottom: var(--space-lg);
  padding-left: var(--space-md);
}

.modal-timeline-item:last-child {
  padding-bottom: 0;
}

.modal-timeline-item::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--bg-elevated);
}

.modal-timeline-item:first-child::before {
  background: var(--red);
}

.modal-timeline-date {
  font-size: 0.725rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 2px;
}

.modal-timeline-text {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.modal-footer {
  padding: var(--space-md) var(--space-xl) var(--space-xl);
  display: flex;
  justify-content: flex-end;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--glass-border);
  padding: var(--space-3xl) 0 var(--space-xl);
  position: relative;
  z-index: 1;
}

.footer-content {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-3xl);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  margin-bottom: var(--space-2xl);
}

.footer-brand .navbar-logo {
  margin-bottom: var(--space-md);
  font-size: 1.5rem;
}

.footer-brand p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 320px;
}

.footer-links h4, .footer-social h4 {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}

.footer-links ul, .footer-social ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer-links ul li a, .footer-social ul li a {
  font-size: 0.875rem;
  color: var(--text-muted);
  transition: var(--transition-fast);
}

.footer-links ul li a:hover, .footer-social ul li a:hover {
  color: var(--gold);
}

.footer-bottom {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-lg) var(--container-padding) 0;
  border-top: 1px solid var(--glass-border);
}

.footer-bottom p {
  font-size: 0.775rem;
  color: var(--text-muted);
  text-align: center;
}

/* ============================================
   ANIMATIONS — Scroll Reveal
   ============================================ */
/* Dulu 600ms dengan kurva bawaan dan geseran 30px. Terlalu jauh dan terlalu
   lama: isi halaman terasa menyeret menyusul guliran, bukan menyambutnya. */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 320ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 320ms cubic-bezier(0.23, 1, 0.32, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 50ms; }
.reveal-delay-2 { transition-delay: 100ms; }
.reveal-delay-3 { transition-delay: 300ms; }
.reveal-delay-4 { transition-delay: 400ms; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .quick-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .multimedia-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .contact-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-content {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  :root {
    --container-padding: 1rem;
  }

  .navbar-links {
    display: none;
  }

  .navbar-hamburger {
    display: flex;
  }

  .hero-title {
    font-size: clamp(2rem, 8vw, 3.5rem);
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  .stat-number {
    font-size: 2rem;
  }

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

  .aspirasi-summary {
    grid-template-columns: repeat(2, 1fr);
  }

  .aspirasi-controls {
    flex-direction: column;
    align-items: flex-start;
  }

  .search-input {
    width: 100%;
  }

  .search-input:focus {
    width: 100%;
  }

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

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

  .highlight-card {
    padding: var(--space-xl);
  }

  .multimedia-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-visimisi {
    grid-template-columns: 1fr;
  }

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

  .structure-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .footer-content {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .modal-content {
    max-height: 90vh;
  }

  .filter-group {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
    padding-bottom: var(--space-sm);
  }

  .filter-group::-webkit-scrollbar { display: none; }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Auto-fit handles aspirasi-summary columns */

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

  .media-card {
    aspect-ratio: 16/10 !important;
  }

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

/* ============================================
   SUDUT ASPIRASI FORM
   ============================================ */
.sudut-header {
  padding: var(--space-3xl) 0 var(--space-xl);
  max-width: var(--container-max);
  margin: 0 auto;
  text-align: center;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.sudut-header h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.sudut-header p {
  color: var(--text-secondary);
}

.sudut-form-container {
  max-width: 700px;
  margin: 0 auto var(--space-4xl);
  padding: 0 var(--container-padding);
}

.aspirasi-form {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  backdrop-filter: var(--glass-blur);
}

.form-group {
  margin-bottom: var(--space-lg);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.aspirasi-form label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.aspirasi-form input,
.aspirasi-form select,
.aspirasi-form textarea {
  width: 100%;
  padding: 0.85rem 1.15rem;
  font-size: 0.95rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  transition: var(--transition-fast);
  font-family: inherit;
}

.aspirasi-form input:focus,
.aspirasi-form select:focus,
.aspirasi-form textarea:focus {
  border-color: var(--gold-muted);
  box-shadow: 0 0 0 3px var(--gold-glow);
  outline: none;
}

.aspirasi-form select option {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.w-100 {
  width: 100%;
  justify-content: center;
}

.form-success-msg {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--status-done-bg);
  border: 1px solid var(--status-done);
  color: var(--status-done);
  border-radius: var(--radius-md);
  text-align: center;
  font-weight: 600;
  display: none;
}

.form-success-msg.show {
  display: block;
  animation: pageFadeIn 0.3s ease;
}

/* ============================================
   ORG CHART BUILDER
   ============================================ */
.org-chart-container {
  overflow-x: auto;
  padding: var(--space-xl) 0;
  min-height: 300px;
  background: var(--bg-card);
  border: 1px dashed var(--glass-border-hover);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
}

.org-tree {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  min-width: max-content;
  padding: 0 var(--space-xl);
}

.org-tree ul {
  padding-top: 20px;
  position: relative;
  display: flex;
  justify-content: center;
  list-style: none;
  padding-left: 0;
}

.org-tree li {
  text-align: center;
  position: relative;
  padding: 20px 10px 0 10px;
}

.org-tree li::before, .org-tree li::after {
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 2px solid var(--glass-border-hover);
  width: 50%;
  height: 20px;
}

.org-tree li::after {
  right: auto;
  left: 50%;
  border-left: 2px solid var(--glass-border-hover);
}

.org-tree li:only-child::after, .org-tree li:only-child::before {
  display: none;
}

.org-tree li:only-child {
  padding-top: 0;
}

.org-tree li:first-child::before, .org-tree li:last-child::after {
  border: 0 none;
}

.org-tree li:last-child::before {
  border-right: 2px solid var(--glass-border-hover);
  border-radius: 0 4px 0 0;
}

.org-tree li:first-child::after {
  border-radius: 4px 0 0 0;
}

.org-tree ul ul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 2px solid var(--glass-border-hover);
  width: 0;
  height: 20px;
  margin-left: -1px;
}

.org-card {
  background: var(--bg-elevated);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  min-width: 150px;
  display: inline-block;
  position: relative;
  transition: var(--transition-fast);
}

.org-card:hover {
  border-color: var(--gold-muted);
  box-shadow: var(--shadow-card);
}

.org-card input {
  background: transparent;
  border: none;
  border-bottom: 1px dashed transparent;
  color: var(--text-primary);
  text-align: center;
  width: 100%;
  padding: 4px 2px;
  margin-bottom: 4px;
  font-family: inherit;
  border-radius: 0;
  transition: var(--transition-fast);
}

.org-card input.org-card-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--gold);
}

.org-card input.org-card-name {
  font-size: 0.85rem;
}

.org-card input:focus, .org-card input:hover {
  outline: none;
  border-bottom-color: var(--gold-muted);
  background: rgba(255,255,255,0.02);
}

.org-card-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  opacity: 0;
  transition: var(--transition-fast);
}

.org-card:hover .org-card-actions {
  opacity: 1;
}

.btn-icon {
  background: var(--bg-tertiary);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  border-radius: 4px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-icon:hover {
  color: white;
  border-color: var(--text-muted);
}

.btn-icon.delete:hover {
  color: var(--red-bright);
  border-color: var(--red-bright);
}

.org-empty {
  padding: var(--space-2xl);
  color: var(--text-muted);
  text-align: center;
}

@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* ============================================
   ADMIN PANEL
   ============================================ */
.admin-login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
}
.admin-login-box {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  padding: var(--space-2xl);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 400px;
  text-align: center;
  backdrop-filter: var(--glass-blur);
}
.admin-dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: var(--space-xl);
  max-width: var(--container-max);
  margin: var(--space-2xl) auto;
  padding: 0 var(--container-padding);
  min-height: 70vh;
}
.admin-sidebar {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 100px;
  align-self: start;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.admin-sidebar h3 {
  color: var(--gold);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--glass-border);
}
.admin-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-left: 0;
}
.admin-nav-item {
  color: var(--text-secondary);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
  display: block;
}
.admin-nav-item:hover, .admin-nav-item.active {
  background: var(--bg-elevated);
  color: var(--gold);
}
.admin-content {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  min-width: 0;
}
.admin-section {
  display: none;
}
.admin-section.active {
  display: block;
  animation: pageFadeIn 0.3s ease;
}
.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--glass-border);
}
.admin-table-wrapper {
  overflow-x: auto;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
}
.admin-table th, .admin-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--glass-border);
}
.admin-table th {
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.admin-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}
.admin-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-block;
}
.admin-badge.menunggu { background: var(--status-waiting-bg); color: var(--status-waiting); border: 1px solid var(--status-waiting); }
.admin-badge.diproses { background: var(--status-progress-bg); color: var(--status-progress); border: 1px solid var(--status-progress); }
.admin-badge.selesai { background: var(--status-done-bg); color: var(--status-done); border: 1px solid var(--status-done); }
.admin-actions {
  display: flex;
  gap: 8px;
}
@media (max-width: 768px) {
  .admin-dashboard {
    grid-template-columns: 1fr;
  }
  .admin-sidebar {
    position: static;
    max-height: none;
    overflow-y: visible;
    margin-bottom: var(--space-xl);
  }
  .admin-content {
    padding: var(--space-md);
  }
  .admin-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .admin-header > div {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
}

.about-logo {
  width: 70px;
  height: auto;
  margin-bottom: var(--space-lg);
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.4));
  transition: transform var(--transition-base), filter var(--transition-base);
}

.about-logo:hover {
  transform: scale(1.1) rotate(3deg);
  filter: drop-shadow(0 12px 24px rgba(255,193,7,0.4));
}

/* ============================================
   GLOBAL LOADER OVERLAY
   ============================================ */
.global-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(10, 10, 15, 0.85); /* Dark transparent */
  backdrop-filter: var(--glass-blur-sm);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.global-loader.active {
  opacity: 1;
  visibility: visible;
}
.loader-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(255, 62, 62, 0.2);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1.5rem;
}
.loader-text {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: 0.5px;
  animation: pulse 1.5s infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ============================================
   ASPIRASI SUPPORT BUTTON
   ============================================ */
.btn-supported {
  background: rgba(39, 174, 96, 0.15) !important; /* green glow */
  border-color: var(--green) !important;
  color: var(--green-bright) !important;
}
.btn-supported:hover {
  background: rgba(39, 174, 96, 0.25) !important;
}

/* ============================================
   TOAST NOTIFICATION
   ============================================ */
.toast-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.toast {
  background: var(--bg-tertiary);
  border-left: 4px solid var(--gold);
  color: var(--text-primary);
  padding: 1rem 1.5rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-elevated);
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 300px;
  border-top: 1px solid var(--glass-border);
  border-right: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);

  /* Dulu memakai keyframes. Keyframes selalu mulai dari nol dan tidak bisa
     dipotong di tengah: toast kedua yang muncul saat yang pertama sedang
     bergerak akan tersentak, bukan menyambung. Transisi bisa berbelok dari
     posisinya saat itu juga, dan toast justru elemen yang paling sering
     bertumpuk. */
  opacity: 0;
  transform: translateX(16px);
  transition:
    opacity 200ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* Dipasang satu frame setelah toast disisipkan; lihat showToast() di app.js. */
.toast.tampil {
  opacity: 1;
  transform: translateX(0);
}

/* Keluar lebih cepat daripada masuk: kemunculan perlu diperhatikan, kepergian
   tidak. Menahan pengguna menonton sesuatu pergi adalah waktu yang terbuang. */
.toast.hiding {
  opacity: 0;
  transform: translateX(16px);
  transition:
    opacity 150ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 150ms cubic-bezier(0.23, 1, 0.32, 1);
}

.toast-icon {
  font-size: 1.5rem;
}

.toast-content {
  flex: 1;
}

.toast-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.toast-message {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

@keyframes toastEnter {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toastLeave {
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

/* ==========================================
   ADMIN NOTIFICATION SYSTEM
   ========================================== */

/* Notification Bell */
.admin-notif-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--glass-border);
}

.admin-notif-bell {
  position: relative;
  cursor: pointer;
  background: var(--bg-secondary);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.admin-notif-bell:hover {
  background: var(--bg-tertiary);
  border-color: var(--glass-border-hover);
  transform: scale(1.05);
}

.admin-notif-bell:active {
  transform: scale(0.95);
}

/* Badge */
.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--red-bright);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: var(--font-body);
  min-width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: 0 0 8px rgba(224, 49, 49, 0.5);
  animation: notifPulse 2s ease-in-out infinite;
  pointer-events: none;
}

.notif-badge.hidden {
  display: none;
}

@keyframes notifPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(224, 49, 49, 0.5); }
  50% { box-shadow: 0 0 16px rgba(224, 49, 49, 0.8), 0 0 24px rgba(224, 49, 49, 0.3); }
}

/* Notification Dropdown */
.notif-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: -10px;
  width: 340px;
  max-width: 85vw;
  max-height: 420px;
  background: var(--bg-elevated);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
  z-index: 3000;
  overflow: hidden;

  /* visibility, bukan display: display tidak bisa ditransisikan, sehingga
     dropdown lama terpaksa memakai keyframes yang tidak bisa dipotong di
     tengah. Lonceng bisa diklik cepat berulang, jadi ia harus bisa berbalik
     arah dari posisinya saat itu juga. Pola yang sama dipakai menu akun. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.96);
  transition:
    opacity 190ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 220ms cubic-bezier(0.23, 1, 0.32, 1),
    visibility 0s linear 220ms;

  /* Tumbuh dari sudut kanan atas — dari arah lonceng yang ditekan. Sebelumnya
     tanpa titik tumbuh, sehingga ia membesar dari tengah dirinya sendiri dan
     terbaca seolah muncul dari tempat yang salah. Menu akun sudah memakai
     pendekatan yang sama; ini menyamakannya. */
  transform-origin: top right;
}

@media (max-width: 768px) {
  .notif-dropdown {
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: 90vw;
    max-width: 400px;
    transform: translate(-50%, -50%) scale(0.96);
  }

  .notif-dropdown.open {
    transform: translate(-50%, -50%) scale(1);
  }
}

.notif-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition:
    opacity 170ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 200ms cubic-bezier(0.23, 1, 0.32, 1),
    visibility 0s;
}

.notif-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--glass-border);
}

.notif-dropdown-header h4 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.notif-dropdown-header span {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.notif-dropdown-list {
  max-height: 320px;
  overflow-y: auto;
  padding: 0.5rem;
}

.notif-dropdown-list::-webkit-scrollbar {
  width: 4px;
}

.notif-dropdown-list::-webkit-scrollbar-track {
  background: transparent;
}

.notif-dropdown-list::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: var(--radius-full);
}

/* Individual notification item */
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 0.75rem;
  margin-bottom: 0.5rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
  border-left: 3px solid transparent;
}

.notif-item:last-child {
  margin-bottom: 0;
}

.notif-item:hover {
  background: var(--bg-card-hover);
}

.notif-item.unread {
  border-left-color: var(--gold);
  background: var(--gold-surface);
}

.notif-item.unread:hover {
  background: rgba(212, 165, 32, 0.12);
}

.notif-item-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.notif-item-content {
  flex: 1;
  min-width: 0;
}

.notif-item-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.notif-item-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.notif-item-category {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--gold);
  background: var(--gold-surface);
  padding: 1px 6px;
  border-radius: var(--radius-full);
  border: 1px solid var(--gold-glow);
  white-space: nowrap;
}

/* Empty state */
.notif-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--text-muted);
}

.notif-empty-icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  opacity: 0.5;
}

.notif-empty p {
  font-size: 0.85rem;
}

/* Footer with Mark All Read button */
.notif-dropdown-footer {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--glass-border);
  text-align: center;
}

.notif-mark-read {
  background: none;
  border: none;
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-full);
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.notif-mark-read:hover {
  background: var(--gold-surface);
}

/* Aspiration notification toast (special style for admin) */
.toast.toast-aspiration {
  border-left-color: var(--gold-bright);
}

.toast.toast-aspiration .toast-title {
  color: var(--gold-bright);
}

/* Responsive */
@media (max-width: 768px) {
  .notif-dropdown {
    width: 340px;
    max-width: 85vw;
    right: 0;
  }
}

/* ==========================================
   CUSTOM PROMPT MODAL
   ========================================== */
.custom-prompt-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: var(--glass-blur-sm);
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: promptFadeIn var(--transition-fast) forwards;
}

.custom-prompt-overlay.fade-out {
  animation: promptFadeOut var(--transition-fast) forwards;
}

.custom-prompt-modal {
  background: var(--bg-elevated);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  width: 90%;
  max-width: 420px;
  box-shadow: var(--shadow-elevated);
  animation: promptSlideUp var(--transition-base) forwards;
}

.custom-prompt-modal h3 {
  margin: 0 0 0.5rem 0;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--text-primary);
}

.custom-prompt-modal p {
  margin: 0 0 1.25rem 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.custom-prompt-input {
  width: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.custom-prompt-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 165, 32, 0.15);
}

.custom-prompt-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

.custom-prompt-actions .btn {
  padding: 0.5rem 1.25rem;
  font-size: 0.85rem;
}

@keyframes promptFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes promptFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes promptSlideUp {
  from { transform: translateY(20px) scale(0.95); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

/* ==========================================
   ADMIN ANALYTICS DASHBOARD
   ========================================== */
.admin-analytics-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.analytics-summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.analytics-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.analytics-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.stat-card {
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: transform var(--transition-fast);
}

.stat-card:hover {
  transform: translateY(-4px);
}

.stat-value {
  font-size: 2.5rem;
  font-weight: 700;
  font-family: var(--font-heading);
  line-height: 1.2;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.stat-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.chart-container {
  min-height: 300px;
}

.chart-container h4 {
  margin: 0 0 1rem 0;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--text-primary);
  text-align: center;
}

.canvas-wrapper {
  position: relative;
  flex: 1;
  width: 100%;
  height: 250px;
}

@media (max-width: 992px) {
  .analytics-charts-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   GLASSMORPHISM
   ------------------------------------------------------------
   Catatan penting soal kenapa efek ini sebelumnya tidak terlihat:
   backdrop-filter memburamkan APA YANG ADA DI BELAKANG elemen.
   Latar halaman sebelumnya warna solid rata (#07070b), dan
   memburamkan warna rata menghasilkan warna rata yang sama —
   efeknya berjalan, tapi tidak ada bedanya di mata.

   Karena itu bagian pertama di bawah menambahkan lapisan warna
   di belakang seluruh halaman. Itulah bahan yang selama ini hilang.
   ============================================================ */

:root {
  /* Tiga tingkat, tidak lebih. Sebelumnya ada 14 nilai blur berbeda yang ditulis
     langsung di masing-masing tempat, sehingga token ini praktis dilewati.

     kecil  — penanda dan tirai layar penuh. Tirai tidak butuh blur tebal, dan
              blur layar penuh adalah yang paling mahal.
     sedang — permukaan biasa: kartu, form, bilah tab.
     tebal  — lapisan mengambang: navbar, menu, dropdown. */
  --glass-blur-sm: blur(8px) saturate(140%);
  --glass-blur: blur(16px) saturate(160%);
  --glass-blur-strong: blur(28px) saturate(180%);
  --glass-shadow:
    0 8px 32px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --glass-shadow-hover:
    0 16px 48px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --glass-sheen: rgba(255, 255, 255, 0.11);

  /* Latar panel dibuat lebih tembus daripada nilai aslinya (0.55). Pada 0.55
     panel menelan hampir seluruh warna di belakangnya, sehingga kaca terlihat
     seperti kotak abu-abu biasa. Teks tetap terbaca karena latar di belakangnya
     memang gelap. */
  --bg-card: rgba(20, 22, 34, 0.40);
  --bg-card-hover: rgba(30, 33, 50, 0.56);
}

/* --- 1. Lapisan warna di belakang segalanya --------------------
   Dipasang fixed supaya diam saat halaman digulir: panel yang
   lewat di atasnya akan menangkap warna yang berbeda-beda. */

html {
  background: var(--bg-primary);
}

body {
  background: transparent;
}

/* Memakai ::after, BUKAN ::before. body::before sudah dipakai lapisan tekstur
   noise dengan opacity 0.025 — kalau ditumpuk di elemen semu yang sama, warna
   di bawah ini ikut teredam sampai hampir tak terlihat sekaligus menghapus
   teksturnya. */
body::after {
  content: '';
  position: fixed;
  /* Sedikit lebih besar dari layar supaya tepinya tidak terlihat saat bergeser
     pelan. Jangan terlalu besar: posisi warna di bawah dihitung terhadap kotak
     ini, jadi kalau kotaknya jauh lebih lebar dari layar, warnanya justru
     terdorong ke luar pandangan dan bagian tengah layar jadi kosong. */
  inset: -10%;
  z-index: -1;
  opacity: 1;
  pointer-events: none;
  background:
    radial-gradient(45% 45% at 22% 26%, rgba(201, 42, 42, 0.48), transparent 65%),
    radial-gradient(38% 38% at 78% 20%, rgba(212, 165, 32, 0.34), transparent 62%),
    radial-gradient(50% 50% at 72% 76%, rgba(201, 42, 42, 0.36), transparent 66%),
    radial-gradient(36% 36% at 26% 80%, rgba(212, 165, 32, 0.28), transparent 62%),
    /* Blob tengah supaya tidak ada area mati di sisi tengah layar, tempat
       sebagian besar kartu kebetulan berada. */
    radial-gradient(46% 46% at 50% 52%, rgba(201, 42, 42, 0.20), transparent 68%);
  filter: blur(30px);
  animation: glassAmbientDrift 40s ease-in-out infinite alternate;
}

@keyframes glassAmbientDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
  100% { transform: translate3d(-2%, 2.5%, 0) scale(1.02); }
}

/* --- 2. Permukaan kaca ----------------------------------------
   background-color dipisah dari background-image supaya kilau
   yang mengikuti kursor bisa ditumpuk tanpa perlu elemen semu,
   yang bisa bentrok dengan ::before/::after yang sudah dipakai. */

.aspirasi-card,
.kegiatan-card,
.member-card,
.media-card,
.quick-card,
.stat-card,
.summary-card,
.analytics-card,
.highlight-card,
.contact-card,
.role-card,
.org-card,
.visi-card,
.misi-card,
.faq-item,
.notif-item,
.update-item,
.admin-login-box,
.aspirasi-form,
/* .sudut-form-container sengaja TIDAK dimasukkan: dia adalah pembungkus
   .aspirasi-form. Kalau keduanya diberi permukaan kaca, hasilnya dua panel
   bertumpuk — dan karena pembungkusnya bersudut siku sementara formnya
   membulat, tepinya terlihat sebagai kotak mengganjal di belakang form. */
.modal-content,
.lightbox-content {
  background-color: var(--bg-card);
  /* Dua lapis: kilau yang mengikuti kursor di atas, dan pantulan tetap di
     sudut atas-kiri di bawahnya. Lapisan tetap itu yang membuat panel tetap
     terbaca sebagai kaca walau kursor sedang tidak di atasnya. */
  background-image:
    radial-gradient(
      circle 200px at var(--gx, -300px) var(--gy, -300px),
      var(--glass-sheen),
      transparent 70%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.025) 26%,
      transparent 52%
    );
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    background-color var(--transition-base),
    transform var(--transition-base);
}

.aspirasi-card:hover,
.kegiatan-card:hover,
.member-card:hover,
.media-card:hover,
.quick-card:hover,
.stat-card:hover,
.summary-card:hover,
.highlight-card:hover,
.contact-card:hover,
.role-card:hover,
.org-card:hover,
.faq-item:hover,
.notif-item:hover {
  background-color: var(--bg-card-hover);
  border-color: var(--glass-border-hover);
  box-shadow: var(--glass-shadow-hover);
  transform: translateY(-3px);
}

/* --- 3. Tombol dan tab ---------------------------------------- */

/* `.filter-btn` sengaja tidak ikut di sini maupun di aturan hover di bawahnya.
   Penyaring di Tata Tertib (`.tatib-tab`) polos — tanpa kilau, tanpa terangkat saat
   disentuh kursor. Selama penyaring lain punya efek itu, dua bilah yang tugasnya
   sama terlihat berbeda. Sekarang seluruh penyaring sama-sama diam. */
.btn-secondary,
.btn-outline,
.tab-btn,
.admin-nav-item {
  background-image:
    radial-gradient(
      circle 120px at var(--gx, -300px) var(--gy, -300px),
      var(--glass-sheen),
      transparent 70%
    ),
    linear-gradient(
      140deg,
      rgba(255, 255, 255, 0.07) 0%,
      transparent 55%
    );
  /* Tanpa backdrop-filter. Pada kontrol sekecil ini blurnya praktis tak terlihat,
     tapi tiap elemen ber-backdrop-filter memaksa browser membuat lapisan komposit
     tersendiri. Bayarannya penuh, hasilnya nol. Kilau dan garis tepinya sudah cukup
     membuatnya terbaca sebagai satu keluarga dengan panel kaca di sekitarnya. */
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast),
    transform var(--transition-fast);
}

.btn-secondary:hover,
.btn-outline:hover,
.tab-btn:hover,
.admin-nav-item:hover {
  border-color: var(--glass-border-hover);
  box-shadow: var(--glass-shadow);
  transform: translateY(-1px);
}

/* --- 4. Lapisan mengambang: blur lebih tebal ------------------- */

.navbar,
.mobile-menu,
.modal-overlay,
.lightbox-overlay,
.user-dropdown-menu {
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
}

/* --- 5. Penyesuaian perangkat ---------------------------------
   Blur itu mahal untuk HP. Di layar kecil kekuatannya diturunkan
   supaya guliran tetap mulus. */

@media (max-width: 768px) {
  :root {
    --glass-blur-sm: blur(5px) saturate(130%);
    --glass-blur: blur(10px) saturate(140%);
    --glass-blur-strong: blur(16px) saturate(150%);
  }
}

/* Hormati pengguna yang mematikan animasi di pengaturan perangkatnya. */
@media (prefers-reduced-motion: reduce) {
  body::after {
    animation: none;
  }
}

/* Browser lama tanpa dukungan backdrop-filter: pakai latar lebih pekat
   supaya teks tetap terbaca, bukan menu yang tembus pandang. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .aspirasi-card,
  .kegiatan-card,
  .member-card,
  .media-card,
  .quick-card,
  .stat-card,
  .summary-card,
  .analytics-card,
  .highlight-card,
  .contact-card,
  .role-card,
  .org-card,
  .faq-item,
  .notif-item,
  .update-item,
  .admin-login-box,
  .aspirasi-form,
  .modal-content,
  .navbar,
  .mobile-menu {
    background-color: rgba(13, 14, 20, 0.94);
  }
}

/* ============================================================
   NAVBAR MENGAMBANG + PENANDA TAB YANG MELELEH
   ------------------------------------------------------------
   Navbar dilepas dari tepi layar menjadi batang melayang, supaya
   lapisan warna latar terlihat di sela-selanya — di situlah efek
   kacanya baru benar-benar terbaca.

   Tab yang aktif ditandai satu pil yang BERPINDAH dan MELAR
   mengikuti lebar tab tujuan, bukan latar terpisah di tiap tab.
   Karena pil-nya cuma satu dan tidak pernah hilang, perpindahannya
   terbaca sebagai cairan yang mengalir, bukan lampu yang mati-nyala.
   ============================================================ */

.navbar {
  top: 12px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: calc(100% - 2rem);
  max-width: var(--container-max);
  border: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  /* Warna dan gambar dipisah supaya kilau kursor bisa ditumpuk di atas warna
     dasar tanpa saling menimpa — kalau memakai properti singkat 'background',
     salah satunya pasti terhapus. */
  background-color: rgba(16, 18, 27, 0.55);
  background-image:
    radial-gradient(circle 220px at var(--gx, -400px) var(--gy, -400px), rgba(255, 255, 255, 0.10), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 62%);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.navbar.scrolled {
  background-color: rgba(16, 18, 27, 0.72);
  border-color: var(--glass-border-hover);
  box-shadow:
    0 16px 50px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.navbar-container {
  padding: 0 1.1rem 0 1.4rem;
}

/* Batang tidak lagi menempel di atas, jadi isi halaman perlu ruang lebih. */
.main-content {
  padding-top: calc(var(--navbar-height) + 26px);
}

/* --- Pil penanda --- */

.navbar-links {
  position: relative;
}

.nav-pill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 2rem;
  width: var(--pill-w, 0px);
  border-radius: var(--radius-full);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background: linear-gradient(180deg, rgba(212, 165, 32, 0.24), rgba(212, 165, 32, 0.10));
  border: 1px solid rgba(212, 165, 32, 0.38);
  box-shadow:
    0 2px 14px rgba(212, 165, 32, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  transform:
    translateY(-50%)
    translateX(var(--pill-x, 0px))
    scaleX(var(--pill-sx, 1))
    scaleY(var(--pill-sy, 1));
  /* Sedikit melewati tujuan lalu kembali — itu yang memberi kesan lentur. */
  transition:
    transform 560ms cubic-bezier(0.34, 1.28, 0.52, 1),
    width 560ms cubic-bezier(0.34, 1.28, 0.52, 1),
    opacity 260ms ease,
    background 260ms ease,
    border-color 260ms ease,
    box-shadow 260ms ease;
}

.nav-pill.siap { opacity: 1; }

/* Dipasang sekejap saat berpindah: pil memipih dan memanjang ke arah
   gerakan, lalu kembali bulat. Inilah bagian yang terasa "meleleh". */
.nav-pill.mengalir {
  --pill-sy: 0.78;
  --pill-sx: 1.07;
}

/* --- Bayangan pil saat kursor lewat ---
   Mengikuti kursor dengan mekanisme yang sama seperti pil aktif, hanya
   lebih redup dan lebih gesit. Dibuat satu elemen yang berpindah, bukan
   latar terpisah di tiap tab, supaya sorotannya terasa mengalir mengejar
   kursor — bukan menyala-mati per kotak. */

.nav-hover {
  position: absolute;
  left: 0;
  top: 50%;
  height: 2rem;
  width: var(--hov-w, 0px);
  border-radius: var(--radius-full);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 20px rgba(255, 255, 255, 0.06);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  transform: translateY(-50%) translateX(var(--hov-x, 0px));
  /* Lebih cepat daripada pil aktif: sorotan harus terasa ringan dan
     menempel pada kursor, sementara penanda halaman bergerak lebih berbobot. */
  transition:
    transform 360ms cubic-bezier(0.34, 1.2, 0.5, 1),
    width 360ms cubic-bezier(0.34, 1.2, 0.5, 1),
    opacity 200ms ease;
}

.nav-hover.tampil { opacity: 1; }

/* Kalau yang disorot justru tab yang sedang aktif, pil-nya sendiri yang
   menyala — daripada menumpuk dua sorotan di tempat yang sama. */
.nav-pill.disorot {
  background: linear-gradient(180deg, rgba(212, 165, 32, 0.36), rgba(212, 165, 32, 0.17));
  border-color: rgba(212, 165, 32, 0.58);
  box-shadow:
    0 2px 22px rgba(212, 165, 32, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

/* Teks tab harus di atas pil, dan latar per-tab yang lama dilepas
   supaya tidak ada dua penanda yang bersaing. */
.nav-link {
  z-index: 1;
}

.nav-link:hover {
  background: transparent;
  color: var(--text-primary);
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.38);
}

.nav-link.active {
  background: transparent;
  color: var(--gold-bright);
}

.nav-link.active:hover {
  color: var(--gold-bright);
  text-shadow: 0 0 22px rgba(212, 165, 32, 0.75);
}

.nav-link.active::after {
  display: none;
}

@media (max-width: 768px) {
  .navbar {
    top: 8px;
    width: calc(100% - 1rem);
    border-radius: var(--radius-lg);
  }
  .main-content {
    padding-top: calc(var(--navbar-height) + 18px);
  }
  .nav-pill, .nav-hover { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-pill, .nav-hover { transition: opacity 200ms ease; }
}

/* ============================================================
   MENU LAYAR KECIL
   ------------------------------------------------------------
   Sebelumnya latarnya rgba(7,7,11,0.97) — nyaris pekat, sehingga
   blur di belakangnya tidak menghasilkan apa pun dan tautannya
   tampil sebagai teks polos. Di sini panelnya dibuat benar-benar
   tembus supaya warna latar menyembul, dan tiap tautan diberi
   permukaan kaca seperti kartu di halaman lain.
   ============================================================ */

.mobile-menu {
  background-color: rgba(10, 11, 17, 0.72);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 45%);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  padding: 4.75rem 1.1rem 2.5rem;
  gap: 0.55rem;

  /* Meluncur masuk dari kanan, searah dengan gerakan jari yang membukanya. */
  transform: translateX(100%);
  transition:
    transform 460ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 300ms ease,
    visibility 0s linear 460ms;
}

.mobile-menu.open {
  transform: translateX(0);
  transition:
    transform 460ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 240ms ease,
    visibility 0s;
}

/* Saat tertutup, panel berdiri di luar layar sebelah kanan. Tanpa ini,
   ruang kosong itu terhitung sebagai isi halaman dan memunculkan geseran
   mendatar yang mengganggu. 'clip' dipilih daripada 'hidden' karena tidak
   membuat halaman jadi wadah gulir baru. */
html {
  overflow-x: clip;
}

/* ============================================================
   STRUKTUR PENGURUS — 5 KOLOM
   ------------------------------------------------------------
   Sebelumnya jumlah kolom dibiarkan menyesuaikan sendiri
   (auto-fill), yang di layar lebar menghasilkan enam kolom
   sempit. Sekarang dipatok lima supaya tiap kartu lebih lapang,
   dengan foto dan nama yang ikut membesar.

   Tangga penurunannya ditulis lengkap sampai satu kolom karena
   aturan ini berada di akhir berkas: kalau hanya lima kolom yang
   ditulis, ia akan menimpa aturan layar kecil yang ada di atasnya.
   ============================================================ */

.structure-grid {
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1280px) {
  .structure-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1024px) {
  .structure-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {
  .structure-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 440px) {
  .structure-grid { grid-template-columns: 1fr; }
}

/* Ruang yang lebih lapang dimanfaatkan: foto dan teks ikut naik ukurannya,
   supaya kartunya terasa memang lebih besar — bukan sekadar lebih melar. */
@media (min-width: 721px) {
  .member-avatar {
    width: 84px;
    height: 84px;
    font-size: 1.9rem;
  }

  .member-card h4 {
    font-size: 1.05rem;
  }

  .member-position {
    font-size: 0.83rem;
  }

  .member-class {
    font-size: 0.78rem;
  }
}

/* ============================================================
   PUSAT REGULASI
   ============================================================ */

.regulasi-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

/* Keadaan kosong tidak perlu setinggi satu layar. Bawaannya memakai jarak
   terbesar, yang membuat halaman terasa panjang dan hampa. */
#regulasi-grid .no-results,
#legislasi-daftar .no-results {
  padding: clamp(2rem, 5vmin, 3rem) var(--space-lg);
}

.regulasi-bagian-sub {
  margin: -0.5rem 0 1.1rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 70ch;
}

/* --- Pantau Legislasi ---
   Bentuknya daftar mendatar, bukan petak seperti Aturan Organisasi. Rancangan
   yang sedang berjalan lebih enak dibaca berurutan ke bawah, dan bedanya bentuk
   juga menandai bahwa isinya belum berlaku. */

.legislasi-daftar {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.legislasi-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  border-radius: var(--radius-lg);
  cursor: pointer;
  background-color: var(--bg-card);
  background-image:
    radial-gradient(65% 65% at var(--gx, -300px) var(--gy, -300px), var(--glass-sheen), transparent 72%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, transparent 52%);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: border-color var(--transition-base), box-shadow var(--transition-base),
              background-color var(--transition-base), transform var(--transition-base);
}

.legislasi-item:hover {
  background-color: var(--bg-card-hover);
  border-color: var(--glass-border-hover);
  box-shadow: var(--glass-shadow-hover);
  transform: translateY(-2px);
}

.legislasi-isi { flex: 1; min-width: 0; }

.legislasi-label {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.legislasi-tag {
  display: inline-block;
  padding: 0.2em 0.7em;
  border-radius: var(--radius-full);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
}

.legislasi-tag.tahap {
  color: var(--gold);
  background: var(--gold-surface);
  border-color: rgba(212, 165, 32, 0.3);
}

.legislasi-judul {
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  color: var(--text-primary);
  line-height: 1.35;
}

.legislasi-ringkas {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.legislasi-tahap {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.7rem;
}

.legislasi-bar {
  flex: 1;
  max-width: 240px;
  height: 4px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.legislasi-bar span {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--red-bright), var(--gold));
  transition: width var(--transition-slow);
}

.legislasi-hitung {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.legislasi-panah {
  flex: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-muted);
}

@media (max-width: 560px) {
  .legislasi-panah { display: none; }
  .legislasi-bar { max-width: none; }
}

/* Dua bagian yang berdiri sendiri, bukan satu baris penyaring yang mencampur
   perpindahan halaman dengan penyortiran daftar. */
/* Di halaman ini setiap blok membawa pembatas lebarnya sendiri — tidak ada
   satu pembungkus bersama. Tanpa baris ini, isinya melar sampai tepi layar
   sementara judul halaman tetap sejajar kontainer. */
.regulasi-bagian {
  max-width: var(--container-max);
  margin: 0 auto clamp(1.5rem, 3.5vmin, 2.75rem);
  padding: 0 var(--container-padding);
}

/* Kotak pencarian sudah punya pembatasnya sendiri. Karena sekarang berada di
   dalam blok yang juga dibatasi, pembatas gandanya dilepas supaya tidak
   menjorok dua kali. */
.regulasi-bagian .tatib-search {
  max-width: none;
  padding: 0;
  margin: 0 0 var(--space-lg);
}

.regulasi-bagian-judul {
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 2.2vmin, 1.35rem);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--glass-border);
}

/* Dua tab utama: Tata Tertib dan Aturan Organisasi. Keduanya sebenarnya
   halaman terpisah, tapi tab yang sama ditampilkan di kedua halaman sehingga
   terbaca sebagai satu bagian dengan dua sisi. */
.tab-utama {
  display: flex;
  gap: 0.35rem;
  padding: 0.35rem;
  border-radius: var(--radius-full);
  background-color: rgba(20, 22, 34, 0.4);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}

.tab-utama-item {
  padding: 0.6rem 1.4rem;
  border-radius: var(--radius-full);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: color var(--transition-fast), background-color var(--transition-fast),
              border-color var(--transition-fast);
}

.tab-utama-item:hover {
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.05);
}

/* Penandanya bukan latar per tab, melainkan satu pil yang berpindah — resep
   sama seperti navbar. Karena pil-nya tunggal dan tidak pernah hilang,
   perpindahannya terbaca sebagai cairan yang mengalir, bukan lampu mati-nyala. */
.tab-utama-item.aktif {
  color: var(--gold-bright);
  background: transparent;
  border-color: transparent;
}

/* --- Pil dan sorotan untuk bilah tab --- */

.tab-utama {
  position: relative;
}

.tab-utama-item {
  position: relative;
  z-index: 1;
}

.kotak-pil,
.kotak-sorot {
  position: absolute;
  left: 0;
  top: 50%;
  height: var(--kp-h, 2.2rem);
  width: var(--kp-w, 0px);
  border-radius: var(--radius-full);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transform: translateY(-50%) translateX(var(--kp-x, 0px)) scaleX(var(--kp-sx, 1)) scaleY(var(--kp-sy, 1));
}

.kotak-pil {
  background: linear-gradient(180deg, rgba(212, 165, 32, 0.24), rgba(212, 165, 32, 0.10));
  border: 1px solid rgba(212, 165, 32, 0.38);
  box-shadow:
    0 2px 14px rgba(212, 165, 32, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  /* Sedikit melewati tujuan lalu kembali — itu yang memberi kesan lentur. */
  transition:
    transform 560ms cubic-bezier(0.34, 1.28, 0.52, 1),
    width 560ms cubic-bezier(0.34, 1.28, 0.52, 1),
    opacity 260ms ease;
}

/* Dipasang sekejap saat berpindah: pil memipih dan memanjang ke arah gerakan. */
.kotak-pil.mengalir {
  --kp-sy: 0.78;
  --kp-sx: 1.07;
}

.kotak-sorot {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 20px rgba(255, 255, 255, 0.06);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  /* Lebih gesit daripada pil: sorotan menempel pada kursor, penanda halaman
     bergerak lebih berbobot. */
  transition:
    transform 360ms cubic-bezier(0.34, 1.2, 0.5, 1),
    width 360ms cubic-bezier(0.34, 1.2, 0.5, 1),
    opacity 200ms ease;
}

.kotak-pil.siap,
.kotak-sorot.tampil { opacity: 1; }

.tab-utama-item:hover {
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.35);
}

/* Sub-tab kategori di Aturan Organisasi disamakan dengan penyaring di Tata Tertib:
   pil statis, tanpa pil meluncur maupun teks menyala. Keduanya menjalankan tugas
   yang sama — menyaring daftar — jadi tampilannya tidak boleh berbeda.
   Ukurannya dibuat persis sama dengan `.tatib-tab`. */
.regulasi-tabs .filter-btn {
  padding: 0.5rem 1.15rem;
  font-size: 0.85rem;
}

@media (prefers-reduced-motion: reduce) {
  .kotak-pil, .kotak-sorot { transition: opacity 200ms ease; }
}

/* Pintu masuk ke halaman Tata Tertib — sengaja berupa kartu lebar, bukan
   tombol kecil di antara penyaring, supaya jelas ini berpindah halaman. */
.regulasi-pintu {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  border-radius: var(--radius-lg);
  text-decoration: none;
  background-color: var(--bg-card);
  background-image:
    radial-gradient(65% 65% at var(--gx, -300px) var(--gy, -300px), var(--glass-sheen), transparent 72%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.025) 26%, transparent 52%);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: border-color var(--transition-base), box-shadow var(--transition-base),
              background-color var(--transition-base), transform var(--transition-base);
}

.regulasi-pintu:hover {
  background-color: var(--bg-card-hover);
  border-color: var(--glass-border-hover);
  box-shadow: var(--glass-shadow-hover);
  transform: translateY(-3px);
}

.regulasi-pintu-ikon { font-size: 1.6rem; flex: none; }

.regulasi-pintu-teks { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.regulasi-pintu-teks strong { color: var(--text-primary); font-size: 1rem; }
.regulasi-pintu-teks span { color: var(--text-secondary); font-size: 0.82rem; line-height: 1.5; }

.regulasi-pintu-panah { color: var(--gold); font-size: 1.2rem; flex: none; }

/* Kategori di panel admin */
.kategori-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.55rem 0.4rem 0.85rem;
  border-radius: var(--radius-full);
  background: var(--bg-secondary);
  border: 1px solid var(--glass-border);
  font-size: 0.82rem;
  color: var(--text-primary);
}

.kategori-chip button {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.2rem;
  transition: color var(--transition-fast);
}

.kategori-chip button:hover { color: var(--red-bright); }

.tautan-induk {
  display: inline-block;
  margin-bottom: 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.tautan-induk:hover {
  color: var(--gold);
}

.regulasi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: clamp(0.8rem, 2vmin, 1.5rem);
}

.regulasi-card {
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background-color: var(--bg-card);
  background-image:
    radial-gradient(65% 65% at var(--gx, -300px) var(--gy, -300px), var(--glass-sheen), transparent 72%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.025) 26%, transparent 52%);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: border-color var(--transition-base), box-shadow var(--transition-base),
              background-color var(--transition-base), transform var(--transition-base);
}

.regulasi-card:hover {
  background-color: var(--bg-card-hover);
  border-color: var(--glass-border-hover);
  box-shadow: var(--glass-shadow-hover);
  transform: translateY(-3px);
}

/* Dokumen yang sudah dicabut sengaja diredupkan — masih bisa dibaca sebagai
   rekam jejak, tapi tidak boleh terlihat sekuat aturan yang masih berlaku. */
.regulasi-card.dicabut {
  opacity: 0.62;
}

.regulasi-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.regulasi-jenis {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

.regulasi-status {
  display: inline-block;
  padding: 0.2em 0.7em;
  border-radius: var(--radius-full);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
  border: 1px solid transparent;
}

.regulasi-status[data-status="disahkan"] {
  color: var(--green-bright);
  background: var(--green-surface);
  border-color: rgba(39, 174, 96, 0.35);
}
.regulasi-status[data-status="dicabut"] {
  color: var(--text-muted);
  background: rgba(127, 140, 141, 0.12);
  border-color: rgba(127, 140, 141, 0.3);
}
.regulasi-status[data-status="draf"],
.regulasi-status[data-status="dibahas"] {
  color: var(--status-progress);
  background: var(--status-progress-bg);
  border-color: rgba(243, 156, 18, 0.35);
}

.regulasi-judul {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
  color: var(--text-primary);
}

.regulasi-ringkas {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.regulasi-kaki {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 0.4rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* --- Isi dokumen di dalam modal --- */

.regulasi-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  align-items: center;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--glass-border);
}

.regulasi-meta-item {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.regulasi-ringkasan {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-primary);
  margin-bottom: 1.25rem;
  font-weight: 500;
}

/* Isi dokumen ditampilkan apa adanya termasuk pergantian barisnya, karena
   nomor pasal dan ayat kehilangan makna kalau barisnya digabung. */
.regulasi-isi {
  white-space: pre-wrap;
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--text-secondary);
  max-height: 55vh;
  overflow-y: auto;
  padding-right: 0.5rem;
}

/* ============================================================
   PEMILIH PERIODE KEPENGURUSAN
   ============================================================ */

.periode-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.periode-bar label {
  font-size: 0.8rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.periode-bar select {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-full);
  background-color: rgba(20, 22, 34, 0.45);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.07), transparent 55%);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  cursor: pointer;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.periode-bar select:hover {
  border-color: var(--glass-border-hover);
  box-shadow: var(--shadow-card);
}

/* Daftar pilihan digambar oleh sistem operasi, jadi warnanya harus dipaksa
   supaya tidak tampil putih menyilaukan di tema gelap. */
.periode-bar select option {
  background: #14161f;
  color: var(--text-primary);
}

/* Penanda bahwa yang sedang dilihat bukan kepengurusan yang menjabat. */
.periode-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.5rem;
  padding: 0.2em 0.7em;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-bright);
  background: rgba(212, 165, 32, 0.14);
  border: 1px solid rgba(212, 165, 32, 0.38);
}

/* ============================================================
   MENU AKUN DI NAVBAR
   ------------------------------------------------------------
   Semua gayanya dulu ditulis langsung di atribut style pada HTML,
   sehingga tidak bisa ikut aturan kaca di berkas ini. Dipindahkan
   ke sini supaya sejalan dengan komponen lain.
   ============================================================ */

.user-dropdown-menu {
  /* Selalu flex; muncul-tidaknya diatur opacity dan visibility, bukan display,
     karena display tidak bisa dianimasikan. */
  display: flex;
  flex-direction: column;
  /* 'fixed', bukan 'absolute': panel ini sekarang anak langsung body supaya
     blur-nya bisa menangkap isi halaman. Koordinatnya ditempelkan ke tombol
     lewat JavaScript. */
  position: fixed;
  top: 0;
  right: 0;
  min-width: 15rem;
  padding: 0.45rem;
  z-index: 2000;

  border-radius: var(--radius-lg);
  background-color: rgba(16, 18, 27, 0.62);
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 30%, transparent 60%);
  border: 1px solid var(--glass-border);
  /* Bayangan dibuat lebih rapat ke badan panel. Sebaran yang terlalu lebar
     terbaca sebagai kotak kedua yang mengambang di belakangnya. */
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);

  opacity: 0;
  visibility: hidden;
  /* Tumbuh dari sudut kanan atas, yaitu dari arah tombol yang ditekan. */
  transform-origin: top right;
  transform: translateY(-8px) scale(0.96);
  /* Menutup memakai kurva yang sama dengan sisa antarmuka dan lebih cepat
     daripada membuka. Sebelumnya kurvanya melecut (0.34, 1.3, ...) -- lecutan
     itu masuk akal saat panel datang, tapi saat pergi ia justru melewati batas
     dulu sebelum menghilang, dan terbaca seperti tersentak. */
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast),
    visibility 0s linear 150ms;
}

.user-dropdown-menu.buka {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition:
    opacity 170ms ease,
    transform 340ms cubic-bezier(0.34, 1.3, 0.52, 1),
    visibility 0s;
}

/* Umpan balik saat tombol di dalam panel ditekan. Tombol Keluar mengakhiri sesi,
   jadi tekanannya perlu terasa terjawab sebelum apa pun berubah. Skalanya kecil
   -- tombolnya selebar panel, dan penyusutan yang lebih besar terlihat seperti
   panelnya ikut bergeser. */
.user-dropdown-menu .btn {
  transition:
    transform var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.user-dropdown-menu .btn:active {
  transform: scale(0.975);
}

@media (prefers-reduced-motion: reduce) {
  /* Gerakan dibuang, perubahan warnanya tetap -- tekanannya masih terjawab. */
  .user-dropdown-menu .btn:active {
    transform: none;
  }

  .user-dropdown-menu,
  .user-dropdown-menu.buka {
    transform: none;
  }
}

/* Blok identitas di bagian atas */
.user-dropdown-menu > div:first-child {
  border-bottom-color: var(--glass-border) !important;
}

.user-dropdown-menu .btn {
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.user-dropdown-menu .btn:hover {
  background-color: rgba(255, 255, 255, 0.07);
  border-color: var(--glass-border);
}

/* Tombol Keluar diberi rona merah saat disorot supaya jelas ini tindakan
   yang mengakhiri sesi, bukan sekadar pindah halaman. */
.user-dropdown-menu .btn:last-child:hover {
  background-color: rgba(201, 42, 42, 0.16);
  border-color: rgba(201, 42, 42, 0.4);
}

/* Tombol pemicunya ikut disamakan: kaca, bukan kotak pekat. */
#btn-user-dropdown {
  background: rgba(20, 22, 34, 0.45) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition: border-color 200ms ease, background-color 200ms ease;
}

#btn-user-dropdown:hover {
  border-color: var(--glass-border-hover) !important;
}

@media (max-width: 768px) {
  .user-dropdown-menu {
    min-width: 13rem;
  }
}

.mobile-nav-link {
  width: 100%;
  max-width: 22rem;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 600;
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius-full);
  background-color: rgba(20, 22, 34, 0.42);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.07), transparent 55%);
  border: 1px solid var(--glass-border);
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* Warna emas yang sama dengan pil di navbar layar besar, supaya
   penanda halaman aktif terbaca sama di kedua ukuran layar. */
.mobile-nav-link.active {
  color: var(--gold-bright);
  background-color: rgba(212, 165, 32, 0.13);
  background-image: linear-gradient(180deg, rgba(212, 165, 32, 0.24), rgba(212, 165, 32, 0.08));
  border-color: rgba(212, 165, 32, 0.42);
  box-shadow:
    0 2px 20px rgba(212, 165, 32, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Umpan balik saat ditekan. Nilai translateY ikut ditulis ulang karena
   properti transform yang sama dipakai animasi masuknya. */
.mobile-menu.open .mobile-nav-link:active {
  transform: translateY(0) scale(0.97);
}

/* Tombol tutup ikut jadi kaca, bukan silang telanjang. */
.mobile-close {
  background-color: rgba(20, 22, 34, 0.45);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Urutan animasi diperbaiki: tombol tutup terhitung sebagai anak pertama,
   jadi penomoran lama meleset satu dan tiga tautan terakhir tidak pernah
   kebagian jeda — semuanya muncul serentak di akhir. */
.mobile-nav-link:nth-child(2) { transition-delay: 40ms; }
.mobile-nav-link:nth-child(3) { transition-delay: 80ms; }
.mobile-nav-link:nth-child(4) { transition-delay: 120ms; }
.mobile-nav-link:nth-child(5) { transition-delay: 160ms; }
.mobile-nav-link:nth-child(6) { transition-delay: 200ms; }
.mobile-nav-link:nth-child(7) { transition-delay: 240ms; }
.mobile-nav-link:nth-child(8) { transition-delay: 280ms; }
.mobile-nav-link:nth-child(9) { transition-delay: 320ms; }

/* --- Berkas regulasi ditampilkan langsung di dalam modal --- */

.berkas-kotak {
  padding: 1rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
}

.berkas-nama {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.8rem;
  word-break: break-word;
}

/* Tinggi dibatasi tinggi layar supaya modalnya tidak memanjang tak terkendali
   pada dokumen berhalaman banyak. */
.berkas-tampil {
  display: block;
  width: 100%;
  height: 55vh;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: #fff;
}

img.berkas-tampil {
  height: auto;
  max-height: 55vh;
  object-fit: contain;
  background: transparent;
}

.berkas-catatan {
  margin: 0.7rem 0 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.regulasi-kosong {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-muted);
}

/* Spanduk verifikasi email di panel admin. Warna merah dipakai sengaja: ini memang
   lubang keamanan yang masih terbuka selama belum diselesaikan, bukan sekadar info. */
.admin-verif-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--red-bright);
  border-left: 3px solid var(--red-bright);
  border-radius: 12px;
  background-color: var(--red-surface);
}

.admin-verif-isi {
  flex: 1 1 320px;
  min-width: 0;
}

.admin-verif-isi strong {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--red-bright);
}

.admin-verif-isi p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.admin-verif-tombol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .admin-verif-banner {
    padding: 0.9rem 1rem;
  }

  .admin-verif-tombol {
    width: 100%;
  }

  .admin-verif-tombol .btn {
    flex: 1 1 auto;
  }
}



/* ============================================================================
   PERANGKAT SENTUH — MATIKAN GERAKAN HOVER
   ----------------------------------------------------------------------------
   Ponsel tidak punya kursor, tapi browser tetap menjalankan aturan :hover saat
   layar disentuh — dan gerakannya TERSANGKUT di sana sampai pengguna menyentuh
   tempat lain. Akibatnya kartu yang baru ditekan tetap terangkat, seolah rusak.

   Karena sebagian besar siswa membuka Pantau26 dari ponsel, ini bukan kasus
   pinggiran. Yang dimatikan hanya perpindahan posisinya; perubahan warna dan
   garis tepi dibiarkan, supaya sentuhan tetap terasa direspons.

   Ditulis sebagai blok terpisah, bukan dengan membungkus 22 aturan hover satu
   per satu, supaya aturan aslinya tetap utuh dan mudah ditelusuri.
   ============================================================================ */
@media (hover: none), (pointer: coarse) {
  .hero-logo:hover,
  .btn-primary:hover,
  .btn-secondary:hover,
  .stat-card:hover,
  .quick-card:hover,
  .summary-card:hover,
  .aspirasi-card:hover,
  .kegiatan-card:hover,
  .media-card:hover,
  .media-card:hover .media-placeholder,
  .role-card:hover,
  .member-card:hover,
  .contact-card:hover,
  .about-logo:hover,
  .admin-notif-bell:hover,
  .notif-item:hover,
  .admin-nav-item:hover,
  .legislasi-item:hover,
  .regulasi-pintu:hover,
  .regulasi-card:hover,
  .faq-item:hover,
  .highlight-card:hover,
  .org-card:hover,
  .update-item:hover {
    transform: none;
  }

  /* Panah pada kartu pintasan ikut diam — dia bergeser mengikuti kartunya. */
  .quick-card:hover .quick-arrow {
    transform: none;
  }
}

/* ============================================================================
   HORMATI PENGATURAN "KURANGI GERAKAN"
   ----------------------------------------------------------------------------
   Sebagian orang merasa pusing, mual, atau terganggu oleh gerakan di layar —
   dan mereka sudah menyatakannya lewat pengaturan sistem. Sebelumnya Pantau26
   hanya mematikan tiga hal kecil, sementara orb melayang, teks berputar, dan
   lonceng berdenyut tetap berjalan tanpa henti. Justru yang tanpa henti itu
   yang paling mengganggu.

   Yang dimatikan: seluruh perpindahan posisi dan animasi berulang.
   Yang dipertahankan: pemudaran opasitas yang sangat singkat, supaya perubahan
   keadaan tetap terbaca. Menghapus semuanya membuat antarmuka terasa patah —
   isi yang berganti tanpa jembatan apa pun justru membingungkan.
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  /* Animasi berulang tanpa henti — sumber gangguan terbesar. */
  .hero-orb,
  .hero-badge::before,
  .rolling-text,
  .highlight-badge::before,
  .loader-text,
  .notif-badge,
  body::after {
    animation: none !important;
  }

  /* Pemutar loading dibiarkan berputar. Dia bukan hiasan melainkan satu-satunya
     penanda bahwa sesuatu sedang diproses; menghentikannya justru membuat situs
     terlihat menggantung. */

  /* Animasi masuk halaman dan penyingkapan saat digulir: tetap muncul,
     tapi tanpa bergeser. */
  .page.active,
  .reveal,
  .reveal.visible {
    animation: none !important;
    transform: none !important;
    transition: opacity 120ms linear !important;
  }

  .reveal {
    opacity: 0;
  }

  .reveal.visible {
    opacity: 1;
  }

  /* Toast, dropdown, dan modal cukup muncul-hilang tanpa meluncur. */
  .toast,
  .notif-dropdown,
  .user-dropdown-menu,
  .modal-content,
  .custom-prompt-modal {
    animation: none !important;
    transition: opacity 120ms linear, visibility 0s !important;
    transform: none !important;
  }

  /* Kilau yang mengikuti kursor ikut dimatikan lewat JavaScript —
     lihat pemeriksaan prefers-reduced-motion di app.js. */
}

/* ============================================================================
   EKSKUL & PEMBINA — tahap 1 pusat advisi
   ============================================================================ */

.login-pemisah {
  position: relative;
  margin: 1.5rem 0 1rem;
  text-align: center;
}

.login-pemisah::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--glass-border);
}

.login-pemisah span {
  position: relative;
  padding: 0 0.75rem;
  background: var(--bg-card);
  font-size: 0.8rem;
  color: var(--text-muted);
}


.pembina-dashboard {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 2.5rem var(--container-padding) 4rem;
}

.pembina-kepala {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--glass-border);
}

.pembina-sapaan {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.pembina-kepala h2 {
  margin: 0.15rem 0;
}

.pembina-nip {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.pembina-bagian {
  margin-top: 2rem;
}

.pembina-bagian h3 {
  margin: 0 0 0.9rem;
  font-size: 1.05rem;
}

.pembina-ekskul-daftar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pembina-ekskul-pil {
  padding: 0.5rem 1.15rem;
  font-size: 0.85rem;
  border-radius: var(--radius-full);
  background: var(--gold-surface);
  border: 1px solid var(--gold-muted);
  color: var(--gold);
}

.pembina-kosong {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-secondary);
}




.admin-ekskul-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}

.admin-ekskul-kepala {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}

.admin-ekskul-kepala h3 {
  margin: 0;
  font-size: 1.05rem;
}


@media (max-width: 600px) {
  .pembina-dashboard {
    padding-top: 1.75rem;
  }

  .admin-ekskul-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* Pilihan ekskul di form pembina. Kotak centang, bukan menu turun: pembina bisa
   membina lebih dari satu ekskul, dan menu turun bawaan menuntut ctrl+klik di
   komputer serta canggung sekali di ponsel. */
.pembina-pilihan {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  max-height: 190px;
  overflow-y: auto;
  padding: 0.5rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
}

.pembina-pilihan-baris {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.55rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.pembina-pilihan-baris:hover {
  background: var(--bg-card-hover);
}

.pembina-pilihan-baris input {
  width: 17px;
  height: 17px;
  accent-color: var(--gold);
  flex-shrink: 0;
  cursor: pointer;
}


/* ============================================================================
   SIDEBAR PANEL ADMIN — dirapatkan supaya muat tanpa digulir
   ----------------------------------------------------------------------------
   Menunya bertambah dari 8 ke 10 butir, dan tingginya melewati ruang layar
   sehingga muncul bilah gulir di dalam sidebar. Bilah gulir di dalam menu yang
   isinya sedikit terbaca seperti kesalahan, bukan fitur.

   Yang dikecilkan hanya jarak, bukan ukuran sasaran sentuh: butir menu tetap
   di atas 40px tingginya, masih nyaman ditekan di layar sentuh.

   `overflow-y: auto` SENGAJA dipertahankan sebagai jaring pengaman — di jendela
   yang sangat pendek menunya harus tetap bisa dijangkau. Yang disembunyikan
   hanya bilah gulirnya, seperti pada bilah tab Tata Tertib.
   ============================================================================ */

.admin-sidebar {
  padding: 1.15rem;
  top: 90px;
  max-height: calc(100vh - 110px);
  scrollbar-width: none;
}

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

.admin-nav {
  gap: 0.25rem;
}

.admin-nav-item {
  padding: 0.6rem 0.9rem;
  font-size: 0.88rem;
}

.admin-sidebar-kaki {
  margin-top: auto;
  padding-top: 1.25rem;
}

/* Blok "Login Sebagai" di kaki sidebar. Sebelumnya bergaya lewat atribut style
   di HTML; dipindah ke sini supaya jaraknya ikut dirapatkan. */
.admin-sidebar-kaki > div:first-child {
  margin-bottom: 0.7rem !important;
}

/* Tidak ada blok responsif tambahan di sini. Aturan lama pada 768px sudah
   melepas sidebar dari posisi menempel saat menunya pindah ke atas konten;
   menambah titik potong sendiri malah mematikan perilaku menempel di lebar
   769-1024px, padahal di situ sidebar masih berada di samping. */

/* ============================================================================
   BUTIR MENU PANEL ADMIN — hover dan keadaan aktif
   ----------------------------------------------------------------------------
   Sebelumnya hover memakai properti singkat `background`, dan itu menimpa
   `background-image` — kilau yang mengikuti kursor justru hilang tepat saat
   kursornya datang. Di sini yang disentuh hanya `background-color`.

   Hover dan keadaan aktif juga dibedakan. Dulu keduanya identik, sehingga tidak
   ketahuan mana halaman yang sedang dibuka dan mana yang cuma sedang ditunjuk:
     hover  — permukaan kaca menyala, teks menajam, bergeser sedikit ke kanan
     aktif  — warna emas dan pilar penanda di tepi kiri

   Pilar itu penting bukan cuma sebagai hiasan: keadaan aktif jadi tidak
   bergantung pada warna semata, sehingga tetap terbaca oleh yang kesulitan
   membedakan warna.
   ============================================================================ */

.admin-nav-item {
  position: relative;
  border: 1px solid transparent;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

/* Pilar penanda di tepi kiri — satu-satunya penanda halaman yang sedang dibuka.
   Ukurannya tetap; yang dianimasikan skalanya, bukan tinggi dan lebarnya.
   Menganimasikan height/width memaksa browser menghitung ulang tata letak di
   setiap frame, sedangkan transform dikerjakan kartu grafis. Tumbuh dari tengah
   ke atas dan ke bawah sekaligus, seperti sesuatu yang menegakkan diri. */
.admin-nav-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 58%;
  border-radius: 0 3px 3px 0;
  background: var(--gold);
  transform: translateY(-50%) scaleY(0);
  transform-origin: center;
  transition: transform var(--transition-fast);
}

.admin-nav-item:hover {
  /* `background-color`, bukan `background` — lihat catatan di atas. */
  background-color: var(--bg-card-hover);
  border-color: var(--glass-border-hover);
  color: var(--text-primary);
  box-shadow: var(--glass-shadow);
  /* Bergeser ke kanan, bukan terangkat: daftar ini vertikal, dan gerakan ke atas
     membuat butir di bawahnya terlihat bergoyang. */
  transform: translateX(3px);
}

/* Garis tepi emas sengaja TIDAK dipakai. Dengan pilar di kiri, keduanya menandai
   hal yang sama dua kali — dan dua penanda untuk satu keadaan membuat menu terlihat
   ramai tanpa menambah kejelasan. Garis tepinya tetap ada tapi tembus pandang,
   supaya lebar butirnya tidak bergeser saat berpindah keadaan. */
.admin-nav-item.active {
  background-color: var(--gold-surface);
  border-color: transparent;
  color: var(--gold);
  transform: none;
}

.admin-nav-item.active::before {
  transform: translateY(-50%) scaleY(1);
}

/* Yang sedang dibuka tidak ikut bergeser saat disentuh kursor — dia sudah jadi
   tujuan, tidak perlu menawarkan diri lagi. */
.admin-nav-item.active:hover {
  background-color: var(--gold-surface);
  border-color: transparent;
  color: var(--gold-bright);
  box-shadow: none;
  transform: none;
}

/* ============================================================================
   ASPIRASI DI DASBOR PEMBINA — tahap 2a
   ============================================================================ */


.pembina-hitung {
  display: inline-block;
  min-width: 1.6rem;
  margin-left: 0.4rem;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--gold-surface);
  border: 1px solid var(--gold-muted);
  font-size: 0.78rem;
  text-align: center;
  color: var(--gold);
}

.pembina-aspirasi-daftar {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.pembina-aspirasi {
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background-color: var(--bg-card);
}

.pembina-aspirasi-kepala {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: flex-start;
  justify-content: space-between;
}

.pembina-aspirasi-kepala h4 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
}

/* Lencana status. Warnanya menandai tahap, tapi tulisannya yang menjelaskan —
   status tidak boleh hanya tersampaikan lewat warna. */
.pembina-lencana {
  flex-shrink: 0;
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-full);
  font-size: 0.73rem;
  white-space: nowrap;
  border: 1px solid var(--glass-border-hover);
  color: var(--text-secondary);
}

.pembina-lencana[data-tl="diteruskan"] {
  background: var(--gold-surface);
  border-color: var(--gold-muted);
  color: var(--gold);
}

.pembina-lencana[data-tl="ditanggapi"],
.pembina-lencana[data-tl="selesai"] {
  background: rgba(47, 158, 68, 0.10);
  border-color: rgba(47, 158, 68, 0.45);
  color: #51cf66;
}

.pembina-aspirasi-meta {
  margin: 0.45rem 0 0.7rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.pembina-aspirasi-isi {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.pembina-aspirasi-catatan {
  margin: 0.8rem 0 0;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--gold-muted);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--gold-surface);
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

@media (max-width: 600px) {
  .pembina-aspirasi {
    padding: 0.95rem 1rem;
  }

  .pembina-aspirasi-kepala {
    flex-direction: column;
  }
}

/* Lencana kedudukan di tabel Kelola Organisasi & Ekskul. Organisasi memakai emas
   karena kedudukannya di atas; ekstrakurikuler netral. */
.jenis-lencana {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--glass-border-hover);
  font-size: 0.72rem;
  white-space: nowrap;
  color: var(--text-secondary);
}

.jenis-lencana[data-jenis="osis"] {
  background: var(--gold-surface);
  border-color: var(--gold-muted);
  color: var(--gold);
}

/* ============================================================================
   TANGGAPAN PEMBINA — tahap 2b
   ============================================================================ */

.tanggapan-kotak {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--glass-border);
}

.tanggapan-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.tanggapan-input {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.88rem;
  line-height: 1.65;
  resize: vertical;
}

.tanggapan-input:focus {
  outline: none;
  border-color: var(--gold-muted);
}

.tanggapan-aksi {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-end;
  margin-top: 0.7rem;
}

/* Menjawab pertanyaan yang paling ditunggu pembina: apakah jawaban saya sudah
   sampai ke siswa, atau masih menunggu. */
.tanggapan-status {
  margin-right: auto;
  font-size: 0.78rem;
}

.tanggapan-status[data-terbit="ya"] { color: #51cf66; }
.tanggapan-status[data-terbit="belum"] { color: var(--text-muted); }

.tanggapan-oleh {
  margin: 0 0 0.35rem;
  font-size: 0.82rem;
  color: var(--gold);
}

.tanggapan-teks {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--text-secondary);
  white-space: pre-line;
}

/* Tanggapan pembina di modal aspirasi sisi siswa. Dibedakan dari catatan PK
   dengan garis emas di kiri, supaya jelas ini suara yang berbeda. */
.modal-tanggapan {
  margin-top: 1.5rem;
  padding: 1rem 1.15rem;
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--gold-surface);
}

.modal-tanggapan h4 {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}

@media (max-width: 600px) {
  .tanggapan-aksi {
    justify-content: stretch;
  }

  .tanggapan-status {
    width: 100%;
    margin-right: 0;
  }
}

/* ============================================================================
   KOTAK KONFIRMASI
   ----------------------------------------------------------------------------
   Menggantikan confirm() bawaan browser. Kotak bawaan tampilannya ditentukan
   sistem operasi dan menyebutkan alamat situs — di tengah antarmuka bergaya
   kaca ia terbaca seperti peringatan dari luar, bukan bagian dari situsnya.
   ============================================================================ */

.konfirmasi-kotak {
  max-width: 420px;
  padding: 1.6rem 1.75rem 1.5rem;
  text-align: left;
}

.konfirmasi-kotak h3 {
  margin: 0 0 0.6rem;
  font-size: 1.1rem;
  line-height: 1.45;
}

.konfirmasi-kotak p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-secondary);
  white-space: pre-line;
}

.konfirmasi-aksi {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  margin-top: 1.6rem;
}

/* Tindakan yang tidak bisa dibatalkan. Warnanya bukan hiasan: ia memperlambat
   tangan sepersekian detik sebelum menekan. */
.konfirmasi-bahaya .konfirmasi-kotak h3 {
  color: var(--red-bright);
}

.konfirmasi-bahaya #konfirmasi-ya {
  background: var(--red-bright);
  border-color: var(--red-bright);
  color: #fff;
}

@media (max-width: 480px) {
  .konfirmasi-aksi {
    flex-direction: column-reverse;
  }

  .konfirmasi-aksi .btn {
    width: 100%;
  }
}

/* ============================================================================
   IKON
   ----------------------------------------------------------------------------
   Menggantikan emoji yang sebelumnya dipakai sebagai ikon. Tiga alasan, dan
   tidak satu pun soal selera:
     - bentuk emoji berbeda di tiap perangkat, jadi kita tidak mengendalikan
       tampilan situs sendiri
     - warnanya tidak bisa diatur dan menabrak palet emas-gelap
     - ketebalan garis antar emoji tidak seragam, sehingga deretan ikon terlihat
       seperti tempelan dari berbagai sumber

   Ukurannya mengikuti ukuran huruf di sekitarnya lewat `em`, dan warnanya
   `currentColor` — jadi satu ikon dipakai di mana saja tanpa penyesuaian.
   ============================================================================ */

.ikon {
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
  vertical-align: -0.16em;
}

/* Tombol ikon di panel admin: ikonnya sendirian, jadi boleh lebih besar sedikit
   supaya sasaran tekannya tetap nyaman. */
.btn-icon .ikon {
  width: 1.15rem;
  height: 1.15rem;
  vertical-align: middle;
}

/* Ikon yang berdampingan dengan teks perlu jarak. Dipakai `gap` pada wadahnya
   bila memungkinkan; ini cadangan untuk yang menempel langsung pada teks. */
.btn .ikon,
.nav-link .ikon,
.tab-utama-item .ikon {
  margin-right: 0.4em;
}

.btn-icon .ikon {
  margin-right: 0;
}

/* Ikon berukuran besar sebagai penanda keadaan kosong atau kepala bagian. */
.no-results .ikon,
.no-results-icon .ikon {
  width: 2.5rem;
  height: 2.5rem;
  opacity: 0.55;
}

/* Lonceng notifikasi dan tombol besar lain. */
.admin-notif-bell .ikon {
  width: 1.35rem;
  height: 1.35rem;
}

/* ============================================================================
   VERSI DAN RANTAI PENGGANTIAN REGULASI — tahap 2
   ============================================================================ */

.regulasi-versi {
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--gold-muted);
  background: var(--gold-surface);
  font-size: 0.72rem;
  color: var(--gold);
}

.regulasi-rantai {
  margin: 0.9rem 0 0;
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* Keterangan bahwa dokumen ini sudah tidak berlaku. Warna merah dipakai sengaja:
   membuka aturan yang sudah dicabut tanpa menyadarinya adalah kesalahan yang
   berakibat nyata, bukan sekadar salah halaman. */
.regulasi-rantai-usang {
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--red-bright);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--red-surface);
}

.regulasi-tautan-dok {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--gold);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.regulasi-tautan-dok:hover {
  color: var(--gold-bright);
}



/* Pemisah antara tombol pengurut dan tombol tindakan di baris tabel. Menggeser
   posisi dan menyunting isi adalah dua jenis pekerjaan yang berbeda; garis tipis
   ini yang mencegah tangan salah menekan Hapus saat hendak menurunkan baris. */
.admin-aksi-pemisah {
  width: 1px;
  height: 1.1rem;
  margin: 0 0.15rem;
  background: var(--glass-border-hover);
}

.btn-icon:disabled {
  opacity: 0.25;
  cursor: default;
}

.btn-icon:disabled:hover {
  background: none;
  border-color: transparent;
  transform: none;
}

/* Lencana tujuan aspirasi di panel admin. Lembaga tetap — sekolah, PK, Pengurus
   OSIS — diberi warna emas supaya langsung terbedakan dari daftar ekskul yang
   panjang; mata mencarinya tanpa harus membaca satu per satu. */
.kolom-tujuan {
  white-space: nowrap;
}

.tujuan-lencana {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--glass-border-hover);
  font-size: 0.74rem;
  color: var(--text-secondary);
}

.tujuan-lencana[data-jenis="tetap"] {
  background: var(--gold-surface);
  border-color: var(--gold-muted);
  color: var(--gold);
}

.tujuan-lencana[data-jenis="kosong"] {
  border-color: transparent;
  color: var(--text-muted);
}

.tujuan-lencana[data-jenis="hilang"] {
  border-color: var(--red-bright);
  color: var(--red-bright);
}

/* Bidang sekolah di dalam lencana tujuan — Kesiswaan, Kurikulum, atau Sarana &
   Prasarana. Dibuat sedikit lebih redup dari nama lembaganya: ia keterangan
   tambahan, bukan tujuannya itu sendiri. */
.tujuan-bidang {
  opacity: 0.75;
  font-size: 0.95em;
}

.tujuan-bidang::before {
  content: '\00b7';
  margin-right: 0.3em;
  opacity: 0.6;
}

/* Bidang tanpa lembaga — aspirasi lama yang dikirim sebelum kolom tujuan ada.
   Sengaja tidak diberi warna emas: yang tercatat hanya bidangnya, bukan lembaga
   tujuannya, dan membedakannya mencegah kesan bahwa aspirasi itu sudah dialamatkan. */
.tujuan-lencana[data-jenis="bidang"] {
  border-style: dashed;
  color: var(--text-secondary);
}

/* ============================================================================
   BARIS TABEL BERWARNA MENURUT STATUS
   ----------------------------------------------------------------------------
   Tiga lapis penanda, sengaja tidak hanya warna:
     - pilar tipis di tepi kiri  → bentuk, terbaca tanpa membedakan warna
     - tinta latar sangat samar  → memisahkan kelompok saat mata menyapu tabel
     - lencana status bertulisan → maknanya tetap terbaca sebagai kata
   Menyampaikan keadaan lewat warna semata membuat tabel ini tidak terpakai bagi
   yang kesulitan membedakan warna, dan itu sekitar satu dari dua belas laki-laki.

   Opasitas tintanya 0,06 — sudah diukur: teks utama tetap di atas 14:1 dan teks
   redup di atas 5:1 pada keempat warna.
   ============================================================================ */

.admin-table tbody tr[data-status] {
  position: relative;
  transition: background-color var(--transition-fast);
}

.admin-table tbody tr[data-status] td:first-child {
  border-left: 3px solid transparent;
  padding-left: calc(var(--space-md) - 3px);
}

.admin-table tbody tr[data-status="menunggu"] {
  background-color: rgba(127, 140, 141, 0.06);
}
.admin-table tbody tr[data-status="menunggu"] td:first-child {
  border-left-color: var(--status-waiting);
}

.admin-table tbody tr[data-status="proses"] {
  background-color: rgba(243, 156, 18, 0.06);
}
.admin-table tbody tr[data-status="proses"] td:first-child {
  border-left-color: var(--status-progress);
}

.admin-table tbody tr[data-status="selesai"] {
  background-color: rgba(39, 174, 96, 0.06);
}
.admin-table tbody tr[data-status="selesai"] td:first-child {
  border-left-color: var(--status-done);
}

.admin-table tbody tr[data-status="ditolak"] {
  background-color: rgba(231, 76, 60, 0.06);
}
.admin-table tbody tr[data-status="ditolak"] td:first-child {
  border-left-color: var(--status-rejected);
}

/* Sorotan saat disentuh kursor tetap menang atas tinta status, supaya baris yang
   sedang ditunjuk selalu jelas mana. */
.admin-table tbody tr[data-status]:hover {
  background-color: var(--bg-card-hover);
}

/* ============================================================================
   CINCIN FOKUS KEYBOARD
   ----------------------------------------------------------------------------
   Sebelumnya tidak ada sama sekali, dan `outline: none` dipasang di lima tempat.
   Akibatnya siapa pun yang menelusuri halaman dengan tombol Tab tidak tahu sedang
   berada di mana — bukan cuma pengguna pembaca layar, tapi juga siapa saja yang
   tangannya sedang tidak bisa memegang tetikus.

   Memakai `:focus-visible`, bukan `:focus`. Bedanya penting: cincin hanya muncul
   saat berpindah lewat keyboard, tidak saat tombol diklik tetikus. Itu sebabnya
   dulu banyak orang mematikan outline — mereka sebenarnya ingin menghilangkan
   cincin pada klik, bukan pada keyboard.

   `!important` dipakai sadar. Aturan `outline: none` yang sudah ada punya
   kekhususan lebih tinggi, dan cincin fokus adalah hal yang tidak boleh bisa
   dimatikan tanpa sengaja oleh aturan baru di kemudian hari.
   ============================================================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold-bright) !important;
  outline-offset: 2px !important;
}

/* Di dalam panel gelap, cincin emas saja kadang menyatu dengan tepi elemen.
   Bayangan tipis di belakangnya memberi jarak baca tanpa menggeser tata letak. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  box-shadow: 0 0 0 4px rgba(212, 165, 32, 0.15);
}

/* Lewatan cepat ke isi halaman. Tersembunyi sampai difokus lewat Tab, sehingga
   tidak mengubah tampilan bagi yang memakai tetikus — tapi menyelamatkan yang
   memakai keyboard dari menyusuri sepuluh tab navigasi di setiap halaman. */
.lewati-ke-isi {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 5000;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--gold-muted);
  color: var(--gold);
  text-decoration: none;
  transition: top var(--transition-fast);
}

.lewati-ke-isi:focus {
  top: 1rem;
}

/* ============================================================================
   REKAP PENGAWASAN — tahap 5
   ============================================================================ */

.rekap-ringkas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.rekap-kartu {
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background-color: var(--bg-card);
}

/* Angka yang menggantung disorot merah begitu lebih dari nol. Itu satu-satunya
   angka di halaman ini yang menuntut tindakan, dan ia harus terlihat lebih dulu
   daripada angka lain yang sekadar mengabarkan. */
.rekap-kartu[data-sorot="ya"] {
  border-color: var(--red-bright);
  background-color: var(--red-surface);
}

.rekap-kartu[data-sorot="ya"] .rekap-angka {
  color: var(--red-bright);
}

.rekap-angka {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--gold);
}

.rekap-label {
  margin-top: 0.3rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.rekap-menggantung {
  display: inline-block;
  min-width: 1.6rem;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-full);
  background: var(--red-surface);
  border: 1px solid var(--red-bright);
  text-align: center;
  color: var(--red-bright);
}

.rekap-kosong {
  color: var(--text-muted);
}

@media (max-width: 600px) {
  .rekap-ringkas {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.7rem;
  }

  .rekap-kartu {
    padding: 0.9rem 1rem;
  }

  .rekap-angka {
    font-size: 1.35rem;
  }
}

/* Sub-tab di dalam bagian panel admin. Memakai gaya penyaring yang sama dengan
   di halaman siswa, supaya tidak ada bahasa visual baru yang perlu dipelajari. */
.admin-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--glass-border);
}

/* Bentuknya sengaja disamakan dengan pil penyaring, tapi kelasnya dipisah:
   penangan `.filter-btn` di app.js mengosongkan penyaring aspirasi setiap kali
   salah satu tombolnya ditekan. */
.subtab-btn {
  padding: 0.45rem 1rem;
  font-size: 0.825rem;
  font-weight: 500;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  transition: var(--transition-fast);
}

.subtab-btn:hover {
  color: var(--text-primary);
  border-color: var(--glass-border-hover);
}

.subtab-btn.aktif {
  background: var(--gold-surface);
  color: var(--gold);
  border-color: var(--gold-muted);
}

.admin-subpanel {
  display: none;
}

.admin-subpanel.aktif {
  display: block;
}

/* Kepala bagian di dalam sub-panel tidak perlu jarak atas lagi — bilah sub-tab
   sudah memberi pemisah. */
.admin-subpanel > .admin-header:first-child {
  margin-top: 0;
}

/* ==========================================================================
   Evaluasi SPPK — tahap 3 pusat advisi
   Memakai palet dan efek kaca yang sudah ada; tidak ada warna baru diperkenalkan.
   ========================================================================== */

.sppk-kepala {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
  .sppk-kepala {
    grid-template-columns: 1fr 1fr;
  }
  .sppk-kepala .form-group:first-child {
    grid-column: 1 / -1;
  }
}

.sppk-kepala input,
.sppk-kepala select {
  width: 100%;
  padding: 0.85rem;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
}

.sppk-kelompok {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem 1.25rem;
  margin: 0 0 1.25rem;
}

.sppk-kelompok legend {
  padding: 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}

.sppk-baris {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--glass-border);
}

.sppk-baris:last-child {
  border-bottom: none;
}

.sppk-baris label {
  flex: 1;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.45;
}

.sppk-baris input {
  flex: 0 0 5.5rem;
  padding: 0.55rem 0.65rem;
  text-align: right;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* Di layar sempit label dan kolom angka bertumpuk; kolomnya dibiarkan selebar
   penuh supaya tetap nyaman disentuh. */
@media (max-width: 480px) {
  .sppk-baris {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .sppk-baris input {
    flex: 1 1 auto;
    text-align: left;
  }
}

.sppk-hasil-kotak {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  border-radius: var(--radius-md);
  background: var(--gold-surface);
  border: 1px solid var(--gold-muted);
}

.sppk-hasil-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.sppk-hasil-angka {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  margin-right: 0.6rem;
}

/* Statusnya selalu tertulis, warna hanya menegaskan — supaya yang sulit
   membedakan warna tetap membacanya. */
.sppk-status {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.sppk-status[data-nilai="baik-sekali"] {
  background: var(--gold-surface);
  color: var(--gold);
  border: 1px solid var(--gold-muted);
}

.sppk-status[data-nilai="baik"] {
  background: rgba(127, 140, 141, 0.14);
  color: var(--text-secondary);
  border: 1px solid var(--glass-border);
}

.sppk-status[data-nilai="kurang"] {
  background: var(--red-surface);
  color: var(--red-bright);
  border: 1px solid var(--red-bright);
}

/* --- Sisi pembina --- */

.pembina-evaluasi-daftar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pembina-evaluasi {
  padding: 1.25rem;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
}

.pembina-evaluasi-kepala {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.pembina-evaluasi-kepala h4 {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  color: var(--text-primary);
}

.pembina-evaluasi-meta {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.pembina-evaluasi-hasil {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.sppk-nilai-daftar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem 1.5rem;
  margin-bottom: 1.25rem;
}

@media (min-width: 560px) {
  .sppk-nilai-daftar {
    grid-template-columns: 1fr 1fr;
  }
}

.sppk-nilai-baris {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
  font-size: 0.825rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--glass-border);
}

.sppk-nilai-angka {
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.pembina-evaluasi-catatan label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.pembina-evaluasi-catatan textarea {
  width: 100%;
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.875rem;
  resize: vertical;
}

.pembina-evaluasi-aksi {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.65rem;
}

.pembina-evaluasi-status {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Huruf mutu per indikator. Ditulis di sebelah angka, sama seperti lembar SPPK
   aslinya yang menulis "86 (B)". Lebarnya dikunci supaya kolom angka tidak
   bergeser-geser saat hurufnya berubah dari kosong ke terisi. */
.sppk-huruf {
  flex: 0 0 1.5rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

/* Pelaksana melebar penuh: dengan tiga kolom di grid dua lajur, ia akan berdiri
   sendirian setengah lebar dan terlihat seperti kolom yang terpotong. */
@media (min-width: 640px) {
  .sppk-kepala .form-group:last-child {
    grid-column: 1 / -1;
  }
}

/* Tooltip tombol ikon. Anak langsung body dan berposisi fixed — pembungkus tabel
   admin memakai overflow-x, yang ikut memotong sumbu tegaknya, jadi tooltip di
   dalam tabel akan terpangkas kalau ditulis sebagai elemen semu. */
.tip-ikon {
  position: fixed;
  z-index: 2000;
  max-width: 15rem;
  padding: 0.45rem 0.7rem;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  border: 1px solid var(--glass-border-hover);
  box-shadow: var(--glass-shadow);
  color: var(--text-primary);
  font-size: 0.775rem;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.tip-ikon.tampil {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .tip-ikon {
    transition: none;
    transform: none;
  }
}

/* Kepala bagian admin sempat tanpa `flex-wrap`, jadi di lebar sedang judulnya
   terjepit tombol-tombol di sebelahnya sampai patah dua baris. Sekarang tombolnya
   yang turun sebaris penuh, dan judulnya tetap utuh. */
.admin-header {
  flex-wrap: wrap;
  gap: var(--space-md);
}

.admin-header h2 {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

/* Kelompok tombol di kepala tidak boleh ikut menyusut sampai tulisannya terpotong. */
.admin-header > *:not(h2) {
  flex: 0 0 auto;
}

/* Kolom impor berkas SPPK. Diletakkan di atas kolom isian sebagai jalan pintas —
   mengisi manual tetap jalan yang utama, jadi bentuknya sengaja tidak menonjol. */
.sppk-impor {
  padding: 0.9rem 1rem;
  margin-bottom: 1.5rem;
  border-radius: var(--radius-md);
  border: 1px dashed var(--glass-border);
  background: var(--bg-tertiary);
}

.sppk-impor label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.sppk-impor input[type="file"] {
  width: 100%;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.sppk-impor input[type="file"]::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--glass-border);
  background: var(--bg-card);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  transition: var(--transition-fast);
}

.sppk-impor input[type="file"]::file-selector-button:hover {
  border-color: var(--gold-muted);
  color: var(--gold);
}

/* ==========================================================================
   Dasbor pembina: dua lajur, dan tombol yang menandakan sudah tersimpan
   ========================================================================== */

.pembina-kolom {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

/* Dua lajur baru di layar lebar. `align-items: start` supaya lajur yang pendek
   tidak ikut memanjang mengikuti lajur sebelahnya. */
@media (min-width: 1024px) {
  .pembina-kolom {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 2rem 2.5rem;
  }
}

/* Tombol yang isinya sudah tersimpan. Kelabu dan mati -- bedanya dengan tombol
   merah harus terbaca sekilas, karena itu satu-satunya penanda bahwa tulisannya
   benar-benar sudah masuk dan bukan sekadar diketik. */
.tombol-tersimpan {
  background: var(--bg-tertiary);
  border: 1px solid var(--glass-border);
  color: var(--text-muted);
  cursor: default;
}

.tombol-tersimpan:hover {
  background: var(--bg-tertiary);
  border-color: var(--glass-border);
  color: var(--text-muted);
  transform: none;
}

/* Kolom terkunci ikut meredup, supaya keadaannya terbaca dari kolomnya sendiri
   dan bukan hanya dari tombol di bawahnya. */
.tanggapan-input[readonly],
.pembina-evaluasi-catatan textarea[readonly] {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: default;
}

/* Penilaian pembina di dalam form SPPK -- hanya bisa dibaca PK. */
.sppk-pembina {
  padding: 0.9rem 1rem;
  margin-bottom: 1.25rem;
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
  border: 1px solid var(--glass-border);
}

.sppk-pembina label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.sppk-pembina textarea {
  width: 100%;
  padding: 0.7rem;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.85rem;
  resize: vertical;
  cursor: default;
}

/* --- Lembar SPPK asli --- */

.sppk-berkas-tersimpan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
  border: 1px solid var(--glass-border);
}

.sppk-berkas-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.sppk-berkas-baris {
  margin-bottom: 1.25rem;
}

/* Penampil berkas dibuat selebar mungkin: lembar SPPK berukuran A4 dan tidak
   terbaca kalau dijejalkan ke lebar modal biasa. */
.berkas-sppk-kotak {
  max-width: 62rem;
  width: 100%;
}

.berkas-sppk-bingkai {
  display: block;
  width: 100%;
  height: 70vh;
  min-height: 20rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
}

.berkas-sppk-aksi {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}

/* Pelaksana dan tautan Drive melebar penuh. Dengan lima kolom di grid dua lajur,
   tanpa ini Pelaksana berdiri sendirian setengah lebar dan terlihat terpotong \u2014
   masalah yang sama sudah pernah terjadi sebelum kolom tautan ditambahkan. */
@media (min-width: 640px) {
  .sppk-kepala .form-group:nth-child(4) {
    grid-column: 1 / -1;
  }
}

/* Baris tombol berkas bisa memuat dua tombol sekaligus: berkas unggahan yang
   tersimpan tertutup, dan tautan ke arsip Drive. */
.sppk-berkas-baris {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Nama berkas boleh panjang; dipotong dengan elipsis supaya tombol di sebelahnya
   tidak terdorong keluar baris. */
.sppk-berkas-nama {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.85rem;
  color: var(--text-primary);
}

/* Tombol aksi di tabel admin tidak boleh terpangkas. Tanpa ini, kolom Aksi yang
   sempit memotong tulisan tombolnya di tengah ("Buka SPP") -- terlihat seperti
   rusak, bukan seperti tabel yang perlu digeser. Tabelnya sendiri sudah punya
   pembungkus ber-overflow-x, jadi melebar itu aman. */
.admin-table td .btn {
  white-space: nowrap;
}

.admin-table td:last-child {
  white-space: nowrap;
}

/* Pesan gagal di dalam kotak yang bergaya keberhasilan terbaca seperti berhasil.
   `.form-success-msg` membawa latar dan garis hijau; modifier ini membalikkannya
   jadi merah, sekaligus warna tulisannya. */
.form-success-msg.galat {
  background: var(--red-surface);
  border-color: var(--red-bright);
  color: var(--red-bright);
}

/* ============================================================================
   PRIVASI & KETENTUAN
   ----------------------------------------------------------------------------
   Dua dokumen panjang, satu sistem tampilan. Lebar bacaan dikunci di
   `.legal-isi` supaya baris tidak melebar sampai ujung layar seperti bagian
   lain situs ini yang memang dirancang lebar (kartu, tabel admin).
   ============================================================================ */

.footer-legal {
  margin-top: 0.6rem !important;
  display: flex;
  justify-content: center;
  gap: 0.6rem;
}

.footer-legal a {
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.footer-legal a:hover,
.footer-legal a:focus-visible {
  color: var(--gold);
  border-bottom-color: var(--gold-muted);
}

.legal-header {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-3xl) var(--container-padding) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.legal-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  padding: 0.3rem 0.65rem 0.3rem 0.5rem;
  border: 1px solid var(--status-progress);
  background: var(--status-progress-bg);
  color: var(--status-progress);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
}

.legal-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.legal-header h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}

.legal-meta {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.87rem;
}

.legal-bagian {
  max-width: var(--container-max);
  margin: 0 auto var(--space-3xl);
  padding: 0 var(--container-padding);
}

.legal-grid {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: start;
}

.legal-toc {
  position: sticky;
  top: calc(var(--space-lg) + 72px);
  padding: 1.1rem 1.2rem;
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
}

.legal-toc h3 {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}

.legal-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  counter-reset: legal-toc;
}

.legal-toc li {
  counter-increment: legal-toc;
  display: flex;
  gap: 0.55rem;
  align-items: baseline;
}

.legal-toc li::before {
  content: counter(legal-toc, decimal-leading-zero);
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gold);
  flex: none;
}

.legal-toc a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.87rem;
  line-height: 1.4;
  border-bottom: 1px solid transparent;
}

.legal-toc a:hover,
.legal-toc a:focus-visible {
  color: var(--text-primary);
  border-bottom-color: var(--gold-muted);
}

.legal-isi {
  max-width: 68ch;
  min-width: 0;
}

.legal-pasal {
  margin-top: var(--space-2xl);
  scroll-margin-top: calc(var(--space-lg) + 72px);
}

.legal-pasal:first-child {
  margin-top: 0;
}

.legal-pasal > h3 {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 0.85rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--glass-border);
}

.legal-no {
  flex: none;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  font-size: 0.95rem;
}

.legal-pasal h4 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 1.2rem 0 0.4rem;
}

.legal-pasal p {
  margin: 0 0 0.85rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.legal-pasal ul {
  margin: 0 0 0.95rem;
  padding-left: 1.15rem;
  color: var(--text-secondary);
  line-height: 1.65;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.legal-pasal li::marker {
  color: var(--glass-border-hover);
}

.legal-pasal strong {
  color: var(--text-primary);
  font-weight: 700;
}

.legal-tabel {
  margin: 0.3rem 0 1.1rem;
}

.legal-tabel .admin-table th,
.legal-tabel .admin-table td {
  padding: 0.75rem 0.9rem;
  font-size: 0.86rem;
}

.admin-badge.ya {
  background: var(--status-done-bg);
  color: var(--status-done);
  border: 1px solid var(--status-done);
}

.admin-badge.tidak {
  background: var(--status-rejected-bg);
  color: var(--status-rejected);
  border: 1px solid var(--status-rejected);
}

.admin-badge.sebagian {
  background: var(--status-progress-bg);
  color: var(--status-progress);
  border: 1px solid var(--status-progress);
}

.legal-sorot,
.legal-penting {
  margin: 1.2rem 0;
  padding: 1.05rem 1.25rem;
}

.legal-sorot {
  background: var(--gold-surface);
  border-left: 3px solid var(--gold);
}

.legal-penting {
  background: var(--red-surface);
  border-left: 3px solid var(--red-bright);
}

.legal-sorot ul,
.legal-sorot p,
.legal-penting p { margin-bottom: 0; }

.legal-sorot ul { padding-left: 1rem; }

.legal-sorot ul { gap: 0.6rem; }
.legal-sorot li::marker { color: var(--gold-muted); }

.legal-penting p + p { margin-top: 0.75rem; }

/* Placeholder que menandai isian yang belum diputuskan pengurus. Sengaja
   mencolok -- kalau ini masih terlihat di produksi, itu tandanya draf belum
   ditinjau. */
.legal-isian {
  font-weight: 700;
  color: var(--gold);
  background: var(--gold-surface);
  border-bottom: 1.5px dashed var(--gold-muted);
  padding: 0 0.2rem;
}

@media (max-width: 900px) {
  .legal-grid {
    grid-template-columns: 1fr;
  }

  .legal-toc {
    position: static;
    top: auto;
  }

  .legal-toc ol {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0.4rem 1.25rem;
  }

  .legal-isi {
    max-width: none;
  }
}

@media (max-width: 560px) {
  .legal-pasal > h3 {
    font-size: 1.05rem;
  }

  .legal-toc ol {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   KOTAK ISIAN -- menggantikan gaya sebaris yang berulang 42 kali
   ----------------------------------------------------------------------------
   Aturan global `input, textarea, select` di awal berkas memberi latar transparan,
   tepi 1.5px, dan radius-md. Panel admin serta modal menghendaki yang lebih rapat:
   latar pekat, tepi 1px, radius-sm. Dulu itu ditulis sebaris di 42 tempat sekaligus.

   `font-family: inherit` TIDAK diulang di sini -- aturan global sudah memberikannya,
   dan empat gaya sebaris yang menulisnya ulang memang mubazir.

   Spesifisitas: kelas (0,1,0) menang atas selektor elemen global (0,0,1), jadi
   pemindahan ini tidak mengubah hasil akhir. Yang perlu diwaspadai hanya selektor dua
   tingkat seperti `.aspirasi-form textarea` (0,1,1) -- sudah diperiksa, tidak ada kotak
   isian ini yang berada di dalamnya.
   ============================================================================ */

.input-kotak {
  width: 100%;
  padding: 0.85rem;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
}

/* Latar tersier: untuk kotak yang berada di dalam panel yang latarnya sudah sekunder. */
.input-kotak--tersier { background: var(--bg-tertiary); }

/* Ada tombol ikon di dalam kotaknya (mis. tombol lihat kata sandi). */
.input-kotak--ikon { padding-right: 2.5rem; }

/* Kotak rapat untuk baris penyaring. */
.input-kotak--rapat { padding: 0.6rem; }

/* Sudut lebih tumpul, mengikuti kotak besar di sekitarnya. */
.input-kotak--tumpul { border-radius: var(--radius-md); }

/* Jarak bawah untuk form bertumpuk. */
.input-kotak--berjarak { margin-bottom: 1rem; }

/* Mengisi dua kolom pada grid form. */
.input-kotak--dua-kolom { grid-column: span 2; }

/* ============================================================================
   SPANDUK ACARA (beranda)
   ----------------------------------------------------------------------------
   Di ATAS hero. Terbit hanya kalau pengurus menekan Umumkan di Kelola Kegiatan;
   isinya diisi pasangSpandukBeranda() di app.js, untuk pemilu maupun kegiatan. Dua tata letak dari satu markup:
     - tanpa gambar : strip ringkas (titik, judul, ajakan, panah)
     - .bergambar   : poster -- gambar mengisi kartu, teks menumpuk di bawahnya
                      di atas gradasi supaya tetap terbaca di gambar apa pun

   Pembatas lebarnya dibawa sendiri (`max-width` + `padding`): halaman ini tidak
   punya pembungkus bersama, dan elemen baru tanpa itu melar sampai tepi layar --
   jebakan yang sudah dua kali terjadi.

   `[hidden]` WAJIB ditulis ulang di sini: bawaan peramban `[hidden]{display:none}`
   adalah selektor atribut telanjang yang KALAH dari `display:flex` di bawahnya.
   ============================================================================ */

.spanduk-acara[hidden] { display: none; }
.spanduk-gambar[hidden] { display: none; }

.spanduk-acara {
  position: relative;
  display: block;
  max-width: var(--container-max);
  margin: var(--space-lg) auto 0;
  border-radius: 20px;
  border: 1px solid var(--gold-muted);
  background: var(--gold-surface);
  color: var(--text-primary);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.spanduk-acara:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.18);
}

/* Isi: strip ringkas (default) */
.spanduk-isi {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.25rem;
}

.spanduk-titik {
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.18);
  animation: spandukDenyut 1.8s ease-in-out infinite;
}

/* min-width:0 supaya nama pemilu yang panjang boleh dipotong, bukan mendorong
   panahnya keluar kartu. */
.spanduk-teks {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.spanduk-teks strong {
  font-family: var(--font-heading, inherit);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.spanduk-teks > span {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gold);
}

.spanduk-panah {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--gold);
  transition: transform 0.2s ease;
}
.spanduk-acara:hover .spanduk-panah { transform: translateX(3px); }

/* --- Varian poster (ada gambar) ------------------------------------------ */

.spanduk-acara.bergambar {
  background: #0d0e14;
  border-color: rgba(212, 175, 55, 0.35);
}

/* Poster ditampilkan UTUH, bukan dipotong (diubah 20 Sep 2026).
   Dulu `object-fit: cover` pada kotak 21:9 -- dan itu MEMOTONG poster yang
   diunggah pengurus. Terukur: berkas 1200x400 yang sudah sesuai anjuran pun
   kehilangan 50px di atas dan 50px di bawah, karena kotaknya di layar lebar
   jadi 1440x380 (sekitar 3,8:1) akibat max-height memotong rasio 21:9.
   Logo sekolah di pojok atas terpotong, dan tanggalnya di bawah ikut hilang.

   `contain` + rasio 3:1 dipilih karena poster PK datang dalam bentuk apa saja --
   kadang persegi dari templat Instagram. `cover` akan memotongnya jadi pita
   horizontal tanpa ada yang bisa mencegahnya; `contain` cuma menyisakan bilah
   gelap di samping, dan bilah itu sewarna kartunya sehingga tidak terlihat
   seperti kesalahan. Berkas 1200x400 yang dianjurkan pas persis tanpa bilah. */
.spanduk-acara.bergambar .spanduk-gambar {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 1;
  max-height: 480px;
  object-fit: contain;
  background: #0d0e14;
}

/* Judul TURUN ke bawah gambar, tidak lagi menumpang di atasnya.
   Gradasi gelap yang dulu dipakai menimpa sepertiga bawah poster, dan di situlah
   pembuat poster biasanya menaruh tanggal. Hasilnya tulisan yang paling perlu
   dibaca justru yang paling tersamar. Bilah sendiri juga menghapus dobel-teks:
   judul acara tidak lagi bertumpuk di atas judul yang sudah tercetak di poster. */
.spanduk-acara.bergambar .spanduk-isi {
  position: static;
  padding: 1rem 1.25rem;
  background: rgba(13, 14, 20, 0.96);
  border-top: 1px solid rgba(212, 175, 55, 0.22);
}
.spanduk-acara.bergambar .spanduk-teks strong {
  font-size: clamp(1.15rem, 2.4vw, 1.7rem);
  white-space: normal;
  line-height: 1.2;
}
.spanduk-acara.bergambar .spanduk-teks > span { font-size: 0.95rem; }

@keyframes spandukDenyut {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
  .spanduk-titik { animation: none; }
  .spanduk-acara, .spanduk-panah { transition: none; }
  .spanduk-acara:hover { transform: none; }
  .spanduk-acara:hover .spanduk-panah { transform: none; }
}

/* Layar sempit: gutter kiri-kanan, gambar lebih tinggi supaya tidak jadi pita
   tipis. Tangga responsifnya ditulis lengkap karena blok ini di akhir berkas. */
@media (max-width: 768px) {
  .spanduk-acara {
    margin: var(--space-md) var(--container-padding) 0;
    border-radius: 16px;
  }
  .spanduk-isi { padding: 0.9rem 1rem; gap: 0.75rem; }
  .spanduk-teks strong { font-size: 0.95rem; }
  .spanduk-teks > span { font-size: 0.8rem; }
  /* Rasionya sengaja SAMA dengan layar lebar. Kalau di sini dibuat 16:9 sedangkan
     gambarnya 3:1, `contain` akan menyisakan bilah gelap tebal di atas dan bawah
     tanpa membuat posternya sedikit pun lebih besar -- ruang terbuang, bukan
     tampilan yang lebih baik. */
  .spanduk-acara.bergambar .spanduk-gambar { aspect-ratio: 3 / 1; max-height: none; }
  .spanduk-acara.bergambar .spanduk-isi { padding: 0.9rem 1rem; }
}

/* ============================================================================
   PANEL SPANDUK BERANDA DI KELOLA KEGIATAN (panel admin)
   ----------------------------------------------------------------------------
   Pusat pengaturan spanduk di atas hero, untuk acara apa pun. Kiri: daftar
   kandidat (pemilu relevan + kegiatan mendatang/berlangsung) dengan tombol
   Umumkan. Kanan: gambar spanduk + Sembunyikan. Digambar renderSpandukAdmin().
   ============================================================================ */

.spanduk-admin[hidden] { display: none; }

.spanduk-admin {
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.4rem 1.4rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--gold-muted);
  background: var(--gold-surface);
}

.sa-kepala {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.sa-kepala h3 {
  margin: 0;
  font-family: var(--font-heading, inherit);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-primary);
}

/* Terbit atau belum dibawa TULISAN; warna cuma mempercepat pemindaian. */
.sa-lencana {
  flex: none;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--bg-tertiary);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}
.sa-lencana.terbit {
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.15);
  color: var(--gold);
}


.sa-kandidat {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Satu acara = satu butir yang bisa dibuka. Pembungkusnya yang memegang garis tepi,
   bukan tombolnya -- supaya panel aksinya terlihat menyatu dengan barisnya, bukan
   melayang di bawahnya. */
.sa-butir {
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--bg-tertiary);
  overflow: hidden;
}
.sa-butir.aktif { border-color: var(--gold-muted); }

/* `.sa-baris` sekarang <button>: gaya tombol bawaan peramban harus dinolkan dulu,
   kalau tidak fontnya mengecil dan teksnya rata tengah. */
.sa-baris {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}
.sa-baris:hover { background-color: var(--bg-card-hover); }
.sa-baris:focus-visible {
  outline: none;
  background-color: var(--bg-card-hover);
  box-shadow: inset 0 0 0 2px var(--gold-muted);
}

.sa-panah {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--text-muted);
  transition: transform var(--transition-fast);
}
.sa-panah.buka { transform: rotate(180deg); }

.sa-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0 0.9rem 0.9rem;
  border-top: 1px solid var(--glass-border);
  padding-top: 0.9rem;
}

/* min-width:0 supaya judul panjang menyusut, bukan mendorong tombolnya keluar. */
.sa-baris-teks {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.sa-baris-teks strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sa-baris-teks span {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.sa-gambar-wrap { display: flex; flex-direction: column; gap: 0.75rem; }

.sa-gambar {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--bg-tertiary);
}
.sa-gambar-kosong {
  border-style: dashed;
  border-color: var(--gold-muted);
}

.sa-aksi { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* --- Tombol "Lupa kata sandi" di form login pengurus ---------------------- */
.tautan-lupa {
  display: block;
  margin: 0.85rem auto 0;
  padding: 0.25rem 0.4rem;
  background: none;
  border: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-decoration: underline;
  cursor: pointer;
  transition: color var(--transition-fast);
}
.tautan-lupa:hover { color: var(--gold); }

.pesan-lupa[hidden] { display: none; }
.pesan-lupa {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-secondary);
  text-align: center;
}

/* --- Saring kategori & urutan di halaman Pantau Aspirasi ------------------ */
.aspirasi-urut-group {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  /* Mendorong dirinya + kotak cari ke tepi kanan, jadi barisnya terbaca sebagai
     "penyaring status di kiri, pengatur tampilan di kanan" -- bukan tiga kelompok
     yang terlempar rata oleh space-between. */
  margin-left: auto;
}

.aspirasi-select {
  /* Ukurannya MENYALIN .filter-btn persis (padding, font, radius) supaya sebaris
     dengan pil status di sebelahnya. Angka sendiri membuat tingginya meleset
     satu-dua piksel, dan itu yang bikin barisnya terlihat berantakan. */
  padding: 0.45rem 2rem 0.45rem 1rem;
  font-size: 0.825rem;
  font-weight: 500;
  border-radius: var(--radius-full);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);

  /* `color-scheme: dark` yang membuat DAFTAR dropdown-nya ikut gelap. Daftar itu
     digambar sistem operasi, bukan halaman ini -- tanpa baris ini ia tampil abu-abu
     terang dengan sorotan biru Windows, menabrak seluruh tema. Menata `option`
     saja tidak cukup; sebagian peramban mengabaikannya. */
  color-scheme: dark;

  /* Panah bawaan dimatikan lalu digambar sendiri, supaya warnanya ikut tema.
     background-color dan background-image DIPISAH -- properti singkat `background`
     akan menghapus gambarnya (lihat catatan di CLAUDE.md). */
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--bg-card);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239e9690' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 0.9rem;
}

.aspirasi-select:hover {
  border-color: var(--glass-border-hover);
  color: var(--text-primary);
  background-color: var(--bg-card-hover);
}

/* Cincin fokus bawaan peramban tebal dan berlapis dua. Diganti garis emas tipis
   plus bayangan lembut -- masih jelas terlihat saat berpindah pakai Tab, tanpa
   menutupi kontrolnya. Fokusnya TIDAK dihapus, cuma diperhalus. */
.aspirasi-select:focus-visible {
  outline: none;
  border-color: var(--gold-muted);
  color: var(--text-primary);
  box-shadow: 0 0 0 3px var(--gold-surface);
}
.aspirasi-select:focus { outline: none; }

/* Cadangan untuk peramban yang memang menata <option> sendiri. */
.aspirasi-select option {
  background-color: var(--bg-elevated);
  color: var(--text-primary);
}

/* --- Rentang tanggal di Kelola Aspirasi ----------------------------------- */
.rentang-tanggal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.rentang-tanggal label {
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.rentang-tanggal input[type="date"] {
  width: auto;
  color-scheme: dark;   /* tanpa ini pemilih tanggal bawaan peramban tampil putih menyala */
}
.rentang-hitung {
  font-size: 0.85rem;
  color: var(--gold);
  font-weight: 600;
}

@media (max-width: 640px) {
  .aspirasi-urut-group { width: 100%; }
  .aspirasi-select { flex: 1 1 auto; min-width: 0; }
  .rentang-tanggal input[type="date"] { flex: 1 1 auto; min-width: 0; }
}

/* --- Penanda baris yang datang dari situs pemilu ------------------------- */
.lencana-sumber {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--gold-muted);
  background-color: var(--gold-surface);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gold);
  vertical-align: middle;
  white-space: nowrap;
}