/* ======= RESPONSIVE STYLES ======= */

/* Large Screens */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
    
    #hero-slider {
        height: 70vh;
    }
}

/* Medium Screens - Tablet & Small Laptops */
@media (max-width: 992px) {

    
    body {
        padding-top: calc(var(--header-height) + var(--top-header-height));
    }
    
    .section-title h1,
    .section-title h2 {
        font-size: 32px;
    }
    
    .skill-card, .advantage-card {
        padding: 25px 20px;
    }
    
    .lms-container, .community-container {
        flex-direction: column;
        gap: 30px;
    }
    
    .lms-image, .community-image {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
    }
    
    .journey-timeline-container img {
        max-width: 90%;
    }
    
    .testimonial-card {
        width: 300px;
    }
    
    .footer-upper-content {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    
    .footer-middle img {
        max-width: 80px;
    }
}

/* Medium Screens - Tablet & Small Laptops */
@media (max-width: 992px) and (min-width: 769px) {
    .desktop-nav ul li {
        margin: 0 10px;
    }
    
    .desktop-nav ul li a {
        font-size: 16px;
        line-height: 26px;
    }
    
    .logo img {
        max-width: 220px;
    }
    
    .desktop-login, .desktop-user-menu {
        margin-left: 20px;
    }
}

/* Tablet & Large Phone Screens */
@media (max-width: 768px) {
    /* Ensure top-header is visible on all screen sizes */
    #top-header {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Reduce padding in container - logo will move more to the left */
    .container {
        padding: 0 10px;
    }
    
    /* Header content and menu alignment */
    .header-content {
        position: relative;
    }
    
    /* Hide desktop navigation and show mobile navigation */
    .desktop-nav {
        display: none !important;
    }
    
    /* Show mobile navigation */
    .mobile-nav {
        display: block;
    }
    
    /* Mobile navigation styling */
    .mobile-nav {
        display: block !important;
        position: fixed;
        top: calc(var(--header-height) + var(--top-header-height));
        left: -100%;
        width: 80%;
        max-width: 320px;
        height: calc(100vh - var(--header-height) - var(--top-header-height));
        background-color: rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(10px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        transition: left 0.3s ease;
        z-index: 1002;
        overflow-y: auto;
        padding: 20px;
        pointer-events: auto !important;
    }
    
    .mobile-nav.open {
        left: 0;
    }
    
    /* Show mobile header elements in mobile view */
    .header-right-elements {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        pointer-events: auto !important;
        z-index: 2000;
    }
    
    /* Show mobile login button in header */
    .mobile-header-login {
        display: block !important;
        position: relative;
        z-index: 2000 !important;
        pointer-events: auto !important;
        margin-left: auto;
        cursor: pointer;
    }
    
    /* Remove mobile login from menu */
    .mobile-login-item {
        display: none !important;
    }
    
    /* Ensure the mobile menu toggle is visible and positioned correctly */
    .mobile-menu-toggle {
        display: flex !important;
        width: 40px;
        height: 40px;
        background-color: transparent;
        border: none;
        cursor: pointer;
        z-index: 1500;
        align-items: center;
        justify-content: center;
        padding: 0;
        margin-right: auto;
    }
    
    .mobile-menu-toggle i {
        font-size: 24px;
        color: var(--primary-color);
    }
    
    /* Mobile login button styling */
    .btn.mobile-header-login {
        font-size: 14px;
        padding: 6px 12px;
        height: min-content;
        position: relative;
        z-index: 2000;
        pointer-events: auto !important;
    }
    
    /* Mobile user toggle button styling */
    .mobile-user-toggle {
        display: inline-block !important;
        text-decoration: none !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        z-index: 2000 !important;
        position: relative;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        border: none !important;
        outline: none !important;
        background-color: #d45f1e !important;
        color: white !important;
        font-weight: bold !important;
        padding: 8px 15px !important;
        border-radius: 4px !important;
        font-size: 14px !important;
    }
    
    .mobile-user-toggle:hover,
    .mobile-user-toggle:focus,
    .mobile-user-toggle:active {
        background-color: #b84a1a !important;
        color: white !important;
        text-decoration: none !important;
        transform: translateY(-1px);
    }
    
    /* Hide desktop login button */
    .desktop-login, .desktop-user-menu {
        display: none !important;
    }
    
    /* Special handling for mobile login display */
    @media (max-width: 768px) {
        /* Hide desktop-login on mobile completely */
        .desktop-user-menu {
            display: none !important;
        }
        
        .desktop-login {
            display: none !important;
        }
    }
    
    /* Additional overlay styling */
    .overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        z-index: 900;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        pointer-events: none !important;
    }
    
    .overlay.active {
        opacity: 1;
        visibility: visible;
        pointer-events: none !important;
    }
    
    /* Prevent overlay clicks when menu is open */
    body.menu-open .mobile-nav {
        pointer-events: auto;
        z-index: 1002;
    }
    
    /* Keep overlay behind when menu is clicked */
    .mobile-nav.open ~ .overlay {
        z-index: 999;
    }
    
    /* Preserve logo properties on mobile screen */
    .logo {
        padding-left: 0;
        margin-left: 0;
    }
    
    .logo img {
        height: auto;
        width: 180px;
        max-width: 70%;
    }
    
    body.menu-open {
        overflow: hidden;
    }
    
    /* Top-level mobile menu items */
    .mobile-nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
        pointer-events: auto !important;
        position: relative;
        z-index: 2;
    }
    
    .mobile-nav > ul > li {
        border-bottom: 1px solid #eee;
        position: relative;
        z-index: 2;
    }
    
    /* Mobile menu headers with larger click area */
    .mobile-nav ul li a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 15px;
        color: #333;
        text-decoration: none;
        font-weight: 500;
        width: 100%;
        box-sizing: border-box;
        position: relative;
        z-index: 3;
        cursor: pointer;
        pointer-events: auto !important;
        background-color: transparent;
    }
    
    /* Indicate expandable menu items */
    .mobile-nav .has-submenu > a {
        position: relative;
        cursor: pointer;
        z-index: 3;
    }
    
    /* Ok simgesi stili */
    .mobile-submenu-toggle {
        transition: transform 0.3s ease;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #666;
        cursor: pointer;
        position: relative;
        z-index: 4;
        pointer-events: auto !important;
    }
    
    .mobile-submenu-toggle.active {
        transform: rotate(180deg);
        color: var(--primary-color);
    }
    
    #hero-slider {
        display: none !important;
    }
    
    #hero-slider-mobile {
        display: block !important;
        height: 95vw; /* Mobile image aspect ratio: 945/1035 = 0.913, so height = width * 0.913 ≈ 95vw */
        max-height: 95vh;
        min-height: 400px;
        z-index: 2; /* Ensure it's above other elements */
    }
    
    /* Force mobile images to be visible */
    #hero-slider-mobile .slide {
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
    }
    
    #hero-slider-mobile .slide.active {
        opacity: 1;
    }
    
    #hero-slider-mobile .slide.active img,
    #hero-slider-mobile .slide.active picture,
    #hero-slider-mobile .slide.active picture img {
        opacity: 1 !important;
        visibility: visible !important;
        object-fit: contain !important;
    }
    
    /* Mobile slider controls */
    #hero-slider-mobile .slider-arrow {
        width: 40px;
        height: 40px;
        font-size: 20px;
        z-index: 20;
    }
    
    #hero-slider-mobile .slider-dots {
        position: absolute;
        bottom: 15px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 20;
        display: flex;
        gap: 8px;
    }
    
    #hero-slider-mobile .slider-dot {
        width: 10px;
        height: 10px;
        background-color: rgba(255, 255, 255, 0.6);
        border-radius: 50%;
        cursor: pointer;
    }
    
    #hero-slider-mobile .slider-dot.active {
        background-color: var(--primary-color);
    }
    
    /* Why Soft Skills Matter - Make list vertical on mobile */
    #skills .lms-content > div {
        flex-direction: column;
    }
    
    #skills .lms-content > div > div {
        width: 100% !important;
        margin-bottom: 20px;
    }
    
    /* Programs Grid - Make cards vertical and centered on mobile */
    .programs-grid {
        grid-template-columns: 1fr !important;
        max-width: 350px;
        margin: 0 auto;
    }
    
    .program-card {
        min-height: 250px;
    }
    
    /* Center the Explore LMS Features button and increase bottom margin */
    .preview-lms-btn {
        display: block !important;
        margin: 30px auto 40px !important;
        max-width: 250px;
        text-align: center;
    }
    
    /* Make The Owlypia Journey more proportional on mobile */
    .journey-timeline-container p {
        font-size: 17px !important;
        margin-bottom: 40px !important;
    }
    
    .timeline-stage {
        margin-bottom: 35px !important;
        display: flex;
        align-items: center;
    }
    
    .timeline-content {
        padding-left: 15px;
    }
    
    .timeline-content h3 {
        margin-bottom: 5px;
        font-size: 18px;
    }
    
    .timeline-content p {
        min-height: auto !important;
        padding: 12px !important;
        margin: 0 !important;
        width: 100% !important;
    }
    
    /* Building Skills for Success - Display cards in 2x2 grid on mobile */
    .skills-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    
    /* Make the text size smaller to fit better on mobile */
    .skill-card h3 {
        font-size: 15px !important;
    }
    
    /* The Owlypia Journey - Improve spacing between icons and text */
    .timeline-content {
        padding-left: 25px !important;
    }
    
    .timeline-stage {
        margin-bottom: 35px !important;
        width: 100% !important;
    }
    
    .timeline-content p {
        width: 100% !important;
        max-width: 320px !important;
        min-height: auto !important;
    }
    
    /* Why Soft Skills Matter - Make list vertical on mobile */
    #skills .lms-content > div {
        flex-direction: column;
    }
    
    /* Fix cards in challenge-zone.php for mobile display */
    #included .feature-item {
        flex: 0 1 100% !important;
        margin-bottom: 15px !important;
    }
    
    /* Improve alignment in feature items */
    .feature-item {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 20px 15px !important;
    }
    
    .feature-item .feature-icon {
        margin-right: 0 !important;
        margin-bottom: 15px !important;
    }
    
    /* Make cards in Why Join the Challenge Zone stack vertically on mobile */
    #outcomes [style*="display: flex; gap: 15px"] {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    #outcomes [style*="display: flex; gap: 15px"] > div {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto 15px auto !important;
        padding: 25px 15px !important;
    }
    
    /* Make SUBJECTS cards display in rows of 2 on mobile in discover.php */
    .subjects-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    
    .subjects-grid .subject-item {
        flex: 0 0 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 15px 10px !important;
    }
    
    .subjects-grid .subject-item p {
        font-size: 0.8rem !important;
        line-height: 1.3 !important;
    }
    
    .subjects-grid .subject-item img {
        width: 110px !important;
        height: 110px !important;
    }
}

