/*
 * Birge STK Yönetim Sistemi Tanıtım Sitesi
 * Sasico SaaS Şablonu Birebir Tasarım Uyumlu CSS Dosyası (Açık Renk Temalı)
 */

/* Yazı Tipleri */
@font-face {
    font-family: 'Outfit';
    src: local('Outfit'), local('Outfit-Regular'), url('../yazitipleri/Outfit-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit';
    src: local('Outfit Bold'), local('Outfit-Bold'), url('../yazitipleri/Outfit-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: local('Inter'), local('Inter-Regular'), url('../yazitipleri/Inter-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Değişkenler (Sasico SaaS Tasarım Dili - Premium Açık Renk Teması) */
:root {
    /* Genişletilmiş Renk Sistemi */
    --renk-birincil: #395c7d;       /* Kurumsal Çelik Mavisi */
    --renk-birincil-koyu: #2c4761;  /* Koyu Mavi */
    --renk-birincil-acik: rgba(57, 92, 125, 0.08);
    --renk-vurgu: #d2a454;           /* Altın Vurgu */
    --renk-vurgu-acik: rgba(210, 164, 84, 0.08);
    --renk-basari: #16A34A;
    --renk-tehlike: #EF4444;
    --renk-koyu: #0E0E0E;           /* Sasico Koyu Siyah */
    --renk-govde: #52525B;          /* Muted Gövde Yazısı */
    --renk-acik: #FFFFFF;           /* Saf Beyaz */
    --renk-arka-plan: #F8FAFC;      /* Çok Açık Gri-Mavi */
    --renk-gri-sinir: #E4E4E7;      /* İnce Kenarlık Rengi */
    
    --yazi-baslik: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --yazi-govde: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* 5 Seviyeli Gölge Sistemi */
    --golge-1: 0 1px 3px rgba(0,0,0,0.04);
    --golge-2: 0 4px 12px rgba(0,0,0,0.05);
    --golge-3: 0 10px 30px rgba(9,9,11,0.06);
    --golge-4: 0 20px 50px rgba(9,9,11,0.08);
    --golge-5: 0 30px 60px rgba(57,92,125,0.12);
    
    --golge-sasico: var(--golge-3);
    --golge-hover: var(--golge-5);

    /* Gradient Tanımları */
    --gradient-birincil: linear-gradient(135deg, #395c7d 0%, #2c4761 100%);
    --gradient-vurgu: linear-gradient(135deg, #d2a454 0%, #c4913a 100%);
    --gradient-metin: linear-gradient(135deg, #395c7d 0%, #5a8ab5 50%, #d2a454 100%);
    --gradient-cam: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.6) 100%);
    
    /* Animasyon Zamanlama */
    --gecis-hizli: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --gecis-orta: 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    --gecis-yavas: 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}


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

html {
    scroll-behavior: smooth;
    font-size: 16px;
    background-color: var(--renk-acik);
    color: var(--renk-govde);
    font-family: var(--yazi-govde);
}

body {
    overflow-x: hidden;
    line-height: 1.6;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--gecis-hizli);
}

.konteyner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Buton Stilleri (Sasico Tarzı Kapsül Butonlar) */
.buton-stil1 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 50px; /* Birebir Sasico Kapsül Buton Görünümü */
    font-family: var(--yazi-baslik);
    font-weight: 600;
    cursor: pointer;
    transition: var(--gecis-hizli);
    border: none;
    font-size: 0.95rem;
}

.buton-stil1.v-renkli {
    background-color: var(--renk-birincil);
    color: #FFFFFF;
    box-shadow: 0 10px 20px rgba(57, 92, 125, 0.2);
}

.buton-stil1.v-renkli:hover {
    background-color: #2c4761;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(57, 92, 125, 0.3);
}

.buton-stil1.v-transparan {
    background: transparent;
    border: 1px solid var(--renk-birincil);
    color: var(--renk-birincil);
}

.buton-stil1.v-transparan:hover {
    background: rgba(57, 92, 125, 0.05);
    transform: translateY(-3px);
}

.buton-stil1.v-kucuk {
    padding: 8px 20px;
    font-size: 0.85rem;
}

.buton-stil1.genis {
    width: 100%;
}

/* Üst Gezinti Menüsü (Sasico Tarzı İnce Çizgi ve Minimalist) */
.ust-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--renk-gri-sinir);
    padding: 20px 0;
    transition: var(--gecis-hizli);
}

.menu-hizala {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gezinti-linkleri {
    display: flex;
    gap: 36px;
}

.gezinti-linkleri a {
    font-family: var(--yazi-baslik);
    font-weight: 600;
    color: var(--renk-koyu);
    font-size: 0.95rem;
    position: relative;
    transition: var(--gecis-hizli);
}

.gezinti-linkleri a:hover,
.gezinti-linkleri a.aktif {
    color: var(--renk-birincil);
}

.gezinti-linkleri a::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 0;
    height: 2.5px;
    background: var(--gradient-birincil);
    border-radius: 4px;
    transition: var(--gecis-hizli);
}

.gezinti-linkleri a:hover::after,
.gezinti-linkleri a.aktif::after {
    width: 100%;
}

.menu-butonlar {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mobil-menu-tetikleyici {
    display: none;
    flex-direction: column;
    gap: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
}

.mobil-menu-tetikleyici span {
    width: 24px;
    height: 2px;
    background-color: var(--renk-koyu);
    transition: var(--gecis-hizli);
}

/* Kahraman (Hero) Alanı */
.kahraman-alani {
    position: relative;
    padding-top: 200px;
    padding-bottom: 90px;
    overflow: hidden;
    background: radial-gradient(circle at 80% 20%, rgba(57, 92, 125, 0.06) 0%, rgba(255, 255, 255, 0) 50%);
}

.donen-daireler {
    position: absolute;
    top: -10%;
    right: -10%;
    width: 600px;
    height: 600px;
    opacity: 0.2;
    pointer-events: none;
    z-index: 0;
}

.daire-dis, .daire-ic {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px dashed var(--renk-birincil);
}

.daire-dis {
    width: 100%;
    height: 100%;
    animation: spin 80s linear infinite;
}

.daire-ic {
    width: 70%;
    height: 70%;
    animation: spin-reverse 50s linear infinite;
}

@keyframes spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes spin-reverse {
    from { transform: translate(-50%, -50%) rotate(360deg); }
    to { transform: translate(-50%, -50%) rotate(0deg); }
}

.kahraman-icerik {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

.ust-slogan {
    display: inline-block;
    color: var(--renk-birincil);
    font-family: var(--yazi-baslik);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 20px;
    background: rgba(57, 92, 125, 0.05);
    padding: 8px 20px;
    border-radius: 50px;
    border: 1px solid rgba(57, 92, 125, 0.15);
}

.ana-baslik {
    font-family: var(--yazi-baslik);
    font-size: 3.75rem;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -1.5px;
    margin-bottom: 24px;
    color: var(--renk-koyu);
}

.ana-baslik span {
    color: var(--renk-birincil);
}

.aciklama-metni {
    font-size: 1.2rem;
    color: var(--renk-govde);
    margin-bottom: 40px;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 400;
}

.kahraman-formu {
    display: flex;
    max-width: 520px;
    margin: 0 auto;
    gap: 12px;
    background: var(--renk-acik);
    padding: 8px;
    border-radius: 50px; /* Kapsül Input Alanı */
    border: 1px solid var(--renk-gri-sinir);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.02);
}

.kahraman-formu input[type="email"] {
    flex: 1;
    background: transparent;
    border: none;
    padding: 12px 24px;
    color: var(--renk-koyu);
    font-size: 1rem;
    outline: none;
}

.kahraman-formu input[type="email"]::placeholder {
    color: #94A3B8;
}

/* Dashboard Mockup (Sasico Tarzı Temiz Çizgiler) */
.kahraman-gorsel-kapsayici {
    margin-top: 70px;
    position: relative;
    z-index: 2;
}

.dashboard-mockup {
    background: #0B0F19; /* Kontrast için Koyu Arayüz */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(11, 15, 25, 0.2);
}

.mockup-baslik {
    background: #070A11;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mockup-nokta {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.mockup-nokta.v-kirmizi { background-color: #FF5F56; }
.mockup-nokta.v-sari { background-color: #FFBD2E; }
.mockup-nokta.v-yesil { background-color: #27C93F; }

.mockup-adres {
    margin-left: 20px;
    font-family: monospace;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.3);
}

.mockup-icerik {
    display: flex;
    height: 400px;
}

.mockup-sol-bar {
    width: 70px;
    background: #080B13;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    padding: 24px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.mockup-bar-oge {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
}

.mockup-bar-oge.v-aktif {
    background: var(--renk-birincil);
}

.mockup-ana-alan {
    flex: 1;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.mockup-kart-grubu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.mockup-kart {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mockup-etiket {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mockup-sayi {
    font-family: var(--yazi-baslik);
    font-size: 1.65rem;
    font-weight: 700;
    color: #FFFFFF;
}

.mockup-grafik-bar {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 4px;
    align-self: flex-start;
}

.mockup-grafik-bar.v-yukselis {
    background: rgba(39, 201, 63, 0.1);
    color: #27C93F;
}

.mockup-grafik-bar.v-normal {
    background: rgba(210, 164, 84, 0.1);
    color: var(--renk-vurgu);
}

.mockup-grafik-bar.v-bilgi {
    background: rgba(57, 92, 125, 0.1);
    color: #80A0C0;
}

.mockup-buyuk-grafik {
    flex: 1;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.mockup-grafik-cizgiler {
    display: flex;
    align-items: flex-end;
    gap: 24px;
    height: 130px;
    margin-top: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
}

.mockup-grafik-sutun {
    flex: 1;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px 6px 0 0;
}

.mockup-grafik-sutun.v-vurgulu {
    background: var(--renk-birincil);
}

/* Bölüm Başlığı */
.bolum-basligi {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px auto;
}

.bolum-basligi .sub-title {
    color: var(--renk-birincil);
    font-family: var(--yazi-baslik);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 14px;
    display: block;
}

.bolum-basligi h2 {
    font-family: var(--yazi-baslik);
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 18px;
    line-height: 1.25;
    color: var(--renk-koyu);
    letter-spacing: -0.5px;
}

.bolum-basligi p {
    color: var(--renk-govde);
    font-size: 1.05rem;
}

/* Markalar / Kuruluşlar Bandı */
.markalar-alani {
    margin-top: 80px;
    text-align: center;
}

.markalar-alani span {
    font-family: var(--yazi-baslik);
    font-weight: 700;
    font-size: 0.8rem;
    color: #94A3B8;
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: 24px;
}

.markalar-listesi {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    opacity: 0.5;
}

.marka-logo {
    font-family: var(--yazi-baslik);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--renk-koyu);
    letter-spacing: 1px;
}

/* 3 Kolonlu Detay Özellikler Bölümü (Ekran Görüntüsündeki Tasarım) */
.detay-ozellikler-bolumu {
    padding: 100px 0;
    background-color: var(--renk-acik);
    border-bottom: 1px solid var(--renk-gri-sinir);
}

.detay-ozellikler-izgara {
    display: grid;
    grid-template-columns: 1fr 1.6fr 1fr;
    gap: 30px;
}

.detay-sol-kolon, .detay-sag-kolon {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.detay-kart {
    background: var(--renk-acik);
    border: 1px solid var(--renk-gri-sinir);
    border-radius: 16px;
    padding: 28px;
    box-shadow: var(--golge-sasico);
    transition: var(--gecis-hizli);
}

.detay-kart:hover {
    transform: translateY(-5px);
    border-color: var(--renk-birincil);
    box-shadow: var(--golge-hover);
}

.detay-grafik {
    width: 100%;
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
}

.detay-kart h3 {
    font-family: var(--yazi-baslik);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--renk-koyu);
    margin-bottom: 10px;
}

.detay-kart p {
    font-size: 0.9rem;
    color: var(--renk-govde);
    line-height: 1.5;
}

/* Orta Kolon (Büyük Kart) */
.detay-buyuk-kart {
    background: var(--renk-acik);
    border: 1px solid var(--renk-gri-sinir);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--golge-sasico);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: var(--gecis-hizli);
}

.detay-buyuk-kart:hover {
    border-color: var(--renk-birincil);
    box-shadow: var(--golge-hover);
}

.detay-buyuk-grafik-kapsayici {
    width: 100%;
    background: #0B0F19;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.detay-buyuk-icerik {
    padding: 32px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.detay-blok h2 {
    font-family: var(--yazi-baslik);
    font-size: 1.65rem;
    font-weight: 900;
    color: var(--renk-koyu);
    margin-bottom: 12px;
}

.detay-blok p {
    font-size: 0.95rem;
    color: var(--renk-govde);
    line-height: 1.6;
}

.detay-liste {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 0;
}

.detay-liste li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--renk-koyu);
    font-weight: 600;
}

.detay-liste li svg {
    color: var(--renk-birincil);
    flex-shrink: 0;
}

/* Sarı/Açık Mavi Arka Planlı Bölüm */
.ozellikler-bolumu-sari {
    padding: 100px 0;
    background: linear-gradient(180deg, #F8FAFC 0%, rgba(57, 92, 125, 0.05) 100%);
    border-bottom: 1px solid var(--renk-gri-sinir);
}

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

.ozellik-kart {
    background: var(--renk-acik);
    border: 1px solid var(--renk-gri-sinir);
    border-radius: 16px;
    padding: 36px;
    box-shadow: var(--golge-sasico);
    transition: var(--gecis-hizli);
}

.ozellik-kart:hover {
    transform: translateY(-5px);
    border-color: var(--renk-birincil);
    box-shadow: var(--golge-hover);
}

.ozellik-ikon {
    width: 56px;
    height: 56px;
    border-radius: 50%; /* Yuvarlak İkon Yatağı */
    background: rgba(57, 92, 125, 0.06);
    color: var(--renk-birincil);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.ozellik-kart h3 {
    font-family: var(--yazi-baslik);
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--renk-koyu);
}

.ozellik-kart p {
    color: var(--renk-govde);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Entegrasyon Bölümü */
.entegrasyon-bolumu {
    padding: 100px 0;
    background-color: var(--renk-acik);
    border-bottom: 1px solid var(--renk-gri-sinir);
}

.entegrasyon-izgara {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 60px;
    align-items: center;
}

.entegrasyon-metin h2 {
    font-family: var(--yazi-baslik);
    font-size: 2.75rem;
    font-weight: 900;
    margin-bottom: 24px;
    color: var(--renk-koyu);
    letter-spacing: -0.5px;
}

.entegrasyon-metin p {
    color: var(--renk-govde);
    margin-bottom: 30px;
    font-size: 1.05rem;
}

.entegrasyon-gorsel {
    display: flex;
    justify-content: center;
}

.entegrasyon-kartlar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.ent-kutu {
    background: #FFFFFF;
    border: 1px solid var(--renk-gri-sinir);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--golge-sasico);
    transition: var(--gecis-hizli);
}

.ent-kutu:hover {
    border-color: var(--renk-birincil);
    transform: scale(1.05);
}

.ent-ikon {
    font-family: var(--yazi-baslik);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--renk-birincil);
    text-align: center;
}

/* Fiyatlandırma Bölümü */
.fiyat-bolumu {
    padding: 100px 0;
    background: var(--renk-arka-plan);
    border-bottom: 1px solid var(--renk-gri-sinir);
}

/* Fiyatlandırma Toggle (Ödeme Tipi Değiştirici) */
.fiyat-toggle-kapsayici {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 30px;
    margin-bottom: 50px;
}

.fiyat-toggle-buton {
    width: 60px;
    height: 32px;
    background: #e2e8f0;
    border: 1px solid rgba(57, 92, 125, 0.1);
    border-radius: 20px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    outline: none;
    padding: 0;
}

.fiyat-toggle-buton.aktif {
    background: var(--gradient-birincil);
}

.toggle-daire {
    width: 24px;
    height: 24px;
    background: #ffffff;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: var(--golge-1);
}

.fiyat-toggle-buton.aktif .toggle-daire {
    left: 31px;
}

.toggle-etiket {
    font-size: 0.95rem;
    font-weight: 600;
    color: #64748b;
    transition: var(--gecis-hizli);
}

.toggle-etiket.aktif {
    color: var(--renk-birincil);
}

.indirim-rozet {
    background: var(--gradient-vurgu);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 30px;
    margin-left: 6px;
    display: inline-block;
    animation: pulse-glow 2s infinite;
}

.fiyat-kartlari-grubu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.fiyat-kart {
    background: var(--renk-acik);
    border: 1px solid var(--renk-gri-sinir);
    border-radius: 24px;
    padding: 44px 36px;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: var(--golge-sasico);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.fiyat-kart:hover {
    transform: translateY(-6px);
    box-shadow: var(--golge-4);
    border-color: rgba(57, 92, 125, 0.12);
}

.fiyat-kart.v-populer {
    border: 2px solid var(--renk-birincil);
    box-shadow: 0 20px 50px rgba(57, 92, 125, 0.08);
}

.fiyat-kart.v-populer:hover {
    box-shadow: 0 30px 60px rgba(57, 92, 125, 0.14);
}

.kart-etiketi {
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: max-content;
    background: var(--gradient-birincil);
    color: #FFFFFF;
    font-size: 0.75rem;
    padding: 6px 16px;
    border-radius: 50px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(57, 92, 125, 0.15);
    z-index: 10;
}

.kart-baslik h3 {
    font-family: var(--yazi-baslik);
    font-size: 1.65rem;
    color: var(--renk-koyu);
    margin-bottom: 12px;
    font-weight: 700;
}

.paket-aciklama {
    font-size: 0.85rem;
    color: var(--renk-govde);
    height: 50px;
    line-height: 1.4;
}

.kart-fiyat {
    margin-top: 24px;
    margin-bottom: 8px;
    display: flex;
    align-items: baseline;
    color: var(--renk-koyu);
}

.para-tutari {
    font-family: var(--yazi-baslik);
    font-size: 2.75rem;
    font-weight: 900;
}

.eski-fiyat {
    display: block;
    font-size: 1.1rem;
    color: var(--renk-govde);
    text-decoration: line-through;
    opacity: 0.7;
    margin-bottom: 2px;
}

.sure-turu {
    color: var(--renk-govde);
    margin-left: 4px;
    font-weight: 500;
}

.fiyat-alt-bilgi {
    font-size: 0.8rem;
    color: var(--renk-vurgu);
    margin-bottom: 24px;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.3s ease;
    height: 16px;
}

.paket-ozellikler {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 40px;
    flex: 1;
}

.paket-ozellikler li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--renk-govde);
}

.paket-ozellikler li svg {
    color: var(--renk-birincil);
    flex-shrink: 0;
}

/* Blog Bölümü */
.blog-bolumu {
    padding: 100px 0;
    background-color: var(--renk-acik);
    border-bottom: 1px solid var(--renk-gri-sinir);
}

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

.blog-kart {
    background: var(--renk-acik);
    border: 1px solid var(--renk-gri-sinir);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--golge-sasico);
    transition: var(--gecis-hizli);
}

.blog-kart:hover {
    transform: translateY(-5px);
    border-color: var(--renk-birincil);
    box-shadow: var(--golge-hover);
}

.blog-resim-placeholder {
    width: 100%;
    height: 180px;
}

.blog-kart-icerik {
    padding: 24px;
}

.blog-tarih {
    font-size: 0.8rem;
    color: var(--renk-govde);
    display: block;
    margin-bottom: 8px;
}

.blog-kart-icerik h3 {
    font-family: var(--yazi-baslik);
    font-size: 1.25rem;
    margin-bottom: 12px;
    line-height: 1.4;
    color: var(--renk-koyu);
    font-weight: 700;
}

.blog-kart-icerik p {
    color: var(--renk-govde);
    font-size: 0.9rem;
    margin-bottom: 16px;
    line-height: 1.5;
}

.blog-oku-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--renk-birincil);
}

