/* ========================================
   RESPONSIVE CSS FOR MOBILE DEVICES
   Hanya berlaku untuk layar < 768px
   ======================================== */

/* Mobile: max-width 767px */
@media only screen and (max-width: 767px) {
    
    /* === HEADER & NAVIGATION === */
    #top-bar {
        padding: 10px 0 !important;
    }
    
    #top-bar .container {
        padding: 0 15px;
    }
    
    #top-bar .flex {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    #top-bar .text-sm {
        font-size: 12px !important;
    }
    
    /* Navbar Mobile */
    #header {
        padding: 15px 0;
    }
    
    #header .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    #header .logo h1 {
        font-size: 24px !important;
    }
    
    #header .logo img {
        max-height: 35px !important;
    }
    
    /* Mobile Menu Toggle */
    .mobile-nav-toggle {
        color: #2c3176;
        font-size: 28px;
        cursor: pointer;
        display: inline-block;
        line-height: 0;
        transition: 0.5s;
        border: none;
        background: transparent;
        padding: 10px;
        margin-left: auto;
    }
    
    .mobile-nav-toggle:focus {
        outline: none;
    }
    
    /* Mobile Navigation Menu */
    #nav-menu-container {
        display: none;
        position: fixed;
        top: 70px;
        right: 0;
        width: 100%;
        background: #fff;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        z-index: 999;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
    }
    
    #nav-menu-container.mobile-nav-active {
        display: block !important;
    }
    
    #nav-menu-container ul {
        display: block !important;
        padding: 20px 0;
    }
    
    #nav-menu-container ul li {
        display: block !important;
        padding: 0;
        margin: 0;
        border-bottom: 1px solid #eee;
    }
    
    #nav-menu-container ul li a {
        display: block !important;
        padding: 15px 30px !important;
        color: #2c3176 !important;
        font-size: 16px !important;
        text-align: left;
    }
    
    #nav-menu-container ul li a:hover,
    #nav-menu-container ul li a.active {
        background: #f8f9fa;
        color: #00b2d6 !important;
    }
    
    /* === INTRO/HERO SECTION === */
    #intro {
        width: 100%;
        height: auto !important;
        min-height: 100vh;
    }
    
    #intro .carousel-item {
        height: auto !important;
        min-height: 100vh;
    }
    
    /* Intro page (brosur & galeri) - lebih kecil di mobile */
    #intro.intro-page {
        height: auto !important;
        min-height: 250px !important;
    }
    
    #intro.intro-page .carousel-item {
        height: auto !important;
        min-height: 250px !important;
    }
    
    #intro.intro-page .carousel-content {
        min-height: 250px !important;
        padding: 60px 0 40px !important;
    }
    
    #intro .carousel-content {
        position: relative !important;
        height: auto !important;
        min-height: 100vh;
        padding-bottom: 20px !important;
    }
    
    #intro .carousel-container {
        padding: 0 15px;
    }
    
    #intro .carousel-content h2 {
        font-size: 24px !important;
        line-height: 32px !important;
        margin-bottom: 15px;
    }
    
    #intro .carousel-content p {
        font-size: 14px !important;
        line-height: 20px !important;
    }
    
    #intro .carousel-content a {
        font-size: 14px !important;
        padding: 10px 20px !important;
        margin: 5px !important;
    }
    
    /* Statistics Wrapper Mobile */
    #intro .hero-statistics-wrapper {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 30px auto 0 !important;
        padding: 20px 15px !important;
        background: rgba(255, 255, 255, 0.35) !important;
        backdrop-filter: blur(10px) !important;
    }
    
    /* Statistics Grid Mobile */
    #intro .statistics-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    
    #intro .statistics-grid > div {
        padding: 10px 5px !important;
    }
    
    #intro .statistics-grid h3 {
        font-size: 1.5rem !important;
        margin-bottom: 5px !important;
    }
    
    #intro .statistics-grid p {
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
        margin: 0 !important;
    }
    
    /* === SECTION HEADERS === */
    .section-header h3 {
        font-size: 24px !important;
        line-height: 32px !important;
    }
    
    .section-header p {
        font-size: 14px !important;
        padding: 0 15px;
    }
    
    section {
        padding: 40px 0 !important;
    }
    
    /* === SERVICES SECTION === */
    #services .box {
        margin-bottom: 20px;
        padding: 20px !important;
    }
    
    #services .icon i {
        font-size: 32px !important;
    }
    
    #services h4 {
        font-size: 18px !important;
    }
    
    #services p {
        font-size: 14px !important;
    }
    
    /* === PORTFOLIO/GALLERY/BROSUR === */
    #portfolio .portfolio-item {
        margin-bottom: 20px;
    }
    
    #portfolio-flters {
        padding: 0 10px;
        margin-bottom: 20px;
    }
    
    #portfolio-flters li {
        font-size: 12px !important;
        padding: 6px 12px !important;
        margin: 4px 3px !important;
    }
    
    .portfolio-wrap {
        margin: 0;
    }
    
    .portfolio-info h4 {
        font-size: 16px !important;
    }
    
    .portfolio-info p {
        font-size: 13px !important;
    }
    
    /* === STATISTICS/COUNTER === */
    .stats-container {
        padding: 30px 15px !important;
    }
    
    .stat-item {
        margin-bottom: 30px;
        text-align: center;
    }
    
    .stat-number {
        font-size: 32px !important;
    }
    
    .stat-label {
        font-size: 14px !important;
    }
    
    /* === JADWAL/TIMETABLE === */
    .calendar-container {
        padding: 15px !important;
        overflow-x: auto;
    }
    
    table {
        font-size: 12px !important;
        min-width: 600px;
    }
    
    table th,
    table td {
        padding: 8px 4px !important;
    }
    
    /* === TRAINING CARDS === */
    .training-card,
    .service-card {
        margin-bottom: 20px;
    }
    
    .training-card h4,
    .service-card h4 {
        font-size: 18px !important;
    }
    
    /* === PROFILE SECTION === */
    #profile .row.align-items-start .col-lg-6 {
        padding-left: 15px !important;
        padding-top: 0 !important;
        margin-bottom: 20px;
    }
    
    #profile h2 {
        font-size: 1.8rem !important;
    }
    
    #profile p {
        font-size: 1rem !important;
    }
    
    /* Feature Cards Mobile */
    .feature-cards-row-2,
    .feature-cards-row-3 {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        margin-bottom: 15px !important;
    }
    
    .feature-card {
        padding: 20px 15px !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .feature-card h4 {
        font-size: 1.1rem !important;
        margin: 10px 0 10px 0 !important;
    }
    
    .feature-card p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }
    
    .feature-card i {
        font-size: 2rem !important;
    }
    
    .feature-card div[style*="font-size: 2.5rem"] {
        font-size: 2rem !important;
        margin-bottom: 10px !important;
    }
    
    /* === ABOUT SECTION === */
    #about .about-img {
        margin-bottom: 30px;
    }
    
    #about h3 {
        font-size: 22px !important;
    }
    
    #about p {
        font-size: 14px !important;
    }
    
    /* === CONTACT PAGE === */
    .contact-form {
        padding: 25px !important;
        margin-top: 30px;
    }
    
    .contact-left {
        margin-bottom: 30px;
    }
    
    .contact-left h3 {
        font-size: 22px !important;
    }
    
    .contact-left p {
        font-size: 14px !important;
    }
    
    .contact-info-item {
        font-size: 14px !important;
    }
    
    .contact-info-item i {
        font-size: 20px !important;
    }
    
    .map-container iframe {
        height: 250px !important;
    }
    
    .form-input {
        font-size: 14px !important;
        padding: 10px !important;
    }
    
    .submit-btn {
        padding: 12px 20px !important;
        font-size: 14px !important;
    }
    
    /* === FOOTER === */
    #footer {
        padding: 30px 0 !important;
    }
    
    #footer .footer-top {
        padding: 30px 0 !important;
    }
    
    #footer h4 {
        font-size: 18px !important;
    }
    
    #footer p,
    #footer a {
        font-size: 14px !important;
    }
    
    #footer .footer-links li {
        padding: 5px 0;
    }
    
    #footer .copyright {
        font-size: 13px !important;
        padding: 15px 0 !important;
    }
    
    /* === CAROUSEL CLIENTS === */
    .clients-carousel .client-logo {
        max-width: 80px !important;
        margin: 0 auto;
    }
    
    /* === PAGINATION === */
    .pagination {
        font-size: 14px !important;
    }
    
    .pagination .page-link {
        padding: 6px 12px !important;
    }
    
    /* === BUTTONS === */
    .btn,
    .button {
        font-size: 14px !important;
        padding: 10px 20px !important;
    }
    
    /* === TABLES RESPONSIVE === */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* === CARDS === */
    .card {
        margin-bottom: 20px;
    }
    
    .card-body {
        padding: 15px !important;
    }
    
    /* === IMAGES === */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* === ROW SPACING === */
    .row {
        margin-left: -10px;
        margin-right: -10px;
    }
    
    .row > [class*="col-"] {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* === CONTAINER === */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* === MARGIN & PADDING UTILITIES === */
    .mb-5 {
        margin-bottom: 30px !important;
    }
    
    .mt-5 {
        margin-top: 30px !important;
    }
    
    .py-5 {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }
}

