/* =========================================================
   main.css — Tema Islami Masjid Al-Ghozy
   Palet: hijau tua (identitas logo) + emas + putih bersih.
   Dark mode memanfaatkan atribut data-bs-theme milik Bootstrap 5.3
   sehingga kita hanya perlu meng-override variabel, bukan menulis
   ulang seluruh stylesheet.
   ========================================================= */

:root {
  --ag-green: #0d6832;
  --ag-green-dark: #094d25;
  --ag-green-light: #e8f3ec;
  --ag-gold: #d4a017;
  --ag-radius: 14px;
  --ag-shadow: 0 4px 18px rgba(9, 77, 37, .08);
  --ag-transition: .25s ease;

  /* Selaraskan warna "success" Bootstrap dengan identitas masjid */
  --bs-success: #0d6832;
  --bs-success-rgb: 13, 104, 50;
  --bs-warning: #d4a017;
  --bs-warning-rgb: 212, 160, 23;
  --bs-body-font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --bs-border-radius: var(--ag-radius);
}

[data-bs-theme="dark"] {
  --ag-green-light: #14231a;
  --ag-shadow: 0 4px 18px rgba(0, 0, 0, .35);
  --bs-body-bg: #14181b;
  --bs-body-color: #dee2e6;
}

body {
  font-family: var(--bs-body-font-family);
  background-image: url("../img/alghozy_main_hall.png");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

/* ---------- Tipografi ---------- */
h1, h2, h3, h4, h5, h6, .navbar-brand { letter-spacing: -.015em; }
.font-arabic { font-family: "Amiri", serif; }

/* ---------- Loader halaman ---------- */
.page-loader {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: var(--bs-body-bg);
  transition: opacity .35s ease, visibility .35s ease;
}
.page-loader.is-hidden { opacity: 0; visibility: hidden; }

/* ---------- Topbar & running text ---------- */
.running-text { overflow: hidden; white-space: nowrap; }
.running-text__track {
  display: inline-block;
  animation: ag-marquee 28s linear infinite;
}
.running-text:hover .running-text__track { animation-play-state: paused; }
@keyframes ag-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .running-text__track { animation: none; }
}

/* ---------- Navbar ---------- */
#mainNavbar { transition: box-shadow var(--ag-transition), padding var(--ag-transition); }
#mainNavbar.is-scrolled { box-shadow: 0 6px 22px rgba(0, 0, 0, .1); }
.navbar .nav-link { font-weight: 500; font-size: .95rem; }
.navbar .nav-link.active { color: var(--ag-green) !important; font-weight: 700; }
.dropdown-menu { border-radius: 12px; font-size: .92rem; }
.dropdown-menu-mega { min-width: 520px; }
@media (max-width: 991.98px) { .dropdown-menu-mega { min-width: 100%; } }

/* ---------- Hero ---------- */
.hero-carousel .carousel-item { height: clamp(320px, 52vh, 560px); }
.hero-slide {
  position: relative; height: 100%;
  background-size: cover; background-position: center;
  display: flex; align-items: center;
}
.hero-slide__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(9, 77, 37, .9), rgba(9, 77, 37, .35));
}
.hero-slide__content { position: relative; z-index: 2; }
.hero-fallback {
  min-height: 380px;
  background:
    linear-gradient(135deg, rgba(9, 77, 37, .95), rgba(13, 104, 50, .8)),
    radial-gradient(circle at 80% 20%, rgba(212, 160, 23, .35), transparent 60%);
}

/* ---------- Kartu ---------- */
.card { border-radius: var(--ag-radius); }
.card-hover { transition: transform var(--ag-transition), box-shadow var(--ag-transition); }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(9, 77, 37, .14); }
.shadow-sm { box-shadow: var(--ag-shadow) !important; }

/* ---------- Avatar & ikon ---------- */
.avatar-initial {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--ag-green); color: #fff;
  font-weight: 700; font-size: .85rem;
}
.avatar-initial--lg { width: 92px; height: 92px; font-size: 2rem; }
.icon-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px; font-size: 1.1rem;
}

/* ---------- Section header ---------- */
.section-header__rule {
  width: 72px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--ag-green), var(--ag-gold));
}

/* ---------- Timeline sejarah ---------- */
.timeline { position: relative; padding-left: 2.25rem; }
.timeline::before {
  content: ""; position: absolute; left: .65rem; top: .5rem; bottom: .5rem;
  width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--ag-green), var(--ag-gold));
}
.timeline__item { position: relative; margin-bottom: 1.5rem; }
.timeline__year {
  position: absolute; left: -2.25rem; top: .35rem;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--ag-green); color: #fff;
  font-size: .6rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Widget jadwal shalat ---------- */
.prayer-widget .list-group-item { border-color: rgba(0, 0, 0, .04); }
.prayer-widget .font-monospace { letter-spacing: .5px; }

/* ---------- Konten artikel ---------- */
.content-body { line-height: 1.85; }
.content-body img { max-width: 100%; height: auto; border-radius: 10px; margin: 1rem 0; }
.content-body h2, .content-body h3 { margin-top: 1.75rem; font-weight: 700; }
.content-body blockquote {
  border-left: 4px solid var(--ag-green);
  padding-left: 1rem; color: var(--bs-secondary-color); font-style: italic;
}
.content-body table { width: 100%; margin: 1rem 0; }
.content-body table th, .content-body table td { border: 1px solid var(--bs-border-color); padding: .5rem; }

/* ---------- Badge berkas & mitra ---------- */
.file-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; height: 44px; border-radius: 10px;
  background: var(--ag-green-light); color: var(--ag-green);
  font-weight: 700; font-size: .7rem;
}
.partner-logo {
  filter: grayscale(1); opacity: .65;
  transition: filter var(--ag-transition), opacity var(--ag-transition);
}
.partner-logo:hover { filter: none; opacity: 1; }

/* ---------- Tombol mengapung ---------- */
.floating-actions {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 1030;
  display: flex; flex-direction: column; gap: .5rem;
}
.floating-actions .btn { width: 46px; height: 46px; display: grid; place-items: center; }
#scroll-top { opacity: 0; visibility: hidden; transition: var(--ag-transition); }
#scroll-top.is-visible { opacity: 1; visibility: visible; }

/* ---------- Animasi masuk ---------- */
.animate-up { opacity: 0; transform: translateY(18px); transition: .6s ease; }
.animate-up.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .animate-up { opacity: 1; transform: none; transition: none; }
}

/* ---------- Form ---------- */
.form-control, .form-select { border-radius: 10px; }
.form-control:focus, .form-select:focus {
  border-color: var(--ag-green);
  box-shadow: 0 0 0 .2rem rgba(13, 104, 50, .15);
}

/* ---------- Footer ---------- */
.site-footer a:hover { color: var(--ag-gold) !important; }

/* ---------- Utilitas ---------- */
.object-fit-cover { object-fit: cover; width: 100%; height: 100%; }
.nav-pills .nav-link { border-radius: 999px; font-size: .9rem; }
.nav-pills .nav-link.active { background: var(--ag-green); }

/* ---------- Cetak ---------- */
@media print {
  .navbar, .topbar, .site-footer, .floating-actions, .page-loader,
  .running-text, .breadcrumb, form { display: none !important; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; }
}