/* ==========================================================================
 * custom.min.css — MOBILE MODE OVERRIDES
 * ==========================================================================
 *
 * File ini di-load PALING AKHIR (setelah bootstrap, icons, app.min.css)
 * di includes/head-scripts.php — jadi semua rule di sini override
 * framework default.
 *
 * Tujuan: enable real mobile mode tanpa edit per-page CSS.
 * Pasangan: includes/functions.php → YBALI_FORCE_DESKTOP_VIEWPORT = false.
 *
 * Audit reference: docs/AUDIT-LOG.md (sesi mobile-mode 2026-04-23).
 * ========================================================================== */

/* =============================================================
 * 1. iOS NO-ZOOM PADA INPUT FOCUS
 * --------------------------------------------------------------
 * iOS Safari auto-zoom input kalau font-size < 16px → annoying UX
 * loss of context. Fix: force min 16px untuk input text-like.
 * Desktop tetap pakai size original (rule cuma di breakpoint mobile).
 * ============================================================= */
@media (max-width: 767.98px) {
    input.form-control,
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input[type="password"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    select.form-select,
    select.form-control,
    textarea.form-control {
        font-size: 16px !important;
    }
}

/* =============================================================
 * 2. TOUCH TARGET MIN SIZE (Apple HIG 44×44)
 * --------------------------------------------------------------
 * Tombol kecil/icon-only di mobile susah di-tap. Force min 44px
 * pada element interactive di mobile breakpoint.
 * ============================================================= */
@media (max-width: 767.98px) {
    .btn,
    .nav-link,
    .dropdown-item,
    .page-link,
    .form-check-input,
    button:not(.btn-close):not(.swiper-pagination-bullet) {
        min-height: 44px;
    }
    .btn-sm,
    .btn-group-sm > .btn {
        min-height: 38px; /* slightly relaxed untuk btn-sm yang biasa di tabel */
    }
    /* Icon-only buttons → tetap 44×44 minimum */
    .btn[aria-label]:not(.btn-sm),
    button[aria-label]:not(.btn-close):not(.btn-sm) {
        min-width: 44px;
    }
}

/* =============================================================
 * 3. BODY PADDING CLEARANCE — Dynamic Island Bottom Nav
 * --------------------------------------------------------------
 * Dynamic island bottom nav (mobile-dynamic-nav) pakai
 * position:fixed bottom. Tanpa padding body bottom, content
 * paling bawah ke-cover footer/island. Tambah breathing room.
 * Dynamic island tinggi ~70px → padding 90px untuk safety.
 * ============================================================= */
@media (max-width: 991.98px) {
    body {
        padding-bottom: 90px;
    }
    /* Floating brosur button — Wave 11.8 (2026-04-23):
       Turunkan dari bottom 240px → 170px (match dgn SPA lama yg
       direference di floating-elements.php komentar). User feedback:
       "jarak terlalu tinggi" antara UNDUH BROSUR dgn Tanya Rian.
       SPA original gap: 170px (brosur) - 85px (tanya) = 85px gap
       — tight & balanced. 240px sebelumnya over-clearance untuk
       Dynamic Island, tapi visually too disconnected. */
    .floating-brosur {
        bottom: 170px !important;
    }
}

/* =============================================================
 * 4. CONTAINER PADDING MOBILE
 * --------------------------------------------------------------
 * Bootstrap default container punya padding 12px (small) — kalau
 * di mobile sempit kadang kurang. Naikkan ke 16px supaya tidak
 * mepet edge.
 * ============================================================= */
@media (max-width: 575.98px) {
    .container,
    .container-fluid {
        padding-left: 16px;
        padding-right: 16px;
    }
    /* Section spacing lebih compact */
    .ybali-section {
        padding: 40px 0 !important;
    }
    /* Section heading mobile lebih compact */
    .ybali-section h2 {
        font-size: 1.4rem;
    }
}

/* =============================================================
 * 5. HERO MOBILE-FIRST
 * --------------------------------------------------------------
 * Hero homepage pakai padding besar di desktop. Di mobile
 * (terutama setelah viewport real) jadi terlalu lapang. Tighten.
 *
 * Wave 11 (2026-04-23): padding-top naikin dari 90px → 130px
 * karena navbar mobile sekarang lebih tinggi (~95px setelah
 * navbar padding bump 0.35rem → 1.1rem). Sebelumnya title
 * "Dealer Resmi Yamaha di Bali" mepet ke navbar bottom edge.
 * 130px = 95px navbar + 35px breathing gap.
 * ============================================================= */
@media (max-width: 575.98px) {
    .home-hero > .container {
        padding-top: 130px !important;
        padding-bottom: 50px !important;
    }
    .home-hero h1 {
        font-size: 1.6rem !important;
        line-height: 1.25 !important;
    }
    .home-hero p.lead {
        font-size: 0.95rem !important;
        margin-bottom: 1.4rem !important;
    }
    .home-hero .badge-soft {
        font-size: 0.7rem !important;
        padding: 0.35rem 0.65rem !important;
    }
    /* CTA button mobile: full-width primary, stack untuk readability */
    .home-hero .hstack {
        flex-direction: column;
        align-items: stretch !important;
    }
    .home-hero .hstack .btn {
        width: 100%;
    }
}

/* =============================================================
 * 6. NAVBAR MOBILE — HAMBURGER & OFFCANVAS
 * --------------------------------------------------------------
 * Brand text di mobile kadang terpotong. Logo lebih ringkas +
 * hamburger lebih besar (touch-friendly).
 * ============================================================= */
@media (max-width: 991.98px) {
    .navbar-brand img {
        max-height: 36px !important;
    }
    .navbar-toggler {
        padding: 0.35rem 0.55rem;
        font-size: 1.1rem;
        min-width: 44px;
        min-height: 44px;
    }
    /* HUBUNGI KAMI button di mobile sembunyi di hamburger menu */
    .navbar .btn.btn-success {
        width: 100%;
        margin-top: 12px;
    }
}

/* =============================================================
 * 7. CTA STRIP & FOOTER STACKING
 * --------------------------------------------------------------
 * CTA strip di footer sering punya 2 button side-by-side yang
 * di mobile harus stack vertically dengan gap.
 * ============================================================= */
@media (max-width: 575.98px) {
    .cta-strip {
        padding: 36px 0 !important;
    }
    .cta-strip h2 {
        font-size: 1.3rem !important;
    }
    .cta-strip .col-md-auto {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }
    .cta-strip .col-md-auto .btn {
        width: 100%;
    }
}

/* =============================================================
 * 8. MOTOR CARD MOBILE TIGHTER
 * --------------------------------------------------------------
 * Featured motor card di homepage: kurangi padding + font supaya
 * lebih banyak terlihat dalam 1 viewport.
 *
 * Wave 11.6 (2026-04-23): cleanup setelah restyle .motor-card jadi
 * single-link <a> dgn full-width button (no more 2-button layout).
 * Hapus rules: .motor-cta { flex-direction: column } + .motor-cta .btn
 * (obsolete — sekarang .motor-cta adalah <span> button itself, bukan
 * container untuk multiple .btn). Sisa rules tetap untuk tighten
 * mobile padding/font sizes.
 * ============================================================= */
@media (max-width: 575.98px) {
    .motor-card .motor-body {
        padding: 0.6rem 0.7rem 0.7rem !important;
    }
    .motor-card .motor-name {
        font-size: 0.85rem !important;
        line-height: 1.2 !important;
    }
    .motor-card .motor-price {
        font-size: 0.78rem !important;
        margin-bottom: 0.5rem !important;
    }
    .motor-card .motor-price .lbl {
        font-size: 0.68rem !important;
    }
    .motor-card .motor-cta {
        font-size: 0.74rem !important;
        padding: 7px 10px !important;
    }
    .motor-card .motor-cat {
        font-size: 0.55rem !important;
        padding: 2px 6px !important;
    }
}

/* =============================================================
 * 9. KATEGORI CARD MOBILE
 * --------------------------------------------------------------
 * Kategori card jadi 2-col di mobile (Bootstrap default
 * col-md-6 = 1-col di <768). Force 2-col untuk efisiensi space.
 * ============================================================= */
@media (max-width: 575.98px) {
    .kategori-card {
        padding: 0.85rem 0.75rem !important;
    }
    .kategori-card .kat-ico {
        width: 36px !important;
        height: 36px !important;
        font-size: 18px !important;
        margin-bottom: 0.4rem !important;
    }
    .kategori-card h3 {
        font-size: 0.9rem !important;
    }
    .kategori-card p {
        font-size: 0.78rem !important;
    }
}

/* =============================================================
 * 10. FORM MOBILE — FULL-WIDTH BUTTON & SPACING
 * --------------------------------------------------------------
 * Submit button di form mobile harus full-width supaya thumb-
 * reachable. Form-control juga lebih lega.
 * ============================================================= */
@media (max-width: 575.98px) {
    .form-control,
    .form-select {
        padding: 0.55rem 0.85rem;
    }
    .form-label {
        font-size: 0.88rem;
        margin-bottom: 0.35rem;
    }
    /* Submit button form: full-width */
    form .btn[type="submit"],
    form button[type="submit"] {
        width: 100%;
        padding: 0.65rem 1rem;
    }
    /* Card-body form padding lebih ringkas */
    .card-body form {
        padding-top: 0.25rem;
    }
}

/* =============================================================
 * 11. MODAL MOBILE — FULL-SCREEN UX
 * --------------------------------------------------------------
 * Modal di mobile harus near-fullscreen dengan padding minimal.
 * Bootstrap default tidak optimal untuk small screen (extra margin).
 * ============================================================= */
@media (max-width: 575.98px) {
    .modal-dialog {
        margin: 0.5rem !important;
        max-width: calc(100% - 1rem) !important;
    }
    .modal-content {
        border-radius: 12px;
    }
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 1rem !important;
    }
    .modal-footer {
        flex-direction: column;
        gap: 8px;
    }
    .modal-footer > .btn {
        width: 100%;
        margin: 0 !important;
    }
}

