/* =========================================
   RESET
========================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Poppins", sans-serif;
    color: #102a43;
    background: #f5fbff;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

button,
input,
textarea {
    font-family: inherit;
}

button {
    cursor: pointer;
}

.container {
    width: min(1150px, 92%);
    margin: auto;
}

/* =========================================
   FLOATING LIQUID GLASS NAVBAR
   Ganti bagian NAVBAR lama dengan ini
========================================= */

.navbar {
    position: fixed;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);

    width: min(1080px, 92%);
    height: 68px;

    z-index: 1000;

    /* Liquid Glass */
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.62),
            rgba(255, 255, 255, 0.24)
        );

    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);

    border: 1px solid rgba(255, 255, 255, 0.65);

    border-radius: 22px;

    box-shadow:
        0 15px 40px rgba(5, 55, 100, 0.16),
        0 4px 12px rgba(5, 55, 100, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 0 -1px 0 rgba(255, 255, 255, 0.15);

    transition:
        top 0.3s ease,
        width 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}


/* Efek cahaya pada navbar */

.navbar::before {
    content: "";

    position: absolute;

    top: 0;
    left: 8%;

    width: 84%;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.95),
        transparent
    );

    pointer-events: none;
}


/* Efek glow kecil */

.navbar::after {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    top: -80px;
    right: 80px;

    border-radius: 50%;

    background: rgba(105, 215, 255, 0.2);

    filter: blur(30px);

    pointer-events: none;
}


.nav-container {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 8px;
}


/* =========================================
   LOGO
========================================= */

.logo {
    display: flex;
    align-items: center;
    gap: 10px;

    padding-left: 5px;
}

.logo-box {
    width: 43px;
    height: 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #8bdcff,
            #0864b8,
            #052d66
        );

    color: white;

    box-shadow:
        0 7px 18px rgba(10, 102, 180, 0.25),
        inset 0 1px 1px rgba(255,255,255,0.45);
}

.logo-box span {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.logo-text {
    display: flex;
    flex-direction: column;

    line-height: 1.1;
}

.logo-text strong {
    color: #073d72;
    font-size: 14px;
}

.logo-text span {
    color: #6286a5;
    font-size: 9px;
}


/* =========================================
   NAV MENU
========================================= */

.nav-menu {
    display: flex;
    align-items: center;
    gap: 3px;

    padding: 5px;

    border-radius: 15px;

    background: rgba(255,255,255,0.16);
}


.nav-link {
    position: relative;

    padding: 9px 12px;

    border-radius: 11px;

    font-size: 12px;
    font-weight: 500;

    color: #4d6d88;

    transition:
        color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;
}


.nav-link:hover {
    color: #07549d;

    background: rgba(255,255,255,0.42);

    transform: translateY(-1px);
}


.nav-link.active {
    color: #07549d;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.65),
            rgba(255,255,255,0.3)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.8),
        0 4px 12px rgba(30,100,150,0.08);
}


.nav-link::after {
    display: none;
}


/* =========================================
   NAVBAR SCROLL
========================================= */

.navbar.scrolled {
    top: 12px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.72),
            rgba(255,255,255,0.3)
        );

    box-shadow:
        0 18px 45px rgba(5, 55, 100, 0.2),
        inset 0 1px 0 rgba(255,255,255,0.85);
}


/* =========================================
   MOBILE BUTTON
========================================= */

.menu-toggle {
    width: 42px;
    height: 42px;

    display: none;

    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,0.55);

    border-radius: 13px;

    color: #07549d;

    background:
        rgba(255,255,255,0.38);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.7);

    backdrop-filter: blur(12px);
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 800px) {

    .navbar {
        top: 12px;

        width: 94%;
        height: 64px;

        border-radius: 19px;
    }

    .navbar.scrolled {
        top: 8px;
    }

    .nav-container {
        padding: 0 7px;
    }

    .menu-toggle {
        display: flex;
    }

    .nav-menu {
        position: absolute;

        top: 73px;
        left: 0;

        width: 100%;

        padding: 9px;

        display: none;
        flex-direction: column;
        align-items: stretch;

        gap: 3px;

        border-radius: 19px;

        background:
            linear-gradient(
                135deg,
                rgba(255,255,255,0.75),
                rgba(255,255,255,0.35)
            );

        border: 1px solid rgba(255,255,255,0.65);

        box-shadow:
            0 18px 40px rgba(5,55,100,0.18),
            inset 0 1px 0 rgba(255,255,255,0.85);

        backdrop-filter: blur(24px) saturate(160%);
        -webkit-backdrop-filter: blur(24px) saturate(160%);
    }

    .nav-menu.active {
        display: flex;
    }

    .nav-link {
        padding: 12px 14px;

        border-radius: 12px;

        font-size: 12px;
    }

    .nav-link::after {
        display: none;
    }

    .logo-text strong {
        font-size: 13px;
    }

    .logo-text span {
        font-size: 8px;
    }

}

/* =========================================
   HERO
========================================= */

.hero {
    min-height: 100vh;

    position: relative;
    overflow: hidden;

    padding: 150px 0 80px;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(116, 222, 255, 0.5),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #e8f9ff 0%,
            #a9e6ff 30%,
            #338bc9 65%,
            #052d66 100%
        );
}

.hero::before {
    content: "";

    position: absolute;
    width: 600px;
    height: 600px;

    border-radius: 50%;

    background: rgba(255,255,255,0.08);

    top: -250px;
    right: -150px;
}

.hero-content {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 60px;
}


/* HERO TEXT */

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 15px;

    border-radius: 50px;

    background: rgba(255,255,255,0.6);
    color: #07549d;

    font-size: 12px;
    font-weight: 600;

    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

.hero-badge i {
    color: #0989d0;
}

.hero h1 {
    margin-top: 22px;

    max-width: 680px;

    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.08;

    color: #062c59;
    letter-spacing: -2px;
}

.hero h1 span {
    display: block;
    color:#005da5 !important;
    opacity: 1 !important;
}

.hero-text > p {
    max-width: 600px;

    margin-top: 22px;

    color:#062c59 !important;

    font-size: 15px;
    font-weight: 700;
    line-height: 1.9;
}


/* HERO BUTTONS */

.hero-buttons {
    display: flex;
    gap: 13px;

    margin-top: 30px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 48px;
    padding: 0 22px;

    border: 0;
    border-radius: 13px;

    font-size: 13px;
    font-weight: 600;

    transition: 0.3s ease;
}

.btn-primary {
    color: white;

    background: linear-gradient(
        135deg,
        #087ed1,
        #063d80
    );

    box-shadow: 0 10px 25px rgba(0, 70, 140, 0.25);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 70, 140, 0.3);
}

.btn-outline {
    color: white;

    border: 1px solid rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.1);
}

.btn-outline:hover {
    background: white;
    color: #07549d;
}


/* STATS */

.hero-stats {
    display: flex;
    gap: 35px;

    margin-top: 42px;
}

.stat {
    display: flex;
    flex-direction: column;
}

.stat strong {
    font-size: 22px;
    color:#005da5;
}

.stat span {
    font-size: 10px;
    color: #005da5;
}

/* =========================================
   PRIMA IMAGE + SOFT GLOW
========================================= */

.hero-content img {
    width: 260px;
    max-width: none;
    height: auto;

    display: block;
    object-fit: contain;

    position: relative;
    left: 190px;

    transform: scale(1.45);

    /* GLOW BIRU DI BELAKANG GAMBAR */
    filter:
        drop-shadow(0 0 12px rgba(120, 230, 255, 0.75))
        drop-shadow(0 0 30px rgba(70, 210, 255, 0.55))
        drop-shadow(0 0 60px rgba(30, 170, 255, 0.35))
        drop-shadow(0 25px 30px rgba(0, 40, 100, 0.30));

    animation: primaFloat 5s ease-in-out infinite;
}

@keyframes primaFloat {
    0% {
        transform: scale(1.45) translateY(0);
    }

    50% {
        transform: scale(1.45) translateY(-10px);
    }

    100% {
        transform: scale(1.45) translateY(0);
    }
}

/* =========================================
   GENERAL SECTION
========================================= */

.section {
    padding: 105px 0;
}

.section-heading {
    max-width: 900px;
    margin: 0 auto 60px;
    text-align: center;
}

.section-label {
    display: block;

    margin-bottom: 16px;

    color: #0878c5;

    font-size: 14px;
    font-weight: 800;

    letter-spacing: 3px;
}

.section-heading h2 {
    max-width: 850px;

    margin: 0 auto;

    color: #092f56;

    font-size: clamp(38px, 5vw, 58px);

    font-weight: 800;

    line-height: 1.12;

    letter-spacing: -1.5px;
}

.section-heading p {
    max-width: 650px;

    margin: 18px auto 0;

    color: #71879a;

    font-size: 14px;

    line-height: 1.8;
}

/* =========================================
   TENTANG KAMI - PREMIUM
========================================= */

.about {
    position: relative;
    overflow: hidden;

    padding: 115px 0;

    background:
        radial-gradient(
            circle at 5% 20%,
            rgba(101, 213, 255, 0.12),
            transparent 28%
        ),
        radial-gradient(
            circle at 95% 80%,
            rgba(0, 120, 210, 0.08),
            transparent 30%
        ),
        #ffffff;
}


/* Background decoration */

.about::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    top: 80px;
    left: -250px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            rgba(111, 220, 255, 0.14),
            rgba(20, 119, 205, 0.03)
        );

    filter: blur(5px);

    pointer-events: none;
}


/* =========================================
   HEADER
========================================= */

.about-heading {
    margin-bottom: 70px;
}

.about-heading .section-label {
    color: #087bc5;
}

.about-heading h2 {
    color: #082f59;
}

.about-heading p {
    color: #71879a;
}


/* =========================================
   MAIN GRID
========================================= */

.about-main {
    display: grid;

    grid-template-columns:
        0.9fr
        1.3fr
        0.55fr;

    gap: 45px;

    align-items: center;
}


/* =========================================
   VISUAL
========================================= */

.about-visual {
    position: relative;

    min-height: 470px;
}


.about-image {
    position: relative;

    width: 100%;
    height: 440px;

    overflow: hidden;

    border-radius: 32px;

    background:
        linear-gradient(
            145deg,
            #dff7ff,
            #83d6f7 45%,
            #0869b7
        );

    border: 1px solid rgba(255,255,255,0.8);

    box-shadow:
        0 30px 70px rgba(12, 87, 135, 0.18),
        inset 0 1px 0 rgba(255,255,255,0.8);
}


/* Gedung / visual abstrak */

.about-image::before {
    content: "PLD";

    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        rotate(-8deg);

    font-size: 130px;

    font-weight: 900;

    letter-spacing: -12px;

    color: rgba(255,255,255,0.22);

    text-shadow:
        0 10px 30px rgba(0,50,100,0.15);
}


.about-image::after {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    right: -80px;
    bottom: -100px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,0.45),
            transparent 70%
        );
}


/* Overlay */

.about-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(0,46,90,0.28)
        );

    z-index: 2;
}


/* =========================================
   BADGE
========================================= */

.about-badge {
    position: absolute;

    z-index: 4;

    left: 22px;
    bottom: 22px;

    display: flex;
    flex-direction: column;

    padding: 17px 20px;

    min-width: 145px;

    border-radius: 17px;

    color: white;

    background:
        rgba(5, 53, 100, 0.75);

    border: 1px solid rgba(255,255,255,0.3);

    backdrop-filter: blur(15px);

    box-shadow:
        0 15px 35px rgba(0,40,80,0.2);
}

.about-badge strong {
    font-size: 19px;
    letter-spacing: 2px;
}

.about-badge span {
    margin-top: 3px;

    color: #c9efff;

    font-size: 10px;
}


/* =========================================
   FLOATING CARD
========================================= */

.about-floating-card {
    position: absolute;

    z-index: 5;

    right: -30px;
    top: 55px;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 15px 18px;

    border-radius: 17px;

    background:
        rgba(255,255,255,0.9);

    border: 1px solid rgba(255,255,255,0.9);

    box-shadow:
        0 20px 45px rgba(20,90,135,0.15);

    backdrop-filter: blur(18px);

    animation: aboutFloat 4s ease-in-out infinite;
}

.about-floating-icon {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #61d8ff,
            #0671c5
        );
}

.about-floating-card strong {
    display: block;

    color: #0a3a64;

    font-size: 11px;
}

.about-floating-card span {
    display: block;

    margin-top: 3px;

    color: #7c94a7;

    font-size: 9px;
}


@keyframes aboutFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

}


/* =========================================
   ABOUT CONTENT
========================================= */

.about-content {
    padding: 10px 0;
}


.about-small-title {
    display: inline-block;

    margin-bottom: 14px;

    color: #087bc5;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 2.5px;
}


