/* ============================================================
   MOBILE RESPONSIVE PATCH — Tambahkan di PALING BAWAH style.css
   Gantikan SEMUA blok @media yang sudah ada sebelumnya
   ============================================================ */

/* ---- Reset konflik duplikasi ---- */
* { box-sizing: border-box; }

/* ============================================================
   BASE — berlaku semua ukuran
   ============================================================ */
select,
input,
textarea {
    font-size: 16px !important; /* Cegah auto-zoom iOS Safari */
    font-family: var(--font-body);
}

/* Minimal tap target 44px */
.nav-link,
.tab-btn,
.btn-primary,
.btn-ghost,
.btn-daftar,
.btn-admin,
.btn-pesan-wa,
.btn-submit,
.btn-konfirmasi,
.rek-copy,
.kf-qa,
.sd-icon,
.sd-main-btn {
    min-height: 44px;
    min-width: 44px;
}

/* ============================================================
   TABLET — 1100px ke bawah
   ============================================================ */
@media (max-width: 1100px) {
    .hero-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .hero-visual { display: none; }
    .hero-sub,
    .hero-date-info,
    .hero-countdown { margin-left: auto; margin-right: auto; justify-content: center; }
    .hero-actions { justify-content: center; }

    .panitia-grid { grid-template-columns: repeat(2, 1fr); }
    .seragam-grid { grid-template-columns: repeat(2, 1fr); }
    .seragam-info-bar { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
    .video-utama-wrap { grid-template-columns: 1fr; }
    .video-playlist { grid-template-columns: repeat(3, 1fr); }
    .donasi-main-grid { grid-template-columns: 1fr; }
    .sambutan-utama { grid-template-columns: 1fr; text-align: center; padding: 40px 32px; }
    .su-visual { flex-direction: row; justify-content: center; }
    .sambutan-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PHABLET — 900px ke bawah
   ============================================================ */
@media (max-width: 900px) {
    .tentang-grid,
    .kontak-grid,
    .daftar-grid { grid-template-columns: 1fr; gap: 40px; }

    .tentang-visual {
        height: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }
    .tvisual-box { position: static !important; width: 44% !important; }
    .tvisual-line, .tvisual-geo { display: none; }

    .testi-grid { grid-template-columns: 1fr; }
    .video-playlist { grid-template-columns: repeat(2, 1fr); }

    .galeri-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        gap: 10px;
    }
    .galeri-card,
    .gc-1, .gc-2, .gc-3, .gc-4, .gc-5 {
        grid-column: span 1 !important;
        height: 180px;
    }
    .galeri-overlay { opacity: 1; }
}

/* ============================================================
   SMARTPHONE — 768px ke bawah
   ============================================================ */
@media (max-width: 768px) {
    /* Skala dasar */
    html { font-size: 15px; }
    .container { padding: 0 16px; }

    /* Section padding seragam */
    .hero { padding: 90px 16px 56px; }
    .tentang, .acara, .galeri, .testimoni,
    .panitia, .daftar, .kontak, .sambutan,
    .video-seksi, .donasi-section, .seragam-section,
    .statistik { padding: 56px 0; }

    /* Header */
    .header { padding: 0 12px; }
    .header-inner { height: 64px; }
    .logo-name { font-size: 19px; }
    .logo-img { width: 38px; height: 38px; }

    /* ---- Hamburger ---- */
    .hamburger { display: flex; }

    /* ---- Navbar slide-out dari kanan ---- */
    .navbar {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        max-width: 85vw;
        height: 100vh;
        background: rgba(13, 26, 18, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-left: 1px solid var(--border);
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding: 88px 20px 36px;
        gap: 10px;
        overflow-y: auto;
        transition: right 0.38s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 999;
    }
    .navbar.open { right: 0; }
    .navbar ul {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        margin: 0 0 12px;
        gap: 4px;
    }
    .nav-link {
        font-size: 16px;
        padding: 12px 14px;
        display: flex;
        align-items: center;
        border-radius: var(--radius-sm);
        width: 100%;
    }
    .nav-link:hover { background: rgba(200, 160, 32, 0.1); }
    .btn-daftar,
    .btn-admin {
        width: 100%;
        justify-content: center;
        text-align: center;
        padding: 12px 16px;
        margin: 0 !important;
    }

    /* ---- Hero ---- */
    .hero-title { font-size: 34px; line-height: 1.15; }
    .hero-sub { font-size: 14px; max-width: 100%; }
    .hero-actions { flex-direction: column; width: 100%; gap: 10px; }
    .hero-actions a,
    .hero-actions .btn-primary,
    .hero-actions .btn-ghost { width: 100%; justify-content: center; }

    /* ---- Countdown — 2x2 grid ---- */
    .hero-countdown {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        width: 100%;
        max-width: 320px;
    }
    .countdown-sep { display: none; }
    .countdown-item {
        width: 100%;
        min-width: 0;
        padding: 10px 8px;
    }
    .countdown-item span { font-size: 26px; }
    .countdown-item small { font-size: 10px; }

    /* ---- Ayat banner ---- */
    .ayat-banner { flex-direction: column; gap: 10px; padding: 24px 16px; }
    .ayat-ornament { display: none; }

    /* ---- Statistik ---- */
    .statistik-inner { flex-direction: column; gap: 24px; }
    .stat-div { display: none; }

    /* ---- Tab jadwal — scrollable horizontal ---- */
    .acara-tabs {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        justify-content: flex-start;
        flex-wrap: nowrap;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .acara-tabs::-webkit-scrollbar { display: none; }
    .tab-btn {
        flex-shrink: 0;
        white-space: nowrap;
        font-size: 13px;
        padding: 9px 16px;
    }

    /* ---- Jadwal item — single column ---- */
    .jadwal-item {
        grid-template-columns: 1fr;
        gap: 4px;
        margin-bottom: 16px;
        padding-bottom: 16px;
        border-bottom: 1px solid var(--border-hijau);
    }
    .jadwal-time { text-align: left; justify-content: flex-start; padding-top: 0; }
    .jadwal-dot { display: none; }
    .jadwal-info { margin-bottom: 0; }

    /* ---- Panitia ---- */
    .panitia-grid { grid-template-columns: repeat(2, 1fr); }

    /* ---- Daftar form ---- */
    .daftar-form-wrap { padding: 20px 16px; }
    .form-row, .kf-row { grid-template-columns: 1fr; }

    /* ---- Seragam ---- */
    .seragam-grid { grid-template-columns: repeat(2, 1fr); }
    .seragam-info-bar { grid-template-columns: 1fr; padding: 20px 16px; gap: 16px; }

    /* ---- Video ---- */
    .video-playlist { grid-template-columns: repeat(2, 1fr); }
    .vp-content { flex-direction: column; align-items: flex-start; padding: 16px; gap: 12px; }
    .vp-play-btn { width: 58px; height: 58px; font-size: 20px; }
    .vp-title { font-size: 16px; }

    /* ---- Sambutan ---- */
    .sambutan-utama { padding: 28px 18px; gap: 28px; }
    .su-visual { flex-direction: column; align-items: center; }
    .su-ornament-quote { text-align: left; }

    /* ---- Donasi ---- */
    .donasi-progress-wrap { padding: 20px 16px; }
    .dp-header { flex-direction: column; gap: 14px; }
    .dp-milestones { display: none; }
    .qris-wrap { flex-direction: column; align-items: center; gap: 16px; }
    .qris-info { width: 100%; text-align: center; }
    .rek-tabs { gap: 6px; flex-wrap: wrap; }

    /* ---- Footer ---- */
    .footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .footer-top { padding: 44px 0 28px; }
    .footer-bottom .container { flex-direction: column; gap: 8px; text-align: center; }

    /* ---- Speed dial & back-to-top ---- */
    .speed-dial { bottom: 16px; right: 16px; }
    .back-to-top { bottom: 16px; left: 16px; }
    .sd-main-btn { width: 48px; height: 48px; font-size: 18px; }
}

/* ============================================================
   SMARTPHONE KECIL — 480px ke bawah
   ============================================================ */
@media (max-width: 480px) {
    .hero-title { font-size: 28px; }
    .hero-sub { font-size: 13px; }
    .section-title { font-size: 24px; }

    /* Countdown lebih kecil */
    .hero-countdown { max-width: 280px; gap: 8px; }
    .countdown-item span { font-size: 22px; }

    /* Satu kolom semua */
    .panitia-grid { grid-template-columns: 1fr; }
    .seragam-grid { grid-template-columns: 1fr; }
    .galeri-grid { grid-template-columns: 1fr; }
    .video-playlist { grid-template-columns: 1fr; }
    .tvisual-box { width: 100% !important; }

    /* Photo sambutan lebih kecil */
    .su-photo-wrap, .su-photo { width: 110px; height: 110px; }
    .su-badge { font-size: 10px; padding: 5px 10px; }

    /* Rekening detail */
    .rek-detail-row { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 0; }
    .rek-detail-val { font-size: 14px; width: 100%; justify-content: space-between; }
    .rek-tab { font-size: 11px; padding: 7px 12px; }
    .kf-qa { font-size: 11px; padding: 7px 12px; }

    /* Ticker donatur */
    .dt-label { padding: 10px 12px; font-size: 11px; }

    /* Tab acara */
    .tab-btn { font-size: 12px; padding: 8px 13px; }

    /* Back to top & speed dial */
    .back-to-top { width: 40px; height: 40px; font-size: 14px; }
    .speed-dial { bottom: 14px; right: 14px; }
    .back-to-top { bottom: 14px; left: 14px; }
}

/* ============================================================
   LAYAR SUPER KECIL — 360px ke bawah
   ============================================================ */
@media (max-width: 360px) {
    .hero-title { font-size: 24px; }
    .hero-countdown { grid-template-columns: repeat(2, 1fr); max-width: 240px; }
    .countdown-item span { font-size: 20px; }
    .container { padding: 0 12px; }
    .daftar-form-wrap, .sambutan-utama { padding: 16px 12px; }
}

/* ============================================================
   TAMBAHAN UX: Overlay gelap saat nav mobile terbuka
   ============================================================ */
.navbar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 998;
    -webkit-tap-highlight-color: transparent;
}
.navbar-overlay.show { display: block; }