/* =============================================================
 * 12. TABLE RESPONSIVE WRAPPER
 * --------------------------------------------------------------
 * Force semua .table di mobile auto-overflow horizontal supaya
 * tidak break layout. Visual hint: shadow indicator.
 * ============================================================= */
@media (max-width: 767.98px) {
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
    /* Naked .table tanpa wrapper → cegah horizontal page scroll */
    .table:not(.table-responsive .table) {
        font-size: 0.85rem;
    }
    .table th,
    .table td {
        white-space: nowrap;
    }
}

/* =============================================================
 * 13. GALERI SWIPER MOBILE OPTIMIZATIONS
 * --------------------------------------------------------------
 * Swiper di galeri/index.php — pastikan swipe smooth + touch
 * gesture aktif + pagination lebih besar.
 * ============================================================= */
@media (max-width: 575.98px) {
    .mySwiper .swiper-pagination-bullet {
        width: 10px !important;
        height: 10px !important;
    }
    .mySwiper .swiper-pagination-bullet-active {
        background: #0000AD !important;
    }
}

/* =============================================================
 * 14. PROMO STRIP MOBILE TIGHTER
 * --------------------------------------------------------------
 * Promo card scroll mode — lebar lebih kecil supaya peek next.
 * ============================================================= */
@media (max-width: 575.98px) {
    .promo-scroll > .promo-card {
        flex: 0 0 220px !important;
    }
    .promo-card .promo-title {
        font-size: 1rem !important;
    }
    .promo-card .promo-subtitle {
        font-size: 0.78rem !important;
    }
}

