/* =================================== */
/* TEMEL STİLLER VE YENİ ŞIK AÇIK PALET */
/* =================================== */
:root {
    /* ARKA PLAN RENKLERİ */
    --bs-body-bg: #F7F7F7; /* ANA ARKA PLAN: Yumuşak Bej/Krem */
    --bs-body-color: #333333; /* ANA METİN: Koyu Gri */
    --bs-card-bg: #ffffff; /* KART ARKA PLANI: Saf Beyaz */
    --card-darker-bg: #EEEEEE; /* BÖLÜM ARKA PLANI: Açık Gri */
    
    --bs-secondary-color: #666666; /* İkincil Metin */
    --bs-border-color: rgba(0, 0, 0, 0.1); /* Açık Gri/Siyah Sınırlar */
    
    /* VURGU RENGİ: LACİVERT/ZARİF MAVİ */
    --accent-color: #2F4F7F; 
    --accent-glow: #4679A8;
    
    /* GRADIENT: Lacivert ve Açık Mavi */
    --accent-gradient: linear-gradient(45deg, #2F4F7F, #4679A8); 
    
    /* GÖLGE EFEKTİ */
    --subtle-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

    /* NAV BAR YÜKSEKLİĞİ TANIMLARI */
    --navbar-height-desktop: 170px;
    --navbar-height-mobile-scrolled: 70px;

    
}

/* =================================== */
/* BODY VE GENEL RESETLEME             */
/* =================================== */
body {
    font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth;
    
    /* Vurgusuz metinler için bile minimum kalınlık 400 yerine 500 olsun */
    font-weight: 500; 
    
    padding-top: 0 !important; 
    margin-top: 0 !important;
    background-color: transparent !important; 
    
    color: var(--bs-body-color);
}

/* =================================== */
/* GENEL YARDIMCI SINIFLAR             */
/* =================================== */
.divider-accent {
    width: 100px; 
    height: 3px;
    margin: 1.5rem auto 2.5rem auto;
    background: var(--accent-gradient);
    border-radius: 2px;
}

/* =================================== */
/* BUTON VE VURGU STİLLERİ (DAHA GÖZ ALICI) */
/* =================================== */
.btn-accent {
    /* Lacivert Gradient aynı kalır */
    background: var(--accent-gradient);
    border: none;
    color: #FFFFFF !important; /* Metin rengi BEYAZ olarak garanti edildi */
    font-weight: 700; /* Daha kalın font */
    
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Yumuşak ve belirgin geçiş */
    border-radius: 8px; 
    
    /* GÖZ ALICI GÖLGE */
    box-shadow: 0 8px 25px rgba(47, 79, 127, 0.4), 0 0 5px rgba(255, 255, 255, 0.3) inset; 
}

.btn-accent:hover {
    transform: translateY(-3px); /* Daha agresif kayma */
    
    /* PARLAMA EFEKTİ İLE GÖLGE */
    box-shadow: 0 12px 30px rgba(47, 79, 127, 0.6), 0 0 15px var(--accent-glow); 
    color: #FFFFFF !important;
}

/* Çerçeveli butonlar (Teklif Al - Hero alanı için) */
.btn-outline-light {
    border-color: #FFFFFF !important;
    color: #FFFFFF !important; /* Metin rengi BEYAZ olarak garanti edildi */
    border-width: 2px !important; 
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-outline-light:hover {
    /* Hover'da dolgulu hale gelir */
    border-color: var(--accent-color) !important;
    background-color: var(--accent-color) !important;
    color: #FFFFFF !important;
    
    /* Daha az sade olması için hafif gölge ekleyelim */
    box-shadow: 0 5px 15px rgba(47, 79, 127, 0.3);
}


/* =================================== */
/* KÖK DEĞİŞKENLER */
/* =================================== */
:root {
    /* ... (Diğer renkler ve gölgeler aynı kalır) ... */

    --navbar-height-desktop: 170px; /* PC başlangıç yüksekliği */
    --navbar-height-mobile-scrolled: 80px; /* Mobil ve PC kaydırılmış yüksekliği */
    --logo-height-desktop-initial: 150px; /* PC başlangıç logo boyutu */
    --logo-height-scrolled: 40px; /* Kaydırılmış veya Mobil logo boyutu */

    /* ... (Diğer değişkenler aynı kalır) ... */
}

/* =================================== */
/* 1. NAVİGASYON TEMEL VE SABİT STİLLERİ (MOBİL İÇİN SABİT BEYAZ) */
/* =================================== */
.navbar {
    /* Mobil/Temel görünüm: Her zaman küçük ve beyaz */
    min-height: var(--navbar-height-mobile-scrolled) !important; 
    transition: all 0.4s ease;
    z-index: 1030;
    
    /* ARKA PLAN: SABİT KATI BEYAZ */
    background-color: var(--bs-card-bg) !important; 
    border-bottom: 1px solid var(--bs-border-color) !important;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1) !important;
    
    /* METİN VE HAMBURGER RENGİ: SABİT LACİVERT/MAVİ */
    --bs-navbar-color: var(--accent-color); 
    --bs-navbar-hover-color: var(--accent-glow);
    --bs-navbar-toggler-icon-bg: var(--bs-navbar-toggler-icon-mobile) !important;
    
}

.navbar-brand .logo-img {
    /* Mobil'de ve kaydırılınca logo orijinal (koyu) renginde kalır */
    height: var(--logo-height-scrolled) !important; /* Mobil için küçük logo */
    transition: all 0.4s ease;
    filter: none !important; /* Orijinal renk */
}

/* Linkler Mobil/Temelde her zaman mavi kalır */
.navbar-nav .nav-link {
    color: var(--accent-color) !important; 
    /* ... (Diğer link stilleri aynı kalır) ... */
}

/* =================================== */
/* DESKTOP OVERRIDES (PC için ŞEFFAF GEÇİŞ) */
/* =================================== */
@media (min-width: 992px) {

    /* PC BAŞLANGIÇ DURUMU (ŞEFFAF VE BÜYÜK) */
    .navbar:not(.scrolled) {
        /* Büyüklük: 170px */
        min-height: var(--navbar-height-desktop) !important;
        
        /* Şeffaflık: Arka planı kaldır */
        background-color: transparent !important; 
        border-bottom: none !important;
        box-shadow: none !important;

        /* Link Rengi: Hero alanında görünmesi için BEYAZ */
        --bs-navbar-color: #FFFFFF;
        --bs-navbar-hover-color: rgba(255, 255, 255, 0.7);
    }

    /* Link Renklerini Şeffaf Durumda Beyaz Yap */
    .navbar:not(.scrolled) .nav-link,
    .navbar:not(.scrolled) .nav-link:hover,
    .navbar:not(.scrolled) .nav-link.active {
        color: #FFFFFF !important; 
    }
    .navbar:not(.scrolled) .nav-link::after {
        background-color: #FFFFFF !important; /* Alt çizgi de beyaz */
    }

    /* PC KAYDIRILINCA (scrolled sınıfı eklendiğinde) */
    .navbar.scrolled {
        /* Küçüklük: 80px (mobil boyutuna iner) */
        min-height: var(--navbar-height-mobile-scrolled) !important; 
        
        /* Renk: Beyaz arka plan, gölge, sınır (Temel .navbar stiline döner) */
        background-color: var(--bs-card-bg) !important; 
        border-bottom: 1px solid var(--bs-border-color) !important;
        box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1) !important;

        /* Link Rengi: MAVİ olur */
        --bs-navbar-color: var(--accent-color); 
        --bs-navbar-hover-color: var(--accent-glow);
    }
    
    /* Logo Boyutu ve Rengi Geçişi */
    .navbar-brand .logo-img {
        height: var(--logo-height-desktop-initial) !important; /* Başlangıç 150px */
        transition: all 0.4s ease; /* Boyut ve renk geçişi için */
    }
    
    /* GÜNCELLENEN KISIM: Şeffafken Logoyu Koyu Renkten Beyaza Çevir */
    .navbar:not(.scrolled) .navbar-brand .logo-img {
        /* Önce siyaha çevir (brightness: 0), sonra beyaza çevir (invert: 1) */
        filter: brightness(0) invert(1) !important; 
    }

    /* KAYDIRILINCA: Logoyu Tekrar Orijinal Rengine (Koyu) Döndür */
    .navbar.scrolled .logo-img {
        height: var(--logo-height-scrolled) !important; /* Kaydırılınca 40px'e iner */
        filter: none !important; /* Orijinal (koyu) rengine döner */
    }
    
    /* HERO İÇERİĞİNİ AŞAĞI İTME */
    .hero-content { 
        padding-top: var(--navbar-height-desktop) !important; 
    }
}

