/* Branches & Repeaters Micro Cards */
.fit-all-row {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 0.5rem;
    width: 100%;
}

.micro-card {
    flex: 1;
    min-width: 0;
    transition: transform 0.2s;
}

.micro-card:hover {
    transform: translateY(-3px);
    z-index: 10;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.f-micro-title {
    font-size: 0.8rem;
    line-height: 1.2;
}

.f-micro-badge {
    font-size: 0.6rem;
    padding: 0.2rem 0.4rem;
}

.f-micro-text {
    font-size: 0.9rem;
}

.f-micro-sub {
    font-size: 0.7rem;
}

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

/* Mobile Horizontal Scroll Utility */
@media (max-width: 768px) {
    .mobile-scroll-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding-bottom: 1rem;
        /* Space for shadow */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE/Edge */
    }

    .mobile-scroll-container::-webkit-scrollbar {
        display: none;
        /* Chrome/Safari */
    }

    .mobile-scroll-item {
        flex: 0 0 85% !important;
        max-width: 85% !important;
        display: block !important;
    }
}

/* ========================================
   === MOBILE APP LAYOUT ENGINE (v2.0) === 
   ======================================== */

@media (max-width: 768px) {

    /* --- 1. GLOBAL MOBILE RESETS --- */
    .desktop-only-section {
        display: none !important;
    }

    .micro-card {
        flex: 0 0 180px !important;
        /* Made wider from 140px */
        min-width: 180px;
        max-width: 180px;
        margin-bottom: 0;
    }

    .f-micro-title {
        font-size: 0.95rem;
        /* Increased from 0.75rem */
        font-weight: 700;
        white-space: normal;
        /* Allow wrapping */
        line-height: 1.3;
    }

    .f-micro-text {
        font-size: 0.9rem;
        /* Increased from 0.8rem */
        font-weight: 600;
        color: var(--bs-primary);
    }

    .f-micro-badge {
        font-size: 0.7rem;
        padding: 0.3rem 0.6rem;
    }

    .container {
        padding-left: 1rem;
        padding-right: 1rem;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .row {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }

    .col,
    .col-12,
    .col-lg-6 {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* --- 2. HERO SLIDER (Standardized) --- */
    /* Hide desktop slider if exists/duplicated */
    #heroSlider {
        display: none !important;
    }

    .mobile-hero-slider {
        display: block !important;
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        margin-bottom: 1.5rem !important;
        border-radius: 0 !important;
    }

    .mobile-hero-slider .carousel-item {
        aspect-ratio: 1/1;
        /* Instagram Feed Geometry */
        width: 100%;
    }

    .mobile-hero-slider img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    .mobile-hero-slider .carousel-caption-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 2rem 1rem 1.5rem;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5) 75%, transparent);
        pointer-events: none;
    }

    .mobile-hero-slider h5 {
        font-size: 1.4rem !important;
        font-weight: 800;
        line-height: 1.3;
        margin-bottom: 0.5rem;
        text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    }

    /* Clean up any negative margin hacks from desktop */
    .container.mt-2>.row>.col-lg-8::before {
        display: none !important;
    }


    /* --- 3. HORIZONTAL SCROLL STRIPS (Teknik Köşe + Etkinlikler + Şubeler) --- */
    /* Unified class for all horizontal scrolls */
    .mobile-scroll-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 1rem !important;
        justify-content: flex-start !important;
        /* Fix for space-between overrides */
        padding-bottom: 1rem !important;
        margin-left: -0.5rem !important;
        /* Offset visual margin */
        padding-left: 0.5rem !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .mobile-scroll-container::-webkit-scrollbar {
        display: none;
    }

    /* The Items */
    .mobile-scroll-item {
        flex: 0 0 85% !important;
        /* Standard Card Width */
        max-width: 85% !important;
        display: block !important;
    }

    /* Card Tweaks inside strips */
    .mobile-scroll-item .card {
        border: 1px solid var(--bs-border-color) !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    }


    /* --- 4. VIDEO SECTION (Mobile Horizontal Scroll) --- */
    /* Container Reset - Allow inheriting mobile-scroll-container */
    .row.row-cols-2.g-2 {
        padding: 0 !important;
        margin-left: -0.5rem !important;
        /* Match other strips */
    }

    .row.row-cols-2.g-2>.col {
        /* mobile-scroll-item class handles width (85%) */
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* The Video Card Itself */
    .video-list-item {
        display: flex !important;
        flex-direction: row !important;
        /* Side-by-side: Thumb + Text */
        align-items: center !important;
        padding: 0.75rem !important;
        gap: 1rem !important;
        border: 1px solid var(--bs-border-color) !important;
        border-radius: 12px !important;
        height: 100%;

        /* Force Theme Awareness */
        background-color: var(--bs-body-bg) !important;
        color: var(--bs-body-color) !important;
    }

    /* Ensure no bg-light interference */
    .bg-light.video-list-item {
        background-color: var(--bs-body-bg) !important;
    }

    /* Thumbnail in List */
    .video-list-item .ratio {
        width: 120px !important;
        /* Fixed width thumb */
        height: 70px !important;
        flex-shrink: 0 !important;
        border-radius: 8px !important;
    }

    /* Text Area */
    .video-list-item h6 {
        font-size: 1rem !important;
        line-height: 1.3;
        margin-bottom: 0.25rem !important;
        font-weight: 600;
        white-space: normal !important;
        /* Allow wrapping */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }


    /* --- 5. GALLERY SECTION (Full Width Card) --- */
    /* Break out of container */
    .modern-card .flex-grow-1 {
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        border-radius: 0 !important;
        min-height: 400px !important;
    }

    /* Hide thumbnails on mobile to save space? Or keep as scroll strip? */
    /* Keeping as is but removing padding */
    .modern-card .card-body {
        padding: 0 !important;
    }
}

/* XS Tweaks */
@media (max-width: 576px) {

    /* Even taller aspect ratio for hero on phones? 1:1 maybe? */
    .mobile-hero-slider .carousel-item {
        aspect-ratio: 1/1 !important;
    }
}