/* ========================================
   ZRN Teknoloji - Professional Responsive CSS
   Modern, Clean & Optimized Header Solution
======================================== */

/* =============================================================================
   LOGO OPTIMIZATION - Clean & Efficient
============================================================================= */

/* Desktop Logo - Natural Sizing */
.logo-header img {
    height: auto;
    width: auto;
    max-height: 50px;
    object-fit: contain;
    transition: all 0.3s ease;
}

/* Responsive Logo Scaling */
@media (max-width: 1199px) {
    .logo-header img { max-height: 45px; }
}

@media (max-width: 991px) {
    .logo-header img { max-height: 40px; }
}

@media (max-width: 767px) {
    .logo-header img { max-height: 35px; }
}

@media (max-width: 480px) {
    .logo-header img { max-height: 32px; }
}

/* =============================================================================
   MOBILE HEADER ALIGNMENT - Perfect Logo & Hamburger Positioning
============================================================================= */

@media (max-width: 991px) {
    .main-bar {
        padding: 0 !important;
        min-height: 70px !important;
        display: flex !important;
        align-items: center !important;
        position: relative !important;
    }
    
    .main-bar .container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0 15px !important;
        min-height: 70px !important;
        margin: 0 auto !important;
    }
    
    .logo-header {
        display: flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        height: 70px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .logo-header-inner {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
        width: 100% !important;
    }
    
    #mobile-side-drawer {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        width: 44px !important;
        height: 70px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        position: relative !important;
        z-index: 99999 !important;
    }
}

@media (max-width: 767px) {
    .main-bar {
        min-height: 65px !important;
    }
    
    .main-bar .container {
        min-height: 65px !important;
        padding: 0 12px !important;
    }
    
    .logo-header {
        height: 65px !important;
    }
    
    #mobile-side-drawer {
        width: 40px !important;
        height: 65px !important;
    }
}

@media (max-width: 480px) {
    .main-bar {
        min-height: 60px !important;
    }
    
    .main-bar .container {
        min-height: 60px !important;
        padding: 0 10px !important;
    }
    
    .logo-header {
        height: 60px !important;
    }
    
    #mobile-side-drawer {
        width: 36px !important;
        height: 60px !important;
    }
}

@media (max-width: 320px) {
    .main-bar {
        min-height: 55px !important;
    }
    
    .main-bar .container {
        min-height: 55px !important;
        padding: 0 8px !important;
    }
    
    .logo-header {
        height: 55px !important;
    }
    
    #mobile-side-drawer {
        width: 32px !important;
        height: 55px !important;
    }
}

/* =============================================================================
   SOCIAL MEDIA ICONS - Modern Flexbox Fix
============================================================================= */

/* Fix social icons vertical alignment */
.extra-nav {
    display: flex !important;
    align-items: center !important;
    height: auto !important;
    margin-right: 0 !important;
}

.extra-nav .extra-cell {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    vertical-align: unset !important;
}

.social-bx {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    list-style: none !important;
}

.social-bx li {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
}

.social-bx li a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    text-align: center !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    background: rgba(242,148,0,0.12) !important;
    color: var(--primary) !important;
}

