/**
 * MetisBarkod - Ana Stil Dosyası
 * Renk Paleti ve Genel Stiller
 */

/* ===== CSS Değişkenleri ===== */
:root {
    /* Renkler */
    --renk-ana: #1E3A8A;
    --renk-ikincil: #3B82F6;
    --renk-cta: #22C55E;
    --renk-arka-plan: #F8FAFC;
    --renk-kart: #FFFFFF;
    --renk-metin: #111827;
    --renk-metin-acik: #6B7280;
    --renk-uyari: #F59E0B;
    --renk-hata: #DC2626;
    --renk-basari: #22C55E;
    
    /* Gölgeler */
    --golge-kucuk: 0 1px 3px rgba(0, 0, 0, 0.1);
    --golge-orta: 0 4px 6px rgba(0, 0, 0, 0.1);
    --golge-buyuk: 0 10px 25px rgba(0, 0, 0, 0.15);
    --golge-hover: 0 20px 40px rgba(0, 0, 0, 0.2);
    
    /* Geçişler */
    --gecis: all 0.3s ease;
    --gecis-hizli: all 0.15s ease;
    
    /* Boyutlar */
    --container-max: 1200px;
    --border-radius: 12px;
    --border-radius-kucuk: 8px;
}

/* ===== Reset & Genel ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--renk-metin);
    background-color: var(--renk-arka-plan);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

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

ul, ol {
    list-style: none;
}

button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
}

/* ===== Container ===== */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 20px;
}

/* ===== Üst Bilgi Çubuğu ===== */
.ust-bilgi-cubugu {
    background: var(--renk-ana);
    color: white;
    padding: 10px 0;
    font-size: 14px;
}

.ust-bilgi-icerik {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.ust-bilgi-sol,
.ust-bilgi-sag {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.ust-bilgi-link {
    color: white;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0.9;
}

.ust-bilgi-link:hover {
    opacity: 1;
}

/* ===== Header & Navigasyon ===== */
.ana-header {
    background: white;
    box-shadow: var(--golge-kucuk);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar {
    padding: 15px 0;
}

.navbar-icerik {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.logo {
    display: flex;
    align-items: center;
}

.logo-resim {
    height: 45px;
    width: auto;
}

.ana-menu {
    display: flex;
    gap: 30px;
    align-items: center;
}

.menu-link {
    color: var(--renk-metin);
    font-weight: 500;
    padding: 8px 0;
    position: relative;
}

.menu-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--renk-ikincil);
    transition: var(--gecis);
}

.menu-link:hover::after,
.menu-link.active::after {
    width: 100%;
}

.menu-link:hover,
.menu-link.active {
    color: var(--renk-ikincil);
}

.header-cta {
    display: flex;
    gap: 15px;
    align-items: center;
}

.mobil-menu-btn {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
}

.mobil-menu-btn span {
    width: 25px;
    height: 3px;
    background: var(--renk-ana);
    border-radius: 3px;
    transition: var(--gecis);
}

/* ===== Butonlar ===== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: var(--border-radius-kucuk);
    font-weight: 600;
    font-size: 15px;
    transition: var(--gecis);
    cursor: pointer;
    border: 2px solid transparent;
    white-space: nowrap;
}

.btn-primary {
    background: var(--renk-cta);
    color: white;
}

.btn-primary:hover {
    background: #1ea34e;
    transform: translateY(-2px);
    box-shadow: var(--golge-orta);
}

.btn-demo {
    background: var(--renk-ana);
    color: white;
}

.btn-demo:hover {
    background: #152a6b;
    transform: translateY(-2px);
    box-shadow: var(--golge-orta);
}

.btn-katalog {
    background: transparent;
    color: var(--renk-ana);
    border-color: var(--renk-ana);
}

.btn-katalog:hover {
    background: var(--renk-ana);
    color: white;
}

.btn-outline {
    background: transparent;
    color: var(--renk-ikincil);
    border-color: var(--renk-ikincil);
}

.btn-outline:hover {
    background: var(--renk-ikincil);
    color: white;
}

.btn-lg {
    padding: 13px 26px;
    font-size: 15px;
}

/* ===== Hero Bölümü ===== */
.hero {
    background: #F8FAFC;
    color: var(--renk-metin);
    padding: 80px 0 100px;
    position: relative;
    overflow: hidden;
}

.hero-icerik {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
}

.hero-sol {
    position: relative;
    z-index: 2;
}

.hero-sag {
    position: relative;
    z-index: 1;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: white;
    color: var(--renk-metin);
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 14px;
    margin-bottom: 20px;
    box-shadow: var(--golge-kucuk);
}

.hero-badge i {
    color: var(--renk-ikincil);
}

.hero-baslik {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
    color: var(--renk-metin);
}

.hero-baslik .vurgu {
    color: var(--renk-ikincil);
}

.hero-aciklama {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 25px;
    color: var(--renk-metin-acik);
}

.hero-butonlar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 25px;
}

.hero-guvenlik {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.guvenlik-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.guvenlik-item i {
    color: var(--renk-cta);
}

.hero-dashboard {
    position: relative;
    width: 100%;
    max-width: 550px;
    margin: 0 auto;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard-resim {
    width: 70%;
    border-radius: var(--border-radius);
    position: relative;
    z-index: 1;
}

.floating-card {
    position: absolute;
    background: white;
    color: var(--renk-metin);
    padding: 20px;
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    min-width: 200px;
    max-width: 240px;
    animation: floatCard 4s ease-in-out infinite;
    z-index: 2;
}

.card-1 {
    top: 5%;
    right: 5%;
    animation-delay: 0s;
}

.card-2 {
    top: 40%;
    left: 0;
    animation-delay: 1s;
}

.card-3 {
    bottom: 40%;
    right: 0;
    animation-delay: 2s;
}

.card-4 {
    bottom: 5%;
    left: 5%;
    animation-delay: 1.5s;
}

.card-ikon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #22C55E, #16A34A);
    color: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    font-size: 20px;
}

.card-baslik {
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 15px;
    color: var(--renk-metin);
}

.card-bugun {
    font-size: 12px;
    color: var(--renk-metin-acik);
    margin-bottom: 12px;
}

.card-kod {
    color: var(--renk-metin-acik);
    font-size: 13px;
}

.card-alt {
    font-size: 12px;
    color: var(--renk-metin-acik);
    margin-top: 8px;
}

.card-stats {
    display: flex;
    gap: 20px;
    margin-top: 10px;
}

.stat-label {
    font-size: 12px;
    color: var(--renk-metin-acik);
}

.stat-deger {
    font-size: 20px;
    font-weight: 700;
    color: var(--renk-ana);
}

.stat-artis {
    font-size: 12px;
    color: var(--renk-cta);
}

.card-grafik {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    height: 60px;
    margin: 15px 0;
}

.grafik-cubuk {
    flex: 1;
    background: var(--renk-arka-plan);
    border-radius: 4px;
    transition: var(--gecis);
}

.grafik-cubuk.aktif {
    background: var(--renk-ikincil);
}

.card-ikon-buyuk {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--renk-ikincil), var(--renk-ana));
    color: white;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 12px;
}