/* =================================== */
/* 3. LİNK VE BUTON STİLLERİ */
/* =================================== */

.navbar-nav .nav-link {
    /* Link Rengi SABİT MAVİ */
    color: var(--accent-color) !important; 
    font-weight: 700; 
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    position: relative; 
    text-transform: uppercase; 
    letter-spacing: 0.5px;
}

/* Tüm Linklerdeki Hover/Active Durumu */
.navbar .nav-link:hover {
    color: var(--accent-glow) !important; /* Açık mavi hover efekti */
}
.navbar .nav-link:hover::after,
.navbar .nav-link.active::after {
    width: 100%; /* Alt çizgi animasyonu korunur */
}

/* NAVİGASYON İÇİ BUTON STİLİ */
.navbar-nav .btn.btn-accent {
    color: #ffffff !important; 
    padding: 0.6rem 1.7rem; 
    font-weight: 800; 
    
    @media (max-width: 991px) {
        width: 90%; 
        margin: 10px auto 15px auto; 
        display: block; 
        text-align: center;
    }
}

/* =================================== */
/* KÖK DEĞİŞKENLER (Önceki Adımlardan) */
/* =================================== */
:root {
    --accent-color: #2F4F7F; /* Mavi/Lacivert */
    --accent-glow: #4679A8;
    --bs-card-bg: #ffffff; /* Saf Beyaz Navigasyon Zemini */
    --bs-border-color: rgba(0, 0, 0, 0.1); 
    --logo-height-mobile: 70px;
    --navbar-height-mobile-scrolled: 80px;

    /* Mavi Hamburger İkonu Tanımı */
    --bs-navbar-toggler-icon-mobile: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%232F4F7F' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* =================================== */
/* NAVİGASYON: SABİT BEYAZ ZEMİN */
/* =================================== */

.navbar {
    min-height: var(--navbar-height-mobile-scrolled); 
    z-index: 1030;
    
    /* ARKA PLAN: SABİT KATI BEYAZ */
    background-color: var(--bs-card-bg) !important;
    border-bottom: 1px solid var(--bs-border-color) !important;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1) !important;
    
    /* Metin ve Hamburger İkon Rengi Kontrolü */
    --bs-navbar-color: var(--accent-color); 
    --bs-navbar-hover-color: var(--accent-glow);
    
    /* KRİTİK: Hamburger İkonu Arka Planı */
    --bs-navbar-toggler-icon-bg: var(--bs-navbar-toggler-icon-mobile) !important; 
}