/* İletişim Bölümü */
.iletisim-bolumu, .iletisim-sayfasi-bolumu {
    padding: 100px 0;
    background: var(--renk-acik);
}

.iletisim-izgara {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.iletisim-metin h2 {
    font-family: var(--yazi-baslik);
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: var(--renk-koyu);
    font-weight: 900;
    letter-spacing: -0.5px;
}

.iletisim-metin p {
    color: var(--renk-govde);
    margin-bottom: 40px;
}

.iletisim-bilgiler {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.iletisim-satir {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--renk-koyu);
    font-weight: 700;
}

.iletisim-satir svg {
    color: var(--renk-birincil);
}

.iletisim-form-kapsayici {
    background: var(--renk-arka-plan);
    border: 1px solid var(--renk-gri-sinir);
    border-radius: 20px;
    padding: 40px;
}

.form-grup {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-satir {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

label {
    font-family: var(--yazi-baslik);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--renk-koyu);
}

.zorunlu {
    color: #EF4444;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
select,
textarea {
    width: 100%;
    background: var(--renk-acik);
    border: 1px solid var(--renk-gri-sinir);
    padding: 14px 20px;
    border-radius: 8px;
    color: var(--renk-koyu);
    font-family: var(--yazi-govde);
    outline: none;
    transition: var(--gecis-hizli);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
    border-color: var(--renk-birincil);
    box-shadow: 0 0 0 4px rgba(57, 92, 125, 0.08);
}

select option {
    background-color: var(--renk-acik);
    color: var(--renk-koyu);
}

.form-cevap {
    margin-top: 16px;
    padding: 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    display: none;
}

.form-cevap.basarili {
    background: rgba(22, 163, 74, 0.06);
    color: #16A34A;
    border: 1px solid rgba(22, 163, 74, 0.15);
    display: block;
}

.form-cevap.hatali {
    background: rgba(239, 68, 68, 0.06);
    color: #EF4444;
    border: 1px solid rgba(239, 68, 68, 0.15);
    display: block;
}

/* Başvuru & Giriş Sayfaları (Genel Tasarım) */
.form-sayfasi {
    padding-top: 180px;
    padding-bottom: 100px;
    background: var(--renk-arka-plan);
}

.form-kutu {
    max-width: 750px;
    margin: 0 auto;
    background: var(--renk-acik);
    border: 1px solid var(--renk-gri-sinir);
    border-radius: 20px;
    padding: 48px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.02);
}

.form-kutu.v-giris {
    max-width: 480px;
}

.form-kutu-baslik {
    text-align: center;
    margin-bottom: 32px;
}

.form-kutu-baslik h2 {
    font-family: var(--yazi-baslik);
    font-size: 2rem;
    color: var(--renk-koyu);
    margin-bottom: 12px;
    font-weight: 700;
}

.form-kutu-baslik p {
    color: var(--renk-govde);
    font-size: 0.95rem;
}

.form-bolum-baslik {
    font-family: var(--yazi-baslik);
    font-size: 1.1rem;
    border-bottom: 1px solid var(--renk-gri-sinir);
    padding-bottom: 8px;
    margin-bottom: 20px;
    color: var(--renk-birincil);
}

.form-bolum-baslik.space-top {
    margin-top: 32px;
}

.kvkk-onay-grubu {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
}

.kvkk-onay-grubu input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--renk-birincil);
    cursor: pointer;
}

.kvkk-onay-grubu label {
    flex: 1;
    min-width: 0;
    font-weight: 400;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--renk-govde);
    cursor: pointer;
}

.kvkk-onay-grubu .form-hata-mesaji {
    flex-basis: 100%;
}

.kvkk-onay-grubu label a {
    color: var(--renk-birincil);
    text-decoration: underline;
}

/* Giriş Ekleri */
.form-ekler {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    font-size: 0.85rem;
}

.beni-hatirla {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--renk-govde);
}

.sifremi-unuttum {
    color: var(--renk-birincil);
}

.sifremi-unuttum:hover {
    text-decoration: underline;
}

.giris-alt-bilgi {
    margin-top: 24px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--renk-govde);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.giris-alt-bilgi a {
    color: var(--renk-birincil);
    text-decoration: underline;
}

.demobilgisi {
    font-size: 0.8rem;
    background: var(--renk-arka-plan);
    padding: 8px;
    border-radius: 6px;
    border: 1px solid var(--renk-gri-sinir);
}

/* Sayfa Başlığı Alanı (İletişim & Blog Sayfaları için) */
.sayfa-basligi-alani {
    padding-top: 200px;
    padding-bottom: 60px;
    text-align: center;
    background: linear-gradient(180deg, rgba(57, 92, 125, 0.04) 0%, rgba(255, 255, 255, 0) 100%);
    border-bottom: 1px solid var(--renk-gri-sinir);
}

.sayfa-basligi-alani h1 {
    font-family: var(--yazi-baslik);
    font-size: 2.75rem;
    color: var(--renk-koyu);
    margin-bottom: 16px;
    font-weight: 900;
}

.sayfa-basligi-alani p {
    font-size: 1.1rem;
    color: var(--renk-govde);
    max-width: 600px;
    margin: 0 auto;
}

.sayfa-basligi-guven {
    margin-top: 18px !important;
    font-size: 0.85rem !important;
    color: var(--renk-govde) !important;
    opacity: 0.75;
    letter-spacing: 0.3px;
}

/* Nasıl Çalışır - Güven Bandı */
.nasil-guven-bandi {
    padding: 48px 0;
    background: var(--renk-arka-plan);
    border-bottom: 1px solid var(--renk-gri-sinir);
}

.nasil-guven-izgara {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.nasil-guven-kart {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--renk-acik);
    border: 1px solid var(--renk-gri-sinir);
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: var(--golge-1);
    transition: var(--gecis-orta);
}

.nasil-guven-kart:hover {
    transform: translateY(-4px);
    box-shadow: var(--golge-3);
    border-color: rgba(57, 92, 125, 0.2);
}

.nasil-guven-ikon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(57, 92, 125, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nasil-guven-metin strong {
    display: block;
    font-family: var(--yazi-baslik);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--renk-koyu);
    line-height: 1.2;
}

.nasil-guven-metin span {
    font-size: 0.82rem;
    color: var(--renk-govde);
}

@media (max-width: 992px) {
    .nasil-guven-izgara {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 540px) {
    .nasil-guven-izgara {
        grid-template-columns: 1fr;
    }
}

/* Nasıl Çalışır Sayfası Tasarımı */
.nasil-calisir-bolumu {
    padding: 80px 0;
    background-color: var(--renk-acik);
}

.nasil-calisir-adimlar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    margin-top: 50px;
    position: relative;
}

.adim-kart {
    background: var(--renk-acik);
    border: 1px solid var(--renk-gri-sinir);
    border-radius: 16px;
    padding: 32px 24px;
    box-shadow: var(--golge-sasico);
    transition: var(--gecis-hizli);
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.adim-kart:hover {
    transform: translateY(-5px);
    border-color: var(--renk-birincil);
    box-shadow: var(--golge-hover);
}

.adim-kart::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 100%;
    width: 24px;
    height: 2px;
    background: var(--renk-gri-sinir);
    z-index: -1;
}

.adim-kart:last-child::before {
    display: none;
}

.adim-no {
    font-family: var(--yazi-baslik);
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--renk-birincil);
    opacity: 0.15;
    line-height: 1;
    margin-bottom: 20px;
    transition: var(--gecis-hizli);
}

.adim-kart:hover .adim-no {
    opacity: 0.8;
}

.adim-kart-ikon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(57, 92, 125, 0.06);
    color: var(--renk-birincil);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.adim-kart-ikon svg {
    color: var(--renk-birincil);
}

.adim-kart h3 {
    font-family: var(--yazi-baslik);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--renk-koyu);
    margin-bottom: 12px;
}

.adim-kart p {
    font-size: 0.9rem;
    color: var(--renk-govde);
    line-height: 1.5;
    flex-grow: 1;
}

/* SSS Bölümü */
.sss-bolumu {
    padding: 80px 0;
    background: var(--renk-arka-plan);
    border-top: 1px solid var(--renk-gri-sinir);
    border-bottom: 1px solid var(--renk-gri-sinir);
}

.sss-izgara {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 40px;
}

.sss-oge {
    background: var(--renk-acik);
    border: 1px solid var(--renk-gri-sinir);
    border-radius: 12px;
    padding: 24px;
    box-shadow: var(--golge-sasico);
}

.sss-oge h3 {
    font-family: var(--yazi-baslik);
    font-size: 1.15rem;
    color: var(--renk-koyu);
    margin-bottom: 12px;
    font-weight: 700;
}

.sss-oge p {
    font-size: 0.9rem;
    color: var(--renk-govde);
    line-height: 1.6;
}

/* Sayfa Harekete Geçirici (CTA) Bölümü */
.cagri-bolumu {
    padding: 100px 0;
    text-align: center;
    background: linear-gradient(180deg, var(--renk-acik) 0%, rgba(57, 92, 125, 0.03) 100%);
}

.cagri-icerik {
    max-width: 600px;
    margin: 0 auto;
}

.cagri-icerik h2 {
    font-family: var(--yazi-baslik);
    font-size: 2.25rem;
    font-weight: 900;
    color: var(--renk-koyu);
    margin-bottom: 18px;
}

.cagri-icerik p {
    color: var(--renk-govde);
    font-size: 1.05rem;
    margin-bottom: 32px;
}

@media (max-width: 992px) {
    .adim-kart::before {
        display: none;
    }
}

/* Son CTA Banner */
.son-cta-bolumu {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--renk-birincil) 0%, #2d4a65 100%);
    color: #fff;
}

.son-cta-icerik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.son-cta-metin {
    flex: 1;
    min-width: 280px;
}

.son-cta-rozet {
    display: inline-block;
    background: rgba(210, 164, 84, 0.25);
    color: #f0c97a;
    border: 1px solid rgba(210, 164, 84, 0.4);
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.son-cta-metin h2 {
    font-family: var(--yazi-baslik);
    font-size: 1.9rem;
    font-weight: 900;
    color: #fff;
    margin-bottom: 12px;
    line-height: 1.2;
}

.son-cta-metin p {
    color: rgba(255,255,255,0.75);
    font-size: 1rem;
    line-height: 1.6;
}

.son-cta-butonlar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
}

.son-cta-butonlar .buton-stil1.v-dolu.buyuk {
    background: #d2a454;
    border-color: #d2a454;
    color: #fff;
    font-size: 1rem;
    padding: 14px 32px;
    white-space: nowrap;
}

.son-cta-butonlar .buton-stil1.v-dolu.buyuk:hover {
    background: #b8893c;
    border-color: #b8893c;
}

.son-cta-butonlar .buton-stil1.v-transparan.buyuk {
    border-color: rgba(255,255,255,0.4);
    color: rgba(255,255,255,0.85);
    font-size: 1rem;
    padding: 14px 32px;
    white-space: nowrap;
}

.son-cta-butonlar .buton-stil1.v-transparan.buyuk:hover {
    border-color: #fff;
    color: #fff;
    background: rgba(255,255,255,0.08);
}

/* Son CTA özel buton stilleri (arka plan koyu olduğu için bağımsız) */
.son-cta-btn-altin {
    background: #d2a454;
    border: 2px solid #d2a454;
    color: #fff !important;
    font-size: 1rem;
    padding: 14px 32px;
    white-space: nowrap;
    font-weight: 700;
}

.son-cta-btn-altin:hover {
    background: #b8893c;
    border-color: #b8893c;
    color: #fff !important;
    transform: translateY(-2px);
}

.son-cta-btn-beyaz {
    background: transparent;
    border: 2px solid rgba(255,255,255,0.5);
    color: #fff !important;
    font-size: 1rem;
    padding: 14px 32px;
    white-space: nowrap;
    font-weight: 700;
}

