/* Halaman Program. Semua class berawalan "pg-" agar tidak bentrok dengan CSS situs. */
.pg-page {
    --pg-primary: #1E3C72;
    --pg-accent: #7E22CE;
    --pg-gold: #E0B958;
    --pg-gold-dark: #8A6410;
    --pg-muted: #4A5568;
    --pg-bg: #F4F5FA;
    --pg-nav-h: 80px;             /* sesuaikan dengan tinggi navbar */
    margin-top: var(--pg-nav-h);
    font-family: 'Public Sans', system-ui, sans-serif;
    line-height: 1.6;
    color: #1B2433;
    background: #fff;
}

.pg-page *, .pg-page *::before, .pg-page *::after { box-sizing: border-box; }
.pg-page h1, .pg-page h2, .pg-page h3, .pg-page p, .pg-page figure, .pg-page ul { margin: 0; padding: 0; }
.pg-page ul { list-style: none; }

.pg-container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 32px; }
.pg-section { padding: 88px 0; scroll-margin-top: calc(var(--pg-nav-h) + 16px); }
.pg-section--alt { background: var(--pg-bg); }
.pg-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 64px; align-items: center; }

/* Tipografi */
.pg-eyebrow { margin-bottom: 14px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--pg-accent); }
.pg-eyebrow--gold { color: var(--pg-gold); }
.pg-title { margin-bottom: 16px; font-family: 'Source Serif 4', Georgia, serif; font-size: 40px; line-height: 1.15; font-weight: 600; color: var(--pg-primary); }
.pg-text { max-width: 620px; margin-bottom: 14px; font-size: 18px; color: var(--pg-muted); }

/* HERO: satu layar penuh dikurangi navbar */
.pg-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 420px;
    min-height: calc(100vh - var(--pg-nav-h));
    min-height: calc(100dvh - var(--pg-nav-h));
    overflow: hidden;
    background: var(--pg-primary);
}
@media (max-height: 500px) { .pg-hero { min-height: 420px; } }

.pg-hero__slide {
    position: absolute; inset: 0;
    background: center / cover no-repeat;
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 1s ease;
}
.pg-hero__slide.is-active { opacity: 1; animation: pg-zoom 7s ease-out forwards; }
@keyframes pg-zoom { from { transform: scale(1); } to { transform: scale(1.08); } }

/* Gradasi kiri bawah ke kanan atas */
.pg-hero__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(
        to top right,
        rgba(30, 60, 114, .88) 0%,
        rgba(30, 60, 114, .55) 35%,
        rgba(30, 60, 114, .15) 70%,
        rgba(30, 60, 114, 0) 100%
    );
}

.pg-hero__content { position: relative; padding-top: 140px; padding-bottom: 104px; }
.pg-hero__title {
    max-width: 860px; margin-bottom: 16px;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: clamp(36px, 6vw, 64px); line-height: 1.05; font-weight: 600;
    color: var(--pg-gold);
    text-shadow: 0 2px 12px rgba(20, 40, 79, .45);
}
.pg-hero__sub { font-size: 20px; font-weight: 500; color: var(--pg-gold); text-shadow: 0 2px 10px rgba(20, 40, 79, .45); }

.pg-hero__dots { position: absolute; left: 0; right: 0; bottom: 36px; display: flex; gap: 8px; }
.pg-dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .55); cursor: pointer; transition: width .3s ease, background .3s ease; }
.pg-dot.is-active { width: 28px; background: var(--pg-gold); }
.pg-dot:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Ubin ikon (dipakai fakta, tujuan, tahapan) */
.pg-tile { flex: none; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--pg-primary); color: var(--pg-gold); }

/* Fakta singkat */
.pg-fact { display: flex; align-items: center; gap: 16px; margin-top: 14px; padding: 16px 20px; background: var(--pg-bg); border-radius: 20px; }
.pg-fact__value { font-family: 'Source Serif 4', Georgia, serif; font-size: 24px; line-height: 1.2; font-weight: 600; color: var(--pg-primary); }
.pg-fact__label { font-size: 15px; color: var(--pg-muted); }

/* Foto */
.pg-photo { overflow: hidden; aspect-ratio: 5 / 4; border-radius: 20px; background: #E4E8F2; }
.pg-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pg-photo__placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border: 2px dashed #8FA0C8; border-radius: 20px; font-size: 14px; font-weight: 500; color: var(--pg-primary); }

/* Grid kartu */
.pg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; margin-top: 40px; }

/* Kartu tujuan */
.pg-goal {
    display: flex; align-items: center; gap: 18px;
    padding: 22px 24px; background: #fff; border-radius: 20px;
    box-shadow: 0 4px 14px rgba(20, 40, 79, .08);
    transition: transform .3s ease, box-shadow .3s ease;
}
.pg-goal p { font-size: 18px; font-weight: 500; line-height: 1.4; color: #1B2433; }

/* Kartu tahapan */
.pg-phase { padding: 28px; background: var(--pg-bg); border-radius: 20px; }
.pg-phase__top { display: flex; justify-content: space-between; align-items: center; }
.pg-phase__no { font-family: 'Source Serif 4', Georgia, serif; font-size: 30px; font-weight: 600; color: var(--pg-gold-dark); }
.pg-phase__title { margin: 20px 0 14px; font-family: 'Source Serif 4', Georgia, serif; font-size: 24px; line-height: 1.25; font-weight: 600; color: var(--pg-primary); }

.pg-list li { position: relative; margin-bottom: 10px; padding-left: 20px; font-size: 17px; color: #1B2433; }
.pg-list li::before { content: ''; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--pg-gold); }

/* Hover hanya untuk perangkat dengan mouse */
@media (hover: hover) {
    .pg-goal:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(20, 40, 79, .14); }
}

