/* =====================================================
   WEBSITE SEKOLAH - FRONTEND STYLES
   Warna: Hijau Islami (#1a5e2f) + Emas (#c8a43a)
   ===================================================== */

:root {
    --green-dark:  #1a5e2f;
    --green-medium:#2e7d4f;
    --green-light: #e8f5ee;
    --gold:        #c8a43a;
    --gold-light:  #f9f3e0;
    --darker:      #0d3018;
}

 
* { font-family: 'Poppins', sans-serif; font-size:12px; }

/* ---- Colors ---- */
.text-dark-green    { color: var(--green-dark) !important; }
.text-gold          { color: var(--gold) !important; }
.bg-dark-green      { background-color: var(--green-dark) !important; }
.bg-light-green     { background-color: var(--green-light) !important; }
.bg-gold            { background-color: var(--gold) !important; }
.bg-darker          { background-color: var(--darker) !important; }
.border-light-green { border-color: var(--green-light) !important; }
.border-dark-green  { border-color: var(--green-dark) !important; }
.border-gold        { border-color: var(--gold) !important; }

/* ---- Buttons ---- */
.btn-dark-green {
    background-color: var(--green-dark);
    color: #fff;
    border: none;
    transition: background .2s;
}
.btn-dark-green:hover { background-color: var(--green-medium); color: #fff; }

.btn-outline-dark-green {
    border: 1.5px solid var(--green-dark);
    color: var(--green-dark);
    background: transparent;
}
.btn-outline-dark-green:hover { background-color: var(--green-dark); color: #fff; }

.btn-gold { background-color: var(--gold); color: #1a1a1a; border: none; font-weight: 600; }
.btn-gold:hover { background-color: #b8942a; color: #1a1a1a; }

.btn-psb {
    background: linear-gradient(135deg, var(--gold), #e8be5a);
    color: #1a1a1a !important;
    font-weight: 600;
    border-radius: 4px;
    padding: 6px 18px;
    transition: transform .15s;
}
.btn-psb:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(200,164,58,.4); }

/* ---- Topbar ---- */
.topbar { font-size: 0.8rem; }
.topbar a { text-decoration: none; transition: opacity .2s; }
.topbar a:hover { opacity: .75; }

/* ---- Navbar ---- */
.navbar .nav-link {
    font-size: 0.87rem;
    font-weight: 500;
    color: #333;
    padding: 8px 14px;
    transition: color .2s;
}
.navbar .nav-link:hover,
.navbar .nav-link.active { color: var(--green-dark); }
.navbar .nav-link.active::after {
    content: '';
    display: block;
    height: 2px;
    background: var(--green-dark);
    border-radius: 2px;
    margin-top: 2px;
}

/* ---- Hero Slider ---- */
.hero-swiper { height: 540px; }
@media (max-width: 768px) { .hero-swiper { height: 360px; } }

.hero-slide {
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(10,40,20,.55) 0%, rgba(10,40,20,.75) 100%);
}
.hero-content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
}
.swiper-button-next,
.swiper-button-prev { color: var(--gold) !important; }

/* ---- Stats Bar ---- */
.stat-item { padding: 4px 0; }
.stat-number { line-height: 1; }

/* ---- Section ---- */
.section-title { font-size: 1.8rem; font-weight: 700; color: #1a1a1a; }
.section-divider {
    width: 60px;
    height: 4px;
    background: linear-gradient(to right, var(--green-dark), var(--gold));
    border-radius: 4px;
    margin: 8px 0 20px;
}

/* ---- Cards ---- */
.card-hover { transition: transform .2s, box-shadow .2s; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.12) !important; }

.img-hover-zoom { transition: transform .4s; }
.img-hover-zoom:hover { transform: scale(1.06); }

/* ---- Galeri ---- */
.galeri-item { cursor: pointer; }
.galeri-img { transition: transform .3s, filter .3s; }
.galeri-item:hover .galeri-img { transform: scale(1.08); filter: brightness(.85); }

/* ---- Footer ---- */
.footer a:hover { color: #fff !important; }
.hover-white:hover { color: #fff !important; }

/* ---- WhatsApp Float ---- */
.wa-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(37,211,102,.5);
    z-index: 999;
    transition: transform .2s;
}
.wa-float:hover { transform: scale(1.1); color: #fff; }

/* ---- PSB Step Indicator ---- */
.step-indicator { gap: 0; align-items: center; }
.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.step span {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ddd;
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    transition: background .3s;
}
.step small { font-size: .7rem; color: #888; }
.step.active span { background: var(--green-dark); color: #fff; }
.step.active small { color: var(--green-dark); font-weight: 600; }
.step-line { flex: 1; height: 2px; background: #ddd; min-width: 40px; margin: 0 4px; margin-bottom: 20px; }

/* ---- Page Header ---- */
.page-header { background-color: var(--green-dark); }

/* ---- Berita Detail ---- */
.berita-content img { max-width: 100%; border-radius: 8px; margin: 12px 0; }
.berita-content p { line-height: 1.8; color: #333; }

/* ---- Responsive ---- */
@media (max-width: 576px) {
    .section-title { font-size: 1.4rem; }
    .hero-swiper { height: 300px; }
}