/* ============================================
   MOBILE RESPONSIVE STYLES
   Tampilan desktop TIDAK akan terpengaruh
   ============================================ */

/* ============================================
   TABLET (iPad, landscape phones, 992px and down)
   ============================================ */
@media (max-width: 991px) {
    /* Hero Section */
    .wpo-hero-section {
        padding: 100px 0 50px;
    }
    
    .hero-image-content .image img {
        max-width: 300px;
        margin: 0 auto;
    }
    
    /* Typography */
    .wpo-hero-section h1 {
        font-size: 50px !important;
    }
    
    .wpo-hero-section .sud-title {
        font-size: 45px !important;
    }
    
    .wpo-hero-section h3 {
        font-size: 18px !important;
    }
    
    /* Skills Section */
    .wpo-service-section .skill-card {
        margin-bottom: 20px;
    }
    
    /* Portfolio Tabs */
    .portfoy-section .nav-pills {
        flex-direction: column;
    }
    
    .portfoy-section .nav-pills .nav-link {
        margin-bottom: 10px;
        text-align: left;
    }
}

/* ============================================
   MOBILE LANDSCAPE (landscape phones, 768px and down)
   ============================================ */
@media (max-width: 767px) {
    /* Header */
    .header-right .call {
        font-size: 12px;
    }
    
    .header-right .call strong {
        font-size: 14px;
    }
    
    /* Hero Section */
    .wpo-hero-section {
        padding: 80px 0 30px;
    }
    
    .wpo-hero-section h1 {
        font-size: 40px !important;
        line-height: 1.2;
    }
    
    .wpo-hero-section .sud-title {
        font-size: 35px !important;
    }
    
    .wpo-hero-section h3 {
        font-size: 16px !important;
        margin-bottom: 20px;
    }
    
    .hero-image-content .image img {
        max-width: 250px;
        margin: 20px auto 0;
    }
    
    .hero-icon {
        position: relative;
        margin-top: 20px;
        text-align: center;
    }
    
    .hero-icon ul {
        justify-content: center;
    }
    
    /* Download Button */
    .theme-btn {
        padding: 12px 25px;
        font-size: 14px;
    }
    
    /* Skills Section */
    .wpo-service-section .col-lg-2,
    .wpo-service-section .col-md-3,
    .wpo-service-section .col-sm-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    .skill-card {
        padding: 15px;
        margin-bottom: 15px;
    }
    
    .skill-card img {
        max-width: 50px;
        max-height: 50px;
    }
    
    .skill-card h4 {
        font-size: 14px;
        margin-top: 10px;
    }
    
    /* Portfolio Section */
    .portfoy-section {
        padding: 60px 0;
    }
    
    .portfoy-section .section-title h2 {
        font-size: 32px;
    }
    
    .portfolio-btn .theme-btn-s2 {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    /* Portfolio Grid */
    .portfolio-single {
        margin-bottom: 20px;
    }
    
    /* Service Section */
    .portfoy-service-section {
        padding: 60px 0;
    }
    
    .portfoy-service-section .section-title h2 {
        font-size: 32px;
    }
    
    .service-card {
        margin-bottom: 20px;
    }
    
    /* Footer */
    .wpo-site-footer {
        background-position: center center !important;
        background-size: cover !important;
        padding: 40px 0 20px;
    }
    
    .wpo-site-footer h3 {
        font-size: 24px !important;
        margin-top: -80px !important;
    }
    
    .wpo-site-footer p {
        font-size: 16px !important;
    }
    
    .social ul {
        justify-content: center;
        margin-top: 20px;
    }
    
    /* Modal */
    .modal-dialog {
        margin: 10px;
    }
    
    .modal-body {
        padding: 20px;
    }
}

/* ============================================
   MOBILE PORTRAIT (portrait phones, 576px and down)
   ============================================ */
@media (max-width: 575px) {
    /* Typography */
    .wpo-hero-section h1 {
        font-size: 32px !important;
    }
    
    .wpo-hero-section .sud-title {
        font-size: 28px !important;
    }
    
    .wpo-hero-section h3 {
        font-size: 14px !important;
    }
    
    /* Hero Image */
    .hero-image-content .image img {
        max-width: 200px;
    }
    
    /* Skills - 2 columns on small phones */
    .wpo-service-section .col-lg-2,
    .wpo-service-section .col-md-3,
    .wpo-service-section .col-sm-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    .skill-card {
        padding: 12px;
    }
    
    .skill-card img {
        max-width: 40px;
        max-height: 40px;
    }
    
    .skill-card h4 {
        font-size: 12px;
    }
    
    /* Section Titles */
    .section-title h2 {
        font-size: 28px !important;
    }
    
    .section-title p {
        font-size: 14px;
    }
    
    /* Portfolio Tabs */
    .portfoy-section .nav-pills .nav-link {
        padding: 10px 15px;
        font-size: 13px;
    }
    
    /* Buttons */
    .theme-btn,
    .theme-btn-s2 {
        padding: 10px 20px;
        font-size: 13px;
    }
    
    /* Footer */
    .wpo-site-footer h3 {
        font-size: 20px !important;
        margin-top: -60px !important;
    }
    
    .wpo-site-footer p {
        font-size: 14px !important;
    }
    
    .wpo-lower-footer p {
        font-size: 12px;
        text-align: center;
    }
    
    /* Social Icons */
    .social ul li {
        margin: 0 5px;
    }
    
    .social ul li a i {
        font-size: 16px;
    }
}

/* ============================================
   EXTRA SMALL DEVICES (very small phones, 375px and down)
   ============================================ */
@media (max-width: 374px) {
    .wpo-hero-section h1 {
        font-size: 28px !important;
    }
    
    .wpo-hero-section .sud-title {
        font-size: 24px !important;
    }
    
    .wpo-hero-section h3 {
        font-size: 13px !important;
    }
    
    .hero-image-content .image img {
        max-width: 180px;
    }
    
    .skill-card h4 {
        font-size: 11px;
    }
    
    .theme-btn,
    .theme-btn-s2 {
        padding: 8px 15px;
        font-size: 12px;
    }
}

/* ============================================
   UTILITY CLASSES FOR MOBILE
   ============================================ */

/* Hide on mobile */
@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
    
    /* Improve touch targets */
    button,
    a.btn,
    .theme-btn,
    .nav-link {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Better spacing for touch */
    .hero-icon ul li {
        margin: 0 8px;
    }
    
    /* Portfolio Modal Full Screen */
    .modal-dialog {
        max-width: 100%;
        margin: 0;
    }
    
    .modal-content {
        border-radius: 0;
        min-height: 100vh;
    }
    
    .modal-img {
        width: 100%;
        height: auto;
    }
}

/* ============================================
   BACKGROUND IMAGE OPTIMIZATION FOR MOBILE
   ============================================ */
@media (max-width: 767px) {
    /* Service Section Background */
    .portfoy-service-section {
        background-size: cover !important;
        background-position: center center !important;
    }
    
    /* Footer Background */
    .wpo-site-footer {
        background-attachment: scroll !important;
    }
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* Reduce animations on mobile for better performance */
@media (max-width: 767px) {
    * {
        animation-duration: 0.5s !important;
        transition-duration: 0.3s !important;
    }
    
    /* Disable parallax on mobile */
    [data-parallax] {
        background-attachment: scroll !important;
    }
}

/* ============================================
   ACCESSIBILITY IMPROVEMENTS FOR MOBILE
   ============================================ */
@media (max-width: 767px) {
    /* Larger text for readability */
    body {
        font-size: 16px;
        line-height: 1.6;
    }
    
    /* Better contrast for links */
    a {
        text-decoration: underline;
    }
    
    a:hover,
    a:focus {
        text-decoration: none;
        outline: 2px solid currentColor;
    }
}