/* ============================================================================
   TSUNAMI — Responsive Production Overrides v1.0
   Bu dosya TÜM CSS'lerden SONRA yüklenmeli (en son link).
   Sabit piksel genişlikleri, eksik breakpoint'leri ve touch target'ları düzeltir.
   ============================================================================ */

/* --------------------------------------------------------------------------
   BREAKPOINT MAP:
   360px   Küçük telefon (iPhone SE, Galaxy A)
   480px   Büyük telefon
   768px   Tablet dikey
   1024px  Tablet yatay / küçük laptop
   1200px  Masaüstü
   2560px  2K / QHD
   3840px  4K / UHD
   -------------------------------------------------------------------------- */

/* ============================================================================
   1. FLUID WIDTH OVERRIDES — Sabit genişlik panellerini responsive yap
   ============================================================================ */

/* harita-panels.css overrides */
.mlz-panel {
    width: min(480px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px);
}

#mudahale-merkezi-panel {
    width: min(500px, 100vw) !important;
    max-width: 100vw;
}

.intervention-panel {
    width: min(320px, 100vw) !important;
}

#layersPanel {
    width: min(320px, 100vw) !important;
}

.widget-flyout {
    width: min(280px, calc(100vw - 90px)) !important;
}

.ai-chat-panel {
    width: min(380px, calc(100vw - 32px)) !important;
}

.ailydian-panel {
    width: min(320px, calc(100vw - 32px)) !important;
}

.ghost-panel {
    width: min(320px, calc(100vw - 32px)) !important;
}

.sigint-panel {
    width: min(520px, calc(100vw - 32px)) !important;
}

.osint-panel {
    width: min(350px, calc(100vw - 32px)) !important;
}

.ew-panel {
    width: min(350px, calc(100vw - 20px)) !important;
}

.kizilelma-beyin-panel {
    width: min(520px, calc(100vw - 20px)) !important;
}

.eagle-command-center {
    width: min(380px, calc(100vw - 32px)) !important;
}

/* harita-widgets.css overrides */
.tv-widget {
    width: min(320px, calc(100vw - 24px)) !important;
}

.video-panel {
    width: min(380px, calc(100vw - 24px)) !important;
}

.network-graph-panel {
    width: min(420px, calc(100vw - 24px)) !important;
}

.kizilelma-beyin-widget {
    width: min(320px, 100vw) !important;
}

/* harita-panels.css — diğer paneller */
.gaf-item-panel {
    width: min(280px, calc(100vw - 32px)) !important;
}

#gigFlagsPanel {
    width: min(280px, calc(100vw - 32px)) !important;
}

#shodan-panel {
    width: min(500px, calc(100vw - 32px)) !important;
}

/* ============================================================================
   2. TOUCH TARGET FIX — Tüm etkileşimli elemanlar minimum 44px
   ============================================================================ */

.intervention-close,
.flyout-close,
.panel-close,
.modal-close,
.sv-close,
.dock-item,
.btn,
.btn-unified,
.btn-kizilelma,
.btn-gnn,
.btn-osint,
.btn-shodan,
.globe-ctrl-btn,
.gc-cat,
.tv-header button,
.layer-item,
.kd-cb,
.kwSwitch,
[role="button"],
[onclick]:not(.mod-dot) {
    min-width: 44px;
    min-height: 44px;
}

/* MOD strip ikonları — kompakt kalmalı */
.mod-dot {
    min-width: 18px !important;
    min-height: 18px !important;
    width: 18px !important;
    height: 18px !important;
}

/* Inline style ile 30px olan close butonlarını override et */
button[style*="width:30px"],
button[style*="width: 30px"] {
    min-width: 44px !important;
    min-height: 44px !important;
}

button[style*="height:30px"],
button[style*="height: 30px"] {
    min-width: 44px !important;
    min-height: 44px !important;
}

/* ============================================================================
   3. BREAKPOINT: 360px — Küçük telefonlar (iPhone SE, Galaxy A)
   ============================================================================ */