/* Logo Stili */
.navbar-brand .logo-img {
    height: var(--logo-height-mobile) !important; 
    filter: none !important; /* Logo orijinal (koyu) renginde kalır */
}

/* =================================== */
/* HAMBURGER İKON KONTROLÜ */
/* =================================== */

/* Navbar Toggler'ı hedefleyerek mavi olmasını sağlıyoruz */
.navbar-toggler {
    border-color: transparent !important; /* Kenarlığı kaldırmak isterseniz */
}

/* Link Stilleri (Sabit Mavi) */
.navbar-nav .nav-link {
    color: var(--accent-color) !important; 
    font-weight: 700; 
}
/* ... (Alt Çizgi Hover Stilleri burada devam eder) ... */

/* =================================== */
/* DİĞER: Sabit İletişim Menüsü */
/* =================================== */

.floating-contact-menu {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 1040;
    /* Gerekli diğer stiller (tıklandığında açılma animasyonu vb.) */
}

/* =================================== */
/* NAVİGASYON İÇİ LİNK STİLLERİ (ŞIK) */
/* =================================== */

.navbar-nav .nav-link {
    font-size: 0.95rem; 
    font-weight: 700; /* 600'den 700'e (Daha Kalın) yükseltildi */
    transition: color 0.3s ease;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    
    /* Alt Çizgi Efekti için */
    position: relative; 
    text-transform: uppercase; 
    letter-spacing: 0.5px;
}

