@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --hijau-tua: #0F6B4F;
  --hijau-cerah: #1F9D74;
  --hijau-gelap: #0B4436;
  --emas: #C99A3A;
  --emas-terang: #E3B85C;
  --krem: #FBF9F3;
  --tinta: #1C2624;
  --tinta-muda: #5B6C67;
}

body {
  background-color: var(--krem);
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--tinta);
}
h1, h2, h3, h4, h5, h6, .font-display {
  font-family: 'Fraunces', serif;
  font-weight: 600;
}
.btn-success {
  background-color: var(--hijau-tua) !important;
  border-color: var(--hijau-tua) !important;
}
.btn-success:hover {
  background-color: var(--hijau-cerah) !important;
  border-color: var(--hijau-cerah) !important;
}
.btn-outline-success {
  color: var(--hijau-tua) !important;
  border-color: var(--hijau-tua) !important;
}
.btn-outline-success:hover {
  background-color: var(--hijau-tua) !important;
  color: #fff !important;
}
.text-success { color: var(--hijau-tua) !important; }
.bg-success { background-color: var(--hijau-tua) !important; }
.card {
  border-radius: 16px;
}
.navbar-brand i {
  color: var(--emas-terang);
}
.badge.bg-maroon {
  background-color: #7A1F2B !important;
  color: #fff;
}
.text-maroon {
  color: #7A1F2B !important;
}
table td, table th {
  vertical-align: middle;
}

/* --- Sidebar --- */
.sidebar {
  width: 240px;
  min-height: 100vh;
  position: sticky;
  top: 0;
  align-self: flex-start;
  z-index: 1045;
  background: var(--hijau-gelap) !important;
}
.sidebar .nav-link {
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 2px;
  color: rgba(255,255,255,0.82);
}
.sidebar .nav-link:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}
.sidebar .nav-link.active {
  background: var(--hijau-cerah);
  color: #fff;
  font-weight: 600;
}
.sidebar-brand-logo {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: cover;
}
.content-wrapper {
  min-width: 0;
}
.sidebar-overlay {
  display: none;
}

@media (max-width: 991.98px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform .25s ease;
  }
  .sidebar.show {
    transform: translateX(0);
  }
  .sidebar-overlay.show {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1040;
  }
}

/* --- Halaman Login --- */
.login-wrap { min-height: 100vh; display: flex; }
.login-panel-form {
  flex: 0 0 440px;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 28px; background: var(--krem);
}
.login-card { width: 100%; max-width: 340px; }
.login-card img.logo-sekolah {
  width: 60px; height: 60px; border-radius: 14px; object-fit: cover; margin-bottom: 16px;
}
.login-card h1 { font-size: 24px; margin: 0 0 4px; }
.login-card p.subjudul { color: var(--tinta-muda); font-size: 13.5px; margin: 0 0 24px; }
.login-panel-hero {
  flex: 1; position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.08), transparent 40%),
    linear-gradient(155deg, var(--hijau-cerah) 0%, var(--hijau-tua) 55%, var(--hijau-gelap) 100%);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 48px 56px; color: #fff;
}
.login-panel-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.14) 1.5px, transparent 1.5px);
  background-size: 26px 26px; opacity: .5; pointer-events: none;
}
.hero-eyebrow {
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--emas-terang); margin-bottom: 12px; position: relative;
}
.hero-headline {
  font-family: 'Fraunces', serif; font-size: clamp(30px, 3.4vw, 44px);
  color: #fff; max-width: 520px; margin: 0 0 14px; line-height: 1.15; position: relative;
}
.hero-headline em { font-style: normal; color: var(--emas-terang); }
.hero-sub { font-size: 15px; color: rgba(255,255,255,.85); max-width: 440px; margin: 0; position: relative; }
.hero-banner-img {
  position: relative; border-radius: 18px; overflow: hidden;
  box-shadow: 0 10px 30px -12px rgba(15,107,79,.35); max-height: 300px;
}
.hero-banner-img img { width: 100%; display: block; object-fit: cover; }
@media (max-width: 900px) {
  .login-wrap { flex-direction: column-reverse; }
  .login-panel-form { flex: none; width: 100%; }
  .login-panel-hero { padding: 36px 24px; min-height: 240px; }
}