.about-content h3 {
    max-width: 570px;

    color: #082f59;

    font-size: clamp(28px, 3vw, 39px);

    line-height: 1.2;

    letter-spacing: -1px;
}


.about-content p {
    max-width: 590px;

    margin-top: 17px;

    color: #6d8498;

    font-size: 13px;

    line-height: 1.9;
}


/* =========================================
   CHECKLIST
========================================= */

.about-checklist {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px 20px;

    margin-top: 28px;
}


.about-checklist div {
    display: flex;
    align-items: center;

    gap: 10px;

    color: #456b88;

    font-size: 11px;
}


.about-checklist i {
    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    color: white;

    background:
        linear-gradient(
            135deg,
            #24b8ed,
            #0671be
        );

    font-size: 9px;

    box-shadow:
        0 5px 12px rgba(0,110,180,0.18);
}


/* =========================================
   BUTTON
========================================= */

.about-button {
    margin-top: 30px;
}


/* =========================================
   STATISTICS
========================================= */

.about-stat-card {
    padding: 18px;

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #f5fcff,
            #e6f7ff
        );

    border: 1px solid #d6eef8;

    box-shadow:
        0 20px 45px rgba(30,100,145,0.08);
}


.about-stat {
    display: flex;
    align-items: center;

    gap: 15px;

    padding: 18px 5px;

    border-bottom: 1px solid #d6eaf3;
}


.about-stat:last-child {
    border-bottom: 0;
}


.about-stat-icon {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 12px;

    color: #087bc5;

    background: white;

    box-shadow:
        0 7px 18px rgba(20,100,150,0.08);
}


.about-stat strong {
    display: block;

    color: #0874bd;

    font-size: 17px;
}


.about-stat span {
    display: block;

    margin-top: 2px;

    color: #7890a3;

    font-size: 9px;
}


/* =========================================
   VISI MISI NILAI
========================================= */

.about-info-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 22px;

    margin-top: 80px;
}


.about-info-card {
    position: relative;

    padding: 30px;

    min-height: 245px;

    overflow: hidden;

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f1faff
        );

    border: 1px solid #dceef7;

    box-shadow:
        0 15px 40px rgba(30,100,150,0.06);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


.about-info-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 25px 50px rgba(20,100,150,0.12);
}


.about-info-card::after {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    right: -60px;
    bottom: -60px;

    border-radius: 50%;

    background:
        rgba(83,205,246,0.12);
}


.about-info-icon {
    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 15px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #63d7ff,
            #0870bd
        );

    box-shadow:
        0 10px 25px rgba(10,110,180,0.18);
}


.about-info-card > span {
    display: block;

    margin-top: 25px;

    color: #78b8d8;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 2px;
}


.about-info-card h3 {
    margin-top: 6px;

    color: #09365e;

    font-size: 21px;
}


.about-info-card p {
    position: relative;
    z-index: 2;

    margin-top: 10px;

    color: #70889b;

    font-size: 12px;

    line-height: 1.8;
}


/* =========================================
   CTA
========================================= */

.about-cta {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-top: 70px;

    padding: 35px 40px;

    overflow: hidden;

    border-radius: 27px;

    background:
        linear-gradient(
            120deg,
            #073c78,
            #087dc7,
            #4bc9f5
        );

    box-shadow:
        0 25px 55px rgba(5,80,140,0.2);
}


.about-cta::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: -80px;
    top: -180px;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.13);
}


.about-cta span {
    position: relative;
    z-index: 2;

    color: #aeeaff;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 2px;
}


.about-cta h3 {
    position: relative;
    z-index: 2;

    max-width: 570px;

    margin-top: 7px;

    color: white;

    font-size: 24px;

    line-height: 1.3;
}


.about-cta .btn {
    position: relative;
    z-index: 2;

    flex-shrink: 0;

    color: #07549d;

    background: white;

    box-shadow:
        0 10px 25px rgba(0,30,80,0.15);
}


.about-cta .btn:hover {
    transform: translateY(-3px);

    background: #effaff;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1100px) {

    .about-main {
        grid-template-columns:
            0.8fr
            1.2fr;
    }

    .about-stat-card {
        grid-column: 1 / -1;

        display: grid;

        grid-template-columns:
            repeat(4, 1fr);

        gap: 10px;
    }

    .about-stat {
        border-bottom: 0;
        border-right: 1px solid #d6eaf3;
    }

    .about-stat:last-child {
        border-right: 0;
    }

}


@media (max-width: 800px) {

    .about {
        padding: 85px 0;
    }

    .about-main {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .about-visual {
        min-height: 400px;
        max-width: 550px;
        margin: auto;
        width: 100%;
    }

    .about-image {
        height: 390px;
    }

    .about-floating-card {
        right: 10px;
    }

    .about-stat-card {
        grid-template-columns: 1fr 1fr;
    }

    .about-stat {
        border-right: 0;
        border-bottom: 1px solid #d6eaf3;
    }

    .about-stat:nth-child(odd) {
        border-right: 1px solid #d6eaf3;
    }

    .about-stat:nth-last-child(-n+2) {
        border-bottom: 0;
    }

    .about-info-grid {
        grid-template-columns: 1fr;
        margin-top: 55px;
    }

    .about-cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 30px;
    }

}


@media (max-width: 550px) {

    .about-heading {
        margin-bottom: 50px;
    }

    .about-heading h2 {
        font-size: 34px;
    }

    .about-visual {
        min-height: 350px;
    }

    .about-image {
        height: 340px;
        border-radius: 25px;
    }

    .about-image::before {
        font-size: 90px;
    }

    .about-floating-card {
        top: 25px;
        right: 5px;

        padding: 12px;
    }

    .about-floating-icon {
        width: 35px;
        height: 35px;
    }

    .about-floating-card strong {
        font-size: 10px;
    }

    .about-content h3 {
        font-size: 29px;
    }

    .about-checklist {
        grid-template-columns: 1fr;
    }

    .about-stat-card {
        grid-template-columns: 1fr;
    }

    .about-stat {
        border-right: 0 !important;
        border-bottom: 1px solid #d6eaf3 !important;
    }

    .about-stat:last-child {
        border-bottom: 0 !important;
    }

    .about-info-card {
        min-height: auto;
    }

    .about-cta h3 {
        font-size: 21px;
    }

}

/* =========================================
   SERVICES - PREMIUM MODERN
   HANYA UNTUK BAGIAN LAYANAN
========================================= */

.services {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(86, 204, 255, 0.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 75%,
            rgba(30, 120, 220, 0.08),
            transparent 30%
        ),
        #f7fcff;
}


/* =========================================
   SERVICE GRID
========================================= */

.services-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 22px;

    position: relative;
    z-index: 2;
}


/* =========================================
   SERVICE CARD
========================================= */

.service-card {
    position: relative;

    min-height: 335px;

    padding: 28px 25px;

    overflow: hidden;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.95),
            rgba(239,249,255,0.82)
        );

    border: 1px solid rgba(207,231,243,0.9);

    box-shadow:
        0 18px 40px rgba(27,101,145,0.08),
        0 5px 15px rgba(27,101,145,0.04);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;

    isolation: isolate;
}


/* =========================================
   GLOW
========================================= */

.service-card::before {
    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    top: -95px;
    right: -70px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(82,204,255,0.25),
            transparent 68%
        );

    filter: blur(5px);

    transition:
        transform 0.5s ease,
        opacity 0.5s ease;

    z-index: -1;
}


.service-card::after {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    bottom: -75px;
    left: -65px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(74,170,235,0.12),
            transparent 70%
        );

    z-index: -1;
}


/* =========================================
   HOVER CARD
========================================= */

.service-card:hover {
    transform: translateY(-12px);

    border-color:
        rgba(103,208,246,0.7);

    box-shadow:
        0 30px 65px rgba(20,108,160,0.15),
        0 10px 25px rgba(20,108,160,0.07);
}


.service-card:hover::before {
    transform: scale(1.35);

    opacity: 1;
}


/* =========================================
   TOP NUMBER
========================================= */

.service-card .service-number {
    position: absolute;

    top: 20px;
    right: 23px;

    color: #b8d9e8;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1px;

    transition: 0.3s ease;
}


.service-card:hover .service-number {
    color: #4db9e8;
}


/* =========================================
   ICON
========================================= */

.service-icon {
    position: relative;

    width: 72px;
    height: 72px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 21px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #55d5ff,
            #0878c7
        );

    box-shadow:
        0 14px 30px rgba(10,116,185,0.22),
        inset 0 1px 0 rgba(255,255,255,0.55);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}


.service-icon::before {
    content: "";

    position: absolute;

    inset: 4px;

    border-radius: 17px;

    border: 1px solid rgba(255,255,255,0.25);
}


.service-icon i {
    position: relative;
    z-index: 2;

    font-size: 25px;
}


.service-card:hover .service-icon {
    transform:
        translateY(-5px)
        rotate(-4deg)
        scale(1.06);

    box-shadow:
        0 20px 38px rgba(10,116,185,0.3),
        inset 0 1px 0 rgba(255,255,255,0.65);
}


/* =========================================
   SERVICE TITLE
========================================= */

.service-card h3 {
    position: relative;

    margin-top: 27px;

    color: #07345d;

    font-size: 19px;
    font-weight: 800;

    letter-spacing: -0.3px;
}


.service-card p {
    position: relative;

    max-width: 260px;

    margin-top: 11px;

    color: #71899c;

    font-size: 12px;

    line-height: 1.85;
}


/* =========================================
   SERVICE TAG
========================================= */

.service-tag {
    display: inline-flex;
    align-items: center;

    margin-top: 17px;

    padding: 6px 10px;

    border-radius: 50px;

    color: #0877bd;

    background: #e8f7ff;

    border: 1px solid #d2effb;

    font-size: 9px;
    font-weight: 700;
}


/* =========================================
   LEARN MORE
========================================= */

.learn-more {
    position: absolute;

    left: 25px;
    bottom: 22px;

    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding: 9px 13px;

    border: 0;

    border-radius: 50px;

    color: #0878c5;

    background:
        rgba(222,244,253,0.8);

    font-size: 10px;
    font-weight: 800;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.learn-more i {
    transition: transform 0.3s ease;
}


.learn-more:hover {
    color: white;

    background:
        linear-gradient(
            135deg,
            #24b8ed,
            #0871bd
        );

    transform: translateX(3px);
}


.learn-more:hover i {
    transform: translateX(4px);
}


/* =========================================
   CARD COLOR VARIATIONS
========================================= */

.service-card:nth-child(1) .service-icon {
    background:
        linear-gradient(
            135deg,
            #62d8ff,
            #0877c5
        );
}

.service-card:nth-child(1) .service-tag {
    color: #0878c5;
    background: #e6f8ff;
}


.service-card:nth-child(2) .service-icon {
    background:
        linear-gradient(
            135deg,
            #72e4c0,
            #079c83
        );
}

.service-card:nth-child(2) .service-tag {
    color: #078d76;
    background: #e8fbf5;
}


.service-card:nth-child(3) .service-icon {
    background:
        linear-gradient(
            135deg,
            #76a9ff,
            #4268d8
        );
}

.service-card:nth-child(3) .service-tag {
    color: #4869ce;
    background: #edf1ff;
}


.service-card:nth-child(4) .service-icon {
    background:
        linear-gradient(
            135deg,
            #ffd95c,
            #ef9c09
        );
}

.service-card:nth-child(4) .service-tag {
    color: #d78c05;
    background: #fff8df;
}


.service-card:nth-child(5) .service-icon {
    background:
        linear-gradient(
            135deg,
            #a78bff,
            #6944d6
        );
}

.service-card:nth-child(5) .service-tag {
    color: #7050d5;
    background: #f2eeff;
}


/* =========================================
   TOP UP GAME - BENAR-BENAR DI TENGAH
========================================= */

.service-card:nth-child(5) {
    grid-column: 2 / 4;
    width: 70%;
    max-width: 300px;
    justify-self: center;
}

/* =========================================
   DECORATIVE LINE
========================================= */

.service-card h3::after {
    content: "";

    display: block;

    width: 28px;
    height: 3px;

    margin-top: 9px;

    border-radius: 50px;

    background:
        linear-gradient(
            90deg,
            #37bce9,
            transparent
        );

    transition: width 0.35s ease;
}


.service-card:hover h3::after {
    width: 55px;
}


/* =========================================
   RESPONSIVE TABLET
========================================= */

@media (max-width: 1000px) {

    .services-grid {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 20px;
    }

    .service-card:nth-child(5) {
        grid-column: 1 / 3;
        justify-self: center;
        width: 50%;
    }

}


/* =========================================
   RESPONSIVE MOBILE
========================================= */

@media (max-width: 600px) {

    .services-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .service-card {
        min-height: 315px;

        padding: 25px 22px;

        border-radius: 24px;
    }

    .service-card:nth-child(5) {
        grid-column: auto;
        width: 100%;
    }

    .service-icon {
        width: 65px;
        height: 65px;

        border-radius: 19px;
    }

    .service-icon i {
        font-size: 22px;
    }

    .service-card h3 {
        font-size: 18px;
    }

    .service-card p {
        font-size: 12px;
    }

    .learn-more {
        left: 22px;
        bottom: 20px;
    }

}

/* =========================================
   INFORMATION - PREMIUM NEW DESIGN
========================================= */

.information {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 0% 20%,
            rgba(90, 210, 255, 0.13),
            transparent 30%
        ),
        radial-gradient(
            circle at 100% 80%,
            rgba(120, 150, 255, 0.10),
            transparent 30%
        ),
        #f8fcff;
}


