/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
/* =========================================================
   GLOBAL STYLES — Pondok Pesantren Asy-Syifaa Wal Mahmuudiyyah
   Mengikuti PANDUAN_REBUILD_WEBSITE.md (Section 2-3)
   ========================================================= */

:root {
  --primary-green: #206c4e;
  --dark-green:    #1a3e2c;
  --accent-gold:   #FFD700;
  --light-gray:    #f5f5f5;
  --text-dark:     #343A40;
  --text-light:    #ffffff;
  --radius:        15px;

  --primary-green-rgb: 32, 108, 78;
  --dark-green-rgb:    26, 62, 44;
  --accent-gold-rgb:   255, 215, 0;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

body {
  font-family: 'Roboto', 'Poppins', sans-serif;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-dark);
  background-color: #fcfcfc;
  padding-top: 75px;
  letter-spacing: 0.01em;
}

p, li, td, th, span, a, button, input, select, textarea, label, small {
  font-family: 'Roboto', 'Poppins', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  color: var(--dark-green);
  letter-spacing: -0.01em;
}

/* ============= ARABIC TYPOGRAPHY ============= */

/* Amiri auto-applied untuk semua text Arab + warna readable di latar terang.
   !important supaya override inline style legacy yang masih pakai gold. */
[lang="ar"], [dir="rtl"] {
  font-family: 'Amiri', 'Scheherazade New', 'Playfair Display', serif !important;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.7;
  color: var(--primary-green) !important;
}

/* Override khusus: Arabic di latar gelap → emas + text-shadow */
.hero-section [lang="ar"],
.hero-section .hero-arabic,
.hero-islamic [lang="ar"],
.hero-arabic,
.islamic-dark-section [lang="ar"],
.asas-box [lang="ar"],
.asas-box .kalimat-tauhid,
.tingkatan-header [lang="ar"],
.tingkatan-card .tingkatan-arabic,
.mazhab-item,
.mazhab-item[lang="ar"],
.navbar-pondok [lang="ar"],
.footer-pondok [lang="ar"],
.lightbox-backdrop [lang="ar"],
.nasab-item.nasab-prophet [lang="ar"],
.struktur-node.primary [lang="ar"],
.bg-dark-green [lang="ar"],
.bg-primary-green [lang="ar"],
.btn-cta-hero [lang="ar"] {
  color: var(--accent-gold) !important;
  text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
}

/* Variasi pillar arabic — selalu emas (bg gradient hijau di atasnya) */
.pillar-card .pillar-arabic {
  color: var(--accent-gold) !important;
  text-shadow: 0 1px 2px rgba(var(--primary-green-rgb), 0.2);
}

a { text-decoration: none; color: var(--primary-green); }
a:hover { color: var(--dark-green); }

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

/* ============== NAVBAR ============== */

.navbar-pondok {
  background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
  border-bottom: 3px solid var(--accent-gold);
  padding: 8px 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.navbar-pondok .navbar-brand {
  color: white !important;
  display: flex;
  align-items: center;
  gap: 12px;
}

.navbar-pondok .navbar-brand img {
  width: 70px;
  height: 70px;
  object-fit: contain;
}

.navbar-pondok .brand-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.1;
  color: white;
}

.navbar-pondok .brand-sub {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.8);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.navbar-pondok .nav-link {
  color: rgba(255,255,255,0.9) !important;
  font-weight: 500;
  padding: 0.5rem 1rem !important;
  transition: all 0.3s ease;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.navbar-pondok .nav-link:hover,
.navbar-pondok .nav-link.active {
  color: var(--accent-gold) !important;
  transform: translateY(-2px);
}

.navbar-pondok .dropdown-menu {
  background: rgba(var(--dark-green-rgb), 0.92);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--accent-gold-rgb), 0.2);
  border-radius: 12px;
  padding: 8px;
  margin-top: 8px;
}

.navbar-pondok .dropdown-item {
  color: rgba(255,255,255,0.9);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  transition: all 0.2s;
}

.navbar-pondok .dropdown-item:hover {
  background-color: rgba(var(--primary-green-rgb), 0.8);
  color: var(--accent-gold);
  transform: translateX(5px);
}

.navbar-toggler {
  border-color: var(--accent-gold);
}
.navbar-toggler:focus { box-shadow: none; }

.search-icon-btn {
  background: transparent;
  border: 2px solid var(--accent-gold);
  color: var(--accent-gold);
  border-radius: 50%;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.3s;
}
.search-icon-btn:hover {
  background: var(--accent-gold);
  color: var(--dark-green);
}

/* ============== HERO ============== */

.hero-section {
  position: relative;
  height: calc(100vh - 105px);
  min-height: 500px;
  color: white;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}
.hero-overlay {
  background: rgba(0,0,0,0.65);
  position: absolute; inset: 0;
}
.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 1rem;
  max-width: 1100px;
  width: 100%;
  text-align: center;
  margin: 0 auto;
}
.hero-content > *,
.hero-content > p,
.hero-content > h1,
.hero-content > div {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.hero-content .d-flex {
  justify-content: center !important;
}
.hero-intro {
  font-size: 0.9rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin-bottom: 1rem;
}
.hero-title {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  color: white;
  margin-bottom: 0.5rem;
  font-weight: 700;
}
.hero-brand {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 4.2vw, 3.4rem);
  color: var(--accent-gold);
  font-weight: 800;
  font-style: italic;
  margin-bottom: 2rem;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.4);
  line-height: 1.15;
  display: block;
  text-align: center;
  max-width: 100%;
}
.btn-cta-hero {
  background: transparent;
  color: white;
  border: 2px solid white;
  border-radius: 50px;
  padding: 0.8rem 2.5rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s;
}
.btn-cta-hero:hover {
  background: var(--accent-gold);
  color: var(--dark-green);
  border-color: var(--accent-gold);
  transform: translateY(-2px);
}

/* ============== SECTION HEADER ============== */

.section-header {
  position: relative;
  margin-bottom: 3rem;
  text-align: center;
}
.section-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  color: var(--primary-green);
  font-weight: 700;
  margin-bottom: 0.5rem;
  position: relative;
}
/* Underline emas dihilangkan untuk hindari konflik dengan teks Arabic di bawahnya.
   Pakai ArabesqueDivider atau .sub-heading sebagai pengganti dekorasi. */
.section-header .sub-heading {
  display: inline-block;
  background: linear-gradient(135deg, var(--dark-green), var(--primary-green));
  color: var(--accent-gold);
  border: 3px solid var(--accent-gold);
  border-radius: 50px;
  padding: 0.8rem 2.5rem;
  font-family: 'Playfair Display', serif;
  font-weight: 800;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 1rem;
  transition: transform 0.4s ease;
}
.section-header .sub-heading:hover {
  transform: translateY(-7px) scale(1.03);
}

/* ============== QUOTE ============== */

