/* =====================================================================
   SLB NEGERI KOTA GAJAH — DESIGN SYSTEM
   Tema: hangat, bermartabat, inklusif. Terinspirasi dari bahasa isyarat
   (komunikasi tanpa batas) dan motif garis anyaman kain khas Lampung,
   diterjemahkan ulang sebagai elemen grafis garis & lengkung yang sederhana.
   ===================================================================== */

:root {
  /* Warna */
  --ink: #17272a;
  --bg: #f6f5ef;
  --surface: #ffffff;
  --primary: #175c52;
  --primary-dark: #0e3b34;
  --primary-light: #e2efe9;
  --gold: #e6a13a;
  --gold-dark: #b97b1f;
  --plum: #7c3a5d;
  --muted: #5c6b68;
  --border: #e4e1d6;

  /* Tipografi */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, Segoe UI, sans-serif;

  /* Radius & bayangan */
  --radius: 18px;
  --radius-sm: 10px;
  --shadow-soft: 0 10px 30px -12px rgba(14, 59, 52, 0.25);
  --shadow-card: 0 6px 18px -8px rgba(23, 39, 42, 0.18);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
}

h1, h2, h3, h4, .display-font {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--primary-dark);
}

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

.text-gold { color: var(--gold-dark) !important; }
.text-plum { color: var(--plum) !important; }
.bg-primary-soft { background: var(--primary-light); }

/* Fokus keyboard tetap terlihat jelas (aksesibilitas) */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------------------------------------------------------------------
   Garis anyaman dekoratif -- elemen tanda tangan visual situs ini.
   Sebuah pola garis sederhana terinspirasi tenun, dipakai sebagai
   pembatas/bingkai, bukan ilustrasi budaya spesifik.
   ------------------------------------------------------------------- */
.woven-rule {
  height: 8px;
  background-image: repeating-linear-gradient(
    -45deg, var(--gold) 0, var(--gold) 6px, var(--plum) 6px, var(--plum) 12px
  );
  border-radius: 4px;
  opacity: 0.9;
}

.woven-frame {
  position: relative;
  padding: 10px;
  border-radius: calc(var(--radius) + 10px);
  background: linear-gradient(135deg, var(--gold), var(--plum));
}
.woven-frame > * {
  border-radius: var(--radius);
  display: block;
  width: 100%;
}

/* ---------------------------------------------------------------------
   Navbar
   ------------------------------------------------------------------- */
