/* Lazy section reveal */
.lazy-section { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; will-change: opacity, transform; }
.lazy-section.visible { opacity: 1; transform: none; }
@supports (content-visibility: auto) {
    .lazy-section.lazy-render {
        content-visibility: auto;
        contain-intrinsic-size: 1px 720px;
    }
}

/* GLOBAL ICON FIX FOR FONT AWESOME 6 FREE */
i, .fas, .far, .fal, .fa, .fa-solid, .fa-regular,
i:before, .fas:before, .far:before, .fal:before, .fa:before, .fa-solid:before, .fa-regular:before,
i:after, .fas:after, .far:after, .fal:after, .fa:after, .fa-solid:after, .fa-regular:after,
.scroll-top:after {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    display: inline-block;
    font-style: normal;
}
.fab, .fa-brands, .fab:before, .fa-brands:before, .fab:after, .fa-brands:after {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
    font-style: normal;
}

/* Remove global link underlines (Bootstrap 5 default override) */
a, a:hover, a:focus, a:active { text-decoration: none !important; }

/* Fix white-background PNG shape artifacts */
.shape-mockup img,
.hero-shape img,
.event-card-shape img,
.about-shape1 img,
.event-shape1 img,
.why-shape-1 img,
.why-shape-3 img,
.testi-bg-shape1 img,
.testi-bg-shape2 img,
.cta_1_shape1 img,
.sponsor-logo img,
.partner-logo img,
.brand-logo img {
    mix-blend-mode: multiply;
    background: transparent !important;
    pointer-events: none;
    user-select: none;
    display: block;
}
/* Dark-background sections */
.testi-area-1 .shape-mockup img,
.footer-wrapper .shape-mockup img,
.breadcumb-wrapper .shape-mockup img,
[data-overlay] .shape-mockup img,
.bg-title .shape-mockup img,
.bg-primary .shape-mockup img {
    mix-blend-mode: screen;
}

