/* ═══════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE CSS - %100 Mobil Uyumluluk
   index.html için özel mobil düzeltmeleri
   ═══════════════════════════════════════════════════════════════════════ */

/* ===== GLOBAL MOBILE FIXES ===== */
@media (max-width: 768px) {
    
    /* Prevent horizontal scroll */
    html, body {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    /* Main container padding */
    .max-w-7xl {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* Main spacing adjustments */
    main.space-y-24 {
        gap: 3rem !important;
    }
    
    main.mt-16 {
        margin-top: 2rem !important;
    }
}

/* ===== HEADER MOBILE FIXES ===== */
@media (max-width: 768px) {
    
    /* Header - reduce height and padding */
    header.nav-blur {
        top: 8px !important;
        border-radius: 16px !important;
        margin: 0 8px;
        width: calc(100% - 16px) !important;
    }
    
    header .h-16 {
        height: 56px !important;
    }
    
    header .px-3 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    /* Logo smaller on mobile */
    header .logo-container.w-12.h-12 {
        width: 40px !important;
        height: 40px !important;
    }
    
    header .logo-core .w-7 {
        width: 24px !important;
        height: 24px !important;
    }
    
    /* Brand name smaller */
    header .brand-name {
        font-size: 0.875rem !important;
    }
    
    header .brand-sub {
        display: none !important;
    }
    
    /* Hide desktop nav elements */
    header .hidden.md\\:flex {
        display: none !important;
    }
    
    /* Theme switch - mobile adjustment */
    header .theme-switch {
        width: 40px !important;
        height: 22px !important;
    }
    
    header .theme-knob {
        width: 18px !important;
        height: 18px !important;
    }
    
    html.dark header .theme-knob {
        transform: translateX(18px) !important;
    }
    
    /* Guest actions - hide language on very small */
    #guest-actions .relative {
        display: none !important;
    }
}

/* ===== HERO SECTION MOBILE ===== */
@media (max-width: 768px) {
    
    /* Hero flex direction */
    #landing-view {
        flex-direction: column !important;
        gap: 2rem !important;
        padding-top: 1rem !important;
    }
    
    #landing-view > div {
        width: 100% !important;
    }
    
    /* Badge - smaller text */
    #landing-view .rounded-full.px-5.py-2\.5 {
        padding: 8px 12px !important;
    }
    
    #landing-view .rounded-full .text-sm {
        font-size: 11px !important;
    }
    
    /* Main headline responsive */
    #landing-view h1 {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
    }
    
    #landing-view h1.text-4xl,
    #landing-view h1.sm\\:text-5xl,
    #landing-view h1.lg\\:text-6xl {
        font-size: 1.75rem !important;
    }
    
    /* Subheadline */
    #landing-view p.text-lg,
    #landing-view p.md\\:text-xl {
        font-size: 0.9375rem !important;
        line-height: 1.6 !important;
    }
    
    /* NEXUS Data Panel */
    #landing-view .p-5.rounded-2xl {
        padding: 16px !important;
    }
    
    /* 6 Data Source Grid - 2 columns on mobile */
    #landing-view .grid.grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    
    #landing-view .grid.grid-cols-3 .p-3 {
        padding: 10px !important;
    }
    
    #landing-view .grid.grid-cols-3 .text-lg {
        font-size: 1rem !important;
    }
    
    #landing-view .grid.grid-cols-3 .text-\\[10px\\] {
        font-size: 9px !important;
    }
    
    /* Exchange icons smaller */
    #landing-view .flex.items-center.gap-2 img {
        width: 14px !important;
        height: 14px !important;
    }
    
    /* CTA Buttons - Stack on mobile */
    #landing-view .flex.flex-col.sm\\:flex-row {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    #landing-view .flex.flex-col.sm\\:flex-row > button,
    #landing-view .flex.flex-col.sm\\:flex-row > a {
        width: 100% !important;
        justify-content: center !important;
    }
    
    #landing-view .h-14 {
        height: 52px !important;
    }
    
    /* Trust indicators - wrap */
    #landing-view .flex.flex-wrap.gap-3 {
        gap: 8px !important;
        justify-content: center !important;
    }
    
    #landing-view .flex.flex-wrap .px-3.py-1\.5 {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }
}

