/* ===== TAK RESPONSIVE FOUNDATION ===== */
:root {
    /* Spacing Scale */
    --spacing-xs: clamp(0.5rem, 1.25vw, 0.75rem);
    --spacing-sm: clamp(0.75rem, 2vw, 1rem);
    --spacing-md: clamp(1rem, 2.5vw, 1.25rem);
    --spacing-lg: clamp(1.25rem, 3vw, 1.5rem);
    --spacing-xl: clamp(1.5rem, 4vw, 2rem);
    --spacing-2xl: clamp(2rem, 5vw, 2.5rem);

    /* Typography Scale */
    --font-size-xs: clamp(10px, 2.5vw, 12px);
    --font-size-sm: clamp(12px, 3vw, 14px);
    --font-size-base: clamp(14px, 3.5vw, 16px);
    --font-size-lg: clamp(16px, 4vw, 18px);
    --font-size-xl: clamp(18px, 4.5vw, 20px);
    --font-size-2xl: clamp(20px, 5vw, 24px);

    /* Colors */
    --primary: #3df9fb;
    --secondary: #2a5298;
    --text-primary: #2c3e50;
    --text-secondary: #7f8c8d;
    --background: #f8f9fa;
    --card-bg: #ffffff;
    --border: #ecf0f1;

    /* Layout */
    --header-height: clamp(50px, 12vh, 64px);
    --bottom-nav-height: clamp(60px, 15vh, 80px);
    --border-radius: clamp(8px, 2vw, 12px);
    --shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ===== MOBILE BREAKPOINT SYSTEM ===== */
/* Extra Small: Galaxy S8+, iPhone SE (320px - 375px) */
@media (max-width: 375px) {
    :root {
        --font-size-base: 14px;
        --spacing-md: 0.75rem;
        --border-radius: 8px;
    }
}

/* Small: iPhone 12, Pixel 5 (376px - 414px) */
@media (min-width: 376px) and (max-width: 414px) {
    :root {
        --font-size-base: 15px;
        --spacing-md: 1rem;
        --border-radius: 10px;
    }
}

/* Medium: iPhone 14 Pro Max (415px+) */
@media (min-width: 415px) {
    :root {
        --font-size-base: 16px;
        --spacing-md: 1.25rem;
        --border-radius: 12px;
    }
}

/* Mobile Navigation Responsive Styles */

/* Small Mobile (320px - 480px) */
@media (max-width: 480px) {
    .mobile-nav-sidebar {
        width: 95%;
        max-width: 300px;
    }
    
    .nav-social-btn {
        width: 45px;
        height: 45px;
    }
    
    .nav-social-btn svg {
        width: 20px;
        height: 20px;
    }
    
    .nav-social-grid {
        gap: 12px;
    }
    
    .nav-section-title {
        font-size: 11px;
        padding: 12px 15px 8px;
    }
    
    .nav-item {
        padding: 10px 15px;
    }
    
    .nav-search {
        padding: 15px;
    }
}

/* Very Small Mobile (up to 375px) */
@media (max-width: 375px) {
    .mobile-nav-sidebar {
        width: 100%;
        max-width: 280px;
    }
    
    .nav-social-btn {
        width: 42px;
        height: 42px;
    }
    
    .nav-social-btn svg {
        width: 18px;
        height: 18px;
    }
    
    .mobile-nav-content {
        padding-bottom: env(safe-area-inset-bottom, 40px);
    }
    
    .nav-social {
        padding: 15px;
    }
}

/* Main Slider Responsive */
@media (max-width: 768px) {
    #photo-slideshow {
        height: 200px;
        max-width: 96%;
        margin: 0 auto;
    }
    
    .nav-btn {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }
    
    .nav-btn svg {
        width: 10px;
        height: 16px;
    }
    
    .slider-controls {
        padding: 0 15px;
    }
}

@media (max-width: 480px) {
    #photo-slideshow {
        height: 180px;
        max-width: 98%;
    }
    
    .nav-btn {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }
    
    .nav-btn svg {
        width: 8px;
        height: 14px;
    }
    
    .slider-controls {
        padding: 0 10px;
    }
}

/* Support Button Responsive */
@media (max-width: 768px) {
    .support-button {
        margin: 15px auto;
        padding: 12px 20px;
        max-width: 96%;
    }
    
    .support-line-1 {
        font-size: 14px;
    }
    
    .support-line-2 {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .support-button {
        margin: 10px auto;
        padding: 10px 15px;
        max-width: 98%;
    }
    
    .support-line-1 {
        font-size: 13px;
    }
    
    .support-line-2 {
        font-size: 11px;
    }
}

/* VİTRİN Section Responsive */
@media (max-width: 768px) {
    .section-title {
        font-size: 28px;
        margin: 0 0 20px 0;
    }
    
    .section-title::after {
        width: 140px;
        height: 5px;
        bottom: -8px;
    }
    
    .view-all-btn {
        padding: 8px 16px;
        font-size: 13px;
    }
    
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .section-header-right {
        align-self: stretch;
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .section-title {
        font-size: 24px;
        margin: 0 0 18px 0;
    }
    
    .section-title::after {
        width: 120px;
        height: 4px;
        bottom: -6px;
    }
    
    .view-all-btn {
        padding: 8px 14px;
        font-size: 12px;
        width: 100%;
        text-align: center;
    }
}

/* Desktop Layout */
@media (min-width: 769px) {
    #photo-slideshow {
        height: 250px;
        max-width: 90%;
    }
    
    .support-button {
        max-width: 90%;
    }
    
    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 40px;
    }
}

@media (min-width: 1200px) {
    #photo-slideshow {
        height: 320px;
        max-width: 100%;
    }
    
    .support-button {
        max-width: 85%;
    }
}

/* Ad Section Responsive */
.ad-section {
    height: 120px;
    display: none;
}

@media (max-width: 768px) {
    .ad-section {
        height: 100px;
    }
}

@media (max-width: 480px) {
    .ad-section {
        height: 80px;
    }
}

/* Mobile Header Responsive */
@media (max-width: 768px) {
    .mobile-header-content {
        padding: 10px 0;
    }
    
.mobile-logo .logo-img {
        height: 42px;
    }
    
    .mobile-cta {
        padding: 6px 12px;
        font-size: 12px;
    }
    
    .mobile-hamburger {
        width: 35px;
        height: 35px;
    }
    
    .mobile-hamburger span {
        width: 18px;
    }
}

/* Desktop Styles - Hide Mobile Elements */
@media (min-width: 769px) {
    .mobile-nav-overlay,
    .mobile-header-content {
        display: none !important;
    }
    
    .desktop-header-content {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr;
        grid-template-areas: 'left logo right' 'search search search';
        align-items: center;
        gap: 16px;
        padding: 16px 0;
    }
    
    .desktop-header-content .actions-left {
        grid-area: left;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    
    .desktop-header-content .logo {
        grid-area: logo;
        text-align: center;
    }
    
    .desktop-header-content .actions-right {
        grid-area: right;
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        align-items: center;
    }
    
    .desktop-header-content .search-wide {
        grid-area: search;
    }
}