/* Genel Sıfırlamalar */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    background-color: #fcfcf9;
    color: #333;
}

/* Genel Başlık Stilleri */
.section-title {
    text-align: center;
    font-size: 36px;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 15px;
}

.section-subtitle {
    text-align: center;
    font-size: 18px;
    color: #4a5568;
    max-width: 600px;
    margin: 0 auto 50px auto;
}

/* Genel Buton Stilleri */
.btn {
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    cursor: pointer;
}

.btn-primary {
    background-color: #3b82f6;
    color: #fff;
}
.btn-primary:hover {
    background-color: #2563eb;
}

.btn-secondary {
    background-color: #fff;
    color: #3b82f6;
    border: 1px solid #3b82f6;
}
.btn-secondary:hover {
    background-color: #eff6ff;
}

.btn-tertiary {
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s ease;
    background-color: transparent;
    color: #3b82f6;
    border: 1px solid #3b82f6;
}
.btn-tertiary:hover {
    background-color: #eff6ff;
}

.btn-large {
    font-size: 18px;
    padding: 15px 30px;
    width: 100%;
}

/* Genel Etiket Stili (Tag) */
.tag {
    background-color: #fff;
    color: #4a5568;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    display: inline-block; /* hero-form-content içinde kullanmak için */
    margin-bottom: 15px;
}


/* BÖLÜM 1: HEADER (Tüm Sayfalar) */
.main-header {
    width: 100%;
    background-color: #fff;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
}

.navbar {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-left {
    display: flex;
    align-items: center;
}

.logo {
    text-decoration: none;
    margin-right: 40px;
    display: block; 
    flex-shrink: 0; /* Mobilde logo küçülmesin */
}

.logo img {
    height: 50px; 
    width: auto; 
    display: block; 
}

.nav-menu {
    list-style: none;
    display: flex;
    gap: 30px;
}

.nav-menu li a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    font-size: 16px;
}
.nav-menu li a:hover {
    color: #0d47a1;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* BÖLÜM 2: YASAL UYARI ÇUBUĞU (Tüm Sayfalar) */
.disclaimer-bar {
    background-color: #fffbeb;
    color: #5d3a00;
    padding: 12px 20px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px solid #fde68a;
}
.disclaimer-bar strong {
    color: #b45309;
}

/* BÖLÜM 3: HERO (Sadece index.php) */
.hero {
    background-color: #fcfcf9;
    padding: 45px 0;
}

.hero-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: stretch; /* Dikey Eşitleme */
}
.hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Dikey Eşitleme */
}

.hero-content h1 {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    color: #1a202c;
    margin-bottom: 20px;
}

.hero-content .subtitle {
    font-size: 18px;
    color: #4a5568;
    margin-bottom: 20px;
}

.hero-content .offer-text {
    font-size: 16px;
    color: #2d3748;
    margin-bottom: 30px;
}

.hero-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.hero-image-wrapper {
    position: relative;
}

