/* ============================================================
   mobile.css — Global Mobile Responsiveness
   Dimuat di semua halaman via header.php
   ============================================================ */

/* ─── Overflow prevention ──────────────────────────────────── */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

* {
    box-sizing: border-box;
}

/* ─── Semua iframe responsif secara default ─────────────────── */
iframe {
    max-width: 100%;
}

/* ─── Gambar tidak boleh overflow ───────────────────────────── */
img {
    max-width: 100%;
    height: auto;
}

/* ─── Touch-friendly tap targets (min 44px WCAG / Apple HIG) ── */
@media (hover: none) and (pointer: coarse) {
    a,
    button,
    [role="button"],
    .nav-link,
    .btn,
    .filter-btn,
    .modern-btn,
    .section-btn,
    .cta-btn,
    .btn-primary-cta,
    .quick-action-btn,
    .footer-link,
    .footer-social-btn {
        min-height: 44px;
    }

    /* Disable hover animations on touch (karena cursor:hover tidak berlaku) */
    .kandidat-card:hover,
    .employee-card:hover,
    .gallery-item:hover,
    .footer-column:hover {
        transform: none;
    }

    /* Overlay langsung terlihat di touch device */
    .card-overlay,
    .employee-overlay,
    .image-overlay {
        opacity: 0.6;
        background: linear-gradient(135deg,
            rgba(0, 102, 204, 0.5) 0%,
            rgba(0, 186, 255, 0.5) 100%);
    }

    /* Hapus efek tap bawaan browser */
    a, button, [role="button"] {
        -webkit-tap-highlight-color: transparent;
    }
}

/* ─── Tablet (≤ 992px) ──────────────────────────────────────── */
@media (max-width: 992px) {
    /* Hero section padding — semua halaman */
    .kandidat-header,
    #kandidat-hero,
    #katalog-hero,
    #gallery-hero {
        padding-top: 100px;
        padding-bottom: 60px;
    }

    /* Detail kandidat — card tidak overflow ke kiri */
    .employee-details-container {
        margin-left: 12px !important;
        margin-right: 12px !important;
    }

    /* Katalog section header */
    .section-header {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .section-action {
        width: 100%;
    }

    .section-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ─── Mobile (≤ 768px) ──────────────────────────────────────── */
@media (max-width: 768px) {
    /* Hero section padding */
    .kandidat-header,
    #kandidat-hero,
    #katalog-hero,
    #gallery-hero {
        padding-top: 90px;
        padding-bottom: 50px;
    }

    /* Semua judul hero */
    .header-title,
    .hero-title {
        font-size: 2rem;
        line-height: 1.25;
    }

    .header-subtitle,
    .hero-subtitle {
        font-size: 1rem;
    }

    /* Section title */
    .section-title {
        font-size: 1.8rem !important;
    }

    /* Footer layout */
    .map-container {
        display: flex;
        justify-content: center;
    }

    /* Tombol CTA full-width di mobile */
    .cta-actions {
        flex-direction: column;
        align-items: center;
    }

    .cta-btn {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }

    /* Katalog hero stats */
    .hero-stats .row > [class*="col-"] {
        margin-bottom: 0.75rem;
    }

    /* Owl carousel nav tombol tidak terpotong */
    .owl-carousel .owl-nav .owl-prev { margin-left: -20px; }
    .owl-carousel .owl-nav .owl-next { margin-right: -20px; }

    /* Detail kandidat contact buttons */
    .contact-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .contact-buttons .btn {
        width: 100%;
        justify-content: center;
        min-height: 48px;
    }

    /* Profile image di detail kandidat */
    .profile-image-large {
        max-width: 200px !important;
    }

    /* Info item di detail kandidat */
    .info-item {
        padding: 12px !important;
    }
}

/* ─── Small Mobile (≤ 480px) ────────────────────────────────── */
@media (max-width: 480px) {
    /* Hero section padding lebih compact */
    .kandidat-header,
    #kandidat-hero,
    #katalog-hero,
    #gallery-hero {
        padding-top: 80px;
        padding-bottom: 40px;
    }

    .header-title,
    .hero-title {
        font-size: 1.65rem;
    }

    .header-subtitle,
    .hero-subtitle {
        font-size: 0.9rem;
    }

    .header-badge,
    .hero-badge,
    .gallery-badge,
    .section-badge,
    .cta-badge {
        font-size: 0.78rem;
        padding: 0.5rem 1rem;
    }

    /* Katalog section */
    .katalog-section {
        padding: 1.2rem !important;
        border-radius: 18px !important;
    }

    .section-icon-wrapper {
        width: 60px !important;
        height: 60px !important;
        font-size: 2rem !important;
        border-radius: 14px !important;
    }

    .section-title {
        font-size: 1.4rem !important;
    }

    .section-description {
        font-size: 0.92rem !important;
    }

    /* CTA section */
    .katalog-cta {
        padding: 2rem 1rem !important;
        border-radius: 18px !important;
    }

    .cta-title {
        font-size: 1.5rem !important;
    }

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

    /* Gallery */
    .gallery-main-title {
        font-size: 1.5rem !important;
    }

    .gallery-description {
        font-size: 0.92rem !important;
    }

    /* Artikel & about section headers */
    h1, h2.section-main-title {
        font-size: clamp(1.4rem, 5vw, 2rem);
    }

    /* Footer */
    .footer-section-title {
        font-size: 1rem !important;
    }

    .footer-company-title {
        font-size: 1.1rem !important;
    }

    .footer-bottom-title {
        font-size: 1.1rem !important;
    }

    .footer-address-info {
        padding: 12px 10px !important;
    }

    /* Quick contact buttons full width */
    .footer-quick-contact .d-flex {
        flex-direction: column !important;
        align-items: center;
        gap: 8px;
    }

    .footer-quick-contact-btn {
        width: 100% !important;
        max-width: 280px;
        text-align: center;
        justify-content: center;
        min-height: 46px;
    }

    /* Scroll to top button position */
    .scroll-to-top {
        bottom: 12px;
        right: 12px;
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
}

/* ─── Extra Small (≤ 360px) ─────────────────────────────────── */
@media (max-width: 360px) {
    .header-title,
    .hero-title {
        font-size: 1.4rem;
    }

    .header-subtitle,
    .hero-subtitle {
        font-size: 0.85rem;
    }

    /* Container padding lebih kecil */
    .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Navbar brand text — sembunyikan teks, pertahankan logo */
    .navbar-brand span,
    .navbar-brand:not(:has(img)) {
        font-size: 0.9rem;
    }
}

/* ─── Landscape Phone (tinggi layar < 500px) ────────────────── */
@media (orientation: landscape) and (max-height: 500px) {
    /* Kurangi padding hero agar konten tidak terpotong */
    .kandidat-header,
    #kandidat-hero,
    #katalog-hero,
    #gallery-hero {
        padding-top: 70px;
        padding-bottom: 30px;
    }

    .header-title,
    .hero-title {
        font-size: 1.6rem;
    }
}

/* ─── Reduced Motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}