/* =============================================
   STIA Asy-Syafi'iyah — Professional Portal CSS
   Clean, institutional, university-standard design
   ============================================= */

:root {
  --bg-color-body: #1e293b;
  --bg-color-header-solid: #0f172a;
  --bg-color-header: rgba(15, 23, 42, 0.35);
  --bg-color-footer-solid: #0f172a;
  --bg-color-footer: rgba(15, 23, 42, 0.35);
  --text-main: #ffffff;
  --brand-main: #e0f2fe;
  --brand-dark: #1e293b;
  /* Skala warna brand. --brand-300/400/rgb dipakai di banyak tempat tapi
     sebelumnya tidak pernah didefinisikan, sehingga var()-nya tidak valid:
     warna teks jatuh ke nilai warisan dan sebagian latar jatuh ke oranye
     fallback. --brand-400 sengaja dipilih gelap agar terbaca sebagai teks
     di atas latar terang; --brand-300 hanya untuk garis/aksen dekoratif. */
  --brand-300: #38bdf8;
  --brand-400: #0369a1;
  --brand-500: #0ea5e9;
  --brand-600: #0284c7;
  --brand-700: #075985;
  --brand-rgb: 14, 165, 233;
  --brand-accent: #10b981;
  --font-primary: 'Montserrat', sans-serif;
  --font-secondary: 'Inter', sans-serif;
  --glass-bg: rgba(var(--text-rgb, 255, 255, 255), 0.08);
  --glass-border: rgba(var(--text-rgb, 255, 255, 255), 0.15);
  --glass-blur: 24px;
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.5rem;
  --shadow-sm: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-md: 0 12px 32px rgba(0,0,0,0.12);
  --shadow-lg: 0 20px 50px rgba(0,0,0,0.18);
  --shadow-xl: 0 25px 70px rgba(0,0,0,0.25);
  --transition-fast: 0.2s ease;
  --transition-normal: 0.35s ease;
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-secondary);
  color: var(--text-main);
  background: var(--bg-color-body);
  background-attachment: fixed;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  line-height: 1.6;
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: 700;
  line-height: 1.2;
}
.text-outline {
  -webkit-text-stroke: 2px var(--text-main);
  color: transparent;
}
.hidden { display: none !important; }
.text-center { text-align: center; }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); }
::-webkit-scrollbar-thumb { background: rgba(var(--text-rgb, 255, 255, 255), 0.15); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--text-rgb, 255, 255, 255), 0.3); }
.hide-scroll::-webkit-scrollbar { display: none; }
.hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }

/* ===== BACKGROUND ORBS ===== */
.orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(100px);
  z-index: -1;
  opacity: 0.35;
  pointer-events: none;
}
.orb-1 { width: 500px; height: 500px; background: var(--brand-500); top: -150px; left: -100px; }
.orb-2 { width: 400px; height: 400px; background: #7c3aed; bottom: -100px; right: -100px; }
.orb-3 { width: 350px; height: 350px; background: var(--brand-accent); bottom: 100px; left: 30%; }

/* ===== MAIN LAYOUT ===== */
.main-content {
  flex: 1;
  position: relative;
  overflow: hidden;
}

/* ===== HEADER ===== */
.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 2rem;
  background: var(--bg-color-header, rgba(15, 23, 42, 0.6));
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.1);
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
  transition: background 0.4s ease, backdrop-filter 0.4s ease, -webkit-backdrop-filter 0.4s ease;
}
.main-header.header-solid { background: var(--bg-color-header-solid, var(--bg-color-header)); backdrop-filter: none; -webkit-backdrop-filter: none; }
.header-left i {
  cursor: pointer;
  font-size: 1rem;
  color: var(--text-header, rgba(var(--text-rgb, 255, 255, 255), 0.5));
  transition: var(--transition-fast);
}
.header-left i:hover { color: var(--highlight-header, #fff); transform: rotate(90deg); }
.header-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}
/* Hanya dipakai di layar ponsel; di layar lebar menu tampil apa adanya. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: 0.35rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--text-header, rgba(var(--text-rgb, 255, 255, 255), 0.7));
  transition: var(--transition-fast);
}
.nav-toggle:hover { color: var(--highlight-header, #fff); background: rgba(var(--text-rgb, 255, 255, 255), 0.08); }
.header-left { display: flex; align-items: center; }
.nav-link {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--text-header, rgba(var(--text-rgb, 255, 255, 255), 0.6));
  text-decoration: none;
  cursor: pointer;
  position: relative;
  padding: 0.5rem 0.75rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: var(--transition-fast);
  border-radius: var(--radius-sm);
}
.nav-link:hover, .nav-link.active { color: var(--highlight-header, #fff); background: rgba(var(--text-rgb, 255, 255, 255), 0.08); }
.nav-link.active { background: rgba(var(--text-rgb, 255, 255, 255), 0.12); }
.nav-item { position: relative; display: inline-block; }
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--bg-color-header, rgba(15, 23, 42, 0.6));
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.1);
  border-radius: var(--radius-md);
  padding: 0.5rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: var(--transition-normal);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  box-shadow: var(--shadow-md);
  z-index: 200;
}
.nav-item:hover .nav-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.nav-dropdown-item {
  font-family: var(--font-primary);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-header, rgba(var(--text-rgb, 255, 255, 255), 0.8));
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: var(--transition-fast);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.nav-dropdown-item:hover {
  background: rgba(var(--text-rgb, 255, 255, 255), 0.1);
  color: var(--highlight-header, #fff);
}
.nav-divider { width: 1px; height: 14px; background: rgba(var(--text-rgb, 255, 255, 255), 0.4); border-radius: 0; flex-shrink: 0; margin: 0 0.25rem; align-self: center; }
.header-right {
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 2px;
  color: var(--text-header, rgba(var(--text-rgb, 255, 255, 255), 0.9));
}

/* ===== FOOTER ===== */
.main-footer {
  background: rgba(15, 23, 42, 0.6);
  background: var(--bg-color-footer, rgba(15, 23, 42, 0.6));
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.12);
  z-index: 100;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  transition: background 0.4s ease, backdrop-filter 0.3s ease;
}
/* Tetap `fixed`. Berganti ke `position: relative` membuat footer mendadak ikut
   mengambil ruang layout, panel menyusut, dan halaman melompat saat digulir
   sampai dasar. Yang berubah cukup warna dan backdrop-nya. */
.main-footer.footer-solid {
  background: var(--bg-color-footer-solid, var(--bg-color-footer));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Footer Partner Logos */
.footer-partners {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  padding: 0;
  flex: 1;
  margin: 0 2rem;
}
.footer-partners:empty {
  display: none;
}
.footer-partner-logo {
  height: 28px;
  width: auto;
  object-fit: contain;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}
.footer-partner-logo:hover {
  transform: scale(1.1);
}
body.theme-light .footer-partner-logo {
  /* no filter overrides needed since they are full color */
}
body.theme-light .footer-partner-logo:hover {
  transform: scale(1.1);
}

.footer-main-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 2rem;
}
.footer-left { flex: 1; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 1rem; }
.footer-text { font-family: var(--font-primary); font-weight: 700; font-size: 0.8rem; letter-spacing: 1px; color: var(--text-footer, inherit); }
.footer-stats { font-size: 0.75rem; color: var(--text-footer, rgba(var(--text-rgb, 255, 255, 255), 0.5)); display: flex; align-items: center; gap: 0.4rem; }
.footer-icons { flex: 1; display: flex; justify-content: flex-end; gap: 0.75rem; }
.footer-icons a { color: var(--text-footer, rgba(var(--text-rgb, 255, 255, 255), 0.6)); font-size: 1rem; transition: var(--transition-fast); text-decoration: none; }
.footer-icons a:hover { color: var(--highlight-footer, #fff); transform: translateY(-2px); }
.whatsapp-icon i { color: #25D366; }

/* Footer Logos Admin */
.admin-footer-logos-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.admin-footer-logo-item {
  position: relative;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  width: 100px;
}
.admin-footer-logo-item img {
  height: 32px;
  width: auto;
  max-width: 80px;
  object-fit: contain;
}
.admin-footer-logo-item .logo-name {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.5);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  justify-content: center;
  max-width: 90px;
}
.admin-footer-logo-item .btn-remove-logo {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #ef4444;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 0.6rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ===== ADMIN: IKLAN / BANNER SIDEBAR ===== */
.admin-iklan-list { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.5rem; }
.admin-iklan-item {
  position: relative;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  padding: 0.6rem;
  padding-right: 2rem;
}
.admin-iklan-item img {
  width: 64px; height: 44px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  background: rgba(0,0,0,0.15);
}
.admin-iklan-item .btn-remove-logo {
  position: absolute;
  top: 0.5rem; right: 0.5rem;
  background: #ef4444; color: #fff; border: none; border-radius: 50%;
  width: 18px; height: 18px; font-size: 0.6rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}

/* ===== VIEW SYSTEM ===== */
.view-panel {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  padding-bottom: var(--footer-height, 100px);
}
.view-panel::before {
  content: "";
  display: block;
  height: var(--header-height, 65px);
  width: 100%;
  flex-shrink: 0;
}
.view-active { transform: translateX(0); opacity: 1; pointer-events: auto; }
.view-hidden-left { transform: translateX(-30px); opacity: 0; pointer-events: none; }
.view-hidden-right { transform: translateX(30px); opacity: 0; pointer-events: none; }

/* ===== HERO SECTION ===== */
.hero-section {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 3rem;
  min-height: calc(100vh - 60px - 52px);
  align-items: center;
  padding: 3rem 4rem;
  position: relative;
  color: var(--text-main);
}
/* Teks putih hanya saat ada gambar latar (yang selalu diberi overlay gelap).
   Tanpa gambar, hero mengikuti warna teks tema — kalau dipaksa putih, teksnya
   hilang di atas latar terang seperti #ffffff. */
.hero-section.has-bg {
  --text-main: #ffffff !important;
  --text-rgb: 255, 255, 255 !important;
}
.hero-left {
  display: flex;
  align-items: center; /* Side by side */
  justify-content: flex-start;
  position: relative;
}
.hero-logo-container { 
  margin-right: -1rem; /* Overlap slightly with text */
  z-index: 1;
  display: flex;
  align-items: center;
}
.hero-logo {
  max-width: var(--hero-img-size, 150px);
  width: 100%;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3));
  border-radius: 8px;
  /* Fades out on the right edge where it touches the text */
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to right, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
  transition: all 0.3s ease;
}
.hero-text { position: relative; z-index: 2; padding-left: 1rem; }
.hero-decorations, .hero-triangles { display: none; } /* Remove clutter */


.hero-title {
  font-size: var(--hero-title-size, clamp(2.5rem, 5vw, 4.5rem));
  display: flex;
  flex-direction: column;
  line-height: 1;
  margin-bottom: 1rem;
  letter-spacing: -1px;
  transition: font-size 0.3s ease;
}
.hero-title .text-outline {
  -webkit-text-stroke: 2.5px rgba(255,255,255,0.7);
  color: transparent;
  font-weight: 900;
}
.hero-title span:last-child {
  font-weight: 900;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(var(--text-rgb, 255, 255, 255), 0.1);
  border: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.2);
  padding: 0.4rem 1.25rem;
  border-radius: 2rem;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
  backdrop-filter: blur(10px);
  width: fit-content;
}
.hero-desc {
  font-size: 0.95rem;
  color: rgba(var(--text-rgb, 255, 255, 255), 0.65);
  max-width: 480px;
  line-height: 1.7;
}

