/* Genel Reset ve Ayarlar */
:root {
    --pastel-orange: #6c9740;
    /* Ana CTA ve vurgu */
    --pastel-blue: #A7C7E7;
    /* İkincil vurgu, ikonlar, arkaplanlar */
    --pastel-blue-light: #D6E6F2;
    /* Daha açık mavi tonu */
    --text-dark: #333A40;
    --text-light: #5F6B7A;
    --background-light-gray: #F8F9FA;
    --white: #FFFFFF;
    --border-color: #E0E0E0;
    --font-family: 'Montserrat', sans-serif;
}

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

body {
    font-family: var(--font-family);
    color: var(--text-dark);
    line-height: 1.6;
    background-color: var(--white);
}

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

.section-padding {
    padding: 60px 0;
}

h1,
h2,
h3,
h4,
h5 {
    margin-bottom: 1rem;
    color: var(--text-dark);
    font-weight: 600;
}

h1 {
    font-size: 2.8rem;
}

h2 {
    font-size: 2.2rem;
    text-align: center;
}

h3 {
    font-size: 1.8rem;
}

h4 {
    font-size: 1.25rem;
}

h5 {
    font-size: 1.1rem;
    font-weight: 500;
}


p {
    margin-bottom: 1rem;
    color: var(--text-light);
}

.section-subtitle {
    text-align: center;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
    color: var(--text-light);
}

a {
    text-decoration: none;
    color: var(--pastel-orange);
}

/* Butonlar */
.btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 25px;
    /* Yuvarlak kenarlar */
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    border: none;
    cursor: pointer;
    text-align: center;
}

.btn-primary {
    background-color: var(--pastel-orange);
    color: var(--white);
}

    .btn-primary:hover {
        background-color: #e89c61;
        /* Biraz daha koyu turuncu */
        transform: translateY(-2px);
    }

.btn-secondary {
    background-color: var(--white);
    color: var(--pastel-orange);
    border: 1px solid var(--pastel-orange);
}

    .btn-secondary:hover {
        background-color: var(--pastel-blue-light);
        color: var(--text-dark);
        border-color: var(--pastel-blue-light);
    }

.btn-login {
    /* Headerdaki Giriş Yap butonu için özel stil */
    background-color: var(--pastel-orange);
    color: var(--white);
    padding: 10px 20px;
}

    .btn-login:hover {
        background-color: #e89c61;
    }

.btn-small {
    padding: 10px 20px;
    font-size: 0.9rem;
}

/* Header */
header {
    background-color: var(--white);
    padding: 15px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}

    header nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

.logo img {
    height: 100px;
    width: auto;
}


header nav ul {
    list-style: none;
    display: flex;
    align-items: center;
}

    header nav ul li {
        margin-left: 25px;
    }

        header nav ul li a {
            color: var(--text-light);
            font-weight: 500;
        }

            header nav ul li a:not(.btn-login):hover {
                color: var(--pastel-orange);
            }

        /* Header Navigasyon Ek Stilleri (Mevcutların altına veya uygun bir yere) */

        /* Ana menüdeki Sigortalarımız için hover'a hazırlık */
        header nav ul li.dropdown-menu-item {
            position: relative;
            /* Açılır menünün pozisyonunu buna göre ayarlayacağız */
        }

/* Ok ikonu stili (isteğe bağlı) */
.nav-arrow {
    font-size: 0.7em;
    /* Okun boyutu */
    margin-left: 5px;
    transition: transform 0.3s ease;
}

header nav ul li.dropdown-menu-item:hover .nav-arrow {
    transform: rotate(180deg);
    /* Hover'da oku döndür */
}

/* Açılır Menü İçeriği (.dropdown-content) */
.dropdown-content {
    display: none;
    /* Başlangıçta gizli */
    position: absolute;
    top: 100%;
    /* Ana li'nin hemen altında başlasın */
    left: 0;
    background-color: var(--white);
    min-width: 240px;
    /* Açılır menü genişliği */
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    /* Diğer elemanların üzerinde kalsın */
    border-radius: 0 0 8px 8px;
    /* Alt kenarlar yuvarlak */
    padding: 10px 0;
    list-style: none;
    /* Madde işaretlerini kaldır */
    /* Animasyon için başlangıç durumu */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    /* Hafif aşağıda başlasın */
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

/* Ana li'ye hover olduğunda açılır menüyü göster */
header nav ul li.dropdown-menu-item:hover > .dropdown-content {
    /* Sadece direkt çocuk olan .dropdown-content'i hedefle */
    display: block;
    /* Görünür yap (layout için) */
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    /* Normal pozisyonuna gelsin */
}

/* Açılır menü içindeki linkler */
.dropdown-content li a {
    color: var(--text-dark);
    /* Link rengi */
    padding: 10px 20px;
    /* İç boşluklar */
    text-decoration: none;
    display: block;
    /* Tam genişlikte olsun */
    font-size: 0.9rem;
    /* Link metin boyutu */
    font-weight: 500;
    /* Font kalınlığı */
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .dropdown-content li a:hover {
        background-color: var(--pastel-blue-light);
        /* Hover arkaplan rengi (açık mavi) */
        color: var(--pastel-blue);
        /* Hover link rengi (mavi) */
    }


/* Hero Section (Mevcut #hero stilleriniz kalabilir) */
#hero {
    display: flex;
    align-items: center;
    gap: 40px;
    min-height: 80vh;
    position: relative;
    /* İçerideki absolute pozisyonlamalar için gerekebilir */
}

    #hero .hero-content {
        flex: 1;
        /* z-index: 2; Opsiyonel, eğer bir şekilde slider öne çıkarsa diye ama flex ile gerekmemeli */
    }

/* Hero Slider (Eski .hero-image yerine veya onu güncelleyerek) */
.hero-slider-container {
    flex: 0.8;
    /* Görselin kaplayacağı alan (oranı koruyoruz) */
    position: relative;
    /* İçindeki resimlerin absolute pozisyonlanması için */
    height: 400px;
    /* Slayt yüksekliğini ayarlayın, veya % veya vh kullanın */
    overflow: hidden;
    /* Slayt sınırları dışına taşan kısımları gizle */
    border-radius: 10px;
    /* Slayt kenarlarına yuvarlaklık (isteğe bağlı) */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    /* Hafif gölge (isteğe bağlı) */
}

    .hero-slider-container img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Resmi kırpmadan alanı doldurur */
        opacity: 0;
        /* Başlangıçta tüm resimler görünmez */
        /* Animasyon ayarları */
        animation-name: heroImageFade;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        /* Animasyon süresi ve kaç resim olduğu aşağıda hesaplanacak */
    }

