:root {
            --primary: #d81b60;
            --primary-light: #ec407a;
            --primary-soft: #fce4ec;
            --primary-bg: #fff7fa;
        
            --text-primary: #d81b60;
            --text-dark: #3a2630;
            --text-muted: #8a6f7a;
        
            --border: #f3d5e0;
            
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            background: #e9eef5;
            font-family: Arial, sans-serif;
        }

        /* ========================================
           MOBILE APP CONTAINER
        ======================================== */

        .app {
            width: 100%;
            max-width: 480px;
        
            height: 100dvh;
            min-height: 100dvh;
        
            margin: auto;
            background: var(--primary-bg);
        
            position: relative;
            overflow: hidden;
        
            box-shadow: 0 0 30px rgba(0, 0, 0, .10);
        }

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

        .app-header {
            height: 65px;
            background: #ffffff;

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

            padding: 0 18px;

            border-bottom: 1px solid #e5e7eb;

            position: relative;
            z-index: 10;
        }

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

        .brand-icon {
            width: 40px;
            height: 40px;

            border-radius: 12px;

            background: var(--primary-soft);
            color: var(--primary);

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

            font-size: 21px;
        }
        
        .brand-icon img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        .brand-title {
            font-size: 17px;
            font-weight: 700;
            color: #172033;
        }

        .brand-subtitle {
            font-size: 11px;
            color: #7b8494;
        }


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

       .app-content {
            height: calc(100dvh - 65px);
        
            overflow-y: auto;
        
            /*
             * 72px = tinggi bottom navigation
             * + 20px = jarak aman
             * + safe area HP
             */
            padding: 20px 16px calc(92px + env(safe-area-inset-bottom));
        
            scrollbar-width: none;
        }
        
        .app-content::-webkit-scrollbar {
            display: none;
        }


        /* ========================================
           WELCOME
        ======================================== */

        .welcome {
            margin-bottom: 20px;
        }

        .welcome small {
            color: #7b8494;
            font-size: 13px;
        }

        .welcome h1 {
            margin: 4px 0 0;

            font-size: 25px;
            font-weight: 700;

            color: #172033;
        }


        /* ========================================
           HERO CARD
        ======================================== */
