/**

 * Main CSS File

 * Scale Istanbul Partners

 */



:root {

    --color-primary: #050a30;    /* Lacivert */

    --color-secondary: #fec619;  /* Sarı */

    --color-text: #333333;

    --color-bg-light: #f4f4f4;

    --border-color: #e5e5e5;

    --font-heading: 'Chivo', sans-serif;

    --font-body: 'Chivo', sans-serif;

    

    --header-height: 80px;

    --topbar-height: 40px;

    --site-padding: 30px; /* Kenar boşlukları */

}



/* Temel Reset */

*, *::before, *::after {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



html {

    scroll-behavior: smooth;

}



body {

    font-family: var(--font-body);

    color: var(--color-text);

    line-height: 1.6;

    background-color: #fff;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}



/* Tipografi */

h1, h2, h3, h4, h5, h6 {

    font-family: var(--font-heading);

    color: var(--color-primary);

    font-weight: 700;

    line-height: 1.2;

    margin-bottom: 1rem;

}



a {

    text-decoration: none;

    color: inherit;

    transition: all 0.3s ease;

}



img {

    max-width: 100%;

    height: auto;

    display: block;

}



/* Layout Helper */

.container-fluid {

    width: 100%;

    padding-left: var(--site-padding);

    padding-right: var(--site-padding);

    margin: 0 auto;

}

/* Standart container (1200px opsiyonel) */

.container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding-left: var(--site-padding);

    padding-right: var(--site-padding);

}



/* ============================

   TOP BAR

   ============================ */

.top-bar {

    height: var(--topbar-height);

    background-color: #fff;

    display: flex;

    align-items: center;

    border-bottom: 1px solid #eee;

}



.top-bar-inner {

    display: flex;

    justify-content: flex-end; /* Sağa yaslı */

    align-items: center;

    height: 100%;

}



.top-bar-right {

    display: flex;

    align-items: center;

}



/* Tek Tip Topbar Öğesi */

.topbar-item {

    display: flex;

    align-items: center;

    gap: 8px; /* İkon ve yazı arası boşluk */

    color: var(--color-primary);

    font-size: 14px;

    padding: 0 15px;

    position: relative;

    font-weight: 500;

    line-height: 1; /* Dikey hizalama için */

}



.topbar-item:hover {

    color: var(--color-secondary);

}



.topbar-item i {

    font-size: 16px;

}



.topbar-item .item-text {

    /* Metin özel ayarları gerekirse buraya */

}



/* Dikey Çizgiler (Seperator) */

.topbar-item::after {

    content: '';

    position: absolute;

    right: 0;

    top: 50%;

    transform: translateY(-50%);

    width: 1px;

    height: 15px;

    background-color: #ddd;

}



/* Listenin son elemanındaki çizgiyi kaldır */

.topbar-right .topbar-item:last-child::after {

    display: none;

}





/* ============================

   SITE HEADER

   ============================ */

.site-header {

    background-color: #fff;

    position: sticky; /* Sticky yapıldı */

    top: 0;           /* En üste yapışması için */

    z-index: 1000;    /* Diğer elementlerin üstünde kalması için artırıldı */

    padding: 15px 0;

    box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Scroll ederken içerikten ayrışması için hafif gölge */

    transition: all 0.3s ease; /* Sticky geçişi yumuşak olsun */

}



/* Sticky Durumu */

.site-header.is-sticky {

    padding: 10px 0; /* Sticky olunca biraz daraltalım */

    box-shadow: 0 5px 15px rgba(0,0,0,0.1);

}



.header-inner {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



/* Logo Styling */

.site-branding {

    max-width: 200px; /* Logo için makul bir max genişlik */

}



.site-branding img {

    max-height: 50px; /* Logo yüksekliği */

    width: auto;

}



/* Logo Geçiş Efekti (Sticky vs Default) */

.logo-sticky {

    display: none; /* Başlangıçta gizli */

}



/* Sticky olduğunda: Eğer sticky logo varsa, default'u gizle, sticky'i göster */

.site-header.is-sticky .logo-default {

    display: none;

}

.site-header.is-sticky .logo-sticky {

    display: block;

}



/* Sticky logo yüklenmediyse default her zaman kalsın */

.site-header.is-sticky .logo-default:only-child {

    display: block;

}





/* Text Logo Fallback */

.text-logo-wrapper {

    font-size: 24px;

    font-weight: 800;

    letter-spacing: 1px;

    color: var(--color-primary);

}



.brand-scale {

    background-color: var(--color-primary);

    color: #fff;

    padding: 5px 10px;

    margin-right: 5px;

}



.brand-istanbul {

    color: var(--color-primary);

}





/* Navigation Styling */

.main-navigation {

    flex: 1;

    display: flex;

    justify-content: center;

    padding: 0 40px;

}



.nav-menu {

    display: flex;

    list-style: none;

    gap: 25px;

    margin: 0;

}



.nav-menu li {

    position: relative;

}



.nav-menu a {

    font-weight: 700;

    font-size: 15px;

    color: var(--color-primary);

    padding: 10px 0;

    display: block;

}



.nav-menu a:hover {

    color: var(--color-secondary);

}



/* Dropdown Oku (Sadece Desktop Menü İçin) */

.nav-menu .menu-item-has-children > a::after {

    content: "\f078"; /* fa-chevron-down */

    font-family: "Font Awesome 6 Free";

    font-weight: 900;

    font-size: 10px;

    margin-left: 6px;

    vertical-align: middle;

    /* --- GÜNCELLENDİ: Animasyon için --- */

    display: inline-block; 

    transition: transform 0.3s ease;

}



/* --- YENİ: Dropdown açıldığında oku döndür (Sadece Desktop) --- */

.nav-menu .menu-item-has-children.active > a::after {

    transform: rotate(180deg);

}



/* Sub Menu (GÜNCELLENDİ: Smooth Geçiş Efekti) */

.nav-menu .sub-menu {

    /* display: none;  <-- Kaldırıldı, yerine opacity/visibility kullanıldı */

    display: block;    /* Layoutta yer kaplaması için */

    position: absolute;

    top: 100%;

    left: -300px;

    background: #fff;

    list-style: none;

    min-width: 650px; 

    box-shadow: 0 5px 15px rgba(0,0,0,0.1);

    z-index: 1;

    padding: 15px 0;

    border-top: 3px solid var(--color-secondary);

    

    column-count: 2;

    column-gap: 0;



    /* --- SMOOTH TRANSITION --- */

    opacity: 0;

    visibility: hidden;

    transform: translateY(20px); /* Hafif aşağıdan gelsin */

    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Yumuşak geçiş */

    pointer-events: none; /* Görünmezken tıklanmasın */

}



.nav-menu .sub-menu li {

    padding: 0;

    -webkit-column-break-inside: avoid;

    page-break-inside: avoid;

    break-inside: avoid;

}



/* Hover veya Active Class Durumu */

.nav-menu li:hover .sub-menu,

.nav-menu li.active .sub-menu {

    /* display: block; <-- Artık gerek yok */

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

    pointer-events: auto; /* Artık tıklanabilir */

}



.nav-menu .sub-menu a {

    padding: 10px 20px;

    font-weight: 400;

    font-size: 14px;

    border-bottom: 1px solid #f5f5f5;

}



.nav-menu .sub-menu a:hover {

    background-color: #f9f9f9;

    color: var(--color-primary);

    padding-left: 25px;

}



/* --- YENİ: 3. Seviye Menü (Desktop) --- */

.nav-menu .sub-menu .sub-menu {

    position: static;        /* Parent akışında kalsın (Columns içinde) */

    box-shadow: none;        /* Gölgeyi kaldır */

    border-top: none;        /* Üst çizgiyi kaldır */

    padding: 5px 0 5px 15px; /* Biraz içeriden başlasın */

    min-width: auto;         /* Genişlik sıfırla */

    display: block !important; /* JS'in gizlemesini engelle, hep açık olsun */

    background: transparent; /* Arka plan şeffaf */

    column-count: 1;         /* Tek sütun olsun */

    

    /* 3. Seviye her zaman görünür (üst menü açılınca) */

    opacity: 1;

    visibility: visible;

    transform: none;

    pointer-events: auto;

}



.nav-menu .sub-menu .sub-menu li {

    width: 100%; /* Tam genişlik */

}



.nav-menu .sub-menu .sub-menu a {

    padding: 8px 0;          /* Dikey boşluk */

    font-size: 14px;         /* Font boyutu */

    border-bottom: none;     /* Alt çizgiyi kaldır */

    display: flex;           /* İkon hizalaması için flex */

    align-items: center;

    color: #555;             /* Hafif gri renk */

}



/* 3. Seviye Link Soluna Chevron Right Ekle */

.nav-menu .sub-menu .sub-menu a::before {

    content: "\f054";        /* fa-chevron-right */

    font-family: "Font Awesome 6 Free";

    font-weight: 900;

    font-size: 10px;

    margin-right: 8px;       /* Yazı ile ikon arası boşluk */

    color: #999;             /* İkon rengi */

    transition: all 0.3s ease;

}



/* 3. Seviye Hover Durumu */

.nav-menu .sub-menu .sub-menu a:hover::before {

    color: var(--color-secondary); /* Sarı */

    transform: translateX(3px);    /* Hafif sağa kayma efekti */

}



.nav-menu .sub-menu .sub-menu a:hover {

    background-color: transparent; /* Arka plan değişimini kapat */

    color: var(--color-primary);   /* Yazı rengi */

    padding-left: 0;               /* 2. seviyedeki kayma efektini sıfırla */

}



/* ============================

   ALTERNATING DROPDOWN STYLES

   (Tek/Çift Mantığı: 1. Lacivert, 2. Beyaz, 3. Lacivert...)

   ============================ */



/* GÜNCELLENDİ: Sadece dropdown'u olanları sayarak Tek Numaralıları seç (1, 3, 5...) */

.nav-menu > li:nth-child(odd of .menu-item-has-children) .sub-menu {

    background-color: var(--color-primary); /* Lacivert */

    /* border-top rengi aynı kalabilir (sarı) */

}



/* Tek Numaralı Dropdown İçindeki Linkler (Beyaz Yazı) */

.nav-menu > li:nth-child(odd of .menu-item-has-children) .sub-menu a {

    color: #fff;

    border-bottom-color: rgba(255,255,255,0.1); /* Çizgiler silik beyaz */

}



/* Tek Numaralı Dropdown Hover Durumu (Zemin hafif açılır, yazı Sarı) */

.nav-menu > li:nth-child(odd of .menu-item-has-children) .sub-menu a:hover {

    background-color: rgba(255,255,255,0.05); /* Çok hafif beyaz tint */

    color: var(--color-secondary); /* Sarı */

}



/* 3. Seviye Menü (Lacivert Dropdown İçinde) */

.nav-menu > li:nth-child(odd of .menu-item-has-children) .sub-menu .sub-menu a {

    color: rgba(255,255,255,0.7); /* Alt menüler hafif gri/beyaz */

}



/* 3. Seviye Menü İkon Rengi (Lacivert Dropdown İçinde) */

.nav-menu > li:nth-child(odd of .menu-item-has-children) .sub-menu .sub-menu a::before {

    color: rgba(255,255,255,0.5);

}



/* 3. Seviye Menü Hover (Lacivert Dropdown İçinde) */

.nav-menu > li:nth-child(odd of .menu-item-has-children) .sub-menu .sub-menu a:hover {

    color: #fff; /* Hoverda tam beyaz */

}



.nav-menu > li:nth-child(odd of .menu-item-has-children) .sub-menu .sub-menu a:hover::before {

    color: var(--color-secondary); /* İkon sarı */

}





/* Header Actions (Search & Lang) */

.header-actions {

    display: flex;

    align-items: center;

    gap: 20px;

}



.search-toggle-btn {

    background: none;

    border: none;

    cursor: pointer;

    font-family: var(--font-heading);

    font-weight: 700;

    font-size: 15px;

    color: var(--color-primary);

    display: flex;

    align-items: center;

    gap: 8px;

}



.search-toggle-btn i {

    font-size: 18px;

}



/* ============================

   RESPONSIVE HEADER & MOBILE MENU

   ============================ */



/* Masaüstünde Hamburgeri Gizle */

.mobile-menu-toggle {

    display: none;

    background: none;

    border: none;

    font-size: 24px;

    color: var(--color-primary);

    cursor: pointer;

    padding: 5px;

}



/* Mobile Özgü Ayarlar (992px altı - Tablet ve Mobil) */

@media (max-width: 991px) {

    /* Desktop Menüyü Gizle */

    .desktop-nav {

        display: none !important;

    }



    /* Top Bar'ı Mobilde Gizle (Opsiyonel, tasarıma göre açılabilir) */

    .hidden-mobile {

        display: none !important;

    }



    /* Hamburgeri Göster */

    .mobile-menu-toggle {

        display: block;

    }




    /* Arama Etiketini Gizle, Sadece İkon Kalsın */

    .search-label {

        display: none;

    }

    .service.item {
        height: 300px !important;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

}



/* MOBİL MENÜ STİLLERİ (Sağdan Kayan Panel) 

   Görseldeki siyah tema ve yapı

*/



/* Overlay (Arka plan karartma) */

.mobile-menu-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.5);

    z-index: 9998;

    opacity: 0;

    visibility: hidden;

    transition: all 0.3s ease;

}



.mobile-menu-overlay.active {

    opacity: 1;

    visibility: visible;

}



/* Panel (Menü Alanı) */

.mobile-menu-panel {

    position: fixed;

    top: 0;

    right: -320px; /* Başlangıçta ekran dışı */

    width: 300px;

    height: 100%;

    background-color: #111; /* Siyah Arka Plan */

    z-index: 9999;

    transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1);

    display: flex;

    flex-direction: column;

    box-shadow: -5px 0 20px rgba(0,0,0,0.2);

}



