/* =========================================================================
   INDEX MOBILE CSS (Maksimal 768px - Layar HP)
   ========================================================================= */

@media screen and (max-width: 768px) {
    /* --- 1. NAVBAR & LOGO (HEADER HP) --- */
    header { 
        padding: 12px 5%; 
    }
    .logo { 
        font-size: 14px; /* Mengecilkan teks Nerstizen */
        gap: 2px; 
    }
    .logo img { 
        height: 28px; /* Mengecilkan logo atom */
    }

    /* --- 2. TOMBOL MASUK & BUAT AKUN (HEADER HP) --- */
    .auth-buttons { 
        gap: 6px; 
    }
    header .btn { 
        padding: 4px 12px; 
        font-size: 11px; /* Mengecilkan teks tombol agar proporsional */
    }

    /* --- 3. HERO SECTION (KONTEN UTAMA HP) --- */
    .hero { 
        flex-direction: column; 
        text-align: center; 
        padding-top: 100px; /* Jarak aman dari header */
        padding-bottom: 60px;
    }
    .badge { 
        font-size: 9px; 
        padding: 6px 14px; 
        margin-bottom: 20px; 
    }
    .hero h1 { 
        font-size: 1.8rem; /* Judul proporsional (turun dari 2.5rem) */
        font-weight: 700;
        line-height: 1.2;
        margin-bottom: 15px;
    }
    .hero p {
        font-size: 13px; /* Teks deskripsi lebih nyaman dibaca */
        line-height: 1.6;
        margin-bottom: 30px;
        padding: 0 10px; /* Agar teks tidak menabrak ujung kiri-kanan layar */
    }

    /* --- 4. TOMBOL LIHAT JADWAL & AVATAR (HP) --- */
    .hero-content > div[style*="display: flex"] {
        flex-direction: column;
        gap: 15px !important;
        align-items: center;
    }
    .hero-content .btn-solid { 
        width: 100%; /* Tombol CTA membentang penuh agar mudah diklik jempol */
        padding: 14px 20px !important; 
        font-size: 13px !important; 
        justify-content: center;
    }
    .trusted-users {
        justify-content: center;
        margin-top: 0;
    }
    .trusted-users span {
        font-size: 10px !important; /* Mengecilkan teks 'Dipercaya 10.000+ Nakes' */
    }

    /* --- 5. GAMBAR / SLIDER HERO (HP) --- */
    .hero-image { 
        margin-top: 30px !important; 
        margin-bottom: 30px !important;
        width: 100% !important;
        flex-shrink: 0 !important;
        display: block !important; /* Berhenti menggunakan flex di sini agar browser HP tidak bingung */
    }
    
    .aesthetic-slider { 
        width: 100% !important; 
        /* 👇 JURUS MUTLAK 16:9 (1080 / 1920 * 100) 👇 */
        height: 0 !important; 
        padding-bottom: 56.25% !important; 
        border-radius: 12px !important; 
        overflow: hidden !important;
        position: relative !important;
        display: block !important;
    }
    
    .slider-track {
        /* Karena kita pakai padding-bottom, track harus melayang di dalamnya */
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        display: flex !important;
        height: 100% !important;
        width: 600% !important; /* 6 Gambar */
    }
    
    .slider-track img {
        flex: 0 0 16.6666% !important; 
        width: 16.6666% !important;
        height: 100% !important;
        /* 👇 KUNCI ANTI TERPOTONG 👇 */
        object-fit: contain !important; 
        object-position: center !important;
        display: block !important;
    }

    .floating-cloud { 
        display: none; /* Sembunyikan awan di HP */
    }

    /* --- 5.B. TURUNKAN KATALOG (ANTI TABRAKAN) --- */
    .katalog-section {
        margin-top: -60px !important; /* Cabut efek tarikan ke atas (-80px) dari desktop */
        padding-top: 0 !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    .katalog-header h2 {
        font-size: 2rem !important; /* Jinakkan ukuran teks Jadwal Webinar */
    }

    /* --- 6. TESTIMONIAL --- */
    .testi-card { 
        width: 85vw; 
        max-width: 320px; 
        padding: 20px; 
    }
    .testimonial-header h2 { 
        font-size: 1.6rem; 
    }
    .testimonial-track { 
        padding: 20px 5%; 
    }

    /* =========================================
    7. MODAL AUTHENTICATION (ULTRA-COMPACT HP)
    ========================================= */
       
    /* 1. Susutkan Kotak Utama Modal */
    .custom-modal-box,
    .auth-box {
        width: 85% !important; 
        max-width: 320px !important; 
        padding: 0 0 20px 0 !important; 
        border-radius: 20px !important;
        overflow: hidden !important; 
    }

    /* 2. Jinakkan Topi Biru (Header Logo) - DIBUAT GEPENG */
    .auth-box .modal-brand-header {
        margin: 0 0 15px 0 !important; 
        /* 👇 KUNCI GEPENG: Padding atas-bawah dikurangi menjadi 10px (Kiri-kanan tetap 15px) 👇 */
        padding: 10px 15px !important; 
        border-radius: 20px 20px 0 0 !important;
        min-height: auto !important; /* Mematikan tinggi paksa dari versi desktop */
        display: flex !important;
        align-items: center !important; /* Memastikan logo tetap di tengah vertikal */
    }
    
    .auth-box .modal-brand-header .logo { 
        font-size: 15px !important; /* Disesuaikan sedikit agar pas dengan header gepeng */
        margin: 0 !important;
    }
    
    .auth-box .modal-brand-header .logo img { 
        height: 20px !important; /* Logo sedikit dikecilkan */
    }
    
    /* Tombol Silang (X) */
    .btn-close-modal {
        /* 👇 Dinaikkan posisinya agar tetap di tengah vertikal header yang baru 👇 */
        top: 8px !important; 
        right: 12px !important;
        width: 24px !important; 
        height: 24px !important; 
        font-size: 11px !important;
    }

    /* 👇 3. KUNCI KESELARASAN: HANYA FORM YANG PUNYA PADDING 👇 */
    .auth-box form {
        padding: 0 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Area Scroll: NOL PADDING agar input bisa merentang sejajar tombol */
    .scrollable-inputs {
        padding: 0 !important; 
        padding-right: 4px !important; /* Celah 4px khusus untuk rel scrollbar */
        margin-bottom: 15px !important;
        max-height: 45vh !important; /* Jangan biarkan form terlalu tinggi di HP */
        flex-grow: 1 !important;
        overflow-y: auto !important;
        scrollbar-width: thin;
        width: 100% !important;
    }

    /* 4. Teks "Selamat Datang" */
    .auth-header { margin-bottom: 12px !important; }
    .auth-header h2 { font-size: 1.3rem !important; margin-bottom: 2px !important; }
    .auth-header p { font-size: 11px !important; margin-bottom: 0 !important; }

    /* 5. INPUT DAN TOMBOL DIJAMIN PRESISI 100% */
    .input-group {
        margin-bottom: 12px !important; 
        width: 100% !important; 
        box-sizing: border-box !important;
    }

    .auth-input {
        width: 100% !important; 
        box-sizing: border-box !important; /* Paksa padding tidak menambah lebar */
        padding: 0 12px 0 35px !important; 
        font-size: 12px !important;
        border-radius: 10px !important;
        height: 42px !important; 
    }
    
    .input-group > i:first-child { left: 12px !important; font-size: 13px !important; }
    .input-group .toggle-password-icon { right: 12px !important; font-size: 13px !important; }

    /* Teks Lupa Password */
    .input-group + div[style*="text-align: right"],
    #forgotPassBtn { 
        font-size: 11px !important; margin-top: -5px !important; margin-bottom: 15px !important;
    }

    /* Tombol Utama (Masuk / Daftar) */
    .auth-box .auth-btn {
        width: 100% !important; /* Sejajar persis dengan input */
        box-sizing: border-box !important;
        margin-left: 0 !important;
        height: 42px !important; min-height: 42px !important;
        padding: 0 15px !important;
        font-size: 13px !important; border-radius: 10px !important;
        margin-top: 5px !important;
    }

    /* Footer Switch Auth */
    .switch-auth { margin-top: 15px !important; font-size: 11px !important; }

    /* =========================================
       8. PESAN ERROR / PERINGATAN (MENEMPEL KE KOLOM)
       ========================================= */
       
    /* Menargetkan teks pesan error di bawah input group */
    .auth-box .input-group + .text-danger,
    .auth-box .input-group + .error-message,
    .auth-box .input-group + small,
    .auth-box .input-group + span[style*="color"],
    .auth-box .error-text {
        /* 👇 KUNCI: Tarik paksa ke atas menembus margin kolom input 👇 */
        margin-top: -8px !important; 
        margin-bottom: 10px !important; /* Tetap beri jarak aman dengan kolom berikutnya */
        font-size: 10px !important; /* Sesuaikan ukuran font agar lebih pas di HP */
        padding-left: 5px !important; /* Beri sedikit jarak kiri agar sejajar dengan batas lengkungan kotak */
        text-align: left !important;
        line-height: 1.2 !important;
    }

    /* =========================================
       8. FITUR & FASILITAS (KENAPA BERGABUNG)
    ========================================= */
       
    /* Kecilkan jarak atas-bawah section */
    .section-padding {
        padding: 30px 5% !important; 
    }
    
    /* Jinakkan Judul Raksasa & Deskripsinya */
    .section-padding h2 {
        font-size: 1.6rem !important;
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
    }
    .section-padding > p {
        font-size: 12px !important;
        line-height: 1.5 !important;
        margin-bottom: 15px !important;
        padding: 0 10px;
    }

    /* Paksa Grid menjadi 2 Kolom Berdampingan (Compact Mode) */
    .features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important; /* Jarak antar kartu dirapatkan */
        margin-top: 10px !important;
    }

    /* Susutkan Ukuran Kotak Kartu */
    .feature-card {
        padding: 18px 12px !important;
        border-radius: 12px !important;
    }

    /* Kecilkan Ikon agar imut dan proporsional */
    .feature-icon {
        width: 42px !important;
        height: 42px !important;
        font-size: 18px !important;
        border-radius: 12px !important;
        margin-bottom: 12px !important;
    }

    /* Sesuaikan Teks di dalam Kartu */
    .feature-card h3,
    .feature-card h4 {
        font-size: 12px !important;
        margin-bottom: 6px !important;
        line-height: 1.3 !important;
    }
    .feature-card p {
        font-size: 10px !important; /* Teks deskripsi imut tapi tetap terbaca */
        line-height: 1.5 !important;
        margin-bottom: 0 !important;
    }

    /* =========================================
    9. KATALOG WEBINAR (KARTU COMPACT HP)
    ========================================= */
       
    /* Kurangi lengkungan sudut kartu agar lebih pas di HP */
    .card-webinar {
        border-radius: 16px !important; 
    }

    /* 1. KUNCI MUTLAK FLAYER (RASIO 16:9) */
    .card-img-wrapper {
        padding-top: 56.25% !important; /* Rumus absolut 16:9 */
        border-radius: 16px 16px 0 0 !important;
    }

    /* 2. KECILKAN JARAK RUANG DALAM KARTU */
    .card-body {
        padding: 16px !important; /* Susut dari 25px menjadi 16px */
    }

    /* 3. JINAKKAN JUDUL RAKSASA & KURANGI KETEBALANNYA */
    .card-title {
        font-size: 15px !important; /* Jauh lebih proporsional */
        font-weight: 700 !important; /* Kurangi ketebalan (dari 800 jadi 700) */
        line-height: 1.4 !important;
        margin-bottom: 6px !important;
    }

    /* Susutkan Sub-judul / Deskripsi */
    .card-sub {
        font-size: 11px !important;
        margin-bottom: 12px !important;
        line-height: 1.5 !important;
    }

    /* 4. PERBAIKI LENCANA PROMO (PROMO B2G1, dll) */
    .floating-promo-container {
        /* 1. Netralkan padding atas dari kotak putih (card-body punya padding 16px) */
        margin-top: -16px !important; 
        /* 2. KUNCI PRESISI: Geser ke atas tepat 50% dari tinggi lencana itu sendiri */
        transform: translateY(-50%) !important; 
        /* 3. Tarik judul di bawahnya ke atas agar tidak ada ruang kosong berlebih */
        margin-bottom: -10px !important; 
        gap: 5px !important;
    }

    .floating-badge {
        padding: 5px 12px !important;
        font-size: 9px !important; 
    }

    /* 5. KOTAK INFO (JADWAL, WAKTU, & DETAIL) */
    .jadwal-box {
        padding: 8px 12px !important;
        margin-bottom: 10px !important;
        border-radius: 8px !important;
    }
    .jadwal-icon {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
    }
    .jadwal-label { font-size: 9px !important; }
    .jadwal-value { font-size: 11px !important; }

    .info-alert {
        padding: 8px 12px !important;
        font-size: 10px !important;
        margin-bottom: 10px !important;
    }
    .timer-badge {
        font-size: 11px !important;
        padding: 2px 6px !important;
    }

    /* Tombol Dropdown Pembicara */
    .btn-detail-materi {
        padding: 10px 14px !important;
        font-size: 11px !important;
        margin-bottom: 15px !important;
    }

    /* 6. TOMBOL "DAFTAR SEKARANG" */
    .action-btn-container {
        padding-top: 5px !important;
    }
    .btn-card {
        padding: 12px !important;
        font-size: 13px !important;
        border-radius: 12px !important;
    }

    /* =========================================
    10. PERBAIKAN MODAL LUPA PASSWORD (HP)
    ========================================= */
    
    /* Karena modal ini tidak punya 'topi biru', berikan jarak atas ekstra */
    #forgotModal .custom-modal-box,
    #forgotModal .auth-box {
        padding-top: 35px !important; /* Memberikan ruang aman untuk tombol X */
    }

    /* Rapikan teks judul dan deskripsi agar tidak berdesakan */
    #forgotModal .auth-header {
        margin-bottom: 20px !important;
        padding: 0 15px !important;
    }

    #forgotModal .auth-header h2 {
        font-size: 1.4rem !important;
        margin-bottom: 8px !important;
    }

    #forgotModal .auth-header p {
        font-size: 11px !important;
        line-height: 1.5 !important;
        padding: 0 10px !important; /* Teks agak diketengahkan agar menjauhi area tombol X */
    }

    /* Posisikan tombol X dengan warna latar yang kontras */
    #forgotModal .btn-close-modal {
        top: 12px !important;
        right: 12px !important;
        background: #f1f5f9 !important; /* Latar abu-abu terang */
        color: #64748b !important;
        border: 1px solid #e2e8f0 !important;
    }

    /* =========================================
    11. PERBAIKAN KOTAK OTP (HP)
    ========================================= */

    /* 1. Dorong teks ke bawah agar benar-benar aman dari tombol X */
    #forgotModal .auth-header {
        margin-top: 15px !important; 
    }
    #forgotModal .auth-header p {
        padding: 0 15px !important; 
        line-height: 1.4 !important;
    }

    /* 2. Jinakkan Kotak OTP agar muat 6 buah sejajar */
    .otp-inputs-wrapper {
        gap: 6px !important; /* Rapatkan jarak antar kotak (dari 12px menjadi 6px) */
        margin: 15px 0 20px 0 !important; 
    }

    .otp-field {
        width: 36px !important;  /* Susutkan lebar agar 6 kotak muat di modal HP */
        height: 45px !important; /* Susutkan tinggi agar tidak terlalu lonjong */
        font-size: 20px !important; /* Teks angka disesuaikan */
        border-radius: 10px !important; 
        padding: 0 !important; 
        text-align: center !important;
    }

    /* 3. Rapikan teks timer "Kirim ulang..." */
    .resend-container {
        font-size: 11px !important;
        margin-bottom: 15px !important;
    }

    #otpTimerDisplay {
        font-size: 13px !important;
    }
}

