/*
 * Tema visual pastel sekolah modern.
 * Hanya mengubah warna, nuansa permukaan, tombol, dan efek dekoratif.
 * Struktur HTML, ukuran grid, urutan section, dan tata letak halaman lama tetap dipertahankan.
 */
:root {
    --pelangi-mint: #55c9b5;
    --pelangi-mint-dark: #278d7e;
    --pelangi-mint-soft: #e8f8f3;
    --pelangi-coral: #ff8176;
    --pelangi-coral-dark: #ed685e;
    --pelangi-cream: #fff9e9;
    --pelangi-yellow: #f2c85d;
    --pelangi-sky: #bce8f1;
    --pelangi-ink: #32343a;
    --pelangi-muted: #687078;
    /* override token warna lama tanpa mengubah ukuran/struktur */
    --primary-blue: var(--pelangi-mint);
    --primary-blue-dark: var(--pelangi-mint-dark);
    --primary-blue-light: var(--pelangi-mint-soft);
    --bg-light: var(--pelangi-cream);
    --text-dark: var(--pelangi-ink);
    --text-medium: var(--pelangi-muted);
}

body:not(.portal-profile-page) {
    background-color: var(--pelangi-cream) !important;
    color: var(--pelangi-muted);
}

body:not(.portal-profile-page) .glass-effect {
    background-color: rgba(235, 249, 244, .93) !important;
    border-color: rgba(85, 201, 181, .18) !important;
    box-shadow: 0 10px 30px rgba(61, 92, 84, .08) !important;
}

body:not(.portal-profile-page) header .glass-effect {
    background-image: linear-gradient(90deg, rgba(234,249,244,.98), rgba(249,253,250,.96)) !important;
}

body:not(.portal-profile-page) .text-blue-900,
body:not(.portal-profile-page) .text-blue-800,
body:not(.portal-profile-page) .text-blue-700,
body:not(.portal-profile-page) .text-blue-600,
body:not(.portal-profile-page) .text-blue-500 {
    color: var(--pelangi-mint-dark) !important;
}

body:not(.portal-profile-page) .hover\:text-blue-700:hover,
body:not(.portal-profile-page) .hover\:text-blue-600:hover,
body:not(.portal-profile-page) .hover\:text-blue-500:hover {
    color: #1f796c !important;
}

body:not(.portal-profile-page) .bg-blue-700,
body:not(.portal-profile-page) .bg-blue-600,
body:not(.portal-profile-page) .bg-blue-500 {
    background-color: var(--pelangi-coral) !important;
}

body:not(.portal-profile-page) .hover\:bg-blue-700:hover,
body:not(.portal-profile-page) .hover\:bg-blue-600:hover,
body:not(.portal-profile-page) .hover\:bg-blue-500:hover {
    background-color: var(--pelangi-coral-dark) !important;
}

body:not(.portal-profile-page) .bg-blue-50,
body:not(.portal-profile-page) .bg-blue-100,
body:not(.portal-profile-page) .bg-blue-200 {
    background-color: var(--pelangi-mint-soft) !important;
}

body:not(.portal-profile-page) .border-blue-100,
body:not(.portal-profile-page) .border-blue-200,
body:not(.portal-profile-page) .border-blue-300,
body:not(.portal-profile-page) .border-blue-400,
body:not(.portal-profile-page) .border-blue-500,
body:not(.portal-profile-page) .border-blue-600 {
    border-color: rgba(85, 201, 181, .48) !important;
}

body:not(.portal-profile-page) .ring-blue-300,
body:not(.portal-profile-page) .ring-blue-400,
body:not(.portal-profile-page) .ring-blue-500 {
    --tw-ring-color: rgba(85, 201, 181, .58) !important;
}

body:not(.portal-profile-page) .hover\:ring-blue-500:hover,
body:not(.portal-profile-page) .hover\:ring-blue-600:hover {
    --tw-ring-color: var(--pelangi-mint) !important;
}

body:not(.portal-profile-page) .section-card,
body:not(.portal-profile-page) .modal-content,
body:not(.portal-profile-page) .schedule-card,
body:not(.portal-profile-page) .content-card,
body:not(.portal-profile-page) .info-card {
    border-color: rgba(80, 147, 132, .12) !important;
    box-shadow: 0 16px 36px rgba(69, 91, 84, .08) !important;
}

body:not(.portal-profile-page) .section-card:hover,
body:not(.portal-profile-page) .schedule-card:hover,
body:not(.portal-profile-page) .content-card:hover {
    box-shadow: 0 18px 38px rgba(85, 201, 181, .16) !important;
    border-color: rgba(85, 201, 181, .28) !important;
}

body:not(.portal-profile-page) .hero-overlay {
    background: linear-gradient(to top, rgba(35, 97, 86, .68), rgba(36, 80, 73, .08)) !important;
}

