/* --- CUSTOM COLORS (RGB) --- */
        .body-bg-color { background-color: rgb(243, 244, 246); }    /* Gray-100 */
        .bg-white-color { background-color: rgb(255, 255, 255); }   /* White */
        .border-gray-300-color { border-color: rgb(209, 213, 219); } /* Gray-300 */


        /* Warna Akses Cyan (Teal) */
        .header-bg-color { background-color: rgb(15, 118, 126); } /* Cyan 700 */
        .rute-text-color { color: rgb(23, 137, 145); }  /* Cyan 800 */
        .footer-bg-color { background-color: rgb(207, 250, 254); } /* Cyan 100 */
        .footer-text-color { color: rgb(6, 182, 212); } /* Cyan 700 */

        /* Warna Aksen Orange (Kode Booking) */
        .booking-code-color { color: rgb(234, 88, 12); } /* Orange 600 */

        /* Warna Tombol (Indigo) */
        .btn-bg-color { background-color: rgb(79, 70, 229); }    /* Indigo 600 */
        .btn-hover-color { background-color: rgb(67, 56, 202); } /* Indigo 700 */
        .btn-disabled-color { background-color: rgb(165, 180, 252); } /* Indigo 300 */
        
        /* Warna Teks */
        .text-white-color { color: rgb(255, 255, 255); } 
        .text-gray-500-color { color: rgb(107, 114, 128); } /* Label Text */
        .text-gray-900-color { color: rgb(17, 24, 39); }    /* Main Value Text */

        /* Tipografi */
        .text-center {
            text-align: center;
        }

        .text-left {
            text-align: left;
        }

        /* Pembulatan (Borders & Shadows) */
        .rounded-3xl {
            border-radius: 1.5rem; /* 24px */
        }

        .rounded-t-3xl {
            border-top-left-radius: 1.5rem;
            border-top-right-radius: 1.5rem;
        }

        .rounded-b-3xl {
            border-bottom-left-radius: 1.5rem;
            border-bottom-right-radius: 1.5rem;
        }
        /* --- CUSTOM TYPOGRAPHY & LAYOUT --- */
        
        /* Font Weights */
        .font-bold-weight { font-weight: 700; }
        .font-extrabold-weight { font-weight: 800; }
        .font-semibold-weight { font-weight: 600; }
        .font-medium-weight { font-weight: 500; }

        /* Font Sizes */
        .text-xs-size { font-size: 0.75rem; } /* text-xs */
        .text-sm-size { font-size: 0.875rem; } /* text-sm */
        .text-2xl-size { font-size: 1.5rem; } /* text-2xl */
        .text-3xl-size { font-size: 1.875rem; } /* text-3xl */

        /* Other properties */
        .uppercase-val { text-transform: uppercase; }
        .opacity-80-val { opacity: 0.8; }
        .ticket-border {
            border-width: 1px;
            border-style: solid;
            border-color: rgb(209, 213, 219); /* Gray-300 */
        }

        /* Ukuran Ikon */
        .icon-size-large {
            font-size: 48px;
        }

        /* --- Custom CSS untuk Efek TIKET POTRAIT (Perforasi Horizontal) --- */
        .horizontal-perforation {
            position: relative;
            /* Garis putus-putus horizontal */
            border-bottom: 4px dashed; 
            border-bottom-color: rgb(209, 213, 219);
            padding-bottom: 24px; 
            margin-bottom: 24px; 
        }

        /* Lingkaran potong di sisi KIRI dan KANAN (Efek "Lubang") */
        .horizontal-perforation::before,
        .horizontal-perforation::after {
            content: '';
            position: absolute;
            /* Warna lubang sama dengan latar belakang BODY (Hardcoded) */
            background-color: rgb(243, 244, 246); 
            width: 24px;
            height: 24px;
            border-radius: 50%;
            z-index: 20;
            top: 100%; 
            transform: translateY(-50%);
        }

        .horizontal-perforation::before {
            left: -14px;
        }

        .horizontal-perforation::after {
            right: -14px;
        }
        
        /* Mengatur style QR Code */
        #qrcode1 {
            display: inline-block; 
            max-width: 100px; 
            width: 100%;
            padding: 0 !important;
            border: none !important;
            background-color: transparent !important;
        }
        
        #qrcode1 > canvas, #qrcode1 > table {
            width: 100% !important; 
            height: 100% !important;
            border: none !important;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: #0F172A; /* bg-slate-900 */
            /* Mencegah scroll horizontal (overflow-x) seperti permintaan */
            overflow-x: hidden; 
            overflow-y: auto; 
            /* Mengatur body agar minimal setinggi viewport untuk menempatkan footer di bawah */
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* Konten utama harus fleksibel bertumbuh agar footer selalu di bawah */
        #main-content-wrapper {
            flex-grow: 1;
        }
        
        /* Gaya Dasar Header - HANYA TRANSISI DISINI */
        #main-header {
            /* Transisi untuk properti background dan backdrop-filter */
            transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
        }

        /* Gaya Header saat discroll (ditambahkan via JS) */
        .scrolled-header {
            /* Latar belakang semi-transparan (slate-900/80) */
            background-color: rgba(15, 23, 42, 0.8);
            /* Efek Blur Glassmorphism */
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px); /* Untuk kompatibilitas Safari */
            /* Border dan shadow tetap ada */
            border-bottom-color: rgba(52, 211, 235, 0.3);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
        }

        /* Mengatur z-index untuk elemen dekoratif latar belakang */
        .-z-10 { z-index: -10; }

        /* Keyframes untuk Animasi Garis Latar Belakang */
        @keyframes flow-diag {
            0% { transform: translate(0, 0); }
            100% { transform: translate(100px, 100px); }
        }

        /* Gaya Latar Belakang Grid/Garis */
        #immigration-backdrop {
            background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%),
                              linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%),
                              linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.05) 75%),
                              linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.05) 75%);
            background-size: 50px 50px;
        }

        /* Menyembunyikan spinner di input number (hanya untuk tampilan) */
        .otp-input::-webkit-outer-spin-button,
        .otp-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
        .otp-input { appearance: none; -moz-appearance: textfield; }
        
        /* CAPTCHA Styling */
        .captcha-canvas {
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            border-radius: 6px;
            cursor: grab;
            touch-action: none;
        }
        /* Custom scrollbar untuk daftar hasil */
        #country-list-container::-webkit-scrollbar {
            width: 6px;
        }
        #country-list-container::-webkit-scrollbar-thumb {
            background-color: #d1d5db; /* gray-300 */
            border-radius: 3px;
        }
        #country-list-container::-webkit-scrollbar-thumb:hover {
            background-color: #9ca3af; /* gray-400 */
        }
        
        /* 1. Menentukan tinggi yang sama untuk trigger dan input phone number */
        #country-code-trigger {
            /* Mengatur tinggi kustom yang konsisten */
            height: 3.25rem; /* setara dengan px-4 py-3 input normal */
        }
        /* Penyesuaian agar tampilan trigger dan input telepon rata */
        #country-code-trigger > span {
            line-height: 1.5; /* Memastikan teks di tengah */
        }

        .local-input-integrated {
            border: none !important; /* Hilangkan border individual */
            outline: none !important; /* Hilangkan outline default */
            box-shadow: none !important; /* Hilangkan shadow individual */
            /* Pastikan background sama dengan container utama jika tidak ada fokus */
        }
        .bg-modal-blur {
            background-color: rgba(15, 23, 42, 0.8);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .border-cyan-400\/20 {
            border-color: color-mix(in srgb, rgb(0, 211, 242) 20%, transparent);
        }