#quote-modern {
  background: linear-gradient(135deg, rgba(var(--primary-green-rgb),0.05), rgba(var(--accent-gold-rgb),0.05));
  padding: 4rem 0;
}
.quote-wrapper {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  padding: 2rem;
}
.quote-icon {
  font-family: 'Playfair Display', serif;
  font-size: 6rem;
  color: var(--accent-gold);
  line-height: 1;
  display: block;
  margin-bottom: -1.5rem;
}
.quote-text-modern {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  color: var(--dark-green);
  line-height: 1.6;
  border: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
}
.quote-author {
  color: var(--primary-green);
  font-weight: 600;
  font-style: normal;
}

/* ============== STAT BOX ============== */

.stat-box {
  background: white;
  border-radius: var(--radius);
  padding: 30px;
  text-align: center;
  box-shadow: 0 8px 25px rgba(0,0,0,0.09);
  transition: all 0.3s ease;
  border-top: 4px solid var(--accent-gold);
  height: 100%;
}
.stat-box:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}
.stat-number-wrapper {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 800;
  color: var(--primary-green);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.stat-label {
  font-weight: 600;
  color: var(--text-dark);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.85rem;
}

/* ============== EKSKUL CARD ============== */

.ekskul-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 1rem 0;
  scrollbar-width: none;
}
.ekskul-track::-webkit-scrollbar { display: none; }

.ekskul-card {
  flex: 0 0 200px;
  height: 280px;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
  background: var(--primary-green);
}
.ekskul-card:hover { transform: translateY(-10px); }
.ekskul-card .ekskul-img {
  position: absolute;
  inset: 0;
}
.ekskul-card .ekskul-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.ekskul-card:hover .ekskul-img img { transform: scale(1.1); }
.ekskul-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1), rgba(var(--dark-green-rgb), 0.85));
}
.ekskul-badge {
  position: absolute;
  top: 15px; right: 15px;
  width: 45px; height: 45px;
  background: var(--accent-gold);
  color: var(--dark-green);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  z-index: 2;
}
.ekskul-content {
  position: absolute;
  bottom: 15px; left: 15px; right: 15px;
  z-index: 2;
}
.ekskul-tag {
  background: rgba(var(--accent-gold-rgb), 0.95);
  color: var(--dark-green);
  padding: 6px 12px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.85rem;
  display: inline-block;
}

/* ============== GURU CARD ============== */

.guru-card {
  flex: 0 0 220px;
  background: white;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  text-align: center;
}
.guru-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.12);
}
.guru-img-container {
  height: 280px;
  overflow: hidden;
  background: var(--light-gray);
}
.guru-img-container img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.guru-card:hover .guru-img-container img { transform: scale(1.05); }
.guru-content {
  padding: 1rem 0.75rem 1.25rem;
}
.guru-jabatan {
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 0.7rem;
  color: var(--primary-green);
  font-weight: 600;
}
.guru-nama {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  color: var(--dark-green);
  margin: 0.5rem 0;
  line-height: 1.3;
}
.guru-line {
  width: 40px; height: 3px;
  background: var(--accent-gold);
  border-radius: 2px;
  margin: 0.5rem auto 0;
  transition: width 0.3s;
}
.guru-card:hover .guru-line { width: 80px; }

/* ============== GALLERY GRID ============== */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 16px;
  gap: 16px;
}
.gallery-item {
  display: block;
  position: relative;
  aspect-ratio: 1/1;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
}
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item-info {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.85));
  color: white;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity 0.3s;
}
.gallery-item:hover .gallery-item-info { opacity: 1; }
.gallery-item-info h3 { color: white; font-size: 1rem; margin-bottom: 0.25rem; }
.gallery-item-info p { font-size: 0.8rem; margin: 0; opacity: 0.9; }

/* ============== STATUS BADGE ============== */

