/*
Theme Name: Fabula Eğitim Teması
Theme URI: https://www.fabula.com.tr
Description: Fabula için özel olarak geliştirilmiş eğitim bölümü teması.
Author: Kodlama Desteği
Author URI: https://www.fabula.com.tr
Template: fabulabasetheme
Version: 1.0.0
*/

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

/* ==========================================================================
   RENK PALETİ VE CSS DEĞİŞKENLERİ
   ========================================================================== */
:root {
    --renk-ana-metin: #252932;
    --renk-ana-arka-plan: #ffffff;
    --renk-ikincil-arka-plan: #f8f9fa; /* Hafif kırık beyaz */
    
    --renk-koyu-zemin-1: #27495d;
    --renk-koyu-zemin-2: #3b7683;
    
    --renk-marka-mavi: #2596be;
    --renk-marka-mavi-acik: #39a5c0;
    
    --renk-vurgu-yesil: #93d496;

    /* YENİ EKLENEN AÇIK RENKLER */
    --renk-acik-mavi-zemin: #f0f9fc;
    --renk-acik-yesil-zemin: #f4faf4;
}

/* ==========================================================================
   Genel Sayfa Ayarları
   ========================================================================== */
body {
    background-color: #FFFFFF;
    color: var(--renk-ana-metin); /* BU SATIRI GÜNCELLEYİN */
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* İç Sayfaların Düzeni İçin */
.content-area {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 40px;
}
/* Ana Sayfanın Tam Ekran Olması İçin */
.home .content-area-full {
    padding: 0;
}


/* ==========================================================================
   Header ve Navigasyon Stilleri
   ========================================================================== */
.site-header {
        
    /* GÖRÜNÜM İÇİN EKLENEN STİLLER */
    background-color: #ffffff; /* Her zaman beyaz bir arka planı olur */
    padding: 15px 40px; /* Daha ince bir bant görünümü için padding'i düşürdük */
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1); /* İnce bir gölge ekler */
    border-bottom: 1px solid #e0e0e0;
    
    /* MEVCUT DİĞER KODLARINIZ (değiştirmeyin) */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}




.site-header.is-transparent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: transparent;
    border-bottom: none;
    padding-top: 30px;
}

/* Logo Stilleri */
.site-header .site-logo {
    max-width: 300px;
    height: auto;
    display: block;
}

.is-transparent .site-logo {
    /* İsterseniz şeffaf header'daki logo için farklı stil verebiliriz */
}


.is-transparent .main-navigation a {
    color: #ffffff;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.is-transparent .main-navigation a:hover {
    color: #ffffff;
    opacity: 0.8;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 25px;
    justify-content: center;
}

.main-navigation a {
    text-decoration: none;
    color: #333333;
    font-weight: 600;
    font-size: 16px;
    padding: 10px 0;
    display: block;
    transition: color 0.2s ease-in-out;
}

a {
    color: var(--renk-marka-mavi);
}
a:hover {
    color: var(--renk-marka-mavi-acik);
}


.main-navigation a:hover {
    color: #0073e6;
}

.main-navigation li {
    position: relative; 
}

.main-navigation ul ul.sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #ffffff;
    padding: 10px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    width: 280px;
    z-index: 1000;
}

.main-navigation li:hover > ul.sub-menu {
    display: block;
}

.main-navigation ul ul.sub-menu li {
    margin-left: 0;
    width: 100%;
}

.main-navigation ul ul.sub-menu a {
    font-weight: normal;
    padding: 8px 10px;
}

/* ==========================================================================
   Header ve Navigasyon Stilleri
   ========================================================================== */
/* ... .site-header ve diğer mevcut stilleriniz burada ... */


/* Logo Değiştirme Stilleri */
/* Başlangıçta (sayfa en tepedeyken) koyu logo gizli olacak */
.site-header .logo-dark {
    display: none;
}
.site-header .logo-light {
    display: block;
}

/* Sayfa aşağı kaydırıldığında (.is-scrolled class'ı eklendiğinde) */
/* Koyu logo görünecek, beyaz logo gizlenecek */
.site-header.is-scrolled .logo-dark {
    display: block;
}
.site-header.is-scrolled .logo-light {
    display: none;
}

/* ==========================================================================
   Ana Sayfa Slider
   ========================================================================== */
.hero-slider { width: 100%; height: 100vh; position: relative; z-index: 1; overflow: hidden; }
.slide-item { width: 100%; height: 100vh; background-size: cover; background-position: center; position: relative; display: flex !important; align-items: flex-end; justify-content: center; text-align: center; padding-bottom: 15vh; }
.slide-item::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); z-index: 2; }
.slick-dots { bottom: 25px; }
.slick-dots li button:before { color: white; opacity: 0.5; }
.slick-dots li.slick-active button:before { opacity: 1; }
.hero-text-content { position: relative; max-width: 800px; padding: 20px; z-index: 3; }
.hero-text-content p { font-size: 28px; font-weight: 400; line-height: 1.5; color: rgba(255, 255, 255, 0.95); text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8); }

/* ==========================================================================
   Genel İçerik Stilleri (Kartlar, Başlıklar vb.)
   ========================================================================== */