.hero-image {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.hero-offer-box {
    position: absolute;
    bottom: -30px;
    left: -30px;
    background-color: #3b82f6;
    color: white;
    padding: 25px;
    border-radius: 15px;
    width: 280px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.hero-offer-box h2 {
    font-size: 36px;
    margin-bottom: 5px;
}

.hero-offer-box p {
    font-size: 16px;
    font-weight: 500;
}

.hero-offer-box hr {
    border: 0;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.4);
    margin: 15px 0;
}

/* BÖLÜM 4: AVANTAJLARIMIZ (Sadece index.php) */
.our-advantages {
    background-color: #f9fafb; /* Hafif gri arka plan */
    padding: 80px 0;
}

.advantages-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.advantages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.advantage-card {
    background-color: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    text-align: center;
}

.advantage-icon {
    font-size: 32px;
    color: #3b82f6;
    margin-bottom: 20px;
}

.advantage-card h3 {
    font-size: 22px;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 15px;
}

.advantage-card p {
    font-size: 16px;
    color: #4a5568;
    line-height: 1.6;
}

/* BÖLÜM 5: NASIL ÇALIŞIR (Sadece index.php) */
.how-it-works {
    background-color: #fcfcf9;
    padding: 80px 0;
}

.how-it-works-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.step-card {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    text-align: center;
    padding-bottom: 30px;
}

.step-icon {
    font-size: 48px;
    color: #3b82f6;
    padding-top: 30px;
}

.step-card .card-content {
    padding: 20px 25px 0 25px;
}

.step-card h3 {
    font-size: 22px;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 15px;
}

.step-card p {
    font-size: 16px;
    color: #4a5568;
    line-height: 1.5;
}

/* BÖLÜM 6: ÜRÜN TANITIMLARI (Sadece index.php) */
.product-showcase {
    background-color: #fcfcf9;
    padding-bottom: 80px;
}

.product-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

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

.product-card {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-card-blue {
    background-color: #eef6ff;
}
.product-card-green {
    background-color: #e6f8f0;
}

.product-card-content {
    padding: 30px;
}

.product-tags {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}


.product-card h2 {
    font-size: 32px;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 15px;
}

.product-card p {
    font-size: 16px;
    color: #4a5568;
    line-height: 1.6;
    margin-bottom: 25px;
}

.product-card-image {
    width: 100%;
    height: 250px;
}

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

/* BÖLÜM 7: BANKA TEKLİFLERİ (Sadece index.php) */
.offer-listings {
    background-color: #f9fafb;
    padding: 80px 0;
}

.offer-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.offer-container .section-subtitle strong {
    color: #b45309; /* Uyarı rengi */
}

.offer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.offer-card {
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    padding: 25px;
    text-align: center; 
}

.offer-header {
    display: flex;
    align-items: center;
    justify-content: center; /* Başlığı ortala */
    gap: 15px;
    margin-bottom: 20px;
    height: 60px; 
}

.bank-name {
    font-size: 20px;
    font-weight: 600;
    color: #1a202c;
}

.rate-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
}

.rate-label {
    font-size: 15px;
    font-weight: 500;
    color: #1a202c; 
    line-height: 1;
}

.rate-number {
    font-size: 36px;
    font-weight: 700;
    color: #3b82f6; /* Mavi */
    line-height: 1.1;
    margin: 4px 0;
}

.offer-details {
    font-size: 14px;
    color: #4a5568;
    line-height: 1.5;
}

/* BÖLÜM 8: DATA TOPLAMA FORMU (Tüm Sayfalarda) */
.form-section {
    background-color: #fcfcf9;
    padding: 80px 0;
}

.form-container {
    width: 90%;
    max-width: 800px;
    margin: 0 auto;
    background-color: #fff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.lead-form .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
/* Tek sütunlu form (yeni hero için) */
.lead-form .form-grid-single {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px; 
}


.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    text-align: left; 
}

.form-group input {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    padding: 12px 15px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
	width: 100%;
}
.form-group input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px #bfdbfe;
}
/* -------------------------------------- */
/* Bayraklı Telefon Alanı (intl-tel-input) Genişlik Düzeltmesi */
/* -------------------------------------- */
.iti {
    width: 100%;
}
.form-consent {
    margin-top: 25px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-align: left; 
}

.form-consent input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-top: 4px;
    flex-shrink: 0;
}

.form-consent label {
    font-size: 13px;
    color: #4a5568;
    line-height: 1.5;
}
.form-consent label a {
    color: #3b82f6;
    text-decoration: underline;
}

.form-submit {
    margin-top: 30px;
    text-align: center;
}

/* BÖLÜM 9: SON CTA */
.cta-section {
    background-color: #0c2a4c;
    color: #fff;
    padding: 100px 0;
	background-image: linear-gradient(rgb(0 0 0 / 75%), hsl(212deg 73% 17% / 95%)), url(/images/bottomsection.jpg);
    background-position: top;
    background-size: cover;
}

