/**
 * Sirajul Huda v1.0.10
 * Precision Theme Style layer.
 *
 * This file is intentionally loaded after all older stylesheets. Component
 * selectors are explicit so the administrator's chosen tokens always win over
 * legacy colour declarations without tinting photographs.
 */

/* Global labels, section headings, cards, links, and outline buttons. */
.theme-color-skin .eyebrow:not(.eyebrow-light) {
    color: var(--theme-eyebrow) !important;
}

.theme-color-skin .eyebrow::after {
    background: var(--theme-eyebrow-line) !important;
}

.theme-color-skin .section-title {
    color: var(--theme-section-title) !important;
}

.theme-color-skin .section-heading > p,
.theme-color-skin .section-lead {
    color: var(--theme-section-text) !important;
}

.theme-color-skin .news-card h2,
.theme-color-skin .news-card h3,
.theme-color-skin .news-card h2 a,
.theme-color-skin .news-card h3 a,
.theme-color-skin .unit-card h3,
.theme-color-skin .leader-card h3,
.theme-color-skin .listing-card h2,
.theme-color-skin .info-card h2,
.theme-color-skin .info-card h3,
.theme-color-skin .home-notice-panel h2,
.theme-color-skin .home-notice-panel h3 a {
    color: var(--theme-card-heading) !important;
}

.theme-color-skin .news-card p,
.theme-color-skin .news-card .news-meta,
.theme-color-skin .unit-card p,
.theme-color-skin .leader-card p,
.theme-color-skin .listing-card p,
.theme-color-skin .info-card p,
.theme-color-skin .home-notice-panel p,
.theme-color-skin .home-notice-panel time {
    color: var(--theme-card-text) !important;
}

.theme-color-skin .news-category,
.theme-color-skin .notice-category,
.theme-color-skin .article-category,
.theme-color-skin .news-card .news-category {
    color: var(--theme-category) !important;
}

.theme-color-skin .news-card .text-link,
.theme-color-skin .unit-card a:not(.btn),
.theme-color-skin .listing-card a:not(.btn),
.theme-color-skin .home-notice-panel a:not(.btn) {
    color: var(--theme-card-link) !important;
}

.theme-color-skin .news-card .text-link:hover,
.theme-color-skin .unit-card a:not(.btn):hover,
.theme-color-skin .listing-card a:not(.btn):hover,
.theme-color-skin .home-notice-panel a:not(.btn):hover {
    color: var(--theme-card-link-hover) !important;
}

.theme-color-skin .btn-outline-green {
    border-color: var(--theme-button-outline) !important;
    background: transparent !important;
    color: var(--theme-button-outline-text) !important;
}

.theme-color-skin .btn-outline-green:hover,
.theme-color-skin .btn-outline-green:focus-visible {
    border-color: var(--theme-button-outline-hover) !important;
    background: var(--theme-button-outline-hover) !important;
    color: var(--theme-button-outline-hover-text) !important;
}

/* 04 · Top Bar: every item uses an explicit foreground and hover token. */
.theme-color-skin .topbar,
.home-page.theme-color-skin .topbar {
    min-height: 42px;
    height: auto;
    border-bottom: 1px solid color-mix(in srgb, var(--theme-topbar-text) 20%, transparent);
    background: var(--theme-topbar) !important;
    color: var(--theme-topbar-text) !important;
}

.theme-color-skin .topbar .site-container,
.theme-color-skin .topbar-inner {
    min-height: 42px;
}

.theme-color-skin .topbar-contact,
.theme-color-skin .topbar-social,
.theme-color-skin .topbar-item,
.theme-color-skin .topbar-item span,
.theme-color-skin .topbar a,
.theme-color-skin .topbar button {
    color: var(--theme-topbar-text) !important;
    opacity: 1 !important;
}

.theme-color-skin .topbar-item,
.theme-color-skin .topbar-social a,
.theme-color-skin .topbar-social button {
    font-size: 11px;
    font-weight: 750;
}

.theme-color-skin .topbar i,
.theme-color-skin .topbar-item i,
.theme-color-skin .topbar-social i {
    color: var(--theme-topbar-accent) !important;
    opacity: 1 !important;
}

.theme-color-skin .topbar a:hover,
.theme-color-skin .topbar a:hover span,
.theme-color-skin .topbar a:hover i,
.theme-color-skin .topbar button:hover,
.theme-color-skin .topbar button:hover i {
    color: var(--theme-topbar-hover) !important;
}

/* 05 · Header and menu. */
.theme-color-skin:not(.home-page) .site-header,
.theme-color-skin .site-header.scrolled {
    background: var(--theme-header) !important;
}