.card-tutar {
    font-size: 26px;
    font-weight: 700;
    color: var(--renk-ikincil);
}

.hero-dalga {
    display: none;
}

@keyframes floatCard {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Keşfet Butonu */
.hero-kesfet {
    text-align: center;
    margin-top: 60px;
}

.kesfet-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--renk-metin);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 2px;
    transition: var(--gecis);
    animation: bounce 2s infinite;
}

.kesfet-btn:hover {
    color: var(--renk-ikincil);
    transform: translateY(-5px);
}

.kesfet-btn i {
    font-size: 20px;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* ===== Özellikler Bölümü ===== */
.ozellikler {
    padding: 80px 0;
    margin-top: 0;
    position: relative;
    z-index: 10;
    background: white;
}

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

.ozellik-kart {
    background: white;
    padding: 40px 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--golge-orta);
    text-align: center;
    transition: var(--gecis);
}

.ozellik-kart:hover {
    transform: translateY(-10px);
    box-shadow: var(--golge-buyuk);
}

.ozellik-ikon {
    width: 64px;
    height: 64px;
    background: #F1F5F9;
    color: var(--renk-ana);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 20px;
}

.ozellik-deger {
    font-size: 48px;
    font-weight: 800;
    color: var(--renk-ana);
    margin-bottom: 10px;
}

.ozellik-baslik {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--renk-metin);
}

.ozellik-aciklama {
    color: var(--renk-metin-acik);
    font-size: 14px;
}

/* ===== Neden Biz Bölümü ===== */
.neden-biz {
    padding: 80px 0;
}

.bolum-baslik-merkez {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
}

.bolum-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--renk-ikincil);
    color: white;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 14px;
    margin-bottom: 20px;
}

.bolum-baslik {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 20px;
    color: var(--renk-metin);
}

.bolum-baslik .vurgu {
    color: var(--renk-ikincil);
}

.bolum-aciklama {
    font-size: 18px;
    color: var(--renk-metin-acik);
    line-height: 1.8;
}

.ozellik-kutu {
    background: #F3F4F6;
    color: var(--renk-metin);
    padding: 40px;
    border-radius: 15px;
    margin-bottom: 40px;
    box-shadow: none;
    border: 1px solid #E5E7EB;
}