.social-bx li a:hover {
    background: var(--primary) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
}

 /* Override social icon colors to primary brand color */
 .sx-f-social ul li a {
     color: var(--primary) !important;
 }
 .social-media-icons .social-link {
     color: #fff !important;
     background: transparent !important;
     border: 2px solid var(--primary) !important;
     border-radius: 50% !important;
 }

 /* Keep hover consistent: turn icons white on hover */
 .sx-f-social ul li a:hover {
     color: var(--white) !important;
 }
 .social-media-icons .social-link:hover {
     background: var(--primary) !important;
     color: var(--white) !important;
     border-color: var(--primary) !important;
     transform: translateY(-2px) !important;
 }

 /* Footer brand color & contrast overrides */
 .footer-dark.site-footer {
     /* Trendy geometric pattern over brand gradient */
     background:
         radial-gradient(circle at 20% 10%, rgba(255,255,255,0.18), rgba(255,255,255,0) 35%),
         radial-gradient(circle at 80% 90%, rgba(0,0,0,0.08), rgba(0,0,0,0) 40%),
         repeating-linear-gradient(-45deg, rgba(255,255,255,0.05) 0 2px, rgba(255,255,255,0) 2px 12px),
         linear-gradient(135deg, #f29400 0%, #e98900 50%, #d97a00 100%) !important;
     border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -12px 24px rgba(0, 0, 0, 0.08) !important;
 }
 .footer-dark .footer-bottom {
     background-color: var(--primary) !important;
     border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
 }
 .sx-f-bottom-section {
     background: linear-gradient(135deg, #f29400 0%, #e98900 50%, #d97a00 100%) !important;
     color: #fff !important;
 }
 /* Interactive link underline in footer */
 .footer-dark.site-footer .widget_services ul li a,
 .footer-dark.site-footer .widget_info ul li a {
     position: relative !important;
     background-image: linear-gradient(currentColor, currentColor) !important;
     background-position: 0 100% !important;
     background-repeat: no-repeat !important;
     background-size: 0% 2px !important;
     transition: background-size 0.3s ease, color 0.3s ease !important;
 }
 .footer-dark.site-footer .widget_services ul li a:hover,
 .footer-dark.site-footer .widget_info ul li a:hover {
     background-size: 100% 2px !important;
 }
 /* Social icon subtle glow */
 .footer-dark .sx-f-social ul li a {
     transition: transform 0.25s ease, text-shadow 0.25s ease, color 0.25s ease !important;
 }
 .footer-dark .sx-f-social ul li a:hover {
     text-shadow: 0 0 12px rgba(255,255,255,0.85) !important;
     transform: translateY(-2px) scale(1.05) !important;
 }
 /* Footer text/link contrast on orange */
 .footer-dark.site-footer .widget_services ul li a,
 .footer-dark.site-footer .widget_info ul li a {
     color: rgba(255, 255, 255, 0.85) !important;
 }
 .footer-dark.site-footer .widget_services ul li a:hover,
 .footer-dark.site-footer .widget_info ul li a:hover {
     color: #fff !important;
 }
 /* Footer social icons contrast on orange */
 .footer-dark .sx-f-social ul li a {
     color: #fff !important;
 }
 .footer-dark .sx-f-social ul li a:hover {
     color: #fff !important;
     opacity: 0.9 !important;
 }

/* Responsive Social Icons */
@media (max-width: 1199px) {
    .social-bx { gap: 6px !important; }
    .social-bx li a { width: 34px !important; height: 34px !important; }
}

@media (max-width: 991px) {
    .extra-nav { display: none !important; }
}

/* Mobile Button Styles - Smaller and Better Centered */
@media (max-width: 767px) {
    /* Hero Section Button Fixes */
    .site-button {
        padding: 8px 16px !important;
        font-size: 14px !important;
        margin: 5px !important;
        display: inline-block !important;
        width: auto !important;
        max-width: 280px !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* Specific button container fixes */
    .hero-buttons-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 0 15px !important;
    }
    
    /* Center all button containers */
    div[style*="text-align: center"] {
        text-align: center !important;
    }
    
    div[style*="display: flex"] {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    
    /* Fix for specific button styles mentioned */
    a[href="ucretsiz-danismanlik.php"].site-button {
        padding: 10px 20px !important;
        font-size: 14px !important;
        max-width: 250px !important;
        margin: 8px auto !important;
        display: block !important;
    }
    
    /* Outline button fixes */
    .site-button.outline {
        padding: 8px 16px !important;
        font-size: 14px !important;
        margin: 5px auto !important;
        display: block !important;
        max-width: 200px !important;
    }
    
    /* CTA section button fixes */
    .text-center .site-button {
        margin: 10px auto !important;
        display: block !important;
        max-width: 250px !important;
    }
    
    /* Make sure buttons don't overflow */
    .container .site-button,
    .row .site-button {
        max-width: calc(100vw - 30px) !important;
        box-sizing: border-box !important;
    }
    
    /* Fix button text wrapping */
    .site-button i {
        margin-right: 5px !important;
    }
    
    /* Ensure buttons are visible and not hidden */
    .site-button[style*="display: none"] {
        display: inline-block !important;
    }
    
    /* Fix for buttons that might be cut off */
    .hero-section .site-button,
    .cta-section .site-button {
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 10 !important;
    }
}

/* HERO SECTION MOBILE FIXES - 375x667 OPTIMIZED */
@media (max-width: 991px) {
    .sx-bnr-1-wrap {
        min-height: auto !important;
        height: auto !important;
        max-height: none !important;
        padding: 120px 0 60px 0 !important;
        overflow: visible !important;
    }
    
    .sx-bnr-1-content {
        padding: 0 20px !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    .sx-bnr-1-large-title {
        font-size: 28px !important;
        line-height: 1.3 !important;
        margin-bottom: 20px !important;
        word-wrap: break-word !important;
    }
    
    .sx-bnr-1-small-title {
        font-size: 16px !important;
        margin-bottom: 15px !important;
    }
    
    .sx-bnr-1-info {
        font-size: 15px !important;
        line-height: 1.5 !important;
        margin-bottom: 30px !important;
        word-wrap: break-word !important;
    }
    
    .sx-bnr-readmore {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
        width: 100% !important;
    }
    
    .sx-bnr-readmore .site-button {
        width: 90% !important;
        max-width: 300px !important;
        padding: 14px 20px !important;
        font-size: 14px !important;
        margin: 0 !important;
        text-align: center !important;
        display: block !important;
    }
}

@media (max-width: 767px) {
    .sx-bnr-1-wrap {
        padding: 100px 0 50px 0 !important;
    }
    
    .sx-bnr-1-content {
        padding: 0 15px !important;
    }
    
    .sx-bnr-1-large-title {
        font-size: 24px !important;
        line-height: 1.4 !important;
    }
    
    .sx-bnr-1-info {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
}

@media (max-width: 480px) {
    .sx-bnr-1-wrap {
        padding: 90px 0 40px 0 !important;
    }
    
    .sx-bnr-1-large-title {
        font-size: 22px !important;
    }
    
    .sx-bnr-1-info {
        font-size: 13px !important;
    }
    
    .sx-bnr-readmore .site-button {
        font-size: 13px !important;
        padding: 12px 18px !important;
    }
}

/* Override any conflicting styles from main CSS */
@media (max-width: 991px) {
    .sx-bnr-1-wrap-outer .sx-bnr-1-content,
    .sx-bnr-1-content {
        margin: 0 !important;
        padding: 0 20px !important;
    }
    
    .sx-bnr-1-wrap-outer .swiper-slide,
    #hero-section {
        min-height: auto !important;
        height: auto !important;
    }
}

/* Hamburger Menu Mobile Fixes */
@media (max-width: 991px) {
    /* Ensure hamburger button is visible and clickable */
    #mobile-side-drawer {
        display: block !important;
        position: relative !important;
        z-index: 9999 !important;
        background: transparent !important;
        border: none !important;
        padding: 10px !important;
        cursor: pointer !important;
    }
    
    /* Mobile menu active state */
    .mobile-sider-drawer-menu.active .header-nav {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        background: #ffffff !important;
        z-index: 9998 !important;
        padding: 60px 20px 20px !important;
        overflow-y: auto !important;
    }
    
    /* Mobile menu items */
    .mobile-sider-drawer-menu.active .header-nav .nav {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .mobile-sider-drawer-menu.active .header-nav .nav li {
        width: 100% !important;
        margin: 0 !important;
        border-bottom: 1px solid #eee !important;
    }
    
    .mobile-sider-drawer-menu.active .header-nav .nav li a {
        padding: 15px 0 !important;
        display: block !important;
        color: #333 !important;
        font-size: 16px !important;
    }
    
    /* Hide desktop navigation on mobile */
    .header-nav {
        display: none !important;
    }
    
    /* Body scroll lock when menu is open */
    body.mobile-menu-open {
        overflow: hidden !important;
    }
}

/* MOBILE-ONLY HEADER OPTIMIZATION - DESKTOP UNTOUCHED */
@media (max-width: 991px) {
    /* Main bar - mobile only styling */
    .main-bar {
        padding: 0 !important;
        min-height: 70px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .main-bar .container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 15px !important;
        min-height: 70px !important;
        width: 100% !important;
        position: relative !important;
    }
    
    /* Logo section - compact centering */
    .logo-header {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        height: 70px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .logo-header-inner {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
    }
    
    /* Hamburger - same height as logo, compact */
    #mobile-side-drawer {
        flex: 0 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 50px !important;
        height: 70px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        position: relative !important;
        z-index: 99999 !important;
        overflow: visible !important;
    }
    
    /* Hide desktop social icons on mobile */
    .extra-nav {
        display: none !important;
    }
    
    /* Hamburger bars - compact and elegant */
    #mobile-side-drawer .icon-bar {
        display: block !important;
        width: 24px !important;
        height: 2px !important;
        background-color: #333 !important;
        margin: 3px 0 !important;
        transition: all 0.3s ease !important;
        border-radius: 1px !important;
        transform-origin: center center !important;
        position: relative !important;
    }
    
    /* ELEGANT X ANIMATION - COMPACT */
    .mobile-sider-drawer-menu.active #mobile-side-drawer {
        overflow: visible !important;
        width: 50px !important;
        height: 70px !important;
    }
    
    .mobile-sider-drawer-menu.active #mobile-side-drawer .icon-bar-first {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) rotate(45deg) !important;
        transform-origin: center center !important;
        width: 24px !important;
        margin: 0 !important;
    }
    
    .mobile-sider-drawer-menu.active #mobile-side-drawer .icon-bar-two {
        opacity: 0 !important;
        transform: scale(0) !important;
    }
    
    .mobile-sider-drawer-menu.active #mobile-side-drawer .icon-bar-three {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) rotate(-45deg) !important;
        transform-origin: center center !important;
        width: 24px !important;
        margin: 0 !important;
    }
}