.mobile-menu-panel.active {

    right: 0; /* İçeri kay */

}



/* Panel Header (Kapatma Butonu) */

.mobile-menu-header {

    padding: 20px;

    display: flex;

    justify-content: flex-end;

    /* border-bottom: 1px solid rgba(255,255,255,0.1); Opsiyonel çizgi */

}



.mobile-menu-close {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,0.5); /* Beyaz çerçeve */

    background: transparent;

    color: #fff;

    font-size: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.3s ease;

}



.mobile-menu-close:hover {

    background: #fff;

    color: #000;

}



/* Mobil Navigasyon Listesi */

.mobile-menu-content {

    padding: 20px;

    overflow-y: auto;

}



.mobile-nav-menu {

    list-style: none;

    margin: 0;

    padding: 0;

}



.mobile-nav-menu li {

    position: relative;

    border-bottom: 1px solid rgba(255,255,255,0.05);

}



.mobile-nav-menu li:last-child {

    border-bottom: none;

}



.mobile-nav-menu a {

    display: block;

    padding: 15px 0;

    color: #fff;

    font-size: 16px;

    font-weight: 600;

    text-decoration: none;

    transition: color 0.3s ease;

}



.mobile-nav-menu a:hover {

    color: var(--color-secondary); /* Hoverda sarı */

}



/* Sub Menu (Dropdown) */

.mobile-nav-menu .sub-menu {

    display: none; /* JS ile açılacak */

    list-style: none;

    margin: 0;

    padding-left: 15px;

    background-color: rgba(255,255,255,0.05); /* Hafif açık bir ton */

    margin-bottom: 10px;

}



.mobile-nav-menu .sub-menu li {

    border-bottom: none;

}



.mobile-nav-menu .sub-menu a {

    font-size: 14px;

    padding: 10px 0;

    font-weight: 400;

    color: rgba(255,255,255,0.8);

}



/* Dropdown Toggle (Ok İşareti) */

.dropdown-toggle {

    position: absolute;

    right: 0;

    top: 15px; /* Link padding'i ile hizalı */

    width: 30px;

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    cursor: pointer;

    background-color: rgba(255,255,255,0.1); /* Kutu arka planı */

    border-radius: 4px;

    transition: all 0.3s ease;

}



.dropdown-toggle:hover {

    background-color: var(--color-secondary);

    color: var(--color-primary);

}



.dropdown-toggle.active {

    transform: rotate(180deg); /* Açılınca dönme efekti */

    background-color: var(--color-secondary);

    color: var(--color-primary);

}





/* ============================

   SLIDE DOWN SEARCH PANEL

   ============================ */

.search-panel {

    display: none;

    background-color: #fff;

    position: absolute;

    top: 100%;

    right: 0;

    width: 360px;

    padding: 30px 0;

    box-shadow: 0 10px 20px rgba(0,0,0,0.05);

    border-top: 1px solid #eee;

    z-index: 90;

}



.search-form {

    max-width: 100%;

}



.search-wrapper {

    position: relative;

    max-width: 600px;

    margin: 0;

    display: flex;

    align-items: center;

    border-bottom: 1px solid #ccc;

    padding-bottom: 10px;

}



.search-submit {

    background: none;

    border: none;

    color: #999;

    font-size: 18px;

    cursor: pointer;

    padding-right: 15px;

}



.search-field {

    border: none;

    background: transparent;

    font-size: 16px;

    color: var(--color-text);

    width: 100%;

    outline: none;

    font-family: var(--font-body);

}



.search-field::placeholder {

    color: #999;

}



/* ============================

   HERO SECTION

   ============================ */

.hero-section {

    position: relative;

    width: 100%;

    height: 85vh; /* Ekranın %85'i */

    min-height: 600px;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    margin-top: 0; /* Header sticky olduğu için eksi margin kaldırıldı */

}



.hero-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.4); /* Görsel üzerine hafif karartma */

    z-index: 1;

}



.hero-container {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 100%; /* Full width yapısı için 1200px kaldırıldı */

    padding: 0 var(--site-padding); /* Global 30px padding değişkeni kullanıldı */

}



.hero-content {

    text-align: center;

    max-width: 900px;

    margin: 0 auto;

}



/* Hero Typography */

.hero-headline {

    font-family: var(--font-heading);

    font-weight: 700;

    font-size: clamp(28px, 5.2vw, 78px);

    line-height: 1.1;

    letter-spacing: .2px;

    margin: 0 0 20px 0;

    color: #fff;

    display: flex;

    flex-direction: column; /* Mobilde kelime ve sabit metin alt alta daha iyi durabilir */

    justify-content: center;

    align-items: center;

}



/* Ekran genişse yan yana da durabilir ama tasarımda alt alta sarı kelime üstte gibi duruyor */

@media (min-width: 768px) {

    .hero-headline {

        display: block; /* Tek satır veya wrap */

    }

}



.hero-subtext {

    font-size: 18px;

    font-weight: 400;

    color: #fff;

    margin-bottom: 40px;

    line-height: 1.5;

    max-width: 700px;

    margin-left: auto;

    margin-right: auto;

}



@media (min-width: 768px) {

    .hero-subtext {

        font-size: 20px;

    }

}



/* ============================

   ROTATING TEXT ANIMATION

   ============================ */

.rotw-rotor {

    display: inline-grid;

    vertical-align: bottom; /* Hizalama düzeltmesi */

    white-space: nowrap;

    color: var(--color-secondary);

    margin-right: 10px; /* Sabit metin ile ara boşluk */

    height: 1.1em; /* Yükseklik sabitleme titremeyi önler */

    overflow: visible; /* Taşan animasyonlar görünsün */

}



.rotw-word {

    grid-area: 1/1;

    opacity: 0;

    transform: translateY(10px);

    position: relative;

    color: inherit;

    /* Süreyi PHP'den dinamik alabiliriz ama fallback olarak 18s */

    animation: rotw var(--total-anim-duration, 18s) infinite ease-in-out;

}