/* =========================================
   INFORMATION GRID
========================================= */

.information-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 25px;

    position: relative;

    z-index: 2;
}


/* =========================================
   CARD
========================================= */

.info-card {
    position: relative;

    overflow: hidden;

    border-radius: 30px;

    background: rgba(255,255,255,0.88);

    border: 1px solid rgba(205,228,240,0.9);

    box-shadow:
        0 20px 45px rgba(22,93,135,0.08),
        0 5px 15px rgba(22,93,135,0.04);

    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease,
        border-color 0.45s ease;
}


.info-card:hover {
    transform: translateY(-12px);

    border-color:
        rgba(74,190,235,0.65);

    box-shadow:
        0 35px 70px rgba(22,93,135,0.14),
        0 10px 25px rgba(22,93,135,0.07);
}


/* =========================================
   VISUAL AREA
========================================= */

.info-visual {
    position: relative;

    height: 205px;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #bdefff 0%,
            #58c9ef 48%,
            #0872bd 100%
        );
}


/* =========================================
   CARD COLORS
========================================= */

.info-card-blue .info-visual {
    background:
        linear-gradient(
            135deg,
            #c7f3ff,
            #54c8ed 48%,
            #0871bd
        );
}


.info-card-cyan .info-visual {
    background:
        linear-gradient(
            135deg,
            #c8fff2,
            #48d0bd 48%,
            #078d83
        );
}


.info-card-purple .info-visual {
    background:
        linear-gradient(
            135deg,
            #ddd5ff,
            #9b88ee 48%,
            #6245ce
        );
}


/* =========================================
   LIGHT GLOW
========================================= */

.info-visual::before {
    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    top: -125px;
    right: -70px;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.25);

    filter: blur(5px);
}


.info-visual::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    bottom: -125px;
    left: -70px;

    border-radius: 50%;

    border:
        1px solid rgba(255,255,255,0.25);
}


/* =========================================
   ORBIT
========================================= */

.visual-orbit {
    position: absolute;

    border:
        1px solid rgba(255,255,255,0.28);

    border-radius: 50%;

    pointer-events: none;
}


.orbit-one {
    width: 250px;
    height: 250px;

    transform: rotate(-25deg);
}


.orbit-two {
    width: 170px;
    height: 170px;

    transform: rotate(35deg);
}


/* =========================================
   MAIN ICON
========================================= */

.visual-icon {
    position: relative;

    z-index: 5;

    width: 88px;
    height: 88px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 27px;

    color: white;

    background:
        rgba(255,255,255,0.20);

    border:
        1px solid rgba(255,255,255,0.45);

    box-shadow:
        0 20px 40px rgba(0,50,100,0.18),
        inset 0 1px 0 rgba(255,255,255,0.65);

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);

    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease;
}


.visual-icon span {
    font-size: 38px;

    font-weight: 700;

    line-height: 1;
}


.info-card:hover .visual-icon {
    transform:
        translateY(-7px)
        rotate(-5deg)
        scale(1.08);

    box-shadow:
        0 25px 50px rgba(0,50,100,0.25),
        inset 0 1px 0 rgba(255,255,255,0.75);
}


/* =========================================
   VISUAL BADGE
========================================= */

.visual-badge {
    position: absolute;

    right: 18px;
    bottom: 17px;

    z-index: 5;

    padding: 7px 11px;

    border-radius: 50px;

    color: white;

    background:
        rgba(255,255,255,0.18);

    border:
        1px solid rgba(255,255,255,0.35);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


/* =========================================
   CONTENT
========================================= */

.info-content {
    padding: 25px 25px 27px;
}


/* =========================================
   DATE
========================================= */

.info-date {
    display: inline-flex;

    padding: 6px 11px;

    border-radius: 50px;

    color: #087bc5;

    background:
        #e8f7ff;

    border:
        1px solid #d4edf8;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.5px;
}


/* =========================================
   TITLE
========================================= */

.info-content h3 {
    position: relative;

    margin-top: 14px;

    color: #082f59;

    font-size: 19px;

    font-weight: 800;

    line-height: 1.4;

    letter-spacing: -0.4px;
}


/* =========================================
   TITLE LINE
========================================= */

.info-content h3::after {
    content: "";

    display: block;

    width: 30px;
    height: 3px;

    margin-top: 11px;

    border-radius: 50px;

    background:
        linear-gradient(
            90deg,
            #35bce9,
            transparent
        );

    transition:
        width 0.4s ease;
}


.info-card:hover .info-content h3::after {
    width: 65px;
}


/* =========================================
   DESCRIPTION
========================================= */

.info-content p {
    margin-top: 13px;

    color: #71899c;

    font-size: 12px;

    line-height: 1.85;
}


/* =========================================
   BUTTON
========================================= */

.info-button {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-top: 21px;

    padding: 10px 15px;

    border: 0;

    border-radius: 50px;

    color: #0878c5;

    background:
        #e9f7ff;

    font-size: 10px;

    font-weight: 800;

    cursor: pointer;

    transition:
        0.3s ease;
}


.info-button span {
    transition:
        transform 0.3s ease;
}


.info-button:hover {
    color: white;

    background:
        linear-gradient(
            135deg,
            #25b9ec,
            #0872bd
        );

    transform:
        translateX(3px);
}


.info-button:hover span {
    transform:
        translateX(4px);
}


/* =========================================
   RESPONSIVE TABLET
========================================= */

@media (max-width: 950px) {

    .information-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


/* =========================================
   RESPONSIVE MOBILE
========================================= */

@media (max-width: 600px) {

    .information-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .info-card {
        border-radius: 25px;
    }

    .info-visual {
        height: 190px;
    }

    .visual-icon {
        width: 78px;
        height: 78px;

        border-radius: 23px;
    }

    .visual-icon span {
        font-size: 32px;
    }

    .info-content {
        padding: 22px;
    }

    .info-content h3 {
        font-size: 18px;
    }

}

/* =========================================
   E-COMMERCE - PREMIUM BLUE GLASS
========================================= */

.ecommerce {
    position: relative;
    padding: 90px 0 100px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(117, 221, 255, .45),
            transparent 30%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(28, 126, 255, .35),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #0758c9 0%,
            #079ee8 48%,
            #59cfff 100%
        );
}

/* Dekorasi background */
.ecommerce::before {
    content: "";
    position: absolute;

    width: 650px;
    height: 650px;

    right: -180px;
    top: -300px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.16);

    box-shadow:
        0 0 0 55px rgba(255,255,255,.035),
        0 0 0 110px rgba(255,255,255,.025),
        0 0 0 165px rgba(255,255,255,.018);

    pointer-events: none;
}

.ecommerce::after {
    content: "";
    position: absolute;

    width: 420px;
    height: 420px;

    left: -180px;
    bottom: -250px;

    border-radius: 50%;

    border: 2px solid rgba(255,255,255,.16);

    box-shadow:
        0 0 0 35px rgba(255,255,255,.04),
        0 0 0 70px rgba(255,255,255,.025),
        0 0 0 105px rgba(255,255,255,.018);

    pointer-events: none;
}


/* =========================================
   CONTAINER
========================================= */

.ecommerce .container {
    position: relative;
    z-index: 2;
}


/* =========================================
   MAIN GLASS BOX
========================================= */

.ecommerce-box {
    position: relative;

    width: 100%;
    min-height: 360px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 60px;

    padding: 60px 70px;

    overflow: hidden;

    border-radius: 34px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.27),
            rgba(255,255,255,.10)
        );

    border: 1px solid rgba(255,255,255,.35);

    box-shadow:
        0 30px 80px rgba(0,55,130,.30),
        inset 0 1px 0 rgba(255,255,255,.45);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}


/* Glass glow */
.ecommerce-box::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -180px;
    top: -250px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.20),
            transparent 68%
        );

    pointer-events: none;
}


/* Bottom glow */
.ecommerce-box::after {
    content: "";

    position: absolute;

    width: 350px;
    height: 180px;

    left: -120px;
    bottom: -120px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(255,255,255,.13),
            transparent 70%
        );

    pointer-events: none;
}


/* =========================================
   CONTENT
========================================= */

.ecommerce-content {
    position: relative;
    z-index: 5;

    max-width: 700px;
}


/* =========================================
   LABEL
========================================= */

.ecommerce .section-label {
    display: inline-flex;
    align-items: center;

    padding: 8px 16px;

    border-radius: 50px;

    color: #075fc7;

    background: rgba(255,255,255,.55);

    border: 1px solid rgba(255,255,255,.55);

    box-shadow:
        0 8px 20px rgba(0,60,140,.10);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 2px;
}


/* =========================================
   TITLE
========================================= */

.ecommerce h2 {
    margin-top: 20px;

    color: #c5d0dd;

    font-size: clamp(36px, 4vw, 52px);

    font-weight: 850;

    line-height: 1.08;

    letter-spacing: -1.5px;
}


/* =========================================
   DESCRIPTION
========================================= */

.ecommerce p {
    max-width: 650px;

    margin-top: 18px;

    color: #b2c5d6;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.8;
}


/* =========================================
   BUTTON
========================================= */

.ecommerce .btn-white {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    margin-top: 28px;

    padding: 14px 22px;

    min-height: 50px;

    border-radius: 50px;

    color: #0767d5;

    background: #ffffff;

    border: 1px solid rgba(255,255,255,.8);

    box-shadow:
        0 15px 35px rgba(0,60,140,.20);

    font-weight: 700;

    text-decoration: none;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.ecommerce .btn-white:hover {
    transform: translateY(-4px);

    box-shadow:
        0 20px 40px rgba(0,60,140,.27);
}


/* =========================================
   ICON
========================================= */

.ecommerce-icon {
    position: relative;

    z-index: 5;

    flex-shrink: 0;

    width: 150px;
    height: 150px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-right: 10px;

    border-radius: 40px;

    color: #159ce8;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.72),
            rgba(255,255,255,.35)
        );

    border: 1px solid rgba(255,255,255,.55);

    box-shadow:
        0 25px 55px rgba(0,70,150,.18),
        inset 0 1px 0 rgba(255,255,255,.8);

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    font-size: 62px;

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}


/* Outer icon ring */
.ecommerce-icon::before {
    content: "";

    position: absolute;

    inset: -20px;

    border-radius: 52px;

    border: 1px solid rgba(255,255,255,.18);

    box-shadow:
        0 0 0 14px rgba(255,255,255,.025);

    pointer-events: none;
}


/* Icon hover */
.ecommerce-box:hover .ecommerce-icon {
    transform:
        translateY(-8px)
        rotate(-3deg)
        scale(1.04);

    box-shadow:
        0 35px 70px rgba(0,70,150,.25),
        inset 0 1px 0 rgba(255,255,255,.9);
}


/* =========================================
   DECORATIVE DOTS
========================================= */

