/* ==========================================================================
   PBPI KABUPATEN BOGOR - DEDICATED MOBILE VIEW OPTIMIZATION LAYER
   Applies exclusively on mobile handheld devices (max-width: 767.98px).
   Optimizes cards, typography, paddings, icons, and components so they
   remain compact, proportionate, neat, simple, and elegant across all phones.
   ========================================================================== */

@media (max-width: 767.98px) {
    /* --------------------------------------------------------------------------
       1. GLOBAL RESET & BASE MOBILE CONSTRAINTS
       -------------------------------------------------------------------------- */
    html, body {
        max-width: 100vw !important;
        overflow-x: clip !important;
    }

    body {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
    }

    /* Container Spacing */
    .container,
    .container-fluid,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    #main,
    .page-content,
    .content-wrapper {
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-top: 10px !important;
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 14px)) !important; /* Jarak aman di atas bottom floating dock */
    }

    /* Hide desktop / tablet sidebar edge toggle on mobile view */
    .sidebar-edge-toggle,
    #btnSidebarTrigger,
    #app.sidebar-open .sidebar-edge-toggle,
    body.sidebar-open .sidebar-edge-toggle {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        opacity: 0 !important;
    }

    /* --------------------------------------------------------------------------
       2. TYPOGRAPHY SCALING (PREVENTS OVERSIZED FONTS ON MOBILE)
       -------------------------------------------------------------------------- */
    h1, .h1, 
    .display-1, .display-2, .display-3, .display-4, .display-5 {
        font-size: clamp(1.35rem, 5.8vw, 1.7rem) !important;
        line-height: 1.25 !important;
        letter-spacing: -0.015em !important;
    }

    h2, .h2, .display-6 {
        font-size: clamp(1.18rem, 4.8vw, 1.4rem) !important;
        line-height: 1.3 !important;
    }

    h3, .h3 {
        font-size: clamp(1.05rem, 4.2vw, 1.22rem) !important;
        line-height: 1.35 !important;
    }

    h4, .h4 {
        font-size: clamp(0.95rem, 3.8vw, 1.1rem) !important;
        line-height: 1.4 !important;
    }

    h5, .h5, 
    .card-title,
    .page-heading h3 {
        font-size: clamp(0.88rem, 3.4vw, 1rem) !important;
        line-height: 1.4 !important;
    }

    h6, .h6 {
        font-size: clamp(0.8rem, 3vw, 0.9rem) !important;
    }

    .lead {
        font-size: 0.88rem !important;
        line-height: 1.55 !important;
    }

    p {
        font-size: 0.84rem !important;
        line-height: 1.52 !important;
        margin-bottom: 0.65rem !important;
    }

    small, .small, .text-muted, .text-secondary {
        font-size: 0.80rem !important;
        color: #475569 !important;
        opacity: 1 !important;
    }

    /* Section Headings */
    .section-title,
    .cp-section-title {
        font-size: clamp(1.2rem, 5vw, 1.45rem) !important;
        line-height: 1.28 !important;
        margin-bottom: 0.35rem !important;
    }

    .section-subtitle,
    .cp-section-subtitle {
        font-size: 0.82rem !important;
        line-height: 1.45 !important;
    }

    /* --------------------------------------------------------------------------
       3. CARDS & GLASS CONTAINERS (PERSIS FOTO 2: APPLE iOS "CLEAR" FROSTED GLASS)
       Spesifikasi Visual Persis Foto 2:
       - Warna & Opacity: Translucent glass bening kristal (rgba(255, 255, 255, 0.12) ~ 0.03)
       - High Optical Blur: blur(28px) saturate(190%)
       - Luminous Rim: Border putih bercahaya (atas 0.65, samping 0.38, bawah 0.12)
       - Specular Highlight: inset 0 1.5px 1.5px rgba(255, 255, 255, 0.55)
       - Shadow Lembut: 0 16px 40px rgba(0, 0, 0, 0.38)
       - Sudut Lengkung: 26px Apple squircle radius
       -------------------------------------------------------------------------- */
    .card:not(#mobileNavCollapse *):not(.mobile-nav-card),
    .pbpi-glass-card,
    .pbpi-dashboard-header,
    .welcome-banner-card {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.006) 0%, rgba(255, 255, 255, 0.001) 100%) !important;
        backdrop-filter: blur(1px) saturate(115%) !important;
        -webkit-backdrop-filter: blur(1px) saturate(115%) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-top: 1.5px solid rgba(255, 255, 255, 0.28) !important;
        border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
        border-radius: 15px !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18), 
                    inset 0 1px 1px rgba(255, 255, 255, 0.2), 
                    inset 0 0 0 1px rgba(255, 255, 255, 0.02) !important;
        margin-bottom: 0.75rem !important;
        position: relative !important;
        overflow: hidden !important;
        color: #ffffff !important;
        transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .card:not(#mobileNavCollapse *):not(.mobile-nav-card):active,
    .pbpi-glass-card:active {
        transform: scale(0.988) !important;
    }

    .card:not(#mobileNavCollapse *):not(.mobile-nav-card) .card-body,
    .card:not(#mobileNavCollapse *):not(.mobile-nav-card) > .card-body {
        padding: 11px 13px !important;
        background: transparent !important;
    }

    .card:not(#mobileNavCollapse *):not(.mobile-nav-card) .card-header,
    .card:not(#mobileNavCollapse *):not(.mobile-nav-card) > .card-header {
        padding: 9px 13px !important;
        background: rgba(255, 255, 255, 0.02) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    .card:not(#mobileNavCollapse *):not(.mobile-nav-card) .card-footer,
    .card:not(#mobileNavCollapse *):not(.mobile-nav-card) > .card-footer {
        padding: 9px 13px !important;
        background: rgba(255, 255, 255, 0.015) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    /* Fintech Virtual Cards (Foto 1 Middle Deck -> Persis Kaca Bening Foto 2) */
    .pbpi-fintech-card,
    .pbpi-fintech-card.pbpi-card-sapphire,
    .pbpi-fintech-card.pbpi-card-crimson,
    .pbpi-fintech-card.pbpi-card-gold,
    .pbpi-fintech-card.pbpi-card-emerald,
    .user-stat-card,
    .metric-glass-card {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.006) 0%, rgba(255, 255, 255, 0.001) 100%) !important;
        backdrop-filter: blur(1px) saturate(115%) !important;
        -webkit-backdrop-filter: blur(1px) saturate(115%) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-top: 1.5px solid rgba(255, 255, 255, 0.28) !important;
        border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
        border-radius: 15px !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18), 
                    inset 0 1px 1px rgba(255, 255, 255, 0.2), 
                    inset 0 0 0 1px rgba(255, 255, 255, 0.02) !important;
        padding: 1rem 1rem !important;
        color: #ffffff !important;
    }

    .pbpi-fintech-card::before,
    .pbpi-fintech-card::after {
        display: none !important;
    }

    .pbpi-fintech-card .pbpi-card-label {
        color: rgba(255, 255, 255, 0.8) !important;
        font-size: 0.76rem !important;
        font-weight: 600 !important;
        letter-spacing: 0.02em !important;
    }

    .pbpi-fintech-card .pbpi-card-value {
        color: #ffffff !important;
        font-size: 1.4rem !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
    }

    .pbpi-fintech-card .pbpi-card-sub {
        color: rgba(255, 255, 255, 0.75) !important;
        font-size: 0.74rem !important;
    }

    .pbpi-card-icon-wrap,
    .user-stat-card .rounded-3 {
        width: 34px !important;
        height: 34px !important;
        font-size: 1rem !important;
    }

    /* Quick Actions Hub (Foto 1 Bottom Section -> Kaca Bening Foto 2) */
    .pbpi-quick-actions-card {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.006) 0%, rgba(255, 255, 255, 0.001) 100%) !important;
        backdrop-filter: blur(1px) saturate(115%) !important;
        -webkit-backdrop-filter: blur(1px) saturate(115%) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-top: 1.5px solid rgba(255, 255, 255, 0.28) !important;
        border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
        border-radius: 15px !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18), 
                    inset 0 1px 1px rgba(255, 255, 255, 0.2), 
                    inset 0 0 0 1px rgba(255, 255, 255, 0.02) !important;
        padding: 1.1rem 1rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* Universal Single-Row Horizontal Scrollable Tab Bar */
    :is(.nav-pills, .nav-tabs, #logoSettingsTab, .nav:not(.flex-column)) {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 6px !important;
        padding: 2px 2px 7px 2px !important;
        margin-bottom: 11px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    :is(.nav-pills, .nav-tabs, #logoSettingsTab, .nav:not(.flex-column))::-webkit-scrollbar {
        display: none !important;
    }
    :is(.nav-pills, .nav-tabs, #logoSettingsTab) .nav-item {
        flex: 0 0 auto !important;
        width: auto !important;
    }
    :is(.nav-pills, .nav-tabs, #logoSettingsTab) :is(.nav-link, button.nav-link) {
        white-space: nowrap !important;
        padding: 5px 12px !important;
        font-size: 0.74rem !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        border-radius: 999px !important;
        min-height: 31px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
    }

    .pbpi-action-grid,
    .pbpi-actions-grid {
        gap: 8px !important;
    }

    .pbpi-action-item {
        background: transparent !important;
        border: none !important;
        padding: 6px 4px !important;
        transition: transform 0.15s ease !important;
    }

    .pbpi-action-item:active {
        transform: scale(0.92) !important;
    }

    .pbpi-action-icon,
    .pbpi-action-pod {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.15rem !important;
        margin-bottom: 4px !important;
        border-radius: 14px !important;
        background: rgba(255, 255, 255, 0.006) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        backdrop-filter: blur(0.8px) !important;
        -webkit-backdrop-filter: blur(0.8px) !important;
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .pbpi-action-label {
        font-size: 0.72rem !important;
        color: rgba(255, 255, 255, 0.85) !important;
    }

    /* Feed Card Hub & Transaction Rows (Foto 2 Bottom Section) */
    .pbpi-feed-card {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.006) 0%, rgba(255, 255, 255, 0.001) 100%) !important;
        backdrop-filter: blur(1px) saturate(115%) !important;
        -webkit-backdrop-filter: blur(1px) saturate(115%) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-top: 1.5px solid rgba(255, 255, 255, 0.28) !important;
        border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
        border-radius: 26px !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18), 
                    inset 0 1px 1px rgba(255, 255, 255, 0.2), 
                    inset 0 0 0 1px rgba(255, 255, 255, 0.02) !important;
        padding: 1.25rem 1.15rem !important;
        margin-bottom: 0.85rem !important;
        color: #ffffff !important;
    }

    .pbpi-feed-row,
    .user-item-box {
        background: rgba(255, 255, 255, 0.004) !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        backdrop-filter: blur(0.8px) !important;
        -webkit-backdrop-filter: blur(0.8px) !important;
        border-radius: 18px !important;
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.04) !important;
        padding: 10px 12px !important;
        margin-bottom: 8px !important;
        color: #ffffff !important;
    }

    .pbpi-feed-row .d-flex.align-items-center {
        gap: 12px !important;
    }

    .pbpi-feed-avatar {
        width: 34px !important;
        height: 34px !important;
        font-size: 0.95rem !important;
    }

    .pbpi-feed-title,
    .user-item-box .fw-bold {
        font-size: 0.82rem !important;
    }

    .pbpi-feed-sub,
    .user-item-box .small {
        font-size: 0.7rem !important;
    }

    /* --------------------------------------------------------------------------
       4. KLASEMEN & LEADERBOARD (MOBILE-FIRST TUNING)
       -------------------------------------------------------------------------- */
    .klasemen-wrapper {
        padding-bottom: 100px !important;
    }

    .klasemen-header-card {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.006) 0%, rgba(255, 255, 255, 0.001) 100%) !important;
        backdrop-filter: blur(1px) saturate(115%) !important;
        -webkit-backdrop-filter: blur(1px) saturate(115%) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-top: 1.5px solid rgba(255, 255, 255, 0.28) !important;
        border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
        border-radius: 26px !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18), 
                    inset 0 1px 1px rgba(255, 255, 255, 0.2), 
                    inset 0 0 0 1px rgba(255, 255, 255, 0.02) !important;
        padding: 13px 15px !important;
        margin-bottom: 0.85rem !important;
        color: #ffffff !important;
    }

    .klasemen-header-card h4 {
        font-size: 1.15rem !important;
        color: #ffffff !important;
    }

    .klasemen-tabs-container {
        background: rgba(15, 23, 42, 0.6) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 999px !important;
        padding: 4px !important;
        margin-bottom: 0.85rem !important;
    }

    .tab-pill-btn {
        padding: 8px 12px !important;
        font-size: 0.78rem !important;
        color: #cbd5e1 !important;
    }

    .search-filter-card {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.006) 0%, rgba(255, 255, 255, 0.001) 100%) !important;
        backdrop-filter: blur(1px) saturate(115%) !important;
        -webkit-backdrop-filter: blur(1px) saturate(115%) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-top: 1.5px solid rgba(255, 255, 255, 0.28) !important;
        border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
        border-radius: 26px !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18), 
                    inset 0 1px 1px rgba(255, 255, 255, 0.2), 
                    inset 0 0 0 1px rgba(255, 255, 255, 0.02) !important;
        padding: 10px 12px !important;
        margin-bottom: 0.85rem !important;
        color: #ffffff !important;
    }

    .glass-search-input {
        padding: 8px 14px 8px 36px !important;
        font-size: 0.84rem !important;
    }

    /* Podium Section on Mobile */
    .podium-section {
        gap: 6px !important;
        margin-bottom: 1rem !important;
    }

    .podium-box {
        padding: 12px 6px !important;
        border-radius: 14px !important;
    }

    .podium-box-1 {
        padding-top: 16px !important;
        padding-bottom: 14px !important;
    }

    .podium-avatar-wrap {
        width: 38px !important;
        height: 38px !important;
        font-size: 0.95rem !important;
        margin-bottom: 6px !important;
    }

    .podium-box-1 .podium-avatar-wrap {
        width: 44px !important;
        height: 44px !important;
    }

    .podium-name {
        font-size: 0.76rem !important;
    }

    .podium-sub {
        font-size: 0.65rem !important;
        margin-bottom: 4px !important;
    }

    .podium-points-pill {
        padding: 2px 7px !important;
        font-size: 0.74rem !important;
    }

    /* Rank Card Items (iOS Clear Glass) */
    .rank-card-item {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.006) 0%, rgba(255, 255, 255, 0.001) 100%) !important;
        backdrop-filter: blur(1px) saturate(115%) !important;
        -webkit-backdrop-filter: blur(1px) saturate(115%) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-top: 1.5px solid rgba(255, 255, 255, 0.28) !important;
        border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
        border-radius: 20px !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18), 
                    inset 0 1px 1px rgba(255, 255, 255, 0.2), 
                    inset 0 0 0 1px rgba(255, 255, 255, 0.02) !important;
        padding: 10px 12px !important;
        gap: 10px !important;
        margin-bottom: 8px !important;
        color: #ffffff !important;
    }

    .rank-badge-number {
        width: 30px !important;
        height: 30px !important;
        border-radius: 9px !important;
        font-size: 0.85rem !important;
    }

    .rank-avatar-circle {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.95rem !important;
    }

    .rank-player-name {
        font-size: 0.84rem !important;
    }

    .rank-sub-meta {
        font-size: 0.68rem !important;
    }

    .rank-points-badge {
        padding: 4px 8px !important;
        border-radius: 9px !important;
    }

    .rank-points-badge .pts-val {
        font-size: 0.88rem !important;
    }

    .rank-points-badge .pts-unit {
        font-size: 0.6rem !important;
    }

    /* --------------------------------------------------------------------------
       5. JADWAL / TOURNAMENT MODULE MOBILE PRESENTATION
       -------------------------------------------------------------------------- */
    .tournament-hero-section {
        background: linear-gradient(135deg, #07090e 0%, #0b111e 50%, #0f172a 100%) !important;
        padding: calc(70px + env(safe-area-inset-top, 0px)) 14px 2.25rem !important;
        position: relative !important;
        overflow: hidden !important;
        text-align: center !important;
        color: #ffffff !important;
    }

    .tournament-hero-section::before {
        content: '' !important;
        position: absolute !important;
        inset: 0 !important;
        background: radial-gradient(circle at 80% 20%, rgba(71, 108, 181, 0.28), transparent 55%),
                    radial-gradient(circle at 20% 80%, rgba(255, 197, 21, 0.12), transparent 50%) !important;
        pointer-events: none !important;
    }

    .tournament-hero-section::after {
        content: '' !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 2px !important;
        background: linear-gradient(90deg, transparent 0%, rgba(201, 26, 36, 0.8) 35%, rgba(255, 197, 21, 0.9) 65%, transparent 100%) !important;
        pointer-events: none !important;
    }

    .tournament-hero-content {
        position: relative !important;
        z-index: 2 !important;
    }

    .tournament-main-title {
        color: #ffffff !important;
        font-family: 'Montserrat', sans-serif !important;
        font-size: clamp(1.45rem, 6.2vw, 1.85rem) !important;
        font-weight: 900 !important;
        letter-spacing: -0.015em !important;
        line-height: 1.25 !important;
        margin-bottom: 0.35rem !important;
    }

    .tournament-subtitle {
        color: #cbd5e1 !important;
        font-size: 0.84rem !important;
        font-weight: 500 !important;
        line-height: 1.45 !important;
        margin-bottom: 0 !important;
    }

    .tournament-content-section {
        background-color: transparent !important;
        padding: 1.25rem 10px calc(92px + env(safe-area-inset-bottom, 14px)) !important;
        min-height: calc(100vh - 220px) !important;
    }

    .tournament-section-heading {
        color: #ffffff !important;
        font-family: 'Montserrat', sans-serif !important;
        font-size: 1.22rem !important;
        font-weight: 800 !important;
        letter-spacing: -0.01em !important;
        margin-bottom: 0 !important;
    }

    /* Modern Integrated Search Capsule on Mobile */
    .tournament-search-box {
        max-width: 100% !important;
        width: 100% !important;
        margin-top: 2px !important;
    }

    .tournament-search-box .input-group {
        background: rgba(15, 23, 42, 0.6) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 999px !important;
        padding: 3px 4px 3px 14px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
        display: flex !important;
        align-items: center !important;
        transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    }

    .tournament-search-box .input-group:focus-within {
        border-color: #c91a24 !important;
        box-shadow: 0 0 0 3px rgba(201, 26, 36, 0.25) !important;
    }

    .tournament-search-box .form-control {
        border: none !important;
        background: transparent !important;
        font-size: 0.86rem !important;
        padding: 6px 8px !important;
        box-shadow: none !important;
        color: #ffffff !important;
    }

    .tournament-search-box .form-control::placeholder {
        color: #94a3b8 !important;
    }

    .tournament-search-box .btn-search {
        background: linear-gradient(135deg, #c91a24 0%, #9e1018 100%) !important;
        border: none !important;
        color: #ffffff !important;
        border-radius: 999px !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        font-size: 0.9rem !important;
        box-shadow: 0 2px 6px rgba(201, 26, 36, 0.3) !important;
        flex-shrink: 0 !important;
        cursor: pointer !important;
        transition: transform 0.15s ease, background 0.15s ease !important;
    }

    .tournament-search-box .btn-search:active {
        transform: scale(0.95) !important;
    }

    /* Tournament Card Mobile Aesthetics (Persis Foto 2: iOS Clear Frosted Glass) */
    .tournament-card {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.006) 0%, rgba(255, 255, 255, 0.001) 100%) !important;
        backdrop-filter: blur(1px) saturate(115%) !important;
        -webkit-backdrop-filter: blur(1px) saturate(115%) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-top: 1.5px solid rgba(255, 255, 255, 0.28) !important;
        border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
        border-radius: 26px !important;
        padding: 13px 15px !important;
        gap: 13px !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18), 
                    inset 0 1px 1px rgba(255, 255, 255, 0.2), 
                    inset 0 0 0 1px rgba(255, 255, 255, 0.02) !important;
        display: flex !important;
        align-items: center !important;
        position: relative !important;
        overflow: hidden !important;
        transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
    }

    .tournament-card:active {
        transform: scale(0.985) !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.8) !important;
        border-color: rgba(255, 255, 255, 0.7) !important;
    }

    .tournament-logo-wrap {
        width: 70px !important;
        height: 70px !important;
        min-width: 70px !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #0f172a !important;
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.06) !important;
    }

    .tournament-logo-wrap img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    .tournament-logo-placeholder {
        width: 100% !important;
        height: 100% !important;
        background: linear-gradient(135deg, #07090e 0%, #0f172a 100%) !important;
        color: #ffc515 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-weight: 900 !important;
        letter-spacing: 0.08em !important;
        font-size: 0.74rem !important;
    }

    .tournament-body {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    .tournament-badges {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        margin-bottom: 5px !important;
        flex-wrap: wrap !important;
    }

    .badge-grade {
        font-size: 0.67rem !important;
        font-weight: 700 !important;
        padding: 2.5px 8px !important;
        border-radius: 999px !important;
        background: rgba(255, 197, 21, 0.15) !important;
        color: #b45309 !important;
        border: 1px solid rgba(255, 197, 21, 0.45) !important;
        line-height: 1.2 !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    .badge-status {
        font-size: 0.67rem !important;
        font-weight: 700 !important;
        padding: 2.5px 8px !important;
        border-radius: 999px !important;
        background: rgba(16, 185, 129, 0.12) !important;
        color: #047857 !important;
        border: 1px solid rgba(16, 185, 129, 0.3) !important;
        line-height: 1.2 !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    .tournament-title {
        font-size: 0.94rem !important;
        font-weight: 800 !important;
        line-height: 1.32 !important;
        margin: 0 0 5px !important;
        font-family: 'Montserrat', sans-serif !important;
        word-break: break-word !important;
    }

    .tournament-title a {
        color: #ffffff !important;
        text-decoration: none !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        transition: color 0.15s ease !important;
    }

    .tournament-title a:active {
        color: #c91a24 !important;
    }

    .tournament-meta-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
        margin-bottom: 7px !important;
    }

    .tournament-meta-item {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-size: 0.76rem !important;
        color: #64748b !important;
        line-height: 1.3 !important;
    }

    .tournament-meta-icon {
        font-size: 0.82rem !important;
        width: 14px !important;
        flex-shrink: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .tournament-meta-icon.icon-lokasi {
        color: #c91a24 !important;
    }

    .tournament-meta-icon.icon-tanggal {
        color: #d97706 !important;
    }

    .tournament-meta-text {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }

    .tournament-link {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        font-size: 0.78rem !important;
        font-weight: 700 !important;
        color: #c91a24 !important;
        text-decoration: none !important;
        padding: 2px 0 !important;
        transition: gap 0.2s ease, color 0.2s ease !important;
    }

    .tournament-link i {
        transition: transform 0.2s ease !important;
        font-size: 0.82rem !important;
    }

    .tournament-link:active i {
        transform: translateX(3px) !important;
    }

    .tournament-info-row {
        gap: 6px !important;
        font-size: 0.72rem !important;
    }

    /* Tournament Detail & Registration Mobile Views */
    .tournament-detail-hero,
    .daftar-hero {
        background: linear-gradient(135deg, #07090e 0%, #0b111e 50%, #0f172a 100%) !important;
        padding: calc(68px + env(safe-area-inset-top, 0px)) 14px 1.85rem !important;
        position: relative !important;
        overflow: hidden !important;
        color: #ffffff !important;
    }

    .tournament-detail-hero::before,
    .daftar-hero::before {
        content: '' !important;
        position: absolute !important;
        inset: 0 !important;
        background: radial-gradient(circle at 80% 20%, rgba(71, 108, 181, 0.28), transparent 55%),
                    radial-gradient(circle at 20% 80%, rgba(255, 197, 21, 0.12), transparent 50%) !important;
        pointer-events: none !important;
    }

    .back-tournament-link,
    .back-nav-link {
        color: #ffc515 !important;
        font-size: 0.8rem !important;
        margin-bottom: 0.85rem !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-weight: 700 !important;
    }

    .tournament-hero-card {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 12px !important;
    }

    .tournament-hero-logo {
        width: 76px !important;
        height: 76px !important;
        min-width: 76px !important;
        border-radius: 16px !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(255, 197, 21, 0.45) !important;
    }

    .tournament-hero-info {
        width: 100% !important;
        min-width: 0 !important;
    }

    .tournament-detail-title,
    .daftar-page-title {
        font-size: clamp(1.22rem, 5.2vw, 1.55rem) !important;
        line-height: 1.25 !important;
        margin-bottom: 0.35rem !important;
        text-transform: uppercase !important;
        word-break: break-word !important;
    }

    .tournament-hero-meta {
        justify-content: center !important;
        gap: 8px !important;
        font-size: 0.78rem !important;
    }

    .tournament-tab-nav {
        top: 54px !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04) !important;
    }

    .tournament-tab-nav .nav-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 6px 10px !important;
        gap: 6px !important;
        scrollbar-width: none !important;
    }

    .tournament-tab-nav .nav-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .tournament-tab-nav .nav-link {
        font-size: 0.8rem !important;
        padding: 6px 12px !important;
        white-space: nowrap !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important;
    }

    .tournament-tab-content {
        padding: 1.25rem 10px calc(88px + env(safe-area-inset-bottom, 14px)) !important;
        background: transparent !important;
        color: #ffffff !important;
    }

    /* --------------------------------------------------------------------------
       5.1 PROFIL, SOTK & VISI MISI
       -------------------------------------------------------------------------- */
    .profil-tab-wrapper {
        gap: 4px !important;
        padding: 4px !important;
        width: 100% !important;
    }

    .profil-tab-item {
        padding: 6px 12px !important;
        font-size: 0.78rem !important;
        flex: 1 1 auto !important;
        justify-content: center !important;
    }

    .pbpi-identity-card,
    .pbpi-vision-card,
    .pbpi-officer-card {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.006) 0%, rgba(255, 255, 255, 0.001) 100%) !important;
        backdrop-filter: blur(1px) saturate(115%) !important;
        -webkit-backdrop-filter: blur(1px) saturate(115%) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-top: 1.5px solid rgba(255, 255, 255, 0.28) !important;
        border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
        border-radius: 26px !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18), 
                    inset 0 1px 1px rgba(255, 255, 255, 0.2), 
                    inset 0 0 0 1px rgba(255, 255, 255, 0.02) !important;
        padding: 14px 14px !important;
        margin-bottom: 12px !important;
        color: #ffffff !important;
    }

    .profil-section-badge {
        font-size: 0.72rem !important;
        padding: 4px 12px !important;
        margin-bottom: 0.5rem !important;
    }

    /* --------------------------------------------------------------------------
       5.2 DIREKTORI KLUB, COURT & WASIT
       -------------------------------------------------------------------------- */
    .court-hero-section,
    .ocg-hero-section,
    .ranking-hero-section {
        padding: 4.5rem 12px 1.85rem !important;
    }

    .court-hero-section h1,
    .ocg-hero-title,
    .ranking-hero-section h1 {
        font-size: clamp(1.35rem, 5.5vw, 1.75rem) !important;
        line-height: 1.25 !important;
        margin-bottom: 0.35rem !important;
    }

    .court-hero-section p,
    .ocg-hero-subtitle,
    .ranking-hero-section p {
        font-size: 0.84rem !important;
        line-height: 1.5 !important;
        margin-bottom: 0.85rem !important;
    }

    .ocg-search-box {
        max-width: 100% !important;
        padding: 5px 6px 5px 14px !important;
        height: 42px !important;
    }

    .ocg-search-box input {
        font-size: 15px !important;
    }

    .court-card,
    .club-card,
    .court-detail-card {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.006) 0%, rgba(255, 255, 255, 0.001) 100%) !important;
        backdrop-filter: blur(1px) saturate(115%) !important;
        -webkit-backdrop-filter: blur(1px) saturate(115%) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-top: 1.5px solid rgba(255, 255, 255, 0.28) !important;
        border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
        border-radius: 26px !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18), 
                    inset 0 1px 1px rgba(255, 255, 255, 0.2), 
                    inset 0 0 0 1px rgba(255, 255, 255, 0.02) !important;
        padding: 13px 13px !important;
        margin-bottom: 12px !important;
        color: #ffffff !important;
    }

    .court-card-thumb-wrap {
        height: 140px !important;
        border-radius: 12px !important;
    }

    .podium-card {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.006) 0%, rgba(255, 255, 255, 0.001) 100%) !important;
        backdrop-filter: blur(1px) saturate(115%) !important;
        -webkit-backdrop-filter: blur(1px) saturate(115%) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-top: 1.5px solid rgba(255, 255, 255, 0.28) !important;
        border-radius: 20px !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
        padding: 1rem 8px !important;
        color: #ffffff !important;
    }

    .rank-circle-1,
    .rank-circle-2,
    .rank-circle-3 {
        width: 36px !important;
        height: 36px !important;
        font-size: 1.05rem !important;
        margin-bottom: 0.5rem !important;
    }

    .table-ranking th,
    .table-ranking td {
        padding: 8px 10px !important;
        font-size: 0.78rem !important;
    }

    /* --------------------------------------------------------------------------
       6. PUBLIC HOMEPAGE & PORTAL BLOCKS
       -------------------------------------------------------------------------- */
    .cp-navbar-container {
        padding: 5px 10px !important;
    }

    .cp-logo-primary {
        width: 30px !important;
        height: 30px !important;
    }

    .cp-brand-title {
        font-size: 0.82rem !important;
        line-height: 1.2 !important;
    }

    .cp-brand-subtitle {
        font-size: 0.65rem !important;
    }

    .cp-hero {
        min-height: auto !important;
        height: auto !important;
        padding: calc(76px + env(safe-area-inset-top, 0px)) 12px 28px !important;
    }

    .cp-hero-title {
        font-size: clamp(1.4rem, 6vw, 1.85rem) !important;
        line-height: 1.25 !important;
        margin-bottom: 0.5rem !important;
    }

    .cp-hero-subtitle {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
        margin-bottom: 1.2rem !important;
    }

    .cp-hero-container {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: auto !important;
        padding-inline: 4px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .cp-hero-cta {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 320px !important;
        margin-inline: auto !important;
        margin-bottom: 12px !important;
        box-sizing: border-box !important;
    }

    .cp-hero-cta .cp-btn-pill {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: 0 !important;
        max-width: none !important;
        min-height: 38px !important;
        height: 38px !important;
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 6px 6px !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
        border-radius: 9999px !important;
        display: inline-flex !important;
        align-items: center !important;
        letter-spacing: 0.01em !important;
    }

    .cp-hero-cta .cp-btn-pill span {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .cp-hero-cta .cp-btn-pill i {
        font-size: 0.70rem !important;
        flex-shrink: 0 !important;
        margin-left: 2px !important;
    }

    .cp-hero-stats-ribbon {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: min(100%, 340px) !important;
        margin-inline: auto !important;
        padding: 8px 12px !important;
        gap: 8px !important;
        border-radius: 16px !important;
    }

    .cp-stat-val,
    .cp-hero-stat-val {
        font-size: 1.25rem !important;
    }

    .cp-stat-lbl,
    .cp-hero-stat-lbl {
        font-size: 0.68rem !important;
    }

    /* 4 Pillars (iOS Clear Frosted Glass) */
    .cp-pillar-card,
    .cp-analytics-card,
    .cp-feature-card {
        background: rgba(255, 255, 255, 0.78) !important;
        backdrop-filter: blur(20px) saturate(190%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
        border: 1px solid rgba(255, 255, 255, 0.85) !important;
        border-radius: 20px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), inset 0 1px 1.5px rgba(255, 255, 255, 0.95) !important;
        padding: 14px 14px !important;
        margin-bottom: 10px !important;
    }

    .cp-pillar-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 1.1rem !important;
        margin-bottom: 8px !important;
    }

    .cp-pillar-title {
        font-size: 0.94rem !important;
        margin-bottom: 4px !important;
    }

    .cp-pillar-desc {
        font-size: 0.8rem !important;
        line-height: 1.48 !important;
    }

    /* Map Section & Interactive Leaflet Tooltip Card */
    #peta-sebaran .container-fluid {
        padding-inline: 10px !important;
    }

    .cp-analytics-card {
        padding: 12px 12px !important;
        border-radius: 18px !important;
    }

    .cp-map-wrapper {
        height: clamp(280px, 46svh, 360px) !important;
        border-radius: 14px !important;
    }

    /* Card Tooltip Peta Dikecilkan di Mobile Sesuai Permintaan User */
    .pbpi-leaflet-tooltip {
        padding: 4px 7px !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
        background: rgba(15, 23, 42, 0.94) !important;
        border: 1px solid rgba(255, 255, 255, 0.16) !important;
        pointer-events: none !important;
    }

    .cp-map-tooltip-content {
        min-width: 80px !important;
        max-width: 115px !important;
    }

    .cp-map-tooltip-title {
        font-size: 0.68rem !important;
        font-weight: 800 !important;
        color: #f59e0b !important;
        margin-bottom: 2px !important;
        line-height: 1.15 !important;
    }

    .cp-map-tooltip-row {
        font-size: 0.62rem !important;
        line-height: 1.25 !important;
        color: #e2e8f0 !important;
        white-space: nowrap !important;
    }

    .cp-map-tooltip-row i {
        font-size: 0.58rem !important;
        margin-right: 2px !important;
    }

    .cp-map-tooltip-row strong {
        font-weight: 700 !important;
    }

    /* News Cards (iOS Clear Frosted Glass) */
    .cp-news-card,
    .news-card {
        background: rgba(255, 255, 255, 0.78) !important;
        backdrop-filter: blur(20px) saturate(190%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
        border: 1px solid rgba(255, 255, 255, 0.85) !important;
        border-radius: 20px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), inset 0 1px 1.5px rgba(255, 255, 255, 0.95) !important;
        margin-bottom: 12px !important;
        overflow: hidden !important;
    }

    .cp-news-thumb-wrap {
        height: 150px !important;
    }

    .cp-news-body {
        padding: 12px 14px !important;
    }

    .cp-news-title {
        font-size: 0.92rem !important;
        line-height: 1.35 !important;
    }

    /* Footer Tuning on Mobile */
    .cp-footer-main {
        padding: 24px 14px 30px !important;
    }

    .cp-footer-grid-block {
        padding: 10px 14px !important;
    }

    .cp-footer-grid-link {
        font-size: 0.84rem !important;
    }

    /* Giant Watermark PBPI KAB. BOGOR - Dibesarkan Menyesuaikan Lebar Layar Mobile */
    .cp-footer-giant-watermark {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: unset !important;
        padding: 8px 4px 18px !important;
        margin-top: 10px !important;
        margin-bottom: 2px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .cp-footer-giant-watermark svg,
    .cp-watermark-svg {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        display: block !important;
    }

    .cp-watermark-text {
        font-family: 'Oswald', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
        font-size: 135px !important;
        font-weight: 700 !important;
        letter-spacing: 0.02em !important;
    }

    /* --------------------------------------------------------------------------
       MOBILE NAVIGATION DROPDOWN MENU (#mobileNavCollapse)
       Fix menu dropdown mobile: solid background, kontras tajam,
       dan teks gelap sangat jelas agar terbaca sempurna di layar mobile.
       -------------------------------------------------------------------------- */
    #mobileNavCollapse,
    header.public-header #mobileNavCollapse {
        position: absolute !important;
        top: calc(100% + 10px) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 100000 !important;
        pointer-events: auto !important;
    }

    #mobileNavCollapse .card,
    #mobileNavCollapse .mobile-nav-card,
    header.public-header #mobileNavCollapse .card,
    .public-header #mobileNavCollapse .card,
    div#mobileNavCollapse div.card {
        background: #ffffff !important;
        background-color: #ffffff !important;
        color: #0f172a !important;
        border: 1px solid rgba(226, 232, 240, 0.95) !important;
        border-radius: 22px !important;
        box-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.25), 0 8px 24px rgba(0, 0, 0, 0.08) !important;
        max-height: calc(85vh - 70px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        backdrop-filter: blur(24px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
        transform: none !important;
        opacity: 1 !important;
        padding: 16px 18px !important;
    }

    #mobileNavCollapse .navbar-nav {
        gap: 4px !important;
    }

    #mobileNavCollapse .dropdown-item,
    #mobileNavCollapse a.dropdown-item,
    header.public-header #mobileNavCollapse .dropdown-item {
        color: #0f172a !important;
        font-size: 0.92rem !important;
        font-weight: 600 !important;
        padding: 10px 14px !important;
        border-radius: 12px !important;
        display: flex !important;
        align-items: center !important;
        background: transparent !important;
        text-shadow: none !important;
        opacity: 1 !important;
        min-height: 42px !important;
        transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease !important;
    }

    #mobileNavCollapse .dropdown-item:hover,
    #mobileNavCollapse .dropdown-item:active,
    #mobileNavCollapse .dropdown-item:focus {
        background: #f1f5f9 !important;
        color: #0284c7 !important;
        transform: translateX(4px) !important;
    }

    #mobileNavCollapse span.text-muted,
    #mobileNavCollapse .text-muted {
        color: #475569 !important;
        font-weight: 600 !important;
    }

    #mobileNavCollapse .lang-btn-opt {
        color: #1e293b !important;
        border: 1px solid #cbd5e1 !important;
        background: #ffffff !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        padding: 4px 10px !important;
    }

    #mobileNavCollapse .lang-btn-opt:hover,
    #mobileNavCollapse .lang-btn-opt.active {
        background: #0284c7 !important;
        color: #ffffff !important;
        border-color: #0284c7 !important;
    }

    #mobileNavCollapse .border-bottom {
        border-bottom: 1px solid #e2e8f0 !important;
    }

    #mobileNavCollapse .border-top {
        border-top: 1px solid #e2e8f0 !important;
    }

    #mobileNavCollapse .btn-outline-primary {
        border-color: #0284c7 !important;
        color: #0284c7 !important;
    }

    #mobileNavCollapse .btn-outline-primary:hover,
    #mobileNavCollapse .btn-outline-primary:active {
        background-color: #0284c7 !important;
        color: #ffffff !important;
    }

    #mobileNavCollapse .btn-primary {
        background-color: #0284c7 !important;
        border-color: #0284c7 !important;
        color: #ffffff !important;
    }

    /* --------------------------------------------------------------------------
       7. BUTTONS, INPUTS, PILLS & MODALS (CLEAN & TOUCH-FRIENDLY)
       -------------------------------------------------------------------------- */
    .btn, 
    .cp-btn-pill {
        font-size: 0.82rem !important;
        padding: 7px 16px !important;
        border-radius: 9999px !important;
    }

    .btn-sm {
        font-size: 0.74rem !important;
        padding: 4px 10px !important;
    }

    .btn-lg {
        font-size: 0.88rem !important;
        padding: 9px 20px !important;
    }

    .badge {
        font-size: 0.68rem !important;
        padding: 3px 8px !important;
    }

    /* Inputs - 16px prevents iOS Safari auto-zoom */
    input, 
    select, 
    textarea,
    .form-control,
    .form-select {
        font-size: 16px !important;
        padding: 8px 12px !important;
        border-radius: 10px !important;
    }

    .form-label {
        font-size: 0.78rem !important;
        margin-bottom: 4px !important;
    }

    /* Modals on Mobile */
    .modal-dialog {
        margin: 10px !important;
        max-width: calc(100% - 20px) !important;
    }

    .modal-content {
        background: rgba(255, 255, 255, 0.88) !important;
        backdrop-filter: blur(24px) saturate(200%) !important;
        -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
        border: 1px solid rgba(255, 255, 255, 0.95) !important;
        border-radius: 22px !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.16), inset 0 1px 1.5px rgba(255, 255, 255, 1) !important;
    }

    .modal-header {
        padding: 12px 14px !important;
    }

    .modal-body {
        padding: 12px 14px !important;
    }

    .modal-footer {
        padding: 10px 14px !important;
    }

    .modal-title {
        font-size: 0.96rem !important;
    }

    /* Chat Assist Modal */
    .pbpi-chat-actions-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
    }

    .pbpi-chat-action-item {
        padding: 8px 4px !important;
        border-radius: 12px !important;
    }

    .pbpi-chat-action-item i {
        font-size: 1.15rem !important;
    }

    .pbpi-chat-action-item span {
        font-size: 0.65rem !important;
    }
}

