/* 1. DEĞİŞKENLER VE TEMEL AYARLAR */
:root {
    --matrix-red: #cc0000;
    --matrix-red-glow: rgba(204, 0, 0, 0.6);
    --matrix-gold: #ffcc00;
    --matrix-gold-glow: rgba(255, 204, 0, 0.5);
    --matrix-green: #00cc00;
    --matrix-green-glow: rgba(0, 204, 0, 0.2);
}

body {
    margin: 0; padding: 0;
    font-family: 'Rajdhani', sans-serif;
    background: #050505 url('../img/background/background.jpg') no-repeat center center fixed; 
    background-size: cover; 
    color: #f7f7f7;
    overflow-x: hidden;
}

/* 2. ANA LAYOUT */
.matrix-main {
    display: flex;
    justify-content: center;
    gap: 25px;
    padding: 130px 20px 60px 20px;
    max-width: 1300px;
    margin: 0 auto;
}

.left-panel, .right-panel { width: 320px; flex-shrink: 0; }
.center-panel { flex-grow: 1; max-width: 600px; }

/* 3. PANEL KUTULARI (PREMIUM GLASS) */
.panel-box {
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    margin-bottom: 25px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7);
    transition: transform 0.3s ease;
    overflow: hidden;
}

.panel-box:hover { transform: translateY(-5px); }

/* Başlık Stilleri */
.panel-title, .panel-title-red, .panel-title-green {
    font-family: 'Orbitron', sans-serif;
    padding: 15px;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.1em;
    letter-spacing: 1.5px;
}