.ecommerce-content::before {
    content: "";

    position: absolute;

    width: 70px;
    height: 70px;

    left: -40px;
    top: -90px;

    opacity: .35;

    background-image:
        radial-gradient(
            rgba(255,255,255,.8) 2px,
            transparent 2px
        );

    background-size: 18px 18px;

    pointer-events: none;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .ecommerce {
        padding: 75px 0 85px;
    }

    .ecommerce-box {
        min-height: 330px;

        padding: 50px;

        gap: 35px;
    }

    .ecommerce h2 {
        font-size: 38px;
    }

    .ecommerce-icon {
        width: 125px;
        height: 125px;

        border-radius: 32px;

        font-size: 52px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .ecommerce {
        padding: 60px 0 70px;
    }

    .ecommerce-box {
        min-height: auto;

        flex-direction: column;

        align-items: flex-start;

        gap: 40px;

        padding: 35px 25px;

        border-radius: 27px;
    }

    .ecommerce-content {
        width: 100%;
    }

    .ecommerce h2 {
        font-size: 30px;

        letter-spacing: -1px;
    }

    .ecommerce p {
        font-size: 12px;

        line-height: 1.75;
    }

    .ecommerce .btn-white {
        width: auto;

        padding: 13px 19px;

        font-size: 12px;
    }

    .ecommerce-icon {
        width: 105px;
        height: 105px;

        align-self: center;

        border-radius: 29px;

        font-size: 45px;

        margin-right: 0;
    }

    .ecommerce-icon::before {
        inset: -14px;

        border-radius: 40px;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 380px) {

    .ecommerce-box {
        padding: 30px 20px;
    }

    .ecommerce h2 {
        font-size: 27px;
    }

    .ecommerce .btn-white {
        width: 100%;
    }
}

/* =========================================
   CONTACT
========================================= */

.contact {
    background: #f4fbff;
}

.contact-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 60px;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 15px;

    padding: 20px;

    border-radius: 17px;

    background: white;

    border: 1px solid #e0eef5;
}

.contact-icon {
    width: 45px;
    height: 45px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    color: white;

    background: linear-gradient(
        135deg,
        #76ddff,
        #07549d
    );
}

.contact-item div:last-child {
    display: flex;
    flex-direction: column;
}

.contact-item span {
    color: #8297a9;
    font-size: 10px;
}

.contact-item strong {
    margin-top: 3px;

    color: #173f63;
    font-size: 12px;
}


/* FORM */

.contact-form {
    padding: 30px;

    border-radius: 22px;

    background: white;

    border: 1px solid #e0eef5;

    box-shadow: 0 15px 35px rgba(30,80,120,0.07);
}

.form-group {
    margin-bottom: 17px;
}

.form-group label {
    display: block;

    margin-bottom: 7px;

    color: #345a78;

    font-size: 11px;
    font-weight: 600;
}

.form-group input,
.form-group textarea {
    width: 100%;

    padding: 13px 15px;

    border: 1px solid #dcebf3;

    border-radius: 12px;

    outline: none;

    color: #173f63;

    background: #f8fcff;

    font-size: 12px;

    transition: 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #68cfff;

    box-shadow: 0 0 0 4px rgba(87,202,255,0.1);
}

.form-group textarea {
    resize: vertical;
}

/* =========================================
   FOOTER
========================================= */

.site-footer {
    width: 100%;
    background: linear-gradient(135deg, #0878d1, #0755a5);
    color: #fff;
    position: relative;
    overflow: hidden;
}

/* Efek cahaya background */
.site-footer::before {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    top: -180px;
    right: -100px;
    filter: blur(10px);
    pointer-events: none;
}

.site-footer::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    bottom: -160px;
    left: -80px;
    filter: blur(8px);
    pointer-events: none;
}


/* =========================================
   FOOTER CONTAINER
========================================= */

.footer-container {
    width: min(1200px, 92%);
    margin: 0 auto;
    padding: 55px 0 45px;

    display: grid;
    grid-template-columns: 2fr 1fr 1.2fr 1.2fr;
    gap: 50px;

    position: relative;
    z-index: 2;
}


/* =========================================
   FOOTER ABOUT
========================================= */

.footer-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.footer-brand img {
    width: 58px;
    height: 58px;
    object-fit: contain;

    background: rgba(255, 255, 255, 0.95);
    border-radius: 14px;
    padding: 7px;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.footer-brand h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
}

.footer-brand p {
    margin: 5px 0 0;
    font-size: 11px;
    opacity: 0.75;
}

.footer-description {
    max-width: 320px;
    margin: 0;

    font-size: 13px;
    line-height: 1.8;
    opacity: 0.78;
}


/* =========================================
   FOOTER COLUMN
========================================= */

.footer-column {
    display: flex;
    flex-direction: column;
}

.footer-column h4 {
    margin: 4px 0 18px;

    font-size: 15px;
    font-weight: 700;
    color: #fff;

    position: relative;
}

.footer-column h4::after {
    content: "";
    display: block;

    width: 28px;
    height: 2px;

    margin-top: 8px;

    background: rgba(255, 255, 255, 0.75);
    border-radius: 20px;
}

.footer-column a {
    width: fit-content;

    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;

    font-size: 13px;

    margin-bottom: 11px;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.footer-column a:hover {
    color: #fff;
    transform: translateX(5px);
}


/* =========================================
   FOOTER BOTTOM
========================================= */

.footer-bottom {
    width: min(1200px, 92%);
    margin: 0 auto;

    min-height: 70px;

    border-top: 1px solid rgba(255, 255, 255, 0.15);

    display: flex;
    align-items: center;
    justify-content: space-between;

    position: relative;
    z-index: 2;
}

.footer-copyright {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.75);
}


/* =========================================
   SOCIAL MEDIA
========================================= */

.footer-social {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-social a {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.08);

    color: #fff;
    text-decoration: none;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.footer-social a:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}


/* =========================================
   RESPONSIVE TABLET
========================================= */

@media (max-width: 900px) {

    .footer-container {
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: 35px;
    }

    .footer-about {
        grid-column: 1 / -1;
    }
}


/* =========================================
   RESPONSIVE HP
========================================= */

@media (max-width: 600px) {

    .footer-container {
        width: 88%;
        padding: 45px 0 30px;

        grid-template-columns: 1fr 1fr;
        gap: 35px 25px;
    }

    .footer-about {
        grid-column: 1 / -1;
    }

    .footer-brand img {
        width: 52px;
        height: 52px;
    }

    .footer-description {
        max-width: 100%;
    }

    .footer-bottom {
        width: 88%;
        padding: 18px 0;

        flex-direction: column;
        gap: 15px;

        text-align: center;
    }

    .footer-social {
        justify-content: center;
    }
}


/* =========================================
   HP KECIL
========================================= */

@media (max-width: 400px) {

    .footer-container {
        grid-template-columns: 1fr;
    }

    .footer-about {
        grid-column: auto;
    }
}

/* =========================================
   MODAL
========================================= */

.modal {
    position: fixed;

    inset: 0;

    z-index: 2000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(2,25,50,0.6);

    opacity: 0;
    visibility: hidden;

    transition: 0.3s ease;

    backdrop-filter: blur(7px);
}

.modal.show {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    position: relative;

    width: min(430px, 100%);

    padding: 35px;

    text-align: center;

    border-radius: 25px;

    background: white;

    box-shadow: 0 30px 70px rgba(0,30,70,0.25);

    transform: translateY(25px) scale(0.96);

    transition: 0.3s ease;
}

.modal.show .modal-content {
    transform: translateY(0) scale(1);
}

.modal-close {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    left: auto !important;
    bottom: auto !important;

    width: 44px;
    height: 44px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    z-index: 100;
}
.modal-close {
    font-size: 20px !important;
    font-weight: 500 !important;
}

.modal-icon {
    width: 60px;
    height: 60px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 20px;

    border-radius: 18px;

    color: white;

    background: linear-gradient(
        135deg,
        #70ddff,
        #07549d
    );

    font-size: 22px;
}

.modal-content h3 {
    color: #0a365f;
    font-size: 22px;
}

.modal-content p {
    margin-top: 12px;

    color: #71879a;

    font-size: 12px;
    line-height: 1.8;
}

.modal-ok {
    margin-top: 22px;
}


/* =========================================
   BACK TO TOP
========================================= */

.back-top {
    position: fixed;

    right: 22px;
    bottom: 22px;

    z-index: 900;

    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 13px;

    color: white;

    background: linear-gradient(
        135deg,
        #54cdf8,
        #07549d
    );

    box-shadow: 0 10px 25px rgba(0,70,140,0.25);

    opacity: 0;
    visibility: hidden;

    transform: translateY(15px);

    transition: 0.3s ease;
}

.back-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* =========================================
   SCROLL REVEAL
========================================= */

.reveal {
    opacity: 0;

    transform: translateY(30px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1000px) {

    .nav-menu {
        gap: 0;
    }

    .nav-link {
        padding: 10px 8px;
        font-size: 11px;
    }

    .hero-content {
        gap: 30px;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 800px) {

    .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav-menu {
        position: absolute;

        top: 78px;
        left: 4%;

        width: 92%;

        padding: 12px;

        display: none;
        flex-direction: column;
        align-items: stretch;

        border-radius: 18px;

        background: rgba(255,255,255,0.97);

        box-shadow: 0 20px 45px rgba(0,50,100,0.15);

        backdrop-filter: blur(15px);
    }

    .nav-menu.active {
        display: flex;
    }

    .nav-link {
        padding: 13px 15px;
    }

    .nav-link::after {
        display: none;
    }

    .hero {
        padding-top: 130px;
    }

    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-text > p {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons,
    .hero-stats {
        justify-content: center;
    }

    .hero-visual {
        min-height: 420px;
    }

    .about-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .information-grid {
        grid-template-columns: 1fr;
    }

    .ecommerce-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }

}


@media (max-width: 520px) {

    .navbar {
        height: 70px;
    }

    .nav-menu {
        top: 70px;
    }

    .hero {
        padding-top: 115px;
    }

    .hero h1 {
        font-size: 40px;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    .hero-stats {
        gap: 18px;
    }

    .stat strong {
        font-size: 18px;
    }

    .hero-visual {
        min-height: 350px;
    }

    .digital-card {
        width: 250px;
        height: 320px;
    }

    .card-one {
        left: -5px;
        top: 30px;
    }

    .card-two {
        right: -5px;
        bottom: 20px;
    }

    .floating-card {
        padding: 10px;
    }

    .floating-card i {
        width: 32px;
        height: 32px;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .section {
        padding: 80px 0;
    }

    .about-list {
        grid-template-columns: 1fr;
    }

    .ecommerce-box {
        padding: 30px;
    }

    .ecommerce h2 {
        font-size: 27px;
    }

    .ecommerce-icon {
        width: 90px;
        height: 90px;
        font-size: 35px;
    }

    .footer-content {
        padding: 25px 0;

        flex-direction: column;
        align-items: flex-start;
    }

}
/* =========================================
   FIXED FLOATING LIQUID GLASS NAVBAR
========================================= */

.navbar {
    position: fixed !important;

    top: 18px !important;
    left: 50% !important;

    transform: translateX(-50%) !important;

    width: min(1120px, 94%) !important;
    height: 72px !important;

    z-index: 9999 !important;

    padding: 0 10px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.62),
            rgba(255,255,255,0.25)
        ) !important;

    border: 1px solid rgba(255,255,255,0.75) !important;

    border-radius: 22px !important;

    backdrop-filter: blur(22px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(160%) !important;

    box-shadow:
        0 18px 45px rgba(5,55,100,0.15),
        0 5px 15px rgba(5,55,100,0.07),
        inset 0 1px 0 rgba(255,255,255,0.9),
        inset 0 -1px 0 rgba(255,255,255,0.2) !important;
}


/* =========================================
   NAV CONTAINER
========================================= */

.nav-container {
    width: 100% !important;
    height: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    margin: 0 !important;
    padding: 0 5px !important;
}

/* =========================================
   LOGO - UKURAN LEBIH KECIL
========================================= */

.logo {
    width: 115px !important;
    height: 58px !important;

    display: flex !important;
    align-items: center !important;

    flex-shrink: 0 !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: hidden !important;
}

.logo img {
    width: 100px !important;
    height: 100px !important;

    max-width: none !important;

    display: block !important;

    object-fit: contain !important;

    transform: translateY(1px) !important;

    transition: transform 0.3s ease !important;
}

.logo:hover img {
    transform: translateY(1px) scale(1.03) !important;
}
/* =========================================
   NAV MENU
========================================= */

.nav-menu {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 3px !important;

    padding: 5px !important;

    margin: 0 !important;

    background: rgba(255,255,255,0.12) !important;

    border-radius: 15px !important;
}


/* =========================================
   NAV LINK
========================================= */

.nav-link {
    position: relative !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 10px 13px !important;

    border-radius: 12px !important;

    color: #52728e !important;

    font-size: 12px !important;
    font-weight: 500 !important;

    white-space: nowrap !important;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease !important;
}


.nav-link::after {
    display: none !important;
}


.nav-link:hover {
    color: #07549d !important;

    background:
        rgba(255,255,255,0.48) !important;

    transform: translateY(-1px) !important;
}


.nav-link.active {
    color: #07549d !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.75),
            rgba(255,255,255,0.38)
        ) !important;

    box-shadow:
        0 5px 15px rgba(30,100,150,0.08),
        inset 0 1px 0 rgba(255,255,255,0.9) !important;
}


/* =========================================
   SCROLLED
========================================= */

.navbar.scrolled {
    top: 12px !important;

    box-shadow:
        0 20px 50px rgba(5,55,100,0.20),
        0 5px 15px rgba(5,55,100,0.08),
        inset 0 1px 0 rgba(255,255,255,0.95) !important;
}


/* =========================================
   MOBILE
========================================= */

.menu-toggle {
    display: none;

    width: 42px;
    height: 42px;

    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,0.65);

    border-radius: 13px;

    background: rgba(255,255,255,0.35);

    color: #07549d;

    backdrop-filter: blur(12px);
}


@media (max-width: 800px) {

    .navbar {
        top: 12px !important;

        width: 94% !important;

        height: 64px !important;

        border-radius: 19px !important;
    }

    .nav-container {
        padding: 0 5px !important;
    }

    .logo {
        width: 120px !important;
        height: 55px !important;
    }

    .logo img {
        width: 130px !important;
        height: 130px !important;
    }

    .menu-toggle {
        display: flex !important;
    }

    .nav-menu {
        position: absolute !important;

        top: 73px !important;
        left: 0 !important;

        width: 100% !important;

        display: none !important;

        flex-direction: column !important;
        align-items: stretch !important;

        padding: 9px !important;

        border-radius: 18px !important;

        background:
            linear-gradient(
                135deg,
                rgba(255,255,255,0.78),
                rgba(255,255,255,0.38)
            ) !important;

        border: 1px solid rgba(255,255,255,0.75) !important;

        box-shadow:
            0 20px 45px rgba(5,55,100,0.18),
            inset 0 1px 0 rgba(255,255,255,0.9) !important;

        backdrop-filter: blur(24px) saturate(160%) !important;
        -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    }

    .nav-menu.active {
        display: flex !important;
    }

    .nav-link {
        width: 100% !important;

        justify-content: flex-start !important;

        padding: 13px 15px !important;
    }
}
/* =========================================
   FINAL FIXES - NAVBAR / LOGO / MODAL / REVEAL
========================================= */
.logo { padding-left: 0; }
.logo-image { width: 82px; height: 62px; object-fit: contain; display:block; }
.footer-logo { width: 70px; height: 52px; object-fit: contain; display:block; filter: brightness(0) invert(1); opacity:.95; }
.navbar { display:block; }
.reveal { opacity:1; transform:none; }
.reveal.active { opacity:1; transform:none; }
.modal.show { opacity:1; visibility:visible; pointer-events:auto; }
.modal { pointer-events:none; }
.modal-content { pointer-events:auto; }
.modal-content ul { margin:18px 0 0; padding-left:20px; text-align:left; color:#58758e; font-size:12px; line-height:1.9; }
.modal-close { cursor:pointer; }
@media(max-width:800px){ .logo-image{width:72px;height:56px;} .footer-logo{width:62px;height:48px;} }

/* =========================================
   NAV INDICATOR - BERGERAK
========================================= */

.nav-menu {
    position: relative !important;
}

.nav-link {
    position: relative !important;
    z-index: 2 !important;

    background: transparent !important;

    transition:
        color .3s ease,
        transform .3s ease !important;
}

/* Hilangkan kotak aktif bawaan */
.nav-link.active {
    background: transparent !important;
    color: #005da5 !important;
}

/* Kotak indikator */
.nav-menu::before {
    content: "";

    position: absolute;

    top: 5px;
    left: var(--indicator-left, 5px);

    width: var(--indicator-width, 70px);
    height: calc(100% - 10px);

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.9),
            rgba(225,242,250,.65)
        );

    box-shadow:
        0 5px 15px rgba(0,80,140,.10),
        inset 0 1px 0 rgba(255,255,255,.95);

    z-index: 1;

    transition:
        left .35s cubic-bezier(.4,0,.2,1),
        width .35s cubic-bezier(.4,0,.2,1);
}

/* =========================================
   FIX ICON TENTANG KAMI
========================================= */

.about-floating-icon i,
.about-stat-icon i,
.about-info-icon i,
.about-checklist i,
.about-cta i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* Floating icon */
.about-floating-icon i {
    font-size: 17px;
}


/* Statistik */
.about-stat-icon i {
    font-size: 15px;
}


/* Visi Misi Nilai */
.about-info-icon i {
    font-size: 18px;
}


/* Checklist */
.about-checklist i {
    font-size: 9px;
}


/* =========================================
   FALLBACK ICON
========================================= */

.about-floating-icon {
    font-size: 0;
}

.about-floating-icon::before {
    content: "✓";

    font-size: 20px;
    font-weight: 800;
}


.about-stat:nth-child(1) .about-stat-icon::before {
    content: "👥";
}

.about-stat:nth-child(2) .about-stat-icon::before {
    content: "↗";
}

.about-stat:nth-child(3) .about-stat-icon::before {
    content: "★";
}

.about-stat:nth-child(4) .about-stat-icon::before {
    content: "▦";
}

.about-stat-icon {
    font-size: 15px;
    font-weight: 800;
}


/* Visi */
.about-info-card:nth-child(1) .about-info-icon::before {
    content: "◉";
}

/* Misi */
.about-info-card:nth-child(2) .about-info-icon::before {
    content: "➤";
}

/* Nilai */
.about-info-card:nth-child(3) .about-info-icon::before {
    content: "♥";
}

.about-info-icon {
    font-size: 20px;
    font-weight: 800;
}


/* Hilangkan teks icon Font Awesome kalau gagal */
.about-info-icon i,
.about-stat-icon i,
.about-floating-icon i {
    position: absolute;
    opacity: 0;
}


/* =========================================
   CHECKLIST
========================================= */

.about-checklist i {
    position: relative;
    opacity: 1;

    font-style: normal;
}

.about-checklist i::before {
    content: "✓";

    font-family: Arial, sans-serif;

    font-size: 10px;
    font-weight: 800;
}


/* =========================================
   VISUAL PLD
========================================= */

.about-image {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Logo PLD besar di tengah */

.about-image::before {
    content: "PLD";

    position: absolute;

    left: 50%;
    top: 46%;

    transform:
        translate(-50%, -50%)
        rotate(-6deg);

    font-family: Arial, sans-serif;

    font-size: clamp(85px, 9vw, 125px);

    font-weight: 900;

    letter-spacing: -10px;

    color: rgba(255,255,255,0.22);

    text-shadow:
        0 8px 25px rgba(0,45,90,0.15);

    z-index: 1;
}


/* Kilauan visual */

.about-image {
    isolation: isolate;
}

.about-image::after {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    right: -80px;
    bottom: -100px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,0.5),
            rgba(255,255,255,0.08) 45%,
            transparent 70%
        );

    z-index: 1;
}

