:root {
        --primary: #0066CC;
        --primary-soft: #00B4FF;
        --secondary: #00C2A8;
        --accent: #FFB020;
        --dark: #0f172a;
        --light: #f4f8ff;
        --text: #1f2a44;
        --muted: #6c7a96;
    }
    body {
        font-family: 'Segoe UI', Tahoma, sans-serif;
        color: var(--text);
        background:
            radial-gradient(circle at 12% 20%, rgba(0, 180, 255, 0.08), transparent 28%),
            radial-gradient(circle at 85% 10%, rgba(0, 102, 204, 0.08), transparent 32%),
            #f8fbff;
    }
    .navbar {
        background: rgba(5, 22, 52, 0.92) !important;
        backdrop-filter: blur(8px);
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .navbar-brand { color: #fff !important; font-weight: 800; font-size: 1.3rem; }
    .navbar-brand span { color: #9ad7ff; }
    .nav-link { color: rgba(255,255,255,.88) !important; font-weight: 600; }
    .nav-link:hover, .nav-link.active { color: #8cd2ff !important; }
    .btn-primary-custom {
        background: linear-gradient(135deg, var(--primary), var(--primary-soft));
        color: #fff;
        border: none;
        font-weight: 700;
        padding: 10px 22px;
        border-radius: 12px;
        transition: all 0.25s ease;
        box-shadow: 0 8px 20px rgba(0, 102, 204, .22);
    }
    .btn-primary-custom:hover {
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 12px 24px rgba(0, 102, 204, .28);
    }
    .btn-outline-custom {
        background: rgba(255,255,255,0.08);
        color: #fff;
        border: 1px solid rgba(255,255,255,0.38);
        font-weight: 700;
        padding: 9px 20px;
        border-radius: 12px;
    }
    .btn-outline-custom:hover { background: rgba(255,255,255,0.2); color: #fff; }
    .btn-login-custom {
        background: transparent;
        color: #fff !important;
        border: 1px solid rgba(255,255,255,.45);
        border-radius: 12px;
        padding: 8px 16px;
        font-weight: 700;
        transition: all .25s ease;
    }
    .btn-login-custom:hover {
        color: #0b2a5b !important;
        background: #fff;
        border-color: #fff;
    }
    .hero {
        background:
            radial-gradient(circle at 82% 18%, rgba(255,255,255,.22), transparent 38%),
            radial-gradient(circle at 18% 88%, rgba(255,255,255,.15), transparent 42%),
            linear-gradient(130deg, #003C8A 0%, #0066CC 46%, #00A9F0 100%);
        color: #fff;
        padding: 120px 0 84px;
        position: relative;
        overflow: hidden;
    }
    .hero::before {
        content: '';
        position: absolute;
        top: -140px;
        right: -120px;
        width: 440px;
        height: 440px;
        border-radius: 40px;
        transform: rotate(28deg);
        background: linear-gradient(135deg, rgba(255,255,255,.28), rgba(255,255,255,0));
    }
    .hero h1 { font-size: 3rem; font-weight: 800; line-height: 1.2; }
    .hero h1 span { color: #c5eeff; }
    .hero p { font-size: 1.2rem; opacity: 0.9; }
    .page-header {
        background: linear-gradient(135deg, #033d89, #0095d9);
        color: #fff; padding: 80px 0 40px; text-align: center;
    }
    .page-header h1 { font-weight: 800; margin-bottom: 10px; }
    .page-header .breadcrumb { justify-content: center; }
    .page-header .breadcrumb-item, .page-header .breadcrumb-item a { color: #d7f2ff; }
    .section { padding: 80px 0; }
    .section-title { text-align: center; margin-bottom: 50px; }
    .section-title h2 { font-weight: 800; font-size: 2.5rem; color: var(--dark); }
    .section-title p { color: var(--muted); font-size: 1.1rem; }
    .section-title .line {
        width: 80px; height: 4px; background: linear-gradient(90deg, var(--primary), var(--primary-soft));
        margin: 15px auto; border-radius: 2px;
    }
    .service-card {
        background: rgba(255,255,255,.96);
        border-radius: 16px;
        padding: 35px 25px;
        box-shadow: 0 12px 30px rgba(15, 46, 95, 0.08);
        transition: all 0.3s;
        height: 100%;
        border: 1px solid rgba(0, 102, 204, .08);
        border-top: 4px solid var(--primary);
    }
    .service-card:hover { transform: translateY(-8px); box-shadow: 0 16px 36px rgba(15, 46, 95, 0.14); }
    .service-card .icon {
        width: 70px; height: 70px; background: linear-gradient(135deg, var(--primary), var(--primary-soft));
        border-radius: 15px; display: flex; align-items: center;
        justify-content: center; font-size: 2rem; color: #fff; margin-bottom: 20px;
    }
    .service-card h4 { font-weight: 700; margin-bottom: 15px; }
    .stat-box {
        background: rgba(255,255,255,.98); padding: 30px; border-radius: 16px;
        text-align: center; box-shadow: 0 10px 24px rgba(15, 46, 95, 0.1);
        border: 1px solid rgba(0, 102, 204, .1);
    }
    .stat-box h3 { color: var(--primary); font-size: 2.5rem; font-weight: 800; }
    .stat-box p { margin: 0; color: var(--muted); font-weight: 600; }
    .bg-light-custom { background: linear-gradient(180deg, #f2f8ff 0%, #ffffff 100%); }
    .about-img {
        border-radius: 15px; overflow: hidden;
        box-shadow: 0 16px 34px rgba(15, 46, 95, 0.16);
    }
    .feature-list li {
        padding: 8px 0; display: flex; align-items: center;
    }
    .feature-list i { color: var(--primary); font-size: 1.3rem; margin-right: 10px; }
    .accordion-button:not(.collapsed) {
        background: linear-gradient(135deg, var(--primary), var(--primary-soft)); color: #fff; font-weight: 600;
    }
    .accordion-button:focus { box-shadow: 0 0 0 0.25rem rgba(0,102,204,0.22); }
    .accordion-item { border: 1px solid #e0e0e0; margin-bottom: 10px; border-radius: 10px !important; overflow: hidden; }
    .policy-content h4 { color: var(--dark); margin-top: 25px; font-weight: 700; }
    .policy-content p, .policy-content li { line-height: 1.8; color: #555; }
    .contact-info-card {
        background: #fff; padding: 30px; border-radius: 15px;
        box-shadow: 0 10px 24px rgba(15, 46, 95, 0.1); height: 100%;
        border: 1px solid rgba(0, 102, 204, .1);
    }
    .contact-info-card .icon {
        width: 55px; height: 55px; background: linear-gradient(135deg, var(--primary), var(--primary-soft));
        border-radius: 50%; display: flex; align-items: center;
        justify-content: center; font-size: 1.5rem; color: #fff; margin-bottom: 15px;
    }
    .form-control, .form-select {
        padding: 12px 15px; border-radius: 8px; border: 1px solid #ddd;
    }
    .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 0.2rem rgba(0,102,204,0.2); }
    footer {
        background: linear-gradient(135deg, #041936 0%, #0a2d5f 100%); color: #d3def4; padding: 60px 0 20px;
    }
    footer h5 { color: #9ad7ff; font-weight: 700; margin-bottom: 20px; }
    footer a { color: #d3def4; text-decoration: none; transition: color 0.3s; }
    footer a:hover { color: #9ad7ff; }
    footer ul { list-style: none; padding: 0; }
    footer ul li { margin-bottom: 10px; }
    .social-icons a {
        display: inline-flex; width: 40px; height: 40px;
        background: rgba(255,255,255,0.12); border-radius: 50%; align-items: center;
        justify-content: center; margin-right: 8px; color: #fff;
    }
    .social-icons a:hover { background: #9ad7ff; color: #09336e; }
    .footer-bottom {
        border-top: 1px solid rgba(255,255,255,0.16); padding-top: 20px; margin-top: 40px;
        text-align: center; color: rgba(211,222,244,0.76);
    }
    .wa-float {
        position: fixed; bottom: 25px; right: 25px; width: 60px; height: 60px;
        background: #25D366; color: #fff; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.8rem; box-shadow: 0 5px 20px rgba(0,0,0,0.3);
        z-index: 999; text-decoration: none; animation: pulse 2s infinite;
    }
    .surface-card {
        background: rgba(255,255,255,.96);
        border: 1px solid rgba(0, 102, 204, .12);
        border-radius: 16px;
        box-shadow: 0 10px 26px rgba(15, 46, 95, 0.08);
    }
    .policy-card {
        background: rgba(255,255,255,.96);
        border: 1px solid rgba(0, 102, 204, .1);
        border-radius: 16px;
        padding: 28px;
        box-shadow: 0 12px 28px rgba(15, 46, 95, 0.08);
    }
    .policy-card h4 i { color: var(--primary) !important; }
    .contact-form-card,
    .map-card,
    .checkout-card,
    .status-card {
        background: rgba(255,255,255,.97);
        border: 1px solid rgba(0, 102, 204, .12);
        border-radius: 16px;
        box-shadow: 0 12px 26px rgba(15, 46, 95, 0.1);
    }
    .contact-form-card,
    .checkout-card,
    .status-card { padding: 24px; }
    .mini-cta {
        background: linear-gradient(135deg, rgba(0,102,204,.08), rgba(0,180,255,.08));
        border: 1px solid rgba(0, 102, 204, .14);
        border-radius: 14px;
        padding: 18px;
    }
    .shop-media {
        height: 200px;
        overflow: hidden;
        background: linear-gradient(135deg, #0a4ca1, #00a9f0);
    }
    .category-badge {
        background: rgba(0, 102, 204, .12);
        color: #0a4ca1;
        border: 1px solid rgba(0, 102, 204, .16);
        font-weight: 700;
    }
    .status-icon {
        width: 86px;
        height: 86px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 2.4rem;
        margin-bottom: 14px;
    }
    .status-icon.success {
        background: rgba(0, 194, 168, .12);
        color: #00a48f;
    }
    .status-icon.cancel {
        background: rgba(255, 84, 84, .12);
        color: #d83a3a;
    }
    @keyframes pulse {
        0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.7); }
        70% { box-shadow: 0 0 0 15px rgba(37,211,102,0); }
        100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
    }
    @media (max-width: 768px) {
        .hero h1 { font-size: 2rem; }
        .hero { padding: 80px 0 50px; }
        .section { padding: 50px 0; }
        .section-title h2 { font-size: 1.8rem; }
        .btn-login-custom { width: 100%; text-align: center; }
        .policy-card,
        .contact-form-card,
        .checkout-card,
        .status-card { padding: 18px; }
        .cek-tagihan-box { padding: 16px; max-width: 100%; }
        .cek-tagihan-form { flex-direction: column; }
        .cek-tagihan-form .cek-input { border-radius: 10px !important; }
        .cek-tagihan-form .btn { border-radius: 10px !important; width: 100%; }
    }
    .cek-tagihan-box {
        background: rgba(255,255,255,0.12);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255,255,255,0.2);
        border-radius: 16px;
        padding: 20px 24px;
        max-width: 540px;
    }
    .cek-tagihan-header {
        font-size: 0.9rem;
        font-weight: 700;
        color: rgba(255,255,255,0.9);
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .cek-tagihan-form {
        display: flex;
        gap: 10px;
    }
    .cek-tagihan-form .cek-input {
        flex: 1;
        padding: 12px 16px;
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,0.25);
        background: rgba(255,255,255,0.15);
        color: #fff;
        font-size: 0.95rem;
        outline: none;
        transition: all 0.25s ease;
    }
    .cek-tagihan-form .cek-input::placeholder { color: rgba(255,255,255,0.6); }
    .cek-tagihan-form .cek-input:focus {
        background: rgba(255,255,255,0.22);
        border-color: rgba(255,255,255,0.5);
        box-shadow: 0 0 0 3px rgba(255,255,255,0.1);
    }
    .cek-tagihan-form .btn { white-space: nowrap; }
    #hasilCek {
        margin-top: 14px;
    }
    @keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
    @keyframes spin { to { transform: rotate(360deg); } }