.theme-color-skin:not(.home-page) .site-header .navbar,
.theme-color-skin .site-header.scrolled .navbar,
.theme-color-skin .dropdown-menu,
.theme-color-skin .offcanvas {
    background: var(--theme-navigation) !important;
}

.theme-color-skin:not(.home-page) .navbar-brand strong,
.theme-color-skin:not(.home-page) .navbar-brand small,
.theme-color-skin .site-header.scrolled .navbar-brand strong,
.theme-color-skin .site-header.scrolled .navbar-brand small,
.theme-color-skin #mobileMenu .navbar-brand strong,
.theme-color-skin #mobileMenu .navbar-brand small {
    color: var(--theme-header-text) !important;
}

.theme-color-skin:not(.home-page) .navbar-nav .nav-link,
.theme-color-skin .site-header.scrolled .navbar-nav .nav-link,
.theme-color-skin .dropdown-item,
.theme-color-skin .mobile-nav-link,
.theme-color-skin .mobile-submenu a {
    color: var(--theme-navigation-text) !important;
}

.theme-color-skin .navbar-nav .nav-link:hover,
.theme-color-skin .navbar-nav .nav-link:focus-visible,
.theme-color-skin .dropdown-item:hover,
.theme-color-skin .mobile-nav-link:hover,
.theme-color-skin .mobile-submenu a:hover {
    color: var(--theme-navigation-hover) !important;
}

.theme-color-skin .navbar-nav .nav-link.active,
.theme-color-skin .navbar-nav .nav-link[aria-current="page"] {
    color: var(--theme-navigation-active) !important;
}

/* 06 · Hero label and text no longer inherit a global eyebrow colour. */
.theme-color-skin .hero-copy .eyebrow,
.theme-color-skin .hero-copy .eyebrow-light,
.theme-color-skin .hero-copy .eyebrow i {
    color: var(--theme-hero-label) !important;
}

.theme-color-skin .hero-copy .eyebrow::after {
    background: var(--theme-hero-label-line) !important;
}

.theme-color-skin .hero-copy h1,
.theme-color-skin .hero-copy .hero-lead,
.theme-color-skin .hero-copy .hero-trust,
.theme-color-skin .hero-copy .hero-trust span {
    color: var(--theme-hero-text) !important;
}

/* 07 · Testimonial: spotlight uses testimonial tokens, never Artikel Khusus. */
.theme-color-skin .testimonials-section .testimonial-modern {
    border-color: var(--theme-border) !important;
    background: var(--theme-testimonial-surface) !important;
    color: var(--theme-testimonial-text) !important;
}

.theme-color-skin .testimonials-section .testimonial-modern > p {
    color: var(--theme-testimonial-text) !important;
    opacity: 1 !important;
}

.theme-color-skin .testimonials-section .testimonial-modern footer strong,
.theme-color-skin .testimonials-section .testimonial-modern footer small {
    color: var(--theme-testimonial-meta) !important;
    opacity: 1 !important;
}

.theme-color-skin .testimonials-section .testimonial-modern .testimonial-quote,
.theme-color-skin .testimonials-section .testimonial-modern .testimonial-verified {
    color: var(--theme-testimonial-icon) !important;
    opacity: 1 !important;
}

.theme-color-skin .testimonials-style-spotlight .testimonial-featured {
    border-color: color-mix(in srgb, var(--theme-testimonial-featured-text) 20%, transparent) !important;
    background: var(--theme-testimonial-featured-surface) !important;
    color: var(--theme-testimonial-featured-text) !important;
}

.theme-color-skin .testimonials-style-spotlight .testimonial-featured > p,
.theme-color-skin .testimonials-style-spotlight .testimonial-featured footer strong,
.theme-color-skin .testimonials-style-spotlight .testimonial-featured footer small {
    color: var(--theme-testimonial-featured-text) !important;
    opacity: 1 !important;
}

/* 08 · Artikel Khusus: precise foreground layers and proportionate type. */
.theme-color-skin .special-articles-section {
    background:
        radial-gradient(circle at 88% 0, color-mix(in srgb, var(--theme-special-category) 15%, transparent), transparent 34%),
        linear-gradient(
            135deg,
            var(--theme-special-surface),
            color-mix(in srgb, var(--theme-special-surface) 88%, var(--theme-hero-overlay-end))
        ) !important;
    color: var(--theme-special-text) !important;
}

.theme-color-skin .special-articles-section .section-heading {
    margin-bottom: clamp(28px, 4vw, 44px);
}