.panel-title { color: var(--matrix-gold); border-bottom: 1px solid rgba(255, 204, 0, 0.2); }
.panel-title-red { background: linear-gradient(90deg, transparent, var(--matrix-red), transparent); color: #fff; }
.panel-title-green { background: linear-gradient(90deg, transparent, var(--matrix-green), transparent); color: #fff; }

/* Neon Kenarlıklar */
.neon-border-gold { border-top: 3px solid var(--matrix-gold); }
.neon-border-red { border-top: 3px solid var(--matrix-red); }
.neon-border-green { border-top: 3px solid var(--matrix-green); }

/* 4. GÄ°RÄ°Åž VE FORM */
.styled-form { padding: 20px; }
.input-group { position: relative; margin-bottom: 15px; }
.input-group i { position: absolute; left: 12px; top: 12px; color: var(--matrix-gold); }
.input-group input {
    width: 100%;
    padding: 12px 12px 12px 40px;
    background: rgba(0,0,0,0.4);
    border: 1px solid #333;
    color: #fff;
    border-radius: 4px;
    box-sizing: border-box;
}

.btn-matrix-red {
    width: 100%;
    padding: 14px 15px 18px 15px; /* Alt boşluk 'ş' harfi için optimize edildi */
    background: var(--matrix-red);
    color: #fff;
    border: none;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    font-size: 16px;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 0 15px var(--matrix-red-glow);
    transition: 0.3s;
    text-transform: uppercase;
}

.btn-matrix-red:hover {
    background: #ff0000;
    box-shadow: 0 0 25px var(--matrix-red-glow);
    letter-spacing: 1px;
}

.forgot-password { text-align: center; margin-top: 10px; }
.forgot-password a { color: #888; text-decoration: none; font-size: 0.9em; }

/* 5. SIRALAMA SÄ°STEMÄ° */
.ranking-list { padding: 15px; }
.rank-item {
    display: flex;
    justify-content: space-between;
    padding: 12px;
    background: rgba(255,255,255,0.03);
    margin-bottom: 6px;
    border-left: 3px solid transparent;
}
.rank-item.first { border-left-color: var(--matrix-gold); background: rgba(255, 204, 0, 0.05); color: var(--matrix-gold); }

/* 6. SAÄž PANEL (DESTEK VE TOPLULUK) */
.right-panel { display: flex; flex-direction: column; gap: 20px; }

.support-content { padding: 20px 15px; text-align: center; }
.support-text { font-size: 13px; color: #b0b0b0; line-height: 1.6; margin-bottom: 20px; }
.support-links { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }

.support-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 12px 15px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 255, 0, 0.2);
    border-radius: 5px;
    color: #fff !important;
    text-decoration: none;
    transition: 0.3s all ease;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
}

.support-item i { font-size: 18px; margin-right: 15px; color: var(--matrix-green); }
.support-item:hover {
    background: rgba(0, 255, 0, 0.1);
    border-color: var(--matrix-green);
    box-shadow: 0 0 15px var(--matrix-green-glow);
    transform: translateX(5px);
}

.working-hours-badge {
    font-size: 11px;
    color: #666;
    background: rgba(0,0,0,0.5);
    padding: 5px 12px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Instagram Modernize */
.instagram-wrapper { padding: 25px 15px; text-align: center; }
.insta-icon-glow {
    font-size: 40px;
    margin-bottom: 15px;
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2397 75%, #bc1888 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 10px rgba(220, 39, 67, 0.4));
}
.insta-text { font-size: 13px; color: #ddd; margin-bottom: 20px; font-style: italic; }

.insta-matrix-btn {
    display: block;
    background: linear-gradient(45deg, #dc2743, #bc1888);
    color: #fff !important;
    padding: 12px;
    border-radius: 30px;
    text-decoration: none;
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(188, 24, 136, 0.3);
    transition: 0.3s all;
}

.insta-matrix-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(188, 24, 136, 0.5);
    filter: brightness(1.1);
}

.account-handle { display: block; margin-top: 10px; color: #888; font-size: 12px; }

/* 7. VÄ°DEO VE DUYURU SÄ°STEMÄ° */
.video-container { position: relative; padding-bottom: 56.25%; height: 0; }
.video-container iframe { position: absolute; top:0; left:0; width:100%; height:100%; }

.news-list { list-style: none; padding: 0; margin: 0; }
.news-item { padding: 20px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.news-tag { background: var(--matrix-red); padding: 3px 10px; border-radius: 20px; font-size: 0.7em; }
.news-header h3 { color: #fff; margin: 10px 0; }
.news-item p { color: #ccc; font-size: 0.95em; }
.news-item small { color: #666; }

/* Kullanıcı Paneli Kart Tasarımı */
.user-logged-in { padding-bottom: 15px; }

.user-info { display: flex; flex-direction: column; }
.user-info small { color: #888; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.user-info .username { color: #fff; font-size: 18px; font-weight: bold; font-family: 'Orbitron', sans-serif; text-shadow: 0 0 5px rgba(255,255,255,0.3); }

/* Aksiyon Butonları */
.user-actions { display: flex; flex-direction: column; gap: 10px; padding: 0 15px; }

.btn-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #333;
    border-radius: 4px;
    color: #ccc !important;
    text-decoration: none !important;
    font-family: 'Rajdhani', sans-serif;
    font-weight: bold;
    font-size: 14px;
    transition: all 0.3s ease;
}

.btn-action i { font-size: 16px; color: var(--matrix-gold); }
.btn-action:hover {
    background: rgba(255, 204, 0, 0.1);
    border-color: var(--matrix-gold);
    color: #fff !important;
    box-shadow: 0 0 10px var(--matrix-gold-glow);
    transform: translateX(5px);
}

.btn-action.logout:hover {
    background: rgba(204, 0, 0, 0.1);
    border-color: var(--matrix-red);
    box-shadow: 0 0 10px var(--matrix-red-glow);
}
.btn-action.logout i { color: var(--matrix-red); }

/* ==========================================================================
   YENÝ: ÞÝFREMÝ UNUTTUM FEEDBACK EFEKTÝ
   ========================================================================== */

/* Ýlk hali için yumuþak geçiþ zemini hazýrlýyoruz */
.forgot-password a {
    display: inline-block; /* Büyüme (scale) efektinin çalýþmasý için þart */
    transition: all 0.3s ease-in-out;
}

/* Üzerine gelindiðinde (Hover) tetiklenecek efektler */
.forgot-password a:hover {
    color: var(--matrix-gold) !important; /* Yazý rengini mat gri yerine Matrix sarýsý yapar */
    text-shadow: 0 0 8px var(--matrix-gold-glow); /* Arkasýna tatlý bir neon parlama verir */
    transform: scale(1.05); /* Yazýyý %5 oranýnda yumuþakça büyütür */
    letter-spacing: 0.5px; /* Harfleri çok hafif açarak netlik hissi verir */
}

/* ==========================================================================
   YENİ EKLENEN DISCORD ÖZEL STİLLERİ (MEVCUT YAPINIZI BOZMAZ)
   ========================================================================== */

:root {
    --matrix-discord: #5865F2;
    --matrix-discord-glow: rgba(88, 101, 242, 0.5);
}

/* Başlık ve Neon Kenarlık Ayarı */
.panel-title-blue { 
    background: linear-gradient(90deg, transparent, var(--matrix-discord), transparent); 
    color: #fff; 
    font-family: 'Orbitron', sans-serif;
    padding: 15px;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.1em;
    letter-spacing: 1.5px;
}
.neon-border-blue { border-top: 3px solid var(--matrix-discord); }

/* İçerik Alanı Düzeni */
.discord-wrapper { padding: 25px 15px; text-align: center; }

/* Parıldayan Büyük Discord Logosu */
.discord-icon-glow {
    font-size: 40px;
    margin-bottom: 15px;
    color: var(--matrix-discord);
    filter: drop-shadow(0 0 10px var(--matrix-discord-glow));
}

.discord-text { font-size: 13px; color: #ddd; margin-bottom: 20px; font-style: italic; line-height: 1.5; }

/* Matrix Temalı Buton */
.discord-matrix-btn {
    display: block;
    background: linear-gradient(45deg, #5865F2, #404eed);
    color: #fff !important;
    padding: 12px;
    border-radius: 30px;
    text-decoration: none;
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(88, 101, 242, 0.3);
    transition: 0.3s all;
}

.discord-matrix-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px var(--matrix-discord-glow);
    filter: brightness(1.2);
    letter-spacing: 1px;
}

/* 8. MOBÄ°L UYUMLULUK */
@media (max-width: 1200px) {
    .matrix-main { flex-direction: column; align-items: center; padding-top: 110px; }
    .left-panel, .right-panel, .center-panel { width: 100%; max-width: 600px; }
}