.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}
.status-aktif      { background: #d4edda; color: #155724; }
.status-waqof      { background: #f8d7da; color: #721c24; }
.status-alumni     { background: #ffeeba; color: #856404; }
.status-pengabdian { background: #cce5ff; color: #004085; }
.status-baru          { background: #e2e3e5; color: #383d41; }
.status-diverifikasi  { background: #cce5ff; color: #004085; }
.status-lulus         { background: #d4edda; color: #155724; }
.status-tidak_lulus   { background: #f8d7da; color: #721c24; }
.status-daftar_ulang  { background: #ffeeba; color: #856404; }

/* ============== FOOTER ============== */

.footer-pondok {
  background: linear-gradient(135deg, var(--dark-green), #0d2118);
  color: rgba(255,255,255,0.85);
  padding: 4rem 0 0;
  margin-top: 5rem;
}
.footer-pondok h5 {
  color: var(--accent-gold);
  font-family: 'Playfair Display', serif;
  margin-bottom: 1.25rem;
  font-size: 1.1rem;
}
.footer-pondok a {
  color: rgba(255,255,255,0.8);
  transition: color 0.2s;
}
.footer-pondok a:hover { color: var(--accent-gold); }
.footer-social {
  display: flex; gap: 12px;
  margin-top: 1rem;
}
.footer-social a {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.3s;
}
.footer-social a:hover {
  background: var(--accent-gold);
  color: var(--dark-green);
  transform: translateY(-3px);
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 3rem;
  padding: 1.5rem 0;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  text-align: center;
}
.footer-map iframe {
  width: 100%;
  height: 200px;
  border-radius: var(--radius);
  filter: grayscale(0.7) contrast(1.1);
  transition: filter 0.3s;
  border: 0;
}
.footer-map iframe:hover { filter: none; }

/* ============== BACK TO TOP ============== */

#backToTop {
  position: fixed;
  bottom: 30px; right: 30px;
  width: 48px; height: 48px;
  background: var(--primary-green);
  color: white;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  z-index: 999;
  transition: all 0.3s;
}
#backToTop:hover {
  background: var(--dark-green);
  transform: translateY(-3px);
}
#backToTop.show { display: flex; }

/* ============== ADMIN PANEL ============== */

.admin-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}
.admin-sidebar {
  background: linear-gradient(180deg, var(--dark-green), #0d2118);
  color: white;
  padding: 1.5rem 0;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.admin-sidebar .brand {
  padding: 0 1.5rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; gap: 12px;
  color: white;
}
.admin-sidebar .brand img { width: 42px; height: 42px; }
.admin-sidebar .brand-text {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
  color: var(--accent-gold);
}
.admin-nav { list-style: none; padding: 1rem 0; margin: 0; }
.admin-nav li { margin: 2px 0.75rem; }
.admin-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  color: rgba(255,255,255,0.85);
  font-size: 0.9rem;
  transition: all 0.2s;
}
.admin-nav a:hover {
  background: rgba(255,255,255,0.08);
  color: var(--accent-gold);
}
.admin-nav a.active {
  background: rgba(var(--accent-gold-rgb), 0.15);
  color: var(--accent-gold);
  font-weight: 600;
}
.admin-nav .nav-section {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.4);
  padding: 1rem 1.75rem 0.5rem;
}
.admin-main {
  background: #f6f8fa;
  min-height: 100vh;
}
.admin-topbar {
  background: white;
  border-bottom: 1px solid #e5e7eb;
  padding: 0.85rem 1.75rem;
  display: flex; justify-content: space-between; align-items: center;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
}
.admin-topbar h1 {
  font-size: 1.25rem;
  margin: 0;
  color: var(--dark-green);
}
.admin-content { padding: 1.75rem; }
.admin-card {
  background: white;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.admin-card h3 {
  font-size: 1rem;
  margin-bottom: 1rem;
  color: var(--dark-green);
}
.stat-card-admin {
  background: white;
  border-radius: 12px;
  padding: 1.25rem;
  border: 1px solid #e5e7eb;
  border-left: 4px solid var(--primary-green);
}
.stat-card-admin .stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  color: var(--dark-green);
  font-weight: 700;
  margin: 0.25rem 0;
}
.stat-card-admin .stat-lbl {
  font-size: 0.8rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.btn-pondok {
  background: var(--primary-green);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.55rem 1.25rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.9rem;
}
.btn-pondok:hover { background: var(--dark-green); color: white; transform: translateY(-1px); }
.btn-pondok-outline {
  background: transparent;
  color: var(--primary-green);
  border: 1px solid var(--primary-green);
}
.btn-pondok-outline:hover { background: var(--primary-green); color: white; }
.btn-danger-soft {
  background: #fee2e2; color: #b91c1c;
  border: none;
  border-radius: 8px;
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
}
.btn-danger-soft:hover { background: #fecaca; }

/* Form */
.form-pondok label {
  font-weight: 500;
  font-size: 0.875rem;
  margin-bottom: 0.35rem;
  display: block;
  color: var(--text-dark);
}
.form-pondok .form-input,
.form-pondok input[type="text"],
.form-pondok input[type="email"],
.form-pondok input[type="password"],
.form-pondok input[type="tel"],
.form-pondok input[type="number"],
.form-pondok input[type="date"],
.form-pondok select,
.form-pondok textarea {
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.9rem;
  background: white;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-pondok .form-input:focus,
.form-pondok input:focus,
.form-pondok select:focus,
.form-pondok textarea:focus {
  outline: none;
  border-color: var(--primary-green);
  box-shadow: 0 0 0 3px rgba(var(--primary-green-rgb), 0.15);
}
.form-pondok .form-help {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.25rem;
}
.form-pondok .form-error {
  font-size: 0.8rem;
  color: #b91c1c;
  margin-top: 0.25rem;
}
.form-pondok fieldset {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.form-pondok legend {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--dark-green);
  padding: 0 0.5rem;
}

/* Table */
.table-pondok {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 12px;
  overflow: hidden;
}
.table-pondok thead {
  background: var(--primary-green);
  color: white;
}
.table-pondok th, .table-pondok td {
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
  font-size: 0.9rem;
}
.table-pondok th {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.8rem;
}
.table-pondok tbody tr:hover { background: #f3f4f6; }
.table-wrap {
  overflow-x: auto;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Alerts */
.alert-pondok {
  padding: 0.85rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.alert-success { background: #d1fae5; color: #065f46; border-left: 4px solid #10b981; }
.alert-error   { background: #fee2e2; color: #991b1b; border-left: 4px solid #ef4444; }
.alert-info    { background: #dbeafe; color: #1e40af; border-left: 4px solid #3b82f6; }
.alert-warning { background: #fef3c7; color: #92400e; border-left: 4px solid #f59e0b; }

/* ============== TIMELINE PENDAFTARAN ============== */

.timeline {
  position: relative;
  max-width: 1000px;
  margin: 3rem auto;
  padding: 1rem 0;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--accent-gold), var(--primary-green));
  transform: translateX(-50%);
  border-radius: 2px;
}
.timeline-item {
  position: relative;
  width: 50%;
  padding: 1.5rem 2.5rem;
  margin-bottom: 1rem;
}
.timeline-item.left { left: 0; text-align: right; }
.timeline-item.right { left: 50%; }
.timeline-marker {
  position: absolute;
  top: 30px;
  width: 50px; height: 50px;
  background: var(--primary-green);
  color: white;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.2rem;
  border: 4px solid white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 2;
}
.timeline-marker.gold {
  background: var(--accent-gold);
  color: var(--dark-green);
}
.timeline-item.left .timeline-marker { right: -25px; }
.timeline-item.right .timeline-marker { left: -25px; }
.timeline-card {
  background: white;
  padding: 1.5rem;
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  border: 1px solid rgba(var(--accent-gold-rgb), 0.2);
}
.timeline-card h4 {
  color: var(--primary-green);
  margin-bottom: 0.5rem;
  font-size: 1.15rem;
}
.timeline-card p { margin: 0; color: var(--text-dark); }

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

@media (max-width: 991.98px) {
  .navbar-pondok { padding: 6px 0; }
  .navbar-pondok .navbar-brand img { width: 50px; height: 50px; }
  .navbar-pondok .brand-name { font-size: 1rem; }
  .navbar-pondok .brand-sub { font-size: 0.6rem; }

  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar {
    position: fixed;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.3s;
    width: 260px;
  }
  .admin-sidebar.open { transform: translateX(0); }
}

@media (max-width: 767.98px) {
  body { padding-top: 70px; overflow-x: hidden; }
  .section-header h2 { font-size: 1.5rem !important; }
  .ekskul-card { flex: 0 0 160px; height: 220px; }
  .guru-card { flex: 0 0 170px; }
  .guru-img-container { height: 200px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .hero-section { height: 80vh; min-height: 450px; }
  .hero-bg { background-position: 75% center; filter: brightness(0.7); }

  .timeline::before { left: 25px; }
  .timeline-item, .timeline-item.left, .timeline-item.right {
    width: 100%; left: 0; padding: 1rem 1rem 1rem 4rem;
    text-align: left;
  }
  .timeline-item.left .timeline-marker,
  .timeline-item.right .timeline-marker {
    left: 0; right: auto;
  }

  .footer-pondok .row > div { margin-bottom: 1.5rem; }
}

@media (max-width: 575.98px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .hero-brand { font-size: clamp(1.5rem, 6vw, 2.5rem); }
}

/* ================================================================
   ISLAMIC DESIGN ELEMENTS — Pattern, Ornamen & Animasi Religi
   ================================================================ */

/* Subtle Islamic geometric pattern background */
.islamic-pattern-bg {
  position: relative;
  background-color: #fcfcfc;
}
.islamic-pattern-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23206c4e' stroke-width='1'%3E%3Cpolygon points='50,5 60,25 80,25 70,42 80,60 60,60 50,80 40,60 20,60 30,42 20,25 40,25'/%3E%3Cpolygon points='50,18 56,28 68,28 62,38 68,48 56,48 50,58 44,48 32,48 38,38 32,28 44,28'/%3E%3Cpolygon points='50,30 53,36 60,36 56,42 60,48 53,48 50,54 47,48 40,48 44,42 40,36 47,36'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 80px;
}
.islamic-pattern-bg-gold::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23FFD700' stroke-width='1'%3E%3Cpolygon points='50,5 60,25 80,25 70,42 80,60 60,60 50,80 40,60 20,60 30,42 20,25 40,25'/%3E%3Cpolygon points='50,18 56,28 68,28 62,38 68,48 56,48 50,58 44,48 32,48 38,38 32,28 44,28'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.08;
}

/* Halaman dark hijau dengan pattern */
.islamic-dark-section {
  position: relative;
  background: linear-gradient(135deg, var(--dark-green) 0%, #0d2118 100%);
  color: white;
  overflow: hidden;
}
.islamic-dark-section::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23FFD700' stroke-width='1'%3E%3Cpolygon points='40,4 48,20 64,20 56,32 64,44 48,44 40,60 32,44 16,44 24,32 16,20 32,20'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

/* Page Hero — variant Islamic */
.hero-islamic {
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  background: linear-gradient(135deg, var(--dark-green) 0%, var(--primary-green) 100%);
  overflow: hidden;
  margin-bottom: 4rem;
}
.hero-islamic::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23FFD700' stroke-width='1.2'%3E%3Cpolygon points='60,8 73,30 95,30 84,52 95,74 73,74 60,96 47,74 25,74 36,52 25,30 47,30'/%3E%3Cpolygon points='60,22 70,38 87,38 79,52 87,66 70,66 60,82 50,66 33,66 41,52 33,38 50,38'/%3E%3Cpolygon points='60,38 65,46 75,46 70,55 75,65 65,65 60,73 55,65 45,65 50,55 45,46 55,46'/%3E%3C/g%3E%3C/svg%3E");
}
.hero-islamic::after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 0;
  right: 0;
  height: 60px;
  background: #fcfcfc;
  -webkit-clip-path: polygon(0 50%, 5% 30%, 10% 50%, 15% 30%, 20% 50%, 25% 30%, 30% 50%, 35% 30%, 40% 50%, 45% 30%, 50% 50%, 55% 30%, 60% 50%, 65% 30%, 70% 50%, 75% 30%, 80% 50%, 85% 30%, 90% 50%, 95% 30%, 100% 50%, 100% 100%, 0 100%);
          clip-path: polygon(0 50%, 5% 30%, 10% 50%, 15% 30%, 20% 50%, 25% 30%, 30% 50%, 35% 30%, 40% 50%, 45% 30%, 50% 50%, 55% 30%, 60% 50%, 65% 30%, 70% 50%, 75% 30%, 80% 50%, 85% 30%, 90% 50%, 95% 30%, 100% 50%, 100% 100%, 0 100%);
}
.hero-islamic-content {
  position: relative;
  z-index: 2;
  padding: 1.5rem 1rem;
  max-width: 900px;
}
.hero-islamic-content h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 5vw, 3.4rem);
  color: white;
  font-weight: 800;
  margin-bottom: 0.5rem;
  text-shadow: 2px 2px 12px rgba(0,0,0,0.3);
}
.hero-islamic-content .hero-arabic {
  font-family: 'Amiri', 'Scheherazade New', serif;
  font-size: clamp(1.3rem, 3vw, 2rem);
  color: var(--accent-gold);
  margin-bottom: 1rem;
  font-weight: 600;
}
.hero-islamic-content .hero-tagline {
  color: rgba(255,255,255,0.9);
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 0.5rem;
}
/* Floating ornaments di hero */
.hero-islamic .ornament-float {
  position: absolute;
  opacity: 0.25;
  pointer-events: none;
  animation: floatOrnament 6s ease-in-out infinite;
}
.hero-islamic .ornament-float.tl { top: 15%; left: 5%; animation-delay: 0s; }
.hero-islamic .ornament-float.tr { top: 18%; right: 6%; animation-delay: 1.5s; }
.hero-islamic .ornament-float.bl { bottom: 28%; left: 10%; animation-delay: 3s; }
.hero-islamic .ornament-float.br { bottom: 30%; right: 12%; animation-delay: 4.5s; }
@keyframes floatOrnament {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(15deg); }
}

/* Drop cap untuk paragraf opening */
.drop-cap::first-letter {
  font-family: 'Playfair Display', serif;
  font-size: 4.5rem;
  font-weight: 800;
  color: var(--primary-green);
  float: left;
  line-height: 1;
  padding: 0.4rem 0.8rem 0 0;
  text-shadow: 2px 2px 0 rgba(var(--accent-gold-rgb), 0.3);
}

/* Pillar card — untuk 5 Pilar Keunggulan */
.pillar-card {
  background: white;
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid transparent;
  height: 100%;
}
.pillar-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(var(--accent-gold-rgb), 0.08) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.5s;
}
.pillar-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 25px 50px rgba(var(--primary-green-rgb), 0.25);
  border-color: var(--accent-gold);
}
.pillar-card:hover::before { opacity: 1; }
.pillar-card .pillar-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
  color: var(--accent-gold);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  position: relative;
  z-index: 2;
  transition: transform 0.5s;
  box-shadow: 0 10px 30px rgba(var(--primary-green-rgb), 0.3);
}
.pillar-card:hover .pillar-icon {
  transform: rotate(360deg) scale(1.1);
}
.pillar-card .pillar-arabic {
  font-family: 'Amiri', 'Scheherazade New', serif;
  font-size: 1.6rem;
  color: var(--accent-gold);
  margin-bottom: 0.5rem;
  font-weight: 600;
  position: relative;
  z-index: 2;
}
.pillar-card .pillar-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  color: var(--dark-green);
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-style: italic;
  position: relative;
  z-index: 2;
}
.pillar-card .pillar-desc {
  color: #6b7280;
  font-size: 0.92rem;
  position: relative;
  z-index: 2;
}

/* Card Islamic with arabesque corner ornaments */
.islamic-card {
  background: white;
  border-radius: var(--radius);
  padding: 2.5rem;
  position: relative;
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.islamic-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, transparent 0%, var(--accent-gold) 30%, var(--accent-gold) 70%, transparent 100%);
}
.islamic-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 60px rgba(0,0,0,0.14);
}
.islamic-card .card-num {
  font-family: 'Playfair Display', serif;
  font-size: 5rem;
  font-weight: 800;
  color: rgba(var(--accent-gold-rgb), 0.18);
  position: absolute;
  top: 0;
  right: 1rem;
  line-height: 1;
  pointer-events: none;
}

/* Kitab card with Arabic text */
.kitab-card {
  background: linear-gradient(135deg, #fff 0%, #faf8f3 100%);
  border-radius: var(--radius);
  padding: 1.75rem;
  border: 1px solid rgba(var(--accent-gold-rgb), 0.3);
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
  height: 100%;
}
.kitab-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, transparent 50%, rgba(var(--accent-gold-rgb), 0.15) 50%);
}
.kitab-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 45px rgba(var(--primary-green-rgb), 0.18);
  border-color: var(--accent-gold);
}
.kitab-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 2px dashed rgba(var(--primary-green-rgb), 0.2);
}
.kitab-card-header .kitab-icon {
  width: 50px; height: 50px;
  background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
  border-radius: 12px;
  color: var(--accent-gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.kitab-card-header h4 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--dark-green);
}
.kitab-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.kitab-list li {
  font-family: 'Amiri', 'Scheherazade New', 'Playfair Display', serif;
  font-size: 1.25rem;
  color: var(--dark-green);
  padding: 0.6rem 0;
  border-bottom: 1px dotted rgba(var(--primary-green-rgb), 0.15);
  text-align: right;
  direction: rtl;
  transition: background 0.3s, padding-right 0.3s;
}
.kitab-list li:hover {
  background: rgba(var(--accent-gold-rgb), 0.06);
  padding-right: 0.5rem;
}
.kitab-list li:last-child { border-bottom: none; }

/* Tingkatan card (untuk Kurikulum tingkatan kelas) */
.tingkatan-card {
  background: white;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 35px rgba(0,0,0,0.08);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  height: 100%;
  position: relative;
}
.tingkatan-card .tingkatan-header {
  background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
  color: white;
  padding: 2rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.tingkatan-card .tingkatan-header::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.15;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%23FFD700' stroke-width='1'%3E%3Cpolygon points='30,4 36,16 48,16 42,24 48,32 36,32 30,44 24,32 12,32 18,24 12,16 24,16'/%3E%3C/g%3E%3C/svg%3E");
}
.tingkatan-card .tingkatan-num {
  font-family: 'Playfair Display', serif;
  font-size: 3rem;
  color: var(--accent-gold);
  font-weight: 800;
  line-height: 1;
}
.tingkatan-card .tingkatan-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  margin-top: 0.5rem;
  color: white;
}
.tingkatan-card .tingkatan-arabic {
  font-family: 'Amiri', serif;
  font-size: 1.1rem;
  color: var(--accent-gold);
  margin-top: 0.5rem;
}
.tingkatan-card .tingkatan-body {
  padding: 1.75rem;
}
.tingkatan-card .tingkatan-body p {
  color: #6b7280;
  font-style: italic;
  margin-bottom: 1.25rem;
  font-size: 0.92rem;
}
.tingkatan-card .tingkatan-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tingkatan-card .tingkatan-list li {
  padding: 0.6rem 0 0.6rem 2rem;
  position: relative;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  font-size: 0.95rem;
}
.tingkatan-card .tingkatan-list li:last-child { border-bottom: none; }
.tingkatan-card .tingkatan-list li::before {
  content: "★";
  color: var(--accent-gold);
  position: absolute;
  left: 0.5rem;
  font-size: 0.85rem;
}
.tingkatan-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 60px rgba(var(--primary-green-rgb), 0.2);
}

