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

:root {
  --brand-green: #1a6b42;
  --brand-green-dark: #0f4a2c;
  --brand-green-light: #2d8a5a;
  --brand-gold: #d9a441;
  --brand-gold-dark: #b8862f;
  --brand-soft: #eef7f1;
  --brand-ink: #1c2620;
  --brand-muted: #667a70;
  --radius-md: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 2px 10px rgba(20, 60, 40, .06);
  --shadow-md: 0 10px 30px rgba(20, 60, 40, .10);
  --shadow-lg: 0 20px 50px rgba(20, 60, 40, .14);
}

* { scroll-behavior: smooth; }

body {
  font-family: 'Plus Jakarta Sans', 'Poppins', sans-serif;
  color: var(--brand-ink);
  background: #fbfcfb;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', sans-serif; }

/* ===== Navbar ===== */
.navbar {
  backdrop-filter: saturate(180%) blur(6px);
  background: rgba(255,255,255,.95) !important;
  border-bottom: 1px solid rgba(20,60,40,.06);
}
.navbar-brand { font-size: 1.05rem; }
.brand-logo { width: 42px; height: 42px; object-fit: contain; }
.brand-name { color: var(--brand-ink); font-size: .95rem; letter-spacing: .02em; }
.nav-link {
  font-weight: 500; color: var(--brand-ink) !important; position: relative;
  padding: .55rem .65rem !important; transition: color .15s ease;
  white-space: nowrap; font-size: .92rem;
}
.nav-link::after {
  content: ""; position: absolute; left: .65rem; right: .65rem; bottom: .25rem;
  height: 2px; background: var(--brand-gold); transform: scaleX(0);
  transform-origin: left; transition: transform .2s ease;
}
.nav-link:hover, .nav-link.active { color: var(--brand-green) !important; }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.navbar .btn { white-space: nowrap; }

/* ===== Buttons ===== */
.btn { border-radius: 10px; font-weight: 600; padding: .55rem 1.3rem; transition: all .18s ease; }
.btn-success { background-color: var(--brand-green); border-color: var(--brand-green); }
.btn-success:hover { background-color: var(--brand-green-dark); border-color: var(--brand-green-dark); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-outline-success { color: var(--brand-green); border-color: var(--brand-green); }
.btn-outline-success:hover { background-color: var(--brand-green); border-color: var(--brand-green); transform: translateY(-1px); }
.btn-light { border-radius: 10px; font-weight: 600; }
.btn-outline-light { border-radius: 10px; font-weight: 600; border-width: 1.5px; }
.text-success { color: var(--brand-green) !important; }
.bg-success-subtle { background-color: var(--brand-soft) !important; }

/* ===== Hero Carousel ===== */
.hero-carousel { position: relative; line-height: 0; background: #0f4a2c; }
.hero-carousel .carousel-item img {
  height: 65vh; min-height: 380px; max-height: 620px; object-fit: cover;
}
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next { width: 8%; opacity: 1; }
.hero-nav-btn {
  width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.92);
  display: inline-flex; align-items: center; justify-content: center; color: var(--brand-ink);
  font-size: 1.1rem; box-shadow: var(--shadow-md); transition: transform .15s ease, background .15s ease;
}
.hero-carousel .carousel-control-prev:hover .hero-nav-btn,
.hero-carousel .carousel-control-next:hover .hero-nav-btn { transform: scale(1.08); background: #fff; }
.hero-carousel .carousel-indicators { margin-bottom: 1rem; }
.hero-carousel .carousel-indicators button {
  width: 8px; height: 8px; border-radius: 50%; border: none; background: rgba(255,255,255,.55);
}
.hero-carousel .carousel-indicators button.active { background: var(--brand-gold); }
.hero-intro { background: linear-gradient(180deg, var(--brand-soft), #fff); }
.kelas-card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.kelas-card:hover { border-color: var(--brand-green-light); }
.kelas-icon {
  width: 48px; height: 48px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-green);
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0;
}

/* ===== Stat cards ===== */
.stat-card {
  border-radius: var(--radius-md); border: 1px solid #e7ece8; box-shadow: var(--shadow-sm);
  padding: 1.6rem 1.4rem; text-align: center; background:#fff;
  transition: transform .2s ease, box-shadow .2s ease;
}
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.stat-card .stat-number { font-size: 2.1rem; font-weight: 800; color: var(--brand-green); font-family: 'Poppins', sans-serif; }
.stat-card i { color: var(--brand-gold-dark); }

/* ===== Sections ===== */
.section-title { font-weight: 700; color: var(--brand-ink); letter-spacing: -.2px; }
.section-subtitle { color: var(--brand-muted); }

/* ===== Cards ===== */
.card {
  border-radius: var(--radius-md); border: 1px solid #edf1ee; box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card-img-top { border-radius: var(--radius-md) var(--radius-md) 0 0; height: 190px; object-fit: cover; }
.card-body h3, .card-body h2 { font-weight: 600; }

/* ===== Footer ===== */
footer { background: linear-gradient(180deg, #16302400, transparent), var(--brand-ink) !important; }
.footer-link { color: #a9b7ae; text-decoration: none; transition: color .15s ease; }
.footer-link:hover { color: var(--brand-gold); }

/* ===== Misc ===== */
.badge-soft { background: var(--brand-soft); color: var(--brand-green); font-weight: 600; border-radius: 999px; padding: .4em .85em; }
.breadcrumb-item a { color: var(--brand-green); text-decoration: none; }
.breadcrumb-item.active { color: var(--brand-muted); }
.page-link { color: var(--brand-green); border-radius: 8px; margin: 0 2px; border: 1px solid #e7ece8; }
.page-item.active .page-link { background-color: var(--brand-green); border-color: var(--brand-green); }
.list-group-item { border-color: #edf1ee; }
.form-control:focus, .form-select:focus { border-color: var(--brand-green-light); box-shadow: 0 0 0 .2rem rgba(26,107,66,.12); }
.alert-success { background-color: var(--brand-soft); border-color: #cfe6da; color: var(--brand-green-dark); }
.modal-content { border-radius: var(--radius-md); border: none; box-shadow: var(--shadow-lg); }