/* ==========================================================================
   1. GLOBAL & RESET STYLES
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
}

html {
    height: 100%; /* Memberikan landasan tinggi penuh untuk body */
}

body {
    background-color: #1e1e1e;  /* Warna latar belakang gelap di luar layar HP */
    display: flex;
    justify-content: center;    /* Membuat frame HP pas di tengah layar secara horizontal */
    align-items: center;        /* Membuat frame HP pas di tengah layar secara vertikal */
    min-height: 100vh;
    overflow: hidden;           /* Mencegah browser utama memunculkan scrollbar liar */
}

/* ==========================================================================
   2. FRAME UTAMA SMARTPHONE (390 x 844)
   ========================================================================== */
.mobile-frame {
    background-color: #ffffff;
    width: 100%;
    max-width: 390px;
    height: 100vh;              /* 💡 Kunci: Menggunakan tinggi layar penuh HP */
    height: 100dvh;
    display: flex;
    flex-direction: column;
    position: relative;         /* Wajib agar navigasi absolut terkunci di dalam frame ini */
    overflow: hidden;           /* Kunci utama: Melarang seluruh frame utama untuk scroll vertikal */
    box-sizing: border-box;
    /* margin: 0 auto;  <- Boleh dihapus karena sudah di-center otomatis oleh display: flex milik body */
}

/* ==========================================================================
   EFEK FRAME HP DI LAPTOP (Hanya aktif jika layar lebih lebar dari 440px)
   ========================================================================== */
@media (min-width: 440px) {
    .mobile-frame {
        margin-top: 30px;
        margin-bottom: 30px;
        min-height: calc(100vh - 60px); /* Memberi jarak manis dari atas-bawah layar laptop */
        border-radius: 40px;            /* Sudut melengkung elegan mirip iPhone */
        box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.15); /* Shadow halus, tidak terlalu pekat */
    }
}

/* ==========================================================================
   3. HALAMAN PERTAMA (WELCOME PAGE) STYLES
   ========================================================================== */
.welcome-page {
    display: flex;
    flex-direction: column;
    align-items: center;        
    text-align: center;
    padding: 50px 30px 30px 30px;
    flex: 1;                   /* 💡 Mengisi seluruh ruang bodi frame secara fleksibel */
    box-sizing: border-box;
}

.welcome-page .welcome-title {
    color: #8E44AF; 
    font-size: 34px;
    font-weight: 600;
    margin-top: 0;             /* Dibuat 0 agar tidak menabrak batas atas frame */
}

.welcome-page .illustration-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 40px;          /* Menggantikan margin 87px agar lebih proporsional */
}

.welcome-page .promo-img {
    max-width: 100%;            /* Sedikit diperkecil agar tidak memenuhi layar */
    height: auto;
}

.welcome-page .brand-name {
    color: #8A44AF;
    font-size: 28px;
    font-weight: 800;
    margin-top: -24px;          /* Mengubah margin negatif menjadi positif agar rapi */
    margin-bottom: 0;
}

.welcome-page .brand-subtitle {
    color: #8A44AF;
    font-size: 14px;
    font-weight: 600;
    margin-top: 5px;
    margin-bottom: 0px;       /* 💡 Mendorong elemen di bawahnya (.action-buttons) ke paling dasar */
}

.welcome-page .action-buttons {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-top: 32px;
    margin-bottom: 20px;       /* Jarak aman dari ujung bawah frame HP */
}

/* ==========================================================================
   4. HALAMAN KEDUA (LOGIN PAGE) STYLES
   ========================================================================== */
.login-page {
    display: flex;
    flex-direction: column;
    align-items: center;        
    padding: 30px 24px;
    flex: 1;                   /* 💡 Mengisi seluruh ruang bodi frame secara fleksibel */
    box-sizing: border-box;
}

.login-page .header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.login-page .back-btn {
    display: flex;
    align-items: center;
    transition: transform 0.2s;
}

.login-page .back-btn:hover {
    transform: scale(1.1);
}

.login-page .page-title {
    color: #8A44AF;
    font-size: 32px;
    font-weight: 700;
    margin: 0;
}

.login-page .header-spacer {
    width: 28px; 
}