/* Hero Right — Visi/Misi/Akreditasi Card */
.hero-right { display: flex; align-items: center; }
.hero-info-card {
  background: rgba(var(--text-rgb, 255, 255, 255), 0.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.12);
  border-radius: var(--radius-xl);
  padding: 2rem;
  width: 100%;
  box-shadow: var(--shadow-lg);
}
.info-section h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  /* --brand-400 (#0369a1) dipilih untuk latar TERANG dan hanya kontras
     1,46:1 di sini — kartu ini duduk di atas foto hero yang gelap, hasilnya
     nyaris tak terbaca. --text-main ikut logika kontras hero (otomatis
     putih saat ada gambar latar) sehingga selalu terbaca di kartu ini. */
  color: var(--text-main);
  margin-bottom: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
}
.info-section p {
  font-size: 0.85rem;
  color: rgba(var(--text-rgb, 255, 255, 255), 0.75);
  line-height: 1.6;
}
.italic { font-style: italic; }
.info-divider { height: 1px; background: rgba(var(--text-rgb, 255, 255, 255), 0.08); margin: 1.25rem 0; }
.akreditasi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem;
  text-align: center;
}
.akred-box {
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--radius-md);
  padding: 0.75rem 0.5rem;
  border: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.06);
}
.akred-label {
  font-size: 0.6rem;
  color: rgba(var(--text-rgb, 255, 255, 255), 0.5);
  margin-bottom: 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.akred-value { font-size: 1.25rem; font-weight: 800; font-family: var(--font-primary); }
.akred-value.sky { color: #38bdf8; }
.akred-value.emerald { color: #34d399; }

/* ===== SCROLL INDICATOR ===== */
.scroll-indicator {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0.5;
  transition: opacity 0.3s;
}
.scroll-indicator:hover { opacity: 1; }
.scroll-arrow {
  width: 20px; height: 20px;
  border-right: 2px solid rgba(var(--text-rgb, 255, 255, 255), 0.6);
  border-bottom: 2px solid rgba(var(--text-rgb, 255, 255, 255), 0.6);
  transform: rotate(45deg);
  animation: bounceArrow 2s infinite;
}
@keyframes bounceArrow {
  0%, 20%, 50%, 80%, 100% { transform: rotate(45deg) translateY(0); }
  40% { transform: rotate(45deg) translateY(-10px); }
  60% { transform: rotate(45deg) translateY(-5px); }
}

/* ===== CONTENT SECTION (Articles & Announcements) ===== */
.content-section {
  padding: 1.5rem 0;
  background: transparent;
  border: none;
}
.wp-glass-container {
  max-width: 1440px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 1);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  color: #1e293b; /* Dark text */
}
/* Overrides for WordPress Theme inside glass container */
.wp-glass-container .section-header h2 { color: #0f172a; }
.wp-glass-container .filter-pill { background: rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.1); color: #475569; }
.wp-glass-container .filter-pill:hover, .wp-glass-container .filter-pill.active { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }
.wp-glass-container .article-card { background: #ffffff; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
.wp-glass-container .article-card:hover { transform: translateY(-4px); box-shadow: 0 15px 40px rgba(0,0,0,0.12); border-color: rgba(0,0,0,0.1); background: #ffffff; }
.wp-glass-container .article-card-title { color: #0f172a; }
.wp-glass-container .article-card-excerpt { color: #475569; }
.wp-glass-container .article-card-meta { color: #64748b; border-top-color: rgba(0,0,0,0.06); }
.wp-glass-container .tag-pill { background: rgba(0,0,0,0.05); color: #475569; }
.wp-glass-container .announcements-list { color: #475569; } /* For empty state text */
.wp-glass-container .announcement-card { background: #ffffff; border: 1px solid rgba(0,0,0,0.08); border-left: 3px solid var(--brand-500); box-shadow: 0 8px 25px rgba(0,0,0,0.06); }
.wp-glass-container .announcement-card:hover { background: #f8fafc; transform: translateX(3px); box-shadow: 0 12px 35px rgba(0,0,0,0.1); }
.wp-glass-container .announcement-body h4 { color: #0f172a; }
.wp-glass-container .announcement-date { color: #64748b; }

/* Form inputs inside glass container must be dark/visible */
.wp-glass-container .form-input, .wp-glass-container .form-file, .wp-glass-container .form-color {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  color: #0f172a !important;
}
.wp-glass-container .form-input:focus {
  border-color: var(--brand-500) !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1) !important;
}
.wp-glass-container .form-input::placeholder { color: rgba(0, 0, 0, 0.35) !important; }

/* Comprehensive dark text overrides for white glass containers */
.wp-glass-container,
.wp-glass-container * { color: #1e293b; }
.wp-glass-container h1, .wp-glass-container h2, .wp-glass-container h3, .wp-glass-container h4, .wp-glass-container h5 { color: #0f172a; }
.wp-glass-container p, .wp-glass-container span, .wp-glass-container li { color: #334155; }
.wp-glass-container small { color: #64748b; }
.wp-glass-container label { color: #334155 !important; }
.wp-glass-container .form-label { color: #475569 !important; }
.wp-glass-container .glass-card { background: rgba(255, 255, 255, 0.7) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; color: #1e293b !important; box-shadow: 0 15px 35px rgba(0,0,0,0.15) !important; }
.wp-glass-container .glass-card-title { color: #0f172a !important; border-bottom-color: rgba(0, 0, 0, 0.1) !important; }
.wp-glass-container .btn-primary { color: #fff !important; }
.wp-glass-container .btn-success { color: #fff !important; }
.wp-glass-container .btn-danger { color: #fff !important; }
.wp-glass-container .section-header h2 { color: #0f172a !important; }
.wp-glass-container .section-header h2 i { color: var(--brand-500) !important; }
.wp-glass-container .section-line { background: var(--brand-500) !important; }
.wp-glass-container .form-group label { color: #334155 !important; }
.wp-glass-container .pimpinan-nama { color: #0f172a !important; }
.wp-glass-container .pimpinan-jabatan { color: #475569 !important; }
.wp-glass-container .pimpinan-sambutan { color: #475569 !important; }
.wp-glass-container .comment-name { color: #0f172a !important; }
.wp-glass-container .comment-text { color: #334155 !important; }
.wp-glass-container .comment-meta { color: #94a3b8 !important; }

.content-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 1.5rem;
}
.content-main, .content-sidebar { min-width: 0; }

.section-header { margin-bottom: 1.5rem; }
.section-header h2 {
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(var(--text-rgb, 255, 255, 255), 0.9);
}
.section-header h2 i { color: var(--brand-500); font-size: 1rem; }
.section-line { height: 3px; width: 40px; background: var(--brand-500); border-radius: 2px; margin-top: 0.5rem; }

/* Filter Pills */
.filter-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.5rem; }
.filter-pill {
  background: rgba(var(--text-rgb, 255, 255, 255), 0.06);
  border: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.1);
  color: rgba(var(--text-rgb, 255, 255, 255), 0.7);
  padding: 0.35rem 0.9rem;
  border-radius: 2rem;
  font-size: 0.75rem;
  cursor: pointer;
  transition: var(--transition-fast);
  font-weight: 500;
}
.filter-pill:hover, .filter-pill.active {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
}

/* Articles Grid */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}
/* Dengan auto-fit, satu artikel sendirian melebar memenuhi baris (terukur
   1.021px) sehingga tampak seperti spanduk; dua artikel 501px, tiga 327px.
   Batas ini menjaga kartu tunggal tetap seukuran kartu biasa. */
.articles-grid > .article-card { max-width: 520px; }

/* ===== ARTICLE CARD ===== */
.article-card {
  background: rgba(var(--text-rgb, 255, 255, 255), 0.05);
  border: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition-normal);
  display: flex;
  flex-direction: column;
}
.article-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(var(--text-rgb, 255, 255, 255), 0.2);
  background: rgba(var(--text-rgb, 255, 255, 255), 0.08);
}
.article-cover {
  height: 160px;
  background-size: cover;
  background-position: center;
  background-color: rgba(0, 0, 0, 0.3);
  position: relative;
}
.article-body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.badge-category {
  display: inline-block;
  background: rgba(14, 165, 233, 0.15);
  color: #7dd3fc;
  padding: 0.2rem 0.6rem;
  border-radius: 0.25rem;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  margin-bottom: 0.75rem;
  align-self: flex-start;
}
.article-card-title {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  line-height: 1.4;
  font-weight: 700;
}
.article-card-excerpt {
  font-size: 0.8rem;
  color: rgba(var(--text-rgb, 255, 255, 255), 0.55);
  margin-bottom: 1rem;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
}
.article-card-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: rgba(var(--text-rgb, 255, 255, 255), 0.4);
  padding-top: 0.75rem;
  border-top: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.06);
}
.tag-pills { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; }
.tag-pill {
  font-size: 0.6rem;
  background: rgba(var(--text-rgb, 255, 255, 255), 0.06);
  padding: 0.15rem 0.5rem;
  border-radius: 0.25rem;
  color: rgba(var(--text-rgb, 255, 255, 255), 0.5);
  font-weight: 500;
}

/* ===== ANNOUNCEMENT CARD ===== */
.announcements-list { display: flex; flex-direction: column; gap: 0.75rem; }
.announcement-card {
  background: rgba(var(--text-rgb, 255, 255, 255), 0.04);
  border: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.08);
  border-left: 3px solid var(--brand-500);
  border-radius: var(--radius-sm);
  padding: 1rem;
  display: flex;
  gap: 0.75rem;
  cursor: pointer;
  transition: var(--transition-fast);
}
.announcement-card:hover {
  background: rgba(var(--text-rgb, 255, 255, 255), 0.08);
  transform: translateX(3px);
}
.announcement-card.priority-penting { border-left-color: #f59e0b; }
.announcement-card.priority-urgent { border-left-color: #ef4444; }
.announcement-priority { font-size: 1rem; opacity: 0.6; padding-top: 0.1rem; }
.announcement-body { flex: 1; }
.announcement-body h4 { font-size: 0.9rem; margin-bottom: 0.3rem; line-height: 1.3; font-weight: 600; }
.announcement-date { font-size: 0.7rem; color: rgba(var(--text-rgb, 255, 255, 255), 0.4); }

/* ===== IKLAN / BANNER SIDEBAR (publik) ===== */
.iklan-list { display: flex; flex-direction: column; gap: 0.85rem; }
.iklan-item {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.08);
  background: var(--glass-bg);
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
a.iklan-item:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.14); }
.iklan-item img { width: 100%; height: auto; display: block; aspect-ratio: 4/3; object-fit: cover; }
.iklan-judul {
  padding: 0.5rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(var(--text-rgb, 255, 255, 255), 0.65);
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  a.iklan-item:hover { transform: none; }
}
.badge-priority {
  font-size: 0.55rem;
  padding: 0.15rem 0.4rem;
  border-radius: 0.2rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  display: inline-block;
  letter-spacing: 0.5px;
}
.badge-priority.normal { background: rgba(14, 165, 233, 0.15); color: #7dd3fc; }
.badge-priority.penting { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }
.badge-priority.urgent { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }

/* ===== PORTAL GRID ===== */
.portal-container { max-width: 1200px; margin: 0 auto; padding: 1.5rem 0; }
.portal-category-title {
  font-size: 1rem;
  margin: 1.5rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.08);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(var(--text-rgb, 255, 255, 255), 0.7);
}
.portal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}
.app-card {
  background-color: rgba(var(--text-rgb, 255, 255, 255), 0.05);
  border: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.08);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1rem;
  text-align: center;
  text-decoration: none;
  color: var(--text-main);
  transition: var(--transition-normal);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}
.app-card-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to bottom, rgba(15, 23, 42, 0) 30%, rgba(15, 23, 42, 0.95) 100%);
  z-index: 1;
  transition: 0.3s ease;
}
body.theme-light .app-card-overlay {
  background: linear-gradient(to bottom, rgba(var(--text-rgb, 255, 255, 255), 0) 30%, rgba(var(--text-rgb, 255, 255, 255), 0.95) 100%);
}
.app-card-content {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
}
/* When card has image bg (overlay present), push text to bottom */
.app-card-overlay ~ .app-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.app-card::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(to right, transparent, rgba(var(--text-rgb, 255, 255, 255), 0.06), transparent);
  transform: skewX(-20deg);
  transition: 0.6s;
  z-index: 3;
}
.app-card:hover::before { left: 150%; }
.app-card:hover {
  transform: translateY(-4px);
  background-color: rgba(var(--text-rgb, 255, 255, 255), 0.1);
  box-shadow: var(--shadow-md);
  border-color: rgba(var(--text-rgb, 255, 255, 255), 0.2);
}
.app-card:hover .app-card-overlay {
  background: linear-gradient(to bottom, rgba(15, 23, 42, 0) 40%, rgba(15, 23, 42, 0.85) 100%);
}
body.theme-light .app-card:hover .app-card-overlay {
  background: linear-gradient(to bottom, rgba(var(--text-rgb, 255, 255, 255), 0) 40%, rgba(var(--text-rgb, 255, 255, 255), 0.85) 100%);
}
.icon-container {
  width: 56px; height: 56px;
  margin: 0 auto 0.75rem;
  background: rgba(14, 165, 233, 0.1);
  border: 1px solid rgba(14, 165, 233, 0.15);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  color: var(--brand-500);
}
.app-card h3 { font-size: 0.9rem; margin-bottom: 0.3rem; font-weight: 700; }
.app-card p { font-size: 0.75rem; color: rgba(var(--text-rgb, 255, 255, 255), 0.75); line-height: 1.4; }
.badge-soon {
  position: absolute; top: 0.5rem; right: 0.5rem;
  background: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
  font-size: 0.55rem;
  padding: 0.15rem 0.5rem;
  border-radius: 0.2rem;
  font-weight: 700;
  text-transform: uppercase;
}
.app-card.soon { opacity: 0.5; cursor: default; }

/* ===== PROFIL ===== */
.profil-container { max-width: 1280px; margin: 0 auto; padding: 1.5rem 0; }
.profil-layout-grid {
  display: grid;
  grid-template-columns: 1fr 450px;
  gap: 2rem;
  align-items: flex-start;
}
.glass-card {
  background: rgba(var(--text-rgb, 255, 255, 255), 0.02);
  border: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.1);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}
.glass-card-title {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.1);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.profil-card-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.profil-item { margin-bottom: 1rem; }
.profil-label { font-size: 0.7rem; color: rgba(var(--text-rgb, 255, 255, 255), 0.45); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.15rem; font-weight: 600; }
.profil-value { font-size: 1rem; font-weight: 600; }
.profil-kontak { margin-top: 1rem; }
.kontak-list { list-style: none; }
.kontak-list li { margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.75rem; font-size: 0.9rem; }
.kontak-list i { color: var(--brand-500); width: 16px; text-align: center; }
.profil-alamat { margin-top: 1.5rem; }
.alamat-content { display: flex; gap: 0.75rem; align-items: flex-start; background: rgba(0, 0, 0, 0.15); padding: 1rem; border-radius: var(--radius-sm); font-size: 0.9rem; }

/* ===== ARTICLE DETAIL ===== */
.artikel-detail-container { max-width: 860px; margin: 0 auto; padding: 1.5rem 2rem 4rem; }
.btn-back {
  background: rgba(var(--text-rgb, 255, 255, 255), 0.06);
  border: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.1);
  color: rgba(var(--text-rgb, 255, 255, 255), 0.7);
  padding: 0.4rem 1rem;
  border-radius: 2rem;
  cursor: pointer;
  margin-bottom: 1.5rem;
  display: inline-flex; align-items: center; gap: 0.4rem;
  transition: var(--transition-fast);
  font-size: 0.8rem;
}
.btn-back:hover { background: rgba(var(--text-rgb, 255, 255, 255), 0.12); color: #fff; }
.artikel-detail-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 1);
  border-radius: var(--radius-xl);
  padding: 2rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  color: #1e293b;
}
.artikel-cover {
  width: 100%; height: 320px;
  border-radius: var(--radius-md);
  background-size: cover; background-position: center; background-color: rgba(0, 0, 0, 0.2);
  margin-bottom: 2rem;
}
.artikel-meta { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; color: #64748b; font-size: 0.85rem; }
.artikel-title { font-size: 2.25rem; font-weight: 800; margin-bottom: 1rem; line-height: 1.3; color: #0f172a; }
.artikel-content { line-height: 1.8; font-size: 1.05rem; margin-bottom: 2.5rem; color: #334155; }
.artikel-content img { max-width: 100%; border-radius: var(--radius-sm); margin: 1rem 0; }

/* ===== COMMENT SECTION ===== */
.comment-section { margin-top: 3rem; border-top: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.08); padding-top: 2rem; }
.comment-section h3 { font-size: 1.25rem; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem; color: #0f172a; }
.comment-form { background: rgba(0, 0, 0, 0.03); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 2rem; border: 1px solid rgba(0,0,0,0.05); }
.comment-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.comments-list { display: flex; flex-direction: column; gap: 1.5rem; }
.comment-item { display: flex; gap: 1rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
.comment-item:last-child { border-bottom: none; padding-bottom: 0; }
.comment-avatar { width: 45px; height: 45px; border-radius: 50%; background: var(--brand-500); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; flex-shrink: 0; }
.comment-body { flex: 1; }
.comment-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; }
.comment-author { font-weight: 700; font-size: 0.95rem; color: #0f172a; }
.comment-date { font-size: 0.75rem; color: #64748b; }
.comment-text { font-size: 0.9rem; color: #475569; line-height: 1.6; }

/* ===== SHARE BUTTONS ===== */
.share-section { display: flex; gap: 0.6rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.06); align-items: center; flex-wrap: wrap; }
.share-btn {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(var(--text-rgb, 255, 255, 255), 0.06); color: rgba(var(--text-rgb, 255, 255, 255), 0.7);
  text-decoration: none; transition: var(--transition-fast);
  cursor: pointer; border: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.1); font-size: 0.85rem;
}
.share-btn:hover { background: rgba(var(--text-rgb, 255, 255, 255), 0.15); color: #fff; transform: translateY(-2px); }

/* ===== BUTTONS ===== */
.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-ghost {
  padding: 0.55rem 1.1rem;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-secondary);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: var(--transition-fast);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
}
.btn-primary { background: var(--brand-500); color: #fff; }
.btn-primary:hover { background: #0284c7; }
.btn-secondary { background: rgba(var(--text-rgb, 255, 255, 255), 0.1); color: #fff; }
.btn-secondary:hover { background: rgba(var(--text-rgb, 255, 255, 255), 0.2); }
.btn-success { background: #10b981; color: #fff; }
.btn-success:hover { background: #059669; }
.btn-danger { background: #ef4444; color: #fff; }
.btn-danger:hover { background: #dc2626; }
.btn-ghost { background: transparent; color: rgba(var(--text-rgb, 255, 255, 255), 0.7); border: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.15); }
.btn-ghost:hover { background: rgba(var(--text-rgb, 255, 255, 255), 0.06); color: #fff; }
.btn-full { width: 100%; margin-top: 0.75rem; }
.btn-sm { padding: 0.35rem 0.7rem; font-size: 0.8rem; }
.btn-close-panel { margin-top: 1rem; }

/* ===== FORMS ===== */
.form-group { margin-bottom: 1rem; }
.form-row { display: flex; gap: 0.75rem; margin-bottom: 1rem; }
.form-row > * { flex: 1; }
.form-label { display: block; font-size: 0.8rem; margin-bottom: 0.4rem; color: rgba(var(--text-rgb, 255, 255, 255), 0.6); font-weight: 500; }
.form-label.blue { color: var(--brand-500); }
.form-label.green { color: var(--brand-accent); }
.form-input, .form-file, .form-color {
  width: 100%;
  background: rgba(var(--text-rgb, 255, 255, 255), 0.05);
  border: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.15);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  color: var(--text-main);
  font-family: var(--font-secondary);
  font-size: 0.95rem;
  transition: var(--transition-fast);
}
.form-color { padding: 0.2rem 0.4rem; height: 42px; cursor: pointer; }
.form-input:focus { outline: none; border-color: var(--brand-500); background: rgba(var(--text-rgb, 255, 255, 255), 0.1); box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15); }
.form-input::placeholder { color: rgba(var(--text-rgb, 255, 255, 255), 0.35); }
select.form-input option { background-color: var(--bg-color-body, #1e293b); color: var(--text-main); }
.form-divider { border-top: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.06); padding-top: 1rem; margin-top: 0.5rem; }
.checkbox-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.85rem; }

/* ===== MODALS ===== */
.modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  opacity: 0; pointer-events: none;
  transition: var(--transition-normal);
}
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-box {
  background: var(--bg-color-body, #1e293b);
  border: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.1);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  max-width: 90%;
  width: 400px;
  transform: scale(0.95) translateY(10px);
  transition: var(--transition-normal);
  box-shadow: var(--shadow-xl);
  position: relative;
}
.modal-overlay.active .modal-box { transform: scale(1) translateY(0); }
.modal-close { position: absolute; top: 1rem; right: 1.5rem; background: transparent; border: none; color: rgba(var(--text-rgb, 255, 255, 255), 0.5); font-size: 1.5rem; cursor: pointer; }
.modal-close:hover { color: var(--text-main); }
.login-icon { font-size: 2.5rem; color: var(--brand-500); text-align: center; margin-bottom: 0.75rem; }
.modal-login h3 { text-align: center; font-size: 1.5rem; }
.login-subtitle { text-align: center; color: rgba(var(--text-rgb, 255, 255, 255), 0.5); margin-bottom: 1.5rem; font-size: 0.85rem; }
.login-form { display: flex; flex-direction: column; gap: 0.75rem; }

/* Modal Hub */
.modal-hub { width: 550px; text-align: center; }
.hub-subtitle { color: rgba(var(--text-rgb, 255, 255, 255), 0.5); margin-bottom: 1.5rem; font-size: 0.85rem; }
.hub-buttons { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; }
.hub-btn {
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 1.25rem; text-align: left;
  background: rgba(var(--text-rgb, 255, 255, 255), 0.04); border: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.08);
  padding: 1.25rem; border-radius: var(--radius-md); cursor: pointer; color: #fff; transition: var(--transition-fast);
  width: 100%; box-sizing: border-box; outline: none;
}
.hub-btn:hover { background: rgba(var(--text-rgb, 255, 255, 255), 0.08); border-color: rgba(var(--text-rgb, 255, 255, 255), 0.15); }
.hub-btn h3 { font-size: 1rem; margin-bottom: 0.2rem; }
.hub-btn p { font-size: 0.8rem; color: rgba(var(--text-rgb, 255, 255, 255), 0.7); line-height: 1.4; margin-top: 0.2rem; }
.hub-btn-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
.hub-btn-icon.blue { background: rgba(14, 165, 233, 0.15); color: #38bdf8; }
.hub-btn-icon.indigo { background: rgba(99, 102, 241, 0.15); color: #818cf8; }

/* ===== ADMIN PANEL ===== */
.admin-panel { width: 95%; max-width: 1200px; height: 88vh; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.admin-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.08); background: rgba(0, 0, 0, 0.2); flex-shrink: 0; }
.admin-header h3 { font-size: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.admin-header-actions { display: flex; gap: 0.5rem; }
.admin-body { display: flex; flex: 1; overflow: hidden; }
.admin-sidebar { width: 220px; background: rgba(0, 0, 0, 0.15); border-right: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.06); padding: 0.75rem; overflow-y: auto; flex-shrink: 0; }
.sidebar-divider { height: 1px; background: rgba(var(--text-rgb, 255, 255, 255), 0.06); margin: 0.5rem 0; }
.admin-tab-btn, .jtab-btn {
  display: flex; align-items: center; gap: 0.6rem; width: 100%;
  padding: 0.6rem 0.75rem; background: transparent; border: none; color: rgba(var(--text-rgb, 255, 255, 255), 0.6);
  text-align: left; border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition-fast);
  margin-bottom: 0.25rem; font-family: var(--font-secondary); font-size: 0.8rem;
}
.admin-tab-btn:hover, .jtab-btn:hover { background: rgba(var(--text-rgb, 255, 255, 255), 0.05); color: #fff; }
.admin-tab-btn.active, .jtab-btn.active { background: var(--brand-500); color: #fff; }
.admin-content { flex: 1; padding: 1.5rem; overflow-y: auto; position: relative; }
.admin-tab { display: none; }
.admin-tab.active { display: block; animation: fadeIn 0.25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.admin-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.admin-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem; }
.admin-card { background: rgba(0, 0, 0, 0.15); padding: 1.25rem; border-radius: var(--radius-md); border: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.05); }
.tab-title { font-size: 1rem; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.5rem; }
.tab-title-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.card-subtitle { font-size: 0.8rem; margin-bottom: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.card-subtitle.blue { color: var(--brand-500); }
.card-subtitle.green { color: var(--brand-accent); }
.card-desc { font-size: 0.8rem; color: rgba(var(--text-rgb, 255, 255, 255), 0.5); margin-bottom: 1rem; }

/* ===== JURNALISTIK FULLSCREEN -> MODAL BOX ===== */
.modal-fullscreen {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(8px);
  z-index: 1000; overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.modal-fullscreen.hidden { display: none; }
.jurnalistik-panel { 
  width: 95%; max-width: 1400px; height: 92vh; 
  background: #f8fafc; border-radius: var(--radius-lg); 
  display: flex; flex-direction: column; overflow: hidden; 
  box-shadow: var(--shadow-xl); border: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.2); color: #1e293b;
}
.jurnalistik-header { padding: 1rem 1.5rem; background: #ffffff; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(0, 0, 0, 0.08); flex-shrink: 0; }
.jurnalistik-header h2 { font-size: 1.25rem; display: flex; align-items: center; gap: 0.5rem; color: #0f172a; margin: 0; }
.jurnalistik-tabs { display: flex; padding: 0 1.5rem; background: #ffffff; border-bottom: 1px solid rgba(0, 0, 0, 0.08); overflow-x: auto; flex-shrink: 0; }
.jtab-btn { padding: 1rem 1.25rem; background: transparent !important; border: none; color: #64748b; font-weight: 600; font-size: 0.95rem; cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap;
  justify-content: center; display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0; }
.jtab-btn:hover { color: #334155; }
.jtab-btn.active { color: var(--brand-500) !important; border-bottom-color: var(--brand-500); }
.jurnalistik-content { flex: 1; overflow-y: auto; padding: 1.5rem; }
.jtab { display: none; }
.jtab.active { display: block; animation: fadeIn 0.3s ease; }
.jtab-subtitle { font-size: 1.15rem; margin-bottom: 1.5rem; color: #0f172a; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(0,0,0,0.06); }
.jurnalistik-grid { display: grid; grid-template-columns: 1fr 350px; gap: 1.5rem; height: 100%; }
.jurnalistik-main { background: #ffffff; padding: 1.5rem; border-radius: var(--radius-md); border: 1px solid rgba(0,0,0,0.08); overflow-y: auto; min-width: 0; }
.jurnalistik-side { background: #ffffff; padding: 1.5rem; border-radius: var(--radius-md); border: 1px solid rgba(0,0,0,0.08); overflow-y: auto; }
.modal-fullscreen .form-input, .modal-fullscreen .form-file, .modal-fullscreen .form-color { background: #ffffff; border: 1px solid #cbd5e1; color: #1e293b; }
.modal-fullscreen .form-input:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); background: #ffffff; }
.modal-fullscreen .form-input::placeholder { color: #94a3b8; }
.modal-fullscreen .admin-list-item { background: #f8fafc; border: 1px solid #e2e8f0; color: #1e293b; }
.modal-fullscreen .btn-secondary { color: #475569; border-color: #cbd5e1; }
.modal-fullscreen .btn-secondary:hover { background: #f1f5f9; color: #0f172a; border-color: #94a3b8; }

/* ===== QUILL EDITOR ===== */
.ql-toolbar.ql-snow { border: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.1); border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: rgba(var(--text-rgb, 255, 255, 255), 0.05); }
.ql-container.ql-snow { border: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.1); border-radius: 0 0 var(--radius-sm) var(--radius-sm); height: 400px; background: rgba(0, 0, 0, 0.2); }
.ql-editor { font-size: 0.95rem; line-height: 1.7; color: rgba(var(--text-rgb, 255, 255, 255), 0.9); }
.ql-editor.ql-blank::before { color: rgba(var(--text-rgb, 255, 255, 255), 0.4); font-style: normal; }
.artikel-detail-card .ql-editor { color: #334155; font-size: 1.05rem; }

/* Dark text overrides for artikel detail card (white bg) */
.artikel-detail-card { color: #1e293b; }
.artikel-detail-card h1, .artikel-detail-card h2, .artikel-detail-card h3, .artikel-detail-card h4 { color: #0f172a; }
.artikel-detail-card p, .artikel-detail-card span, .artikel-detail-card li { color: #334155; }
.artikel-detail-card label { color: #334155; }
.artikel-detail-card .form-input { background: #ffffff !important; border: 1px solid rgba(0,0,0,0.15) !important; color: #0f172a !important; }
.artikel-detail-card .form-input:focus { border-color: var(--brand-500) !important; }
.artikel-detail-card .form-input::placeholder { color: rgba(0,0,0,0.35) !important; }
.artikel-detail-card .comment-form h3 { color: #0f172a; }
.artikel-detail-card .comment-text { color: #334155; }

/* Override Quill for Jurnalistik Light Theme */
.modal-fullscreen .ql-toolbar.ql-snow { border-color: #cbd5e1; background: #f1f5f9; }
.modal-fullscreen .ql-container.ql-snow { border-color: #cbd5e1; background: #ffffff; }
.modal-fullscreen .ql-editor { color: #1e293b; }
.modal-fullscreen .ql-editor.ql-blank::before { color: #94a3b8; }
.modal-fullscreen .ql-snow .ql-stroke { stroke: #475569; }
.modal-fullscreen .ql-snow .ql-fill { fill: #475569; }
.modal-fullscreen .ql-snow .ql-picker { color: #475569; }

/* ===== ADMIN LISTS ===== */
.admin-list { display: flex; flex-direction: column; gap: 0.5rem; }
.admin-list-item {
  background: rgba(var(--text-rgb, 255, 255, 255), 0.03);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
}
.admin-list-item-content { flex: 1; min-width: 0; }
.admin-list-item-content strong { font-size: 0.85rem; }
.admin-list-item-actions { display: flex; gap: 0.35rem; flex-shrink: 0; }

/* ===== DATA TABLES ===== */
.table-container {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-sm);
  background: rgba(var(--text-rgb, 255, 255, 255), 0.02);
  border: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.06);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  text-align: left;
}
.data-table th, .data-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.06);
}
.data-table th {
  font-weight: 700;
  color: rgba(var(--text-rgb, 255, 255, 255), 0.6);
  background: rgba(var(--text-rgb, 255, 255, 255), 0.04);
}
.data-table tbody tr:hover { background: rgba(var(--text-rgb, 255, 255, 255), 0.05); }

/* Data tables in modal fullscreen (light theme) */
.modal-fullscreen .table-container {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  padding: 1.5rem;
  border-radius: var(--radius-md);
}
.modal-fullscreen .data-table th {
  color: #64748b;
  background: #f8fafc;
  border-bottom: 2px solid #e2e8f0;
}
.modal-fullscreen .data-table td {
  border-bottom: 1px solid #e2e8f0;
  color: #334155;
}
.modal-fullscreen .data-table tbody tr:hover { background: #f1f5f9; }

/* ===== TOAST ===== */
#toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.4rem; }
.toast {
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  backdrop-filter: blur(10px);
  border-left: 3px solid var(--brand-500);
  animation: slideIn 0.3s ease forwards;
  min-width: 220px;
  box-shadow: var(--shadow-md);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}
.toast.success { border-left-color: #10b981; }
.toast.error { border-left-color: #ef4444; }
.toast.info { border-left-color: #f59e0b; }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ===== POPUP BACA KONTEN ===== */
.modal-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 2000; padding: 2rem; }
.modal-popup.hidden { display: none; }
.popup-box { background: var(--bg-color-body, #1e293b); border: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.1); border-radius: var(--radius-lg); width: 100%; max-width: 750px; max-height: 85vh; display: flex; flex-direction: column; }
.popup-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.08); }
.popup-header h2 { font-size: 1.1rem; }
.popup-close { background: transparent; border: none; color: rgba(var(--text-rgb, 255, 255, 255), 0.5); font-size: 1.5rem; cursor: pointer; }
.popup-close:hover { color: var(--text-main); }
.popup-content, .popup-body { padding: 1.5rem; overflow-y: auto; flex: 1; font-size: 0.95rem; line-height: 1.7; }
.popup-share { padding: 1rem 1.5rem; border-top: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.08); }

/* ===== PIMPINAN (PROFIL) ===== */
.pimpinan-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 1.25rem;
}
.pimpinan-card {
  background: rgba(var(--text-rgb, 255, 255, 255), 0.05);
  border: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.08);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 1.25rem;
  align-items: start;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}
/* Foto potret 3:4, bukan lingkaran 60px */
.pimpinan-foto {
  width: 100%;
  aspect-ratio: 3 / 4;
  height: auto;
  border-radius: var(--radius-md);
  object-fit: cover;
  object-position: center 40%;
  border: 1px solid rgba(var(--brand-rgb), 0.35);
  background: rgba(var(--text-rgb, 255, 255, 255), 0.1);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
  overflow: hidden;
}
.pimpinan-info {
  min-width: 0;
  word-break: break-word;
  overflow-wrap: break-word;
}
.pimpinan-nama {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
  line-height: 1.25;
  text-wrap: balance;
}
.pimpinan-jabatan {
  font-size: 0.8rem;
  font-weight: 700;
  /* --brand-500 terlalu terang di atas latar putih (rasio ~2,9:1) */
  color: var(--brand-400);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}
.pimpinan-sambutan {
  font-size: 0.85rem;
  color: rgba(var(--text-rgb, 255, 255, 255), 0.75);
  font-style: italic;
  line-height: 1.55;
}

@media (max-width: 520px) {
  .pimpinan-list { grid-template-columns: 1fr; }
  .pimpinan-card { grid-template-columns: 110px 1fr; gap: 1rem; padding: 1rem; }
}

/* ===== RESPONSIVE ===== */
.show-mobile { display: none; }
.hide-mobile { display: inline; }

/* =========================================================
   LIGHT THEME FOR ALL MODALS & POPUPS (Matching Jurnalistik) 
   ========================================================= */
.modal-box, .popup-box {
  --text-main: #1e293b !important;
  --text-rgb: 30, 41, 59 !important;
  background: #ffffff !important;
  color: #1e293b !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: var(--shadow-xl) !important;
}
.modal-box h2, .modal-box h3, .popup-box h2, .popup-box h3,
.modal-box .login-subtitle, .popup-box .hub-subtitle {
  color: #0f172a !important;
}
.popup-header, .admin-header {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}
.popup-close, .modal-close {
  color: #64748b !important;
}
.popup-close:hover, .modal-close:hover {
  color: #0f172a !important;
}

/* Modul Hub Buttons */
.hub-btn {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #1e293b !important;
}
.hub-btn:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}
.hub-btn h3 { color: #0f172a !important; }
.hub-btn p { color: #475569 !important; }

/* Admin Panel */
.admin-sidebar {
  background: #f8fafc !important;
  border-right: 1px solid #e2e8f0 !important;
}
.admin-tab-btn {
  color: #64748b !important;
}
.admin-tab-btn:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}
.admin-tab-btn.active {
  background: var(--brand-500) !important;
  color: #ffffff !important;
  border: none !important;
}
.admin-content {
  background: #ffffff !important;
}
.admin-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #1e293b !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}
.admin-card .card-subtitle {
  color: #0f172a !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

/* Forms inside Modals */
.modal-box .form-input, .modal-box .form-file, .modal-box .form-color,
.popup-box .form-input, .popup-box .form-file, .popup-box .form-color {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #1e293b !important;
}
.modal-box .form-input:focus, .popup-box .form-input:focus {
  border-color: var(--brand-500) !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1) !important;
  background: #ffffff !important;
}
.modal-box .form-input::placeholder, .popup-box .form-input::placeholder {
  color: #94a3b8 !important;
}
.modal-box label, .popup-box label, .modal-box .form-label, .popup-box .form-label {
  color: #334155 !important;
}
.modal-box .form-divider, .popup-box .form-divider, .popup-box .sidebar-divider {
  border-color: #e2e8f0 !important;
  background: #e2e8f0 !important;
}
.modal-box .checkbox-label, .popup-box .checkbox-label {
  color: #334155 !important;
}
.modal-box .btn-secondary, .popup-box .btn-secondary,
.wp-glass-container .btn-secondary {
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
  background: transparent !important;
}
.modal-box .btn-secondary:hover, .popup-box .btn-secondary:hover,
.wp-glass-container .btn-secondary:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

/* Make sure text colors are explicitly forced for generic text */
.popup-content, .popup-body, .admin-panel, .admin-content {
  color: #334155 !important;
}

@media (max-width: 1024px) {
  .hero-section { grid-template-columns: 1fr; text-align: center; padding: 2rem; gap: 2rem; min-height: auto; }
  .hero-left { order: 1; }
  .hero-right { order: 2; }
  .hero-desc { margin: 0 auto; }
  .hero-badge { margin-left: auto; margin-right: auto; }
  .hero-title { align-items: center; }
  .content-section { padding: 2rem; }
  .content-grid { grid-template-columns: 1fr; }
  .profil-layout-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .profil-card-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .admin-panel { height: 92vh; }
  .admin-sidebar { width: 100%; display: flex; overflow-x: auto; border-right: none; border-bottom: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.06); padding: 0.5rem; flex-shrink: 0; }
  .admin-tab-btn { width: auto; white-space: nowrap;
  justify-content: center; }
  .admin-grid-2 { grid-template-columns: 1fr; }
  /* .jurnalistik-grid adalah grid, bukan flex — `flex-direction` tidak berefek
     dan panel samping 350px tetap terkunci di samping editor. */
  .jurnalistik-grid { grid-template-columns: 1fr; height: auto; }
  .jurnalistik-side { width: 100%; max-height: 300px; }
}

@media (max-width: 768px) {
  .main-header { padding: 0 1rem; height: auto; flex-wrap: wrap; padding-top: 0.5rem; padding-bottom: 0.5rem; }

  /* Tujuh menu yang melipat jadi tiga baris memakan 126px — seperlima layar
     ponsel habis sebelum isi apa pun terlihat. Di layar kecil menu
     disembunyikan di balik tombol dan MENGAMBANG di bawah header (absolute),
     bukan menambah tinggi header: --header-height diukur dari tinggi header
     oleh JS, jadi kalau menu ikut mendorong header, seluruh isi halaman
     ikut terdorong turun setiap menu dibuka. */
  .nav-toggle { display: inline-flex; }
  .header-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    order: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.35rem 0.6rem 0.6rem;
    background: var(--bg-color-header-solid, var(--bg-color-header, rgba(15, 23, 42, 0.95)));
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-bottom: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.12);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
    max-height: 70vh;
    overflow-y: auto;
  }
  .main-header.nav-terbuka .header-nav { display: flex; }

  /* 44px = ambang sasaran sentuh yang nyaman dengan jari; sebelumnya 35px
     sehingga ketujuh menu mudah salah tekan. */
  .header-nav .nav-link {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 0.6rem 0.85rem;
    box-sizing: border-box;
  }
  .header-nav .nav-item { display: block; width: 100%; }
  /* Pemisah vertikal tidak masuk akal saat menu menumpuk ke bawah. */
  .header-nav .nav-divider { display: none; }
  /* Submenu ikut menumpuk, bukan mengambang saat disentuh (tidak ada hover
     di ponsel — dropdown yang bergantung :hover mustahil dibuka jari). */
  .header-nav .nav-dropdown {
    position: static;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    min-width: 0;
    width: 100%;
    border: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0 0 0 0.75rem;
    box-shadow: none;
  }
  .header-nav .nav-dropdown-item { display: flex; align-items: center; min-height: 44px; }
  .hero-section { padding: 1.5rem; }
  .hero-title { font-size: 2.5rem; }
  .hero-info-card { padding: 1.5rem; }
  .content-section { padding: 1.5rem 1rem; }
  .wp-glass-container { padding: 1.5rem; }
  .articles-grid { grid-template-columns: 1fr; }
  .portal-grid { grid-template-columns: repeat(2, 1fr); }
  .hide-mobile { display: none; }
  .show-mobile { display: inline; }
  .akreditasi-grid { grid-template-columns: 1fr 1fr 1fr; }
  /* Shorthand `padding: 0` sebelumnya ikut menghapus padding-bottom dari
     aturan dasar, sehingga bagian bawah konten tertutup footer yang fixed. */
  .view-panel { padding: 0 0 var(--footer-height, 100px); }
  .artikel-detail-container { padding: 1rem 1rem 3rem; }
  .artikel-detail-card { padding: 1.5rem; }
}
.main-header.header-solid { background: var(--bg-color-header-solid, var(--bg-color-header)); backdrop-filter: none; -webkit-backdrop-filter: none; }

@media (max-width: 480px) {
  .hero-title { font-size: 2rem; }
  .portal-grid { grid-template-columns: 1fr; }
  .comment-form-row { flex-direction: column; }
}

/* ===== GENERIC BADGE ===== */
.badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 0.25rem; font-size: 0.6rem; font-weight: 700; color: #fff; }
.badge.bg-red { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }
.badge.bg-blue { background: rgba(59, 130, 246, 0.2); color: #93c5fd; }
.badge.bg-green { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; }


.nav-dropdown.show-dropdown {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

/* ===== TAHAP 2: LIGHT MODE & WIDGETS ===== */
body.theme-light {
    --bg-color-body: #f8fafc !important;
    --text-main: #0f172a !important;
    --bg-color-header: rgba(255,255,255,0.85) !important;
    --text-header: #0f172a !important;
    --bg-color-footer: rgba(255,255,255,0.85) !important;
    --text-footer: #0f172a !important;
    --glass-bg: rgba(255,255,255,0.7) !important;
    --glass-border: rgba(0,0,0,0.1) !important;
    background: var(--bg-color-body) !important;
}
body.theme-light .app-card:hover { background-color: rgba(255,255,255,0.95) !important; }
body.theme-light .glass-card { background: rgba(255,255,255,0.6) !important; border: 1px solid rgba(0,0,0,0.1) !important; box-shadow: var(--shadow-md) !important; color: #0f172a !important; }
body.theme-light .form-input, body.theme-light .form-file, body.theme-light .form-color { background: rgba(var(--text-rgb, 255, 255, 255), 0.8) !important; border: 1px solid rgba(0, 0, 0, 0.15) !important; color: #0f172a !important; }
body.theme-light .form-input:focus { background: #ffffff !important; border-color: var(--brand-500) !important; }
body.theme-light .form-input::placeholder { color: rgba(0, 0, 0, 0.35) !important; }
body.theme-light select.form-input option { background-color: #ffffff; color: #0f172a; }

/* WA Widget */
/* z-index harus di bawah .modal-overlay/.modal-fullscreen (1000) dan
   .modal-popup (2000), kalau tidak tombol ini mengambang di atas panel admin.
   Tetap di atas header/footer (100) supaya tidak tertutup footer. */
.wa-widget {
    position: fixed; bottom: 30px; right: 30px; z-index: 500;
    width: 60px; height: 60px; background-color: #25D366; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 35px; box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    cursor: pointer; transition: transform 0.3s ease; animation: pulse-wa 2s infinite;
}
.wa-widget:hover { transform: scale(1.1); }
@keyframes pulse-wa {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* PMB Modal Overlay */
.pmb-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.8); z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.4s ease;
}
.pmb-overlay.active { opacity: 1; pointer-events: auto; }
.pmb-modal {
    position: relative; width: auto; max-width: 90vw;
    max-height: 90vh; overflow-y: auto;
    background: var(--bg-color-body); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl); transform: translateY(50px);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.pmb-overlay.active .pmb-modal { transform: translateY(0); }
.pmb-modal img { max-width: 100%; max-height: 70vh; object-fit: contain; display: block; margin: 0 auto; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.pmb-modal-content { padding: 1.25rem 1.5rem; text-align: center; }
.pmb-close {
    position: absolute; top: 15px; right: 15px;
    width: 35px; height: 35px; background: rgba(0,0,0,0.5); color: white;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 1.2rem; border: none; z-index: 10;
}
.pmb-close:hover { background: rgba(0,0,0,0.8); }

/* Stats Counter */
/* ===== STATISTIK KAMPUS =====
   Palet kategorikal sudah divalidasi terhadap latar #ffffff:
   #0284c7 vs #eb6834 — CVD ΔE 21,3 · penglihatan normal ΔE 31,9 · kontras >= 3:1 */
#stats-container {
    --viz-seri-1: #0284c7;
    --viz-seri-2: #eb6834;
    --viz-track: #eef2f6;
    --viz-garis: #e2e8f0;
    --viz-ink: #0f172a;
    --viz-ink-2: #475569;
    --viz-ink-3: #64748b;
}

/* Catatan periode data, ditulis bebas oleh admin (mis. "Data per Semester
   Genap 2025/2026") — bukan angka yang bisa dihitung sistem. */
.stat-catatan {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 0.75rem; font-weight: 600;
    color: var(--brand-700);
    background: rgba(var(--brand-rgb), 0.1);
    border: 1px solid rgba(var(--brand-rgb), 0.25);
    padding: 0.35rem 0.75rem;
    border-radius: 2rem;
    margin-bottom: 1.1rem;
}
.stat-catatan i { font-size: 0.8em; opacity: 0.8; }

.stat-periode-picker {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 0.5rem; margin-bottom: 0.75rem;
    font-size: 0.8rem; font-weight: 600; color: var(--text-secondary, #475569);
}
.stat-periode-picker select {
    width: auto; padding: 0.35rem 0.65rem;
    font-size: 0.8rem; font-weight: 600;
}

.stats-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem; text-align: center;
}
.stat-item {
    padding: 1.25rem 1rem;
    border-radius: var(--radius-md);
    transition: background 0.25s ease;
}
.stat-item:hover { background: rgba(var(--brand-rgb), 0.05); }
/* Kartu yang bisa diklik dirender sebagai <button>, bukan <div> — reset dulu
   gaya bawaan tombol (border, font, cursor) sebelum mengambil tampilan
   .stat-item yang sama seperti kartu statis. */
button.stat-item {
    width: 100%;
    border: none;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}
.stat-item-tautan {
    position: relative;
    box-shadow: inset 0 0 0 1px transparent;
}
.stat-item-tautan:hover,
.stat-item-tautan:focus-visible {
    background: rgba(var(--brand-rgb), 0.08);
    box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), 0.25);
}
.stat-item-tautan:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.stat-tautan-hint {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--brand-600);
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.stat-item-tautan:hover .stat-tautan-hint,
.stat-item-tautan:focus-visible .stat-tautan-hint {
    opacity: 1;
    transform: translateY(0);
}
.stat-tautan-hint i { font-size: 0.85em; margin-left: 0.2rem; }
.stat-ikon { font-size: 1.1rem; color: var(--viz-seri-1); opacity: 0.55; margin-bottom: 0.5rem; display: block; }
/* Angka besar memakai angka proporsional, bukan tabular-nums */
.stat-number {
    font-size: 2.9rem; font-weight: 800; line-height: 1;
    color: var(--brand-600); margin-bottom: 0.4rem;
}
.stat-label { font-size: 1rem; font-weight: 700; color: var(--viz-ink); }
.stat-ket { font-size: 0.78rem; color: var(--viz-ink-3); margin-top: 0.2rem; }

@media (prefers-reduced-motion: reduce) {
    .stat-tautan-hint { transition: none; }
}

/* --- Panel rincian --- */
.stat-rincian { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--viz-garis); }
.stat-rincian-kepala {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.stat-tabs { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.stat-tab {
    border: 1px solid var(--viz-garis);
    background: #fff;
    color: var(--viz-ink-2);
    font-family: var(--font-secondary);
    font-size: 0.82rem; font-weight: 600;
    padding: 0.4rem 0.9rem;
    border-radius: 2rem;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.stat-tab:hover { border-color: var(--viz-seri-1); color: var(--brand-700); }
.stat-tab.active {
    background: rgba(var(--brand-rgb), 0.14);
    border-color: rgba(var(--brand-rgb), 0.4);
    color: var(--brand-700);
}
.stat-tab:focus-visible, .stat-tabel-btn:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.stat-tabel-btn {
    border: 1px solid var(--viz-garis); background: #fff;
    color: var(--viz-ink-2); font-family: var(--font-secondary);
    font-size: 0.78rem; font-weight: 600;
    padding: 0.4rem 0.8rem; border-radius: var(--radius-sm); cursor: pointer;
}
.stat-tabel-btn:hover { background: #f8fafc; color: var(--viz-ink); }

/* --- Bar horizontal --- */
.viz { display: flex; flex-direction: column; gap: 0.85rem; }
.viz-baris { display: grid; grid-template-columns: minmax(120px, 190px) 1fr auto; gap: 0.9rem; align-items: center; }
.viz-nama { font-size: 0.85rem; font-weight: 600; color: var(--viz-ink-2); overflow-wrap: break-word; }
.viz-track {
    display: flex;
    gap: 2px;                 /* jarak antar segmen memakai warna latar, bukan garis tepi */
    height: 14px;
    background: var(--viz-track);
    border-radius: 4px;
    overflow: hidden;
}
.viz-bar {
    height: 100%;
    border-radius: 0 4px 4px 0;   /* ujung data membulat, pangkal menempel garis dasar */
    min-width: 3px;
    transition: opacity 0.2s ease, filter 0.2s ease;
    cursor: default;
}
.viz-bar:first-child { border-radius: 4px 0 0 4px; }
.viz-track > .viz-bar:only-child { border-radius: 4px; }
.viz-bar.seri-1 { background: var(--viz-seri-1); }
.viz-bar.seri-2 { background: var(--viz-seri-2); }
.viz-bar:hover, .viz-bar:focus-visible { filter: brightness(1.1); outline: none; }
.viz-bar:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand-500); }
.viz-nilai {
    font-size: 0.92rem; font-weight: 700; color: var(--viz-ink);
    font-variant-numeric: tabular-nums; min-width: 3.2rem; text-align: right;
}

.viz-legenda { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1rem; }
.viz-legenda span { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--viz-ink-2); }
.viz-kotak { width: 11px; height: 11px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.viz-kotak.seri-1 { background: var(--viz-seri-1); }
.viz-kotak.seri-2 { background: var(--viz-seri-2); }

.viz-kosong, .viz-catatan { font-size: 0.85rem; color: var(--viz-ink-3); line-height: 1.6; }
.viz-catatan { margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px solid var(--viz-garis); }

/* Tooltip: melengkapi label, bukan satu-satunya cara membaca nilai */
.viz-bar[data-tip] { position: relative; }
.viz-bar[data-tip]:hover::after, .viz-bar[data-tip]:focus-visible::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    background: var(--viz-ink); color: #fff;
    font-size: 0.75rem; font-weight: 500; white-space: nowrap;
    padding: 0.35rem 0.6rem; border-radius: var(--radius-sm);
    pointer-events: none; z-index: 5;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

/* --- Tabel padanan grafik --- */
.stat-tabel-bungkus { overflow-x: auto; }
.stat-tabel { width: 100%; border-collapse: collapse; min-width: 480px; }
.stat-tabel th, .stat-tabel td {
    padding: 0.6rem 0.75rem; text-align: right;
    border-bottom: 1px solid var(--viz-garis); font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}
.stat-tabel th:first-child, .stat-tabel td:first-child { text-align: left; font-variant-numeric: normal; }
.stat-tabel thead th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--viz-ink-3); font-weight: 700; }
.stat-tabel tbody td { color: var(--viz-ink); }
.stat-tabel tfoot th { font-weight: 700; color: var(--viz-ink); border-bottom: none; border-top: 2px solid var(--viz-garis); }

@media (max-width: 560px) {
    .stat-number { font-size: 2.2rem; }
    .viz-baris { grid-template-columns: 1fr auto; }
    .viz-nama { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
    .stat-item, .viz-bar, .stat-tab { transition: none; }
}

/* Gallery & Agenda */
.gallery-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

/* Strip kegiatan di beranda: digulir horizontal, bukan grid yang membungkus.
   .gallery-grid (di atas) tetap dipakai untuk modal "Lihat Semua". */
.gallery-strip-wadah { position: relative; }
.gallery-strip {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    padding-bottom: 0.4rem;
    /* Sembunyikan scrollbar visual tapi tetap bisa digulir (drag/roda mouse/tombol panah) */
    scrollbar-width: thin;
}
.gallery-strip .gallery-item {
    flex: 0 0 auto;
    width: 220px;
    scroll-snap-align: start;
}
.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.08);
    background: #ffffff;
    color: var(--brand-700);
    box-shadow: 0 6px 18px rgba(0,0,0,0.16);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
    transition: background 0.2s ease, transform 0.2s ease;
}
.gallery-nav:hover { background: var(--brand-500); color: #fff; transform: translateY(-50%) scale(1.08); }
.gallery-nav:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.gallery-nav-kiri { left: -14px; }
.gallery-nav-kanan { right: -14px; }
@media (max-width: 640px) {
    .gallery-nav { display: none !important; } /* di ponsel geser dengan jari sudah wajar */
    .gallery-strip .gallery-item { width: 78vw; max-width: 260px; }
}
@media (prefers-reduced-motion: reduce) {
    .gallery-strip { scroll-behavior: auto; }
    .gallery-nav:hover { transform: translateY(-50%); }
}

.gallery-item {
    position: relative; border-radius: var(--radius-md); overflow: hidden;
    aspect-ratio: 4/3; cursor: pointer;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.gallery-item:hover img { transform: scale(1.1); }
.gallery-caption {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: rgba(0, 0, 0, 0.7); color: #ffffff;
    padding: 0.75rem; font-size: 0.85rem; text-align: center;
    backdrop-filter: blur(4px); margin: 0;
    transform: translateY(100%); transition: transform 0.3s ease;
}
.gallery-item:hover .gallery-caption { transform: translateY(0); }

/* Penanda jumlah foto pada kartu kegiatan yang punya lebih dari satu foto */
.gallery-count {
    position: absolute; top: 0.6rem; right: 0.6rem;
    background: rgba(0, 0, 0, 0.65); color: #fff;
    padding: 0.22rem 0.55rem; border-radius: 2rem;
    font-size: 0.7rem; font-weight: 600;
    display: flex; align-items: center; gap: 0.35rem;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    pointer-events: none;
}
.gallery-count i { font-size: 0.75em; }

/* ===== LIGHTBOX GALERI ===== */
/* Di bawah .modal-popup (2000) tapi di atas header/footer (100). */
.lightbox {
    position: fixed; inset: 0; z-index: 1500;
    background: rgba(8, 12, 16, 0.94);
    display: flex; align-items: center; justify-content: center;
    gap: 0.5rem; padding: 1.5rem;
}
.lightbox.hidden { display: none; }
.lightbox-stage {
    margin: 0; flex: 1; min-width: 0; max-width: 1100px;
    display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
}
.lightbox-stage img {
    max-width: 100%; max-height: calc(100vh - 15rem);
    object-fit: contain; border-radius: var(--radius-md);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.lightbox-stage figcaption {
    display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
    color: #fff; text-align: center;
}
#lightbox-judul { font-family: var(--font-primary); font-weight: 700; font-size: 1rem; }
#lightbox-hitung { font-size: 0.78rem; color: rgba(255, 255, 255, 0.6); font-variant-numeric: tabular-nums; }
.lightbox-close {
    position: absolute; top: 1.1rem; right: 1.4rem;
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer;
    transition: background 0.2s ease;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.25); }
.lightbox-nav {
    flex-shrink: 0;
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff; font-size: 1.15rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
}
.lightbox-nav:hover { background: rgba(255, 255, 255, 0.28); transform: scale(1.08); }
.lightbox-close:focus-visible, .lightbox-nav:focus-visible,
.lightbox-thumb:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }
.lightbox-strip {
    position: absolute; left: 0; right: 0; bottom: 1rem;
    display: flex; gap: 0.5rem; justify-content: center;
    padding: 0 1.5rem; overflow-x: auto;
}
.lightbox-thumb {
    width: 62px; height: 46px; object-fit: cover; flex-shrink: 0;
    border-radius: var(--radius-sm); cursor: pointer;
    opacity: 0.45; border: 2px solid transparent;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}
.lightbox-thumb:hover { opacity: 0.85; }
.lightbox-thumb.active { opacity: 1; border-color: var(--brand-400); }

@media (max-width: 640px) {
    .lightbox { padding: 1rem 0.5rem; }
    .lightbox-nav { width: 40px; height: 40px; font-size: 1rem; }
    .lightbox-stage img { max-height: calc(100vh - 13rem); }
    .lightbox-thumb { width: 50px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
    .lightbox-nav:hover { transform: none; }
    .gallery-item:hover img { transform: none; }
}
/* ===== PUSAT UNDUHAN (folder per kategori) ===== */
.unduhan-cari {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.9rem;
    margin-bottom: 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
    flex-wrap: wrap;
}
.unduhan-cari > i { color: #94a3b8; font-size: 0.85rem; flex-shrink: 0; }
.unduhan-cari input {
    flex: 1;
    min-width: 160px;
    border: none;
    background: transparent;
    font-family: var(--font-secondary);
    font-size: 0.9rem;
    color: #0f172a;
    outline: none;
}
.unduhan-cari input::placeholder { color: #94a3b8; }
.unduhan-jumlah { font-size: 0.75rem; color: #64748b; white-space: nowrap; flex-shrink: 0; }
.unduhan-kosong { color: #64748b; font-size: 0.9rem; padding: 1rem 0; }

.unduhan-folder {
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 0.6rem;
    background: #ffffff;
}
.unduhan-folder-kepala {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    background: #f8fafc;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-secondary);
    transition: background 0.2s ease;
}
.unduhan-folder-kepala:hover { background: #eef4f8; }
.unduhan-folder-kepala:focus-visible { outline: 2px solid var(--brand-500); outline-offset: -2px; }
.unduhan-folder-ikon { color: var(--brand-600); font-size: 1.05rem; flex-shrink: 0; }
.unduhan-folder-nama {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    font-size: 0.92rem;
    color: #0f172a;
    overflow-wrap: break-word;
}
.unduhan-folder-jumlah {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--brand-700);
    background: rgba(var(--brand-rgb), 0.12);
    padding: 0.15rem 0.55rem;
    border-radius: 2rem;
    white-space: nowrap;
}
.unduhan-panah {
    flex-shrink: 0;
    color: #94a3b8;
    font-size: 0.75rem;
    transition: transform 0.25s ease;
}
.unduhan-folder.terbuka .unduhan-panah { transform: rotate(180deg); }

.unduhan-folder-isi { display: none; padding: 0.5rem; }
.unduhan-folder.terbuka .unduhan-folder-isi { display: block; }

.unduhan-berkas {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 0.85rem;
    border-radius: var(--radius-sm);
    flex-wrap: wrap;
}
.unduhan-berkas + .unduhan-berkas { border-top: 1px solid #f1f5f9; }
.unduhan-berkas:hover { background: #f8fafc; }
.unduhan-ikon { font-size: 1.35rem; flex-shrink: 0; }
.unduhan-info { flex: 1; min-width: 200px; }
.unduhan-info h4 {
    margin: 0 0 0.2rem;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.4;
    color: #0f172a;
    overflow-wrap: break-word;
}
.unduhan-meta {
    font-size: 0.72rem;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}
.unduhan-aksi { display: flex; gap: 0.5rem; flex-shrink: 0; }
.unduhan-aksi .btn-secondary,
.unduhan-aksi .btn-primary {
    padding: 0.4rem 0.8rem;
    font-size: 0.82rem;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}
.unduhan-aksi .btn-secondary { border: 1px solid #cbd5e1; background: #fff; color: #475569; }
.unduhan-aksi .btn-secondary:hover { background: #f1f5f9; color: #0f172a; }

@media (max-width: 640px) {
    .unduhan-berkas { align-items: flex-start; }
    .unduhan-aksi { width: 100%; }
    .unduhan-aksi .btn-secondary, .unduhan-aksi .btn-primary { flex: 1; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .unduhan-panah { transition: none; }
}

/* Statistik dan Kalender Akademik berdampingan di baris atas beranda */
.beranda-atas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 2rem;
    align-items: start;
}
.beranda-kalender { border-left: 1px solid var(--viz-garis, #e2e8f0); padding-left: 2rem; }
.beranda-kalender .section-header { margin-bottom: 1rem; }

@media (max-width: 1100px) {
    .beranda-atas { grid-template-columns: 1fr; gap: 1.5rem; }
    .beranda-kalender {
        border-left: none; padding-left: 0;
        border-top: 1px solid var(--viz-garis, #e2e8f0); padding-top: 1.5rem;
    }
}

/* ===== KALENDER AKADEMIK ===== */
.kalender {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 0.85rem;
}
.kal-kepala {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.kal-judul {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: capitalize;
    color: var(--text-main);
}
.kal-nav {
    width: 30px; height: 30px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.15);
    background: transparent;
    color: var(--text-main);
    cursor: pointer;
    font-size: 0.75rem;
    transition: background 0.2s ease;
}
.kal-nav:hover { background: rgba(var(--brand-rgb), 0.15); }

.kal-hari, .kal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.kal-hari span {
    text-align: center;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: rgba(var(--text-rgb, 255, 255, 255), 0.55);
    padding-bottom: 0.35rem;
}

.kal-sel {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font-secondary);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    color: rgba(var(--text-rgb, 255, 255, 255), 0.85);
    padding: 0;
}
.kal-sel.kal-luar { opacity: 0.28; }

/* Tanggal yang punya agenda: dapat latar tipis, tebal, dan bisa diklik */
button.kal-sel.kal-ada-agenda {
    cursor: pointer;
    font-weight: 700;
    color: var(--brand-400);
    background: rgba(var(--brand-rgb), 0.1);
    transition: background 0.2s ease, transform 0.15s ease;
}
button.kal-sel.kal-ada-agenda:hover {
    background: rgba(var(--brand-rgb), 0.24);
    transform: translateY(-1px);
}
button.kal-sel:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }

.kal-titik { display: flex; gap: 3px; line-height: 0; }
/* Warna diisi inline per agenda (lihat warnaAgenda() di app.js) — nilai di
   sini hanya fallback. Cincin putih tipis menjaga titik tetap terlihat baik
   di sel biasa (latar terang) maupun sel .kal-terpilih (latar biru pekat),
   tanpa perlu memaksa warnanya jadi putih dan kehilangan identitas agenda. */
.kal-titik i {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--brand-500);
    box-shadow: 0 0 0 1.5px #fff;
    display: block;
}

/* Hari ini: cincin, tetap terbaca walau tidak ada agenda */
.kal-sel.kal-hari-ini {
    box-shadow: inset 0 0 0 2px var(--brand-500);
    font-weight: 700;
}
/* Tanggal yang sedang dibuka: isian penuh */
.kal-sel.kal-terpilih {
    background: var(--brand-400) !important;
    color: #fff !important;
}
/* Titik tetap memakai warna agenda masing-masing (inline style, lihat
   .kal-titik i di atas) — cincin putihnya sudah cukup menjaga visibilitas
   di sini, tidak perlu dipaksa jadi putih polos. */

/* Tanggal libur: angka merah seperti kalender cetak. .kal-terpilih di atas
   tetap menang (pakai !important) saat tanggal ini sedang dibuka. */
button.kal-sel.kal-libur {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.1);
}
button.kal-sel.kal-libur:hover { background: rgba(220, 38, 38, 0.2); }
.kal-legenda {
    display: flex; align-items: center; gap: 0.4rem;
    margin-top: 0.6rem;
    font-size: 0.7rem; font-weight: 600;
    color: rgba(var(--text-rgb, 255, 255, 255), 0.65);
}
.kal-legenda i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.kal-hari-ini-btn {
    width: 100%;
    margin-top: 0.7rem;
    padding: 0.4rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(var(--brand-rgb), 0.3);
    background: rgba(var(--brand-rgb), 0.08);
    color: var(--brand-700);
    font-family: var(--font-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}
.kal-hari-ini-btn:hover { background: rgba(var(--brand-rgb), 0.2); }

/* ===== LAJUR AGENDA (beranda, selebar penuh di bawah statistik & kalender) ===== */
.agenda-strip {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--viz-garis, #e2e8f0);
}
.agenda-strip:empty { display: none; }
.agenda-strip-kepala {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.85rem;
}
.agenda-strip-aksi { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.agenda-strip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.75rem;
}
.agenda-lihat-semua {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: 2rem;
    border: 1px solid rgba(var(--brand-rgb), 0.35);
    background: rgba(var(--brand-rgb), 0.1);
    color: var(--brand-700);
    font-family: var(--font-secondary);
    font-size: 0.8rem; font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}
.agenda-lihat-semua:hover { background: rgba(var(--brand-rgb), 0.2); }
.agenda-lihat-semua.sekunder {
    border-color: var(--viz-garis, #e2e8f0);
    background: transparent;
    color: rgba(var(--text-rgb, 255, 255, 255), 0.7);
}
.agenda-lihat-semua:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }

/* Kartu ringkas: tombol sungguhan (bisa Tab + Enter), membuka agendanya di
   halaman Semua Agenda. Tanpa deskripsi supaya lajur tetap pendek. */
.agenda-item.agenda-ringkas {
    width: 100%;
    gap: 0.75rem; padding: 0.75rem;
    text-align: left; font: inherit; color: inherit;
    cursor: pointer;
    border-left-width: 4px; border-left-style: solid;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.agenda-item.agenda-ringkas:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08); }
.agenda-item.agenda-ringkas:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.agenda-ringkas .agenda-date { min-width: 50px; padding: 0.45rem 0.35rem; font-size: 0.68rem; }
.agenda-ringkas .agenda-date span { font-size: 1.1rem; }
.agenda-ringkas .agenda-info { min-width: 0; }
.agenda-ringkas .agenda-info h4 {
    font-size: 0.9rem; line-height: 1.35; margin-bottom: 0.25rem;
    /* Judul panjang dipotong dua baris supaya semua kartu sama tinggi */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.agenda-ringkas .kal-rentang { margin-bottom: 0.3rem; }
.agenda-lencana { display: flex; gap: 0.35rem; flex-wrap: wrap; }

.kal-detail-kepala {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(var(--text-rgb, 255, 255, 255), 0.6);
}
.kal-kosong { font-size: 0.85rem; color: rgba(var(--text-rgb, 255, 255, 255), 0.6); }
/* Blok biasa, bukan flex: dengan flex-wrap, teks tanggal yang panjang
   ("Senin, 9 November 2026 – Jumat, 13 November 2026") turun ke baris
   baru dan meninggalkan ikon jam sendirian di baris atas. */
.kal-rentang {
    font-size: 0.75rem;
    color: rgba(var(--text-rgb, 255, 255, 255), 0.65);
    margin-bottom: 0.35rem;
}
.kal-rentang i { margin-right: 0.3rem; }
.kal-status {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 0.1rem 0.45rem;
    border-radius: 2rem;
}
.kal-status.berlangsung { background: rgba(16, 185, 129, 0.18); color: #047857; }
.kal-status.akan { background: rgba(var(--brand-rgb), 0.16); color: var(--brand-700); }
.kal-status.selesai { background: rgba(var(--text-rgb, 255, 255, 255), 0.1); color: rgba(var(--text-rgb, 255, 255, 255), 0.6); }
/* Merah hanya untuk libur — satu-satunya pemakaian merah di kalender. */
.kal-status.libur { background: rgba(220, 38, 38, 0.12); color: #b91c1c; }

@media (prefers-reduced-motion: reduce) {
    button.kal-sel.kal-ada-agenda:hover { transform: none; }
}

.agenda-item {
    display: flex; gap: 1.5rem; padding: 1.5rem; background: var(--glass-bg);
    border: 1px solid var(--glass-border); border-radius: var(--radius-md);
}
.agenda-date {
    /* --brand-500 dengan teks putih hanya 2,8:1; --brand-600 menaikkannya ke ~4,2:1 */
    background: var(--brand-600); color: white; padding: 1rem;
    border-radius: var(--radius-sm); text-align: center; min-width: 80px;
    display: flex; flex-direction: column; justify-content: center; font-weight: bold;
}
.agenda-date span { font-size: 1.5rem; line-height: 1; }
/* Aturan umum ".wp-glass-container span { color: #334155 }" ikut mengenai
   angka tanggal ini, sehingga angka abu gelap tercetak di atas lencana
   berwarna gelap dan nyaris tak terbaca. Angka harus ikut putih seperti
   nama bulannya (kontras semua warna lencana sudah diuji >= 4,5:1). */
.wp-glass-container .agenda-date span { color: inherit; }
.agenda-info h4 { margin: 0 0 0.5rem 0; font-size: 1.2rem; color: #1e293b; }
.agenda-info p { margin: 0; color: #475569; opacity: 0.9; }

/* ===== HALAMAN SEMUA AGENDA ===== */
.agenda-halaman-kepala {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin: 1.25rem 0 1rem;
}
.agenda-bagikan-kalender { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.agenda-saring { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.agenda-saring-jumlah {
    display: inline-block; min-width: 1.4em;
    margin-left: 0.25rem; padding: 0 0.35rem;
    border-radius: 1rem;
    background: rgba(var(--text-rgb, 255, 255, 255), 0.1);
    font-size: 0.72em; font-variant-numeric: tabular-nums;
}
.agenda-bulan + .agenda-bulan { margin-top: 1.75rem; }
.agenda-bulan-judul {
    font-family: var(--font-primary);
    font-size: 0.85rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 1px;
    color: rgba(var(--text-rgb, 255, 255, 255), 0.7);
    margin: 0 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--viz-garis, #e2e8f0);
}
.agenda-bulan-isi {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 0.85rem;
}
.agenda-item.agenda-lengkap {
    gap: 1rem; padding: 1.1rem;
    border-left-width: 4px; border-left-style: solid;
    scroll-margin-top: calc(var(--header-height, 65px) + 1rem);
}
.agenda-lengkap .agenda-date { min-width: 60px; padding: 0.6rem 0.4rem; font-size: 0.72rem; align-self: flex-start; }
.agenda-lengkap .agenda-date span { font-size: 1.3rem; }
.agenda-lengkap .agenda-info { min-width: 0; flex: 1; }
.agenda-lengkap .agenda-info h4 { font-size: 1rem; line-height: 1.35; margin-bottom: 0.3rem; overflow-wrap: break-word; }
.agenda-lengkap .kal-rentang { margin-bottom: 0.4rem; }
.agenda-lengkap .agenda-info p { font-size: 0.85rem; line-height: 1.55; margin-top: 0.55rem; overflow-wrap: break-word; }
.agenda-bagikan {
    display: flex; align-items: center; gap: 0.4rem;
    margin-top: 0.75rem; padding-top: 0.6rem;
    border-top: 1px dashed var(--viz-garis, #e2e8f0);
}
.agenda-bagikan span {
    font-size: 0.65rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.08em;
    opacity: 0.6; margin-right: 0.15rem;
}
.agenda-bagikan .share-btn { width: 30px; height: 30px; font-size: 0.8rem; border: none; cursor: pointer; }
/* Agenda yang dibuka lewat tautan bagikan: disorot supaya langsung ketemu */
.agenda-item.agenda-disorot {
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.45);
    animation: agendaSorot 1.6s ease 0.6s 2;
}
@keyframes agendaSorot {
    50% { box-shadow: 0 0 0 7px rgba(var(--brand-rgb), 0.15); }
}

@media (max-width: 640px) {
    .agenda-bulan-isi { grid-template-columns: 1fr; }
    /* Di ponsel empat kartu bertumpuk terlalu panjang; tiga sudah cukup,
       sisanya lewat tombol Lihat semua agenda. */
    .agenda-strip-grid > .agenda-ringkas:nth-child(n+4) { display: none; }
    /* Sasaran sentuh nyaman untuk jari, sama seperti menu ponsel */
    .agenda-bagikan .share-btn { width: 42px; height: 42px; font-size: 0.95rem; }
}
@media (prefers-reduced-motion: reduce) {
    .agenda-item.agenda-ringkas:hover { transform: none; }
    .agenda-item.agenda-disorot { animation: none; }
}

/* Frameless PMB Modal */
.pmb-modal-frameless {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.pmb-modal-frameless img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  display: block;
}
.pmb-close-frameless {
  position: absolute;
  top: -15px;
  right: -15px;
  width: 40px;
  height: 40px;
  background: #ffffff;
  color: #0f172a;
  border: none;
  border-radius: 50%;
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  z-index: 10;
  transition: transform 0.2s;
}
.pmb-close-frameless:hover {
  transform: scale(1.1);
}
.btn-ok-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.9);
  color: #0ea5e9;
  border: none;
  padding: 0.8rem 2rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  transition: all 0.3s ease;
  z-index: 10;
}
.btn-ok-banner:hover {
  background: #ffffff;
  transform: translate(-50%, -50%) scale(1.05);
}
.banner-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  width: 55px;
  height: 55px;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 5;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.banner-nav:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.banner-nav.left { left: 15px; }
.banner-nav.right { right: 15px; }

.profil-sub-nav {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
  padding: 0.4rem;
  overflow-x: auto;
  white-space: nowrap;
  justify-content: center;
  background: rgba(var(--text-rgb, 255, 255, 255), 0.03);
  border: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.08);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.sub-tab-btn {
  background: transparent;
  border: none;
  /* 0.55 terlalu pucat di atas latar terang (rasio kontras ~3:1).
     0.78 menaikkannya ke sekitar 6:1 sehingga terbaca jelas. */
  color: rgba(var(--text-rgb, 255, 255, 255), 0.78);
  font-size: 0.95rem;
  font-family: var(--font-secondary);
  font-weight: 600;
  cursor: pointer;
  padding: 0.65rem 1.2rem;
  border-radius: var(--radius-md);
  transition: all 0.3s ease;
  position: relative;
  letter-spacing: 0.3px;
}
.sub-tab-btn:hover {
  color: var(--brand-400);
  background: rgba(var(--brand-rgb), 0.1);
}
/* Sebelumnya teks putih di atas latar oranye-pucat 20% — praktis tak terbaca.
   Sekarang teks brand gelap di atas tint brand, plus garis bawah tebal. */
.sub-tab-btn.active {
  color: var(--brand-700);
  background: rgba(var(--brand-rgb), 0.16);
  box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), 0.35);
  font-weight: 700;
}
.sub-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 45%;
  height: 3px;
  background: var(--brand-500);
  border-radius: 3px 3px 0 0;
}
.sub-tab-btn:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
}
.profil-sub-nav {
  border-color: rgba(var(--text-rgb, 255, 255, 255), 0.12);
}

/* Profil Tab Content */
.profil-tab-content-container { padding: 0 0.5rem; }
.pub-profil-tab { animation: fadeSlideUp 0.4s ease; }

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

/* Dosen list grid inside profil tab */
#dosen-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
#dosen-list h4 {
  color: var(--text-main, #fff) !important;
}

/* ===== KARTU PROFIL DOSEN ===== */
.dosen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 1.25rem;
}
.dosen-card {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 1.25rem;
  align-items: start;
  padding: 1.25rem;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dosen-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
}
/* Foto potret, bukan lingkaran kecil: proporsi 3:4 seperti pas foto */
.dosen-foto {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(var(--text-rgb, 255, 255, 255), 0.08);
  border: 1px solid rgba(var(--brand-rgb), 0.35);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}
.dosen-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 40% (sedikit di atas tengah) menjaga wajah tetap masuk bingkai baik untuk
     pas foto biasa maupun foto yang sangat tinggi-sempit. `top` memotong
     wajah pada foto dengan rasio ekstrem. */
  object-position: center 40%;
  display: block;
}
.dosen-foto-kosong {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  color: rgba(var(--brand-rgb), 0.3);
}
.dosen-isi { min-width: 0; }
.dosen-nama {
  margin: 0 0 0.3rem;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--brand-400);
  text-wrap: balance;
}
.dosen-jabatan {
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(var(--text-rgb, 255, 255, 255), 0.72);
  margin-bottom: 0.6rem;
}
.dosen-detail {
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.1);
}
.dosen-baris {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.3rem 0;
  border-bottom: 1px solid rgba(var(--text-rgb, 255, 255, 255), 0.07);
}
.dosen-baris-label {
  font-weight: 700;
  font-size: 0.72rem;
  color: rgba(var(--text-rgb, 255, 255, 255), 0.6);
  min-width: 72px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.dosen-baris-nilai {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-main);
  word-break: break-word;
}
.dosen-tautan {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.7rem;
}
/* Tombol tautan: teks brand gelap di atas tint brand, bukan warna warisan
   di atas oranye fallback seperti sebelumnya. */
.dosen-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--brand-700);
  background: rgba(var(--brand-rgb), 0.12);
  border: 1px solid rgba(var(--brand-rgb), 0.3);
  border-radius: var(--radius-sm);
  transition: background 0.2s ease, transform 0.2s ease;
}
.dosen-link:hover {
  background: rgba(var(--brand-rgb), 0.22);
  transform: translateY(-1px);
}
.dosen-link:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }

.dosen-prodi-judul {
  margin: 1.5rem 0 1rem;
  color: var(--text-main);
  border-bottom: 2px solid var(--brand-500);
  padding-bottom: 0.5rem;
  display: inline-block;
}
.dosen-prodi-judul i { margin-right: 0.5rem; color: var(--brand-500); }

@media (max-width: 520px) {
  .dosen-grid { grid-template-columns: 1fr; }
  .dosen-card { grid-template-columns: 116px 1fr; gap: 1rem; padding: 1rem; }
  .dosen-nama { font-size: 1rem; }
  .dosen-baris { flex-direction: column; gap: 0.1rem; }
  .dosen-baris-label { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dosen-card:hover, .dosen-link:hover { transform: none; }
}

/* Responsive profil-sub-nav */
@media (max-width: 600px) {
  .profil-sub-nav {
    justify-content: flex-start;
    gap: 0.25rem;
    padding: 0.3rem;
  }
  .sub-tab-btn {
    font-size: 0.8rem;
    padding: 0.5rem 0.8rem;
  }
}

/* Dynamic Sub-Tab Wrapper */
.dynamic-subtab-wrapper { position: relative; z-index: 1; }
.dynamic-subtab-wrapper .glass-card { margin-bottom: 1rem; }
.dst-panel .ql-editor { min-height: auto; }
.dst-panel .ql-editor img { max-width: 100%; border-radius: var(--radius-sm); }

/* Subtab editor modal Quill styling */
#subtab-quill-container .ql-toolbar { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.15); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
#subtab-quill-container .ql-container { border-color: rgba(255,255,255,0.15); border-radius: 0 0 var(--radius-sm) var(--radius-sm); color: #fff; font-family: var(--font-secondary); }
#subtab-quill-container .ql-editor { min-height: 300px; }
#subtab-quill-container .ql-snow .ql-stroke { stroke: rgba(255,255,255,0.7); }
#subtab-quill-container .ql-snow .ql-fill { fill: rgba(255,255,255,0.7); }
#subtab-quill-container .ql-snow .ql-picker-label { color: rgba(255,255,255,0.7); }