/* GOOGLE FONTLARI İÇERİ AKTARMA */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Playfair+Display:wght@700&display=swap');

/* RENK PALETİ VE TEMEL STİLLER */
:root {
    --dark-green: #2F4F4F;
    --cream: #F5F5DC;
    --dark-grey: #36454F;
    --off-white: #FAFAFA;
    --white: #FFFFFF;
}

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

body {
    font-family: 'Lato', sans-serif;
    line-height: 1.6;
    background-color: var(--off-white);
    color: var(--dark-grey);
}

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

/* HEADER STİLLERİ */
.header {
    background-color: var(--white);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 1rem 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

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

.logo a {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    text-decoration: none;
    color: var(--dark-green);
}

.nav ul {
    list-style: none;
    display: flex;
}

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

.nav ul li a {
    text-decoration: none;
    color: var(--dark-grey);
    font-weight: 700;
    transition: color 0.3s ease;
}

.nav ul li a:hover {
    color: var(--dark-green);
}

/* HERO ALANI STİLLERİ */
.hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1604537529428-15bcbeecfe4d?q=80&w=2069&auto=format&fit=crop'); /* Bu URL'yi kendi Bolu fotoğrafınla değiştireceksin */
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    padding-top: 60px; /* Header yüksekliği için boşluk */
}

.hero-title {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

.hero-subtitle {
    font-size: 1.2rem;
    margin-bottom: 2.5rem;
    font-weight: 400;
}

/* REZERVASYON FORMU STİLLERİ */
.booking-form {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 2rem;
    display: flex;
    /* Varsayılan olarak sığmazsa alt satıra geçmesini sağlıyoruz */
    flex-wrap: wrap; 
    gap: 1.5rem; /* Elemanlar arası boşluk */
    align-items: flex-end; /* Elemanları dikeyde en alta hizala */
}

.form-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* flex-grow: 1 sayesinde elemanlar boşluğu doldurur */
    flex-grow: 1;
    /* flex-basis: 150px; her elemanın minimum bir genişliği olmasını sağlar */
    flex-basis: 150px; 
}

.form-group label {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
    color: var(--white);
}

.form-group select, 
.form-group input {
    width: 100%; /* Kendi grubunun tamamını kapla */
    padding: 0.8rem;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
}

/* Butonun olduğu grup için özel ayar */
.form-group-submit {
    flex-basis: 200px; /* Butonun minimum genişliği daha fazla olabilir */
}

.booking-form .btn {
    width: 100%;
}


/* ========================================= */
/* MOBİL CİHAZLAR İÇİN MEDYA SORGUSU (TABLET VE ALTI) */
/* ========================================= */
@media (max-width: 992px) {
    .booking-form {
        /* Form elemanlarını dikeyde alt alta diz */
        flex-direction: column;
        align-items: stretch; /* Elemanları tam genişliğe yay */
    }

    .form-group {
        /* Minimum genişlik artık gerekli değil */
        flex-basis: auto;
    }
}

.btn {
    padding: 0.8rem 2rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: var(--dark-green);
    color: var(--cream);
}

.btn-primary:hover {
    background-color: #3a6868; /* Koyu yeşilin biraz açığı */
    transform: translateY(-2px);
}

/* NEDEN BİZ BÖLÜMÜ STİLLERİ */
.why-us {
    padding: 5rem 0;
    text-align: center;
}

.section-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: var(--dark-grey);
}

/* ========================================= */
/* "NEDEN BİZ?" BÖLÜMÜ STİLLERİ (GÜNCEL)     */
/* ========================================= */

.why-us {
    padding: 5rem 0;
    text-align: center;
}

.features {
    display: grid;
    /* Masaüstünde 2 sütunlu bir ızgara oluştur */
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem; /* Izgara elemanları arasına boşluk bırak */
    margin-top: 4rem;
}

.feature-item {
    /* Hizalama için içeriği flex yapısıyla düzenle */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
}

/* İkonlar için yeni stiller */
.feature-icon {
    font-size: 2.5rem; /* İkon boyutunu büyüttük */
    color: var(--dark-green); /* Ana rengimizi kullandık */
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%; /* Yuvarlak bir arka plan */
    background-color: #f0f5f5; /* Çok açık yeşilimsi bir ton */
    margin-bottom: 1.5rem;
}

.feature-title {
    font-size: 1.3rem;
    font-family: 'Playfair Display', serif; /* Başlık fontumuzu kullandık */
    color: var(--dark-grey);
    margin-bottom: 0.5rem;
}

