/* =========================================================
   UNIVERSAL MOBILE (< 640px) - Untuk semua Android & iOS
   ========================================================= */
@media (max-width: 640px) {
    .hero-section {
        position: relative;
        min-height: 100vh; /* Kembali ke 100vh untuk ruang yang cukup */
        padding: clamp(90px, 15vw, 100px) 15px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: hidden;
    }
    .hero-overlay {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-text {
        margin-top: 320px;
        max-width: 95%;
        width: 100%; /* Tambahkan ini */
        text-align: left;

        position: relative;
        z-index: 2;
        order: 1;
        /* Geser ke kiri: */
        margin-left: -10px; /* Atau nilai negatif lain */
        padding-left: 12px;
        width: calc(100% + 10px); /* Kompensasi margin negatif */
    }

    .logo-prn1 {
        order: 2;
        width: 100%;
        max-width: 350px;
        margin: -100px 2px -130px -10px;

        transform: none;
        text-align: left;
    }

    .logo-prn1 img {
        display: block;
        margin-left: 0;
    }

    .parent {
        display: flex;
        justify-content: flex-start;
    }

    .hero-text h1 {
        font-size: clamp(24px, 6vw, 32px);
        font-weight: 800;
        margin-bottom: 20px;
        line-height: 1.2;
        text-align: left; /* Pastikan rata kiri */
        width: 100%;
    }

    .hero-text p {
        font-size: clamp(12px, 3.5vw, 15px);
        line-height: 1.5;
        margin-bottom: 5px; /* dari 30 → lebih rapat */
        text-align: left; /* Pastikan rata kiri */
        width: 100%;
    }

    .btn-daftar-wrapper {
        width: 100%;
        display: flex;
        justify-content: flex-start; /* Tombol rata kiri */
        margin-top: 15px;
        margin-bottom: clamp(250px, 40vh, 300px);
        position: relative;
        z-index: 3;
        padding-left: 0; /* Pastikan tidak ada padding kiri */
    }

    .hero-alvin-wrapper {
        position: sticky;
        bottom: calc(
            -15px + env(safe-area-inset-bottom, 0px)
        ); /* Perhatikan safe area */
        left: 0;
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        margin-top: auto;
        z-index: 1;
        padding-bottom: env(
            safe-area-inset-bottom,
            0px
        ); /* Tambahan untuk iPhone */
    }

    .hero-alvin {
        width: clamp(380px, 55vw, 350px);
        max-height: 650px;
        object-fit: contain;
        margin-right: -5px; /* Geser sedikit ke kiri */
        margin-bottom: -10px; /* Naikkan sedikit */
        margin-left: -10px; /* Geser sedikit ke kiri */
    }

    /* Latar belakang hero */
    .hero-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
        opacity: 0.7; /* Opsional: untuk membuat teks lebih terbaca */
    }
}

/* ======================================= */
/*   LANDSCAPE MODE (optional safety)      */
/* ======================================= */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-section {
        padding-top: 40px;
    }

    .hero-alvin {
        width: 240px;
        transform: translateY(0);
    }

    .hero-alvin-wrapper {
        margin-bottom: -40px;
    }
}

@media (min-width: 600px) and (max-width: 900px) {
    /* body::after {
        content: "TABLET MODE DETECTED";
        position: fixed;
        top: 20px;
        left: 20px;
        background: red;
        padding: 5px 10px;
        color: #fff;
        font-size: 14px;
        z-index: 99999;
    } */

    .hero-section {
        position: relative;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* FIX: jangan center, ini penyebab turun */
        padding-top: 10px !important;
        align-items: flex-start !important;
    }

    .hero-text {
        margin-top: 0; /* FIX: hilangkan minus */
        max-width: 90%;
        text-align: left;
    }

    .hero-text h1 {
        margin-top: 180px !important;
        font-size: 52px !important;
        font-weight: 800;
        margin-bottom: 0px;
    }

    .hero-text p {
        font-size: 25px;
        line-height: 1.5;
    }

    .btn-daftar-wrapper {
        width: 328px;
        display: flex;
        justify-content: flex-start;
        margin-top: 10px;
        margin-bottom: 20px;
    }

    .hero-alvin {
        width: 460px; /* jangan terlalu lebar di tablet */
        max-width: 100%;
    }

    .hero-alvin-wrapper {
        margin-bottom: -230px; /* FIX: jangan -180px */
        align-self: center; /* supaya foto tetap center */
    }
}