@media (max-width: 767px) {
    .main-bar {
        min-height: 65px !important;
    }
    
    .main-bar .container {
        min-height: 65px !important;
    }
    
    .logo-header {
        height: 65px !important;
    }
    
    #mobile-side-drawer {
        height: 65px !important;
        width: 45px !important;
    }
    
    #mobile-side-drawer .icon-bar {
        width: 22px !important;
    }
    
    .mobile-sider-drawer-menu.active #mobile-side-drawer .icon-bar-first {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) rotate(45deg) !important;
        width: 22px !important;
        margin: 0 !important;
    }
    
    .mobile-sider-drawer-menu.active #mobile-side-drawer .icon-bar-three {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) rotate(-45deg) !important;
        width: 22px !important;
        margin: 0 !important;
    }
}

@media (max-width: 480px) {
    .main-bar {
        min-height: 60px !important;
    }
    
    .main-bar .container {
        min-height: 60px !important;
        padding: 0 12px !important;
    }
    
    .logo-header {
        height: 60px !important;
    }
    
    #mobile-side-drawer {
        height: 60px !important;
        width: 40px !important;
    }
    
    #mobile-side-drawer .icon-bar {
        width: 20px !important;
        height: 2px !important;
        margin: 2px 0 !important;
    }
    
    /* Compact X for small screens */
    .mobile-sider-drawer-menu.active #mobile-side-drawer .icon-bar-first {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) rotate(45deg) !important;
        width: 20px !important;
        margin: 0 !important;
    }
    
    .mobile-sider-drawer-menu.active #mobile-side-drawer .icon-bar-three {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) rotate(-45deg) !important;
        width: 20px !important;
        margin: 0 !important;
    }
}