/* Animasyon Keyframes */
@keyframes heroImageFade {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }
    /* Hızlıca görünür olsun (örneğin %33'lük sürenin ilk %10'u) */
    33% {
        opacity: 1;
    }
    /* Bir süre görünür kalsın */
    43% {
        opacity: 0;
    }
    /* Hızlıca kaybolsun (örneğin %33'lük sürenin son %10'u) */
    100% {
        opacity: 0;
    }
}

/* Slaytların Animasyon Sürelerini ve Gecikmelerini Ayarlama
   (Aşağıdaki değerler 3 resim için ve her resmin yaklaşık 5 saniye görünür kalması varsayımıyladır)
   Her bir resim için toplam animasyon süresi: (Resim Sayısı) * (Her Resmin Görünme Süresi)
   Örnek: 3 resim * 5 saniye = 15 saniye
*/

.hero-slider-container img {
    animation-duration: 15s;
    /* Toplam animasyon süresi (3 resim * 5sn) */
}

    .hero-slider-container img:nth-child(1) {
        animation-delay: 0s;
        /* İlk resim hemen başlasın */
        opacity: 1;
        /* İlk resim CSS ile de görünür olabilir, animasyon da bunu destekler */
    }

    .hero-slider-container img:nth-child(2) {
        animation-delay: 5s;
        /* İkinci resim, ilk resim kaybolmaya başladıktan sonra (5sn sonra) */
    }

    .hero-slider-container img:nth-child(3) {
        animation-delay: 10s;
        /* Üçüncü resim (10sn sonra) */
    }

/* Eğer daha fazla resminiz varsa:
.hero-slider-container img:nth-child(4) {
    animation-delay: 15s;
}
...ve animation-duration'ı (Resim Sayısı * 5s) olarak güncelleyin.
*/


/* Eski .hero-image stili (Eğer direkt bunu güncelliyorsanız aşağıdaki gibi)
#hero .hero-image {
    flex: 0.8;
    text-align: center; // Bu artık geçerli olmayacak
    position: relative; // Eklendi
    height: 400px; // Eklendi
    overflow: hidden; // Eklendi
    border-radius: 10px; // Eklendi
}

#hero .hero-image img {
   // Yukardaki .hero-slider-container img stilleri buraya gelecek
}
*/

/* Responsive Ayarlamalar (Hero bölümü için mevcut responsive kurallarınızı güncelleyebilirsiniz) */
@media (max-width: 992px) {
    #hero {
        /* Mevcut responsive stilinizde muhtemelen flex-direction: column; vardı. */
        /* O zaman .hero-slider-container'ın genişlik ve yüksekliğini ayarlamanız gerekebilir. */
    }

    .hero-slider-container {
        height: 300px;
        /* Orta boy ekranlarda yüksekliği azaltabiliriz */
        /* flex: 1; Eğer mobil'de tam genişlik kaplayacaksa */
        /* width: 100%; */
    }
}

@media (max-width: 768px) {
    #hero {
        /* flex-direction: column; text-align: center; zaten olabilir */
    }

    .hero-slider-container {
        height: 250px;
        /* Mobil ekranlarda yükseklik */
        width: 100%;
        /* Eğer sütun yapısı bozulduysa tam genişlik */
        margin-top: 20px;
        /* Metinle arasına boşluk (eğer alt alta ise) */
        flex: none;
        /* Eğer flex: 0.8 sorun çıkarıyorsa mobil'de */
    }
}

/* Card Yapısı (Genel) */
.card {
    background-color: var(--white);
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* İçeriği ortala */
    text-align: center;
}

    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }

    .card h3 {
        margin-top: 15px;
        /* İkon ile başlık arası */
    }

/* Product Section */
#products .product-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
}

#products .card i {
    /* Örnek ikon stili */
    font-size: 2.5rem;
    color: var(--pastel-blue);
    margin-bottom: 15px;
    background-color: var(--pastel-blue-light);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.all-products-link {
    text-align: center;
    margin-top: 40px;
}

    .all-products-link a {
        font-weight: 600;
    }

/* Why Us Section */
#why-us {
    background-color: var(--background-light-gray);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.feature-item {
    background-color: var(--white);
    padding: 25px;
    border-radius: 8px;
    text-align: center;
    /* Görseldeki gibi ikonları ve metinleri ortala */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

    .feature-item i {
        /* Örnek ikon stili */
        font-size: 2rem;
        color: var(--pastel-orange);
        margin-bottom: 10px;
        display: inline-block;
        /* İkonların block olup alta kaymasını engelle */
    }

    .feature-item h4 {
        margin-top: 10px;
    }


/* How It Works Section */
.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.step-card {
    background-color: var(--white);
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    position: relative;
    /* Step number için */
    border: 1px solid var(--border-color);
    /* Hafif bir çerçeve */
}

    .step-card .step-number {
        position: absolute;
        top: -15px;
        left: 50%;
        transform: translateX(-50%);
        background-color: var(--pastel-blue);
        color: var(--white);
        width: 35px;
        height: 35px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 1.1rem;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .step-card i {
        font-size: 2rem;
        color: var(--pastel-orange);
        margin-bottom: 15px;
        margin-top: 20px;
        /* Step number'dan sonra biraz boşluk */
    }

/* Testimonials Section */
#testimonials {
    background-color: var(--background-light-gray);
}

.testimonial-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.testimonial-card {
    text-align: left;
    /* Yorumlar genelde sola yaslı olur */
    align-items: flex-start;
    /* Kart içeriğini sola yasla */
}

    .testimonial-card .stars {
        color: #FFC107;
        /* Yıldız rengi */
        font-size: 1.2rem;
        margin-bottom: 10px;
    }

    .testimonial-card p {
        font-style: italic;
        margin-bottom: 15px;
    }

    .testimonial-card small {
        color: var(--text-light);
        font-weight: 500;
    }

/* Quick Offer Section */
.quick-offer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* İki eşit sütun */
    gap: 50px;
    align-items: center;
    background-color: var(--pastel-blue-light);
    /* Hafif mavi arkaplan */
    padding: 40px;
    border-radius: 15px;
}

.quick-offer-info ul {
    list-style: none;
    padding-left: 0;
    margin: 20px 0;
}

    .quick-offer-info ul li {
        margin-bottom: 10px;
        padding-left: 25px;
        position: relative;
    }

        .quick-offer-info ul li::before {
            /* Madde işaretleri için pastel turuncu daire */
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 10px;
            height: 10px;
            background-color: var(--pastel-orange);
            border-radius: 50%;
        }