@media screen and (max-width: 360px) {
    /* Tüm paneller tam genişlik slide-in */
    .mlz-panel,
    .ai-chat-panel,
    .ailydian-panel,
    .ghost-panel,
    .cockpit-modal,
    .notification-panel,
    .sigint-panel,
    .osint-panel,
    #mudahale-merkezi-panel,
    #shodan-panel {
        width: 100vw !important;
        max-width: 100vw !important;
        right: 0 !important;
        left: 0 !important;
        border-radius: 0 !important;
    }

    /* Globe attack feed bottom-sheet */
    #globe-attack-feed {
        position: fixed !important;
        bottom: 0 !important;
        top: auto !important;
        right: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        max-height: 40vh !important;
        border-radius: 12px 12px 0 0 !important;
        z-index: 600 !important;
    }

    /* Widget dock yatay alt bar */
    .widget-dock {
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        height: 56px !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        padding: 4px 8px !important;
        gap: 4px !important;
    }

    /* TV widget genişlik */
    .tv-widget {
        width: calc(100vw - 16px) !important;
        right: 8px !important;
        left: 8px !important;
    }

    /* Butonlar kompakt */
    .btn, .btn-unified, .btn-kizilelma {
        padding: 6px 8px !important;
        font-size: 9px !important;
    }

    /* Logo minimal */
    .logo h1 {
        font-size: 11px !important;
    }
    .logo-icon {
        width: 24px !important;
        height: 24px !important;
    }

    /* Flyout tam genişlik */
    .widget-flyout {
        width: calc(100vw - 16px) !important;
        right: 8px !important;
    }
}

/* ============================================================================
   4. BREAKPOINT: 480px — Büyük telefonlar (genişletilmiş)
   ============================================================================ */
@media screen and (max-width: 480px) {
    /* Inline style override — 480px/500px genişlik */
    [style*="width: 480px"],
    [style*="width:480px"],
    [style*="width: 500px"],
    [style*="width:500px"] {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
    }

    /* Inline style override — 320px genişlik */
    [style*="width: 320px"],
    [style*="width:320px"] {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
    }

    /* max-width override */
    [style*="max-width: 1200px"],
    [style*="max-width:1200px"],
    [style*="max-width: 1400px"],
    [style*="max-width:1400px"] {
        max-width: 100vw !important;
        width: 100vw !important;
    }

    /* 5 sütunlu grid tek sütun */
    .stats-grid,
    .stat-cards,
    .threat-stats-grid {
        grid-template-columns: 1fr !important;
    }

    /* Intervention panel tab'lar wrap */
    .mm-tabs {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    .mm-tab {
        font-size: 10px !important;
        padding: 8px 10px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
}

/* ============================================================================
   5. BREAKPOINT: 768px — Tablet dikey (genişletilmiş)
   ============================================================================ */
@media screen and (max-width: 768px) {
    /* Modaller/popup'lar ekrana sığdır */
    .cockpit-modal,
    .gnn-container,
    .streetview-modal,
    .threat-modal {
        position: fixed !important;
        top: 2vh !important;
        left: 2vw !important;
        right: 2vw !important;
        bottom: 2vh !important;
        width: 96vw !important;
        max-width: 96vw !important;
        max-height: 96vh !important;
        border-radius: 12px !important;
        z-index: 9999 !important;
        overflow-y: auto !important;
    }

    /* Video container tam genişlik */
    .video-player-container,
    .sv-container {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 8px !important;
    }

    /* Inline style height override */
    [style*="height:500px"],
    [style*="height: 500px"] {
        height: 50vh !important;
        max-height: 50vh !important;
    }

    /* Sabit genişlikli inline modaller */
    [style*="width:90%;max-width:1200px"] {
        width: 96vw !important;
        max-width: 96vw !important;
    }

    /* Map kontrollerini büyüt */
    .leaflet-control-zoom a {
        width: 44px !important;
        height: 44px !important;
        line-height: 44px !important;
        font-size: 18px !important;
    }

    /* Panel örtüşme fix */
    .mlz-panel,
    .ai-chat-panel,
    .ailydian-panel,
    .ghost-panel {
        max-height: 80vh !important;
        overflow-y: auto !important;
    }
}

/* ============================================================================
   6. BREAKPOINT: 1024px — Tablet yatay / küçük laptop
   ============================================================================ */
@media screen and (min-width: 769px) and (max-width: 1200px) {
    .mlz-panel {
        width: min(420px, calc(100vw - 80px)) !important;
    }

    .cockpit-modal {
        width: min(420px, calc(100vw - 80px)) !important;
    }

    #mudahale-merkezi-panel {
        width: min(420px, 50vw) !important;
    }

    .sigint-panel {
        width: min(460px, calc(100vw - 80px)) !important;
    }

    .ai-chat-panel {
        width: min(340px, calc(100vw - 80px)) !important;
    }

    /* 5 sütunlu grid 3 sütun */
    .threat-stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ============================================================================
   7. BREAKPOINT: 2560px+ — 2K / QHD / Büyük monitör
   ============================================================================ */
@media screen and (min-width: 2560px) {
    /* Paneller genişletilmiş */
    .mlz-panel {
        width: 560px !important;
    }
    .cockpit-modal {
        width: 560px !important;
    }
    #mudahale-merkezi-panel {
        width: 600px !important;
    }
    .ai-chat-panel {
        width: 440px !important;
    }
    .sigint-panel {
        width: 600px !important;
    }
    .gnn-container {
        max-width: 1800px !important;
    }

    /* Tipografi scale up */
    :root {
        --font-xs: 14px;
        --font-sm: 15px;
        --font-base: 17px;
        --font-lg: 22px;
        --font-xl: 30px;
        --font-xxl: 40px;
    }
}

/* ============================================================================
   8. BREAKPOINT: 3840px+ — 4K / UHD
   ============================================================================ */
@media screen and (min-width: 3840px) {
    /* Paneller daha da genişletilmiş */
    .mlz-panel {
        width: 680px !important;
    }
    #mudahale-merkezi-panel {
        width: 720px !important;
    }
    .ai-chat-panel {
        width: 520px !important;
    }
    .sigint-panel {
        width: 720px !important;
    }

    /* Tipografi 4K scale */
    :root {
        --font-xs: 16px;
        --font-sm: 18px;
        --font-base: 20px;
        --font-lg: 26px;
        --font-xl: 36px;
        --font-xxl: 48px;
    }

    /* Touch target 4K */
    .btn, .btn-unified, .btn-kizilelma {
        min-height: 52px;
        min-width: 52px;
        font-size: 16px;
    }
}

