/* ============================================
   MTsN 1 Wonogiri — Portal Madrasah
   main.css — Multi-Theme Modern Design
   Themes: ocean (default) | navy | rose | forest
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Fraunces:ital,opsz,wght@0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,600;1,9..144,700&family=Scheherazade+New:wght@700&display=swap');

/* ============================================
   THEME TOKENS
   ============================================ */

/* DEFAULT: Ocean Blue */
:root {
  --primary:        #0369a1;
  --primary-mid:    #0284c7;
  --primary-light:  #38bdf8;
  --primary-pale:   #f0f9ff;
  --primary-glass:  rgba(3,105,161,0.08);

  --accent:         #f59e0b;
  --accent-bright:  #fbbf24;

  --bg:             #ffffff;
  --bg-alt:         #f8fafc;
  --bg-dark:        #0c1a2e;
  --bg-dark2:       #0f2744;

  --surface:        #ffffff;
  --border:         #e2e8f0;

  --text:           #0f172a;
  --text-mid:       #334155;
  --text-soft:      #64748b;
  --text-muted:     #94a3b8;

  --hero-from:      rgba(10,25,55,0.87);
  --hero-to:        rgba(3,105,161,0.82);
  --hero-accent:    rgba(56,189,248,0.15);

  --footer-bg:      #0c1a2e;
  --footer-border:  rgba(255,255,255,0.07);

  --shadow-primary: 0 8px 24px rgba(3,105,161,0.25);
  --shadow-hover:   0 16px 48px rgba(0,0,0,0.12);
}

/* THEME: Navy Gold */
[data-theme="navy"] {
  --primary:        #1e3a5f;
  --primary-mid:    #253d5b;
  --primary-light:  #93c5fd;
  --primary-pale:   #eff6ff;
  --primary-glass:  rgba(30,58,95,0.07);

  --accent:         #c9960c;
  --accent-bright:  #e8b120;

  --bg:             #ffffff;
  --bg-alt:         #f8f9fb;
  --bg-dark:        #0d1b2a;
  --bg-dark2:       #1b2d44;

  --surface:        #ffffff;
  --border:         #e4e8f0;

  --text:           #0d1b2a;
  --text-mid:       #2d3a4d;
  --text-soft:      #5a6a80;
  --text-muted:     #8a9ab0;

  --hero-from:      rgba(10,18,35,0.90);
  --hero-to:        rgba(30,58,95,0.85);
  --hero-accent:    rgba(201,150,12,0.12);

  --footer-bg:      #0d1b2a;
  --footer-border:  rgba(255,255,255,0.06);

  --shadow-primary: 0 8px 24px rgba(30,58,95,0.28);
  --shadow-hover:   0 16px 48px rgba(0,0,0,0.10);
}

/* THEME: Slate Rose */
[data-theme="rose"] {
  --primary:        #9f1239;
  --primary-mid:    #be123c;
  --primary-light:  #fb7185;
  --primary-pale:   #fff1f2;
  --primary-glass:  rgba(159,18,57,0.07);

  --accent:         #d97706;
  --accent-bright:  #f59e0b;

  --bg:             #ffffff;
  --bg-alt:         #fafafa;
  --bg-dark:        #1c0a14;
  --bg-dark2:       #2d1020;

  --surface:        #ffffff;
  --border:         #fce7f0;

  --text:           #1c0a14;
  --text-mid:       #3d1a28;
  --text-soft:      #7a4055;
  --text-muted:     #b07085;

  --hero-from:      rgba(20,5,12,0.90);
  --hero-to:        rgba(120,10,40,0.85);
  --hero-accent:    rgba(251,113,133,0.12);

  --footer-bg:      #1c0a14;
  --footer-border:  rgba(255,255,255,0.06);

  --shadow-primary: 0 8px 24px rgba(159,18,57,0.28);
  --shadow-hover:   0 16px 48px rgba(0,0,0,0.10);
}

/* THEME: Forest */
[data-theme="forest"] {
  --primary:        #14532d;
  --primary-mid:    #166534;
  --primary-light:  #4ade80;
  --primary-pale:   #f0fdf4;
  --primary-glass:  rgba(20,83,45,0.07);

  --accent:         #92400e;
  --accent-bright:  #b45309;

  --bg:             #fafdf8;
  --bg-alt:         #f0fdf4;
  --bg-dark:        #071a0e;
  --bg-dark2:       #0f2d18;

  --surface:        #ffffff;
  --border:         #dcfce7;

  --text:           #071a0e;
  --text-mid:       #14401e;
  --text-soft:      #365f40;
  --text-muted:     #6a9e78;

  --hero-from:      rgba(5,15,8,0.90);
  --hero-to:        rgba(20,83,45,0.86);
  --hero-accent:    rgba(74,222,128,0.10);

  --footer-bg:      #071a0e;
  --footer-border:  rgba(255,255,255,0.06);

  --shadow-primary: 0 8px 24px rgba(20,83,45,0.28);
  --shadow-hover:   0 16px 48px rgba(0,0,0,0.10);
}

/* THEME: Sunset (orange terang - benar-benar berbeda) */
[data-theme="sunset"] {
  --primary:        #f97316;
  --primary-mid:    #fb923c;
  --primary-light:  #fdba74;
  --primary-pale:   #fff7ed;
  --primary-glass:  rgba(249,115,22,0.12);

  --accent:         #2563eb;
  --accent-bright:  #3b82f6;

  --bg:             #ffffff;
  --bg-alt:         #fffbeb;
  --bg-dark:        #7b341e;
  --bg-dark2:       #9a4d2e;

  --surface:        #ffffff;
  --border:         #fed7aa;

  --text:           #422006;
  --text-mid:       #854d0e;
  --text-soft:      #b45309;
  --text-muted:     #d97706;

  --hero-from:      rgba(123,52,30,0.92);
  --hero-to:        rgba(249,115,22,0.88);
  --hero-accent:    rgba(253,186,116,0.15);

  --footer-bg:      #422006;
  --footer-border:  rgba(255,255,255,0.06);

  --shadow-primary: 0 8px 24px rgba(249,115,22,0.3);
  --shadow-hover:   0 16px 48px rgba(0,0,0,0.12);
}

/* THEME: Sapphire (biru royal - lebih gelap dan elegan) */
[data-theme="sapphire"] {
  --primary:        #1e3a8a;
  --primary-mid:    #1e4b8a;
  --primary-light:  #3b82f6;
  --primary-pale:   #dbeafe;
  --primary-glass:  rgba(30,58,138,0.12);

  --accent:         #f59e0b;
  --accent-bright:  #fbbf24;

  --bg:             #f8fafc;
  --bg-alt:         #f1f5f9;
  --bg-dark:        #0f1a36;
  --bg-dark2:       #1a2745;

  --surface:        #ffffff;
  --border:         #bfdbfe;

  --text:           #0f1a36;
  --text-mid:       #1e3a5f;
  --text-soft:      #2e4a7a;
  --text-muted:     #4b6b9c;

  --hero-from:      rgba(15,26,54,0.95);
  --hero-to:        rgba(30,58,138,0.9);
  --hero-accent:    rgba(59,130,246,0.12);

  --footer-bg:      #0f1a36;
  --footer-border:  rgba(255,255,255,0.06);

  --shadow-primary: 0 8px 24px rgba(30,58,138,0.3);
  --shadow-hover:   0 16px 48px rgba(0,0,0,0.12);
}