/* Above 768px - Desktop styles */
@media (min-width: 769px) {
    .mobile-nav, .mobile-menu-toggle, .mobile-login-item {
        display: none !important;
    }
    
    .desktop-nav {
        display: flex;
        flex: 1;
    }
    
    .desktop-nav ul {
        display: flex;
        justify-content: center;
        flex: 1;
    }
    
    /* Desktop navigation refinements */
    .header-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .logo {
        flex: 0 0 auto;
    }
    
    .desktop-login, .desktop-user-menu {
        flex: 0 0 auto;
    }
}

/* Small Phone Screens */
@media (max-width: 576px) {
    :root {
        /* Header height remains consistent */
        --top-header-height: 30px;
    }
    
    /* Further reduce padding in container */
    .container {
        padding: 0 10px;
    }
    
    .logo img {
        padding-top: 5px;
        width: auto;
        height: auto;
    }
    
    .mobile-menu-toggle {
        width: 28px;
        height: 24px;
    }
    
    /* Top Header */
    #top-header {
        padding: 2px 2px;
    }

    .top-header-socials a {
        margin-left: 10px;
        font-size: 14px;
    }

    /* Sections */
    section {
        padding: 40px 0;
    }

    .section-title h1,
    .section-title h2 {
        font-size: 24px;
    }

    .section-title p {
        font-size: 16px;
    }

    /* Slider */
    .slider-arrow {
        width: 30px;
        height: 30px;
        font-size: 18px;
    }

    .slider-dots {
        bottom: 10px;
    }

    .slider-dot {
        width: 8px;
        height: 8px;
    }

    /* Cards */
    .skill-card, .advantage-card {
        padding: 20px 15px;
    }

    .skill-icon, .advantage-icon {
        font-size: 30px;
        margin-bottom: 15px;
    }

    .skill-card h3 {
        font-size: 18px;
    }

    /* Journey */
    .timeline-content h3 {
        font-size: 18px;
    }

    /* Testimonials */
    .testimonial-card {
        padding: 20px 15px;
    }

    .testimonial-image {
        width: 50px;
        height: 50px;
    }

    .testimonial-author-info h3 {
        font-size: 16px;
    }

    /* Social */
    .social-links {
        gap: 15px;
    }

    .social-link {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    /* Footer */
    .footer-upper {
        padding: 30px 0;
    }

    .footer-lower {
        padding: 20px 0;
    }

    .footer-left img, .footer-right img {
        height: 50px;
    }

    .footer-left p, .footer-right p {
        font-size: 14px;
    }

    /* Go Top Button */
    #go-top-btn {
        width: 35px;
        height: 35px;
        line-height: 35px;
        font-size: 16px;
        right: 15px;
        bottom: 15px;
    }
    
    /* Mobile header login adjustments for very small screens */
    .mobile-header-login {
        padding: 6px 14px;
        font-size: 14px;
        margin-right: 10px;
    }

    .footer-upper-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .footer-left, .footer-middle, .footer-right {
        grid-column: 1;
    }
    
    .footer-left img, .footer-middle img, .footer-right img {
        max-width: 70%;
    }
    
    .footer-left p, .footer-right p {
        font-size: 14px;
    }

    /* Fix for narrow screens (around 400px width) */
    .skills-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        max-width: 95% !important;
        margin: 0 auto !important;
    }
    
    .skill-card {
        width: 100% !important;
        padding: 10px 5px !important;
        margin: 0 !important;
    }
    
    .skill-card h3 {
        font-size: 13px !important;
        line-height: 1.3 !important;
        margin-top: 5px !important;
    }
    
    .skill-icon {
        font-size: 1.4rem !important;
        margin-bottom: 5px !important;
    }
    
    /* Make container fit better */
    .container {
        padding: 0 5px !important;
    }
}