/* ===== TELEGRAM PROMO CARD MOBILE ===== */
@media (max-width: 768px) {
    
    #telegramPromoCard {
        margin-top: 1.5rem !important;
    }
    
    /* Header text */
    #telegramPromoCard h3.text-xl,
    #telegramPromoCard h3.md\\:text-2xl {
        font-size: 1.25rem !important;
    }
    
    /* Card header */
    #telegramPromoCard .px-5.py-4 {
        padding: 14px !important;
    }
    
    #telegramPromoCard .w-12.h-12 {
        width: 44px !important;
        height: 44px !important;
    }
    
    /* Signal card internal */
    #telegramPromoCard .p-4.rounded-xl {
        padding: 12px !important;
    }
    
    /* Signal grid */
    #telegramPromoCard .grid.grid-cols-3 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }
    
    #telegramPromoCard .grid.grid-cols-3 .p-2 {
        padding: 8px 4px !important;
    }
    
    #telegramPromoCard .grid.grid-cols-3 .text-\\[11px\\] {
        font-size: 10px !important;
    }
    
    /* Stats grid */
    #telegramPromoCard .p-5 > .grid.grid-cols-3 {
        gap: 8px !important;
    }
    
    #telegramPromoCard .p-5 > .grid.grid-cols-3 .p-3 {
        padding: 10px 8px !important;
    }
    
    #telegramPromoCard .p-5 > .grid.grid-cols-3 .text-2xl {
        font-size: 1.25rem !important;
    }
    
    /* How it works bar */
    #telegramPromoCard .flex.items-center.gap-2.mb-5.p-3 {
        padding: 10px 8px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    
    #telegramPromoCard .flex.items-center.gap-2.mb-5.p-3 .w-7 {
        width: 24px !important;
        height: 24px !important;
    }
    
    #telegramPromoCard .flex.items-center.gap-2.mb-5.p-3 .text-\\[11px\\] {
        font-size: 10px !important;
    }
    
    #telegramPromoCard .flex.items-center.gap-2.mb-5.p-3 svg.w-4 {
        width: 12px !important;
        height: 12px !important;
    }
    
    /* Trust indicators */
    #telegramPromoCard .flex.items-center.justify-center.gap-4 {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
}

/* ===== NEXUS vs TRADITIONAL SECTION ===== */
@media (max-width: 768px) {
    
    section.py-20 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    
    /* Section header */
    section h2.text-3xl,
    section h2.md\\:text-5xl {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }
    
    section p.text-lg {
        font-size: 0.9375rem !important;
    }
    
    /* Comparison cards grid */
    .grid.grid-cols-1.lg\\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    /* Card padding */
    .grid .p-8.rounded-3xl {
        padding: 20px !important;
        border-radius: 16px !important;
    }
    
    .grid .p-8 h3.text-xl {
        font-size: 1.125rem !important;
    }
    
    /* Comparison items */
    .grid .space-y-4 .p-3 {
        padding: 10px !important;
    }
    
    /* Critical insight box */
    .text-center.p-8.rounded-3xl {
        padding: 20px !important;
    }
    
    .text-center.p-8 h3.text-2xl {
        font-size: 1.25rem !important;
    }
    
    .text-center.p-8 p.text-lg {
        font-size: 0.9375rem !important;
    }
}