.ozellik-kutu-baslik {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.ozellik-kutu-baslik i {
    width: 48px;
    height: 48px;
    background: var(--renk-ana);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.ozellik-kutu-aciklama {
    font-size: 14px;
    color: #6B7280;
}

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

.ozellik-item {
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: var(--gecis);
    border: 1px solid #F3F4F6;
}

.ozellik-item:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.ozellik-item-ikon {
    width: 64px;
    height: 64px;
    background: #F3F4F6;
    color: var(--renk-ikincil);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
}

.ozellik-item:nth-child(1) .ozellik-item-ikon {
    background: #EFF6FF;
    color: #3B82F6;
}

.ozellik-item:nth-child(2) .ozellik-item-ikon {
    background: #D1FAE5;
    color: #10B981;
}

.ozellik-item:nth-child(3) .ozellik-item-ikon {
    background: #FEF3C7;
    color: #F59E0B;
}

.ozellik-item:nth-child(4) .ozellik-item-ikon {
    background: #FCE7F3;
    color: #EC4899;
}

.ozellik-item-baslik {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--renk-metin);
}

.ozellik-item-aciklama {
    color: #6B7280;
    line-height: 1.6;
    font-size: 14px;
}

/* ===== Modüller Bölümü ===== */
.moduller-bolum {
    padding: 80px 0;
    background: white;
}

.moduller-kategori {
    padding: 80px 0;
    background: var(--renk-arka-plan);
}

.kategori-baslik {
    font-size: 18px;
    font-weight: 700;
    color: var(--renk-metin);
    margin: 50px 0 25px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.kategori-baslik:first-of-type {
    margin-top: 0;
}

.kategori-baslik i {
    color: var(--renk-ikincil);
    font-size: 14px;
}

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

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

.modul-kart {
    background: var(--renk-arka-plan);
    padding: 30px;
    border-radius: var(--border-radius);
    transition: var(--gecis);
    border: 2px solid transparent;
}

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

.modul-kart-yatay {
    background: white;
    padding: 24px;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    gap: 20px;
    transition: var(--gecis);
    border: 1px solid #E5E7EB;
    cursor: pointer;
}

.modul-kart-yatay:hover {
    box-shadow: var(--golge-orta);
    border-color: var(--renk-ikincil);
    transform: translateX(5px);
}

.modul-ikon {
    width: 50px;
    height: 50px;
    background: var(--renk-ikincil);
    color: white;
    border-radius: var(--border-radius-kucuk);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
}

.modul-ikon-yatay {
    width: 56px;
    height: 56px;
    background: #F1F5F9;
    color: var(--renk-ana);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.modul-icerik-yatay {
    flex: 1;
}

.modul-baslik {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--renk-metin);
}

.modul-baslik-yatay {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--renk-metin);
}

.modul-aciklama {
    color: var(--renk-metin-acik);
    margin-bottom: 20px;
    line-height: 1.6;
}

.modul-aciklama-yatay {
    color: var(--renk-metin-acik);
    font-size: 14px;
    line-height: 1.5;
}

.modul-ok {
    color: var(--renk-metin-acik);
    font-size: 16px;
    flex-shrink: 0;
    transition: var(--gecis);
}

.modul-kart-yatay:hover .modul-ok {
    color: var(--renk-ikincil);
    transform: translateX(3px);
}

.modul-link {
    color: var(--renk-ikincil);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.modul-link:hover {
    gap: 12px;
}

/* ===== CTA Bölümü ===== */
.cta-bolum {
    padding: 60px 0;
    background: linear-gradient(135deg, #3B82F6, #60A5FA);
    color: white;
    border-radius: 24px;
    margin: 0 20px 80px;
}

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

.cta-baslik {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 15px;
}

.cta-aciklama {
    font-size: 18px;
    opacity: 0.95;
}

.cta-sag {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center;
}

.cta-telefon,
.cta-eposta {
    background: white;
    color: var(--renk-ana);
    padding: 15px 30px;
    border-radius: var(--border-radius-kucuk);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: var(--gecis);
}

.cta-telefon:hover,
.cta-eposta:hover {
    transform: translateY(-3px);
    box-shadow: var(--golge-orta);
}

/* ===== Footer ===== */
.footer {
    background: #0f172a;
    color: white;
    padding: 60px 0 0;
}

.footer-ust {
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.footer-logo img {
    height: 40px;
    margin-bottom: 20px;
}

.footer-aciklama {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 20px;
    line-height: 1.6;
}

.footer-iletisim {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-iletisim-item {
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-iletisim-item:hover {
    color: var(--renk-cta);
}

.footer-baslik {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
}

.footer-menu {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-menu a {
    color: rgba(255, 255, 255, 0.7);
    transition: var(--gecis);
}

.footer-menu a:hover {
    color: white;
    padding-left: 5px;
}

.footer-guvenlik {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.guvenlik-badge {
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 12px;
    border-radius: var(--border-radius-kucuk);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.guvenlik-badge i {
    color: var(--renk-cta);
}

.footer-alt {
    padding: 30px 0;
}

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

.telif-hakki {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

.sosyal-medya {
    display: flex;
    gap: 15px;
}

.sosyal-medya a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--gecis);
}

.sosyal-medya a:hover {
    background: var(--renk-ikincil);
    transform: translateY(-3px);
}

/* ===== WhatsApp Float ===== */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: #25D366;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: var(--golge-buyuk);
    z-index: 999;
    transition: var(--gecis);
    animation: pulse 2s infinite;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    50% { box-shadow: 0 0 0 20px rgba(37, 211, 102, 0); }
}

/* ===== Yukarı Çık Butonu ===== */
.yukari-cik-btn {
    position: fixed;
    bottom: 100px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--renk-ana);
    color: white;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: var(--golge-orta);
    z-index: 998;
    transition: var(--gecis);
}

.yukari-cik-btn.goster {
    display: flex;
}

.yukari-cik-btn:hover {
    background: var(--renk-ikincil);
    transform: translateY(-3px);
}

/* ===== Patron Ekranı Bölümü ===== */
.patron-ekrani-bolum {
    padding: 100px 0;
    background: linear-gradient(135deg, #1E3A8A, #3B82F6);
    color: white;
}

.patron-icerik {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.bolum-badge-dark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 14px;
    margin-bottom: 20px;
}

.patron-baslik {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
}

.vurgu-acik {
    color: #60A5FA;
}

.patron-aciklama {
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 30px;
    opacity: 0.95;
}

.patron-liste {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
}

.patron-liste-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
}

.patron-liste-item i {
    color: var(--renk-cta);
    font-size: 20px;
}

.btn-light {
    background: white;
    color: var(--renk-ana);
}

.btn-light:hover {
    background: #F1F5F9;
    transform: translateY(-2px);
}

.patron-dashboard-preview {
    position: relative;
}

.patron-resim {
    width: 100%;
    border-radius: var(--border-radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* ===== Yeni Modüller Bölümü ===== */
.yeni-moduller-bolum {
    padding: 80px 0;
    background: var(--renk-arka-plan);
}

.yeni-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--renk-uyari);
    color: white;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 20px;
}

.yeni-moduller-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-top: 50px;
}

.yeni-modul-kart {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: var(--golge-orta);
    position: relative;
    transition: var(--gecis);
}

.yeni-modul-kart:hover {
    transform: translateY(-5px);
    box-shadow: var(--golge-buyuk);
}

.yeni-badge-kart {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--renk-uyari);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.yeni-badge-success {
    background: var(--renk-cta);
}

.yeni-modul-ikon {
    width: 70px;
    height: 70px;
    background: #FEF3C7;
    color: var(--renk-uyari);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin-bottom: 20px;
}

.yeni-modul-ikon-success {
    background: #D1FAE5;
    color: var(--renk-cta);
}

.yeni-modul-baslik {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--renk-metin);
}

.yeni-modul-aciklama {
    color: var(--renk-metin-acik);
    line-height: 1.7;
    margin-bottom: 25px;
}

.yeni-modul-liste {
    list-style: none;
    margin-bottom: 30px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.yeni-modul-liste li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--renk-metin);
    font-size: 15px;
}

.yeni-modul-liste i {
    font-size: 14px;
    flex-shrink: 0;
}

.yeni-modul-kart:first-child .yeni-modul-liste i {
    color: var(--renk-uyari);
}

.yeni-modul-kart:last-child .yeni-modul-liste i {
    color: var(--renk-cta);
}

.btn-warning {
    background: var(--renk-uyari);
    color: white;
}

.btn-warning:hover {
    background: #D97706;
    transform: translateY(-2px);
}

.btn-success {
    background: var(--renk-cta);
    color: white;
}

.btn-success:hover {
    background: #16A34A;
    transform: translateY(-2px);
}

/* ===== Modüller Sayfası ===== */
.moduller-hero {
    background: white;
    padding: 60px 0 40px;
    border-bottom: 1px solid #F3F4F6;
}

.moduller-hero-icerik {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.moduller-hero-baslik {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 15px;
    color: var(--renk-metin);
}

.moduller-hero-aciklama {
    font-size: 17px;
    color: var(--renk-metin-acik);
    line-height: 1.6;
    margin-bottom: 30px;
}

.moduller-hero-ozellikler {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.hero-ozellik-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--renk-metin);
}

.hero-ozellik-item i {
    color: var(--renk-cta);
    font-size: 18px;
}

.moduller-kategori-bolum {
    padding: 60px 0;
    background: var(--renk-arka-plan);
}

.moduller-kategori-bolum:nth-child(even) {
    background: white;
}

.kategori-baslik-wrapper {
    margin-bottom: 40px;
}

.kategori-baslik-buyuk {
    font-size: 28px;
    font-weight: 800;
    color: var(--renk-metin);
    margin-bottom: 8px;
}

.kategori-aciklama {
    font-size: 15px;
    color: var(--renk-metin-acik);
}

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

.modul-kart-modern {
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 30px;
    transition: var(--gecis);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.modul-kart-modern:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-color: var(--renk-ikincil);
}

.modul-ikon-modern {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.modul-icerik-modern {
    flex: 1;
}

.modul-baslik-modern {
    font-size: 18px;
    font-weight: 700;
    color: var(--renk-metin);
    margin-bottom: 8px;
    line-height: 1.3;
}

.modul-aciklama-modern {
    font-size: 14px;
    color: var(--renk-metin-acik);
    line-height: 1.5;
    margin: 0;
}

.ana-moduller-bolum {
    padding: 80px 0;
    background: white;
}

.bolum-baslik-sol {
    margin-bottom: 50px;
}

.bolum-baslik-sol .bolum-baslik {
    font-size: 36px;
    margin-bottom: 10px;
}

.bolum-baslik-sol .bolum-aciklama {
    font-size: 16px;
    color: var(--renk-metin-acik);
}

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

.moduller-grid-4-col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.modul-kart-buyuk {
    background: white;
    padding: 40px 30px;
    border-radius: 20px;
    border: 1px solid #F3F4F6;
    transition: var(--gecis);
    text-align: center;
}

.modul-kart-buyuk:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
    border-color: var(--renk-ikincil);
}

.modul-ikon-buyuk {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin: 0 auto 20px;
}

.modul-kart-buyuk .modul-baslik {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--renk-metin);
}

.modul-kart-buyuk .modul-aciklama {
    font-size: 14px;
    color: var(--renk-metin-acik);
    line-height: 1.6;
}

.kategori-moduller-bolum {
    padding: 80px 0;
    background: var(--renk-arka-plan);
}

.entegrasyon-bolum {
    padding: 100px 0;
    background: linear-gradient(135deg, #1E3A8A, #3B82F6);
    color: white;
}

.entegrasyon-icerik {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.entegrasyon-baslik {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
}

.entegrasyon-aciklama {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 30px;
    opacity: 0.95;
}

.entegrasyon-liste {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.entegrasyon-liste li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
}

.entegrasyon-liste i {
    color: var(--renk-cta);
    font-size: 20px;
    flex-shrink: 0;
}

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

.entegrasyon-kart {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 30px 20px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
    transition: var(--gecis);
}

.entegrasyon-kart:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-5px);
}

.entegrasyon-kart i {
    font-size: 32px;
    margin-bottom: 12px;
    display: block;
    color: #60A5FA;
}

.entegrasyon-kart span {
    font-size: 14px;
    font-weight: 600;
}

.moduller-cta-bolum {
    padding: 100px 0;
    background: white;
    text-align: center;
}

.moduller-cta-icerik {
    max-width: 700px;
    margin: 0 auto;
}

.moduller-cta-icerik .cta-baslik {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 20px;
    color: var(--renk-metin);
}

.moduller-cta-icerik .cta-aciklama {
    font-size: 18px;
    color: var(--renk-metin-acik);
    margin-bottom: 30px;
    line-height: 1.7;
}

.cta-butonlar {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.btn-outline-light {
    background: transparent;
    color: var(--renk-metin);
    border: 2px solid var(--renk-metin);
}

.btn-outline-light:hover {
    background: var(--renk-metin);
    color: white;
}

/* ===== Fiyatlandırma Sayfası ===== */
.fiyatlandirma-hero {
    background: var(--renk-arka-plan);
    padding: 100px 0 60px;
    text-align: center;
}

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

.fiyatlandirma-hero-baslik {
    font-size: 56px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
    color: var(--renk-metin);
}

.fiyatlandirma-hero-aciklama {
    font-size: 18px;
    color: var(--renk-metin-acik);
    line-height: 1.7;
}

.fiyatlandirma-kartlar-bolum {
    padding: 80px 0;
    background: white;
}

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

.fiyat-kart {
    background: white;
    border: 2px solid #E5E7EB;
    border-radius: 20px;
    padding: 40px 30px;
    position: relative;
    transition: var(--gecis);
}

.fiyat-kart:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.fiyat-kart-populer {
    border-color: #10B981;
    border-width: 3px;
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.2);
}

.populer-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: #10B981;
    color: white;
    padding: 6px 20px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

.fiyat-kart-ikon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin: 0 auto 20px;
}

.fiyat-kart-baslik {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
    text-align: center;
    color: var(--renk-metin);
}

.fiyat-kart-alt-baslik {
    font-size: 14px;
    color: var(--renk-metin-acik);
    text-align: center;
    margin-bottom: 15px;
}

.fiyat-kart-aciklama {
    font-size: 14px;
    color: var(--renk-metin-acik);
    text-align: center;
    margin-bottom: 25px;
    line-height: 1.6;
}

.fiyat-bilgi {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #E5E7EB;
}

.fiyat-text {
    font-size: 14px;
    color: var(--renk-metin-acik);
}

.fiyat-link {
    color: var(--renk-ikincil);
    font-weight: 600;
    text-decoration: underline;
}

.fiyat-link:hover {
    color: var(--renk-ana);
}

.fiyat-ozellikler {
    list-style: none;
    margin-bottom: 30px;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 10px;
}

.fiyat-ozellikler::-webkit-scrollbar {
    width: 6px;
}

.fiyat-ozellikler::-webkit-scrollbar-track {
    background: #F3F4F6;
    border-radius: 10px;
}

.fiyat-ozellikler::-webkit-scrollbar-thumb {
    background: #D1D5DB;
    border-radius: 10px;
}

.fiyat-ozellikler li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    font-size: 14px;
    color: var(--renk-metin);
}