/* "Neden Biz?" bölümü için MOBİL UYUM */
@media (max-width: 768px) {
    .features {
        /* Mobilde ızgarayı tek sütuna düşür */
        grid-template-columns: 1fr;
    }
}

/* FOOTER STİLLERİ */
.footer {
    background-color: var(--dark-green);
    color: var(--cream);
    text-align: center;
    padding: 2rem 0;
}
/* TEŞEKKÜRLER SAYFASI STİLLERİ */
.thank-you-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: var(--off-white);
    padding: 20px;
}

.thank-you-box {
    background-color: var(--white);
    padding: 3rem 4rem;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    text-align: center;
    max-width: 600px;
}

.thank-you-title {
    font-family: 'Playfair Display', serif;
    color: var(--dark-green);
    font-size: 2.8rem;
    margin-bottom: 1rem;
}

.thank-you-text {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--dark-grey);
    margin-bottom: 1rem;
}

.thank-you-subtext {
    color: #666;
    margin-bottom: 2.5rem;
}

/* Ana sayfadaki butonu tekrar kullanıyoruz ama gerekirse diye ekleyelim */
.thank-you-box .btn {
    padding: 0.9rem 2.5rem;
    text-decoration: none;
    display: inline-block;
}
.page-header {
    background-color: var(--dark-green);
    color: var(--white);
    padding: 4rem 0;
    text-align: center;
    margin-top: 75px; /* Sabit header için boşluk */
}

.page-header h1 {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
}

.page-header p {
    font-size: 1.1rem;
    color: var(--cream);
}

/* ========================================= */
/* HİZMETLERİMİZ SAYFASI STİLLERİ (GÜNCEL)   */
/* ========================================= */

.services-section {
    padding: 5rem 0;
    background-color: var(--off-white);
}

.services-grid {
    display: grid;
    /* Ekrana sığdığı kadar sütun oluştur, her biri en az 340px olsun */
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 2.5rem;
}

.service-card {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column; /* İçerikleri dikeyde sırala */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
}

.service-card-image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}

.service-card-content {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Kartın alt bölümünün esneyerek tüm kartları aynı boyda yapmasını sağlar */
}

.service-card-content h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: var(--dark-green);
    margin-top: 0;
    margin-bottom: 1rem;
}

.service-card-content p {
    color: var(--dark-grey);
    line-height: 1.7;
    margin-bottom: 1.5rem;
    flex-grow: 1; /* Açıklama alanının esneyerek altındaki listeyi ve butonu en alta itmesini sağlar */
}

.service-features {
    list-style: none;
    padding: 0;
    margin-bottom: 2rem;
}

.service-features li {
    margin-bottom: 0.7rem;
    color: #444;
}

.service-features .fas.fa-check {
    color: var(--dark-green);
    margin-right: 10px;
}

.service-card-content .btn {
    width: 100%;
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-decoration: none;
    margin-top: auto; /* Kendini her zaman kartın en altına iter */
}

.fleet-gallery {
    padding: 5rem 0;
    background-color: var(--off-white);
}

.fleet-grid {
    display: grid;
    /* Her ekrana göre otomatik sığdırma: En az 320px'lik kartlar sığdır, sığmazsa alt satıra geç */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}

.vehicle-card {
    background-color: var(--white);
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.07);
    overflow: hidden; /* Resmin köşelerinin karttan taşmasını engeller */
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.card-image img {
    width: 100%;
    height: 220px; /* Tüm kart resimlerinin yüksekliğini eşitler */
    object-fit: cover; /* Resmin oranını bozmadan alanı kaplamasını sağlar */
    display: block;
}

.card-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Kartın alt kısmının uzayarak tüm kartların aynı boyda olmasını sağlar */
}

.card-content h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    color: var(--dark-green);
    margin-bottom: 0.5rem;
}

.card-content p {
    font-size: 1rem;
    color: var(--dark-grey);
    margin-bottom: 1.5rem;
    flex-grow: 1; /* Açıklama alanının esneyerek butonu aşağı itmesini sağlar */
}

.features-list {
    list-style: none;
    margin-bottom: 2rem;
}

.features-list li {
    margin-bottom: 0.5rem;
    color: #444;
}

.card-content .btn {
    width: 100%;
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.contact-section {
    padding: 5rem 0;
}

.contact-wrapper {
    display: flex;
    gap: 4rem;
    background-color: var(--white);
    padding: 3rem;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.07);
}

