/* ==========================================================================
   YPAM Melola — palet & komponen visual
   Tema: alam (hijau) + teknologi (teal) + aksen hangat (amber)
   Placeholder identitas visual — silakan ganti kalau logo/warna resmi sudah ada.
   ========================================================================== */

:root {
    --ypam-forest: #2F6B4F;
    --ypam-forest-dark: #1F4D38;
    --ypam-teal: #0E8388;
    --ypam-amber: #F2A93B;
    --ypam-cream: #F7F5EC;
    --ypam-dark: #1F2A24;
    --ypam-muted: #5B6B62;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--ypam-dark);
    background-color: #ffffff;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 600;
    color: var(--ypam-forest-dark);
}

a {
    color: var(--ypam-forest);
}

a:hover {
    color: var(--ypam-teal);
}

/* ---------- Navbar ---------- */
.navbar.navbar-ypam {
    background: linear-gradient(90deg, var(--ypam-forest-dark), var(--ypam-forest));
}

.navbar-ypam .navbar-brand {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.navbar-ypam .brand-mark {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}

.navbar-ypam .brand-text small {
    display: block;
    font-size: .65rem;
    font-weight: 400;
    color: rgba(255,255,255,.75);
    letter-spacing: .02em;
}

/* ---------- Hero ---------- */
.ypam-hero {
    background: linear-gradient(135deg, var(--ypam-forest-dark) 0%, var(--ypam-forest) 55%, var(--ypam-teal) 100%);
    color: #fff;
    padding: 5.5rem 1.5rem 4.5rem;
    margin: -70px -12px 0;
    border-radius: 0 0 2rem 2rem;
}

.ypam-hero h1 {
    color: #fff;
    font-size: 2.6rem;
}

.ypam-hero .lead {
    color: rgba(255,255,255,.92);
    max-width: 640px;
}

.ypam-hero .tagline {
    display: inline-block;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 999px;
    padding: .35rem 1rem;
    font-size: .85rem;
    margin-bottom: 1rem;
}

/* ---------- Stat strip ---------- */
.ypam-stats {
    margin-top: -2.5rem;
    position: relative;
    z-index: 2;
}

.ypam-stats .stat-card {
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(31, 77, 56, .12);
    padding: 1.25rem 1rem;
    text-align: center;
}

.ypam-stats .stat-number {
    font-family: 'Poppins', sans-serif;
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--ypam-forest);
}