/* --------------------------------------------------------------------------
   8. COMPACT PHONES SUB-QUERY (max-width: 480px / 380px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .container,
    .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    #main,
    .page-content {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .card-body,
    .card > .card-body {
        padding: 10px 12px !important;
    }

    .pbpi-fintech-card,
    .user-stat-card {
        padding: 8px 10px !important;
    }

    .pbpi-fintech-card .pbpi-card-value,
    .user-stat-card h3 {
        font-size: 1.2rem !important;
    }

    .tournament-card {
        padding: 10px 12px !important;
        gap: 10px !important;
        border-radius: 18px !important;
    }

    .tournament-logo-wrap {
        width: 62px !important;
        height: 62px !important;
        min-width: 62px !important;
        border-radius: 12px !important;
    }

    .tournament-logo-wrap img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        border-radius: 10px !important;
    }

    .tournament-title {
        font-size: 0.88rem !important;
        margin-bottom: 3px !important;
    }

    .tournament-meta-item {
        font-size: 0.72rem !important;
    }

    .badge-grade,
    .badge-status {
        font-size: 0.63rem !important;
        padding: 2px 7px !important;
    }

    /* --------------------------------------------------------------------------
       14. PROFIL (ORGANISASI & AKUN PENGGUNA) MOBILE COMPACT ARCHITECTURE
       Menata ulang proporsi profil: ukuran foto, padding card, teks, kisi matrix,
       dan tombol agar ringkas, padat, simpel, dan elegan di layar smartphone.
       -------------------------------------------------------------------------- */
    .pbpi-identity-card,
    .pbpi-visi-card,
    .pbpi-misi-card {
        padding: 14px 12px !important;
        border-radius: 14px !important;
    }

    .pbpi-identity-card h4,
    .pbpi-visi-card h4,
    .pbpi-misi-card h4 {
        font-size: 0.96rem !important;
        line-height: 1.25 !important;
    }

    .pbpi-emblem-wrap {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        border-radius: 10px !important;
        padding: 4px !important;
    }

    .pbpi-article p:first-of-type {
        padding: 9px 12px !important;
        font-size: 0.82rem !important;
        line-height: 1.5 !important;
        border-radius: 10px !important;
        margin-bottom: 0.75rem !important;
    }

    .pbpi-article p:not(:first-of-type) {
        font-size: 0.78rem !important;
        line-height: 1.55 !important;
        margin-bottom: 0.65rem !important;
    }

    .pbpi-metric-matrix {
        margin-bottom: 0.75rem !important;
    }

    .pbpi-metric-box {
        padding: 6px 4px !important;
        border-radius: 8px !important;
    }

    .pbpi-metric-val {
        font-size: 1.05rem !important;
        line-height: 1.15 !important;
        margin-bottom: 2px !important;
    }

    .pbpi-metric-lbl {
        font-size: 0.65rem !important;
        line-height: 1.2 !important;
    }

    .pbpi-metric-sub {
        font-size: 0.58rem !important;
        line-height: 1.15 !important;
    }

    .pbpi-commitments-wrap {
        margin-bottom: 0.75rem !important;
    }

    .pbpi-commit-item {
        padding: 6px 8px !important;
        border-radius: 8px !important;
        gap: 8px !important;
    }

    .pbpi-commit-icon {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        border-radius: 6px !important;
        font-size: 0.78rem !important;
    }

    .pbpi-commit-title {
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
        margin-bottom: 2px !important;
    }

    .pbpi-commit-desc {
        font-size: 0.68rem !important;
        line-height: 1.35 !important;
    }

    /* ==========================================================================
       SCREEN 1: PERBARUI PROFIL & PENGATURAN AKUN MOBILE OPTIMIZATION
       ========================================================================== */
    .profile-photo-container {
        width: 95px !important;
    }

    .profile-photo-container .ratio {
        border-radius: 18px !important;
    }

    .photo-overlay-badge {
        bottom: 4px !important;
        right: 4px !important;
        font-size: 0.68rem !important;
        padding: 2px 7px !important;
        border-radius: 12px !important;
    }

    .form-group.mb-3,
    .form-group.mb-4 {
        margin-bottom: 0.75rem !important;
    }

    .form-group label,
    .form-label {
        font-size: 0.8rem !important;
        margin-bottom: 0.25rem !important;
    }

    .form-control,
    .form-select,
    textarea.form-control {
        font-size: 0.82rem !important;
        padding: 0.45rem 0.75rem !important;
        border-radius: 10px !important;
    }

    .form-text {
        font-size: 0.7rem !important;
        margin-top: 0.2rem !important;
    }

    .password-wrapper .btn-toggle-eye {
        width: 32px !important;
        height: 32px !important;
        font-size: 1.1rem !important;
        right: 6px !important;
    }

    /* ==========================================================================
       SCREEN 2: PAPAN KLASEMEN RESMI & LEADERBOARD MOBILE OPTIMIZATION
       ========================================================================== */
    .klasemen-wrapper {
        padding-bottom: 110px !important;
    }

    .klasemen-header-card {
        padding: 12px 14px !important;
        border-radius: 18px !important;
        margin-bottom: 0.85rem !important;
    }

    .btn-back-dashboard {
        font-size: 0.74rem !important;
        padding: 4px 10px !important;
        gap: 4px !important;
    }

    .live-pulse-badge {
        font-size: 0.68rem !important;
        padding: 3px 8px !important;
    }

    .klasemen-header-trophy {
        width: 34px !important;
        height: 34px !important;
    }

    .klasemen-header-card h4 {
        font-size: 1.05rem !important;
        line-height: 1.25 !important;
    }

    .metric-glass-card {
        padding: 6px 8px !important;
        border-radius: 12px !important;
    }

    .metric-glass-card span.text-uppercase {
        font-size: 0.6rem !important;
    }

    .metric-glass-card span.fw-bold {
        font-size: 0.95rem !important;
    }

    .klasemen-tabs-container {
        padding: 3px !important;
        margin-bottom: 0.85rem !important;
        gap: 4px !important;
    }

    .tab-pill-btn {
        font-size: 0.78rem !important;
        padding: 6px 12px !important;
    }

    .search-filter-card {
        padding: 10px 12px !important;
        border-radius: 16px !important;
        margin-bottom: 0.85rem !important;
    }

    .glass-search-input {
        font-size: 0.8rem !important;
        padding: 6px 12px 6px 36px !important;
        height: 38px !important;
    }

    .cat-filter-btn {
        font-size: 0.72rem !important;
        padding: 4px 10px !important;
        white-space: nowrap !important;
    }

    /* Podium Mobile Scaling */
    .podium-section {
        gap: 8px !important;
        margin-bottom: 1rem !important;
    }

    .podium-box {
        padding: 10px 6px !important;
        border-radius: 14px !important;
    }

    .podium-box-1 {
        padding-top: 16px !important;
        padding-bottom: 14px !important;
    }

    .podium-crown {
        font-size: 0.95rem !important;
        top: 3px !important;
    }

    .podium-avatar-wrap {
        width: 42px !important;
        height: 42px !important;
        font-size: 0.95rem !important;
        margin-bottom: 6px !important;
    }

    .podium-box-1 .podium-avatar-wrap {
        width: 46px !important;
        height: 46px !important;
    }

    .podium-name {
        font-size: 0.78rem !important;
        margin-bottom: 2px !important;
    }

    .podium-sub {
        font-size: 0.65rem !important;
        margin-bottom: 4px !important;
    }

    .podium-points-pill {
        font-size: 0.75rem !important;
        padding: 2px 7px !important;
    }

    /* Leaderboard Item Row Mobile Scaling */
    .rank-card-item {
        padding: 8px 10px !important;
        gap: 8px !important;
        border-radius: 14px !important;
        margin-bottom: 8px !important;
    }

    .rank-badge-number {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.85rem !important;
        border-radius: 9px !important;
        flex-shrink: 0 !important;
    }

    .rank-avatar-circle {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.95rem !important;
        flex-shrink: 0 !important;
    }

    .rank-player-name {
        font-size: 0.84rem !important;
        line-height: 1.25 !important;
        margin-bottom: 2px !important;
    }

    .rank-sub-meta {
        font-size: 0.68rem !important;
        gap: 4px !important;
        line-height: 1.3 !important;
    }

    .cat-chip {
        font-size: 0.6rem !important;
        padding: 1px 5px !important;
    }

    .rank-winloss-sub {
        font-size: 0.64rem !important;
        margin-top: 2px !important;
    }

    .rank-points-badge {
        padding: 3px 8px !important;
        border-radius: 10px !important;
        gap: 3px !important;
    }

    .rank-points-badge .pts-val {
        font-size: 0.88rem !important;
    }

    .rank-points-badge .pts-unit {
        font-size: 0.58rem !important;
    }

    /* ==========================================================================
       SCREEN 3: DAFTAR JADWAL TURNAMEN & DATATABLES MOBILE OPTIMIZATION
       ========================================================================== */
    .btn-filter-tab {
        white-space: nowrap !important;
        font-size: 0.76rem !important;
        padding: 5px 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        border-radius: 9999px !important;
    }

    .btn-filter-badge {
        font-size: 0.65rem !important;
        min-width: 18px !important;
        height: 17px !important;
        padding: 0 4px !important;
        top: -5px !important;
        right: -5px !important;
    }

    /* DataTables & Admin Tables Mobile Optimization */
    .table-responsive {
        border-radius: 14px !important;
        -webkit-overflow-scrolling: touch !important;
        margin-bottom: 0.75rem !important;
    }

    .table-responsive::-webkit-scrollbar {
        height: 4px !important;
    }

    .table-responsive::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2) !important;
        border-radius: 999px !important;
    }

    table.dataTable,
    .table {
        font-size: 0.82rem !important;
        margin-bottom: 0 !important;
    }

    table.dataTable th,
    .table th {
        font-size: 0.72rem !important;
        padding: 8px 10px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.03em !important;
        white-space: nowrap !important;
    }

    table.dataTable td,
    .table td {
        padding: 8px 10px !important;
        vertical-align: middle !important;
    }

    .dataTables_wrapper .row:first-child,
    .dataTables_wrapper .row:last-child {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        text-align: left !important;
        font-size: 0.8rem !important;
        margin-bottom: 0.5rem !important;
    }

    .dataTables_wrapper .dataTables_length label,
    .dataTables_wrapper .dataTables_filter label {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        color: rgba(255, 255, 255, 0.7) !important;
        font-size: 0.78rem !important;
    }

    .dataTables_wrapper .dataTables_length select {
        width: auto !important;
        min-width: 58px !important;
        padding: 3px 6px !important;
        font-size: 0.78rem !important;
        border-radius: 8px !important;
        background-color: rgba(17, 24, 43, 0.85) !important;
        color: #ffffff !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
    }

    .dataTables_wrapper .dataTables_filter input {
        flex: 1 1 auto !important;
        width: 100% !important;
        margin-left: 0 !important;
        padding: 5px 10px !important;
        font-size: 0.8rem !important;
        border-radius: 10px !important;
        background-color: rgba(17, 24, 43, 0.85) !important;
        color: #ffffff !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
    }

    .dataTables_wrapper .dataTables_info {
        font-size: 0.74rem !important;
        color: rgba(255, 255, 255, 0.55) !important;
        padding-top: 4px !important;
    }

    .dataTables_wrapper .dataTables_paginate {
        text-align: center !important;
        margin-top: 6px !important;
    }

    .dataTables_wrapper .pagination {
        justify-content: center !important;
        font-size: 0.75rem !important;
    }

    .dataTables_wrapper .page-link {
        padding: 4px 8px !important;
        font-size: 0.74rem !important;
    }
}