.contact-info, .contact-form {
    flex: 1;
}

.contact-info h3, .contact-form h3 {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: var(--dark-green);
    margin-bottom: 1rem;
}

.contact-info p {
    margin-bottom: 2rem;
    line-height: 1.7;
}

.info-list {
    list-style: none;
}

.info-list li {
    margin-bottom: 1.2rem;
    font-size: 1.05rem;
}

.info-list li strong {
    color: var(--dark-grey);
    margin-right: 10px;
}

.info-list li a, .info-list li span {
    color: var(--dark-green);
    text-decoration: none;
    font-weight: 700;
}

.info-list li a:hover {
    text-decoration: underline;
}

.form-group-contact {
    margin-bottom: 1.5rem;
}

.form-group-contact label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 700;
    color: var(--dark-grey);
}

.form-group-contact input,
.form-group-contact textarea {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    font-family: 'Lato', sans-serif;
}

.form-group-contact input:focus,
.form-group-contact textarea:focus {
    outline: none;
    border-color: var(--dark-green);
    box-shadow: 0 0 5px rgba(47, 79, 79, 0.2);
}

.contact-form .btn {
    width: 100%;
    padding: 1rem;
}

.map-section {
    /* Google Haritası'nın üst ve alt boşluklarını sıfırlar */
    line-height: 0; 
}
.testimonials-section {
    padding: 5rem 0;
    background-color: var(--white); /* Veya var(--off-white) */
}

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

.testimonial-card {
    background-color: #fcfcfc;
    border: 1px solid #f0f0f0;
    border-left: 5px solid var(--dark-green);
    padding: 2rem;
    border-radius: 8px;
}

.testimonial-text {
    font-size: 1.1rem;
    font-style: italic;
    color: #555;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
}

.testimonial-author {
    font-weight: 700;
    color: var(--dark-green);
    text-align: right;
}
.fleet-gallery .fleet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

.fleet-gallery .vehicle-card {
    background-color: var(--white);
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.07);
    overflow: hidden;
    /* Kartın kendisinin bir flex container olmasını sağlıyoruz ki içindeki link %100 yayılabilsin */
    display: flex; 
}

/* YENİ YAPI İÇİN GÜNCELLENMİŞ KURALLAR */

/* Link etiketi, kartın ana taşıyıcısı gibi davranacak */
.card-link-wrapper {
    text-decoration: none;
    color: inherit;
    width: 100%; /* Kartın tamamını kapla */
    display: flex;
    flex-direction: column; /* İçerikleri dikeyde sırala (resim üstte, içerik altta) */
    transition: all 0.3s ease;
}

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

.card-image img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
}

/* İçerik alanı, link etiketinin içinde dikey olarak esneyecek */
.card-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Bu sayede footer en alta itilir ve kartlar aynı boyda olur */
}

.card-content h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    color: var(--dark-green);
    margin-bottom: 0.5rem;
}

.card-content p {
    font-size: 1rem;
    color: var(--dark-grey);
    margin-bottom: 1.5rem;
    flex-grow: 1; /* Bu, açıklama alanının mevcut boşluğu doldurmasını sağlar */
}

/* YENİ EKLENEN KART FOOTER STİLİ */

.card-footer {
    padding: 1rem 1.5rem;
    background-color: #f9f9f9;
    font-weight: 700;
    color: var(--dark-green);
    text-align: center;
    border-top: 1px solid #eee;
    transition: all 0.3s ease; /* Yumuşak renk geçişi için */
}

.card-link-wrapper:hover .card-footer {
    background-color: var(--dark-green);
    color: var(--white);
}

.card-footer {
    margin-top: auto; /* Kartın en altına iter */
    padding: 1rem 1.5rem;
    background-color: #f9f9f9;
    font-weight: 700;
    color: var(--dark-green);
    text-align: center;
    border-top: 1px solid #eee;
}
.card-link-wrapper:hover .card-footer {
    background-color: var(--dark-green);
    color: var(--white);
}

