body { 
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 
        margin: 0; 
        padding: 0; 
        background-color: #ffffff; 
        color: #333; 
        -webkit-font-smoothing: antialiased; 
    } 
    .container { 
        max-width: 450px; 
        margin: 0 auto; 
        background-color: white; 
        min-height: 10vh; 
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); 
        position: relative; 
    } 
    #login-container, #signup-container, #profil-container, #editprofil-container, #payment-container, #receipt-popup, #video-container, #download-container, #leaderboard-container, #dokumen-container, #free-shipping-container, #produk-detail-container { 
        display: none; 
        position: fixed; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100%; 
        background-color: white; 
        z-index: 200005; 
        overflow-y: auto; 
    } 
    
    .header { 
        background: #007bff; 
        color: white; 
        padding: 15px 15px 50px 15px; 
        position: relative; 
        overflow: hidden; 
        border-bottom-left-radius: 15px; 
        border-bottom-right-radius: 15px; 
    } 
    .header::before { 
        content: ""; 
        position: absolute; 
        top: 0; 
        left: 0; 
        right: 0; 
        bottom: 0; 
        background-image: none; 
        opacity: 0; 
        z-index: 1; 
    } 
    .header-content { 
        position: relative; 
        z-index: 2; 
    } 
    .top-nav { 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        margin-bottom: 5px; 
    } 
    .welcome { 
        font-size: 20px; 
        font-weight: 600; 
    } 
    .help-center { 
        background-color: rgba(255, 255, 255, 0.1); 
        padding: 5px 10px; 
        border-radius: 20px; 
        font-size: 12px; 
        display: flex; 
        align-items: center; 
        border: 1px solid rgba(255, 255, 255, 0.5); 
    } 
    .help-center i { 
        margin-right: 5px; 
    } 
    
    .balance-card { 
        background-color: white; 
        color: #333; 
        padding: 15px; 
        border-radius: 12px; 
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); 
        position: absolute; 
        top: 65px; 
        left: 15px; 
        right: 15px; 
        z-index: 10; 
    } 
    .balance-title { 
        font-size: 14px; 
        color: #666; 
        margin-bottom: 5px; 
        font-weight: 500;
    } 
    .balance-details { 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
    } 
    .balance-amount { 
        font-size: 26px; 
        font-weight: 800; 
        color: #007bff; 
    } 
    .balance-icon { 
        font-size: 20px; 
        color: #666; 
        cursor: pointer; 
    } 
    .all-accounts { 
        background-color: #f0f2f5; 
        color: #007bff; 
        padding: 8px; 
        border-radius: 8px; 
        margin-top: 10px; 
        text-align: center; 
        font-weight: 600; 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        font-size: 13px; 
        cursor: pointer; 
        border: none;
    } 
    
    .main-features { 
        display: flex; 
        justify-content: space-around; 
        padding: 20px 10px 10px 10px; 
        margin-top: 170px; 
        margin-bottom: 10px; 
        background-color: white; 
        border-bottom: none; 
    } 
    .feature-item, .feature-link { 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        text-align: center; 
        font-size: 12px; 
        color: #555; 
        cursor: pointer; 
        width: 20%; 
        text-decoration: none; 
    } 
    .feature-icon-circle { 
        width: 50px; 
        height: 50px; 
        border-radius: 10px; 
        display: flex; 
        justify-content: center; 
        align-items: center; 
        margin-bottom: 5px; 
        font-size: 22px; 
        box-shadow: none; 
        border: 1px solid #f0f2f5; 
    } 
    .transfer-icon { 
        background-color: #e6f7ff; 
        color: #007bff; 
    } 
    .briva-icon { 
        background-color: #e6fffb; 
        color: #00bcd4; 
    } 
    .pdam-icon { 
        background-color: #f0f2f5; 
        color: #007bff; 
    } 
    .pulsa-icon { 
        background-color: #f0f2f5; 
        color: #28a745; 
    } 
    .feature-icon-circle i { 
        font-size: 24px; 
    } 
    .leaderboard-icon-img { 
        width: 25px; 
        height: 25px; 
        object-fit: contain; 
    } 
    
    .banner { 
        margin: 0 15px 20px 15px; 
        padding: 12px 15px; 
        border-radius: 8px; 
        background: linear-gradient(90deg, #ff9800, #f57c00); 
        color: white; 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        font-size: 14px; 
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
        cursor: pointer; 
    } 
    .banner-text { 
        flex-grow: 1; 
        line-height: 1.4; 
        overflow: hidden; 
        padding-right: 10px; 
    } 
    .banner-text strong { 
        font-size: 15px; 
        font-weight: 700; 
    } 
    .banner-text marquee { 
        width: 100%; 
        line-height: 1.2;
    } 
    .banner-button { 
        background-color: white; 
        color: #ff9800; 
        padding: 8px 15px; 
        border-radius: 20px; 
        font-weight: 600; 
        margin-left: 10px; 
    } 
    .search-bar { 
        margin: 0 15px 20px 15px; 
        padding: 12px 15px; 
        background-color: #f0f2f5; 
        border-radius: 8px; 
        color: #666; 
        display: flex; 
        align-items: center; 
        font-size: 14px; 
        cursor: text; 
    } 
    .search-bar i { 
        margin-right: 10px; 
        color: #999; 
    } 
    .search-bar .marquee-content { 
        flex-grow: 1; 
        white-space: nowrap; 
        overflow: hidden; 
    } 
    .search-bar marquee { 
        width: 100%; 
        margin: 0; 
        padding: 0; 
        display: block; 
    } 
    
    .other-features { 
        display: grid; 
        grid-template-columns: repeat(4, 1fr); 
        gap: 15px 10px; 
        padding: 0 15px 20px 15px; 
        background-color: white; 
    } 
    .other-feature-item { 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        text-align: center; 
        font-size: 12px; 
        color: #555; 
        cursor: pointer; 
    } 
    .other-feature-icon { 
        width: 50px; 
        height: 50px; 
        background-color: #fff; 
        border: none; 
        border-radius: 10px; 
        display: flex; 
        justify-content: center; 
        align-items: center; 
        margin-bottom: 5px; 
        font-size: 24px; 
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); 
        overflow: hidden; 
    } 
    .product-icon-img { 
        width: 100%; 
        height: 100%; 
        object-fit: cover; 
        border-radius: 10px; 
    } 
    .top-up-icon { color: #28a745; } 
    .brizzi-icon { color: #00bcd4; } 
    .tagihan-icon { color: #007bff; } 
    .setor-tarik-icon { color: #f44336; } 
    .lifestyle-icon { color: #e83e8c; } 
    .virtual-icon { color: #ff5722; } 
    .catatan-icon { color: #4caf50; } 
    .investasi-icon { color: #007bff; } 
    
    .bottom-nav { 
        position: fixed; 
        bottom: 0; 
        left: 50%; 
        transform: translateX(-50%); 
        max-width: 450px; 
        width: 100%; 
        background-color: white; 
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); 
        display: flex; 
        justify-content: space-around; 
        padding: 5px 0; 
        z-index: 100; 
    } 
    .nav-item { 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        font-size: 10px; 
        color: #999; 
        padding: 5px; 
        cursor: pointer; 
    } 
    .nav-item.active { 
        color: #007bff; 
        font-weight: 600; 
    } 
    .nav-item i { 
        font-size: 20px; 
        margin-bottom: 2px; 
    } 
    .nav-item .leaderboard-img { 
        width: 20px; 
        height: 20px; 
        margin-bottom: 2px; 
        object-fit: contain; 
    } 
    
    #loading { 
        position: fixed; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100%; 
        background: grey; 
        display: flex; 
        justify-content: center; 
        align-items: center; 
        z-index: 1000; 
    } 
    @keyframes blinker { 
        50% { opacity: 0; } 
    } 
    .blinking-glowing-text { 
        animation: blinker 1.5s linear infinite; 
        color: red; 
        font-size: 30px; 
        font-weight: 700; 
        text-shadow: 0 0 5px #ffeb3b, 0 0 10px #ffc107, 0 0 15px blue; 
    } 
    #blinking-text { 
        animation: blinker 1s linear infinite; 
        color: #ffffff; 
        font-size: 14px; 
        font-weight: 700; 
        text-shadow: 0 0 5px #000; 
        /* Pastikan properti ini ada untuk senter */
        display: block; 
        text-align: center;
    }
    
    .auth-container {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: white;
        z-index: 200005;
        overflow-y: auto;
        justify-content: center; 
        align-items: flex-start; 
        padding-top: 20px;
    }
    
    .auth-card {
        max-width: 350px;
        width: 90%;
        margin: 0 auto;
        background-color: white;
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px; 
    }
    
    .leaderboard-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 15px;
        margin-bottom: 8px;
        background-color: #ffffff;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        border-left: 5px solid #007bff;
    }
    .leaderboard-rank {
        font-weight: 700;
        font-size: 16px;
        color: #007bff;
        width: 20px;
        text-align: center;
    }
    .leaderboard-name {
        flex-grow: 1;
        margin: 0 10px;
        font-weight: 500;
        font-size: 14px;
    }
    .leaderboard-score {
        font-weight: 700;
        font-size: 14px;
        color: #ff9800;
    }
    
    .video-card-modified {
        width: 100%;
        max-width: 450px;
        margin: 0 auto;
        min-height: 100vh;
        background-color: white;
    }
    .video-header, .download-header, .dokumen-header, .leaderboard-header, .produk-header {
        display: flex;
        align-items: center;
        padding: 15px;
        background-color: #007bff;
        color: white;
        font-size: 18px;
        font-weight: 600;
        position: sticky;
        top: 0;
        z-index: 10;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    .video-header i, .download-header i, .dokumen-header i, .leaderboard-header i, .produk-header i {
        margin-right: 15px;
        font-size: 20px;
        cursor: pointer;
    }
    .video-header h3, .dokumen-header h3, .leaderboard-header h3, .produk-header h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        flex-grow: 1;
    }
    .video-content-section, .download-content, .dokumen-content-section, .leaderboard-content-section, .produk-content-section {
        padding: 15px;
    }
    
    .video-item {
        margin-bottom: 20px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }
    .video-thumbnail video {
        width: 100%;
        height: auto;
        display: block;
    }
    .video-details {
        padding: 10px 15px;
    }
    .video-details h4 {
        margin: 0 0 5px 0;
        font-size: 16px;
        font-weight: 600;
    }
    .video-details p {
        margin: 0;
        font-size: 12px;
        color: #666;
    }
    
    /* STYLE BARU UNTUK DETAIL PRODUK */
    .produk-detail-card {
        width: 100%;
        max-width: 450px;
        margin: 0 auto;
        min-height: 100vh;
        background-color: white;
    }
    .produk-detail-img {
        width: 100%;
        height: 250px;
        object-fit: cover;
        display: block;
    }
    .produk-info {
        padding: 15px;
    }
    .produk-info h2 {
        margin-top: 0;
        color: #333;
        font-size: 24px;
    }
    .produk-info .price {
        font-size: 28px;
        font-weight: 800;
        color: #f44336;
        margin-bottom: 15px;
    }
    .produk-info h4 {
        margin-bottom: 10px;
        color: #007bff;
        border-bottom: 2px solid #007bff;
        padding-bottom: 5px;
    }
    .produk-info p {
        font-size: 14px;
        color: #555;
        line-height: 1.6;
        margin-bottom: 15px;
    }
    .produk-info ul {
        list-style: disc;
        padding-left: 20px;
        margin-bottom: 15px;
    }
    .produk-info li {
        font-size: 14px;
        color: #555;
        margin-bottom: 5px;
    }
    .produk-action-bar {
        position: fixed;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        max-width: 450px;
        width: 100%;
        background-color: white;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        padding: 10px 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 100;
    }
    .produk-action-bar button {
        flex: 1;
        padding: 12px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
    }
    
    /* STYLE BARU UNTUK PROFIL */
    .rating-main a {
        text-decoration: none;
        color: inherit;
    }
    .contributor-rating-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 0;
        font-size: 12px;
        color: #333;
        border-bottom: 1px dashed #eee;
    }
    .contributor-rating-row:last-child {
        border-bottom: none;
    }
    .contributor-name {
        font-weight: 600;
    }
    .contributor-donation {
        font-weight: 700;
        color: #28a745; 
    }
    /* END STYLE BARU */