/* THEME: Mint (hijau segar - benar-benar hijau) */
[data-theme="mint"] {
  --primary:        #059669;
  --primary-mid:    #10b981;
  --primary-light:  #34d399;
  --primary-pale:   #d1fae5;
  --primary-glass:  rgba(5,150,105,0.12);

  --accent:         #f97316;
  --accent-bright:  #fb923c;

  --bg:             #ffffff;
  --bg-alt:         #f0fdf4;
  --bg-dark:        #064e3b;
  --bg-dark2:       #0b6b4b;

  --surface:        #ffffff;
  --border:         #a7f3d0;

  --text:           #064e3b;
  --text-mid:       #0b6b4b;
  --text-soft:      #2b8c6c;
  --text-muted:     #6ab89b;

  --hero-from:      rgba(6,78,59,0.92);
  --hero-to:        rgba(5,150,105,0.88);
  --hero-accent:    rgba(52,211,153,0.15);

  --footer-bg:      #064e3b;
  --footer-border:  rgba(255,255,255,0.06);

  --shadow-primary: 0 8px 24px rgba(5,150,105,0.3);
  --shadow-hover:   0 16px 48px rgba(0,0,0,0.12);
}

/* THEME: Midnight (dark mode - benar-benar gelap) */
[data-theme="midnight"] {
  --primary:        #8b5cf6;
  --primary-mid:    #a78bfa;
  --primary-light:  #c4b5fd;
  --primary-pale:   #ede9fe;
  --primary-glass:  rgba(139,92,246,0.15);

  --accent:         #f59e0b;
  --accent-bright:  #fbbf24;

  --bg:             #0b0f17;
  --bg-alt:         #151e2f;
  --bg-dark:        #03050a;
  --bg-dark2:       #0a0f1a;

  --surface:        #1a2436;
  --border:         #2d374b;

  --text:           #f1f5f9;
  --text-mid:       #cbd5e1;
  --text-soft:      #94a3b8;
  --text-muted:     #64748b;

  --hero-from:      rgba(3,5,10,0.98);
  --hero-to:        rgba(11,15,23,0.95);
  --hero-accent:    rgba(139,92,246,0.12);

  --footer-bg:      #03050a;
  --footer-border:  rgba(255,255,255,0.08);

  --shadow-primary: 0 8px 24px rgba(139,92,246,0.25);
  --shadow-hover:   0 16px 48px rgba(0,0,0,0.5);
}

/* THEME: Neon (vibrant pink-purple) */
[data-theme="neon"] {
  --primary:        #db2777;
  --primary-mid:    #ec4899;
  --primary-light:  #f9a8d4;
  --primary-pale:   #fdf2f8;
  --primary-glass:  rgba(219,39,119,0.12);

  --accent:         #10b981;
  --accent-bright:  #34d399;

  --bg:             #ffffff;
  --bg-alt:         #fdf4ff;
  --bg-dark:        #831843;
  --bg-dark2:       #9d174d;

  --surface:        #ffffff;
  --border:         #fbcfe8;

  --text:           #831843;
  --text-mid:       #9d174d;
  --text-soft:      #be185d;
  --text-muted:     #db2777;

  --hero-from:      rgba(131,24,67,0.92);
  --hero-to:        rgba(219,39,119,0.88);
  --hero-accent:    rgba(249,168,212,0.15);

  --footer-bg:      #831843;
  --footer-border:  rgba(255,255,255,0.06);

  --shadow-primary: 0 8px 24px rgba(219,39,119,0.3);
  --shadow-hover:   0 16px 48px rgba(0,0,0,0.12);
}

/* THEME: Terracotta (earth tone - coklat kemerahan) */
[data-theme="terracotta"] {
  --primary:        #b45309;
  --primary-mid:    #c2410c;
  --primary-light:  #ea580c;
  --primary-pale:   #fff7ed;
  --primary-glass:  rgba(180,83,9,0.12);

  --accent:         #0b6b4b;
  --accent-bright:  #0f8b62;

  --bg:             #fef3e2;
  --bg-alt:         #fde9d9;
  --bg-dark:        #744223;
  --bg-dark2:       #8b4e2a;

  --surface:        #ffffff;
  --border:         #e6c9b8;

  --text:           #44250e;
  --text-mid:       #744223;
  --text-soft:      #9c7a67;
  --text-muted:     #bea693;

  --hero-from:      rgba(68,37,14,0.92);
  --hero-to:        rgba(180,83,9,0.88);
  --hero-accent:    rgba(234,88,12,0.12);

  --footer-bg:      #44250e;
  --footer-border:  rgba(255,255,255,0.06);

  --shadow-primary: 0 8px 24px rgba(180,83,9,0.3);
  --shadow-hover:   0 16px 48px rgba(0,0,0,0.12);
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Plus Jakarta Sans', sans-serif;
  background:var(--bg); color:var(--text);
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
  transition:background 0.4s, color 0.4s;
}
img { max-width:100%; display:block; }
a { text-decoration:none; }
.container { max-width:1280px; margin:0 auto; padding:0 40px; }

/* ============================================
   TOPBAR
   ============================================ */
.topbar { background:var(--bg-dark); padding:8px 0; position:relative; }
.topbar::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--primary), var(--primary-light), var(--accent-bright), var(--primary-light), var(--primary));
  background-size:200%;
  animation:shimmerBar 4s linear infinite;
}
@keyframes shimmerBar { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.topbar-inner {
  max-width:1280px; margin:0 auto; padding:0 40px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;
}
.topbar-left { display:flex; gap:20px; align-items:center; font-size:0.72rem; color:rgba(255,255,255,0.5); }
.topbar-left span { display:flex; align-items:center; gap:5px; }
.topbar-left .dot { width:3px; height:3px; background:rgba(255,255,255,0.2); border-radius:50%; }
.topbar-right { display:flex; gap:16px; align-items:center; }
.topbar-right a { color:rgba(255,255,255,0.5); font-size:0.71rem; font-weight:500; transition:color 0.2s; }
.topbar-right a:hover { color:var(--accent-bright); }
.topbar-right .sep { width:1px; height:12px; background:rgba(255,255,255,0.15); }
.topbar-right .login-btn {
  background:linear-gradient(135deg, var(--accent), var(--accent-bright));
  color:var(--bg-dark) !important;
  padding:5px 16px; border-radius:4px;
  font-weight:700; font-size:0.7rem; letter-spacing:0.5px;
  transition:all 0.2s;
}
.topbar-right .login-btn:hover { transform:translateY(-1px); opacity:0.9; }

/* ============================================
   HEADER
   ============================================ */
header {
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:200; transition:all 0.3s;
}
header.scrolled { box-shadow:0 4px 32px rgba(0,0,0,0.08); border-bottom-color:transparent; }
.header-inner {
  max-width:1280px; margin:0 auto; padding:0 40px;
  display:flex; justify-content:space-between; align-items:center; height:70px;
}
.logo { display:flex; align-items:center; gap:14px; }
.logo-icon {
  width:46px; height:46px;
  background:linear-gradient(135deg, var(--primary), var(--primary-mid));
  border-radius:10px; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-primary); flex-shrink:0; overflow:hidden; position:relative;
  transition:all 0.4s;
}