.theme-color-skin .special-articles-section .eyebrow {
    margin-bottom: 8px;
    color: var(--theme-special-category) !important;
    font-size: 10px;
    letter-spacing: .11em;
}

.theme-color-skin .special-articles-section .eyebrow::after {
    width: 26px;
    background: var(--theme-special-category) !important;
}

.theme-color-skin .special-articles-section .section-title {
    margin-bottom: 12px;
    color: var(--theme-special-heading) !important;
    font-size: clamp(27px, 2.7vw, 40px);
    line-height: 1.12;
}

.theme-color-skin .special-articles-section .section-heading p {
    max-width: 720px;
    color: var(--theme-special-intro) !important;
    font-size: clamp(14px, 1.2vw, 16px);
}

.theme-color-skin .special-articles-section .special-article-card {
    border-color: color-mix(in srgb, var(--theme-special-card-text) 20%, transparent) !important;
    background: var(--theme-special-card-surface) !important;
    color: var(--theme-special-card-text) !important;
}

.theme-color-skin .special-articles-section .special-article-copy h3,
.theme-color-skin .special-articles-section .special-article-copy h3 a {
    color: var(--theme-special-card-text) !important;
}

.theme-color-skin .special-articles-section .special-article-copy h3 {
    font-size: clamp(18px, 1.65vw, 23px);
    line-height: 1.3;
}

.theme-color-skin .special-articles-section .special-article-featured .special-article-copy h3 {
    font-size: clamp(24px, 2.5vw, 36px);
    line-height: 1.18;
}

.theme-color-skin .special-articles-section .special-article-copy p {
    color: var(--theme-special-card-text) !important;
    font-size: 14px;
    opacity: .88;
}

.theme-color-skin .special-articles-section .special-article-copy > span {
    color: var(--theme-special-category) !important;
}

.theme-color-skin .special-articles-section .special-article-copy > div,
.theme-color-skin .special-articles-section .special-article-copy > div time,
.theme-color-skin .special-articles-section .special-article-copy > div a {
    color: var(--theme-special-link) !important;
}

.theme-color-skin .special-articles-section .special-article-copy > div a:hover {
    color: var(--theme-special-link-hover) !important;
}

/* 09 · PPDB: the WhatsApp outline has independent readable states. */
.theme-color-skin .ppdb-banner {
    background:
        radial-gradient(circle at 88% 14%, color-mix(in srgb, var(--theme-ppdb-accent) 22%, transparent), transparent 29%),
        linear-gradient(120deg, var(--theme-ppdb-start), var(--theme-ppdb-end)) !important;
    color: var(--theme-ppdb-text) !important;
}

.theme-color-skin .ppdb-banner .ppdb-copy,
.theme-color-skin .ppdb-banner .ppdb-copy h2,
.theme-color-skin .ppdb-banner .ppdb-copy > p,
.theme-color-skin .ppdb-banner .ppdb-levels,
.theme-color-skin .ppdb-banner .ppdb-levels span {
    color: var(--theme-ppdb-text) !important;
}

.theme-color-skin .ppdb-banner .ppdb-copy .kicker,
.theme-color-skin .ppdb-banner .ppdb-levels i {
    color: var(--theme-ppdb-accent) !important;
}

.theme-color-skin .ppdb-banner .ppdb-primary-button {
    border-color: var(--theme-ppdb-button) !important;
    background: var(--theme-ppdb-button) !important;
    color: var(--theme-ppdb-button-text) !important;
}

.theme-color-skin .ppdb-banner .ppdb-primary-button:hover,
.theme-color-skin .ppdb-banner .ppdb-primary-button:focus-visible {
    border-color: var(--theme-ppdb-button-hover) !important;
    background: var(--theme-ppdb-button-hover) !important;
    color: var(--theme-ppdb-button-text) !important;
}

.theme-color-skin .ppdb-banner .ppdb-whatsapp-button,
.theme-color-skin .ppdb-banner .ppdb-brochure-button {
    border-color: var(--theme-ppdb-outline) !important;
    background: transparent !important;
    color: var(--theme-ppdb-outline-text) !important;
}

.theme-color-skin .ppdb-banner .ppdb-whatsapp-button i,
.theme-color-skin .ppdb-banner .ppdb-brochure-button i {
    color: inherit !important;
}

.theme-color-skin .ppdb-banner .ppdb-whatsapp-button:hover,
.theme-color-skin .ppdb-banner .ppdb-whatsapp-button:focus-visible,
.theme-color-skin .ppdb-banner .ppdb-brochure-button:hover,
.theme-color-skin .ppdb-banner .ppdb-brochure-button:focus-visible {
    border-color: var(--theme-ppdb-outline-hover) !important;
    background: var(--theme-ppdb-outline-hover) !important;
    color: var(--theme-ppdb-outline-hover-text) !important;
}