/* Pillar gradient connector — visual link between pillars */
.pillar-grid {
  position: relative;
}
.pillar-grid::before {
  content: "";
  position: absolute;
  top: 60%;
  left: 5%;
  right: 5%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-gold-rgb), 0.4), transparent);
  pointer-events: none;
  display: none;
}
@media (min-width: 992px) {
  .pillar-grid::before { display: block; }
}

/* Bismillah header decoration */
.bismillah-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

/* Animated gradient text */
.gradient-text {
  background: linear-gradient(120deg, var(--primary-green), var(--accent-gold), var(--dark-green));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 5s ease infinite;
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Glow on hover */
.hover-glow {
  transition: all 0.4s ease;
}
.hover-glow:hover {
  box-shadow: 0 0 30px rgba(var(--accent-gold-rgb), 0.4),
              0 0 60px rgba(var(--accent-gold-rgb), 0.2);
}

/* Fasilitas card with gradient icon */
.fasilitas-card {
  background: white;
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all 0.5s ease;
  height: 100%;
  border-bottom: 4px solid transparent;
}
.fasilitas-card .fasilitas-icon-wrapper {
  width: 90px;
  height: 90px;
  margin: 0 auto 1.5rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fasilitas-card .fasilitas-icon-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
  border-radius: 50%;
  transform: rotate(0deg);
  transition: transform 0.6s ease;
}
.fasilitas-card .fasilitas-icon-wrapper::after {
  content: "";
  position: absolute;
  inset: 8px;
  background: white;
  border-radius: 50%;
  border: 2px dashed rgba(var(--accent-gold-rgb), 0.4);
}
.fasilitas-card .fasilitas-icon {
  position: relative;
  z-index: 2;
  font-size: 2rem;
  color: var(--primary-green);
  transition: all 0.4s;
}
.fasilitas-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 20px 50px rgba(var(--primary-green-rgb), 0.18);
  border-bottom-color: var(--accent-gold);
}
.fasilitas-card:hover .fasilitas-icon-wrapper::before {
  transform: rotate(360deg);
}
.fasilitas-card:hover .fasilitas-icon {
  color: var(--accent-gold);
  transform: scale(1.15);
}
.fasilitas-card h4 {
  font-size: 1.15rem;
  color: var(--dark-green);
  margin-bottom: 0.5rem;
}

