/*
Theme Name: Global İnşaat Custom Professional Theme
Theme URI: https://globalinsaat.com.tr
Author: Global İnşaat Dev Team
Author URI: https://globalinsaat.com.tr
Description: Modern, high-performance, and conversion-focused WordPress theme for engineering and construction companies.
Version: 1.2.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: global-insaat
Tags: construction, engineering, corporate, portfolio, customizer
*/

:root {
    --primary: #1E293B;
    --accent: #B59461;
    --text: #334155;
    --white: #FFFFFF;
    --light: #F8FAFC;
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =========================================
   Preloader
   ========================================= */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loader-content {
    text-align: center;
}

.loader-logo img {
    max-width: 150px;
    margin-bottom: 20px;
    animation: pulse-logo 2s infinite;
}

.loading-bar {
    width: 200px;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin: 0 auto;
}

.loading-bar::after {
    content: '';
    display: block;
    width: 0%;
    height: 100%;
    background: var(--accent);
    animation: load-bar 1.5s ease-in-out forwards;
}

@keyframes pulse-logo {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(0.95);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes load-bar {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

/* =========================================
   Top Bar
   ========================================= */
.top-bar {
    background: #0f172a;
    color: rgba(255, 255, 255, 0.7);
    padding: 10px 0;
    font-size: 0.85rem;
    position: relative;
    z-index: 1001;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.top-bar .d-flex {
    justify-content: space-between;
}

.main-nav ul li a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
    font-size: 0.95rem;
    padding: 25px 0;
    /* Increase hit area */
    display: block;
}

.top-bar a {
    color: inherit;
    text-decoration: none;
    margin-right: 20px;
    transition: var(--transition);
}

.top-bar a:hover {
    color: var(--accent);
}

.top-bar i {
    margin-right: 5px;
    color: var(--accent);
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.lang-switch .sep {
    margin: 0 5px;
    opacity: 0.3;
}

.lang-switch .active {
    color: white;
    font-weight: 700;
}

/* Header Adjustment for Top Bar */
.site-header {
    top: 45px;
}

.site-header.sticky {
    top: 0;
}

/* Logo Box Container */
.logo-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 12px;
    padding: 12px 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.site-header.sticky .logo-box {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    padding: 10px 18px;
}

/* TV ve Büyük Ekranlar için Logo Box */
@media (min-width: 1920px) {
    .logo-box {
        padding: 15px 25px;
        border-radius: 14px;
    }
    
    .site-header.sticky .logo-box {
        padding: 12px 22px;
    }
}

.logo-box:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* Logo Sizing Fix */
.logo img {
    height: auto;
    width: auto;
    max-height: var(--logo-max-height, 140px) !important;
    object-fit: contain;
    transition: var(--transition);
    margin: 0;
    display: block;
    opacity: 1 !important;
    visibility: visible !important;
}

.logo-box a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* Ensure Sidebar Icons Visible */
.hero-social-sidebar {
    z-index: 100 !important;
}

.sidebar-icons a {
    position: relative;
    z-index: 101;
    pointer-events: auto;
    color: white !important;
}

/* Admin Bar Fix with Top Bar */
body.admin-bar .top-bar {
    margin-top: 32px;
}

body.admin-bar .site-header {
    top: 77px;
}

body.admin-bar .site-header.sticky {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .top-bar {
        margin-top: 46px;
    }

    body.admin-bar .site-header {
        top: 91px;
    }

    body.admin-bar .site-header.sticky {
        top: 46px;
    }

    .top-bar {
        display: none;
    }

    .site-header {
        top: 0 !important;
    }
}

/* =========================================
   Dropdown Menus
   ========================================= */
.main-nav ul li {
    position: relative;
}

.main-nav ul .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    min-width: 200px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    border-top: 3px solid var(--accent);
    padding: 10px 0;
    z-index: 1002;
    list-style: none;
    display: block;
}

.main-nav ul li:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.main-nav ul .sub-menu li {
    margin: 0;
}

.main-nav ul .sub-menu a {
    display: block;
    padding: 10px 20px;
    color: var(--primary);
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.main-nav ul .sub-menu a:hover {
    background: var(--light);
    color: var(--accent) !important;
    padding-left: 25px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text);
    line-height: 1.7;
    overflow-x: hidden;
    background-color: #fcfcfc;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -0.02em;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* TV ve Büyük Ekranlar için Container Genişletme */
@media (min-width: 1400px) {
    .container {
        max-width: 1400px;
        padding: 0 40px;
    }
}

@media (min-width: 1600px) {
    .container {
        max-width: 1600px;
        padding: 0 60px;
    }
}

@media (min-width: 1920px) {
    .container {
        max-width: 1800px;
        padding: 0 80px;
    }
}

@media (min-width: 2560px) {
    .container {
        max-width: 2200px;
        padding: 0 100px;
    }
}

.d-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

/* Header */
/* Header */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background: transparent;
    padding: 20px 0;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* WP Admin Bar Compatibility - High Specificity */
body.admin-bar .site-header {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar .site-header {
        top: 46px !important;
    }
}

/* Sticky Header State */
.site-header.sticky {
    background: rgba(255, 255, 255, 1);
    padding: 15px 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Typography & Navigation */
.main-nav a {
    text-decoration: none;
    color: var(--primary);
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    /* Better readability on light */
}

/* Dark Mode Navigation (Home with Slider) */
body.home:not(.scrolled) .site-header:not(.sticky) .main-nav a,
body.home:not(.scrolled) .site-header:not(.sticky) .logo a {
    color: white !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

/* Logo Box - Slider üzerinde görünürlük */
body.home:not(.scrolled) .site-header:not(.sticky) .logo-box {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.main-nav a:hover {
    color: var(--accent) !important;
    transform: translateY(-1px);
}

.main-nav ul {
    display: flex;
    list-style: none;
    gap: 30px;
}

.main-nav a {
    text-decoration: none;
    color: var(--primary);
    font-weight: 600;
    font-family: 'Outfit';
    transition: var(--transition);
}

.main-nav a:hover {
    color: var(--accent);
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
}

.logo img {
    width: auto;
    max-width: 100%;
    /* Restrict vertical height to prevent header blow-up */
    max-height: var(--logo-max-height, 140px) !important;
    height: auto;
    object-fit: contain;
    opacity: 1 !important;
    visibility: visible !important;
    margin: 0;
    display: block;
}

/* Buttons */
.btn {
    transition: var(--transition);
    display: inline-block;
    padding: 12px 30px;
    border-radius: 4px;
    font-weight: 700;
    text-decoration: none;
    font-family: 'Outfit';
    cursor: pointer;
    border: none;
}

.btn-accent {
    background: var(--accent);
    color: var(--primary);
}

.btn-accent:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-3px);
}

.btn-outline {
    border: 2px solid var(--primary);
    color: var(--primary);
    background: transparent;
}

.btn-outline:hover {
    background: var(--primary);
    color: white;
}

/* Reveal Animations */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Slider */
.hero-slider {
    position: relative;
    height: 100vh;
    overflow: hidden;
    background: var(--primary);
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Left align container */
    text-align: left;
    color: white;
    padding-left: 0;
}

.slide.active {
    opacity: 1;
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

/* =========================================
   Hero Content & Typography
   ========================================= */
.hero-content {
    max-width: 800px;
    color: white;
    z-index: 2;
    padding-left: 0;
    margin-left: 0;
    /* Align with container */
    text-align: left;
    /* Left align text */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Align flex items to start */
    position: relative;
    /* Space for sidebar */
}

.slide-subtitle {
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 4px;
    color: var(--accent);
    margin-bottom: 20px;
    display: block;
    opacity: 0;
    animation: fadeInDown 1s ease forwards 0.5s;
}

.hero-content h1 {
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 25px;
    text-transform: capitalize;
    /* More modern than uppercase */
    letter-spacing: -1px;
    color: white;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.slide-desc {
    font-size: 1.25rem;
    line-height: 1.8;
    margin-bottom: 40px;
    opacity: 0.9;
    max-width: 600px;
    font-weight: 300;
}

@media (max-width: 768px) {
    .hero-content {
        padding-left: 0;
        text-align: center;
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }
}

/* Hero Button */
.btn-hero {
    background: var(--accent);
    color: var(--primary);
    padding: 18px 45px;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 0;
    /* Sharp modern edges */
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: var(--white);
    transition: all 0.4s ease;
    z-index: -1;
}

.btn-hero:hover::before {
    width: 100%;
}

.btn-hero:hover {
    color: var(--primary);
}

/* Slide Text Animations */
.slide.active .hero-content h1 {
    animation: fadeInUp 1s ease 0.3s forwards;
    opacity: 0;
}

.slide.active .slide-desc {
    animation: fadeInUp 1s ease 0.6s forwards;
    opacity: 0;
}

.slide.active .hero-btns {
    animation: fadeInUp 1s ease 0.9s forwards;
    opacity: 0;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stats */
.stats {
    padding: 60px 0;
    background: white;
    margin-top: -60px;
    position: relative;
    z-index: 10;
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    text-align: center;
}

.stat-num {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--accent);
    display: block;
    font-family: 'Outfit';
}

.stat-label {
    font-weight: 600;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
}

/* Icons & Floating Buttons */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: var(--primary);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    transition: var(--transition);
}

.back-to-top:hover {
    transform: translateY(-5px);
    background: var(--accent);
}

/* =========================================
   Floating Contact Widget
   ========================================= */
.floating-contact-widget {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 1000;
}

.contact-toggle-btn {
    width: 60px;
    height: 60px;
    background: var(--accent);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(181, 148, 97, 0.4);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    animation: pulse-gold 2s infinite;
}

.contact-toggle-btn:hover {
    transform: scale(1.1) rotate(15deg);
}

.contact-menu {
    position: absolute;
    bottom: 70px;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.floating-contact-widget:hover .contact-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.contact-item {
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    position: relative;
    right: -5px;
    /* Alignment fix */
    color: var(--white);
}

.contact-item:hover {
    transform: translateX(5px);
}

.contact-item.whatsapp {
    color: #25D366;
}

.contact-item.phone {
    color: var(--primary);
}

.contact-item.instagram {
    color: #E1306C;
}

@keyframes pulse-gold {
    0% {
        box-shadow: 0 0 0 0 rgba(181, 148, 97, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(181, 148, 97, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(181, 148, 97, 0);
    }
}

/* Slider Dots Navigation - High Visibility */
.slider-dots {
    z-index: 100 !important;
    bottom: 30px;
    left: 50%;
    /* Center horizontally */
    transform: translateX(-50%);
    /* Center horizontally */
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.3);
    /* dark pill bg */
    padding: 10px 20px;
    border-radius: 30px;
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    gap: 10px;
    position: absolute;
    /* Ensure absolute positioning */
}

/* Social Sidebar */
.hero-social-sidebar {
    position: absolute;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.hero-social-sidebar .sidebar-icons {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.hero-social-sidebar a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.hero-social-sidebar a:hover {
    color: var(--accent);
    transform: translateX(5px);
}

.hero-social-sidebar .sidebar-line {
    width: 1px;
    height: 60px;
    background: rgba(255, 255, 255, 0.3);
    margin: 10px 0;
}

.hero-social-sidebar .sidebar-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    transform: rotate(180deg);
}

@media (max-width: 768px) {
    .hero-social-sidebar {
        display: none;
        /* Hide on mobile to save space */
    }
}

/* Slider Arrows (Bottom Center) */
.slider-nav-arrows {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 101;
    display: flex;
    align-items: center;
    gap: 120px;
    /* Space for dots in between */
    pointer-events: none;
    /* Let clicks pass through, enable on buttons */
}

.slider-arrow {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    pointer-events: auto;
    backdrop-filter: blur(5px);
}

.slider-arrow:hover {
    background: var(--accent);
    border-color: var(--accent);
    transform: scale(1.1);
}

.dot {
    width: 14px;
    height: 14px;
    background: rgba(255, 255, 255, 0.5) !important;
    border: 2px solid white !important;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    margin: 0 5px;
}

.dot.active,
.dot:hover {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    transform: scale(1.3);
}

/* Ensure Logo Visibility */
.logo-box {
    background: white !important;
}

.logo img {
    opacity: 1 !important;
    filter: none !important;
    max-height: var(--logo-max-height, 140px) !important;
    height: auto !important;
    width: auto !important;
    visibility: visible !important;
    display: block !important;
}

/* 29th Year Badge - Premium Seal Design */
.badge-year {
    position: absolute;
    bottom: 50px;
    right: 60px;
    z-index: 30;
    width: 220px;
    /* Increased size for larger text */
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
    animation: badgePulse 3s infinite ease-in-out;
    /* Pulse Animation */
}

@keyframes badgePulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(181, 148, 97, 0.4);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(181, 148, 97, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(181, 148, 97, 0);
    }
}

.badge-ring {
    position: absolute;
    inset: 6px;
    /* Inner spacing */
    border: 2px solid var(--accent);
    /* Solid gold ring */
    border-radius: 50%;
    opacity: 0.8;
}

.badge-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    z-index: 2;
    text-align: center;
    line-height: 1;
}

.badge-content .year {
    font-size: 4.5rem;
    font-weight: 800;
    color: white;
    font-family: 'Outfit', sans-serif;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #fff 0%, #e2e8f0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}

.badge-content .text {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 5px;
    background: none;
    -webkit-text-fill-color: initial;
    line-height: 1.3;
}

/* Add a subtle glow/shine */
.badge-year::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
    pointer-events: none;
}

@media (max-width: 768px) {
    .badge-year {
        bottom: 30px;
        right: 20px;
        width: 120px;
        height: 120px;
    }

    .badge-content .year {
        font-size: 2.5rem !important;
    }

    .badge-content .text {
        font-size: 0.85rem !important;
        font-weight: 600;
        color: var(--accent);
        letter-spacing: 1.5px;
        text-transform: uppercase;
        margin-top: 3px;
        background: none;
        -webkit-text-fill-color: initial;
        text-align: center;
        line-height: 1.2;
        width: 100%;
        display: block;
    }
}

/* Submenu Fix - Global */
.main-nav ul ul {
    background: white;
    border-top: 3px solid var(--accent);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    min-width: 220px;
}

.main-nav ul ul li a {
    color: var(--primary) !important;
    font-weight: 500;
    padding: 12px 20px;
}

.main-nav ul ul li a:hover {
    background: #f8fafc;
    color: var(--accent) !important;
    padding-left: 25px;
}

/* Breadcrumbs */
.breadcrumbs {
    display: inline-flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    padding: 8px 25px;
    border-radius: 50px;
    backdrop-filter: blur(10px);
    margin-bottom: 30px;
    color: white;
    font-size: 0.85rem;
}

.breadcrumbs a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    margin-right: 10px;
}

.breadcrumbs a::after {
    content: '»';
    margin-left: 10px;
    color: white;
    opacity: 0.5;
}

/* Mobile */
.hamburger {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 6px;
}

.hamburger span {
    width: 30px;
    height: 3px;
    background: var(--primary);
    transition: var(--transition);
}

@media (max-width: 991px) {
    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: white;
        padding: 100px 30px;
        transition: 0.5s;
        z-index: 999;
    }

    .main-nav.active {
        right: 0;
    }

    .main-nav ul {
        flex-direction: column;
    }

    .hamburger {
        display: flex;
        z-index: 1001;
    }

    .site-header {
        background: white !important;
        padding: 15px 0 !important;
    }

    /* Mobile Nav & Admin Bar */
    body.admin-bar .main-nav {
        top: 32px;
        height: calc(100vh - 32px);
    }

    @media screen and (max-width: 782px) {
        body.admin-bar .main-nav {
            top: 46px;
            height: calc(100vh - 46px);
        }
    }

    .hero-content h1 {
        font-size: 2.2rem;
        /* Better mobile size */
        margin-bottom: 20px;
    }

    .hero-content {
        padding: 0 15px;
    }

    .logo-box {
        padding: 8px 15px !important;
        border-radius: 10px !important;
    }
    
    .logo img {
        max-height: 80px !important;
        /* Smaller logo on mobile */
        width: auto !important;
        height: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .slide {
        padding-left: 0;
        justify-content: center;
        text-align: center;
    }

    .hero-content {
        text-align: center;
        padding: 0 20px;
        align-items: center;
        /* Center on mobile */
    }

    .slide-desc {
        margin: 0 auto 30px auto;
        font-size: 1.1rem;
    }
}

/* Footer */
.site-footer {
    background: linear-gradient(rgba(30, 41, 59, 0.92), rgba(30, 41, 59, 0.85));
    color: white;
    padding: 100px 0 40px;
    margin-top: 100px;
    text-align: left;
    position: relative;
    overflow: hidden;
    /* Ensure left alignment */
}

/* İstanbul Silüeti Background - Detaylı SVG */
.istanbul-skyline {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='skylineGrad' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23B59461;stop-opacity:0.25'/%3E%3Cstop offset='100%25' style='stop-color:%23B59461;stop-opacity:0.05'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23skylineGrad)' d='M0,400 L0,320 L30,310 L60,300 L90,290 L120,280 L150,270 L180,260 L210,250 L240,240 L270,230 L300,220 L330,210 L360,200 L390,190 L420,180 L450,170 L480,160 L510,150 L540,140 L570,130 L600,120 L630,110 L660,100 L690,90 L720,80 L750,70 L780,60 L810,50 L840,40 L870,30 L900,20 L930,10 L960,0 L990,10 L1020,20 L1050,30 L1080,40 L1110,50 L1140,60 L1170,70 L1200,80 L1200,400 Z'/%3E%3Cpath fill='%23B59461' fill-opacity='0.2' d='M0,400 L0,340 L50,330 L100,320 L150,310 L200,300 L250,290 L300,280 L350,270 L400,260 L450,250 L500,240 L550,230 L600,220 L650,210 L700,200 L750,190 L800,180 L850,170 L900,160 L950,150 L1000,140 L1050,130 L1100,120 L1150,110 L1200,100 L1200,400 Z'/%3E%3Cpath fill='%23B59461' fill-opacity='0.15' d='M100,400 L100,360 L200,350 L300,340 L400,330 L500,320 L600,310 L700,300 L800,290 L900,280 L1000,270 L1100,260 L1200,250 L1200,400 Z'/%3E%3Cpath fill='%23B59461' fill-opacity='0.1' d='M300,400 L300,370 L400,360 L500,350 L600,340 L700,330 L800,320 L900,310 L1000,300 L1100,290 L1200,280 L1200,400 Z'/%3E%3Cpath fill='%23B59461' fill-opacity='0.18' d='M500,400 L500,380 L600,370 L700,360 L800,350 L900,340 L1000,330 L1100,320 L1200,310 L1200,400 Z'/%3E%3C/svg%3E");
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    opacity: 0.7;
    z-index: 0;
    pointer-events: none;
    filter: blur(0.5px);
}

.site-footer .container {
    position: relative;
    z-index: 1;
}

/* İstanbul Ofis Vurgusu */
.footer-contact.istanbul-office {
    position: relative;
}

.footer-contact.istanbul-office::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent);
    border-radius: 2px;
}

.office-badge {
    animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 30px;
    margin-top: 50px;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-logo {
    margin-bottom: 25px;
    display: inline-block;
    /* Prevent full width forcing center */
    text-align: left;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 50px;
}

.footer-title {
    color: var(--accent);
    font-size: 1.25rem;
    margin-bottom: 30px;
    font-family: 'Outfit';
    position: relative;
    padding-bottom: 10px;
}

.footer-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--accent);
}

.footer-links ul {
    list-style: none;
}

.footer-links li {
    margin-bottom: 15px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: var(--transition);
}

.footer-links a:hover {
    color: var(--accent);
    padding-left: 5px;
}

.social-links-footer {
    display: flex;
    gap: 15px;
}

.social-links-footer a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: var(--transition);
}

.social-links-footer a:hover {
    background: var(--accent);
    color: var(--primary);
    transform: translateY(-5px);
}

/* Footer Responsive */
@media (max-width: 991px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    
    .istanbul-skyline {
        opacity: 0.4;
    }
    
    .footer-contact.istanbul-office::before {
        display: none;
    }
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .istanbul-skyline {
        opacity: 0.3;
        height: 150px;
    }
    
    .site-footer {
        padding: 60px 0 30px;
    }
}

/* =========================================
   Hero Social Sidebar
   ========================================= */
.hero-social-sidebar {
    position: absolute;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.sidebar-icons {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.sidebar-icons a {
    color: white;
    font-size: 1.2rem;
    opacity: 0.7;
    transition: var(--transition);
}

.sidebar-icons a:hover {
    color: var(--accent);
    opacity: 1;
    transform: translateX(5px);
}

/* Service Card Hover Effect */
.service-card-modern:hover .service-img img {
    transform: scale(1.1);
}

.service-card-modern:hover {
    transform: translateY(-10px);
}

.sidebar-line {
    width: 1px;
    height: 60px;
    background: rgba(255, 255, 255, 0.3);
}

.sidebar-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    color: white;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 0.8rem;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .hero-social-sidebar {
        display: none;
        /* Hide on mobile for cleaner look */
    }

    .slider-nav button {
        /* Adjust nav buttons if sidebar was taking space, but here it's absolute */
    }
}

/* Senior Level Cards & Hover Effects */
.service-card-modern:hover {
    transform: translateY(-15px);
    border-bottom: 4px solid var(--accent) !important;

    /* Services Typography Fix */
    .section-title h4 {
        margin-bottom: 25px !important;
        font-weight: 700;
        letter-spacing: 3px !important;
        text-transform: uppercase !important;
    }

    .service-content h3 {
        text-transform: uppercase !important;
        font-family: 'Outfit', sans-serif;
        letter-spacing: 1px;
        font-size: 1.6rem !important;
        font-weight: 800 !important;
    }

    /* Reference Map Visibility Fix */
    .turkey-map-container svg {
        min-height: 500px !important;
        /* Force explicit height */
        width: 100%;
        height: auto;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .service-card-modern .icon-box {
        transition: var(--transition);
    }

    .service-card-modern:hover .icon-box {
        transform: scale(1.1);
        color: var(--primary);
    }

    .project-card .project-img {
        transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .project-card:hover .project-img {
        transform: scale(1.1) rotate(1deg);
    }

    .project-card:hover .project-overlay {
        background: linear-gradient(transparent, rgba(0, 0, 0, 1));
    }

    .btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    }

    .btn-outline:hover {
        transform: translateY(-3px);
    }

/* =========================================
   E-Katalog Modal
   ========================================= */
.catalog-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.catalog-modal.active,
.catalog-modal[style*="display: flex"] {
    display: flex;
}

.catalog-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    cursor: pointer;
}

.catalog-modal-content {
    position: relative;
    background: white;
    border-radius: 16px;
    width: 95%;
    max-width: 1200px;
    max-height: 95vh;
    z-index: 10001;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp 0.3s ease;
}

.catalog-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    border-bottom: 2px solid var(--light);
    background: var(--primary);
    color: white;
}

.catalog-modal-header h3 {
    margin: 0;
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
}

.catalog-modal-close {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 1.2rem;
}

.catalog-modal-close:hover {
    background: var(--accent);
    transform: rotate(90deg);
}

.catalog-modal-body {
    padding: 30px;
    overflow-y: auto;
    flex: 1;
}

.catalog-download {
    margin-top: 20px;
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid var(--light);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.btn-catalog {
    transition: all 0.3s ease;
}

.btn-catalog:hover {
    background: white !important;
    color: var(--primary) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
    .catalog-modal-content {
        width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }
    
    .catalog-modal-header {
        padding: 15px 20px;
    }
    
    .catalog-modal-body {
        padding: 15px;
    }
    
    .hero-btns {
        flex-direction: column;
    }
    
    .hero-btns .btn {
        width: 100%;
        text-align: center;
    }
}

/* =========================================
   Hero Slider Container - Separate from Main Container
   ========================================= */
.hero-slider-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    z-index: 2;
}

/* TV ve Büyük Ekranlar için Hero Slider Container Genişletme */
@media (min-width: 1400px) {
    .hero-slider-container {
        max-width: 1400px;
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (min-width: 1600px) {
    .hero-slider-container {
        max-width: 1600px;
        padding-left: 60px;
        padding-right: 60px;
    }
}

@media (min-width: 1920px) {
    .hero-slider-container {
        max-width: 1800px;
        padding-left: 80px;
        padding-right: 80px;
    }
}

@media (min-width: 2560px) {
    .hero-slider-container {
        max-width: 2200px;
        padding-left: 100px;
        padding-right: 100px;
    }
}

.hero-slider .slide {
    justify-content: flex-start !important;
    padding-left: 0 !important;
}

.hero-slider .hero-content {
    margin-left: 0;
    padding-left: 0 !important;
    max-width: 1200px;
    width: 100%;
    transition: margin-left 0.3s ease;
    text-align: left;
}

/* Hero Content - Header Logo ile Hizalama (Varsayılan margin) */
.hero-slider-container .hero-content {
    margin-left: 0;
}

/* Hero Content - Header Logo Hizalama */
.hero-slider-container .hero-content {
    margin-left: 0;
    padding-left: 0;
}

@media (min-width: 1200px) {
    .hero-slider-container {
        padding-left: 20px;
    }
}

/* =========================================
   Partners Carousel (Owl Carousel)
   ========================================= */
.partners-carousel {
    margin-top: 40px;
}

.partner-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px 30px !important;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    height: 160px !important;
    min-height: 160px !important;
    width: 100% !important;
    margin: 10px;
    position: relative;
    overflow: hidden;
}

.partner-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(181, 148, 97, 0.05) 0%, rgba(30, 41, 59, 0.02) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.partner-item:hover {
    background: #ffffff;
    border-color: var(--accent);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    transform: translateY(-8px);
}

.partner-item:hover::before {
    opacity: 1;
}

.partner-logo {
    max-width: 180px !important;
    max-height: 80px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    filter: grayscale(100%) brightness(0.2);
    opacity: 0.7;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: block !important;
    margin: 0 auto !important;
    position: relative;
    z-index: 1;
}

.partner-item:hover .partner-logo {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
    transform: scale(1.05);
}

/* Service Card Headers - Uppercase */
.service-content h3 {
    text-transform: uppercase !important;
    letter-spacing: 1px;
}

/* Owl Carousel Custom Navigation */
.partners-carousel .owl-nav {
    text-align: center;
    margin-top: 30px;
}

.partners-carousel .owl-nav button {
    width: 50px;
    height: 50px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    margin: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 18px;
}

.partners-carousel .owl-nav button:hover {
    background: var(--accent);
    transform: scale(1.1);
}

.partners-carousel .owl-nav button.owl-prev::before {
    content: '\f060';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

.partners-carousel .owl-nav button.owl-next::before {
    content: '\f061';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

/* Owl Carousel Item Width Fix */
.partners-carousel .owl-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.partners-carousel .owl-stage {
    display: flex;
    align-items: center;
}

/* Owl Carousel Dots */
.partners-carousel .owl-dots {
    text-align: center;
    margin-top: 30px;
}

.partners-carousel .owl-dots .owl-dot {
    width: 12px;
    height: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    margin: 0 5px;
    transition: all 0.3s ease;
}

.partners-carousel .owl-dots .owl-dot.active {
    background: var(--accent);
    width: 30px;
    border-radius: 6px;
}

@media (max-width: 768px) {
    .partner-item {
        height: 140px !important;
        min-height: 140px !important;
        padding: 30px 20px !important;
    }
    
    .partner-logo {
        max-height: 70px !important;
        max-width: 150px !important;
    }
    
    .hero-slider-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        justify-content: center !important;
    }
    
    .hero-slider .slide {
        justify-content: center !important;
    }
    
    .hero-slider .hero-content {
        text-align: center;
        align-items: center;
    }
}