/* Animasyon Keyframes */

@keyframes rotw {

    0%, 5% { opacity: 0; transform: translateY(10px); }

    6%, 22% { opacity: 1; transform: translateY(0); }

    23%, 28% { opacity: 0; transform: translateY(-10px); }

    100% { opacity: 0; transform: translateY(-10px); }

}



@media (prefers-reduced-motion: reduce) {

    .rotw-word { animation: none; opacity: 1; }

    .rotw-word:not(:first-child) { display: none; }

}



/* ============================

   BUTTONS

   ============================ */

.hero-buttons {

    display: flex;

    justify-content: center;

    gap: 20px;

    flex-wrap: wrap;

}



.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 15px 35px;

    border-radius: 50px; /* Oval butonlar */

    font-weight: 700;

    font-size: 15px;

    transition: all 0.3s ease;

    cursor: pointer;

    text-transform: capitalize;

}



.btn i {

    margin-left: 10px;

    font-size: 12px;

}



/* Beyaz Buton Tipi (Görseldeki gibi) */

.btn-white {

    background-color: #fff;

    color: var(--color-primary); /* Metin rengi koyu */

    border: 2px solid #fff;

}



.btn-white:hover {

    background-color: var(--color-secondary); /* Hoverda sarı */

    border-color: var(--color-secondary);

    color: var(--color-primary);

}



/* Alternatif stil istenirse */

.btn-primary {

    background-color: var(--color-primary);

    color: #fff;

}



/* ============================

   SERVICES SECTION

   ============================ */

.services-section {

    padding-top: 80px; 

    /* Alt boşluk yok */

    /* Taşma efekti için section'ın z-index yönetimi gerekebilir ama şimdilik standart kalsın */

}



.services-header {

    text-align: center;

    margin-bottom: 50px;

    max-width: 800px;

    margin-left: auto;

    margin-right: auto;

}



.section-title {

    font-size: 36px;

    margin-bottom: 20px;

    color: var(--color-primary);

}



.section-subtitle {

    font-size: 18px;

    color: #666;

    line-height: 1.6;

}



/* Full Width Grid */

.services-grid {

    display: grid;

    grid-template-columns: repeat(1, 1fr); 

    width: 100%;

}



@media (min-width: 768px) {

    .services-grid {

        grid-template-columns: repeat(2, 1fr); 

    }

}



@media (min-width: 1024px) {

    .services-grid {

        grid-template-columns: repeat(4, 1fr); 

    }

}



/* Service Item (KARTIN KENDİSİ) */

.service-item {

    position: relative;

    display: block;

    height: 600px;

    overflow: hidden; /* İçerik dışarı taşmasın, köşe yumuşatma vs için */

    text-decoration: none;

    z-index: 1; /* Varsayılan katman */

    /* KARTIN KENDİSİNE ANİMASYON VERİYORUZ */

    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* Transform origin'i ortada tutuyoruz ki her yöne büyüsün */

    transform-origin: center center;

    border-right: 1px solid rgba(255,255,255,0.1); /* Opsiyonel: Kartlar arasına ince çizgi */

}



/* Hover Durumu: KARTIN TAMAMI BÜYÜYOR VE ÖNE ÇIKIYOR */

.service-item:hover {

    transform: scale(1.1); /* Kullanıcı isteğiyle %10 olarak güncellendi */

    z-index: 50; /* Diğer kartların üzerine çıkar (En önemli kısım) */

    box-shadow: 0 30px 60px rgba(0,0,0,0.5); /* Derinlik katan güçlü bir gölge */

    border-radius: 4px; /* Hafif köşe yuvarlama şık durur */

}



/* Background Image */

.service-bg {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-size: cover;

    background-position: center;

    z-index: 1;

    /* Resim ayrıca içinde büyümeyecek, kartla beraber büyüyecek. 

       Ama ekstra efekt istersen buraya da scale ekleyebiliriz. Şimdilik kapattım. */

    /* transition: transform 0.8s ease; */

}



/* Overlay */

.service-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    /* Sabit gradient */

    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0.1) 100%);

    z-index: 2;

    pointer-events: none;

}



/* Content */

.service-content {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    padding: 40px 30px;

    z-index: 3;

    color: #fff;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

}



.service-icon {

    margin-bottom: 20px;

    opacity: 0; 

    transform: translateY(20px);

    transition: all 0.4s ease 0.1s; /* Hafif gecikme */

}



.service-icon i {

    font-size: 32px;

    color: #fff; /* İkon rengi beyaz */

}



.service-title {

    font-size: 24px;

    font-weight: 700;

    margin-bottom: 10px;

    color: #fff;

    line-height: 1.3;

}



.service-desc {

    font-size: 15px;

    color: rgba(255, 255, 255, 0.9);

    line-height: 1.5;

    margin-bottom: 0;

    max-height: 0; 

    overflow: hidden;

    opacity: 0;

    transition: all 0.4s ease;

}



/* Hover Effects (İçerik) */

.service-item:hover .service-icon {

    opacity: 1;

    transform: translateY(0);

}



.service-item:hover .service-desc {

    max-height: 150px;

    opacity: 1;

    margin-top: 10px;

}





/* ============================

   SECTORS SECTION

   ============================ */

.sectors-section {

    padding: 80px 0;

    background-color: #fff; /* Veya tasarımda gri ise değiştirilir */

}



.sectors-header {

    text-align: center;

    margin-bottom: 50px;

    max-width: 800px;

    margin-left: auto;

    margin-right: auto;

}



/* Sektör Grid Yapısı */

.sectors-grid {

    display: grid;

    /* Mobilde 2, Tablette 4, Masaüstünde 7 kolon (Görsele uygun olması için) */

    grid-template-columns: repeat(2, 1fr);

    border-top: 1px solid #eee; /* Üst ve sol çizgiler grid genelinde */

    border-left: 1px solid #eee;

}



@media (min-width: 768px) {

    .sectors-grid {

        grid-template-columns: repeat(4, 1fr);

    }

}



@media (min-width: 1200px) {

    .sectors-grid {

        grid-template-columns: repeat(7, 1fr); /* 7'li yapı görseldeki gibi */

    }

}



/* Sektör Kartı */

.sector-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 40px 10px;

    text-align: center;

    text-decoration: none;

    background-color: #fff;

    border-right: 1px solid #eee; /* Sağ ve alt çizgiler her hücrede */

    border-bottom: 1px solid #eee;

    

    /* Animasyon */

    position: relative;

    z-index: 1;

    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    cursor: pointer;

}



/* İkon Stili */

.sector-icon {

    font-size: 32px;

    color: var(--color-primary); /* Varsayılan Lacivert */

    margin-bottom: 20px;

    transition: transform 0.3s ease;

}



.sector-title {

    font-size: 14px;

    font-weight: 700;

    color: var(--color-primary); /* Varsayılan Lacivert */

    margin: 0;

}



/* Hover Efektleri */

.sector-item:hover {

    background-color: var(--color-secondary); /* Arka plan Sarı */

    transform: scale(1.1); /* %10 Büyüme (Pop-out) */

    z-index: 10; /* Öne çıkması için */

    box-shadow: 0 15px 30px rgba(0,0,0,0.15); /* Gölge */

    border-color: transparent; /* Kenar çizgileri kaybolsun */

    border-radius: 4px; /* Hafif yuvarlama */

}



/* Hoverda İkon ve Metin Rengi */

.sector-item:hover .sector-icon,

.sector-item:hover .sector-title {

    color: var(--color-primary); /* Lacivert kalıyor (İsteğine uygun) */

}



/* Hoverda ikon hafifçe yukarı kayabilir (Opsiyonel, şık durur) */

.sector-item:hover .sector-icon {

    transform: translateY(-5px);

}





/* ============================

   SUPPORTS SECTION (Timeline Layout)

   ============================ */

.supports-section {

    padding: 80px 0;

    background-color: #f9f9f9; /* Görseldeki gibi hafif gri arka plan */

}



.supports-header {

    text-align: center;

    margin-bottom: 60px;

}



.supports-grid {

    display: grid;

    grid-template-columns: 1fr;

    gap: 40px;

}



@media (min-width: 992px) {

    .supports-grid {

        grid-template-columns: 1fr 1fr;

        gap: 80px; /* Sütunlar arası boşluk */

    }

}



.supports-col {

    display: flex;

    flex-direction: column;

    gap: 40px;

}



/* Support Item Genel */

.support-item {

    display: flex;

    align-items: flex-start;

    gap: 30px;

    cursor: pointer; /* Link olduğu için pointer eklendi */

    text-decoration: none; /* Link alt çizgisini kaldır */

}



/* Sol Sütun Ayarları */

.item-left {

    flex-direction: row;

    text-align: left;

}



/* Sağ Sütun Ayarları */

.item-right {

    flex-direction: row; /* Mobilde normal sıra */

}



@media (min-width: 992px) {

    .item-right {

        flex-direction: row; /* Görseldeki gibi sağda numara istiyorsak içerik solda olmalı */

        justify-content: flex-end;

        text-align: right;

    }

    

    /* Sağ sütunda içerik metinleri sağa yaslansın */

    .item-right .support-content {

        order: 1; /* İçerik solda */

    }

    .item-right .support-number {

        order: 2; /* Numara sağda */

    }

}



/* Numara Yuvarlağı */

.support-number {

    position: relative;

    flex-shrink: 0;

    width: 60px;

    height: 60px;

    background-color: var(--color-primary); /* Lacivert */

    color: #fff;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 24px;

    font-weight: 700;

    font-family: var(--font-heading);

    transition: background-color 0.3s ease, color 0.3s ease;

    z-index: 2;

}



/* Dikey Çizgi */