/* =========================================
   INFORMATION POPUP
========================================= */

.info-modal {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 20px;
}


.info-modal.active {
    display: flex;

    animation: infoModalFade 0.25s ease;
}


/* =========================================
   OVERLAY
========================================= */

.info-modal-overlay {
    position: absolute;

    inset: 0;

    background:
        rgba(3, 35, 65, 0.48);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);
}


/* =========================================
   MODAL BOX
========================================= */

.info-modal-box {
    position: relative;

    z-index: 2;

    width: min(520px, 100%);

    padding: 34px;

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.98),
            rgba(239,249,255,0.96)
        );

    border:
        1px solid rgba(255,255,255,0.95);

    box-shadow:
        0 35px 90px rgba(0,35,70,0.3),
        inset 0 1px 0 rgba(255,255,255,0.9);

    transform: scale(0.92);

    animation: infoModalOpen 0.3s ease forwards;
}


/* =========================================
   CLOSE
========================================= */

.info-modal-close {
    position: absolute;

    top: 17px;
    right: 17px;

    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 0;

    border-radius: 50%;

    color: #52738c;

    background: #edf7fc;

    font-size: 24px;

    line-height: 1;

    cursor: pointer;

    transition: 0.3s ease;
}


.info-modal-close:hover {
    color: white;

    background:
        linear-gradient(
            135deg,
            #35bce9,
            #0872bd
        );

    transform: rotate(90deg);
}


/* =========================================
   ICON
========================================= */

.info-modal-icon {
    width: 68px;
    height: 68px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 20px;

    border-radius: 20px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #55d5ff,
            #0872bd
        );

    box-shadow:
        0 15px 30px rgba(8,114,189,0.2);

    font-size: 28px;
}


/* =========================================
   LABEL
========================================= */

.info-modal-label {
    display: inline-block;

    padding: 6px 11px;

    border-radius: 50px;

    color: #0878c5;

    background: #e7f7ff;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.8px;
}


/* =========================================
   TITLE
========================================= */

.info-modal-box h3 {
    margin-top: 15px;

    padding-right: 30px;

    color: #082f59;

    font-size: 25px;

    line-height: 1.35;
}


/* =========================================
   TEXT
========================================= */

.info-modal-box p {
    margin-top: 14px;

    color: #6d8498;

    font-size: 13px;

    line-height: 1.9;
}


/* =========================================
   LINE
========================================= */

.info-modal-line {
    width: 100%;
    height: 1px;

    margin: 25px 0;

    background:
        linear-gradient(
            90deg,
            #cceaf6,
            transparent
        );
}


/* =========================================
   FOOTER
========================================= */

.info-modal-footer {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;
}


.info-modal-footer span {
    display: flex;

    align-items: center;

    gap: 7px;

    color: #668198;

    font-size: 10px;

    font-weight: 600;
}


.info-modal-footer span i {
    width: 21px;
    height: 21px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: white;

    background: #19b98a;

    font-size: 9px;

    font-style: normal;
}


.info-modal-ok {
    padding: 10px 18px;

    border: 0;

    border-radius: 50px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #25b9ec,
            #0872bd
        );

    font-size: 10px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 8px 20px rgba(8,114,189,0.18);

    transition: 0.3s ease;
}


.info-modal-ok:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(8,114,189,0.25);
}


/* =========================================
   ANIMATION
========================================= */