/* =============================================================
 * 15. USP & SERVICE CARD MOBILE
 * --------------------------------------------------------------
 * Padding lebih ringkas + ikon proporsional.
 * ============================================================= */
@media (max-width: 575.98px) {
    .usp-card {
        padding: 1.25rem 1rem !important;
    }
    .usp-card .usp-ico {
        width: 50px !important;
        height: 50px !important;
        font-size: 22px !important;
        margin-bottom: 0.7rem !important;
    }
    .usp-card h3 {
        font-size: 1rem !important;
    }
    .usp-card p {
        font-size: 0.85rem !important;
    }

    .service-card {
        padding: 1rem !important;
        gap: 0.75rem !important;
    }
    .service-card .svc-ico {
        flex: 0 0 40px !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }
    .service-card h3 {
        font-size: 0.95rem !important;
    }
    .service-card p {
        font-size: 0.82rem !important;
    }
}

/* =============================================================
 * 16. FLOATING WHATSAPP "TANYA RIAN" — POSISI MOBILE
 * --------------------------------------------------------------
 * Sudah di-set inline di floating-elements.php (right:16px
 * bottom:85px). Pastikan z-index di atas content + tidak overlap
 * sticky filter bar.
 * ============================================================= */
@media (max-width: 991.98px) {
    /* Tanya Rian floating */
    .d-lg-none[style*="position: fixed"][style*="bottom: 85px"] {
        z-index: 1050 !important;
    }
}