.timeline-line {

    position: absolute;

    top: 60px; /* Yuvarlağın bittiği yer */

    left: 50%;

    transform: translateX(-50%);

    width: 1px;

    height: 100px; /* Aşağıya uzanan çizgi, content boyuna göre yetmeyebilir, js gerekebilir ama css ile fix bir boy verebiliriz veya container border'ı kullanabiliriz. 

                      Ancak görselde her numaradan aşağı inen bir çizgi var. */

    background-color: #e5e5e5;

    z-index: 1;

}



/* Son elemanlarda çizgiyi gizle */

.supports-col .support-item:last-child .timeline-line {

    display: none;

}



/* Hover Efekti: Yuvarlak Sarı Olur */

.support-item:hover .support-number {

    background-color: var(--color-secondary); /* Sarı */

    color: var(--color-primary); /* Yazı Lacivert */

}



/* İçerik Alanı */

.support-content {

    flex: 1;

}



.support-title {

    font-size: 14px;

    font-weight: 800;

    text-transform: uppercase;

    color: var(--color-primary);

    margin-bottom: 10px;

    letter-spacing: 0.5px;

}



.support-desc {

    font-size: 15px;

    color: #555;

    line-height: 1.6;

    margin: 0;

}



/* Mobilde Sağ Sütun Düzeni */

@media (max-width: 991px) {

    .item-right {

        text-align: left;

    }

    .item-right .support-content {

        order: 2;

    }

    .item-right .support-number {

        order: 1;

    }

}



/* ============================

   PARALLAX SECTION

   ============================ */

.parallax-section {

    position: relative;

    width: 100%;

    padding: 100px 0; /* İsteğin üzerine 100px padding */

    background-attachment: fixed; /* Parallax Efekti */

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    color: #fff;

}



.parallax-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(5, 10, 48, 0.85); /* Marka rengi lacivert overlay (%85 opaklık) */

    z-index: 1;

}



.parallax-container {

    position: relative;

    z-index: 2;

    max-width: 900px;

    margin: 0 auto;

    padding: 0 30px;

}



.parallax-text {

    font-size: 28px; /* Görseldeki gibi büyük font */

    font-weight: 700;

    line-height: 1.5;

    margin: 0;

    color: #fff;

}



@media (max-width: 768px) {

    .parallax-text {

        font-size: 20px;

    }

    /* Mobilde fixed background performansı bazen düşük olabilir, gerekirse 'scroll' yapılabilir */

    .parallax-section {

        background-attachment: scroll; 

    }

}



/* ============================

   JOURNEY SECTION (Timeline)

   ============================ */

.journey-section {

    padding: 100px 0; /* Görselde bol boşluk var */

    background-color: #fff;

}



.journey-header {

    text-align: center;

    margin-bottom: 80px;

}



.journey-title {

    font-size: 32px;

    font-weight: 700;

    color: var(--color-primary);

}



/* Timeline Wrapper */

.journey-timeline-wrapper {

    position: relative;

    margin: 0 auto;

    padding: 0 20px;

}



/* Yatay Kesikli Çizgi */

.timeline-dashed-line {

    position: absolute;

    top: 40px; /* Numara yuvarlağının ortasına denk gelecek */

    width: auto; /* Genişliği JS/PHP ile inline veriyoruz, varsayılan auto */

    left: 0;

    right: 0;

    height: 1px;

    border-top: 1px dashed #ccc;

    z-index: 1;

    display: none; /* Mobilde gizle */

}



@media (min-width: 992px) {

    .timeline-dashed-line {

        display: block;

    }

}



/* Grid Layout */

.journey-steps {

    display: grid;

    gap: 40px;

    position: relative;

    z-index: 2;

    /* Varsayılan (mobil) 1 kolon */

    grid-template-columns: 1fr;

}



@media (min-width: 992px) {

    .journey-steps {

        /* Masaüstünde inline style ile gelen --step-count değişkenini kullanıyoruz */

        grid-template-columns: repeat(var(--step-count, 5), 1fr);

        gap: 20px;

    }

}



/* Step Item */

.step-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    position: relative;

    transition: all 0.3s ease;

    cursor: default;

}



/* Numara Yuvarlağı */

.step-number-circle {

    width: 80px;

    height: 80px;

    background-color: var(--color-primary); /* Lacivert */

    color: #fff;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 24px;

    font-weight: 700;

    margin-bottom: 30px;

    position: relative;

    z-index: 2;

    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    box-shadow: 0 5px 15px rgba(0,0,0,0.1);

}



/* Başlık */

.step-title-text {

    font-size: 18px;

    font-weight: 800;

    color: var(--color-primary);

    margin-bottom: 15px;

    line-height: 1.3;

    transition: color 0.3s ease;

}



/* Açıklama */

.step-desc-text {

    font-size: 14px;

    color: #555;

    line-height: 1.6;

    margin: 0;

}



/* --- HOVER EFEKTLERİ --- */

.step-item:hover .step-number-circle {

    background-color: var(--color-secondary); /* Sarı */

    color: #fff;

    transform: scale(1.1); /* Hafif büyüme */

    box-shadow: 0 10px 25px rgba(254, 198, 25, 0.4);

}



.step-item:hover .step-title-text {

    color: var(--color-primary); /* Başlık rengi aynı kalabilir veya değişebilir */

}



/* Mobilde Çizgi (Dikey) - Opsiyonel */

@media (max-width: 991px) {

    .step-item {

        margin-bottom: 30px;

    }

    

    /* İstenirse dikey çizgi eklenebilir ama tasarımda sadece yatay istendiği için boş bırakıyorum */

}



/* ============================

   VALUES SECTION

   ============================ */

.values-section {

    width: 100%;

    background-color: #fdfdfd; /* Sağ taraf için çok hafif bir arka plan */

}



.values-wrapper {

    display: flex;

    flex-wrap: wrap;

    min-height: 600px; /* Görselin yeterince yüksek olması için */

}



/* Sol Görsel Sütunu */

.values-image-col {

    width: 100%;

    position: relative;

    min-height: 400px; /* Mobil için min yükseklik */

}



/* Overlay Eklemesi (YENİ) */

.values-image-col::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(5, 10, 48, 0.65); /* Lacivert Overlay (%65 Opaklık) */

    z-index: 1;

}



@media (min-width: 992px) {

    .values-image-col {

        width: 50%;

        min-height: auto; /* Masaüstünde content kadar uzasın */

    }

}



.values-bg {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-size: cover;

    background-position: center;

    z-index: 0; /* Overlay'in altında kalması için */

}



/* Sağ İçerik Sütunu */

.values-content-col {

    width: 100%;

    padding: 60px 30px; /* Mobilde standart boşluk */

    display: flex;

    align-items: center;

}



@media (min-width: 992px) {

    .values-content-col {

        width: 50%;

        padding: 100px 80px; /* Masaüstünde sabit 100px padding */

    }

}



.values-content-inner {

    max-width: 600px; /* İçeriğin çok yayılmasını engelle */

    width: 100%;

}



.values-title {

    font-size: 36px;

    font-weight: 700;

    color: var(--color-primary);

    margin-bottom: 40px;

}



/* Accordion Styles */

.values-accordion {

    margin-bottom: 40px;

    border-top: 1px solid #eee; /* İlk çizgi */

}



.val-acc-item {

    border-bottom: 1px solid #eee; /* Alt çizgiler */

}



.val-acc-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 20px 0;

    cursor: pointer;

    transition: all 0.3s ease;

}



.val-acc-title {

    font-size: 16px;

    font-weight: 700;

    color: var(--color-primary);

    margin: 0;

    transition: color 0.3s ease;

}



.val-acc-icon {

    font-size: 14px;

    color: #999;

    transition: transform 0.3s ease;

}



.val-acc-content {

    display: none; /* Başlangıçta kapalı */

}



.val-acc-body {

    padding-bottom: 20px;

    color: #666;

    line-height: 1.6;

    font-size: 15px;

}



/* Active State */

.val-acc-item.active .val-acc-header {

    /* Aktif header stili gerekirse */

}



.val-acc-item.active .val-acc-title {

    color: var(--color-secondary); /* Aktif başlık rengi */

}



.val-acc-item.active .val-acc-icon {

    transform: rotate(45deg); /* Artı işaretini çarpıya çevirir */

    color: var(--color-primary);

}



/* Alt Metin */

.values-bottom-text {

    font-size: 15px;

    color: #333;

    line-height: 1.7;

}



.values-bottom-text p {

    margin-bottom: 15px;

}



.values-bottom-text strong {

    color: var(--color-primary);

    font-weight: 700;

}



@media (min-width: 992px) {

    .values-image-col {

        height: 75vh;          /* Tam ekran yüksekliği */

        position: sticky;

        top: 0;

    }



    .values-wrapper {

        align-items: flex-start; /* Esneme davranışını kapatır */

    }

}



/* ============================

   BLOG SECTION

   ============================ */

.blog-section {

    padding: 100px 0;

    background-color: #fff;

}



.blog-header {

    text-align: center;

    margin-bottom: 60px;

    max-width: 800px;

    margin-left: auto;

    margin-right: auto;

}



/* Blog Grid */

.blog-grid {

    display: grid;

    grid-template-columns: 1fr;

    gap: 30px;

}



@media (min-width: 768px) {

    .blog-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media (min-width: 992px) {

    .blog-grid {

        grid-template-columns: repeat(3, 1fr); /* Masaüstünde 3 sütun */

    }

}



/* Blog Kartı */

.blog-item {

    display: flex;

    flex-direction: column;

    background-color: #fff;

    border: 1px solid #eee;

    text-decoration: none;

    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    overflow: hidden;

}



/* Görsel Alanı */

.blog-img-wrapper {

    position: relative;

    height: 250px;

    overflow: hidden;

}



/* Hover Overlay (YENİ EKLENEN) */

.blog-img-wrapper::after {

    content: "\f061"; /* FontAwesome Ok İkonu */

    font-family: "Font Awesome 6 Free";

    font-weight: 900;

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: var(--color-primary); /* Lacivert Arka Plan */

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 32px;

    opacity: 0; /* Başlangıçta gizli */

    transition: opacity 0.3s ease;

    z-index: 1; /* Görselin üstünde, kategorinin altında */

}



.blog-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;

}