body:not(.portal-profile-page) .hero-slider-container::after {
    background: linear-gradient(to top, var(--pelangi-cream) 8%, rgba(255, 249, 233, 0) 100%) !important;
}

body:not(.portal-profile-page) .creative-input:focus,
body:not(.portal-profile-page) input:focus,
body:not(.portal-profile-page) textarea:focus,
body:not(.portal-profile-page) select:focus {
    border-color: var(--pelangi-mint) !important;
    box-shadow: 0 0 0 3px rgba(85, 201, 181, .13) !important;
}

body:not(.portal-profile-page) footer {
    background: linear-gradient(100deg, #fa7f73 0%, #ef8e7f 24%, #62cdb9 66%, #45bda9 100%) !important;
    color: #fff !important;
}

body:not(.portal-profile-page) footer p,
body:not(.portal-profile-page) footer a,
body:not(.portal-profile-page) footer .text-slate-300,
body:not(.portal-profile-page) footer .text-slate-400,
body:not(.portal-profile-page) footer .text-slate-500,
body:not(.portal-profile-page) footer .text-gray-300,
body:not(.portal-profile-page) footer .text-gray-400 {
    color: rgba(255,255,255,.9) !important;
}

body:not(.portal-profile-page) #scroll-to-top {
    background: var(--pelangi-coral) !important;
    box-shadow: 0 10px 24px rgba(255, 129, 118, .28) !important;
}

body:not(.portal-profile-page) .mobile-nav .nav-item:hover,
body:not(.portal-profile-page) .mobile-nav .nav-item.active,
body:not(.portal-profile-page) .mobile-nav .nav-item:active {
    color: var(--pelangi-mint-dark) !important;
}

body:not(.portal-profile-page) .nav-link.active,
body:not(.portal-profile-page) a.active {
    color: var(--pelangi-mint-dark) !important;
}

body:not(.portal-profile-page) .auth-tab.active {
    color: var(--pelangi-mint-dark) !important;
    border-color: var(--pelangi-mint) !important;
}

body:not(.portal-profile-page) .status-display.bg-blue-100,
body:not(.portal-profile-page) .bg-sky-50 {
    background-color: #e9f8f4 !important;
}

body:not(.portal-profile-page) #auth-container-desktop .bg-blue-600,
body:not(.portal-profile-page) #auth-container-mobile .bg-blue-600,
body:not(.portal-profile-page) #register-button.bg-blue-600,
body:not(.portal-profile-page) #login-form .bg-blue-600,
body:not(.portal-profile-page) #signup-form .bg-blue-600 {
    background: var(--pelangi-coral) !important;
}

body:not(.portal-profile-page) #auth-container-desktop .bg-blue-100,
body:not(.portal-profile-page) #auth-container-mobile .bg-blue-100 {
    background: #e4f7f1 !important;
    color: var(--pelangi-mint-dark) !important;
}

body:not(.portal-profile-page) .modal-overlay {
    background-color: rgba(38, 71, 64, .34) !important;
}

/* aksen pastel kecil tanpa menggeser posisi elemen */
body:not(.portal-profile-page) main::before {
    content: "";
    position: fixed;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    top: 96px;
    right: -95px;
    background: rgba(188, 232, 241, .22);
    pointer-events: none;
    z-index: -1;
}

@media (max-width: 767px) {
    body:not(.portal-profile-page) header .glass-effect,
    body:not(.portal-profile-page) .mobile-nav {
        background-color: rgba(241, 251, 247, .96) !important;
    }
}