.logo-icon.no-bg {
  background:none !important;
  box-shadow:none !important;
}
.logo-icon.no-bg::before { display:none; }

.logo-icon::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,0.18),transparent 60%); }
.logo-icon span { font-family:'Scheherazade New',serif; color:rgba(255,255,255,0.95); font-size:1.5rem; position:relative; z-index:1; }
.logo-text .nama { font-weight:800; font-size:1rem; color:var(--text); letter-spacing:-0.3px; line-height:1.1; transition:color 0.4s; }
.logo-text .sub { font-size:0.62rem; color:var(--text-muted); letter-spacing:1.2px; text-transform:uppercase; margin-top:2px; }

#mainNav { display:flex; gap:1px; align-items:center; }
#mainNav > a, #mainNav > .nav-dropdown > .nav-dropdown-toggle { color:var(--text-soft); font-size:0.84rem; font-weight:500; padding:7px 13px; border-radius:6px; transition:all 0.2s; position:relative; }
#mainNav > a:hover, #mainNav > .nav-dropdown > .nav-dropdown-toggle:hover { color:var(--primary); background:var(--primary-pale); }
#mainNav > a.active, #mainNav > .nav-dropdown > .nav-dropdown-toggle.active { color:var(--primary); font-weight:700; background:var(--primary-pale); }
#mainNav > a.active::after {
  content:''; position:absolute; bottom:4px; left:50%; transform:translateX(-50%);
  width:18px; height:2px; background:var(--primary-light); border-radius:2px;
}
.nav-cta {
  background:linear-gradient(135deg, var(--primary), var(--primary-mid)) !important;
  color:#fff !important; padding:9px 22px !important; border-radius:8px !important;
  font-weight:700 !important; margin-left:8px;
  box-shadow:var(--shadow-primary); transition:all 0.25s !important;
}
.nav-cta:hover { transform:translateY(-1px) !important; box-shadow:0 12px 28px rgba(0,0,0,0.2) !important; }

.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.hamburger span { display:block; width:22px; height:2px; background:var(--text); border-radius:2px; transition:all 0.3s; }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.mobile-nav { display:none; flex-direction:column; background:#fff; border-top:1px solid var(--border); padding:16px 24px 24px; box-shadow:0 8px 32px rgba(0,0,0,0.1); }
.mobile-nav.open { display:flex; }
.mobile-nav a { color:var(--text-mid); padding:12px 0; font-size:0.95rem; font-weight:500; border-bottom:1px solid var(--border); transition:color 0.2s; }
.mobile-nav a:hover { color:var(--primary); }
.mobile-nav .nav-cta { margin-top:14px; text-align:center; border-bottom:none; padding:12px !important; }

/* ===== DROPDOWN MENU - PASTIKAN INI ADA ===== */
.nav-dropdown {
  position: relative;
  display: inline-block;
}

.nav-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  white-space: nowrap;
  padding: 7px 13px;
  color: var(--text-soft);
  font-size: 0.84rem;
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.2s;
}

.nav-dropdown-toggle:hover {
  color: var(--primary);
  background: var(--primary-pale);
}

.nav-dropdown.open .nav-dropdown-toggle {
  color: var(--primary);
  font-weight: 700;
  background: var(--primary-pale);
}

.nav-arrow {
  font-size: 0.7rem;
  transition: transform 0.3s ease;
  display: inline-block;
  margin-left: 4px;
}

.nav-dropdown.open .nav-arrow {
  transform: rotate(180deg) !important;
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 0;
  min-width: 200px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  z-index: 9999;
  display: none; /* Default hidden */
  flex-direction: column;
}

.nav-dropdown.open .nav-dropdown-menu {
  display: flex !important;
}

.nav-dropdown-menu a {
  display: block;
  padding: 10px 20px;
  color: var(--text-soft);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
}

.nav-dropdown-menu a:hover {
  background: var(--primary-glass);
  color: var(--primary);
}

/* Hapus CSS force hide yang lama (pastikan sudah dikomentari/dihapus) */

/* ============================================
   BUTTONS
   ============================================ */
.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(135deg, var(--primary), var(--primary-mid));
  color:#fff; padding:13px 28px; border-radius:8px; font-weight:700; font-size:0.88rem;
  box-shadow:var(--shadow-primary); transition:all 0.25s;
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(0,0,0,0.2); }

.btn-accent {
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(135deg, var(--accent), var(--accent-bright));
  color:var(--bg-dark); padding:13px 28px; border-radius:8px; font-weight:700; font-size:0.88rem;
  box-shadow:0 4px 16px rgba(0,0,0,0.15); transition:all 0.25s;
}
.btn-accent:hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(0,0,0,0.2); }

.btn-outline-white {
  display:inline-flex; align-items:center; gap:8px;
  border:1.5px solid rgba(255,255,255,0.35); color:rgba(255,255,255,0.9);
  padding:12px 28px; border-radius:8px; font-weight:500; font-size:0.88rem; transition:all 0.25s;
}
.btn-outline-white:hover { border-color:rgba(255,255,255,0.7); background:rgba(255,255,255,0.08); }

/* ============================================
   SECTION HEADER
   ============================================ */
.sec-head { text-align:center; margin-bottom:56px; }
.sec-label {
  display:inline-flex; align-items:center;
  background:var(--primary-glass); border:1px solid rgba(0,0,0,0.06);
  color:var(--primary); font-size:0.68rem; letter-spacing:1.8px;
  text-transform:uppercase; font-weight:700; padding:5px 14px;
  border-radius:100px; margin-bottom:14px; transition:all 0.4s;
}
.sec-title {
  font-family:'Fraunces',serif; font-size:2.4rem; font-weight:900;
  color:var(--text); letter-spacing:-0.4px; line-height:1.12; transition:color 0.4s;
}
.sec-title span { color:var(--primary); }
.sec-title em { color:var(--primary); font-style:italic; }
.sec-sub { color:var(--text-soft); font-size:0.95rem; line-height:1.7; margin-top:12px; max-width:540px; margin-left:auto; margin-right:auto; }

/* ============================================
   HERO
   ============================================ */