.blog-img-placeholder {

    width: 100%;

    height: 100%;

    background-color: #f0f0f0; /* Görsel yoksa gri alan */

}



/* Kategori Etiketi */

.blog-category {

    position: absolute;

    top: 20px;

    left: 20px;

    background-color: var(--color-secondary); /* Sarı */

    color: var(--color-primary); /* Lacivert */

    padding: 5px 15px;

    font-size: 13px;

    font-weight: 700;

    text-transform: uppercase;

    z-index: 2; /* Overlay'in üstünde kalsın */

    transition: all 0.3s ease;

}



/* İçerik Alanı */

.blog-content {

    padding: 30px;

    flex: 1;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    transition: background-color 0.3s ease, color 0.3s ease;

}



.blog-item-title {

    font-size: 20px;

    font-weight: 700;

    color: var(--color-primary);

    margin-bottom: 20px;

    line-height: 1.4;

    transition: color 0.3s ease;

}



.blog-meta {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 14px;

    color: #777;

    border-top: 1px solid #eee;

    padding-top: 20px;

    transition: border-color 0.3s ease, color 0.3s ease;

}



.blog-date i {

    margin-right: 5px;

}



.blog-read-more {

    font-weight: 700;

    color: var(--color-primary);

    display: flex;

    align-items: center;

    transition: color 0.3s ease;

}



.blog-read-more i {

    margin-left: 5px;

    font-size: 12px;

    transition: transform 0.3s ease;

}



/* --- HOVER EFEKTLERİ (İlk görsele uygun) --- */



/* Kartın kendisi yukarı kalkar ve gölge alır */

.blog-item:hover {

    transform: translateY(-10px);

    box-shadow: 0 20px 40px rgba(0,0,0,0.1);

    border-color: transparent;

}



/* Görsel hafifçe büyür */

.blog-item:hover .blog-img {

    transform: scale(1.1);

}



/* Görsel Overlay Görünür Olur (YENİ) */

.blog-item:hover .blog-img-wrapper::after {

    opacity: 1;

}



/* Kategori etiketi renk değiştirir */

.blog-item:hover .blog-category {

    background-color: var(--color-secondary);

    color: var(--color-primary);

    /* Kategori etiketi overlay'in üstünde (z-index: 2) olduğu için görünmeye devam eder */

}



/* İçerik alanı lacivert olur */

.blog-item:hover .blog-content {

    background-color: var(--color-primary);

}



/* Başlık ve meta renkleri beyaza döner */

.blog-item:hover .blog-item-title,

.blog-item:hover .blog-meta,

.blog-item:hover .blog-date,

.blog-item:hover .blog-read-more {

    color: #fff;

}



/* Meta üstü çizgi beyaza döner */

.blog-item:hover .blog-meta {

    border-color: rgba(255,255,255,0.2);

}



/* Ok işareti sağa kayar */

.blog-item:hover .blog-read-more i {

    transform: translateX(5px);

}



/* ============================

   NEWSLETTER SECTION

   ============================ */

.newsletter-section {

    padding: 40px 0; /* İnce bir şerit */

    background-color: #fff; /* Görselde beyaz zemin üzerinde duruyor */

    border-top: 1px solid #eee; /* Üst çizgi */

}



.newsletter-wrapper {

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 30px;

}



/* Sol Metin */

.newsletter-content {

    flex: 1;

    min-width: 300px;

}



.newsletter-text {

    font-size: 18px;

    font-weight: 800; /* Kalın font */

    color: var(--color-primary); /* Lacivert */

    margin: 0;

}



/* Sağ Form Alanı */

.newsletter-form-area {

    flex-shrink: 0;

    max-width: 100%; /* Mobilde taşmayı önler */

}



/* CF7 Form Yapısı */

.newsletter-form-inner {

    display: flex;

    align-items: center;

    gap: 10px; /* Buton ile input arası boşluk */

}



/* Input Alanı */

.newsletter-input {

    height: 50px;

    border: 1px solid var(--color-primary); /* Lacivert çerçeve */

    border-radius: 25px; /* Tam yuvarlak kenarlar (Pill shape) */

    padding: 0 25px;

    font-size: 14px;

    color: var(--color-text);

    width: 300px; /* Masaüstü için sabit genişlik */

    outline: none;

    background-color: #fff;

    transition: border-color 0.3s ease;

}



.newsletter-input:focus {

    border-color: var(--color-secondary); /* Odaklanınca sarı */

}



.newsletter-input::placeholder {

    color: #999;

}



/* Submit Butonu */

.newsletter-submit {

    width: 50px;

    height: 50px;

    flex-shrink: 0; /* Butonun küçülmesini engeller */

    border-radius: 50%; /* Tam yuvarlak */

    background-color: var(--color-primary); /* Lacivert */

    color: #fff;

    border: none;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.3s ease;

    font-size: 16px;

}



.newsletter-submit:hover {

    background-color: var(--color-secondary); /* Sarı */

    color: var(--color-primary); /* Lacivert ikon */

    transform: scale(1.1);

}



/* Mobil Uyumluluk */

@media (max-width: 768px) {

    .newsletter-wrapper {

        flex-direction: column;

        text-align: center;

        align-items: center;

    }

    

    .newsletter-form-area {

        width: 100%;

    }



    .newsletter-form-inner {

        flex-direction: row; /* Mobilde yan yana kalsın */

        width: 100%;

     /*   justify-content: center; */

    }



    .newsletter-form-inner input {

        max-width: 280px;

    }



    .search-panel {

        width: 100%;

    }



    .newsletter-input {

        width: auto; /* Genişliği serbest bırak */

        flex: 1; /* Kalan boşluğu doldursun */

        min-width: 0; /* Flexbox taşma fix */

    }

}



/* ============================

   CTA BOTTOM SECTION (Parallax)

   ============================ */

.cta-bottom-section {

    position: relative;

    width: 100%;

    padding: 100px 0;

    background-attachment: fixed; /* Parallax Efekti */

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    color: #fff;

}



.cta-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    /* Görseldeki gibi koyu lacivert overlay */

    background: rgba(5, 10, 48, 0.8); 

    z-index: 1;

}



.cta-content {

    position: relative;

    z-index: 2;

    max-width: 800px;

    margin: 0 auto;

}



.cta-title {

    font-size: 48px; /* Görselde başlık oldukça büyük */

    font-weight: 700;

    margin-bottom: 15px;

    color: #fff;

}



.cta-desc {

    font-size: 18px;

    color: #ddd;

    margin-bottom: 40px;

    font-weight: 400;

}



.cta-btn-wrapper {

    display: flex;

    justify-content: center;

}



/* Outline White Button */

.btn-outline-white {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 15px 40px;

    border: 2px solid #fff; /* Beyaz çerçeve */

    border-radius: 50px; /* Oval */

    background-color: transparent;

    color: #fff;

    font-weight: 700;

    font-size: 16px;

    text-transform: capitalize;

    transition: all 0.3s ease;

}



.btn-outline-white i {

    margin-left: 10px;

    font-size: 18px;

}



.btn-outline-white:hover {

    background-color: #fff;

    color: var(--color-primary); /* Hoverda metin lacivert */

}



@media (max-width: 768px) {

    .cta-bottom-section {

        background-attachment: scroll; /* Mobilde performans için */

        padding: 80px 0;

    }

    

    .cta-title {

        font-size: 32px;

    }

    

    .cta-desc {

        font-size: 16px;

    }

}



/* ============================

   HERO BUTTONS

   ============================ */

.hero-buttons {

    display: flex;

    justify-content: center;

    gap: 20px;

    flex-wrap: wrap;

    margin-top: 40px;

}



.hero-btn {

    display: inline-flex;

    align-items: center;

    justify-content: space-between; /* Yazı solda, ikon sağda */

    padding: 18px 30px;

    border-radius: 50px; /* Tam yuvarlak */

    font-weight: 700;

    font-size: 16px;

    text-decoration: none;

    transition: all 0.3s ease;

    min-width: 220px; /* Genişlik standart olsun */

}



.btn-icon-box {

    display: flex;

    align-items: center;

    /* margin-left iptal çünkü btn-sep var */

}



.btn-sep {

    display: inline-block;

    width: 1px;

    height: 24px;

    margin: 0 15px; /* Çizgi boşluğu */

    transition: background-color 0.3s ease;

}



.hero-btn i {

    font-size: 12px;

    transition: transform 0.3s ease;

}



/* Hover Efekti: Ok sağa kayar */

.hero-btn:hover i {

    transform: translateX(5px);

}



/* Beyaz Buton (Varsayılan Hal) */

.hero-btn-white {

    background-color: #fff;

    color: #000; /* Siyah Yazı */

    border: 2px solid #fff;

}



.hero-btn-white .btn-sep {

    background-color: #ddd; /* Gri çizgi */

}



/* Hover Durumu: Koyu (Antrasit/Siyah) */

.hero-btn-white:hover {

    background-color: #1a1d21; /* Görseldeki koyu renk */

    border-color: #1a1d21;

    color: #fff; /* Beyaz Yazı */

}



.hero-btn-white:hover .btn-sep {

    background-color: rgba(255, 255, 255, 0.3); /* Yarı saydam beyaz çizgi */

}



/* ============================

   FOOTER SECTION

   ============================ */

.site-footer {

    background-color: #050a30; /* Koyu Lacivert (Görseldeki gibi) */

    color: #fff;

    padding: 80px 0 30px;

    font-size: 14px;

}



.footer-top {

    display: grid;

    grid-template-columns: 1fr;

    gap: 40px;

    margin-bottom: 60px;

    border-bottom: 1px solid rgba(255,255,255,0.1);

    padding-bottom: 60px;

}