.quick-offer-form h4 {
    margin-bottom: 20px;
}

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

    .form-group label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
        color: var(--text-dark);
    }

    .form-group input,
    .form-group select {
        width: 100%;
        padding: 12px 15px;
        border: 1px solid var(--border-color);
        border-radius: 5px;
        font-size: 1rem;
    }

        .form-group input:focus,
        .form-group select:focus {
            outline: none;
            border-color: var(--pastel-orange);
            box-shadow: 0 0 0 2px rgba(253, 175, 117, 0.3);
        }

.quick-offer-form .btn-primary {
    width: 100%;
}

/* FAQ Section */
.faq-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
}

.faq-item {
    background-color: var(--white);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}

    .faq-item h5 {
        font-weight: 600;
        color: var(--pastel-blue);
    }


/* Footer */
footer {
    background-color: var(--text-dark);
    color: var(--white);
    text-align: center;
    padding: 30px 0;
    margin-top: 40px;
}

    footer p {
        color: #ccc;
        /* footer içindeki p etiketinin rengini değiştirdik */
        margin-bottom: 0;
    }

/* Genel Responsiveness İpuçları (Bunları geliştirmeniz gerekecek) */
@media (max-width: 992px) {
    #hero {
        flex-direction: column;
        text-align: center;
        min-height: auto;
        padding-top: 40px;
    }

        #hero .hero-image {
            margin-top: 30px;
            flex: 1;
            /* Mobil için resim normal akışta */
        }

    .quick-offer-grid {
        grid-template-columns: 1fr;
        /* Tek sütunlu */
    }
}

@media (max-width: 768px) {
    h1 {
        font-size: 2.2rem;
    }

    h2 {
        font-size: 1.8rem;
    }

    header nav ul {
        /* Mobil menü için JS ile açılır/kapanır hale getirmeniz gerekir */
        /* Şimdilik basitçe gizleyebiliriz veya alta alabiliriz */
        flex-direction: column;
        position: absolute;
        top: 70px;
        /* Header yüksekliğine göre ayarlayın */
        left: 0;
        width: 100%;
        background-color: var(--white);
        display: none;
        /* Varsayılan olarak gizli, JS ile göster */
        padding: 10px 0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

        header nav ul li {
            margin: 10px 0;
            text-align: center;
        }

    /* Mobil menü toggle butonu eklemeniz gerekir */

    .product-cards,
    .features-grid,
    .process-steps,
    .testimonial-cards,
    .faq-items {
        grid-template-columns: 1fr;
        /* Tüm kartlar mobil'de tek sütun */
    }
}

/* Footer Stilleri */
footer {
    background-color: var(--text-dark);
    /* Footer arkaplanı koyu */
    color: #A0A7B1;
    /* Footer metin rengi (daha açık gri) */
    padding-top: 50px;
    /* Üst kısımla boşluk */
    /* margin-top: 40px; Bu zaten vardı, kaldırılabilir veya ayarlanabilir */
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    /* Sütunları otomatik ayarla */
    gap: 30px;
    padding-bottom: 40px;
    align-items: flex-start;
    /* Sütun içeriklerini yukarı yasla */
}

.footer-column h4 {
    color: var(--white);
    font-size: 1.1rem;
    margin-bottom: 20px;
    font-weight: 600;
}

.footer-column ul {
    list-style: none;
    padding: 0;
}

    .footer-column ul li {
        margin-bottom: 12px;
    }

        .footer-column ul li a {
            color: #A0A7B1;
            /* Link rengi */
            transition: color 0.3s ease;
        }

            .footer-column ul li a:hover {
                color: var(--pastel-orange);
                /* Hover'da turuncu */
            }


.footer-logo-column img {
    height: 230px;
    /* Footer için ideal yükseklik */
    width: auto;
    /* Orantılı genişlik */
    display: block;
    /* Taşmaları önler, hizalamayı kolaylaştırır */
    margin-bottom: 10px;
    /* Alt boşluk */
    /* Gerekirse yatayda ortalamak için: */
    margin-left: auto;
    margin-right: auto;
}

/* Eğer logo altına "Sigorta" gibi bir yazı eklemek isterseniz:
.footer-logo-column .logo::after {
    content: 'Sigorta';
    display: block;
    font-size: 0.8rem;
    color: #A0A7B1;
    font-weight: 400;
    margin-top: -5px;
} */
.footer-logo-column .logo-subtitle {
    /* Opsiyonel alt yazı için stil */
    font-size: 0.9rem;
    color: #A0A7B1;
}


/* Footer Bottom */
.footer-bottom {
    background-color: #2B323A;
    /* Biraz daha açık koyu ton */
    padding: 20px 0;
    border-top: 1px solid #434A54;
    /* Üstte ayırıcı çizgi */
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    /* Küçük ekranlarda alta kayması için */
    gap: 15px;
}

.social-icons a {
    color: white;
    margin-right: 15px;
    font-size: 1.3rem;
    /* İkon boyutunu büyütelim */
    transition: color 0.3s ease;
}

    .social-icons a:last-child {
        margin-right: 0;
    }

    .social-icons a:hover {
        color: var(--pastel-orange);
    }

/* Font Awesome veya başka bir ikon kütüphanesi kullanacaksanız,
   yukarıdaki 'X', 'F' gibi harfler yerine ikon class'larını kullanın. */

.contact-info span {
    margin-left: 20px;
    font-size: 0.95rem;
    color: #A0A7B1;
}

    .contact-info span:first-child {
        margin-left: 0;
    }


/* Footer için Mobil Uyarlamaları (Daha da geliştirilebilir) */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        /* Mobil'de sütunlar biraz daha dar olabilir */
        gap: 20px;
        /* Boşlukları azalt */
    }

    .footer-logo-column {
        grid-column: 1 / -1;
        /* Logoyu tam genişlik yap */
        text-align: center;
        /* Logoyu ortala */
        margin-bottom: 20px;
    }

    .footer-bottom-content {
        flex-direction: column;
        /* Alt bilgileri dikey sırala */
        text-align: center;
    }

    .social-icons {
        margin-bottom: 15px;
    }

    .contact-info span {
        display: block;
        /* Telefon ve email alt alta */
        margin-left: 0;
        margin-bottom: 8px;
    }
}