.cta-container {
    width: 90%;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.cta-container h2 {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 25px;
}

.cta-container p {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 35px;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

/* BÖLÜM 10: FOOTER (Tüm Sayfalar) */
.main-footer-links {
    background-color: #f9fafb;
    border-top: 1px solid #e2e8f0;
    padding: 40px 0 20px 0;
}

.footer-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.footer-logo {
    font-size: 24px;
    font-weight: 700;
    color: #000;
}

.footer-nav {
    display: flex;
    gap: 25px;
}

.footer-nav a {
    text-decoration: none;
    color: #4a5568;
    font-weight: 500;
}
.footer-nav a:hover {
    color: #3b82f6;
}

.footer-copyright {
    text-align: center;
    font-size: 13px;
    color: #718096;
    border-top: 1px solid #e2e8f0;
    padding-top: 20px;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* ======================================= */
/* YENİ FESTGELD/TAGESGELD SAYFA STİLLERİ  */
/* ======================================= */

.hero-form-section {
    padding: 80px 0;
    
    background-size: cover;
    background-position: center;
}
.tages-bg{
background-image: linear-gradient(rgb(0 0 0 / 75%), rgb(13 26 49 / 89%)), url('/images/tagesgeld-bg.jpg');	
}
.fest-bg{
background-image: linear-gradient(rgb(0 0 0 / 75%), rgb(13 26 49 / 89%)), url(/images/festgeld-bg4.jpg);
    background-position: top;
}
 
.hero-form-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.hero-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.hero-form-content h1 {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff; 
    margin-bottom: 20px;
}

.hero-form-content p {
    font-size: 18px;
    color: #e0e0e0; 
    line-height: 1.6;
    margin-bottom: 30px;
}

.hero-form-content .tag {
    background-color: rgba(255, 255, 255, 0.15); 
    color: #fff; 
    border: 1px solid rgba(255, 255, 255, 0.3); 
}

.hero-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.hero-bullets li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 500;
    color: #fff; 
}

.hero-bullets li i {
    color: #22c55e;
    font-size: 20px;
}

.hero-form-box {
    background-color: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.hero-form-box h2 {
    font-size: 24px;
    font-weight: 700;
    color: #1a202c;
    text-align: center;
    margin-bottom: 10px;
}
.hero-form-box p {
    text-align: center;
    font-size: 16px;
    color: #4a5568;
    margin-bottom: 25px;
}


/* BÖLÜM 4: OTORİTE/SEO İÇERİK (Alt Sayfalar) */
.content-section {
    background-color: #fcfcf9;
    padding: 80px 0;
}

.content-container {
    width: 90%;
    max-width: 800px; /* Okunabilirlik için dar */
    margin: 0 auto;
}

.content-container h1 { /* Yasal sayfaların H1'i için stil */
    font-size: 42px;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 25px;
}

.content-container h2 {
    font-size: 28px;
    font-weight: 700;
    color: #1a202c;
    margin-top: 50px;
    margin-bottom: 20px;
}

.content-container h3 {
    font-size: 20px;
    font-weight: 600;
    color: #1a202c;
    margin-top: 30px;
    margin-bottom: 15px;
}

.content-container p {
    font-size: 16px;
    color: #4a5568;
    line-height: 1.7;
    margin-bottom: 20px;
}

.content-container ul {
    list-style-type: disc;
    padding-left: 20px;
    font-size: 16px;
    color: #4a5568;
    line-height: 1.7;
    margin-bottom: 20px;
}

.content-container ul li {
    margin-bottom: 10px;
}

.content-offers {
    padding: 60px 0;
    background-color: transparent;
}

/* ======================================= */
/* YENİ DANKE.PHP (TEŞEKKÜR) SAYFA STİLLERİ */
/* ======================================= */

.text-center-section {
    padding: 100px 0;
    text-align: center;
}

.thank-you-icon {
    font-size: 80px;
    color: #22c55e;
    margin-bottom: 30px;
}

/* ================================================= */
/* YENİ EKLENEN MOBİL MENÜ STILLERİ               */
/* ================================================= */

.navbar-desktop-links {
    display: flex; /* Masaüstünde linkleri ve butonları yanyana göster */
    align-items: center;
    gap: 30px; 
}
.nav-right {
    display: flex; /* Bu zaten vardı ama garanti olsun */
    align-items: center;
    gap: 15px;
}

.hamburger-menu {
    display: none; /* Masaüstünde gizli */
    background: none;
    border: none;
    font-size: 24px;
    color: #3b82f6; /* Proje 1'in ana rengi (Mavi) */
    cursor: pointer;
    padding: 5px;
    z-index: 1001; /* Menünün üstünde */
}

.hamburger-menu i {
    transition: transform 0.2s ease;
}

/* Menü açılınca buton sabitlensin ve ikonu dönsün */
.hamburger-menu.active {
    position: fixed; 
    top: 25px;
    right: 24px;
}
.hamburger-menu.active i {
    transform: rotate(90deg);
}

/* Açılan menünün kendisi */
.mobile-nav-menu {
    display: flex;
    flex-direction: column;
    gap: 25px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #fff;
    z-index: 1000;
    padding: 100px 30px 30px 30px;
    align-items: center;
    
    /* Gizlemek için */
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
}

/* Göstermek için */
.mobile-nav-menu.active {
    transform: translateY(0);
}

.mobile-nav-menu a {
    text-decoration: none;
    color: #1a202c;
    font-size: 24px;
    font-weight: 600;
}

/* Mobil menü içindeki butonlar */
.mobile-nav-menu a.btn-mobile-cta {
    width: 100%;
    max-width: 300px;
    text-align: center;
    margin-top: 10px;
}
.mobile-nav-menu a.btn-primary {
    color: #fff; 
}

/* Menü açıkken sayfa kaymasın */
body.no-scroll {
    overflow: hidden;
}


/* ================================================= */
/* MOBIL UYUMLULUK (RESPONSIVE) STİLLERİ         */
/* ================================================= */

@media (max-width: 992px) {
    /* Tablet (ve altı) */

    /* Menüdeki yazıları ve boşlukları azalt */
    .nav-menu {
        gap: 20px;
    }
    .nav-menu li a {
        font-size: 15px;
    }
    .logo {
        margin-right: 20px;
    }
    /* GÜNCELLEME: Masaüstü linklerini gizle */
    .navbar-desktop-links {
        display: none;
    }
    /* GÜNCELLEME: Hamburger'ı göster */
    .hamburger-menu {
        display: flex;
        align-items: center;
    }
    /* GÜNCELLEME: padding'i sıfırla */
    .navbar {
        padding: 10px 0; /* padding-top: 20px; kaldırıldı */
        width: 90%; /* Bu zaten vardı */
        max-width: 1200px; /* Bu zaten vardı */
        margin: 0 auto; /* Bu zaten vardı */
        display: flex; /* Bu zaten vardı */
        justify-content: space-between; /* Bu zaten vardı */
        align-items: center; /* Bu zaten vardı */
        flex-direction: row; /* GÜNCELLEME: column kaldırıldı */
        gap: 0; /* GÜNCELLEME: 20px kaldırıldı */
    }
    /* GÜNCELLEME: Eski .nav-left kuralları silindi */
    .nav-left {
        flex-direction: row; /* column kaldırıldı */
        gap: 0;
        align-items: baseline;
    }

    /* 4'lü kartları 2'li yap */
    .offer-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Ana sayfadaki formu 1 sütun yap */
    .lead-form .form-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 768px) {
    /* Mobil (ve altı) */

    /* GÜNCELLEME: Eski mobil header düzeltmeleri kaldırıldı (artık hamburger var) */
    /* .navbar { ... } */
    /* .nav-left { ... } */
    /* .nav-menu { ... } */
    /* .nav-right { ... } */
    /* YUKARIDAKİLER SİLİNDİ (992px'te halledildi) */


    /* Başlık fontlarını küçült */
    .hero-content h1 {
        font-size: 36px;
    }
    .hero-form-content h1,
    .cta-container h2,
    .content-container h1 {
        font-size: 32px;
    }
    .section-title {
        font-size: 30px;
    }

    /* Tüm 2'li, 3'lü, 4'lü grid'leri TEK SÜTUN yap */
    .hero-container,
    .product-grid,
    .hero-form-grid,
    .advantages-grid,
    .steps-grid,
    .offer-grid {
        grid-template-columns: 1fr;
    }

    /* Mobil için boşluk ayarı */
    .hero, .our-advantages, .how-it-works, .form-section, .content-section, .offer-listings {
        padding: 60px 0;
    }

    /* Ana sayfadaki Hero'nun resim altı kutusunu düzelt */
    .hero-offer-box {
        position: relative;
        left: 0;
        bottom: 0;
        margin-top: 20px;
        width: 100%;
    }
    
    /* Ana sayfadaki dikey eşitlemeyi kaldır (mobilde gereksiz) */
    .hero-content {
        display: block; 
    }

    /* festgeld/tagesgeld sayfasında (Süper Hero Form) sıralamayı değiştir */
    .hero-form-grid {
         gap: 40px;
    }
    /* (Sıralamayı değiştirmeye gerek yok, 1-1 grid zaten alt alta gelir) */


    /* Formlardaki padding'i azalt */
    .form-container {
        padding: 25px;
    }

    /* Footer'ı alt alta getir */
    .footer-container {
        flex-direction: column;
        gap: 20px;
    }
}