.page-section { padding: 60px 40px; }
.section-title { text-align: center; font-size: 36px; margin: 0 0 40px 0; color: var(--renk-koyu-zemin-1); }
.modules-section { background-color: #f7f7f7; }
.module-header { text-align: center; padding: 40px 20px; background-color: #f7f7f7; border-bottom: 1px solid #e0e0e0; margin-bottom: 40px; }
.module-header h1 { margin: 0; font-size: 36px; color: #0073e6; }
.module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; max-width: 1200px; margin: 0 auto; }
.training-card { border: 1px solid #e0e0e0; border-radius: 8px; padding: 25px; background-color: #ffffff; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.training-title { font-size: 22px; margin-top: 0; color: #333; }
.card-instructor-info { margin-top: 20px; padding-top: 20px; border-top: 1px solid #f0f0f0; display: flex; align-items: center; }
.instructor-photos { display: flex; margin-right: 15px; }
.instructor-photos img { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; border: 2px solid #ffffff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.instructor-photos img:not(:first-child) { margin-left: -20px; }
.training-card .training-instructors { font-size: 15px; color: #757575; margin: 0; font-weight: 600; }

/* ==========================================================================
   Eğitmenler Sayfası ve Pop-up
   ========================================================================== */
.instructor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px 20px; max-width: 1200px; margin: 0 auto; }
.instructor-card { text-align: center; cursor: pointer; }
.instructor-card img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; border: 5px solid #ffffff; box-shadow: 0 5px 15px rgba(0,0,0,0.15); }
/* ==========================================================================
   Eğitmenler Sayfası ve Pop-up (YENİ MODERN STİLLER)
   ========================================================================== */

/* Pop-up'ın genel kapsayıcısı ve yerleşimi */
.modal { 
    display: none; position: fixed; z-index: 9999; left: 0; top: 0; 
    width: 100%; height: 100%; 
    align-items: center; justify-content: center; 
}
.modal.is-visible { 
    display: flex; 
}

/* Arka planı karartan katman */
.modal-overlay { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background-color: rgba(10, 25, 41, 0.5); /* Hafif maviye çalan bir karartma */
}

/* Pop-up penceresinin kendisi (Tüm istekleriniz burada uygulanıyor) */
.modal-content {
    position: relative;
    width: 90%;
    max-width: 900px; /* Pencereyi daha geniş yaptık */
    z-index: 10000;

    /* 1. ve 3. İstek: Transparan, buzlu cam ve logodan gelen renk */
    background-color: rgba(37, 41, 50, 0.85); /* --renk-ana-metin'in yarı saydam hali */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    color: #f0f0f0; /* İçerik metin rengini beyaza yakın yaptık */
    border-radius: 12px;
    padding: 40px;
}

/* Kapatma butonu */
.modal-close { 
    position: absolute; top: 15px; right: 20px; color: #aaa; 
    font-size: 32px; font-weight: bold; border: none; background: none; 
    cursor: pointer; transition: color 0.2s ease;
}
.modal-close:hover { 
    color: #ffffff; 
}

/* 2. ve 4. İstek: Yatay düzen ve fotoğraf */
.modal-body-horizontal {
    display: flex;
    align-items: flex-start; /* Dikeyde yukarıdan hizalar */
    gap: 35px; /* Fotoğraf ve metin arası boşluk */
}
.modal-photo {
    flex: 0 0 200px; /* Fotoğraf sütununun genişliğini sabitler (200px) */
}
.modal-photo img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 50%; /* Fotoğrafı yuvarlak yapar */
    border: 3px solid rgba(255, 255, 255, 0.5);
}
.modal-text {
    flex: 1; /* Metin sütununun kalan tüm alanı kaplamasını sağlar */
}
.modal-text h2 {
    color: #ffffff;
    margin-top: 0;
    font-size: 32px;
}
.modal-text p {
    line-height: 1.7;
    opacity: 0.9;
}


/* ==========================================================================
   Footer Stilleri (DÜZELTİLMİŞ)
   ========================================================================== */
.site-footer {
    padding: 60px 40px 20px 40px;
    background-color: var(--renk-ana-metin);
    color: #aeb1b8;
}

.footer-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto 40px auto;
    padding-bottom: 40px;
    border-bottom: 1px solid #4a4e58; /* Sadece border rengi değişebilir */
}

.footer-widget-area {
    text-align: left;
}

.footer-widget-area .site-logo {
    max-width: 250px;
    height: auto;
    margin-bottom: 15px;
}

.footer-about {
    font-size: 15px;
    color: #757575;
    line-height: 1.7;
}

.widget-title {
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 20px;
}

.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu li {
    margin-bottom: 10px;
}

.footer-menu a {
    text-decoration: none;
    color: #757575;
    transition: color 0.2s ease-in-out;
}

.footer-menu a:hover {
    color: #0073e6;
}

.site-footer .menu-item-has-children > a {
    color: #333;
    font-weight: bold;
    pointer-events: none;
    cursor: default;
}

.site-footer .menu-item-has-children .sub-menu {
    margin-top: 10px;
    padding-left: 10px;
}

.footer-widget-area p {
    color: #757575;
    line-height: 1.7;
}

.footer-widget-area a {
    color: #aeb1b8;
}

.footer-widget-area a:hover {
    color: var(--renk-vurgu-yesil);
}

.site-info {
    text-align: center;
    font-size: 14px;
    color: #757575;
    padding-top: 20px;
}

/* ==========================================================================
   Ana Sayfa Eğitmenler Izgarası (6'lı Düzen)
   ========================================================================== */

/* Sadece ana sayfadaki (.home) ızgarayı 6 sütunlu yap */
.home .instructor-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 30px 20px; /* Dikey ve yatay boşluklar */
}

/* Ana sayfadaki kartların fotoğrafını daha küçük yap */
.home .instructor-card img {
    width: 120px;
    height: 120px;
}

/* Ana sayfadaki kartların yazılarını daha küçük yap */
.home .instructor-name {
    font-size: 16px;
    margin-top: 10px;
}

.home .instructor-title {
    font-size: 13px;
}

/* ==========================================================================
   Mobil Cihazlar İçin Ana Sayfa Eğitmen Izgarası
   ========================================================================== */
@media (max-width: 1024px) {
    .home .instructor-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .home .instructor-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .home .instructor-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   Ana Sayfa Modül Izgarası (4'lü Düzen)
   ========================================================================== */

/* Sadece ana sayfadaki (.home) ızgarayı 4 sütunlu yap */
.home .modules-section .module-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Tablet ve benzeri daha küçük ekranlar için 2 sütunlu yap */
@media (max-width: 900px) {
    .home .modules-section .module-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobil telefonlar için tek sütunlu yap */
@media (max-width: 600px) {
    .home .modules-section .module-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* ==========================================================================
   Şeffaf Header'daki Açılır Menü Stilleri
   ========================================================================== */

/* Sadece şeffaf header'ın içindeki alt menüyü hedefler */
.site-header.is-transparent .sub-menu {
    background-color: rgba(20, 20, 20, 0.85); /* Koyu ve yarı saydam arka plan */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2); /* Hafif beyaz çerçeve */
    border-radius: 0 0 5px 5px; /* Alt köşeleri yuvarla */
}

/* Şeffaf header'daki alt menü linklerinin rengi */
.site-header.is-transparent .sub-menu a {
    color: #f0f0f0; /* Beyaza yakın bir renk */
    text-shadow: none; /* Üst menüdeki gölgeyi kaldır */
}

/* Şeffaf header'daki alt menü linklerinin üzerine gelince */
.site-header.is-transparent .sub-menu a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* ==========================================================================
   Ana Sayfa CTA (Harekete Geçirici Mesaj) Stilleri
   ========================================================================== */

.cta-section {
    background-color: var(--renk-koyu-zemin-1);
    color: #ffffff;
    text-align: center;
    padding: 80px 40px;
}

.cta-content {
    max-width: 800px;
    margin: 0 auto;
}

.cta-title {
    font-size: 32px;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 30px;
}

/* YENİ EKLENEN BUTON STİLİ */
.cta-section .hero-button {
    display: inline-block;
    background-color: var(--renk-marka-mavi);
    color: #ffffff !important;
    padding: 15px 30px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    border: 2px solid var(--renk-marka-mavi-acik);
    transition: all 0.2s ease-in-out;
}

.cta-section .hero-button:hover {
    background-color: var(--renk-marka-mavi-acik);
    border-color: #ffffff;
    color: #ffffff !important; /* Rengi koru */
}

/* ==========================================================================
   Ana Sayfa Modül Kartları İçerik Listesi
   ========================================================================== */

.training-card .module-lessons {
    list-style: none;
    padding-left: 0;
    margin: 20px 0 0 0;
    text-align: left;
    border-top: 1px solid #f0f0f0;
    padding-top: 20px;
}

.training-card .module-lessons li {
    padding-left: 22px;
    position: relative;
    margin-bottom: 12px;
    font-size: 15px;
    color: #555;
    line-height: 1.4;
}

.training-card .module-lessons li::before {
    content: '›'; /* Basit bir ok ikonu */
    position: absolute;
    left: 5px;
    top: -2px;
    color: #0073e6; /* Ana mavi rengimiz */
    font-weight: bold;
    font-size: 20px;
}

/* ==========================================================================
   Genel Sayfa Ayarları
   ========================================================================== */

/* Pürüzsüz kaydırma efekti için eklendi */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 60px; /* İnce menünün yüksekliği kadar bir boşluk */
}

body {
    background-color: #FFFFFF;
    color: #252932; /* YENİ METİN RENGİ */
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}
/* ... dosyanın geri kalanı aynı ... */

/* ==========================================================================
   YENİ EKLENEN BÖLÜMLER İÇİN STİLLER
   ========================================================================== */

/* Eğitim Modülleri İçin Alt Başlık Stili */
.module-subtitle {
    text-align: center;
    font-size: 28px;
    color: #0073e6;
    margin-top: 60px; /* Üstteki bölümle arasına boşluk koyar */
    margin-bottom: 30px;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 15px;
    display: inline-block; /* Sadece metin kadar yer kaplaması ve ortalanması için */
}

/* Her modül başlığının altındaki ızgaranın üst boşluğunu sıfırlar */
.module-subtitle + .module-grid {
    margin-top: 0;
}


/* Program Takvimi Izgara Stili */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
}

.event-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden; /* Kenarlığı yuvarlatmak için */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    background-color: #ffffff;
}

.event-card-header {
    background-color: var(--renk-marka-mavi); /* Bu satırı güncelledik */
    color: #ffffff;
    padding: 15px 20px;
}

.event-card-header h2 {
    margin: 0;
    font-size: 22px;
}

.event-card-body {
    padding: 25px;
}

.event-date {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-top: 0;
}

.event-days, .event-location {
    font-size: 16px;
    color: #757575;
    margin-bottom: 20px;
}

.event-location {
    font-style: italic;
}

.event-details ul {
    list-style: none;
    padding-left: 0;
    margin: 20px 0 0 0;
    border-top: 1px solid #f0f0f0;
    padding-top: 20px;
}

.event-details li {
    padding-left: 22px;
    position: relative;
    margin-bottom: 10px;
    font-size: 15px;
}

.event-details li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #0073e6;
    font-weight: bold;
}

/* ==========================================================================
   İnce Sabit Menü Stilleri (Düzeltilmiş Son Hali)
   ========================================================================== */

/* Menü çubuğunun kendisi */
.slim-menu-bar {
    position: fixed;
    top: 10;
    left: 0;
    width: 100%;
    z-index: 999;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(-100%);
    transition: transform 0.4s ease-in-out;
}

.slim-menu-bar.is-visible {
    transform: translateY(0);
}

/* Menü içeriğini (ikon ve linkler) hizalayan kapsayıcı */
.slim-menu-bar .slim-menu-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center; /* DEĞİŞTİ: Ortalamak için 'center' kullanıyoruz */
    align-items: center;
    gap: 30px; /* YENİ: İkon ile menü arasına boşluk ekledik */
    padding: 0 40px;
    height: 70px;
}

