/* =====================================================================
   THEME GREEN — Hijau modern & profesional
   Cara pakai: muat file ini SETELAH CSS asli Anda, contoh:
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="theme-green.css">

   Palet:
     Forest (utama)  #0F3D2E   rgb(15,61,46)
     Emerald (aksen) #12A574   rgb(18,165,116)
     Gold (sorotan)  #E8B84B   (tetap, kontras hangat di atas hijau tua)
     Mist (latar)    #F1F8F4
   ===================================================================== */

:root {
  --navy:        #0F3D2E;
  --navy-light:  rgba(15,61,46,.46);
  --teal:        #12A574;
  --gold:        #E8B84B;
  --light:       #F1F8F4;
  --text:        #1b2e25;
  --muted:       #61756a;
  --border:      #d9e7de;
  --shadow:      0 8px 40px rgba(15,61,46,.10);
  --shadowM:     0 16px 56px rgba(15,61,46,.15);

  /* Variabel yang dipakai CSS asli tetapi belum didefinisikan */
  --green:       var(--navy);
  --gold-light:  rgba(232,184,75,.15);
  --gold-bg:     rgba(232,184,75,.10);
  --teal-light:  rgba(18,165,116,.12);
  --teal-bg:     rgba(18,165,116,.08);
  --rsm:         10px;
  --radius-sm:   10px;
  --shadow-md:   var(--shadowM);
}

/* ── NAV & DROPDOWN ───────────────────────────────── */
#mainNav { box-shadow: 0 2px 20px rgba(15,61,46,.08); }
.dropdown-menu { box-shadow: 0 12px 50px rgba(15,61,46,.14); }

/* ── BREADCRUMB ───────────────────────────────────── */
.bcc-preview { background: linear-gradient(120deg, #0F3D2E 0%, #0c3326 60%, #13483a 100%); }
.bc-pill li a { color: #2d5443; border-color: var(--border); }
.bc-pill li a:hover { border-color: var(--navy); color: var(--navy); background: var(--light); }
.bc-pill li.active span { background: var(--navy); border-color: var(--navy); }

/* ── HERO ─────────────────────────────────────────── */
#hero {
  background-image:
    linear-gradient(135deg, rgba(15,61,46,.90) 0%, rgba(18,165,116,.55) 100%),
    url('https://images.unsplash.com/photo-1580582932707-520aed937b7b?w=1600&auto=format');
}
.hs-overlay { background: linear-gradient(105deg, rgba(15,61,46,.88) 0%, rgba(15,61,46,.3) 60%, rgba(18,165,116,.15) 100%); }

/* ── ABOUT / PROGRAM / STAT ───────────────────────── */
.about-badge-wrap { box-shadow: 0 10px 40px rgba(15,61,46,.25); }
.ail-icon.teal { background: rgba(18,165,116,.12); }
.ail-icon.navy { background: rgba(15,61,46,.08); }
.prog-tag { background: rgba(18,165,116,.10); }
.stat-icon { background: rgba(15,61,46,.06); }
.contact-icon.c-teal { background: rgba(18,165,116,.12); }
.contact-icon.c-navy { background: rgba(15,61,46,.08); }
.wi-navy { background: rgba(15,61,46,.07); }

/* ── BADGE & KATEGORI ─────────────────────────────── */
.badge-new { background: rgba(18,165,116,.12); }
.bc-cat.akademik, .gi-cat.akademik { background: rgba(18,165,116,.9); }
.bc-cat.kegiatan, .gi-cat.kegiatan { background: rgba(15,61,46,.88); }

/* ── OVERLAY GAMBAR ───────────────────────────────── */
.featured-post-overlay { background: linear-gradient(to top, rgba(15,61,46,.9) 0%, rgba(15,61,46,.3) 60%, transparent 100%); }
.gi-overlay { background: linear-gradient(to top, rgba(15,61,46,.85) 0%, rgba(15,61,46,.2) 50%, transparent 100%); }
#galleryGrid.grid-list .gi-overlay { background: transparent; }
.video-play { background: rgba(15,61,46,.35); }
.video-card:hover .video-play { background: rgba(15,61,46,.55); }
.teacher-social { background: rgba(15,61,46,.6); }
#lightbox { background: rgba(4,24,17,.96); }

/* ── SIDEBAR / NEWSLETTER / PROMO ─────────────────── */
.newsletter-widget { background: linear-gradient(135deg, #0F3D2E 0%, #1a5a44 100%); }
.promo-banner p { color: rgba(15,61,46,.7); }
.promo-btn:hover { background: #16503c; }

/* ── KOMENTAR & FORM ──────────────────────────────── */
.rb-text { background: rgba(241,248,244,.7); }
.rb-text::after { border-right-color: rgba(241,248,244,.7); }
.callout.info { border-color: rgba(18,165,116,.25); }

.search-box input:focus,
.rfi-input:focus,
.cf-input:focus, .cf-select:focus, .cf-textarea:focus,
.contact-form-wrap .form-control:focus,
.contact-form-wrap .form-select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(18,165,116,.14);
}
.filter-bar .form-select:focus,
.filter-bar .form-control:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(15,61,46,.12);
}

.btn-cf-submit {
  background: linear-gradient(135deg, #0F3D2E 0%, #1a5a44 100%);
  box-shadow: 0 6px 20px rgba(15,61,46,.25);
}
.btn-cf-submit:hover {
  background: linear-gradient(135deg, #12A574, #0b6b4a);
  box-shadow: 0 10px 28px rgba(18,165,116,.35);
}

/* ── AGENDA & EKSKUL ──────────────────────────────── */
.agenda-card:hover { box-shadow: 0 8px 28px rgba(15,61,46,.12); }
.event-icon { background: rgba(18,165,116,.16); color: #0b7a55; }

/* ── CTA PENDAFTARAN ──────────────────────────────── */
#pendaftaran { background: linear-gradient(135deg, #12A574 0%, #0b6b4a 100%); }