/* ============================================
   Responsive Styles - Mobile Navbar
   ============================================ */

/* Tablet and below */
@media (max-width: 968px) {

    /* Show hamburger menu */
    .mobile-menu-toggle {
        display: flex;
    }

    /* Hide desktop menu by default */
    .nav-menu {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        background: var(--bg-primary);
        flex-direction: column;
        align-items: stretch;
        padding: 0;
        box-shadow: none;
        border-top: 1px solid var(--border-color);
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        gap: 0;
        z-index: 1001;
        display: flex;
    }

    /* Active state - menu open */
    .nav-menu.active {
        max-height: calc(100vh - 70px);
        opacity: 1;
        visibility: visible;
        overflow-y: auto;
        padding: var(--spacing-md);
        /* Scrollbar gizle - sadece ana sayfa scrollbar'ı görünsün */
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE and Edge */
    }

    /* Chrome, Safari, Opera için scrollbar gizle */
    .nav-menu.active::-webkit-scrollbar {
        display: none;
    }

    /* Menu items */
    .nav-menu li {
        width: 100%;
        margin-bottom: var(--spacing-xs);
    }

    .nav-menu li:last-child {
        margin-bottom: 0;
    }

    /* Nav links */
    .nav-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--spacing-md);
        width: 100%;
        border-radius: 12px;
        transition: all var(--transition-fast);
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
    }

    .nav-link:hover {
        background: var(--bg-tertiary);
        border-color: var(--color-primary);
        color: var(--color-primary);
        transform: translateX(4px);
    }

    .nav-link.active {
        background: linear-gradient(135deg, rgba(56, 189, 248, 0.12) 0%, rgba(99, 102, 241, 0.1) 100%);
        border-color: var(--color-primary);
        color: var(--color-primary);
        border-left: 4px solid var(--color-primary);
    }

    .nav-link.active::after {
        display: none;
    }

    /* Dropdown trigger */
    .dropdown-trigger {
        width: 100%;
        justify-content: space-between;
    }

    .dropdown-icon {
        transition: transform var(--transition-base);
    }

    .nav-item-dropdown.active .dropdown-icon {
        transform: rotate(180deg);
    }

    /* Dropdown menu in mobile - hidden by default */
    .dropdown-menu {
        position: static !important;
        width: 100% !important;
        margin-top: var(--spacing-xs);
        margin-left: 0;
        transform: none !important;
        display: none !important;
        opacity: 1;
        visibility: visible;
        max-height: none;
        overflow: visible;
        box-shadow: none;
        border: none;
        border-radius: 8px;
        transition: none;
        padding: 0;
    }

    /* Dropdown menu active state - Premium tasarım - TEK KUTU */
    .nav-item-dropdown.active .dropdown-menu {
        display: block !important;
        padding: 0 !important;
        background: linear-gradient(135deg,
                rgba(8, 10, 22, 0.98) 0%,
                rgba(12, 14, 28, 0.98) 55%,
                rgba(16, 18, 36, 0.98) 100%) !important;
        border: 1px solid rgba(56, 189, 248, 0.18) !important;
        border-radius: 16px !important;
        margin-top: var(--spacing-xs);
        margin-bottom: 0;
        transition: none;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
        backdrop-filter: blur(14px) saturate(160%) !important;
        -webkit-backdrop-filter: blur(14px) saturate(160%) !important;

        /* Scroll bu kutunun içinde olmalı */
        max-height: calc(100vh - 210px);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(56, 189, 248, 0.28) rgba(2, 6, 23, 0.25);
    }

    .nav-item-dropdown.active .dropdown-menu::-webkit-scrollbar {
        width: 8px;
    }

    .nav-item-dropdown.active .dropdown-menu::-webkit-scrollbar-track {
        background: transparent;
    }

    .nav-item-dropdown.active .dropdown-menu::-webkit-scrollbar-thumb {
        background: rgba(56, 189, 248, 0.22);
        border-radius: 999px;
        border: 2px solid rgba(2, 6, 23, 0.35);
    }

    .nav-item-dropdown.active .dropdown-menu::-webkit-scrollbar-thumb:hover {
        background: rgba(56, 189, 248, 0.34);
    }

    /* Mobilde dropdown-menu içindeki tüm padding'leri kaldır - tek kutu */
    .nav-item-dropdown.active .dropdown-menu>* {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Scroll artık dropdown yerine menüde (nav-menu.active) */

    .dropdown-menu::before {
        display: none;
    }

    /* Dropdown header - Premium tasarım */
    .dropdown-header {
        padding: var(--spacing-lg) var(--spacing-md) !important;
        background: linear-gradient(135deg,
                rgba(10, 10, 18, 0.9) 0%,
                rgba(12, 14, 28, 0.92) 55%,
                rgba(16, 18, 36, 0.94) 100%) !important;
        border-bottom: 1px solid rgba(56, 189, 248, 0.16) !important;
        backdrop-filter: blur(10px) saturate(150%);
        -webkit-backdrop-filter: blur(10px) saturate(150%);
    }

    .dropdown-title-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 1.5rem !important;
        background:
            radial-gradient(circle at 30% 30%, rgba(56, 189, 248, 0.25) 0%, transparent 55%),
            radial-gradient(circle at 70% 70%, rgba(99, 102, 241, 0.22) 0%, transparent 55%),
            linear-gradient(135deg, rgba(12, 14, 28, 0.95) 0%, rgba(16, 18, 36, 0.9) 55%, rgba(10, 10, 18, 0.92) 100%) !important;
        box-shadow:
            0 8px 22px rgba(0, 0, 0, 0.35),
            0 0 18px rgba(56, 189, 248, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.3),
            inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
        border: 2px solid rgba(255, 255, 255, 0.25) !important;
    }

    .dropdown-title {
        font-size: 1.375rem !important;
        gap: var(--spacing-md) !important;
        color: rgba(255, 255, 255, 0.95) !important;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    }

    .dropdown-subtitle {
        font-size: 0.875rem !important;
        flex-wrap: wrap !important;
        color: rgba(226, 232, 240, 0.9) !important;
    }

    .dropdown-subtitle-badge {
        font-size: 0.75rem !important;
        padding: 0.375rem 0.75rem !important;
        background: linear-gradient(135deg,
                rgba(56, 189, 248, 0.14) 0%,
                rgba(99, 102, 241, 0.12) 100%) !important;
        border: 1px solid rgba(56, 189, 248, 0.26) !important;
        color: rgba(224, 242, 254, 0.92) !important;
        box-shadow:
            0 2px 8px rgba(99, 102, 241, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    }

    /* Dropdown content - Tek kutu içinde */
    .dropdown-content {
        flex-direction: column;
        min-height: auto;
        padding: 0;
        background: transparent !important;
    }

    .dropdown-sidebar {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(56, 189, 248, 0.14) !important;
        padding: var(--spacing-sm) 0 !important;
        background: rgba(30, 41, 59, 0.4) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .dropdown-category-trigger {
        padding: var(--spacing-md) var(--spacing-lg) !important;
        cursor: pointer;
        user-select: none;
        color: rgba(226, 232, 240, 0.8) !important;
    }

    .dropdown-category-trigger::before {
        background: linear-gradient(135deg,
                rgba(56, 189, 248, 1) 0%,
                rgba(99, 102, 241, 1) 100%) !important;
    }

    /* Disable hover on mobile - aktif state kullan */
    .dropdown-category-trigger:hover,
    .dropdown-category-trigger.active {
        background: rgba(56, 189, 248, 0.1) !important;
        color: rgba(224, 242, 254, 0.98) !important;
    }

    .category-trigger-arrow {
        color: rgba(148, 163, 184, 0.6) !important;
    }

    .dropdown-category-trigger.active .category-trigger-arrow,
    .dropdown-category-trigger:hover .category-trigger-arrow {
        color: rgba(224, 242, 254, 0.98) !important;
    }

    .dropdown-panel {
        background: transparent !important;
        padding: var(--spacing-md) !important;
    }

    .dropdown-link {
        color: rgba(226, 232, 240, 0.8) !important;
    }

    .dropdown-link::before {
        background: linear-gradient(135deg,
                rgba(56, 189, 248, 1) 0%,
                rgba(99, 102, 241, 1) 100%) !important;
    }

    .dropdown-link:hover {
        background: rgba(56, 189, 248, 0.07) !important;
        color: rgba(224, 242, 254, 0.95) !important;
    }

    .dropdown-category-trigger.active {
        background: var(--bg-primary);
        color: var(--color-primary);
    }

    .dropdown-panel {
        min-height: auto;
        padding: var(--spacing-md);
        position: relative;
        overflow: visible;
    }

    .dropdown-category-content {
        /* Mobilde aktif olmayan içerik akışta yer kaplamasın */
        display: none;
        position: relative;
        width: 100%;
        transform: translateX(-12px);
        opacity: 0;
        pointer-events: none;
    }

    .dropdown-category-content.active {
        display: block;
        opacity: 1;
        transform: translateX(0);
        pointer-events: auto;
        width: 100%;
        transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .dropdown-category-list {
        grid-template-columns: 1fr;
        gap: var(--spacing-xs);
    }

    /* Mobilde ana menü scroll alabilir ama dropdown kendi içinde scroll eder */
    .nav-menu.active {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }

    /* Mobilde scroll: dropdown-menu kendi içinde scroll alır */
}

/* Mobile - smaller screens */
@media (max-width: 640px) {
    .navbar .container {
        padding: var(--spacing-sm);
    }

    .logo-icon {
        width: 28px;
        height: 28px;
    }

    .nav-brand .logo {
        font-size: 1.5rem;
    }

    .nav-menu {
        top: 70px;
        padding: var(--spacing-sm);
    }

    .nav-link {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.9rem;
    }

    .dropdown-menu {
        margin-top: var(--spacing-xs);
    }

    .dropdown-header {
        padding: var(--spacing-lg) var(--spacing-md) !important;
        background: linear-gradient(135deg,
                rgba(10, 10, 18, 0.9) 0%,
                rgba(12, 14, 28, 0.92) 55%,
                rgba(16, 18, 36, 0.94) 100%) !important;
        border-bottom: 1px solid rgba(56, 189, 248, 0.16) !important;
    }

    .dropdown-title {
        font-size: 1.25rem !important;
        color: rgba(255, 255, 255, 0.95) !important;
    }

    .dropdown-title-icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.375rem !important;
    }

    .dropdown-subtitle {
        font-size: 0.8125rem !important;
        color: rgba(226, 232, 240, 0.9) !important;
    }

    .dropdown-subtitle-badge {
        font-size: 0.6875rem !important;
        padding: 0.25rem 0.625rem !important;
    }

    .dropdown-panel {
        padding: var(--spacing-md) !important;
        background: transparent !important;
    }

    .dropdown-sidebar {
        background: rgba(30, 41, 59, 0.4) !important;
        border-bottom: 1px solid rgba(56, 189, 248, 0.14) !important;
    }

    /* Hero Banner Container - Mobil Optimizasyon (Ana sayfa ile uyumlu) */
    .hero-banner .container {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--spacing-md) !important;
        padding: var(--spacing-md) var(--spacing-md) !important;
        width: 100% !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    .hero-content {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        order: 2;
    }

    .hero-visual {
        margin-top: 0 !important;
        margin-bottom: var(--spacing-md) !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        order: 1;
        padding: 0 !important;
    }

    .hero-visual-runtime {
        min-height: 260px !important;
        margin-bottom: var(--spacing-sm) !important;
    }

    .code-preview {
        border-radius: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        margin: 0 !important;
    }

    .code-header {
        padding: var(--spacing-sm) var(--spacing-md) !important;
        flex-wrap: wrap;
        gap: var(--spacing-xs);
        box-sizing: border-box !important;
    }

    .code-title {
        font-size: 0.8125rem !important;
    }

    .code-content {
        padding: var(--spacing-sm) var(--spacing-md) !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .code-content pre {
        font-size: 0.8125rem !important;
        line-height: 1.5 !important;
        white-space: pre;
        word-wrap: normal;
        overflow-wrap: normal;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    .code-dots {
        gap: 0.375rem;
    }

    .dot {
        width: 10px;
        height: 10px;
    }

    .hero-actions {
        flex-direction: column !important;
        gap: var(--spacing-sm) !important;
        margin-bottom: var(--spacing-md) !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .btn {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: var(--spacing-md) var(--spacing-lg) !important;
        font-size: 0.9375rem !important;
        justify-content: center !important;
    }
}