@media (max-width: 380px) {
    .cp-hero {
        padding-inline: 8px !important;
    }

    .cp-hero-cta .cp-btn-pill {
        max-width: 100% !important;
    }

    .podium-name {
        font-size: 0.72rem !important;
    }

    .podium-points-pill {
        font-size: 0.68rem !important;
        padding: 2px 5px !important;
    }

    .rank-points-badge .pts-val {
        font-size: 0.82rem !important;
    }

    .tournament-card {
        padding: 8px 10px !important;
        gap: 8px !important;
        border-radius: 16px !important;
    }

    .tournament-logo-wrap {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        border-radius: 10px !important;
    }

    .tournament-title {
        font-size: 0.84rem !important;
    }

    .tournament-link {
        font-size: 0.74rem !important;
    }
}

/* ==========================================================================
   15. PBPI FLOATING CAPSULE BOTTOM NAVBAR & AI CHAT MODAL (MOBILE / APP DOCK)
   Modeled precisely after reference photo:
   - Sleek obsidian black capsule pill container
   - Minimalist high-contrast icons
   - Active state: crisp white circular bubble with dark icon
   - 5 items: Home, Jadwal, Menu (FAB), Peringkat, Profil
   ========================================================================== */
.pbpi-floating-dock-container {
    display: none;
    position: fixed !important;
    bottom: max(14px, env(safe-area-inset-bottom, 14px)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 1061 !important;
    pointer-events: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    width: min(390px, calc(100vw - 28px)) !important;
    max-width: 390px !important;
    height: 66px !important;
    transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1), transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.24s !important;
}