/* Special adjustments for very narrow screens */
@media (max-width: 420px) {
    .skills-grid {
        gap: 6px !important;
    }
    
    .skill-card {
        padding: 8px 3px !important;
    }
    
    .skill-icon {
        font-size: 1.3rem !important;
        margin-bottom: 3px !important;
    }
    
    .skill-card h3 {
        font-size: 12px !important;
        white-space: normal !important;
        overflow: visible !important;
    }
}

/* Extra Small Phone Screens */
@media (max-width: 480px) {
    /* Ensure top-header is visible on all screen sizes */
    #top-header {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Make program cards even more compact */
    .programs-grid {
        max-width: 280px;
    }
    
    .program-card {
        min-height: 220px;
    }
    
    .program-content h3 {
        font-size: 20px;
    }
    
    .program-content p {
        font-size: 16px;
    }
    
    /* Adjust skills grid for very small screens */
    .skills-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .skill-card {
        padding: 10px 5px !important;
    }
    
    .skill-card h3 {
        font-size: 14px !important;
    }
    
    /* The Owlypia Journey - Make containers wider on small screens */
    .timeline-content p {
        width: 100% !important;
        max-width: 240px !important;
    }
    
    /* Further optimize the Challenge Zone cards */
    .feature-item {
        padding: 15px 10px !important;
    }
    
    /* Why Join the Challenge Zone cards for smallest screens */
    #outcomes [style*="display: flex; gap: 15px"] > div {
        padding: 20px 10px !important;
    }
    
    #outcomes [style*="display: flex; gap: 15px"] > div p {
        font-size: 15px !important;
    }
    
    /* Further optimize SUBJECTS cards for very small screens */
    .subjects-grid {
        gap: 10px !important;
    }
    
    .subjects-grid .subject-item {
        padding: 10px 5px !important;
    }
    
    .subjects-grid .subject-item img {
        width: 90px !important;
        height: 90px !important;
        margin-bottom: 10px !important;
    }
    
    .subjects-grid .subject-item p {
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
    }
}