.ypam-stats .stat-label {
    font-size: .8rem;
    color: var(--ypam-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* ---------- Section titles ---------- */
.ypam-section-title {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 2.5rem;
}

.ypam-section-title .eyebrow {
    color: var(--ypam-teal);
    text-transform: uppercase;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .05em;
}

/* ---------- Program cards ---------- */
.program-card {
    border-radius: 1rem;
    transition: transform .15s ease, box-shadow .15s ease;
}

.program-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(31, 77, 56, .15) !important;
}

.program-icon {
    width: 52px;
    height: 52px;
    border-radius: .9rem;
    background: rgba(47, 107, 79, .1);
    color: var(--ypam-forest);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.badge-ypam-active {
    background-color: rgba(47, 107, 79, .12);
    color: var(--ypam-forest-dark);
    font-weight: 500;
}

.badge-ypam-soon {
    background-color: rgba(242, 169, 59, .18);
    color: #8a5c14;
    font-weight: 500;
}

/* ---------- Buttons ---------- */
.btn-ypam {
    background-color: var(--ypam-forest);
    border-color: var(--ypam-forest);
    color: #fff;
}

.btn-ypam:hover, .btn-ypam:focus {
    background-color: var(--ypam-forest-dark);
    border-color: var(--ypam-forest-dark);
    color: #fff;
}

.btn-outline-ypam {
    border: 1px solid var(--ypam-forest);
    color: var(--ypam-forest);
    background: transparent;
}

.btn-outline-ypam:hover {
    background-color: var(--ypam-forest);
    color: #fff;
}

/* ---------- Kegiatan / testimoni ---------- */
.ypam-activity-item, .ypam-testimonial {
    background: var(--ypam-cream);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    height: 100%;
}

.ypam-testimonial .quote-mark {
    font-size: 2rem;
    color: var(--ypam-teal);
    line-height: 1;
}

/* ---------- Curriculum list on program detail ---------- */
.curriculum-list li {
    margin-bottom: .5rem;
}

.program-features li:last-child {
    border-bottom: none !important;
}

/* ---------- Footer ---------- */
.footer-ypam {
    background: var(--ypam-forest-dark);
    color: rgba(255,255,255,.85);
    padding: 3rem 0 1.5rem;
}

.footer-ypam h6 {
    color: #fff;
    text-transform: uppercase;
    font-size: .8rem;
    letter-spacing: .04em;
    margin-bottom: 1rem;
}

.footer-ypam a {
    color: rgba(255,255,255,.85);
    text-decoration: none;
}

.footer-ypam a:hover {
    color: var(--ypam-amber);
}

.footer-ypam .footer-bottom {
    border-top: 1px solid rgba(255,255,255,.15);
    margin-top: 2rem;
    padding-top: 1.25rem;
    font-size: .8rem;
    color: rgba(255,255,255,.6);
}

/* CTA band */
.ypam-cta {
    background: var(--ypam-cream);
    border-radius: 1.25rem;
    padding: 2.5rem;
}

/* ---------- Gambar sampul Program & Kegiatan (Fase 2) ---------- */
.program-card-image {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 1rem 1rem 0 0;
}

.kegiatan-image {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: .75rem;
}

.program-hero-image {
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    border-radius: 1rem;
}

/* ---------- Mobile: hero jangan terlalu jangkung di layar kecil ---------- */
@media (max-width: 575.98px) {
    .ypam-hero {
        padding: 4.25rem 1.25rem 3.5rem;
    }

    .ypam-hero h1 {
        font-size: 2rem;
    }

    .ypam-cta {
        padding: 1.75rem 1.25rem;
    }
}

/* ---------- Aksen warna per peran saat login (9 Agustus 2026, disempurnakan
   agar SERAGAM di seluruh halaman — bukan cuma navbar/tombol) ----------
   Ditambahkan lewat class body (ypam-role-guru / ypam-role-ortu /
   ypam-role-organisasi), diisi kondisional di layout. Pendekatan: timpa ULANG
   variable --ypam-forest/--ypam-forest-dark/--ypam-teal DI DALAM scope
   body.ypam-role-* saja — ketiga variable ini dipakai di banyak tempat
   (navbar, hero, judul h1-h6, tautan, tombol .btn-ypam/.btn-outline-ypam,
   angka statistik, label eyebrow, footer) jadi seragam otomatis tanpa nulis
   ulang tiap selector. Variable default di :root (dipakai tamu/Individu/
   Admin) TIDAK diubah — hanya di-override di dalam scope body ini. */
body.ypam-role-guru {
    --ypam-forest: #0E8388;
    --ypam-forest-dark: #0B5E63;
    --ypam-teal: #35A6AC;
}
body.ypam-role-guru .ypam-stats .stat-card { box-shadow: 0 10px 30px rgba(11, 94, 99, .12); }
body.ypam-role-guru .program-card:hover { box-shadow: 0 16px 32px rgba(11, 94, 99, .15) !important; }
body.ypam-role-guru .program-icon { background: rgba(11, 94, 99, .1); }
body.ypam-role-guru .badge-ypam-active { background-color: rgba(11, 94, 99, .12); }

body.ypam-role-ortu {
    --ypam-forest: #C77F17;
    --ypam-forest-dark: #8A5A0E;
    --ypam-teal: #F2A93B;
}
body.ypam-role-ortu .ypam-stats .stat-card { box-shadow: 0 10px 30px rgba(138, 90, 14, .12); }
body.ypam-role-ortu .program-card:hover { box-shadow: 0 16px 32px rgba(138, 90, 14, .15) !important; }
body.ypam-role-ortu .program-icon { background: rgba(138, 90, 14, .1); }
body.ypam-role-ortu .badge-ypam-active { background-color: rgba(138, 90, 14, .12); }

body.ypam-role-organisasi {
    --ypam-forest: #3E6FA5;
    --ypam-forest-dark: #24406B;
    --ypam-teal: #6FA8DC;
}
body.ypam-role-organisasi .ypam-stats .stat-card { box-shadow: 0 10px 30px rgba(36, 64, 107, .12); }
body.ypam-role-organisasi .program-card:hover { box-shadow: 0 16px 32px rgba(36, 64, 107, .15) !important; }
body.ypam-role-organisasi .program-icon { background: rgba(36, 64, 107, .1); }
body.ypam-role-organisasi .badge-ypam-active { background-color: rgba(36, 64, 107, .12); }