/* Ekskul card upgraded */
.ekskul-card-v2 {
  background: white;
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  position: relative;
  overflow: hidden;
  transition: all 0.5s ease;
  height: 100%;
  border-left: 4px solid var(--accent-gold);
}
.ekskul-card-v2::before {
  content: "";
  position: absolute;
  top: -20px;
  right: -20px;
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, rgba(var(--primary-green-rgb), 0.08), rgba(var(--accent-gold-rgb), 0.08));
  border-radius: 50%;
  transition: transform 0.6s ease;
}
.ekskul-card-v2:hover {
  transform: translateX(8px);
  box-shadow: 0 15px 40px rgba(var(--primary-green-rgb), 0.15);
}
.ekskul-card-v2:hover::before {
  transform: scale(2.5);
}
.ekskul-card-v2 .ekskul-icon-v2 {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
  color: var(--accent-gold);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 2;
  box-shadow: 0 8px 20px rgba(var(--primary-green-rgb), 0.25);
}
.ekskul-card-v2 h4 {
  font-size: 1.2rem;
  color: var(--dark-green);
  margin-bottom: 0.75rem;
  position: relative;
  z-index: 2;
}
.ekskul-card-v2 p {
  font-size: 0.92rem;
  color: #6b7280;
  margin: 0;
  position: relative;
  z-index: 2;
}

/* Struktur Organisasi tree-style */
.struktur-tree {
  position: relative;
  padding: 2rem 0;
}
.struktur-node {
  background: white;
  border: 3px solid var(--accent-gold);
  border-radius: var(--radius);
  padding: 1.5rem 2rem;
  text-align: center;
  position: relative;
  transition: all 0.4s ease;
  display: inline-block;
  min-width: 280px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.struktur-node:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 45px rgba(var(--primary-green-rgb), 0.2);
}
.struktur-node.primary {
  background: linear-gradient(135deg, var(--dark-green), var(--primary-green));
  color: white;
  border-color: var(--accent-gold);
}
.struktur-node.primary h4 { color: white; }
.struktur-node.primary .role-label { color: var(--accent-gold); }
.struktur-node .role-label {
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--primary-green);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.struktur-node h4 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--dark-green);
}
.struktur-line {
  width: 2px;
  height: 40px;
  background: var(--accent-gold);
  margin: 0 auto;
}
.struktur-children {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
  position: relative;
}
.struktur-children::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: var(--accent-gold);
  display: none;
}
@media (min-width: 768px) {
  .struktur-children::before { display: block; }
}