.fiyat-ozellikler i {
    color: var(--renk-cta);
    font-size: 16px;
    flex-shrink: 0;
}

.btn-block {
    width: 100%;
    justify-content: center;
}

.kurumsal-paket-bolum {
    padding: 100px 0;
    background: linear-gradient(135deg, #1E3A8A, #3B82F6);
    color: white;
}

.kurumsal-badge-container {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 20px;
}

.kurumsal-badge {
    background: #F59E0B;
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

.kurumsal-badge-alt {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.kurumsal-baslik {
    font-size: 42px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 20px;
}

.kurumsal-aciklama {
    font-size: 18px;
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
    opacity: 0.95;
    line-height: 1.7;
}

.pazar-yeri-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-bottom: 50px;
}

.pazar-yeri-kart {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 30px 20px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
    transition: var(--gecis);
}

.pazar-yeri-kart:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-5px);
}

.pazar-yeri-kart i {
    font-size: 32px;
    color: #60A5FA;
    margin-bottom: 15px;
}

.pazar-yeri-kart h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

.pazar-yeri-kart p {
    font-size: 14px;
    opacity: 0.9;
    line-height: 1.5;
}

.desteklenen-pazaryerleri {
    text-align: center;
}

.desteklenen-baslik {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
}

.pazar-yeri-badges {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.pazar-badge {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    padding: 10px 24px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.karsilastirma-bolum {
    padding: 80px 0;
    background: var(--renk-arka-plan);
}

.karsilastirma-tablo-wrapper {
    overflow-x: auto;
    margin-top: 50px;
}

.karsilastirma-tablo {
    width: 100%;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    border-collapse: collapse;
}

.karsilastirma-tablo thead {
    background: var(--renk-ana);
    color: white;
}

.karsilastirma-tablo th {
    padding: 20px;
    text-align: left;
    font-weight: 700;
    font-size: 16px;
}

.karsilastirma-tablo .ozellik-sutun {
    width: 40%;
}

.karsilastirma-tablo .paket-sutun {
    width: 20%;
    text-align: center;
}

.karsilastirma-tablo .paket-populer {
    background: #10B981;
}

.karsilastirma-tablo tbody tr {
    border-bottom: 1px solid #E5E7EB;
}

.karsilastirma-tablo tbody tr:hover {
    background: #F9FAFB;
}

.karsilastirma-tablo td {
    padding: 16px 20px;
    font-size: 14px;
}

.karsilastirma-tablo .kategori-satir {
    background: #F3F4F6;
}

.karsilastirma-tablo .kategori-satir td {
    font-weight: 700;
    color: var(--renk-metin);
    padding: 12px 20px;
}

.check-icon {
    color: var(--renk-cta);
    font-size: 20px;
}

.minus-icon {
    color: #D1D5DB;
    font-size: 20px;
}

.sss-bolum {
    padding: 80px 0;
    background: white;
}

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

.sss-item {
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    margin-bottom: 15px;
    overflow: hidden;
    transition: var(--gecis);
}

.sss-item:hover {
    box-shadow: var(--golge-kucuk);
}

.sss-soru {
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.sss-soru h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--renk-metin);
    margin: 0;
}

.sss-soru i {
    color: var(--renk-ikincil);
    transition: var(--gecis);
}

.sss-item.aktif .sss-soru i {
    transform: rotate(180deg);
}

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

.sss-item.aktif .sss-cevap {
    max-height: 500px;
}

.sss-cevap p {
    padding: 0 25px 20px;
    color: var(--renk-metin-acik);
    line-height: 1.7;
    margin: 0;
}

.final-cta-bolum {
    padding: 100px 0;
    background: linear-gradient(135deg, #1E3A8A, #3B82F6);
    color: white;
    text-align: center;
}

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

.final-cta-baslik {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 20px;
}

.final-cta-aciklama {
    font-size: 18px;
    margin-bottom: 30px;
    opacity: 0.95;
    line-height: 1.7;
}

.final-cta-butonlar {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.final-cta-ozellikler {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.final-ozellik {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
}

.final-ozellik i {
    color: var(--renk-cta);
    font-size: 20px;
}

/* ===== Referanslar Sayfası ===== */
.referanslar-hero {
    background: var(--renk-arka-plan);
    padding: 100px 0 80px;
    text-align: center;
}

.referanslar-hero-icerik {
    max-width: 800px;
    margin: 0 auto 60px;
}

.referanslar-hero-baslik {
    font-size: 56px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
    color: var(--renk-metin);
}

.referanslar-hero-aciklama {
    font-size: 18px;
    color: var(--renk-metin-acik);
    line-height: 1.7;
}

.referans-istatistikler {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.istatistik-item {
    text-align: center;
}

.istatistik-deger {
    font-size: 48px;
    font-weight: 800;
    color: var(--renk-ikincil);
    margin-bottom: 10px;
}

.istatistik-label {
    font-size: 16px;
    color: var(--renk-metin-acik);
}

.musterilerimiz-bolum {
    padding: 80px 0;
    background: white;
}

.musteriler-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 25px;
    margin-top: 50px;
}

.musteri-kart {
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 30px 20px;
    text-align: center;
    transition: var(--gecis);
}

.musteri-kart:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
    border-color: var(--renk-ikincil);
}

.musteri-logo {
    width: 80px;
    height: 80px;
    background: #F3F4F6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 32px;
    color: var(--renk-ikincil);
}

.musteri-isim {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--renk-metin);
}

.musteri-sektor {
    font-size: 13px;
    color: var(--renk-metin-acik);
}

.yorumlar-bolum {
    padding: 80px 0;
    background: var(--renk-arka-plan);
}

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

.yorum-kart {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: var(--golge-kucuk);
    transition: var(--gecis);
}

.yorum-kart:hover {
    box-shadow: var(--golge-orta);
    transform: translateY(-5px);
}

.yorum-ikon {
    width: 60px;
    height: 60px;
    background: #EFF6FF;
    color: var(--renk-ikincil);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 25px;
}

.yorum-metin {
    font-size: 15px;
    line-height: 1.7;
    color: var(--renk-metin);
    margin-bottom: 30px;
}

.yorum-sahibi {
    display: flex;
    align-items: center;
    gap: 15px;
}

.yorum-avatar {
    width: 50px;
    height: 50px;
    background: var(--renk-ikincil);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
}

.yorum-bilgi {
    flex: 1;
}

.yorum-isim {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--renk-metin);
}

.yorum-unvan {
    font-size: 13px;
    color: var(--renk-metin-acik);
    margin-bottom: 8px;
}

.yorum-yildiz {
    display: flex;
    gap: 4px;
}

.yorum-yildiz i {
    color: #F59E0B;
    font-size: 14px;
}

.sektorler-bolum {
    padding: 100px 0;
    background: linear-gradient(135deg, #1E3A8A, #3B82F6);
    color: white;
    text-align: center;
}

.sektorler-icerik {
    max-width: 900px;
    margin: 0 auto;
}

.sektorler-baslik {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 20px;
}

.sektorler-aciklama {
    font-size: 18px;
    margin-bottom: 40px;
    opacity: 0.95;
}

.sektor-badges {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.sektor-badge {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    padding: 12px 28px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: var(--gecis);
}

.sektor-badge:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.referans-cta-bolum {
    padding: 100px 0;
    background: white;
    text-align: center;
}

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

/* ===== Modül Detay Sayfası ===== */
.breadcrumb-bolum {
    background: var(--renk-arka-plan);
    padding: 20px 0;
    border-bottom: 1px solid #E5E7EB;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--renk-metin-acik);
}

.breadcrumb a {
    color: var(--renk-metin-acik);
    transition: var(--gecis);
}

.breadcrumb a:hover {
    color: var(--renk-ikincil);
}

.breadcrumb .ayrac {
    color: #D1D5DB;
}

.breadcrumb .aktif {
    color: var(--renk-metin);
    font-weight: 600;
}

.modul-detay-hero {
    background: linear-gradient(135deg, #F8FAFC 0%, #EFF6FF 100%);
    padding: 80px 0;
}

.modul-detay-hero .hero-icerik {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: center;
}

.modul-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}

.modul-badge .ikon {
    flex-shrink: 0;
}

.modul-detay-hero .hero-baslik {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
    color: var(--renk-metin);
}

.modul-detay-hero .hero-aciklama {
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 30px;
    color: var(--renk-metin-acik);
}

.hero-istatistikler {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 30px;
}

.istatistik {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--renk-metin-acik);
}

.istatistik .ikon {
    color: var(--renk-ikincil);
    flex-shrink: 0;
}

.hero-resim {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.hero-resim img {
    width: 100%;
    height: auto;
    display: block;
}

.modul-aciklama {
    padding: 80px 0;
    background: white;
}

.aciklama-icerik {
    max-width: 900px;
    margin: 0 auto;
}

.aciklama-icerik h2 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 20px;
    color: var(--renk-metin);
}

.aciklama-icerik h3 {
    font-size: 24px;
    font-weight: 700;
    margin: 40px 0 20px;
    color: var(--renk-metin);
}

.aciklama-icerik p {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 20px;
    color: var(--renk-metin-acik);
}

.aciklama-icerik ul {
    list-style: none;
    margin: 20px 0;
    padding: 0;
}

.aciklama-icerik ul li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--renk-metin);
}