/* ===== 4 TRADING MODES SECTION ===== */
@media (max-width: 768px) {
    
    /* Mode cards grid - 2 columns */
    .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    /* Mode card styling */
    .grid .p-6.rounded-2xl {
        padding: 14px !important;
        border-radius: 12px !important;
    }
    
    .grid .p-6 .w-12.h-12 {
        width: 40px !important;
        height: 40px !important;
        margin-bottom: 10px !important;
    }
    
    .grid .p-6 .text-2xl {
        font-size: 1.25rem !important;
    }
    
    .grid .p-6 h3.text-lg {
        font-size: 1rem !important;
    }
    
    .grid .p-6 .text-xs {
        font-size: 11px !important;
    }
    
    /* Badge position */
    .grid .p-6 .absolute.top-3.right-3 {
        top: 8px !important;
        right: 8px !important;
        font-size: 8px !important;
        padding: 4px 6px !important;
    }
    
    /* Stats text */
    .grid .p-6 .text-sm .flex.justify-between {
        font-size: 12px !important;
    }
    
    /* AI Validation info bar */
    .mt-10.p-6.rounded-2xl {
        padding: 16px !important;
        margin-top: 24px !important;
    }
    
    .mt-10 .flex.flex-col.md\\:flex-row {
        flex-direction: column !important;
        gap: 16px !important;
        text-align: center !important;
    }
    
    .mt-10 .flex.items-center.gap-4 {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    .mt-10 .flex.items-center.gap-6 {
        justify-content: center !important;
        gap: 24px !important;
    }
}

/* ===== SPOOFING / SAFETY FEATURES ===== */
@media (max-width: 768px) {
    
    /* 3 column grid to 1 column */
    .grid.grid-cols-1.md\\:grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .grid.grid-cols-1.md\\:grid-cols-3 .p-6 {
        padding: 16px !important;
    }
}

/* ===== PRICING COMPARISON SECTION ===== */
@media (max-width: 768px) {
    
    /* 3 column comparison to stack */
    .grid.grid-cols-1.lg\\:grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    .grid.grid-cols-1.lg\\:grid-cols-3 .p-6,
    .grid.grid-cols-1.lg\\:grid-cols-3 .p-5 {
        padding: 16px !important;
    }
    
    /* NEXUS card with top padding */
    .grid.grid-cols-1.lg\\:grid-cols-3 .pt-16 {
        padding-top: 48px !important;
    }
}

/* ===== 15+ GLOBAL BORSA SECTION ===== */
@media (max-width: 768px) {
    
    section.py-10 .max-w-6xl {
        padding: 0 12px !important;
    }
    
    section.py-10 .p-8.md\\:p-10 {
        padding: 16px !important;
    }
    
    /* Header */
    section.py-10 .text-3xl.md\\:text-4xl {
        font-size: 1.5rem !important;
    }
    
    section.py-10 .text-lg.md\\:text-xl {
        font-size: 1rem !important;
    }
    
    /* Exchange logos - wrap and smaller */
    section.py-10 .flex.items-center.justify-between.gap-3 {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
    }
    
    section.py-10 .flex.items-center.justify-between img.w-12 {
        width: 36px !important;
        height: 36px !important;
    }
    
    section.py-10 .w-12.h-12.rounded-lg {
        width: 36px !important;
        height: 36px !important;
    }
    
    /* Features pills */
    section.py-10 .flex.flex-wrap.items-center.justify-center {
        gap: 8px !important;
    }
    
    section.py-10 .px-3.py-1\.5.rounded-full {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }
}

/* ===== FAQ SECTION ===== */
@media (max-width: 768px) {
    
    #faq {
        padding: 3rem 16px !important;
    }
    
    #faq h2.text-3xl,
    #faq h2.md\\:text-4xl,
    #faq h2.lg\\:text-5xl {
        font-size: 1.5rem !important;
    }
    
    /* FAQ filter buttons */
    #faq .grid.md\\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    
    #faq .grid .px-4.py-3 {
        padding: 10px 8px !important;
        font-size: 12px !important;
    }
    
    /* FAQ items */
    #faq .faq-item {
        border-radius: 12px !important;
    }
    
    #faq .faq-item button.p-6 {
        padding: 14px !important;
    }
    
    #faq .faq-item .w-10.h-10 {
        width: 36px !important;
        height: 36px !important;
    }
    
    #faq .faq-item .font-semibold {
        font-size: 14px !important;
    }
    
    /* FAQ content */
    #faq .faq-item .px-6.pb-6 {
        padding: 0 14px 14px !important;
    }
    
    #faq .faq-item .grid.md\\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

/* ===== FOOTER SECTION ===== */
@media (max-width: 768px) {
    
    footer {
        padding: 2rem 16px !important;
    }
    
    footer .grid.grid-cols-2.md\\:grid-cols-4,
    footer .grid.md\\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }
    
    footer .flex.items-center.justify-between {
        flex-direction: column !important;
        gap: 16px !important;
        text-align: center !important;
    }
    
    footer .flex.items-center.gap-4 {
        justify-content: center !important;
    }
}