/* Responsive */
@media (max-width: 768px) {
    .pg-container { padding: 0 20px; }
    .pg-section { padding: 56px 0; }
    .pg-split { gap: 32px; }
    .pg-title { font-size: 32px; }
    .pg-text { font-size: 17px; }
    .pg-hero__content { padding-top: 100px; padding-bottom: 88px; }
    .pg-hero__sub { font-size: 18px; }
    .pg-phase { padding: 24px; }

    /* Gradasi lurus dari bawah ke atas agar tulisan tetap terbaca di HP */
    .pg-hero__overlay {
        background: linear-gradient(to top, rgba(30, 60, 114, .88) 0%, rgba(30, 60, 114, .55) 45%, rgba(30, 60, 114, .2) 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pg-hero__slide, .pg-goal, .pg-dot { transition: none; }
    .pg-hero__slide { transform: none; }
    .pg-hero__slide.is-active { animation: none; }
}

/* ===== Komponen tambahan (Bimbel dan halaman program lain) ===== */

/* Kartu fokus */
.pg-card { padding: 28px; background: #fff; border-radius: 20px; box-shadow: 0 4px 14px rgba(20, 40, 79, .08); transition: transform .3s ease, box-shadow .3s ease; }
.pg-card__title { margin: 20px 0 8px; font-family: 'Source Serif 4', Georgia, serif; font-size: 22px; line-height: 1.25; font-weight: 600; color: var(--pg-primary); }
.pg-card__text { font-size: 16px; color: var(--pg-muted); }

/* Item dropdown navbar yang sedang dibuka */
.dropdown-link.is-current { font-weight: 600; color: var(--pg-accent); }

@media (hover: hover) {
    .pg-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(20, 40, 79, .14); }
}

@media (prefers-reduced-motion: reduce) {
    .pg-card { transition: none; }
}

.pg-page .pg-subjects {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.pg-subject {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    min-height: 200px;
    padding: 24px;
    background: #fff;
    border: 1px solid #E3E7F0;
    border-radius: 20px;
    box-shadow: 0 4px 14px rgba(20, 40, 79, .06);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.pg-subject::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--pg-primary);
    transform: translateY(101%);
    transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

.pg-subject__top { display: flex; justify-content: space-between; align-items: flex-start; }

.pg-subject__icon {
    display: flex; align-items: center; justify-content: center;
    width: 56px; height: 56px;
    border-radius: 16px;
    background: var(--pg-primary);
    color: var(--pg-gold);
    font-size: 24px;
    transition: transform .4s cubic-bezier(.3, 1.4, .5, 1), background .35s ease, color .35s ease;
}

.pg-subject__no { font-family: 'Source Serif 4', Georgia, serif; font-size: 18px; font-weight: 600; color: var(--pg-gold-dark); transition: color .35s ease; }
.pg-subject__name { font-family: 'Source Serif 4', Georgia, serif; font-size: 22px; line-height: 1.25; font-weight: 600; color: var(--pg-primary); transition: color .35s ease; }
.pg-subject__desc { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--pg-muted); transition: color .35s ease; }

.pg-subject__bg {
    position: absolute;
    right: -12px; bottom: -14px;
    z-index: -1;
    font-size: 110px;
    color: var(--pg-primary);
    opacity: .05;
    transition: transform .5s ease, opacity .35s ease, color .35s ease;
}

@media (hover: hover) {
    .pg-subject:hover {
        transform: translateY(-8px);
        border-color: var(--pg-primary);
        box-shadow: 0 22px 44px rgba(20, 40, 79, .28);
    }
    .pg-subject:hover::before { transform: translateY(0); }
    .pg-subject:hover .pg-subject__icon { background: var(--pg-gold); color: var(--pg-primary); transform: rotate(-8deg) scale(1.12); }
    .pg-subject:hover .pg-subject__no { color: var(--pg-gold); }
    .pg-subject:hover .pg-subject__name { color: #fff; }
    .pg-subject:hover .pg-subject__desc { color: #D6DEEE; }
    .pg-subject:hover .pg-subject__bg { color: #fff; opacity: .1; transform: translate(-8px, -8px) rotate(-10deg) scale(1.1); }
}

.pg-js .pg-subjects:not(.is-visible) .pg-subject { opacity: 0; }
.pg-js .pg-subjects.is-visible .pg-subject { animation: pg-rise .6s ease backwards; animation-delay: calc(var(--i) * 50ms); }
@keyframes pg-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

@media (max-width: 1024px) { .pg-page .pg-subjects { grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 768px) {
    .pg-page .pg-subjects { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .pg-subject { min-height: 170px; padding: 18px; gap: 20px; border-radius: 18px; }
    .pg-subject__icon { width: 48px; height: 48px; font-size: 20px; }
    .pg-subject__name { font-size: 19px; }
    .pg-subject__desc { font-size: 13px; }
}

@media (max-width: 380px) { .pg-page .pg-subjects { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
    .pg-subject, .pg-subject::before, .pg-subject__icon, .pg-subject__bg { transition: none; }
    .pg-js .pg-subjects:not(.is-visible) .pg-subject { opacity: 1; }
    .pg-js .pg-subjects.is-visible .pg-subject { animation: none; }
}