/*
        .hero-card {
            background:
                linear-gradient(
                    135deg,
                    #d81b60,
                    #ec407a
                );
        
            color: white;
        
            border-radius: 22px;
        
            padding: 22px;
        
            margin-bottom: 20px;
        
            position: relative;
            overflow: hidden;
        
            box-shadow:
                0 10px 25px rgba(216, 27, 96, .20);
        }

        .hero-card::after {

            content: "";

            position: absolute;

            width: 140px;
            height: 140px;

            border-radius: 50%;

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

            right: -50px;
            top: -50px;
        }

        .hero-card h2 {
            font-size: 21px;
            font-weight: 700;

            margin-bottom: 8px;

            position: relative;
            z-index: 2;
        }

        .hero-card p {

            font-size: 13px;

            line-height: 1.6;

            margin-bottom: 18px;

            opacity: .9;

            position: relative;
            z-index: 2;
        } */
        
        .hero-card,
        .hero-image-card {
            width: 100%;
            height: 200px;
            border-radius: 20px;
            overflow: hidden;
        }
        
        
        /* SLIDER TEKS */
        .hero-card {
            position: relative;
            background: linear-gradient(
                135deg,
                #d81b60,
                #ec407a
            );
        
            display: flex;
            align-items: center;
        }
        
        
        /* ISI SLIDER */
        .hero-content {
            position: relative;
            z-index: 2;
            padding: 30px;
            color: #fff;
            max-width: 700px;
        }
        
        .hero-content h2 {
            margin: 0 0 12px;
            font-size: 30px;
            font-weight: 700;
            line-height: 1.2;
        }
        
        .hero-content p {
            margin-bottom: 20px;
            font-size: 14px;
            line-height: 1.6;
        }
        
        
        /* SLIDER GAMBAR */
        .hero-image-card {
            position: relative;
            background: #f8f8f8;
        }
        
        .hero-image-card img {
            width: 100%;
            height: 200px;
            display: block;
            object-fit: cover;
        }
        
        
        /* AGAR INDICATOR LEBIH TERLIHAT */
        #heroSlider .carousel-indicators {
            margin-bottom: 10px;
        }
        
        #heroSlider .carousel-indicators button {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            border: none;
        }
        
        
        /* TOMBOL SLIDER */
        #heroSlider .carousel-control-prev,
        #heroSlider .carousel-control-next {
            width: 45px;
        }

        .hero-button {

            background: white;
            color: #0d6efd;

            border: none;

            padding: 9px 15px;

            border-radius: 10px;

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

            position: relative;
            z-index: 2;
        }
        .hero-button-outline {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        
            background: transparent;
            color: #ffffff;
        
            border: 1px solid rgba(255, 255, 255, 0.8);
        
            padding: 9px 15px;
        
            border-radius: 10px;
        
            font-size: 13px;
            font-weight: 600;
        
            text-decoration: none;
        
            position: relative;
            z-index: 2;
        
            transition: .2s ease;
        }
        
        .hero-button-outline:hover {
            background: rgba(255, 255, 255, 0.12);
            color: #ffffff;
            border-color: #ffffff;
        }

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

        .section-title {

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

            margin-bottom: 12px;
        }

        .section-title h3 {

            margin: 0;

            font-size: 17px;

            font-weight: 700;

            color: #172033;
        }

        .section-title a {

            font-size: 12px;

            color: #0d6efd;

            text-decoration: none;
        }


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

        .menu-grid {

            display: grid;

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

            gap: 10px;

            margin-bottom: 25px;
        }

        .menu-item {

            background: white;
            border: 1px solid var(--border);
            border-radius: 16px;

            padding: 13px 5px;

            text-align: center;

            text-decoration: none;

            color: #172033;

            transition: .2s;
        }

        .menu-item:hover {

            transform: translateY(-2px);

            border-color: #f3a9c3;
        }

        .menu-icon {

            width: 42px;
            height: 42px;

            margin: auto auto 8px;

            border-radius: 13px;

            background: var(--primary-soft);
            color: var(--primary);

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

            font-size: 20px;
        }

        .menu-item span {

            display: block;

            font-size: 11px;

            font-weight: 600;

            color: #4b5563;
        }


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

        .info-card {
            background: white;
            border-radius: 18px;
            padding: 16px;
            margin-bottom: 12px;
            border: 1px solid var(--border);
        }

        .info-card-header {

            display: flex;

            align-items: center;

            gap: 12px;

            margin-bottom: 12px;
        }

        .info-icon {

            width: 42px;
            height: 42px;

            border-radius: 12px;

            background: var(--primary-soft);
            color: var(--primary);

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

            font-size: 19px;
        }

        .info-card h4 {

            margin: 0;

            font-size: 15px;

            font-weight: 700;

            color: #172033;
        }

        .info-card p {

            margin: 0;

            font-size: 12px;

            line-height: 1.6;

            color: #737d8c;
        }


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

        .stat-card {

            background: white;

            border-radius: 18px;

            padding: 16px;

            border: 1px solid #edf0f5;

            height: 100%;
        }

        .stat-icon {

            width: 38px;
            height: 38px;

            border-radius: 11px;

            background: var(--primary-soft);
            color: var(--primary);

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

            margin-bottom: 10px;
        }

        .stat-number {

            font-size: 22px;

            font-weight: 700;

            color: #172033;
        }

        .stat-label {

            font-size: 11px;

            color: #7b8494;
        }


        /* ========================================
           BOTTOM NAVIGATION
        ======================================== */

      .bottom-nav {
            position: absolute;
        
            left: 0;
            right: 0;
            bottom: 0;
        
            min-height: 72px;
        
            /*
             * Tambahkan area aman untuk HP
             */
            padding-bottom: env(safe-area-inset-bottom);
        
            background: rgba(255,255,255,.97);
        
            backdrop-filter: blur(10px);
        
            border-top: 1px solid var(--border);
        
            display: flex;
            align-items: center;
            justify-content: space-around;
        
            z-index: 100;
        }
        .nav-item {

            flex: 1;

            height: 100%;

            display: flex;

            flex-direction: column;

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

            gap: 4px;

            text-decoration: none;

            color: #8992a2;

            font-size: 10px;

            transition: .2s;
        }

        .nav-item i {

            font-size: 21px;

            line-height: 1;
        }

        .nav-item.active {

            color: var(--primary);
            font-weight: 600;
        }

        .nav-item.active i {

            font-size: 23px;
        }


        /* ========================================
           FLOATING CENTER BUTTON
        ======================================== */

        .nav-main {

            position: relative;
        }

        .nav-main-icon {

            width: 52px;
            height: 52px;

            margin-top: -28px;

            border-radius: 17px;
            background: linear-gradient(
                135deg,
                #d81b60,
                #ec407a
            );
        
            color: white;

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

            font-size: 24px;

            border: 5px solid var(--primary-bg);

            box-shadow:
                0 6px 15px rgba(13,110,253,.25);
        }

        .nav-main span {

            margin-top: 1px;
        }
    
    .page-section {
        width: 100%;
        animation: pageFade .2s ease;
    }
    
    @keyframes pageFade {
    
        from {
            opacity: 0;
            transform: translateY(5px);
        }
    
        to {
            opacity: 1;
            transform: translateY(0);
        }
    
    }

    #profil p {
        text-align: justify;
        line-height: 1.7;
        font-size: 14px;
        color: #555;
    }
    
    #profil p strong {
        font-weight: 700;
        color: #333;
    }
    
    .facility-image {
        width: 100%;
        height: 200px;
        overflow: hidden;
        border-radius: 14px;
        margin: 15px 0;
    }
    
    .facility-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    
    .facility-video {
        width: 100%;
        height: 200px;
        overflow: hidden;
        border-radius: 14px;
        margin: 15px 0;
        background: #000;
    }
    
    .facility-video video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    
    #kontakAlert {
        border-radius: 12px;
        font-size: 14px;
    }
    
    #btnKirimKontak {
        min-height: 46px;
        border-radius: 12px;
        font-weight: 600;
    }
    
    #btnKirimKontak:disabled {
        cursor: not-allowed;
        opacity: .75;
    }
    
    /* Container pilihan layanan */ 
    .layanan-pilihan { 
        display: grid; grid-template-columns: repeat(2, 1fr); 
        gap: 12px; 
    } 
    /* Radio asli disembunyikan */ 
    .layanan-pilihan input[type="radio"] { 
        display: none; 
    } 
    /* Tombol pilihan */ 
    .layanan-option { 
        display: flex; 
        align-items: center; 
        gap: 12px; 
        padding: 14px 16px; 
        border: 2px solid #f3d5e0; 
        border-radius: 14px; 
        background: #fff; 
        color: #8a6f7a; 
        cursor: pointer; 
        transition: all 0.2s ease; 
        user-select: none; 
    } 
    /* Icon */ 
    .layanan-option > i { 
        width: 42px; 
        height: 42px; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        border-radius: 12px; 
        background: #fce4ec; 
        color: #d81b60; 
        font-size: 20px; 
        transition: all 0.2s ease; 
    } 
    /* Tulisan */ 
    .layanan-option span { 
        display: flex; 
        flex-direction: column; 
        gap: 2px; 
    } 
    .layanan-option strong { 
        color: #3a2630; 
        font-size: 15px; 
    } 
    .layanan-option small { 
        color: #8a6f7a; 
        font-size: 12px; 
    } 
    /* Hover */ 
    .layanan-option:hover { 
        border-color: #ec407a; 
        transform: translateY(-1px); 
    } 
    /* ===== RADIO DIPILIH ====== */ 
    .layanan-pilihan input[type="radio"]:checked + .layanan-option { 
        background: #d81b60; 
        border-color: #d81b60; 
        color: #fff; 
        box-shadow: 0 6px 16px rgba(216, 27, 96, 0.22); 
    } 
    /* Icon saat dipilih */ 
    .layanan-pilihan input[type="radio"]:checked + .layanan-option > i { 
        background: #fff; 
        color: #d81b60; 
    } 
    /* Judul saat dipilih */ 
    .layanan-pilihan input[type="radio"]:checked + .layanan-option strong { 
        color: #fff; 
    } 
    /* Keterangan saat dipilih */ 
    .layanan-pilihan input[type="radio"]:checked + .layanan-option small { 
        color: rgba(255, 255, 255, 0.85); 
    }    
    
    /* ========================================
       BUTTON PRIMARY
    ======================================== */
    
    .btn-primary {
        background-color: var(--primary);
        border-color: var(--primary);
        color: #fff;
    }
    
    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active {
        background-color: var(--primary-light) !important;
        border-color: var(--primary-light) !important;
        color: #fff !important;
    }
    
    .btn-primary:disabled {
        background-color: var(--primary);
        border-color: var(--primary);
        color: #fff;
        opacity: .75;
    }

    /* ===== MOBILE==== */ 
    
    @media (max-width: 576px) {
        
        .hero-card,
        .hero-image-card {
            height: 200px;
            border-radius: 18px;
        }
    
        .hero-content {
            padding: 24px;
        }
    
        .hero-content h2 {
            font-size: 25px;
        }
    
        .hero-content p {
            font-size: 13px;
            line-height: 1.5;
        }
    
    }
    
    @media (min-width: 481px) {

        .app {
            height: 100vh;
            border-left: 1px solid #e5e7eb;
            border-right: 1px solid #e5e7eb;
        }

    }
    
    @media (max-width: 480px) { 

        .layanan-pilihan { 
            gap: 8px; 
        } 
        .layanan-option { 
            padding: 12px 10px; 
            gap: 8px; 
            border-radius: 12px; 
        } 
        .layanan-option > i { 
            width: 36px; 
            height: 36px; 
            font-size: 17px; 
        } 
        .layanan-option strong { 
            font-size: 14px; 
        } 
        .layanan-option small { 
            font-size: 11px; 
        } 
    }