.navbar-nav .nav-link {
    font-size: 0.95rem; 
    font-weight: 700; /* 600'den 700'e (Daha Kalın) yükseltildi */
    transition: color 0.3s ease;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    
    /* Alt Çizgi Efekti için */
    position: relative; 
    text-transform: uppercase; 
    letter-spacing: 0.5px;
}



@media (min-width: 992px) {
    /* Navbar Yüksekliği */
    .navbar { min-height: 170px !important; }
    .navbar.scrolled { min-height: 60px !important; }
    
    /* Logo Boyutu */
    .navbar-brand .logo-img { height: 150px !important; }
    .navbar.scrolled .logo-img { height: 40px !important; }
    
    /* HERO İÇERİĞİNİ AŞAĞI İTME */
    .hero-content { padding-top: 170px !important; }
}

/* =================================== */
/* ÜRÜN KARTLARI (3D Tilt, Zoom ve Carousel Desteği) */
/* =================================== */

.product-card {
    /* ... Mevcut 3D Tilt Stilleri ... */
    /* Kartın minimum yüksekliğini sabitleyelim ki görsel alan boş kalmasın */
    min-height: 380px; 
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); 
    transform-style: preserve-3d;
    border-radius: 12px !important;
    display: flex; /* İçindeki row'un yüksekliğini almasını sağlar */
}

/* Görsel Konteynerinin Boyutunu Sabitleme */
.product-img-container {
    height: 100%;
    /* İçindeki carousel'in yüksekliğini almasını sağlar */
    position: relative; 
}

/* Carousel İçindeki Görsel ve Konteyner Yüksekliği */
.product-img-container .carousel,
.product-img-container .carousel-inner,
.product-img-container .carousel-item {
    height: 100%;
}

/* Görsellerin Konteyneri Tam Doldurması */
.product-img-zoom {
    object-fit: cover !important; /* Görseli zorla konteyneri doldurur */
    height: 100% !important; /* Görselin yüksekliği 100% olsun */
    filter: brightness(0.9);
    /* Transform transition'ı yalnızca görselin kendisine uyguluyoruz */
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Hover Zoom Efekti */
.product-card:hover .product-img-zoom {
    transform: scale(1.08); /* Zoom efekti */
}

/* Mini Carousel Indicator Stili */
.carousel-indicators-mini {
    position: absolute;
    bottom: 10px;
    right: 15px; /* Sağ tarafa aldık */
    padding: 0;
    margin: 0;
    list-style: none;
    z-index: 10;
}
.carousel-indicators-mini button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #FFFFFF;
    opacity: 0.7;
    border: none;
    margin: 0 4px;
    transition: opacity 0.3s, background-color 0.3s;
}
.carousel-indicators-mini .active {
    opacity: 1;
    background-color: var(--accent-color);
}

/* =================================== */
/* DESKTOP OVERRIDES (CRITICAL: > 992px) */
/* =================================== */
@media (min-width: 992px) {
    /* Navbar Yüksekliği */
    .navbar {
        min-height: 170px !important; /* Başlangıç: Logo 150px olduğu için 170px yükseklik */
    }
    
    /* Scroll yapıldığında Navbar'ı küçült */
    .navbar.scrolled {
        min-height: 60px !important; /* Kaydırılınca 60px'e iner */
    }
    
    /* Logo Boyutu */
    .navbar-brand .logo-img {
        height: 150px !important; /* DESKTOP BAŞLANGIÇ BOYUTU: 150px */
    }
    
    /* Scroll yapıldığında logoyu küçült */
    .navbar.scrolled .logo-img {
        height: 150px !important; /* Kaydırılınca 40px'e küçülür */
    }
    
    /* HERO İÇERİĞİNİ AŞAĞI İTME */
    .hero-content {
        /* Metin içeriğini Navbar'ın YENİ yüksekliği kadar aşağı it */
        padding-top: 170px !important; 
    }
}

/* =================================== */
/* ANİMASYON STİLLERİ (Sade)           */
/* =================================== */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px); 
    transition: opacity 1s ease-out, transform 1s ease-out; 
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.fade-left { transform: translateX(-40px); } 
.fade-right { transform: translateX(40px); } 
.fade-left.is-visible, .fade-right.is-visible {
    transform: translateX(0);
}