/* Extra Small Mobile: max-width 480px */
@media only screen and (max-width: 480px) {
    
    /* Even smaller adjustments for very small phones */
    #intro .carousel-content h2 {
        font-size: 20px !important;
        line-height: 28px !important;
    }
    
    .section-header h3 {
        font-size: 20px !important;
        line-height: 28px !important;
    }
    
    #portfolio-flters li {
        font-size: 11px !important;
        padding: 5px 10px !important;
        margin: 3px 2px !important;
    }
    
    .contact-form {
        padding: 20px !important;
    }
    
    table {
        font-size: 11px !important;
    }
    
    .stat-number {
        font-size: 28px !important;
    }
    
    /* Statistics Grid for very small phones */
    #intro .statistics-grid h3 {
        font-size: 1.25rem !important;
    }
    
    #intro .statistics-grid p {
        font-size: 0.7rem !important;
    }
}

/* Landscape mode for mobile */
@media only screen and (max-height: 500px) and (orientation: landscape) {
    #intro {
        height: 90vh !important;
    }
}

/* ========================================
   ADDITIONAL RESPONSIVE FIXES
   ======================================== */

@media only screen and (max-width: 767px) {
    
    /* === OWL CAROUSEL === */
    .owl-carousel .owl-item img {
        width: auto;
        max-height: 60px;
        margin: 0 auto;
    }
    
    .owl-carousel .owl-nav {
        font-size: 20px !important;
    }
    
    .owl-carousel .owl-dots {
        margin-top: 15px !important;
    }
    
    /* === ISOTOPE PORTFOLIO === */
    .portfolio-container {
        margin-top: 20px;
    }
    
    .portfolio-container .col-lg-4,
    .portfolio-container .col-md-6 {
        width: 100% !important;
        padding: 0 10px;
    }
    
    /* === LIGHTBOX === */
    .lightbox {
        padding: 10px !important;
    }
    
    /* === FORMS === */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
    
    /* === MODALS === */
    .modal-dialog {
        margin: 10px;
    }
    
    .modal-content {
        border-radius: 8px;
    }
    
    /* === ALERTS === */
    .alert {
        font-size: 14px !important;
        padding: 12px !important;
    }
    
    /* === BREADCRUMBS === */
    .breadcrumb {
        font-size: 12px !important;
        padding: 10px 15px !important;
    }
    
    /* === BADGES === */
    .badge {
        font-size: 11px !important;
        padding: 4px 8px !important;
    }
    
    /* === LIST GROUPS === */
    .list-group-item {
        font-size: 14px !important;
        padding: 12px 15px !important;
    }
    
    /* === DROPDOWNS === */
    .dropdown-menu {
        font-size: 14px !important;
    }
    
    /* === TABS === */
    .nav-tabs {
        flex-wrap: wrap;
    }
    
    .nav-tabs .nav-link {
        font-size: 14px !important;
        padding: 10px 15px !important;
    }
    
    /* === ACCORDION === */
    .accordion .card-header {
        font-size: 14px !important;
        padding: 12px 15px !important;
    }
    
    /* === VIDEO RESPONSIVE === */
    iframe,
    video,
    embed,
    object {
        max-width: 100%;
    }
    
    /* === TESTIMONIALS === */
    .testimonial {
        padding: 20px !important;
        margin-bottom: 20px;
    }
    
    .testimonial-img {
        width: 60px !important;
        height: 60px !important;
    }
    
    /* === PRICING TABLES === */
    .pricing-table {
        margin-bottom: 30px;
    }
    
    .pricing-table .price {
        font-size: 32px !important;
    }
    
    /* === TEAM MEMBERS === */
    .team-member {
        margin-bottom: 30px;
        text-align: center;
    }
    
    .team-member img {
        max-width: 200px;
        margin: 0 auto 15px;
    }
    
    /* === SOCIAL LINKS === */
    .social-links a {
        font-size: 16px !important;
        width: 36px !important;
        height: 36px !important;
        line-height: 36px !important;
        margin: 0 4px !important;
    }
    
    /* === HIDE ON MOBILE === */
    .d-mobile-none {
        display: none !important;
    }
    
    /* === SHOW ON MOBILE === */
    .d-mobile-block {
        display: block !important;
    }
    
    /* === TEXT ALIGNMENT MOBILE === */
    .text-mobile-center {
        text-align: center !important;
    }
    
    .text-mobile-left {
        text-align: left !important;
    }
    
    /* === SPACING MOBILE === */
    .mb-mobile-3 {
        margin-bottom: 1rem !important;
    }
    
    .mt-mobile-3 {
        margin-top: 1rem !important;
    }
    
    /* === OVERFLOW FIX === */
    body {
        overflow-x: hidden !important;
    }
    
    .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* === BACK TO TOP BUTTON === */
    .back-to-top {
        width: 40px !important;
        height: 40px !important;
        font-size: 14px !important;
        right: 10px !important;
        bottom: 10px !important;
    }
    
    /* === SCROLL ANIMATIONS === */
    .wow {
        animation-duration: 0.5s !important;
    }
    
    /* === BROSUR & GALERI CAROUSEL === */
    .brochure-carousel-wrapper,
    .activity-carousel-wrapper {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    #brochure .container,
    #portfolio .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    .carousel-btn {
        display: none !important;
    }
    
    .brochure-carousel-overflow,
    .activity-carousel-overflow {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        padding: 0 10px !important;
        margin: 0 !important;
    }
    
    .brochure-carousel-overflow::-webkit-scrollbar,
    .activity-carousel-overflow::-webkit-scrollbar {
        display: none !important;
    }
    
    .brochure-carousel,
    .activity-carousel {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 15px !important;
        padding: 10px 0 !important;
    }
    
    .brochure-item,
    .activity-item {
        flex: 0 0 85% !important;
        max-width: 85% !important;
        min-width: 260px !important;
        margin: 0 !important;
    }
    
    .brochure-item .card,
    .activity-item .card {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .brochure-item .card-body,
    .activity-item .card-body {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        padding: 15px 10px !important;
    }
    
    .brochure-item .card-title,
    .activity-item .card-title {
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
    }
    
    .brochure-item img,
    .activity-item img {
        height: 350px !important;
        object-fit: cover !important;
        width: 100% !important;
    }
    
    .brochure-item .badge,
    .activity-item .badge {
        font-size: 0.75rem !important;
        padding: 4px 8px !important;
    }
    
    /* Filter buttons responsive */
    #brochure-filters,
    #activity-filters {
        flex-wrap: wrap !important;
        padding: 0 10px !important;
    }
    
    #brochure-filters .nav-link,
    #activity-filters .nav-link {
        font-size: 12px !important;
        padding: 8px 12px !important;
        margin: 4px !important;
    }
    
    /* === FLOATING BUTTONS === */
    /* WhatsApp Float Button */
    .whatsapp-float,
    a[href*="wa.me"]:not(.btn) {
        width: 50px !important;
        height: 50px !important;
        bottom: 70px !important;
        right: 15px !important;
        font-size: 24px !important;
    }
    
    /* Back to Top Button Position */
    .back-to-top {
        bottom: 15px !important;
        right: 15px !important;
    }
    
    /* Adjust if WhatsApp button exists */
    body:has(.whatsapp-float) .back-to-top,
    body:has(a[href*="wa.me"]:not(.btn)) .back-to-top {
        bottom: 130px !important;
    }
}