/* Sembunyikan dock seketika dan mulus saat offcanvas sheet atau modal terbuka */
body.pbpi-sheet-active .pbpi-floating-dock-container,
.pbpi-floating-dock-container.dock-hidden,
body.sidebar-open .pbpi-floating-dock-container,
body:has(#pbpiCenterChatModal.show) .pbpi-floating-dock-container,
body:has(#pbpiCenterChatModal.showing) .pbpi-floating-dock-container,
body:has(#pbpiMobileActionSheet.show) .pbpi-floating-dock-container,
body:has(#pbpiMobileActionSheet.showing) .pbpi-floating-dock-container,
body.modal-open .pbpi-floating-dock-container {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate(-50%, 50px) scale(0.9) !important;
    pointer-events: none !important;
}

.pbpi-floating-dock {
    position: relative;
    width: 100%;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.75)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
}

/* Glassmorphic Curved SVG Background */
.pbpi-dock-svg-bg {
    position: absolute;
    top: -18px;
    left: 0;
    width: 100%;
    height: calc(100% + 18px);
    z-index: 1;
    pointer-events: none;
    backdrop-filter: blur(24px) saturate(190%);
    -webkit-backdrop-filter: blur(24px) saturate(190%);
    border-radius: 26px;
}

.pbpi-dock-svg-bg svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Navigation Items Row */
.pbpi-dock-items {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: auto;
}

.pbpi-dock-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none !important;
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    padding-top: 6px;
    cursor: pointer !important;
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.pbpi-dock-item i,
.pbpi-dock-item svg {
    font-size: 19px;
    margin-bottom: 2px;
    transition: transform 0.2s ease, color 0.2s ease;
    pointer-events: none !important;
}

.pbpi-dock-item:hover,
.pbpi-dock-item:active {
    color: #ffffff !important;
}

.pbpi-dock-item:hover i {
    transform: translateY(-2px);
    color: #ffffff;
}

.pbpi-dock-item.active {
    color: #818cf8 !important;
    font-weight: 700;
}

.pbpi-dock-item.active i {
    color: #818cf8 !important;
    transform: translateY(-1px);
}

/* Fluid Moving Curved Notch Active States */
.pbpi-dock-item {
    transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1), color 0.2s ease;
}

.pbpi-dock-item.notch-elevated {
    transform: translateY(-13px) !important;
    color: #ffffff !important;
}

.pbpi-dock-item.notch-elevated i,
.pbpi-dock-item.notch-elevated svg {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.6), inset 0 1.5px 2px rgba(255, 255, 255, 0.45) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 19px !important;
    margin-bottom: 2px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transition: all 0.32s cubic-bezier(0.34, 1.4, 0.64, 1) !important;
}

.pbpi-dock-item.notch-elevated span {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7) !important;
}