/* ======= PRINT STYLES ======= */
@media print {
    body {
        padding-top: 0;
        color: #000;
        background: #fff;
    }

    #top-header, header, .mobile-menu-toggle, #hero-slider, #hero-slider-mobile, 
    .slider-arrow, .slider-dots, .social-links, #go-top-btn, .overlay {
        display: none !important;
    }

    .container {
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 0;
    }

    section {
        padding: 20px 0;
        page-break-inside: avoid;
    }

    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }

    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    a {
        text-decoration: underline;
        color: #000;
    }

    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 90%;
    }

    .footer-upper {
        background-color: #fff !important;
        color: #000 !important;
        padding: 20px 0;
    }

    .footer-lower {
        background-color: #fff !important;
        color: #000 !important;
        border-top: 1px solid #ddd;
        padding: 10px 0;
    }

    .footer-upper-content {
        display: block;
    }

    .footer-left, .footer-right {
        margin-bottom: 20px;
    }

    .footer-left p, .footer-right p, .footer-copyright-text, .footer-policy-links {
        color: #000 !important;
    }

    .footer-policy-links a {
        color: #000 !important;
    }
}

/* ======= UTILITY CLASSES ======= */
.text-center {
    text-align: center;
}

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }

.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }

.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }

.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }

.flex-column { flex-direction: column !important; }
.justify-content-center { justify-content: center !important; }
.align-items-center { align-items: center !important; }
.flex-wrap { flex-wrap: wrap !important; }