.aciklama-icerik ul li::before {
    content: "✓";
    color: var(--renk-cta);
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
}

.modul-ozellikler {
    padding: 80px 0;
    background: var(--renk-arka-plan);
}

.modul-ozellikler .ozellikler-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.modul-ozellikler .ozellik-kart {
    background: white;
    padding: 35px 30px;
    border-radius: 16px;
    border: 1px solid #E5E7EB;
    transition: var(--gecis);
    text-align: left;
}

.modul-ozellikler .ozellik-kart:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-color: var(--renk-ikincil);
}

.modul-ozellikler .ozellik-ikon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.modul-ozellikler .ozellik-kart h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--renk-metin);
}

.modul-ozellikler .ozellik-kart p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--renk-metin-acik);
    margin: 0;
}

.modul-galeri {
    padding: 80px 0;
    background: white;
}

.galeri-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.galeri-item {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--golge-orta);
    transition: var(--gecis);
    cursor: pointer;
}

.galeri-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--golge-buyuk);
}

.galeri-item img {
    width: 100%;
    height: auto;
    display: block;
}

.galeri-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    padding: 30px 25px 20px;
    color: white;
    opacity: 0;
    transition: var(--gecis);
}

.galeri-item:hover .galeri-overlay {
    opacity: 1;
}