@media (min-width: 992px) {

    .footer-top {

        grid-template-columns: 2fr 1fr 1.5fr 1.5fr; /* Sütun genişlikleri */

        gap: 60px;

    }

}



/* 1. Marka Sütunu */

.footer-brand-col {

    max-width: 300px;

}



.footer-logo {

    margin-bottom: 25px;

    display: inline-block;

}



.footer-logo img {

    max-height: 60px;

    width: auto;

}



.footer-desc {

    color: #ccc;

    line-height: 1.6;

    margin-bottom: 25px;

}



.footer-social {

    display: flex;

    gap: 15px;

}



.footer-social-link {

    width: 36px;

    height: 36px;

    background-color: rgba(255,255,255,0.1);

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 16px;

    border-radius: 4px;

    transition: all 0.3s ease;

}



.footer-social-link:hover {

    background-color: #fff;

    color: var(--color-primary);

}



/* Widget Başlıkları */

.footer-title {

    font-size: 13px;

    font-weight: 800;

    text-transform: uppercase;

    color: rgba(255,255,255,0.5); /* Soluk başlık rengi */

    margin-bottom: 25px;

    letter-spacing: 0.5px;

}



/* 2. Menü Sütunu */

.footer-links {

    list-style: none;

    margin: 0;

    padding: 0;

}



.footer-links li {

    margin-bottom: 12px;

}



.footer-links a {

    color: #fff;

    text-decoration: none;

    transition: color 0.3s ease;

    font-weight: 500;

}



.footer-links a:hover {

    color: var(--color-secondary); /* Sarı */

}



/* 3. İletişim Sütunu */

.footer-contact-info {

    display: flex;

    flex-direction: column;

    gap: 20px;

}



.contact-group {

    display: flex;

    flex-direction: column;

}



.contact-label {

    font-size: 12px;

    color: rgba(255,255,255,0.5);

    margin-bottom: 5px;

}



.contact-val {

    color: #fff;

    font-weight: 700;

    text-decoration: none;

}



.contact-val.text-large {

    font-size: 18px;

}



/* 4. Bülten Sütunu */

.footer-newsletter .newsletter-form-inner {

    /* Footer içindeki form stili */

    background-color: rgba(255,255,255,0.05); /* Hafif şeffaf zemin */

    padding: 5px;

    border-radius: 50px;

    display: flex;

    align-items: center;

}



.footer-newsletter .newsletter-input {

    background: transparent;

    border: none;

    color: #fff;

    width: 100%;

    padding: 0 15px;

    height: 40px;

}



.footer-newsletter .newsletter-input::placeholder {

    color: rgba(255,255,255,0.5);

}



.footer-newsletter .newsletter-submit {

    background-color: #1a4d4d; /* Görseldeki koyu yeşilimsi ton veya tema rengi */

    /* Eğer tema rengi (sarı) istenirse var(--color-secondary) */

    background-color: rgba(255,255,255,0.2); /* Şimdilik nötr */

    color: #fff;

    width: 40px;

    height: 40px;

}



.footer-newsletter .newsletter-submit:hover {

    background-color: var(--color-secondary);

    color: var(--color-primary);

}



/* Footer Bottom */

.footer-bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 20px;

    font-size: 13px;

    color: rgba(255,255,255,0.6);

}



.footer-bottom-left {

    display: flex;

    gap: 20px;

}



.footer-bottom-left a {

    color: inherit;

    text-decoration: none;

    transition: color 0.3s ease;

}



.footer-bottom-left a:hover {

    color: #fff;

}



@media (max-width: 768px) {

    .footer-bottom {

        flex-direction: column;

        text-align: center;

    }

    

    .footer-bottom-left {

        justify-content: center;

    }

}





/* ============================

   BLOG FILTER SECTION (Yeni)

   ============================ */

.blog-filter-section {

    padding: 0 0 60px 0; /* Üst boşluk yok çünkü Page Header var, alt boşluk var */

}



.blog-filter-list {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 15px;

}



.filter-item {

    display: inline-block;

    padding: 10px 25px;

    border: 1px solid #e5e5e5;

    border-radius: 50px; /* Hap şeklinde butonlar */

    color: #555;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

    transition: all 0.3s ease;

    background-color: #fff;

}



.filter-item:hover {

    border-color: var(--color-primary);

    color: var(--color-primary);

}



.filter-item.active {

    background-color: var(--color-primary); /* Lacivert */

    color: #fff;

    border-color: var(--color-primary);

}



/* Sonuç Bulunamadı Uyarısı */

.no-posts-found {

    text-align: center;

    padding: 60px 0;

    color: #777;

}



.no-posts-found p {

    font-size: 18px;

    margin-bottom: 20px;

}



/* ============================

   SINGLE POST PAGE (Redesign)

   ============================ */

.single-post-section {

    padding: 60px 0 100px;

    background-color: #fff;

}



.single-layout {

    display: grid;

    grid-template-columns: 1fr; /* Mobilde tek kolon */

    gap: 60px;

}



@media (min-width: 992px) {

    .single-layout {

        grid-template-columns: 2fr 1fr; /* Masaüstünde 2/3 ve 1/3 */

        gap: 80px; /* Kolonlar arası geniş boşluk */

    }

}



/* --- SOL KOLON (Main Content) --- */

.single-post-header {

    margin-bottom: 30px;

}



.single-label {

    display: inline-block;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    color: #999;

    margin-bottom: 15px;

}



.single-title {

    font-size: 42px; /* Görseldeki gibi büyük başlık */

    font-weight: 800;

    line-height: 1.2;

    color: var(--color-primary);

    margin-bottom: 20px;

}



.single-meta {

    font-size: 14px;

    color: #555;

    font-weight: 500;

    display: flex;

    align-items: center;

    flex-wrap: wrap;

}



.meta-sep {

    margin: 0 10px;

    color: #ccc;

}



.single-featured-img {

    margin-bottom: 40px;

    border-radius: 4px;

    overflow: hidden;

}



.single-featured-img img {

    width: 100%;

    height: auto;

    display: block;

}



/* İçerik Tipografisi (Görseldeki gibi temiz) */

.entry-content {

    font-size: 18px;

    line-height: 1.7;

    color: #444;

}



.entry-content p {

    margin-bottom: 25px;

}



.entry-content h2, 

.entry-content h3 {

    font-weight: 800;

    color: var(--color-primary);

    margin-top: 40px;

    margin-bottom: 20px;

    line-height: 1.3;

}



.entry-content h2 { font-size: 28px; }

.entry-content h3 { font-size: 24px; }



.entry-content strong {

    color: #000;

}



/* --- SAĞ KOLON (Sidebar) --- */

.single-sidebar-col {

    padding-top: 10px;

}



.sidebar-widget {

    margin-bottom: 40px;

    background-color: #fff; 

    border: 1px solid #eee; /* Çerçeve Eklendi */

    border-radius: 4px; /* Hafif yuvarlak köşeler */

    padding: 30px; /* İç boşluk */

    box-shadow: 0 5px 15px rgba(0,0,0,0.02); /* Çok hafif gölge */

}



.widget-title {

    font-size: 18px;

    font-weight: 800;

    color: var(--color-primary);

    margin-bottom: 25px;

    padding-bottom: 15px; /* Alt çizgi için boşluk */

    border-bottom: 1px solid #eee; /* Başlık altı çizgi */

    position: relative;

}



/* Widget: Search */

.sidebar-search-form {

    position: relative;

}



.sidebar-search-field {

    width: 100%;

    height: 50px;

    padding: 0 20px 0 45px; /* İkon için soldan boşluk */

    border: 1px solid #e5e5e5;

    border-radius: 4px;

    font-size: 14px;

    color: #333;

    outline: none;

    transition: border-color 0.3s ease;

}



.sidebar-search-field:focus {

    border-color: var(--color-primary);

}



.search-icon {

    position: absolute;

    left: 15px;

    top: 50%;

    transform: translateY(-50%);

    color: #999;

    pointer-events: none;

}



/* Widget: Latest Posts */

.latest-posts-list {

    display: flex;

    flex-direction: column;

    gap: 20px;

}



.latest-post-item {

    display: flex;

    align-items: center;

    text-decoration: none;

    group: ;

}



.lp-thumb {

    width: 60px;

    height: 60px;

    border-radius: 4px;

    overflow: hidden;

    flex-shrink: 0;

    margin-right: 15px;

}



.lp-thumb img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.lp-placeholder {

    width: 100%;

    height: 100%;

    background-color: #f0f0f0;

}



.lp-content {

    flex: 1;

}



.lp-title {

    font-size: 14px;

    font-weight: 700;

    color: var(--color-primary);

    margin: 0 0 5px 0;

    line-height: 1.4;

    transition: color 0.3s ease;

}



.latest-post-item:hover .lp-title {

    color: var(--color-secondary);

}



.lp-date {

    font-size: 12px;

    color: #888;

}



/* Widget: Categories */

.category-list {

    list-style: none;

    margin: 0;

    padding: 0;

}



.category-list li {

    border-bottom: 1px solid #f0f0f0;

}



.category-list li:last-child {

    border-bottom: none;

}



.category-list a {

    display: flex;

    justify-content: space-between;

    padding: 12px 0;

    text-decoration: none;

    color: #555;

    font-size: 15px;

    transition: color 0.3s ease;

}



.category-list a:hover {

    color: var(--color-primary);

}



.cat-count {

    color: #999;

    font-size: 13px;

}



/* Widget: Tags */

.tag-cloud {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}



.tag-pill {

    display: inline-block;

    padding: 6px 15px;

    background-color: #f4f4f4;

    color: #555;

    font-size: 13px;

    border-radius: 50px; /* Hap şeklinde */

    text-decoration: none;

    transition: all 0.3s ease;

}



.tag-pill:hover {

    background-color: var(--color-primary);

    color: #fff;

}



/* ============================

   SUPPORT SINGLE PAGE STYLES

   ============================ */