.son-cta-btn-beyaz:hover {
    background: rgba(255,255,255,0.12);
    border-color: #fff;
    color: #fff !important;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .son-cta-icerik { text-align: center; }
    .son-cta-butonlar { width: 100%; }
    .son-cta-metin h2 { font-size: 1.5rem; }
    .son-cta-btn-altin, .son-cta-btn-beyaz { width: 100%; text-align: center; }
}

/* Blog Listesi Sayfası */
.blog-listesi-bolumu {
    padding: 80px 0;
    background-color: var(--renk-acik);
}

.blog-listesi-izgara {
    display: grid;
    grid-template-columns: 2.1fr 1fr;
    gap: 40px;
}

/* Blog Filtre ve Arama Çubuğu */
.blog-filtre-alani {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    margin-bottom: 40px;
    background: #ffffff;
    padding: 20px 30px;
    border-radius: 20px;
    box-shadow: var(--golge-2);
    border: 1px solid rgba(57, 92, 125, 0.05);
}

.blog-arama-kapsayici {
    position: relative;
    flex: 1.2;
}

.blog-arama-kapsayici input {
    width: 100%;
    padding: 12px 16px 12px 46px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    font-size: 0.95rem;
    transition: var(--gecis-hizli);
    background: #f8fafc;
}

.blog-arama-kapsayici input:focus {
    outline: none;
    border-color: var(--renk-birincil);
    box-shadow: 0 0 0 3px rgba(57, 92, 125, 0.1);
    background: #ffffff;
}

.blog-arama-kapsayici .arama-ikon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    stroke: #94a3b8;
}

.blog-kategoriler {
    display: flex;
    gap: 10px;
    flex: 1.8;
    justify-content: flex-end;
}

.kategori-buton {
    background: #f1f5f9;
    border: none;
    padding: 10px 18px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: var(--gecis-hizli);
}

.kategori-buton:hover,
.kategori-buton.aktif {
    background: var(--gradient-birincil);
    color: #ffffff;
}

.yazi-kart-liste {
    display: flex;
    gap: 28px;
    background: var(--renk-acik);
    border: 1px solid var(--renk-gri-sinir);
    border-radius: 24px;
    padding: 28px;
    margin-bottom: 30px;
    box-shadow: var(--golge-sasico);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.yazi-kart-liste:hover {
    transform: translateY(-4px);
    border-color: rgba(57, 92, 125, 0.12);
    box-shadow: var(--golge-4);
}

.yazi-kart-liste .yazi-resim-placeholder {
    width: 240px;
    height: 180px;
    flex-shrink: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--golge-2);
}

.yazi-icerik-kapsayici {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

/* Kategori Etiketleri ve Okuma Süresi */
.yazi-meta-satiri {
    display: flex;
    align-items: center;
    gap: 12px;
}

.yazi-kategori-etiket {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 30px;
    background-color: var(--renk-birincil-acik);
    color: var(--renk-birincil);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.yazi-meta-satiri .yazi-tarih {
    font-size: 0.8rem;
    color: #94a3b8;
    font-weight: 500;
}

.yazi-okuma-suresi {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-left: auto;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.yazi-icerik-kapsayici h2 {
    font-family: var(--yazi-baslik);
    font-size: 1.45rem;
    color: var(--renk-koyu);
    margin-top: 12px;
    margin-bottom: 10px;
    font-weight: 800;
    line-height: 1.3;
}

.yazi-icerik-kapsayici h2 a {
    color: var(--renk-koyu);
    text-decoration: none;
    transition: var(--gecis-hizli);
}

.yazi-icerik-kapsayici h2 a:hover {
    color: var(--renk-birincil);
}

.yazi-icerik-kapsayici p {
    font-size: 0.9rem;
    color: var(--renk-govde);
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Blog Sidebar */
.blog-yan-panel {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.yan-panel-widget {
    background: var(--renk-acik);
    border: 1px solid var(--renk-gri-sinir);
    border-radius: 20px;
    padding: 28px;
    box-shadow: var(--golge-sasico);
}

.yan-panel-widget h3 {
    font-family: var(--yazi-baslik);
    font-size: 1.15rem;
    color: var(--renk-koyu);
    border-bottom: 1px solid var(--renk-gri-sinir);
    padding-bottom: 10px;
    margin-bottom: 18px;
    font-weight: 700;
}

.yan-panel-widget p {
    font-size: 0.9rem;
    color: var(--renk-govde);
    line-height: 1.6;
}

.yan-panel-widget.v-reklam {
    background: linear-gradient(135deg, rgba(57, 92, 125, 0.04) 0%, rgba(255, 255, 255, 0.5) 100%);
    border-color: rgba(57, 92, 125, 0.2);
}

.yan-panel-widget.v-reklam p {
    margin-bottom: 20px;
}

/* Blog Sidebar AI Asistanı */
.yan-panel-widget.v-stk-asistan {
    border: 1px solid rgba(57, 92, 125, 0.12);
    background: var(--renk-acik);
    box-shadow: var(--golge-3);
    position: relative;
    overflow: hidden;
}

.yan-panel-widget.v-stk-asistan::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-vurgu);
}

.asistan-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.asistan-avatar {
    width: 32px;
    height: 32px;
    background: var(--gradient-vurgu);
    color: #ffffff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
}

.asistan-header h3 {
    margin: 0 !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    font-size: 1.1rem !important;
}

.asistan-aciklama {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 16px;
    line-height: 1.4;
}

.asistan-sorular {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.soru-buton {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    text-align: left;
    transition: var(--gecis-hizli);
}

.soru-buton:hover {
    background-color: var(--renk-birincil-acik);
    border-color: rgba(57, 92, 125, 0.2);
    color: var(--renk-birincil);
    transform: translateX(4px);
}

.asistan-cevap-kapsayici {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    font-size: 0.85rem;
    color: #334155;
    line-height: 1.5;
    display: none;
    animation: fade-in-up 0.4s ease;
}

.asistan-cevap-kapsayici.aktif {
    display: block;
}

/* Blog Listesi Responsive */
@media (max-width: 992px) {
    .blog-filtre-alani {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 16px;
    }
    .blog-kategoriler {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .yazi-kart-liste {
        flex-direction: column;
        gap: 20px;
    }
    .yazi-kart-liste .yazi-resim-placeholder {
        width: 100%;
        height: 200px;
    }
}

/* Blog Detay Sayfası */
.blog-detay-alani {
    padding-top: 160px;
    padding-bottom: 100px;
    background-color: var(--renk-acik);
}

.blog-detay-nav {
    margin-bottom: 30px;
}

.geri-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--renk-govde);
}

.geri-link:hover {
    color: var(--renk-birincil);
}

.blog-detay-izgara {
    display: grid;
    grid-template-columns: 2.5fr 1fr;
    gap: 50px;
}

.makale-header {
    margin-bottom: 24px;
}

.makale-tarih {
    font-size: 0.9rem;
    color: var(--renk-govde);
}

.makale-basligi {
    font-family: var(--yazi-baslik);
    font-size: 2.5rem;
    color: var(--renk-koyu);
    line-height: 1.2;
    margin-top: 8px;
    font-weight: 900;
}

.makale-resim-buyuk {
    margin-bottom: 40px;
}

.makale-metin {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--renk-govde);
}

.makale-metin p {
    margin-bottom: 24px;
}

.makale-paylas {
    border-top: 1px solid var(--renk-gri-sinir);
    padding-top: 24px;
    margin-top: 40px;
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.9rem;
    color: var(--renk-koyu);
    font-weight: 700;
}

.paylas-butonlari {
    display: flex;
    gap: 12px;
}

.paylas-butonlari a {
    padding: 6px 14px;
    background: var(--renk-arka-plan);
    border: 1px solid var(--renk-gri-sinir);
    border-radius: 50px; /* Kapsül Paylaşım Butonu */
    font-size: 0.8rem;
    color: var(--renk-govde);
}

.paylas-butonlari a:hover {
    background: var(--renk-birincil);
    color: #FFFFFF;
    border-color: var(--renk-birincil);
}

.yazar-profil {
    display: flex;
    align-items: center;
    gap: 16px;
}

.yazar-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--renk-birincil);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--yazi-baslik);
    font-weight: 700;
}

.yazar-detay {
    display: flex;
    flex-direction: column;
}

.yazar-detay strong {
    font-size: 0.95rem;
    color: var(--renk-koyu);
}

.yazar-detay span {
    font-size: 0.8rem;
    color: var(--renk-govde);
}

/* Hata Sayfası */
.hata-sayfasi {
    padding-top: 180px;
    padding-bottom: 100px;
    text-align: center;
    background-color: var(--renk-acik);
}

.hata-icerik {
    max-width: 500px;
    margin: 0 auto;
}

.hata-kod {
    font-family: var(--yazi-baslik);
    font-size: 7rem;
    font-weight: 900;
    color: var(--renk-birincil);
    line-height: 1;
    margin-bottom: 16px;
}

.hata-icerik h2 {
    font-family: var(--yazi-baslik);
    font-size: 2rem;
    color: var(--renk-koyu);
    margin-bottom: 16px;
    font-weight: 700;
}

.hata-icerik p {
    color: var(--renk-govde);
    margin-bottom: 32px;
}

/* Footer / Alt Alan (Sasico Tarzı Premium Derin Siyah Footer) */
.alt-alan {
    background: #0E0E0E; /* Sasico Birebir Koyu Siyah */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 80px 0 40px 0;
    color: rgba(255, 255, 255, 0.65);
}

.alt-alan-izgara {
    display: grid;
    grid-template-columns: 2.2fr 1fr 1fr 1.8fr 2fr;
    gap: 40px;
}

.alt-alan-logo {
    margin-bottom: 20px;
}

.alt-alan-tanim {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.7;
}

.alt-alan-link-grubu h4, .alt-alan-iletisim h4 {
    font-family: var(--yazi-baslik);
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 24px;
    color: #FFFFFF;
    letter-spacing: 0.5px;
}