.galeri-overlay h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

.galeri-overlay p {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    opacity: 0.9;
}

.modul-sss {
    padding: 80px 0;
    background: var(--renk-arka-plan);
}

.modul-sss .sss-liste {
    max-width: 900px;
    margin: 50px auto 0;
}

.modul-sss .sss-item {
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    margin-bottom: 15px;
    overflow: hidden;
    transition: var(--gecis);
}

.modul-sss .sss-item:hover {
    box-shadow: var(--golge-kucuk);
}

.modul-sss .sss-item.active {
    border-color: var(--renk-ikincil);
}

.modul-sss .sss-soru {
    width: 100%;
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    background: transparent;
    border: none;
    text-align: left;
}

.modul-sss .sss-soru span {
    font-size: 16px;
    font-weight: 600;
    color: var(--renk-metin);
    flex: 1;
}

.sss-ikon {
    color: var(--renk-ikincil);
    transition: var(--gecis);
    flex-shrink: 0;
}

.modul-sss .sss-item.active .sss-ikon {
    transform: rotate(180deg);
}

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

.modul-sss .sss-item.active .sss-cevap {
    max-height: 500px;
}

.modul-sss .sss-cevap p {
    padding: 0 25px 20px;
    color: var(--renk-metin-acik);
    line-height: 1.7;
    margin: 0;
    font-size: 15px;
}

.ilgili-moduller {
    padding: 80px 0;
    background: white;
}

.ilgili-moduller .moduller-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.ilgili-moduller .modul-kart {
    background: var(--renk-arka-plan);
    padding: 35px 30px;
    border-radius: 16px;
    border: 1px solid #E5E7EB;
    transition: var(--gecis);
    display: block;
}

.ilgili-moduller .modul-kart:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-color: var(--renk-ikincil);
}

.ilgili-moduller .modul-ikon {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.ilgili-moduller .modul-kart h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--renk-metin);
}

.ilgili-moduller .modul-kart p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--renk-metin-acik);
    margin-bottom: 15px;
}