@media (max-width: 480px) {
    .footer-grid {
        grid-template-columns: 1fr;
        /* Çok küçük ekranlarda tek sütun */
        text-align: center;
    }

    .footer-column h4 {
        margin-top: 20px;
        /* Tek sütunda başlıklar arası boşluk */
    }

    .footer-column ul {
        margin-bottom: 10px;
    }

    /* Footer Stilleri */
    footer {
        background-color: var(--text-dark);
        /* Footer arkaplanı koyu */
        color: #A0A7B1;
        /* Footer metin rengi (daha açık gri) */
        padding-top: 50px;
        /* Üst kısımla boşluk */
        /* margin-top: 40px; Bu zaten vardı, kaldırılabilir veya ayarlanabilir */
    }

    .footer-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        /* Sütunları otomatik ayarla */
        gap: 30px;
        padding-bottom: 40px;
        align-items: flex-start;
        /* Sütun içeriklerini yukarı yasla */
    }

    .footer-column h4 {
        color: var(--white);
        font-size: 1.1rem;
        margin-bottom: 20px;
        font-weight: 600;
    }

    .footer-column ul {
        list-style: none;
        padding: 0;
    }

        .footer-column ul li {
            margin-bottom: 12px;
        }

            .footer-column ul li a {
                color: #A0A7B1;
                /* Link rengi */
                transition: color 0.3s ease;
            }

                .footer-column ul li a:hover {
                    color: var(--pastel-orange);
                    /* Hover'da turuncu */
                }

    .footer-logo-column .logo {
        font-size: 2rem;
        /* Logoyu biraz daha büyütelim */
        color: var(--white);
        /* Papara'daki gibi logo beyaz */
        margin-bottom: 10px;
    }

    /* Eğer logo altına "Sigorta" gibi bir yazı eklemek isterseniz:
.footer-logo-column .logo::after {
    content: 'Sigorta';
    display: block;
    font-size: 0.8rem;
    color: #A0A7B1;
    font-weight: 400;
    margin-top: -5px;
} */
    .footer-logo-column .logo-subtitle {
        /* Opsiyonel alt yazı için stil */
        font-size: 0.9rem;
        color: #A0A7B1;
    }


    /* Footer Bottom */
    .footer-bottom {
        background-color: #2B323A;
        /* Biraz daha açık koyu ton */
        padding: 20px 0;
        border-top: 1px solid #434A54;
        /* Üstte ayırıcı çizgi */
    }

    .footer-bottom-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        /* Küçük ekranlarda alta kayması için */
        gap: 15px;
    }

    .social-icons a {
        color: white;
        margin-right: 15px;
        font-size: 1.3rem;
        /* İkon boyutunu büyütelim */
        transition: color 0.3s ease;
    }

        .social-icons a:last-child {
            margin-right: 0;
        }

        .social-icons a:hover {
            color: var(--pastel-orange);
        }

    /* Font Awesome veya başka bir ikon kütüphanesi kullanacaksanız,
   yukarıdaki 'X', 'F' gibi harfler yerine ikon class'larını kullanın. */

    .contact-info span {
        margin-left: 20px;
        font-size: 0.95rem;
        color: #A0A7B1;
    }

        .contact-info span:first-child {
            margin-left: 0;
        }


    /* Footer için Mobil Uyarlamaları (Daha da geliştirilebilir) */
    @media (max-width: 768px) {
        .footer-grid {
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            /* Mobil'de sütunlar biraz daha dar olabilir */
            gap: 20px;
            /* Boşlukları azalt */
        }

        .footer-logo-column {
            grid-column: 1 / -1;
            /* Logoyu tam genişlik yap */
            text-align: center;
            /* Logoyu ortala */
            margin-bottom: 20px;
        }

        .footer-bottom-content {
            flex-direction: column;
            /* Alt bilgileri dikey sırala */
            text-align: center;
        }

        .social-icons {
            margin-bottom: 15px;
        }

        .contact-info span {
            display: block;
            /* Telefon ve email alt alta */
            margin-left: 0;
            margin-bottom: 8px;
        }
    }

    @media (max-width: 480px) {
        .footer-grid {
            grid-template-columns: 1fr;
            /* Çok küçük ekranlarda tek sütun */
            text-align: center;
        }

        .footer-column h4 {
            margin-top: 20px;
            /* Tek sütunda başlıklar arası boşluk */
        }

        .footer-column ul {
            margin-bottom: 10px;
        }
    }
}

/* Gizli Ek Ürünler Stilleri */
#more-products-list {
    max-height: 0;
    /* Başlangıçta yüksekliği sıfır */
    overflow: hidden;
    /* Yükseklik sıfırken taşan içeriği gizle */
    opacity: 0;
    /* Başlangıçta görünmez */
    transition: max-height 0.7s ease-in-out, opacity 0.5s ease-in-out, margin-top 0.5s ease-in-out;
    /* Yumuşak geçiş efekti */
    margin-top: 0;
    /* Başlangıçta üst boşluk yok */
    /* product-cards ile aynı grid yapısını kullanması için */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

    #more-products-list.visible {
        max-height: 1000px;
        /* Yeterince büyük bir yükseklik (içeriğe göre ayarlayın) */
        opacity: 1;
        /* Görünür yap */
        margin-top: 40px;
        /* Açıldığında üstten boşluk ver */
    }

.all-products-link a .arrow.rotated {
    display: inline-block;
    transform: rotate(90deg);
    /* Oku yukarı çevir */
    transition: transform 0.3s ease-in-out;
}

.all-products-link a .arrow {
    display: inline-block;
    transition: transform 0.3s ease-in-out;
}

/* Mevcut .product-cards içindeki kartlar için ek bir alt boşluk (opsiyonel)
   Eğer yeni ürünler açıldığında eski kartlarla arasında biraz daha boşluk isterseniz
*/
/*
#products .product-cards {
    margin-bottom: 20px;
}
*/
/* Kasko Ürün Detay Sayfası Özel Stilleri */

/* Kasko Hero Section */
#kasko-hero {
    background-color: var(--white);
    /* Veya hafif bir pastel ton */
    /* padding-bottom: 40px; */
    /* Formla daha iyi uyum için */
}

.kasko-hero-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    /* Sol taraf daha geniş */
    gap: 50px;
    align-items: flex-start;
    /* Dikeyde yukarı yasla */
}

.kasko-hero-content h1 {
    font-size: 2.6rem;
    /* Ana başlık boyutu */
    color: var(--text-dark);
    margin-bottom: 25px;
    line-height: 1.3;
}

.benefits-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 20px;
}

    .benefits-list li {
        font-size: 1rem;
        color: var(--text-medium);
        margin-bottom: 15px;
        display: flex;
        align-items: flex-start;
        /* İkon ve metni yukarı yasla */
    }

        .benefits-list li i {
            color: var(--pastel-orange);
            /* Tik ikonu rengi */
            margin-right: 10px;
            font-size: 1.2rem;
            margin-top: 3px;
            /* İkonu metinle hizalamak için */
        }