/* ============================================================================
   9. LANDSCAPE ORIENTATION — Yatay mod özel kurallar
   ============================================================================ */
@media screen and (max-height: 500px) and (orientation: landscape) {
    /* Paneller max yükseklik */
    .mlz-panel,
    .ai-chat-panel,
    .ailydian-panel,
    .ghost-panel,
    .sigint-panel,
    .osint-panel,
    #mudahale-merkezi-panel {
        max-height: 90vh !important;
        overflow-y: auto !important;
    }

    /* Modaller max yükseklik */
    .cockpit-modal,
    .gnn-container {
        max-height: 95vh !important;
    }

    /* Widget dock dikey (sağ taraf) */
    .widget-dock {
        flex-direction: column !important;
        width: auto !important;
        height: auto !important;
    }
}

/* ============================================================================
   10. GENEL RESPONSIVE DÜZELTMELER
   ============================================================================ */

/* Tüm resimlere max-width */
img:not(.leaflet-tile):not(.leaflet-marker-icon) {
    max-width: 100%;
    height: auto;
}

/* overflow-x engelle */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Tablo responsive wrapper */
.table-responsive table {
    min-width: 0;
}

/* Buton grupları wrap */
.btn-group {
    flex-wrap: wrap !important;
    gap: 4px;
}

/* Scrollbar ince */
* {
    scrollbar-width: thin;
}

/* Leaflet harita konteyner — tam boyut + siyah arka plan (beyaz flash engel) */
#map,
.leaflet-container {
    width: 100% !important;
    min-height: 300px;
    background: #000000 !important;
}

/* Globe konteyner — tam boyut */
#globeContainer,
.globe-container {
    width: 100% !important;
    min-height: 300px;
}

/* Safe area padding — notched cihazlar */
@supports (padding: env(safe-area-inset-right)) {
    .mlz-panel,
    .ai-chat-panel,
    #mudahale-merkezi-panel {
        padding-right: calc(16px + env(safe-area-inset-right));
    }
}

/* ============================================================================
   11. PRINT OVERRIDE — Yazdırma modu
   ============================================================================ */
@media print {
    .widget-dock,
    .mobile-nav-toggle,
    .globe-container,
    #globeContainer,
    .tv-widget,
    .video-panel {
        display: none !important;
    }

    .mlz-panel,
    .ai-chat-panel,
    #mudahale-merkezi-panel {
        position: static !important;
        width: 100% !important;
        max-height: none !important;
        overflow: visible !important;
        box-shadow: none !important;
    }
}

/* ============================================================================
   7. MOBIL NAV DRAWER — Hamburger menu icerigi
   ============================================================================ */