/* Override khusus footer beranda agar tidak memakai gradien pelangi */
body:not(.portal-profile-page) footer.site-footer {
    background: #f7f1e6 !important;
    color: #384344 !important;
}
body:not(.portal-profile-page) footer.site-footer p,
body:not(.portal-profile-page) footer.site-footer a,
body:not(.portal-profile-page) footer.site-footer .site-footer__brand h2,
body:not(.portal-profile-page) footer.site-footer .site-footer__brand p,
body:not(.portal-profile-page) footer.site-footer .site-footer__links a,
body:not(.portal-profile-page) footer.site-footer .site-footer__contact p,
body:not(.portal-profile-page) footer.site-footer .site-footer__bottom p,
body:not(.portal-profile-page) footer.site-footer .site-footer__bottom a {
    color: inherit !important;
}
body:not(.portal-profile-page) footer.site-footer .site-footer__brand h2 { color: #223236 !important; }
body:not(.portal-profile-page) footer.site-footer .site-footer__brand p { color: #6f7774 !important; }
body:not(.portal-profile-page) footer.site-footer .site-footer__links h3,
body:not(.portal-profile-page) footer.site-footer .site-footer__contact h3 { color: #1d8a73 !important; }
body:not(.portal-profile-page) footer.site-footer .site-footer__links a { color: #465250 !important; }
body:not(.portal-profile-page) footer.site-footer .site-footer__contact p { color: #5e6966 !important; }
body:not(.portal-profile-page) footer.site-footer .site-footer__contact i { color: #f28a7f !important; }
body:not(.portal-profile-page) footer.site-footer .site-footer__bottom {
    background: rgba(255,255,255,.24) !important;
    border-top: 1px solid rgba(84, 201, 181, .10) !important;
}
body:not(.portal-profile-page) footer.site-footer .site-footer__bottom p { color: #79827f !important; }
body:not(.portal-profile-page) footer.site-footer .site-footer__bottom a {
    background: #ffffff !important;
    color: #1f8a72 !important;
}


/* Footer global: disamakan 1:1 dengan footer Portal Profil PPDB */
footer.portal-footer.school-shared-footer {
    margin: 28px auto 24px !important;
    width: min(1180px, calc(100% - 32px)) !important;
    background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(246,252,249,.97)) !important;
    border: 1px solid rgba(84,201,181,.14) !important;
    border-radius: 30px !important;
    box-shadow: 0 18px 46px rgba(53,81,74,.08) !important;
    padding: 0 !important;
    padding-bottom: 0 !important;
    color: #303238 !important;
    overflow: hidden !important;
}
footer.portal-footer.school-shared-footer::before { display: none !important; }
footer.portal-footer.school-shared-footer .portal-footer-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1.3fr) .8fr 1fr !important;
    gap: 24px !important;
    padding: 24px 26px 19px !important;
}
footer.portal-footer.school-shared-footer .footer-brand {
    display: flex !important;
    align-items: flex-start !important;
    gap: 13px !important;
}
footer.portal-footer.school-shared-footer .footer-logo {
    width: 56px !important;
    height: 56px !important;
    object-fit: contain !important;
    flex: none !important;
    filter: drop-shadow(0 8px 16px rgba(38,98,88,.12)) !important;
    background: transparent !important;
}
footer.portal-footer.school-shared-footer .footer-brand h2 {
    margin: 0 0 7px !important;
    font-size: 19px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    color: #26313a !important;
}
footer.portal-footer.school-shared-footer .footer-brand p,
footer.portal-footer.school-shared-footer .footer-contact p {
    margin: 0 !important;
    color: #68727a !important;
    font-size: 12px !important;
    line-height: 1.65 !important;
}
footer.portal-footer.school-shared-footer .footer-links h3,
footer.portal-footer.school-shared-footer .footer-contact h3 {
    margin: 0 0 10px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    color: #238b7b !important;
}
footer.portal-footer.school-shared-footer .footer-links {
    display: grid !important;
    align-content: start !important;
    gap: 8px !important;
}
footer.portal-footer.school-shared-footer .footer-links a {
    color: #425052 !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}
footer.portal-footer.school-shared-footer .footer-links a:hover { color: #238b7b !important; }
footer.portal-footer.school-shared-footer .footer-contact {
    display: grid !important;
    align-content: start !important;
    gap: 8px !important;
}
footer.portal-footer.school-shared-footer .footer-contact p {
    display: flex !important;
    align-items: flex-start !important;
    gap: 9px !important;
}
footer.portal-footer.school-shared-footer .footer-contact i {
    width: 16px !important;
    margin-top: 3px !important;
    color: #ff8075 !important;
    flex: none !important;
}
footer.portal-footer.school-shared-footer .footer-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 13px 26px 15px !important;
    border-top: 1px solid rgba(84,201,181,.12) !important;
    background: linear-gradient(90deg, rgba(84,201,181,.07), rgba(255,128,117,.06)) !important;
}
footer.portal-footer.school-shared-footer .footer-bottom p {
    margin: 0 !important;
    color: #66726d !important;
    font-size: 11px !important;
}
footer.portal-footer.school-shared-footer .footer-bottom a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #1f8a72 !important;
    text-decoration: none !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}
footer.portal-footer.school-shared-footer .footer-bottom a:hover { color: #11735e !important; }

@media (max-width: 920px) {
    footer.portal-footer.school-shared-footer .portal-footer-inner {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 21px 22px 17px !important;
    }
    footer.portal-footer.school-shared-footer .footer-bottom {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 12px 22px 14px !important;
    }
}
@media (max-width: 680px) {
    footer.portal-footer.school-shared-footer {
        width: min(100% - 20px, 1180px) !important;
        margin: 20px auto 18px !important;
        border-radius: 23px !important;
    }
    footer.portal-footer.school-shared-footer .portal-footer-inner {
        padding: 18px 17px 15px !important;
        gap: 14px !important;
    }
    footer.portal-footer.school-shared-footer .footer-logo {
        width: 48px !important;
        height: 48px !important;
    }
    footer.portal-footer.school-shared-footer .footer-brand h2 { font-size: 17px !important; }
    footer.portal-footer.school-shared-footer .footer-bottom { padding: 11px 17px 13px !important; }
}