.ilgili-moduller .modul-link {
    color: var(--renk-ikincil);
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.modul-cta {
    padding: 80px 0;
    background: linear-gradient(135deg, #1E3A8A, #3B82F6);
    color: white;
}

.modul-cta .cta-icerik {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.modul-cta h2 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 20px;
}

.modul-cta p {
    font-size: 18px;
    margin-bottom: 30px;
    opacity: 0.95;
    line-height: 1.7;
}

.modul-cta .cta-butonlar {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.modul-cta .btn {
    padding: 15px 30px;
    font-size: 16px;
}

.modul-cta .btn-primary {
    background: white;
    color: var(--renk-ana);
}

.modul-cta .btn-primary:hover {
    background: #F1F5F9;
}

.modul-cta .btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.modul-cta .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}

.btn-secondary {
    background: transparent;
    color: var(--renk-ikincil);
    border: 2px solid var(--renk-ikincil);
}

.btn-secondary:hover {
    background: var(--renk-ikincil);
    color: white;
}

/* ===== Blog Sayfası ===== */
.blog-hero {
    background: linear-gradient(135deg, #F8FAFC 0%, #EFF6FF 100%);
    padding: 80px 0 60px;
    text-align: center;
}

.blog-hero-icerik {
    max-width: 800px;
    margin: 0 auto 50px;
}

.blog-hero-baslik {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
    color: var(--renk-metin);
}

.blog-hero-aciklama {
    font-size: 18px;
    color: var(--renk-metin-acik);
    line-height: 1.7;
}

.kategori-filtreler {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.filtre-baslik {
    font-weight: 600;
    color: var(--renk-metin);
    font-size: 16px;
}

.kategori-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.kategori-filtre-btn {
    background: white;
    color: var(--renk-metin);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #E5E7EB;
    transition: var(--gecis);
    cursor: pointer;
}

.kategori-filtre-btn:hover,
.kategori-filtre-btn.active {
    background: var(--renk-ikincil);
    color: white;
    border-color: var(--renk-ikincil);
    transform: translateY(-2px);
}

.blog-yazilar-bolum {
    padding: 80px 0;
    background: white;
}

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

.blog-kart {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #E5E7EB;
    transition: var(--gecis);
    display: flex;
    flex-direction: column;
}

.blog-kart:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-color: var(--renk-ikincil);
}

.blog-kart-ust {
    padding: 40px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.blog-ikon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.blog-okuma-suresi {
    position: absolute;
    top: 20px;
    right: 20px;
    background: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--renk-metin-acik);
    box-shadow: var(--golge-kucuk);
}

.blog-kart-icerik {
    padding: 0 30px 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.blog-kategori {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    display: inline-block;
}

.blog-baslik {
    margin-bottom: 15px;
}

.blog-baslik a {
    font-size: 20px;
    font-weight: 700;
    color: var(--renk-metin);
    line-height: 1.4;
    transition: var(--gecis);
}

.blog-baslik a:hover {
    color: var(--renk-ikincil);
}

.blog-ozet {
    font-size: 14px;
    line-height: 1.6;
    color: var(--renk-metin-acik);
    margin-bottom: 20px;
    flex: 1;
}

.blog-etiketler {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.blog-etiket {
    background: var(--renk-arka-plan);
    color: var(--renk-metin-acik);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.blog-devam-link {
    color: var(--renk-ikincil);
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    transition: var(--gecis);
}

.blog-devam-link:hover {
    gap: 12px;
}

.blog-tarih {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--renk-metin-acik);
    padding-top: 15px;
    border-top: 1px solid #F3F4F6;
}

.blog-cta-bolum {
    padding: 100px 0;
    background: linear-gradient(135deg, #1E3A8A, #3B82F6);
    color: white;
    text-align: center;
}

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

.blog-cta-icerik .cta-baslik {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 20px;
    color: white;
}

.blog-cta-icerik .cta-aciklama {
    font-size: 18px;
    margin-bottom: 30px;
    opacity: 0.95;
    line-height: 1.7;
}

.blog-cta-icerik .cta-butonlar {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.blog-cta-icerik .btn-primary {
    background: white;
    color: var(--renk-ana);
}

.blog-cta-icerik .btn-primary:hover {
    background: #F1F5F9;
}

/* ===== Blog Detay Sayfası ===== */
.blog-detay-sayfa {
    padding: 80px 0;
    background: white;
}

.blog-detay-icerik {
    max-width: 900px;
    margin: 0 auto;
}

.blog-kategori-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.blog-detay-baslik {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 25px;
    color: var(--renk-metin);
}

.blog-meta {
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
    padding-bottom: 25px;
    margin-bottom: 40px;
    border-bottom: 2px solid #F3F4F6;
}

.blog-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--renk-metin-acik);
}

.blog-meta-item i {
    color: var(--renk-ikincil);
}

.blog-gorsel {
    width: 100%;
    border-radius: var(--border-radius);
    margin-bottom: 40px;
    box-shadow: var(--golge-orta);
}

.blog-detay-yazi {
    font-size: 17px;
    line-height: 1.8;
    color: var(--renk-metin);
    margin-bottom: 40px;
}

.blog-detay-yazi h2 {
    font-size: 32px;
    font-weight: 700;
    margin: 40px 0 20px;
    color: var(--renk-metin);
}

.blog-detay-yazi h3 {
    font-size: 24px;
    font-weight: 700;
    margin: 30px 0 15px;
    color: var(--renk-metin);
}

.blog-detay-yazi p {
    margin-bottom: 20px;
}

.blog-detay-yazi ul,
.blog-detay-yazi ol {
    margin: 20px 0;
    padding-left: 30px;
}

.blog-detay-yazi ul li,
.blog-detay-yazi ol li {
    margin-bottom: 10px;
    line-height: 1.7;
}

.blog-detay-yazi blockquote {
    background: #F8FAFC;
    border-left: 4px solid var(--renk-ikincil);
    padding: 20px 25px;
    margin: 30px 0;
    font-style: italic;
    color: var(--renk-metin-acik);
}

.blog-detay-etiketler {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 30px 0;
    border-top: 1px solid #F3F4F6;
    border-bottom: 1px solid #F3F4F6;
    margin-bottom: 40px;
}

.blog-detay-etiket {
    background: var(--renk-arka-plan);
    color: var(--renk-metin);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    transition: var(--gecis);
}

.blog-detay-etiket:hover {
    background: var(--renk-ikincil);
    color: white;
}

.paylas-bolum {
    margin-bottom: 60px;
}

.paylas-bolum h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--renk-metin);
}

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

.paylas-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--border-radius-kucuk);
    font-size: 14px;
    font-weight: 600;
    color: white;
    transition: var(--gecis);
}

.paylas-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--golge-orta);
}

.paylas-btn.facebook {
    background: #1877F2;
}

.paylas-btn.twitter {
    background: #1DA1F2;
}

.paylas-btn.linkedin {
    background: #0A66C2;
}

.paylas-btn.whatsapp {
    background: #25D366;
}

.ilgili-yazilar-bolum {
    padding: 80px 0;
    background: var(--renk-arka-plan);
}

.ilgili-yazilar-bolum .blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}

/* ===== Yardımcı Sınıflar ===== */
.text-center {
    text-align: center;
}

.mt-5 {
    margin-top: 50px;
}

.mb-5 {
    margin-bottom: 50px;
}

.ikon {
    flex-shrink: 0;
}


/* ===== KVKK ve Yasal Sayfalar ===== */
.sayfa-icerik {
    padding: 80px 0;
    background: #F8FAFC;
}

.icerik-wrapper {
    max-width: 900px;
    margin: 0 auto;
    background: white;
    padding: 60px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.icerik-wrapper h1 {
    font-size: 36px;
    font-weight: 800;
    color: var(--renk-metin);
    margin-bottom: 10px;
}

.guncelleme-tarihi {
    color: var(--renk-metin-acik);
    font-size: 14px;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 2px solid #E5E7EB;
}

.icerik-bolum {
    margin-bottom: 40px;
}

.icerik-bolum h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--renk-metin);
    margin-bottom: 15px;
}

.icerik-bolum h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--renk-metin);
    margin-bottom: 12px;
    margin-top: 20px;
}

.icerik-bolum p {
    color: var(--renk-metin-acik);
    line-height: 1.8;
    margin-bottom: 15px;
}

.icerik-bolum ul {
    list-style: none;
    padding-left: 0;
    margin: 20px 0;
}

.icerik-bolum ul li {
    color: var(--renk-metin-acik);
    line-height: 1.8;
    padding-left: 30px;
    position: relative;
    margin-bottom: 10px;
}

.icerik-bolum ul li:before {
    content: "•";
    color: var(--renk-ikincil);
    font-weight: bold;
    font-size: 20px;
    position: absolute;
    left: 10px;
}

.icerik-bolum ol {
    padding-left: 30px;
    margin: 20px 0;
}

.icerik-bolum ol li {
    color: var(--renk-metin-acik);
    line-height: 1.8;
    margin-bottom: 10px;
}

.icerik-bolum a {
    color: var(--renk-ikincil);
    text-decoration: none;
    font-weight: 600;
}