/* Bio Abuya — narrative timeline style */
.bio-stat {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px dashed rgba(var(--primary-green-rgb), 0.2);
}
.bio-stat:last-child { border-bottom: none; }
.bio-stat .bio-icon {
  width: 45px; height: 45px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
  color: var(--accent-gold);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
}
.bio-stat .bio-label {
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 0.25rem;
}
.bio-stat .bio-value {
  font-weight: 600;
  color: var(--dark-green);
  font-size: 1rem;
}

/* Subtle glow ring around portrait */
.portrait-frame {
  position: relative;
  display: inline-block;
}
.portrait-frame::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    var(--accent-gold) 0%,
    transparent 25%,
    var(--accent-gold) 50%,
    transparent 75%,
    var(--accent-gold) 100%
  );
  opacity: 0.4;
  animation: rotateGlow 8s linear infinite;
  z-index: 0;
}
.portrait-frame img {
  position: relative;
  z-index: 1;
  border: 4px solid white;
  box-shadow: 0 15px 40px rgba(0,0,0,0.2);
}
@keyframes rotateGlow {
  to { transform: rotate(360deg); }
}

/* Quote Islamic-styled */
.islamic-quote {
  background: linear-gradient(135deg, rgba(var(--primary-green-rgb), 0.04), rgba(var(--accent-gold-rgb), 0.04));
  padding: 3rem 2rem;
  border-left: 6px solid var(--accent-gold);
  border-radius: var(--radius);
  position: relative;
  margin: 2rem 0;
}
.islamic-quote::before {
  content: "❝";
  position: absolute;
  top: -10px;
  left: 1rem;
  font-size: 5rem;
  color: var(--accent-gold);
  font-family: 'Playfair Display', serif;
  line-height: 1;
}
.islamic-quote .quote-arabic {
  font-family: 'Amiri', serif;
  font-size: 1.5rem;
  color: var(--dark-green);
  text-align: right;
  direction: rtl;
  margin-bottom: 1rem;
  font-weight: 600;
}
.islamic-quote .quote-translation {
  font-style: italic;
  color: var(--text-dark);
  font-size: 1.05rem;
  line-height: 1.7;
}
.islamic-quote .quote-source {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--primary-green);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Pulse animation for highlighted CTA */
@keyframes pulseGold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-gold-rgb), 0.6); }
  50% { box-shadow: 0 0 0 12px rgba(var(--accent-gold-rgb), 0); }
}
.btn-pulse {
  animation: pulseGold 2s infinite;
}

/* Marquee for tagline */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer-text {
  background: linear-gradient(
    90deg,
    var(--primary-green) 0%,
    var(--accent-gold) 50%,
    var(--primary-green) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: shimmer 3s linear infinite;
}

/* Number counter for stats */
.stat-mega {
  text-align: center;
  padding: 2rem 1rem;
}
.stat-mega .stat-mega-number {
  font-family: 'Playfair Display', serif;
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary-green), var(--accent-gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.stat-mega .stat-mega-label {
  font-size: 0.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dark-green);
  margin-top: 0.5rem;
  font-weight: 600;
}

/* ================================================================
   LIGHTBOX (Foto Popup Elegan)
   ================================================================ */

.lightbox-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(13, 33, 24, 0.97);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: lbFadeIn 0.3s ease;
}
@keyframes lbFadeIn {
  from { opacity: 0; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
  to { opacity: 1; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
}

.lightbox-frame {
  position: relative;
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.lightbox-frame img {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(255, 215, 0, 0.2);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.lightbox-frame img.loading { opacity: 0; }
.lightbox-frame img.loaded {
  opacity: 1;
  animation: lbZoom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes lbZoom {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.lightbox-loading {
  position: absolute;
  color: var(--accent-gold);
  font-size: 2rem;
}
.lightbox-caption {
  margin-top: 1rem;
  color: white;
  text-align: center;
  font-size: 0.95rem;
  max-width: 80%;
  font-weight: 500;
  background: rgba(0, 0, 0, 0.4);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 215, 0, 0.2);
}
.lightbox-btn {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 215, 0, 0.4);
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  z-index: 2;
}
.lightbox-btn:hover {
  background: var(--accent-gold);
  color: var(--dark-green);
  border-color: var(--accent-gold);
  transform: scale(1.1);
}
.lightbox-close {
  top: 1.5rem;
  right: 1.5rem;
}
.lightbox-prev { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox-prev:hover { transform: translateY(-50%) scale(1.1); }
.lightbox-next:hover { transform: translateY(-50%) scale(1.1); }

.lightbox-counter {
  position: absolute;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  background: rgba(0, 0, 0, 0.5);
  padding: 0.5rem 1.25rem;
  border-radius: 20px;
  font-size: 0.85rem;
  letter-spacing: 1px;
  border: 1px solid rgba(255, 215, 0, 0.3);
  font-weight: 500;
}
.lightbox-thumbs {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  max-width: 90vw;
  overflow-x: auto;
  padding: 6px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 12px;
  border: 1px solid rgba(255, 215, 0, 0.2);
  scrollbar-width: thin;
  scrollbar-color: var(--accent-gold) transparent;
}
.lightbox-thumb {
  flex: 0 0 60px;
  height: 60px;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: none;
  padding: 0;
  opacity: 0.55;
  transition: all 0.25s ease;
}
.lightbox-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lightbox-thumb:hover { opacity: 0.85; }
.lightbox-thumb.active {
  opacity: 1;
  border-color: var(--accent-gold);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
}

/* Gallery item button */
.gallery-item-button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: block;
  position: relative;
}
.gallery-zoom-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: var(--accent-gold);
  color: var(--dark-green);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: transform 0.3s ease;
  pointer-events: none;
  z-index: 3;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.gallery-item-button:hover .gallery-zoom-icon {
  transform: translate(-50%, -50%) scale(1);
}

@media (max-width: 767.98px) {
  .lightbox-btn { width: 42px; height: 42px; font-size: 1rem; }
  .lightbox-close { top: 1rem; right: 1rem; }
  .lightbox-prev { left: 0.5rem; }
  .lightbox-next { right: 0.5rem; }
  .lightbox-frame img { max-height: 65vh; }
  .lightbox-thumbs { display: none; }
}

/* ================================================================
   PAPER CARD (Untuk halaman bersifat dokumen/buku — Profile Pondok)
   ================================================================ */

.chapter-wrapper {
  padding: 60px 0;
  background-color: #fafaf5;
  position: relative;
}
.chapter-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%23206c4e' stroke-width='1'%3E%3Cpolygon points='30,4 36,16 48,16 42,24 48,32 36,32 30,44 24,32 12,32 18,24 12,16 24,16'/%3E%3C/g%3E%3C/svg%3E");
}
.chapter-header-box {
  text-align: center;
  margin-bottom: 2.5rem;
  position: relative;
  z-index: 1;
}
.chapter-number {
  display: inline-block;
  font-family: 'Playfair Display', serif;
  font-size: 0.95rem;
  letter-spacing: 4px;
  color: var(--primary-green);
  background: rgba(var(--accent-gold-rgb), 0.15);
  padding: 0.4rem 1.5rem;
  border-radius: 30px;
  border: 1px solid rgba(var(--primary-green-rgb), 0.2);
  margin-bottom: 1rem;
  text-transform: uppercase;
  font-weight: 700;
}
.chapter-title-main {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4.5vw, 3rem);
  color: var(--dark-green);
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
}
.chapter-title-arabic {
  font-family: 'Amiri', serif;
  font-size: 1.4rem;
  color: var(--primary-green);
  margin-top: 0.5rem;
  font-weight: 700;
  direction: rtl;
}

.paper-card {
  background: white;
  border-radius: 8px;
  padding: 3rem;
  margin-bottom: 3rem;
  position: relative;
  box-shadow: 0 25px 60px -20px rgba(0, 0, 0, 0.15),
              0 0 0 1px rgba(0, 0, 0, 0.04);
}
.paper-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(90deg,
    var(--primary-green) 0%,
    var(--accent-gold) 50%,
    var(--primary-green) 100%);
  border-radius: 8px 8px 0 0;
}
.paper-content h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.7rem;
  color: var(--primary-green);
  margin-top: 2.5rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(var(--accent-gold-rgb), 0.3);
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.paper-content h3:first-child { margin-top: 0; }
.paper-content h3::before {
  content: "";
  width: 6px;
  height: 28px;
  background: var(--accent-gold);
  border-radius: 3px;
  flex-shrink: 0;
}
.paper-content h4 {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  color: var(--dark-green);
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}
.paper-content p {
  line-height: 1.9;
  color: #444;
  text-align: justify;
  margin-bottom: 1.25rem;
  font-size: 1rem;
}
.paper-content p.dropcap::first-letter {
  font-family: 'Playfair Display', serif;
  font-size: 4rem;
  font-weight: 800;
  color: var(--primary-green);
  float: left;
  line-height: 1;
  padding: 0.4rem 0.8rem 0 0;
}
.paper-content ul, .paper-content ol {
  padding-left: 1.5rem;
  line-height: 1.9;
  color: #444;
}
.paper-content ul li, .paper-content ol li {
  margin-bottom: 0.6rem;
}
.paper-content .custom-list-number {
  list-style: none;
  padding-left: 0;
  counter-reset: islist;
}
.paper-content .custom-list-number li {
  counter-increment: islist;
  padding-left: 3rem;
  position: relative;
  margin-bottom: 1rem;
}
.paper-content .custom-list-number li::before {
  content: counter(islist);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
  color: var(--accent-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  font-family: 'Playfair Display', serif;
}
.paper-content .three-column-list {
  columns: 3;
  column-gap: 1.5rem;
}
@media (max-width: 767.98px) {
  .paper-content .three-column-list { columns: 1; }
  .paper-card { padding: 1.75rem 1.25rem; }
  .paper-content h3 { font-size: 1.35rem; }
}

/* Highlight box */
.highlight-box {
  background: linear-gradient(135deg, rgba(var(--accent-gold-rgb), 0.08), rgba(var(--primary-green-rgb), 0.04));
  border-left: 5px solid var(--accent-gold);
  padding: 1.5rem 2rem;
  border-radius: 8px;
  margin: 1.5rem 0;
  position: relative;
}
.highlight-box::before {
  content: "✦";
  position: absolute;
  top: -10px;
  left: 1.5rem;
  background: var(--accent-gold);
  color: var(--dark-green);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: 0 4px 12px rgba(var(--accent-gold-rgb), 0.4);
}
.highlight-box p { margin: 0; }
.highlight-box.green-border { border-left-color: var(--primary-green); }
.highlight-box.green-border::before { background: var(--primary-green); color: var(--accent-gold); }

/* Mazhab grid */
.mazhab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 1rem;
  gap: 1rem;
  margin: 1.5rem 0;
}
.mazhab-item {
  background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
  color: var(--accent-gold);
  padding: 1.25rem;
  border-radius: 12px;
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.05rem;
  border: 2px solid var(--accent-gold);
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
}
.mazhab-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255, 215, 0, 0.15), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.mazhab-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 35px rgba(var(--primary-green-rgb), 0.4);
}
.mazhab-item:hover::before { opacity: 1; }