.alt-alan-link-grubu {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.alt-alan-link-grubu a {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    transition: var(--gecis-hizli);
}

.alt-alan-link-grubu a:hover {
    color: #FFFFFF;
    padding-left: 6px;
}

.alt-alan-iletisim {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
}

.footer-sosyal {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.footer-sosyal a {
    color: rgba(255, 255, 255, 0.45) !important;
    background: rgba(255, 255, 255, 0.03);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: var(--gecis-hizli) !important;
    padding-left: 0 !important; /* Reset layout shift override */
}

.footer-sosyal a:hover {
    color: #FFFFFF !important;
    background: var(--gradient-birincil);
    border-color: var(--renk-birincil);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(57, 92, 125, 0.25);
    padding-left: 0 !important;
}

.footer-iletisim-satir {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
}

.footer-iletisim-satir svg {
    flex-shrink: 0;
    margin-top: 3px;
}

.alt-alan-cizgi {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin: 50px 0 30px 0;
}

.alt-alan-alt-bilgi {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.35);
}

.alt-alan-yasal {
    display: flex;
    gap: 20px;
}

.alt-alan-yasal a:hover {
    color: #FFFFFF;
}

/* Mobil Menü Perdesi (Açık Tema) */
.mobil-menu-perdesi {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.98);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobil-menu-perdesi.aktif {
    transform: translateY(0);
}

.mobil-gezinti-linkleri {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.mobil-gezinti-linkleri a {
    font-family: var(--yazi-baslik);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--renk-koyu);
}

.mobil-gezinti-linkleri hr {
    width: 80px;
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.mobil-buton {
    padding: 12px 36px;
    border-radius: 50px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: var(--renk-koyu);
    font-weight: 600;
}

.mobil-buton.v-dolu {
    background: var(--renk-birincil);
    border-color: var(--renk-birincil);
    color: #FFFFFF;
}

/* Responsive Düzenlemeler */
@media (max-width: 1024px) {
    .alt-alan-izgara {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 992px) {
    .ana-baslik {
        font-size: 2.75rem;
    }
    
    .ozellikler-izgara, 
    .nasil-calisir-adimlar, 
    .fiyat-kartlari-grubu, 
    .blog-izgara,
    .detay-ozellikler-izgara {
        grid-template-columns: 1fr !important;
    }

    .yapay-zeka-izgara, .iletisim-izgara, .blog-listesi-izgara, .blog-detay-izgara {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .gezinti-linkleri, .menu-butonlar a:not(.mobil-menu-tetikleyici) {
        display: none;
    }

    .mobil-menu-tetikleyici {
        display: flex;
    }

    .ana-baslik {
        font-size: 2.25rem;
    }

    .aciklama-metni {
        font-size: 1rem;
    }

    .kahraman-formu {
        flex-direction: column;
        background: transparent;
        border: none;
        padding: 0;
        box-shadow: none;
    }

    .kahraman-formu input[type="email"] {
        background: var(--renk-acik);
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        padding: 14px;
        margin-bottom: 12px;
    }

    .ozellikler-izgara, 
    .nasil-calisir-adimlar, 
    .fiyat-kartlari-grubu, 
    .blog-izgara,
    .yazi-kart-liste {
        grid-template-columns: 1fr;
    }

    .yazi-kart-liste {
        flex-direction: column;
    }

    .yazi-kart-liste .yazi-resim-placeholder {
        width: 100%;
        height: 180px;
    }

    .form-satir {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .form-kutu {
        padding: 24px;
    }

    .alt-alan-izgara {
        grid-template-columns: 1fr;
    }

    .alt-alan-alt-bilgi {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
}

/* Fiyat Karşılaştırma Tablosu Tasarımı */
.fiyat-karsilastirma-bolumu {
    padding: 80px 0;
    background-color: var(--renk-acik);
}

.karsilastirma-tablosu-kapsayici {
    width: 100%;
    overflow-x: auto;
    margin-top: 50px;
    border: 1px solid var(--renk-gri-sinir);
    border-radius: 16px;
    box-shadow: var(--golge-sasico);
}

.karsilastirma-tablosu {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    background-color: var(--renk-acik);
    min-width: 800px;
}

.karsilastirma-tablosu th,
.karsilastirma-tablosu td {
    padding: 20px 24px;
    border-bottom: 1px solid var(--renk-gri-sinir);
    font-size: 0.95rem;
}

.karsilastirma-tablosu th {
    font-family: var(--yazi-baslik);
    font-weight: 700;
    color: var(--renk-koyu);
    background-color: var(--renk-arka-plan);
}

.karsilastirma-tablosu td {
    color: var(--renk-govde);
}

.karsilastirma-tablosu tr:last-child td {
    border-bottom: none;
}

.karsilastirma-tablosu tr:hover td {
    background-color: rgba(57, 92, 125, 0.02);
}

.karsilastirma-tablosu .ozellik-kolon {
    font-weight: 600;
    color: var(--renk-koyu);
    width: 30%;
}

.karsilastirma-tablosu .deger-kolon {
    width: 23%;
    text-align: center;
}

.tablo-kontrol-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tablo-kontrol-ikon.v-var {
    color: #16A34A;
}

.tablo-kontrol-ikon.v-yok {
    color: #EF4444;
    opacity: 0.4;
}

.tablo-grup-basligi td {
    background: rgba(57, 92, 125, 0.05);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--renk-birincil);
    padding: 10px 24px;
    border-bottom: 1px solid var(--renk-gri-sinir);
}

/* ==========================================================================
   PREMIUM EK TASARIMLAR & ANİMASYONLAR (Sasico SaaS Tarzı)
   ========================================================================== */

/* Logo ve Navbar Optimizasyonu */
.logo {
    display: inline-flex;
    align-items: center;
    height: 40px;
    transition: var(--gecis-hizli);
}

.logo img {
    height: 100%;
    width: auto;
    object-fit: contain;
    display: block;
}

.alt-alan-logo img {
    height: 35px;
    width: auto;
    object-fit: contain;
    display: block;
}

.ust-menu.kaydirildi {
    padding: 12px 0;
    box-shadow: 0 10px 30px rgba(57, 92, 125, 0.06);
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid rgba(57, 92, 125, 0.08);
}

.ust-menu.kaydirildi .logo {
    height: 35px;
}

/* Premium Gradient Metinler */
.gradient-metin {
    background: var(--gradient-metin);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

/* Hero Altın Vurgu Metni */
.hero-altin-metin {
    color: #d2a454;
    position: relative;
}

/* Sınırlı (outline) buton varyantı */
.buton-stil1.v-sinirli {
    background: transparent;
    border: 2px solid var(--renk-birincil);
    color: var(--renk-birincil);
}

.buton-stil1.v-sinirli:hover {
    background: var(--renk-birincil);
    color: #fff;
}

/* Glassmorphism Cam Kart Stili */
.cam-kart {
    background: var(--gradient-cam);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: var(--golge-4);
}

/* Scroll-triggered Giriş Animasyonları */
.goruntu-ac {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--gecis-orta), transform var(--gecis-orta);
    will-change: opacity, transform;
}

.goruntu-ac.acildi {
    opacity: 1;
    transform: translateY(0);
}

/* Animasyon Varyasyonları */
.goruntu-ac.slayt-sol {
    transform: translateX(-40px);
}

.goruntu-ac.slayt-sol.acildi {
    transform: translateX(0);
}

.goruntu-ac.slayt-sag {
    transform: translateX(40px);
}

.goruntu-ac.slayt-sag.acildi {
    transform: translateX(0);
}

.goruntu-ac.olcek-buyu {
    transform: scale(0.95);
}

.goruntu-ac.olcek-buyu.acildi {
    transform: scale(1);
}

/* Sıralı Animasyon Gecikmeleri (Stagger) */
[data-gecikme="100"] { transition-delay: 100ms; }
[data-gecikme="200"] { transition-delay: 200ms; }
[data-gecikme="300"] { transition-delay: 300ms; }
[data-gecikme="400"] { transition-delay: 400ms; }
[data-gecikme="500"] { transition-delay: 500ms; }
[data-gecikme="600"] { transition-delay: 600ms; }

/* Işıltılı Glow Buton Efektleri */
.buton-stil1.v-renkli {
    position: relative;
    overflow: hidden;
}

.buton-stil1.v-renkli::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 30%;
    height: 200%;
    background: rgba(255, 255, 255, 0.15);
    transform: rotate(30deg);
    transition: none;
    pointer-events: none;
}

.buton-stil1.v-renkli:hover::after {
    left: 150%;
    transition: left 0.8s ease-in-out;
}

/* Süzülme Animasyonlu Dekoratif Noktalar ve Daireler */
.yuzen-eleman {
    animation: yuzme-hareketi 6s ease-in-out infinite;
}

@keyframes yuzme-hareketi {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-12px) rotate(2deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

/* Sonsuz Logo Marquee Kaydırma Bandı */
.marquee-kapsayici {
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    width: 100%;
    position: relative;
    padding: 15px 0;
}

.marquee-kapsayici::before,
.marquee-kapsayici::after {
    content: '';
    position: absolute;
    top: 0;
    width: 120px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.marquee-kapsayici::before {
    left: 0;
    background: linear-gradient(to right, var(--renk-acik) 0%, transparent 100%);
}

.marquee-kapsayici::after {
    right: 0;
    background: linear-gradient(to left, var(--renk-acik) 0%, transparent 100%);
}

.marquee-icerik {
    display: inline-flex;
    gap: 80px;
    animation: marquee-dondur 28s linear infinite;
    align-items: center;
}

.marquee-kapsayici:hover .marquee-icerik {
    animation-play-state: paused;
}

.marquee-logo-kart {
    font-family: var(--yazi-baslik);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--renk-birincil);
    letter-spacing: 1.5px;
    background: var(--renk-arka-plan);
    padding: 12px 30px;
    border-radius: 50px;
    border: 1px solid var(--renk-gri-sinir);
    box-shadow: var(--golge-1);
    transition: var(--gecis-hizli);
}

.marquee-logo-kart:hover {
    color: var(--renk-vurgu);
    border-color: var(--renk-vurgu);
}

@keyframes marquee-dondur {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* SSS Accordion Yapısı */
.sss-kapsayici {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.sss-oge {
    background: var(--renk-acik);
    border: 1px solid var(--renk-gri-sinir);
    border-radius: 12px;
    overflow: hidden;
    transition: var(--gecis-orta);
    box-shadow: var(--golge-1);
}

.sss-oge.aktif {
    border-color: var(--renk-birincil);
    box-shadow: var(--golge-3);
}

.sss-soru {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 28px;
    background: none;
    border: none;
    text-align: left;
    font-family: var(--yazi-baslik);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--renk-koyu);
    cursor: pointer;
    transition: var(--gecis-hizli);
}

.sss-soru:hover {
    color: var(--renk-birincil);
}

.sss-chevron {
    flex-shrink: 0;
    margin-left: 16px;
    transition: transform var(--gecis-orta);
    color: var(--renk-govde);
}

.sss-oge.aktif .sss-chevron {
    transform: rotate(180deg);
    color: var(--renk-birincil);
}

.sss-cevap {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--gecis-orta) ease-out;
}

.sss-cevap-icerik {
    padding: 0 28px 24px 28px;
    font-size: 0.95rem;
    color: var(--renk-govde);
    line-height: 1.7;
}

/* Yapay Zeka Bölümü (Chatbot Premium Görünümü) */
.yapay-zeka-bolumu {
    padding: 100px 0;
    background: linear-gradient(180deg, var(--renk-acik) 0%, rgba(57, 92, 125, 0.03) 100%);
    border-bottom: 1px solid var(--renk-gri-sinir);
}

.yapay-zeka-izgara {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: center;
}

.yapay-zeka-icerik h2 {
    font-family: var(--yazi-baslik);
    font-size: 2.75rem;
    font-weight: 900;
    margin-bottom: 24px;
    color: var(--renk-koyu);
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.yapay-zeka-icerik p {
    color: var(--renk-govde);
    font-size: 1.05rem;
    margin-bottom: 30px;
}

.yapay-zeka-liste {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.yapay-zeka-liste li {
    display: flex;
    gap: 14px;
    font-size: 0.95rem;
    color: var(--renk-govde);
}

.yapay-zeka-liste li svg {
    flex-shrink: 0;
    margin-top: 3px;
}

.yapay-zeka-liste li strong {
    color: var(--renk-koyu);
}

/* AI Chatbox Kutusu */
.ai-box {
    background: var(--renk-acik);
    border: 1px solid var(--renk-gri-sinir);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--golge-4);
    display: flex;
    flex-direction: column;
    max-width: 440px;
    margin: 0 auto;
    transition: var(--gecis-orta);
}

.ai-box:hover {
    transform: translateY(-6px);
    box-shadow: var(--golge-5);
}

.ai-header {
    background: var(--renk-birincil);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.ai-bot-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: var(--renk-acik);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--yazi-baslik);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.ai-status {
    display: flex;
    flex-direction: column;
}

.ai-name {
    font-family: var(--yazi-baslik);
    font-weight: 700;
    font-size: 1rem;
    color: var(--renk-acik);
}

.ai-online {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 5px;
}

.ai-online::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #27C93F;
    border-radius: 50%;
}

.ai-chat {
    background: #F8FAFC;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 400px;
    overflow-y: auto;
}

.chat-balon {
    padding: 14px 18px;
    border-radius: 18px;
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: 85%;
}

.chat-balon.v-kullanici {
    background: var(--renk-acik);
    color: var(--renk-koyu);
    border: 1px solid var(--renk-gri-sinir);
    align-self: flex-end;
    border-bottom-right-radius: 4px;
    box-shadow: var(--golge-1);
}

.chat-balon.v-ai {
    background: var(--renk-birincil-acik);
    color: var(--renk-koyu);
    border: 1px solid rgba(57, 92, 125, 0.1);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

.chat-balon.v-ai p {
    margin-bottom: 8px;
}

.chat-balon.v-ai p:last-child {
    margin-bottom: 0;
}

.ai-aksiyon-buton {
    margin-top: 12px;
    background: var(--renk-birincil);
    color: var(--renk-acik);
    border: none;
    padding: 10px 16px;
    border-radius: 8px;
    font-family: var(--yazi-baslik);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--gecis-hizli);
    display: inline-block;
    box-shadow: 0 4px 10px rgba(57, 92, 125, 0.15);
}

.ai-aksiyon-buton:hover {
    background: var(--renk-birincil-koyu);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(57, 92, 125, 0.2);
}

/* SSS Accordion ve AI chatbot mobil responsive */
@media (max-width: 992px) {
    .yapay-zeka-izgara {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* ==========================================================================
   Nasıl Çalışır - Premium Split Süreç Simülatörü Stilleri
   ========================================================================== */
.surec-kapsayici {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
    margin-top: 50px;
    position: relative;
}

.surec-gorsel-panel {
    flex: 1;
    position: sticky;
    top: 120px;
    height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.simulasyon-ekrani {
    width: 100%;
    max-width: 440px;
    height: 100%;
    background: var(--gradient-cam);
    border: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px);
    border-radius: 30px;
    box-shadow: var(--golge-4);
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    transition: var(--gecis-orta);
}

.simulasyon-ekrani::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(57, 92, 125, 0.05) 0%, transparent 70%);
    z-index: 1;
    pointer-events: none;
}

.sim-icerik {
    position: absolute;
    width: calc(100% - 60px);
    height: calc(100% - 60px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px) scale(0.95);
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 2;
}

.sim-icerik.aktif {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

/* Simülasyon Görsel Bileşenleri */
.sim-gorsel-kapsayici {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--renk-acik);
    border: 1px solid rgba(57, 92, 125, 0.1);
    box-shadow: var(--golge-3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    color: var(--renk-birincil);
    position: relative;
}

.sim-gorsel-kapsayici svg {
    width: 48px;
    height: 48px;
    stroke: currentColor;
    stroke-width: 1.5;
}

/* Animasyonlu Dalga (Wave) */
.ses-dalgalari {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--renk-vurgu);
    opacity: 0;
    animation: wave-pulse 2s infinite ease-out;
}
.ses-dalgalari.dalga2 {
    animation-delay: 0.6s;
}
.ses-dalgalari.dalga3 {
    animation-delay: 1.2s;
}

@keyframes wave-pulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

/* Form Mockup (Adım 1) */
.mock-form {
    width: 100%;
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid rgba(57, 92, 125, 0.08);
    padding: 22px;
    box-shadow: 0 12px 30px rgba(57, 92, 125, 0.12);
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
}

.mock-form-baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid #eef2f6;
}

.mock-form-marka {
    font-family: var(--yazi-baslik);
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 1px;
    color: var(--renk-birincil);
}

.mock-form-rozet {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--renk-birincil);
    background: rgba(57, 92, 125, 0.08);
    padding: 3px 9px;
    border-radius: 20px;
}

.mock-grup {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.mock-etiket {
    height: 8px;
    width: 45%;
    background: #e8edf2;
    border-radius: 4px;
}
.mock-etiket.kisa {
    width: 30%;
}

.mock-alan.girdi {
    height: 36px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 12px;
}

.mock-alan.girdi.dolu {
    background: rgba(22, 163, 74, 0.05);
    border-color: rgba(22, 163, 74, 0.25);
    justify-content: flex-end;
}
.mock-alan.girdi.dolu svg {
    width: 16px;
    height: 16px;
}

.mock-alan.girdi.aktif-girdi {
    border-color: var(--renk-birincil);
    box-shadow: 0 0 0 3px rgba(57, 92, 125, 0.1);
    justify-content: flex-start;
}
.mock-imlec {
    width: 2px;
    height: 18px;
    background: var(--renk-birincil);
    animation: imlec-yanip 1s steps(1) infinite;
}
@keyframes imlec-yanip {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.mock-buton {
    height: 42px;
    background: var(--gradient-birincil);
    border-radius: 9px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    animation: pulse-glow 2s infinite;
}
.mock-buton span {
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.3px;
}

/* Bulut Kurulumu - İzole Güvenli Bulut (Adım 3) */
.izole-bulut {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
}

.izole-halka {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px dashed rgba(57, 92, 125, 0.3);
    animation: don-saat 18s linear infinite;
}
.izole-halka.halka-ic {
    width: 72%;
    height: 72%;
    border-color: rgba(210, 164, 84, 0.4);
    animation: don-saat-ters 12s linear infinite;
}

@keyframes don-saat { to { transform: rotate(360deg); } }
@keyframes don-saat-ters { to { transform: rotate(-360deg); } }

.izole-yoruge {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: don-saat 14s linear infinite;
}
.izole-uydu {
    position: absolute;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid rgba(57, 92, 125, 0.1);
    box-shadow: var(--golge-2);
    color: var(--renk-birincil);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: don-saat-ters 14s linear infinite;
}
.izole-uydu svg { width: 22px; height: 22px; }
.izole-uydu.u1 { top: -6px; left: 50%; margin-left: -21px; }
.izole-uydu.u2 { bottom: 8%; left: 4%; }
.izole-uydu.u3 { bottom: 8%; right: 4%; }

.izole-merkez {
    position: relative;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--gradient-birincil);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 26px rgba(57, 92, 125, 0.35);
    z-index: 3;
}
.izole-merkez > svg { width: 44px; height: 44px; }

.izole-kilit {
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--renk-vurgu);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--renk-acik);
    box-shadow: var(--golge-2);
}
.izole-kilit svg { width: 16px; height: 16px; }

/* Excel'den Veri Aktarımı (Adım 4) */
.veri-akisi {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    margin-bottom: 22px;
}
.veri-ucu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.veri-rozet {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--golge-2);
    background: #fff;
}
.veri-rozet svg { width: 32px; height: 32px; }
.veri-rozet.yesil { color: #16A34A; border: 1px solid rgba(22,163,74,0.2); }
.veri-rozet.mavi {
    color: #fff;
    background: var(--gradient-birincil);
    box-shadow: 0 8px 20px rgba(57, 92, 125, 0.3);
}
.veri-etiket {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--renk-govde);
    letter-spacing: 0.5px;
}

.veri-kanal {
    position: relative;
    flex: 1;
    height: 3px;
    background: repeating-linear-gradient(90deg, rgba(57,92,125,0.15) 0 6px, transparent 6px 12px);
    margin: 0 6px;
    margin-bottom: 22px;
    border-radius: 2px;
}
.veri-parcacik {
    position: absolute;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -4.5px;
    border-radius: 50%;
    background: var(--renk-vurgu);
    box-shadow: 0 0 8px rgba(210, 164, 84, 0.6);
    animation: parcacik-akis 1.8s linear infinite;
}
.veri-parcacik.p2 { animation-delay: 0.6s; }
.veri-parcacik.p3 { animation-delay: 1.2s; }

@keyframes parcacik-akis {
    0% { left: 0; opacity: 0; transform: scale(0.6); }
    15% { opacity: 1; transform: scale(1); }
    85% { opacity: 1; transform: scale(1); }
    100% { left: 100%; opacity: 0; transform: scale(0.6); }
}

/* Başarı Rozeti (Adım 5) */
.basari-kapsayici {
    position: relative;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.basari-dalga {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid var(--renk-vurgu);
    opacity: 0;
    animation: basari-dalga-yay 2.4s ease-out infinite;
}
.basari-dalga.dalga-b2 { animation-delay: 1.2s; }

@keyframes basari-dalga-yay {
    0% { transform: scale(0.8); opacity: 0.7; }
    100% { transform: scale(1.7); opacity: 0; }
}

.basari-rozet {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: linear-gradient(135deg, #16A34A 0%, #15803d 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 26px rgba(22, 163, 74, 0.35);
    z-index: 2;
    animation: basari-zipla 2.4s ease-in-out infinite;
}

@keyframes basari-zipla {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

.basari-kivilcim {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--renk-vurgu);
    opacity: 0;
    animation: kivilcim-cik 2.4s ease-out infinite;
}
.basari-kivilcim.k1 { top: 10%; left: 50%; --kx: 0px; --ky: -34px; }
.basari-kivilcim.k2 { top: 50%; right: 8%; --kx: 38px; --ky: 0px; background: var(--renk-birincil); }
.basari-kivilcim.k3 { bottom: 12%; left: 22%; --kx: -28px; --ky: 26px; }
.basari-kivilcim.k4 { top: 20%; left: 16%; --kx: -32px; --ky: -22px; background: var(--renk-birincil); }
.basari-kivilcim.k5 { bottom: 14%; right: 20%; --kx: 28px; --ky: 26px; }
.basari-kivilcim.k6 { top: 22%; right: 16%; --kx: 30px; --ky: -22px; }

@keyframes kivilcim-cik {
    0%, 40% { transform: translate(0, 0) scale(0); opacity: 0; }
    60% { opacity: 1; transform: translate(calc(var(--kx) * 0.6), calc(var(--ky) * 0.6)) scale(1); }
    100% { transform: translate(var(--kx), var(--ky)) scale(0); opacity: 0; }
}

.sim-icerik h4 {
    font-family: var(--yazi-baslik);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--renk-koyu);
    margin-bottom: 8px;
}

.sim-icerik p {
    font-size: 0.9rem;
    color: var(--renk-govde);
    line-height: 1.4;
}

/* Sağ Panel - Süreç Adım Kartları */
.surec-yazi-panel {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    padding-left: 40px;
}

.surec-yazi-panel::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 20px;
    bottom: 20px;
    width: 4px;
    background: #e2e8f0;
    border-radius: 2px;
}

.surec-izleyici-cizgi {
    position: absolute;
    left: 18px;
    top: 20px;
    width: 4px;
    height: 0;
    background: var(--gradient-birincil);
    border-radius: 2px;
    transition: height 0.5s ease;
    z-index: 2;
}

.surec-adim-kart {
    background: #ffffff;
    border: 1px solid rgba(57, 92, 125, 0.05);
    border-radius: 20px;
    padding: 24px 30px;
    box-shadow: var(--golge-2);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
    position: relative;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    overflow: hidden;
}

.surec-adim-kart::before {
    content: '';
    position: absolute;
    left: -27px;
    top: 30px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid #cbd5e1;
    z-index: 3;
    transition: var(--gecis-hizli);
}

.surec-adim-kart:hover,
.surec-adim-kart.aktif {
    border-color: rgba(57, 92, 125, 0.12);
    box-shadow: var(--golge-3);
}

.surec-adim-kart:hover .surec-adim-icerik,
.surec-adim-kart.aktif .surec-adim-icerik,
.surec-adim-kart:hover .surec-adim-no,
.surec-adim-kart.aktif .surec-adim-no {
    transform: translateX(8px);
}

.surec-adim-kart.aktif::before {
    background: var(--renk-birincil);
    border-color: var(--renk-vurgu);
    box-shadow: 0 0 0 5px rgba(57, 92, 125, 0.15);
}

.surec-adim-no {
    font-family: var(--yazi-baslik);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--renk-birincil);
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    opacity: 0.3;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity var(--gecis-hizli);
}