.mobile-nav-drawer {
    position: fixed;
    top: 0;
    left: -100%;
    width: min(280px, 80vw);
    height: 100vh;
    height: 100dvh;
    background: rgba(10, 14, 39, 0.98);
    border-right: 1px solid rgba(196, 30, 58, 0.3);
    z-index: 100000;
    overflow-y: auto;
    transition: left 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    padding: 0 0 env(safe-area-inset-bottom) 0;
    -webkit-overflow-scrolling: touch;
}

.mobile-nav-drawer.active {
    left: 0;
}

.mobile-nav-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.mobile-nav-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.mnav-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    border-bottom: 1px solid rgba(196, 30, 58, 0.2);
    font-family: 'Orbitron', monospace;
    font-size: 14px;
    font-weight: 700;
    color: #c41e3a;
}

.mnav-section-label {
    display: block;
    padding: 12px 16px 4px;
    font-size: 9px;
    font-weight: 700;
    color: #555;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
}

.mnav-item {
    display: block;
    width: 100%;
    padding: 12px 16px;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: #ccc;
    font-size: 13px;
    font-family: 'JetBrains Mono', monospace;
    text-align: left;
    cursor: pointer;
    min-height: 44px;
    transition: background 0.15s, color 0.15s;
}

.mnav-item:active {
    background: rgba(196, 30, 58, 0.15);
    color: #c41e3a;
}

/* Hamburger toggle — sadece 768px altinda gorunur */
.mobile-nav-toggle {
    display: none;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 100001;
    width: 44px;
    height: 44px;
    background: rgba(10, 14, 39, 0.9);
    border: 1px solid rgba(196, 30, 58, 0.4);
    border-radius: 8px;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
}

.mobile-nav-toggle span {
    display: none;
}

.mobile-nav-toggle img {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    filter: drop-shadow(0 0 6px rgba(196,30,58,0.5));
    transition: transform 0.3s ease, filter 0.3s ease;
}

.mobile-nav-toggle.active img {
    transform: rotate(90deg);
    filter: drop-shadow(0 0 10px rgba(196,30,58,0.8));
}

@media (max-width: 768px) {
    .mobile-nav-toggle {
        display: flex !important;
    }

    /* #katmanDropdown tasmasi engelle */
    #katmanDropdown {
        width: min(320px, calc(100vw - 32px)) !important;
        right: 8px !important;
    }

    /* Header buton label'lari gizle — sadece ikonlar gorunsun */
    .btn-label {
        display: none !important;
    }

    .btn-group .btn,
    .btn-group .btn-unified,
    .btn-group .btn-threat,
    .btn-group .btn-pentest {
        padding: 8px 10px !important;
        min-width: 40px !important;
    }

    /* Panel responsive override */
    .ew-panel {
        max-width: calc(100vw - 20px) !important;
    }
    .kizilelma-beyin-panel {
        max-width: calc(100vw - 20px) !important;
    }
    .eagle-command-center {
        max-width: calc(100vw - 16px) !important;
    }
}

@media (max-width: 480px) {
    .ew-panel,
    .kizilelma-beyin-panel,
    .eagle-command-center {
        width: 100vw !important;
        max-width: 100vw !important;
        right: 0 !important;
        left: 0 !important;
        border-radius: 0 !important;
    }

    /* Bottom sheet pattern — 480px altinda paneller asagidan acilir */
    .mlz-panel,
    .ai-chat-panel,
    .ailydian-panel,
    .ghost-panel,
    .osint-panel {
        top: auto !important;
        right: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        max-height: 75vh !important;
        border-radius: 16px 16px 0 0 !important;
        transform: translateY(100%) !important;
        transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
    }

    .mlz-panel.active,
    .ai-chat-panel.active,
    .ailydian-panel.active,
    .ghost-panel.active,
    .osint-panel.active {
        transform: translateY(0) !important;
    }

    /* Bottom sheet drag handle gostergesi */
    .mlz-panel::before,
    .ai-chat-panel::before,
    .ailydian-panel::before,
    .ghost-panel::before,
    .osint-panel::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: rgba(196, 30, 58, 0.4);
        border-radius: 2px;
        margin: 8px auto 0;
    }
}

/* === Genel baslik kalinligi — tum sayfalarda LyDian eYe daha kalin === */
.page-title,
.hud-title,
.hud-nav-label {
    font-weight: 900 !important;
    letter-spacing: 2px;
}