/* ===== MOBILE MENU IMPROVEMENTS ===== */
@media (max-width: 768px) {
    
    #mobile-menu {
        overflow-y: auto !important;
    }
    
    #mobile-menu .mobile-theme-switch {
        width: 44px !important;
        height: 24px !important;
        background: #e2e8f0 !important;
        border-radius: 12px !important;
        position: relative !important;
        cursor: pointer !important;
    }
    
    html.dark #mobile-menu .mobile-theme-switch {
        background: #6366f1 !important;
    }
    
    #mobile-menu .mobile-theme-switch .knob {
        position: absolute !important;
        top: 2px !important;
        left: 2px !important;
        width: 20px !important;
        height: 20px !important;
        background: white !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: transform 0.3s ease !important;
    }
    
    html.dark #mobile-menu .mobile-theme-switch .knob {
        transform: translateX(20px) !important;
    }
    
    #mobile-menu .mobile-theme-switch .knob svg {
        width: 12px !important;
        height: 12px !important;
    }
    
    html.dark #mobile-menu .mobile-theme-switch .theme-icon-sun {
        display: none !important;
    }
    
    html.dark #mobile-menu .mobile-theme-switch .theme-icon-moon {
        display: block !important;
    }
    
    html:not(.dark) #mobile-menu .mobile-theme-switch .theme-icon-moon {
        display: none !important;
    }
}

/* ===== PROFILE MODAL MOBILE ===== */
@media (max-width: 768px) {
    
    #profile-modal .max-w-lg {
        max-width: 95% !important;
        margin: 16px !important;
    }
    
    #profile-modal .p-6 {
        padding: 16px !important;
    }
    
    #profile-modal .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

/* ===== AUTH MODAL MOBILE ===== */
@media (max-width: 768px) {
    
    #auth-modal .max-w-md {
        max-width: 95% !important;
        margin: 16px !important;
    }
    
    #auth-modal .p-8 {
        padding: 20px !important;
    }
}

/* ===== TOOLTIP FIXES FOR MOBILE ===== */
@media (max-width: 768px) {
    
    .tooltip-content {
        width: 280px !important;
        max-width: 90vw !important;
        left: auto !important;
        right: -10px !important;
        transform: none !important;
    }
    
    .tooltip-trigger:hover .tooltip-content {
        transform: translateY(-5px) !important;
    }
}

/* ===== BACKGROUND BLOBS - HIDE ON MOBILE ===== */
@media (max-width: 768px) {
    
    .fixed.inset-0.pointer-events-none.-z-10 {
        display: none !important;
    }
    
    /* Hero glow - smaller */
    .hero-glow {
        width: 300px !important;
        height: 300px !important;
    }
    
    /* Absolute positioned bg effects - smaller/hidden */
    section .absolute.w-96 {
        width: 200px !important;
        height: 200px !important;
    }
}

/* ===== SMALL MOBILE (< 360px) ===== */
@media (max-width: 360px) {
    
    /* Even smaller text */
    #landing-view h1 {
        font-size: 1.5rem !important;
    }
    
    /* Data grid single column */
    #landing-view .grid.grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Mode cards single column */
    .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-4 {
        grid-template-columns: 1fr !important;
    }
    
    /* FAQ buttons */
    #faq .grid.md\\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
}

/* ===== LANDSCAPE MOBILE ===== */
@media (max-width: 768px) and (orientation: landscape) {
    
    main.mt-16 {
        margin-top: 1rem !important;
    }
    
    section.py-20 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
}

/* ===== TABLET (769px - 1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {
    
    /* Keep 2 columns for mode cards */
    .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Hero side by side but smaller */
    #landing-view {
        gap: 2rem !important;
    }
    
    #landing-view h1 {
        font-size: 2rem !important;
    }
}

/* ===== ANIMATION PERFORMANCE ===== */
@media (prefers-reduced-motion: reduce) {
    
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    
    header,
    #mobile-menu,
    .fixed,
    button,
    .tooltip-trigger {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
}