.support-single-section {

    padding: 60px 0 100px;

    background-color: #fff;

}



.support-layout {

    display: grid;

    grid-template-columns: 1fr;

    gap: 50px;

}



@media (min-width: 992px) {

    .support-layout {

        grid-template-columns: 400px 1fr; /* Sidebar 300px, içerik kalanı kaplar */

        align-items: start;

    }

}



/* --- SIDEBAR STYLES --- */

.support-sidebar {

    background-color: #fff;

    border-radius: 4px;

    overflow: hidden;

    box-shadow: 0 5px 20px rgba(0,0,0,0.05);

    /*position: sticky;*/

    top: 100px; /* Header sticky ise ona göre ayarlanmalı */

}



.sidebar-header {

    background-color: var(--color-primary); /* Lacivert */

    color: #fff;

    padding: 15px 20px;

    font-weight: 700;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.sidebar-menu {

    border: 1px solid #eee;

    border-top: none;

}



.cat-header {

    padding: 15px 20px;

    cursor: pointer;

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-weight: 600;

    color: #333;

    border-bottom: 1px solid #f5f5f5;

    transition: background 0.3s ease;

}



.cat-header:hover {

    background-color: #f9f9f9;

    color: var(--color-primary);

}



.cat-toggle {

    font-size: 12px;

    color: #999;

}



.cat-posts-list {

    list-style: none;

    margin: 0;

    padding: 0;

    display: none; /* JS ile açılacak */

    background-color: #fcfcfc;

}



.cat-posts-list li {

    border-bottom: 1px solid #f0f0f0;

}



.cat-posts-list li a {

    display: block;

    padding: 12px 20px 12px 30px;

    font-size: 14px;

    color: #555;

    text-decoration: none;

    transition: all 0.3s ease;

}



.cat-posts-list li a:hover,

.cat-posts-list li.current-post a {

    color: var(--color-primary);

    background-color: #fff;

    border-left: 3px solid var(--color-primary);

    padding-left: 27px;

    font-weight: 700;

}



/* --- CONTENT STYLES --- */

.support-main-title {

    font-size: 36px;

    font-weight: 800;

    color: var(--color-primary);

    margin-bottom: 40px;

    line-height: 1.2;

}



.content-block {

    margin-bottom: 60px;

}



.block-title {

    font-size: 24px;

    font-weight: 700;

    color: var(--color-primary);

    margin-bottom: 25px;

    border-bottom: 2px solid #eee;

    padding-bottom: 15px;

}



.block-text {

    font-size: 16px;

    line-height: 1.7;

    color: #444;

}



/* Custom Check List (Sarı İkonlu) */

.custom-check-list ul {

    list-style: none;

    padding: 0;

    margin: 0;

}



.custom-check-list li {

    position: relative;

    padding-left: 40px;

    margin-bottom: 15px;

}



.custom-check-list li::before {

    content: "\f00c"; /* FontAwesome Check */

    font-family: "Font Awesome 6 Free";

    font-weight: 900;

    position: absolute;

    left: 0;

    top: 2px;

    width: 24px;

    height: 24px;

    background-color: var(--color-primary);

    color: #fff;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

    transition: all 0.3s ease;

}



.custom-check-list li:hover::before {

    background-color: var(--color-secondary); /* Sarı */

    color: var(--color-primary);

}



/* Custom Table */

.custom-table-wrapper table {

    width: 100%;

    border-collapse: collapse;

    margin-bottom: 20px;

}



.custom-table-wrapper th, 

.custom-table-wrapper td {

    border: 1px solid #e5e5e5;

    padding: 15px;

    text-align: left;

}



.custom-table-wrapper th {

    background-color: #f9f9f9;

    font-weight: 700;

    color: var(--color-primary);

}



.custom-table-wrapper tr:nth-child(even) {

    background-color: #fcfcfc;

}



/* --- PROCESS TIMELINE (GÜNCELLENEN KISIM) --- */

.process-timeline {

    position: relative;

    padding-left: 0;

    margin-top: 30px;

}



/* Dikey Çizgi (Arkada) */

.process-timeline::before {

    content: '';

    position: absolute;

    top: 0;

    bottom: 0;

    left: 40px; /* Daire genişliğinin yarısı (80px / 2) */

    width: 1px;

    background-color: #e5e5e5;

    z-index: 0;

}



.process-item {

    display: flex;

    align-items: flex-start;

    margin-bottom: 50px;

    position: relative;

    z-index: 1;

}



.process-item:last-child {

    margin-bottom: 0;

}



/* Numara Yuvarlağı (Wrapper) */

.process-number {

    flex-shrink: 0;

    width: 80px;

    height: 80px;

    background-color: #f8f8f8; /* Varsayılan açık gri zemin */

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 24px;

    font-weight: 700;

    color: #999; /* Varsayılan gri yazı */

    position: relative;

    transition: all 0.3s ease;

    border: 5px solid #fff; /* Arkadaki çizgiyi kesmesi için beyaz çerçeve */

    box-shadow: 0 2px 10px rgba(0,0,0,0.05);

}



/* Hover Durumu: Numara Lacivert Olur */

.process-item:hover .process-number {

    background-color: var(--color-primary); /* Lacivert */

    color: #fff;

    transform: scale(1.05); /* Hafif büyüme */

}



/* Dönen Kesikli Çizgi (Hover'da Çıkar) */

.process-number::after {

    content: '';

    position: absolute;

    top: -8px; /* Dışarı taşma payı */

    left: -8px;

    right: -8px;

    bottom: -8px;

    border-radius: 50%;

    border: 1px dashed transparent; /* Başlangıçta görünmez */

    transition: all 0.3s ease;

    pointer-events: none;

}



.process-item:hover .process-number::after {

    border-color: var(--color-primary); /* Lacivert kesikli çizgi */

    animation: spin 10s linear infinite; /* Dönme animasyonu */

}



@keyframes spin {

    from { transform: rotate(0deg); }

    to { transform: rotate(360deg); }

}



/* Başlık ve Açıklama */

.process-info {

    padding-left: 40px;

    padding-top: 15px;

    flex: 1;

}



.process-title {

    font-size: 20px;

    font-weight: 800;

    margin-bottom: 10px;

    color: #333;

    transition: color 0.3s ease;

}



.process-item:hover .process-title {

    color: var(--color-primary);

}



.process-desc {

    font-size: 16px;

    color: #666;

    line-height: 1.6;

    margin: 0;

}



/* Simple Dot List */

.simple-dot-list ul {

    list-style: none;

    padding: 0;

}



.simple-dot-list li {

    position: relative;

    padding-left: 20px;

    margin-bottom: 10px;

    color: #444;

}



.simple-dot-list li::before {

    content: "•";

    color: var(--color-primary);

    font-weight: bold;

    position: absolute;

    left: 0;

    top: 0;

    font-size: 18px;

    line-height: 1.5;

}



/* ============================

   SECTOR SINGLE PAGE STYLES

   ============================ */

.sector-single-section {

    padding: 60px 0 100px;

    background-color: #fff;

}



/* Mobilde Sidebar Altta Olsun */

.support-layout {

    display: flex;

    flex-direction: column;

    gap: 50px;

}



.support-sidebar {

    order: 2; /* Mobilde İçerikten sonra gelsin */

    width: 100%;

}



.sector-content-area {

    order: 1; /* Mobilde İçerik önce gelsin */

    width: 100%;

}



@media (min-width: 992px) {

    .support-layout {

        display: grid;

        grid-template-columns: 400px 1fr; /* Sidebar | İçerik */

        align-items: start;

        gap: 50px;

    }

    

    .support-sidebar {

        order: unset; /* Masaüstünde grid sırasına uy */

    }

    

    .sector-content-area {

        order: unset;

    }

}



/* Sektör Üst Alan (Metin + Görsel - Float Layout) */

.sector-top-row {

    display: block;

    margin-bottom: 60px;

}



/* Görsel Kolonu (Sağa Yaslı) */

.sector-image-col {

    width: 100%;

    margin-bottom: 30px;

    /* Mobilde görsel üstte, çünkü HTML'de önce geliyor. Float yok. */

}



@media (min-width: 992px) {

    .sector-image-col {

        float: right; /* Metnin sağına yasla */

        width: 450px; /* Sabit genişlik */

        max-width: 45%;

        margin-left: 40px; /* Sol boşluk */

        margin-bottom: 20px; /* Alt boşluk */

        margin-top: 5px; /* Hafif üst boşluk hizalama için */

    }

}



.sector-image-col img {

    width: 100%;

    height: auto;

    border-radius: 8px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.1);

    object-fit: cover;

}



/* Metin Kolonu */

.sector-info-col {

    /* Float olduğu için metin görseli saracak */

}



.sector-description {

    font-size: 16px;

    line-height: 1.8;

    color: #444;

}



/* Clearfix */

.sector-top-row::after {

    content: "";

    display: table;

    clear: both;

}



/* Sektör İlişkili Destekler Listesi */

.sector-related-section {

    margin-top: 50px;

    clear: both; /* Float'tan etkilenmemesi için */

}



.sector-related-list {

    display: flex;

    flex-direction: column;

    gap: 20px;

}



.related-item-card {

    background-color: #fff;

    border: 1px solid #e5e5e5;

    border-radius: 4px;

    padding: 25px;

    transition: all 0.3s ease;

    position: relative;

}



.related-item-card:hover {

    border-color: var(--color-primary);

    box-shadow: 0 5px 15px rgba(0,0,0,0.05);

    transform: translateY(-2px);

}



.related-item-title {

    font-size: 18px;

    font-weight: 700;

    margin-bottom: 10px;

    color: var(--color-primary);

}



.related-item-title a {

    text-decoration: none;

    color: inherit;

}



.related-item-excerpt {

    font-size: 14px;

    color: #666;

    line-height: 1.6;

    margin-bottom: 15px;

}