/* Mengatur posisi vertikal Form agar pas di tengah */
.login-page .login-form {
    width: 85%;                 /* Sedikit dinaikkan lebar volumenya agar seimbang */
    margin: 0 auto;            /* 💡 KUNCI: Membuat form berada tepat di tengah-tengah frame */
    display: flex;
    flex-direction: column;
    gap: 35px; 
    padding: 0;
    margin-top: 20px; 
    transition: all 0.3s ease-in-out;
}

.login-page .input-group {
    width: 100%;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #8A44AF; 
    padding-bottom: 8px;
}

.login-page .input-icon {
    display: flex;
    align-items: center;
    margin-right: 14px;
}

.login-page .input-icon img {
    width: 22px;
    height: 22px;
}

.login-page .form-input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 18px;
    color: #8A44AF; 
    font-weight: 500;
}

/* ==========================================================================
   LOGIKA INTERAKSI KEYBOARD (SMART UI ANIMATION)
   ========================================================================== */

/* 1. Mengatur efek transisi untuk gambar ilustrasi laptop */
.login-page .login-illustration {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    transition: all 0.25s ease-in-out;
}

.login-page .login-illustration img {
    max-width: 80%;
    height: auto;
}

/* 2. KETIKA INPUT DI-KLIK: Sembunyikan gambar ilustrasi secara total */
.login-page:focus-within .login-illustration {
    margin: 0;
    padding: 0;
    height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
}

/* 3. KETIKA INPUT DI-KLIK: Pangkas margin-top form agar naik ke atas */
.login-page:focus-within .login-form {
    margin-top: 96px;          /* 💡 PERBAIKAN: Diubah dari 120px ke 40px agar form naik ke atas saat mengetik */
}

.btn {
    display: block;
    width: 80%;                 /* Dibuat 80% agar terlihat pas dengan proporsi frame HP */
    padding: 14px 0;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.2s ease;
    cursor: pointer;
    box-sizing: border-box;
}

/* Tombol Login di dalam Form otomatis lebar 100% penuh mengikuti box form */
.login-form .btn {
    width: 100%;
    margin-top: 8px; 
}

.btn-primary {
    background-color: #8A44AF;
    color: #ffffff;
    border: none;
}

.btn-primary:hover {
    background-color: #713294; 
}

.btn-secondary {
    background-color: transparent;
    color: #8A44AF;
    border: 2px solid #8A44AF; 
}

.btn-secondary:hover {
    background-color: #f6eefc; 
}

/* ==========================================================================
   6. HALAMAN KETIGA (FYP PAGE) STYLES
   ========================================================================== */

.fyp-frame {
    padding: 0;
    justify-content: space-between;
    /* ❌ Hapus/hilangkan baris border-top dari sini karena tertutup foto */
}

.fyp-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    padding-bottom: 40px;
}

/* Lapisan gradasi hitam transparan (Sekarang kita pasang garis putih di sini) */
.fyp-frame::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 75%, rgba(0,0,0,0.4) 100%);
    z-index: 2; /* 👈 Karena z-index-nya lebih tinggi dari foto, garis pasti kelihatan */
    pointer-events: none;
    
    /* 🛠️ PASANG GARIS PEMBATAS DI SINI */
    border-top: 0px solid #ffffff; 
    box-sizing: border-box; /* Mencegah frame menjadi lebih panjang ke bawah */
}

.fyp-header {
    position: absolute;
    top: 32px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 24px;
    z-index: 3;
}

.fyp-header .tab {
    color: rgba(255, 255, 255, 0.7);
    font-size: 18px;
    font-weight: 700;
}

.fyp-header .tab.active {
    color: #ffffff;
    border-bottom: 3px solid #ffffff;
    padding-bottom: 4px;
}

/* Kumpulan Tombol Kanan */
.fyp-sidebar {
    position: absolute;
    bottom: 128px;
    right: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    z-index: 3;
    color: #ffffff;
}

.side-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: none;
}

/* 🛠️ MENGATUR UKURAN IKON SAMPING FIGMA */
.side-icon img {
    width: 45px;
    height: 45px;
    object-fit: contain;
}

.side-icon span {
    font-size: 13px;
    font-weight: 600;
}

/* Informasi Kiri Bawah */
.fyp-meta {
    position: absolute;
    bottom: 80px;
    left: 16px;
    width: 65%;
    color: #ffffff;
    z-index: 3;
}

.fyp-username {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
}

.fyp-caption {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 10px;
}

.fyp-audio {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    width: 90%;
}

