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

body {
    background-color: #1e1e1e;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* ==========================================================================
   2. FRAME UTAMA SMARTPHONE (390 x 844)
   ========================================================================== */
.mobile-frame {
    background-color: #ffffff;
    width: 390px;
    height: 844px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 40px 25px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

/* ==========================================================================
   3. HALAMAN PERTAMA (WELCOME PAGE) STYLES
   ========================================================================== */
.welcome-title {
    color: #8E44AF; 
    font-size: 34px;
    font-weight: 600;
    margin-top: 10px;
}

.illustration-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

.promo-img {
    max-width: 100%;
    height: auto;
    margin-top: 87px;
}

.brand-name {
    color: #8A44AF;
    font-size: 28px;
    font-weight: 800;
    margin-top: -17px; 
}

.brand-subtitle {
    color: #8A44AF;
    font-size: 14px;
    font-weight: 600;
    margin-top: 5px;
    margin-bottom: auto;
}

.action-buttons {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-bottom: 80px; 
}

/* ==========================================================================
   4. HALAMAN KEDUA (LOGIN PAGE) STYLES
   ========================================================================== */
.header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

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

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

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

.header-spacer {
    width: 28px; 
}

/* Mengatur posisi vertikal Form agar pas di tengah atas seperti di gambar */
.login-form {
    width: 80%;
    display: flex;
    flex-direction: column;
    gap: 35px; 
    padding: 0 10px;
    margin-top: 120px; /* Jarak pas dari judul login ke area input */
}

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

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

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

.form-input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 18px;
    color: #8A44AF; /* Warna teks isi otomatis menjadi ungu sesuai gambar */
    font-weight: 500;
}

/* ==========================================================================
   5. REUSABLE COMPONENTS (BUTTON SYSTEM)
   ========================================================================== */
.btn {
    display: block;
    width: 70%; 
    padding: 14px 0;
    text-align: center;
    text-decoration: none;
    font-size: 20px;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.2s ease;
    cursor: pointer;
}

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

.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;
}

/* 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;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 65px;
    background-color: #8A44AF;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 10px;
    z-index: 4;
}

.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 */
}

/* ==========================================================================
   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 DIKSIMPAN (SUCCESS PAGE) STYLES
   ========================================================================== */

/* Mengatur frame agar memanjang ke bawah dan membagi porsi ruang secara vertikal */
.success-page-flex {
    display: flex;
    flex-direction: column;
    /* KUNCI: Diubah ke flex-start agar susunan rapat ke atas dan jarak bisa disetel manual */
    justify-content: flex-start; 
    align-items: center;
    padding-top: 40px;
    padding-bottom: 40px;
}

/* Bungkus Konten Tengah (Gambar + Teks) */
.success-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 25px;
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   [1] KENDALI GAMBAR (ILUSTRASI)
   -------------------------------------------------------------------------- */
.success-illustration {
    width: 100%;
    max-width: 320px; /* Lebar maksimal gambar agar proporsional */
    display: block;
    margin-left: auto;
    margin-right: auto;

    /* 🎛️ SAKLAR 1: MENGATUR GAMBAR NAIK / TURUN */
    margin-top: 12px;     /* Ubah angka ini: Tambah untuk MENURUNKAN gambar, kurangi untuk MENAIKKAN gambar */

    /* 🎛️ SAKLAR 2: JARAK ANTARA GAMBAR DAN TEKS DI BAWAHNYA */
    margin-bottom: 4px;  /* Ubah angka ini: Tambah untuk MENJAUHKAN teks, kurangi untuk MENDEKATKAN teks */
}

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

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

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

/* --------------------------------------------------------------------------
   [2] KENDALI KELOMPOK TOMBOL BAWAH
   -------------------------------------------------------------------------- */
.success-btn-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;   /* Menjaga tombol mutlak tetap di tengah screen */
    gap: 16px;             /* Jarak vertikal antar tombol */
    padding: 0 35px;
    box-sizing: border-box;

    /* 🎛️ SAKLAR 3: MENGATUR TOMBOL NAIK KE ATAS / TURUN KE BAWAH */
    margin-top: 32px;     /* Ubah angka ini: Kurangi (misal ke 20px) jika ingin tombol NAIK mendekati teks */
}

/* UKURAN BASE TOMBOL KAPSUL */
.btn-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 240px;     /* Mengatur lebar kanan-kiri tombol */
    height: 50px;         /* Mengatur tinggi/ketebalan atas-bawah tombol */
    border-radius: 25px;  /* Menjaga bentuk kapsul melengkung sempurna */
    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) */
.btn-filled-purple {
    background-color: #8A44AF;
    color: #ffffff;
    box-shadow: 0px 4px 15px rgba(138, 68, 175, 0.2);
}

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

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

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

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