/* Center Raised Circular Action Button (FAB) */
.pbpi-dock-center-fab {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    cursor: pointer !important;
    text-decoration: none !important;
    border: none;
    background: transparent;
    padding: 0;
    margin-top: -18px;
    pointer-events: auto !important;
    touch-action: manipulation;
    transition: margin-top 0.35s cubic-bezier(0.34, 1.4, 0.64, 1), transform 0.2s ease;
}

.pbpi-floating-dock.notch-shifted .pbpi-dock-center-fab {
    margin-top: 0px !important;
}

.pbpi-floating-dock.notch-shifted .pbpi-fab-circle {
    width: 36px;
    height: 36px;
    background: rgba(99, 102, 241, 0.22);
    border: 1px solid rgba(99, 102, 241, 0.45);
    box-shadow: none;
}

.pbpi-floating-dock.notch-shifted .pbpi-fab-circle i {
    font-size: 17px;
    color: #a5b4fc;
}

.pbpi-floating-dock.notch-shifted .pbpi-fab-label {
    color: rgba(255, 255, 255, 0.6);
}

.pbpi-fab-circle {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.5), inset 0 1.5px 2px rgba(255, 255, 255, 0.45);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, width 0.32s ease, height 0.32s ease;
    color: #ffffff;
}

.pbpi-fab-circle:hover,
.pbpi-fab-circle:active {
    transform: scale(1.08);
    box-shadow: 0 10px 24px rgba(99, 102, 241, 0.7);
}

