/**
 * Mobile Layout Fixes
 * Mengatasi masalah white spot dan layout issues di mobile view
 */

/* Reset global untuk menghilangkan white space */
* {
    box-sizing: border-box;
}

html {
    height: 100%;
    overflow-x: hidden;
}

body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: #ffffff;
}

/* Fix untuk container utama */
.container,
.container-fluid {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* Mobile specific fixes */
@media (max-width: 768px) {
    /* Reset margin dan padding untuk mobile */
    body {
        margin: 0;
        padding: 0;
        background-color: #ffffff;
    }
    
    /* Fix untuk header */
    .navbar,
    nav {
        margin: 0;
        padding: 0;
        width: 100%;
    }
    
    /* Fix untuk main content */
    main,
    .main-content,
    .content {
        margin: 0;
        padding: 0;
        width: 100%;
        min-height: calc(100vh - 60px);
    }
    
    /* Fix untuk sections */
    section {
        margin: 0;
        padding: 20px 15px;
        width: 100%;
    }
    
    /* Fix untuk hero section */
    .hero-section,
    .home-slider {
        margin: 0;
        padding: 20px 15px;
        width: 100%;
        min-height: calc(100vh - 60px);
        background-color: #ffffff;
    }
    
    /* Fix untuk cards dan containers */
    .card,
    .card-body {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
    
    /* Fix untuk grid systems */
    .row {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
    
    .col,
    [class*="col-"] {
        padding-left: 15px;
        padding-right: 15px;
        width: 100%;
    }
    
    /* Fix untuk footer */
    footer,
    .footer {
        margin: 0;
        padding: 20px 15px;
        width: 100%;
    }
    
    /* Menghilangkan horizontal scroll */
    .container,
    .container-fluid {
        max-width: 100%;
        overflow-x: hidden;
    }
    
    /* Fix untuk images */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Fix untuk background animations */
    .bg-animation-element {
        display: none !important;
    }
    
    /* Fix untuk particles */
    .particle {
        display: none !important;
    }
    
    /* Fix untuk overflow issues */
    .overflow-hidden {
        overflow: hidden;
    }
    
    /* Fix untuk mobile menu */
    #mobile-menu {
        width: 100%;
        left: 0;
        right: 0;
        margin: 0;
    }
    
    /* Fix untuk workshop detail page */
    .workshop-detail {
        margin: 0;
        padding: 20px 15px;
        width: 100%;
    }
    
    .workshop-header {
        margin: 0;
        padding: 20px 15px;
        width: 100%;
    }
    
    .workshop-content {
        margin: 0;
        padding: 20px 15px;
        width: 100%;
    }
    
    /* Fix untuk team section */
    .team-section {
        margin: 0;
        padding: 20px 15px;
        width: 100%;
    }
    
    /* Fix untuk services section */
    .services-section {
        margin: 0;
        padding: 20px 15px;
        width: 100%;
    }
    
    /* Fix untuk call to action */
    .cta-section {
        margin: 0;
        padding: 20px 15px;
        width: 100%;
    }
    
    /* Fix untuk other workshops */
    .other-workshops {
        margin: 0;
        padding: 20px 15px;
        width: 100%;
    }
    
    /* Fix untuk buttons */
    .btn {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .btn-group {
        width: 100%;
        flex-direction: column;
    }
    
    /* Fix untuk forms */
    .form-group {
        margin-bottom: 15px;
        width: 100%;
    }
    
    .form-control {
        width: 100%;
    }
    
    /* Fix untuk tables */
    .table-responsive {
        width: 100%;
        overflow-x: auto;
    }
    
    /* Fix untuk modals */
    .modal {
        padding: 0;
    }
    
    .modal-dialog {
        margin: 10px;
        width: calc(100% - 20px);
    }
    
    /* Fix untuk alerts */
    .alert {
        margin-left: 0;
        margin-right: 0;
        border-radius: 0;
    }
    
    /* Fix untuk breadcrumbs */
    .breadcrumb {
        margin: 0;
        padding: 10px 15px;
        background-color: transparent;
    }
    
    /* Fix untuk pagination */
    .pagination {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    /* Fix untuk tabs */
    .nav-tabs {
        flex-wrap: wrap;
        border-bottom: none;
    }
    
    .nav-tabs .nav-link {
        border: none;
        border-radius: 0;
    }
    
    /* Fix untuk progress bars */
    .progress {
        margin: 10px 0;
    }
    
    /* Fix untuk badges */
    .badge {
        font-size: 0.75em;
    }
    
    /* Fix untuk list groups */
    .list-group {
        margin: 0;
    }
    
    .list-group-item {
        border-left: none;
        border-right: none;
        border-radius: 0;
    }
    
    /* Fix untuk carousels */
    .carousel {
        width: 100%;
    }
    
    .carousel-inner {
        width: 100%;
    }
    
    .carousel-item {
        width: 100%;
    }
    
    /* Fix untuk accordions */
    .accordion {
        width: 100%;
    }
    
    .accordion-item {
        border-left: none;
        border-right: none;
    }
    
    /* Fix untuk dropdowns */
    .dropdown-menu {
        width: 100%;
        border-radius: 0;
        border: none;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    /* Fix untuk tooltips */
    .tooltip {
        font-size: 12px;
    }
    
    /* Fix untuk popovers */
    .popover {
        max-width: calc(100vw - 20px);
    }
    
    /* Fix untuk spinners */
    .spinner-border,
    .spinner-grow {
        width: 2rem;
        height: 2rem;
    }
    
    /* Fix untuk close buttons */
    .btn-close {
        font-size: 1rem;
    }
    
    /* Fix untuk offcanvas */
    .offcanvas {
        width: 100%;
    }
    
    /* Fix untuk toasts */
    .toast {
        width: 100%;
        margin: 0;
    }
    
    /* Fix untuk input groups */
    .input-group {
        width: 100%;
        flex-wrap: wrap;
    }
    
    .input-group > .form-control,
    .input-group > .form-select {
        flex: 1 1 auto;
        width: 1%;
        min-width: 0;
    }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    section {
        padding: 15px 10px;
    }
    
    .hero-section,
    .home-slider {
        padding: 15px 10px;
    }
    
    .workshop-detail,
    .workshop-header,
    .workshop-content,
    .team-section,
    .services-section,
    .cta-section,
    .other-workshops {
        padding: 15px 10px;
    }
}

/* Fix untuk landscape orientation */
@media (max-width: 768px) and (orientation: landscape) {
    .hero-section,
    .home-slider {
        min-height: 100vh;
        padding: 10px 15px;
    }
}

/* Fix untuk very small screens */
@media (max-width: 320px) {
    .container {
        padding-left: 5px;
        padding-right: 5px;
    }
    
    section {
        padding: 10px 5px;
    }
    
    .btn {
        font-size: 14px;
        padding: 8px 12px;
    }
    
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.3rem; }
    h3 { font-size: 1.1rem; }
    h4 { font-size: 1rem; }
    h5 { font-size: 0.9rem; }
    h6 { font-size: 0.8rem; }
}

/* Fix untuk high DPI screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .btn {
        border-width: 0.5px;
    }
    
    .card {
        border-width: 0.5px;
    }
}

/* Fix untuk dark mode */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #1a1a1a;
        color: #ffffff;
    }
}

/* Fix untuk reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Fix untuk print */
@media print {
    body {
        background: white;
        color: black;
    }
    
    .btn,
    .navbar,
    .footer {
        display: none;
    }
}

/* Utility classes untuk debugging */
.debug-border {
    border: 1px solid red !important;
}

.debug-bg {
    background-color: rgba(255, 0, 0, 0.1) !important;
}

.no-margin {
    margin: 0 !important;
}

.no-padding {
    padding: 0 !important;
}

.full-width {
    width: 100% !important;
}

.no-overflow {
    overflow: hidden !important;
}

.no-scroll-x {
    overflow-x: hidden !important;
}

.no-scroll-y {
    overflow-y: hidden !important;
}