.hero {
  min-height:620px; display:flex; align-items:center;
  position:relative; overflow:hidden;
  background: url('https://images.unsplash.com/photo-1580582932707-520aed937b7b?w=1600&q=80') center/cover no-repeat;
}
/* overlay gradient — berubah sesuai tema */
.hero::before {
  content:''; position:absolute; inset:0; z-index:0;
  background: linear-gradient(150deg, var(--hero-from) 0%, var(--hero-to) 100%);
  transition: background 0.5s ease;
}
/* grid pattern overlay */
.hero-grid {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size:48px 48px;
}
/* glow accent */
.hero::after {
  content:''; position:absolute; width:700px; height:700px; z-index:1;
  background:radial-gradient(circle, var(--hero-accent) 0%, transparent 65%);
  top:-200px; right:-150px; pointer-events:none; transition:background 0.5s ease;
}
.hero-inner {
  max-width:1280px; margin:0 auto; padding:88px 40px;
  display:grid; grid-template-columns:1fr 390px;
  gap:60px; align-items:center; position:relative; z-index:2;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.2);
  color:rgba(255,255,255,0.85); font-size:0.7rem; font-weight:600;
  letter-spacing:1.5px; text-transform:uppercase;
  padding:6px 14px; border-radius:100px; margin-bottom:22px; backdrop-filter:blur(6px);
}
.hero-badge::before {
  content:''; width:6px; height:6px;
  background:var(--primary-light); border-radius:50%;
  animation:pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.7)} }
.hero h1 {
  font-family:'Fraunces',serif; font-size:3.8rem; font-weight:900;
  color:#fff; line-height:1.08; margin-bottom:18px; letter-spacing:-0.5px;
}
.hero h1 em { color:var(--accent-bright); font-style:italic; display:block; transition:color 0.4s; }
.hero-desc { color:rgba(255,255,255,0.65); font-size:0.97rem; line-height:1.78; max-width:500px; margin-bottom:40px; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; }

/* Hero Panel */
.hero-panel {
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.14);
  border-radius:16px; backdrop-filter:blur(16px); overflow:hidden;
}
.panel-head {
  padding:18px 22px; border-bottom:1px solid rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:space-between;
}
.panel-head-label { color:rgba(255,255,255,0.85); font-size:0.78rem; font-weight:700; }
.panel-live { display:flex; align-items:center; gap:5px; font-size:0.63rem; color:#4ade80; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; }
.panel-live::before { content:''; width:6px; height:6px; background:#4ade80; border-radius:50%; animation:blink 2s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.2} }
.stat-rows { padding:4px 0; }
.stat-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 22px; border-bottom:1px solid rgba(255,255,255,0.05); transition:background 0.2s;
}
.stat-row:last-child { border-bottom:none; }
.stat-row:hover { background:rgba(255,255,255,0.04); }
.stat-row .lbl { color:rgba(255,255,255,0.5); font-size:0.78rem; }
.stat-row .val { font-family:'Fraunces',serif; font-size:1.5rem; font-weight:700; color:var(--accent-bright); line-height:1; transition:color 0.4s; }
.panel-footer {
  margin:0 14px 14px; background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1); border-radius:10px;
  padding:14px 18px; display:flex; align-items:center; gap:12px;
}
.panel-footer .badge-a {
  background:linear-gradient(135deg, var(--accent), var(--accent-bright));
  color:var(--bg-dark); font-size:1.3rem; font-weight:900;
  width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  border-radius:6px; flex-shrink:0; transition:background 0.4s;
}
.panel-footer-text strong { color:var(--accent-bright); font-size:0.85rem; display:block; margin-bottom:2px; transition:color 0.4s; }
.panel-footer-text span { color:rgba(255,255,255,0.45); font-size:0.7rem; }

/* ============================================
   TICKER
   ============================================ */
.ticker { background:linear-gradient(135deg, var(--primary), var(--primary-mid)); padding:10px 0; overflow:hidden; transition:background 0.4s; }
.ticker-wrap { max-width:1280px; margin:0 auto; padding:0 40px; display:flex; gap:18px; align-items:center; }
.ticker-badge { display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,0.15); color:#fff; font-size:0.63rem; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; padding:4px 12px; border-radius:100px; flex-shrink:0; }
.ticker-track { overflow:hidden; flex:1; }
.ticker-track span { display:inline-block; white-space:nowrap; color:rgba(255,255,255,0.9); font-size:0.82rem; font-weight:500; animation:tickerScroll 50s linear infinite; }
@keyframes tickerScroll { 
  0%  { transform:translateX(0) } 
  100%{ transform:translateX(-100%) } 
}

/* ============================================
   PORTAL
   ============================================ */
.portal-section { background:var(--bg-alt); padding:80px 0; transition:background 0.4s; }
.portal-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.portal-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:34px 24px; text-align:center; display:block; color:var(--text);
  transition:all 0.3s; position:relative; overflow:hidden;
}
.portal-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,var(--primary-pale),transparent); opacity:0; transition:opacity 0.3s; }
.portal-card::after { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--primary),var(--primary-light)); transform:scaleX(0); transition:transform 0.35s; transform-origin:left; }
.portal-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-hover); border-color:transparent; }
.portal-card:hover::before { opacity:1; }
.portal-card:hover::after { transform:scaleX(1); }
.portal-ico { width:60px; height:60px; background:var(--primary-glass); border-radius:12px; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-size:1.7rem; border:1px solid rgba(0,0,0,0.05); transition:all 0.3s; position:relative; z-index:1; }
.portal-card:hover .portal-ico { background:linear-gradient(135deg,var(--primary),var(--primary-mid)); box-shadow:var(--shadow-primary); border-color:transparent; }
.portal-card h3 { font-size:0.97rem; font-weight:800; color:var(--text); margin-bottom:8px; position:relative; z-index:1; }
.portal-card p { font-size:0.78rem; color:var(--text-soft); line-height:1.6; position:relative; z-index:1; }
.masuk-link { display:inline-flex; align-items:center; gap:5px; margin-top:18px; color:var(--primary); font-size:0.76rem; font-weight:700; transition:gap 0.2s; position:relative; z-index:1; }
.portal-card:hover .masuk-link { gap:9px; }

/* ============================================
   BERITA
   ============================================ */