/* =========================================================================
   KATALOG SUPER KECIL (Maksimal 480px)
   ========================================================================= */
@media screen and (max-width: 480px) {
    .grid-katalog .card-webinar,
    #katalog-container .card-webinar {
        flex: 0 0 300px !important; 
        max-width: 300px !important;
    }
    
    .grid-katalog,
    #katalog-container {
        padding-left: 5vw !important;
        padding-right: 5vw !important;
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
        mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    }

}

/* =========================================================================
12. SPECIAL LANDSCAPE MODE (Saat HP Dirotasi Miring)
========================================================================= */

@media screen and (max-width: 932px) and (orientation: landscape) {
    
    /* --- 1. HERO SECTION: Ubah ke Samping Kiri-Kanan --- */
    .hero {
        padding-top: 80px !important;
        padding-bottom: 30px !important;
        flex-direction: row !important; /* KUNCI: Ubah tumpukan menjadi sejajar */
        text-align: left !important;
        align-items: center !important;
        gap: 20px !important;
    }

    .hero-content {
        width: 50% !important; /* Teks ambil 50% layar kiri */
        margin: 0 !important;
    }

    .hero h1 {
        font-size: 1.8rem !important; 
        margin-bottom: 10px !important;
    }

    .hero p {
        font-size: 12px !important;
        margin-bottom: 15px !important;
    }

    /* 1. Angkat seluruh isi konten ke lapisan langit ke-999 */
    .hero-content,
    .hero-image,
    .trusted-users {
        position: relative !important;
        z-index: 999 !important; 
    }

    /* 2. Jika kabut putih itu berasal dari efek semu (pseudo-element) hero, paksa dia turun! */
    .hero::after,
    .hero::before,
    .hero-overlay, /* (Jika Anda memakai class ini) */
    .bottom-fade   /* (Jika Anda memakai class ini) */ {
        z-index: 1 !important; 
        pointer-events: none !important; /* Pastikan kabut tidak menghalangi tombol diklik */
    }

    /* Kembalikan tombol & avatar sejajar di kiri */
    .hero-content > div[style*="display: flex"] {
        flex-direction: row !important;
        justify-content: flex-start !important;
        gap: 15px !important;
    }

    .hero-content .btn-solid {
        width: auto !important;
        min-width: 0 !important;
        padding: 10px 20px !important;
        font-size: 12px !important;
    }

    /* --- 2. SLIDER HERO: Ambil Setengah Layar Kanan --- */
    .hero-image {
        width: 50% !important;
        margin-top: 0 !important;
    }
    
    .aesthetic-slider {
        margin: 0 !important;
    }

    .katalog-section {
        margin-top: 20px !important; /* Netralkan margin karena hero sudah tidak bentrok */
    }

    /* --- 3. MODAL AUTHENTICATION: Penyelamatan dari Keyboard --- */
    .custom-modal-box,
    .auth-box {
        max-height: 95vh !important; /* Jangan biarkan modal menembus batas atas-bawah layar */
        padding-bottom: 10px !important;
    }

    .auth-box .modal-brand-header {
        padding: 8px 15px !important;
        margin-bottom: 10px !important;
    }
    .auth-box .modal-brand-header .logo img { height: 18px !important; }

    /* KUNCI: Batasi tinggi area isian agar tombol Masuk/Daftar tidak terdorong hilang */
    .scrollable-inputs {
        max-height: 35vh !important; 
        margin-bottom: 10px !important;
    }

    .auth-input, .auth-box .auth-btn {
        height: 38px !important; /* Sedikit dipendekkan agar hemat tempat di layar sempit */
        min-height: 38px !important;
    }

    /* Modal Lupa Password & OTP */
    #forgotModal .custom-modal-box { padding-top: 15px !important; }
    .otp-field { height: 38px !important; width: 32px !important; }
}