/* =================================== */
/* BÖLÜM 1: HERO ALANI STİLLERİ       */
/* =================================== */
.hero-section {
    height: 100vh;
    overflow: hidden;
    color: #FFFFFF !important; 
    background: url('https://placehold.co/1920x1080/4679A8/FFFFFF?text=Lüks+Pergola') no-repeat center center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); 
    position: relative; 
    
    /* Navbar'ın altını doldurması için padding'i sıfırlıyoruz */
    padding-top: 0 !important; 
}

/* Hero Görselleri için stil aynı kalır */
.hero-section .hero-img {
    height: 100vh;
    object-fit: cover;
    filter: brightness(0.7); 
}

/* Yarı saydam katman */
.hero-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 70%, rgba(0, 0, 0, 0.1) 100%);
    position: absolute; 
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1; 
}

.hero-content {
    position: absolute; 
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    
    /* Metin içeriğini Navbar'ın YENİ yüksekliği kadar aşağı it (100px) */
    padding-top: 100px; 
    
    display: flex;
    align-items: center; 
    justify-content: center; 
    z-index: 2; 
}

/* EKLEME: Hero başlıkları ve alt başlıklar */
.hero-content h1 {
    font-weight: 900 !important; /* Başlıklar için en yüksek kalınlık */
}
.hero-content h2 {
    font-weight: 600 !important; /* Alt başlıklar için belirgin kalınlık */
}

/* =================================== */
/* DİĞER BÖLÜMLER                      */
/* =================================== */
.product-card {
    border: 1px solid var(--bs-border-color);
    transition: all 0.5s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); 
    border-color: var(--accent-color);
}
.vertical-timeline-box {
    border-left: 2px solid var(--bs-border-color);
}
.timeline-icon-container {
    background-color: var(--bs-body-bg); 
    border: 3px solid var(--accent-color);
}
.cta-card {
    background-color: var(--bs-card-bg); 
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
    transition: all 0.5s ease;
}
.cta-card:hover {
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
    transform: scale(1.01);
}



/* =================================== */
/* TEKLİF ALANININ EK STİLİ VE ANİMASYON */
/* =================================== */

/* CTA Kartı (İç Parlama Efekti) */
.cta-card {
    background-color: var(--bs-card-bg); 
    border: 1px solid var(--bs-border-color);
    
    /* Göz alıcı iç parlama (Inner Glow) efekti */
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.2), 0 0 20px var(--accent-color) inset;
    
    transition: all 0.5s ease;
}

.cta-card:hover {
    /* Hover'da parlamayı artır */
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.3), 0 0 30px var(--accent-glow) inset;
    transform: none; /* Hafif sallantıyı engellemek için scale'i kaldırdık */
}

/* Buton Sallanma (Pulse) Animasyonu */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 4px 10px rgba(47, 79, 127, 0.5);
    }
    50% {
        transform: scale(1.03);
        box-shadow: 0 8px 20px rgba(47, 79, 127, 0.8);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 4px 10px rgba(47, 79, 127, 0.5);
    }
}

.pulse-button {
    /* Animasyonu sürekli ve yavaş çalıştır */
    animation: pulse 2.5s infinite ease-in-out;
}

/* Çerçeveli Buton (Örneğin Hero Alanı için) - CTA'da kullanıldı */
.btn-outline-accent {
    border-color: var(--accent-color) !important;
    color: var(--accent-color) !important;
    background-color: transparent !important;
    
    border-width: 2px !important; 
    border-radius: 8px;
    font-weight: 600;
    padding: 0.75rem 1.75rem;
    transition: all 0.3s ease;
}

.btn-outline-accent:hover {
    border-color: var(--accent-hover-color) !important;
    background-color: var(--accent-hover-color) !important;
    color: #FFFFFF !important;
    
    box-shadow: 0 5px 15px var(--accent-shadow-base);
}

/* =================================== */
/* ÜRÜN KARTLARI (3D Tilt, Zoom ve Sabit Yükseklik) */
/* =================================== */

/* Yeni Sabit Yükseklik Konteyneri (400px Yüksekliği Verir) */
.product-fixed-height {
    height: 400px !important; /* SABİT GÖRSEL YÜKSEKLİĞİ */
}