/* Menüdeki ikonun stili */
.slim-menu-icon img {
    height: 45px;
    width: auto;
    display: block;
}

/* DÜZELTME: Menü listesini (<ul>) yan yana dizen kural */
.slim-menu-bar .slim-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* YAN YANA DİZMEK İÇİN GEREKLİ OLAN KURAL */
    align-items: left;
    gap: 25px;
}

/* Menü linklerinin (<li> içindeki <a>) stilleri */
.slim-menu-bar .slim-menu a {
    display: block;
    padding: 0;
    color: var(--renk-ana-metin);
    text-decoration: none;
    font-weight: 600;
    font-size: 17px;
    transition: color 0.2s ease;
}

.slim-menu-bar .slim-menu a:hover {
    color: var(--renk-marka-mavi);
}

/* ==========================================================================
   YENİ EĞİTİM MODÜLLERİ KART YAPISI (TÜM KARTLAR RENKLENDİRİLDİ)
   ========================================================================== */

/* Ana kategori kartlarının genel yerleşimi */
.kategori-kapsayici {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Tüm ana kategori kartları için ortak stil */
.kategori-karti {
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}

/* Tüm ana kategori başlıkları için ortak stil */
.kategori-karti .kategori-basligi {
    font-size: 20px;
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 15px;
}

/* Tüm alt ders listeleri için ortak stil */
.kategori-karti .ders-listesi {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Tüm alt ders kartları için ortak stil */
.kategori-karti .ders-karti {
    display: block;
    padding: 15px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
}
.kategori-karti .ders-karti:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.kategori-karti .ders-karti::before {
    content: '›';
    margin-right: 8px;
    font-weight: bold;
}

/* --- 1. Kart: Ticari ve İşletme Yetkinlikleri --- */
.kategori-karti.kart-vurgulu {
    background-color: var(--renk-koyu-zemin-2); /* #3b7683 */
}
.kategori-karti.kart-vurgulu .kategori-basligi {
    color: #ffffff;
    border-bottom-color: rgba(255, 255, 255, 0.2);
}
.kategori-karti.kart-vurgulu .ders-karti {
    background-color: rgba(255, 255, 255, 0.1); /* Ana rengin açık tonu */
    color: #ffffff;
    border-left: 4px solid var(--renk-vurgu-yesil);
}
.kategori-karti.kart-vurgulu .ders-karti:hover {
    background-color: rgba(255, 255, 255, 0.2); /* Hover'da biraz daha belirgin */
}


/* --- 2. Kart: Yeni Ürünler & İhtisas Sigortacılığı --- */
.kategori-karti.kart-yeni-urunler {
    background-color: var(--renk-koyu-zemin-1); /* #27495d */
}
.kategori-karti.kart-yeni-urunler .kategori-basligi {
    color: #ffffff;
    border-bottom-color: rgba(255, 255, 255, 0.2);
}
.kategori-karti.kart-yeni-urunler .ders-karti {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-left: 4px solid var(--renk-marka-mavi-acik);
}
.kategori-karti.kart-yeni-urunler .ders-karti:hover {
    background-color: rgba(255, 255, 255, 0.2);
}


/* --- 3. Kart: Müşteri Yetkinliği --- */
.kategori-karti.kart-musteri {
    background-color: var(--renk-marka-mavi); /* #2596be */
}
.kategori-karti.kart-musteri .kategori-basligi {
    color: #ffffff;
    border-bottom-color: rgba(255, 255, 255, 0.2);
}
.kategori-karti.kart-musteri .ders-karti {
    background-color: rgba(255, 255, 255, 0.15); /* Bu ana renk daha açık olduğu için opaklığı biraz artırdım */
    color: #ffffff;
    border-left: 4px solid var(--renk-vurgu-yesil);
}
.kategori-karti.kart-musteri .ders-karti:hover {
    background-color: rgba(255, 255, 255, 0.3);
}


/* --- 4. Kart: Teknoloji ve Dijital Altyapı --- */
.kategori-karti.kart-teknoloji {
    background-color: var(--renk-ana-metin); /* #252932 */
}
.kategori-karti.kart-teknoloji .kategori-basligi {
    color: #ffffff;
    border-bottom-color: rgba(255, 255, 255, 0.2);
}
.kategori-karti.kart-teknoloji .ders-karti {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-left: 4px solid var(--renk-marka-mavi);
}
.kategori-karti.kart-teknoloji .ders-karti:hover {
    background-color: rgba(255, 255, 255, 0.2);
}


/* ==========================================================================
   Mobil ve Tablet Uyumlu Modül Kartları
   ========================================================================== */
@media (max-width: 600px) {
    .kategori-kapsayici {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   AKORDİYON KART STİLLERİ (SON GÜNCELLEMELER)
   ========================================================================== */
.ders-karti-tetikleyici { 
    cursor: pointer; 
}
/* Tetikleyici kartın rengini ait olduğu ana karttan alsın */
.kart-vurgulu .ders-karti-tetikleyici {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-left: 4px solid var(--renk-vurgu-yesil);
}
.kart-vurgulu .ders-karti-tetikleyici:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.ders-akordiyon-icerik { 
    max-height: 0; 
    overflow: hidden; 
    transition: max-height 0.5s ease-out, padding 0.5s ease-out, margin-top 0.5s ease-out;
    padding: 0 15px;
    margin-top: 0;
    border-radius: 0 0 6px 6px;
    color: #fff;
}

/* Akordiyon açıldığında... */
.ders-akordiyon.is-acik .ders-akordiyon-icerik {
    max-height: 65vh; /* YENİ: İçerik için maksimum yükseklik (Ekran yüksekliğinin %65'i) */
    overflow-y: auto; /* YENİ: Eğer içerik bu yüksekliği aşarsa, kaydırma çubuğu gösterir */
    transition: max-height 0.5s ease-in, padding 0.5s ease-in, margin-top 0.5s ease-in;
    padding: 20px 15px;
    margin-top: -10px;
    background: rgba(0,0,0,0.2);
}
/* Akordiyon içeriğindeki eğitmen resimleri için stiller */
.ders-akordiyon-icerik .ders-egitmenler-bolumu { display: flex; gap: 20px; align-items: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.2); }
.ders-akordiyon-icerik .egitmen-profili { display: flex; align-items: center; gap: 15px; }
.ders-akordiyon-icerik .egitmen-profili img {
    width: 80px;  /* GÜNCELLENDİ */
    height: 80px; /* GÜNCELLENDİ */
    border-radius: 50%;
    object-fit: cover;
}
.ders-akordiyon-icerik .egitmen-profili span { font-weight: 600; }
.ders-akordiyon-icerik .ders-aciklamasi ul { list-style: none; padding-left: 0; }
.ders-akordiyon-icerik .ders-aciklamasi li { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.ders-akordiyon-icerik .ders-aciklamasi li::before { content: '›'; color: var(--renk-vurgu-yesil); margin-right: 10px; }


/* ==========================================================================
   HEDEF KİTLEYE YÖNELİK OKUNABİLİRLİK VE SON DOKUNUŞLAR
   ========================================================================== */
body { font-size: 18px; line-height: 1.7; }
.section-title { font-size: 40px; }
.slim-menu-bar .slim-menu a { font-size: 17px; }
.kategori-basligi { font-size: 22px; }
.ders-karti { font-size: 18px; }
.ders-akordiyon-icerik .ders-aciklamasi,
.ders-akordiyon-icerik .egitmen-profili span { font-size: 17px; }

/* Akordiyon içindeki görseller için stil */
.ders-gorsel {
    width: 100%;
    height: 250px;      /* YENİ: Tüm görseller için sabit yükseklik */
    object-fit: cover;  /* YENİ: Görselin oranını bozmadan alanı doldurmasını sağlar */
    border-radius: 8px;
    margin-bottom: 20px;
    display: block;
}
.footer { font-size: 16px; }

/* ==========================================================================
   BÖLÜM ARKA PLAN RENKLERİ
   ========================================================================== */

/* Eğitim Modülleri Bölümü */
#moduller {
    background-color: var(--renk-acik-mavi-zemin);
}

/* Eğitim Programı Bölümü */
#program {
    background-color: var(--renk-acik-yesil-zemin);
}

/* Eğitmenlerimiz Bölümü */
#egitmenler {
    background-color: var(--renk-acik-mavi-zemin);
}

/* ==========================================================================
   SON DOKUNUŞLAR: Ana Menü Font Büyütme
   ========================================================================== */

/* Ana header'daki (şeffaf olan) menü linklerinin fontunu büyütür */
.site-header .main-navigation a {
    font-size: 18px; /* 16px'dan 18px'e yükselttik */
}

/* ==========================================================================
   HARİTA İKONU STİLLERİ
   ========================================================================== */

/* Otel adı ve ikonu aynı hizada tutmak için */
.event-location {
    display: flex;
    align-items: center;
}

/* Tıklanabilir harita ikonu linki */
.map-link {
    margin-left: 10px; /* Metin ile ikon arasına boşluk koyar */
    font-size: 18px;   /* İkon boyutunu ayarlar */
    color: var(--renk-marka-mavi);
    transition: transform 0.2s ease;
}

.map-link:hover {
    color: var(--renk-marka-mavi-acik);
    transform: scale(1.2); /* Üzerine gelince hafifçe büyür */
}

/* ==========================================================================
   AKORDİYON İKONLARI İÇİN STİLLER
   ========================================================================== */

/* Tetikleyici kartını metin ve ikon olarak ikiye ayırır */
.ders-karti-tetikleyici {
    display: flex !important;                  /* Bu kuralın ezilmesini engeller */
    justify-content: space-between !important; /* Bu kuralın ezilmesini engeller */
    align-items: center !important;            /* Bu kuralın ezilmesini engeller */
    width: 100% !important;                    /* Bu kuralın ezilmesini engeller */
}


.akordiyon-ikon {
    font-size: 16px;
    margin-left: 15px; /* İkonla metin arasına boşluk koyar */
}

/* Varsayılan durumda (kapalıyken) "kapat" ikonunu gizle */
.ders-akordiyon .ikon-kapat {
    display: none;
}
/* Varsayılan durumda (kapalıyken) "aç" ikonunu göster */
.ders-akordiyon .ikon-ac {
    display: block;
}

/* Akordiyon açıldığında (.is-acik sınıfı eklendiğinde) */
.ders-akordiyon.is-acik .ikon-kapat {
    display: block; /* "kapat" ikonunu göster */
}
.ders-akordiyon.is-acik .ikon-ac {
    display: none; /* "aç" ikonunu gizle */
}

/* ==========================================================================
   MOBİL UYUMLULUK STİLLERİ (NİHAİ VERSİYON 3.0)
   ========================================================================== */
@media (max-width: 768px) {

    /* --- Genel Düzenlemeler --- */
    html {
        scroll-padding-top: 70px !important; /* Sabit header yüksekliği kadar boşluk */
    }
    body {
        font-size: 16px;
    }
    .section-title {
        font-size: 30px; /* Başlıkları biraz daha küçülttük */
    }
    .page-section {
        padding: 50px 15px; /* Bölümlerin kenar boşluklarını azalttık */
    }
    #slim-menu-bar {
        display: none !important;
    }

    /* --- Sabit Mobil Header --- */
    .site-header {
        position: sticky !important;
        top: 0;
        justify-content: flex-end;
        background-color: var(--renk-ana-metin) !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        z-index: 1002 !important;
        padding: 10px 15px; /* Kenar boşluğunu azalttık */
        min-height: 60px; /* Yüksekliği biraz azalttık */
    }
    .site-header .site-branding {
        display: none;
    }
    .menu-toggle {
        position: static;
        display: block !important;
        color: #ffffff !important;
    }
    
    /* --- Mobil Menü Paneli --- */
    #site-navigation { display: none; }
    #site-navigation.acik { display: flex !important; }
    #site-navigation.acik ul { flex-direction: column !important; }
    /* (Diğer mobil menü stilleri aynı kalıyor) */


    /* --- Hero Slider --- */
    .hero-text-content p {
        font-size: 20px;
    }

    /* --- Eğitim Modülleri --- */
    /* DÜZELTME: Kartların sola yaslanması ve ekrana tam oturması için */
    #moduller .container {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
    }

    .kategori-kapsayici {
    grid-template-columns: 1fr; /* Kartlar alt alta sıralansın */
    }
    .kategori-karti {
        padding: 20px 15px; /* DÜZELTME: İç boşluğu azaltarak kartı daralttık */
    }
    .kategori-basligi {
        font-size: 20px;
    }
    .ders-karti {
        font-size: 16px;
        padding: 12px;
    }
    
    /* --- Eğitim Programı --- */
    .calendar-grid {
        grid-template-columns: 1fr;
    }

    /* --- Eğitmen Pop-up Pencereleri (Modal) --- */
    .modal-content {
        padding: 25px 15px 15px 15px; /* DÜZELTME: İç boşluğu azalttık */
        width: 92%;                   /* DÜZELTME: Genişliği ekranın %92'si ile sınırladık */
        max-height: 85vh;             /* DÜZELTME: Yüksekliği ekranın %85'i ile sınırladık */
        overflow-y: auto;             /* DÜZELTME: İçerik taşarsa kaydırılabilir yap */
        box-sizing: border-box;
    }
    .modal-body-horizontal {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .modal-photo {
        flex: none; /* DÜZELTME: Masaüstü esnekliğini sıfırla */
        width: 120px;  /* DÜZELTME: Fotoğrafı mobil için küçülttük */
        height: 120px;
        margin-bottom: 15px;
    }
    .modal-text h2 {
        font-size: 24px;
    }
    .modal-text p {
        font-size: 15px;
    }
    .modal-close {
        top: 5px;
        right: 10px;
        font-size: 35px;
    }
}