/* =========================================
   RESPONSIVE INTRO SECTION - TABLET & MOBILE
   ========================================= */

/* Tablet dan HP umum */
@media (max-width: 768px) {
    .intro-section {
        padding: 20px 15px;
        height: auto; /* hilangkan tinggi fix biar fleksibel */
    }

    .intro-button span {
        padding: 15px 40px;
        font-size: 20px;
        margin-top: 30px;
        border-width: 4px;
    }

    /* Susunan utama jadi kolom */
    .intro-content {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    /* Gambar kiri */
    .intro-left {
        flex: none;
        width: 100%;
        text-align: center;
    }

    .intro-cewe {
        width: 70%;
        left: 0;
        top: -60px;
        position: relative;
    }

    /* Kanan */
    .intro-right {
        width: 100%;
        text-align: center;
    }

    /* Teks + gambar kanan */
    .intro-info {
        flex-direction: column;
        gap: 10px; /* jarak antar elemen */
        margin-top: -80px; /* kurangi jarak dari atas */
        padding-top: 0; /* pastikan padding atas juga 0 */
        align-items: center;
        text-align: center;
    }

    .intro-description {
        width: 100%;
        font-size: 13px;
        text-align: justify;
    }

    .intro-description p {
        transform: none;
        width: 100%;
        margin-top: 0; /* tambahkan ini supaya naik */
    }

    .intro-images {
        width: 100%;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }

    .intro-images img {
        width: 48%;
        max-width: 180px;
    }

    /* Tulisan oranye */
    .intro-start p {
        font-size: 24px;
        -webkit-text-stroke: 0.5px #000;
    }

    /* Tombol daftar */
    .btn-daftar {
        padding: 12px 40px;
        font-size: 16px;
        border-radius: 25px;
    }
}

/* HP kecil (≤ 480px) */
@media (max-width: 480px) {
    .intro-button span {
        padding: 12px 30px;
        font-size: 18px;
    }

    .intro-cewe {
        width: 85%;
    }

    .intro-images img {
        width: 90%;
        max-width: none;
    }

    .intro-start p {
        font-size: 20px;
    }

    .btn-daftar {
        padding: 10px 30px;
        font-size: 15px;
    }
}

/* =========================================
   RESPONSIVE PROBLEM - TABLET & MOBILE
   ========================================= */

/* Tablet & layar sedang (≤ 768px) */
@media (max-width: 768px) {
    .problem-section {
        padding: 20px 15px;
        height: auto; /* biar fleksibel */
    }

    .problem-title {
        font-size: 25px !important; /* lebih kecil */
        margin-bottom: 10px; /* dekat ke gambar */
        text-align: center;
        line-height: 1.2;
    }

    .problem-container {
        flex-direction: column;
        align-items: center;
        gap: 20px; /* rapat */
    }

    .problem-list {
        position: relative; /* hilangkan absolute */
        right: 0;
        top: 0;
        width: 100%;
        margin-top: 10px;
        padding: 0;
    }

    .problem-list li {
        font-size: 16px;
        padding: 15px 15px 15px 50px;
        border-radius: 40px;
    }

    .problem-list .icon-cross {
        width: 45px;
        height: 45px;
        font-size: 28px;
        left: -10px;
    }

    .problem-image {
        width: 80%;
        margin-top: 5px; /* dekat ke H2 */
    }

    .problem-image img {
        margin-top: -280px;
        width: 100%;
        height: auto;
        transform: none; /* hapus translate berlebihan */
    }
}

/* HP kecil (≤ 480px) */
@media (max-width: 480px) {
    .problem-title {
        font-size: 22px;
        margin-bottom: 8px;
    }

    .problem-list li {
        font-size: 14px;
        padding: 12px 12px 12px 45px;
    }

    .problem-list .icon-cross {
        width: 40px;
        height: 40px;
        font-size: 26px;
        left: -8px;
    }

    .problem-image {
        width: 95%;
        margin-top: 5px;
    }

    .problem-image img {
        width: 100%;
        height: auto;
        transform: none;
    }
}

/* motivation */
@media (max-width: 768px) {
    .motivation-section {
        padding: 30px 15px;
        height: auto;
    }

    .motivation-section .container {
        flex-direction: column;
        align-items: center;
    }

    /* H2 */
    .motivation-text h2 {
        font-size: 38px;
        text-align: center;
        margin-bottom: -120px; /* lebih aman */
    }

    .motivation-text-inner {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    /* Gambar */
    .motivation-image {
        width: 90%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
    }

    .motivation-image img {
        width: 100%;
        height: auto;
        margin: 0;
        transform: none;
    }

    /* Konten kanan */
    .motivation-text-content {
        width: 100%;
        text-align: center;
    }

    .motivation-text-content p:first-of-type {
        font-size: 22px !important; /* ukuran mobile lebih kecil tapi tetap bisa override desktop */
        font-weight: 900 !important; /* biar bold */
        margin-left: 0; /* supaya center di mobile */
        text-align: center;
    }

    .motivation-text-content ul {
        padding: 0;
        margin: 10px auto;
        max-width: 95%;
        text-align: center;
    }

    .motivation-text-content li {
        font-size: 16px !important;
        margin-top: -15px;
    }

    .motivation-text-content li::before {
        font-size: 16px !important;
    }

    /* Call to action */
    .call-to-action {
        align-items: center;
        gap: 10px;
    }

    .question-wrapper {
        justify-content: center;
        margin: 10px 0;
    }

    .question-wrapper .question {
        font-size: 48px;
        font-weight: 900;
        color: #ffa500;
    }

    /* Oval animasi */
    .oval-animated {
        width: 200px; /* lebih besar */
        top: 30%; /* agar posisinya sejajar teks */
        left: 50%;
        transform: translate(-50%, -50%) rotate(-10deg); /* center horizontal + vertical */
    }

    .btn-register {
        font-size: 18px;
        padding: 12px 25px;
        margin: 15px auto 0 auto;
    }
}

/* =========================================
   RESPONSIVE WHY CHOOSE SECTION - TABLET & MOBILE
   ========================================= */
@media (max-width: 768px) {
    /* Section utama menyesuaikan tinggi konten */
    .why-choose-section {
        padding: 40px 15px;
        height: auto; /* override tinggi fix */
    }

    /* Judul */
    .why-choose-section h2 {
        font-size: 28px;
        margin-bottom: 25px;
        line-height: 1.3;
    }

    /* Wrapper tetap kolom */
    .why-choose-wrapper {
        gap: 20px;
    }

    /* Semua item jadi 1 kolom */
    .row-items {
        flex-direction: column;
        align-items: center;
        gap: 25px;
        transform: none !important; /* reset translate desktop */
    }

    .choice-item {
        width: 90%;
        max-width: 350px;
    }

    .choice-item img {
        width: 100%;
        border-radius: 10px;
    }

    /* Kotak judul */
    .choice-title {
        font-size: 14px;
        padding: 10px 12px;
        margin: 12px 0 12px 0;
        border-radius: 10px;
        line-height: 1.4;
        text-align: center;
    }

    /* Paragraf */
    .choice-item p {
        font-size: 12px;
        line-height: 1.5;
    }

    /* Gambar tengah jadi kecil dan turun */
    .center-person img {
        width: 100%;
        margin-top: -90px;
        opacity: 0.9;
        border-radius: 20%;
    }

    /* Reset row-top dan row-bottom supaya rapi */
    .row-top,
    .row-bottom {
        gap: 20px !important;
        transform: none !important;
    }
}

/* =========================================
   RESPONSIVE GALLERY SECTION - MOBILE
   ========================================= */
@media (max-width: 768px) {
    .gallery-section {
        padding: 40px 15px;
    }

    .gallery-section h2 {
        font-size: 1.8rem;
        letter-spacing: 1px;
    }

    /* Wrapper galeri tetap kolom */
    .gallery-wrapper {
        max-width: 100%;
        padding: 0;
    }

    /* CARD SECTION */
    .gallery-cards {
        gap: 15px;
        padding: 5px 0 15px 0;
        scroll-padding-left: 0;
    }

    .gallery-card {
        flex: 0 0 100%; /* 1 kartu per slide, sedikit memberi margin kanan */
        max-width: 100%;
        padding: 12px;
        border-radius: 14px;
        border: 4px solid #000;
    }

    /* Gambar card */
    .card-image {
        height: 200px; /* lebih kecil untuk mobile */
    }

    .card-title {
        font-size: 16px;
    }

    .card-desc {
        font-size: 13px;
    }

    /* DOT INDICATORS */
    .gallery-indicators .dot {
        width: 10px;
        height: 10px;
    }

    /* === FOTO BARIS BAWAH === */
    .gallery-images {
        gap: 15px;
        padding: 10px 0;
    }

    .gallery-image-item img {
        width: 220px;
        height: 130px;
    }
}

/* =========================================
   RESPONSIVE FOOTER & NAV BUTTON (MOBILE)
   ========================================= */
@media (max-width: 768px) {
    /* Footer */
    footer {
        padding: 40px 20px;
        text-align: center;
    }

    /* Footer left & right ditumpuk ke bawah (kolom) */
    .footer-left,
    .footer-right {
        width: 100%;
        margin-bottom: 25px;
        text-align: center;
        /* transform: translateY(40px);  <-- DIHAPUS agar tidak menciptakan ruang ekstra */
    }

    /* Footer bottom tetap di bawah */
    .footer-bottom {
        font-size: 14px;
        /* transform: translateY(40px);  <-- DIHAPUS */
    }

    /* Sesuaikan ukuran teks agar lebih nyaman di layar kecil */
    .footer-left h3,
    .footer-right h3 {
        font-size: 18px;
    }

    .footer-left p,
    .footer-right p {
        font-size: 14px;
    }

    .footer-container {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        display: flex;
        flex-direction: column;
    }

    .footer-left {
        order: 2; /* pindah ke paling bawah */
        line-height: 0 !important; /* HILANGKAN RUANG KOSONG DI BAWAH GAMBAR */
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden; /* jaga-jaga jika ada space dari transform */
    }

    .footer-right {
        order: 1; /* tetap di atas gambar */
    }

    /* opsional: kecilkan gambar agar rapi */
    .footer-left img {
        width: 300px;
        height: auto;
        display: block; /* FIX UTAMA: hilangkan whitespace bawah gambar */
        margin: 0 auto;
        margin-top: 185px !important; /* bebas adjust */
    }

    .footer-map iframe {
        width: 100% !important;
        height: 250px !important;
        margin-bottom: -320px !important;
        display: block;
    }

    .footer-right ul {
        text-align: left !important;
        margin: 0 auto; /* tetap rapi */
        padding-left: 20px; /* opsional: kasih indent sedikit */
    }
}

/* camp */
/* ===========================
   RESPONSIVE: MOBILE (≤ 768px)
   =========================== */
@media (max-width: 768px) {
    /* SECTION padding biar tidak ketindihan */
    .camp-section {
        padding: 40px 15px;
    }

    /* Judul section */
    .camp-section h3 {
        font-size: 1.6rem;
        margin-bottom: 30px;
    }

    /* Card container menjadi kolom, bukan row */
    .camp-cards {
        flex-direction: column;
        align-items: center;
        gap: 25px;
        height: auto; /* HENTIKAN tinggi fix! */
    }

    /* Card */
    .camp-card {
        width: 100%;
        max-width: 330px;
    }

    /* Slider */
    .camp-slider-container {
        max-width: 100%;
        aspect-ratio: 16 / 9; /* tetap proporsional */
    }

    .camp-title {
        font-size: 1.2rem;
        margin: 12px 0 8px 0;
    }

    .facility-title {
        font-size: 1rem;
    }

    .camp-facilities {
        padding: 0 15px;
    }

    .btn-more-facilities {
        font-size: 0.85rem;
    }

    .btn-book {
        padding: 10px 15px;
        font-size: 0.95rem;
    }
}

/* ===========================
   HP KECIL (≤ 480px)
   =========================== */
@media (max-width: 480px) {
    .camp-section {
        padding: 30px 10px;
    }

    .camp-section h3 {
        font-size: 1.4rem;
        margin-bottom: 25px;
    }

    .camp-card {
        max-width: 100%;
        border-radius: 12px;
    }

    .camp-title {
        font-size: 1.1rem;
    }

    .camp-facilities {
        padding: 0 10px;
        font-size: 0.9rem;
    }

    .camp-facilities .facility-list li {
        margin-bottom: 4px;
        padding-left: 18px;
    }

    .btn-book {
        font-size: 0.9rem;
        padding: 10px;
    }
}