/* =============================================================
 * 17. FILTER BAR STICKY MOBILE — JANGAN OVERLAP NAVBAR
 * --------------------------------------------------------------
 * Sticky top:64px di filter-bar default. Kalau navbar mobile
 * lebih pendek (~56px), kurangi gap.
 * ============================================================= */
@media (max-width: 991.98px) {
    .filter-bar {
        top: 56px !important;
    }
}

/* =============================================================
 * 18. WHATSAPP BUTTON MOBILE BRANDING (BTN-WA)
 * --------------------------------------------------------------
 * Pastikan tombol .btn-wa / .btn-success / Hubungi Kami visible
 * dengan size cukup di mobile.
 * ============================================================= */
@media (max-width: 575.98px) {
    .btn-wa,
    .btn-success {
        font-size: 0.95rem;
        padding: 0.6rem 1.1rem;
    }
}

/* =============================================================
 * 19. TYPOGRAPHY HIERARCHY MOBILE
 * --------------------------------------------------------------
 * Heading h1-h3 di mobile sering terlalu besar untuk small
 * screen. Scale down dengan rasio yang konsisten.
 * ============================================================= */
@media (max-width: 575.98px) {
    h1, .h1 { font-size: 1.6rem !important; }
    h2, .h2 { font-size: 1.4rem !important; }
    h3, .h3 { font-size: 1.2rem !important; }
    h4, .h4 { font-size: 1.05rem !important; }
    h5, .h5 { font-size: 0.95rem !important; }

    .display-4 { font-size: 2rem !important; }
    .display-5 { font-size: 1.75rem !important; }
    .display-6 { font-size: 1.5rem !important; }

    .lead { font-size: 0.95rem !important; }

    /* Body baseline 15px (browser default 16px = baseline iOS) */
    body {
        font-size: 0.95rem;
        line-height: 1.55;
    }
}

/* =============================================================
 * 20. PREVENT HORIZONTAL SCROLL (MOBILE/TABLET SAFETY NET)
 * --------------------------------------------------------------
 * Body horizontal overflow biasanya karena element absolute /
 * margin negative yang bocor. Ini safety net — clip semua.
 *
 * AUDIT FIX (2026-04-23): Sebelumnya rule ini GLOBAL (no media
 * query) → potensial break `position: sticky` di desktop
 * (terutama Safari) karena overflow:hidden pada html/body
 * mengubah scrolling container untuk sticky descendants.
 * Page yang terdampak: motor/index.php (.filter-bar sticky).
 * Fix: scope ke mobile/tablet only (≤991.98px).
 * ============================================================= */