/* FOOTER FORCE DARK */
#pf-footer,
footer.footer-wrapper,
.footer-wrapper.footer-layout1,
.footer-layout1,
.footer-wrapper,
.pf-footer-main {
    background-color: #0f1b31 !important;
    background: #0f1b31 !important;
    color: #b3c1d3 !important;
    overflow: visible !important;
}
#pf-footer *,
.footer-wrapper *,
.pf-footer-main * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
#pf-footer .footer-wrap,
.footer-layout1 .footer-wrap,
.footer-wrap {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
}
.footer-wrapper .widget_title,
.footer-wrapper .footer-widget .widget_title { color: #fff !important; }
.footer-wrapper a { color: #b3c1d3; }
.footer-wrapper a:hover { color: #fff; }
.footer-wrapper p, .footer-wrapper .about-text { color: #b3c1d3 !important; }
.footer-wrapper .copyright-text { color: #b3c1d3 !important; }

/* Breadcrumb Hero */
.breadcumb-wrapper { padding: 120px 0 60px !important; position: relative; overflow: hidden; }
.breadcumb-shape { display: none !important; }
.breadcumb-title { margin-bottom: 20px !important; letter-spacing: -1px; }
.breadcumb-menu { margin-top: 15px !important; padding: 12px 30px !important; background: rgba(255,255,255,0.1); backdrop-filter: blur(15px); display: inline-flex !important; border-radius: 50px; border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 8px 32px rgba(0,0,0,0.1); }

/* Breadcrumb decorative orbs */
.breadcumb-orb { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
.breadcumb-orb-right { width: 180px; height: 180px; right: -40px; bottom: 80px; background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%); border: 1px solid rgba(255,255,255,0.1); animation: jumpAni 7s linear infinite; }
.breadcumb-orb-left { width: 80px; height: 80px; left: 40px; bottom: 100px; background: radial-gradient(circle, rgba(99,179,237,0.15) 0%, transparent 70%); border: 1px solid rgba(99,179,237,0.15); animation: jumpReverseAni 7s linear infinite; }

/* Navbar */
.menu-area { padding: 8px 0 !important; transition: all 0.3s ease; }
.sticky-wrapper.sticky .menu-area { padding: 8px 0 !important; }
.main-menu ul li a { margin: 0 10px !important; }
.header-button { display: flex; align-items: center; gap: 15px; }

/* Section Spacing */
.space-top { padding-top: 100px !important; }
.space-extra2-bottom { padding-bottom: 100px !important; }

@media (max-width: 991px) {
    .breadcumb-wrapper { padding: 80px 0 40px !important; }
    .space-top { padding-top: 60px !important; }
}

/* Hero Slider */
.swiper-slide { opacity: 1 !important; visibility: visible !important; }
.swiper-fade .swiper-slide { pointer-events: none !important; opacity: 0 !important; transition-property: opacity !important; }
.swiper-fade .swiper-slide-active { pointer-events: auto !important; opacity: 1 !important; }
.th-hero-wrapper, .hero-wrapper { position: relative; overflow: hidden; min-height: 600px; }
.th-hero-wrapper .swiper-slide, .th-hero-wrapper .th-slider .swiper-slide { height: 700px; min-height: 600px; position: relative; overflow: hidden; }
.background-image { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }
.hero-overlay { position: absolute; inset: 0; background: rgba(0,16,50,.65); z-index: 1; pointer-events: none; }
.th-hero-wrapper .container, .hero-wrapper .container { position: relative; z-index: 3; }
@keyframes kenBurns { 0% { transform: scale(1); } 100% { transform: scale(1.15); } }
.th-hero-wrapper .background-image, .hero-wrapper .background-image { animation: kenBurns 20s ease-in-out infinite alternate !important; }
.hero-badge { display: inline-flex; align-items: center; padding: 8px 20px; border-radius: 100px; font-size: 13px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 24px; backdrop-filter: blur(12px); border: 1.5px solid rgba(255,255,255,.25); }
@media (max-width: 767px) {
    .th-hero-wrapper .swiper-slide { height: 80vh; min-height: 500px; }
}

/* ─── GLOBAL RESPONSIVE FIXES ─────────────────────────── */
/* Prevent horizontal overflow on all pages */
html, body { overflow-x: hidden !important; max-width: 100vw; }
*, *::before, *::after { box-sizing: border-box; }

/* Images always responsive */
img { max-width: 100%; height: auto; }

/* Tables responsive */
table { max-width: 100%; }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* FAB buttons — compact on mobile */
@media (max-width: 575.98px) {
    .dark-mode-fab { bottom: 4.5rem !important; right: 1rem !important; width: 38px !important; height: 38px !important; font-size: 1rem !important; }
    .pwa-install-fab { bottom: 7.5rem !important; right: 1rem !important; height: 38px !important; font-size: .72rem !important; }
    .scroll-top { right: 1rem !important; bottom: 1rem !important; }
}

/* Prevent fixed-width elements from breaking layout */
@media (max-width: 575.98px) {
    /* Container padding */
    .container, .container-fluid { padding-left: 16px !important; padding-right: 16px !important; }

    /* Section padding reduction */
    section { padding-left: 0 !important; padding-right: 0 !important; }

    /* Hero sections */
    .nova-hero { padding: 120px 0 200px !important; }
    .nova-h1 { font-size: 2.2rem !important; }
    .nova-sub { font-size: 1rem !important; }

    /* Events hero */
    section[style*="min-height:480px"] { min-height: 400px !important; }

    /* News hero */
    section[style*="min-height:500px"] { min-height: 380px !important; }

    /* Contact form */
    .contact-form-container { padding: 20px !important; }
    .section-title, .form-title { font-size: 22px !important; }

    /* CTA section */
    .cta-title { font-size: 24px !important; }
    .cta-section { padding: 60px 0 !important; }

    /* Company profile hero */
    .cp-hero-content h1 { font-size: 2rem !important; }

    /* Grids: force single column on very small screens */
    .row.g-4 > [class*="col-lg-3"],
    .row.g-4 > [class*="col-md-6"] { width: 100% !important; }

    /* Filter drawer */
    #filterDrawer { width: 100% !important; max-width: 100vw !important; }

    /* Quick nav sidebar */
    #cpNav { display: none !important; }

    /* Scroll progress bars */
    #evProg, #newsProg, #cpProg, #nova-progress { height: 2px !important; }
}

@media (max-width: 767.98px) {
    /* Reduce hero padding */
    .nova-hero { padding: 130px 0 220px !important; }

    /* Events hero stats */
    section[style*="padding-top:110px"] { padding-top: 80px !important; }
    section[style*="padding-bottom:90px"] { padding-bottom: 60px !important; }

    /* News hero */
    section[style*="padding-top:120px"] { padding-top: 90px !important; }
    section[style*="padding-bottom:100px"] { padding-bottom: 70px !important; }

    /* Company profile sections */
    section[style*="padding:90px 0"] { padding: 60px 0 !important; }

    /* Contact cards */
    .contact-card { padding: 20px !important; }
    .card-icon { width: 55px !important; height: 55px !important; font-size: 22px !important; }

    /* Map header */
    .nexus-map-header { flex-direction: column !important; align-items: flex-start !important; }
    .nmap-open-btn { width: 100% !important; text-align: center !important; }

    /* Nova masonry: single column */
    .nova-masonry { column-count: 1 !important; }

    /* Sidebar sticky: disable on mobile */
    .sticky-top { position: relative !important; top: auto !important; }

    /* Filter drawer */
    #filterDrawer { width: 92vw !important; }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    /* Tablet: 2 columns for event grid */
    .col-xl-3 { width: 50% !important; }

    /* Company profile tujuan: 2 cols */
    .col-lg-3.col-md-6 { width: 50% !important; }
}

/* Ensure all inline-style sections don't overflow */
[style*="min-height"] { min-height: auto !important; }
@media (min-width: 768px) {
    [style*="min-height:480px"] { min-height: 480px !important; }
    [style*="min-height:500px"] { min-height: 500px !important; }
    [style*="min-height:600px"] { min-height: 600px !important; }
}

/* Pagination responsive */
.pagination { flex-wrap: wrap; gap: 4px; }

/* Search box popup responsive */
.popup-search-box { width: 100% !important; max-width: 600px; left: 50% !important; transform: translateX(-50%) !important; }
@media (max-width: 575.98px) {
    .popup-search-box { max-width: 95vw !important; }
}

/* ─── ADDITIONAL GLOBAL FIXES ─────────────────────────── */
/* Native line-clamp for speed (instead of JS-based ellipsis) */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Force font sizes on mobile to prevent overflow */
@media (max-width: 480px) {
    h1 { font-size: 1.8rem !important; }
    h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.3rem !important; }
    body { font-size: 14px !important; }
}

/* Fix for Grid Layouts on Mobile */
@media (max-width: 575.98px) {
    .row { --bs-gutter-x: 1rem; }
    .g-4, .gy-4 { --bs-gutter-y: 1rem !important; }
    
    /* Ensure flex containers stack */
    .d-flex.align-items-center.justify-content-between.flex-wrap {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }
}

/* ─── PERFORMANCE: CONTENT VISIBILITY ────────────────── */
/* Better rendering performance for long pages */
.lazy-render {
    content-visibility: auto;
    contain-intrinsic-size: 1px 500px;
}

/* Prevent uninitialized carousel flash (raw stacked slides) */
.th-carousel:not(.slick-initialized) {
    overflow: hidden;
}
.th-carousel:not(.slick-initialized) > *:not(:first-child) {
    display: none !important;
}
.swiper:not(.swiper-initialized) .swiper-slide:not(:first-child) {
    display: none !important;
}

/* Rounded corner hardening across frontend surfaces */
:where(
    .widget,
    .course-single,
    .nexus-detail-wrapper,
    .nexus-tab-content,
    .nexus-help-widget,
    .instructor-box-nexus,
    .partner-card-nexus,
    .course-box-nexus,
    .premium-featured-card,
    .ultra-news-card,
    .nexus-news-card,
    .news-cat-widget,
    .rnews-widget,
    .contact-form-container,
    .nexus-map-wrapper,
    .quick-nav-container,
    .category-card,
    .wcu-box,
    .overlay-blur,
    .filter-glass-bar,
    .empty-state,
    .glass-effect
) {
    isolation: isolate;
    background-clip: padding-box;
    -webkit-background-clip: padding-box;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

:where(
    .course-single,
    .nexus-detail-wrapper,
    .nexus-tab-content,
    .nexus-help-widget,
    .instructor-box-nexus,
    .partner-card-nexus,
    .course-box-nexus,
    .premium-featured-card,
    .ultra-news-card,
    .nexus-news-card,
    .news-cat-widget,
    .rnews-widget,
    .contact-form-container,
    .nexus-map-wrapper,
    .quick-nav-container,
    .category-card,
    .wcu-box,
    .filter-glass-bar,
    .empty-state
) {
    overflow: clip;
}

@supports not (overflow: clip) {
    :where(
        .course-single,
        .nexus-detail-wrapper,
        .nexus-tab-content,
        .nexus-help-widget,
        .instructor-box-nexus,
        .partner-card-nexus,
        .course-box-nexus,
        .premium-featured-card,
        .ultra-news-card,
        .nexus-news-card,
        .news-cat-widget,
        .rnews-widget,
        .contact-form-container,
        .nexus-map-wrapper,
        .quick-nav-container,
        .category-card,
        .wcu-box,
        .filter-glass-bar,
        .empty-state
    ) {
        overflow: hidden;
    }
}

:where(
    .widget,
    .course-single,
    .nexus-detail-wrapper,
    .nexus-tab-content,
    .nexus-help-widget,
    .instructor-box-nexus,
    .partner-card-nexus,
    .course-box-nexus,
    .premium-featured-card,
    .ultra-news-card,
    .nexus-news-card,
    .news-cat-widget,
    .rnews-widget,
    .contact-form-container,
    .nexus-map-wrapper,
    .quick-nav-container,
    .category-card,
    .wcu-box,
    .overlay-blur,
    .filter-glass-bar,
    .empty-state,
    .glass-effect
)::before,
:where(
    .widget,
    .course-single,
    .nexus-detail-wrapper,
    .nexus-tab-content,
    .nexus-help-widget,
    .instructor-box-nexus,
    .partner-card-nexus,
    .course-box-nexus,
    .premium-featured-card,
    .ultra-news-card,
    .nexus-news-card,
    .news-cat-widget,
    .rnews-widget,
    .contact-form-container,
    .nexus-map-wrapper,
    .quick-nav-container,
    .category-card,
    .wcu-box,
    .overlay-blur,
    .filter-glass-bar,
    .empty-state,
    .glass-effect
)::after {
    border-radius: inherit;
}

/* Respect Bootstrap rounded utility on widgets (avoid accidental squarer corners) */
.widget.rounded-3 { border-radius: var(--bs-border-radius-lg, 0.5rem) !important; }
.widget.rounded-4 { border-radius: var(--bs-border-radius-xl, 1rem) !important; }
.widget.rounded-5 { border-radius: var(--bs-border-radius-xxl, 2rem) !important; }


/* ── Top Header Responsive Fix ─────────────────────────────────────────── */
.header-top { overflow: hidden; }
.header-top .header-links ul { flex-wrap: nowrap !important; }
.header-top .header-links a { color: inherit; text-decoration: none; }
.header-top .header-links a:hover { opacity: .8; }

/* Mobile: kompres top header agar tidak overflow */
@media (max-width: 575.98px) {
    .header-top { padding: 4px 0 !important; }
    .header-top .container { padding-left: 12px !important; padding-right: 12px !important; }
    .header-top .header-links ul { gap: 8px !important; }
    .header-top .social-title { display: none !important; }
}

/* Tablet: tampilkan email juga */
@media (min-width: 576px) and (max-width: 991.98px) {
    .header-top .header-links ul { gap: 10px !important; }
}