/**
 * VIP — Responsive Scale (Global)
 *
 * Tum sayfada otomatik fluid scaling. Windows DPI veya browser zoom %125/%150
 * yapildiginda site %100 gibi gorunur — navbar/icerik tasmaz, ogeler proportional kuculur.
 *
 * Mantik:
 *   - 1024 alti: Tailwind native (mobile hamburger / mobile layout)
 *   - 1024-1279: Mobile zorla (cok dar zone, navbar sigmaz)
 *   - 1280+: Root font-size fluid (clamp+vw) -> tum rem-based Tailwind class'lari otomatik scale
 *   - 1280+: Navbar ekstra clamp ile sikice fit
 *
 * Sayfa Kullanimi:
 *   <link rel="stylesheet" href="css/responsive-scale.css">
 *   (head icinde, Tailwind CDN'den SONRA, kendi inline <style>'larindan ONCE)
 */

/* ============================================
 * 1) ROOT FONT-SIZE FLUID (1024+ desktop)
 * ============================================
 * Tailwind class'lari rem-based. Root font-size scale ettikce her sey scale.
 *
 * 1280px viewport: 0.83vw = 10.62 -> clamp min 11px
 * 1536px viewport: 0.83vw = 12.75 -> 13px
 * 1920px viewport: 0.83vw = 15.94 -> 16px (native)
 * 2400px+: 16px max
 */
@media (min-width: 1024px) {
    html {
        font-size: clamp(11px, 0.83vw, 16px) !important;
    }
}

/* ============================================
 * 2) NAVBAR 1024-1279 ZORLA MOBILE
 * ============================================
 * Bu zone cok dar — desktop menu sigmaz, hamburger goster.
 */
@media (min-width: 1024px) and (max-width: 1279px) {
    #navbar .hidden.lg\:flex,
    #navbar nav.hidden.lg\:flex,
    #navbar div.hidden.lg\:flex {
        display: none !important;
    }
    #navbar #mobile-menu-btn,
    #navbar button.lg\:hidden {
        display: inline-block !important;
    }
    #navbar #desktop-nav {
        display: none !important;
    }
}

/* ============================================
 * 3) NAVBAR 1280+ FLUID (clamp + vw)
 * ============================================
 * Sikice fit: font, gap, logo, padding hep oransal scale.
 * Root font-size scale'in uzerine ekstra navbar-spesifik tuning.
 */
@media (min-width: 1280px) {
    #navbar .nav-link,
    #navbar .nav-btn,
    #navbar nav a,
    #navbar #desktop-nav a,
    #navbar a.nav-link,
    #navbar a.nav-btn {
        font-size: clamp(9px, 0.65vw, 12px) !important;
    }

    #navbar .flex-nowrap,
    #navbar #desktop-nav,
    #navbar nav.lg\:flex,
    #navbar nav.xl\:flex {
        gap: clamp(3px, 0.5vw, 12px) !important;
    }

    #navbar img.logo-anim,
    #navbar a > img {
        height: clamp(32px, 2.4vw, 48px) !important;
        width: auto !important;
    }

    #navbar.fixed,
    #navbar {
        padding-left: clamp(12px, 1.8vw, 48px) !important;
        padding-right: clamp(12px, 1.8vw, 48px) !important;
        padding-top: clamp(10px, 1.2vw, 24px) !important;
        padding-bottom: clamp(10px, 1.2vw, 24px) !important;
    }

    #navbar .nav-btn {
        padding-left: clamp(8px, 0.7vw, 16px) !important;
        padding-right: clamp(8px, 0.7vw, 16px) !important;
    }
}