/* ============================================================
   meslekAI — Ana Public CSS
   ============================================================ */

:root {
    --mavi: #1e63ed;
    --mavi-koyu: #1d4ed8;
    --mavi-acik: #eff6ff;
    --mor: #7e22ce;
    --mor-koyu: #6b21a8;
    --mor-acik: #faf5ff;
    --turuncu: #f97316;
    --turuncu-koyu: #ea580c;
    --yesil: #16a34a;
    --kirmizi: #dc2626;
    --sari: #eab308;

    --bg: #ffffff;
    --bg-sogk: #f8fafc;
    --bg-card: #ffffff;
    --metin: #0f172a;
    --metin-acik: #475569;
    --metin-silik: #94a3b8;
    --kenar: #e2e8f0;
    --kenar-koyu: #cbd5e1;

    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04);
    --shadow-lg: 0 10px 25px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--font);
    color: var(--metin);
    background: var(--bg-sogk);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--mavi); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--mavi-koyu); }

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

.konteyner { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.konteyner-dar { max-width: 900px; margin: 0 auto; padding: 0 20px; }

/* ============================================================
   HEADER
   ============================================================ */

.ust-bar {
    background: linear-gradient(90deg, var(--mavi) 0%, var(--mor) 100%);
    color: #fff;
    padding: 8px 0;
    font-size: 13px;
}
.ust-bar a { color: #fff; opacity: 0.9; }
.ust-bar a:hover { opacity: 1; }
.ust-bar-ic {
    display: flex; justify-content: space-between; align-items: center;
    gap: 20px; flex-wrap: wrap;
}
.ust-bar-sol { display: flex; gap: 16px; align-items: center; }
.ust-bar-sag { display: flex; gap: 16px; align-items: center; }

.site-header {
    background: #fff;
    box-shadow: var(--shadow-sm);
    position: sticky; top: 0; z-index: 100;
    border-bottom: 1px solid var(--kenar);
}
.site-header-ic {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 0; gap: 20px;
}

.logo {
    font-size: 22px; font-weight: 800;
    letter-spacing: -0.5px;
    display: flex; align-items: center; gap: 8px;
    flex-shrink: 0;
}
.logo-metin { color: var(--metin); }
.logo-metin .vurgu { color: var(--mavi); }
.logo .simge {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, var(--mavi), var(--mor));
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 18px;
}

.ana-menu {
    display: flex; gap: 2px; list-style: none;
    flex: 1; justify-content: center;
    flex-wrap: nowrap;
}
.ana-menu > li { position: relative; }
.ana-menu > li > a {
    padding: 9px 12px;
    color: var(--metin);
    font-weight: 500;
    font-size: 14px;
    border-radius: var(--radius-sm);
    display: block;
    transition: all 0.15s;
    white-space: nowrap;
}
.ana-menu > li > a:hover {
    background: var(--mavi-acik);
    color: var(--mavi);
}
.ana-menu li.aktif > a { background: var(--mavi-acik); color: var(--mavi); }

.ana-menu .dropdown-menu {
    position: absolute; top: 100%; left: 0;
    min-width: 260px;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 8px;
    list-style: none;
    opacity: 0; visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s;
    border: 1px solid var(--kenar);
    z-index: 1000;
}
.ana-menu li:hover .dropdown-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown-menu a {
    padding: 10px 14px;
    display: block;
    color: var(--metin);
    border-radius: var(--radius-sm);
    font-size: 14px;
}
.dropdown-menu a:hover { background: var(--bg-sogk); color: var(--mavi); }

.header-aksiyonlar {
    display: flex; gap: 10px; align-items: center;
}

.mobil-menu-btn {
    display: none;
    width: 40px; height: 40px;
    border: 1.5px solid var(--kenar);
    background: #fff;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 20px;
}

/* Mobil menü - varsayılan olarak gizli, sadece 960px altında ve .acik ile görünür */
.mobil-menu {
    display: none;
    list-style: none;
}

/* ============================================================
   MESLEK DETAY BİLEŞENLERİ
   ============================================================ */

/* Sayfa başlık barı (meslek hero, araç hero) */
.sayfa-hero {
    background: linear-gradient(135deg, #eff6ff 0%, #faf5ff 100%);
    padding: 50px 0 60px;
    border-bottom: 1px solid var(--kenar);
    position: relative;
    overflow: hidden;
}
.sayfa-hero.mor { background: linear-gradient(135deg, #faf5ff 0%, #fdf2f8 50%, #eff6ff 100%); }
.sayfa-hero::before {
    content: ''; position: absolute; top: -50%; right: -20%;
    width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(30,99,237,0.1), transparent 70%);
    pointer-events: none;
}
.sayfa-hero::after {
    content: ''; position: absolute; bottom: -30%; left: -15%;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(126,34,206,0.08), transparent 70%);
    pointer-events: none;
}
.sayfa-hero-ic { position: relative; z-index: 2; }

.breadcrumb {
    font-size: 13px; color: var(--metin-acik);
    margin-bottom: 28px;
}
.breadcrumb a { color: var(--metin-acik); }
.breadcrumb a:hover { color: var(--mavi); }
.breadcrumb .ayrac { margin: 0 6px; opacity: 0.5; }

/* 2-KOLON GRID */
.meslek-hero-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 50px;
    align-items: center;
}

.meslek-hero-sol { min-width: 0; }

.hero-kategori-etiket {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 700;
    color: var(--turuncu);
    text-transform: uppercase; letter-spacing: 1.5px;
    margin-bottom: 18px;
    padding: 6px 14px;
    background: rgba(249,115,22,0.1);
    border-radius: 100px;
}

.sayfa-hero h1 {
    font-size: clamp(28px, 4.5vw, 48px);
    font-weight: 800;
    letter-spacing: -1.2px;
    line-height: 1.1;
    margin-bottom: 18px;
    background: linear-gradient(135deg, #0f172a 0%, var(--mavi) 80%, var(--mor) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.sayfa-hero h1.mor-gradient {
    background: linear-gradient(135deg, #0f172a 0%, var(--mor) 70%, #be185d 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

.sayfa-hero .hero-aciklama {
    font-size: 17px; color: var(--metin-acik);
    line-height: 1.65;
    max-width: 560px;
    margin-bottom: 0;
}

.hero-cta-grup {
    display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px;
}

/* SAĞ: STAT KARTI */
.meslek-hero-sag { min-width: 0; }

.hero-stat-kart {
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.8);
    border-radius: 24px;
    padding: 28px 24px;
    box-shadow: 0 20px 50px -15px rgba(30,99,237,0.15),
                0 8px 20px -8px rgba(126,34,206,0.1);
    max-width: 380px;
    margin-left: auto;
}

/* Donut Chart */
.hero-donut {
    position: relative;
    width: 140px; height: 140px;
    margin: 0 auto 12px;
}
.hero-donut svg {
    width: 100%; height: 100%;
}
.hero-donut-ic {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.hero-donut-sayi {
    font-size: 38px; font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, var(--mavi), var(--mor));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-donut-etiket {
    font-size: 11px; color: var(--metin-silik);
    margin-top: 2px; font-weight: 500;
}
.hero-donut-baslik {
    text-align: center;
    font-size: 13px; font-weight: 700;
    color: var(--metin);
    margin-bottom: 18px;
    text-transform: uppercase; letter-spacing: 0.8px;
}

/* Büyük ikon (skor yoksa) */
.hero-buyuk-ikon {
    width: 96px; height: 96px;
    background: linear-gradient(135deg, var(--mavi), var(--mor));
    border-radius: 22px;
    display: flex; align-items: center; justify-content: center;
    font-size: 48px;
    margin: 8px auto 22px;
    box-shadow: 0 15px 35px rgba(30,99,237,0.3);
}

/* Stat listesi */
.hero-stat-listesi {
    display: flex; flex-direction: column; gap: 6px;
}
.hero-stat-satir {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 14px;
    background: #fff;
    border: 1px solid var(--kenar);
    border-radius: 10px;
    font-size: 13px;
    transition: all 0.15s;
    text-decoration: none;
    color: var(--metin);
}
.hero-stat-satir .label {
    color: var(--metin-acik); font-weight: 500;
}
.hero-stat-satir .deger {
    font-weight: 800; font-size: 17px; color: var(--metin);
}
.hero-stat-satir.tiklanabilir {
    cursor: pointer;
    background: linear-gradient(135deg, #faf5ff, #fff);
    border-color: #e9d5ff;
}
.hero-stat-satir.tiklanabilir:hover {
    background: linear-gradient(135deg, #f3e8ff, #faf5ff);
    border-color: var(--mor);
    transform: translateX(3px);
    color: var(--metin);
}
.hero-stat-satir.tiklanabilir .label { color: var(--mor); font-weight: 600; }

@media (max-width: 860px) {
    .meslek-hero-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .hero-stat-kart {
        max-width: 100%;
        margin-left: 0;
    }
    .sayfa-hero { padding: 36px 0 44px; }
    .breadcrumb { margin-bottom: 18px; }
}

@media (max-width: 520px) {
    .hero-stat-kart { padding: 22px 18px; }
    .hero-donut { width: 120px; height: 120px; }
    .hero-donut-sayi { font-size: 32px; }
}

/* ============================================================
   TEHDIT HARITASI
   ============================================================ */

.tehdit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.tehdit-kart {
    background: #fff;
    border-radius: var(--radius);
    padding: 20px;
    border-left: 5px solid var(--kenar);
    transition: all 0.2s;
}
.tehdit-kart.yesil { border-left-color: var(--yesil); }
.tehdit-kart.sari { border-left-color: var(--sari); }
.tehdit-kart.kirmizi { border-left-color: var(--kirmizi); }
.tehdit-kart:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.tehdit-ust {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 10px; gap: 10px;
}
.tehdit-kart h4 {
    font-size: 15px; font-weight: 700;
    color: var(--metin); line-height: 1.3;
    flex: 1;
}
.tehdit-durum-rozet {
    font-size: 10px; font-weight: 700;
    padding: 3px 8px; border-radius: 100px;
    text-transform: uppercase; letter-spacing: 0.5px;
    white-space: nowrap;
}
.tehdit-durum-rozet.yesil { background: #dcfce7; color: #166534; }
.tehdit-durum-rozet.sari { background: #fef3c7; color: #854d0e; }
.tehdit-durum-rozet.kirmizi { background: #fee2e2; color: #991b1b; }

.tehdit-progres { margin: 12px 0; }
.tehdit-progres-etiket {
    display: flex; justify-content: space-between;
    font-size: 11px; font-weight: 600; color: var(--metin-silik);
    margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px;
}
.tehdit-progres-bar {
    height: 8px; background: var(--bg-sogk);
    border-radius: 100px; overflow: hidden;
}
.tehdit-progres-ic {
    height: 100%; border-radius: 100px;
    transition: width 0.6s ease-out;
}
.tehdit-progres-ic.yesil { background: var(--yesil); }
.tehdit-progres-ic.sari { background: var(--sari); }
.tehdit-progres-ic.kirmizi { background: var(--kirmizi); }

.tehdit-kart p { font-size: 13px; color: var(--metin-acik); line-height: 1.6; }
.tehdit-eylem {
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid var(--kenar);
    font-size: 12px;
    background: linear-gradient(90deg, rgba(30,99,237,0.04), transparent);
    padding: 10px; border-radius: 8px; border-left: 3px solid var(--mavi);
}
.tehdit-eylem strong { color: var(--mavi); font-weight: 700; }

.tehdit-efsane {
    display: flex; gap: 16px; flex-wrap: wrap;
    padding: 14px 20px; background: var(--bg-sogk);
    border-radius: var(--radius);
    margin-bottom: 24px; font-size: 13px;
}
.tehdit-efsane-item { display: inline-flex; align-items: center; gap: 6px; }
.tehdit-efsane-nokta { width: 12px; height: 12px; border-radius: 50%; }
.tehdit-efsane-nokta.yesil { background: var(--yesil); }
.tehdit-efsane-nokta.sari { background: var(--sari); }
.tehdit-efsane-nokta.kirmizi { background: var(--kirmizi); }

/* ============================================================
   SENARYO KARTI
   ============================================================ */

.senaryo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}
.senaryo-kart {
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid var(--kenar);
    overflow: hidden;
    transition: all 0.2s;
}
.senaryo-kart:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.senaryo-ust {
    padding: 18px 20px;
    background: linear-gradient(135deg, #f8fafc, #fff);
    border-bottom: 1px solid var(--kenar);
}
.senaryo-baslik {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 10px; margin-bottom: 6px;
}
.senaryo-kart h4 {
    font-size: 16px; font-weight: 700; line-height: 1.3;
    color: var(--metin);
}
.senaryo-zorluk {
    font-size: 10px; padding: 3px 8px; border-radius: 100px;
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    white-space: nowrap;
}
.senaryo-zorluk.kolay { background: #dcfce7; color: #166534; }
.senaryo-zorluk.orta { background: #fef3c7; color: #854d0e; }
.senaryo-zorluk.zor { background: #fee2e2; color: #991b1b; }

.senaryo-ust p { font-size: 13px; color: var(--metin-acik); }

.senaryo-kiyas {
    display: grid; grid-template-columns: 1fr 40px 1fr;
    align-items: stretch; gap: 0;
    padding: 16px 20px 0;
}
.senaryo-kiyas-kutu {
    padding: 14px; border-radius: 10px;
    text-align: center;
}
.senaryo-kiyas-kutu.onceki { background: #fef2f2; border: 1px solid #fecaca; }
.senaryo-kiyas-kutu.sonraki { background: #f0fdf4; border: 1px solid #bbf7d0; }
.senaryo-kiyas-kutu .etiket {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.8px; margin-bottom: 6px;
}
.senaryo-kiyas-kutu.onceki .etiket { color: #991b1b; }
.senaryo-kiyas-kutu.sonraki .etiket { color: #166534; }
.senaryo-kiyas-kutu .sure {
    font-size: 24px; font-weight: 800; line-height: 1;
}
.senaryo-kiyas-kutu.onceki .sure { color: #dc2626; }
.senaryo-kiyas-kutu.sonraki .sure { color: #16a34a; }
.senaryo-kiyas-kutu .birim {
    font-size: 11px; color: var(--metin-acik); margin-top: 2px;
}
.senaryo-ok {
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: var(--mavi); font-weight: 800;
}
.senaryo-tasarruf {
    text-align: center; padding: 10px 20px 14px;
    font-size: 13px; color: var(--yesil); font-weight: 700;
}
.senaryo-alt {
    padding: 12px 20px;
    border-top: 1px solid var(--kenar);
    font-size: 12px; color: var(--metin-silik);
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
}

/* ============================================================
   İŞ AKIŞI KARTI
   ============================================================ */

.akis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}
.akis-kart {
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid var(--kenar);
    padding: 24px;
    transition: all 0.2s;
    position: relative;
}
.akis-kart:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--mavi); }
.akis-kart h4 {
    font-size: 17px; font-weight: 700;
    margin-bottom: 8px; color: var(--metin);
    padding-right: 80px;
}
.akis-kart .ozet { font-size: 13px; color: var(--metin-acik); margin-bottom: 14px; }
.akis-meta {
    display: flex; gap: 14px; flex-wrap: wrap;
    padding: 10px; background: var(--bg-sogk);
    border-radius: 8px;
    font-size: 12px; color: var(--metin-acik);
    margin-bottom: 14px;
}
.akis-meta-item { display: inline-flex; align-items: center; gap: 4px; }
.akis-premium-rozet {
    position: absolute; top: 20px; right: 20px;
    background: linear-gradient(135deg, var(--mor), #4c1d95);
    color: #fff;
    font-size: 10px; font-weight: 700; padding: 3px 10px;
    border-radius: 100px;
    text-transform: uppercase; letter-spacing: 0.8px;
}

/* ============================================================
   ALT-MESLEK KARTI (AKADEMİSYEN)
   ============================================================ */

.alt-meslek-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}
.alt-meslek-kart {
    background: linear-gradient(135deg, #faf5ff, #fdf2f8);
    border: 2px solid #e9d5ff;
    border-radius: var(--radius);
    padding: 24px;
    text-decoration: none;
    color: var(--metin);
    transition: all 0.2s;
    display: block;
}
.alt-meslek-kart:hover {
    border-color: var(--mor);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    color: var(--metin);
}
.alt-meslek-ikon {
    width: 44px; height: 44px;
    background: var(--mor); color: #fff;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; margin-bottom: 12px;
}
.alt-meslek-kart h4 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.alt-meslek-kart p { font-size: 13px; color: var(--metin-acik); }

/* ============================================================
   PROMPT KARTI
   ============================================================ */

.prompt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
}
.prompt-kart {
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid var(--kenar);
    padding: 18px;
    transition: all 0.2s;
    position: relative;
}
.prompt-kart:hover { border-color: var(--mavi); transform: translateY(-2px); box-shadow: var(--shadow); }
.prompt-premium {
    position: absolute; top: 12px; right: 12px;
    background: linear-gradient(135deg, var(--mor), #4c1d95); color: #fff;
    font-size: 10px; font-weight: 700; padding: 3px 10px;
    border-radius: 100px;
    text-transform: uppercase; letter-spacing: 0.8px;
}
.prompt-ust { margin-bottom: 10px; padding-right: 70px; }
.prompt-kart h5 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.prompt-kategori {
    display: inline-block;
    background: var(--bg-sogk);
    padding: 2px 10px; border-radius: 100px;
    font-size: 11px; color: var(--metin-acik); font-weight: 600;
}
.prompt-metin-onizleme {
    background: #0f172a; color: #cbd5e1;
    padding: 12px; border-radius: 8px;
    font-family: 'SF Mono', Monaco, 'Cascadia Mono', 'Roboto Mono', monospace;
    font-size: 12px; line-height: 1.5;
    max-height: 80px; overflow: hidden;
    position: relative;
    margin: 10px 0;
}
.prompt-metin-onizleme::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 30px;
    background: linear-gradient(180deg, transparent, #0f172a);
}
.prompt-kart-alt {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 10px; border-top: 1px solid var(--kenar);
    font-size: 11px; color: var(--metin-silik);
}
.prompt-seviye-rozet {
    padding: 2px 8px; border-radius: 100px;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.prompt-seviye-rozet.baslangic { background: #dcfce7; color: #166534; }
.prompt-seviye-rozet.orta { background: #dbeafe; color: #1e40af; }
.prompt-seviye-rozet.ileri { background: #fef3c7; color: #854d0e; }
.prompt-seviye-rozet.uzman { background: #fee2e2; color: #991b1b; }

/* ============================================================
   FİLTRE BARI
   ============================================================ */

.filtre-bar {
    background: #fff; border: 1px solid var(--kenar);
    border-radius: var(--radius); padding: 16px;
    margin-bottom: 30px;
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.filtre-bar input[type=text], .filtre-bar select {
    padding: 10px 14px;
    border: 1.5px solid var(--kenar); border-radius: var(--radius-sm);
    font-family: inherit; font-size: 14px; color: var(--metin);
    background: #fff; outline: none;
    transition: border-color 0.15s;
}
.filtre-bar input[type=text]:focus, .filtre-bar select:focus { border-color: var(--mavi); }
.filtre-bar input[type=text] { flex: 1; min-width: 200px; }
.filtre-bar select { min-width: 150px; }

.filtre-chipler {
    display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px;
}
.filtre-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px;
    background: #fff;
    border: 1px solid var(--kenar);
    border-radius: 100px;
    font-size: 13px; color: var(--metin);
    text-decoration: none;
    transition: all 0.15s;
}
.filtre-chip:hover { border-color: var(--mavi); color: var(--mavi); }
.filtre-chip.aktif { background: var(--mavi); color: #fff; border-color: var(--mavi); }
.filtre-chip.aktif:hover { background: var(--mavi-koyu); color: #fff; }

/* ============================================================
   BOŞ DURUM / İÇERİK BÖLÜMLERİ
   ============================================================ */

.bos-durum {
    padding: 60px 40px;
    text-align: center;
    background: #fff;
    border-radius: var(--radius);
    border: 2px dashed var(--kenar);
}
.bos-durum-ikon { font-size: 48px; margin-bottom: 12px; }
.bos-durum h3 { font-size: 20px; margin-bottom: 8px; color: var(--metin); }
.bos-durum p { color: var(--metin-acik); max-width: 450px; margin: 0 auto; }

.icerik-bolumu { margin-bottom: 50px; }
.icerik-bolumu-ust {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-bottom: 24px; gap: 16px; flex-wrap: wrap;
}
.icerik-bolumu-ust h2 {
    font-size: 26px; font-weight: 800; letter-spacing: -0.5px;
    color: var(--metin);
}
.icerik-bolumu-ust p { font-size: 15px; color: var(--metin-acik); margin-top: 4px; }

/* ============================================================
   ARAÇLAR LİSTE & DETAY SAYFASI
   ============================================================ */

/* Araçlar liste hero: 2-kolon grid (başlık + mini stat kartlar) */
.araclar-hero-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 50px;
    align-items: center;
}
.araclar-hero-stat {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.arac-mini-stat {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.8);
    border-radius: 16px;
    padding: 22px 18px;
    text-align: center;
    box-shadow: 0 8px 20px -8px rgba(30,99,237,0.12);
    transition: transform 0.15s;
}
.arac-mini-stat:hover { transform: translateY(-2px); }
.arac-mini-stat .deger {
    font-size: 32px; font-weight: 800;
    background: linear-gradient(135deg, var(--mavi), var(--mor));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    line-height: 1;
}
.arac-mini-stat .etiket {
    font-size: 11px; color: var(--metin-acik);
    text-transform: uppercase; letter-spacing: 0.8px;
    margin-top: 8px; font-weight: 600;
}

/* Araç detay hero: sol içerik, sağ fiyat kartı */
.arac-detay-hero-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 50px;
    align-items: center;
}

/* Büyük araç logosu (detay sayfası fiyat kartında) */
.arac-logo-buyuk {
    width: 80px; height: 80px;
    background: #fff;
    border: 1px solid var(--kenar);
    border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 40px; font-weight: 800;
    color: var(--mor);
    margin: 0 auto 16px;
    overflow: hidden;
    box-shadow: 0 8px 20px -8px rgba(0,0,0,0.1);
}
.arac-logo-buyuk img { width: 100%; height: 100%; object-fit: cover; }

/* Fiyat etiketi (büyük, renkli pill) */
.fiyat-etiket {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 100px;
    font-size: 13px; font-weight: 700;
    margin-bottom: 4px;
}
.fiyat-etiket.yesil { background: #dcfce7; color: #166534; }
.fiyat-etiket.mavi { background: #dbeafe; color: #1e40af; }
.fiyat-etiket.mor { background: #faf5ff; color: var(--mor); border: 1px solid #e9d5ff; }

.fiyat-detay {
    font-size: 20px; font-weight: 800;
    color: var(--metin);
    margin-bottom: 4px;
}

.arac-mini-stat-listesi {
    display: flex; flex-direction: column; gap: 6px;
}

/* Responsive */
@media (max-width: 860px) {
    .araclar-hero-grid,
    .arac-detay-hero-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .araclar-hero-stat {
        max-width: 480px;
    }
}
@media (max-width: 480px) {
    .araclar-hero-stat { grid-template-columns: 1fr 1fr; gap: 10px; }
    .arac-mini-stat { padding: 18px 14px; }
    .arac-mini-stat .deger { font-size: 26px; }
}

/* ============================================================
   BLOG SAYFALARI
   ============================================================ */

/* Blog liste: Ana + sidebar 2 kolon */
.blog-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
    align-items: start;
}
.blog-ana { min-width: 0; }
.blog-sidebar {
    position: sticky; top: 90px;
    display: flex; flex-direction: column; gap: 20px;
}

/* Sidebar kutuları */
.sidebar-kutu {
    background: #fff;
    border: 1px solid var(--kenar);
    border-radius: var(--radius);
    padding: 20px;
}
.sidebar-kutu h4 {
    font-size: 14px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--metin);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--kenar);
}
.sidebar-liste { list-style: none; padding: 0; margin: 0; }
.sidebar-liste li { margin-bottom: 4px; }
.sidebar-liste a {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 14px;
    border-radius: 8px;
    color: var(--metin);
    font-size: 14px;
    transition: all 0.15s;
}
.sidebar-liste a:hover { background: var(--bg-sogk); color: var(--mavi); transform: translateX(3px); }
.sidebar-liste a.aktif { background: var(--mavi-acik); color: var(--mavi); font-weight: 600; }
.sidebar-sayi {
    background: var(--bg-sogk);
    color: var(--metin-acik);
    padding: 2px 10px;
    border-radius: 100px;
    font-size: 11px; font-weight: 700;
}
.sidebar-liste a.aktif .sidebar-sayi { background: var(--mavi); color: #fff; }

/* Popüler yazılar listesi */
.sidebar-populer { display: flex; flex-direction: column; gap: 6px; }
.sidebar-populer-item {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 10px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.15s;
    color: var(--metin);
}
.sidebar-populer-item:hover { background: var(--bg-sogk); color: var(--metin); }
.sidebar-populer-numara {
    width: 32px; height: 32px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--mavi), var(--mor));
    color: #fff;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 800;
}
.sidebar-populer-resim {
    width: 60px; height: 60px; flex-shrink: 0;
    object-fit: cover; border-radius: 8px;
}
.sidebar-populer-icerik { flex: 1; min-width: 0; }
.sidebar-populer-icerik h5 {
    font-size: 13px; font-weight: 600;
    line-height: 1.35; margin-bottom: 4px;
    color: var(--metin);
}
.sidebar-populer-icerik span {
    font-size: 11px; color: var(--metin-silik);
}

/* Öne çıkan blog yazısı */
.blog-one-cikan {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 0;
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--kenar);
    margin-bottom: 30px;
    text-decoration: none;
    color: var(--metin);
    transition: all 0.2s;
}
.blog-one-cikan:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
    color: var(--metin);
}
.blog-one-cikan-gorsel {
    position: relative;
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, var(--mavi), var(--mor));
    overflow: hidden;
}
.blog-one-cikan-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.blog-one-cikan-rozet {
    position: absolute; top: 16px; left: 16px;
    background: var(--turuncu); color: #fff;
    padding: 6px 14px; border-radius: 100px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.8px;
    box-shadow: 0 4px 12px rgba(249,115,22,0.4);
}
.blog-one-cikan-icerik {
    padding: 32px;
    display: flex; flex-direction: column; justify-content: center;
}
.blog-one-cikan-icerik h2 {
    font-size: clamp(20px, 2.3vw, 26px);
    font-weight: 800; line-height: 1.25;
    margin-bottom: 10px;
    color: var(--metin);
}
.blog-alt-baslik {
    font-size: 15px; color: var(--metin-acik);
    font-style: italic;
    margin-bottom: 12px;
}
.blog-one-cikan-icerik p {
    font-size: 14px; color: var(--metin-acik);
    line-height: 1.7; margin-bottom: 14px;
}
.blog-one-cikan-icerik .blog-meta { border-top: none; padding-top: 0; }

/* Blog kart iyileştirme */
.blog-kart h3 { font-size: 17px; line-height: 1.4; }

/* Sayfalama */
.sayfalama {
    display: flex; justify-content: center; gap: 6px; flex-wrap: wrap;
    margin-top: 40px;
}
.sayfalama-btn {
    min-width: 40px; height: 40px;
    padding: 0 14px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff;
    border: 1px solid var(--kenar);
    border-radius: 8px;
    color: var(--metin);
    font-weight: 600; font-size: 14px;
    text-decoration: none;
    transition: all 0.15s;
}
.sayfalama-btn:hover { border-color: var(--mavi); color: var(--mavi); transform: translateY(-1px); }
.sayfalama-btn.aktif { background: var(--mavi); border-color: var(--mavi); color: #fff; }
.sayfalama-ara { display: flex; align-items: center; color: var(--metin-silik); padding: 0 6px; }

/* ============================================================
   BLOG DETAY SAYFASI
   ============================================================ */

.blog-detay-hero {
    background: linear-gradient(135deg, #eff6ff 0%, #faf5ff 100%);
    padding: 40px 0 0;
    border-bottom: 1px solid var(--kenar);
    position: relative;
    overflow: hidden;
}
.blog-detay-hero::before {
    content: ''; position: absolute; top: -30%; right: -10%;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(30,99,237,0.08), transparent 70%);
    pointer-events: none;
}
.blog-detay-hero-ic {
    max-width: 820px; margin: 0 auto 30px;
    position: relative; z-index: 2;
}

.blog-kategori-rozet {
    display: inline-block;
    background: var(--mavi-acik);
    color: var(--mavi);
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    margin-bottom: 18px;
    text-decoration: none;
    transition: transform 0.15s;
}
.blog-kategori-rozet:hover { transform: translateY(-1px); }

.blog-detay-hero h1 {
    font-size: clamp(26px, 4vw, 42px);
    font-weight: 800;
    letter-spacing: -0.8px;
    line-height: 1.2;
    margin-bottom: 16px;
    color: var(--metin);
}

.blog-detay-alt-baslik {
    font-size: 19px;
    color: var(--metin-acik);
    font-style: italic;
    margin-bottom: 24px;
    line-height: 1.55;
}

.blog-detay-meta {
    display: flex; justify-content: space-between; align-items: center;
    gap: 20px; flex-wrap: wrap;
    padding: 18px 0; margin-top: 8px;
    border-top: 1px solid var(--kenar);
    border-bottom: 1px solid var(--kenar);
}
.blog-yazar-ozet { display: flex; gap: 12px; align-items: center; }
.blog-yazar-avatar {
    width: 44px; height: 44px;
    background: linear-gradient(135deg, var(--mavi), var(--mor));
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.blog-yazar-ad { font-weight: 700; font-size: 14px; color: var(--metin); }
.blog-yazar-tarih { font-size: 12px; color: var(--metin-silik); margin-top: 2px; }

.blog-paylasim {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.blog-paylasim-etiket { font-size: 13px; color: var(--metin-acik); font-weight: 600; }
.blog-paylasim-btn {
    width: 36px; height: 36px;
    background: #fff;
    border: 1px solid var(--kenar);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--metin);
    font-weight: 600; font-size: 15px;
    text-decoration: none;
    transition: all 0.15s;
}
.blog-paylasim-btn:hover { background: var(--mavi); color: #fff; border-color: var(--mavi); transform: translateY(-2px); }

.blog-detay-kapak {
    max-width: 1000px; margin: 30px auto 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
    position: relative; z-index: 2;
}
.blog-detay-kapak img {
    width: 100%; height: auto; display: block;
    max-height: 500px; object-fit: cover;
}

/* İçerik layout (detay) */
.blog-detay-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
    align-items: start;
    max-width: 1180px;
    margin: 0 auto;
}
.blog-detay-icerik { min-width: 0; }

/* Özet kutusu */
.blog-ozet-kutu {
    background: linear-gradient(90deg, #eff6ff, transparent);
    border-left: 4px solid var(--mavi);
    padding: 16px 20px;
    border-radius: 0 var(--radius) var(--radius) 0;
    margin-bottom: 30px;
    font-size: 15px; line-height: 1.7;
    color: var(--metin);
}
.blog-ozet-kutu strong { color: var(--mavi); }

/* Yazı içerik formatı (HTML içeriği) */
.blog-icerik-metin {
    font-size: 17px; line-height: 1.8;
    color: var(--metin);
}
.blog-icerik-metin h2 {
    font-size: 26px; font-weight: 800;
    margin: 40px 0 16px; letter-spacing: -0.4px;
    color: var(--metin); line-height: 1.3;
}
.blog-icerik-metin h3 {
    font-size: 21px; font-weight: 700;
    margin: 32px 0 12px;
    color: var(--metin); line-height: 1.35;
}
.blog-icerik-metin h4 {
    font-size: 18px; font-weight: 700;
    margin: 24px 0 10px;
    color: var(--metin);
}
.blog-icerik-metin p { margin-bottom: 18px; }
.blog-icerik-metin a {
    color: var(--mavi);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(30,99,237,0.3);
    transition: text-decoration-color 0.15s;
}
.blog-icerik-metin a:hover { text-decoration-color: var(--mavi); }
.blog-icerik-metin strong { color: var(--metin); font-weight: 700; }
.blog-icerik-metin ul, .blog-icerik-metin ol {
    margin: 16px 0 24px 0; padding-left: 24px;
}
.blog-icerik-metin li { margin-bottom: 8px; }
.blog-icerik-metin blockquote {
    border-left: 4px solid var(--mor);
    padding: 12px 20px;
    margin: 24px 0;
    background: var(--mor-acik);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-style: italic;
    color: var(--mor-koyu);
}
.blog-icerik-metin code {
    background: var(--bg-sogk);
    color: var(--mor);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.9em;
    font-family: 'SF Mono', Monaco, 'Cascadia Mono', monospace;
}
.blog-icerik-metin pre {
    background: #0f172a;
    color: #cbd5e1;
    padding: 20px;
    border-radius: var(--radius);
    margin: 24px 0;
    overflow-x: auto;
    font-size: 14px; line-height: 1.6;
}
.blog-icerik-metin pre code { background: none; color: inherit; padding: 0; }
.blog-icerik-metin img {
    max-width: 100%; height: auto;
    border-radius: var(--radius);
    margin: 24px 0;
    display: block;
}
.blog-icerik-metin table {
    width: 100%; border-collapse: collapse;
    margin: 24px 0;
    font-size: 14px;
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
}
.blog-icerik-metin th {
    background: var(--bg-sogk);
    padding: 12px; text-align: left;
    font-weight: 700; font-size: 13px;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.blog-icerik-metin td {
    padding: 12px; border-top: 1px solid var(--kenar);
}

/* Etiketler */
.blog-etiketler {
    padding: 20px 0; margin-top: 40px;
    border-top: 1px solid var(--kenar);
    font-size: 14px;
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.blog-etiketler strong { color: var(--metin); margin-right: 6px; }
.blog-etiket {
    display: inline-block;
    padding: 5px 12px;
    background: var(--bg-sogk);
    color: var(--metin-acik);
    border-radius: 100px;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.15s;
}
.blog-etiket:hover { background: var(--mavi); color: #fff; }

/* Yazar kartı (alt) */
.blog-yazar-kart {
    display: grid; grid-template-columns: 80px 1fr; gap: 20px;
    align-items: center;
    background: linear-gradient(135deg, #f8fafc, #fff);
    border: 1px solid var(--kenar);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-top: 30px;
}
.blog-yazar-avatar-buyuk {
    width: 80px; height: 80px;
    background: linear-gradient(135deg, var(--mavi), var(--mor));
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 36px;
}
.blog-yazar-kart h4 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.blog-yazar-kart p { font-size: 14px; color: var(--metin-acik); line-height: 1.6; }

/* İlgili meslek CTA */
.blog-meslek-cta {
    display: grid; grid-template-columns: 1fr auto; gap: 20px;
    align-items: center;
    background: linear-gradient(135deg, #eff6ff, #faf5ff);
    border: 2px solid var(--mavi);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    margin-top: 30px;
}
.blog-meslek-cta h4 { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.blog-meslek-cta p { color: var(--metin-acik); font-size: 14px; margin-bottom: 0; }

/* Önceki / Sonraki navigasyon */
.blog-nav {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    margin-top: 40px;
}
.blog-nav-btn {
    display: block;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--kenar);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--metin);
    transition: all 0.2s;
}
.blog-nav-btn:hover {
    border-color: var(--mavi);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    color: var(--metin);
}
.blog-nav-btn.sag { text-align: right; }
.blog-nav-btn .yon {
    font-size: 12px; font-weight: 700;
    color: var(--mavi);
    text-transform: uppercase; letter-spacing: 0.8px;
    margin-bottom: 6px;
}
.blog-nav-btn .baslik { font-size: 14px; font-weight: 600; line-height: 1.4; }

/* Responsive */
@media (max-width: 960px) {
    .blog-layout,
    .blog-detay-layout {
        grid-template-columns: 1fr;
    }
    .blog-sidebar { position: static; }
    .blog-one-cikan { grid-template-columns: 1fr; }
    .blog-one-cikan-icerik { padding: 24px; }
}

@media (max-width: 640px) {
    .blog-detay-meta { flex-direction: column; align-items: flex-start; }
    .blog-yazar-kart { grid-template-columns: 60px 1fr; gap: 14px; padding: 18px; }
    .blog-yazar-avatar-buyuk { width: 60px; height: 60px; font-size: 28px; }
    .blog-meslek-cta { grid-template-columns: 1fr; text-align: center; }
    .blog-nav { grid-template-columns: 1fr; }
    .blog-nav-btn.sag { text-align: left; }
    .blog-icerik-metin { font-size: 16px; }
    .blog-icerik-metin h2 { font-size: 22px; }
    .blog-icerik-metin h3 { font-size: 19px; }
}

/* ============================================================
   AKADEMİSYEN BÖLÜMÜ — Özel tasarım dili
   ============================================================ */

.akademik-hero {
    background: linear-gradient(135deg, #4c1d95 0%, #1e3a8a 50%, #1e40af 100%);
    color: #fff;
    padding: 70px 0 80px;
    position: relative;
    overflow: hidden;
}
.akademik-hero::before {
    content: ''; position: absolute;
    top: -50%; right: -20%;
    width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(249,115,22,0.15), transparent 70%);
    pointer-events: none;
}
.akademik-hero::after {
    content: ''; position: absolute;
    bottom: -30%; left: -15%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(168,85,247,0.2), transparent 70%);
    pointer-events: none;
}
.akademik-hero .konteyner { position: relative; z-index: 2; }
.akademik-hero .breadcrumb a:hover { color: var(--turuncu) !important; }

.akademik-etiket {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(249,115,22,0.2);
    border: 1px solid rgba(249,115,22,0.4);
    border-radius: 100px;
    color: var(--turuncu);
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.5px;
    margin-bottom: 20px;
}

.akademik-hero h1 {
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 800;
    letter-spacing: -1.2px;
    line-height: 1.1;
    margin-bottom: 22px;
    color: #fff;
}
.akademik-hero h1 .vurgu {
    background: linear-gradient(90deg, var(--turuncu), #fbbf24);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.akademik-hero-aciklama {
    font-size: 17px; line-height: 1.7;
    color: rgba(255,255,255,0.88);
    max-width: 600px;
    margin-bottom: 32px;
}
.akademik-hero-aciklama strong { color: #fff; }

.akademik-hero-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 50px;
    align-items: center;
}

.akademik-hero-istatistik {
    display: flex; gap: 30px;
    padding: 24px 30px;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 16px;
    margin-top: 8px;
    max-width: fit-content;
}
.akademik-hero-istatistik .ist-item { text-align: center; }
.akademik-hero-istatistik .sayi {
    font-size: 36px; font-weight: 800;
    background: linear-gradient(135deg, var(--turuncu), #fbbf24);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    line-height: 1;
}
.akademik-hero-istatistik .etiket {
    font-size: 12px; color: rgba(255,255,255,0.7);
    margin-top: 6px; text-transform: uppercase; letter-spacing: 0.8px;
    font-weight: 600;
}

/* Orbital dekoratif görsel */
.akademik-hero-gorsel {
    display: flex; justify-content: center; align-items: center;
    min-height: 320px;
}
.akademik-simge-daire {
    position: relative;
    width: 280px; height: 280px;
}
.simge-ic {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 120px; height: 120px;
    background: linear-gradient(135deg, var(--turuncu), #fbbf24);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 60px;
    box-shadow: 0 20px 60px rgba(249,115,22,0.5);
}
.orbital {
    position: absolute;
    width: 50px; height: 50px;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    animation: orbit 20s linear infinite;
}
.orbital.s1 { top: 10px; left: 115px; }
.orbital.s2 { top: 90px; right: 0; }
.orbital.s3 { bottom: 50px; right: 0; }
.orbital.s4 { bottom: 10px; left: 115px; }
.orbital.s5 { bottom: 90px; left: 0; }
.orbital.s6 { top: 50px; left: 0; }

@keyframes orbit {
    from { transform: rotate(0deg) translateX(0) rotate(0deg); }
    to { transform: rotate(360deg) translateX(0) rotate(-360deg); }
}

/* Akademik çerçeve buton */
.btn-akademik-cerceve {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.4);
}
.btn-akademik-cerceve:hover {
    background: rgba(255,255,255,0.1);
    border-color: #fff;
    color: #fff;
    transform: translateY(-1px);
}

/* ETİK ŞERİT */
.akademik-etik-serit {
    background: linear-gradient(90deg, #fef3c7, #fff);
    border-bottom: 1px solid #fcd34d;
}
.etik-serit-ic {
    padding: 16px 0;
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    font-size: 14px;
}
.etik-ikon {
    font-size: 26px; flex-shrink: 0;
}
.etik-serit-ic strong { color: #854d0e; display: block; font-size: 15px; margin-bottom: 2px; }
.etik-serit-ic span { color: #78350f; }
.etik-link {
    margin-left: auto;
    color: #854d0e;
    font-weight: 700;
    padding: 8px 16px;
    background: rgba(133,77,14,0.1);
    border-radius: 100px;
    transition: all 0.15s;
    white-space: nowrap;
}
.etik-link:hover { background: #854d0e; color: #fff; transform: translateX(3px); }

/* AKADEMİK MODÜL KART */
.akademik-modul-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}
.akademik-modul-kart {
    background: linear-gradient(135deg, #fff, #fafafa);
    border: 2px solid var(--kenar);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    padding-top: 28px;
    position: relative;
    text-decoration: none;
    color: var(--metin);
    transition: all 0.25s;
    overflow: hidden;
}
.akademik-modul-kart::before {
    content: ''; position: absolute;
    top: 0; right: 0;
    width: 150px; height: 150px;
    background: radial-gradient(circle, rgba(126,34,206,0.08), transparent 70%);
    pointer-events: none;
    opacity: 0; transition: opacity 0.3s;
}
.akademik-modul-kart:hover {
    transform: translateY(-6px);
    border-color: var(--mor);
    box-shadow: 0 20px 40px -12px rgba(126,34,206,0.2);
    color: var(--metin);
}
.akademik-modul-kart:hover::before { opacity: 1; }

.modul-numara {
    position: absolute;
    top: 16px; right: 20px;
    font-size: 48px;
    font-weight: 900;
    color: rgba(126,34,206,0.12);
    line-height: 1;
    letter-spacing: -2px;
    pointer-events: none;
    z-index: 0;
}
.modul-premium {
    display: inline-block;
    background: linear-gradient(135deg, var(--mor), #4c1d95);
    color: #fff;
    font-size: 10px; font-weight: 700;
    padding: 4px 10px;
    border-radius: 100px;
    text-transform: uppercase; letter-spacing: 0.8px;
    margin-bottom: 14px;
    position: relative; z-index: 2;
}
.modul-ikon {
    width: 56px; height: 56px;
    background: linear-gradient(135deg, var(--mor), #4c1d95);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    margin-bottom: 18px;
    box-shadow: 0 10px 25px -8px rgba(126,34,206,0.4);
    position: relative; z-index: 2;
}

.akademik-modul-kart h3 {
    font-size: 20px; font-weight: 800;
    margin-bottom: 10px;
    color: var(--metin);
    letter-spacing: -0.3px;
    position: relative; z-index: 1;
}
.akademik-modul-kart p {
    font-size: 14px; color: var(--metin-acik);
    line-height: 1.7;
    margin-bottom: 16px;
    position: relative; z-index: 1;
}

.modul-hedef {
    background: rgba(126,34,206,0.05);
    border-left: 3px solid var(--mor);
    padding: 10px 14px;
    border-radius: 0 8px 8px 0;
    font-size: 12px;
    color: var(--metin-acik);
    margin-bottom: 16px;
    position: relative; z-index: 1;
}
.modul-hedef strong { color: var(--mor); font-weight: 700; }

.modul-alt {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 16px;
    border-top: 1px solid var(--kenar);
    font-size: 13px;
    position: relative; z-index: 1;
}
.modul-alt span { color: var(--metin-acik); }
.modul-git {
    color: var(--mor) !important;
    font-weight: 700;
    transition: transform 0.15s;
}
.akademik-modul-kart:hover .modul-git { transform: translateX(4px); }

/* MODÜL DETAY HERO (açık mor tema) */
.modul-hero {
    background: linear-gradient(135deg, #faf5ff 0%, #fdf4ff 50%, #eff6ff 100%);
    padding: 48px 0 56px;
    border-bottom: 1px solid var(--kenar);
    position: relative;
    overflow: hidden;
}
.modul-hero::before {
    content: ''; position: absolute; top: -50%; right: -15%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(126,34,206,0.1), transparent 70%);
    pointer-events: none;
}
.modul-hero .konteyner { position: relative; z-index: 2; }

.modul-hero-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 50px;
    align-items: center;
}
.modul-hero h1 {
    font-size: clamp(28px, 4.5vw, 42px);
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.15;
    margin-bottom: 18px;
    background: linear-gradient(135deg, #0f172a 0%, var(--mor) 70%, #be185d 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

.modul-hedef-kutu {
    background: rgba(126,34,206,0.05);
    border-left: 4px solid var(--mor);
    padding: 12px 18px;
    border-radius: 0 10px 10px 0;
    font-size: 14px;
    color: var(--metin);
    margin-top: 16px;
}
.modul-hedef-kutu strong { color: var(--mor); }

.modul-hero-kart {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.8);
    border-radius: 24px;
    padding: 32px;
    text-align: center;
    box-shadow: 0 20px 50px -15px rgba(126,34,206,0.2);
    max-width: 380px;
    margin-left: auto;
}
.modul-hero-ikon {
    width: 100px; height: 100px;
    background: linear-gradient(135deg, var(--mor), #4c1d95);
    border-radius: 24px;
    display: flex; align-items: center; justify-content: center;
    font-size: 50px;
    margin: 0 auto 20px;
    box-shadow: 0 15px 35px rgba(126,34,206,0.3);
}
.modul-hero-premium {
    display: inline-block;
    background: linear-gradient(135deg, var(--mor), #4c1d95);
    color: #fff;
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.8px;
    margin-bottom: 16px;
}
.modul-hero-stat { display: flex; flex-direction: column; gap: 6px; }
.modul-hero-stat .satir {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--kenar);
    border-radius: 10px;
    font-size: 13px;
}
.modul-hero-stat .label { color: var(--metin-acik); font-weight: 500; }
.modul-hero-stat .deger { font-weight: 800; font-size: 15px; color: var(--mor); }

/* İÇERİK LİSTESİ (ders listesi) */
.icerik-liste {
    display: flex; flex-direction: column; gap: 10px;
}
.icerik-item {
    display: grid;
    grid-template-columns: 60px 1fr 40px;
    gap: 16px;
    align-items: center;
    padding: 18px 22px;
    background: #fff;
    border: 1px solid var(--kenar);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--metin);
    transition: all 0.2s;
}
.icerik-item:hover:not(.kilitli) {
    border-color: var(--mor);
    transform: translateX(4px);
    box-shadow: var(--shadow);
    color: var(--metin);
}
.icerik-item.kilitli {
    background: linear-gradient(135deg, #fafafa, #fff);
    opacity: 0.75;
}
.icerik-numara {
    font-size: 24px; font-weight: 900;
    color: var(--mor);
    opacity: 0.5;
    text-align: center;
}
.icerik-item:hover:not(.kilitli) .icerik-numara { opacity: 1; }
.icerik-metin h4 {
    font-size: 16px; font-weight: 700;
    margin-bottom: 4px;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.icerik-metin p {
    font-size: 13px; color: var(--metin-acik);
    margin: 0;
    line-height: 1.6;
}
.icerik-premium-rozet {
    background: linear-gradient(135deg, var(--mor), #4c1d95);
    color: #fff;
    font-size: 10px; font-weight: 700;
    padding: 2px 8px; border-radius: 100px;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.icerik-git {
    font-size: 22px; color: var(--mor);
    font-weight: 700;
    text-align: center;
    transition: transform 0.15s;
}
.icerik-item:hover:not(.kilitli) .icerik-git { transform: translateX(4px); }

/* PREMIUM CTA KUTU */
.premium-cta, .premium-kilit {
    background: linear-gradient(135deg, #faf5ff, #eff6ff);
    border: 2px solid var(--mor);
    border-radius: var(--radius-lg);
    padding: 40px 32px;
    text-align: center;
}
.premium-cta h3, .premium-kilit h2 {
    font-size: 24px; font-weight: 800;
    margin-bottom: 12px;
    background: linear-gradient(135deg, var(--mor), #4c1d95);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.premium-cta p, .premium-kilit p {
    color: var(--metin-acik); font-size: 15px;
    margin-bottom: 6px;
    max-width: 520px; margin-left: auto; margin-right: auto;
}
.premium-ozellikler {
    list-style: none;
    padding: 0;
    max-width: 400px; margin: 20px auto 0;
    text-align: left;
}
.premium-ozellikler li {
    padding: 8px 0;
    color: var(--metin);
    font-size: 14px;
}

/* İÇERİK HERO (ders detay) */
.icerik-hero {
    background: linear-gradient(135deg, #faf5ff 0%, #fdf4ff 100%);
    padding: 48px 0;
    border-bottom: 1px solid var(--kenar);
}
.icerik-hero-ic { max-width: 820px; margin: 0 auto; }
.icerik-modul-rozet {
    display: inline-block;
    background: rgba(126,34,206,0.1);
    color: var(--mor);
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 12px; font-weight: 700;
    margin-bottom: 18px;
    text-transform: uppercase; letter-spacing: 1px;
}
.icerik-hero h1 {
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 800;
    letter-spacing: -0.6px;
    line-height: 1.2;
    margin-bottom: 14px;
    color: var(--metin);
}

/* PROMPT ÖRNEKLERİ (akademik) */
.akademik-prompt-liste {
    display: flex; flex-direction: column; gap: 16px;
}
.akademik-prompt-kart {
    background: #fff;
    border: 1px solid var(--kenar);
    border-radius: var(--radius);
    overflow: hidden;
}
.akademik-prompt-ust {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 18px;
    background: linear-gradient(90deg, #faf5ff, #fff);
    border-bottom: 1px solid var(--kenar);
    gap: 12px;
}
.akademik-prompt-ust h4 {
    font-size: 15px; font-weight: 700;
    display: flex; align-items: center; gap: 10px;
    margin: 0;
}
.prompt-num {
    width: 28px; height: 28px;
    background: linear-gradient(135deg, var(--mor), #4c1d95);
    color: #fff;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800;
}
.kopyala-btn {
    background: var(--mor);
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px; font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.kopyala-btn:hover { background: var(--mor-koyu); transform: translateY(-1px); }

.akademik-prompt-metin {
    padding: 18px;
    background: #0f172a;
    color: #cbd5e1;
    font-family: 'SF Mono', Monaco, 'Cascadia Mono', monospace;
    font-size: 13px;
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-word;
}

/* İPUCU KUTU */
.ipucu-kutu {
    background: linear-gradient(135deg, #eff6ff, #fff);
    border: 2px solid #bfdbfe;
    border-radius: var(--radius-lg);
    padding: 24px 28px;
}
.ipucu-baslik {
    font-size: 18px; font-weight: 800;
    color: var(--mavi);
    margin-bottom: 12px;
}
.ipucu-icerik { font-size: 15px; line-height: 1.75; color: var(--metin); }

/* DIKKAT (ETIK) KUTU */
.dikkat-kutu {
    background: linear-gradient(135deg, #fef3c7, #fff);
    border: 2px solid #fcd34d;
    border-radius: var(--radius-lg);
    padding: 24px 28px;
}
.dikkat-baslik {
    font-size: 18px; font-weight: 800;
    color: #854d0e;
    margin-bottom: 12px;
}
.dikkat-icerik { font-size: 15px; line-height: 1.75; color: #78350f; }
.dikkat-link {
    display: inline-block;
    margin-top: 14px;
    color: #854d0e;
    font-weight: 700;
    font-size: 14px;
}
.dikkat-link:hover { color: #422006; }

/* ETİK SAYFASI */
.etik-ilke-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}
.etik-ilke {
    background: #fff;
    border: 1px solid var(--kenar);
    border-radius: var(--radius);
    padding: 26px 22px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s;
}
.etik-ilke:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.etik-ilke-num {
    position: absolute;
    top: 16px; right: 20px;
    font-size: 42px; font-weight: 900;
    color: rgba(126,34,206,0.1);
    letter-spacing: -2px;
    line-height: 1;
}
.etik-ilke h3 {
    font-size: 17px; font-weight: 800;
    color: var(--mor);
    margin-bottom: 10px;
    position: relative; z-index: 1;
}
.etik-ilke p {
    font-size: 14px; color: var(--metin-acik);
    line-height: 1.65;
}
.etik-ilke strong { color: var(--metin); }

.etik-yapabilirsin-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.etik-yap, .etik-yapma {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 26px;
}
.etik-yap {
    background: linear-gradient(135deg, #f0fdf4, #fff);
    border: 2px solid #bbf7d0;
}
.etik-yapma {
    background: linear-gradient(135deg, #fef2f2, #fff);
    border: 2px solid #fecaca;
}
.etik-yap h4 {
    color: #166534; font-size: 18px; margin-bottom: 16px;
}
.etik-yapma h4 {
    color: #991b1b; font-size: 18px; margin-bottom: 16px;
}
.etik-yap ul, .etik-yapma ul {
    list-style: none; padding: 0; margin: 0;
}
.etik-yap li, .etik-yapma li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    font-size: 14px;
    line-height: 1.6;
}
.etik-yap li:last-child, .etik-yapma li:last-child { border-bottom: none; }
.etik-yap strong, .etik-yapma strong { color: var(--metin); }

.etik-sss {
    display: flex; flex-direction: column; gap: 10px;
}
.etik-sss details {
    background: #fff;
    border: 1px solid var(--kenar);
    border-radius: var(--radius);
    padding: 0;
    overflow: hidden;
    transition: border-color 0.2s;
}
.etik-sss details[open] { border-color: var(--mor); box-shadow: var(--shadow); }
.etik-sss summary {
    padding: 16px 20px;
    font-weight: 700;
    cursor: pointer;
    font-size: 15px;
    display: flex; justify-content: space-between; align-items: center;
    list-style: none;
}
.etik-sss summary::-webkit-details-marker { display: none; }
.etik-sss summary::after {
    content: '+';
    font-size: 24px; font-weight: 400;
    color: var(--mor);
    transition: transform 0.2s;
}
.etik-sss details[open] summary::after { content: '−'; }
.etik-sss p {
    padding: 0 20px 20px;
    color: var(--metin-acik);
    line-height: 1.75;
    font-size: 14px;
    margin: 0;
}

/* AKADEMIK BULTEN CTA */
.akademik-bulten {
    background: linear-gradient(135deg, #4c1d95 0%, #6b21a8 50%, var(--mor) 100%);
    border-radius: var(--radius-lg);
    padding: 50px 40px;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.akademik-bulten::before {
    content: ''; position: absolute;
    top: -50%; right: -20%;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(249,115,22,0.2), transparent 70%);
    pointer-events: none;
}
.akademik-bulten > * { position: relative; z-index: 2; }
.akademik-bulten h3 { font-size: clamp(22px, 3vw, 30px); font-weight: 800; margin-bottom: 14px; }
.akademik-bulten p { opacity: 0.9; font-size: 15px; margin-bottom: 28px; max-width: 620px; margin-left: auto; margin-right: auto; }
.akademik-bulten .bulten-form { max-width: 520px; margin: 0 auto; display: flex; gap: 10px; flex-wrap: wrap; }
.akademik-bulten .bulten-form input {
    flex: 1; min-width: 220px;
    padding: 14px 20px;
    border: 1.5px solid rgba(255,255,255,0.2);
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.1); color: #fff;
    font-size: 15px; font-family: inherit;
    outline: none;
}
.akademik-bulten .bulten-form input::placeholder { color: rgba(255,255,255,0.6); }

/* RESPONSIVE */
@media (max-width: 960px) {
    .akademik-hero-grid,
    .modul-hero-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .modul-hero-kart { max-width: 100%; margin: 0; }
    .akademik-hero-gorsel { min-height: 240px; }
    .akademik-simge-daire { width: 220px; height: 220px; }
    .simge-ic { width: 90px; height: 90px; font-size: 44px; }
    .orbital { width: 40px; height: 40px; font-size: 18px; }
    .orbital.s1 { left: 90px; } .orbital.s4 { left: 90px; }
    .etik-yapabilirsin-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .akademik-hero-istatistik { flex-wrap: wrap; gap: 16px; padding: 16px 20px; }
    .akademik-hero-istatistik .sayi { font-size: 28px; }
    .akademik-hero { padding: 44px 0 50px; }
    .etik-serit-ic { flex-direction: column; text-align: center; }
    .etik-link { margin-left: 0; }
    .icerik-item { grid-template-columns: 40px 1fr 30px; padding: 14px 16px; }
    .icerik-numara { font-size: 18px; }
    .modul-numara { font-size: 40px; top: 18px; right: 18px; }
}

/* ============================================================
   AUTH SAYFALARI (Kayıt, Giriş, Şifre Sıfırla)
   ============================================================ */

.auth-sayfa {
    background: linear-gradient(135deg, #eff6ff 0%, #faf5ff 50%, #fff7ed 100%);
    padding: 60px 0;
    min-height: calc(100vh - 200px);
}

.auth-layout {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
    align-items: center;
}
.auth-layout-dar {
    grid-template-columns: 1fr;
    max-width: 480px;
}

.auth-form-kutu {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 40px;
    box-shadow: 0 20px 50px -15px rgba(30,99,237,0.15);
    border: 1px solid var(--kenar);
}
.auth-ust {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--kenar);
}
.auth-ust h1 {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-top: 12px;
    margin-bottom: 8px;
    color: var(--metin);
}
.auth-ust p {
    color: var(--metin-acik);
    font-size: 15px;
    line-height: 1.6;
}

.auth-form { display: flex; flex-direction: column; gap: 18px; }

.form-grup { display: flex; flex-direction: column; gap: 6px; }
.form-grup label {
    font-size: 13px;
    font-weight: 600;
    color: var(--metin);
    letter-spacing: 0.2px;
}
.form-grup input[type="text"],
.form-grup input[type="email"],
.form-grup input[type="password"],
.form-grup input[type="tel"],
.form-grup input[type="url"],
.form-grup select,
.form-grup textarea {
    padding: 11px 14px;
    border: 1.5px solid var(--kenar);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 14px;
    color: var(--metin);
    background: #fff;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
}
.form-grup input:focus,
.form-grup select:focus,
.form-grup textarea:focus {
    border-color: var(--mavi);
    box-shadow: 0 0 0 3px rgba(30,99,237,0.1);
}
.form-grup small {
    font-size: 12px;
    color: var(--metin-silik);
    margin-top: 2px;
}

.form-grid-ikili {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.form-checkbox-grup {
    display: flex; flex-direction: column; gap: 10px;
    margin: 4px 0;
}
.form-checkbox {
    display: flex; align-items: flex-start; gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--metin);
    line-height: 1.5;
}
.form-checkbox input[type="checkbox"] {
    margin-top: 3px;
    width: 16px; height: 16px;
    accent-color: var(--mavi);
    cursor: pointer;
}
.form-checkbox span { flex: 1; }
.form-checkbox a { color: var(--mavi); }

.form-hata-kutu {
    background: linear-gradient(90deg, #fef2f2, #fff);
    border: 1px solid #fecaca;
    border-left: 4px solid var(--kirmizi);
    color: #991b1b;
    padding: 14px 18px;
    border-radius: 0 var(--radius) var(--radius) 0;
    margin-bottom: 20px;
    font-size: 14px;
}
.form-hata-kutu strong { display: block; margin-bottom: 8px; color: #7f1d1d; }
.form-hata-kutu ul { list-style: disc; margin: 0 0 0 20px; padding: 0; }
.form-hata-kutu li { margin-bottom: 4px; }
.form-hata-kutu a { color: #7f1d1d; text-decoration: underline; font-weight: 600; }

.form-basari-kutu {
    background: linear-gradient(90deg, #f0fdf4, #fff);
    border: 1px solid #bbf7d0;
    border-left: 4px solid var(--yesil);
    color: #166534;
    padding: 14px 18px;
    border-radius: 0 var(--radius) var(--radius) 0;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 500;
}

.auth-alt-link {
    text-align: center;
    margin-top: 16px;
    font-size: 14px;
    color: var(--metin-acik);
}
.auth-alt-link a { color: var(--mavi); font-weight: 600; }

/* Auth tanıtım kartı (sağ sütun) */
.auth-tanitim-kutu {
    background: linear-gradient(135deg, #fff 0%, #faf5ff 100%);
    border: 2px solid var(--kenar);
    border-radius: var(--radius-lg);
    padding: 36px 32px;
    position: relative;
    overflow: hidden;
}
.auth-tanitim-kutu::before {
    content: ''; position: absolute;
    top: -30%; right: -20%;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(249,115,22,0.08), transparent 70%);
    pointer-events: none;
}
.auth-tanitim-kutu > * { position: relative; z-index: 1; }
.auth-tanitim-kutu h3 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 24px;
    color: var(--metin);
    letter-spacing: -0.3px;
}
.auth-avantaj-liste {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 16px;
}
.auth-avantaj-liste li {
    display: flex; gap: 14px; align-items: flex-start;
}
.auth-avantaj-liste .ikon {
    width: 40px; height: 40px;
    background: linear-gradient(135deg, var(--mavi), var(--mor));
    color: #fff;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.auth-avantaj-liste div { flex: 1; display: flex; flex-direction: column; }
.auth-avantaj-liste strong {
    font-size: 14px;
    color: var(--metin);
    margin-bottom: 2px;
}
.auth-avantaj-liste span {
    font-size: 13px;
    color: var(--metin-acik);
    line-height: 1.5;
}
.auth-tanitim-alt {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--kenar);
}

/* ============================================================
   PANEL (Dashboard) SAYFALARI
   ============================================================ */

.panel-hero {
    background: linear-gradient(135deg, #1e3a8a 0%, #4c1d95 50%, #7e22ce 100%);
    color: #fff;
    padding: 44px 0 50px;
    position: relative;
    overflow: hidden;
}
.panel-hero::before {
    content: ''; position: absolute;
    top: -30%; right: -15%;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(249,115,22,0.2), transparent 70%);
    pointer-events: none;
}
.panel-hero > .konteyner { position: relative; z-index: 2; }

.panel-hero-ic {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 28px;
    align-items: center;
}

.panel-avatar-kutu {
    position: relative;
    flex-shrink: 0;
}
.panel-avatar {
    width: 80px; height: 80px;
    background: linear-gradient(135deg, var(--turuncu), #fbbf24);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 10px 30px rgba(249,115,22,0.4);
    text-transform: uppercase;
}
.panel-avatar-img {
    width: 80px; height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,0.2);
}
.panel-premium-rozet {
    position: absolute;
    bottom: -4px; right: -4px;
    width: 28px; height: 28px;
    background: linear-gradient(135deg, var(--turuncu), #fbbf24);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    border: 2px solid #fff;
}

.panel-karsilama { min-width: 0; }
.panel-etiket {
    display: inline-block;
    padding: 5px 12px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 10px;
    color: rgba(255,255,255,0.95);
}
.panel-karsilama h1 {
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 6px;
}
.panel-karsilama p {
    color: rgba(255,255,255,0.75);
    font-size: 15px;
    margin: 0;
}

.panel-hero-stat {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
}
.panel-hero-stat-item {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    padding: 12px 18px;
    text-align: center;
    min-width: 90px;
}
.panel-hero-stat-item .sayi {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}
.panel-hero-stat-item .etiket {
    font-size: 11px;
    color: rgba(255,255,255,0.75);
    margin-top: 4px;
    font-weight: 600;
}

/* Panel layout: sidebar menü + içerik */
.panel-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 32px;
    align-items: start;
    padding: 40px 0;
}

.panel-menu {
    position: sticky;
    top: 90px;
    background: #fff;
    border: 1px solid var(--kenar);
    border-radius: var(--radius);
    padding: 12px;
}
.panel-menu nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.panel-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    color: var(--metin);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.15s;
}
.panel-menu-item:hover {
    background: var(--bg-sogk);
    color: var(--mavi);
    transform: translateX(2px);
}
.panel-menu-item.aktif {
    background: linear-gradient(135deg, var(--mavi-acik), var(--mor-acik));
    color: var(--mavi);
    font-weight: 700;
}
.panel-menu-item span { flex: 1; }
.panel-menu-premium {
    background: linear-gradient(135deg, rgba(126,34,206,0.08), rgba(249,115,22,0.08));
    color: var(--mor) !important;
    font-weight: 700 !important;
    margin-top: 6px;
}
.panel-menu-premium:hover {
    background: linear-gradient(135deg, var(--mor), #4c1d95) !important;
    color: #fff !important;
}
.panel-menu-cikis {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--kenar);
    color: var(--metin-acik) !important;
}
.panel-menu-cikis:hover {
    background: #fef2f2 !important;
    color: var(--kirmizi) !important;
}

.panel-icerik { min-width: 0; }

/* Profili tamamla uyarısı */
.panel-uyari-kutu {
    background: linear-gradient(135deg, #fef3c7, #fff);
    border: 2px solid #fcd34d;
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-bottom: 28px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: center;
}
.panel-uyari-ikon {
    font-size: 32px;
    flex-shrink: 0;
}
.panel-uyari-metin strong {
    display: block;
    color: #854d0e;
    font-size: 16px;
    margin-bottom: 4px;
}
.panel-uyari-metin p {
    color: #78350f;
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

/* Panel stat grid */
.panel-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 40px;
}
.panel-stat-kart {
    background: #fff;
    border: 1px solid var(--kenar);
    border-radius: var(--radius);
    padding: 20px;
    transition: all 0.2s;
}
.panel-stat-kart:hover {
    border-color: var(--mavi);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}
.panel-stat-ust {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.panel-stat-ust .ikon {
    font-size: 18px;
}
.panel-stat-ust .etiket {
    font-size: 11px;
    color: var(--metin-silik);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 700;
}
.panel-stat-kart .deger {
    font-size: 28px;
    font-weight: 800;
    color: var(--metin);
    line-height: 1.1;
    margin-bottom: 6px;
}
.panel-stat-kart .alt {
    font-size: 12px;
    color: var(--metin-acik);
    line-height: 1.4;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
    .auth-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .auth-tanitim { order: -1; }
    .panel-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .panel-menu {
        position: static;
    }
    .panel-menu nav {
        flex-direction: row;
        overflow-x: auto;
        gap: 4px;
    }
    .panel-menu-item {
        white-space: nowrap;
        padding: 8px 12px;
        font-size: 13px;
    }
    .panel-menu-item span { display: inline; }
    .panel-menu-cikis { margin-top: 0; padding-top: 0; border-top: none; }

    .panel-hero-ic {
        grid-template-columns: auto 1fr;
        gap: 18px;
    }
    .panel-hero-stat {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .auth-form-kutu { padding: 28px 22px; }
    .form-grid-ikili { grid-template-columns: 1fr; gap: 14px; }
    .auth-ust h1 { font-size: 24px; }
    .panel-avatar, .panel-avatar-img { width: 64px; height: 64px; }
    .panel-avatar { font-size: 24px; }
    .panel-hero-stat { gap: 8px; flex-wrap: wrap; }
    .panel-hero-stat-item { min-width: 0; flex: 1; padding: 10px 12px; }
    .panel-hero-stat-item .sayi { font-size: 18px; }
    .panel-uyari-kutu { grid-template-columns: 1fr; text-align: center; gap: 12px; }
}

/* ============================================================
   İLETİŞİM SAYFASI
   ============================================================ */

.iletisim-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 32px;
    align-items: start;
}
.iletisim-form-kutu {
    background: #fff;
    border: 1px solid var(--kenar);
    border-radius: var(--radius-lg);
    padding: 36px;
    box-shadow: 0 10px 30px -10px rgba(30,99,237,0.1);
}
.iletisim-bilgi {
    display: flex; flex-direction: column; gap: 16px;
}
.iletisim-bilgi-kutu {
    background: #fff;
    border: 1px solid var(--kenar);
    border-radius: var(--radius);
    padding: 24px;
}
.iletisim-bilgi-kutu h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 18px;
    color: var(--metin);
}
.iletisim-item {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid var(--kenar);
}
.iletisim-item:last-child { border-bottom: none; }
.iletisim-item .ikon {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}
.iletisim-item strong {
    display: block;
    font-size: 13px;
    color: var(--metin);
    margin-bottom: 3px;
}
.iletisim-item a, .iletisim-item span {
    color: var(--metin-acik);
    font-size: 14px;
    word-break: break-word;
}
.iletisim-item a:hover { color: var(--mavi); }

.sosyal-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.15s;
}
.sosyal-btn:hover {
    background: rgba(255,255,255,0.25);
    color: #fff;
    transform: translateY(-1px);
}

.iletisim-basari {
    background: linear-gradient(135deg, #f0fdf4, #fff);
    border: 2px solid #bbf7d0;
    border-radius: var(--radius-lg);
    padding: 50px 40px;
    text-align: center;
    max-width: 600px;
    margin: 40px auto;
}
.iletisim-basari-ikon {
    width: 80px; height: 80px;
    background: linear-gradient(135deg, var(--yesil), #10b981);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 40px;
    font-weight: 800;
    margin: 0 auto 20px;
    box-shadow: 0 15px 35px rgba(22,163,74,0.3);
}
.iletisim-basari h2 {
    font-size: 28px;
    font-weight: 800;
    color: var(--yesil);
    margin-bottom: 10px;
}
.iletisim-basari p {
    color: var(--metin-acik);
    margin-bottom: 24px;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   DEĞERLER (Hakkımızda)
   ============================================================ */

.deger-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.deger-kart {
    background: #fff;
    border: 1px solid var(--kenar);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    transition: all 0.2s;
}
.deger-kart:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--mavi);
}
.deger-ikon {
    width: 56px; height: 56px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    margin-bottom: 18px;
    box-shadow: 0 10px 25px -8px rgba(0,0,0,0.15);
}
.deger-kart h3 {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 10px;
    color: var(--metin);
}
.deger-kart p {
    font-size: 14px;
    color: var(--metin-acik);
    line-height: 1.7;
}
.deger-kart strong { color: var(--metin); }

/* ============================================================
   STATİK SAYFA İÇERİK (KVKK, Kullanım Şartları, Çerezler)
   ============================================================ */

.statik-sayfa-icerik {
    background: #fff;
    border: 1px solid var(--kenar);
    border-radius: var(--radius-lg);
    padding: 48px 40px;
    font-size: 15px;
    line-height: 1.8;
}
.statik-sayfa-tarih {
    padding: 14px 18px;
    background: linear-gradient(90deg, var(--mavi-acik), transparent);
    border-left: 4px solid var(--mavi);
    border-radius: 0 8px 8px 0;
    margin-bottom: 30px;
    font-size: 13px;
    color: var(--metin-acik);
}
.statik-sayfa-tarih strong { color: var(--metin); }
.statik-sayfa-icerik h2 {
    font-size: 22px;
    font-weight: 800;
    margin: 36px 0 14px;
    color: var(--metin);
    letter-spacing: -0.3px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--kenar);
}
.statik-sayfa-icerik h2:first-child { margin-top: 0; }
.statik-sayfa-icerik h3 {
    font-size: 17px;
    font-weight: 700;
    margin: 24px 0 10px;
    color: var(--mor);
}
.statik-sayfa-icerik p {
    margin-bottom: 16px;
    color: var(--metin);
}
.statik-sayfa-icerik ul, .statik-sayfa-icerik ol {
    margin: 12px 0 20px 24px;
    color: var(--metin);
}
.statik-sayfa-icerik li {
    margin-bottom: 8px;
    line-height: 1.7;
}
.statik-sayfa-icerik a {
    color: var(--mavi);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.statik-sayfa-icerik a:hover { color: var(--mavi-koyu); }
.statik-sayfa-icerik strong { color: var(--metin); font-weight: 700; }

.statik-sayfa-cta {
    margin-top: 40px;
    padding: 28px;
    background: linear-gradient(135deg, var(--mavi-acik), var(--mor-acik));
    border-radius: var(--radius);
    text-align: center;
}
.statik-sayfa-cta h3 {
    color: var(--metin);
    font-size: 20px;
    margin-bottom: 10px;
    border: none;
    padding: 0;
}
.statik-sayfa-cta p {
    color: var(--metin-acik);
    margin-bottom: 16px;
}

/* Responsive */
@media (max-width: 860px) {
    .iletisim-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

@media (max-width: 640px) {
    .iletisim-form-kutu { padding: 24px 20px; }
    .statik-sayfa-icerik { padding: 28px 22px; }
    .statik-sayfa-icerik h2 { font-size: 19px; }
}

/* ============================================================
   AI UYUM TESTİ — Hero, Form, Sorular, Sonuç
   ============================================================ */

.uyum-hero {
    background: linear-gradient(135deg, #1e40af 0%, #4c1d95 50%, #7e22ce 100%);
    color: #fff;
    padding: 60px 0 70px;
    position: relative;
    overflow: hidden;
}
.uyum-hero::before {
    content: ''; position: absolute;
    top: -40%; right: -15%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(249,115,22,0.2), transparent 70%);
    pointer-events: none;
}
.uyum-hero::after {
    content: ''; position: absolute;
    bottom: -30%; left: -10%;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(168,85,247,0.15), transparent 70%);
    pointer-events: none;
}
.uyum-hero > .konteyner { position: relative; z-index: 2; }
.uyum-hero .breadcrumb a:hover { color: var(--turuncu) !important; }
.uyum-hero .hero-kategori-etiket {
    background: rgba(249,115,22,0.2) !important;
    border: 1px solid rgba(249,115,22,0.4);
    color: var(--turuncu) !important;
}
.uyum-hero h1 {
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 800;
    letter-spacing: -1.2px;
    line-height: 1.1;
    margin-bottom: 20px;
    color: #fff;
}
.uyum-hero h1 .vurgu {
    background: linear-gradient(90deg, var(--turuncu), #fbbf24);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.uyum-hero .hero-aciklama {
    color: rgba(255,255,255,0.88);
    font-size: 17px; line-height: 1.7;
    margin-bottom: 26px;
    max-width: 560px;
}

.uyum-hero-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 40px;
    align-items: center;
}

.uyum-ozellikler {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-width: 480px;
}
.uyum-ozellik {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    font-size: 14px;
    color: rgba(255,255,255,0.92);
}
.uyum-ozellik .ikon { font-size: 18px; }

.uyum-hero-gorsel {
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
}
.uyum-ornek-donut {
    position: relative;
    width: 200px; height: 200px;
}
.uyum-ornek-donut svg {
    width: 100%; height: 100%;
}
.uyum-ornek-ic {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
}
.uyum-ornek-ic .sayi {
    font-size: 56px; font-weight: 800;
    line-height: 1;
    background: linear-gradient(90deg, var(--turuncu), #fbbf24);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.uyum-ornek-ic .alt {
    font-size: 14px; color: rgba(255,255,255,0.7);
    margin-top: 4px;
}

/* ====== TEST FORMU ====== */
.uyum-form {
    padding: 40px 0;
}

.uyum-ilerleme {
    margin-bottom: 40px;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid var(--kenar);
    border-radius: var(--radius);
    position: sticky;
    top: 90px;
    z-index: 5;
    box-shadow: var(--shadow);
}
.uyum-ilerleme-metin {
    font-size: 13px;
    font-weight: 700;
    color: var(--mor);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.uyum-ilerleme-bar {
    height: 8px;
    background: var(--bg-sogk);
    border-radius: 100px;
    overflow: hidden;
}
.uyum-ilerleme-ic {
    height: 100%;
    background: linear-gradient(90deg, var(--mavi), var(--mor));
    border-radius: 100px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.uyum-soru {
    display: none;
    background: #fff;
    border: 1px solid var(--kenar);
    border-radius: var(--radius-lg);
    padding: 40px;
    position: relative;
    min-height: 460px;
    animation: soruGiris 0.4s ease-out;
}
.uyum-soru.aktif { display: flex; flex-direction: column; }

@keyframes soruGiris {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes sallanma {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-8px); }
    75% { transform: translateX(8px); }
}

.uyum-soru-numara {
    position: absolute;
    top: 24px; right: 30px;
    font-size: 72px; font-weight: 900;
    color: rgba(126,34,206,0.08);
    line-height: 1;
    letter-spacing: -3px;
    pointer-events: none;
}
.uyum-soru h2 {
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 10px;
    color: var(--metin);
    padding-right: 80px;
    line-height: 1.3;
}
.uyum-soru-aciklama {
    color: var(--metin-acik);
    font-size: 15px;
    margin-bottom: 28px;
    line-height: 1.6;
}

.uyum-select {
    width: 100%;
    padding: 16px 20px;
    border: 2px solid var(--kenar);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 16px;
    color: var(--metin);
    background: #fff;
    outline: none;
    transition: border-color 0.15s;
}
.uyum-select:focus {
    border-color: var(--mor);
    box-shadow: 0 0 0 4px rgba(126,34,206,0.08);
}

.uyum-secenekler {
    display: flex; flex-direction: column; gap: 10px;
    margin-bottom: 8px;
}
.uyum-secenek {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 20px;
    background: #fff;
    border: 2px solid var(--kenar);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.15s;
    font-size: 15px;
    color: var(--metin);
    line-height: 1.5;
}
.uyum-secenek:hover {
    border-color: var(--mor);
    background: linear-gradient(90deg, rgba(126,34,206,0.03), transparent);
    transform: translateX(2px);
}
.uyum-secenek input[type="radio"] {
    accent-color: var(--mor);
    width: 20px; height: 20px;
    cursor: pointer;
    flex-shrink: 0;
}
.uyum-secenek input[type="radio"]:checked + span {
    color: var(--mor);
    font-weight: 600;
}
.uyum-secenek:has(input:checked) {
    border-color: var(--mor);
    border-left-width: 6px;
    background: linear-gradient(90deg, rgba(126,34,206,0.06), transparent);
    box-shadow: 0 8px 20px -8px rgba(126,34,206,0.15);
}
.uyum-secenek span strong {
    color: var(--metin);
    font-weight: 700;
}

.uyum-nav {
    margin-top: auto;
    padding-top: 24px;
    display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    border-top: 1px solid var(--kenar);
}
.uyum-nav .btn { min-width: 140px; }

/* ====== SONUÇ SAYFASI ====== */
.uyum-sonuc-hero {
    padding: 60px 0 70px;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.uyum-sonuc-hero.kirmizi {
    background: linear-gradient(135deg, #991b1b 0%, #dc2626 50%, #ef4444 100%);
}
.uyum-sonuc-hero.turuncu {
    background: linear-gradient(135deg, #9a3412 0%, #ea580c 50%, #f97316 100%);
}
.uyum-sonuc-hero.mavi {
    background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 50%, #2563eb 100%);
}
.uyum-sonuc-hero.mor {
    background: linear-gradient(135deg, #4c1d95 0%, #6b21a8 50%, #7e22ce 100%);
}
.uyum-sonuc-hero::before {
    content: ''; position: absolute;
    top: -40%; right: -15%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 70%);
    pointer-events: none;
}
.uyum-sonuc-hero > .konteyner { position: relative; z-index: 2; }

.uyum-sonuc-ic {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 50px;
    align-items: center;
}

.uyum-sonuc-etiket {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 18px;
    text-transform: uppercase;
}
.uyum-sonuc-hero h1 {
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 800;
    letter-spacing: -1.2px;
    line-height: 1.1;
    margin-bottom: 18px;
    color: #fff;
}
.uyum-sonuc-hero h1 .vurgu {
    color: #fff;
    text-shadow: 0 2px 20px rgba(0,0,0,0.2);
    border-bottom: 3px dashed rgba(255,255,255,0.5);
    padding-bottom: 4px;
}
.uyum-sonuc-ozet {
    font-size: 18px;
    color: rgba(255,255,255,0.92);
    line-height: 1.7;
    margin-bottom: 22px;
    max-width: 560px;
}
.uyum-sonuc-alt-etiket {
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.uyum-paylasim {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.uyum-paylasim-btn {
    width: 42px; height: 42px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.15s;
}
.uyum-paylasim-btn:hover {
    background: rgba(255,255,255,0.3);
    transform: translateY(-2px) scale(1.05);
    color: #fff;
}

.uyum-sonuc-sag {
    display: flex; justify-content: center;
}
.uyum-skor-donut {
    position: relative;
    width: 260px; height: 260px;
}
.uyum-skor-donut svg {
    width: 100%; height: 100%;
    filter: drop-shadow(0 10px 30px rgba(0,0,0,0.2));
}
.uyum-skor-ic {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
}
.uyum-skor-buyuk {
    font-size: 80px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -3px;
    color: #fff;
}
.uyum-skor-alt {
    font-size: 16px;
    color: rgba(255,255,255,0.75);
    margin-top: 6px;
    font-weight: 600;
}

/* Detay kartlar (meslek/görev/hazırlık) */
.uyum-detay-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}
.uyum-detay-kart {
    background: #fff;
    border: 1px solid var(--kenar);
    border-radius: var(--radius);
    padding: 24px;
    transition: transform 0.2s;
}
.uyum-detay-kart:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.uyum-detay-ust {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 14px;
}
.uyum-detay-ust .ikon { font-size: 24px; }
.uyum-detay-ust .baslik {
    font-size: 15px; font-weight: 700;
    color: var(--metin);
}
.uyum-detay-ust .etiket {
    font-size: 11px; color: var(--metin-silik);
    text-transform: uppercase; letter-spacing: 0.8px;
    font-weight: 600;
    margin-top: 2px;
}
.uyum-detay-skor {
    font-size: 32px; font-weight: 800;
    color: var(--metin);
    line-height: 1;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}
.uyum-detay-bar {
    height: 8px;
    background: var(--bg-sogk);
    border-radius: 100px;
    overflow: hidden;
    margin-bottom: 12px;
}
.uyum-detay-bar-ic {
    height: 100%;
    border-radius: 100px;
    transition: width 0.6s ease-out;
}
.uyum-detay-kart p {
    font-size: 13px;
    color: var(--metin-acik);
    margin: 0;
    line-height: 1.6;
}
.uyum-detay-kart strong { color: var(--metin); }

/* Öneriler */
.uyum-oneri-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}
.uyum-oneri-kart {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 16px;
    align-items: center;
    padding: 18px 20px;
    background: linear-gradient(135deg, #fff, #fafafa);
    border: 1px solid var(--kenar);
    border-radius: var(--radius);
    transition: all 0.15s;
}
.uyum-oneri-kart:hover {
    border-color: var(--mor);
    transform: translateX(3px);
    box-shadow: var(--shadow);
}
.uyum-oneri-num {
    width: 44px; height: 44px;
    background: linear-gradient(135deg, var(--mor), #4c1d95);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    font-weight: 800;
}
.uyum-oneri-metin {
    font-size: 15px;
    line-height: 1.5;
    color: var(--metin);
}

/* Alt CTA (bülten + tekrar) */
.uyum-son-cta {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 20px;
    margin-top: 40px;
}
.uyum-bulten-kutu, .uyum-tekrar-kutu {
    padding: 32px;
    border-radius: var(--radius-lg);
    text-align: center;
}
.uyum-bulten-kutu {
    background: linear-gradient(135deg, var(--mavi), var(--mor));
    color: #fff;
}
.uyum-bulten-kutu h3 { color: #fff; font-size: 22px; margin-bottom: 8px; }
.uyum-bulten-kutu p { color: rgba(255,255,255,0.85); font-size: 14px; line-height: 1.6; }
.uyum-bulten-kutu .bulten-form {
    max-width: 420px; margin: 0 auto;
    display: flex; gap: 8px; flex-wrap: wrap;
}
.uyum-bulten-kutu .bulten-form input {
    flex: 1; min-width: 200px;
    padding: 12px 16px;
    border: 1.5px solid rgba(255,255,255,0.2);
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    outline: none;
}
.uyum-bulten-kutu .bulten-form input::placeholder { color: rgba(255,255,255,0.6); }

.uyum-tekrar-kutu {
    background: linear-gradient(135deg, #fff, #faf5ff);
    border: 2px solid var(--kenar);
}
.uyum-tekrar-kutu h3 { font-size: 22px; margin-bottom: 8px; color: var(--metin); }
.uyum-tekrar-kutu p { color: var(--metin-acik); font-size: 14px; line-height: 1.6; }

/* Responsive */
@media (max-width: 960px) {
    .uyum-hero-grid,
    .uyum-sonuc-ic {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .uyum-hero-gorsel { margin-top: 10px; }
    .uyum-son-cta { grid-template-columns: 1fr; }
    .uyum-skor-donut { width: 220px; height: 220px; }
    .uyum-skor-buyuk { font-size: 64px; }
}

@media (max-width: 640px) {
    .uyum-hero { padding: 44px 0 56px; }
    .uyum-ozellikler { grid-template-columns: 1fr; }
    .uyum-soru { padding: 28px 22px; }
    .uyum-soru-numara { font-size: 56px; top: 18px; right: 22px; }
    .uyum-soru h2 { padding-right: 60px; }
    .uyum-nav { flex-direction: column-reverse; }
    .uyum-nav .btn { width: 100%; }
    .uyum-sonuc-hero { padding: 44px 0 56px; }
    .uyum-skor-donut { width: 180px; height: 180px; }
    .uyum-skor-buyuk { font-size: 52px; }
    .uyum-bulten-kutu, .uyum-tekrar-kutu { padding: 24px 20px; }
}

/* ============================================================
   GLOBAL ARAMA SAYFASI
   ============================================================ */

.arama-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 60%, #4c1d95 100%);
    color: #fff;
    padding: 56px 0 60px;
    position: relative;
    overflow: hidden;
}
.arama-hero::before {
    content: ''; position: absolute;
    top: -40%; right: -10%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(249,115,22,0.15), transparent 70%);
    pointer-events: none;
}
.arama-hero > .konteyner { position: relative; z-index: 2; }
.arama-hero .breadcrumb a:hover { color: var(--turuncu) !important; }
.arama-hero-ic { max-width: 820px; }
.arama-hero h1 {
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 800;
    letter-spacing: -0.8px;
    line-height: 1.2;
    margin-bottom: 14px;
    color: #fff;
}
.arama-sorgu {
    background: linear-gradient(90deg, var(--turuncu), #fbbf24);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.arama-hero .hero-aciklama {
    color: rgba(255,255,255,0.85);
    margin-bottom: 24px;
    font-size: 16px;
    line-height: 1.6;
}

.arama-buyuk-form {
    display: flex;
    gap: 10px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius);
    padding: 8px;
    max-width: 640px;
}
.arama-buyuk-form input {
    flex: 1;
    padding: 14px 18px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 16px;
    font-family: inherit;
    outline: none;
}
.arama-buyuk-form input::placeholder { color: rgba(255,255,255,0.5); }
.arama-buyuk-form button { flex-shrink: 0; }

/* Popüler chip'ler (arama yoksa) */
.arama-populer { padding: 30px 0; }
.arama-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.arama-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid var(--kenar);
    border-radius: 100px;
    color: var(--metin);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.15s;
}
.arama-chip:hover {
    border-color: var(--mavi);
    background: var(--mavi-acik);
    color: var(--mavi);
    transform: translateY(-2px);
}
.arama-chip .ikon { font-size: 16px; }

/* Kategori sekmeleri */
.arama-sekmeler {
    display: flex;
    gap: 8px;
    margin-bottom: 36px;
    padding: 6px;
    background: var(--bg-sogk);
    border-radius: var(--radius);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.arama-sekme {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    color: var(--metin-acik);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.15s;
}
.arama-sekme:hover { background: rgba(255,255,255,0.6); color: var(--metin); }
.arama-sekme.aktif {
    background: #fff;
    color: var(--mavi);
    box-shadow: 0 2px 8px rgba(30,99,237,0.15);
}
.arama-sekme .sayi {
    background: rgba(0,0,0,0.08);
    color: inherit;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 100px;
    min-width: 24px;
    text-align: center;
}
.arama-sekme.aktif .sayi {
    background: var(--mavi);
    color: #fff;
}

/* Arama bölümleri */
.arama-bolum {
    margin-bottom: 50px;
}
.arama-bolum-ust {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--kenar);
}
.arama-bolum-ust h2 {
    font-size: 22px;
    font-weight: 800;
    color: var(--metin);
    letter-spacing: -0.3px;
}
.arama-bolum-sayi {
    font-size: 13px;
    color: var(--metin-silik);
    font-weight: 600;
}

/* Meslek arama kartları */
.arama-meslek-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 14px;
}
.arama-meslek-kart {
    display: grid;
    grid-template-columns: 56px 1fr 24px;
    gap: 14px;
    align-items: center;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--kenar);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--metin);
    transition: all 0.15s;
}
.arama-meslek-kart:hover {
    border-color: var(--mavi);
    transform: translateX(3px);
    box-shadow: var(--shadow);
    color: var(--metin);
}
.arama-meslek-kart .ikon {
    width: 56px; height: 56px;
    background: linear-gradient(135deg, var(--mavi), var(--mor));
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    color: #fff;
}
.arama-meslek-kart .icerik { min-width: 0; }
.arama-meslek-kart h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--metin);
}
.arama-meslek-kart p {
    font-size: 13px;
    color: var(--metin-acik);
    line-height: 1.5;
    margin: 0 0 8px;
}
.arama-meslek-kart .alt {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.arama-meslek-kart .etiket {
    font-size: 11px;
    padding: 2px 8px;
    background: var(--bg-sogk);
    color: var(--metin-acik);
    border-radius: 100px;
    font-weight: 600;
}
.arama-meslek-kart .skor {
    font-size: 11px;
    padding: 2px 8px;
    background: var(--mor-acik);
    color: var(--mor);
    border-radius: 100px;
    font-weight: 700;
}
.arama-meslek-kart .git {
    font-size: 20px;
    color: var(--mavi);
    font-weight: 700;
    text-align: center;
}

/* Prompt arama kartları */
.arama-prompt-liste {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.arama-prompt-kart {
    display: block;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid var(--kenar);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--metin);
    transition: all 0.15s;
}
.arama-prompt-kart:hover {
    border-color: var(--mor);
    transform: translateX(3px);
    box-shadow: var(--shadow);
    color: var(--metin);
}
.arama-prompt-ust {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 10px;
}
.arama-prompt-ust h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--metin);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.arama-prompt-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--metin-acik);
}
.arama-prompt-etiket {
    padding: 2px 8px;
    background: var(--mavi-acik);
    color: var(--mavi);
    border-radius: 100px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.arama-prompt-meta .seviye-baslangic { color: var(--yesil); font-weight: 600; }
.arama-prompt-meta .seviye-orta { color: var(--mavi); font-weight: 600; }
.arama-prompt-meta .seviye-ileri { color: var(--turuncu); font-weight: 600; }
.arama-prompt-meta .seviye-uzman { color: var(--mor); font-weight: 600; }
.arama-prompt-puan {
    padding: 4px 10px;
    background: linear-gradient(135deg, #fef3c7, #fff);
    border: 1px solid #fcd34d;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #854d0e;
    white-space: nowrap;
}
.arama-prompt-kart p {
    font-size: 13px;
    color: var(--metin-acik);
    line-height: 1.6;
    margin: 0;
}
.rozet-premium {
    background: linear-gradient(135deg, var(--mor), #4c1d95);
    color: #fff;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 100px;
    font-weight: 700;
}

/* Akademik arama kartları */
.arama-akademik-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 14px;
}
.arama-akademik-kart {
    display: grid;
    grid-template-columns: 56px 1fr 24px;
    gap: 14px;
    align-items: center;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--kenar);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--metin);
    transition: all 0.15s;
}
.arama-akademik-kart:hover {
    border-color: var(--mor);
    transform: translateX(3px);
    box-shadow: var(--shadow);
    color: var(--metin);
}
.arama-akademik-kart .ikon {
    width: 56px; height: 56px;
    background: linear-gradient(135deg, var(--mor), #4c1d95);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    color: #fff;
}
.arama-akademik-kart .icerik { min-width: 0; }
.arama-akademik-kart .tip-etiket {
    font-size: 11px;
    color: var(--mor);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 4px;
}
.arama-akademik-kart h3 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--metin);
    display: flex;
    align-items: center;
    gap: 8px;
}
.arama-akademik-kart p {
    font-size: 13px;
    color: var(--metin-acik);
    line-height: 1.5;
    margin: 0;
}
.arama-akademik-kart .git {
    font-size: 20px;
    color: var(--mor);
    font-weight: 700;
    text-align: center;
}

/* Responsive */
@media (max-width: 640px) {
    .arama-buyuk-form { flex-direction: column; }
    .arama-buyuk-form button { width: 100%; }
    .arama-meslek-kart, .arama-akademik-kart {
        grid-template-columns: 44px 1fr;
    }
    .arama-meslek-kart .git, .arama-akademik-kart .git { display: none; }
    .arama-meslek-kart .ikon, .arama-akademik-kart .ikon {
        width: 44px; height: 44px; font-size: 22px;
    }
}

/* ============================================================
   MESLEKAI ENDEKS SAYFASI
   ============================================================ */

.endeks-hero {
    background: linear-gradient(135deg, #0c4a6e 0%, #1e3a8a 50%, #4c1d95 100%);
    color: #fff;
    padding: 60px 0 70px;
    position: relative;
    overflow: hidden;
}
.endeks-hero::before {
    content: ''; position: absolute;
    top: -40%; right: -15%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(14,165,233,0.25), transparent 70%);
    pointer-events: none;
}
.endeks-hero::after {
    content: ''; position: absolute;
    bottom: -30%; left: -10%;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(249,115,22,0.15), transparent 70%);
    pointer-events: none;
}
.endeks-hero > .konteyner { position: relative; z-index: 2; }
.endeks-hero .breadcrumb a:hover { color: var(--turuncu) !important; }

.endeks-hero-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: center;
}

.endeks-hero h1 {
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 800;
    letter-spacing: -1.2px;
    line-height: 1.1;
    margin-bottom: 20px;
    color: #fff;
}
.endeks-hero h1 .vurgu {
    background: linear-gradient(90deg, #0ea5e9, #06b6d4, var(--turuncu));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.endeks-hero .hero-aciklama {
    color: rgba(255,255,255,0.88);
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 28px;
    max-width: 580px;
}
.endeks-hero .hero-aciklama strong { color: #fff; }

.endeks-hero-stat {
    display: flex;
    gap: 16px;
    padding: 18px 24px;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 14px;
    max-width: fit-content;
}
.endeks-hero-stat .stat-item { text-align: center; }
.endeks-hero-stat .sayi {
    font-size: 28px; font-weight: 800;
    color: #fff; line-height: 1;
}
.endeks-hero-stat .etiket {
    font-size: 11px; color: rgba(255,255,255,0.75);
    margin-top: 4px; text-transform: uppercase; letter-spacing: 0.8px;
    font-weight: 600;
}

/* Ay kartı (sağda dekoratif) */
.endeks-hero-gorsel {
    display: flex; justify-content: center; align-items: center;
}
.endeks-ay-kart {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    padding: 30px 50px;
    text-align: center;
    color: #fff;
    box-shadow: 0 20px 60px -15px rgba(14,165,233,0.4);
}
.ay-kart-ay {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -0.5px;
}
.ay-kart-yil {
    font-size: 20px;
    color: rgba(255,255,255,0.75);
    margin-bottom: 18px;
}
.ay-kart-etiket {
    font-size: 11px;
    color: rgba(255,255,255,0.65);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.ay-kart-no {
    font-size: 30px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--turuncu), #fbbf24);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Kontroller bar */
.endeks-kontroller {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--kenar);
    border-radius: var(--radius);
    margin-bottom: 30px;
}
.endeks-filtre {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.endeks-arsiv-select {
    padding: 10px 14px;
    border: 1.5px solid var(--kenar);
    border-radius: var(--radius-sm);
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--metin);
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s;
}
.endeks-arsiv-select:hover, .endeks-arsiv-select:focus {
    border-color: var(--mavi);
}

.endeks-paylasim {
    display: flex;
    gap: 8px;
    align-items: center;
}
.paylasim-mini {
    width: 34px; height: 34px;
    background: #fff;
    border: 1px solid var(--kenar);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--metin);
    font-weight: 600; font-size: 13px;
    text-decoration: none;
    transition: all 0.15s;
}
.paylasim-mini:hover {
    background: var(--mavi); color: #fff; border-color: var(--mavi);
    transform: translateY(-2px);
}

/* 3 Özet Kart */
.endeks-ozet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 50px;
}
.endeks-ozet-kart {
    display: block;
    padding: 24px;
    background: #fff;
    border: 2px solid var(--kenar);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--metin);
    transition: all 0.25s;
    position: relative;
    overflow: hidden;
}
.endeks-ozet-kart::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 150px; height: 150px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.12;
}
.endeks-ozet-kart.yukari-liderli {
    border-color: #fbbf24;
    background: linear-gradient(135deg, #fff, #fef3c7);
}
.endeks-ozet-kart.yukari-liderli::before {
    background: radial-gradient(circle, #f59e0b, transparent);
}
.endeks-ozet-kart.artan {
    border-color: #10b981;
    background: linear-gradient(135deg, #fff, #d1fae5);
}
.endeks-ozet-kart.artan::before {
    background: radial-gradient(circle, #10b981, transparent);
}
.endeks-ozet-kart.azalan {
    border-color: #ef4444;
    background: linear-gradient(135deg, #fff, #fee2e2);
}
.endeks-ozet-kart.azalan::before {
    background: radial-gradient(circle, #ef4444, transparent);
}
.endeks-ozet-kart:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    color: var(--metin);
}

.ozet-rozet {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(255,255,255,0.9);
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    margin-bottom: 14px;
    color: var(--metin);
    position: relative; z-index: 1;
}
.ozet-ikon-satir {
    display: flex; gap: 12px; align-items: center;
    margin-bottom: 14px;
    position: relative; z-index: 1;
}
.ozet-ikon {
    width: 56px; height: 56px;
    background: #fff;
    border: 2px solid rgba(0,0,0,0.05);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
}
.ozet-ikon-satir h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--metin);
    margin: 0 0 2px;
    line-height: 1.2;
}
.ozet-ikon-satir span {
    font-size: 12px;
    color: var(--metin-acik);
}
.ozet-skor-buyuk {
    font-size: 44px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1.5px;
    color: var(--metin);
    margin-bottom: 8px;
    position: relative; z-index: 1;
}
.ozet-skor-buyuk span {
    font-size: 20px;
    font-weight: 600;
    color: var(--metin-acik);
    letter-spacing: 0;
}
.endeks-ozet-kart.artan .ozet-skor-buyuk { color: #059669; }
.endeks-ozet-kart.azalan .ozet-skor-buyuk { color: #dc2626; }
.ozet-alt {
    font-size: 13px;
    color: var(--metin-acik);
    line-height: 1.5;
    position: relative; z-index: 1;
}

/* ENDEKS TABLOSU */
.endeks-tablo {
    background: #fff;
    border: 1px solid var(--kenar);
    border-radius: var(--radius);
    overflow: hidden;
}
.endeks-tablo-baslik {
    display: grid;
    grid-template-columns: 60px 1.6fr 1.2fr 140px;
    gap: 16px;
    align-items: center;
    padding: 14px 24px;
    background: var(--bg-sogk);
    border-bottom: 1px solid var(--kenar);
    font-size: 12px;
    font-weight: 700;
    color: var(--metin-acik);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.endeks-satir {
    display: grid;
    grid-template-columns: 60px 1.6fr 1.2fr 140px;
    gap: 16px;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--kenar);
    text-decoration: none;
    color: var(--metin);
    transition: background 0.15s;
}
.endeks-satir:last-child { border-bottom: none; }
.endeks-satir:hover { background: var(--bg-sogk); color: var(--metin); }

.endeks-satir .sira {
    font-size: 18px;
    font-weight: 800;
    color: var(--metin-acik);
    text-align: center;
}
.endeks-satir .meslek {
    display: flex; gap: 12px; align-items: center;
    min-width: 0;
}
.meslek-ikon {
    width: 40px; height: 40px;
    background: linear-gradient(135deg, var(--mavi), var(--mor));
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    color: #fff;
    flex-shrink: 0;
}
.meslek-ad { display: flex; flex-direction: column; min-width: 0; }
.meslek-ad strong {
    font-size: 15px;
    color: var(--metin);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.meslek-ad small {
    font-size: 11px;
    color: var(--metin-silik);
    margin-top: 2px;
}

.skor-etiket {
    display: flex;
    gap: 10px;
    align-items: center;
}
.skor-deger {
    font-size: 18px;
    font-weight: 800;
    color: var(--metin);
    min-width: 34px;
    text-align: right;
}
.skor-bar {
    flex: 1;
    height: 8px;
    background: var(--bg-sogk);
    border-radius: 100px;
    overflow: hidden;
    min-width: 60px;
}
.skor-bar-ic {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--mavi), var(--mor));
    border-radius: 100px;
    transition: width 0.8s ease-out;
}

.degisim {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
    justify-content: flex-end;
}
.degisim .ok { font-size: 14px; }
.degisim.yon-artis { color: #059669; }
.degisim.yon-azalis { color: #dc2626; }
.degisim.yon-sabit { color: var(--metin-silik); font-weight: 500; font-size: 12px; }

/* METODOLOJİ */
.endeks-metodoloji {
    background: linear-gradient(135deg, #eff6ff 0%, #fff 100%);
    border: 1px solid var(--kenar);
    border-radius: var(--radius-lg);
    padding: 36px;
    margin-top: 50px;
}
.endeks-metodoloji h3 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 14px;
    color: var(--metin);
}
.endeks-metodoloji > p {
    color: var(--metin-acik);
    margin-bottom: 24px;
    font-size: 15px;
}

.metodoloji-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}
.metodoloji-item {
    display: flex;
    gap: 16px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--kenar);
    border-radius: var(--radius);
}
.metodoloji-item .num {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, var(--mavi), var(--mor));
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    font-weight: 800;
    flex-shrink: 0;
}
.metodoloji-item strong {
    display: block;
    font-size: 15px;
    color: var(--metin);
    margin-bottom: 4px;
}
.metodoloji-item p {
    font-size: 13px;
    color: var(--metin-acik);
    line-height: 1.6;
    margin: 0;
}

.metodoloji-uyari {
    padding: 14px 18px;
    background: linear-gradient(90deg, #fef3c7, transparent);
    border-left: 4px solid var(--sari);
    border-radius: 0 8px 8px 0;
    font-size: 14px;
    color: #78350f;
    line-height: 1.6;
}
.metodoloji-uyari strong { color: #854d0e; }
.metodoloji-uyari a { color: #854d0e; font-weight: 700; }

/* ALT CTA GRID */
.endeks-cta-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 20px;
}
.endeks-cta {
    padding: 36px 32px;
    border-radius: var(--radius-lg);
    text-align: center;
}
.endeks-cta.bulten {
    background: linear-gradient(135deg, var(--mavi), var(--mor));
    color: #fff;
}
.endeks-cta.bulten h3 { color: #fff; font-size: 22px; margin-bottom: 10px; }
.endeks-cta.bulten p { color: rgba(255,255,255,0.88); font-size: 14px; line-height: 1.6; margin-bottom: 20px; }
.endeks-cta.bulten .bulten-form {
    max-width: 420px; margin: 0 auto;
    display: flex; gap: 8px; flex-wrap: wrap;
}
.endeks-cta.bulten .bulten-form input {
    flex: 1; min-width: 200px;
    padding: 12px 16px;
    border: 1.5px solid rgba(255,255,255,0.2);
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    outline: none;
}
.endeks-cta.bulten .bulten-form input::placeholder { color: rgba(255,255,255,0.6); }

.endeks-cta.test {
    background: linear-gradient(135deg, #fef3c7, #fff);
    border: 2px solid #fcd34d;
}
.endeks-cta.test h3 { font-size: 22px; margin-bottom: 10px; color: var(--metin); }
.endeks-cta.test p { color: var(--metin-acik); font-size: 14px; line-height: 1.6; }

/* Responsive */
@media (max-width: 960px) {
    .endeks-hero-grid { grid-template-columns: 1fr; gap: 30px; }
    .endeks-ay-kart { max-width: 280px; margin: 0 auto; }
    .metodoloji-grid { grid-template-columns: 1fr; }
    .endeks-cta-grid { grid-template-columns: 1fr; }
    .endeks-tablo-baslik, .endeks-satir {
        grid-template-columns: 40px 1.5fr 1fr 110px;
        gap: 10px;
        padding: 14px;
    }
}

@media (max-width: 640px) {
    .endeks-hero { padding: 44px 0 56px; }
    .endeks-hero-stat { padding: 14px 18px; gap: 12px; }
    .endeks-hero-stat .sayi { font-size: 22px; }
    .endeks-kontroller { flex-direction: column; align-items: stretch; }
    .endeks-filtre { width: 100%; }
    .endeks-filtre select { flex: 1; }
    .endeks-tablo-baslik { display: none; }
    .endeks-satir {
        grid-template-columns: 36px 1fr;
        grid-template-rows: auto auto;
        gap: 8px 10px;
    }
    .endeks-satir .meslek { grid-column: 2; }
    .endeks-satir .skor-etiket { grid-column: 2; grid-row: 2; }
    .endeks-satir .degisim { grid-column: 2; grid-row: 2; justify-self: end; }
    .endeks-satir .sira { grid-row: 1 / span 2; align-self: center; }
    .metodoloji-item { padding: 14px; }
    .endeks-cta { padding: 28px 22px; }
    .ozet-skor-buyuk { font-size: 36px; }
}

/* ============================================================
   FİYATLANDIRMA SAYFASI
   ============================================================ */

.fiyat-hero {
    background: linear-gradient(135deg, #0c0a1e 0%, #1e1b4b 40%, #4c1d95 80%, #6b21a8 100%);
    color: #fff;
    padding: 60px 0 80px;
    position: relative;
    overflow: hidden;
}
.fiyat-hero::before {
    content: ''; position: absolute;
    top: -40%; right: -10%;
    width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(249,115,22,0.2), transparent 70%);
    pointer-events: none;
}
.fiyat-hero::after {
    content: ''; position: absolute;
    bottom: -40%; left: -15%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(251,191,36,0.15), transparent 70%);
    pointer-events: none;
}
.fiyat-hero > .konteyner { position: relative; z-index: 2; }
.fiyat-hero .breadcrumb a:hover { color: var(--turuncu) !important; }

.fiyat-hero-ic {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.fiyat-hero h1 {
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 800;
    letter-spacing: -1.5px;
    line-height: 1.05;
    margin-bottom: 20px;
    color: #fff;
}
.fiyat-hero h1 .vurgu {
    background: linear-gradient(90deg, var(--turuncu), #fbbf24);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fiyat-hero .hero-aciklama {
    color: rgba(255,255,255,0.88);
    font-size: 17px;
    line-height: 1.7;
    margin-bottom: 32px;
    max-width: 560px;
    margin-left: auto; margin-right: auto;
}
.fiyat-hero .hero-aciklama strong { color: #fff; }

/* Donem toggle */
.fiyat-donem-toggle {
    display: inline-flex;
    gap: 4px;
    padding: 6px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 100px;
}
.donem-btn {
    padding: 10px 24px;
    border-radius: 100px;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.15s;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.donem-btn:hover { color: #fff; }
.donem-btn.aktif {
    background: #fff;
    color: var(--mor);
    font-weight: 700;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.indirim-rozet {
    font-size: 10px;
    background: linear-gradient(135deg, var(--turuncu), #fbbf24);
    color: #fff;
    padding: 2px 8px;
    border-radius: 100px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* Plan kartları */
.fiyat-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: -40px;
    position: relative;
    z-index: 3;
    margin-bottom: 40px;
}
.fiyat-plan-kart {
    background: #fff;
    border: 2px solid var(--kenar);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    position: relative;
    transition: all 0.25s;
    display: flex;
    flex-direction: column;
}
.fiyat-plan-kart:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.fiyat-plan-kart.populer {
    border-color: var(--mor);
    border-width: 3px;
    background: linear-gradient(135deg, #fff 0%, #faf5ff 100%);
    transform: scale(1.03);
    box-shadow: 0 20px 60px -15px rgba(126,34,206,0.25);
    z-index: 2;
}
.fiyat-plan-kart.populer:hover {
    transform: scale(1.03) translateY(-4px);
}
.fiyat-plan-kart.kurumsal {
    background: linear-gradient(135deg, #fff 0%, #f1f5f9 100%);
    border-color: #475569;
}
.fiyat-plan-kart.mevcut {
    border-color: var(--yesil);
    background: linear-gradient(135deg, #fff 0%, #f0fdf4 100%);
}

.populer-rozet {
    position: absolute;
    top: -14px; left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--mor), #4c1d95);
    color: #fff;
    padding: 6px 18px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    box-shadow: 0 8px 20px rgba(126,34,206,0.4);
    white-space: nowrap;
}
.mevcut-rozet {
    position: absolute;
    top: -14px; right: 20px;
    background: var(--yesil);
    color: #fff;
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(22,163,74,0.3);
}
.mevcut-rozet.premium {
    background: linear-gradient(135deg, var(--mor), #4c1d95);
}

.plan-ust { margin-bottom: 20px; }
.plan-ust h3 {
    font-size: 22px;
    font-weight: 800;
    color: var(--metin);
    margin-bottom: 4px;
}
.plan-ozet {
    font-size: 14px;
    color: var(--metin-acik);
    margin: 0;
}

.plan-fiyat {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 4px;
    color: var(--metin);
}
.plan-fiyat .sembol {
    font-size: 20px;
    font-weight: 700;
    color: var(--metin-acik);
}
.plan-fiyat .rakam {
    font-size: 52px;
    font-weight: 900;
    letter-spacing: -2px;
    line-height: 1;
}
.plan-fiyat .birim {
    font-size: 16px;
    color: var(--metin-acik);
    font-weight: 500;
}
.plan-fiyat-alt {
    font-size: 12px;
    color: var(--metin-silik);
    margin-bottom: 24px;
    min-height: 30px;
    line-height: 1.5;
}

.plan-cta {
    width: 100%;
    justify-content: center;
    margin-bottom: 24px;
}

.plan-ozellik-liste {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    flex: 1;
}
.plan-ozellik-liste li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--metin);
    line-height: 1.5;
}
.plan-ozellik-liste li.pasif { color: var(--metin-silik); }
.plan-ozellik-liste .tik {
    color: var(--yesil);
    font-weight: 700;
    flex-shrink: 0;
}
.plan-ozellik-liste .carpi {
    color: var(--metin-silik);
    flex-shrink: 0;
}
.fiyat-plan-kart.populer .plan-ozellik-liste .tik { color: var(--mor); }
.plan-ozellik-liste strong { color: var(--metin); font-weight: 700; }

/* Para iade bandı */
.para-iade-bandi {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 20px 28px;
    background: linear-gradient(90deg, #f0fdf4, #fff);
    border: 2px solid #bbf7d0;
    border-radius: var(--radius);
    margin-bottom: 40px;
}
.iade-ikon { font-size: 40px; flex-shrink: 0; }
.iade-metin strong {
    display: block;
    font-size: 16px;
    color: #166534;
    margin-bottom: 4px;
}
.iade-metin span {
    color: #15803d;
    font-size: 14px;
    line-height: 1.5;
}

/* Kazanç hesaplayıcı */
.kazanc-hesap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    background: linear-gradient(135deg, #fff, #faf5ff);
    border: 1px solid var(--kenar);
    border-radius: var(--radius-lg);
    padding: 32px;
}
.hesap-sol {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.hesap-alan label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--metin);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.hesap-alan input[type="range"] {
    width: 100%;
    accent-color: var(--mor);
    cursor: pointer;
    height: 6px;
    -webkit-appearance: none;
    background: var(--bg-sogk);
    border-radius: 100px;
    outline: none;
}
.hesap-alan input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px; height: 22px;
    background: var(--mor);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(126,34,206,0.4);
}
.hesap-alan input[type="range"]::-moz-range-thumb {
    width: 22px; height: 22px;
    background: var(--mor);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(126,34,206,0.4);
}
.hesap-deger {
    margin-top: 10px;
    font-size: 18px;
    font-weight: 800;
    color: var(--mor);
    font-variant-numeric: tabular-nums;
}

.hesap-sag {
    display: flex;
    align-items: center;
    justify-content: center;
}
.hesap-sonuc {
    background: linear-gradient(135deg, var(--mor), #4c1d95);
    color: #fff;
    padding: 28px;
    border-radius: var(--radius);
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 50px -15px rgba(126,34,206,0.4);
}
.hesap-etiket {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    opacity: 0.85;
    margin-bottom: 8px;
}
.hesap-rakam {
    font-size: 44px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1.5px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, var(--turuncu), #fbbf24);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hesap-detay {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-sm);
    padding: 16px;
    margin-bottom: 16px;
    font-size: 14px;
    text-align: left;
}
.hesap-detay > div {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}
.hesap-detay > div:last-child { border-bottom: none; }
.hesap-detay > div.bolum {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 2px solid rgba(255,255,255,0.3);
    border-bottom: none;
    font-weight: 700;
}
.hesap-detay span { color: rgba(255,255,255,0.8); }
.hesap-detay strong { color: #fff; }
.hesap-detay .net { color: #fbbf24; font-size: 16px; }
.hesap-uyari {
    padding: 12px;
    background: rgba(249,115,22,0.15);
    border: 1px solid rgba(249,115,22,0.3);
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
}
.hesap-uyari strong {
    display: block;
    color: #fbbf24;
    font-size: 18px;
    margin-bottom: 2px;
}

/* Karşılaştırma tablosu */
.karsilastirma-tablo-sarici {
    overflow-x: auto;
    border: 1px solid var(--kenar);
    border-radius: var(--radius);
    background: #fff;
}
.karsilastirma-tablo {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.karsilastirma-tablo thead th {
    padding: 16px 20px;
    background: var(--bg-sogk);
    text-align: center;
    font-size: 13px;
    font-weight: 800;
    color: var(--metin);
    border-bottom: 2px solid var(--kenar);
    white-space: nowrap;
}
.karsilastirma-tablo thead th:first-child { text-align: left; }
.karsilastirma-tablo thead th.populer-sutun {
    background: linear-gradient(135deg, #faf5ff, var(--mor-acik));
    color: var(--mor);
}
.karsilastirma-tablo tbody td {
    padding: 14px 20px;
    text-align: center;
    border-bottom: 1px solid var(--kenar);
    color: var(--metin);
}
.karsilastirma-tablo tbody td:first-child {
    text-align: left;
    font-weight: 500;
    color: var(--metin);
}
.karsilastirma-tablo tbody td.populer-sutun {
    background: rgba(126,34,206,0.03);
}
.karsilastirma-tablo td.var { color: var(--yesil); font-weight: 700; }
.karsilastirma-tablo td.yok { color: var(--metin-silik); }
.karsilastirma-tablo tr.grup-baslik td {
    background: #0f172a;
    color: #fff;
    font-weight: 800;
    text-align: left;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 12px 20px;
}
.karsilastirma-tablo tr:last-child td { border-bottom: none; }

/* Responsive */
@media (max-width: 960px) {
    .fiyat-plan-grid { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; margin-top: -30px; }
    .fiyat-plan-kart.populer { transform: none; }
    .fiyat-plan-kart.populer:hover { transform: translateY(-4px); }
    .kazanc-hesap { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
}

@media (max-width: 640px) {
    .fiyat-hero { padding: 48px 0 60px; }
    .fiyat-donem-toggle { flex-wrap: wrap; justify-content: center; }
    .donem-btn { padding: 8px 18px; font-size: 13px; }
    .plan-fiyat .rakam { font-size: 44px; }
    .para-iade-bandi { flex-direction: column; text-align: center; padding: 20px; }
    .karsilastirma-tablo thead th { padding: 12px; font-size: 11px; }
    .karsilastirma-tablo tbody td { padding: 10px; font-size: 12px; }
    .hesap-rakam { font-size: 36px; }
}

/* ============================================================
   BUTONLAR
   ============================================================ */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 20px;
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    white-space: nowrap;
}

.btn-primary {
    background: var(--mavi);
    color: #fff;
}
.btn-primary:hover { background: var(--mavi-koyu); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow); }

.btn-turuncu {
    background: var(--turuncu);
    color: #fff;
}
.btn-turuncu:hover { background: var(--turuncu-koyu); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow); }

.btn-mor {
    background: var(--mor);
    color: #fff;
}
.btn-mor:hover { background: var(--mor-koyu); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow); }

.btn-secondary {
    background: #fff;
    color: var(--metin);
    border: 1.5px solid var(--kenar);
}
.btn-secondary:hover { background: var(--bg-sogk); border-color: var(--kenar-koyu); color: var(--metin); }

.btn-outline {
    background: transparent;
    color: var(--mavi);
    border: 1.5px solid var(--mavi);
}
.btn-outline:hover { background: var(--mavi); color: #fff; }

.btn-lg { padding: 14px 28px; font-size: 16px; }
.btn-sm { padding: 7px 14px; font-size: 13px; }

/* ============================================================
   HERO
   ============================================================ */

.hero {
    background: linear-gradient(135deg, #eff6ff 0%, #faf5ff 50%, #fff7ed 100%);
    padding: 80px 0 100px;
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: ''; position: absolute;
    top: -50%; right: -20%;
    width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(30,99,237,0.08), transparent 70%);
    pointer-events: none;
}
.hero::after {
    content: ''; position: absolute;
    bottom: -30%; left: -10%;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(126,34,206,0.06), transparent 70%);
    pointer-events: none;
}
.hero-ic { position: relative; z-index: 2; text-align: center; max-width: 850px; margin: 0 auto; }
.hero-rozet {
    display: inline-block;
    background: #fff;
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mor);
    border: 1px solid var(--kenar);
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}
.hero-rozet::before { content: '✨ '; }
.hero h1 {
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 800;
    letter-spacing: -1.5px;
    line-height: 1.1;
    margin-bottom: 24px;
}
.hero h1 .vurgu {
    background: linear-gradient(90deg, var(--mavi), var(--mor));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero p {
    font-size: 18px;
    color: var(--metin-acik);
    margin-bottom: 36px;
    max-width: 680px; margin-left: auto; margin-right: auto;
}
.hero-cta {
    display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
    margin-bottom: 40px;
}

.hero-arama {
    max-width: 600px; margin: 0 auto;
    background: #fff;
    padding: 8px;
    border-radius: 100px;
    box-shadow: var(--shadow-lg);
    display: flex; gap: 6px; align-items: center;
}
.hero-arama input {
    flex: 1; border: none; background: transparent;
    padding: 0 20px; font-size: 16px; font-family: inherit;
    color: var(--metin); outline: none;
}
.hero-arama button {
    padding: 12px 24px; border-radius: 100px;
    background: var(--mavi); color: #fff; border: none;
    font-weight: 600; cursor: pointer; white-space: nowrap;
}
.hero-arama button:hover { background: var(--mavi-koyu); }

/* ============================================================
   İSTATİSTİK ŞERİT
   ============================================================ */

.ist-serit {
    background: #fff;
    border-top: 1px solid var(--kenar);
    border-bottom: 1px solid var(--kenar);
    padding: 32px 0;
}
.ist-serit-ic {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
    text-align: center;
}
.ist-kart2 { padding: 16px; }
.ist-kart2 .sayi {
    font-size: 40px; font-weight: 800;
    background: linear-gradient(135deg, var(--mavi), var(--mor));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    line-height: 1;
}
.ist-kart2 .metin {
    font-size: 13px; color: var(--metin-acik);
    margin-top: 6px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500;
}

/* ============================================================
   SEKSIYON (Genel)
   ============================================================ */

section { padding: 70px 0; }
.seksiyon-baslik {
    text-align: center; margin-bottom: 50px;
}
.seksiyon-baslik .etiket {
    display: inline-block;
    font-size: 13px; font-weight: 700;
    color: var(--mavi);
    text-transform: uppercase; letter-spacing: 1.5px;
    margin-bottom: 12px;
}
.seksiyon-baslik h2 {
    font-size: clamp(26px, 4vw, 40px);
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--metin);
    margin-bottom: 12px;
}
.seksiyon-baslik p {
    font-size: 17px; color: var(--metin-acik);
    max-width: 640px; margin: 0 auto;
}

/* ============================================================
   MESLEK KARTLARI
   ============================================================ */

.meslek-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.meslek-kart {
    background: #fff;
    padding: 28px;
    border-radius: var(--radius);
    border: 1.5px solid var(--kenar);
    transition: all 0.2s;
    text-decoration: none;
    color: var(--metin);
    display: flex; flex-direction: column;
}
.meslek-kart:hover {
    border-color: var(--mavi);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    color: var(--metin);
}
.meslek-ikon {
    width: 52px; height: 52px;
    background: linear-gradient(135deg, var(--mavi-acik), var(--mor-acik));
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    margin-bottom: 16px;
}
.meslek-kart h3 {
    font-size: 18px; font-weight: 700;
    margin-bottom: 8px; color: var(--metin);
}
.meslek-kart p {
    font-size: 14px; color: var(--metin-acik);
    flex: 1; margin-bottom: 16px;
}
.meslek-meta {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 14px; border-top: 1px solid var(--kenar);
    font-size: 12px; color: var(--metin-silik);
}
.meslek-skor {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px;
    background: var(--mavi-acik);
    color: var(--mavi);
    border-radius: 100px;
    font-weight: 600;
}

/* ============================================================
   ARAÇ KARTLARI
   ============================================================ */

.arac-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
}
.arac-kart {
    background: #fff;
    padding: 20px;
    border-radius: var(--radius);
    border: 1.5px solid var(--kenar);
    transition: all 0.2s;
    text-decoration: none;
    color: var(--metin);
    display: flex; flex-direction: column;
    position: relative;
}
.arac-kart:hover {
    border-color: var(--mor);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    color: var(--metin);
}
.arac-kart.sponsor {
    border-color: var(--turuncu);
    background: linear-gradient(145deg, #fff, #fff7ed);
}
.arac-sponsor-rozet {
    position: absolute; top: 12px; right: 12px;
    background: var(--turuncu); color: #fff;
    font-size: 10px; font-weight: 700;
    padding: 3px 10px; border-radius: 100px;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.arac-ust { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.arac-logo {
    width: 48px; height: 48px;
    border-radius: var(--radius-sm);
    background: var(--bg-sogk); border: 1px solid var(--kenar);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 800;
    color: var(--mor); flex-shrink: 0;
    overflow: hidden;
}
.arac-logo img { width: 100%; height: 100%; object-fit: cover; }
.arac-baslik { flex: 1; }
.arac-baslik h3 { font-size: 16px; font-weight: 700; margin-bottom: 3px; }
.arac-baslik .arac-kategori { font-size: 12px; color: var(--metin-silik); }
.arac-aciklama { font-size: 13px; color: var(--metin-acik); flex: 1; margin-bottom: 12px; }
.arac-alt {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 10px; border-top: 1px solid var(--kenar);
    font-size: 12px;
}
.arac-rozetler { display: flex; gap: 4px; flex-wrap: wrap; }
.rozet-kucuk {
    padding: 2px 8px;
    background: var(--bg-sogk);
    border-radius: 100px;
    font-size: 10px; font-weight: 600;
    color: var(--metin-acik);
}
.rozet-kucuk.yesil { background: #dcfce7; color: #166534; }
.rozet-kucuk.mavi { background: #dbeafe; color: #1e40af; }
.arac-fiyat { font-weight: 700; color: var(--mor); }
.arac-fiyat.ucretsiz { color: var(--yesil); }

/* ============================================================
   BLOG KARTI
   ============================================================ */

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
}
.blog-kart {
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--kenar);
    transition: all 0.2s;
    text-decoration: none;
    color: var(--metin);
    display: flex; flex-direction: column;
}
.blog-kart:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    color: var(--metin);
}
.blog-kapak {
    width: 100%; aspect-ratio: 16/9;
    background: linear-gradient(135deg, var(--mavi), var(--mor));
    overflow: hidden;
}
.blog-kapak img { width: 100%; height: 100%; object-fit: cover; }
.blog-icerik { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.blog-kategori {
    font-size: 12px; font-weight: 700; color: var(--mavi);
    text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px;
}
.blog-kart h3 {
    font-size: 18px; font-weight: 700;
    color: var(--metin); line-height: 1.4; margin-bottom: 10px;
}
.blog-ozet {
    font-size: 14px; color: var(--metin-acik);
    flex: 1; margin-bottom: 14px;
}
.blog-meta {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 12px; color: var(--metin-silik);
    padding-top: 12px; border-top: 1px solid var(--kenar);
}

/* ============================================================
   CTA BÖLÜMLERİ
   ============================================================ */

.cta-buyuk {
    background: linear-gradient(135deg, var(--mavi), var(--mor));
    border-radius: var(--radius-lg);
    padding: 60px 40px;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cta-buyuk h2 { font-size: clamp(24px, 3.5vw, 34px); font-weight: 800; margin-bottom: 14px; }
.cta-buyuk p { font-size: 17px; opacity: 0.92; margin-bottom: 28px; max-width: 600px; margin-left: auto; margin-right: auto; }
.cta-buyuk .btn-turuncu { box-shadow: 0 4px 14px rgba(249,115,22,0.5); }

.cta-akademik {
    background: linear-gradient(135deg, var(--mor), #4c1d95);
    border-radius: var(--radius-lg);
    padding: 50px 40px;
    color: #fff;
    display: grid; grid-template-columns: 1fr auto; gap: 30px;
    align-items: center;
}
.cta-akademik h3 { font-size: 26px; font-weight: 800; margin-bottom: 10px; }
.cta-akademik p { opacity: 0.9; margin-bottom: 0; }

/* ============================================================
   ENDEKS BANNER
   ============================================================ */

.endeks-banner {
    background: #fff;
    border: 2px solid var(--kenar);
    border-radius: var(--radius-lg);
    padding: 40px;
    display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px;
    align-items: center;
}
.endeks-banner .etiket {
    display: inline-block; font-size: 12px; font-weight: 700;
    color: var(--turuncu); text-transform: uppercase; letter-spacing: 1.5px;
    margin-bottom: 12px;
}
.endeks-banner h3 { font-size: 24px; font-weight: 800; margin-bottom: 12px; }
.endeks-banner p { color: var(--metin-acik); margin-bottom: 20px; }
.endeks-gorsel {
    background: linear-gradient(135deg, var(--mavi-acik), var(--mor-acik));
    border-radius: var(--radius);
    padding: 30px;
    text-align: center;
}
.endeks-buyuk-sayi {
    font-size: 72px; font-weight: 800; line-height: 1;
    background: linear-gradient(135deg, var(--mavi), var(--mor));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.endeks-degisim {
    margin-top: 8px; font-size: 14px; color: var(--yesil); font-weight: 600;
}

/* ============================================================
   BÜLTEN
   ============================================================ */

.bulten-bolum {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    border-radius: var(--radius-lg);
    padding: 50px 40px;
    color: #fff;
    text-align: center;
}
.bulten-bolum h3 { font-size: 28px; font-weight: 800; margin-bottom: 12px; }
.bulten-bolum p { opacity: 0.85; margin-bottom: 28px; max-width: 600px; margin-left: auto; margin-right: auto; }
.bulten-form {
    display: flex; gap: 10px; max-width: 500px; margin: 0 auto; flex-wrap: wrap;
}
.bulten-form input {
    flex: 1; min-width: 220px;
    padding: 14px 20px;
    border: none; border-radius: var(--radius-sm);
    font-size: 15px; font-family: inherit;
    background: rgba(255,255,255,0.1); color: #fff;
    outline: none;
    border: 1.5px solid rgba(255,255,255,0.2);
}
.bulten-form input::placeholder { color: rgba(255,255,255,0.6); }
.bulten-form input:focus { background: rgba(255,255,255,0.15); border-color: var(--turuncu); }
.bulten-mesaj { margin-top: 16px; font-size: 14px; font-weight: 600; min-height: 20px; }
.bulten-mesaj.basarili { color: #4ade80; }
.bulten-mesaj.hata { color: #fca5a5; }

/* ============================================================
   REKLAM KUTULARI
   ============================================================ */

.reklam-kutu {
    background: #fff;
    border: 1px dashed var(--kenar-koyu);
    border-radius: var(--radius);
    padding: 20px;
    text-align: center;
    margin: 20px 0;
    position: relative;
    text-decoration: none;
    color: var(--metin);
    display: block;
    transition: all 0.15s;
}
.reklam-kutu:hover { border-style: solid; border-color: var(--mavi); color: var(--metin); }
.reklam-kutu::before {
    content: 'REKLAM';
    position: absolute; top: 6px; right: 10px;
    font-size: 9px; font-weight: 700;
    color: var(--metin-silik);
    letter-spacing: 1px;
}
.reklam-kutu-banner { padding: 30px 20px; }
.reklam-kutu h4 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.reklam-kutu p { font-size: 13px; color: var(--metin-acik); margin-bottom: 10px; }
.reklam-kutu .reklam-btn {
    display: inline-block;
    padding: 8px 16px; background: var(--turuncu); color: #fff;
    border-radius: var(--radius-sm); font-size: 13px; font-weight: 600;
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
    background: #0f172a;
    color: #cbd5e1;
    padding: 60px 0 30px;
    margin-top: 60px;
}
.footer-ic {
    display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 40px;
    margin-bottom: 40px;
}
.footer-marka .logo .logo-metin { color: #fff; }
.footer-marka p { margin-top: 16px; font-size: 14px; opacity: 0.75; line-height: 1.7; }
.footer-sosyal { display: flex; gap: 10px; margin-top: 16px; }
.footer-sosyal a {
    width: 36px; height: 36px;
    background: rgba(255,255,255,0.08);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 16px;
    transition: all 0.15s;
}
.footer-sosyal a:hover { background: var(--mavi); transform: translateY(-2px); }

.footer-kol h4 {
    color: #fff; font-size: 14px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px; margin-bottom: 18px;
}
.footer-kol ul { list-style: none; }
.footer-kol ul li { margin-bottom: 10px; }
.footer-kol ul a {
    color: #cbd5e1; font-size: 14px;
    transition: color 0.15s;
}
.footer-kol ul a:hover { color: var(--turuncu); }

.footer-alt {
    padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.1);
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;
    font-size: 13px; opacity: 0.7;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
    .footer-ic { grid-template-columns: 1fr 1fr 1fr; }
    .footer-marka { grid-column: span 3; }
    .endeks-banner { grid-template-columns: 1fr; }
    .cta-akademik { grid-template-columns: 1fr; text-align: center; }
    .ist-serit-ic { grid-template-columns: repeat(2, 1fr); gap: 30px; }
}

@media (max-width: 960px) {
    .ana-menu { display: none; }
    .ust-bar .ust-bar-sol { display: none; }
    .mobil-menu-btn { display: block; }
    .mobil-menu-btn.aktif { background: var(--mavi); color: #fff; border-color: var(--mavi); }

    .mobil-menu {
        display: none;
        position: absolute; top: 100%; left: 0; right: 0;
        background: #fff;
        border-top: 1px solid var(--kenar);
        padding: 16px;
        list-style: none;
        box-shadow: var(--shadow-lg);
    }
    .mobil-menu.acik { display: block; }
    .mobil-menu a {
        display: block; padding: 12px 14px;
        color: var(--metin); font-weight: 500;
        border-radius: var(--radius-sm);
    }
    .mobil-menu a:hover { background: var(--bg-sogk); color: var(--mavi); }

    .header-aksiyonlar .btn-outline { display: none; }
}

@media (max-width: 768px) {
    .site-header-ic { padding: 12px 0; }
    .hero { padding: 50px 0 60px; }
    section { padding: 50px 0; }

    .footer-ic { grid-template-columns: 1fr 1fr; }
    .footer-marka { grid-column: span 2; }

    .cta-buyuk, .bulten-bolum, .endeks-banner { padding: 35px 22px; }

    .hero-arama { flex-direction: column; padding: 12px; border-radius: var(--radius); }
    .hero-arama input { padding: 10px; }
    .hero-arama button { width: 100%; border-radius: var(--radius-sm); padding: 12px; }
}

@media (max-width: 480px) {
    .ist-serit-ic { grid-template-columns: 1fr 1fr; gap: 20px; }
    .footer-ic { grid-template-columns: 1fr; }
    .footer-marka { grid-column: span 1; }
    .hero-cta .btn { width: 100%; }
}

/* ============================================================
   YARDIMCI
   ============================================================ */

.gizli { display: none !important; }
.metin-merkez { text-align: center; }
.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }
.mt-40 { margin-top: 40px; }

/* Animasyon */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeInUp 0.5s ease-out; }

/* Scroll geri dön butonu */
.scroll-ust {
    position: fixed; bottom: 30px; right: 30px;
    width: 48px; height: 48px;
    background: var(--mavi); color: #fff;
    border: none; border-radius: 50%;
    cursor: pointer; font-size: 20px;
    box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s;
    z-index: 50;
}
.scroll-ust.gorunur { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-ust:hover { background: var(--mavi-koyu); transform: translateY(-4px); }
.meslek-ikon,
.hero-buyuk-ikon,
.alt-meslek-ikon,
.hero-kategori-etiket,
.bos-durum-ikon {
    color: initial !important;
    -webkit-text-fill-color: initial !important;
    filter: none !important;
}