@keyframes infoModalFade {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


@keyframes infoModalOpen {

    from {
        opacity: 0;
        transform: scale(0.88) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .info-modal-box {
        padding: 27px 23px;

        border-radius: 25px;
    }

    .info-modal-box h3 {
        font-size: 21px;
    }

    .info-modal-box p {
        font-size: 12px;
    }

    .info-modal-footer {
        align-items: flex-start;

        flex-direction: column;
    }

    .info-modal-ok {
        width: 100%;
    }

}
/* =========================================
   PEMISAH INFORMASI & E-COMMERCE
========================================= */

.information {
    padding-bottom: 120px;
}

.ecommerce {
    margin-top: 40px;
}

/* =========================================
   PEMISAH LAYANAN & INFORMASI
========================================= */

.information {
    background: white;
    padding-top: 150px;
}
/* =========================================
   POSISI LAYANAN
========================================= */

#layanan {
    padding-top: 65px;
}


/* =========================================================
   FINAL STABILITY PATCH
   Menjaga desain lama, tetapi memperbaiki konflik CSS,
   responsive mobile, klik/touch, modal, form, dan overflow.
========================================================= */

/* ---------- GLOBAL ---------- */
html {
    scroll-padding-top: 105px;
}

body {
    min-width: 0;
    -webkit-text-size-adjust: 100%;
}

img,
svg,
video {
    max-width: 100%;
}

button,
a,
input,
textarea,
select {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid rgba(42, 174, 232, .28);
    outline-offset: 3px;
}

/* ---------- NAVBAR ---------- */
.navbar {
    isolation: isolate;
}

.nav-container,
.nav-menu,
.nav-link,
.menu-toggle {
    pointer-events: auto;
}

.nav-menu {
    z-index: 10;
}

.nav-link {
    white-space: nowrap;
}

.menu-toggle {
    position: relative;
    z-index: 20;
    flex-shrink: 0;
    border: 0;
}

.nav-menu::before {
    pointer-events: none;
}

/* ---------- HERO ---------- */
.hero-content {
    min-width: 0;
}

.hero-text,
.hero-visual {
    min-width: 0;
}

.hero h1 {
    overflow-wrap: anywhere;
}

.hero-buttons {
    flex-wrap: wrap;
}

.digital-card {
    will-change: transform;
}

.floating-card {
    will-change: transform;
}

/* ---------- SECTIONS ---------- */
.section,
.about,
.services,
.information,
.ecommerce,
.contact {
    position: relative;
}

.section-heading h2,
.about-content h3,
.ecommerce h2 {
    overflow-wrap: anywhere;
}

/* ---------- ABOUT ---------- */
.about-main > *,
.about-info-grid > * {
    min-width: 0;
}

.about-image,
.about-floating-card {
    max-width: 100%;
}

.about-floating-card {
    pointer-events: none;
}

/* ---------- SERVICES ---------- */
.services-grid {
    width: 100%;
}

.service-card {
    min-width: 0;
}

.service-card h3,
.service-card p {
    overflow-wrap: anywhere;
}

.learn-more {
    z-index: 4;
    cursor: pointer;
}

/* Top Up Game: jangan terlalu kecil di desktop */
.service-card:nth-child(5) {
    width: min(100%, 300px);
}

@media (min-width: 1001px) {
    .service-card:nth-child(5) {
        grid-column: 2 / 4;
    }
}

/* ---------- INFORMATION ---------- */
.information-grid {
    width: 100%;
}

.info-card {
    min-width: 0;
}

.info-card,
.info-card * {
    max-width: 100%;
}

.info-visual {
    isolation: isolate;
}

/* ---------- E-COMMERCE ---------- */
.ecommerce-box {
    width: 100%;
}

.ecommerce-content {
    min-width: 0;
}

.ecommerce h2,
.ecommerce p {
    overflow-wrap: anywhere;
}

.ecommerce-icon {
    flex-shrink: 0;
}

/* ---------- CONTACT ---------- */
.contact-grid > * {
    min-width: 0;
}

.contact-item,
.contact-form {
    max-width: 100%;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    width: 100%;
    max-width: 100%;
}

.contact-form textarea {
    resize: vertical;
    min-height: 140px;
}

/* ---------- MODAL ---------- */
.modal,
.info-modal {
    overscroll-behavior: contain;
}

.modal-content,
.info-modal-box {
    max-height: min(82vh, 720px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.modal-close,
.info-modal-close,
.modal-ok,
.info-modal-ok {
    position: relative;
    z-index: 10;
}

.modal-content ul {
    overflow-wrap: anywhere;
}

/* ---------- FOOTER ---------- */
.footer-content {
    min-width: 0;
}

.footer-brand,
.footer-links,
.footer-social {
    min-width: 0;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .container {
        width: min(94%, 1000px);
    }

    .hero-content {
        grid-template-columns: 1fr .85fr;
        gap: 35px;
    }

    .hero h1 {
        font-size: clamp(40px, 6vw, 58px);
    }

    .about-main {
        grid-template-columns: .9fr 1.1fr;
    }

    .about-stat-card {
        grid-column: 1 / -1;
    }

    .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-card:nth-child(5) {
        grid-column: 1 / -1;
        justify-self: center;
    }

    .information-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contact-grid {
        grid-template-columns: 1fr 1.1fr;
        gap: 35px;
    }
}

/* =========================================================
   MOBILE NAVBAR
========================================================= */

@media (max-width: 800px) {

    html {
        scroll-padding-top: 90px;
    }

    .navbar {
        width: calc(100% - 24px);
        max-width: none;
    }

    .nav-container {
        padding: 0 8px;
    }

    .nav-menu {
        width: 100%;
        max-height: calc(100vh - 105px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Indikator desktop tidak menutupi menu mobile */
    .nav-menu::before {
        display: none;
    }

    .nav-link {
        white-space: normal;
        text-align: left;
    }

    .hero {
        min-height: auto;
        padding: 135px 0 65px;
    }

    .hero-content {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .hero-text {
        text-align: center;
    }

    .hero-badge {
        justify-content: center;
    }

    .hero h1 {
        max-width: 100%;
        font-size: clamp(36px, 10vw, 52px);
        letter-spacing: -1.5px;
    }

    .hero-text > p {
        margin-left: auto;
        margin-right: auto;
        font-size: 13px;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-stats {
        justify-content: center;
        flex-wrap: wrap;
        gap: 20px 28px;
    }

    .hero-visual {
        min-height: 400px;
        width: 100%;
    }

    .digital-card {
        width: min(290px, 76vw);
        height: min(365px, 95vw);
    }

    .card-one {
        left: max(0px, 3vw);
    }

    .card-two {
        right: max(0px, 3vw);
    }

    .section {
        padding: 80px 0;
    }

    .section-heading {
        margin-bottom: 45px;
    }

    .section-heading h2 {
        font-size: clamp(32px, 9vw, 46px);
    }

    .about-main {
        grid-template-columns: 1fr;
    }

    .about-visual {
        width: min(100%, 560px);
        margin-inline: auto;
    }

    .about-content {
        padding: 0;
    }

    .about-info-grid,
    .information-grid {
        grid-template-columns: 1fr;
    }

    .ecommerce-box {
        flex-direction: column;
        align-items: flex-start;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .footer-content {
        flex-direction: column;
        align-items: flex-start;
        padding: 30px 0;
    }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 600px) {

    .container {
        width: calc(100% - 30px);
    }

    .navbar {
        top: 9px;
        width: calc(100% - 20px);
        height: 60px;
        border-radius: 17px;
    }

    .navbar.scrolled {
        top: 7px;
    }

    .logo-text strong {
        font-size: 12px;
    }

    .logo-text span {
        font-size: 7px;
    }

    .logo-image {
        width: 66px !important;
        height: 50px !important;
    }

    .hero {
        padding-top: 120px;
        padding-bottom: 55px;
    }

    .hero h1 {
        font-size: clamp(32px, 10.5vw, 44px);
    }

    .hero-buttons {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    .hero-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        text-align: center;
        gap: 18px;
    }

    .hero-visual {
        min-height: 345px;
    }

    .digital-card {
        width: 245px;
        height: 315px;
        padding: 22px;
        border-radius: 25px;
    }

    .digital-logo {
        width: 115px;
    }

    .floating-card {
        padding: 10px 12px;
        gap: 8px;
        border-radius: 13px;
    }

    .floating-card i {
        width: 32px;
        height: 32px;
    }

    .floating-card strong {
        font-size: 10px;
    }

    .floating-card small {
        font-size: 8px;
    }

    .card-one {
        top: 25px;
        left: 0;
    }

    .card-two {
        right: 0;
        bottom: 25px;
    }

    .section {
        padding: 70px 0;
    }

    .section-heading h2 {
        font-size: 31px;
    }

    .section-heading p {
        font-size: 12px;
    }

    .about {
        padding: 75px 0;
    }

    .about-image {
        height: 330px;
        border-radius: 24px;
    }

    .about-content h3 {
        font-size: 27px;
    }

    .about-checklist {
        grid-template-columns: 1fr;
    }

    .about-cta {
        margin-top: 45px;
        padding: 25px;
        border-radius: 22px;
    }

    .about-cta h3 {
        font-size: 20px;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .service-card,
    .service-card:nth-child(5) {
        width: 100%;
        grid-column: auto;
        min-height: 300px;
    }

    .service-card {
        padding: 24px 21px;
        border-radius: 23px;
    }

    .service-icon {
        width: 62px;
        height: 62px;
        border-radius: 18px;
    }

    .service-card h3 {
        margin-top: 22px;
        font-size: 17px;
    }

    .service-card p {
        font-size: 11px;
    }

    .information {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .info-card {
        border-radius: 24px;
    }

    .info-visual {
        height: 185px;
    }

    .visual-icon {
        width: 75px;
        height: 75px;
        border-radius: 23px;
    }

    .ecommerce {
        padding: 55px 0;
    }

    .ecommerce-box {
        padding: 28px 22px;
        border-radius: 24px;
    }

    .ecommerce h2 {
        font-size: 29px;
    }

    .ecommerce p {
        font-size: 12px;
    }

    .ecommerce-icon {
        width: 105px;
        height: 105px;
        align-self: center;
    }

    .contact-grid {
        gap: 28px;
    }

    .contact-item {
        padding: 16px;
    }

    .contact-form {
        padding: 22px !important;
    }

    .modal {
        padding: 14px;
    }

    .modal-content,
    .info-modal-box {
        width: 100%;
        max-height: 86vh;
        padding: 25px 20px;
        border-radius: 23px;
    }

    .info-modal-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .info-modal-ok,
    .modal-ok {
        width: 100%;
    }
}

/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 380px) {

    .logo-text {
        display: none;
    }

    .navbar {
        height: 57px;
    }

    .menu-toggle {
        width: 39px;
        height: 39px;
    }

    .hero h1 {
        font-size: 30px;
    }

    .hero-stats {
        gap: 14px;
    }

    .digital-card {
        width: 225px;
        height: 295px;
    }

    .floating-card {
        transform: scale(.88);
    }
}

/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover: none) and (pointer: coarse) {

    .service-card:hover,
    .info-card:hover,
    .about-info-card:hover {
        transform: none;
    }

    .btn-primary:hover,
    .btn-outline:hover,
    .learn-more:hover {
        transform: none;
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}
/* =========================================================
   FIX E-COMMERCE BACKGROUND - FULL WIDTH
========================================================= */

.ecommerce {
    position: relative;

    /* Paksa section selebar layar */
    width: 100vw;
    max-width: 100vw;

    /* Keluar dari batas container */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    padding: 90px 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 45%,
            rgba(100, 220, 255, 0.30),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 20%,
            rgba(50, 160, 255, 0.30),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #06366f 0%,
            #087fc4 50%,
            #20b8ed 100%
        );
}


/* =========================================================
   CONTAINER E-COMMERCE
   Tetap dibatasi agar isi tidak terlalu melebar
========================================================= */

.ecommerce > .container {
    position: relative;
    z-index: 2;

    width: min(1180px, calc(100% - 40px));
    max-width: 1180px;

    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   GLASS BOX
========================================================= */

.ecommerce-box {
    width: 100%;
    max-width: 1180px;

    box-sizing: border-box;

    min-height: 310px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 50px;

    padding: 55px 65px;

    border-radius: 34px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.18),
            rgba(255, 255, 255, 0.07)
        );

    border: 1px solid rgba(255,255,255,0.28);

    box-shadow:
        0 30px 70px rgba(0,30,80,0.25),
        inset 0 1px 0 rgba(255,255,255,0.30);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

    .ecommerce {
        width: 100vw;
        max-width: 100vw;

        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);

        padding: 70px 0;
    }

    .ecommerce > .container {
        width: calc(100% - 30px);
    }

    .ecommerce-box {
        padding: 40px;
        gap: 30px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .ecommerce {
        padding: 55px 0;
    }

    .ecommerce > .container {
        width: calc(100% - 24px);
    }

    .ecommerce-box {
        min-height: auto;

        flex-direction: column;
        align-items: flex-start;

        padding: 30px 22px;

        border-radius: 25px;
    }

    .ecommerce h2 {
        font-size: 28px;
    }

    .ecommerce p {
        font-size: 12px;
    }

    .ecommerce-icon {
        align-self: center;

        width: 105px;
        height: 105px;
    }
}

/* =========================================================
   FULL WIDTH BACKGROUND
   TENTANG KAMI + LAYANAN + INFORMASI
   Isi/container TETAP seperti sebelumnya
========================================================= */

/* ---------- TENTANG KAMI ---------- */
.about {
    width: 100vw;
    max-width: 100vw;

    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    overflow: hidden;
}


/* ---------- LAYANAN ---------- */
.services {
    width: 100vw;
    max-width: 100vw;

    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    overflow: hidden;
}


/* ---------- INFORMASI ---------- */
.information {
    width: 100vw;
    max-width: 100vw;

    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    overflow: hidden;
}


/* =========================================================
   CONTAINER TETAP TERBATAS
   Jadi isi tidak ikut melebar
========================================================= */

.about > .container,
.services > .container,
.information > .container {
    width: min(1150px, 92%);
    max-width: 1150px;
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px) {

    .about,
    .services,
    .information {
        width: 100vw;
        max-width: 100vw;

        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }

    .about > .container,
    .services > .container,
    .information > .container {
        width: 92%;
        max-width: 100%;
    }
}

/* =========================================================
   ANIMATED BACKGROUND
   TENTANG KAMI + LAYANAN + INFORMASI
========================================================= */

.about,
.services,
.information {
    position: relative;
    isolation: isolate;
}

/* Lapisan animasi */
.about::before,
.services::before,
.information::before {
    content: "";
    position: absolute;
    inset: -80px;

    z-index: -1;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 15% 30%,
            rgba(80, 210, 255, 0.22),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 70%,
            rgba(50, 170, 255, 0.18),
            transparent 32%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(120, 230, 255, 0.15),
            transparent 35%
        );

    background-size:
        120% 120%,
        130% 130%,
        120% 120%;

    animation: backgroundFloat 12s ease-in-out infinite alternate;
}


/* Lingkaran cahaya kedua */
.about::after,
.services::after,
.information::after {
    content: "";
    position: absolute;

    width: 380px;
    height: 380px;

    top: 20%;
    left: -120px;

    z-index: -1;
    pointer-events: none;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        rgba(70, 200, 255, 0.12),
        transparent 70%
    );

    filter: blur(15px);

    animation: floatingLight 10s ease-in-out infinite alternate;
}


/* =========================================================
   ANIMASI 1
   Background bergerak perlahan
========================================================= */

@keyframes backgroundFloat {

    0% {
        transform: translate3d(-2%, -1%, 0) scale(1);
    }

    50% {
        transform: translate3d(2%, 2%, 0) scale(1.05);
    }

    100% {
        transform: translate3d(-1%, 3%, 0) scale(1.02);
    }
}


/* =========================================================
   ANIMASI 2
   Cahaya bergerak dari kiri ke kanan
========================================================= */

@keyframes floatingLight {

    0% {
        transform:
            translate3d(0, 0, 0)
            scale(0.9);
        opacity: 0.45;
    }

    50% {
        transform:
            translate3d(45vw, 30px, 0)
            scale(1.15);
        opacity: 0.7;
    }

    100% {
        transform:
            translate3d(85vw, -20px, 0)
            scale(0.95);
        opacity: 0.4;
    }
}


/* =========================================================
   CAHAYA KANAN
========================================================= */

.services::after,
.information::after {
    left: auto;
    right: -120px;

    animation-name: floatingLightRight;
    animation-duration: 13s;
}


@keyframes floatingLightRight {

    0% {
        transform:
            translate3d(0, 20px, 0)
            scale(0.9);
        opacity: 0.35;
    }

    50% {
        transform:
            translate3d(-35vw, -30px, 0)
            scale(1.2);
        opacity: 0.65;
    }

    100% {
        transform:
            translate3d(-75vw, 20px, 0)
            scale(0.95);
        opacity: 0.35;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px) {

    .about::after,
    .services::after,
    .information::after {
        width: 260px;
        height: 260px;
        filter: blur(12px);
    }

    .about::before,
    .services::before,
    .information::before {
        animation-duration: 16s;
    }
}


/* =========================================================
   REDUCE MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .about::before,
    .services::before,
    .information::before,
    .about::after,
    .services::after,
    .information::after {
        animation: none;
    }
}
.success-popup {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: rgba(0, 0, 0, 0.5) !important;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.success-popup.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.success-popup-card {
    width: 400px !important;
    max-width: 90% !important;

    padding: 35px !important;

    background: white !important;
    border-radius: 25px !important;

    text-align: center !important;

    box-shadow: 0 20px 60px rgba(0,0,0,.25) !important;
}
/* =========================================
   SUCCESS NOTIFICATION
========================================= */

#successNotification {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(3, 35, 65, 0.45);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    z-index: 999999;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition: 0.3s ease;
}

#successNotification.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.success-box {
    position: relative;

    width: 390px;
    max-width: calc(100% - 40px);

    padding: 35px 30px 28px;

    background: #ffffff;

    border-radius: 25px;

    text-align: center;

    box-shadow:
        0 25px 70px rgba(0, 50, 100, 0.25);

    transform: translateY(25px) scale(0.9);

    transition: 0.4s cubic-bezier(.2,.8,.2,1);
}

#successNotification.active .success-box {
    transform: translateY(0) scale(1);
}


/* CLOSE */

.success-close {
    position: absolute;

    top: 12px;
    right: 14px;

    width: 35px;
    height: 35px;

    border: none;
    border-radius: 50%;

    background: #f1f7fb;

    color: #527086;

    font-size: 24px;

    cursor: pointer;
}

.success-close:hover {
    background: #e4f2fa;
    color: #0878bd;
}


/* CHECK */

.success-check {
    width: 75px;
    height: 75px;

    margin: 0 auto 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #27b4ed,
            #0878bd
        );

    color: white;

    font-size: 34px;
    font-weight: 800;

    box-shadow:
        0 12px 30px rgba(8, 120, 189, 0.25);

    animation: successPop 0.5s ease;
}

@keyframes successPop {

    0% {
        transform: scale(0);
    }

    70% {
        transform: scale(1.12);
    }

    100% {
        transform: scale(1);
    }

}


/* TEXT */

.success-text small {
    display: block;

    margin-bottom: 7px;

    color: #0878bd;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;
}

.success-text h3 {
    margin: 0 0 10px;

    color: #123c5a;

    font-size: 24px;
}

.success-text p {
    margin: 0 auto;

    max-width: 320px;

    color: #647b8b;

    font-size: 14px;

    line-height: 1.7;
}


/* BUTTON */

.success-ok {
    width: 100%;

    margin-top: 24px;

    padding: 13px 20px;

    border: none;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #159ddd,
            #0878bd
        );

    color: white;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    transition: 0.25s ease;
}

.success-ok:hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(8, 120, 189, 0.25);
}