.kasko-hero-content .extra-info {
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.6;
    background-color: var(--pastel-blue-light);
    padding: 15px;
    border-radius: 8px;
    border-left: 3px solid var(--pastel-blue);
}

/* Hızlı Teklif Formu (Sağda) */
.kasko-quick-quote-form {
    background-color: var(--white);
    padding: 30px 25px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border-color);
}

    .kasko-quick-quote-form h4 {
        font-size: 1.4rem;
        color: var(--text-dark);
        text-align: center;
        margin-bottom: 10px;
    }

    .kasko-quick-quote-form .form-subtitle {
        font-size: 0.85rem;
        text-align: center;
        color: var(--text-light);
        margin-bottom: 25px;
    }

    .kasko-quick-quote-form .form-group {
        margin-bottom: 15px;
    }

        .kasko-quick-quote-form .form-group input[type="text"],
        .kasko-quick-quote-form .form-group input[type="tel"] {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            font-size: 0.9rem;
            background-color: var(--input-background);
        }

        .kasko-quick-quote-form .form-group input:focus {
            outline: none;
            border-color: var(--pastel-orange);
            /* Odak rengi turuncu */
            box-shadow: 0 0 0 2px rgba(253, 175, 117, 0.3);
        }


    .kasko-quick-quote-form .aydinlatma-metni {
        font-size: 0.75rem;
        color: var(--text-light);
        margin-top: 10px;
        margin-bottom: 20px;
        line-height: 1.5;
    }

        .kasko-quick-quote-form .aydinlatma-metni a {
            color: var(--pastel-blue);
            /* Mavi link */
            text-decoration: underline;
        }

    .kasko-quick-quote-form .btn.full-width {
        width: 100%;
    }


/* Kasko Teminatları */
.section-title-center,
.section-subtitle-center {
    text-align: center;
    max-width: 800px;
    /* Ortalanacak metin genişliği */
    margin-left: auto;
    margin-right: auto;
}

.section-title-center {
    margin-bottom: 15px;
}

.section-subtitle-center {
    margin-bottom: 20px;
    /* Alt başlıklar arası boşluk */
    font-size: 1rem;
}

.teminatlar-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* İki sütun */
    gap: 40px;
    margin-top: 30px;
}

.teminat-column h3 {
    font-size: 1.3rem;
    color: var(--text-dark);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--pastel-orange);
    /* Turuncu alt çizgi */
    display: inline-block;
    /* Alt çizginin sadece metin kadar olmasını sağlar */
}

.teminat-list {
    list-style: none;
    padding-left: 0;
}

    .teminat-list li {
        font-size: 0.95rem;
        color: var(--text-medium);
        margin-bottom: 12px;
        display: flex;
        align-items: flex-start;
    }

        .teminat-list li i {
            color: var(--pastel-blue);
            /* Teminat tik ikonu mavi */
            margin-right: 10px;
            font-size: 1rem;
            margin-top: 2px;
        }

/* Kasko Tanıtım Blokları */
.kasko-info-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Veya resim boyutuna göre ayarla */
    gap: 40px;
    align-items: center;
}

    .kasko-info-block.reverse {
        grid-template-columns: 1fr 1fr;
        /* İkinci için de aynı olabilir veya resim/yazı yeri değişebilir */
    }

        /* Yazı ve resmi yer değiştirmek için: */
        .kasko-info-block.reverse .info-block-content {
            order: 2;
        }

        .kasko-info-block.reverse .info-block-image {
            order: 1;
            text-align: left;
            /* Veya right, resme göre */
        }

.info-block-content h2 {
    font-size: 2rem;
    color: var(--text-dark);
    margin-bottom: 20px;
}

.info-block-content p {
    font-size: 1rem;
    color: var(--text-medium);
    margin-bottom: 15px;
    line-height: 1.7;
}

.info-block-content .btn {
    margin-top: 10px;
}


.info-block-image {
    text-align: center;
    /* Resmi/İkonu ortala */
}

    .info-block-image .illustration-icon {
        /* Placeholder ikonlar için */
        font-size: 8rem;
        /* İkon boyutunu ayarla */
        color: var(--pastel-blue-light);
        /* Soluk ikon rengi */
        /* Eğer daha belirgin olmasını isterseniz: color: var(--pastel-orange); */
    }

/* Gerçek SVG veya resim kullanırsanız:
.info-block-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}
*/

/* Anlaşmalı Şirketler Placeholder */
#partners-kasko .partner-logos-placeholder {
    margin-top: 20px;
    font-style: italic;
    color: var(--text-light);
}


/* Responsive Ayarlamalar */
@media (max-width: 992px) {
    .kasko-hero-grid {
        grid-template-columns: 1fr;
        /* Tek sütuna düşür */
    }

    .kasko-quick-quote-form {
        margin-top: 40px;
        /* İçerikle form arasına boşluk */
        max-width: 500px;
        /* Formun genişliğini biraz ayarla */
        margin-left: auto;
        margin-right: auto;
    }

    .teminatlar-grid {
        grid-template-columns: 1fr;
        /* Tek sütun */
    }

    .teminat-column h3 {
        display: block;
        /* Mobil'de alt çizgi tam genişlikte */
        text-align: center;
    }
}

@media (max-width: 768px) {
    .kasko-hero-content h1 {
        font-size: 2rem;
    }

    .kasko-info-block,
    .kasko-info-block.reverse {
        grid-template-columns: 1fr;
        /* Tüm info blokları mobil'de tek sütun */
        text-align: center;
    }

        .kasko-info-block .info-block-image {
            margin-bottom: 20px;
            order: -1 !important;
            /* Resmi her zaman üste al */
        }

        .kasko-info-block.reverse .info-block-image {
            order: -1 !important;
        }

    .info-block-content {
        text-align: center;
    }
}

/* Kasko Tanıtım Blokları (Mevcut Stillerle Birleştirilecek/Güncellenecek) */
.kasko-info-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Oranları içeriğe göre ayarlayabilirsiniz,örn: 1.5fr 1fr */
    gap: 50px;
    /* Boşluğu artırdık */
    align-items: flex-start;
    /* İçerikleri yukarıdan başlatır, sticky için daha iyi */
    position: relative;
    /* Çocuk sticky elemanlar için bazen faydalı olabilir */
    /* section-padding zaten vardı, bu bölümlere yükseklik kazandırır */
}

    /* .reverse sınıfı için de geçerli olacak şekilde genel bir düzenleme */
    .kasko-info-block.reverse .info-block-content {
        order: 2;
    }

    .kasko-info-block.reverse .info-block-image {
        order: 1;
        /* text-align: left; veya right, sticky olduğunda bunun çok önemi kalmayacak */
    }