/* 9 Karakter Pribadi Muslim - Character grid */
.character-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-gap: 1.25rem;
  gap: 1.25rem;
  margin: 2rem 0;
}
.character-item {
  background: linear-gradient(135deg, #ffffff 0%, #faf8f3 100%);
  padding: 1.5rem 1.25rem;
  border-radius: 14px;
  border: 1px solid rgba(var(--accent-gold-rgb), 0.3);
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
}
.character-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-gold), var(--primary-green));
}
.character-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 45px rgba(var(--primary-green-rgb), 0.15);
  border-color: var(--accent-gold);
}
.character-item .arabic-text {
  font-family: 'Amiri', serif;
  font-size: 1.6rem;
  color: var(--primary-green);
  margin-bottom: 0.5rem;
  font-weight: 700;
  direction: rtl;
}
.character-item .latin-text {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  color: var(--dark-green);
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
  font-style: italic;
}
.character-item .translate-text {
  font-size: 0.85rem;
  color: #6b7280;
}

/* Concept grid (2-column highlight) */
.concept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 1.5rem;
  gap: 1.5rem;
  margin: 2rem 0;
}
.concept-card {
  background: white;
  padding: 1.75rem;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
  transition: all 0.4s ease;
  position: relative;
  border-top: 4px solid var(--accent-gold);
}
.concept-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(var(--primary-green-rgb), 0.12);
}
.concept-card h4 {
  color: var(--primary-green);
  margin-top: 0;
}

/* Program table (Mafahim, Tahfidz, etc) */
.program-table-wrapper {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.06);
  margin: 1rem 0 2rem;
}
.program-table {
  width: 100%;
  border-collapse: collapse;
}
.program-table thead {
  background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
  color: white;
}
.program-table th, .program-table td {
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.program-table th {
  font-weight: 600;
  letter-spacing: 0.5px;
  font-size: 0.85rem;
  text-transform: uppercase;
}
.program-table tbody tr:hover {
  background: rgba(var(--accent-gold-rgb), 0.04);
}
.program-table .arabic-col {
  font-family: 'Amiri', serif;
  font-size: 1.25rem;
  color: var(--primary-green);
  text-align: right;
  direction: rtl;
}

/* Stats box (counter dalam paper-card) */
.stats-box {
  background: linear-gradient(135deg, var(--dark-green), var(--primary-green));
  color: white;
  border-radius: 14px;
  padding: 2rem 1.5rem;
  text-align: center;
  margin: 1.5rem 0;
  position: relative;
  overflow: hidden;
}
.stats-box::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%23FFD700' stroke-width='1'%3E%3Cpolygon points='30,4 36,16 48,16 42,24 48,32 36,32 30,44 24,32 12,32 18,24 12,16 24,16'/%3E%3C/g%3E%3C/svg%3E");
}
.stats-box .stats-number {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 800;
  color: var(--accent-gold);
  line-height: 1;
}
.stats-box .stats-label {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.95;
}