.surec-adim-kart.aktif .surec-adim-no {
    opacity: 1;
    color: var(--renk-birincil);
}

.surec-adim-icerik {
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.surec-adim-icerik h3 {
    font-family: var(--yazi-baslik);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--renk-koyu);
    transition: var(--gecis-hizli);
}

.surec-adim-kart.aktif h3 {
    color: var(--renk-birincil);
}

.surec-adim-icerik p {
    font-size: 0.9rem;
    color: var(--renk-govde);
    line-height: 1.5;
}

/* Nasıl Çalışır Responsive */
@media (max-width: 992px) {
    .surec-kapsayici {
        flex-direction: column;
        gap: 40px;
    }
    
    .surec-gorsel-panel {
        position: relative;
        top: 0;
        width: 100%;
        height: 380px;
    }
    
    .simulasyon-ekrani {
        max-width: 100%;
    }
    
    .surec-yazi-panel {
        width: 100%;
        padding-left: 30px;
    }
    
    .surec-yazi-panel::before {
        left: 10px;
    }
    
    .surec-izleyici-cizgi {
        left: 10px;
    }
    
    .surec-adim-kart::before {
        left: -25px;
    }
}

/* ==========================================================================
   ANASAYFA — Stats, Testimonials, SSS, Hero Güncellemeleri
   ========================================================================== */

/* Hero Buton Grubu */
.kahraman-butonlar {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 32px;
}

.hero-not {
    margin-top: 18px;
    font-size: 0.82rem;
    color: var(--renk-govde);
    opacity: 0.75;
    letter-spacing: 0.3px;
}

/* Hero Rozet */
.kahraman-rozet {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(57,92,125,.08);
    border: 1px solid rgba(57,92,125,.15);
    border-radius: 50px;
    padding: 6px 16px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--renk-birincil);
    letter-spacing: 0.3px;
    margin-bottom: 20px;
}

.rozet-nokta {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #27C93F;
    box-shadow: 0 0 0 2px rgba(39,201,63,.25);
    animation: nabiz 2s ease-in-out infinite;
}

@keyframes nabiz {
    0%, 100% { box-shadow: 0 0 0 2px rgba(39,201,63,.25); }
    50% { box-shadow: 0 0 0 5px rgba(39,201,63,.1); }
}

/* Stats Bölümü */
.stats-bolumu {
    padding: 60px 0;
    background: var(--renk-arka-plan);
    border-top: 1px solid var(--renk-gri-sinir);
    border-bottom: 1px solid var(--renk-gri-sinir);
}

.stats-izgara {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.stats-kart {
    background: var(--renk-acik);
    border: 1px solid var(--renk-gri-sinir);
    border-radius: 20px;
    padding: 36px 28px;
    text-align: center;
    box-shadow: var(--golge-1);
    transition: var(--gecis-orta);
}

.stats-kart:hover {
    transform: translateY(-5px);
    box-shadow: var(--golge-3);
    border-color: rgba(57,92,125,.2);
}

.stats-ikon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(57,92,125,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    flex-shrink: 0;
}

.stats-sayi-kapsayici {
    margin-bottom: 8px;
}

.stats-sayi {
    font-family: var(--yazi-baslik);
    font-size: 2.8rem;
    font-weight: 900;
    color: var(--renk-birincil);
    letter-spacing: -1px;
    line-height: 1;
}

.stats-etiket {
    font-size: 0.9rem;
    color: var(--renk-govde);
    font-weight: 500;
}

/* Testimonials Bölümü */
.testimonials-bolumu {
    padding: 90px 0;
    background: var(--renk-acik);
}

.testimonials-izgara {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 48px;
}

.testimonial-kart {
    background: var(--renk-arka-plan);
    border: 1px solid var(--renk-gri-sinir);
    border-radius: 20px;
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: var(--golge-1);
    transition: var(--gecis-orta);
    position: relative;
    overflow: hidden;
}

.testimonial-kart::before {
    content: '"';
    position: absolute;
    top: -10px;
    right: 24px;
    font-size: 8rem;
    font-family: Georgia, serif;
    color: var(--renk-birincil);
    opacity: 0.06;
    line-height: 1;
    pointer-events: none;
}

.testimonial-kart:hover {
    transform: translateY(-5px);
    box-shadow: var(--golge-3);
    border-color: rgba(57,92,125,.2);
}

.testimonial-yildizlar {
    color: #f59e0b;
    font-size: 1rem;
    letter-spacing: 2px;
}

.testimonial-metin {
    font-size: 0.97rem;
    color: var(--renk-govde);
    line-height: 1.75;
    flex: 1;
    font-style: italic;
}

.testimonial-profil {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--renk-gri-sinir);
}

.testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gradient-birincil);
    color: #fff;
    font-family: var(--yazi-baslik);
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.testimonial-bilgi {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.testimonial-bilgi strong {
    font-size: 0.95rem;
    color: var(--renk-koyu);
    font-weight: 700;
}

.testimonial-bilgi span {
    font-size: 0.8rem;
    color: var(--renk-govde);
}

/* SSS / FAQ Bölümü (Anasayfa) */
.sss-bolumu {
    padding: 90px 0;
    background: var(--renk-arka-plan);
}

.sss-icerik {
    max-width: 800px;
    margin: 0 auto;
}

.sss-liste {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sss-madde {
    background: var(--renk-acik);
    border: 1px solid var(--renk-gri-sinir);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color var(--gecis-hizli), box-shadow var(--gecis-hizli);
}

.sss-madde.aktif {
    border-color: var(--renk-birincil);
    box-shadow: var(--golge-2);
}

.sss-soru {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: none;
    border: none;
    text-align: left;
    font-family: var(--yazi-baslik);
    font-size: 1rem;
    font-weight: 600;
    color: var(--renk-koyu);
    cursor: pointer;
    gap: 16px;
}

.sss-soru:hover {
    color: var(--renk-birincil);
}

.sss-ok {
    flex-shrink: 0;
    transition: transform var(--gecis-orta);
    color: var(--renk-govde);
}

.sss-madde.aktif .sss-ok {
    transform: rotate(180deg);
    color: var(--renk-birincil);
}

.sss-cevap {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.sss-madde.aktif .sss-cevap {
    max-height: 300px;
}

.sss-cevap p {
    padding: 0 24px 20px;
    font-size: 0.93rem;
    color: var(--renk-govde);
    line-height: 1.75;
    margin: 0;
}

.sss-cta {
    margin-top: 40px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.sss-cta p {
    font-size: 0.95rem;
    color: var(--renk-govde);
    margin: 0;
}

/* Blog Önizleme Bölümü */
.blog-onizleme-bolumu {
    padding: 80px 0;
    background: var(--renk-acik);
    border-top: 1px solid var(--renk-gri-sinir);
}

.blog-on-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 40px;
}

.blog-on-kart {
    background: var(--renk-arka-plan);
    border: 1px solid var(--renk-gri-sinir);
    border-radius: 16px;
    padding: 28px 28px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    transition: var(--gecis-orta);
    box-shadow: var(--golge-1);
}

.blog-on-kart:hover {
    transform: translateY(-4px);
    box-shadow: var(--golge-3);
    border-color: rgba(57,92,125,.2);
}

.blog-on-baslik h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--renk-koyu);
    line-height: 1.4;
    margin-bottom: 10px;
}

.blog-on-baslik h3 a {
    color: inherit;
    text-decoration: none;
}

.blog-on-baslik h3 a:hover {
    color: var(--renk-birincil);
}

.blog-on-baslik p {
    font-size: 0.88rem;
    color: var(--renk-govde);
    line-height: 1.6;
}

.blog-on-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--renk-birincil);
    text-decoration: none;
    transition: gap var(--gecis-hizli);
}

.blog-on-link:hover {
    gap: 10px;
}

/* ==========================================================================
   FAZ 2 — WIZARD BAŞVURU FORMU
   ========================================================================== */

.wizard-sayfa {
    min-height: 100vh;
    padding: 120px 0 80px;
    background: var(--renk-arka-plan);
}

.wizard-sayfa .konteyner {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 48px;
    align-items: flex-start;
    max-width: 1100px;
}

/* Sol Panel */
.wizard-sol-panel {
    position: sticky;
    top: 100px;
}

.wizard-geri-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--renk-govde);
    text-decoration: none;
    margin-bottom: 32px;
    transition: color var(--gecis-hizli);
}

.wizard-geri-link:hover {
    color: var(--renk-birincil);
}

.wizard-sol-icerik {
    background: var(--renk-acik);
    border: 1px solid var(--renk-gri-sinir);
    border-radius: 24px;
    padding: 40px 36px;
    box-shadow: var(--golge-2);
}

.wizard-sol-icerik .wizard-logo {
    margin-bottom: 28px;
}

.wizard-sol-icerik h2 {
    font-family: var(--yazi-baslik);
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--renk-koyu);
    margin-bottom: 12px;
    line-height: 1.3;
}

.wizard-sol-icerik > div > p {
    font-size: 0.95rem;
    color: var(--renk-govde);
    line-height: 1.7;
    margin-bottom: 28px;
}

.wizard-avantajlar {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
}

.wizard-avantajlar li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--renk-koyu);
    font-weight: 500;
}

.wizard-guven-rozeti {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 14px 18px;
    background: rgba(57,92,125,.05);
    border: 1px solid rgba(57,92,125,.1);
    border-radius: 12px;
    font-size: 0.8rem;
    color: var(--renk-govde);
}

.wizard-guven-rozeti .guven-oge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.wizard-guven-rozeti svg {
    flex-shrink: 0;
    color: var(--renk-birincil);
}

/* Sağ Panel */
.wizard-sag-panel {
    background: var(--renk-acik);
    border: 1px solid var(--renk-gri-sinir);
    border-radius: 24px;
    padding: 40px 40px 44px;
    box-shadow: var(--golge-3);
}

/* İlerleme Çubuğu */
.wizard-ilerleme {
    margin-bottom: 36px;
}

.wizard-adim-noktalari {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 12px;
}

.wizard-adim-nokta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
}

.adim-no {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--yazi-baslik);
    font-weight: 700;
    font-size: 0.9rem;
    background: var(--renk-arka-plan);
    color: var(--renk-govde);
    border: 2px solid var(--renk-gri-sinir);
    transition: all var(--gecis-orta);
}

.adim-etiket {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--renk-govde);
    letter-spacing: 0.3px;
    transition: color var(--gecis-orta);
}

.wizard-adim-nokta.aktif .adim-no {
    background: var(--renk-birincil);
    border-color: var(--renk-birincil);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(57,92,125,.12);
}

.wizard-adim-nokta.aktif .adim-etiket {
    color: var(--renk-birincil);
}

.wizard-adim-nokta.tamamlandi .adim-no {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

.wizard-adim-nokta.tamamlandi .adim-etiket {
    color: #16a34a;
}

.wizard-adim-cizgi {
    flex: 1;
    height: 2px;
    background: var(--renk-gri-sinir);
    margin: 0 8px;
    margin-bottom: 22px;
}

.wizard-ilerleme-cizgi {
    height: 5px;
    background: var(--renk-gri-sinir);
    border-radius: 99px;
    overflow: hidden;
}

.wizard-ilerleme-dolu {
    height: 100%;
    background: var(--gradient-birincil);
    border-radius: 99px;
    transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Adım Panelleri */
.wizard-adim-paneli {
    display: none;
    animation: adim-gir 0.35s ease forwards;
}

.wizard-adim-paneli.aktif {
    display: block;
}

@keyframes adim-gir {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

.wizard-adim-baslik {
    margin-bottom: 28px;
}

.adim-sayac {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--renk-birincil);
    display: block;
    margin-bottom: 8px;
}

.wizard-adim-baslik h3 {
    font-family: var(--yazi-baslik);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--renk-koyu);
    margin-bottom: 6px;
}

.wizard-adim-baslik p {
    font-size: 0.9rem;
    color: var(--renk-govde);
}

.wizard-form-alani {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Form hata durumu */
.form-grup.hata input,
.form-grup.hata select,
.form-grup.hata textarea {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,.1) !important;
}

.form-hata-mesaji {
    display: block;
    font-size: 0.78rem;
    color: #ef4444;
    margin-top: 4px;
    min-height: 16px;
}

/* Paket Seçici Kartları */
.wizard-paket-secici {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wizard-paket-kart {
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 2px solid var(--renk-gri-sinir);
    border-radius: 16px;
    cursor: pointer;
    transition: all var(--gecis-hizli);
    overflow: hidden;
    position: relative;
}

.wizard-paket-kart:hover {
    border-color: var(--renk-birincil);
    box-shadow: var(--golge-2);
}

.wizard-paket-kart.secili {
    border-color: var(--renk-birincil);
    background: rgba(57,92,125,.03);
    box-shadow: 0 0 0 4px rgba(57,92,125,.08);
}

/* Ödeme Periyodu Seçimi (başvuru adım 3) */
.wizard-periyot-kapsayici {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}
.wizard-periyot {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--renk-arka-plan);
    border: 1px solid var(--renk-gri-sinir);
    border-radius: 50px;
}
.wizard-periyot-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border: none;
    background: none;
    border-radius: 50px;
    font-family: var(--yazi-baslik);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--renk-govde);
    cursor: pointer;
    transition: all var(--gecis-hizli);
    white-space: nowrap;
}
.wizard-periyot-btn.aktif {
    background: var(--renk-birincil);
    color: #fff;
    box-shadow: var(--golge-1);
}
.wizard-periyot-rozet {
    font-size: 0.68rem;
    font-weight: 700;
    background: #16a34a;
    color: #fff;
    padding: 2px 8px;
    border-radius: 50px;
}
.wizard-periyot-btn.aktif .wizard-periyot-rozet {
    background: rgba(255,255,255,0.25);
}
.fiyat-eski {
    display: block;
    font-size: 0.82rem;
    color: var(--renk-govde);
    text-decoration: line-through;
    opacity: 0.65;
    line-height: 1.2;
}
.fiyat-eski:empty {
    display: none;
}
.fiyat-yillik-not {
    display: block;
    font-size: 0.72rem;
    color: #16a34a;
    font-weight: 600;
    margin-top: 2px;
}

