/* -------------------------------------------------------------
   3K Mühendislik - Özel Kurumsal Stil Sayfası (Corporate EPC MEP)
   Kurumsal Koyu Yeşil (Forest Green): #0E3B23 / #165A36
   Kurumsal Altın (Industrial Gold): #C69C3D / #DFB75C
   Koyu Grafit / Slate: #0F172A / #1E293B
   Açık Kurumsal Yüzey: #F8FAFC / #F1F5F9
   Saf Beyaz: #FFFFFF
------------------------------------------------------------- */

:root {
    --color-primary: #165A36;
    --color-primary-dark: #0B2B1A;
    --color-primary-light: #1E7447;
    --color-gold: #C69C3D;
    --color-gold-hover: #B38B30;
    --color-gold-light: #DFB75C;
    --color-gold-soft: rgba(198, 156, 61, 0.12);
    --color-text: #334155;
    --color-heading: #0F172A;
    --color-bg-light: #F8FAFC;
    --color-white: #FFFFFF;
    --border-corporate: #E2E8F0;
}

html {
    overflow-x: hidden;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--color-text);
    background-color: #FFFFFF;
    overflow-x: hidden;
    max-width: 100%;
    line-height: 1.6;
}

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

/* Kurumsal Renk ve Arka Plan Sınıfları */
.bg-primary-green { background-color: var(--color-primary); }
.bg-primary-dark { background-color: var(--color-primary-dark); }
.bg-gold { background-color: var(--color-gold); }
.bg-surface { background-color: var(--color-bg-light); }

.text-primary-green { color: var(--color-primary); }
.text-gold { color: var(--color-gold); }
.text-charcoal { color: var(--color-text); }
.text-heading { color: var(--color-heading); }

.border-primary-green { border-color: var(--color-primary); }
.border-gold { border-color: var(--color-gold); }
.border-corporate { border-color: var(--border-corporate); }

