/* ==========================================================
   PROJECT VIOLET - GÜNCEL & REVİZE FİNAL CSS DOSYASI
   ========================================================== */

:root {
    /* ----------------------------------------------------------
       1. TEMEL SAYFA VE KUTU TEMA RENKLERİ
       ---------------------------------------------------------- */
    --sayfa-arkaplan-rengi: #3f3f74;
    --kutu-arkaplan: rgba(15, 15, 20, 0.75);

    /* ----------------------------------------------------------
       2. EDİTÖR İÇİN 20 FARKLI RENK SEÇENEĞİ (DEĞİŞKENLER)
       ---------------------------------------------------------- */
    --renk-1-mor-ana: #a855f7;       /* Klasik Violet Moru */
    --renk-2-mor-acik: #c4b5fd;      /* Açık Eflatun / Lila */
    --renk-3-mor-koyu: #6b21a8;      /* Derin Gece Moru */
    --renk-4-buz-mavi: #7dd3fc;      /* Buz Mavisi / Açık Cyan */
    --renk-5-neon-mavi: #38bdf8;     /* Parlak Neon Mavi */
    --renk-6-koyu-mavi: #1e40af;     /* Safir / Deniz Mavisi */
    --renk-7-turkuaz: #2dd4bf;       /* Kristal Turkuaz */
    --renk-8-nane-yesili: #4ade80;   /* Canlı Nane Yeşili */
    --renk-9-zumrut: #15803d;        /* Derin Zümrüt Yeşili */
    --renk-10-limon-yesil: #a3e635;  /* Büyü / Zehir Yeşili */
    --renk-11-sari: #facc15;         /* Altın Sarısı */
    --renk-12-kehribar: #f59e0b;     /* Kehribar / Bal Rengi */
    --renk-13-turuncu: #fb923c;      /* Alev Turuncusu */
    --renk-14-kirmizi: #f87171;      /* Kan Kırmızı / Mercan */
    --renk-15-koyu-kirmizi: #991b1b; /* Derin Yakut Kırmızısı */
    --renk-16-pembe: #f472b6;        /* Şeker Pembe */
    --renk-17-fusya: #e879f9;        /* Parlak Fuşya */
    --renk-18-beyaz: #f8fafc;        /* Parlak Saf Beyaz */
    --renk-19-gri-acik: #e2e8f0;     /* Genel Metin Grisi */
    --renk-20-gri-koyu: #94a3b8;     /* Pasif / Tarih Grisi */

    /* Ekstra Başlık Renkleri */
    --baslik-yesil-alternatif: #22c55e;

    /* ----------------------------------------------------------
       3. METİN & EFEKT VARSAYILANLARI
       ---------------------------------------------------------- */
    --metin-ana: var(--renk-19-gri-acik);
    --metin-ikincil: var(--renk-20-gri-koyu);
    --golge-parlama: rgba(168, 85, 247, 0.6);
    --cerceve-cizgi: rgba(168, 85, 247, 0.25);
    --font-oyun: 'OyunFontu', serif;
}

/* ==========================================================
   4. EDİTÖR VE BAŞLIK RENK SINIFLARI 
   ========================================================== */
.c-mor-ana       { color: var(--renk-1-mor-ana) !important; }
.c-mor-acik      { color: var(--renk-2-mor-acik) !important; }
.c-mor-koyu      { color: var(--renk-3-mor-koyu) !important; }
.c-buz-mavi      { color: var(--renk-4-buz-mavi) !important; }
.c-neon-mavi     { color: var(--renk-5-neon-mavi) !important; }
.c-koyu-mavi     { color: var(--renk-6-koyu-mavi) !important; }
.c-turkuaz       { color: var(--renk-7-turkuaz) !important; }
.c-nane-yesili   { color: var(--renk-8-nane-yesili) !important; }
.c-zumrut        { color: var(--renk-9-zumrut) !important; }
.c-limon-yesil   { color: var(--renk-10-limon-yesil) !important; }
.c-sari          { color: var(--renk-11-sari) !important; }
.c-kehribar      { color: var(--renk-12-kehribar) !important; }
.c-turuncu       { color: var(--renk-13-turuncu) !important; }
.c-kirmizi       { color: var(--renk-14-kirmizi) !important; }
.c-koyu-kirmizi  { color: var(--renk-15-koyu-kirmizi) !important; }
.c-pembe         { color: var(--renk-16-pembe) !important; }
.c-fusya         { color: var(--renk-17-fusya) !important; }
.c-beyaz         { color: var(--renk-18-beyaz) !important; }
.c-gri-acik      { color: var(--renk-19-gri-acik) !important; }
.c-gri-koyu      { color: var(--renk-20-gri-koyu) !important; }