/* ==========================================================================
   EĞİTİM MODÜLÜ KARTLARI İÇİN NİHAİ MOBİL HİZALAMA DÜZELTMESİ
   ========================================================================== */
.kategori-kapsayici .kategori-karti {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 20px 15px !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   MOBİL İÇİN HERO BÖLÜMÜ LOGOSU (NİHAİ DÜZELTME)
   ========================================================================== */

/* 1. KURAL: Logoyu MASAÜSTÜNDE ve varsayılan olarak GİZLE */
.hero-logo-mobil {
    display: none;
}

/* ==========================================================================
   TABLET VE KÜÇÜK LAPTOP EKRANLARI İÇİN DÜZENLEMELER (1024px ve altı)
   ========================================================================== */
@media (max-width: 1024px) {

    /* Header'daki logo ve menünün üst üste binmesini engellemek için dikeyde sırala */
    .site-header {
        flex-direction: column;
        gap: 15px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    /* Motto yazısının (hero text) header'ın altına girmesini engelle */
    .hero-text-content {
        /* Header artık dikeyde daha fazla yer kapladığı için metni aşağı itiyoruz */
        padding-top: 220px; 
    }

    /* Eğitmen grid'ini bu ekranda biraz daha düzenli hale getirelim */
    .instructor-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

/* 2. KURAL: Sadece MOBİLDE logoyu GÖSTER ve STİLLENDİR */
@media (max-width: 768px) {
    .hero-logo-mobil {
        display: block;
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        max-width: 270px;
    }

    /* Logoyu eklediğimiz için, hamburger ikonunun konumunu kontrol edelim ki logonun altında kalmasın */
    .menu-toggle {
        top: 30px !important;
        right: 20px !important;
    }
}


/* ==========================================================================
   HERO BÖLÜMÜ KAPSAYICISI İÇİN STİL
   ========================================================================== */

.hero-wrapper {
    position: relative; /* İçindeki absolut konumlandırılmış logonun buna göre hizalanmasını sağlar */
    width: 100%;
    height: 100vh;
}

/* ==========================================================================
   DAİRESEL GÖRSELLERDEKİ KESİLME SORUNU İÇİN DÜZELTME
   ========================================================================== */

/* Eğitmenler bölümündeki ana grid fotoğrafları için */
.instructor-card img {
    object-position: center top; /* Görseli dikeyde yukarıdan hizala */
}

/* Pop-up penceresindeki eğitmen fotoğrafları için */
.modal-photo img {
    object-position: center top; /* Görseli dikeyde yukarıdan hizala */
}

/* Pop-up penceresindeki eğitmen fotoğrafları için */
.egitmen-profili img {
    object-position: center top; /* Görseli dikeyde yukarıdan hizala */
}

/* ==========================================================================
   AKICI (FLUID) TASARIM VE FARKLI ÇÖZÜNÜRLÜKLER İÇİN DÜZELTMELER
   ========================================================================== */

/* Bu kural, fontların daha tutarlı ölçeklenmesine yardımcı olur */
html {
    font-size: 100%; /* 16px'i temel alır */
}

/* --- Akıcı Font Boyutları (Clamp Metodu) --- */

/* Ana Sayfa Slider Metni */
.hero-text-content p {
    /* min: 24px, ideal: ekran genişliğinin %4'ü, max: 40px */
    font-size: clamp(1.5rem, 4vw, 2.5rem); 
}

/* Ana Bölüm Başlıkları */
.section-title {
    /* min: 32px, ideal: ekran genişliğinin %5'i, max: 40px */
    font-size: clamp(2rem, 5vw, 2.5rem);
}

/* Masaüstü Header Menü Linkleri */
.site-header .main-navigation a {
    /* min: 16px, ideal: ekran genişliğinin %1'i + 0.5rem, max: 18px */
    font-size: clamp(1rem, 1vw + 0.5rem, 1.125rem);
}

/* İnce Kayan Menü Linkleri */
.slim-menu-bar .slim-menu a {
    /* min: 15px, ideal: ekran genişliğinin %1'i + 0.4rem, max: 17px */
    font-size: clamp(0.9375rem, 1vw + 0.4rem, 1.0625rem);
}

/* Modül Kartı Başlıkları */
.kategori-basligi {
    font-size: clamp(1.125rem, 2vw, 1.375rem); /* 18px - 22px arası */
}

/* Tıklanabilir Ders Kartları */
.ders-karti {
    font-size: clamp(1rem, 1.5vw, 1.125rem); /* 16px - 18px arası */
}

/* ==========================================================================
   DÜŞÜK YÜKSEKLİKLİ EKRANLAR İÇİN DÜZENLEMELER (max-height: 700px)
   ========================================================================== */
@media (max-height: 700px) {

    /* Header'ı dikeyde daha kompakt hale getir */
    .site-header {
        padding-top: 15px;
        padding-bottom: 15px;
        gap: 10px;
    }

    /* Motto metninin font boyutunu küçült */
    .hero-text-content p {
        font-size: clamp(1.25rem, 3vh, 1.75rem); /* Yaklaşık 20px - 28px arası */
        line-height: 1.4;
    }
    
    /* Motto metninin alttan boşluğunu azaltarak yukarıya daha çok yer bırak */
    .slide-item {
        padding-bottom: 8vh;
    }
}

/* ==========================================================================
   ÇOK DÜŞÜK YÜKSEKLİKLİ EKRANLAR İÇİN NİHAİ DÜZENLEME (max-height: 500px)
   ========================================================================== */
@media (max-height: 500px) {

    /* Ekran çok kısaysa, motto yazısını tamamen gizleyerek üst üste binmeyi engelle */
    .hero-text-content {
        display: none !important;
    }
}

/* ==========================================================================
   İLETİŞİM FORMU STİLLERİ
   ========================================================================== */

.contact-form-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.contact-form {
    background: var(--renk-ikincil-arka-plan);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.contact-form h2 {
    color: var(--renk-koyu-zemin-1);
    margin-bottom: 15px;
    font-size: 28px;
    text-align: center;
}

.form-description {
    text-align: center;
    color: #666;
    margin-bottom: 30px;
    font-size: 16px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--renk-ana-metin);
}

.egitim-label {
    display: block;
    margin-bottom: 15px !important;
    font-weight: 600;
    color: var(--renk-ana-metin);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--renk-marka-mavi);
}

/* Checkbox Stilleri */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.checkbox-item:hover {
    border-color: var(--renk-marka-mavi);
}

.checkbox-item input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.checkbox-item label {
    margin: 0;
    font-weight: 500;
    cursor: pointer;
}

.modul-input {
    margin-left: 10px;
    flex: 1;
    padding: 8px !important;
    border: 1px solid #ccc !important;
}

.modul-input:focus {
    border-color: var(--renk-marka-mavi) !important;
}

/* 1 Modül seçildiğinde input'u daha belirgin yap */
.checkbox-item:has(#egitim-1modul:checked) {
    border-color: var(--renk-marka-mavi);
    background-color: rgba(37, 150, 190, 0.05);
}

.submit-btn {
    background-color: var(--renk-marka-mavi);
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
}

.submit-btn:hover {
    background-color: var(--renk-marka-mavi-acik);
}

/* Mobil Uyumluluk */
@media (max-width: 768px) {
    .contact-form-container {
        padding: 0 15px;
    }
    
    .contact-form {
        padding: 25px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .checkbox-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .modul-input {
        margin-left: 0;
        margin-top: 5px;
        width: 100% !important;
    }
}

/* ==========================================================================
   CONTACT FORM 7 ÖZELLEŞTİRMELERİ
   ========================================================================== */

/* Form konteyneri */
.wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Form grupları */
.wpcf7-form-control-wrap {
    display: block;
    margin-bottom: 0;
}

/* Label stilleri */
.wpcf7-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--renk-ana-metin);
    font-size: 15px;
}

/* Input ve textarea stilleri */
.wpcf7-form .wpcf7-text,
.wpcf7-form .wpcf7-tel,
.wpcf7-form .wpcf7-email,
.wpcf7-form .wpcf7-textarea {
    width: 100%;
    padding: 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    transition: all 0.3s ease;
    background: white;
    box-sizing: border-box;
}

.wpcf7-form .wpcf7-text:focus,
.wpcf7-form .wpcf7-tel:focus,
.wpcf7-form .wpcf7-email:focus,
.wpcf7-form .wpcf7-textarea:focus {
    outline: none;
    border-color: var(--renk-marka-mavi);
    box-shadow: 0 0 0 3px rgba(37, 150, 190, 0.1);
}

/* Checkbox grubu */
.wpcf7-form .wpcf7-checkbox {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
}

.wpcf7-form .wpcf7-list-item {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.wpcf7-form .wpcf7-list-item:hover {
    border-color: var(--renk-marka-mavi);
    background-color: rgba(37, 150, 190, 0.02);
}

.wpcf7-form .wpcf7-list-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--renk-marka-mavi);
}