/* ========================================= */
/* ARAÇ DETAY SAYFASI STİLLERİ               */
/* ========================================= */
.vehicle-detail-section {
    padding: 5rem 0;
}
.vehicle-detail-wrapper {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
}
.vehicle-gallery {
    flex: 1.2; /* Resim biraz daha büyük olsun */
}
.vehicle-gallery img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.vehicle-info {
    flex: 1;
}
.vehicle-info h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.8rem;
    color: var(--dark-green);
    margin-top: 0;
    margin-bottom: 1.5rem;
}
.vehicle-description {
    line-height: 1.8;
    margin-bottom: 2rem;
}
.vehicle-info h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}
.features-list-detail {
    list-style: none;
    padding: 0;
    margin-bottom: 2.5rem;
}
.features-list-detail li {
    margin-bottom: 0.8rem;
}
/* ARAÇ DETAY GALERİ STİLLERİ */
.main-image {
    margin-bottom: 1rem;
}
.main-image img {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.thumbnail-strip {
    display: flex;
    gap: 10px;
}
.thumbnail {
    width: 100px;
    height: 75px;
    object-fit: cover;
    border-radius: 5px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
}
.thumbnail:hover {
    border-color: var(--dark-green);
}
/* ========================================= */
/* FOOTER STİLLERİ (GÜNCEL)                  */
/* ========================================= */
.site-footer {
    background-color: var(--dark-green);
    color: #a9b3b3; /* Yazı rengini biraz daha yumuşak yaptık */
    font-size: 0.95rem;
}

.footer-main {
    padding: 4rem 0;
    display: flex;
    flex-wrap: wrap; /* Mobilde alt alta geçmesi için */
    gap: 2rem;
}

.footer-column {
    flex: 1;
    min-width: 250px; /* Her sütunun minimum genişliği */
}

.footer-column h4 {
    font-family: 'Playfair Display', serif;
    color: var(--white);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.footer-column p {
    line-height: 1.8;
}

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

.footer-column ul li {
    margin-bottom: 0.8rem;
}

.footer-column ul a {
    color: #a9b3b3;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-column ul a:hover {
    color: var(--white);
}

.footer-column .fas, .footer-column .fab {
    margin-right: 10px;
    width: 20px;
    text-align: center;
}

.footer-bottom {
    background-color: #254040; /* Koyu yeşilin bir ton daha koyusu */
    padding: 1.5rem 0;
    border-top: 1px solid #3a6868;
}

.footer-bottom .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Mobilde alt alta geçmesi için */
}

.copyright-text {
    margin: 0;
}

.social-links a {
    color: #a9b3b3;
    font-size: 1.2rem;
    margin-left: 1rem;
    text-decoration: none;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: var(--white);
}

/* Mobil Cihazlar İçin Ayarlama */
@media (max-width: 768px) {
    .footer-bottom .container {
        flex-direction: column;
        gap: 1rem;
    }
}
.booking-detail-section {
    padding: 5rem 0;
}
.booking-detail-wrapper {
    display: flex;
    flex-wrap: wrap; /* Mobilde alt alta geçmesi için */
    gap: 3rem;
}
.summary-box {
    flex: 1;
    min-width: 300px;
    background-color: #f8f9fa;
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}
.summary-box h3 {
    font-family: 'Playfair Display', serif;
    color: var(--dark-green);
    margin-top: 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #ddd;
    padding-bottom: 1rem;
}
.summary-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.summary-box ul li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    font-size: 1.05rem;
}
.summary-box ul li strong {
    color: var(--dark-grey);
}
.summary-box ul li span {
    font-weight: 700;
}
.summary-note {
    margin-top: 2rem;
    font-size: 0.9rem;
    color: #666;
    background-color: #e9ecef;
    padding: 1rem;
    border-radius: 5px;
}
.personal-info-form {
    flex: 1.5;
    min-width: 300px;
}
.personal-info-form h3 {
    font-family: 'Playfair Display', serif;
    color: var(--dark-green);
    margin-top: 0;
}
/* ========================================= */
/* MOBİL İÇİN HERO BÖLÜMÜ DÜZELTMELERİ      */
/* ========================================= */

/* 768px ve daha dar ekranlar için geçerli olacak kurallar */
@media (max-width: 768px) {

    /* Ana karşılama alanının yüksekliğini esnek yapıyoruz */
    .hero {
        height: auto; /* Sabit yüksekliği kaldır */
        min-height: 100vh; /* Ama en az ekran kadar olsun */
        padding: 8rem 0 4rem 0; /* İçerik için yukarıdan ve alttan boşluk ver */
    }

    /* Ana başlığın font boyutunu küçültüyoruz */
    .hero-title {
        font-size: 2.5rem; /* 3.5rem'den 2.5rem'e düşürdük */
        line-height: 1.2; /* Satır yüksekliğini ayarladık */
    }
    
    /* Alt başlığın font boyutunu ayarlıyoruz */
    .hero-subtitle {
        font-size: 1.1rem;
    }

    /* En Önemli Düzeltme: Form etiketlerinin okunması için */
    .hero .form-group label {
        /* Yazıya siyah bir gölge vererek her türlü arka planda okunmasını sağlıyoruz */
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    }
}
/* ========================================= */
/* MOBİL UYUMLU HAMBURGER MENÜ STİLLERİ      */
/* ========================================= */