.berita-section { background:var(--bg); padding:80px 0; transition:background 0.4s; }
.berita-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:22px; }
.news-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; transition:all 0.3s; }
.news-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-hover); border-color:transparent; }
.news-thumb { position:relative; height:200px; display:flex; align-items:center; justify-content:center; font-size:3rem; overflow:hidden; }
.news-card:first-child .news-thumb { height:260px; }
.news-cat-tag { position:absolute; top:13px; left:13px; background:var(--primary); color:#fff; font-size:0.62rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:4px 10px; border-radius:100px; transition:background 0.4s; }
.news-date-tag { position:absolute; top:13px; right:13px; background:rgba(0,0,0,0.45); backdrop-filter:blur(6px); color:#fff; font-size:0.68rem; font-weight:600; padding:4px 10px; border-radius:100px; }
.news-body { padding:20px 22px; }
.news-card h3 { font-size:0.94rem; font-weight:700; color:var(--text); margin-bottom:8px; line-height:1.45; }
.news-card:first-child h3 { font-family:'Fraunces',serif; font-size:1.28rem; line-height:1.28; }
.news-card p { font-size:0.8rem; color:var(--text-soft); line-height:1.65; }
.news-foot { padding:13px 22px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.news-foot span { font-size:0.72rem; color:var(--text-muted); }
.news-foot a { font-size:0.75rem; color:var(--primary); font-weight:700; display:flex; align-items:center; gap:4px; transition:gap 0.2s; }
.news-foot a:hover { gap:8px; }

/* ============================================
   PROFIL
   ============================================ */
.profil-section { background:linear-gradient(150deg,var(--bg-dark) 0%,var(--bg-dark2) 100%); padding:88px 0; position:relative; overflow:hidden; transition:background 0.4s; }
.profil-section::before { content:''; position:absolute; right:-100px; bottom:-100px; width:500px; height:500px; background:radial-gradient(circle,var(--hero-accent),transparent 65%); transition:background 0.4s; }
.profil-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; position:relative; z-index:1; }
.profil-content .sec-label { background:rgba(255,255,255,0.07); border-color:rgba(255,255,255,0.1); color:var(--primary-light); }
.profil-content .sec-title { color:#fff; text-align:left; }
.profil-content .sec-title span { color:var(--accent-bright); }
.profil-desc { color:rgba(255,255,255,0.6); font-size:0.93rem; line-height:1.8; margin-top:20px; }
.vm-cards { margin-top:26px; display:flex; flex-direction:column; gap:12px; }
.vm-card { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); border-radius:10px; padding:18px 20px; display:flex; gap:14px; align-items:flex-start; transition:all 0.25s; }
.vm-card:hover { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.15); }
.vm-icon { width:36px; height:36px; flex-shrink:0; background:linear-gradient(135deg,var(--accent),var(--accent-bright)); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1rem; transition:background 0.4s; }
.vm-card h4 { color:var(--accent-bright); font-size:0.68rem; letter-spacing:1.8px; text-transform:uppercase; margin-bottom:5px; font-weight:700; transition:color 0.4s; }
.vm-card p { color:rgba(255,255,255,0.65); font-size:0.84rem; line-height:1.65; }
.profil-stats { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ps-card { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:28px 20px; text-align:center; transition:all 0.3s; }
.ps-card:hover { border-color:rgba(255,255,255,0.2); transform:translateY(-3px); background:rgba(255,255,255,0.08); }
.ps-ico { font-size:1.8rem; margin-bottom:10px; }
.ps-num { font-family:'Fraunces',serif; font-size:2.4rem; font-weight:900; color:var(--accent-bright); line-height:1; transition:color 0.4s; }
.ps-ktr { color:rgba(255,255,255,0.45); font-size:0.76rem; margin-top:5px; }

/* ============================================
   PROGRAM
   ============================================ */
.program-section { background:var(--bg-alt); padding:80px 0; transition:background 0.4s; }
.prog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.prog-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; transition:all 0.3s; }
.prog-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-hover); border-color:transparent; }
.prog-head { background:linear-gradient(135deg,var(--primary),var(--primary-mid)); padding:28px 26px 24px; position:relative; overflow:hidden; transition:background 0.4s; }
.prog-head::before { content:''; position:absolute; right:-20px; top:-20px; width:90px; height:90px; background:rgba(255,255,255,0.05); border-radius:50%; }
.prog-head::after { content:''; position:absolute; right:15px; bottom:-30px; width:65px; height:65px; background:rgba(255,255,255,0.04); border-radius:50%; }
.prog-ico { font-size:1.9rem; display:block; margin-bottom:12px; position:relative; z-index:1; }
.prog-head h3 { font-size:1.12rem; font-weight:800; color:#fff; position:relative; z-index:1; }
.prog-badge { position:absolute; top:15px; right:15px; z-index:1; background:var(--accent-bright); color:var(--bg-dark); font-size:0.6rem; font-weight:800; padding:3px 10px; border-radius:100px; letter-spacing:1px; transition:background 0.4s; }
.prog-body { padding:22px 26px; }
.prog-body p { font-size:0.83rem; color:var(--text-soft); line-height:1.65; margin-bottom:16px; }
.prog-list { list-style:none; }
.prog-list li { font-size:0.81rem; color:var(--text-mid); padding:8px 0; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; font-weight:500; }
.prog-list li:last-child { border-bottom:none; }
.prog-list li::before { content:'✓'; width:18px; height:18px; flex-shrink:0; background:var(--primary-glass); color:var(--primary); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.65rem; font-weight:900; transition:all 0.4s; }

/* ============================================
   PPDB BANNER
   ============================================ */
.ppdb-section { background:linear-gradient(135deg,var(--bg-dark),var(--bg-dark2) 50%,var(--bg-dark)); padding:64px 0; position:relative; overflow:hidden; transition:background 0.4s; }
.ppdb-section::before { content:''; position:absolute; inset:0; background-image:repeating-linear-gradient(-55deg,transparent,transparent 30px,rgba(255,255,255,0.01) 30px,rgba(255,255,255,0.01) 31px); }
.ppdb-inner { max-width:1280px; margin:0 auto; padding:0 40px; display:flex; justify-content:space-between; align-items:center; gap:48px; flex-wrap:wrap; position:relative; z-index:1; }
.ppdb-badge-wrap { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15); color:var(--accent-bright); font-size:0.68rem; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; padding:6px 14px; border-radius:100px; margin-bottom:16px; width:fit-content; backdrop-filter:blur(6px); transition:color 0.4s; }
.ppdb-text h2 { font-family:'Fraunces',serif; color:#fff; font-size:2.4rem; font-weight:900; line-height:1.12; margin-bottom:10px; letter-spacing:-0.4px; }
.ppdb-text p { color:rgba(255,255,255,0.6); font-size:0.92rem; max-width:460px; line-height:1.65; }
.ppdb-right { display:flex; flex-direction:column; gap:20px; align-items:center; }
.countdown { display:flex; gap:8px; align-items:center; }
.cd-item { text-align:center; }
.cd-num { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15); color:#fff; font-family:'Fraunces',serif; font-size:2rem; font-weight:900; width:68px; height:68px; display:flex; align-items:center; justify-content:center; border-radius:10px; backdrop-filter:blur(8px); }
.cd-lbl { color:rgba(255,255,255,0.4); font-size:0.6rem; letter-spacing:1px; text-transform:uppercase; margin-top:6px; }
.cd-sep { color:rgba(255,255,255,0.25); font-size:1.8rem; font-weight:300; align-self:flex-start; padding-top:10px; line-height:1; }

/* ============================================
   PENGUMUMAN & AGENDA
   ============================================ */
.pengumuman-section { background:var(--bg); padding:80px 0; transition:background 0.4s; }
.pg-grid { display:grid; grid-template-columns:1fr 350px; gap:52px; }
.peng-list { display:flex; flex-direction:column; }
.peng-item { display:flex; gap:16px; padding:18px 14px; border-radius:10px; transition:all 0.2s; cursor:pointer; border-bottom:1px solid var(--border); margin:0 -14px; }
.peng-item:hover { background:var(--primary-pale); border-bottom-color:transparent; }
.peng-date { background:linear-gradient(135deg,var(--primary),var(--primary-mid)); color:#fff; text-align:center; padding:10px 12px; border-radius:8px; flex-shrink:0; min-width:52px; box-shadow:var(--shadow-primary); transition:background 0.4s; }
.peng-date .day { font-size:1.4rem; font-weight:800; line-height:1; }
.peng-date .mon { font-size:0.58rem; letter-spacing:1px; text-transform:uppercase; opacity:0.8; margin-top:2px; }
.peng-body h4 { font-size:0.91rem; font-weight:700; color:var(--text); margin-bottom:5px; line-height:1.45; }
.peng-body p { font-size:0.79rem; color:var(--text-soft); line-height:1.55; }
.peng-cat-tag { display:inline-flex; background:var(--primary-glass); color:var(--primary); font-size:0.61rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:3px 8px; border-radius:100px; margin-bottom:7px; border:1px solid rgba(0,0,0,0.05); transition:all 0.4s; }
.agenda-box { background:linear-gradient(160deg,var(--bg-dark),var(--bg-dark2)); border-radius:14px; overflow:hidden; align-self:start; box-shadow:var(--shadow-hover); transition:background 0.4s; }
.agenda-head { padding:20px 24px; border-bottom:1px solid rgba(255,255,255,0.07); }
.agenda-head h3 { font-size:0.97rem; font-weight:800; color:#fff; }
.agenda-list { padding:6px 0; }
.agi { padding:14px 24px; border-bottom:1px solid rgba(255,255,255,0.05); transition:background 0.2s; }
.agi:hover { background:rgba(255,255,255,0.04); }
.agi:last-child { border-bottom:none; }
.agi .tgl-agi { font-size:0.67rem; color:var(--accent-bright); margin-bottom:4px; font-weight:600; transition:color 0.4s; }
.agi h4 { font-size:0.85rem; color:rgba(255,255,255,0.9); font-weight:700; margin-bottom:2px; }
.agi p { font-size:0.74rem; color:rgba(255,255,255,0.35); }
.agenda-foot { padding:15px 24px; background:rgba(0,0,0,0.2); border-top:1px solid rgba(255,255,255,0.05); }
.agenda-foot a { color:var(--accent-bright); font-size:0.78rem; font-weight:700; display:flex; align-items:center; gap:6px; transition:gap 0.2s, color 0.4s; }
.agenda-foot a:hover { gap:10px; }

/* ============================================
   GALERI
   ============================================ */
.galeri-section { background:var(--bg-alt); padding:80px 0; transition:background 0.4s; }
.galeri-grid { display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:196px 196px; gap:10px; }
.gal-item { border-radius:10px; overflow:hidden; cursor:pointer; position:relative; }
.gal-item:first-child { grid-row:1/3; }
.gal-img { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:2.5rem; transition:transform 0.45s ease; }
.gal-item:nth-child(1) .gal-img { background:linear-gradient(135deg,var(--bg-dark),var(--bg-dark2)); }
.gal-item:nth-child(2) .gal-img { background:linear-gradient(135deg,var(--primary),var(--primary-mid)); }
.gal-item:nth-child(3) .gal-img { background:linear-gradient(135deg,var(--accent),var(--accent-bright)); }
.gal-item:nth-child(4) .gal-img { background:linear-gradient(135deg,var(--primary-mid),var(--primary)); }
.gal-item:nth-child(5) .gal-img { background:linear-gradient(135deg,var(--bg-dark2),var(--bg-dark)); }
.gal-item:hover .gal-img { transform:scale(1.07); }
.gal-overlay { position:absolute; inset:0; background:rgba(0,0,0,0); transition:all 0.35s; display:flex; align-items:flex-end; padding:14px; }
.gal-overlay span { color:#fff; font-size:0.8rem; font-weight:700; opacity:0; transform:translateY(6px); transition:all 0.3s; }
.gal-item:hover .gal-overlay { background:rgba(0,0,0,0.55); }
.gal-item:hover .gal-overlay span { opacity:1; transform:translateY(0); }

/* ============================================
   FOOTER
   ============================================ */
footer { background:var(--footer-bg); padding:64px 0 0; transition:background 0.4s; }
.footer-grid { display:grid; grid-template-columns:1.8fr 1fr 1fr 1.2fr; gap:44px; margin-bottom:48px; }
.ft-logo { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.ft-logo-ico { width:44px; height:44px; background:linear-gradient(135deg,var(--primary),var(--primary-mid)); border-radius:8px; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-primary); flex-shrink:0; transition:background 0.4s; }
.ft-logo-ico span { font-family:'Scheherazade New',serif; color:rgba(255,255,255,0.9); font-size:1.3rem; }
.ft-logo-txt .nama { font-weight:800; color:#fff; font-size:1rem; line-height:1.2; }
.ft-logo-txt .sub { color:rgba(255,255,255,0.25); font-size:0.6rem; letter-spacing:1px; text-transform:uppercase; margin-top:2px; }
.ft-brand p { color:rgba(255,255,255,0.35); font-size:0.8rem; line-height:1.75; margin-bottom:20px; }
.sosmed { display:flex; gap:7px; }
.sosmed a { width:34px; height:34px; background:rgba(255,255,255,0.06); border:1px solid var(--footer-border); border-radius:7px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.45); font-size:0.78rem; font-weight:700; transition:all 0.2s; }
.sosmed a:hover { background:linear-gradient(135deg,var(--primary),var(--primary-mid)); color:#fff; border-color:transparent; }
.ft-col h4 { color:#fff; font-size:0.75rem; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:18px; padding-bottom:10px; border-bottom:1px solid var(--footer-border); }
.ft-col ul { list-style:none; }
.ft-col ul li { margin-bottom:9px; }
.ft-col ul li a { color:rgba(255,255,255,0.35); font-size:0.8rem; transition:all 0.2s; display:flex; align-items:center; gap:7px; }
.ft-col ul li a::before { content:'→'; color:var(--primary-light); font-size:0.7rem; opacity:0.7; transition:color 0.4s; }
.ft-col ul li a:hover { color:rgba(255,255,255,0.8); padding-left:3px; }
.ft-kontak p { display:flex; align-items:flex-start; gap:9px; color:rgba(255,255,255,0.35); font-size:0.79rem; line-height:1.65; margin-bottom:10px; }
.ft-kontak p .ic { color:var(--accent-bright); flex-shrink:0; margin-top:1px; transition:color 0.4s; }
.footer-bottom { border-top:1px solid var(--footer-border); padding:18px 40px; display:flex; justify-content:space-between; align-items:center; font-size:0.73rem; color:rgba(255,255,255,0.2); flex-wrap:wrap; gap:8px; max-width:1280px; margin:0 auto; }

/* ============================================
   REVEAL ANIMATION
   ============================================ */
.reveal { opacity:0; transform:translateY(24px); transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.reveal.visible { opacity:1; transform:none; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width:1024px) {
  .hero-inner { grid-template-columns:1fr; }
  .hero-panel { display:none; }
  .portal-grid { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  .container { padding:0 20px; }
  .hero h1 { font-size:2.6rem; }
  .hero-inner { padding:60px 20px; gap:32px; }
  .berita-grid { grid-template-columns:1fr; }
  .profil-grid { grid-template-columns:1fr; gap:40px; }
  .prog-grid { grid-template-columns:1fr; }
  .galeri-grid { grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .gal-item:first-child { grid-row:auto; }
  .pg-grid { grid-template-columns:1fr; }
  .ppdb-inner { flex-direction:column; align-items:flex-start; }
  .ppdb-right { align-items:flex-start; width:100%; }
  .sec-title { font-size:2rem; }
  nav { display:none; }
  .hamburger { display:flex; }
  .topbar-left .dot { display:none; }
  .footer-grid { grid-template-columns:1fr; }
  .topbar-left { flex-wrap:wrap; gap:10px; }
}
/* ============================================
   BERITA HOME — Featured Image Grid
   ============================================ */
.berita-home-section { background:var(--bg); padding:80px 0; transition:background 0.4s; }

.berita-home-grid {
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:28px;
  align-items:start;
}

/* BERITA UTAMA */
.berita-main-card {
  display:block; border-radius:16px; overflow:hidden;
  background:var(--surface); border:1px solid var(--border);
  transition:all 0.3s; color:var(--text);
}
.berita-main-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-hover); border-color:transparent; }

.bmc-thumb {
  position:relative; aspect-ratio:16/9; overflow:hidden;
  background:linear-gradient(135deg,var(--bg-dark),var(--bg-dark2));
}
.bmc-thumb img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; display:block; }
.berita-main-card:hover .bmc-thumb img { transform:scale(1.04); }
.bmc-thumb-placeholder {
  width:100%; height:100%; display:flex; align-items:center;
  justify-content:center; font-size:4rem; opacity:0.3;
}
.bmc-cat {
  position:absolute; top:14px; left:14px;
  background:var(--primary); color:#fff;
  font-size:0.62rem; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; padding:5px 12px; border-radius:100px;
  transition:background 0.4s;
}
.bmc-date {
  position:absolute; top:14px; right:14px;
  background:rgba(0,0,0,0.5); backdrop-filter:blur(6px); color:#fff;
  font-size:0.68rem; font-weight:500; padding:5px 12px; border-radius:100px;
}
.bmc-body { padding:24px 26px; }
.bmc-body h3 {
  font-family:'Fraunces',serif; font-size:1.4rem; font-weight:900;
  color:var(--text); line-height:1.25; margin-bottom:10px; transition:color 0.2s;
}
.berita-main-card:hover .bmc-body h3 { color:var(--primary); }
.bmc-body p { font-size:0.85rem; color:var(--text-soft); line-height:1.7; margin-bottom:16px; }
.bmc-foot {
  display:flex; justify-content:space-between; align-items:center;
  padding-top:14px; border-top:1px solid var(--border);
  font-size:0.76rem; color:var(--text-muted);
}
.bmc-read { color:var(--primary); font-weight:700; }

/* BERITA SIDE LIST */
.berita-side-list {
  display:flex; flex-direction:column; gap:14px;
}

.berita-side-card {
  display:flex; gap:14px; align-items:flex-start;
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:14px; color:var(--text);
  transition:all 0.25s;
}
.berita-side-card:hover { transform:translateX(4px); box-shadow:0 4px 20px rgba(0,0,0,0.07); border-color:var(--primary-light); }

.bsc-thumb {
  width:96px; height:72px; flex-shrink:0;
  border-radius:8px; overflow:hidden;
  background:linear-gradient(135deg,var(--bg-dark),var(--bg-dark2));
}
.bsc-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s; }
.berita-side-card:hover .bsc-thumb img { transform:scale(1.06); }
.bsc-thumb-placeholder {
  width:100%; height:100%; display:flex; align-items:center;
  justify-content:center; font-size:1.6rem; opacity:0.4;
}
.bsc-body { flex:1; min-width:0; }
.bsc-cat {
  display:inline-flex; background:var(--primary-glass); color:var(--primary);
  font-size:0.6rem; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; padding:3px 8px; border-radius:100px;
  margin-bottom:6px; transition:all 0.4s;
}
.bsc-body h4 {
  font-size:0.88rem; font-weight:700; color:var(--text);
  line-height:1.4; margin-bottom:5px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.bsc-date { font-size:0.7rem; color:var(--text-muted); }

.lihat-semua-btn {
  display:inline-flex; align-items:center; gap:6px;
  color:var(--primary); font-weight:700; font-size:0.85rem;
  padding:10px 0; transition:gap 0.2s; margin-top:4px;
}
.lihat-semua-btn:hover { gap:10px; }

/* Detail layout */
.detail-layout {
  display:grid; grid-template-columns:1fr 300px; gap:48px; align-items:start;
}

/* ============================================
   RESPONSIVE — Mobile First Fixes
   ============================================ */
@media (max-width:1024px) {
  .berita-home-grid { grid-template-columns:1fr; }
  .berita-main-card { max-width:100%; }
  .berita-side-list { display:grid; grid-template-columns:1fr 1fr; }
  .lihat-semua-btn { grid-column:1/-1; }
  .detail-layout { grid-template-columns:1fr; }
}

@media (max-width:768px) {
  /* Hero */
  .hero-inner { grid-template-columns:1fr !important; padding:52px 20px !important; gap:24px !important; }
  .hero-panel { display:none; }
  .hero h1 { font-size:2.2rem !important; }
  .hero-desc { font-size:0.88rem !important; }
  .hero-actions { flex-direction:column; gap:10px; }
  .hero-actions a { width:100%; text-align:center; justify-content:center; }

  /* Topbar */
  .topbar-inner { flex-direction:column; gap:6px; padding:10px 20px; }
  .topbar-left { flex-wrap:wrap; gap:8px; font-size:0.68rem; justify-content:center; }
  .topbar-right { justify-content:center; }
  .topbar-left .dot { display:none; }

  /* Header */
  .header-inner { padding:0 20px; }
  nav#mainNav { display:none; }
  .hamburger { display:flex; }

  /* Container */
  .container { padding:0 16px; }

  /* Section spacing */
  .portal-section, .berita-home-section, .pengumuman-section,
  .program-section, .galeri-section, .profil-section { padding:52px 0; }

  /* Section header */
  .sec-title { font-size:1.75rem !important; }
  .sec-head { margin-bottom:36px; }

  /* Portal grid */
  .portal-grid { grid-template-columns:1fr 1fr; gap:12px; }
  .portal-card { padding:22px 16px; }
  .portal-ico { width:48px; height:48px; font-size:1.4rem; }
  .portal-card h3 { font-size:0.88rem; }
  .portal-card p { font-size:0.72rem; }

  /* Berita home */
  .berita-home-grid { grid-template-columns:1fr; gap:20px; }
  .berita-side-list { grid-template-columns:1fr; }
  .bmc-body h3 { font-size:1.15rem; }
  .bsc-thumb { width:80px; height:60px; }

  /* Pengumuman & Agenda */
  .pg-grid { grid-template-columns:1fr; gap:32px; }

  /* PPDB */
  .ppdb-inner { flex-direction:column; align-items:flex-start; gap:28px; padding:0 16px; }
  .ppdb-text h2 { font-size:1.8rem; }
  .ppdb-right { width:100%; align-items:flex-start; }
  .countdown { gap:6px; }
  .cd-num { width:56px; height:56px; font-size:1.5rem; }
  .ppdb-right .btn-accent { width:100%; justify-content:center; }

  /* Program */
  .prog-grid { grid-template-columns:1fr; gap:16px; }

  /* Galeri */
  .galeri-grid { grid-template-columns:1fr 1fr; grid-template-rows:auto; gap:8px; }
  .gal-item:first-child { grid-row:auto; grid-column:1/-1; }

  /* Profil */
  .profil-grid { grid-template-columns:1fr; gap:32px; }
  .profil-stats { grid-template-columns:1fr 1fr; }
  .ps-num { font-size:1.8rem; }

  /* Footer */
  .footer-grid { grid-template-columns:1fr; gap:28px; }
  .footer-bottom { flex-direction:column; text-align:center; gap:6px; padding:16px 20px; }

  /* Detail berita */
  .detail-layout { grid-template-columns:1fr; gap:28px; }

  /* Ticker */
  .ticker-wrap { padding:0 16px; }
}

@media (max-width:480px) {
  .portal-grid { grid-template-columns:1fr 1fr; }
  .dash-stats { grid-template-columns:1fr 1fr; }
  .hero h1 { font-size:1.9rem !important; }
  .ppdb-text h2 { font-size:1.5rem; }
  .countdown { gap:4px; }
  .cd-num { width:48px; height:48px; font-size:1.3rem; }
  .cd-lbl { font-size:0.55rem; }
  .profil-stats { grid-template-columns:1fr 1fr; }
}

/* ============================================
   HOME.PHP — RESPONSIVE FIXES
   ============================================ */

/* Berita home grid mobile */
@media (max-width: 768px) {
  .berita-home-section { padding: 48px 0; }

  .berita-home-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  .berita-side-list {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
  }

  .bmc-body h3 { font-size: 1.1rem; }
  .bmc-body p  { font-size: 0.82rem; }

  .bsc-thumb { width: 80px; height: 60px; }
  .bsc-body h4 { font-size: 0.84rem; }

  /* Pengumuman section */
  .pengumuman-section { padding: 48px 0; }
  .pg-grid {
    grid-template-columns: 1fr !important;
    gap: 40px;
  }

  /* PPDB */
  .ppdb-section { padding: 48px 0; }
  .ppdb-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 28px;
    padding: 0 20px;
  }
  .ppdb-text h2 { font-size: 1.8rem; }
  .ppdb-right { width: 100%; }
  .ppdb-right .btn-accent {
    width: 100% !important;
    justify-content: center !important;
  }
  .countdown { gap: 6px; }
  .cd-num { width: 54px; height: 54px; font-size: 1.4rem; }

  /* Program grid */
  .program-section { padding: 48px 0; }
  .prog-grid { grid-template-columns: 1fr !important; }

  /* Galeri */
  .galeri-section { padding: 48px 0; }
  .galeri-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
  }
  .gal-item:first-child {
    grid-row: auto !important;
    grid-column: 1 / -1;
  }

  /* Profil */
  .profil-section { padding: 56px 0; }
  .profil-grid { grid-template-columns: 1fr !important; gap: 36px; }
  .profil-stats { grid-template-columns: 1fr 1fr; }
  .ps-num { font-size: 2rem; }

  /* Portal */
  .portal-section { padding: 48px 0; }
  .portal-grid { grid-template-columns: 1fr 1fr !important; gap: 12px; }
  .portal-card { padding: 20px 14px; }

  /* Section header */
  .sec-title { font-size: 1.75rem !important; }
  .sec-head { margin-bottom: 32px; }
}

@media (max-width: 480px) {
  .portal-grid { grid-template-columns: 1fr 1fr !important; }
  .portal-card h3 { font-size: 0.82rem; }
  .portal-card p  { display: none; }

  .cd-num { width: 46px; height: 46px; font-size: 1.2rem; }
  .cd-lbl { font-size: 0.55rem; }

  .profil-stats { grid-template-columns: 1fr 1fr; }
  .ps-num { font-size: 1.7rem; }

  .galeri-grid { grid-template-columns: 1fr !important; }
  .gal-item:first-child { grid-column: auto; }

  .hero h1 { font-size: 1.85rem !important; }
  .hero-desc { font-size: 0.85rem !important; }
}

/* ===== NAVIGATION SEARCH ===== */
.nav-search {
  position: relative;
  margin-left: 12px;
}

.nav-search-toggle {
  background: none;
  border: none;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-soft);
  transition: all 0.2s;
}

.nav-search-toggle:hover {
  background: var(--primary-glass);
  color: var(--primary);
}

.nav-search-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 320px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  
  /* State hidden */
  display: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 9999;
}

.nav-search-dropdown.active {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

[data-theme="midnight"] .nav-search-dropdown {
  background: rgba(30, 36, 54, 0.98);
}

.nav-search-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-search-form {
  display: flex;
  gap: 8px;
}

.nav-search-form input {
  flex: 1;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg-alt);
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
}

.nav-search-form input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glass);
}

.nav-search-form button {
  width: 42px;
  height: 42px;
  border: none;
  background: linear-gradient(135deg, var(--primary), var(--primary-mid));
  color: white;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.nav-search-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Desktop specific */
@media (min-width: 769px) {
  .nav-search {
    display: flex;
    align-items: center;
  }
  
  .nav-search-toggle {
    background: var(--primary-glass);
  }
  
  .nav-search-dropdown {
    width: 360px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .nav-search-dropdown {
    width: calc(100vw - 40px);
    right: 0;
    position: fixed;
    top: 70px;
    left: 20px;
    width: auto;
  }
  
  .nav-search {
    margin-left: auto;
  }
  
  .mobile-nav form {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
  }
}