.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }

.rounded { border-radius: 0.25rem !important; }
.rounded-circle { border-radius: 50% !important; }

.shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; }
.shadow { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; }
.shadow-lg { box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; }

/* Hide mobile header login by default */
.mobile-header-login {
    display: none;
}

/* Header right elements container */
.header-right-elements {
    display: none;
    align-items: center;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 768px) {
    /* Show mobile header elements in mobile view */
    .header-right-elements {
        display: flex;
    }
    
    /* Show mobile login button in header */
    .mobile-header-login {
        display: block;
    }
    
    /* Remove mobile login from menu */
    .mobile-login-item {
        display: none !important;
    }
    
    /* Ensure the mobile menu toggle is visible and positioned correctly */
    .mobile-menu-toggle {
        display: flex !important;
        width: 40px;
        height: 40px;
        background-color: transparent;
        border: none;
        cursor: pointer;
        z-index: 1500;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    
    .mobile-menu-toggle i {
        font-size: 24px;
        color: var(--primary-color);
    }
    
    /* Mobile login button styling */
    .btn.mobile-header-login {
        font-size: 14px;
        padding: 6px 12px;
        height: min-content;
    }
    
    /* Overlay styling */
    .overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        z-index: 900;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    
    .overlay.active {
        opacity: 1;
    }
}

/* Desktop user submenu in mobile view */
.desktop-user-submenu.show {
    opacity: 1;
    visibility: visible;
    position: static;
    box-shadow: none;
    transform: none;
    background-color: #f9f9f9;
    width: 100%;
    margin-top: 10px;
}

.desktop-user-submenu li a {
    padding: 10px 15px;
}

body.menu-open {
    overflow: hidden;
}

/* Desktop user menu in mobile view */
.desktop-user-menu {
    display: none !important;
}

/* Submenu stilleri */
.mobile-nav ul li .submenu {
    display: none;
    background-color: #f9f9f9;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1005;
    pointer-events: auto !important;
    overflow: visible;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
}

.mobile-nav ul li .submenu.show {
    display: block;
}

.mobile-nav ul li .submenu li {
    pointer-events: auto !important;
    position: relative;
    z-index: 3;
}

.mobile-nav ul li .submenu li a {
    padding: 10px 15px;
    padding-left: 25px;
    background-color: transparent;
    pointer-events: auto !important;
    position: relative;
    z-index: 4;
    cursor: pointer;
}

/* Alt menü hover efekti */
.mobile-nav ul li .submenu li a:hover {
    background-color: rgba(0,0,0,0.05);
}

/* Third level menu */
.mobile-nav ul li .submenu .third-level {
    z-index: 4;
    background-color: #f0f0f0;
}

.mobile-nav ul li .submenu .third-level li a {
    padding-left: 35px;
    z-index: 5;
}

/* Üst seviye mobil menü ögeleri */
.mobile-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: auto !important;
    position: relative;
    z-index: 2;
}

.mobile-nav > ul > li {
    border-bottom: 1px solid #eee;
    position: relative;
    z-index: 2;
}

/* Mobil menü başlıkları daha büyük tıklama alanı */
.mobile-nav ul li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    color: #333;
    text-decoration: none;
    font-weight: 500;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 3;
    cursor: pointer;
    pointer-events: auto !important;
    background-color: transparent;
}

/* Açılabilir menü öğelerini belirt */
.mobile-nav .has-submenu > a {
    position: relative;
    cursor: pointer;
    z-index: 3;
}