.wizard-paket-kart.onerilen {
    border-color: #16a34a;
}

.paket-rozet-satiri {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.paket-oneri-rozet {
    display: inline-block;
    background: #16a34a;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 3px 9px;
    border-radius: 50px;
}

.wizard-paket-kart input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.wizard-paket-icerik {
    flex: 1;
    padding: 14px 18px;
}

.wizard-paket-ust {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.wizard-paket-ust strong {
    font-family: var(--yazi-baslik);
    font-size: 1rem;
    font-weight: 700;
    color: var(--renk-koyu);
}

.paket-rozet {
    display: inline-block;
    background: var(--renk-vurgu);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 4px;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.wizard-paket-fiyat {
    text-align: right;
    line-height: 1.25;
    flex-shrink: 0;
}

.fiyat-sayi {
    font-family: var(--yazi-baslik);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--renk-birincil);
}

.fiyat-birim {
    font-size: 0.78rem;
    color: var(--renk-govde);
}

.wizard-paket-ozellikler {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.wizard-paket-ozellikler li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.82rem;
    color: var(--renk-govde);
}

.wizard-paket-secim-gostergesi {
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--renk-arka-plan);
    border-left: 1px solid var(--renk-gri-sinir);
    color: var(--renk-gri-sinir);
    transition: all var(--gecis-hizli);
}

.wizard-paket-kart.secili .wizard-paket-secim-gostergesi {
    background: var(--renk-birincil);
    border-color: var(--renk-birincil);
    color: #fff;
}

/* Alt Buton Grubu */
.wizard-alt-butonlar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--renk-gri-sinir);
}

/* Başvuru Durumu Sorgulama */
.durum-sorgu-bolumu { padding: 60px 0 90px; }
.durum-sorgu-kart {
    max-width: 540px; margin: 0 auto; background: var(--renk-acik);
    border: 1px solid var(--renk-gri-sinir); border-radius: 20px; padding: 40px;
    box-shadow: var(--golge-2);
}
.durum-form-baslik { text-align: center; margin-bottom: 24px; }
.durum-form-baslik h2 { font-family: var(--yazi-baslik); font-size: 1.5rem; font-weight: 800; color: var(--renk-koyu); margin-bottom: 6px; }
.durum-form-baslik p { font-size: 0.9rem; color: var(--renk-govde); }
.durum-form { display: flex; flex-direction: column; gap: 18px; }
.durum-hata { background: rgba(239,68,68,.06); border: 1px solid rgba(239,68,68,.2); color: #b91c1c; padding: 12px 16px; border-radius: 10px; font-size: 0.88rem; margin-bottom: 18px; }

.durum-sonuc { text-align: center; }
.durum-sonuc-ikon { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.durum-sonuc.v-onay .durum-sonuc-ikon { background: rgba(22,163,74,.1); color: #16a34a; }
.durum-sonuc.v-red .durum-sonuc-ikon { background: rgba(239,68,68,.1); color: #dc2626; }
.durum-sonuc.v-bekle .durum-sonuc-ikon { background: rgba(245,158,11,.1); color: #d97706; }
.durum-rozet-buyuk { display: inline-block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 4px 14px; border-radius: 50px; margin-bottom: 12px; }
.durum-sonuc.v-onay .durum-rozet-buyuk { background: rgba(22,163,74,.1); color: #16a34a; }
.durum-sonuc.v-red .durum-rozet-buyuk { background: rgba(239,68,68,.1); color: #dc2626; }
.durum-sonuc.v-bekle .durum-rozet-buyuk { background: rgba(245,158,11,.1); color: #d97706; }
.durum-sonuc h2 { font-family: var(--yazi-baslik); font-size: 1.4rem; font-weight: 800; color: var(--renk-koyu); margin-bottom: 20px; }
.durum-detay-izgara { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--renk-gri-sinir); border-radius: 12px; overflow: hidden; margin-bottom: 20px; text-align: left; }
.durum-detay-izgara > div { display: flex; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--renk-gri-sinir); }
.durum-detay-izgara > div:last-child { border-bottom: none; }
.durum-detay-izgara span { font-size: 0.85rem; color: var(--renk-govde); }
.durum-detay-izgara strong { font-size: 0.9rem; color: var(--renk-koyu); }
.durum-aciklama { font-size: 0.92rem; color: var(--renk-govde); line-height: 1.7; margin-bottom: 24px; }
.durum-aciklama a { color: var(--renk-birincil); font-weight: 600; }

/* İndirim Kodu Alanı */
.indirim-kod-satir {
    display: flex;
    gap: 10px;
}
.indirim-kod-satir input {
    flex: 1;
}
.indirim-kod-satir .buton-stil1 {
    flex-shrink: 0;
    padding: 0 22px;
}
.indirim-sonuc {
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.85rem;
    line-height: 1.5;
}
.indirim-sonuc.v-basari {
    background: rgba(22,163,74,.08);
    border: 1px solid rgba(22,163,74,.2);
    color: #15803d;
}
.indirim-sonuc.v-hata {
    background: rgba(239,68,68,.06);
    border: 1px solid rgba(239,68,68,.18);
    color: #b91c1c;
}
.indirim-eski { text-decoration: line-through; opacity: 0.7; }
.indirim-yeni { color: #15803d; }
.indirim-kazanc { font-size: 0.8rem; opacity: 0.85; }

/* Genel Hata Balonu */
.wizard-hata-balonu {
    margin-top: 16px;
    padding: 14px 18px;
    background: rgba(239,68,68,.06);
    border: 1px solid rgba(239,68,68,.2);
    border-radius: 12px;
    font-size: 0.88rem;
    color: #b91c1c;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Spinner */
.spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: dondur 0.7s linear infinite;
    vertical-align: middle;
}

@keyframes dondur {
    to { transform: rotate(360deg); }
}

/* Teşekkür Ekranı */
.tesekkur-ekrani {
    text-align: center;
    padding: 20px 0;
}

.tesekkur-ikon {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: rgba(39,201,63,.08);
    border: 2px solid rgba(39,201,63,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.tesekkur-ekrani h3 {
    font-family: var(--yazi-baslik);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--renk-koyu);
    margin-bottom: 12px;
}

.tesekkur-ekrani > p {
    font-size: 0.95rem;
    color: var(--renk-govde);
    line-height: 1.7;
    max-width: 420px;
    margin: 0 auto 28px;
}

.tesekkur-takip-kutusu {
    background: var(--renk-arka-plan);
    border: 1px solid var(--renk-gri-sinir);
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 28px;
}

.tesekkur-takip-etiket {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--renk-govde);
    margin-bottom: 10px;
}

.tesekkur-takip-kodu {
    font-family: 'Courier New', monospace;
    font-size: 2rem;
    font-weight: 700;
    color: var(--renk-birincil);
    letter-spacing: 4px;
    margin-bottom: 10px;
}

.tesekkur-takip-not {
    font-size: 0.8rem;
    color: var(--renk-govde);
    margin: 0;
}

.tesekkur-butonlar {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* KVKK onay kutusu */
/* Wizard Responsive */
@media (max-width: 900px) {
    .wizard-sayfa .konteyner {
        grid-template-columns: 1fr;
    }

    .wizard-sol-panel {
        position: static;
    }

    .wizard-sag-panel {
        padding: 28px 24px 36px;
    }
}

@media (max-width: 540px) {
    .wizard-sayfa {
        padding: 40px 0 60px;
    }

    .wizard-sol-icerik {
        padding: 28px 24px;
    }

    .tesekkur-takip-kodu {
        font-size: 1.5rem;
        letter-spacing: 2px;
    }

    .wizard-alt-butonlar {
        flex-direction: column-reverse;
        gap: 10px;
    }

    .wizard-alt-butonlar .buton-stil1 {
        width: 100%;
        justify-content: center;
    }
}

/* Stats ve Testimonials responsive */
@media (max-width: 900px) {
    .stats-izgara {
        grid-template-columns: repeat(2, 1fr);
    }

    .testimonials-izgara {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 540px) {
    .stats-izgara {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .stats-kart {
        padding: 28px 16px;
    }

    .stats-sayi {
        font-size: 2.2rem;
    }

    .kahraman-butonlar {
        flex-direction: column;
    }

    .kahraman-butonlar .buton-stil1 {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

/* ==========================================================================
   FAZ 3 — HESABIM MÜŞTERİ PORTALI
   ========================================================================== */

.hesabim-sayfa {
    min-height: 100vh;
    background: var(--renk-arka-plan);
    display: flex;
    flex-direction: column;
}

/* Hesabım sayfasında site navını gizle */
.sayfa-hesabim .ust-menu,
.sayfa-hesabim .alt-alan {
    display: none;
}

/* Üst Bar */
.hesabim-ust-bar {
    background: var(--renk-acik);
    border-bottom: 1px solid var(--renk-gri-sinir);
    padding: 14px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--golge-1);
}

.hesabim-ust-icerik {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hesabim-ust-sol {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hesabim-logo-link img {
    display: block;
}

.hesabim-ust-ayrac {
    color: var(--renk-gri-sinir);
    font-size: 1.2rem;
}

.hesabim-ust-baslik {
    font-family: var(--yazi-baslik);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--renk-koyu);
}

.hesabim-ust-sag {
    display: flex;
    align-items: center;
    gap: 16px;
}

.hesabim-ust-kurulus {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--renk-govde);
}

/* İçerik Izgara */
.hesabim-icerik {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 32px;
    padding-top: 32px;
    padding-bottom: 60px;
    align-items: flex-start;
    flex: 1;
}

/* Sol Nav */
.hesabim-nav {
    background: var(--renk-acik);
    border: 1px solid var(--renk-gri-sinir);
    border-radius: 20px;
    overflow: hidden;
    position: sticky;
    top: 80px;
    box-shadow: var(--golge-1);
}

.hesabim-nav-profil {
    padding: 24px 20px;
    border-bottom: 1px solid var(--renk-gri-sinir);
    display: flex;
    align-items: center;
    gap: 12px;
}

.hesabim-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--gradient-birincil);
    color: #fff;
    font-family: var(--yazi-baslik);
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hesabim-nav-profil > div strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--renk-koyu);
    line-height: 1.3;
}

.hesabim-nav-profil > div span {
    font-size: 0.78rem;
    color: var(--renk-govde);
}

.hesabim-nav-menu {
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hesabim-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--renk-govde);
    text-decoration: none;
    transition: all var(--gecis-hizli);
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
}

.hesabim-nav-link:hover {
    background: var(--renk-arka-plan);
    color: var(--renk-koyu);
}

.hesabim-nav-link.aktif {
    background: rgba(57,92,125,.08);
    color: var(--renk-birincil);
}

.hesabim-nav-link.v-dis {
    color: var(--renk-govde);
    font-size: 0.82rem;
}

.hesabim-nav-ayrac {
    border: none;
    border-top: 1px solid var(--renk-gri-sinir);
    margin: 8px 0;
}

.hesabim-nav-rozet {
    margin-left: auto;
    background: #ef4444;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 50px;
    padding: 1px 6px;
}
.hesabim-nav-rozet.v-bilgi {
    background: var(--renk-birincil);
}

/* Abonelik kartı (koyu zemin) üzerinde okunur buton */
.abonelik-paket-btn {
    background: #ffffff;
    color: var(--renk-birincil) !important;
    border: 2px solid #ffffff;
    font-size: 0.82rem;
    padding: 9px 18px;
    font-weight: 700;
    white-space: nowrap;
}
.abonelik-paket-btn:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

/* Ana İçerik */
.hesabim-ana {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.hesabim-sekme-icerik {
    display: none;
}

.hesabim-sekme-icerik.aktif {
    display: block;
    animation: adim-gir 0.3s ease forwards;
}

.hesabim-sayfa-baslik {
    margin-bottom: 28px;
}

.hesabim-sayfa-baslik h2 {
    font-family: var(--yazi-baslik);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--renk-koyu);
    margin-bottom: 4px;
}

.hesabim-sayfa-baslik p {
    font-size: 0.9rem;
    color: var(--renk-govde);
}

/* Abonelik Kartı */
.hesabim-abonelik-karti {
    background: var(--gradient-birincil);
    border-radius: 20px;
    padding: 28px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    box-shadow: var(--golge-3);
}

.abonelik-sol .abonelik-durum-rozet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,.15);
    border-radius: 50px;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.3px;
    margin-bottom: 10px;
}

.abonelik-durum-rozet .rozet-nokta {
    background: #27C93F;
}

.abonelik-sol h3 {
    font-family: var(--yazi-baslik);
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 4px;
}

.abonelik-fiyat {
    font-family: var(--yazi-baslik);
    font-size: 1.6rem;
    font-weight: 900;
    color: #fff;
    margin-bottom: 8px;
}

.abonelik-fiyat span {
    font-size: 1rem;
    font-weight: 400;
    opacity: 0.75;
}

.abonelik-tarih {
    font-size: 0.85rem;
    color: rgba(255,255,255,.8);
    margin: 0;
}

.abonelik-tarih .v-uyari {
    color: #fde047;
    font-weight: 700;
}

/* İstatistik Kartları */
.hesabim-stat-izgara {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.hesabim-stat-kart {
    background: var(--renk-acik);
    border: 1px solid var(--renk-gri-sinir);
    border-radius: 16px;
    padding: 20px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--golge-1);
}

.hesabim-stat-ikon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hesabim-stat-sayi {
    display: block;
    font-family: var(--yazi-baslik);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--renk-koyu);
    line-height: 1.2;
}

.hesabim-stat-etiket {
    font-size: 0.75rem;
    color: var(--renk-govde);
}

/* Bölümler */
.hesabim-bolum {
    background: var(--renk-acik);
    border: 1px solid var(--renk-gri-sinir);
    border-radius: 20px;
    padding: 28px 28px;
    margin-bottom: 20px;
    box-shadow: var(--golge-1);
}

.hesabim-bolum h4 {
    font-family: var(--yazi-baslik);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--renk-koyu);
    margin-bottom: 20px;
}

.hesabim-bolum-baslik {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.hesabim-bolum-baslik h4 {
    margin-bottom: 0;
}

.hesabim-sekme-link {
    background: none;
    border: none;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--renk-birincil);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background var(--gecis-hizli);
}

.hesabim-sekme-link:hover {
    background: rgba(57,92,125,.06);
}

/* Tablo */
.hesabim-tablo-kapsayici {
    overflow-x: auto;
}

.hesabim-tablo {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.hesabim-tablo th {
    text-align: left;
    padding: 10px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--renk-govde);
    border-bottom: 1px solid var(--renk-gri-sinir);
}

.hesabim-tablo td {
    padding: 14px 14px;
    color: var(--renk-koyu);
    border-bottom: 1px solid rgba(0,0,0,.04);
}

.hesabim-tablo tr:last-child td {
    border-bottom: none;
}

.fatura-no {
    font-family: 'Courier New', monospace;
    font-size: 0.82rem;
    color: var(--renk-govde);
}

.durum-rozet {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 50px;
    letter-spacing: 0.3px;
}

.durum-rozet.v-odendi {
    background: rgba(39,201,63,.1);
    color: #16a34a;
}

.durum-rozet.v-beklemede {
    background: rgba(245,158,11,.1);
    color: #d97706;
}

.hesabim-aksiyon-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--renk-arka-plan);
    border: 1px solid var(--renk-gri-sinir);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--renk-govde);
    cursor: pointer;
    transition: all var(--gecis-hizli);
}