/* Menu Navigasi Bawah */
.fyp-navbar {
    position: absolute;      /* Mengunci posisi melayang di dasar frame */
    bottom: 0;               /* Menempel erat di ujung bawah .mobile-frame */
    left: 0;
    width: 100%;             /* Lebar penuh mengikuti bodi HP */
    height: 65px;            
    background-color: #8A44AF; 
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 10px;         /* Menjaga ikon navigasi tidak terlalu mepet ke pinggir layar */
    z-index: 999;            /* Angka tinggi agar selalu berada di atas video dan konten profile */
    box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.15); /* Efek bayangan halus di atas bar */
    box-sizing: border-box;  /* Mencegah padding merusak lebar 100% */
}
.nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
}

/* 🛠️ MENGATUR UKURAN IKON BAWAH FIGMA */
.nav-item img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* Khusus tombol plus tengah jika ukurannya berbeda di desain Anda */
.plus-btn img {
    width: 40px;
    height: auto;
}

/* SAKELAR PENGUNCI ELEMEN */
.disabled {
    pointer-events: none;
    opacity: 0.9;
}

.profile-btn {
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.profile-btn:hover {
    transform: scale(1.15);
}

/* ==========================================================================
   7. HALAMAN KEEMPAT (SETTINGS & PRIVACY PAGE) STYLES
   ========================================================================== */

.profile-frame {
    background-color: #ffffff;
    padding: 30px 5px 85px 5px; /* Ruang bawah disisakan untuk navbar */
    justify-content: flex-start;
    position: relative;
}

/* Header Profil */
.profile-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    margin-bottom: 25px;
    border-bottom: 1px solid #f2e6f7;
    padding: 0 15px 15px 15px; 
    box-sizing: border-box;
}

.back-to-fyp {
    display: flex;
    align-items: center;
    transition: transform 0.2s;
    text-decoration: none;
}

.back-to-fyp:hover {
    transform: scale(1.15);
}

.profile-title {
    color: #8A44AF;
    font-size: 22px;
    font-weight: 700;
}

/* Container Menu Rollover */
.menu-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 25px;
    overflow-y: auto;
    padding: 10px 15px 25px 15px; 
    box-sizing: border-box; 
}

.menu-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.section-title {
    color: #8A44AF;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-left: 10px;
    opacity: 0.8;
}

/* Pola Kapsul Menu Utama */
.menu-item {
    display: flex;
    align-items: center;
    background-color: #FAEFFF; /* Warna dasar ungu super soft */
    padding: 14px 20px;
    border-radius: 30px;
    box-shadow: 0px 6px 20px rgba(138, 68, 175, 0.35); /* Soft shadow dari figma */
    text-decoration: none;
    transition: all 0.2s ease;
}

.menu-icon {
    width: 24px;
    height: 24px;
    margin-right: 15px;
    object-fit: contain;
}

.menu-text {
    color: #8A44AF;
    font-size: 15px;
    font-weight: 600;
}

/* Pengunci klik untuk menu standard */
.menu-item.locked {
    pointer-events: none;
    cursor: default;
}

/* Animasi khusus untuk menu yang bisa diklik */
.clickable-menu:hover {
    background-color: #f6eefc;
    transform: translateY(-2px);
    box-shadow: 0px 8px 20px rgba(138, 68, 175, 0.12);
}

/* Modifikasi Aturan Khusus Navigasi Bawah di Halaman Profil */
.home-trans-btn {
    opacity: 0.55; /* Membuat ikon home menjadi agak transparan */
    text-decoration: none;
    transition: opacity 0.2s;
}

.home-trans-btn:hover {
    opacity: 1;
}

.profile-full-btn {
    text-decoration: none;
    transform: scale(1.05); /* Sedikit dipertegas */
}

.menu-divider {
    width: 100%;
    height: 1.5px;               /* Ketebalan garis tipis yang rapi */
    background-color: #EFE4F5;   /* Warna ungu abu-abu pastel super soft agar tidak mati */
    margin: 10px 0;              /* Jarak renggang atas dan bawah garis */
}

.scroll-content {
    width: 100%;
    flex: 1;                 /* Mengambil sisa ruang di antara header dan navbar */
    overflow-y: auto;        /* Hanya area ini yang diizinkan untuk di-scroll vertikal */
    overflow-x: hidden;      /* Mencegah scroll horizontal (bocor) */
    padding-bottom: 0px;    /* SANGAT PENTING: Jarak bawah agar menu terbawah tidak tertutup navbar */
    box-sizing: border-box;
}