.product-card {
    /* ... (Diğer 3D Tilt Stilleri) ... */
    min-height: 400px; /* Kartın min yüksekliğini görsel yüksekliğine eşitleriz */
    /* display: flex ve align-items: stretch olmadığı için bu kritik */
}


/* Konteyner Yapısı */
.solution-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Her Bir Satır */
.compact-solution-item {
    display: flex;
    gap: 20px;
    margin-bottom: 0;
}

/* Sol Taraftaki Çizgi ve İkon Hattı */
.status-line {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.circle-icon {
    width: 45px;
    height: 45px;
    background: var(--accent-gradient);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 4px 10px rgba(47, 79, 127, 0.2);
    z-index: 2;
}

.line-connector {
    width: 2px;
    flex-grow: 1;
    background: var(--bs-border-color);
    margin: 5px 0;
}

/* Sağ Taraftaki İçerik Kutusu */
.content-box {
    background: var(--bs-card-bg);
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 25px;
    flex-grow: 1;
    border: 1px solid var(--bs-border-color);
    box-shadow: 2px 4px 12px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
}

.compact-solution-item:hover .content-box {
    transform: translateX(5px);
    border-color: var(--accent-color);
    box-shadow: 4px 8px 20px rgba(0,0,0,0.06);
}

/* Metin Stilleri */
.problem-text {
    font-weight: 700;
    color: var(--accent-color);
    font-size: 1rem;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.solution-text {
    font-size: 0.9rem;
    color: var(--bs-secondary-color);
    line-height: 1.5;
}

/* Mobil İyileştirme */
@media (max-width: 576px) {
    .circle-icon {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }
    .content-box {
        padding: 15px;
    }
    .problem-text {
        font-size: 0.9rem;
    }
    .solution-text {
        font-size: 0.85rem;
    }
}

/* =================================== */
/* 9. KAYAN İLETİŞİM MENÜSÜ STİLLERİ    */
/* =================================== */

.floating-contact-menu {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 1050; /* Tüm diğer elementlerin üzerinde görünmesini sağlar */
    display: flex;
    flex-direction: column-reverse; /* Ana butonu en alta koyar */
    align-items: flex-end;
}

/* Ana CTA Butonu */
.main-cta-button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: white;
    
    /* Aksan Rengi ve Gölge Kullanımı */
    background: var(--accent-gradient);
    box-shadow: 0 5px 20px var(--accent-shadow-base);
    
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* pulse-button animasyonu önceki CSS'inizde tanımlı */
}

.main-cta-button:hover {
    transform: scale(1.05);
}

/* Kapatma/Açma İkon Değişimi */
.floating-contact-menu.open .main-cta-button i {
    transform: rotate(135deg); /* Açıldığında ikonu çevir (X işareti gibi) */
}
.main-cta-button i {
    transition: transform 0.3s ease;
    display: block; /* İkonun düzgün dönmesini sağlar */
}
.floating-contact-menu.open .main-cta-button .bi-chat-dots-fill {
    content: "\F3D8"; /* bi-x-lg ikonu, çarpı işareti (Dinamik olarak JS ile yapılır, burası görsel referans) */
}


/* İletişim Linkleri Konteyneri */
.contact-links {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-bottom: 10px;
    
    /* Başlangıçta gizli */
    visibility: hidden;
    opacity: 0;
    max-height: 0;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, max-height 0.5s ease-in-out;
}

/* Menü Açıkken */
.floating-contact-menu.open .contact-links {
    visibility: visible;
    opacity: 1;
    max-height: 300px; /* Linklerin rahatça sığacağı bir değer */
}

/* Tekil İletişim Linkleri */
.contact-link {
    width: 50px;
    height: 50px;
    margin-bottom: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: white;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

/* Link Renkleri */
.contact-link.whatsapp { background-color: #25d366; }
.contact-link.phone { background-color: var(--accent-color); } /* Ana aksan rengi */
.contact-link.mail { background-color: #fb0505; } /* Sarı */
.contact-link.instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.contact-link.instagram i { color: white; } /* Gradient'ten dolayı iç ikon rengini garanti eder */

.contact-link:hover {
    transform: translateX(-5px) scale(1.05);
}