.wpcf7-form .wpcf7-list-item-label {
    font-weight: 500;
    margin: 0;
    color: var(--renk-ana-metin);
    cursor: pointer;
    flex: 1;
}

/* 1 Modül için özel stil */
.wpcf7-form .wpcf7-list-item:has(input[value="1 Modül"]) {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.wpcf7-form .wpcf7-list-item:has(input[value="1 Modül"]) .modul-input-container {
    width: 100%;
    margin-left: 32px; /* Checkbox genişliği + gap */
}

.wpcf7-form .wpcf7-list-item:has(input[value="1 Modül"]) .wpcf7-text {
    margin-top: 5px;
}

/* Textarea özel stilleri */
.wpcf7-form .wpcf7-textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
}

/* Submit butonu */
.wpcf7-form .wpcf7-submit {
    background: linear-gradient(135deg, var(--renk-marka-mavi), var(--renk-marka-mavi-acik));
    color: white;
    padding: 18px 30px;
    border: none;
    border-radius: 8px;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    margin-top: 10px;
}

.wpcf7-form .wpcf7-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 150, 190, 0.3);
}

.wpcf7-form .wpcf7-submit:active {
    transform: translateY(0);
}

/* Form satırları için grid düzeni */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

/* Validasyon mesajları */
.wpcf7-response-output {
    padding: 15px;
    border-radius: 8px;
    margin: 20px 0 !important;
    text-align: center;
    font-weight: 500;
}