.pbpi-fab-circle i,
.pbpi-fab-circle svg {
    font-size: 22px;
    color: #ffffff;
    pointer-events: none !important;
}

.pbpi-fab-label {
    margin-top: 2px;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.1px;
}

/* Responsive Trigger on Mobile / App */
@media (max-width: 991.98px), (display-mode: standalone) {
    .pbpi-floating-dock-container {
        display: flex !important;
    }
    .sidebar-edge-toggle,
    #btnSidebarTrigger,
    #app.sidebar-open .sidebar-edge-toggle,
    body.sidebar-open .sidebar-edge-toggle {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        opacity: 0 !important;
    }
    #main {
        padding-bottom: 96px !important;
    }
    .pbpi-scroll-top-wrapper,
    body.pbpi-admin-glass #scrollToTopBtn {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

.pbpi-mobile-app .pbpi-floating-dock-container {
    display: flex !important;
}
.pbpi-mobile-app .sidebar-edge-toggle {
    display: none !important;
}
.pbpi-mobile-app #main {
    padding-bottom: 96px !important;
}

/* =========================================================================
   PBPI CENTER POPUP CHAT-STYLE MENU CARD MODAL
   Modern Glassmorphic AI Chat Card Interface centered in the screen
   ========================================================================= */
.pbpi-chat-menu-modal .modal-dialog {
    max-width: 440px !important;
    margin: 1.5rem auto !important;
    padding: 0 14px;
}

.pbpi-chat-card {
    background: linear-gradient(165deg, rgba(20, 26, 42, 0.96) 0%, rgba(11, 14, 24, 0.98) 100%) !important;
    backdrop-filter: blur(28px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 26px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.88), 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    overflow: hidden;
    transform: scale(0.92);
    transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.26s ease;
}

.pbpi-chat-menu-modal.show .pbpi-chat-card {
    transform: scale(1);
}

.modal-backdrop.show {
    z-index: 1055 !important;
    background: rgba(4, 6, 12, 0.75) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.pbpi-chat-menu-modal {
    z-index: 1060 !important;
}

/* Chat Card Header */
.pbpi-chat-header {
    padding: 16px 18px 13px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.02);
}

.pbpi-chat-avatar-wrap {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #3b82f6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.45);
    flex-shrink: 0;
}

.pbpi-chat-avatar-wrap i {
    font-size: 19px;
}

.pbpi-chat-status-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    background: #10b981;
    border: 2px solid #0e121c;
    border-radius: 50%;
    box-shadow: 0 0 6px #10b981;
}

.pbpi-chat-title {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.01em;
}

.pbpi-chat-subtitle {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}

.pbpi-chat-close-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
}

.pbpi-chat-close-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    transform: rotate(90deg);
}

/* Chat Card Body */
.pbpi-chat-body {
    padding: 16px 18px 14px 18px;
    max-height: calc(85vh - 140px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.pbpi-chat-bubble-bot {
    background: rgba(30, 38, 56, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px 18px 18px 4px;
    padding: 12px 14px;
    color: #e2e8f0;
    font-size: 12.5px;
    line-height: 1.45;
    margin-bottom: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Quick Action Grid in Chat Card */
.pbpi-chat-actions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    margin-bottom: 6px;
}

.pbpi-chat-action-item {
    background: rgba(22, 28, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 12px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    color: #e2e8f0 !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.pbpi-chat-action-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.pbpi-chat-action-item:hover,
.pbpi-chat-action-item:active {
    background: rgba(38, 48, 72, 0.95);
    border-color: rgba(129, 140, 248, 0.45);
    transform: translateY(-2px) scale(1.02);
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}

.pbpi-chat-action-item i {
    font-size: 22px;
    margin-bottom: 5px;
    transition: transform 0.2s ease;
}

.pbpi-chat-action-item:hover i {
    transform: scale(1.12);
}

.pbpi-chat-action-item span {
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}

/* Chat Input Bar at Bottom of Card */
.pbpi-chat-input-bar {
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(14, 18, 30, 0.95);
    display: flex;
    align-items: center;
    gap: 8px;
}

.pbpi-chat-input-wrapper {
    position: relative;
    flex: 1;
}

.pbpi-chat-input-wrapper i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.4);
    font-size: 13px;
    pointer-events: none;
}

.pbpi-chat-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 99px;
    padding: 8px 12px 8px 32px;
    color: #ffffff;
    font-size: 12px;
    outline: none;
    transition: all 0.2s ease;
}

.pbpi-chat-input:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(99, 102, 241, 0.6);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.pbpi-chat-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.pbpi-chat-send-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.pbpi-chat-send-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.6);
}

.pbpi-chat-send-btn i {
    font-size: 17px;
}

/* --------------------------------------------------------------------------
   GLOBAL MOBILE DATATABLES & TABLE ENHANCEMENTS
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .dataTables_wrapper .row:first-child {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        margin-bottom: 8px !important;
    }
    .dataTables_wrapper .dataTables_length {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-bottom: 4px !important;
    }
    .dataTables_wrapper .dataTables_length label {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-size: 0.76rem !important;
        color: #94a3b8 !important;
        font-weight: 600 !important;
        width: 100% !important;
    }
    .dataTables_wrapper .dataTables_length select {
        background-color: rgba(15, 23, 42, 0.7) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        color: #ffffff !important;
        border-radius: 8px !important;
        padding: 3px 20px 3px 8px !important;
        font-size: 0.78rem !important;
        cursor: pointer !important;
        margin: 0 4px !important;
    }
    .dataTables_wrapper .dataTables_filter {
        width: 100% !important;
        margin-bottom: 12px !important;
    }
    .dataTables_wrapper .dataTables_filter label {
        font-size: 0 !important;
        color: transparent !important;
        width: 100% !important;
        position: relative !important;
        margin: 0 !important;
    }
    .dataTables_wrapper .dataTables_filter label::before {
        content: "\F52A";
        font-family: "bootstrap-icons" !important;
        position: absolute !important;
        left: 14px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: #fbbf24 !important;
        font-size: 0.92rem !important;
        pointer-events: none !important;
        z-index: 2 !important;
    }
    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        padding-left: 38px !important;
        font-size: 0.82rem !important;
        height: 40px !important;
        margin-left: 0 !important;
        background-color: rgba(15, 23, 42, 0.7) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        color: #ffffff !important;
        border-radius: 12px !important;
        outline: none !important;
        transition: all 0.2s ease !important;
    }
    .dataTables_wrapper .dataTables_filter input:focus {
        border-color: rgba(255, 197, 21, 0.7) !important;
        background-color: rgba(20, 30, 55, 0.85) !important;
        box-shadow: 0 0 0 3px rgba(255, 197, 21, 0.2) !important;
    }
    .dataTables_wrapper .dataTables_info {
        font-size: 0.75rem !important;
        color: #94a3b8 !important;
        text-align: center !important;
        padding-top: 10px !important;
    }
    .dataTables_wrapper .dataTables_paginate {
        display: flex !important;
        justify-content: center !important;
        padding-top: 8px !important;
    }
}

/* --------------------------------------------------------------------------
   GPU HARDWARE ACCELERATION & SCROLL PERFORMANCE TWEAKS
   Mempertahankan 60 FPS saat scrolling di layar sentuh perangkat mobile
   -------------------------------------------------------------------------- */