.mobile-nav-toggle {
    display: none; /* Varsayılan olarak (masaüstünde) gizli */
    background: transparent;
    border: 0;
    cursor: pointer;
    position: relative;
    z-index: 9999;
}

.hamburger-line {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--dark-grey);
    margin: 5px 0;
    transition: all 0.3s ease-in-out;
}

/* 768px ve daha dar ekranlar için */
@media (max-width: 768px) {
    .nav {
        position: fixed;
        z-index: 1000;
        inset: 0 0 0 30%; /* Ekranın sağ %70'ini kapla */
        
        /* Başlangıçta menüyü ekranın sağına sakla */
        transform: translateX(100%);
        transition: transform 350ms ease-out;
    }

    .nav ul {
        flex-direction: column; /* Menüleri alt alta diz */
        padding: min(20vh, 10rem) 2em;
        background: hsla(0, 0%, 100%, 0.9);
        backdrop-filter: blur(1rem);
        height: 100%;
    }
    
    .nav ul li {
        margin-left: 0;
    }
    
    .nav ul li a {
        font-size: 1.2rem;
    }

    /* Menü açıldığında (.nav-open class'ı eklendiğinde) */
    .nav-open .nav {
        transform: translateX(0%);
    }

    .mobile-nav-toggle {
        display: block; /* Mobilde görünür yap */
    }

    /* Menü açıkken hamburger ikonunu X işaretine dönüştür */
    .nav-open .mobile-nav-toggle .hamburger-line:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    .nav-open .mobile-nav-toggle .hamburger-line:nth-child(2) {
        opacity: 0;
    }
    .nav-open .mobile-nav-toggle .hamburger-line:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }
}
/* ========================================= */
/* HAKKIMIZDA SAYFASI STİLLERİ               */
/* ========================================= */

.about-section {
    padding: 5rem 0;
    background-color: var(--white); /* Sayfa arka planını beyaz yapalım */
}

.about-content-wrapper {
    display: flex; /* Resim ve metni yan yana getirmek için */
    align-items: flex-start; /* Dikeyde yukarıdan hizala */
    gap: 3rem; /* Aralarına boşluk bırak */
}

.about-image {
    flex: 1; /* Esnek kutu modelinde 1 birim yer kapla */
    max-width: 450px; /* Resmin maksimum genişliğini sınırla */
}

.about-image img {
    width: 100%; /* Bulunduğu alanın %100'ünü kapla */
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.about-text {
    flex: 1.5; /* Metin alanına resimden daha fazla yer ver (1.5 katı) */
}

.about-text h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.8rem;
    color: var(--dark-green);
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.about-text p {
    margin-bottom: 1.5rem;
    line-height: 1.8;
    font-size: 1.05rem;
    color: var(--dark-grey);
}

.about-text h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: var(--dark-grey);
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    border-top: 1px solid #eee;
    padding-top: 2rem;
}

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

.values-list li {
    margin-bottom: 1rem;
    line-height: 1.7;
    font-size: 1rem;
}

.values-list li strong {
    color: var(--dark-green);
}


//* ========================================= */
/* HAKKIMIZDA SAYFASI STİLLERİ (GÜNCEL & TAM) */
/* ========================================= */

.about-section {
    padding: 5rem 0;
    background-color: var(--white);
}

.about-content-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 3rem;
}

.about-image {
    flex: 1;
    max-width: 450px;
}