.fyp-navbar {
    position: absolute;      /* Mengunci posisi melayang di dasar frame */
    bottom: 0;               /* Menempel erat di ujung bawah .mobile-frame */
    left: 0;
    width: 100%;             /* Lebar penuh mengikuti bodi HP */
    height: 65px;            
    background-color: #8A44AF; 
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 10px;         /* Menjaga ikon navigasi tidak terlalu mepet ke pinggir layar */
    z-index: 999;            /* Angka tinggi agar selalu berada di atas video dan konten profile */
    box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.15); /* Efek bayangan halus di atas bar */
    box-sizing: border-box;  /* Mencegah padding merusak lebar 100% */
}

/* ==========================================================================
   8. HALAMAN PREFERENSI IKLAN STYLES & ANIMASI TOGGLE
   ========================================================================== */

/* Area Info Sub-Header */
/* Cari bagian ini di style.css Anda dan sesuaikan nilainya: */

.pref-info-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;

    /* 🛠️ SAKLAR UNTUK MEMINDAHKAN POSISI BLOK (TEKS + TOMBOL) */
    margin-top: -5px;      /* 👈 NAIK/TURUN: Tambah angkanya (misal 25px) untuk menurunkan, kurangi untuk menaikkan */
    margin-bottom: 20px;   /* Jarak blok ini ke kapsul menu pertama di bawahnya */
    
    padding: 0 32px;       /* 👈 GESER KANAN-KIRI: Mengatur jarak dari dinding frame kiri & kanan (Semakin besar angkanya, makin masuk ke tengah) */
}

.pref-text-block {
    width: 100%;              /* 👈 UBAH: Buat 100% agar teks bebas memanjang ke kanan */
    margin-bottom: 15px;       /* 👈 TAMBAHKAN: Jarak tipis antara teks deskripsi dengan tombol di bawahnya */
}

.pref-section-title {
    color: #8A44AF;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 6px;
}

.pref-description {
    color: #A364C7;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
}

/* Tombol Simpan Ungu */
.save-preference-btn {
    color: #8A44AF;
    font-size: 18px;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.2s;
    cursor: pointer;
    align-self: flex-end; /* Tetap di kanan bawah */
    
    /* 🛠️ ALTERNATIF JIKA MAU MERAPETKAN KE KANAN */
    margin-right: 10px;     /* 👈 Tambah angkanya jika mau tombol agak geser ke kiri (tidak terlalu mepet dinding kanan) */
    margin-bottom: -10px;
}

.save-preference-btn:hover {
    transform: scale(1.08);
}

/* Kapsul Item Khusus Toggle */
.menu-item-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Membuat konten kiri dan tombol kanan terpisah ujung */
    background-color: #FAEFFF;
    padding: 14px 20px;
    border-radius: 30px;
    box-shadow: 0px 6px 20px rgba(138, 68, 175, 0.35);
    box-sizing: border-box;
    width: 100%;
}

.item-left-content {
    display: flex;
    align-items: center;
}

/* 🎛️ RACIKAN DESIGN SAKELAR SWITCH (FIGMA LOOKS) */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
    cursor: pointer;
}

/* Menyembunyikan input kotak bawaan HTML */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* Rumah/Background Sakelar (Default Kondisi MATI - Abu-abu gelap Figma) */
.slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #8E8E93;
    border-radius: 34px;
    transition: background-color 0.3s ease; /* Transisi warna halus */
}

/* Kenop Bulat Putih di Dalam Sakelar */
.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Efek luncur animasi kenyal */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

/* 🟢 ANIMASI NYALA: Saat checkbox dicentang, background berganti Biru Terang Figma */
input:checked + .slider {
    background-color: #2F80ED;
}

/* 🟢 ANIMASI NYALA: Kenop bulat meluncur mulus ke sebelah kanan */
input:checked + .slider:before {
    transform: translateX(22px);
}

/* ==========================================================================
   9. HALAMAN PREFERENSI DISIMPAN (SUCCESS PAGE) STYLES
   ========================================================================== */

