/* ===== YENİ NESİL TASARIM v2.3 - Gelişmiş Mobil Deneyim ===== */

/* 1. Genel Ayarlar ve Renk Paleti */
:root {
    --bg-main: #0D1117;
    --bg-content: #161B22;
    --border-color: #30363D;
    --accent-gold: #E3B341;
    --accent-gold-hover: #F0C674;
    --text-primary: #C9D1D9;
    --text-secondary: #8B949E;
    --success-green: #2DA44E;
    
    --font-family: 'Inter', sans-serif;
    --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.1);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.2), 0 2px 4px -1px rgba(0,0,0,0.16);
    --radius-sm: 6px;
    --radius-md: 10px;
}

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

body {
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: 13px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-bottom: 80px; 
}

a {
    color: var(--accent-gold);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}
a:hover {
    color: var(--accent-gold-hover);
}

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

.site-container {
    max-width: 850px;
    margin: 0 auto;
    padding: 0 15px;
}

/* 2. Buton Stilleri */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.btn-primary {
    background: linear-gradient(145deg, var(--accent-gold), #b88a2e);
    color: #111;
    border: none;
    box-shadow: 0 2px 5px rgba(227, 179, 65, 0.2);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(227, 179, 65, 0.3);
    color: #000;
}
.btn-sm {
    background-color: var(--border-color);
    color: var(--text-primary);
    padding: 4px 10px;
}
.btn-sm:hover {
    background-color: #444c56;
}
.btn-block {
    width: 100%;
}


/* 3. Popup Stilleri (Değişiklik yok) */
#popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(13, 17, 23, 0.85); backdrop-filter: blur(5px); display: flex; justify-content: center; align-items: center; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
#popup-overlay.show { opacity: 1; visibility: visible; }
#popup-container { background-color: var(--bg-content); padding: 20px; border-radius: var(--radius-md); border: 1px solid var(--border-color); position: relative; width: 90%; max-width: 400px; max-height: 80vh; overflow-y: auto; box-shadow: var(--shadow-md); transform: scale(0.95); transition: transform 0.3s ease; }
#popup-overlay.show #popup-container { transform: scale(1); }
#popup-close-btn { position: absolute; top: 8px; right: 12px; background: transparent; border: none; color: var(--text-secondary); font-size: 26px; cursor: pointer; transition: color 0.2s ease; }
#popup-close-btn:hover { color: var(--text-primary); }
#popup-content { display: flex; flex-direction: column; gap: 15px; }
.popup-item { display: block; border-radius: var(--radius-sm); overflow: hidden; transition: transform 0.2s ease; }
.popup-item:hover { transform: scale(1.03); }


/* 4. Header (Değişiklik yok) */
.site-header { margin: 20px 0; }
.top-nav { display: flex; justify-content: center; gap: 20px; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid var(--border-color); }
.top-nav a { color: var(--text-secondary); font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.top-nav a:hover { color: var(--text-primary); }
.firsat-bar { display: flex; justify-content: space-between; align-items: center; background-color: var(--bg-content); padding: 10px 15px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); }
.firsat-bar span { font-weight: 500; font-size: 13px; }


/* 5. Kayan Kutular (Değişiklik yok) */
@keyframes kaydir { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.kayan-kutular-section { width: 100%; overflow: hidden; padding: 15px 0; }
.kayan-kutular-container { mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); }
.kayan-icerik { display: flex; width: calc(180px * 12); animation: kaydir 50s linear infinite; }
.kayan-kutu { width: 160px; flex-shrink: 0; margin: 0 10px; background-color: var(--bg-content); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 10px; text-align: center; transition: all 0.2s ease; }
.kayan-kutu:hover { transform: translateY(-3px); border-color: var(--accent-gold); }
.kayan-kutu .kutu-bonus-metni { font-size: 12px; font-weight: 600; margin-bottom: 8px; color: var(--text-primary); }
.kayan-kutu img { border-radius: var(--radius-sm); margin-bottom: 10px; height: 70px; object-fit: cover; }


/* 6. Filtreleme ve Arama (Değişiklik yok) */
.filtre-alani { margin-bottom: 25px; }
.arama-kutusu { position: relative; margin-bottom: 15px; }
.arama-kutusu i { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); color: var(--text-secondary); font-size: 13px; }
.arama-kutusu input { width: 100%; background-color: var(--bg-content); border: 1px solid var(--border-color); padding: 10px 12px 10px 35px; color: var(--text-primary); border-radius: var(--radius-sm); outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
.arama-kutusu input:focus { border-color: var(--accent-gold); box-shadow: 0 0 0 3px rgba(227, 179, 65, 0.2); }
.kategori-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.kategori-btn { background-color: var(--bg-content); border: 1px solid var(--border-color); color: var(--text-secondary); padding: 6px 14px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 500; transition: all 0.2s ease; display: flex; align-items: center; gap: 6px; }
.kategori-btn:hover { color: var(--text-primary); border-color: #555; }
.kategori-btn.active { color: #111; background-color: var(--accent-gold); border-color: var(--accent-gold); font-weight: 600; }
.kategori-btn.active i { color: #111 !important; }

/* 7. Neon Efektli Yatay Site Kartı Tasarımı */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes glowing-border {
  0% { --angle: 0deg; }
  100% { --angle: 360deg; }
}

.site-listesi { 
    display: grid;
    gap: 15px; /* Kartlar arası boşluk */
}

.site-karti {
    position: relative; /* Neon efekt için gerekli */
    display: grid;
    grid-template-columns: 60px 1fr auto; /* Logo | Bilgi | Buton */
    align-items: center;
    gap: 15px;
    background-color: var(--bg-content);
    padding: 12px; /* İnce görünüm için padding'i ayarladık */
    border-radius: var(--radius-md);
    transition: all 0.2s ease-in-out;
    border: 1px solid var(--border-color); /* Animasyon yokkenki varsayılan border */
}

.site-karti::before {
    content: '';
    position: absolute;
    top: -1px; left: -1px; right: -1px; bottom: -1px; /* Kenarlık kalınlığı */
    z-index: -1;
    background: conic-gradient(
        from var(--angle),
        #05c5fa, 
        #d226b3, 
        #f0e932, 
        #2ffc2f,
        #05c5fa /* Renk döngüsünü tamamlamak için başa dön */
    );
    border-radius: inherit; /* Ana kart ile aynı köşe yuvarlaklığı */
    animation: glowing-border 4s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.site-karti:hover::before {
    opacity: 1; /* Fare üzerine gelince neon efekti göster */
}

.site-karti:hover {
    border-color: transparent; /* Neon efekt görününce varsayılan border'ı gizle */
}

.site-resim {
    width: 60px;
    height: 60px;
}

.site-resim img {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-sm);
    object-fit: cover;
}

.site-bilgi {
    display: flex;
    flex-direction: column;
    gap: 2px; /* Metinler arası boşluk */
}
.bonus-miktar {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary); /* Rengi daha belirgin yaptık */
    line-height: 1.2;
}
.bonus-kategori {
    font-size: 11px;
    font-weight: 500;
    color: var(--accent-gold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.bonus-tipi {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 400;
}
.site-eylem {
    width: 130px;
}
.hata-mesaji { 
    background-color: var(--bg-content); 
    padding: 25px; 
    border-radius: var(--radius-md); 
    text-align: center; 
    color: var(--text-secondary); 
    border: 1px solid var(--border-color); 
}


/* 8. Sabit Alt Navigasyon Menüsü (Değişiklik yok) */
.mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 65px;
    background-color: var(--bg-content);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 100;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
}
.mobile-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    flex-grow: 1; 
    height: 100%;
}
.mobile-nav a i {
    font-size: 20px;
}
.mobile-nav a.active {
    color: var(--accent-gold);
}


/* 9. Mobil Uyum (Responsive) - GÜNCELLENDİ */
@media (max-width: 768px) {
    .top-nav a span { 
        display: none; 
    }
    .firsat-bar { 
        flex-direction: column; gap: 10px; text-align: center; 
    }
    
    /* YENİ: Mobil cihazlarda neon efektini sürekli aktif yap */
    .site-karti::before {
        opacity: 1; /* Neon animasyonu her zaman görünür olsun */
    }
    .site-karti {
        border-color: transparent; /* Varsayılan border'ı gizle ki neon görünsün */
    }
}

@media (max-width: 600px) {
    body { 
        font-size: 12px; padding-bottom: 70px; 
    }
    
    /* GÜNCELLEME: Kartların mobilde de yatay kalması için dikey yapan kodları kaldırdık.
       Sadece küçük ekranlar için logo ve buton boyutunu biraz ayarlayabiliriz. */
    .site-karti {
        grid-template-columns: 50px 1fr auto; /* Logoyu biraz küçült */
        gap: 12px;
    }
    .site-resim {
        width: 50px;
        height: 50px;
    }
    .site-eylem {
        width: 110px; /* Buton alanını biraz daralt */
    }
    .bonus-miktar {
        font-size: 15px; /* Yazıyı biraz küçült */
    }

    .kayan-icerik { 
        animation-duration: 35s; 
    }
}