.icerik-bolum a:hover {
    text-decoration: underline;
}

.iletisim-bilgileri {
    background: #F8FAFC;
    padding: 20px;
    border-radius: 12px;
    margin-top: 20px;
}

.iletisim-bilgileri p {
    margin-bottom: 10px;
}

.yasal-tarih {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 2px solid #E5E7EB;
    color: var(--renk-metin-acik);
    font-size: 14px;
}

/* Çerez Tablosu */
.cerez-tablosu {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.cerez-tablosu thead {
    background: var(--renk-ikincil);
    color: white;
}

.cerez-tablosu th {
    padding: 15px;
    text-align: left;
    font-weight: 600;
}

.cerez-tablosu td {
    padding: 15px;
    border-bottom: 1px solid #E5E7EB;
    color: var(--renk-metin-acik);
}

.cerez-tablosu tbody tr:hover {
    background: #F8FAFC;
}

/* ===== Yasal Sayfalar Hero ===== */
.yasal-hero {
    background: linear-gradient(135deg, var(--renk-ana) 0%, var(--renk-ikincil) 100%);
    padding: 80px 0 60px;
    text-align: center;
    color: white;
}

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

.yasal-hero-baslik {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 15px;
}

.yasal-hero-aciklama {
    font-size: 18px;
    opacity: 0.9;
}

/* ===== SSS Sayfası ===== */
.sss-hero {
    background: linear-gradient(135deg, var(--renk-ana) 0%, var(--renk-ikincil) 100%);
    padding: 100px 0;
    text-align: center;
    color: white;
}

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

.sss-hero-baslik {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 20px;
}

.sss-hero-baslik .vurgu {
    color: var(--renk-cta);
}

.sss-hero-aciklama {
    font-size: 18px;
    line-height: 1.6;
    opacity: 0.95;
}

.sss-bolum {
    padding: 80px 0;
    background: #F8FAFC;
}

.sss-kategori {
    margin-bottom: 60px;
}

.sss-kategori-baslik {
    font-size: 32px;
    font-weight: 700;
    color: var(--renk-metin);
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 3px solid var(--renk-ikincil);
}

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

.sss-item {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: var(--gecis);
}

.sss-item:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.sss-soru {
    width: 100%;
    padding: 20px 25px;
    background: white;
    border: none;
    text-align: left;
    font-size: 18px;
    font-weight: 600;
    color: var(--renk-metin);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--gecis);
}

.sss-soru:hover {
    background: #F8FAFC;
}

.sss-ikon {
    flex-shrink: 0;
    transition: transform 0.3s ease;
    color: var(--renk-ikincil);
}

.sss-item.active .sss-ikon {
    transform: rotate(180deg);
}

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

.sss-item.active .sss-cevap {
    max-height: 500px;
}

.sss-cevap p {
    padding: 0 25px 25px;
    color: var(--renk-metin-acik);
    line-height: 1.8;
}

.sss-cta-bolum {
    background: linear-gradient(135deg, var(--renk-ana) 0%, var(--renk-ikincil) 100%);
    padding: 80px 0;
    text-align: center;
    color: white;
}

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

.cta-baslik {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 20px;
}

.vurgu-acik {
    color: var(--renk-cta);
}

.cta-aciklama {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 30px;
    opacity: 0.95;
}

.cta-butonlar {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ===== Hakkımızda Sayfası ===== */
.hakkimizda-hero {
    background: linear-gradient(135deg, var(--renk-ana) 0%, var(--renk-ikincil) 100%);
    padding: 100px 0;
    text-align: center;
    color: white;
}

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

.hakkimizda-hero-baslik {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 20px;
}

.vurgu {
    color: var(--renk-cta);
}

.hakkimizda-hero-aciklama {
    font-size: 18px;
    line-height: 1.6;
    opacity: 0.95;
}

.misyon-vizyon-bolum {
    padding: 80px 0;
    background: white;
}

.misyon-vizyon-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.misyon-kart, .vizyon-kart {
    background: #F8FAFC;
    padding: 40px;
    border-radius: 16px;
    border: 2px solid #E5E7EB;
    transition: var(--gecis);
}

.misyon-kart:hover, .vizyon-kart:hover {
    border-color: var(--renk-ikincil);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.kart-ikon {
    width: 60px;
    height: 60px;
    background: var(--renk-ikincil);
    color: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 20px;
}

.misyon-kart h2, .vizyon-kart h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--renk-metin);
    margin-bottom: 15px;
}

.misyon-kart p, .vizyon-kart p {
    color: var(--renk-metin-acik);
    line-height: 1.8;
}

.degerler-bolum {
    padding: 80px 0;
    background: #F8FAFC;
}

.bolum-baslik-merkez {
    text-align: center;
    margin-bottom: 50px;
}

.bolum-baslik-merkez h2 {
    font-size: 36px;
    font-weight: 800;
    color: var(--renk-metin);
    margin-bottom: 15px;
}

.bolum-baslik-merkez p {
    font-size: 18px;
    color: var(--renk-metin-acik);
}

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

.deger-kart {
    background: white;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: var(--gecis);
}

.deger-kart:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.deger-ikon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--renk-ikincil) 0%, var(--renk-ana) 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin: 0 auto 20px;
}

.deger-kart h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--renk-metin);
    margin-bottom: 10px;
}

.deger-kart p {
    color: var(--renk-metin-acik);
    line-height: 1.6;
    font-size: 14px;
}

.istatistikler-bolum {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--renk-ana) 0%, var(--renk-ikincil) 100%);
    color: white;
}

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

.istatistik-kart {
    text-align: center;
}

.istatistik-sayi {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 10px;
    color: var(--renk-cta);
}

.istatistik-baslik {
    font-size: 18px;
    opacity: 0.95;
}

.hakkimizda-cta-bolum {
    padding: 80px 0;
    background: white;
    text-align: center;
}

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

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .degerler-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .istatistikler-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .icerik-wrapper {
        padding: 30px 20px;
    }
    
    .icerik-wrapper h1 {
        font-size: 28px;
    }
    
    .icerik-bolum h2 {
        font-size: 20px;
    }
    
    .yasal-hero-baslik,
    .sss-hero-baslik,
    .hakkimizda-hero-baslik {
        font-size: 32px;
    }
    
    .misyon-vizyon-grid {
        grid-template-columns: 1fr;
    }
    
    .degerler-grid {
        grid-template-columns: 1fr;
    }
    
    .istatistikler-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .cta-butonlar {
        flex-direction: column;
    }
    
    .cerez-tablosu {
        font-size: 14px;
    }
    
    .cerez-tablosu th,
    .cerez-tablosu td {
        padding: 10px;
    }
}