/* Mengatur frame agar membagi porsi ruang secara vertikal tanpa merusak tinggi asli .mobile-frame */
.success-page-flex {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
    align-items: center;
    /* 💡 KUNCI PERBAIKAN: height: 100% DIHAPUS agar tinggi frame kembali normal diatur oleh .mobile-frame */
    box-sizing: border-box;
    background-color: #ffffff;
    padding: 0;                     
}

/* --------------------------------------------------------------------------
   [0] HEADER ATAS (PROFILE HEADER)
   -------------------------------------------------------------------------- */
.profile-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 15px 24px;   
    border-bottom: 1px solid #F2E6FA; 
    background-color: #ffffff;
}

.profile-title {
    color: #8A44AF;
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    flex: 1;
    text-align: center;            
}

.back-to-fyp {
    display: flex;
    align-items: center;
    transition: transform 0.2s ease;
}

.back-to-fyp:hover {
    transform: scale(1.1);
}

.header-spacer {
    width: 28px;                   
}

/* --------------------------------------------------------------------------
   [1] KONTEN TENGAH (ELASTIS & ANTI-MENCIUT)
   -------------------------------------------------------------------------- */
.success-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;       
    text-align: center;
    padding: 0 24px;
    box-sizing: border-box;                
}

.success-illustration {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px;             
    margin-bottom: 15px;           
}

.success-illustration img {
    width: auto;
    max-width: 100%;
    max-height: 296px;            
    height: auto;
    object-fit: contain;
}

/* Teks Judul Sukses */
.success-title {
    color: #8A44AF;
    font-size: 20px;              
    font-weight: 800;
    margin: -24px 0 8px 0;
}

/* Teks Deskripsi */
.success-desc {
    color: #A364C7;
    font-size: 14px;              
    font-weight: 500;
    line-height: 1.5;
    max-width: 280px;
    margin: 0;
}

/* --------------------------------------------------------------------------
   [2] KELOMPOK TOMBOL BAWAH (STAY AT BOTTOM)
   -------------------------------------------------------------------------- */
.success-btn-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;   
    gap: 12px;                     
    padding: 15px 35px 30px 35px;  
    box-sizing: border-box;
    margin-top: 32px;              
}

/* Kunci Selector Tombol Kapsul secara Spesifik */
.success-btn-group .btn-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 240px;              
    height: 48px;                  
    border-radius: 25px;  
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

/* Tombol 1: Ungu Solid (Kembali ke FYP) */
.success-btn-group .btn-filled-purple {
    background-color: #8A44AF;
    color: #ffffff;
    box-shadow: 0px 4px 15px rgba(138, 68, 175, 0.15);
    border: none;
}

.success-btn-group .btn-filled-purple:hover {
    background-color: #733494;
    transform: translateY(-2px);
}

/* Tombol 2: Outlined Ungu (Ubah Lagi) */
.success-btn-group .btn-outlined-purple {
    background-color: #ffffff;
    color: #8A44AF;
    border: 2px solid #8A44AF;
}

.success-btn-group .btn-outlined-purple:hover {
    background-color: #FDF6FF;
    transform: translateY(-2px);
}

.success-btn-group .btn-pill:active {
    transform: translateY(1px);
}

/* ==========================================================================
   10. PERBAIKAN KHUSUS UNTUK TAMPILAN HP ASLI (RESPONSIVE RESET)
   ========================================================================== */
@media (max-width: 480px) {
    /* 1. Reset body agar tidak menggeser halaman ke atas/bawah di HP */
    body {
        display: block; 
        min-height: 100dvh;
        overflow: hidden;
        background-color: #ffffff; /* Samakan dengan warna bg aplikasi */
    }

    /* 2. Paksa frame mengikuti 100% lebar dan tinggi layar HP asli kamu */
    .mobile-frame, .profile-frame, .success-page-flex {
        max-width: 100% !important;
        width: 100% !important;
        height: 100dvh !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* 3. Beri ruang aman di bawah navbar agar tidak tertutup garis navigasi HP */
    .fyp-navbar {
        padding-bottom: env(safe-area-inset-bottom, 12px) !important;
        height: calc(65px + env(safe-area-inset-bottom, 12px)) !important;
    }

    /* 4. Pastikan video dan konten di dalamnya tidak dikunci di 390px */
    .video-container, 
    .fyp-container, 
    video, 
    .success-content {
        width: 100% !important;
        max-width: 100% !important;
    }
}