/* ADDITIONAL MOBILE OPTIMIZATIONS FOR 375x667 */
@media (max-width: 480px) {
    /* Ensure proper viewport handling */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
    }
    
    /* Container fixes */
    .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
        overflow: visible !important;
    }
}

/* Z-INDEX HIERARCHY FIX */
.loading-area {
    z-index: 999999 !important;
}

#mobile-side-drawer {
    z-index: 99999 !important;
}

.mobile-sider-drawer-menu.active .header-nav {
    z-index: 99998 !important;
}

.sticky-header {
    z-index: 9999 !important;
}

/* NUCLEAR LOGO SIZE OVERRIDE - MAXIMUM POWER */
/* This will override ANY existing CSS rule for logo size */
body .header-style1 .main-bar .logo-header .logo-header-inner img,
body .header-style2 .main-bar .logo-header .logo-header-inner img,
body .header-style3 .main-bar .logo-header .logo-header-inner img,
body .main-bar .logo-header .logo-header-inner img,
body .sticky-header .logo-header .logo-header-inner img,
body .logo-header .logo-header-inner img,
body .logo-header img,
body img[src*="logo"] {
    max-height: 120px !important;
    min-height: 100px !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    display: block !important;
}

@media (max-width: 991px) {
    body .header-style1 .main-bar .logo-header .logo-header-inner img,
    body .header-style2 .main-bar .logo-header .logo-header-inner img,
    body .header-style3 .main-bar .logo-header .logo-header-inner img,
    body .main-bar .logo-header .logo-header-inner img,
    body .sticky-header .logo-header .logo-header-inner img,
    body .logo-header .logo-header-inner img,
    body .logo-header img,
    body img[src*="logo"] {
        max-height: 100px !important;
        min-height: 85px !important;
    }
}