/* Asas box (kalimat tauhid) */
.asas-box {
  background: linear-gradient(135deg, #1a3e2c 0%, #206c4e 100%);
  color: white;
  border-radius: 16px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  margin: 2rem 0;
  border: 2px solid var(--accent-gold);
  position: relative;
  overflow: hidden;
}
.asas-box::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23FFD700' stroke-width='1'%3E%3Cpolygon points='40,4 48,20 64,20 56,32 64,44 48,44 40,60 32,44 16,44 24,32 16,20 32,20'/%3E%3C/g%3E%3C/svg%3E");
}
.asas-box h4 {
  color: var(--accent-gold);
  font-size: 0.9rem;
  letter-spacing: 3px;
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 1;
  text-transform: uppercase;
}
.asas-box .kalimat-tauhid {
  font-family: 'Amiri', serif;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  color: white;
  line-height: 1.6;
  font-weight: 700;
  position: relative;
  z-index: 1;
}

/* Biography section (untuk profile orang) */
.biography-section {
  background: linear-gradient(135deg, rgba(var(--primary-green-rgb), 0.04), rgba(var(--accent-gold-rgb), 0.04));
  padding: 1.75rem 2rem;
  border-radius: 14px;
  border-left: 5px solid var(--primary-green);
  margin: 1.5rem 0;
}
.biography-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--primary-green);
  font-weight: 700;
  margin-bottom: 1rem;
  font-size: 1.1rem;
  font-family: 'Playfair Display', serif;
}

/* Nasab (Sanad keturunan) */
.nasab-container {
  max-height: 600px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-gold) transparent;
  padding-right: 0.5rem;
}
.nasab-container::-webkit-scrollbar { width: 6px; }
.nasab-container::-webkit-scrollbar-track { background: transparent; }
.nasab-container::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-gold-rgb), 0.5);
  border-radius: 3px;
}
.nasab-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: white;
  margin-bottom: 0.5rem;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 0.95rem;
}
.nasab-item:hover {
  transform: translateX(8px);
  border-color: var(--accent-gold);
  box-shadow: 0 6px 20px rgba(var(--primary-green-rgb), 0.1);
}
.nasab-item .nasab-number {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--primary-green);
  color: var(--accent-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  flex-shrink: 0;
  border: 2px solid var(--accent-gold);
  font-size: 0.9rem;
}
.nasab-item.nasab-prophet {
  background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
  color: white;
}
.nasab-item.nasab-prophet .nasab-number {
  background: var(--accent-gold);
  color: var(--dark-green);
}
.nasab-item.nasab-key {
  background: linear-gradient(90deg, rgba(var(--accent-gold-rgb), 0.15), rgba(var(--primary-green-rgb), 0.05));
  border-color: var(--accent-gold);
}
.nasab-item.nasab-current {
  background: linear-gradient(135deg, rgba(var(--accent-gold-rgb), 0.2), white);
  border: 2px solid var(--accent-gold);
  font-weight: 700;
}

/* VIP card (Ulama besar) */
.vip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 1.25rem;
  gap: 1.25rem;
  margin: 1.5rem 0;
}
.vip-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: white;
  padding: 1.25rem;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
  position: relative;
}
.vip-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--accent-gold);
  border-radius: 12px 0 0 12px;
}
.vip-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(var(--primary-green-rgb), 0.12);
}
.vip-icon {
  width: 50px; height: 50px;
  background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
  color: var(--accent-gold);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.vip-card h6 {
  margin: 0 0 0.25rem;
  color: var(--dark-green);
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 700;
}
.vip-desc {
  font-size: 0.85rem;
  color: #6b7280;
  line-height: 1.5;
}

/* Pillar V2 (4-color icon variants — for Abuya keahlian) */
.pillar-v2 {
  background: white;
  border-radius: 14px;
  padding: 1.5rem;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.04);
  transition: all 0.4s ease;
  height: 100%;
}
.pillar-v2:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(var(--primary-green-rgb), 0.12);
}
.pillar-v2 .pillar-v2-header {
  display: flex; align-items: center; gap: 0.85rem;
  margin-bottom: 1rem;
}
.pillar-v2 .pillar-v2-icon {
  width: 50px; height: 50px;
  border-radius: 12px;
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}
.icon-gold { background: linear-gradient(135deg, #d4af37, #f9d976); }
.icon-green { background: linear-gradient(135deg, var(--primary-green), #4ade80); }
.icon-purple { background: linear-gradient(135deg, #6f42c1, #a66efa); }
.icon-blue { background: linear-gradient(135deg, #0d6efd, #60a5fa); }

.pillar-v2 .pillar-v2-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--dark-green);
  margin: 0;
}
.pillar-v2 ul {
  list-style: none;
  padding: 0; margin: 0;
}
.pillar-v2 ul li {
  display: flex; align-items: center;
  font-size: 0.9rem;
  color: #555;
  padding: 0.45rem 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.05);
}
.pillar-v2 ul li:last-child { border-bottom: none; }
.pillar-v2 ul li i {
  font-size: 0.85rem;
  margin-right: 0.6rem;
  color: var(--accent-gold);
}

/* Education timeline (untuk Abuya pendidikan) */
.edu-timeline {
  position: relative;
  padding-left: 2.5rem;
  border-left: 2px dashed rgba(var(--primary-green-rgb), 0.2);
}
.edu-item {
  position: relative;
  margin-bottom: 2rem;
}
.edu-dot {
  position: absolute;
  left: -2.85rem;
  top: 0.4rem;
  width: 18px;
  height: 18px;
  background: var(--accent-gold);
  border: 4px solid white;
  outline: 1px solid var(--accent-gold);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(var(--accent-gold-rgb), 0.5);
  z-index: 2;
  transition: all 0.3s ease;
}
.edu-item:hover .edu-dot {
  transform: scale(1.3);
  background: var(--primary-green);
  outline-color: var(--primary-green);
}
.edu-year {
  display: inline-block;
  background: rgba(var(--primary-green-rgb), 0.12);
  color: var(--primary-green);
  font-weight: 700;
  padding: 0.3rem 0.85rem;
  border-radius: 8px;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}
.edu-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  color: var(--dark-green);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.edu-desc {
  background: white;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  color: #555;
  font-size: 0.92rem;
  line-height: 1.7;
}

/* Modern Card (general use) */
.modern-card {
  background: white;
  border-radius: 18px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 10px 35px rgba(var(--primary-green-rgb), 0.06);
  padding: 2rem;
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
}
.modern-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 5px;
  background: linear-gradient(90deg, var(--primary-green), var(--accent-gold));
}
.modern-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 50px rgba(var(--primary-green-rgb), 0.15);
}

/* Utility */
.text-primary-green { color: var(--primary-green) !important; }
.text-dark-green { color: var(--dark-green) !important; }
.text-gold { color: var(--accent-gold) !important; }
.bg-primary-green { background: var(--primary-green) !important; color: white; }
.bg-dark-green { background: var(--dark-green) !important; color: white; }
.bg-gold { background: var(--accent-gold) !important; color: var(--dark-green); }
.rounded-pondok { border-radius: var(--radius) !important; }
.shadow-pondok { box-shadow: 0 8px 25px rgba(0,0,0,0.09); }
.flex-center { display: flex; align-items: center; justify-content: center; }