.info-block-content {
    /* Metin içeriği normal akışında kalacak */
    padding-top: 20px;
    /* Resim stick olduğunda hizalamak için opsiyonel */
    padding-bottom: 20px;
    /* Opsiyonel, içeriğin altında da boşluk olması için */
}

    .info-block-content h2 {
        font-size: 2rem;
        color: var(--text-dark);
        margin-bottom: 20px;
        /* Zaten vardı */
    }

    .info-block-content p {
        font-size: 1rem;
        color: var(--text-medium);
        margin-bottom: 15px;
        line-height: 1.7;
        /* Zaten vardı */
    }

    .info-block-content .btn {
        margin-top: 10px;
        /* Zaten vardı */
    }

.info-block-image {
    /* Resim/İkon sütununu sticky yapıyoruz */
    position: -webkit-sticky;
    /* Safari için */
    position: sticky;
    top: 120px;
    /* Resmin viewport'un üstünden ne kadar aşağıda sabitleneceği.
                   Header'ınızın yüksekliğine ve istediğiniz boşluğa göre ayarlayın.
                   Header sticky ise, (header_height + desired_margin) gibi bir değer.
                   Örneğin header 70px ise ve 50px boşluk isterseniz, top: 120px; */
    align-self: start;
    /* Grid öğesinin kendi hücresinde yukarıya yapışmasını sağlar */
    text-align: center;
    /* İçindeki ikon/resmi ortalamak için */
    /* height: fit-content; Eğer resim yüksekliği kendi içeriği kadarsa bu gerekli olmayabilir,
                            ama bazen dikey esnemeyi engellemek için faydalı olur. */
    /* Eski .illustration-icon stilleriniz de burada geçerli olabilir */
}

    .info-block-image .illustration-icon {
        font-size: 8rem;
        color: var(--pastel-blue-light);
        /* ...diğer stiller... */
    }

    /* Gerçek resim kullanırsanız: */
    .info-block-image img {
        max-width: 80%;
        /* Veya istediğiniz bir boyut */
        height: auto;
        border-radius: 8px;
        display: block;
        /* Ortalamak için ve ekstra boşlukları engellemek için */
        margin: 0 auto;
        /* Eğer text-align center çalışmazsa */
    }


/* Responsive Ayarlamalar (Mevcut responsive bloklarını güncelleyin veya ekleyin) */
@media (max-width: 992px) {

    /* Orta boy ekranlar için */
    .kasko-info-block,
    .kasko-info-block.reverse {
        grid-template-columns: 1fr 1fr;
        /* Stickiness hala çalışabilir ama dikkatli olmak lazım */
        gap: 30px;
        /* Boşluğu azaltabiliriz */
    }

    .info-block-image {
        top: 100px;
        /* Daha küçük ekranlarda sticky pozisyonu ayarlanabilir */
    }
}

@media (max-width: 768px) {

    .kasko-info-block,
    .kasko-info-block.reverse {
        grid-template-columns: 1fr;
        /* Tek sütuna düşür */
        text-align: center;
    }

    .info-block-image {
        position: static;
        /* Mobil'de sticky özelliğini devre dışı bırakıyoruz, normal akışa dönsün */
        order: -1 !important;
        /* Resmi her zaman üste al (zaten vardı, önemli) */
        margin-bottom: 30px;
        /* Metinle arasında boşluk */
        text-align: center;
        /* Resmi ortala */
    }

    /* .reverse için order -1 önemliydi, mobil için zaten resim hep üste gelecek şekilde ayarlı */

    .info-block-content {
        text-align: center;
        padding-top: 0;
        /* Mobil için paddingleri sıfırla */
    }
}