/* Özel Başlık Sınıfları */
.baslik-mor      { color: var(--renk-1-mor-ana); }
.baslik-yesil    { color: var(--baslik-yesil-alternatif); }
.baslik-mavi     { color: var(--renk-5-neon-mavi); }
.baslik-turuncu  { color: var(--renk-13-turuncu); }
.baslik-pembe    { color: var(--renk-16-pembe); }
.buz-mavi-baslik { color: var(--renk-4-buz-mavi); }

/* ==========================================================
   5. GENEL TEMEL AYARLAR & FONT TANIMI
   ========================================================== */
* {
    box-sizing: border-box;
}

@font-face {
    font-family: 'OyunFontu';
    src: url('../fonts/PressStart2P.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FiraSans';
    src: url('../fonts/FiraSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    margin: 0;
    font-family: var(--font-oyun);
    font-size: 13px;
    line-height: 1.8;
    color: var(--metin-ana);
    
    background-color: var(--sayfa-arkaplan-rengi);
    background-image: url('../images/arkaplan.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* Footer için alt tarafa esneme payı */
    min-height: 100vh;
    overflow-x: hidden;
}

/* ==========================================================
   6. ÜST BAR, SEKMELER VE DİL SEÇENEĞİ (HEADER)
   ========================================================== */
.ust-menu {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70px;
    padding: 10px 20px;
    width: 100%;
    z-index: 100;
}

.ust-bar-arkaplan {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1000px;
    height: 100%;
    z-index: -1;
    object-fit: cover;
}

.sayfa-menu {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
    margin: 6px 0 28px;
    z-index: 10;
}

.sayfa-menu a {
    color: var(--renk-19-gri-acik);
    text-decoration: none;
    font-size: 15px;
    padding: 6px 2px;
    border-bottom: 2px solid transparent;
    transition: color .2s ease, border-color .2s ease;
    font-weight: bold;
}

.sayfa-menu a:hover,
.sayfa-menu a.aktif {
    color: var(--renk-4-buz-mavi);
    border-bottom-color: var(--renk-4-buz-mavi);
}

.dil-cerceve-kutusu {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    width: 150px;  
    height: 130px; 
}

.dil-arkaplan-cerceve {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    z-index: 1;
}

.dil-butonlari {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.dil-btn {
    cursor: pointer;
    text-decoration: none;
    font-family: var(--font-oyun);
    font-size: 14px;
    letter-spacing: 1px;
    color: var(--renk-2-mor-acik);
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
    transition: color 0.2s ease, transform 0.2s ease;
}

.dil-btn:hover {
    color: var(--renk-18-beyaz);
    transform: scale(1.1);
}

.dil-btn.dil-aktif {
    color: var(--renk-1-mor-ana);
    text-shadow: 0 0 10px rgba(168, 85, 247, 0.85);
}

/* ==========================================================
   7. SAYFA GÖVDESİ & BANNER / LOGO ALANI
   ========================================================== */
.sayfa-govde {
    max-width: 850px;
    margin: 40px auto 0 auto;
    padding: 0 20px;
}

.logo-merkez-alani {
    position: relative;
    text-align: center;
    aspect-ratio: 2560 / 1440;
}

.ana-arkaplan-resim {
    display: none; 
}

.ana-logo {
    position: absolute;
    top: 40%; 
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 500px;
    width: 70%;
    height: auto;
    filter: drop-shadow(0 0 20px var(--golge-parlama));
    transition: transform 0.3s ease;
    z-index: 5;
}

.ana-logo:hover {
    transform: translate(-50%, -50%) scale(1.02);
}

/* ==========================================================
   8. İÇERİK KUTULARI (BÜYÜTÜLMÜŞ PİKSEL ÇERÇEVELER)
   ========================================================== */
.ana-icerik {
    margin-top: calc(-18.44% + 28px);
    margin-bottom: 40px;
}

.kutu {
    position: relative;
    /* PC için 32px çerçeve alanına göre iç boşluk artırıldı */
    padding: 48px; 
    margin-bottom: 30px;
    background-color: rgba(45, 35, 60, 0.95); 

    background-image: 
        url('../images/frame_image/corner_upperleft.png'),
        url('../images/frame_image/corner_upperright.png'),
        url('../images/frame_image/corner_lowerleft.png'),
        url('../images/frame_image/corner_lowerright.png'),
        url('../images/frame_image/upper.png'),
        url('../images/frame_image/lower.png'),
        url('../images/frame_image/left.png'),
        url('../images/frame_image/right.png');
        
    /* Parçaların Konumları (PC'de 32px ölçekte) */
    background-position: 
        0 0,           
        100% 0,        
        0 100%,        
        100% 100%,     
        32px 0,        
        32px 100%,     
        0 32px,        
        100% 32px;     
        
    /* Parçaların Boyutları (Tüm desenler 32x32 olarak netleştirildi ve büyütüldü) */
    background-size: 
        32px 32px, 32px 32px, 32px 32px, 32px 32px,
        32px 32px, 32px 32px, 32px 32px, 32px 32px;
        
    background-repeat: 
        no-repeat, no-repeat, no-repeat, no-repeat,
        repeat-x, /* Üst kenar */
        repeat-x, /* Alt kenar */
        repeat-y, /* Sol kenar */
        repeat-y; /* Sağ kenar */

    /* Pikselleri 2 katına çıkarırken bulanıklaşmayı engeller */
    image-rendering: pixelated;
    image-rendering: crisp-edges;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

h1, h2 {
    font-family: var(--font-oyun);
    color: var(--renk-1-mor-ana);
    margin-top: 0;
    line-height: 1.4;
}

h1 { font-size: 20px; }
h2 { font-size: 16px; }

.tarih {
    display: block;
    font-size: 11px;
    color: var(--metin-ikincil);
    margin-bottom: 15px;
}

ul { padding-left: 20px; }
li { margin-bottom: 12px; }

.kutu strong, .kutu b { color: var(--renk-4-buz-mavi); }
.blog-yazisi p { color: var(--renk-19-gri-acik); line-height: 1.65; }

/* ==========================================================
   9. MEDYA ELEMANLARI
   ========================================================== */
.yama-resmi {
    width: 100%;
    max-width: 600px;
    height: auto;
    border-radius: 8px;
    margin: 15px 0;
    border: 1px solid var(--cerceve-cizgi);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    display: block;
}

/* ==========================================================
   10. SİHİR TOZU EFEKTİ
   ========================================================== */
.sihir-kutusu {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    pointer-events: none; z-index: 9999; overflow: hidden;
}

.sihir-tozu {
    position: absolute;
    top: -10vh;
    background: var(--renk-1-mor-ana);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--renk-1-mor-ana), 0 0 15px var(--renk-2-mor-acik);
    animation: sihir-yagisi linear infinite;
}

@keyframes sihir-yagisi {
    0% { transform: translateY(0) scale(0.8); opacity: 0; }
    10% { opacity: 1; }
    80% { opacity: 0.8; }
    100% { transform: translateY(110vh) scale(1.2); opacity: 0; }
}

/* ==========================================================
   11. ALT BİLGİ (YENİ TAM EKRAN PASTEL FOOTER)
   ========================================================== */
.site-footer {
    /* Sihirli CSS hack'i: Kutunun dışına taşıp tüm ekranı boydan boya kaplar */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    
    /* İstenilen mat, pastel arka plan (Görseline uyumlu koyu ton) */
    background-color: #1e1526; 
    
    /* İçeriğin yine sayfa ortasında (850px) kalmasını sağlayan matematik */
    padding: 40px max(20px, calc(50vw - 425px));
    
    /* Eski kutu özelliklerini siliyoruz */
    border-radius: 0;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    
    /* İçerik düzeni */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
    
    margin-top: 80px;
    margin-bottom: 0;
    font-family: 'FiraSans', sans-serif;
}

.footer-sol {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 550px;
}

.yasal-metin {
    font-size: 13px;
    line-height: 1.6;
    color: var(--renk-20-gri-koyu);
    margin: 0;
}

.telif {
    font-size: 14px;
    color: var(--renk-2-mor-acik);
    font-weight: bold;
}

.footer-sag {
    display: flex;
    gap: 20px;
    align-items: center;
}

.footer-sag a {
    color: var(--renk-20-gri-koyu);
    font-size: 24px;
    text-decoration: none;
    transition: transform 0.2s ease, color 0.2s ease;
}

.footer-sag a:hover {
    color: var(--renk-4-buz-mavi);
    transform: scale(1.15);
}

/* ==========================================================
   12. MOBİL UYUM (RESPONSIVE DESIGN)
   ========================================================== */
@media screen and (max-width: 768px) {
    
    body {
        background-attachment: scroll;
        background-position: top center;
    }

    .ust-menu { 
        padding: 15px 20px; 
        flex-direction: column; 
        gap: 15px;
    }
    
    .logo-merkez-alani {
        aspect-ratio: auto; 
        display: flex; flex-direction: column; align-items: center; gap: 15px;
    }

    .ana-logo {
        position: relative; top: auto; left: auto; transform: none; width: 100%; max-width: 280px; 
    }
    .ana-logo:hover { transform: scale(1.02); }

    .sayfa-menu { gap: 10px; margin: 0; }
    .sayfa-menu a { font-size: 11px; padding: 4px; }

    .dil-cerceve-kutusu { 
        position: relative; right: 0; transform: none; width: auto; height: auto; 
    }
    .dil-arkaplan-cerceve { display: none; }
    .dil-butonlari {
        position: relative;
        background: rgba(15, 15, 20, 0.85); 
        backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
        border: 1px solid rgba(168, 85, 247, 0.4); 
        border-radius: 8px; padding: 6px 12px; gap: 15px;
    }
    .dil-btn { font-size: 11px; }
    .sayfa-govde { margin-top: 20px; }
    .ana-icerik { margin-top: 20px; }

    /* MOBİLDE ÇERÇEVELERİ ESKİ (16PX) BOYUTUNA DÖNDÜRÜYORUZ */
    .kutu { 
        padding: 32px; 
        margin-bottom: 20px; 
        background-position: 
            0 0, 100% 0, 0 100%, 100% 100%,
            16px 0, 16px 100%, 0 16px, 100% 16px;
        background-size: 
            16px 16px, 16px 16px, 16px 16px, 16px 16px,
            16px 16px, 16px 16px, 16px 16px, 16px 16px;
    }

    h1 { font-size: 14px; line-height: 1.5; }
    h2 { font-size: 12px; line-height: 1.5; }

    /* Mobil Footer Uyumu */
    .site-footer {
        flex-direction: column;
        text-align: center;
        align-items: center;
        padding: 40px 20px; /* Mobilde hesaplamayı kapatıp normal dolgu yapıyoruz */
    }
    .footer-sol {
        align-items: center;
        max-width: 100%;
    }
}

/* ==========================================================
   13. SSS (FAQ) SAYFASI STİLLERİ
   Not: Bu blok daha önce faq-tr.html / faq-en.html içindeki
   <style> etiketinde ayrı ayrı tanımlıydı. O dosyalardan
   BAĞIMSIZ olarak, eski/hurda bir kopyası da (font-family
   tanımı eksik haliyle) yanlışlıkla blog-tr.html'e karışmıştı.
   "SSS -> Geliştirici Blogu" geçişinde tarayıcı o eski, hatalı
   kopyayı gösterdiği için cevap metinleri font-family
   tanımsız kalıp sitenin varsayılan pikselli OyunFontu'na
   düşüyordu. Artık tek doğru kaynak burası; faq-tr.html ve
   faq-en.html içindeki satır içi <style> blokları kaldırıldı.
   ========================================================== */
.faq-kapsayici {
    padding: 48px;
    text-align: left;
}

.faq-satir {
    background: transparent;
    border: none;
    border-bottom: 1px dashed var(--cerceve-cizgi);
    box-shadow: none;
    margin: 0;
    padding: 20px 0;
    border-radius: 0;
}

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

.faq-satir summary {
    list-style: none;
    font-family: var(--font-oyun);
    font-size: 14px;
    font-weight: bold;
    position: relative;
    padding-right: 40px;
    cursor: pointer;
    outline: none;
    color: var(--renk-18-beyaz);
    transition: color 0.2s ease;
    margin: 0;
    background: transparent;
}

.faq-satir summary::-webkit-details-marker {
    display: none;
}

.faq-satir summary::marker {
    content: '';
    display: none;
}

.faq-satir summary:hover,
.faq-satir[open] summary {
    color: var(--renk-4-buz-mavi);
}

.faq-satir summary::after {
    content: '\f067';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--renk-1-mor-ana);
    transition: transform 0.3s ease, color 0.3s ease;
}

.faq-satir[open] summary::after {
    transform: translateY(-50%) rotate(45deg);
    color: var(--renk-4-buz-mavi);
}

.faq-cevap {
    margin-top: 15px;
    font-family: 'FiraSans', sans-serif;
    font-size: 14px;
    line-height: 1.65;
    color: var(--renk-19-gri-acik);
    padding-right: 20px;
}

.faq-cevap p {
    margin-bottom: 10px;
}

.faq-cevap p:last-child {
    margin-bottom: 0;
}

@media screen and (max-width: 768px) {
    .faq-kapsayici {
        padding: 32px;
    }
    .faq-satir summary {
        font-size: 12px;
    }
}