html, body {
max-width: 100% !important;
overflow-x: hidden !important;
}
:root { --primary-color: #ffd700; --dark-bg: #121212; --card-bg: #1e1e1e; --sidebar-width: 280px; }
body { background-color: #000; font-family: 'Poppins', sans-serif; font-size: 14px; color: #e0e0e0; overflow-x: hidden; display: flex; flex-direction: column; min-height: 100vh; }
.brand-text { font-family: 'Chakra Petch', sans-serif; font-weight: 800; font-style: italic; font-size: 1.8rem; letter-spacing: 1px; background: linear-gradient(45deg, #FFD700, #FFC107, #FFFFFF); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0px 0px 15px rgba(255, 215, 0, 0.4); }
.sidebar { width: var(--sidebar-width); background: #1a1a1a; border-right: 1px solid #333; height: 100vh; position: fixed; top: 0; left: 0; padding: 20px; z-index: 1050; overflow-y: auto; transition: 0.3s; display: flex; flex-direction: column; }
.sidebar.active { left: 0; }
.main-content { margin-left: var(--sidebar-width); padding: 25px; transition: 0.3s; flex: 1; }
@media (max-width: 991.98px) {
.sidebar { left: -100%; width: 80%; max-width: 300px; box-shadow: 5px 0 15px rgba(0, 0, 0, 0.5); }
.main-content { margin-left: 0; padding-top: 110px; }
#mobileHeader { display: flex !important; }
#sidebarOverlay.active { display: block !important; }
}
#mobileHeader { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 95px; background: #1a1a1a; z-index: 1040; align-items: flex-end; padding: 35px 15px 15px 15px; border-bottom: 1px solid #333; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); padding-top: max(35px, env(safe-area-inset-top)); }
.menu-label { color: #fff !important; font-weight: 700; font-size: 0.8rem; margin-bottom: 8px; display: block; opacity: 0.9; letter-spacing: 1px; border-bottom: 1px solid #333; padding-bottom: 5px; }
.btn-menu { width: 100%; text-align: left; margin-bottom: 10px; padding: 12px 15px; background: #2c2c2c; color: #fff; border: 1px solid #444; border-radius: 8px; transition: 0.2s; font-weight: 500; display: flex; align-items: center; }
.btn-menu:hover { background: #333; border-color: var(--primary-color); color: var(--primary-color); transform: translateX(5px); }
.btn-menu i { width: 25px; text-align: center; margin-right: 10px; color: var(--primary-color); }
.btn-gold { background: linear-gradient(45deg, #ffd700, #ffb300); border: none; color: #000; font-weight: 700; padding: 12px; width: 100%; border-radius: 8px; box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3); animation: pulse 2s infinite; }
.btn-gold:hover { transform: scale(1.02); box-shadow: 0 6px 20px rgba(255, 215, 0, 0.5); color: #000; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(255, 215, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); } }
.btn-algo { background: #3a3a3a; color: #ffc107; border: 1px solid #ffc107; font-weight: 600; padding: 10px; width: 100%; border-radius: 8px; margin-top: 10px; transition: 0.3s; }
.btn-algo:hover { background: #ffc107; color: #000; box-shadow: 0 0 15px rgba(255, 193, 7, 0.4); }
.card { background: var(--card-bg); border: 1px solid #333; border-radius: 12px; margin-bottom: 20px; }
.card-header { background: rgba(255, 255, 255, 0.05); border-bottom: 1px solid #333; padding: 15px; font-weight: 600; color: var(--primary-color); }
.table-dark { background-color: #1e1e1e; --bs-table-bg: #1e1e1e; --bs-table-border-color: #333; }
.status-bar { background: #151515; border: 1px solid #333; border-radius: 12px; padding: 10px 20px; margin-bottom: 25px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); }
.countdown-title { font-size: 0.7rem; color: #ffc107; letter-spacing: 2px; text-transform: uppercase; display: block; font-weight: 700; }
.countdown-timer { font-family: 'Chakra Petch', sans-serif; font-size: 2.2rem; font-weight: 700; line-height: 1; color: #fff; text-shadow: 0 0 10px rgba(255, 255, 255, 0.2); }
.countdown-location { font-size: 0.8rem; color: #888; font-weight: 400; }
.hover-scale:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(255, 215, 0, 0.1); border-color: var(--primary-color) !important; }
.degree-tooltip { cursor: help; border-bottom: 1px dotted #ffc107; color: #ffc107; font-weight: bold; }
.clickable-name:hover { color: var(--primary-color) !important; text-decoration: underline; cursor: pointer; }
.animate-pulse { animation: pulse-red 2s infinite; }
@keyframes pulse-red { 0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); } 100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); } }
#sidebarOverlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 1045; backdrop-filter: blur(2px); }
.main-content { padding-bottom: 0; }
.premium-feature-list li { margin-bottom: 12px; color: #ddd; display: flex; align-items: center; }
.premium-feature-list i { color: #ffd700; width: 25px; margin-right: 10px; font-size: 1.2rem; }
#analysisOutput { font-family: 'Poppins', sans-serif; color: #e0e0e0; padding: 10px; }
#analysisOutput h3, #analysisOutput h4 { color: #ffd700; font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 1.3rem; text-transform: uppercase; letter-spacing: 1px; margin-top: 25px; margin-bottom: 15px; display: flex; align-items: center; border-bottom: 1px solid rgba(255, 215, 0, 0.2); padding-bottom: 10px; }
#analysisOutput h3::before, #analysisOutput h4::before { content: '\f0e7'; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 12px; background: rgba(255, 215, 0, 0.1); color: #ffd700; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid rgba(255, 215, 0, 0.3); font-size: 1rem; }
#analysisOutput p { background: rgba(255, 255, 255, 0.03); padding: 15px; border-radius: 8px; border-left: 4px solid #666; margin-bottom: 15px; font-size: 0.95rem; line-height: 1.7; color: #ccc; }
#analysisOutput ul { list-style: none; padding-left: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; }
#analysisOutput li { background: linear-gradient(145deg, #252525, #1e1e1e); border: 1px solid #333; padding: 15px; border-radius: 10px; position: relative; transition: transform 0.2s, border-color 0.2s; display: flex; align-items: flex-start; }
#analysisOutput li:hover { transform: translateY(-2px); border-color: #555; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); }
#analysisOutput li::before { content: '\f058'; font-family: "Font Awesome 6 Free"; font-weight: 900; color: #28a745; font-size: 1.2rem; margin-right: 12px; margin-top: 2px; }
#analysisOutput strong, #analysisOutput b { color: #ffc107; font-weight: 600; background: rgba(255, 193, 7, 0.15); border: 1px solid rgba(255, 193, 7, 0.3); padding: 2px 8px; border-radius: 4px; font-size: 0.9em; margin: 0 4px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
/* Profil Modalı Özel Stiller */
.profile-modal-content {
background: linear-gradient(160deg, #111 0%, #050505 100%);
border: 1px solid #333;
border-radius: 16px;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.9);
overflow: hidden;
}
.profile-banner {
height: 120px;
background: linear-gradient(45deg, #1a1a1a, #2c2c2c);
position: relative;
border-bottom: 2px solid #333;
}
/* Premium Üyelere Özel Banner Efekti */
.profile-banner.banner-premium {
background: linear-gradient(45deg, rgba(255, 215, 0, 0.2), rgba(0, 0, 0, 0.8));
border-bottom: 2px solid #FFD700;
}
.profile-banner.banner-admin {
background: linear-gradient(45deg, rgba(220, 53, 69, 0.3), rgba(0, 0, 0, 0.9));
border-bottom: 2px solid #dc3545;
}
.profile-avatar-container {
position: absolute;
bottom: -45px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
}
.profile-avatar {
width: 90px;
height: 90px;
background: #111;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Chakra Petch', sans-serif;
font-size: 2.2rem;
font-weight: 800;
color: #fff;
border: 3px solid #555;
box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
/* Duruma Göre Avatar Çerçeveleri */
.avatar-premium { border-color: #FFD700; color: #FFD700; box-shadow: 0 0 20px rgba(255,215,0,0.5); }
.avatar-admin { border-color: #dc3545; color: #dc3545; box-shadow: 0 0 20px rgba(220,53,69,0.5); }
.avatar-standart { border-color: #00C8FF; color: #00C8FF; }
.profile-stat-box {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 12px;
padding: 15px 10px;
text-align: center;
transition: transform 0.3s;
}
.profile-stat-box:hover {
transform: translateY(-3px);
background: rgba(255,255,255,0.05);
}
.profile-finance-box {
background: #0a0a0a;
border: 1px dashed #444;
border-radius: 12px;
padding: 15px;
position: relative;
overflow: hidden;
}
/* --- SANAL TRİBÜN 2026 PREMIUM TASARIM --- */
.arena-glass-card {
background: rgba(20, 25, 35, 0.6) !important;
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 20px;
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s;
}
.arena-glass-card:hover {
transform: translateY(-5px);
}
.arena-leg-box {
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.03);
border-radius: 12px;
transition: all 0.2s;
}
.arena-leg-box:hover {
background: rgba(255, 255, 255, 0.05);
}
.arena-tabs-custom {
background: rgba(0, 0, 0, 0.5);
padding: 8px;
border-radius: 50px;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.arena-tabs-custom .nav-link {
color: #888;
border-radius: 50px;
font-family: 'Chakra Petch', sans-serif;
letter-spacing: 1px;
transition: all 0.3s;
}
.arena-tabs-custom .nav-link:hover {
color: #fff;
}
.arena-tabs-custom .nav-link.active {
background: linear-gradient(45deg, #00C8FF, #007bb5);
color: #fff !important;
box-shadow: 0 0 20px rgba(0, 200, 255, 0.4);
font-weight: 800;
}
/* Input Placeholder Rengi Düzeltme */
.form-control::placeholder {
color: #b0b0b0 !important; /* Açık Gri */
opacity: 1; /* Firefox için netlik ayarı */
}
/* Sadece koyu mod inputlar için daha parlak olsun istersen */
.bg-dark::placeholder {
color: #cccccc !important;
}
/* ADDED: top6anlyzer responsive fix - BEGIN */
/* Analiz çıktısındaki potansiyel geniş tablo sorununu çözer */
#analysisOutput .table-responsive {
overflow-x: auto; /* Yatay kaydırmayı sağlar */
-webkit-overflow-scrolling: touch;
}
/* Analiz çıktısındaki iç tablo stillerini zorlar */
#analysisOutput table {
width: 100% !important;
max-width: 100% !important;
table-layout: auto !important;
}
@media (max-width: 576px) {
.btn-mobile-small {
font-size: 0.70rem !important;
padding: 4px 10px !important;
border-radius: 20px !important;
}
}
/* SEÇİLEN ALGORİTMA BUTONU NEON EFEKTİ */
.algo-card-selected {
border: 2px solid #00C8FF !important;
box-shadow: 0 0 20px rgba(0, 200, 255, 0.8) !important;
background: linear-gradient(145deg, rgba(0, 200, 255, 0.15), rgba(0,0,0,0.9)) !important;
transform: scale(1.05); /* Tıklayınca hafif öne çıkar */
transition: all 0.3s ease-in-out;
}
.algo-card-selected span, .algo-card-selected i {
color: #00C8FF !important; /* İçindeki yazı ve ikon da mavi parlasın */
}
/* ADDED: top6anlyzer responsive fix - END */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');
/* --- 1. RENK TANIMLAMALARI (DEĞİŞKENLER) --- */
:root {
/* VARSAYILAN: KOYU (NEON CYBER) TEMA */
--bg-body: #121417;
--bg-card: #1F2227;
--text-main: #ffffff;
--text-muted: #a0a0a0;
--border-color: rgba(255, 255, 255, 0.05);
--accent-color: #00C8FF; /* Neon Mavi */
--gold-color: #FFD04A; /* Altın Sarısı */
--icon-color: #1EC7FF;
--shadow-color: rgba(0, 0, 0, 0.5);
--comment-bg: rgba(0, 0, 0, 0.25);
--tag-bg: rgba(0, 0, 0, 0.4);
}
/* AAP Yıldız Sistemi Neon Efektleri */
.aap-star-active {
color: #FFD700;
text-shadow: 0 0 8px rgba(255, 215, 0, 0.8), 0 0 15px rgba(255, 140, 0, 0.5);
margin: 0 1px;
}
.aap-star-inactive {
color: rgba(255, 255, 255, 0.1);
margin: 0 1px;
}
.aap-star-elite i {
animation: eliteStarPulse 2s infinite alternate;
}
@keyframes eliteStarPulse {
0% { transform: scale(1); text-shadow: 0 0 10px #FFD700; }
50% { transform: scale(1.15); text-shadow: 0 0 20px #FFD700, 0 0 30px #FF8C00; }
100% { transform: scale(1); text-shadow: 0 0 10px #FFD700; }
}
.tf-badge {
background: linear-gradient(135deg, #0a0a0a, #1a1a1a);
color: #00E5FF !important;
font-family: 'Chakra Petch', sans-serif;
font-size: 0.65rem;
box-shadow: 0 0 5px rgba(0, 229, 255, 0.3);
border: 1px solid rgba(0, 229, 255, 0.5);
letter-spacing: 0.5px;
}
/* VIP Asistan Seçili Hazne Efekti (NEON) */
.vip-hazne-secili {
border: 2px solid #00E5FF !important;
box-shadow: 0 0 25px rgba(0, 229, 255, 0.6) !important;
background: linear-gradient(145deg, rgba(0, 229, 255, 0.2), #000) !important;
transform: scale(1.05);
transition: all 0.3s ease-in-out;
position: relative;
}
.vip-hazne-secili::after {
content: '✓ ALGORİTMA SEÇİLDİ';
position: absolute;
top: -12px;
right: -10px;
background: #00E5FF;
color: #000;
font-size: 0.65rem;
font-weight: 900;
padding: 3px 8px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 229, 255, 0.8);
}
/* AYDINLIK (LIGHT) TEMA */
[data-theme="light"] {
--bg-body: #f0f2f5; /* Açık Gri Arka Plan */
--bg-card: #ffffff; /* Beyaz Kartlar */
--text-main: #212529; /* Koyu Gri Yazı */
--text-muted: #6c757d; /* Gri Yazı */
--border-color: #dee2e6; /* İnce Gri Çizgiler */
--accent-color: #0d6efd; /* Kurumsal Mavi (Bootstrap Primary) */
--gold-color: #e67700; /* Koyu Turuncu/Altın (Beyazda okunur olsun diye) */
--icon-color: #0d6efd;
--shadow-color: rgba(0, 0, 0, 0.1); /* Daha hafif gölge */
--comment-bg: #f8f9fa; /* Çok açık gri */
--tag-bg: #e9ecef; /* Etiket arka planı */
}
/* SAYFA YAPISI */
*, *::before, *::after { box-sizing: border-box; }
body {
background-color: var(--bg-body);
color: var(--text-main);
font-family: 'Montserrat', sans-serif;
overflow-x: hidden;
transition: background-color 0.3s ease, color 0.3s ease;
}
/* KART TASARIMI */
.cyber-card {
background-color: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 15px 15px 15px 20px;
margin-bottom: 13px;
box-shadow: 0 4px 20px var(--shadow-color);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
width: 100%;
}
/* HEADER KISMI */
.cyber-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--border-color);
padding-bottom: 10px;
margin-bottom: 10px;
flex-wrap: nowrap;
}
/* AT İSMİ */
.cyber-horse-name {
font-size: 1.2rem;
font-weight: 700;
color: var(--text-main);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-left: 10px;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 220px;
}
.cyber-horse-name a { color: var(--text-main) !important; text-decoration: none; }
/* JOKEY İSMİ */
.cyber-jokey { font-size: 0.9rem; color: var(--text-muted); font-weight: 500; text-align: right; }
/* AT NO KUTUSU */
.cyber-tag {
font-size: 1rem;
padding: 5px 10px;
border-radius: 6px;
font-weight: 800;
background: var(--tag-bg);
border: 2px solid;
display: inline-block;
min-width: 35px;
text-align: center;
flex-shrink: 0;
}
/* DURUM YAZISI */
.cyber-gold-text { color: var(--gold-color); font-weight: 700; text-transform: uppercase; font-size: 0.95rem; letter-spacing: 0.5px; display: block; margin-bottom: 5px; }
/* YORUM KUTUSU */
.cyber-comment-box {
background: var(--comment-bg);
border-radius: 10px;
padding: 12px;
font-size: 0.95rem;
line-height: 1.6;
color: var(--text-main); /* Yazı rengi temaya göre değişir */
border: 1px solid var(--border-color);
}
.cyber-plus { color: #28a745; font-weight: 800; margin-right: 6px; font-size: 1.1em; }
.cyber-minus { color: #dc3545; font-weight: 800; margin-right: 6px; font-size: 1.1em; }
.cyber-info { color: var(--icon-color); font-weight: 800; margin-right: 6px; font-size: 1.1em; }
.border-neon { border-color: var(--gold-color) !important; box-shadow: 0 0 15px rgba(255, 208, 74, 0.15); }
/* --- TEMA DEĞİŞTİRME BUTONU --- */
#theme-toggle {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
width: 50px;
height: 50px;
border-radius: 50%;
border: none;
background: var(--accent-color);
color: #fff;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
transition: transform 0.2s;
}
#theme-toggle:active { transform: scale(0.9); }
/* --- MOBİL UYUMLULUK --- */
@media (max-width: 768px) {
.main-content { padding: 100px 0 0 0 !important; }
.cyber-card {
width: 100% !important;
margin: 0 0 4px 0 !important;
border-radius: 0 !important;
border-left: none !important;
border-right: none !important;
padding: 12px 10px 12px 15px !important;
}
.cyber-horse-name {
font-size: 0.95rem !important;
margin-left: 8px !important;
white-space: normal !important;
max-width: none !important;
line-height: 1.1 !important;
}
.cyber-header > div:last-child {
white-space: nowrap !important;
font-size: 1.2rem !important;
margin-left: 10px;
}
.cyber-tag {
font-size: 0.9rem !important;
padding: 4px 8px !important;
min-width: 30px !important;
}
.container, .container-fluid, .row, .col, .col-12 {
padding: 0 !important; margin: 0 !important;
}
.cyber-comment-box { font-size: 0.85rem !important; padding: 10px !important; }
}
/* --- Z-INDEX FIX: UYARI PENCERELERİ EN ÜSTTE OLSUN --- */
/* SweetAlert (Güzel uyarı kutuları) için: */
.swal2-container {
z-index: 200000 !important; /* Bootstrap modal genelde 1055'tir, biz uçurduk */
}
/* Senin Cyber Toast (Siyah bildirim balonu) için: */
#cyberToast {
z-index: 200001 !important; /* Toast hepsinin üstünde olsun */
}
/* Eğer standart Bootstrap Modal içinde Modal açıyorsan (Nested Modal): */
.modal {
background: rgba(0,0,0,0.5); /* Arka planı hafif karart */
}
/* Mobil klavye açılınca inputun kaybolmaması için ek sigorta */
#chatInput:focus {
position: relative;
z-index: 99999;
}
/* Bootstrap Modalları ve SweetAlert Pencereleri için */
.modal-content,
.modal-body,
.swal2-popup,
.swal2-modal,
.bootbox-body {
background-color: #1F2227 !important; /* Senin Koyu Gri Kart Rengin */
color: #ffffff !important;
border: 1px solid #00C8FF !important; /* Neon Mavi Kenarlık */
box-shadow: 0 0 20px rgba(0, 200, 255, 0.2) !important;
}
/* Modal Başlığı (Header) */
.modal-header, .swal2-header {
border-bottom: 1px solid rgba(255,255,255,0.1) !important;
background-color: #1F2227 !important;
}
/* Modal Altı (Footer) */
.modal-footer, .swal2-actions {
border-top: 1px solid rgba(255,255,255,0.1) !important;
background-color: #1F2227 !important;
}
/* Kapatma Butonu (X) Rengi */
.btn-close, .swal2-close {
filter: invert(1) grayscale(100%) brightness(200%); /* X işaretini beyaz yapar */
}
/* Yanıp sönen YENİ yazısı için animasyon */
@keyframes pulse-red {
0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); transform: scale(1); }
70% { box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); transform: scale(1.1); }
100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); transform: scale(1); }
}
.badge-yeni {
animation: pulse-red 2s infinite;
background-color: #dc3545; /* Kırmızı */
color: white;
font-size: 0.7rem;
position: absolute;
top: -10px;
right: -10px;
padding: 3px 8px;
border-radius: 10px;
border: 1px solid #fff;
}
/* --- NEON TOPLIST STİLLERİ (YENİ EKLENEN) --- */
.neon-modal-content {
background: linear-gradient(145deg, #0f0f0f, #1a1a1a);
border: 1px solid rgba(0, 210, 255, 0.3);
box-shadow: 0 0 40px rgba(0, 210, 255, 0.15);
}
.neon-list-item {
background: rgba(255, 255, 255, 0.03);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
transition: all 0.3s ease;
position: relative; overflow: hidden;
}
.neon-list-item:hover {
background: rgba(255, 255, 255, 0.08);
transform: translateX(5px);
box-shadow: -5px 0 15px rgba(0, 210, 255, 0.2);
border-left: 3px solid #00d2ff;
}
.rank-1 { border: 1px solid #FFD700 !important; background: linear-gradient(90deg, rgba(255, 215, 0, 0.1), transparent); box-shadow: 0 0 15px rgba(255, 215, 0, 0.2); }
.rank-2 { border-left: 3px solid #C0C0C0 !important; }
.rank-3 { border-left: 3px solid #CD7F32 !important; }
.btn-like { transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.btn-like:active { transform: scale(0.8); }
.btn-like.liked i { color: #e91e63; animation: heartBeat 0.8s; }
.btn-like.liked { border-color: #e91e63 !important; color: #e91e63 !important; background: rgba(233, 30, 99, 0.1); }
@keyframes heartBeat { 0% { transform: scale(1); } 14% { transform: scale(1.3); } 28% { transform: scale(1); } 42% { transform: scale(1.3); } 70% { transform: scale(1); } }
.fire-count { font-size: 0.75rem; font-weight: 700; color: #fff; margin-left: 5px; }
/* --- KUPON ARENASI ÖZEL STİLLERİ --- */
.arena-card {
background: #151515;
border: 1px solid #333;
border-radius: 12px;
margin-bottom: 20px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
/* CANLI YANIP SÖNME EFEKTİ (YEŞİL ÇERÇEVE) */
.arena-card.live-active {
border-color: #28a745 !important;
box-shadow: 0 0 15px rgba(40, 167, 69, 0.4);
animation: pulse-green 2s infinite;
}
@keyframes pulse-green {
0% {
box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
}
}
.user-badge {
font-size: 0.7rem;
padding: 2px 6px;
border-radius: 4px;
margin-right: 5px;
font-weight: bold;
text-transform: uppercase;
}
.badge-banko {
background: #ffd700;
color: #000;
}
.badge-usta {
background: #6f42c1;
color: #fff;
}
.arena-leg-row {
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
padding: 8px 5px;
display: flex;
align-items: center;
}
/* --- TOTAL ANALİZ Z-INDEX FİX --- */
#totalAnalysisModal {
z-index: 1060 !important;
}
/* Modal backdrop (siyah perde) */
.modal-backdrop.show {
opacity: 0.8 !important;
z-index: 1050 !important;
}
/* Modal içeriği görünürlük zorlaması */
#totalAnalysisModal .modal-content {
opacity: 1 !important;
visibility: visible !important;
}
/* Dikkat Çeken Animasyon (Nefes Alma Efekti) */
@keyframes pulse-highlight {
0% {
transform: scale(1);
filter: brightness(100%);
}
50% {
transform: scale(1.05);
filter: brightness(130%);
}
100% {
transform: scale(1);
filter: brightness(100%);
}
}
.dikkat-ceken-btn {
animation: pulse-highlight 2s infinite ease-in-out; /* 2 saniyede bir tekrar eder */
}
/* Mouse üzerine gelince animasyon dursun istersen bunu ekle */
.dikkat-ceken-btn:hover {
animation: none;
}
/* Neon Buton Efekti */
.glow-button {
transition: all 0.3s ease;
border: 1px solid #dc3545;
color: #ff6b6b;
}
.glow-button:hover {
background-color: #dc3545;
color: white;
box-shadow: 0 0 15px rgba(220, 53, 69, 0.8);
transform: scale(1.02);
}
/* Küçültülmüş Google Play Store Banner */
.playstore-banner {
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
border: 1px solid #333;
border-left: 4px solid #00C8FF; /* Şeridi yana aldık, dikeyde yer kazandık */
border-radius: 10px;
padding: 15px 25px; /* İç boşlukları daralttık */
margin: 20px 0; /* Dış boşluğu azalttık */
box-shadow: 0 5px 15px rgba(0,0,0,0.4);
position: relative;
overflow: hidden;
}
.playstore-banner::after {
content: '\f206';
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
right: 10px;
bottom: -10px;
font-size: 60px; /* İkon boyutunu küçülttük */
color: rgba(255, 255, 255, 0.02);
transform: rotate(-15deg);
pointer-events: none;
}
.playstore-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
}
.playstore-text h4 { /* Başlığı h3'ten h4'e çektik */
font-family: 'Chakra Petch', sans-serif;
color: #FFD700;
font-weight: 700;
margin-bottom: 2px;
font-size: 1.1rem;
}
.playstore-text p {
color: #b0b0b0;
margin: 0;
font-size: 0.85rem; /* Yazı boyutunu küçülttük */
}
.playstore-badge img {
height: 45px; /* Buton yüksekliğini 60px'ten 45px'e indirdik */
transition: transform 0.3s ease;
}
.playstore-badge img:hover {
transform: scale(1.05);
}
@media (max-width: 768px) {
.playstore-content {
flex-direction: column;
text-align: center;
padding: 5px 0;
}
.playstore-banner {
padding: 15px;
}
}
/* --- MOBİL İÇİN ALT BOŞLUK VE BUTON AYARLARI --- */
@media (max-width: 768px) {
/* 1. Sayfanın en altına ekstra boşluk ekle ki en alttaki içerik yapışmasın */
body, .main-content {
padding-bottom: 40px !important; /* 120px olan değeri 40px'e çektik */
}
/* 2. Tema Değiştirme Butonunu (Ay/Güneş) yukarı kaldır */
#theme-toggle {
bottom: 90px !important;
}
/* 3. "Kuponum" (Sepet) Butonunu yukarı kaldır */
#floatingCouponBtn {
bottom: 90px !important;
right: 20px !important;
}
/* 4. Eğer "Cyber Toast" (Bildirim) varsa onu da yukarı al */
#cyberToast {
bottom: 150px !important;
}
/* 5. Modalların (Pencerelerin) alt kısmının kesilmesini önle */
.modal-dialog {
margin-bottom: 80px !important;
}
/* iPhone'lar için güvenli alan (Çentik/Home Bar payı) */
.main-content, .modal-footer {
padding-bottom: env(safe-area-inset-bottom) !important;
}
} /* <--- İŞTE BU PARANTEZ EKSİK OLAN! BUNU EKLEMEZSEN ALTTAKİ KODLAR ÇALIŞMAZ */
/* Video Modalı Siyah Ekranın Önüne Geçir */
.modal-backdrop {
z-index: 1040 !important; /* Standart seviyede kalsın */
}
#neonVideoModal {
z-index: 999999 !important; /* Hepsinden yukarıda olsun */
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
/* --- VİTRİN STİLLERİ --- */
.showcase-card {
transition: transform 0.3s ease, border-color 0.3s ease;
}
.showcase-card:hover {
transform: translateY(-5px);
border-color: #ffc107 !important; /* Sarı çerçeve efekti */
}
/* Kalp butonu animasyonu */
.heart-icon {
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.heart-btn:active .heart-icon {
transform: scale(0.5);
}
.heart-liked {
color: #dc3545 !important; /* Kırmızı */
animation: heartBeat 0.5s;
}
@keyframes heartBeat {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}
/* Sayfalama Butonları */
.page-link {
background-color: #212529;
border-color: #444;
color: #fff;
cursor: pointer;
}
.page-link:hover {
background-color: #333;
color: #ffc107;
}
.page-item.active .page-link {
background-color: #ffc107 !important;
color: #000 !important;
border-color: #ffc107;
font-weight: bold;
}
/* Yükleniyor efekti */
.fade-in {
animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@media (max-width: 576px) {
#raceInfoBadge {
font-size: 0.8rem !important; /* Mobilde yazıyı biraz küçültür */
padding-left: 10px;
padding-right: 10px;
}
}
/* --- YENİ BİLDİRİM SİSTEMİ (SAĞDAN AÇILAN) --- */
.site-notif-btn {
position: fixed;
top: 20px;
right: 20px;
z-index: 1045;
background: #111;
border: 2px solid #FFD700;
color: #FFD700;
border-radius: 50%;
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
transition: all 0.3s ease;
}
.site-notif-btn:hover {
transform: scale(1.1);
background: #FFD700;
color: #000;
box-shadow: 0 0 25px rgba(255, 215, 0, 0.6);
}
.site-notif-badge {
position: absolute;
top: -5px;
right: -5px;
background: #dc3545;
color: #fff;
border-radius: 50%;
width: 20px;
height: 20px;
font-size: 0.7rem;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
border: 2px solid #111;
}
.site-notif-panel {
position: fixed;
top: 0;
right: -100%; /* Başlangıçta ekran dışında (Gizli) */
width: 25vw; /* Bilgisayarda ekranın %25'i */
min-width: 320px;
height: 100vh;
background: #0a0a0a;
z-index: 1060;
transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Yumuşak açılış efekti */
box-shadow: -5px 0 30px rgba(0,0,0,0.9);
display: flex;
flex-direction: column;
border-left: 2px solid #FFD700;
}
.site-notif-panel.open {
right: 0; /* Paneli ekrana getir */
}
@media (max-width: 991px) {
.site-notif-btn { top: 25px; right: 15px; } /* Mobilde header'ın sağına hizala */
.site-notif-panel { width: 100%; min-width: 100%; } /* Mobilde Tam Ekran */
}
.notif-header {
padding: 20px;
background: linear-gradient(90deg, #1a1a1a, #000);
border-bottom: 1px solid #333;
display: flex;
justify-content: space-between;
align-items: center;
}
.notif-body {
flex-grow: 1;
overflow-y: auto;
padding: 15px;
}
.notif-item {
background: #111;
border: 1px solid #333;
border-radius: 8px;
padding: 15px;
margin-bottom: 15px;
transition: 0.3s;
}
.notif-item.unread {
border-left: 4px solid #FFD700;
background: rgba(255, 215, 0, 0.05);
}
/* İçerikteki resimlerin ve HTML'in dışarı taşmaması için */
.notif-item img, .notif-item iframe {
max-width: 100%;
height: auto;
border-radius: 6px;
margin-top: 10px;
}
.feedback-star { cursor: pointer; transition: 0.2s; margin: 0 4px; }
.feedback-star:hover { transform: scale(1.3); }
@keyframes shine {
0% { transform: translateX(-100%); }
20% { transform: translateX(100%); }
100% { transform: translateX(100%); }
}
.animate-fadeIn { animation: fadeInSlide 0.5s ease-out; }
@keyframes fadeInSlide { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse-gold { 0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255, 215, 0, 0.7)); } 50% { transform: scale(1.1); filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0)); } 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255, 215, 0, 0)); } }
/* İç çubuğu gizlemek için (butonlarla kaydırılacak) */
#ikiliCardsScrollArea::-webkit-scrollbar { display: none; }
/* Scrollbar Gizleme */
#rising-stars-container::-webkit-scrollbar { display: none; }
#rising-stars-container { -ms-overflow-style: none; scrollbar-width: none; }
/* Kart Efekti */
.card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
/* Yanıp Sönme */
.animate-pulse { animation: pulse 2s infinite; }
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
/* Neon Video Butonu */
.glow-button {
transition: all 0.3s ease;
border: 1px solid #dc3545;
color: #ff6b6b;
background: rgba(220, 53, 69, 0.1);
}
.glow-button:hover {
background-color: #dc3545;
color: white;
box-shadow: 0 0 15px rgba(220, 53, 69, 0.8);
transform: scale(1.02);
cursor: pointer;
}
.icon-glow {
filter: drop-shadow(0 0 5px rgba(255, 193, 7, 0.5));
transition: transform 0.3s;
}
.card:hover .icon-glow {
transform: scale(1.1) rotate(-5deg);
}
.btn-dark:hover { background: rgba(37, 211, 102, 0.15) !important; transform: translateY(-2px); }
/* OYNATICI STİLLERİ */
.cyber-video-modal {
display: none;
position: fixed;
z-index: 999999; /* En üstte olsun */
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.95);
backdrop-filter: blur(8px);
align-items: center;
justify-content: center;
}
.cyber-video-modal.active {
display: flex !important;
}
.cyber-video-content {
background-color: #050505;
border: 2px solid #00C8FF;
box-shadow: 0 0 50px rgba(0, 200, 255, 0.6);
width: 90%;
max-width: 900px;
border-radius: 8px;
overflow: hidden;
animation: modalZoomIn 0.3s ease-out;
}
.cyber-video-header {
padding: 12px 20px;
background: linear-gradient(90deg, rgba(0,200,255,0.1) 0%, rgba(0,0,0,0) 100%);
border-bottom: 1px solid #00C8FF;
display: flex;
justify-content: space-between;
align-items: center;
}
.cyber-close-btn {
color: #fff;
font-size: 28px;
font-weight: bold;
cursor: pointer;
line-height: 1;
transition: all 0.2s;
}
.cyber-close-btn:hover {
color: #dc3545;
transform: scale(1.1);
}
.cyber-play-btn {
background: rgba(0, 200, 255, 0.1);
border: 1px solid #00C8FF;
color: #00C8FF;
padding: 2px 10px;
font-size: 0.75rem;
cursor: pointer;
border-radius: 4px;
transition: all 0.3s ease;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 1px;
}
.cyber-play-btn:hover {
background: #00C8FF;
color: #000;
box-shadow: 0 0 15px #00C8FF;
}
@keyframes modalZoomIn {
from { transform: scale(0.7); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
/* 1. KARANLIK PERDE */
#customOverlayBackdrop {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: rgba(5, 5, 10, 0.92);
z-index: 999990;
display: none;
align-items: center;
justify-content: center;
backdrop-filter: blur(8px);
}
/* 2. ANA KUTU (Mistik & Cyber Tasarım) */
#customPremiumBox {
position: relative;
width: 95%;
max-width: 500px;
max-height: 90vh;
display: flex;
flex-direction: column;
background: linear-gradient(160deg, #0a0f1a 0%, #000000 100%);
border: 1px solid #00C8FF; /* Neon Mavi Çerçeve */
box-shadow: 0 0 40px rgba(0, 200, 255, 0.2), inset 0 0 20px rgba(138, 43, 226, 0.1); /* Hafif Mor ve Mavi Parlama */
border-radius: 16px;
z-index: 999995;
overflow: hidden;
animation: slideUpFade 0.4s ease-out;
}
/* İçerik Kaydırma Alanı */
.premium-scroll-content {
overflow-y: auto;
padding: 25px;
scrollbar-width: thin;
scrollbar-color: #00C8FF #111;
}
/* Animasyonlar */
@keyframes slideUpFade {
from { transform: translateY(50px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes float-wizard {
0% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-10px) rotate(3deg); filter: drop-shadow(0 0 20px rgba(0, 200, 255, 0.6)); }
100% { transform: translateY(0px) rotate(0deg); }
}
@keyframes magic-sparkle {
0% { opacity: 0.5; transform: scale(0.8) rotate(0deg); }
50% { opacity: 1; transform: scale(1.2) rotate(15deg); filter: drop-shadow(0 0 10px #FFD700); }
100% { opacity: 0.5; transform: scale(0.8) rotate(0deg); }
}
/* 3. KAPATMA BUTONU */
#overlayCloseBtn {
position: absolute;
top: 15px; right: 15px;
width: 35px; height: 35px;
background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
color: #888;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
border: 1px solid rgba(255,255,255,0.1);
z-index: 999999;
transition: 0.2s;
}
#overlayCloseBtn:hover { transform: scale(1.1); background: rgba(220, 53, 69, 0.8); color: #fff; border-color: transparent; }
/* LİSTE TASARIMI */
.tech-list-item {
background: rgba(255, 255, 255, 0.03);
border-left: 3px solid #00C8FF;
padding: 12px;
margin-bottom: 10px;
border-radius: 0 8px 8px 0;
font-size: 0.85rem;
color: #ccc;
transition: 0.2s;
}
.tech-list-item:hover {
background: rgba(0, 200, 255, 0.08);
padding-left: 15px;
border-left-color: #8a2be2; /* Üzerine gelince mora dönsün */
}
.tech-title { color: #fff; font-weight: bold; font-size: 0.95rem; }
/* BUTON EFEKTİ */
.btn-magic {
background: linear-gradient(45deg, #00C8FF, #007bb5);
color: #000 !important;
border: none;
box-shadow: 0 0 15px rgba(0, 200, 255, 0.4);
transition: all 0.3s;
}
.btn-magic:hover {
background: linear-gradient(45deg, #8a2be2, #00C8FF);
color: #fff !important;
box-shadow: 0 0 25px rgba(0, 200, 255, 0.7);
transform: scale(1.02);
}
@keyframes shine {
0% { transform: skewX(-20deg) translateX(-150%); }
50% { transform: skewX(-20deg) translateX(150%); }
100% { transform: skewX(-20deg) translateX(150%); }
}
.hover-effect { transition: all 0.3s ease; }
.card:hover .hover-effect { background-color: #333 !important; transform: scale(1.02); }
@media (max-width: 576px) {
#simpleVideoModal .modal-dialog { margin: 0; max-width: 100%; }
#simpleVideoModal .modal-content { border: none; border-radius: 0; }
}
.premium-pricing-cards { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; margin: 25px 0; }
.pricing-card { background: linear-gradient(145deg, #111, #0a0a0a); border: 1px solid #00ffff; border-radius: 12px; padding: 25px 20px; text-align: center; width: 100%; max-width: 300px; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 5px 15px rgba(0, 255, 255, 0.05); }
.pricing-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 255, 255, 0.3); border-color: #fff; }
.pricing-duration { font-size: 1.25em; font-weight: bold; color: #00ffff; margin-bottom: 15px; font-family: 'Chakra Petch', sans-serif; text-shadow: 0 0 5px rgba(0, 255, 255, 0.5); }
.pricing-price { font-size: 2.4em; font-weight: bold; color: #fff; margin-bottom: 10px; text-shadow: 0 0 10px rgba(255, 255, 255, 0.3); }
.pricing-daily { font-size: 0.9em; color: #28a745; margin-bottom: 25px; font-weight: bold; background: rgba(40, 167, 69, 0.1); padding: 8px; border-radius: 5px; }
.pricing-btn { display: inline-block; background-color: #00ffff; color: #000 !important; padding: 12px 20px; border-radius: 6px; text-decoration: none; font-weight: bold; transition: 0.2s; width: 100%; letter-spacing: 1px; box-shadow: 0 0 10px rgba(0, 255, 255, 0.4); }
.pricing-btn:hover { background-color: #fff; box-shadow: 0 0 15px rgba(255, 255, 255, 0.8); transform: scale(1.02); }
.magic-kupon-btn {
display: inline-block;
background: linear-gradient(45deg, #00ffff, #0088ff);
color: #000 !important;
font-family: 'Chakra Petch', sans-serif;
font-size: 1.2rem;
font-weight: bold;
padding: 15px 35px;
border-radius: 50px;
text-decoration: none;
border: 2px solid #fff;
box-shadow: 0 0 20px rgba(0, 255, 255, 0.6);
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
}
.magic-kupon-btn:hover {
transform: scale(1.05);
box-shadow: 0 0 30px rgba(0, 255, 255, 1);
background: linear-gradient(45deg, #fff, #00ffff);
}
/* =========================================
MODERN KOYU TEMA SIDEBAR TASARIMI
========================================= */
/* 1. Sidebar Ana Arka Planı (Antrasit/Siyah) */
#mainSidebar {
background-color: #121417 !important; /* Sağ tarafla uyumlu koyu antrasit */
border-right: 1px solid #292e35 !important;
}
/* 2. Kategori Başlıkları (BÜLTEN SEÇİMİ, HIZLI İŞLEMLER vb.) */
#mainSidebar .menu-label {
color: #8B8F95 !important;
font-size: 0.70rem !important;
font-weight: 700;
letter-spacing: 1px;
border-bottom: 1px solid #292e35;
padding-bottom: 6px;
margin-bottom: 12px;
margin-top: 24px;
display: block;
text-transform: uppercase;
}
/* Bülten Select Kutusu */
#mainSidebar #raceSelect {
background-color: #171A1F !important;
border: 1px solid #292e35 !important;
color: #E3E5E8 !important;
border-radius: 8px;
padding: 10px 12px;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
#mainSidebar #raceSelect:focus {
border-color: rgba(255, 215, 0, 0.5) !important;
box-shadow: 0 0 8px rgba(255, 215, 0, 0.2) !important;
}
/* 3. Menü Elemanları (Card Görünümü) */
.sidebar-btn {
background: linear-gradient(145deg, #1A1D21 0%, #15171A 100%) !important;
border: 1px solid #292e35 !important;
border-radius: 8px !important;
margin-bottom: 10px;
padding: 12px 14px;
display: flex;
align-items: center;
width: 100%;
text-align: left;
text-decoration: none;
position: relative;
transition: all 0.3s ease !important;
overflow: hidden;
box-shadow: 0 3px 6px rgba(0,0,0,0.2) !important;
cursor: pointer;
}
/* Hover Durumu: Sağa kayma ve border'ın sarıya dönmesi */
.sidebar-btn:hover {
transform: translateX(3px);
border-color: rgba(255, 215, 0, 0.4) !important;
background: linear-gradient(145deg, #1e2226 0%, #171a1d 100%) !important;
}
/* Eski ::before ve ::after dekorasyonlarını temizle */
.sidebar-btn::after {
display: none !important;
}
/* Her kartın solundaki ince sarı accent çizgisi ve glow efekti */
.sidebar-btn::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: #FFD700;
box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
border-radius: 4px 0 0 4px;
z-index: 2;
}
/* 4. İkonlar (Sarı renk, sabit hiza ve ölçü) */
.sidebar-btn .icon-box {
color: #FFD700 !important;
font-size: 1.15rem;
width: 32px; /* Tüm ikonların aynı alanı kaplaması için sabit genişlik */
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
text-shadow: 0 0 6px rgba(255, 215, 0, 0.2); /* İkonlara hafif parlama */
flex-shrink: 0;
}
/* 5. Yazı Düzeni */
.sidebar-btn .menu-text-container {
display: flex;
flex-direction: column;
line-height: 1.3;
flex-grow: 1;
padding-right: 45px !important; /* Rozetler (Badge) ile yazının çakışmaması için sağdan boşluk */
}
/* Üst Açıklama (Küçük ve Gri) */
.sidebar-btn .menu-sub {
font-size: 0.65rem;
color: #8B8F95;
margin-bottom: 2px;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
}
/* Ana Başlık (Beyaz ve Kalın) */
.sidebar-btn .menu-title {
font-size: 0.85rem;
font-weight: 700;
color: #FFFFFF;
font-family: 'Chakra Petch', sans-serif;
letter-spacing: 0.3px;
}
/* 6. Rozetler (AÇIK, YENİ, PRO vb.) */
.sidebar-btn .badge-status {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 0.55rem !important;
padding: 3px 6px !important;
border-radius: 4px;
font-weight: 800;
letter-spacing: 0.5px;
white-space: nowrap;
}
.badge-status.acik {
background: rgba(40, 167, 69, 0.15) !important;
color: #28a745 !important;
border: 1px solid rgba(40, 167, 69, 0.3) !important;
}
.badge-status.yeni {
background: rgba(220, 53, 69, 0.15) !important;
color: #dc3545 !important;
border: 1px solid rgba(220, 53, 69, 0.3) !important;
}
.badge-status.pro {
background: rgba(255, 215, 0, 0.1) !important;
color: #FFD700 !important;
border: 1px solid rgba(255, 215, 0, 0.3) !important;
}
/* 7. Özel Buton: SEÇİLEN KOŞUYU GÖSTER (Sarı Gradient ve Glow) */
.btn-bulten-goster {
background: linear-gradient(135deg, #D4A000 0%, #F5C518 100%) !important;
border: 1px solid #FFD700 !important;
box-shadow: 0 4px 15px rgba(245, 197, 24, 0.25) !important;
border-radius: 8px !important;
margin-top: 8px;
}
.btn-bulten-goster::before {
display: none !important; /* Bu özel butonda sol accent çizgisine gerek yok */
}
.btn-bulten-goster .icon-box i,
.btn-bulten-goster i.fa-chevron-right {
color: #111 !important;
text-shadow: none !important;
}
.btn-bulten-goster .menu-title {
color: #000 !important;
font-weight: 800 !important;
}
.btn-bulten-goster .menu-sub {
color: rgba(0, 0, 0, 0.65) !important;
font-weight: 700;
}
.btn-bulten-goster:hover {
background: linear-gradient(135deg, #F5C518 0%, #FFD700 100%) !important;
box-shadow: 0 6px 20px rgba(245, 197, 24, 0.4) !important;
transform: translateY(-2px); /* Bu buton özel vurgu olduğu için sağa değil, hafif yukarı kalksın */
}
/* PREDATOR - PREMIUM HEADER KARTI */
.premium-brand-card {
position: relative;
background: linear-gradient(135deg, #1f2329 0%, #121417 100%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 12px 14px;
display: flex;
align-items: center;
text-decoration: none !important;
overflow: hidden;
transition: all 0.3s ease;
}
.premium-brand-card:hover {
background: linear-gradient(135deg, #242930 0%, #15181b 100%);
border-color: rgba(255, 215, 0, 0.2);
}
/* Üst Fade Çizgisi */
.premium-brand-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.5), transparent);
}
/* Alt Kısa Vurgu Çizgisi */
.premium-brand-card::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 35%;
height: 2px;
background: rgba(255, 215, 0, 0.4);
border-radius: 2px 2px 0 0;
}
/* At İkonu Kapsayıcısı */
.brand-icon-wrapper {
width: 38px;
height: 38px;
background: #0a0b0d;
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
flex-shrink: 0;
box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.03);
}
.brand-icon-wrapper i {
color: #FFD700;
font-size: 1.1rem;
filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.4)); /* Oyuncak gibi durmaması için çok hafif glow */
}
/* Yazı Kapsayıcısı */
.brand-text-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
text-align: left;
}
.brand-title {
color: #FFD700;
font-weight: 800;
font-style: italic;
font-size: 1.15rem;
margin: 0;
line-height: 1.1;
letter-spacing: 0.5px;
font-family: 'Chakra Petch', sans-serif;
}
.brand-subtitle {
color: rgba(255, 255, 255, 0.5);
font-size: 0.65rem;
letter-spacing: 2px;
margin-top: 3px;
text-transform: uppercase;
}
/* PREMIUM BÜLTEN ŞEHİR KARTLARI */
.premium-city-card {
position: relative;
background: linear-gradient(145deg, #1c1f26 0%, #111317 100%);
border: 1px solid rgba(255, 255, 255, 0.04);
border-radius: 12px;
padding: 14px 16px;
cursor: pointer;
overflow: hidden;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 130px;
}
.premium-city-card:hover {
border-color: rgba(255, 215, 0, 0.15);
transform: translateY(-2px);
background: linear-gradient(145deg, #1f232b 0%, #14161a 100%);
}
/* Eski sistemden JS ile gelen dikey çerçeveyi (çift çizgi hatasını) yok eder */
.premium-city-card {
border-left: none !important;
}
/* Sol Dikey Çizgi (Aşağıya kadar tam inip yatayla birleşir) */
.premium-city-card::before {
content: '';
position: absolute;
left: 0;
top: 15%; /* Yukarıdan şık bir boşluk bırakır */
bottom: 0; /* Alt köşeye tam oturup yatay çizgiyle kenetlenir */
width: 3px; /* Kesintisiz net kalınlık */
background: #FFD700;
border-radius: 4px 4px 0 0; /* Sadece üst ucu yuvarlaktır, alt ucu tam köşeye oturur */
box-shadow: 2px 0 6px rgba(255, 215, 0, 0.3);
z-index: 2;
transition: all 0.3s ease;
}
/* Yatay Fade Çizgi (Sol alt köşeden sağa eriyerek uzar) */
.premium-city-card::after {
content: '';
position: absolute;
left: 0; /* Dikey çizgi ile tam sıfıra sıfır üst üste biner */
bottom: 0;
height: 3px; /* Dikey çizgiyle tamamen aynı kalınlıktadır = Kusursuz köşe birleşimi */
width: 30%;
background: linear-gradient(90deg, #FFD700 0%, transparent 100%);
box-shadow: 0 -2px 6px rgba(255, 215, 0, 0.2);
z-index: 1;
transition: all 0.3s ease;
}
/* Hover Animasyonları (Kartın üzerine gelince vurgular hafifçe uzar) */
.premium-city-card:hover::before {
top: 10%;
box-shadow: 2px 0 8px rgba(255, 215, 0, 0.5);
}
.premium-city-card:hover::after {
width: 45%;
box-shadow: 0 -2px 8px rgba(255, 215, 0, 0.4);
}
/* Üst Kısım: Şehir ve Rozet */
.pcc-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 8px;
padding-left: 10px; /* Çizgiden uzaklaşmak için */
}
.pcc-city-name {
color: #fff;
font-weight: 800;
font-size: 1.15rem;
margin: 0;
letter-spacing: 0.5px;
font-family: 'Chakra Petch', sans-serif;
}
.pcc-date {
color: rgba(255, 255, 255, 0.4);
font-size: 0.7rem;
margin-top: 2px;
display: block;
}
.pcc-race-badge {
background: rgba(255, 215, 0, 0.05);
border: 1px solid rgba(255, 215, 0, 0.25);
color: #FFD700;
padding: 3px 10px;
border-radius: 20px;
font-size: 0.7rem;
font-weight: 700;
}
/* Hava Durumu Mini Panel */
.pcc-weather {
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.03);
border-radius: 6px;
padding: 4px 8px;
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: 10px;
margin-bottom: 12px;
}
.pcc-weather img {
width: 14px;
height: 14px;
opacity: 0.8;
}
.pcc-weather-text {
color: rgba(255, 255, 255, 0.5);
font-size: 0.65rem;
font-weight: 600;
}
/* Alt Bölüm: Saat ve İkon */
.pcc-footer {
border-top: 1px solid rgba(255, 255, 255, 0.04);
padding-top: 10px;
margin-left: 10px;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.pcc-time-label {
color: rgba(255, 255, 255, 0.3);
font-size: 0.6rem;
text-transform: uppercase;
letter-spacing: 1px;
display: block;
margin-bottom: 1px;
}
.pcc-time-value {
color: #e0e0e0;
font-weight: 700;
font-size: 1.05rem;
font-family: 'Chakra Petch', sans-serif;
}
.pcc-flag-icon {
color: rgba(255, 215, 0, 0.5);
font-size: 1.2rem;
filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.2));
}
/* MOBİL PERFORMANS OPTİMİZASYONU - Ağır animasyon ve gölgeleri mobilde iptal et */
@media (max-width: 768px) {
.animate-pulse, .animate-glow {
animation: none !important;
}
.modal-content, .card, .city-card, .premium-city-card, .bulletin-panel {
box-shadow: none !important;
backdrop-filter: none !important;
}
/* Mobilde arkaplanların sabit kalması (fixed) render yükünü çok artırır, bunu normale çeviriyoruz */
body {
background-attachment: scroll !important;
}
}
/* --- CUSTOM RACE DROPDOWN (BÜLTEN SEÇİMİ) - KOMPAKT & DENGELİ TASARIM --- */
.custom-select-wrapper { position: relative; width: 100%; margin-bottom: 8px; font-family: 'Inter', 'Poppins', sans-serif; }
.cs-selected { position: relative; background: linear-gradient(110deg, #1b1f24, #121519); border: 1px solid #363c43; border-radius: 8px; padding: 8px 30px 8px 12px; cursor: pointer; transition: all 0.3s ease; min-height: 52px; display: flex; flex-direction: column; justify-content: center; }
.cs-selected.active { border-color: #958314; box-shadow: 0 0 18px rgba(230, 203, 22, 0.15); }
.cs-selected.active::before { content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 3px; background: #f1d20c; box-shadow: 0 0 10px #f1d20c; border-radius: 4px; }
.cs-label { font-size: 8px; color: #7d858e; font-weight: 800; letter-spacing: 0.8px; margin-bottom: 1px; }
.cs-main { font-size: 13px; font-weight: 800; margin-top: 0; color: #f4f6f8; line-height: 1.2; }
.cs-meta { color: #a0a7af; font-size: 9px; margin-top: 2px; }
.cs-arrow { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #f1d20c; font-size: 14px; transition: transform 0.3s; }
.cs-selected.open .cs-arrow { transform: translateY(-50%) rotate(180deg); }
/* Dropdown Liste Alanı */
.cs-dropdown { display: none; position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: #090c0f; border: 1px solid #363c43; border-radius: 8px; overflow-y: auto; max-height: 300px; z-index: 1060; box-shadow: 0 10px 30px rgba(0,0,0,0.8); }
.cs-dropdown.show { display: block; animation: fadeInDown 0.2s ease; }
.cs-dropdown::-webkit-scrollbar { width: 4px; }
.cs-dropdown::-webkit-scrollbar-thumb { background: #363c43; border-radius: 3px; }
.cs-group { padding: 6px 10px; background: #171b20; color: #9ca4ad; font-size: 8px; font-weight: 900; position: sticky; top: 0; z-index: 2; border-bottom: 1px solid #20252a; }
.cs-option { display: grid; grid-template-columns: 65px 1fr 40px; align-items: center; gap: 6px; padding: 6px 12px; border-bottom: 1px solid #20252a; cursor: pointer; transition: background 0.2s; min-height: 38px; }
.cs-option:hover { background: #14181c; }
.cs-option:last-child { border-bottom: none; }
.cs-city { color: #8c949d; font-size: 9px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; }
.cs-race { font-weight: 800; color: #d1d5db; font-size: 11px; white-space: nowrap; display: flex; flex-direction: column; }
.cs-time { text-align: right; color: #f0d317; font-weight: 900; font-size: 11px; }
.cs-option.active { background: linear-gradient(90deg, rgba(85, 75, 13, 0.4), rgba(32, 31, 19, 0.4)); border-left: 3px solid #ffe019; padding-left: 9px; }
.cs-option.active .cs-city, .cs-option.active .cs-race { color: #fff; }
.cs-tag { display: block; color: #d7bf13; font-size: 7px; margin-top: 2px; font-weight: 800; }
/* Sarı Butonu (Seçilen Koşuyu Göster) Küçültme ve Dengeleme */
.btn-bulten-goster { margin-top: 0 !important; min-height: 52px !important; padding: 8px 12px !important; border-radius: 8px !important; }
.btn-bulten-goster .icon-box { width: 24px !important; margin-right: 8px !important; }
.btn-bulten-goster .icon-box i { font-size: 15px !important; }
.btn-bulten-goster .menu-sub { font-size: 8px !important; margin-bottom: 1px !important; }
.btn-bulten-goster .menu-title { font-size: 11px !important; font-weight: 800 !important; }
.btn-bulten-goster i.fa-chevron-right { font-size: 10px !important; right: 12px !important; }
/* Mobil Uyumluluk (Hafif Daha Büyük Dokunma Alanı) */
@media (max-width: 768px) {
.cs-selected { min-height: 56px; padding: 10px 30px 10px 12px; }
.cs-main { font-size: 14px; }
.cs-meta { font-size: 10px; }
.cs-option { padding: 8px 12px; min-height: 44px; grid-template-columns: 70px 1fr 45px; }
.cs-race, .cs-time { font-size: 12px; }
.btn-bulten-goster { min-height: 56px !important; }
}
/* --- EKSİKSİZ PREMIUM AT LİSTESİ (DERİN ANTRASİT) DÜZELTME --- */
.premium-horse-table { background-color: #111418 !important; border: 1px solid #343b42 !important; border-radius: 8px; overflow: hidden; margin-bottom: 0; width: 100%; border-collapse: separate; border-spacing: 0; color: #e0e0e0 !important; }
.premium-horse-table thead { background-color: #0e1114 !important; }
.premium-horse-table thead tr th { border-bottom: 1px solid #343b42 !important; padding: 10px 8px; color: #8d949d !important; font-size: 0.75rem; text-transform: uppercase; font-weight: 800; letter-spacing: 0.5px; border-top: none; vertical-align: middle; }
.premium-horse-table tbody tr { background-color: #15191d !important; transition: all 0.2s ease; color: #f4f6f8 !important; }
.premium-horse-table tbody tr td { border-bottom: 1px solid #242a2f !important; border-top: none !important; padding: 10px 8px; vertical-align: middle; }
.premium-horse-table tbody tr:nth-child(even) { background-color: #13171a !important; }
/* Premium Hover Efekti (Satıra gelince sarı accent) */
.premium-horse-table tbody tr:hover { background: linear-gradient(90deg, rgba(255,215,0,0.05), #15191d) !important; box-shadow: inset 3px 0 0 #ffd700; }