.about-image-slider {
    position: relative;
    width: 100%;
    /* YENİ DİKEY ORAN: Yüksekliği genişliğinin %125'i kadar yap */
    padding-top: 170%; 
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    overflow: hidden;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.slide.active {
    opacity: 1;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-text {
    flex: 1.5;
}

.about-text h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.8rem;
    color: var(--dark-green);
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.about-text p {
    margin-bottom: 1.5rem;
    line-height: 1.8;
    font-size: 1.05rem;
    color: var(--dark-grey);
}

.about-text h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: var(--dark-grey);
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    border-top: 1px solid #eee;
    padding-top: 2rem;
}

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

.values-list li {
    margin-bottom: 1rem;
    line-height: 1.7;
    font-size: 1rem;
}

.values-list li strong {
    color: var(--dark-green);
}


/* "Hakkımızda" bölümü için MOBİL UYUM (GÜNCELLENDİ) */
@media (max-width: 768px) {
    .about-content-wrapper {
        flex-direction: column;
    }

    .about-image {
        /* YENİ MOBİL KURALI: Genişliği %100 yap ve masaüstü sınırını kaldır */
        width: 100%;
        max-width: none; 
        margin-bottom: 2rem;
    }

    .about-text h2 {
        font-size: 2.2rem;
    }
}
/* ARAÇ KARTI İKONLU ÖZELLİK STİLLERİ */
.card-features-icons {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f0f0f0;
}
.feature-icon-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--dark-grey);
    font-weight: 700;
}
.feature-icon-item .fas {
    color: var(--dark-green);
    font-size: 1.2rem;
}

/* Kart açıklama paragrafı için yeni bir class */
.card-description {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex-grow: 1; 
}

/* Footer yazısını da güncelleyelim */
.card-footer span {
    font-weight: 700;
}
/* ARAÇ KARTI EKSTRA ÖZELLİKLER LİSTESİ */
.extra-features-list {
    list-style: none;
    padding: 0;
    margin-bottom: 1.5rem;
    flex-grow: 1; /* Bu, footer'ı aşağı itmeye yardımcı olur */
    font-size: 0.9rem;
}

.extra-features-list li {
    margin-bottom: 0.5rem;
    color: #444;
}

.extra-features-list .fas.fa-check-circle {
    color: var(--dark-green);
    margin-right: 8px;
}
/* ========================================= */
/* ARAÇ DETAY SAYFASI GÜZELLEŞTİRME STİLLERİ */
/* ========================================= */

.vehicle-info .card-features-icons {
    /* Bu class zaten vardı, sadece boşluğunu ayarlıyoruz */
    margin-bottom: 1.5rem; 
    padding-bottom: 1.5rem; 
    border-bottom: 1px solid #f0f0f0;
}

.features-list-detail {
    list-style: none;
    padding: 0;
    margin-bottom: 2.5rem;
    /* Özellikleri 2 sütunlu bir düzende gösterelim */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
}

.features-list-detail li {
    margin-bottom: 0;
    background-color: #f8f9fa;
    padding: 10px 15px;
    border-radius: 5px;
}

.features-list-detail .fas.fa-check-circle {
    color: var(--dark-green);
    margin-right: 10px;
}

/* Mobil için özellik listesini tek sütuna düşürelim */
@media (max-width: 576px) {
    .features-list-detail {
        grid-template-columns: 1fr;
    }
}
/* ========================================= */
/* BLOG SAYFALARI STİLLERİ                   */
/* ========================================= */

/* Blog Listeleme Sayfası */
.blog-section {
    padding: 5rem 0;
    background-color: var(--off-white);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2.5rem;
}

.post-card {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex; /* Kartların aynı boyda olmasını sağlamak için */
}

.post-card-image {
    position: relative;
    height: 220px;
}

.post-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-card-category {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: var(--dark-green);
    color: #fff;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
}

.post-card-content {
    padding: 1.5rem;
}
.post-card-content h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--dark-grey);
}
.post-card-excerpt {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #666;
}
.post-card-footer {
    border-top: none; /* Diğer kartlardan farklı olarak çizgi yok */
    background-color: transparent;
    font-weight: 700;
    color: var(--dark-green);
    text-align: left;
    padding: 1rem 0 0 0;
}
.post-card-footer .fas {
    transition: transform 0.3s ease;
}
.post-card a:hover .post-card-footer .fas {
    transform: translateX(5px);
}

/* Tekil Yazı Detay Sayfası */
.single-post .post-header {
    height: 60vh;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    text-align: center;
    color: #fff;
}
.post-header-overlay {
    background-color: rgba(0,0,0,0.6);
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.post-header h1 {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    margin: 1rem 0;
}
.post-category {
    background-color: rgba(255, 255, 255, 0.2);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
}
.post-meta {
    display: flex;
    justify-content: center;
    gap: 2rem;
    font-size: 0.9rem;
    opacity: 0.9;
}
.post-meta .fas {
    margin-right: 8px;
}

.post-content {
    padding: 5rem 0;
    background-color: #fff;
}

.post-content .container {
    max-width: 800px; /* Okunurluk için metin alanını daraltıyoruz */
    font-size: 1.1rem;
    line-height: 2;
    color: #333;
}