.hesabim-aksiyon-btn:hover {
    background: var(--renk-birincil);
    color: #fff;
    border-color: var(--renk-birincil);
}

/* Uygulama Yönlendirme Kartı */
.hesabim-uygulama-karti {
    background: linear-gradient(135deg, rgba(57,92,125,.06) 0%, rgba(210,164,84,.04) 100%);
    border: 1px solid rgba(57,92,125,.12);
    border-radius: 16px;
    padding: 24px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.hesabim-uygulama-karti h4 {
    font-family: var(--yazi-baslik);
    font-size: 1rem;
    font-weight: 700;
    color: var(--renk-koyu);
    margin-bottom: 4px;
}

.hesabim-uygulama-karti p {
    font-size: 0.85rem;
    color: var(--renk-govde);
    margin: 0;
}

/* Destek Talepleri */
.destek-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.destek-talep-listesi {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.destek-talep-kart {
    background: var(--renk-arka-plan);
    border: 1px solid var(--renk-gri-sinir);
    border-radius: 14px;
    padding: 18px 20px;
}

.destek-talep-ust {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
    gap: 12px;
}

.destek-talep-no {
    display: block;
    font-size: 0.72rem;
    color: var(--renk-govde);
    font-family: 'Courier New', monospace;
    margin-bottom: 4px;
}

.destek-talep-konu {
    font-size: 0.95rem;
    color: var(--renk-koyu);
}

.destek-talep-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.hesabim-tarih {
    font-size: 0.78rem;
    color: var(--renk-govde);
}

.destek-cevap-kutusu {
    background: rgba(57,92,125,.04);
    border: 1px solid rgba(57,92,125,.1);
    border-left: 3px solid var(--renk-birincil);
    border-radius: 8px;
    padding: 12px 16px;
}

.destek-cevap-etiket {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--renk-birincil);
    display: block;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.destek-cevap-kutusu p {
    font-size: 0.88rem;
    color: var(--renk-govde);
    margin: 0;
    line-height: 1.6;
}

/* Profil */
.profil-bilgi-izgara {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--renk-gri-sinir);
    border-radius: 12px;
    overflow: hidden;
}

.profil-bilgi-satir {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--renk-gri-sinir);
    gap: 16px;
}

.profil-bilgi-satir:last-child {
    border-bottom: none;
}

.profil-etiket {
    width: 160px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--renk-govde);
    flex-shrink: 0;
}

.profil-deger {
    font-size: 0.92rem;
    color: var(--renk-koyu);
}

.v-devre-disi {
    background: var(--renk-arka-plan) !important;
    color: var(--renk-govde) !important;
    cursor: not-allowed !important;
}

/* Bildirim Kutusu */
.hesabim-bildirim {
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 500;
}

.hesabim-bildirim.v-basarili {
    background: rgba(39,201,63,.08);
    border: 1px solid rgba(39,201,63,.2);
    color: #16a34a;
}

.hesabim-bildirim.v-hata {
    background: rgba(239,68,68,.06);
    border: 1px solid rgba(239,68,68,.15);
    color: #b91c1c;
}

/* küçük buton */
.buton-stil1.kucuk {
    padding: 8px 16px;
    font-size: 0.82rem;
}

/* ====================== PAKET DEĞİŞTİRME MODALI ====================== */
.paket-modal-perde {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.paket-modal-perde.acik {
    opacity: 1;
    visibility: visible;
}
.paket-modal {
    background: var(--renk-acik);
    border-radius: 20px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--golge-5);
    transform: translateY(16px) scale(0.98);
    transition: transform 0.25s ease;
}
.paket-modal-perde.acik .paket-modal {
    transform: translateY(0) scale(1);
}
.paket-modal-baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 28px;
    border-bottom: 1px solid var(--renk-gri-sinir);
}
.paket-modal-baslik h3 {
    font-family: var(--yazi-baslik);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--renk-koyu);
    margin: 0;
}
.paket-modal-kapat {
    background: none;
    border: none;
    color: var(--renk-govde);
    cursor: pointer;
    padding: 4px;
    border-radius: 8px;
    display: flex;
    transition: background var(--gecis-hizli);
}
.paket-modal-kapat:hover { background: var(--renk-arka-plan); color: var(--renk-koyu); }
.paket-modal-icerik { padding: 24px 28px 28px; }
.paket-modal-aciklama {
    font-size: 0.9rem;
    color: var(--renk-govde);
    margin-bottom: 18px;
    line-height: 1.6;
}
.paket-secenekleri {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}
.paket-secenek {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 2px solid var(--renk-gri-sinir);
    border-radius: 14px;
    padding: 14px 18px;
    cursor: pointer;
    transition: all var(--gecis-hizli);
}
.paket-secenek:hover { border-color: var(--renk-birincil); }
.paket-secenek.secili {
    border-color: var(--renk-birincil);
    background: rgba(57, 92, 125, 0.04);
    box-shadow: 0 0 0 3px rgba(57, 92, 125, 0.08);
}
.paket-secenek.v-mevcut { opacity: 0.6; cursor: not-allowed; background: var(--renk-arka-plan); }
.paket-secenek input[type="radio"] { width: 18px; height: 18px; accent-color: var(--renk-birincil); flex-shrink: 0; }
.paket-secenek-bilgi { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.paket-secenek-bilgi strong { font-size: 0.95rem; color: var(--renk-koyu); }
.paket-secenek-bilgi span { font-size: 0.82rem; color: var(--renk-govde); }
.paket-secenek-etiket {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 50px;
    flex-shrink: 0;
}
.paket-secenek-etiket.v-yukselt { background: rgba(22,163,74,.1); color: #16a34a; }
.paket-secenek-etiket.v-dusur { background: rgba(245,158,11,.1); color: #d97706; }
.paket-secenek-etiket.v-mevcut { background: var(--renk-gri-sinir); color: var(--renk-govde); }
.buton-stil1.genis { width: 100%; justify-content: center; }

/* ====================== EĞİTİM MERKEZİ ====================== */
.egitim-ilerleme-karti {
    background: var(--gradient-birincil);
    border-radius: 18px;
    padding: 24px 28px;
    margin-bottom: 28px;
    box-shadow: var(--golge-3);
}
.egitim-ilerleme-ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.egitim-ilerleme-ust strong {
    display: block;
    font-family: var(--yazi-baslik);
    font-size: 1.05rem;
    color: #fff;
}
.egitim-ilerleme-ust span {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
}
.egitim-ilerleme-yuzde {
    font-family: var(--yazi-baslik);
    font-size: 1.8rem;
    font-weight: 900;
    color: #fff;
}
.egitim-ilerleme-cubuk {
    height: 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    overflow: hidden;
}
.egitim-ilerleme-dolu {
    height: 100%;
    background: #fff;
    border-radius: 50px;
    transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Kategori */
.egitim-kategori {
    background: var(--renk-acik);
    border: 1px solid var(--renk-gri-sinir);
    border-radius: 18px;
    margin-bottom: 18px;
    overflow: hidden;
    box-shadow: var(--golge-1);
}
.egitim-kategori-baslik {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--renk-gri-sinir);
    background: var(--renk-arka-plan);
}
.egitim-kategori-no {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--gradient-birincil);
    color: #fff;
    font-family: var(--yazi-baslik);
    font-weight: 800;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.egitim-kategori-metin {
    flex: 1;
    min-width: 0;
}
.egitim-kategori-metin h4 {
    font-family: var(--yazi-baslik);
    font-size: 1rem;
    font-weight: 700;
    color: var(--renk-koyu);
    margin-bottom: 2px;
}
.egitim-kategori-metin p {
    font-size: 0.82rem;
    color: var(--renk-govde);
    margin: 0;
}
.egitim-kategori-durum {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--renk-birincil);
    flex-shrink: 0;
}

/* Ders Listesi */
.egitim-ders-listesi {
    display: flex;
    flex-direction: column;
}
.egitim-ders {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.egitim-ders:last-child { border-bottom: none; }

.egitim-ders-baslik {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 24px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background var(--gecis-hizli);
}
.egitim-ders-baslik:hover {
    background: var(--renk-arka-plan);
}

.egitim-ders-durum-ikon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(57, 92, 125, 0.08);
    color: var(--renk-birincil);
}
.egitim-ders-durum-ikon .ikon-tamam { display: none; }
.egitim-ders.tamamlandi .egitim-ders-durum-ikon {
    background: #16a34a;
}
.egitim-ders.tamamlandi .ikon-bekliyor { display: none; }
.egitim-ders.tamamlandi .ikon-tamam { display: block; }

.egitim-ders-ad {
    flex: 1;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--renk-koyu);
    min-width: 0;
}
.egitim-ders.tamamlandi .egitim-ders-ad {
    color: var(--renk-govde);
}
.egitim-ders-sure {
    font-size: 0.78rem;
    color: var(--renk-govde);
    background: var(--renk-arka-plan);
    border: 1px solid var(--renk-gri-sinir);
    padding: 2px 9px;
    border-radius: 50px;
    flex-shrink: 0;
}
.egitim-ders-ok {
    color: var(--renk-govde);
    flex-shrink: 0;
    transition: transform var(--gecis-orta);
}
.egitim-ders.acik .egitim-ders-ok {
    transform: rotate(180deg);
    color: var(--renk-birincil);
}

/* Ders Paneli (video + tamamla) */
.egitim-ders-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}
.egitim-ders.acik .egitim-ders-panel {
    max-height: 800px;
}
.egitim-ders-panel > * {
    margin-left: 24px;
    margin-right: 24px;
}
.egitim-video {
    position: relative;
    width: auto;
    aspect-ratio: 16 / 9;
    background: #0b0f19;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 6px;
    margin-bottom: 16px;
}
.egitim-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.egitim-video-yer {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}
.egitim-ders-aciklama {
    font-size: 0.88rem;
    color: var(--renk-govde);
    line-height: 1.6;
    margin-bottom: 16px;
}
.egitim-tamamla-btn {
    margin-bottom: 20px;
    font-size: 0.85rem;
}

@media (max-width: 540px) {
    .egitim-ders-sure { display: none; }
    .egitim-kategori-metin p { display: none; }
    .egitim-ilerleme-yuzde { font-size: 1.4rem; }
}