/* Ok simgesi stili */
.mobile-submenu-toggle {
    transition: transform 0.3s ease;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    cursor: pointer;
    position: relative;
    z-index: 4;
    pointer-events: auto !important;
}

/* Mobile navigation styling */
.mobile-nav {
    display: block;
    position: fixed;
    top: calc(var(--header-height) + var(--top-header-height));
    left: -100%;
    width: 80%;
    max-width: 320px;
    height: calc(100vh - var(--header-height) - var(--top-header-height));
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: left 0.3s ease;
    z-index: 1002;
    overflow-y: auto;
    padding: 20px;
    pointer-events: auto !important;
}

/* Bu kuralların önemini vurgulayalım */
.mobile-nav.open,
.mobile-nav.open *,
.mobile-nav.open ul,
.mobile-nav.open li,
.mobile-nav.open a,
.mobile-nav.open .submenu,
.mobile-nav.open .submenu.show,
.mobile-nav.open .submenu li,
.mobile-nav.open .submenu a {
    pointer-events: auto !important;
}


    /* Mobile menu styling */
    .mobile-nav .menu-item-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    
    .mobile-nav .menu-link {
        flex: 1;
        text-decoration: none;
        color: #333;
        padding: 12px 15px;
        display: block;
        font-weight: 500;
    }
    
    .mobile-nav .submenu-toggle-btn {
        background: none;
        border: none;
        padding: 5px 15px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .mobile-nav .mobile-submenu-toggle {
        transition: transform 0.3s ease;
    }
    
    .mobile-nav .mobile-submenu-toggle.active {
        transform: rotate(180deg);
    }
    
    /* Normal menu items */
    .mobile-nav .has-submenu > a {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 15px;
        text-decoration: none;
        color: #333;
        font-weight: 500;
    }
    
    /* Make sure submenus stay hidden by default */
    .mobile-nav .submenu {
        display: none;
    }
    
    .mobile-nav .submenu.show {
        display: block;
    }
    
    /* Submenu background color - Light orange */
    .mobile-nav .submenu {
        background-color: #FFE8D6; /* Açık turuncu renk */
        border-radius: 5px;
        margin: 5px 10px 10px 10px;
    }
    
    /* Third level submenu background color - slightly darker */
    .mobile-nav .submenu.third-level {
        background-color: #FFD9B8; /* Biraz daha koyu turuncu */
        margin-left: 15px;
        margin-right: 5px;
    }
    
    /* Submenu items styling */
    .mobile-nav .submenu li a {
        padding: 10px 15px;
        display: block;
        border-bottom: 1px solid rgba(255, 255, 255, 0.7);
    }
    
    /* Last item in submenu - no border */
    .mobile-nav .submenu li:last-child a {
        border-bottom: none;
    }

#hero-slider-mobile {
    display: none;
    position: relative;
    width: 100%;
    height: 95vw; /* Mobile image aspect ratio: 945/1035 = 0.913, so height = width * 0.913 ≈ 95vw */
    max-height: 95vh;
    min-height: 400px;
    overflow: hidden;
    margin-top: -20px;
}

#hero-slider-mobile .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    will-change: opacity; /* Performance optimization */
    z-index: 1;
}

#hero-slider-mobile .slide.active {
    opacity: 1;
    z-index: 2;
}

#hero-slider-mobile .slide img,
#hero-slider-mobile .slide picture {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

#hero-slider-mobile .slide picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#hero-slider-mobile .slide picture img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 768px) {
    #hero-slider {
        display: none !important;
    }
    
    #hero-slider-mobile {
        display: block !important;
        height: 50vh; /* Increase height for better visibility */
        min-height: 350px;
    }
}

/* Add lazy loading styles to improve perceived performance */
.lazy-load {
    opacity: 0;
    transition: opacity 0.5s;
}

.lazy-load.loaded {
    opacity: 1;
}

/* Force hide desktop login on mobile with !important at multiple breakpoints */
@media (max-width: 768px), (max-device-width: 768px) {
    .desktop-user-menu,
    .desktop-login,
    .desktop-user-menu * {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        top: -9999px !important;
        left: -9999px !important;
    }
}

/* Make sure desktop login is visible on desktop */
@media (min-width: 769px) {
    .desktop-user-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        height: auto !important;
        width: auto !important;
        overflow: visible !important;
        position: relative !important;
    }
    
    .desktop-login {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}