@media (max-width: 991.98px) {
    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }
}

/* =============================================================
 * 21. IMAGE SAFETY — RESPONSIVE BY DEFAULT
 * --------------------------------------------------------------
 * <img> tanpa class img-fluid pun harus respect parent width
 * di mobile. Cegah image overflow.
 * ============================================================= */
@media (max-width: 767.98px) {
    main img:not([width]):not(.swiper-slide img) {
        max-width: 100%;
        height: auto;
    }
}

/* =============================================================
 * 22. TAP HIGHLIGHT — REMOVE BLUE FLASH iOS
 * --------------------------------------------------------------
 * Default iOS Safari tap highlight blue agak ganggu. Ganti ke
 * subtle gray.
 * ============================================================= */
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
}

/* =============================================================
 * 23. LOKASI DEALER MOBILE (HOMEPAGE SECTION)
 * --------------------------------------------------------------
 * Map iframe di mobile minimum height lebih kecil + card body
 * padding tighter.
 * ============================================================= */
@media (max-width: 575.98px) {
    #lokasi-dealer .card-body {
        padding: 1.25rem !important;
    }
    #lokasi-dealer iframe {
        min-height: 220px !important;
    }
    #lokasi-dealer .d-flex.flex-wrap.gap-2 {
        flex-direction: column;
    }
    #lokasi-dealer .d-flex.flex-wrap.gap-2 .btn {
        width: 100%;
    }
}

/* =============================================================
 * 24. FORM GROUP SPACING MOBILE
 * --------------------------------------------------------------
 * mb-3 default di Bootstrap = 1rem. Mobile bisa ditambah supaya
 * label tidak nempel ke field di atasnya.
 * ============================================================= */
@media (max-width: 575.98px) {
    form .mb-3 {
        margin-bottom: 1.15rem !important;
    }
    form .row.g-3 > [class*="col-"] {
        margin-bottom: 0.5rem;
    }
}

/* =============================================================
 * 25. WCAG AA CONTRAST GLOBAL OVERRIDES (Wave 7 — 2026-04-23)
 * --------------------------------------------------------------
 * Lighthouse audit "Background and foreground colors do not
 * have sufficient contrast ratio" (a11y target ≥ 90).
 *
 * Bootstrap default `.text-muted` = #6c757d on white = 4.69:1
 * → borderline AA (passes minimum 4.5 tapi banyak Lighthouse
 * scoring engine masih flag karena rounding / tolerance).
 *
 * Fix: bump ke #5a6268 = 6.1:1 (jauh di atas threshold).
 * Tone subjective hampir identik (Bali user tidak akan
 * notice perubahan), tapi audit score naik solid.
 *
 * Affected (verified via grep index.php):
 *   - 6 instances `.text-muted` di homepage (kategori, featured,
 *     usp, lokasi, layanan section descriptions + count badge)
 *   - All other pages yang pakai Bootstrap text-muted utility
 *
 * Fallback: kalau ada element yang sengaja butuh #6c757d (e.g.
 * disabled state), gunakan inline style atau class custom.
 * ============================================================= */
.text-muted {
    color: #5a6268 !important;
}

/* small.text-muted di card body / form helper sering size kecil
   → naikkan kontras lebih tinggi lagi karena font kecil = WCAG
   AAA target untuk teks <14pt = 7:1. */
small.text-muted,
.small.text-muted,
.form-text {
    color: #4e555b !important;
}

/* =============================================================
 * 26. FOOTER LINK CONTRAST (Wave 7 — 2026-04-23)
 * --------------------------------------------------------------
 * Footer links di dark bg sering terlalu redup (rgba opacity
 * default Bootstrap). Force min contrast yg solid.
 * ============================================================= */
footer.bg-dark a:not(.btn),
footer .text-white-50 {
    color: rgba(255, 255, 255, 0.85) !important;
}
footer.bg-dark a:not(.btn):hover {
    color: #fff !important;
}