/* Kurumsal Altın Gradyanları & Vurgular */
.gradient-gold {
    background: linear-gradient(135deg, #DFB75C 0%, #C69C3D 50%, #9E7623 100%);
}

.gradient-green {
    background: linear-gradient(135deg, #165A36 0%, #0B2B1A 100%);
}

.gradient-overlay-dark {
    background: linear-gradient(to top, rgba(11, 43, 26, 0.98) 0%, rgba(14, 59, 35, 0.85) 60%, rgba(15, 23, 42, 0.5) 100%);
}

/* Kurumsal Butonlar (Teknik Mühendislik Çizgisi - 4px Radius) */
.btn-gold {
    background: linear-gradient(135deg, #DFB75C 0%, #C69C3D 100%);
    color: #FFFFFF;
    font-weight: 700;
    border-radius: 4px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 14px rgba(198, 156, 61, 0.28);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-gold:hover {
    background: linear-gradient(135deg, #C69C3D 0%, #A8812A 100%);
    box-shadow: 0 8px 24px rgba(198, 156, 61, 0.42);
    transform: translateY(-2px);
    color: #FFFFFF;
}

.btn-outline-gold {
    border: 1.5px solid var(--color-gold);
    color: var(--color-gold);
    font-weight: 600;
    border-radius: 4px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-outline-gold:hover {
    background-color: var(--color-gold);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(198, 156, 61, 0.3);
}

.btn-green {
    background-color: var(--color-primary);
    color: #FFFFFF;
    font-weight: 600;
    border-radius: 4px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px rgba(22, 90, 54, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-green:hover {
    background-color: var(--color-primary-dark);
    box-shadow: 0 8px 22px rgba(22, 90, 54, 0.35);
    transform: translateY(-2px);
    color: #FFFFFF;
}

/* Navigasyon Linki & Aktif Durum (Standart & Dinamik) */
.nav-link {
    position: relative;
    font-weight: 600;
    font-size: 0.9375rem;
    color: #1E293B;
    transition: color 0.25s ease;
}

.nav-link:hover, .nav-link.active-nav {
    color: var(--color-primary);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 0;
    height: 2.5px;
    background-color: var(--color-gold);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.nav-link:hover::after, .nav-link.active-nav::after {
    width: 100%;
}

/* -------------------------------------------------------------
   Açılı Geometrik Dinamik Header (Dynamic Slanted Engineering Nav)
------------------------------------------------------------- */
.header-slanted-wrap {
    position: relative;
    /* overflow: hidden KALDIRILDI - Dropdown menülerin serbestçe aşağı açılabilmesi için */
}

/* Açılı Arka Planı Kırpma Katmanı (Sadece dekoratif arka planı sınırlar, dropdown'ı ASLA engellemez) */
.header-slanted-backdrop {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.header-slanted-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -100vw;
    background: linear-gradient(135deg, #0B2B1A 0%, #165A36 50%, #124D2D 100%);
    clip-path: polygon(44px 0%, 100% 0%, 100% 100%, 0% 100%);
    z-index: 1;
    pointer-events: none;
}

.header-slanted-gold-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -4px;
    width: 52px;
    background: linear-gradient(135deg, #DFB75C 0%, #C69C3D 50%, #A8812A 100%);
    clip-path: polygon(44px 0%, 48px 0%, 4px 100%, 0% 100%);
    z-index: 1;
    pointer-events: none;
}

/* Dinamik Header Menü Linkleri (Referans Görsel Birebir Uyumlu) */
.dynamic-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    border-radius: 0.375rem;
    border: 1.5px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.dynamic-nav-link:hover {
    color: #FFFFFF;
    background-color: rgba(255, 255, 255, 0.12);
}

.dynamic-nav-link.active-nav {
    color: #FFFFFF;
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Masaüstü Dropdown Menü Yumuşak Aşağı Açılma Efekti */
.header-dropdown-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
}

.group:hover .header-dropdown-menu,
.group:focus-within .header-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* Kurumsal Kart ve Hover Efektleri */
.card-hover {
    transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 30px -10px rgba(15, 23, 42, 0.08), 0 10px 15px -3px rgba(22, 90, 54, 0.05);
}

.corporate-card {
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.corporate-card:hover {
    border-color: rgba(198, 156, 61, 0.4);
    box-shadow: 0 16px 32px -8px rgba(15, 23, 42, 0.08);
}

/* Başlık Rozeti (Section Badge) - Kurumsal ve Ağırbaşlı */
.section-title-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background-color: rgba(22, 90, 54, 0.08);
    color: var(--color-primary);
    border-left: 3px solid var(--color-gold);
    border-radius: 0 3px 3px 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Kurumsal Standart & Akreditasyon Kartları (Teknik Keskin Hatlar) */
.standard-badge {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 4px;
    padding: 0.625rem 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    transition: all 0.2s ease;
}

.standard-badge:hover {
    border-color: rgba(22, 90, 54, 0.4);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

/* Floating WhatsApp Butonu */
.floating-whatsapp {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 99;
    width: 54px;
    height: 54px;
    background-color: #25D366;
    color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.floating-whatsapp:hover {
    transform: scale(1.08) rotate(6deg);
    color: #FFFFFF;
    box-shadow: 0 12px 28px rgba(37, 211, 102, 0.5);
}

/* Yukarı Çık Butonu (Mühendislik Kare / Hafif Kırılmış Köşe) */
.back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99;
    width: 42px;
    height: 42px;
    background-color: var(--color-primary);
    color: #FFFFFF;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background-color: var(--color-gold);
    transform: translateY(-3px);
}

/* Özel Kaydırma Çubuğu (Scrollbar) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
    background: #165A36;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #C69C3D;
}

/* Mühendislik Izgara Deseni (Architectural Grid Overlay) */
.bg-blueprint-grid {
    background-image: 
        linear-gradient(to right, rgba(198, 156, 61, 0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(198, 156, 61, 0.08) 1px, transparent 1px);
    background-size: 40px 40px;
}

.bg-dot-pattern {
    background-image: radial-gradient(rgba(22, 90, 54, 0.12) 1.5px, transparent 1.5px);
    background-size: 20px 20px;
}

/* Resim Hover Efektleri */
img {
    content-visibility: auto;
}

.img-zoom-wrapper {
    overflow: hidden;
    position: relative;
}

.img-zoom-wrapper img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.img-zoom-wrapper:hover img {
    transform: scale(1.05);
}

/* Canlı İkaz & Nabız Işıltısı */
.status-beacon {
    position: relative;
    display: inline-flex;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #22C55E;
}

.status-beacon::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background-color: rgba(34, 197, 94, 0.45);
    animation: beaconPulse 2s infinite ease-out;
}

@keyframes beaconPulse {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(2.4); opacity: 0; }
}

/* Odaklanma (Accessibility Focus) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(198, 156, 61, 0.4);
}

/* Kurumsal Proje Filtre Butonları (Mühendislik Keskin Hat - 4px) */
.project-filter-btn {
    transition: all 0.25s ease;
    border-radius: 4px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.project-filter-btn.active {
    background-color: var(--color-primary);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(22, 90, 54, 0.25);
}

/* Metin Kırpma Yardımcıları */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* -------------------------------------------------------------
   Basit & Temiz Hero Slider (Clean & Simple Corporate Slider)
------------------------------------------------------------- */
.hero-slider-container {
    position: relative;
    overflow: hidden;
    background-color: var(--color-primary-dark);
}

.hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
    z-index: 1;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 10;
}

/* Teknik Mimari Çubuk Göstergeler (Architectural Bar Dots) */
.slider-dot {
    height: 4px;
    border-radius: 2px;
    transition: all 0.3s ease;
    cursor: pointer;
}