.wpcf7-mail-sent-ok {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.wpcf7-validation-errors,
.wpcf7-mail-sent-ng {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Loading animasyonu */
.wpcf7-spinner {
    margin: 0 auto;
    display: block;
}

/* Mobil uyumluluk */
@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .wpcf7-form .wpcf7-list-item:has(input[value="1 Modül"]) {
        align-items: stretch;
    }
    
    .wpcf7-form .wpcf7-list-item:has(input[value="1 Modül"]) .modul-input-container {
        margin-left: 0;
    }
}

/* ==========================================================================
   FOTOĞRAF GALERİSİ STİLLERİ - GÜNCELLENMİŞ
   ========================================================================== */

#fotograflarla-detox {
    background-color: var(--renk-acik-yesil-zemin);
}

.gallery-description {
    text-align: center;
    color: #666;
    font-size: 18px;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.photo-gallery-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.multi-level-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-auto-rows: 200px;
    grid-gap: 15px;
    grid-auto-flow: dense;
}

.multi-level-gallery .gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* FARKLI BOYUTLAR İÇİN GRID AYARLARI */
.multi-level-gallery .gallery-item:nth-child(5n+1) {
    grid-column: span 2;
    grid-row: span 2;
}

.multi-level-gallery .gallery-item:nth-child(7n+4) {
    grid-column: span 2;
}