/* MOBILE */

@media (max-width: 480px) {

    .success-box {
        padding: 32px 22px 24px;
    }

    .success-check {
        width: 68px;
        height: 68px;
    }

    .success-text h3 {
        font-size: 21px;
    }

}
/* =========================================
   CONTACT - FINAL
   FULL WIDTH + FORM TETAP DI KANAN
========================================= */

.contact {
    position: relative;
    width: 100%;
    max-width: none;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 10% 30%,
            rgba(76, 210, 255, 0.18),
            transparent 35%
        ),
        radial-gradient(
            circle at 90% 70%,
            rgba(0, 100, 220, 0.12),
            transparent 35%
        ),
        #f3fbff;
}

/* animasi cahaya */
.contact::before,
.contact::after {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(55px);
    opacity: .45;
}

.contact::before {
    left: -180px;
    top: 10%;
    background: rgba(65, 200, 255, .28);
    animation: contactLightLeft 11s ease-in-out infinite;
}

.contact::after {
    right: -180px;
    bottom: 5%;
    background: rgba(20, 105, 220, .20);
    animation: contactLightRight 13s ease-in-out infinite;
}

@keyframes contactLightLeft {
    0%, 100% {
        transform: translateX(0) translateY(0);
    }

    50% {
        transform: translateX(75vw) translateY(35px);
    }
}

@keyframes contactLightRight {
    0%, 100% {
        transform: translateX(0) translateY(0);
    }

    50% {
        transform: translateX(-75vw) translateY(-35px);
    }
}


/* ISI KONTAK */
.contact > .container {
    position: relative;
    z-index: 2;
    width: min(1200px, calc(100% - 40px));
    max-width: 1200px;
    margin: 0 auto;
}


/* DESKTOP / LAPTOP
   Form WAJIB di sebelah kanan */
.contact-grid {
    position: relative;
    z-index: 3;

    display: grid !important;

    grid-template-columns:
        minmax(280px, 0.85fr)
        minmax(360px, 1.15fr) !important;

    gap: 45px !important;

    align-items: start !important;
}


/* KARTU KONTAK */
.contact-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.contact-item {
    position: relative;

    width: 100% !important;
    min-height: 82px;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;

    padding: 18px 20px !important;

    box-sizing: border-box;

    border-radius: 20px !important;

    background: rgba(255,255,255,.78) !important;
    border: 1px solid rgba(150,210,235,.45) !important;

    box-shadow:
        0 12px 30px rgba(40,120,170,.08),
        inset 0 1px 0 rgba(255,255,255,.9);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.contact-item:hover {
    transform: translateX(6px);
    border-color: rgba(50,180,235,.5) !important;

    box-shadow:
        0 18px 38px rgba(30,130,190,.15),
        0 0 25px rgba(70,200,255,.08);
}


/* ICON */
.contact-icon {
    flex: 0 0 48px !important;

    width: 48px !important;
    height: 48px !important;

    margin-right: 15px;

    border-radius: 15px !important;

    background:
        linear-gradient(
            135deg,
            #61d9ff,
            #0875c4
        ) !important;

    box-shadow:
        0 8px 20px rgba(0,130,210,.22);

    display: flex !important;
    align-items: center;
    justify-content: center;
}


/* FORM */
.contact-form {
    width: 100% !important;
    max-width: none !important;

    box-sizing: border-box;

    padding: 32px !important;

    border-radius: 25px !important;

    background: rgba(255,255,255,.82) !important;

    border: 1px solid rgba(150,210,235,.45) !important;

    box-shadow:
        0 20px 50px rgba(30,100,150,.10),
        inset 0 1px 0 rgba(255,255,255,.95);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    position: relative;
    overflow: hidden;
}

.contact-form::before {
    content: "";

    position: absolute;
    top: 0;
    left: -30%;

    width: 160%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #4ed4ff,
            #087bc7,
            #4ed4ff,
            transparent
        );

    animation: contactLine 5s linear infinite;
}

@keyframes contactLine {
    0% {
        transform: translateX(-30%);
    }

    100% {
        transform: translateX(30%);
    }
}


/* INPUT */
.contact-form input,
.contact-form textarea {
    width: 100% !important;
    box-sizing: border-box;

    border-radius: 14px !important;

    background: rgba(247,252,255,.9) !important;

    transition: .3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    transform: translateY(-1px);

    border-color: #48c9fa !important;

    box-shadow:
        0 0 0 4px rgba(72,201,250,.12),
        0 8px 20px rgba(30,150,210,.08) !important;
}


/* =========================================
   HANYA HP
   Di HP baru menjadi 1 kolom
========================================= */

@media (max-width: 600px) {

    .contact > .container {
        width: calc(100% - 30px);
    }

    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
    }

    .contact-form {
        padding: 24px !important;
    }
}
/* =========================================
   CONTACT
   KIRI = KONTAK + MEDIA SOSIAL
   KANAN = FORM PESAN
========================================= */

.contact-grid {
    display: grid !important;
    grid-template-columns: 0.85fr 1.15fr !important;
    gap: 50px !important;
    align-items: start !important;
}

/* KIRI */
.contact-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.contact-item {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

/* KANAN */
.contact-form {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* BACKGROUND ANIMASI */
.contact {
    position: relative;
    overflow: hidden;
    background: #f3fbff;
}

.contact::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    left: -180px;
    top: 10%;
    border-radius: 50%;
    background: rgba(70, 200, 255, 0.18);
    filter: blur(70px);
    animation: contactMove 10s ease-in-out infinite;
    pointer-events: none;
}

.contact::after {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    right: -180px;
    bottom: 0;
    border-radius: 50%;
    background: rgba(30, 120, 230, 0.14);
    filter: blur(70px);
    animation: contactMove2 12s ease-in-out infinite;
    pointer-events: none;
}

.contact > .container {
    position: relative;
    z-index: 2;
}

@keyframes contactMove {
    0%, 100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(75vw);
    }
}

@keyframes contactMove2 {
    0%, 100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-70vw);
    }
}

/* HP */
@media (max-width: 600px) {
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }
}

/* =========================================================
   PRIMA HOME CARD — ISOLATED
   Hanya untuk card baru di Home. Tidak mengubah section lain.
========================================================= */
.pld-hero-visual {
    position: relative;
    min-width: 0;
    min-height: 540px;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}

.pld-hero-glow {
    position: absolute;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(208,247,255,.78) 0%, rgba(74,193,236,.28) 45%, transparent 72%);
    filter: blur(8px);
    animation: pldGlow 5s ease-in-out infinite;
    pointer-events: none;
}

.pld-digital-card {
    position: relative;
    z-index: 2;
    width: 345px;
    min-height: 470px;
    padding: 27px;
    border-radius: 36px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(213,244,255,.48) 55%, rgba(62,161,216,.25));
    border: 1px solid rgba(255,255,255,.9);
    box-shadow: 0 32px 75px rgba(0,52,100,.24), inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transform: rotate(2deg);
    animation: pldFloat 5.5s ease-in-out infinite;
}