.cp-mobile-dock,
.pbpi-mobile-dock-wrapper,
.card,
.stat-card-pro,
.tournament-card,
.leaderboard-row-pro {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Mempercepat rendering gambar dan elemen di luar viewport */
img {
    content-visibility: auto;
}

/* Mobile browser: a spacious introduction separate from the installed app. */
.cp-brand-title-mobile,
.cp-hero-web-title {
    display: none;
}

@media (max-width: 767.98px) {
    html:not(.pbpi-mobile-app) .public-header {
        top: 10px !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
        margin: 0 !important;
        padding: 10px 12px !important;
        border-radius: 20px !important;
    }

    html:not(.pbpi-mobile-app) .public-header .cp-brand-title {
        display: none !important;
    }

    html:not(.pbpi-mobile-app) .public-header .cp-brand-title-mobile {
        display: block;
        font-size: 15px;
        font-weight: 800;
        line-height: 1.2;
        color: #0f172a;
    }

    html:not(.pbpi-mobile-app) .public-header .cp-brand-subtitle {
        font-size: 9px !important;
        line-height: 1.3;
        letter-spacing: 0.04em;
    }

    html:not(.pbpi-mobile-app) .public-header .cp-logo-primary,
    html:not(.pbpi-mobile-app) .public-header .cp-logo-secondary {
        height: 30px !important;
        max-width: 42px !important;
    }

    html:not(.pbpi-mobile-app) .public-header .btn-mobile-toggler {
        width: 40px !important;
        height: 40px !important;
    }

    html:not(.pbpi-mobile-app) .cluster-home .cp-hero {
        min-height: auto !important;
        padding: 112px 20px 36px !important;
        background: linear-gradient(180deg, #edf2fa 0%, #f8fafc 100%) !important;
    }

    html:not(.pbpi-mobile-app) .cp-hero .cp-hero-video {
        opacity: 0.08;
    }

    html:not(.pbpi-mobile-app) .cp-hero .cp-portal-background {
        transform: translate(-50%, -50%) scale(0.32) !important;
        opacity: 0.2;
    }

    html:not(.pbpi-mobile-app) .cp-hero .cp-hero-glow {
        opacity: 0.15;
    }

    html:not(.pbpi-mobile-app) .cp-hero .cp-hero-container {
        padding: 0 !important;
        max-width: 460px !important;
    }

    html:not(.pbpi-mobile-app) .cp-hero .cp-hero-title-proto {
        display: none !important;
    }

    html:not(.pbpi-mobile-app) .cp-hero .cp-hero-web-title {
        display: block;
        margin: 0 0 14px;
        font-size: clamp(28px, 7.5vw, 36px);
        font-weight: 800;
        line-height: 1.15;
        letter-spacing: -0.035em;
        color: #0f172a;
    }

    html:not(.pbpi-mobile-app) .cp-hero-web-title span {
        display: block;
        color: var(--cp-blue);
    }

    html:not(.pbpi-mobile-app) .cp-hero .cp-hero-tagline {
        max-width: 340px !important;
        font-size: 12px !important;
        line-height: 1.65 !important;
        margin: 0 auto 22px !important;
        color: #64748b !important;
    }

    html:not(.pbpi-mobile-app) .cp-hero .cp-hero-cta {
        max-width: 460px !important;
        gap: 8px !important;
        margin: 0 auto 24px !important;
        align-items: stretch !important;
    }

    html:not(.pbpi-mobile-app) .cp-hero-cta .cp-btn-pill {
        height: auto !important;
        min-height: 46px !important;
        padding: 10px 8px !important;
        font-size: 11px !important;
        line-height: 1.3 !important;
        border-radius: 14px !important;
        white-space: normal !important;
    }

    html:not(.pbpi-mobile-app) .cp-hero-cta .cp-btn-pill span {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    html:not(.pbpi-mobile-app) .cp-hero .cp-hero-stats-ribbon {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        width: 100% !important;
        max-width: 460px !important;
        padding: 16px 4px !important;
        gap: 0 !important;
        margin: 0 auto !important;
        background: rgba(255, 255, 255, 0.9) !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 18px !important;
        box-shadow: 0 8px 24px rgba(71, 108, 181, 0.06) !important;
    }

    html:not(.pbpi-mobile-app) .cp-hero-stats-ribbon .stat-item {
        grid-column: auto !important;
        grid-row: auto !important;
        padding: 0 3px !important;
        border: none !important;
        background: transparent !important;
        min-width: 0;
    }

    html:not(.pbpi-mobile-app) .cp-hero-stats-ribbon .stat-item ~ .stat-item {
        border-left: 1px solid #e2e8f0 !important;
    }

    html:not(.pbpi-mobile-app) .cp-hero-stats-ribbon .stat-num {
        font-size: 21px !important;
        line-height: 1.2 !important;
        color: var(--cp-blue) !important;
    }

    html:not(.pbpi-mobile-app) .cp-hero-stats-ribbon .stat-num small {
        font-size: 11px !important;
    }

    html:not(.pbpi-mobile-app) .cp-hero-stats-ribbon .stat-lbl {
        font-size: 7px !important;
        line-height: 1.5 !important;
        margin-top: 5px;
        letter-spacing: 0 !important;
        white-space: normal;
        color: #64748b !important;
    }
}

/* Readable homepage content for mobile browsers. */
@media (max-width: 767.98px) {
    html:not(.pbpi-mobile-app) .cluster-home .cp-pillars-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-pillar-card { padding: 20px 16px !important; border-radius: 20px !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-card-meta-row { gap: 8px !important; margin-bottom: 14px !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-cyber-badge { font-size: 10px !important; padding: 5px 8px !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-card-meta-row .cp-mini-tag { font-size: 10px !important; padding: 5px 8px !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-card-headline { font-size: 20px !important; line-height: 1.3 !important; margin-bottom: 10px !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-card-subtext { display: block !important; font-size: 13px !important; line-height: 1.65 !important; margin-bottom: 16px !important; -webkit-line-clamp: unset !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-pathway-flow { padding: 10px !important; gap: 8px !important; margin-bottom: 16px !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-pathway-step { padding: 8px !important; gap: 10px !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-step-icon { width: 28px !important; height: 28px !important; min-width: 28px !important; font-size: 14px !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-step-content strong { font-size: 12px !important; line-height: 1.4 !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-step-content span { font-size: 11px !important; line-height: 1.4 !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-card-metric-box { padding: 10px 4px !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-card-metric-box .val { font-size: 22px !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-card-metric-box .lbl { font-size: 10px !important; margin-top: 6px !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-card-footer { gap: 8px !important; padding-top: 14px !important; flex-wrap: wrap; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-card-footer .cp-btn-pill { min-height: 44px !important; font-size: 12px !important; padding: 10px !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-tourney-ticket.empty-state { padding: 18px 12px !important; margin: 12px 0 !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-tourney-ticket.empty-state strong { font-size: 14px !important; line-height: 1.5 !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-tourney-categories { gap: 6px !important; margin: 10px 0 !important; flex-wrap: wrap; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-tourney-categories .badge { font-size: 10px !important; padding: 6px 8px !important; white-space: normal; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-ticket-title { font-size: 15px !important; line-height: 1.4 !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-ticket-meta { font-size: 11px !important; line-height: 1.5 !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-ticket-info { min-width: 0; overflow-wrap: anywhere; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-hof-title { font-size: 11px !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-hof-header button { font-size: 10px !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-hof-name { font-size: 11px !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-hof-pts { font-size: 10px !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-hof-card { padding: 10px 4px !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-map-wrapper { height: 280px !important; min-height: 0 !important; }
    html:not(.pbpi-mobile-app) .cluster-home #tabContentProgram .row > [class*="col-"] { width: 100% !important; }
    html:not(.pbpi-mobile-app) .cluster-home #tabContentProgram .pbpi-mission-card { padding: 20px !important; }
    html:not(.pbpi-mobile-app) .cluster-home #tabContentProgram .pbpi-mission-card h3 { font-size: 18px !important; line-height: 1.4 !important; }
    html:not(.pbpi-mobile-app) .cluster-home #tabContentProgram .pbpi-mission-card p { font-size: 13px !important; line-height: 1.65 !important; }
    html:not(.pbpi-mobile-app) .cluster-home #tabContentProgram .pbpi-mission-card .badge { font-size: 10px !important; padding: 5px 8px !important; }
    html:not(.pbpi-mobile-app) .cluster-home #tabContentProgram .pbpi-mission-card .cp-btn-pill { min-height: 44px !important; font-size: 12px !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-news-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-news-title { font-size: 18px !important; line-height: 1.4 !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-news-excerpt { font-size: 13px !important; line-height: 1.6 !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-section-title { font-size: 22px !important; line-height: 1.3 !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-faq-btn { padding: 16px !important; font-size: 14px !important; line-height: 1.5 !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-faq-btn span { font-size: inherit !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-faq-content { padding: 0 16px 16px !important; font-size: 13px !important; line-height: 1.7 !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-faq-content p { font-size: inherit !important; line-height: inherit !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-cta-inner { padding: 28px 18px !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-cta-inner h2 { font-size: 22px !important; line-height: 1.35 !important; margin: 14px 0 !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-cta-inner p { font-size: 13px !important; line-height: 1.65 !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-cta-badge-item { font-size: 10px !important; padding: 6px 8px !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-cta-buttons .cp-btn-pill { min-height: 44px !important; font-size: 12px !important; white-space: normal !important; }
    html:not(.pbpi-mobile-app) .cp-footer-grid-link { font-size: 12px !important; line-height: 1.6 !important; padding-block: 5px !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-live-ticker-wrap { height: auto !important; padding: 12px !important; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 16px !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-ticker-badge { font-size: 10px !important; flex-shrink: 0; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-ticker-marquee { overflow: visible !important; width: 100%; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-ticker-track { animation: none !important; white-space: normal !important; font-size: 12px !important; line-height: 1.6 !important; padding: 0 !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-ticker-track[aria-hidden="true"], html:not(.pbpi-mobile-app) .cluster-home .cp-ticker-sep { display: none !important; }
}

@media (max-width: 767.98px) {
    html:not(.pbpi-mobile-app) .cluster-home .cp-ticker-track { display: block !important; flex: none !important; width: 100% !important; max-width: 100%; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-ticker-track > span { white-space: normal !important; overflow-wrap: anywhere; }
    html:not(.pbpi-mobile-app) .cp-footer-main .cp-footer-bio { font-size: 13px !important; line-height: 1.65 !important; }
    html:not(.pbpi-mobile-app) .cp-footer-main .cp-footer-col h5 { font-size: 12px !important; margin-bottom: 12px !important; }
    html:not(.pbpi-mobile-app) .cp-footer-main .cp-footer-col a { font-size: 12px !important; line-height: 1.6 !important; display: inline-block; padding-block: 5px; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-ranking-title, html:not(.pbpi-mobile-app) .cluster-home .cp-ranking-name { font-size: 12px !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-ranking-footnote { font-size: 11px !important; line-height: 1.5 !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-bento-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-bento-card { padding: 20px 16px !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-bento-card h3, html:not(.pbpi-mobile-app) .cluster-home .cp-bento-title { font-size: 18px !important; line-height: 1.4 !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-bento-card p, html:not(.pbpi-mobile-app) .cluster-home .cp-bento-desc { font-size: 13px !important; line-height: 1.65 !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-bento-badge, html:not(.pbpi-mobile-app) .cluster-home .cp-bento-card .badge { font-size: 10px !important; padding: 5px 8px !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-contact-card { padding: 18px !important; }
    html:not(.pbpi-mobile-app) .cluster-home #tabContentKontak .row > [class*="col-"] { width: 100% !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-contact-title { font-size: 17px !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-contact-sub, html:not(.pbpi-mobile-app) .cluster-home .cp-contact-val { font-size: 12px !important; line-height: 1.6 !important; }
}

@media (max-width: 767.98px) {
    html:not(.pbpi-mobile-app) .cluster-home #tabContentDedikasi > .row.g-4 { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
    html:not(.pbpi-mobile-app) .cluster-home #tabContentDedikasi > .row.g-4 > [class*="col-"] { width: 100% !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-bento-card .cp-btn-pill { min-height: 44px !important; font-size: 12px !important; white-space: normal !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-bento-chip { font-size: 11px !important; padding: 5px 8px !important; }
}

@media (max-width: 767.98px) {
    html:not(.pbpi-mobile-app) .cluster-home #tabContentProgram .row.g-4 > [class*="col-"],
    html:not(.pbpi-mobile-app) .cluster-home #tabContentDedikasi > .row.g-4 > [class*="col-"],
    html:not(.pbpi-mobile-app) .cluster-home #tabContentKontak .row.g-4 > [class*="col-"] { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
}

/* Sporting editorial direction for the mobile website. */
.cp-hero-web-eyebrow, .cp-web-section-heading { display: none; }
@media (max-width: 767.98px) {
    html:not(.pbpi-mobile-app) .cluster-home { background: #f4f6fa; }
    html:not(.pbpi-mobile-app) .public-header { border-radius: 18px !important; box-shadow: 0 8px 32px rgba(4, 14, 36, .15) !important; }
    html:not(.pbpi-mobile-app) .public-header .btn-mobile-toggler { width: 44px !important; height: 44px !important; background: transparent !important; box-shadow: none !important; color: #18345d !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-hero { padding: 122px 20px 40px !important; background: radial-gradient(ellipse at 100% 10%, #244b7c 0%, transparent 48%), linear-gradient(145deg, #08192e, #122d50 65%, #123c56) !important; border-radius: 0 0 30px 30px; overflow: hidden; }
    html:not(.pbpi-mobile-app) .cp-hero .cp-hero-video { display: none; }
    html:not(.pbpi-mobile-app) .cp-hero .cp-portal-background { opacity: .08; transform: translate(-50%, -50%) scale(.42) !important; }
    html:not(.pbpi-mobile-app) .cp-hero .cp-hero-container { position: relative; z-index: 3; text-align: left !important; }
    html:not(.pbpi-mobile-app) .cp-hero-web-eyebrow { display: flex; align-items: center; justify-content: flex-start !important; gap: 7px; margin-bottom: 18px; font-size: 9px; line-height: 1.5; font-weight: 700; letter-spacing: .12em; color: #c4d5ed; }
    html:not(.pbpi-mobile-app) .cp-hero-web-eyebrow > span { flex: 0 0 6px; height: 6px; border-radius: 50%; background: #f6c760; box-shadow: 0 0 0 4px rgba(246,199,96,.12); }
    html:not(.pbpi-mobile-app) .cp-hero .cp-hero-web-title { font-size: clamp(33px, 9.2vw, 42px) !important; font-weight: 800 !important; line-height: 1.1 !important; letter-spacing: -.045em; color: #fff; margin-bottom: 18px; margin-inline: 0 !important; width: 100% !important; max-width: none !important; text-align: left !important; }
    html:not(.pbpi-mobile-app) .cp-hero-web-title span { color: #b7d6ff; }
    html:not(.pbpi-mobile-app) .cp-hero .cp-hero-tagline { margin: 0 0 24px !important; color: #ccd8e8 !important; font-size: 13px !important; line-height: 1.7 !important; max-width: 330px !important; text-align: left !important; }
    html:not(.pbpi-mobile-app) .cp-hero-cta .cp-btn-blue { background: linear-gradient(135deg,#6d99e1,#476cb5) !important; border: 1px solid #8aade8 !important; box-shadow: 0 8px 22px rgba(0,0,0,.18) !important; }
    html:not(.pbpi-mobile-app) .cp-hero-cta .cp-btn-white { background: rgba(255,255,255,.08) !important; border: 1px solid rgba(209,225,248,.3) !important; color: #edf4ff !important; box-shadow: none !important; }
    html:not(.pbpi-mobile-app) .cp-hero .cp-hero-stats-ribbon { background: rgba(255,255,255,.07) !important; border: 1px solid rgba(193,219,255,.2) !important; box-shadow: none !important; padding: 18px 4px !important; align-items: start !important; }
    html:not(.pbpi-mobile-app) .cp-hero-stats-ribbon .stat-num, html:not(.pbpi-mobile-app) .cp-hero-stats-ribbon .stat-num small { color: #fff !important; }
    html:not(.pbpi-mobile-app) .cp-hero-stats-ribbon .stat-lbl { color: #bdcde2 !important; font-size: 8px !important; white-space: normal !important; overflow-wrap: anywhere; }
    html:not(.pbpi-mobile-app) .cp-hero-stats-ribbon .stat-item ~ .stat-item { border-left-color: rgba(193,219,255,.18) !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-arc-section { padding-top: 24px !important; margin-top: 0 !important; background: transparent !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-analytics-card { background: #fff !important; border: 1px solid #e4eaf3 !important; border-radius: 22px !important; padding: 16px !important; box-shadow: 0 12px 30px rgba(23,43,77,.05) !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-analytics-header { padding: 0 0 14px !important; border-bottom: 1px solid #edf1f6; margin-bottom: 12px; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-map-wrapper { border-radius: 16px !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-live-ticker-wrap { background: #eaf0fa !important; border: 1px solid #d9e4f5 !important; border-radius: 16px !important; box-shadow: none !important; padding: 16px !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-ticker-badge { background: #d4e1f5 !important; color: #234f89 !important; border: none !important; padding: 5px 8px !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-ticker-track { color: #3f5876 !important; }
    html:not(.pbpi-mobile-app) .cp-web-section-heading { display: block; padding: 16px 4px 22px; }
    html:not(.pbpi-mobile-app) .cp-web-section-heading > span { font-size: 10px; font-weight: 700; letter-spacing: .14em; color: #476cb5; }
    html:not(.pbpi-mobile-app) .cp-web-section-heading h2 { margin: 12px 0; font-size: 29px; font-weight: 800; line-height: 1.15; letter-spacing: -.04em; color: #10233f; }
    html:not(.pbpi-mobile-app) .cp-web-section-heading p { font-size: 13px; line-height: 1.6; color: #68768a; max-width: 320px; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-pillar-card { background: #fff !important; border: 1px solid #e4eaf3 !important; box-shadow: 0 10px 28px rgba(23,43,77,.05) !important; position: relative; }
    html:not(.pbpi-mobile-app) .cluster-home #program.cp-pillar-card { border-top: 4px solid #476cb5 !important; }
    html:not(.pbpi-mobile-app) .cluster-home #turnamen.cp-pillar-card { border-top: 4px solid #c49c47 !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-card-headline { color: #10233f !important; font-size: 22px !important; letter-spacing: -.025em; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-cyber-badge { background: #f0f4fb !important; border-color: #e1e9f5 !important; color: #355782 !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-pathway-flow { background: #f6f8fc !important; border: 1px solid #e6ecf6 !important; border-radius: 14px !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-card-metric-box { background: #f0f4fb !important; border: none !important; border-radius: 12px !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-card-footer .cp-btn-pill { border-radius: 12px !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-news-section { padding-top: 32px !important; background: #f4f6fa !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-faq-item { border: 1px solid #e3eaf4 !important; border-radius: 16px !important; background: #fff !important; box-shadow: 0 4px 14px rgba(23,43,77,.025); margin-bottom: 12px !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-faq-btn { color: #18345d !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-cta-inner { background: radial-gradient(ellipse at 100% 0,#2d557e,transparent 60%),linear-gradient(135deg,#10233f,#183754) !important; border-radius: 24px !important; border: 1px solid #2d496b !important; padding: 32px 22px !important; box-shadow: 0 18px 34px rgba(16,35,63,.15) !important; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-cta-inner h2 { font-size: 26px !important; letter-spacing: -.03em; }
    html:not(.pbpi-mobile-app) .cluster-home .cp-cta-buttons .cp-btn-pill { border-radius: 12px !important; }
}
@media (prefers-reduced-motion: reduce) {
    .cluster-home [data-aos] { transition: none !important; animation: none !important; }
}

/* A quiet, animated padel court behind the mobile hero. */
.cp-hero-court-scene { display: none; }
@media (max-width: 767.98px) {
    html:not(.pbpi-mobile-app) .cp-hero .cp-hero-court-scene { display: block; position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
    html:not(.pbpi-mobile-app) .cp-hero .cp-portal-background { opacity: .035; }
    .cp-hero-court-scene .cp-court-light { position: absolute; width: 310px; height: 310px; border-radius: 50%; opacity: .45; animation: cp-court-glow 14s ease-in-out infinite alternate; }
    .cp-hero-court-scene .cp-court-light-blue { top: 0; right: -160px; background: radial-gradient(circle,rgba(97,157,246,.5),transparent 68%); }
    .cp-hero-court-scene .cp-court-light-teal { bottom: -130px; left: -180px; background: radial-gradient(circle,rgba(47,188,187,.42),transparent 68%); animation-delay: -7s; }
    .cp-hero-court-scene .cp-court-lines { position: absolute; width: 360px; height: 500px; right: -235px; top: 60px; border: 1px solid rgba(174,216,255,.13); border-radius: 8px; transform: rotate(-28deg); background: linear-gradient(90deg,transparent calc(50% - .5px),rgba(174,216,255,.1) 50%,transparent calc(50% + .5px)),linear-gradient(0deg,transparent calc(50% - .5px),rgba(174,216,255,.13) 50%,transparent calc(50% + .5px)); }
    .cp-hero-court-scene .cp-court-lines > span { position: absolute; inset: 24% 0; border-top: 1px solid rgba(174,216,255,.12); border-bottom: 1px solid rgba(174,216,255,.12); }
    .cp-hero-court-scene .cp-court-ball { position: absolute; right: 22px; top: 112px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 30% 25%,#e9f5a4,#aac868); opacity: .55; box-shadow: 0 0 26px rgba(196,221,131,.15); animation: cp-court-ball-float 9s ease-in-out infinite; }
    .cp-hero-court-scene .cp-court-ball::after { content: ""; position: absolute; inset: 2px 4px; border-left: 1px solid rgba(255,255,255,.6); border-right: 1px solid rgba(255,255,255,.6); border-radius: 50%; transform: rotate(-35deg); }
    .cp-hero-court-scene .cp-court-grain { position: absolute; inset: 0; opacity: .15; background-image: radial-gradient(rgba(204,224,255,.4) .6px,transparent .6px); background-size: 18px 18px; mask-image: linear-gradient(90deg,transparent 30%,#000); }
    html:not(.pbpi-mobile-app) .cp-hero .cp-hero-web-title { animation: cp-hero-reveal .75s ease-out both; }
    html:not(.pbpi-mobile-app) .cp-hero .cp-hero-cta .cp-btn-pill { transition: transform .2s ease,box-shadow .2s ease; }
    html:not(.pbpi-mobile-app) .cp-hero .cp-hero-cta .cp-btn-pill:active { transform: scale(.97); }
}
@keyframes cp-court-glow { from { transform: translate3d(0,0,0) scale(.9); } to { transform: translate3d(-35px,25px,0) scale(1.12); } }
@keyframes cp-court-ball-float { 0%,100% { transform: translate3d(0,0,0) rotate(-15deg); } 50% { transform: translate3d(-12px,22px,0) rotate(30deg); } }
@keyframes cp-hero-reveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
    .cp-hero-court-scene *, html:not(.pbpi-mobile-app) .cp-hero .cp-hero-web-title { animation: none !important; }
}

/* =========================================================================
   PBPI FLOATING WIDGETS CO-LINEAR ALIGNMENT (SCROLL-TO-TOP & HELPER BOT)
   Menjamin 100% presisi vertikal (sumbu X lurus) & anti-overlap tanpa tabrakan
   ========================================================================= */
@media (max-width: 768px) {
    /* Container Helper Bot */
    .cp-helper-floating {
        position: fixed !important;
        bottom: 20px !important;
        right: 18px !important;
        left: auto !important;
        top: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        z-index: 9998 !important;
        pointer-events: auto !important;
    }

    /* Avatar Bot Bulat (Elemen paling kanan di dalam floating helper) */
    .cp-helper-avatar {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        max-width: 42px !important;
        max-height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 50% !important;
        box-sizing: border-box !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;
    }

    /* Container Tombol Scroll-to-top */
    .cp-scroll-to-top-wrap {
        position: fixed !important;
        bottom: 20px !important;
        right: 18px !important;
        left: auto !important;
        top: auto !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 10000 !important;
        pointer-events: auto !important;
        transition: bottom 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease !important;
    }

    /* Ketika Helper Bot Aktif: Angkat tombol scroll-to-top tepat di atas bot dengan gap lega 18px */
    .cp-scroll-to-top-wrap.has-helper {
        bottom: 80px !important;
        right: 18px !important;
    }

    /* Tombol Scroll-to-top Bulat Biru PBPI */
    .cp-scroll-to-top-wrap #scrollToTopBtn {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        max-width: 42px !important;
        max-height: 42px !important;
        border-radius: 50% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        display: none;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.15rem !important;
        background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
        color: #ffffff !important;
        box-shadow: 0 4px 14px rgba(37, 99, 235, 0.42), 0 2px 6px rgba(0, 0, 0, 0.15) !important;
        cursor: pointer;
    }

    .cp-scroll-to-top-wrap #scrollToTopBtn.is-visible,
    .cp-scroll-to-top-wrap #scrollToTopBtn[style*="display: flex"] {
        display: flex !important;
    }
}