.multi-level-gallery .gallery-item:nth-child(9n+6) {
    grid-row: span 2;
}

.multi-level-gallery .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.multi-level-gallery .gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(37, 73, 93, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.zoom-icon {
    color: white;
    font-size: 24px;
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.gallery-item:hover .zoom-icon {
    transform: scale(1);
}

/* Lightbox Stilleri aynı kalacak */
.gallery-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-lightbox.active {
    display: flex;
    opacity: 1;
}

.lightbox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.lightbox-content {
    position: relative;
    margin: auto;
    max-width: 90%;
    max-height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-image-container {
    position: relative;
    text-align: center;
}

.lightbox-image {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.lightbox-caption {
    color: white;
    margin-top: 15px;
    font-size: 16px;
    text-align: center;
}

.lightbox-close {
    position: absolute;
    top: -50px;
    right: 0;
    background: none;
    border: none;
    color: white;
    font-size: 36px;
    cursor: pointer;
    z-index: 10000;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    font-size: 24px;
    padding: 15px;
    cursor: pointer;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.lightbox-nav:hover {
    background: rgba(255,255,255,0.3);
}

.lightbox-prev {
    left: -70px;
}

.lightbox-next {
    right: -70px;
}

.no-photos-message {
    text-align: center;
    padding: 60px 20px;
    color: #666;
    font-size: 18px;
    font-style: italic;
}

/* Mobil Uyumluluk */
@media (max-width: 768px) {
    .multi-level-gallery {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        grid-auto-rows: 180px;
        grid-gap: 10px;
    }
    
    .multi-level-gallery .gallery-item:nth-child(5n+1),
    .multi-level-gallery .gallery-item:nth-child(7n+4),
    .multi-level-gallery .gallery-item:nth-child(9n+6) {
        grid-column: span 1;
        grid-row: span 1;
    }
    
    .lightbox-nav {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
    
    .lightbox-prev {
        left: 10px;
    }
    
    .lightbox-next {
        right: 10px;
    }
    
    .lightbox-close {
        top: 10px;
        right: 10px;
    }
}