.pld-card-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pld-mini-logo {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    background: linear-gradient(145deg, #0b91d5, #075298);
    box-shadow: 0 8px 18px rgba(0,90,155,.22);
}

.pld-mini-brand strong,
.pld-mini-brand small { display: block; }
.pld-mini-brand strong { color: #073e73; font-size: 17px; font-weight: 900; }
.pld-mini-brand small { margin-top: 2px; color: #53788e; font-size: 7px; font-weight: 800; letter-spacing: 1.4px; }

.pld-status {
    width: 9px;
    height: 9px;
    margin-left: auto;
    border-radius: 50%;
    background: #42d39a;
    box-shadow: 0 0 0 5px rgba(66,211,154,.12), 0 0 16px rgba(66,211,154,.55);
    animation: pldPulse 2s ease-in-out infinite;
}

.pld-card-icon {
    position: relative;
    z-index: 2;
    width: 122px;
    height: 122px;
    margin: 34px auto 17px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, #b7efff 52%, #56bfe8 100%);
    box-shadow: 0 18px 40px rgba(0,93,151,.16), inset 0 2px 8px rgba(255,255,255,.9);
}

.pld-card-icon::before,
.pld-card-icon::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(20,132,190,.2);
    border-radius: 50%;
}
.pld-card-icon::before { inset: 9px; }
.pld-card-icon::after { inset: -7px; opacity: .55; }

.pld-card-icon span {
    position: relative;
    z-index: 2;
    width: 67px;
    height: 67px;
    display: grid;
    place-items: center;
    border-radius: 21px;
    color: #fff;
    font-size: 28px;
    background: linear-gradient(145deg, #43cdf6, #0870b8);
    box-shadow: 0 13px 28px rgba(0,93,161,.27), inset 0 2px 2px rgba(255,255,255,.5);
    animation: pldIcon 3.5s ease-in-out infinite;
}

.pld-card-title { position: relative; z-index: 2; text-align: center; }
.pld-card-title small { display: block; color: #1773a9; font-size: 8px; font-weight: 800; letter-spacing: 2px; }
.pld-card-title strong { display: block; margin-top: 6px; color: #063d70; font-size: 20px; line-height: 1.15; font-weight: 900; }

.pld-card-features { position: relative; z-index: 2; display: grid; gap: 8px; margin-top: 23px; }
.pld-feature { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid rgba(255,255,255,.65); border-radius: 14px; background: rgba(255,255,255,.44); box-shadow: inset 0 1px 0 rgba(255,255,255,.75); }
.pld-feature > span { width: 31px; height: 31px; flex: 0 0 31px; display: grid; place-items: center; border-radius: 9px; color: #fff; font-size: 10px; font-weight: 900; background: linear-gradient(145deg,#57d3f5,#0874b9); }
.pld-feature strong, .pld-feature small { display: block; }
.pld-feature strong { color: #0a4b77; font-size: 9px; font-weight: 800; }
.pld-feature small { margin-top: 2px; color: #7591a2; font-size: 7px; }

.pld-card-footer { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 10px; margin-top: 17px; padding-top: 13px; border-top: 1px solid rgba(34,121,164,.14); color: #073e73; font-size: 9px; font-weight: 900; letter-spacing: .8px; }
.pld-card-footer b { color: #25aa79; white-space: nowrap; }

.pld-float { position: absolute; z-index: 5; display: flex; align-items: center; gap: 9px; min-width: 168px; padding: 11px 13px; border: 1px solid rgba(255,255,255,.76); border-radius: 16px; background: rgba(255,255,255,.62); box-shadow: 0 14px 32px rgba(4,61,100,.15), inset 0 1px 0 rgba(255,255,255,.95); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); }
.pld-float > span { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(135deg,#58d4f6,#0869ae); }
.pld-float strong, .pld-float small { display: block; }
.pld-float strong { color: #0b4c78; font-size: 10px; font-weight: 800; }
.pld-float small { margin-top: 2px; color: #7590a0; font-size: 7px; }
.pld-float-top { top: 17%; right: -1%; animation: pldFloatTop 4.8s ease-in-out infinite; }
.pld-float-bottom { bottom: 14%; left: -2%; animation: pldFloatBottom 5.2s ease-in-out infinite; }

@keyframes pldGlow { 0%,100% { transform: scale(.95); opacity:.72; } 50% { transform: scale(1.07); opacity:1; } }
@keyframes pldFloat { 0%,100% { transform: translateY(0) rotate(2deg); } 50% { transform: translateY(-10px) rotate(-1deg); } }
@keyframes pldIcon { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes pldPulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.35); } }
@keyframes pldFloatTop { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }
@keyframes pldFloatBottom { 0%,100% { transform:translateY(0); } 50% { transform:translateY(7px); } }

@media (max-width: 1100px) {
    .pld-digital-card { width: 315px; min-height: 450px; padding: 24px; }
    .pld-float-top { right: -4%; }
    .pld-float-bottom { left: -4%; }
}

@media (max-width: 800px) {
    .pld-hero-visual { min-height: 450px; width: 100%; }
    .pld-digital-card { width: min(310px, 76vw); min-height: 430px; }
    .pld-float { min-width: 145px; padding: 9px 10px; }
    .pld-float-top { top: 9%; right: 0; }
    .pld-float-bottom { bottom: 8%; left: 0; }
}

@media (max-width: 600px) {
    .pld-hero-visual { min-height: 410px; }
    .pld-digital-card { width: min(285px, 78vw); min-height: 405px; padding: 21px; border-radius: 30px; }
    .pld-card-icon { width: 105px; height: 105px; margin-top: 25px; }
    .pld-card-icon span { width: 58px; height: 58px; font-size: 24px; }
    .pld-card-title strong { font-size: 17px; }
    .pld-feature { padding: 7px 9px; }
    .pld-feature > span { width: 28px; height: 28px; flex-basis: 28px; }
    .pld-float { min-width: 125px; max-width: 140px; }
    .pld-float strong { font-size: 8px; }
    .pld-float small { font-size: 6px; }
}

@media (max-width: 380px) {
    .pld-hero-visual { min-height: 385px; }
    .pld-digital-card { width: 260px; min-height: 385px; padding: 18px; }
    .pld-card-icon { width: 92px; height: 92px; margin-top: 20px; }
    .pld-card-icon span { width: 52px; height: 52px; }
    .pld-card-title strong { font-size: 15px; }
    .pld-float { transform: scale(.9); }
}

/* =========================================================
   FIX POPUP INFORMASI
========================================================= */

.info-modal-box {
    position: relative;

    width: min(560px, calc(100% - 32px));

    padding: 42px 42px 32px;

    border-radius: 30px;

    box-sizing: border-box;
}


/* Tombol X pindah ke pojok kanan atas */
.info-modal-close {
    position: absolute;

    top: 18px;
    right: 18px;

    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;

    border: none;
    border-radius: 50%;

    background: rgba(225, 244, 252, 0.95);

    color: #52738c;

    font-size: 21px;
    line-height: 1;

    z-index: 20;

    cursor: pointer;
}


/* Icon tidak lagi terlalu dekat dengan X */
.info-modal-icon {
    margin-top: 8px;
    margin-bottom: 20px;
}


/* Judul jangan sampai masuk area tombol X */
.info-modal-box h3 {
    padding-right: 45px;
}


/* Footer tetap rapi */
.info-modal-footer {
    margin-top: 5px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .info-modal-box {
        width: calc(100% - 28px);

        padding:
            38px
            22px
            25px;

        border-radius: 25px;
    }

    .info-modal-close {
        top: 14px;
        right: 14px;

        width: 34px;
        height: 34px;

        font-size: 20px;
    }

    .info-modal-icon {
        margin-top: 5px;
    }

    .info-modal-box h3 {
        padding-right: 10px;
        font-size: 21px;
    }

}
/* =========================================================
   FIX FINAL POPUP INFORMASI
========================================================= */

/* Saat popup aktif, section Informasi boleh keluar dari batasnya */
.information:has(.info-modal.active) {
    position: relative !important;
    z-index: 999999 !important;
    overflow: visible !important;
    isolation: auto !important;
}

/* Popup benar-benar memenuhi layar */
.info-modal.active {
    position: fixed !important;

    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    margin: 0 !important;
    padding: 20px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    z-index: 9999999 !important;

    box-sizing: border-box;
}

/* Overlay menutup seluruh layar */
.info-modal.active .info-modal-overlay {
    position: fixed !important;

    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    background: rgba(3, 35, 65, 0.58) !important;

    z-index: 1 !important;
}

/* Card popup */
.info-modal.active .info-modal-box {
    position: relative !important;

    z-index: 2 !important;

    width: min(520px, calc(100vw - 40px)) !important;
    max-width: 520px !important;

    max-height: calc(100vh - 40px) !important;

    overflow-y: auto !important;

    box-sizing: border-box;
}

/* X */
.info-modal.active .info-modal-close {
    position: absolute !important;

    top: 17px !important;
    right: 17px !important;

    z-index: 20 !important;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .information:has(.info-modal.active) {
        overflow: visible !important;
    }

    .info-modal.active {
        padding: 14px !important;
    }

    .info-modal.active .info-modal-box {
        width: calc(100vw - 28px) !important;
        max-width: none !important;
        max-height: calc(100vh - 28px) !important;
    }

}
/* =========================================================
   POPUP LAYANAN - FULL SCREEN + BLUR
========================================================= */

#serviceModal {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    z-index: 999999 !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    /* TIDAK GELAP */
    background: rgba(255, 255, 255, 0.08) !important;

    /* Blur background */
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    /* Animasi buka/tutup */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease !important;
}


/* Saat dibuka */
#serviceModal.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}


/* Card popup */
#serviceModal .modal-content {
    position: relative !important;

    z-index: 2 !important;

    transform: translateY(18px) scale(0.96);
    opacity: 0;

    transition:
        transform 0.35s cubic-bezier(.22, 1, .36, 1),
        opacity 0.3s ease !important;
}


/* Card saat popup terbuka */
#serviceModal.show .modal-content {
    transform: translateY(0) scale(1);
    opacity: 1;
}


/* Tombol X */
#serviceModal .modal-close {
    position: absolute !important;
    z-index: 10 !important;
}


/* Tombol Mengerti */
#serviceModal .modal-ok {
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}
/* =========================================
   INSTAGRAM CONTACT CARD
========================================= */

.instagram-card {
    display: flex;
    align-items: center;
    gap: 22px;
    width: 100%;
    min-height: 100px;
    padding: 22px 28px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.instagram-card .contact-icon {
    width: 74px;
    height: 74px;
    min-width: 74px;
    border-radius: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(135deg, #168dcc, #168dcc);
}

.instagram-card .contact-icon i {
    font-size: 24px;
    color: white;
}

.instagram-card .contact-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.instagram-card .contact-content span {
    font-size: 14px;
    color: #777;
}

.instagram-card .contact-content strong {
    font-size: 17px;
    color: #172b4d;
    font-weight: 700;
}

.instagram-card {
    cursor: pointer;
}

.instagram-card:hover {
    transform: translateY(-3px);
}
/* Rapikan teks contact */
.contact-item .contact-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px !important;
}

.contact-item .contact-info span {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

.contact-item .contact-info strong {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}
/* =========================================
   FOOTER POPUP
========================================= */

.footer-popup {
    position: fixed;
    inset: 0;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(5, 30, 60, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    z-index: 99999;

    opacity: 0;
    transition: opacity 0.3s ease;
}

.footer-popup.active {
    display: flex;
    opacity: 1;
}

.footer-popup-box {
    position: relative;

    width: min(600px, 100%);
    max-height: 80vh;

    overflow-y: auto;

    padding: 35px;

    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.8);

    border-radius: 24px;

    box-shadow: 0 25px 70px rgba(0, 50, 100, 0.25);

    transform: translateY(20px) scale(0.96);
    transition: transform 0.3s ease;
}

.footer-popup.active .footer-popup-box {
    transform: translateY(0) scale(1);
}

.footer-popup-close {
    position: absolute;
    top: 15px;
    right: 18px;

    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: #0878d1;
    color: white;

    font-size: 25px;
    line-height: 1;

    cursor: pointer;

    transition: 0.25s ease;
}

.footer-popup-close:hover {
    transform: rotate(90deg);
    background: #0755a5;
}

.footer-popup-box h2 {
    margin: 0 45px 20px 0;

    color: #0755a5;
    font-size: 25px;
}

.footer-popup-box h3 {
    margin-top: 20px;
    margin-bottom: 8px;

    color: #0878d1;
    font-size: 17px;
}

.footer-popup-box p,
.footer-popup-box li {
    color: #555;
    font-size: 14px;
    line-height: 1.8;
}

.footer-popup-box ul {
    padding-left: 20px;
}


/* Mobile */

@media (max-width: 600px) {

    .footer-popup {
        padding: 15px;
    }

    .footer-popup-box {
        padding: 28px 22px;
        border-radius: 20px;
    }

    .footer-popup-box h2 {
        font-size: 21px;
    }
}

/* =================================
   ROCKET SCROLL
================================= */

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: rgba(37, 99, 235, 0.12);
    z-index: 999999;
    pointer-events: none;
}

.scroll-progress-bar {
    position: relative;
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #38bdf8, #2563eb);
    border-radius: 0 10px 10px 0;
}

.rocket-wrapper {
    position: absolute;
    right: -12px;
    top: 0;
    width: 25px;
    height: 30px;
}

.scroll-rocket {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 22px;
    line-height: 1;

    animation: rocketFly 0.8s ease-in-out infinite;
}

@keyframes rocketFly {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }

    100% {
        transform: translateY(0);
    }
}

/* =========================================
   E-COMMERCE LINK - MOBILE FIX
========================================= */

.ecommerce {
    isolation: isolate;
}

.ecommerce-box {
    isolation: isolate;
}

.ecommerce-content {
    position: relative;
    z-index: 100;
}

.ecommerce-link {
    position: relative;
    z-index: 999;
    pointer-events: auto !important;
    touch-action: manipulation;
    cursor: pointer;
}

.ecommerce-icon,
.ecommerce-box::before,
.ecommerce-box::after,
.ecommerce::before,
.ecommerce::after {
    pointer-events: none !important;
}

/* FIX TOTAL TOMBOL E-COMMERCE DI HP */

@media (max-width: 600px) {
    .ecommerce-box {
        position: relative !important;
    }

    .ecommerce-content {
        position: relative !important;
        z-index: 9999 !important;
    }

    .ecommerce-content .btn-primary {
        position: relative !important;
        z-index: 99999 !important;
        pointer-events: auto !important;
        display: inline-flex !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
    }

    .ecommerce-icon {
        z-index: 1 !important;
        pointer-events: none !important;
    }
}


/* =========================================
   E-COMMERCE CART ICON - SIZE ONLY
   Tidak mengubah desain/posisi lainnya
========================================= */

.ecommerce-icon {
    font-size: 80px;
}

@media (max-width: 1000px) {
    .ecommerce-icon {
        font-size: 68px;
    }
}

@media (max-width: 600px) {
    .ecommerce-icon {
        font-size: 55px;
    }
}

@media (max-width: 380px) {
    .ecommerce-icon {
        font-size: 48px;
    }
}