/* Hesabım Responsive */
@media (max-width: 1024px) {
    .hesabim-stat-izgara {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .hesabim-icerik {
        grid-template-columns: 1fr;
        padding-top: 20px;
        gap: 20px;
    }

    .hesabim-nav {
        position: static;
    }

    .hesabim-nav-menu {
        flex-direction: row;
        flex-wrap: wrap;
        padding: 8px;
    }

    .hesabim-nav-link {
        flex: 1;
        min-width: 100px;
        justify-content: center;
        padding: 8px 10px;
        font-size: 0.8rem;
    }

    .hesabim-abonelik-karti {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .hesabim-uygulama-karti {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 540px) {
    .hesabim-stat-izgara {
        grid-template-columns: repeat(2, 1fr);
    }

    .hesabim-bolum {
        padding: 20px 16px;
    }
}



/* ============================================================
   KONSOLİDE MOBİL UYUMLULUK İYİLEŞTİRMELERİ
   Breakpoint standardı: 1024 / 768 / 480 / 380
   (Mevcut kuralları ezmeden tamamlayıcı eklemeler)
   ============================================================ */

/* ---------- ≤768px (küçük tablet / yatay telefon) ---------- */
@media (max-width: 768px) {
    .konteyner { padding-left: 18px; padding-right: 18px; }

    /* Mobil header: logo solda, hamburger sağda — temiz hizalama */
    .ust-menu { padding: 14px 0; }
    .menu-hizala { justify-content: space-between; align-items: center; }
    .menu-butonlar { gap: 0; margin-left: auto; }
    .mobil-menu-tetikleyici {
        display: flex;
        margin-left: auto;
        padding: 8px;
        margin-right: -8px; /* ikonu konteyner sağ paddingiyle hizala */
    }

    /* Başvuru sihirbazı: ödeme periyodu toggle */
    .wizard-periyot { width: 100%; }
    .wizard-periyot-btn { flex: 1; justify-content: center; padding: 10px 10px; }

    /* Başvuru: paket kartı ad+fiyat satırı sarması */
    .wizard-paket-ust { flex-wrap: wrap; gap: 4px 8px; }
    .wizard-guven-rozeti { justify-content: flex-start; }

    /* İndirim kodu satırı: alt alta */
    .indirim-kod-satir { flex-direction: column; align-items: stretch; }
    .indirim-kod-satir .buton-stil1 { width: 100%; justify-content: center; }

    /* Paket değiştirme / yönetim modalları */
    .paket-modal-baslik { padding: 18px 20px; }
    .paket-modal-icerik { padding: 20px 18px 22px; }

    /* Durum sorgu / şifre kartları */
    .durum-sorgu-kart { padding: 26px 20px; }

    /* Eğitim merkezi ders satırı */
    .egitim-ders-baslik { padding: 14px 16px; gap: 10px; }
    .egitim-ders-panel > * { margin-left: 16px; margin-right: 16px; }

    /* Karşılaştırma tablosu: dokunmatik kaydırma */
    .karsilastirma-tablosu-kapsayici { -webkit-overflow-scrolling: touch; }
}

/* ---------- ≤480px (telefon) ---------- */
@media (max-width: 480px) {
    .konteyner { padding-left: 16px; padding-right: 16px; }

    /* Hero */
    .kahraman-alani { padding-top: 150px; padding-bottom: 55px; }
    .ana-baslik { font-size: 1.95rem; letter-spacing: -0.5px; }
    .aciklama-metni { font-size: 0.95rem; }
    .kahraman-butonlar { flex-direction: column; }
    .kahraman-butonlar .buton-stil1 { width: 100%; justify-content: center; }

    /* İç sayfa başlık alanları */
    .sayfa-basligi-alani { padding-top: 140px; padding-bottom: 40px; }
    .sayfa-basligi-alani h1 { font-size: 1.75rem; }
    .sayfa-basligi-alani p { font-size: 0.95rem; }

    /* Bölüm başlıkları */
    .bolum-basligi h2 { font-size: 1.55rem; }

    /* Buton dokunma hedefi (min ~44px) */
    .buton-stil1 { padding: 12px 20px; }

    /* Son CTA butonları tam genişlik */
    .son-cta-butonlar { width: 100%; flex-direction: column; }
    .son-cta-btn-altin, .son-cta-btn-beyaz { width: 100%; text-align: center; }

    /* SSS / FAQ */
    .sss-soru { padding: 16px 18px; font-size: 0.92rem; }
    .sss-cevap p { padding: 0 18px 16px; }

    /* Başvuru: seçim göstergesi inceltme */
    .wizard-paket-secim-gostergesi { width: 40px; }
    .wizard-sag-panel { padding: 24px 18px 30px; }
    .wizard-sol-icerik { padding: 24px 20px; }

    /* Testimonial profil */
    .testimonial-kart { padding: 28px 22px; }

    /* Hesabım üst bar */
    .hesabim-ust-kurulus { display: none; }
}

/* ---------- ≤380px (küçük telefon) ---------- */
@media (max-width: 380px) {
    .ana-baslik { font-size: 1.7rem; }
    .sayfa-basligi-alani h1 { font-size: 1.55rem; }
    .stats-sayi { font-size: 1.85rem; }
    .wizard-periyot-btn { font-size: 0.76rem; padding: 9px 6px; }
    .wizard-periyot-rozet { padding: 2px 6px; font-size: 0.62rem; }
    .durum-takip-kodu, .tesekkur-takip-kodu { font-size: 1.4rem; letter-spacing: 2px; }
}

/* Sayfalama (kamu sayfaları — blog vb.) */
.sayfalama { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 28px; }
.sayfalama-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding: 0 12px;
    border: 1px solid var(--renk-gri-sinir); border-radius: 10px;
    font-size: 0.88rem; font-weight: 600; color: var(--renk-govde);
    background: var(--renk-acik); transition: all var(--gecis-hizli);
}
.sayfalama-btn:hover { border-color: var(--renk-birincil); color: var(--renk-birincil); }
.sayfalama-btn.aktif { background: var(--renk-birincil); color: #fff; border-color: var(--renk-birincil); }
.sayfalama-ucnokta { color: var(--renk-govde); padding: 0 2px; }
.sayfalama-bilgi { margin-left: auto; font-size: 0.82rem; color: var(--renk-govde); }
.kategori-sayi { opacity: 0.6; font-size: 0.85em; }
@media (max-width: 540px) { .sayfalama-bilgi { margin-left: 0; width: 100%; } }

/* ====================== BİLDİR — Toast & Onay Modalı ====================== */
.bildir-kapsayici {
    position: fixed; top: 20px; right: 20px; z-index: 4000;
    display: flex; flex-direction: column; gap: 10px;
    max-width: 360px; width: calc(100% - 40px); pointer-events: none;
}
.bildir-toast {
    display: flex; align-items: flex-start; gap: 12px;
    background: #fff; border: 1px solid var(--renk-gri-sinir);
    border-left: 4px solid var(--renk-birincil);
    border-radius: 12px; padding: 14px 16px;
    box-shadow: 0 10px 30px rgba(15,23,42,.15);
    pointer-events: auto; opacity: 0; transform: translateX(20px);
    transition: opacity .3s ease, transform .3s ease;
}
.bildir-toast.acik { opacity: 1; transform: translateX(0); }
.bildir-ikon { flex-shrink: 0; width: 22px; height: 22px; }
.bildir-ikon svg { width: 22px; height: 22px; }
.bildir-mesaj { flex: 1; font-size: 0.9rem; line-height: 1.5; color: var(--renk-koyu); }
.bildir-kapat { background: none; border: none; font-size: 1.3rem; line-height: 1; color: var(--renk-govde); cursor: pointer; padding: 0 2px; flex-shrink: 0; }
.bildir-kapat:hover { color: var(--renk-koyu); }
.bildir-basari { border-left-color: #16a34a; }
.bildir-basari .bildir-ikon { color: #16a34a; }
.bildir-hata { border-left-color: #dc2626; }
.bildir-hata .bildir-ikon { color: #dc2626; }
.bildir-uyari { border-left-color: #d97706; }
.bildir-uyari .bildir-ikon { color: #d97706; }
.bildir-bilgi { border-left-color: var(--renk-birincil); }
.bildir-bilgi .bildir-ikon { color: var(--renk-birincil); }

/* Onay modalı */
.onay-perde {
    position: fixed; inset: 0; z-index: 4100;
    background: rgba(15,23,42,.55); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center; padding: 20px;
    opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
.onay-perde.acik { opacity: 1; visibility: visible; }
.onay-kutu {
    background: #fff; border-radius: 18px; padding: 28px 26px; width: 100%; max-width: 400px;
    text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.3);
    transform: translateY(14px) scale(.97); transition: transform .25s ease;
}
.onay-perde.acik .onay-kutu { transform: translateY(0) scale(1); }
.onay-ikon { width: 56px; height: 56px; border-radius: 50%; background: rgba(245,158,11,.1); color: #d97706; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.onay-ikon svg { width: 28px; height: 28px; }
.onay-mesaj { font-size: 1rem; color: var(--renk-koyu); line-height: 1.6; margin-bottom: 22px; }
.onay-butonlar { display: flex; gap: 12px; justify-content: center; }
.onay-butonlar .buton-stil1 { min-width: 110px; }

@media (max-width: 480px) {
    .bildir-kapsayici { top: auto; bottom: 16px; right: 16px; left: 16px; width: auto; max-width: none; }
    .bildir-toast { transform: translateY(20px); }
    .onay-butonlar { flex-direction: column-reverse; }
    .onay-butonlar .buton-stil1 { width: 100%; }
}

/* ====================== BİLDİRİM ZİLİ (hesabım) ====================== */
.bildirim-zil-sarmal { position: relative; }
.bildirim-zil {
    position: relative; background: none; border: none; cursor: pointer;
    width: 38px; height: 38px; border-radius: 10px; color: var(--renk-govde);
    display: flex; align-items: center; justify-content: center; transition: var(--gecis-hizli);
}
.bildirim-zil:hover { background: var(--renk-arka-plan); color: var(--renk-birincil); }
.bildirim-rozet {
    position: absolute; top: 4px; right: 4px; min-width: 17px; height: 17px;
    background: #dc2626; color: #fff; font-size: 0.65rem; font-weight: 700;
    border-radius: 50px; display: flex; align-items: center; justify-content: center;
    padding: 0 4px; border: 2px solid var(--renk-acik);
}
.bildirim-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-width: calc(100vw - 32px);
    background: #fff; border: 1px solid var(--renk-gri-sinir); border-radius: 14px;
    box-shadow: 0 16px 40px rgba(15,23,42,.18); z-index: 200;
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all .2s ease;
}
.bildirim-zil-sarmal.acik .bildirim-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.bildirim-dropdown-baslik { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--renk-gri-sinir); }
.bildirim-dropdown-baslik strong { font-size: 0.95rem; color: var(--renk-koyu); }
.bildirim-hepsi-oku { background: none; border: none; color: var(--renk-birincil); font-size: 0.78rem; font-weight: 600; cursor: pointer; }
.bildirim-liste { max-height: 380px; overflow-y: auto; }
.bildirim-oge { padding: 12px 16px; border-bottom: 1px solid rgba(0,0,0,.04); border-left: 3px solid transparent; }
.bildirim-oge:last-child { border-bottom: none; }
.bildirim-oge.v-okunmamis { background: rgba(57,92,125,.04); border-left-color: var(--renk-birincil); }
.bildirim-oge.v-okunmamis.bildirim-tip-basari { border-left-color: #16a34a; }
.bildirim-oge.v-okunmamis.bildirim-tip-uyari { border-left-color: #d97706; }
.bildirim-oge-baslik { display: block; font-size: 0.88rem; color: var(--renk-koyu); margin-bottom: 3px; }
.bildirim-oge-mesaj { font-size: 0.82rem; color: var(--renk-govde); line-height: 1.5; margin: 0 0 5px; }
.bildirim-oge-tarih { font-size: 0.72rem; color: var(--renk-govde); opacity: .8; }
.bildirim-bos { padding: 28px 16px; text-align: center; color: var(--renk-govde); font-size: 0.85rem; }
@media (max-width: 480px) { .bildirim-dropdown { position: fixed; top: 64px; right: 16px; left: 16px; width: auto; } }

/* Bildirim öğe sil butonu */
.bildirim-oge { position: relative; }
.bildirim-oge-sil {
    position: absolute; top: 8px; right: 8px;
    background: none; border: none; color: var(--renk-govde);
    font-size: 1.1rem; line-height: 1; cursor: pointer; opacity: 0; padding: 2px 5px; border-radius: 6px;
    transition: opacity .15s ease, background .15s ease;
}
.bildirim-oge:hover .bildirim-oge-sil { opacity: .6; }
.bildirim-oge-sil:hover { opacity: 1 !important; background: rgba(0,0,0,.05); color: #dc2626; }
.bildirim-oge-baslik, .bildirim-oge-mesaj { padding-right: 18px; }

/* ============================================================
   SATIŞ CHATBOTU
   ============================================================ */
#birge-sohbet { position: fixed; bottom: 24px; right: 24px; z-index: 9000; font-family: var(--yazi-govde); }

.sohbet-balon {
    position: relative; width: 60px; height: 60px; border-radius: 50%;
    background: var(--renk-birincil); color: #fff; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px rgba(57,92,125,.4); transition: transform .2s ease, background .2s ease;
}
.sohbet-balon:hover { transform: scale(1.06); }
.sohbet-balon .sohbet-ikon-kapa { display: none; }
.sohbet-balon.acik .sohbet-ikon-ac { display: none; }
.sohbet-balon.acik .sohbet-ikon-kapa { display: block; }
.sohbet-rozet {
    position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px;
    background: #ef4444; color: #fff; border-radius: 50px; font-size: 0.72rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; border: 2px solid #fff;
}

.sohbet-pencere {
    position: absolute; bottom: 76px; right: 0; width: 370px; max-width: calc(100vw - 32px);
    height: 540px; max-height: calc(100vh - 120px);
    background: #fff; border-radius: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.22);
    display: flex; flex-direction: column; overflow: hidden;
    opacity: 0; visibility: hidden; transform: translateY(16px) scale(.98);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.sohbet-pencere.acik { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

.sohbet-baslik {
    background: linear-gradient(135deg, var(--renk-birincil) 0%, #2d4a65 100%); color: #fff;
    padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.sohbet-baslik-sol { display: flex; align-items: center; gap: 10px; }
.sohbet-avatar { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; }
.sohbet-baslik strong { display: block; font-size: 0.95rem; }
.sohbet-durum-nokta { font-size: 0.75rem; opacity: .85; display: flex; align-items: center; gap: 5px; }
.sohbet-durum-nokta::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; }
.sohbet-kapat { background: none; border: none; color: #fff; cursor: pointer; opacity: .8; padding: 4px; }
.sohbet-kapat:hover { opacity: 1; }

.sohbet-akis { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: #f8fafc; }
.sohbet-akis::-webkit-scrollbar { width: 6px; }
.sohbet-akis::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 50px; }

.sohbet-mesaj { display: flex; max-width: 85%; }
.sohbet-mesaj.v-kullanici { align-self: flex-end; }
.sohbet-mesaj.v-asistan { align-self: flex-start; }
.sohbet-baloncuk {
    padding: 10px 14px; border-radius: 14px; font-size: 0.88rem; line-height: 1.55; color: var(--renk-koyu);
    box-shadow: 0 1px 2px rgba(0,0,0,.05); word-wrap: break-word;
}
.v-asistan .sohbet-baloncuk { background: #fff; border-bottom-left-radius: 4px; }
.v-kullanici .sohbet-baloncuk { background: var(--renk-birincil); color: #fff; border-bottom-right-radius: 4px; }
.sohbet-baloncuk strong { font-weight: 700; }

.sohbet-yaziyor .sohbet-baloncuk { display: flex; gap: 4px; padding: 14px; }
.sohbet-yaziyor span { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; animation: sohbetZipla 1.2s infinite; }
.sohbet-yaziyor span:nth-child(2) { animation-delay: .2s; }
.sohbet-yaziyor span:nth-child(3) { animation-delay: .4s; }
@keyframes sohbetZipla { 0%,60%,100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

.sohbet-hizli { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 8px; background: #f8fafc; }
.sohbet-hizli-btn {
    background: #fff; border: 1px solid var(--renk-birincil); color: var(--renk-birincil);
    padding: 6px 12px; border-radius: 50px; font-size: 0.8rem; font-weight: 600; cursor: pointer;
    transition: all .15s ease;
}
.sohbet-hizli-btn:hover { background: var(--renk-birincil); color: #fff; }
.sohbet-hizli-btn.v-vurgu { background: var(--renk-birincil); color: #fff; }
.sohbet-hizli-btn.v-vurgu:hover { opacity: .9; }

.sohbet-giris-form { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--renk-gri-sinir); background: #fff; flex-shrink: 0; }
.sohbet-input { flex: 1; border: 1px solid var(--renk-gri-sinir); border-radius: 50px; padding: 10px 16px; font-size: 0.88rem; outline: none; }
.sohbet-input:focus { border-color: var(--renk-birincil); }
.sohbet-gonder {
    width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--renk-birincil); color: #fff;
    cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.sohbet-gonder:hover { background: #2d4a65; }

/* Lead formu (balon içinde) */
.sohbet-lead-form { display: flex; flex-direction: column; gap: 8px; min-width: 220px; }
.sohbet-lead-baslik { font-size: 0.86rem; font-weight: 600; margin: 0 0 2px; }
.sohbet-lead-form input {
    border: 1px solid var(--renk-gri-sinir); border-radius: 8px; padding: 9px 12px; font-size: 0.85rem; outline: none; width: 100%;
}
.sohbet-lead-form input:focus { border-color: var(--renk-birincil); }
.sohbet-lead-gonder { background: var(--renk-birincil); color: #fff; border: none; border-radius: 8px; padding: 10px; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.sohbet-lead-gonder:hover { background: #2d4a65; }
.sohbet-lead-gonder:disabled { opacity: .6; cursor: default; }
.sohbet-lead-uyari { font-size: 0.78rem; color: #dc2626; }
.sohbet-lead-basarili { font-size: 0.88rem; color: #15803d; font-weight: 600; margin: 0; }

@media (max-width: 480px) {
    #birge-sohbet { bottom: 16px; right: 16px; }
    .sohbet-pencere { width: calc(100vw - 24px); height: calc(100vh - 100px); bottom: 72px; right: -4px; }
}

/* Chatbot: alt "yazıyor…" durum göstergesi */
.sohbet-yazi-durumu {
    align-items: center; gap: 8px; padding: 6px 16px 10px;
    font-size: 0.76rem; color: #94a3b8; font-style: italic; background: #f8fafc; flex-shrink: 0;
}
.syd-noktalar { display: inline-flex; gap: 3px; }
.syd-noktalar span { width: 6px; height: 6px; border-radius: 50%; background: var(--renk-birincil); opacity: .5; animation: sydZipla 1.2s infinite; }
.syd-noktalar span:nth-child(2) { animation-delay: .2s; }
.syd-noktalar span:nth-child(3) { animation-delay: .4s; }
@keyframes sydZipla { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Chatbot: asistan yönlendirme eylem butonları */
.sohbet-eylemler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sohbet-eylem-btn {
    display: inline-block; background: var(--renk-birincil); color: #fff !important; text-decoration: none;
    border: none; padding: 8px 14px; border-radius: 50px; font-size: 0.82rem; font-weight: 700; cursor: pointer;
    transition: background .15s ease;
}
.sohbet-eylem-btn:hover { background: #2d4a65; }
.sohbet-eylem-btn.v-vurgu { background: #16a34a; }
.sohbet-eylem-btn.v-vurgu:hover { background: #15803d; }

/* Yasal metin sayfaları */
.yasal-bolumu { padding: 40px 0 80px; }
.yasal-icerik {
    max-width: 820px; margin: 0 auto; background: #fff; border: 1px solid var(--renk-gri-sinir);
    border-radius: 16px; padding: 40px 44px; box-shadow: var(--golge-1);
    font-size: 0.98rem; line-height: 1.8; color: var(--renk-govde);
}
.yasal-icerik h2 { font-family: var(--yazi-baslik); font-size: 1.25rem; color: var(--renk-koyu); margin: 28px 0 12px; }
.yasal-icerik h3 { font-size: 1.05rem; color: var(--renk-koyu); margin: 22px 0 10px; }
.yasal-icerik p, .yasal-icerik div { margin-bottom: 16px; }
.yasal-icerik ul, .yasal-icerik ol { margin: 0 0 16px 22px; }
.yasal-icerik li { margin-bottom: 8px; }
.yasal-icerik a { color: var(--renk-birincil); font-weight: 600; }
@media (max-width: 600px) { .yasal-icerik { padding: 28px 22px; } }