@media (max-width: 767px) {
    body .header-style1 .main-bar .logo-header .logo-header-inner img,
    body .header-style2 .main-bar .logo-header .logo-header-inner img,
    body .header-style3 .main-bar .logo-header .logo-header-inner img,
    body .main-bar .logo-header .logo-header-inner img,
    body .sticky-header .logo-header .logo-header-inner img,
    body .logo-header .logo-header-inner img,
    body .logo-header img,
    body img[src*="logo"] {
        max-height: 95px !important;
        min-height: 80px !important;
    }
}

@media (max-width: 480px) {
    body .header-style1 .main-bar .logo-header .logo-header-inner img,
    body .header-style2 .main-bar .logo-header .logo-header-inner img,
    body .header-style3 .main-bar .logo-header .logo-header-inner img,
    body .main-bar .logo-header .logo-header-inner img,
    body .sticky-header .logo-header .logo-header-inner img,
    body .logo-header .logo-header-inner img,
    body .logo-header img,
    body img[src*="logo"] {
        max-height: 90px !important;
        min-height: 75px !important;
    }
}

/* MOBILE-ONLY LOGO CONTAINER OVERRIDE */
@media (max-width: 991px) {
    body .header-style1 .main-bar .logo-header,
    body .header-style2 .main-bar .logo-header,
    body .header-style3 .main-bar .logo-header,
    body .main-bar .logo-header,
    body .sticky-header .logo-header,
    body .logo-header {
        height: auto !important;
        min-height: 70px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    body .header-style1 .main-bar .logo-header-inner,
    body .header-style2 .main-bar .logo-header-inner,
    body .header-style3 .main-bar .logo-header-inner,
    body .main-bar .logo-header-inner,
    body .sticky-header .logo-header-inner,
    body .logo-header-inner {
        height: 100% !important;
        min-height: 70px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
}

@media (max-width: 767px) {
    body .header-style1 .main-bar .logo-header,
    body .header-style2 .main-bar .logo-header,
    body .header-style3 .main-bar .logo-header,
    body .main-bar .logo-header,
    body .sticky-header .logo-header,
    body .logo-header {
        min-height: 65px !important;
        padding: 0 !important;
    }
    
    body .header-style1 .main-bar .logo-header-inner,
    body .header-style2 .main-bar .logo-header-inner,
    body .header-style3 .main-bar .logo-header-inner,
    body .main-bar .logo-header-inner,
    body .sticky-header .logo-header-inner,
    body .logo-header-inner {
        min-height: 65px !important;
    }
}

@media (max-width: 480px) {
    body .header-style1 .main-bar .logo-header,
    body .header-style2 .main-bar .logo-header,
    body .header-style3 .main-bar .logo-header,
    body .main-bar .logo-header,
    body .sticky-header .logo-header,
    body .logo-header {
        min-height: 60px !important;
        padding: 0 !important;
    }
    
    body .header-style1 .main-bar .logo-header-inner,
    body .header-style2 .main-bar .logo-header-inner,
    body .header-style3 .main-bar .logo-header-inner,
    body .main-bar .logo-header-inner,
    body .sticky-header .logo-header-inner,
    body .logo-header-inner {
        min-height: 60px !important;
    }
}