/* Köprü ve Otoyol Geçiş Ücretleri Sayfası İçin Özel Stiller */
.gecis-hero {
    text-align: center;
    margin-bottom: 32px;
}

    .gecis-hero h1 {
        color: var(--pastel-orange, #6c9740);
        margin-bottom: 10px;
        font-size: 2.2rem;
    }

    .gecis-hero p {
        color: var(--text-light, #5F6B7A);
        font-size: 1.1rem;
    }

.gecis-fees-table-section {
    margin-bottom: 36px;
}

    .gecis-fees-table-section h2 {
        margin-bottom: 14px;
        color: var(--pastel-blue, #A7C7E7);
        font-size: 1.3rem;
        text-align: left;
    }

.gecis-fees-table-wrapper {
    overflow-x: auto;
}

.gecis-fees-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 14px;
}

    .gecis-fees-table th,
    .gecis-fees-table td {
        border: 1px solid var(--pastel-blue-light, #D6E6F2);
        padding: 10px 8px;
        text-align: center;
    }

    .gecis-fees-table th {
        background: var(--pastel-blue, #A7C7E7);
        color: #333;
    }

    .gecis-fees-table tr:nth-child(even) {
        background: #f3f8fc;
    }

.gecis-info-box {
    background: #f9f7e9;
    border-left: 4px solid var(--pastel-orange, #6c9740);
    padding: 12px 18px;
    margin-top: 8px;
    color: #666;
    border-radius: 7px;
    font-size: 1rem;
}

.gecis-faq-section {
    margin-top: 44px;
}

    .gecis-faq-section h2 {
        color: var(--pastel-blue, #A7C7E7);
        font-size: 1.2rem;
        margin-bottom: 18px;
        text-align: left;
    }

.gecis-faq-item {
    margin-bottom: 10px;
    border-radius: 6px;
    background: #f3f8fc;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .03);
}

.gecis-faq-question {
    width: 100%;
    background: none;
    border: none;
    outline: none;
    text-align: left;
    padding: 14px 18px;
    font-size: 1rem;
    color: var(--pastel-orange, #6c9740);
    cursor: pointer;
    font-weight: 600;
    border-radius: 6px 6px 0 0;
    transition: background .2s;
}

    .gecis-faq-question.active,
    .gecis-faq-question:hover {
        background: #e0f3de;
    }

.gecis-faq-answer {
    max-height: 0;
    overflow: hidden;
    background: #fff;
    transition: max-height 0.3s ease;
    padding: 0 18px;
    font-size: 0.97rem;
    color: #444;
    border-radius: 0 0 6px 6px;
}

.gecis-faq-question.active + .gecis-faq-answer {
    padding: 10px 18px 16px 18px;
}

@media (max-width: 600px) {
    .gecis-hero h1 {
        font-size: 1.3rem;
    }

    .gecis-fees-table th,
    .gecis-fees-table td {
        padding: 7px 3px;
        font-size: 0.95rem;
    }
}

/* Blog Sayfası */
.blog-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin-top: 2rem;
}

.blog-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 0.2s ease;
}

    .blog-card:hover {
        transform: translateY(-5px);
    }

    .blog-card img {
        width: 80%;
        height: 200px;
        object-fit: cover;
    }

.blog-content {
    padding: 1.2rem;
}

    .blog-content h3 {
        font-size: 1.2rem;
        margin-bottom: 0.6rem;
        color: #1a1a1a;
    }

    .blog-content p {
        color: #555;
        margin-bottom: 0.8rem;
    }

.section-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.blog-detail-image {
    width: 20%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.section-subtitle {
    text-align: center;
    font-size: 1rem;
    color: #666;
    margin-bottom: 2rem;
}

/* Minimalist Kasko Banner Kutusu */
.kucuk-kasko-banner {
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--pastel-blue-light, #D6E6F2);
    border-left: 5px solid var(--pastel-orange, #6c9740);
    border-radius: 12px;
    padding: 18px 24px;
    margin: 40px 0;
    box-shadow: 0 2px 12px rgba(108, 151, 64, 0.04);
    transition: box-shadow 0.2s, background 0.2s;
    cursor: pointer;
    text-decoration: none;
}

    .kucuk-kasko-banner:hover {
        background: #f4f8ee;
        box-shadow: 0 4px 24px rgba(108, 151, 64, 0.11);
    }

    .kucuk-kasko-banner .icon {
        font-size: 2.1rem;
        color: var(--pastel-orange, #6c9740);
        flex-shrink: 0;
        background: #fff;
        border-radius: 50%;
        padding: 8px;
        border: 1px solid #e0e0e0;
    }

    .kucuk-kasko-banner .metin {
        flex: 1;
        color: var(--text-dark, #333A40);
        font-size: 1.07rem;
        font-weight: 600;
        letter-spacing: 0.02em;
    }

    .kucuk-kasko-banner .cta {
        background: var(--pastel-orange, #6c9740);
        color: #fff;
        border-radius: 24px;
        padding: 7px 18px;
        font-size: 0.95rem;
        font-weight: 600;
        margin-left: 18px;
        transition: background 0.2s;
        border: none;
        text-decoration: none;
        display: inline-block;
    }

        .kucuk-kasko-banner .cta:hover {
            background: #4e6e2c;
        }

@media (max-width:600px) {
    .kucuk-kasko-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 13px 14px;
        gap: 10px;
    }

        .kucuk-kasko-banner .cta {
            margin-left: 0;
            margin-top: 10px;
        }
}

/* ============================================= */
/*           Kayıt Formu (Modal) Stilleri        */
/* ============================================= */

.modal-container {
    background-color: var(--white);
    padding: 30px 40px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    /* :root'ta gölge için değişken yoksa */
    width: 100%;
    max-width: 680px;
    /* Modalın maksimum genişliği */
    /* Eğer bu bir pop-up modal ise, konumlandırma için ek stiller gerekebilir:
       position: fixed;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       z-index: 1001; (header'dan yüksek olmalı)
       margin: 0; (body'den gelen margin'i sıfırlamak için)
       Eğer sayfa içinde bir bölümse, bu konumlandırmalara gerek yoktur.
       Şu anki HTML'de body'ye flex verilmediği için, modalın sayfa ortasında görünmesi için
       body'ye flex özellikleri eklenmeli veya modal-container'a fixed position verilmelidir.
       Referans görsel modal gibi olduğu için aşağıdaki satırlar sayfa ortasına alır,
       ama sitenizin genel yapısına göre bu body stillerini ana CSS'inize entegre etmeniz daha doğru olabilir.
    */
    /* Geçici olarak modalı sayfada ortalamak için margin: 60px auto; eklenebilir eğer body'de flex yoksa */
    margin: 60px auto;
    /* Bu satırı body'nizde flex yoksa ve modalı ortalamak için kullanabilirsiniz */
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

    .modal-header h1 {
        font-size: 28px;
        /* Genel h1 stilini ezer */
        font-weight: 600;
        color: var(--text-dark);
        margin-bottom: 0;
        /* h1 için genel margin'i sıfırlar */
        text-align: left;
        /* Genel h2 merkezlemesini ezer */
    }

.close-button {
    font-size: 28px;
    font-weight: 300;
    color: var(--text-light);
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
}

    .close-button:hover {
        color: var(--text-dark);
    }

.register-form .form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

/* .register-form .form-group genel .form-group stilinizi kullanacaktır.
   Eğer farklı bir görünüm isteniyorsa, burada özelleştirilebilir.
   Örneğin, genel .form-group'unuzda olmayan bir özellik eklenebilir.
*/
.register-form .form-group {
    flex: 1;
    min-width: 0;
    /* Genel .form-group'ta margin-bottom: 20px; var, bu yeterli olabilir. */
}

.register-form .field-label {
    display: block;
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 8px;
    /* Genel label'ınızdan farklıysa */
    font-weight: 500;
}

.register-form input[type="text"],
.register-form input[type="tel"],
.register-form input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    /* Genel input padding'inden farklıysa */
    border: 1px solid var(--border-color);
    border-radius: 4px;
    /* Genel input border-radius'undan farklıysa */
    font-size: 14px;
    /* Genel input font-size'ından farklıysa */
    font-family: var(--font-family);
    color: var(--text-dark);
    background-color: var(--white);
}

.register-form input::placeholder {
    color: var(--text-light);
    opacity: 0.7;
}

.register-form input:focus {
    /* Genel input:focus stilini kullanır veya burada özelleştirilebilir */
    outline: none;
    border-color: var(--pastel-orange);
    box-shadow: 0 0 0 2px rgba(108, 151, 64, 0.3);
    /* --pastel-orange'a uygun bir shadow */
}

.radio-options {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 5px;
}

.radio-label {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--text-dark);
    cursor: pointer;
    font-weight: 500;
}

    .radio-label input[type="radio"] {
        display: none;
    }

.custom-radio {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    position: relative;
    transition: border-color 0.2s;
}

.radio-label input[type="radio"]:checked + .custom-radio {
    border-color: var(--pastel-blue);
}

    .radio-label input[type="radio"]:checked + .custom-radio::after {
        content: '';
        width: 10px;
        height: 10px;
        background-color: var(--pastel-blue);
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.checkbox-wrapper {
    /* Genel .form-group'tan farklı bir margin istenirse: */
    /* margin-bottom: 15px; */
}

.checkbox-label {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: var(--text-light);
    cursor: pointer;
    font-weight: 400;
    line-height: 1.4;
}

    .checkbox-label input[type="checkbox"] {
        margin-right: 10px;
        width: 16px;
        height: 16px;
        accent-color: var(--pastel-orange);
    }

.btn-submit {
    /* Genel .btn ve .btn-primary stillerini ezer veya tamamlar */
    display: block;
    /* Genel .btn inline-block */
    width: 100%;
    padding: 12px;
    /* Genel .btn padding'inden farklıysa */
    background-color: var(--pastel-orange);
    color: var(--white);
    font-weight: 600;
    font-size: 16px;
    border: none;
    border-radius: 6px;
    /* Genel .btn border-radius'undan farklıysa */
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s ease;
    margin-top: 15px;
    margin-bottom: 25px;
    text-align: center;
}

    .btn-submit:hover {
        background-color: #5a822e;
        /* --pastel-orange'ın biraz daha koyu hali */
        /* transform: translateY(-2px); Eğer genel .btn:hover'da varsa zaten alır */
    }

.login-prompt {
    text-align: center;
    font-size: 14px;
    color: var(--text-light);
}

    .login-prompt a {
        /* Genel a stilini kullanır, renk zaten --pastel-orange */
        text-decoration: none;
        font-weight: 600;
    }

        .login-prompt a:hover {
            text-decoration: underline;
        }

/* Kayıt Formu Responsive Düzenlemeler */
@media (max-width: 680px) {

    /* modal-container max-width'ına göre ayarlandı */
    .modal-container {
        margin: 20px;
        /* Kenarlarda boşluk */
        padding: 20px;
    }
}

@media (max-width: 600px) {
    .modal-header h1 {
        font-size: 24px;
    }

    .register-form .form-row {
        flex-direction: column;
        gap: 0;
    }

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

            .register-form .form-row .form-group:last-child {
                margin-bottom: 0;
            }

    .radio-options {
        gap: 15px;
    }
}


/* ============================================= */
/*       Kayıt Formu Stilleri Bitişi             */
/* ============================================= */
/* ============================================= */
/*           Hakkımızda Sayfası Stilleri         */
/*           (Minimalist Revizyon)             */
/* ============================================= */

.page-logo-container {
    text-align: center;
    /* Logoyu yatayda ortalar */
    margin-bottom: 25px;
    /* Logo ile başlık arası boşluk */
}

    .page-logo-container img {
        max-width: 200px;
        /* Logonuzun maksimum genişliği. İhtiyaca göre ayarlayın. */
        height: auto;
        /* Genişliğe göre yüksekliği otomatik ayarlar, oranı korur. */
        display: inline-block;
        /* text-align:center ile çalışması için */
    }

/* LOGO STİLLERİ BİTİŞİ */


.about-us-container h1 {
    font-size: 2.5em;
    font-weight: 600;
    color: var(--text-dark);
    text-align: center;
    margin-bottom: 35px;
}

.about-us-container {
    font-family: var(--font-family);
    color: var(--text-dark);
    max-width: 900px;
    /* Slightly adjusted max-width for content focus */
    margin: 50px auto;
    /* Increased top/bottom margin for more space */
    padding: 40px 50px;
    /* Adjusted padding */
    background-color: var(--white);
    border-radius: 8px;
    /* Consistent with the form card in example */
    /* Use a more subtle shadow, similar to the form card in the example */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.about-intro,
.about-products {
    margin-bottom: 40px;
    /* Consistent spacing */
}

.about-us-container h1 {
    font-size: 2.5em;
    /* Adjusted for balance */
    font-weight: 600;
    /* Bold, but not overly heavy */
    color: var(--text-dark);
    /* Main headings dark for minimalism */
    text-align: center;
    margin-bottom: 35px;
    /* More space after main title */
}

.about-us-container h2 {
    font-size: 1.8em;
    /* Adjusted size */
    font-weight: 600;
    color: var(--text-dark);
    margin-top: 30px;
    margin-bottom: 20px;
    padding-bottom: 8px;
    /* Reduced padding */
    /* Removed border-bottom for a cleaner look, or make it very subtle */
    border-bottom: 1px solid var(--border-color);
    /* Subtle separator */
}

.about-us-container p {
    font-size: 1rem;
    /* Standard paragraph size */
    line-height: 1.75;
    /* Good readability */
    color: var(--text-light);
    margin-bottom: 20px;
    /* Consistent paragraph spacing */
}

/* De-emphasize the special styling for the first paragraph for a more uniform look */
.about-intro p:first-of-type {
    font-size: 1.05rem;
    /* Slightly larger, but less prominent than before */
    font-weight: 400;
    /* Regular weight */
    color: var(--text-light);
    /* Consistent with other paragraphs */
}

.about-us-container .section-subtitle {
    font-size: 1.05rem;
    color: var(--text-light);
    /* Subtitles often lighter */
    margin-bottom: 25px;
    text-align: left;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    /* Slightly larger min-width for cards */
    gap: 20px;
    /* Adjusted gap */
}

.product-card {
    background-color: var(--white);
    border: 1px solid var(--border-color);
    /* Default subtle border */
    border-radius: 6px;
    /* Slightly softer radius */
    padding: 20px;
    text-align: center;
    text-decoration: none;
    color: var(--text-dark);
    box-shadow: none;
    /* Removed default shadow for flatter design */
    transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    /* Simpler transitions */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 110px;
}

    .product-card:hover {
        border-color: var(--pastel-orange);
        /* Highlight with accent color */
        background-color: var(--background-light-gray);
        /* Subtle background change on hover */
        /* Removed transform and complex box-shadow changes for minimalism */
    }

    .product-card h3 {
        font-size: 1.1em;
        /* Adjusted for better fit if names are long */
        font-weight: 500;
        /* Medium weight */
        color: var(--text-dark);
        /* Card titles dark */
        margin: 0;
    }

/* Responsive Düzenlemeler (largely similar, may need minor tweaks) */
@media (max-width: 992px) {
    .about-us-container {
        margin: 40px 20px;
        /* Adjusted margin */
        padding: 30px;
        /* Simplified padding */
    }

    .product-grid {
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
        gap: 15px;
    }
}


@media (max-width: 768px) {
    .about-us-container {
        padding: 25px;
    }

        .about-us-container h1 {
            font-size: 2em;
        }

        .about-us-container h2 {
            font-size: 1.6em;
        }
}

@media (max-width: 576px) {
    .about-us-container {
        margin: 20px 15px;
        padding: 20px;
    }

        .about-us-container h1 {
            font-size: 1.8em;
        }

        .about-us-container h2 {
            font-size: 1.4em;
        }

    .product-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .product-card {
        padding: 15px;
        min-height: 90px;
    }

        .product-card h3 {
            font-size: 1em;
        }
}