.site-topbar {
  background: var(--primary-dark);
  color: #fff;
  font-size: 0.85rem;
}
.site-topbar a { color: #d9ece7; }
.site-topbar a:hover { color: var(--gold); }

.navbar-brand-custom {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.navbar-brand-custom img {
  height: 46px;
  width: 46px;
  object-fit: contain;
  border-radius: 10px;
  background: #fff;
  padding: 4px;
}
.navbar-brand-custom .brand-text {
  line-height: 1.15;
}
.navbar-brand-custom .brand-text strong {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--primary-dark);
  display: block;
}
.navbar-brand-custom .brand-text span {
  font-size: 0.72rem;
  color: var(--muted);
}

.navbar-main {
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.navbar-main .nav-link {
  font-weight: 600;
  color: var(--ink) !important;
  padding: 0.6rem 0.9rem !important;
  border-radius: var(--radius-sm);
}
.navbar-main .nav-link:hover,
.navbar-main .nav-link:focus {
  color: var(--primary-dark) !important;
  background: var(--primary-light);
}
.navbar-main .dropdown-menu {
  border: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  padding: 0.5rem;
}
.navbar-main .dropdown-item {
  border-radius: 8px;
  padding: 0.55rem 0.9rem;
  font-weight: 500;
}
.navbar-main .dropdown-item:hover { background: var(--primary-light); color: var(--primary-dark); }
.navbar-main .dropdown-submenu { position: relative; }
.navbar-main .dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -0.5rem;
}
@media (max-width: 991.98px) {
  .navbar-main .dropdown-submenu > .dropdown-menu { left: 0; margin-left: 1rem; box-shadow: none; }
}

/* ---------------------------------------------------------------------
   Tombol
   ------------------------------------------------------------------- */
.btn-brand {
  background: var(--gold);
  border: none;
  color: var(--primary-dark);
  font-weight: 700;
  padding: 0.7rem 1.6rem;
  border-radius: 999px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-brand:hover { background: var(--gold-dark); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-soft); }

.btn-outline-brand {
  border: 2px solid var(--surface);
  color: #fff;
  font-weight: 700;
  padding: 0.65rem 1.5rem;
  border-radius: 999px;
}
.btn-outline-brand:hover { background: #fff; color: var(--primary-dark); }

.btn-primary-brand {
  background: var(--primary);
  border: none;
  color: #fff;
  font-weight: 700;
  padding: 0.7rem 1.6rem;
  border-radius: 999px;
}
.btn-primary-brand:hover { background: var(--primary-dark); color: #fff; }

/* ---------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------- */
.hero {
  position: relative;
  color: #fff;
  overflow: hidden;
  min-height: 560px;
  display: flex;
  align-items: center;
  background-color: var(--primary-dark);
  background-image: radial-gradient(circle at 15% 20%, rgba(230, 161, 58, 0.18), transparent 45%),
                     linear-gradient(160deg, var(--primary-dark), var(--primary) 70%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero .hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* warna & transparansi diatur langsung lewat inline style dari admin */
}
.hero-bg-carousel {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg-carousel .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-bg-carousel .carousel-control-prev,
.hero-bg-carousel .carousel-control-next {
  z-index: 3;
  width: 5%;
  opacity: 0.7;
}
.hero-bg-carousel .carousel-control-prev:hover,
.hero-bg-carousel .carousel-control-next:hover { opacity: 1; }
.hero .hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: 3.5rem;
}
.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fdeecb;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  backdrop-filter: blur(2px);
}
.hero h1 {
  color: #fff;
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  line-height: 1.12;
  text-shadow: 0 2px 18px rgba(0,0,0,0.25);
}
.hero p.lead {
  color: #f1f7f4;
  max-width: 56ch;
  text-shadow: 0 1px 10px rgba(0,0,0,0.2);
}
@media (max-width: 767.98px) {
  .hero { min-height: 460px; }
}

/* ---------------------------------------------------------------------
   Statistik
   ------------------------------------------------------------------- */
.stat-strip {
  margin-top: -3rem;
  position: relative;
  z-index: 3;
}
.stat-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 1.5rem 1rem;
  text-align: center;
}
.stat-card .num {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--primary-dark);
  font-weight: 700;
}
.stat-card .label { color: var(--muted); font-size: 0.85rem; font-weight: 600; }

/* ---------------------------------------------------------------------
   Section umum
   ------------------------------------------------------------------- */
.section { padding-block: 4rem; }
.section-head { max-width: 640px; margin-inline: auto; text-align: center; margin-bottom: 2.5rem; }
.section-head .kicker {
  color: var(--plum);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}
.section-head h2 { margin-top: 0.4rem; }

/* ---------------------------------------------------------------------
   Kartu berita / konten
   ------------------------------------------------------------------- */
.card-post {
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  height: 100%;
  border: 1px solid var(--border);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card-post:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.card-post img { height: 190px; width: 100%; object-fit: cover; }
.card-post .card-body { padding: 1.25rem; }
.card-post .badge-kategori {
  background: var(--primary-light);
  color: var(--primary-dark);
  font-weight: 700;
  font-size: 0.72rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}
.card-post h3 { font-size: 1.08rem; margin: 0.6rem 0 0.4rem; }
.card-post .meta { color: var(--muted); font-size: 0.82rem; }

/* ---------------------------------------------------------------------
   Sambutan kepala sekolah
   ------------------------------------------------------------------- */
.sambutan-photo {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.sambutan-photo img { width: 100%; height: 100%; object-fit: cover; }
.quote-mark {
  font-family: var(--font-display);
  font-size: 4rem;
  color: var(--gold);
  line-height: 0.5;
  display: block;
  margin-bottom: 0.6rem;
}

/* ---------------------------------------------------------------------
   Galeri
   ------------------------------------------------------------------- */
.gallery-item {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 4/3;
  display: block;
  box-shadow: var(--shadow-card);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item .cap {
  position: absolute; inset: auto 0 0 0;
  background: linear-gradient(0deg, rgba(14,59,52,0.88), transparent);
  color: #fff; font-size: 0.8rem; padding: 1.5rem 0.75rem 0.5rem;
}

.video-thumb {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 16/9;
  display: block;
  box-shadow: var(--shadow-card);
}
.video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-thumb .play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(14,59,52,0.35);
}
.video-thumb .play i {
  font-size: 2.6rem; color: #fff; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}

/* ---------------------------------------------------------------------
   Filter pill (kategori)
   ------------------------------------------------------------------- */
.pill-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pill-filter a {
  display: inline-block;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.85rem;
}
.pill-filter a.active, .pill-filter a:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* ---------------------------------------------------------------------
   Alumni
   ------------------------------------------------------------------- */
.alumni-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
  text-align: center;
  height: 100%;
}
.alumni-card img {
  width: 92px; height: 92px; object-fit: cover; border-radius: 50%;
  margin-inline: auto; margin-bottom: 0.9rem; border: 3px solid var(--gold);
}
.alumni-card .angkatan { color: var(--plum); font-weight: 700; font-size: 0.78rem; }

/* ---------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------- */
.site-footer {
  background: var(--primary-dark);
  color: #cfe6df;
  padding-block: 3.5rem 1.5rem;
}
.site-footer h5 { color: #fff; font-family: var(--font-display); }
.site-footer a { color: #cfe6df; }
.site-footer a:hover { color: var(--gold); }
.site-footer .footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  font-size: 0.85rem;
  color: #9fc2b8;
}
.social-icons a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.08); margin-right: 0.4rem;
}
.social-icons a:hover { background: var(--gold); color: var(--primary-dark); }

/* ---------------------------------------------------------------------
   Halaman dalam (breadcrumb + konten statis)
   ------------------------------------------------------------------- */
.page-banner {
  background: linear-gradient(160deg, var(--primary-dark), var(--primary));
  color: #fff;
  padding-block: 2.75rem;
}
.page-banner h1 { color: #fff; font-size: 1.9rem; margin-bottom: 0.3rem; }
.page-banner .breadcrumb a { color: #d9ece7; }
.page-banner .breadcrumb-item.active { color: var(--gold); }

.content-area { line-height: 1.85; }
.content-area img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.content-area h2, .content-area h3 { margin-top: 1.8rem; }

.widget-box {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
}
.widget-box h5 { font-family: var(--font-display); color: var(--primary-dark); }
.widget-box .list-unstyled li { padding: 0.4rem 0; border-bottom: 1px dashed var(--border); }
.widget-box .list-unstyled li:last-child { border-bottom: none; }

/* Empty state */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.empty-state i { font-size: 2.5rem; color: var(--border); margin-bottom: 0.75rem; display: block; }

/* Utility */
.rounded-brand { border-radius: var(--radius) !important; }
.shadow-brand { box-shadow: var(--shadow-card) !important; }