.related-item-link {

    font-size: 13px;

    color: #888;

    text-decoration: none;

    border-bottom: 1px solid #ddd;

    padding-bottom: 2px;

    transition: color 0.3s ease, border-color 0.3s ease;

}



.related-item-card:hover .related-item-link {

    color: var(--color-primary);

    border-color: var(--color-primary);

}



/* ============================

   RESPONSIVE HEADER & MOBILE MENU

   ============================ */



/* Masaüstünde Hamburgeri Gizle */

.mobile-menu-toggle {

    display: none;

    background: none;

    border: none;

    font-size: 24px;

    color: var(--color-primary);

    cursor: pointer;

    padding: 5px;

}



/* Mobile Özgü Ayarlar (992px altı - Tablet ve Mobil) */

@media (max-width: 991px) {

    /* Desktop Menüyü Gizle */

    .desktop-nav {

        display: none !important;

    }



    /* Top Bar'ı Mobilde Gizle */

    .hidden-mobile {

        display: none !important;

    }



    /* Hamburgeri Göster */

    .mobile-menu-toggle {

        display: block;

    }



    /* Arama Etiketini Gizle, Sadece İkon Kalsın */

    .search-label {

        display: none;

    }

}



/* MOBİL MENÜ STİLLERİ (Sağdan Kayan Panel) */



/* Overlay (Arka plan karartma) */

.mobile-menu-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.6); /* Biraz daha koyu */

    z-index: 9998;

    opacity: 0;

    visibility: hidden;

    transition: all 0.3s ease;

}



.mobile-menu-overlay.active {

    opacity: 1;

    visibility: visible;

}



/* Panel (Menü Alanı) */

.mobile-menu-panel {

    position: fixed;

    top: 0;

    right: -320px; /* Başlangıçta ekran dışı */

    width: 300px; /* Panel genişliği */

    height: 100%;

    background-color: #050a30; /* Lacivert Arka Plan (İsteğinize göre) */

    z-index: 9999;

    transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1); /* Yumuşak kayma efekti */

    display: flex;

    flex-direction: column;

    box-shadow: -5px 0 20px rgba(0,0,0,0.2);

}



.mobile-menu-panel.active {

    right: 0; /* İçeri kay */

}



/* Panel Header (Kapatma Butonu Alanı) */

.mobile-menu-header {

    padding: 20px;

    display: flex;

    justify-content: flex-end; /* Sağa yasla */

}



/* Kapatma Butonu (X) */

.mobile-menu-close {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,0.3); /* İnce beyaz çerçeve */

    background: transparent;

    color: #fff;

    font-size: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.3s ease;

}



.mobile-menu-close:hover {

    background: rgba(255,255,255,0.1);

    color: #fff;

    transform: rotate(90deg); /* Hoverda dönme efekti */

}



/* Mobil Navigasyon Listesi */

.mobile-menu-content {

    padding: 0 20px 40px; /* Üst padding yok header hallediyor */

    overflow-y: auto; /* Uzun menülerde scroll */

}



.mobile-nav-menu {

    list-style: none;

    margin: 0;

    padding: 0;

}



.mobile-nav-menu li {

    position: relative;

    border-bottom: 1px solid rgba(255,255,255,0.1);

}



.mobile-nav-menu li:last-child {

    border-bottom: none;

}



.mobile-nav-menu a {

    display: block;

    padding: 15px 0;

    color: #fff;

    font-size: 16px;

    font-weight: 600;

    text-decoration: none;

    transition: color 0.3s ease, padding-left 0.3s ease;

}



.mobile-nav-menu a:hover {

    color: var(--color-secondary); /* Sarı */

    padding-left: 10px;

}



/* Sub Menu (Dropdown) */

.mobile-nav-menu .sub-menu {

    display: none; /* JS ile açılacak */

    list-style: none;

    margin: 0;

    padding-left: 15px;

    background-color: rgba(0,0,0,0.2); /* Hafif koyu alt zemin */

    margin-bottom: 10px;

}



.mobile-nav-menu .sub-menu li {

    border-bottom: none;

}



.mobile-nav-menu .sub-menu a {

    font-size: 14px;

    padding: 12px 0;

    font-weight: 400;

    color: rgba(255,255,255,0.8);

}



.mobile-nav-menu .sub-menu a:hover {

    color: #fff;

    padding-left: 5px;

}



/* Dropdown Toggle (Ok İşareti) */

.dropdown-toggle {

    position: absolute;

    right: 0;

    top: 10px; /* Link ile hizalı */

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    cursor: pointer;

    /* background-color: rgba(255,255,255,0.1);  Kutu arka planı */

    border-radius: 4px;

    transition: all 0.3s ease;

    font-size: 14px;

}



.dropdown-toggle:hover {

    color: var(--color-secondary);

}



    .mobile-menu-panel {

        /*width: 100%; */

    }



.dropdown-toggle.active {

    transform: rotate(180deg); /* Açılınca dönme efekti */

    color: var(--color-primary) !important; 

}



/* ============================

   TAXONOMY PAGE (Destek Kategorisi)

   ============================ */



/* Tablo Wrapper */

.consolidated-table-wrapper {

    margin-bottom: 60px;

    overflow-x: auto;

}



/* DataTables Özelleştirmeleri */

#consolidated-support-table {

    border: 1px solid #eee;

    font-size: 14px;

}



#consolidated-support-table thead th {

    background-color: var(--color-primary);

    color: #fff;

    padding: 5px;

    border-bottom: none;

}



#consolidated-support-table tbody td {

    padding: 15px;

    border-bottom: 1px solid #eee;

    vertical-align: top;

}



#consolidated-support-table tbody tr:hover {

    background-color: #f9f9f9;

}



/* Filtre Inputları (Footer'a eklenecek) */

#consolidated-support-table tfoot th input,

#consolidated-support-table tfoot th select {

    width: 100%;

    padding: 5px;

    box-sizing: border-box;

    border: 1px solid #ddd;

    border-radius: 4px;

    font-weight: normal;

    margin-top: 5px;

}



#consolidated-support-table tfoot th {

    padding: 10px;

    background-color: #f8f8f8;

}



/* DataTables Kontrol Elemanları */

.dataTables_wrapper .dataTables_filter input {

    border: 1px solid #ddd;

    border-radius: 4px;

    padding: 5px 10px;

}



.dataTables_wrapper .dataTables_length select {

    border: 1px solid #ddd;

    border-radius: 4px;

    padding: 5px;

}



.dataTables_wrapper .dataTables_paginate .paginate_button.current {

    background: var(--color-primary) !important;

    color: #fff !important;

    border: 1px solid var(--color-primary) !important;

}



.dataTables_wrapper .dataTables_paginate .paginate_button:hover {

    background: var(--color-secondary) !important;

    color: var(--color-primary) !important;

    border: 1px solid var(--color-secondary) !important;

}



/* ... (Mevcut kodlar) ... */



/* ============================

   SEARCH RESULTS PAGE (List View)

   ============================ */

.search-results-section {

    padding: 60px 0 100px;

    background-color: #fff; /* Arka plan beyaz */

}



/* Arama Sonuç Başlığı Vurgusu */

.page-title span {

    color: var(--color-secondary); /* Aranan kelime sarı olsun */

    font-style: italic;

}



/* Sonuç Listesi Konteyner */

.search-results-list {

    display: flex;

    flex-direction: column;

    gap: 30px; /* Kartlar arası boşluk */

    max-width: 1000px; /* Çok geniş olmasın, okuma kolaylığı için */

    margin: 0 auto;

}



/* Liste Öğesi (Kart) */

.search-list-item {

    background-color: #fff;

    border: 1px solid #e5e5e5; /* İnce gri çerçeve */

    padding: 30px;

    border-radius: 4px;

    transition: all 0.3s ease;

}



/* Kart Hover Efekti */

.search-list-item:hover {

    border-color: var(--color-primary); /* Çerçeve lacivert olur */

    box-shadow: 0 5px 20px rgba(0,0,0,0.05); /* Hafif gölge */

}



/* Başlık */

.search-item-title {

    font-size: 20px;

    font-weight: 700;

    margin-bottom: 15px;

    color: var(--color-primary);

}



.search-item-title a {

    text-decoration: none;

    color: inherit;

    transition: color 0.3s ease;

}



.search-item-title a:hover {

    color: var(--color-secondary); /* Başlık hoverda sarı */

}



/* Özet Metni */

.search-item-excerpt {

    font-size: 15px;

    line-height: 1.7;

    color: #555;

    margin-bottom: 20px;

}



/* Link */

.search-item-link {

    font-size: 13px;

    color: #999;

    text-decoration: none;

    border-bottom: 1px solid #ddd; /* Altı ince çizgi */

    padding-bottom: 2px;

    transition: all 0.3s ease;

}



.search-list-item:hover .search-item-link {

    color: var(--color-primary);

    border-color: var(--color-primary);

}



/* Sonuç Bulunamadı Alanı */

.no-results-wrapper {

    padding: 60px 0;

}



.no-results-wrapper .block-title {

    border-bottom: none;

    margin-bottom: 15px;

}



/* "Yeniden Ara" Formu */

.search-again-form .search-wrapper:focus-within {

    border-color: var(--color-primary) !important;

    box-shadow: 0 0 0 3px rgba(5, 10, 48, 0.1);

}

.entry-content a:not(.btn),
.block-text a:not(.btn),
.sector-description a:not(.btn),
.support-desc a:not(.btn) {
    font-weight: 700 !important;                
    color: var(--color-primary) !important;     
    text-decoration: underline !important;    
    text-underline-offset: 3px !important;      
    transition: all 0.3s ease !important;
}

.entry-content a:not(.btn):hover,
.block-text a:not(.btn):hover,
.sector-description a:not(.btn):hover,
.support-desc a:not(.btn):hover {
    color: var(--color-secondary) !important; 
    text-decoration-color: var(--color-secondary) !important;
}