/* 10 · Footer: title, copy, links, hover, icons, fields, and copyright. */
.theme-color-skin .site-footer {
    background: var(--theme-footer) !important;
    color: var(--theme-footer-text) !important;
}

.theme-color-skin .site-footer .footer-overlay {
    background:
        radial-gradient(circle at 12% 0, color-mix(in srgb, var(--theme-footer-icon) 12%, transparent), transparent 31%),
        linear-gradient(
            105deg,
            color-mix(in srgb, var(--theme-footer) 97%, #000000),
            color-mix(in srgb, var(--theme-footer) 91%, var(--theme-hero-overlay-end))
        ) !important;
}

.theme-color-skin .site-footer .footer-title,
.theme-color-skin .site-footer .footer-brand strong {
    color: var(--theme-footer-heading) !important;
    opacity: 1 !important;
}

.theme-color-skin .site-footer .footer-brand span,
.theme-color-skin .site-footer .footer-address,
.theme-color-skin .site-footer .footer-contact li,
.theme-color-skin .site-footer .footer-contact li > span {
    color: var(--theme-footer-text) !important;
    opacity: 1 !important;
}

.theme-color-skin .site-footer .footer-links a,
.theme-color-skin .site-footer .footer-contact a {
    color: var(--theme-footer-link) !important;
    opacity: 1 !important;
}

.theme-color-skin .site-footer .footer-links a:hover,
.theme-color-skin .site-footer .footer-links a:focus-visible,
.theme-color-skin .site-footer .footer-contact a:hover,
.theme-color-skin .site-footer .footer-contact a:focus-visible {
    color: var(--theme-footer-link-hover) !important;
}

.theme-color-skin .site-footer .footer-title::before,
.theme-color-skin .site-footer .footer-contact i {
    background-color: var(--theme-footer-icon) !important;
    color: var(--theme-footer-icon) !important;
}

.theme-color-skin .site-footer .footer-bottom {
    border-top-color: var(--theme-footer-border) !important;
    color: var(--theme-footer-muted) !important;
}

.theme-color-skin .site-footer .footer-bottom p,
.theme-color-skin .site-footer .footer-brand span span {
    color: var(--theme-footer-muted) !important;
    opacity: 1 !important;
}

.theme-color-skin .site-footer .social-links a {
    border-color: var(--theme-footer-border) !important;
    background: var(--theme-footer-social) !important;
    color: var(--theme-footer-social-text) !important;
}

.theme-color-skin .site-footer .social-links a:hover,
.theme-color-skin .site-footer .social-links a:focus-visible {
    border-color: var(--theme-footer-link-hover) !important;
    color: var(--theme-footer-link-hover) !important;
}

.theme-color-skin .site-footer .newsletter-form input {
    border-color: var(--theme-footer-border) !important;
    background: var(--theme-footer-input) !important;
    color: var(--theme-footer-input-text) !important;
}

.theme-color-skin .site-footer .newsletter-form input::placeholder {
    color: var(--theme-footer-input-text) !important;
    opacity: .68 !important;
}

/* Images remain natural regardless of the active skin. */
.theme-color-skin img,
.theme-color-skin picture,
.theme-color-skin .news-image,
.theme-color-skin .special-article-image,
.theme-color-skin .testimonial-modern img,
.theme-color-skin .ppdb-visual img {
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    mix-blend-mode: normal !important;
}

@media (max-width: 991.98px) {
    .home-page.theme-color-skin .site-header:not(.scrolled) {
        top: 0;
    }

    .theme-color-skin .special-articles-section .special-article-featured .special-article-copy h3 {
        font-size: clamp(23px, 4vw, 32px);
    }
}

@media (min-width: 992px) {
    .home-page.theme-color-skin .site-header:not(.scrolled) {
        top: 42px;
    }
}

@media (max-width: 767.98px) {
    .theme-color-skin .special-articles-section .section-title {
        font-size: 29px;
    }

    .theme-color-skin .special-articles-section .special-article-copy h3,
    .theme-color-skin .special-articles-section .special-article-featured .special-article-copy h3 {
        font-size: 21px;
    }
}

@media (forced-colors: active) {
    .theme-color-skin .topbar,
    .theme-color-skin .special-articles-section,
    .theme-color-skin .ppdb-banner,
    .theme-color-skin .site-footer {
        forced-color-adjust: auto;
    }
}