/* GENEL AYARLAR */
/* GENEL AYARLAR (Derin Atmosfer Arkaplanı) */
html,body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #e0e0e0;
    margin: 0;
    padding: 0;
    
    /* Zemin Rengi (Yüklenmezse görünecek renk) */
    background-color: #050505; 
    
    /* Gradyan: Üst ortadan (hafif kan kırmızısı/kahve) başlar, aşağıya doğru siyaha döner */
    background-image: radial-gradient(circle at 50% 0%, #1f0a0a 0%, #050505 60%, #000000 100%);
    
    /* Arkaplanı sabitle (Scroll yapınca kaymasın, derinlik katar) */
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: url('../img/cursor/kirmizi_bos.cur'), auto !important;
    /* Uzun sayfalarda tekrar etmemesi için yükseklik ayarı */
    min-height: 100vh;
	
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; padding: 0; margin: 0; }
a, 
button, 
select, 
input, 
label, 
.user-btn, 
.burger-btn, 
.has-dropdown, 
.dropdown li a, 
#mobileNavContent li a {
    /* Bir şeye tıklanabilir olduğunda görünecek olan imleç */
    cursor: url('../img/cursor/kirmizi_tik.cur'), pointer !important;
}

/* 3. Özel Durumlar: Menü ve Kaydırma Alanları */
/* Sticky menü ve sağdan açılan mobil panelde imlecin kaybolmaması için */
.top-menu, 
#mobileNavContent, 
.nav-brand img {
    cursor: url('../img/cursor/kirmizi_bos.cur'), auto !important;
}

/* Menü içindeki tıklanabilir her link için kirmizi_tik devreye girsin */
.top-menu a, 
.top-menu .has-dropdown, 
#mobileNavContent a {
    cursor: url('../img/cursor/kirmizi_tik.cur'), pointer !important;
}
/* CONTAINER (Merkezleme) */
.container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 10px;
}

/* --- TOP MENU (BLOOD & GOLD KONSEPT) --- */

/* 1. Ana Menü Çubuğu */
.top-menu {
    /* Metalik Siyah Zemin */
    background: linear-gradient(to bottom, #1a1a1a, #050505);
    
    /* Altına kalın, koyu bir kan kırmızısı çizgi */
    border-bottom: 3px solid #8a1c1c; 
    
    /* Hafif bir gölge */
    box-shadow: 0 5px 15px rgba(0,0,0,0.8);
    position: relative;
    z-index: 1000;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Linklerin Dizilimi */
.top-menu ul {
    display: flex;
    justify-content: center; /* Ortala */
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 2. Menü Linkleri (Normal Hali) */
.top-menu li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 10px;
    
    color: #b0bec5; /* Gümüş Gri Yazı */
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.5px;
    
    /* Sağ tarafa ince ayırıcı çizgiler */
    border-right: 1px solid rgba(255,255,255,0.03);
    border-left: 1px solid rgba(0,0,0,0.3);
    
    transition: all 0.3s ease;
    position: relative;
}

.top-menu li a i {
    color: #666; /* İkonlar pasifken sönük olsun */
    font-size: 14px;
    transition: 0.3s;
}

/* 3. Hover Efekti (Üzerine Gelince) */
.top-menu li a:hover {
    color: #fff; /* Yazı Beyazlaşsın */
    
    /* Arkaplan Kan Kırmızısına dönsün */
    background: linear-gradient(to bottom, #8a1c1c 0%, #4a0505 100%);
    
    /* Hafif kırmızı parlama */
    text-shadow: 0 0 10px rgba(255, 50, 50, 0.5);
    box-shadow: inset 0 0 15px rgba(0,0,0,0.6);
}

.top-menu li a:hover i {
    color: #f1c40f; /* İkonlar ALTIN rengi olsun */
    filter: drop-shadow(0 0 3px rgba(241, 196, 15, 0.5));
}

/* 4. Dropdown (Açılır Menü) Tasarımı */
.has-dropdown { position: relative; }

.top-menu ul .dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    
    background-color: #0e0e0e; /* Zifiri karanlık zemin */
    border: 1px solid #333;
    border-top: 2px solid #cba163; /* Üst çizgi ALTIN rengi */
    
    box-shadow: 0 10px 20px rgba(0,0,0,0.9);
    z-index: 1000;
    padding: 0;
    flex-direction: column;
}

.dropdown li { width: 100%; }

.dropdown li a {
    border: none;
    border-bottom: 1px solid #1a1a1a;
    padding: 12px 20px;
    font-size: 12px;
    color: #999;
    background: transparent;
}

.dropdown li a:hover {
    background-color: #1a1a1a;
    color: #cba163; /* Hoverda Altın rengi */
    padding-left: 28px; /* Sağa kayma efekti */
    border-left: 3px solid #cba163; /* Solda altın şerit çıkar */
}

/* Dropdown Açılma Animasyonu */
.has-dropdown:hover .dropdown {
    display: flex;
    animation: menuSlide 0.2s ease-out;
}

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

/* 5. Özel Buton: Power Up Store (PUS) */
/* Bu buton her zaman biraz daha parlak dursun */
.menu-pus a {
    color: #cba163 !important; /* Altın Rengi */
}
.menu-pus a i {
    color: #cba163 !important;
}

.menu-pus a:hover {
    background: linear-gradient(to bottom, #cba163 0%, #8a6e3e 100%) !important; /* Altın Kaplama */
    color: #111 !important; /* Yazı siyah olsun okunsun */
    text-shadow: none !important;
}
.menu-pus a:hover i {
    color: #000 !important;
}
/* --- GİRİŞ YAPILMIŞ MENÜ STİLİ --- */

/* Giriş yapmış kullanıcı butonu (Altın rengi yazı, transparan arka plan) */
.user-btn.logged-in {
    background: rgba(0,0,0,0.3);
    border: 1px solid #333;
    color: #cba163; /* Altın Rengi İsim */
    min-width: 140px;
    justify-content: center;
}

.user-btn.logged-in:hover {
    background: #111;
    color: #fff;
    border-color: #cba163;
}

/* Dropdown (Açılır Menü) Konumu */
.menu-user .has-dropdown {
    position: relative;
}

.menu-user .dropdown {
    display: none; /* Normalde gizli */
    position: absolute;
    top: 100%;
    right: 0; /* Sağ tarafa yasla */
    background: #0f0f0f;
    border: 1px solid #333;
    border-top: 3px solid #cba163; /* Üstte altın çizgi */
    list-style: none;
    padding: 10px 0;
    min-width: 200px;
    z-index: 1000;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    border-radius: 0 0 4px 4px;
}

/* Hover olunca göster */
.menu-user .has-dropdown:hover .dropdown {
    display: block;
    animation: fadeIn 0.3s;
}

.menu-user .dropdown li a {
    display: block;
    padding: 10px 20px;
    color: #aaa;
    text-decoration: none;
    font-size: 13px;
    transition: 0.2s;
    border-bottom: 1px solid #1a1a1a;
}

.menu-user .dropdown li:last-child a {
    border-bottom: none;
}

.menu-user .dropdown li a:hover {
    background: #1a1a1a;
    color: #fff;
    padding-left: 25px; /* Sağa kayma efekti */
}

/* Animasyon */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* ANA DÜZEN (3 SÜTUN) */
.main-content {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    align-items: flex-start;
}

/* SOL VE SAĞ SIDEBARLAR */
.sidebar {
    max-width: 330px;
	min-width: 200px
    flex-shrink: 0;
}

/* ORTA ALAN */
.center-area {
    flex-grow: 1; /* Kalan boşluğu doldur */
    min-width: 0; /* İçerik taşmasını engelle */
}

/* --- ALTERNATİF: RESİMSİZ KRALİYET ÇERÇEVESİ --- */
.widget {
    position: relative;
    background: #0f0f0f;
    margin-bottom: 25px;
    border: 1px solid #333; /* Ana sınır */
    box-shadow: 0 5px 15px rgba(0,0,0,0.8);
}

/* Altın Köşeleri CSS ile Çiziyoruz (Daha kalın ve detaylı) */
.widget::after {
    content: "";
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    z-index: 10;
    pointer-events: none;
    
    /* Köşe Çizimi */
    background: 
        linear-gradient(to right, #cba163 2px, transparent 2px) 0 0,
        linear-gradient(to bottom, #cba163 2px, transparent 2px) 0 0,
        linear-gradient(to left, #cba163 2px, transparent 2px) 100% 0,
        linear-gradient(to bottom, #cba163 2px, transparent 2px) 100% 0,
        linear-gradient(to right, #cba163 2px, transparent 2px) 0 100%,
        linear-gradient(to top, #cba163 2px, transparent 2px) 0 100%,
        linear-gradient(to left, #cba163 2px, transparent 2px) 100% 100%,
        linear-gradient(to top, #cba163 2px, transparent 2px) 100% 100%;

    background-repeat: no-repeat;
    background-size: 20px 20px; /* Köşe uzunluğu */
    
    /* Parlama Efekti */
    box-shadow: 
        inset 0 0 20px rgba(0,0,0,0.8), /* İç gölge */
        0 0 5px rgba(203, 161, 99, 0.2); /* Dış parlama */
}

	/* Başlık */
	.widget-title {
		position: relative;
		background: #111; /* Zemin rengi */
		padding: 12px 15px;
		font-weight: bold;
		color: #cba163; /* Başlık Rengi: ALTIN */
		text-transform: uppercase;
		letter-spacing: 1px;
		
		/* ESKİ KIRMIZI ÇİZGİYİ KAPATIYORUZ */
		border-bottom: none !important; 
	}
	.widget-title::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1px; /* Çok ince zarif bir çizgi */
		
		/* Solda Koyu Kırmızıdan başla, sağda şeffaf ol */
		background: linear-gradient(to right, #8a1c1c 0%, #8a1c1c 30%, transparent 100%);
		
		/* VEYA: Eğer Altın istersen üstteki satırı silip bunu kullan: */
		/* background: linear-gradient(to right, #cba163 0%, transparent 100%); */
	}
	.widget-title i {
		color: #8a1c1c; /* İkon rengi koyu kan kırmızısı */
		margin-right: 8px;
		text-shadow: 0 0 5px rgba(138, 28, 28, 0.5);
	}

	.widget-body {
		padding: 10px;
		max-width : 100%;
		min-width : 300px;
	}
	/* --- SOSYAL MEDYA BUTONLARI (DARK & METALİK) --- */

	.social-btn {
		display: flex;
		align-items: center;
		justify-content: flex-start; /* Ortalamak yerine sola yaslayalım, daha düzenli durur */
		padding: 12px 15px;
		margin-bottom: 8px;
		border-radius: 4px;
		
		/* Varsayılan: Koyu Metalik Zemin */
		background: linear-gradient(to bottom, #222, #151515);
		border: 1px solid #333; /* İnce gri çerçeve */
		
		font-weight: bold;
		color: #aaa; /* Yazı rengi soluk gri */
		font-size: 13px;
		
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
	}

	/* İkon Ayarı */
	.social-btn i { 
		margin-right: 15px; 
		font-size: 18px; 
		width: 20px; 
		text-align: center;
		transition: 0.3s;
	}

	/* Hover Genel Efekti */
	.social-btn:hover { 
		color: #fff; /* Yazı beyazlaşsın */
		padding-left: 20px; /* Sağa kayma efekti */
		border-color: rgba(255,255,255,0.2); /* Çerçeve hafif parlasın */
	}

	/* --- MARKALARA ÖZEL RENKLER (Sadece Kenar Çizgisi ve İkon) --- */

	/* 1. WhatsApp */
	.btn-whatsapp { border-left: 3px solid #25D366; } /* Sol çizgi */
	.btn-whatsapp i { color: #25D366; } /* İkon rengi */
	.btn-whatsapp:hover {
		/* Hoverda koyu yeşilden açık yeşile geçiş */
		background: linear-gradient(to right, #0e3d23, #25D366); 
		box-shadow: 0 0 15px rgba(37, 211, 102, 0.3); /* Yeşil Parlama */
	}
	.btn-whatsapp:hover i { color: #fff; }

	/* 2. Discord */
	.btn-discord { border-left: 3px solid #5865F2; }
	.btn-discord i { color: #5865F2; }
	.btn-discord:hover {
		background: linear-gradient(to right, #2c2f33, #5865F2);
		box-shadow: 0 0 15px rgba(88, 101, 242, 0.3);
	}
	.btn-discord:hover i { color: #fff; }

	/* 3. YouTube */
	.btn-youtube { border-left: 3px solid #FF0000; }
	.btn-youtube i { color: #FF0000; }
	.btn-youtube:hover {
		background: linear-gradient(to right, #550000, #FF0000);
		box-shadow: 0 0 15px rgba(255, 0, 0, 0.4);
	}
	.btn-youtube:hover i { color: #fff; }

	/* 4. Instagram */
	.btn-instagram { border-left: 3px solid #C13584; }
	.btn-instagram i { color: #C13584; }
	.btn-instagram:hover {
		background: linear-gradient(to right, #501e38, #C13584);
		box-shadow: 0 0 15px rgba(193, 53, 132, 0.3);
	}
	.btn-instagram:hover i { color: #fff; }

	/* 5. Facebook */
	.btn-facebook { border-left: 3px solid #1877F2; }
	.btn-facebook i { color: #1877F2; }
	.btn-facebook:hover {
		background: linear-gradient(to right, #0d3a78, #1877F2);
		box-shadow: 0 0 15px rgba(24, 119, 242, 0.3);
	}
	.btn-facebook:hover i { color: #fff; }

	/* 6. Kick */
	.btn-kick { border-left: 3px solid #53FC18; }
	.btn-kick i { color: #53FC18; }
	.btn-kick:hover {
		background: linear-gradient(to right, #1f5e0a, #53FC18);
		color: #000; /* Kick yeşili üstüne siyah yazı okunur */
		box-shadow: 0 0 15px rgba(83, 252, 24, 0.3);
	}
	.btn-kick:hover i { color: #000; }
/* EKSİK OLANLAR İÇİN STİL EKLEMESİ (Style.css'e eklenecek) */

/* 7. Telegram */
.btn-telegram { border-left: 3px solid #0088cc; }
.btn-telegram i { color: #0088cc; }
.btn-telegram:hover {
    background: linear-gradient(to right, #003d5c, #0088cc);
    box-shadow: 0 0 15px rgba(0, 136, 204, 0.3);
}
.btn-telegram:hover i { color: #fff; }

/* 8. TikTok */
.btn-tiktok { border-left: 3px solid #FE2C55; }
.btn-tiktok i { color: #FE2C55; }
.btn-tiktok:hover {
    background: linear-gradient(to right, #500e1b, #FE2C55);
    box-shadow: 0 0 15px rgba(254, 44, 85, 0.3);
}
.btn-tiktok:hover i { color: #fff; }

/* --- FOOTER TASARIMI (BLOOD & GOLD) --- */

.site-footer {
    background: #080808; /* Zifiri karanlık zemin */
    border-top: 3px solid #8a1c1c; /* Üstte Koyu Kan Kırmızısı Çizgi */
    padding: 40px 0 20px 0;
    margin-top: 50px;
    color: #888;
    font-size: 13px;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.8);
    position: relative;
    z-index: 10;
}

/* Footer İç Düzen */
.footer-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
}

.footer-col {
    flex: 1;
    min-width: 250px;
}

/* Footer Başlıkları */
.footer-title {
    color: #cba163; /* Altın Rengi Başlık */
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #333;
    letter-spacing: 1px;
}

.footer-title i {
    margin-right: 8px;
    color: #8a1c1c; /* İkon Kırmızı */
}

/* Footer Linkleri */
.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 8px;
}

.footer-links a {
    color: #aaa;
    text-decoration: none;
    transition: 0.2s;
    display: inline-block;
}

/* Link Hover */
.footer-links a:hover {
    color: #fff;
    transform: translateX(5px); /* Sağa kayma */
    text-shadow: 0 0 5px rgba(255,255,255,0.3);
}

/* Mobil Uyum */
@media (max-width: 768px) {
    .footer-row {
        flex-direction: column;
        text-align: center;
    }
    .footer-col {
        border-bottom: 1px solid #1a1a1a;
        padding-bottom: 20px;
    }
    .footer-col:last-child {
        border-bottom: none;
    }
    .footer-col[style="text-align: right;"] {
        text-align: center !important; /* Mobilde ortala */
    }
}

/* --- MENU SAĞ TARAFI (USER LOGIN/REGISTER) --- */

/* Menü Container'ını Esnek Yap (Sağa yaslamak için) */
.top-menu .container {
    display: flex;
    justify-content: space-between; /* Biri sola biri sağa */
    align-items: center;
}

/* Sol Menü Listesi (Mevcut Linkler) */
.menu-list {
    flex-grow: 1; /* Boşluğu doldursun */
}

/* Sağ Menü (User) */
.menu-user {
    display: flex;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Ortak Buton Stili */
.user-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 13px;
    text-decoration: none;
    transition: 0.3s;
    text-transform: uppercase;
    border: 1px solid transparent;
}

/* 1. GİRİŞ BUTONU (Metalik/Sade) */
.user-btn.login {
    background: rgba(255,255,255,0.05);
    border: 1px solid #444;
    color: #ccc;
}
.user-btn.login:hover {
    background: #222;
    border-color: #aaa;
    color: #fff;
}

/* 2. KAYIT BUTONU (Altın/Dikkat Çekici) */
.user-btn.register {
    background: linear-gradient(to bottom, #cba163, #a07e32); /* Altın */
    color: #000; /* Siyah Yazı */
    border: 1px solid #f1c40f;
    box-shadow: 0 0 10px rgba(203, 161, 99, 0.3);
}
.user-btn.register:hover {
    background: linear-gradient(to bottom, #f1c40f, #cba163);
    color: #000;
    box-shadow: 0 0 20px rgba(241, 196, 15, 0.6);
    transform: translateY(-2px);
}

/* 3. GİRİŞ YAPMIŞ KULLANICI */
.user-btn.logged-in {
    background: transparent;
    color: #cba163;
    border: 1px solid #333;
}
.user-btn.logged-in:hover {
    background: #111;
    color: #fff;
}

/* User Dropdown Ayarı (Sağa yaslı açılsın) */
.menu-user .dropdown {
    right: 0; /* Sağdan hizala */
    left: auto;
    min-width: 180px;
}

/* MOBİL UYUM */
@media (max-width: 992px) {
    .top-menu .container {
        flex-direction: column; /* Mobilde alt alta */
        gap: 10px;
    }
    .menu-user {
        width: 100%;
        justify-content: center;
        padding-bottom: 10px;
    }
    .user-btn { padding: 8px 15px; font-size: 11px; }
}
/* SIRALAMA TABLOSU */
/* --- SAVAŞÇI SIRALAMA TABLOSU (WIDGET İÇİ) --- */

.rank-table { 
    width: 100%; 
    border-collapse: collapse; 
    font-size: 13px; /* Sidebar için ideal boyut */
    color: #b0bec5; /* Gümüş/Gri yazı rengi (Okunabilirlik için) */
    font-family: 'Segoe UI', sans-serif;
}

/* Hücre Ayarları */
.rank-table td { 
    padding: 8px 5px; 
    border-bottom: 1px solid #252525; /* Çok silik koyu çizgi */
    vertical-align: middle; /* İkonlar ve yazılar ortalı olsun */
    transition: background 0.2s;
}

/* Son satırın çizgisini kaldır */
.rank-table tr:last-child td { 
    border-bottom: none; 
}

/* Hover Efekti: Satırın üstüne gelince hafif Kan Kırmızısı olsun */
.rank-table tr:hover td { 
    background: rgba(183, 28, 28, 0.1); /* %10 Görünürlükte kırmızı */
    color: #fff; /* Yazı parlasın */
}

/* Sıra Numarası Kutusu (Metal Plaka Görünümü) */
.rank-num { 
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background: #111; /* Koyu zemin */
    color: #777; /* Sönük yazı */
    border: 1px solid #333; /* Metalik çerçeve */
    border-radius: 3px; 
    font-size: 11px; 
    font-weight: bold;
    font-family: monospace; /* Sayılar düzgün dursun */
}

/* Tablo içindeki Linkler (Nickler ve Clanlar) */
.rank-table a {
    color: #e0e0e0; /* Açık gri */
    font-weight: 600;
    text-decoration: none;
    transition: 0.2s;
}

.rank-table a:hover {
    color: #ffa000; /* Hoverda Altın Sarısı */
    text-shadow: 0 0 5px rgba(255, 160, 0, 0.4);
}

/* Tablo içindeki Resimler (Irk ve Job ikonları) */
.rank-table img {
    vertical-align: middle;
    margin-right: 3px;
    opacity: 0.8; /* Hafif soluk dursun */
    transition: 0.2s;
}

/* Satıra gelince resimler parlasın */
.rank-table tr:hover img {
    opacity: 1;
}

/* Sağdaki NP/Puan Değeri (Genelde son sütun olur) */
.rank-table td:last-child {
    color: #cba163; /* Eskitilmiş Altın rengi */
    font-weight: bold;
    font-family: 'Consolas', monospace; /* Rakamlar hizalı olsun */
    letter-spacing: 0.5px;
}

/* --- HERO SLIDER (DEVASA) --- */

.hero-slider {
    position: relative;
    width: 100%;
    height: 450px; /* Slider Yüksekliği (İsteğe göre 500-600px yapabilirsin) */
    overflow: hidden;
    background: #000;
    border-bottom: 4px solid #8a1c1c; /* Altta kalın Kan Kırmızısı çizgi */
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    margin-bottom: 30px; /* İçerikle arayı aç */
}

/* Resim Alanı */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out; /* Yumuşak geçiş */
    z-index: 1;
}

.slide.active {
    opacity: 1;
    z-index: 2;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Resmi sündürmeden doldur */
    object-position: center top; /* Resmin üst kısmına odaklan */
}

/* Karanlık Katman (Vignette Effect) */
.slide-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Soldan sağa hafif, alttan yukarı koyu siyah geçiş */
    background: radial-gradient(circle, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.8) 100%),
                linear-gradient(to top, #000 0%, transparent 60%);
    z-index: 2;
}

/* Yazı Alanı */
.slide-content {
    position: absolute;
    bottom: 60px; /* Aşağıdan ne kadar yukarıda olsun */
    left: 10%; /* Soldan boşluk */
    z-index: 3;
    max-width: 600px;
    text-shadow: 0 2px 10px rgba(0,0,0,1);
}

.slide-title {
    font-size: 36px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-family: 'Trajan Pro', 'Segoe UI', serif;
    letter-spacing: 2px;
}

.slide-desc {
    font-size: 16px;
    color: #ddd;
    margin-bottom: 25px;
    line-height: 1.5;
}

/* Buton (Call to Action) */
.slide-btn {
    display: inline-block;
    padding: 12px 30px;
    background: linear-gradient(to bottom, #b71c1c, #8a1c1c); /* Kırmızı Buton */
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    border-radius: 4px;
    border: 1px solid #d32f2f;
    box-shadow: 0 0 15px rgba(183, 28, 28, 0.5);
    transition: 0.3s;
}

.slide-btn:hover {
    background: linear-gradient(to bottom, #cba163, #b68d4c); /* Hoverda ALTIN olsun */
    color: #000;
    border-color: #f1c40f;
    box-shadow: 0 0 20px rgba(241, 196, 15, 0.6);
}

/* Ok İşaretleri */
.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.2);
    width: 40px;
    height: 60px;
    cursor: pointer;
    z-index: 10;
    font-size: 20px;
    transition: 0.2s;
}

.slider-nav:hover { background: #b71c1c; border-color: #b71c1c; }
.prev-btn { left: 20px; }
.next-btn { right: 20px; }

/* Noktalar */
.slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.dot {
    width: 12px;
    height: 12px;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
    border: 1px solid #000;
}

.dot.active {
    background: #cba163; /* Aktif nokta ALTIN rengi */
    box-shadow: 0 0 5px #cba163;
}

/* MOBİL UYUM */
@media (max-width: 768px) {
    .hero-slider { height: 300px; } /* Mobilde boyunu kısalt */
    .slide-content { left: 5%; bottom: 40px; text-align: center; width: 90%; }
    .slide-title { font-size: 24px; }
    .slide-desc { font-size: 13px; display: none; /* Mobilde yazıyı gizle, sadece başlık kalsın */ }
    .slide-btn { padding: 8px 20px; font-size: 12px; }
    .slider-nav { display: none; /* Mobilde okları gizle, sadece kaydır */ }
}

/* HABERLER */
.news-item {
    display: flex;
    gap: 15px;
    border-bottom: 1px solid #333;
    padding-bottom: 15px;
    margin-bottom: 15px;
}
.news-date {
    background: #333;
    padding: 5px 10px;
    text-align: center;
    border-radius: 4px;
    height: fit-content;
}
.news-date span { display: block; font-weight: bold; font-size: 18px; color: #ffa000; }
.news-content h3 { margin: 0 0 5px 0; font-size: 16px; color: #fff; }
.news-content p { margin: 0; font-size: 13px; color: #aaa; }


/* --- DOWNLOAD SAYFASI STİLLERİ --- */

.download-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
	
}

.download-card {
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 20px;
    display: flex;
    justify-content: space-between; /* Yazı solda, buton sağda */
    align-items: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s;
}

.download-card:hover {
    transform: translateX(5px); /* Üzerine gelince hafif sağa kaysın */
    background: #252525;
}

/* Sol taraftaki renkli çizgi (Genişliği JS/PHP ile border-left olarak vereceğiz ama bu da yedeği) */
.download-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    /* Rengi PHP'den dinamik vereceğiz */
}

.dl-info h3 {
    margin: 0 0 5px 0;
    font-size: 18px;
    color: #fff;
}

.dl-info p {
    margin: 0;
    font-size: 13px;
    color: #aaa;
}

.dl-btn {
    padding: 10px 25px;
    color: #fff;
    font-weight: bold;
    border-radius: 4px;
    text-transform: uppercase;
    font-size: 13px;
    white-space: nowrap; /* Buton yazısı alt satıra kaymasın */
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

.dl-btn:hover {
    filter: brightness(1.2); /* Üzerine gelince parlasın */
}

.dl-date {
    font-size: 11px;
    color: #666;
    margin-top: 5px;
    display: block;
}

/* Mobilde buton aşağıya insin */
@media (max-width: 600px) {
    .download-card {
        flex-direction: column;
        text-align: center;
    }
    .dl-btn {
        margin-top: 15px;
        width: 100%; /* Tam genişlik */
    }
}
/* --- HABER & DUYURU LİSTESİ --- */
.news-list-item {
    border-bottom: 1px dashed #333;
    padding: 10px 0;
    display: flex;
    align-items: center;
    transition: 0.2s;
	
}
.news-list-item:last-child { border-bottom: none; }
.news-list-item:hover { background: #252525; padding-left: 10px; }

.news-icon {
    width: 30px;
    height: 30px;
    background: #1a1a1a;
    color: #ffa000;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    margin-right: 15px;
    font-size: 14px;
    border: 1px solid #333;
}

.news-info h4 { margin: 0; font-size: 14px; color: #e0e0e0; }
.news-info span { font-size: 11px; color: #777; }

/* Tümü Linki */
.view-all-link {
    display: block;
    text-align: right;
    margin-top: 10px;
    font-size: 12px;
    color: #ffa000;
    font-weight: bold;
    text-decoration: underline;
}
.view-all-link:hover { color: #fff; }

/* --- CLAN SIRALAMASI ÖZEL EFEKTLER --- */

/* 1. Sıradaki Alev İkonu */
.king-clan-icon {
    font-size: 16px;
    color: #e74c3c; /* Kırmızı */
    filter: drop-shadow(0 0 5px #e74c3c); /* Parlama efekti */
    animation: fire-flicker 1.5s infinite alternate; /* Animasyon */
}

/* Alevin yanıp sönme animasyonu */
@keyframes fire-flicker {
    0% {
        color: #e74c3c; /* Kırmızı */
        transform: scale(1);
        filter: drop-shadow(0 0 2px #e74c3c);
    }
    100% {
        color: #f1c40f; /* Sarıya dönsün */
        transform: scale(1.2); /* Biraz büyüsün */
        filter: drop-shadow(0 0 8px #f1c40f);
    }
}
/* --- POWER UP STORE (PUS) STİLLERİ --- */

/* Kategori Menüsü */
.pus-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid #333;
    padding-bottom: 15px;
}

.pus-tab-link {
    background: #1e1e1e;
    color: #aaa;
    padding: 10px 20px;
    border-radius: 4px;
    border: 1px solid #333;
    font-weight: bold;
    font-size: 13px;
    transition: 0.2s;
}

.pus-tab-link:hover, .pus-tab-link.active {
    background: #ffa000;
    color: #000;
    border-color: #ffa000;
    box-shadow: 0 0 10px rgba(255, 160, 0, 0.3);
}

/* Item Izgarası */
.pus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); /* Genişlik ayarı */
    gap: 15px;
}

.pus-item-card {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 15px;
    text-align: center;
    position: relative;
    transition: transform 0.2s;
}

.pus-item-card:hover {
    transform: translateY(-5px);
    border-color: #777;
    background: #222;
}

.pus-img-box {
    width: 64px;
    height: 64px;
    background: #000;
    margin: 0 auto 10px auto;
    border: 1px solid #444;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pus-img-box img { max-width: 100%; border-radius: 4px; }

.pus-item-name {
    font-size: 14px;
    font-weight: bold;
    color: #e0e0e0;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pus-item-title {
    font-size: 11px;
    color: #888;
    margin-bottom: 8px;
    height: 15px; /* Yükseklik sabitleme */
    overflow: hidden;
}

.pus-price {
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 10px;
    display: inline-block;
    padding: 3px 8px;
    border-radius: 3px;
}

.price-kc { color: #ffa000; border: 1px solid #ffa000; } /* KC Rengi */
.price-kb { color: #2980b9; border: 1px solid #2980b9; } /* KB Rengi */

.pus-buy-btn {
    display: block;
    width: 100%;
    padding: 8px 0;
    background: #27ae60;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 12px;
}

.pus-buy-btn:hover { background: #2ecc71; 
}
/* --- OYUNCU PROFİLİ & INVENTORY --- */

.profile-header {
    background: #1a1a1a;
    border: 1px solid #333;
    padding: 20px;
    border-radius: 8px;
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

/* Arkaplana silik job resmi */
.profile-bg-icon {
    position: absolute;
    right: -20px;
    bottom: -20px;
    font-size: 150px;
    opacity: 0.05;
    color: #fff;
    pointer-events: none;
}

.char-info h1 { margin: 0 0 5px 0; font-size: 24px; color: #ffa000; text-shadow: 0 0 10px rgba(255,160,0,0.3); }
.char-info p { margin: 5px 0; color: #aaa; font-size: 14px; }
.char-stat { background: #333; padding: 2px 8px; border-radius: 4px; color: #fff; font-size: 12px; margin-right: 5px; }

/* --- FULL INVENTORY TASARIMI (Cospre + Equip + Bag) --- */

.inventory-container {
    /* Genişliği artırdık çünkü sola Cospre, alta çanta geldi */
    max-width: 360px; 
    height: 600px; 
    /* Arkaplan resmi yoksa koyu gri olsun */
    background-color: #151515; 
    /* Eğer elinde tam ekran inventory resmi varsa buraya koy: */
    /* background: url('../img/full_inventory_bg.png') no-repeat; */
    
    margin: 0 auto;
    position: relative;
    border: 3px solid #444;
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(0,0,0,0.9);
}

/* Slotların Genel Stili */
.inv-slot {
    width: 48px;
    height: 48px;
    position: absolute;
    background: rgba(0,0,0,0.5);
    border: 1px solid #555;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}
.inv-slot img { max-width: 100%; max-height: 100%; }
.inv-slot:hover { border-color: #ffa000; box-shadow: 0 0 10px #ffa000; cursor: pointer; z-index: 10; }

/* --- 1. SOL PANEL (COSPRE / PERİ / KANAT) --- */
/* Resimdeki sol dikey menü */
.slot-cos-1 { top: 75px; left: 65px; } /* Cospre Kafa */
.slot-cos-2 { top: 30px; left: 65px; } /* Cospre Göğüs */
.slot-cos-3 { top: 75px; left: 10px; } /* Kanat/Wing */
.slot-cos-4 { top: 75px; left: 115px; } /* Pathos Glove L */
.slot-cos-5 { top: 130px; left: 65px; } /* Pathos Glove R */
.slot-magic-1   { top: 30px; left: 10px; }
.slot-peri  { top: 30px; left: 115px; } /* Peri/Oreads */

/* --- 2. ORTA PANEL (DÜZELTİLMİŞ - CLASS İSİMLERİ EŞLEŞTİRİLDİ) --- */
/* Sütunlar: Sol(220px) | Orta(275px) | Sağ(330px) */

/* 1. SATIR (Kafa ve Küpeler) */
.slot-earring-r { top: 30px; left: 185px; }
.slot-head      { top: 30px; left: 240px; }
.slot-earring-l { top: 30px; left: 295px; }

/* 2. SATIR (Kolye, Göğüslük, Omuzluk) */
.slot-neck      { top: 85px; left: 185px; }
.slot-chest     { top: 85px; left: 240px; }  /* Göğüslük 2. satırda */
.slot-shoulder  { top: 85px; left: 295px; }

/* 3. SATIR (SİLAHLAR VE KEMER) - Class isimlerini düzelttik! */
.slot-wep-r     { top: 140px; left: 185px; } /* Sağ El (PHP'de wep-r yazıyor) */
.slot-belt      { top: 140px; left: 240px; } /* Kemer tam ortada */
.slot-wep-l     { top: 140px; left: 295px; } /* Sol El (PHP'de wep-l yazıyor) */

/* 4. SATIR (Yüzükler ve Donluk) */
.slot-ring-r    { top: 195px; left: 185px; }
.slot-legs      { top: 195px; left: 240px; } /* Donluk 4. satırda */
.slot-ring-l    { top: 195px; left: 295px; }

/* 5. SATIR (Eldiven ve Ayaklık) */
.slot-gloves    { top: 250px; left: 185px; }
.slot-boots     { top: 250px; left: 240px; } /* Ayaklık */

/* --- 3. MAGIC BAG (Çantanın Üstündeki Küçükler) --- */

.slot-magic-2{ top: 310px; left: 200px; }

/* --- 4. ALT PANEL (INVENTORY - ÇANTA 7x4 Grid) --- */
/* Bunları PHP ile döngüye sokup stil vereceğiz ama genel kapsayıcı ayarı */
.bag-grid-start { top: 370px; left: 15px; } /* Çantanın başladığı yer */

/* --- ITEM TOOLTIP TASARIMI --- */

/* --- ITEM TOOLTIP TASARIMI --- */

#item-tooltip-box {
    position: absolute;
    display: none;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.95);
    border: 1px solid #777;
    border-radius: 4px;
    padding: 10px;
    min-width: 200px;
    max-width: 300px;
    box-shadow: 0 0 15px #000;
    pointer-events: none;
    text-align: center;
    font-family: 'Segoe UI', sans-serif;
    font-size: 12px;
    line-height: 1.4;
    color: #e0e0e0;
}

.tooltip-content { text-align: left; } /* İçerik sola yaslı olsun */

/* Renk Sınıfları */
.item_title { font-weight: bold; font-size: 14px; margin-bottom: 5px; text-align: center; display: block; }
.item_type { font-size: 11px; margin-bottom: 5px; font-style: italic; text-align: center; display: block; }
.item_kind { color: #aaa; margin-bottom: 10px; text-decoration: underline; text-align: center; display: block; }
.item_property { margin-top: 2px; }

/* Yazı Renkleri */
.white { color: #fff; }
.blue { color: #3498db; }
.yellow { color: #f1c40f; }
.lime { color: #2ecc71; }
.gold { color: #d4ac0d; }
.purple { color: #9b59b6; }
.red { color: #e74c3c; }
.reverse { color: #e91e63; }
.blue-prop { color: #6dd5fa; }
/* --- EKSİK OLAN REVERSE UNIQUE RENKLERİ --- */

/* 1. Başlık ve İsim Rengi (Alev/Turuncu) */
.revuniq { 
    color: #ff5e00 !important; 
    text-shadow: 0 0 5px rgba(255, 94, 0, 0.4); 
}

/* 2. Listelerdeki Etiket (Badge) Rengi (Eğer listede kullanıyorsan) */
.badge-revuniq { 
    color: #ff5e00; 
    border-color: rgba(255, 94, 0, 0.4); 
    background: rgba(255, 94, 0, 0.15); 
}

/* 3. Reverse Item (Şeker Pembesi) - Kontrol et, bu da yoksa ekle */
.reverse { 
    color: #ff9ff3 !important; 
    text-shadow: 0 0 5px rgba(255, 159, 243, 0.3); 
}
/* --- DİNAMİK UPGRADE SAYFASI --- */

/* 1. Scroll Seçim Alanı (KÜÇÜLTÜLMÜŞ VERSİYON) */
.scroll-selector {
    display: grid; /* Izgara sistemi */
    grid-template-columns: repeat(9, 1fr); /* Yan yana tam 6 EŞİT parça */
    gap: 5px; /* Kutular arası boşluk */
    padding: 6px;
    background: #151515;
    border-bottom: 2px solid #b71c1c;
    border-radius: 8px 8px 0 0;
    
    /* Liste çok uzun olursa sayfa sonsuza gitmesin, 
       kendi içinde scroll olsun istersen bu iki satırı açabilirsin: */
    max-height: 1500px; 
    overflow-y: auto;
}

.scroll-item {
    /* Genişlik ayarına gerek yok, Grid otomatik yayacak */
    height: 55px; /* Kutu yüksekliği (Büyüttük) */
	width: 55px; /* Resim boyutu (Büyüttük) */
    border: 1px solid #333;
    background: #222;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column; /* İçerik alt alta olsun */
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
}

.scroll-item img {
    width: 45px; /* Resim boyutu (Büyüttük) */
    height: 45px;
    object-fit: contain;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.5)); /* Resme gölge ver */
    transition: 0.2s;
}

/* Hover Efekti */
.scroll-item:hover {
    border-color: #aaa;
    background: #2a2a2a;
    transform: translateY(-3px);
	z-index: 1000; /* Bu satır kutuyu diğerlerinin önüne geçirir */
}

.scroll-item:hover img {
    transform: scale(1.5); /* Üstüne gelince resim hafif büyüsün */
}

/* Aktif (Seçili) Kutu */
.scroll-item.active {
    border-color: #ffa000;
    background: #332200; /* Hafif sarımsı koyu zemin */
    box-shadow: 0 0 15px rgba(255, 160, 0, 0.2);
}

/* MOBİL UYUMLULUK */
/* Telefondan girenler 6 tane yan yana göremez, çok küçülür. 
   Telefonda yan yana 3 tane olsun diyoruz: */
@media (max-width: 768px) {
    .scroll-selector {
        grid-template-columns: repeat(3, 1fr); /* Mobilde 3'lü */
    }
}


/* 2. Upgrade Listesi Başlığı */
.upgrade-list-header {
    background: #1a1a1a;
    padding: 15px 20px;
    border-left: 5px solid #b71c1c; /* Sol tarafta kalın çizgi */
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between; /* İsim solda, açıklama sağda */
    border-top: 1px solid #333;
    border-right: 1px solid #333;
}

/* 3. Upgrade Satırları (Her bir seviye) */
.upgrade-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #111;
    padding: 12px 20px;
    border-bottom: 1px solid #222;
    border-right: 1px solid #333;
    border-left: 1px solid #333;
    font-size: 13px;
    color: #ccc;
    transition: 0.2s;
}

/* Satır üzerine gelince */
.upgrade-row:hover {
    background: #1e1e1e;
    padding-left: 25px; /* Hafif sağa kayma efekti */
}

/* Sütunlar */
.up-level { 
    color: #fff; 
    font-weight: bold; 
    width: 30%; 
    font-family: 'Consolas', monospace; /* Sayılar düzgün dursun */
}

.up-coins { 
    color: #f1c40f; 
    width: 30%; 
    text-align: right; 
}

.up-rate { 
    width: 30%; 
    text-align: right; 
    font-weight: bold; 
    font-size: 14px;
}

/* Ok işareti */
.fa-angle-right {
    color: #555;
    margin: 0 5px;
}

/* 4. Renk Kodları (Oranlara göre) */
.rate-100  { color: #2ecc71; text-shadow: 0 0 5px rgba(46, 204, 113, 0.3); } /* %100 Yeşil */
.rate-high { color: #3498db; } /* %70+ Mavi */
.rate-mid  { color: #f1c40f; } /* %40+ Sarı */
.rate-low  { color: #e74c3c; } /* Düşük Kırmızı */


/* --- PUS SAYFALAMA (PAGINATION) --- */
.pus-pagination {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #333;
}

.pus-page-btn {
    display: inline-block;
    padding: 8px 14px;
    background: #222;
    color: #aaa;
    border: 1px solid #444;
    border-radius: 4px;
    font-weight: bold;
    font-size: 13px;
    transition: 0.2s;
}

.pus-page-btn:hover {
    background: #333;
    color: #fff;
    border-color: #666;
}

.pus-page-btn.active {
    background: #ffa000;
    color: #000;
    border-color: #ffa000;
    box-shadow: 0 0 10px rgba(255, 160, 0, 0.4);
}

/* --- GELİŞMİŞ SIRALAMA SAYFASI --- */

/* Filtre Alanı */
.rank-filters {
    background: #151515;
    padding: 15px;
    border-bottom: 2px solid #333;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.filter-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Filtre Butonları */
.filter-btn {
    padding: 8px 16px;
    background: #222;
    border: 1px solid #444;
    color: #aaa;
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.filter-btn:hover { background: #333; color: #fff; }
.filter-btn.active { 
    background: #b71c1c; 
    border-color: #b71c1c; 
    color: #fff; 
    box-shadow: 0 0 10px rgba(183, 28, 28, 0.4);
}

/* Özel Renkler (Irklar) */
.btn-karus.active { background: #1976d2; border-color: #1976d2; box-shadow: 0 0 10px rgba(25, 118, 210, 0.4); }
.btn-human.active { background: #d32f2f; border-color: #d32f2f; box-shadow: 0 0 10px rgba(211, 47, 47, 0.4); }

/* Tablo Düzeni */
.full-rank-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.full-rank-table th {
    background: #1a1a1a;
    color: #ffa000;
    padding: 12px;
    border-bottom: 2px solid #333;
    text-align: left;
}
.full-rank-table td {
    padding: 12px;
    border-bottom: 1px solid #222;
    background: #111;
    color: #ccc;
    transition: 0.2s;
}
.full-rank-table tr:hover td { background: #1e1e1e; }

/* Tablo İçi Özelleştirmeler */
.rank-job-icon { width: 24px; height: 24px; vertical-align: middle; margin-right: 5px; }
.rank-nation-icon { width: 20px; vertical-align: middle; }
.rank-change-up { color: #2ecc71; font-size: 11px; margin-left: 5px; }
.rank-change-down { color: #e74c3c; font-size: 11px; margin-left: 5px; }

/* --- CLAN PROFILE STİLLERİ --- */

/* Üst Kart */
.clan-header-card {
    padding: 25px;
    background: #1a1a1a;
}

.clan-identity-area {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
    border-bottom: 1px solid #333;
    padding-bottom: 20px;
}

/* Pelerin Kutusu */
.clan-cape-box {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255,255,255,0.2);
    font-size: 24px;
    color: rgba(255,255,255,0.5);
}

.clan-names h1 {
    margin: 0;
    font-size: 28px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Irk Etiketleri */
.clan-nation-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    margin-top: 5px;
}
.nation-karus { color: #42a5f5; border: 1px solid #42a5f5; }
.nation-human { color: #ef5350; border: 1px solid #ef5350; }

/* İstatistik Kutuları */
.clan-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.c-stat-box {
    background: #111;
    border: 1px solid #333;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
}

.c-stat-box small {
    display: block;
    color: #777;
    font-size: 11px;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.c-stat-box strong {
    font-size: 15px;
    color: #eee;
    display: block;
}

.c-stat-box a { color: #fff; text-decoration: underline; }

/* Duyuru Kutusu */
.clan-notice-box {
    background: rgba(255, 160, 0, 0.1);
    border-left: 4px solid #ffa000;
    padding: 10px 15px;
    color: #ddd;
    font-size: 13px;
    font-style: italic;
    border-radius: 0 4px 4px 0;
}
.clan-notice-box i { color: #ffa000; margin-right: 8px; }

/* Lider Rozeti */
.role-badge {
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 3px;
    margin-left: 5px;
    vertical-align: middle;
}
.role-badge.leader { background: #d35400; color: #fff; }

/* Mobilde İstatistikleri Alt Alta Al */
@media (max-width: 600px) {
    .clan-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .clan-identity-area {
        flex-direction: column;
        text-align: center;
    }
}


/* Animasyon: Aşağıdan yukarı hafifçe gelir */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Ok işareti ayarı */
.fa-angle-down {
    margin-left: 5px;
    font-size: 11px;
    transition: 0.3s;
}

/* Menü açılınca ok dönsün */
.has-dropdown:hover .fa-angle-down {
    transform: rotate(180deg);
}
/* Sıralama Sayfası Clan Linki */
.rank-clan-link {
    color: #e0e0e0;
    font-weight: 600;
    transition: 0.2s;
    text-decoration: none;
}

.rank-clan-link:hover {
    color: #ffa000; /* Gold Rengi */
    text-decoration: underline;
}

/* Asistan Rozeti */
.role-badge.assist { 
    background: #2980b9; 
    color: #fff; 
}
/* --- DROP ARAMA SAYFASI --- */

/* Arama Formu */
.drop-search-form {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    padding: 15px;
    background: #151515;
    border-radius: 6px;
    border: 1px solid #333;
}

.drop-search-form input {
    flex: 1;
    padding: 12px;
    background: #222;
    border: 1px solid #444;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
}

.drop-search-form button {
    padding: 0 25px;
    background: #b71c1c;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}
.drop-search-form button:hover { background: #d32f2f; }

/* Mob Kartı */
.mob-card {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 6px;
    margin-bottom: 20px;
    overflow: hidden;
}

.mob-header {
    background: #252525;
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #333;
}

.mob-info h3 { margin: 0; font-size: 16px; color: #ffa000; }
.mob-lvl { font-size: 12px; color: #aaa; background: #333; padding: 2px 6px; border-radius: 3px; margin-left: 5px; }
.mob-loc { display: block; font-size: 12px; color: #777; margin-top: 3px; }
.mob-hp { font-weight: bold; color: #e74c3c; font-size: 13px; }

/* Drop Alanı */
.mob-drops-container {
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Tekil Drop Kutusu */
.drop-item-box {
    width: 50px;
    height: 50px;
    position: relative;
    border: 1px solid #444;
    background: #000;
    border-radius: 4px;
    cursor: pointer;
}

.drop-item-box img {
    width: 100%;
    height: 100%;
    border-radius: 3px;
}

.drop-rate {
    position: absolute;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,0.8);
    color: #00e676; /* Parlak yeşil */
    font-size: 10px;
    padding: 1px 3px;
    border-radius: 2px 0 2px 0;
}

/* Grup Drop Alanı */
.drop-group-box {
    border: 1px dashed #555;
    padding: 5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.02);
}

.group-rate {
    display: block;
    font-size: 11px;
    color: #f1c40f;
    margin-bottom: 5px;
    text-align: center;
}

.group-items-row {
    display: flex;
    gap: 5px;
}

/* Uyarı Kutuları */
.alert-box { padding: 15px; border-radius: 4px; text-align: center; font-size: 14px; }
.alert-box.warning { background: rgba(255, 160, 0, 0.1); color: #ffa000; border: 1px solid #ffa000; }
.alert-box.error { background: rgba(211, 47, 47, 0.1); color: #ef5350; border: 1px solid #ef5350; }
.no-drop { width: 100%; text-align: center; color: #666; font-style: italic; font-size: 13px; }
/* --- DROP SEKME TASARIMI --- */
.drop-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid #333;
    padding-bottom: 15px;
}

.drop-tab-btn {
    flex: 1; /* Eşit genişlik */
    text-align: center;
    padding: 15px;
    background: #1a1a1a;
    border: 1px solid #333;
    color: #aaa;
    font-weight: bold;
    border-radius: 6px;
    font-size: 15px;
    transition: 0.2s;
}

.drop-tab-btn i { margin-right: 8px; font-size: 18px; }

.drop-tab-btn:hover {
    background: #252525;
    color: #fff;
}

.drop-tab-btn.active {
    background: #b71c1c; /* Aktif sekme kırmızı */
    color: #fff;
    border-color: #b71c1c;
    box-shadow: 0 0 15px rgba(183, 28, 28, 0.4);
}

/* --- İTEM ARAMA SONUÇLARI --- */
.item-result-block {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 6px;
    margin-bottom: 20px;
    padding: 15px;
}

.item-search-header {
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px dashed #333;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.search-item-icon {
    width: 48px;
    height: 48px;
    border: 1px solid #555;
    border-radius: 4px;
}

.item-search-header h3 { margin: 0; color: #ffa000; font-size: 18px; }
.search-item-id { font-size: 12px; color: #555; margin-left: auto; }

.dropper-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.dropper-card {
    background: #111;
    border: 1px solid #222;
    padding: 10px;
    border-radius: 4px;
}

.d-mob-name { font-weight: bold; color: #ddd; font-size: 13px; margin-bottom: 3px; }
.d-mob-zone { font-size: 11px; color: #777; margin-bottom: 5px; }
.d-mob-rate { font-size: 12px; color: #aaa; border-top: 1px solid #222; padding-top: 3px; 
}
/* --- GENERATOR (KIRDIRMA) SAYFASI --- */

.generator-info {
    background: rgba(52, 152, 219, 0.1);
    color: #3498db;
    border: 1px solid #3498db;
    padding: 10px;
    border-radius: 4px;
    font-size: 13px;
    margin-bottom: 15px;
}

.gen-header {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #1a1a1a;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #333;
    margin-bottom: 20px;
    border-left: 5px solid #9b59b6; /* Mor çizgi */
}

.gen-header img {
    width: 48px;
    height: 48px;
    border: 1px solid #555;
    border-radius: 4px;
}

.gen-header h3 {
    margin: 0;
    color: #fff;
    font-size: 18px;
}
.gen-header small {
    display: block;
    color: #aaa;
    font-size: 12px;
    font-weight: normal;
    margin-top: 3px;
}

/* Grid Yapısı */
.gen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}

/* Drop Kartı */
.gen-card {
    background: #111;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 10px;
    text-align: center;
    transition: 0.2s;
    position: relative;
    overflow: hidden;
}

.gen-card:hover {
    background: #1e1e1e;
    transform: translateY(-3px);
}

.gen-icon {
    position: relative;
    width: 48px;
    height: 48px;
    margin: 0 auto 10px auto;
}

.gen-icon img {
    width: 100%;
    height: 100%;
    border: 1px solid #444;
    border-radius: 4px;
}

/* Oran Etiketi */
.gen-rate {
    position: absolute;
    bottom: -5px;
    right: -10px;
    background: #000;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 4px;
    border: 1px solid #555;
}

.gen-name {
    font-size: 12px;
    color: #ccc;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Nadirlik Renkleri (Border ve Oran Rengi) */
.rate-common .gen-rate { color: #ccc; border-color: #555; } /* Sıradan */
.rate-uncommon .gen-rate { color: #2ecc71; border-color: #2ecc71; } /* Yeşil */
.rate-rare .gen-rate { color: #f1c40f; border-color: #f1c40f; } /* Sarı */
.rate-legendary { border-color: #e74c3c; box-shadow: 0 0 10px rgba(231, 76, 60, 0.1); }
.rate-legendary .gen-rate { color: #e74c3c; border-color: #e74c3c; background: #2c0b0e; } /* Kırmızı */
/* --- SHOZIN CRAFT SAYFASI --- */

.craft-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.craft-card {
    background: #151515;
    border: 1px solid #333;
    border-radius: 6px;
    overflow: hidden;
}

.craft-header {
    background: #222;
    padding: 8px 15px;
    font-size: 13px;
    color: #aaa;
    border-bottom: 1px solid #333;
}

.craft-body {
    display: flex;
    align-items: center;
    padding: 15px;
    gap: 15px;
}

/* Malzemeler Alanı */
.craft-ingredients {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex: 1; /* Sol tarafı kapla */
    align-items: center;
}

.mat-item {
    position: relative;
    cursor: pointer;
}

/* Malzemeler arasına + işareti (Sonuncu hariç) */
.mat-item:not(:last-child)::after {
    content: "+";
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    color: #555;
    font-weight: bold;
    font-size: 14px;
}
/* + işareti için sağ boşluk açalım */
.mat-item:not(:last-child) {
    margin-right: 15px; 
}

.mat-img-box {
    width: 44px;
    height: 44px;
    border: 1px solid #444;
    border-radius: 4px;
    background: #000;
    position: relative;
}
.mat-img-box img { width: 100%; height: 100%; border-radius: 3px; }

.mat-count {
    position: absolute;
    bottom: 0; right: 0;
    background: rgba(0,0,0,0.8);
    color: #fff;
    font-size: 10px;
    padding: 1px 3px;
    border-radius: 2px 0 0 0;
}

/* İşlem Ok ve Oran */
.craft-process {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100px;
    text-align: center;
}

.craft-process i {
    font-size: 24px;
    color: #555;
    margin-bottom: 5px;
}

.base-rate {
    display: block;
    color: #f1c40f; /* Sarı oran */
    font-weight: bold;
    font-size: 14px;
}

/* Shadow Piece Rozeti */
.shadow-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2c3e50;
    border: 1px solid #3498db;
    border-radius: 4px;
    padding: 2px 5px;
    margin-top: 5px;
    font-size: 10px;
    color: #fff;
    gap: 3px;
    cursor: help;
}
.shadow-badge img { width: 16px; height: 16px; }

/* Sonuç Alanı */
.craft-result {
    width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-left: 15px;
    border-left: 2px solid #333;
    cursor: pointer;
}

.res-img-box {
    width: 56px; /* Sonuç itemi biraz büyük olsun */
    height: 56px;
    border: 1px solid #b71c1c; /* Kırmızı çerçeve */
    background: #000;
    position: relative;
    box-shadow: 0 0 10px rgba(183, 28, 28, 0.3);
}
.res-img-box img { width: 100%; height: 100%; }

.res-count {
    position: absolute;
    bottom: 0; right: 0;
    background: #b71c1c;
    color: #fff;
    font-size: 11px;
    padding: 1px 4px;
    font-weight: bold;
}

.res-name {
    margin-top: 5px;
    font-size: 12px;
    color: #ffa000;
    font-weight: bold;
}

/* MOBİL UYUM */
@media (max-width: 768px) {
    .craft-body {
        flex-direction: column;
        text-align: center;
    }
    .craft-ingredients {
        justify-content: center;
    }
    .craft-result {
        border-left: none;
        border-top: 2px solid #333;
        padding-top: 15px;
        padding-left: 0;
        width: 100%;
    }
    .craft-process {
        transform: rotate(90deg); /* Oku aşağı çevir */
        margin: 10px 0;
    }
    .craft-rate {
        transform: rotate(-90deg); /* Yazıyı düzelt */
    }
}
/* --- SAYFALAMA (PAGINATION) --- */
.pagination {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #333;
    flex-wrap: wrap;
}

.pagination a {
    display: inline-block;
    padding: 8px 14px;
    background: #1a1a1a;
    border: 1px solid #333;
    color: #ccc;
    text-decoration: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
    transition: 0.2s;
}

.pagination a:hover {
    background: #333;
    color: #fff;
    border-color: #555;
}

.pagination a.active {
    background: #b71c1c; /* KO Kırmızısı */
    color: #fff;
    border-color: #b71c1c;
    pointer-events: none; /* Tıklanmasın */
}

.pagination span {
    color: #555;
    padding: 8px;
}
/* --- DAILY QUESTS TASARIMI --- */

.quest-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.quest-card {
    background: #151515;
    border: 1px solid #333;
    border-radius: 6px;
    display: flex;
    /* Mobilde alt alta, masaüstünde yan yana */
    flex-wrap: wrap; 
    overflow: hidden;
}

/* --- SOL: BAŞLIK VE BİLGİ --- */
.quest-left {
    flex: 1 1 300px; /* Genişlik esnek */
    padding: 20px;
    border-right: 1px solid #222;
}

.q-header h3 {
    margin: 0 0 10px 0;
    color: #ffa000;
    font-size: 18px;
}

.q-badges {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.q-tag {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: bold;
    color: #fff;
}
.q-tag.green { background: #27ae60; }
.q-tag.blue { background: #2980b9; }
.q-tag.red { background: #c0392b; }
.q-tag.orange { background: #d35400; }
.q-tag.gray { background: #555; }

.q-zone {
    color: #888;
    font-size: 13px;
    margin-top: 10px;
}

/* --- ORTA: GEREKSİNİMLER --- */
.quest-mid {
    flex: 1 1 250px;
    padding: 20px;
    background: #111;
    border-right: 1px solid #222;
}

.q-section-title {
    font-size: 10px;
    color: #555;
    font-weight: bold;
    margin-bottom: 10px;
    letter-spacing: 1px;
}
.q-section-title.green { color: #2ecc71; }

.q-targets-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.q-target {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ccc;
}

.q-target i {
    width: 24px;
    height: 24px;
    background: #222;
    color: #e74c3c;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.q-target-info {
    display: flex;
    flex-direction: column;
}

.q-target-info strong { font-size: 13px; color: #ddd; }
.q-target-info small { font-size: 11px; color: #777; }

/* --- SAĞ: ÖDÜLLER --- */
.quest-right {
    flex: 0 0 150px; /* Sabit genişlik */
    padding: 20px;
    background: #0d0d0d;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.q-rewards-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.reward-box {
    width: 42px;
    height: 42px;
    border: 1px solid #27ae60;
    border-radius: 4px;
    cursor: pointer;
    background: #000;
    box-shadow: 0 0 5px rgba(39, 174, 96, 0.2);
}
.reward-box img { width: 100%; height: 100%; border-radius: 3px; }

/* Mobil Uyum */
@media (max-width: 900px) {
    .quest-left, .quest-mid, .quest-right {
        border-right: none;
        border-bottom: 1px solid #222;
        flex: 1 1 100%; /* Mobilde tam genişlik */
        padding: 15px;
    }
    .quest-right {
        flex-direction: row; /* Mobilde ödüller yan yana */
        justify-content: space-between;
        align-items: center;
    }
    .q-rewards-list { justify-content: flex-end; }
}
/* --- SIDEBAR EVENT WIDGET --- */
.event-box {
    display: flex;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid #222;
    position: relative;
    overflow: hidden;
}

/* Arka plan efektleri (İsteğe bağlı resim koyabilirsin) */
.csw-bg {
    background: linear-gradient(to right, rgba(0,0,0,0.9), rgba(50, 20, 20, 0.8));
    border-left: 4px solid #b71c1c; /* Kırmızı çizgi */
}

.lunar-bg {
    background: linear-gradient(to right, rgba(0,0,0,0.9), rgba(20, 30, 60, 0.8));
    border-left: 4px solid #3498db; /* Mavi çizgi */
}

.ev-icon {
    width: 40px;
    height: 40px;
    margin-right: 12px;
    flex-shrink: 0;
}
.ev-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ev-info {
    display: flex;
    flex-direction: column;
}

.ev-name {
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ev-date {
    font-size: 11px;
    color: #aaa;
    margin-bottom: 2px;
}

.ev-countdown {
    font-size: 12px;
    font-family: monospace; /* Sayılar sabit genişlikte olsun titremesin */
    color: #f1c40f; /* Sarı renk sayaç */
    font-weight: bold;
}
/* --- ETKİNLİK TAKVİMİ SAYFASI --- */

/* Genel Event Izgarası */
.event-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}

.ev-card-simple {
    background: #151515;
    border: 1px solid #333;
    border-radius: 6px;
    overflow: hidden;
}

.ev-card-header {
    background: #222;
    padding: 10px 15px;
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ev-card-header h3 { margin: 0; font-size: 14px; color: #ffa000; }
.ev-lvl-badge { font-size: 10px; background: #333; padding: 2px 5px; border-radius: 3px; color: #aaa; }

.ev-card-body { padding: 15px; }
.ev-row { font-size: 12px; color: #ccc; margin-bottom: 5px; }
.ev-row i { width: 20px; text-align: center; color: #777; }

.ev-times {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
}
.ev-times span {
    background: #000;
    border: 1px solid #444;
    color: #fff;
    font-size: 11px;
    padding: 3px 6px;
    border-radius: 3px;
    font-family: monospace;
}

/* --- COLLECTION RACE (CR) KARTLARI --- */
.cr-list { display: flex; flex-direction: column; gap: 20px; }

.cr-card {
    background: #111;
    border: 1px solid #333;
    border-radius: 6px;
    overflow: hidden;
}

.cr-header {
    background: linear-gradient(to right, #222, #151515);
    padding: 15px;
    border-bottom: 2px solid #b71c1c; /* CR Kırmızısı */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.cr-title h3 { margin: 0 0 5px 0; font-size: 16px; color: #fff; }
.cr-time { color: #f1c40f; font-size: 13px; font-weight: bold; }
.cr-zone { color: #aaa; font-size: 12px; text-align: right; }
.cr-duration { color: #777; font-size: 11px; }

.cr-body {
    display: flex;
    padding: 0;
}

.cr-section {
    flex: 1;
    padding: 15px;
    border-right: 1px solid #222;
}
.cr-section:last-child { border-right: none; background: #0e0e0e; }

.cr-sec-title {
    font-size: 10px;
    font-weight: bold;
    color: #555;
    margin-bottom: 10px;
    letter-spacing: 1px;
}
.cr-sec-title.text-green { color: #2ecc71; }

/* CR Görevler */
.cr-tasks-grid { display: flex; flex-direction: column; gap: 10px; }

.cr-task {
    background: #1a1a1a;
    border: 1px solid #333;
    padding: 8px;
    border-radius: 4px;
}

.cr-task-head {
    font-size: 13px;
    color: #ddd;
    font-weight: bold;
    margin-bottom: 5px;
}
.cr-task-head i { color: #e74c3c; margin-right: 5px; }

.unit-simple-count {
    display: block;
    font-size: 11px;
    color: #ccc;
    background: #333;
    padding: 2px 5px;
    border-radius: 3px;
    width: fit-content;
}

/* Joblara Özel Sayılar */
.job-counts {
    display: flex;
    gap: 8px;
    font-size: 11px;
    color: #aaa;
}
.job-counts span i { margin-right: 2px; color: #555; }

/* CR Ödüller */
.cr-rewards-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cr-reward-item {
    width: 48px;
    height: 48px;
    border: 1px solid #444;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    background: #000;
}
.cr-reward-item img { width: 100%; height: 100%; }

.cr-rw-rate {
    position: absolute;
    top: 0; right: 0;
    background: rgba(39, 174, 96, 0.9);
    color: #fff;
    font-size: 9px;
    padding: 1px 3px;
    border-radius: 0 2px 0 2px;
}

.cr-rw-count {
    position: absolute;
    bottom: 0; right: 0;
    background: rgba(0,0,0,0.8);
    color: #fff;
    font-size: 10px;
    padding: 1px 4px;
    border-radius: 2px 0 0 0;
}

/* Mobil */
@media (max-width: 768px) {
    .cr-body { flex-direction: column; }
    .cr-section { border-right: none; border-bottom: 1px solid #222; }
}
/* --- MADEN & BALIKÇILIK SAYFASI --- */

.mining-tools {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.tool-card {
    display: flex;
    align-items: center;
    background: #151515;
    border: 1px solid #333;
    padding: 10px;
    border-radius: 6px;
    text-decoration: none;
    color: #ccc;
    transition: 0.2s;
}

.tool-card img {
    width: 32px;
    height: 32px;
    border: 1px solid #444;
    border-radius: 4px;
    margin-right: 10px;
}

.tool-card span {
    font-size: 12px;
    font-weight: bold;
}

/* Hover ve Aktif Durum */
.tool-card:hover {
    background: #222;
    border-color: #555;
    transform: translateY(-2px);
    color: #fff;
}

.tool-card.active {
    background: #1e272e;
    border-color: #3498db;
    color: #3498db;
    box-shadow: 0 0 10px rgba(52, 152, 219, 0.1);
}

/* Drop listesindeki adet sayısı */
.gen-count {
    position: absolute;
    top: -5px;
    left: -5px;
    background: #000;
    color: #fff;
    font-size: 10px;
    padding: 1px 4px;
    border-radius: 3px;
    border: 1px solid #444;
    z-index: 2;
}
/* --- SAĞ SIDEBAR: KRALLAR VE CSW --- */

.kings-container {
    display: flex;
    border-bottom: 2px solid #000;
}

.king-card {
    flex: 1;
    text-align: center;
    padding: 15px 5px;
    position: relative;
    overflow: hidden;
    color: #fff;
}

/* Karus Teması */
.karus-bg {
    background: linear-gradient(135deg, #0b3d91 0%, #1e272e 100%);
    border-right: 1px solid #000;
}

/* Human Teması */
.human-bg {
    background: linear-gradient(135deg, #b71c1c 0%, #1e272e 100%);
}

.king-crown {
    font-size: 24px;
    color: #f1c40f; /* Altın Rengi */
    margin-bottom: 5px;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

.king-race {
    font-size: 10px;
    letter-spacing: 1px;
    opacity: 0.7;
    margin-bottom: 2px;
}

.king-name {
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 0 0 5px rgba(0,0,0,0.8);
    position: relative;
    z-index: 2;
}

.king-img {
    position: absolute;
    bottom: -10px;
    right: -10px;
    opacity: 0.3;
    z-index: 1;
}
.king-img img {
    width: 60px;
    height: auto;
}

/* --- CSW KUTUSU (YENİ İKONLU TASARIM) --- */
.csw-winner-box {
    background: linear-gradient(to right, #2c0b0e, #4b1d3f); /* Morumsu asil renk */
    padding: 15px;
    display: flex;
    align-items: center;
    position: relative;
    border-top: 1px solid #444;
    overflow: hidden;
}

/* Yuvarlak Kale İkonu Kutusu */
.csw-icon-circle {
    width: 46px;
    height: 46px;
    background: linear-gradient(135deg, #444, #111); /* Metalik koyu zemin */
    border: 2px solid #7f8c8d; /* Gümüş çerçeve */
    border-radius: 50%; /* Tam yuvarlak */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    z-index: 2;
}

.csw-icon-circle i {
    font-size: 22px;
    color: #bdc3c7; /* Gümüş rengi kale */
    text-shadow: 0 2px 2px rgba(0,0,0,0.8);
}

.csw-info {
    display: flex;
    flex-direction: column;
    z-index: 2;
}

.csw-label {
    font-size: 10px;
    color: #aaa;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.csw-clan {
    font-size: 16px;
    font-weight: bold;
    color: #f1c40f; /* Altın rengi yazı */
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(241, 196, 15, 0.3);
}

/* Sağdaki silik kalkan ikonu */
.csw-badge {
    position: absolute;
    right: -10px;
    bottom: -10px;
    font-size: 60px;
    color: rgba(255,255,255,0.05); /* Çok silik */
    transform: rotate(-15deg);
    z-index: 1;
}
/* --- FULL OYUNCU SIRALAMASI SAYFASI (ranking.php) --- */

.full-rank-table {
    width: 100%;
    border-collapse: collapse; /* Çizgileri birleştir */
    margin-top: 10px;
}

.full-rank-table thead th {
    background: #1a1a1a; /* Başlık koyu gri */
    color: #888;
    font-size: 12px;
    font-weight: bold;
    padding: 12px;
    text-transform: uppercase;
    border-bottom: 2px solid #b71c1c; /* Kırmızı alt çizgi */
    text-align: left; /* Sola hizalı */
}
/* Başlıkların ortalanması gerekenleri (Sıra, Simge vs.) */
.full-rank-table thead th[align="center"] { text-align: center; }
.full-rank-table thead th[align="right"] { text-align: right; }

.full-rank-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid #222;
    font-size: 13px;
    color: #ccc;
    background-color: transparent; /* ÖNEMLİ: TD şeffaf olsun ki TR rengi görünsün */
}

/* Satır Hover Efekti */
.full-rank-table tbody tr:hover td {
    background-color: rgba(255,255,255,0.05); /* Üzerine gelince hafif aydınlansın */
}

/* Job İkonu Hizalaması */
.rank-job-icon {
    margin-right: 5px;
    vertical-align: middle;
}

/* --- KRAL VE İLK 3 EFEKTİ DÜZELTMESİ --- */
/* PHP'den gelen style="..." özelliğinin çalışması için td'lerin rengini eziyoruz */
.full-rank-table tbody tr[style] td {
    background: transparent !important; /* Satırın kendi rengi parlasın */
    border-bottom-color: rgba(255,255,255,0.1); /* Çizgisi biraz daha silik olsun */
}

/* --- FİLTRE BUTONLARI --- */
.rank-filters {
    background: #151515;
    padding: 15px;
    border: 1px solid #333;
    border-radius: 6px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.filter-row {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 6px 12px;
    background: #222;
    color: #aaa;
    text-decoration: none;
    font-size: 12px;
    border: 1px solid #333;
    border-radius: 4px;
    transition: 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.filter-btn:hover {
    background: #333;
    color: #fff;
}

.filter-btn.active {
    background: #b71c1c; /* Aktif buton kırmızı */
    color: #fff;
    border-color: #b71c1c;
}

/* Irk Butonlarına Özel Renkler */
.filter-btn.btn-karus.active { background: #1976d2; border-color: #1976d2; }
.filter-btn.btn-human.active { background: #d32f2f; border-color: #d32f2f; }

/* SAYFALAMA (Ranking'e özel) */
.pus-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.pus-page-btn {
    padding: 8px 15px;
    background: #222;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    border: 1px solid #444;
    font-size: 13px;
}
.pus-page-btn:hover { background: #444; }

/* MOBİL UYUMLULUK */
@media (max-width: 1200px) {
    .main-content {
        flex-direction: column; /* Yan yana yerine alt alta */
    }
    .sidebar {
        width: 100%; /* Telefondaysa tam genişlik */
    }
    .center-area {
        order: -1; /* Mobilde orta alan en üstte görünsün istersen bunu kullan */
    }
}
/* --- SIKIŞTIRILMIŞ MOBİL TABLO (OPTİMİZE) --- */

@media (max-width: 1200px) {
    
    .full-rank-table {
        width: 100%;
        table-layout: auto; /* İçeriğe göre esnesin */
    }

    /* Genel Hücre Ayarları */
    .full-rank-table th, 
    .full-rank-table td {
        padding: 6px 2px !important; /* Yan boşlukları neredeyse sıfırla */
        font-size: 11px !important;
    }

    /* --- DAR SÜTUNLAR (Sıra, Simge, Irk, Job) --- */
    .min-col {
        width: 24px !important; /* Sadece ikonun sığacağı genişlik */
        max-width: 24px !important;
        text-align: center !important;
        padding: 0 !important;
    }

    /* Başlık Yazılarını Gizle! */
    /* "Irk" ve "Sınıf" yazısı mobilde yer kaplamasın. Sadece ikonlar konuşsun. */
    th.min-col {
        font-size: 0 !important; /* Yazıyı görünmez yap */
    }
    
    /* Başlıkların tepesine minik ikon koyabiliriz (Opsiyonel - FontAwesome varsa) */
    /* Irk yerine Bayrak, Job yerine Kılıç ikonu koymak istersen: */
    /* th.min-col::after { font-size: 10px; content: '\f059'; font-family: "Font Awesome 5 Free"; } */

    /* İkon Boyutları */
    .full-rank-table img,
    .rank-job-icon {
        width: 16px !important;
        height: 16px !important;
        margin: 0 auto !important;
        display: block; /* Ortalamak için */
    }

    /* İsim ve Clan sütunlarına biraz nefes aldıralım */
    .full-rank-table td:nth-child(3), /* İsim */
    .full-rank-table td:nth-last-child(2) { /* Clan */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 80px; /* Çok uzun isimleri kes (...) koy */
    }
    
    /* NP Sağa yaslı */
    .full-rank-table td:last-child {
        text-align: right;
        padding-right: 5px !important;
    }
}
/* --- MOBİL GENİŞLİK DÜZELTMESİ --- */
@media (max-width: 992px) {
    
    /* Ana Taşıyıcılar */
    .container, 
    .main-content, 
    .center-area, 
    .sidebar, 
    .widget {
        width: 100% !important; /* Hepsini zorla tam ekran yap */
        max-width: 100% !important;
        box-sizing: border-box; /* Padding eklenince taşmayı engelle */
        margin-left: 0 !important;
        margin-right: 0 !important;
        float: none !important; /* Yan yana dizilmeyi iptal et */
        display: block !important;
    }

    /* Eğer padding yüzünden içerik dar görünüyorsa */
    .center-area {
        padding: 0 !important; /* İçeriğin kenar boşluğunu sıfırla */
        margin-bottom: 20px !important; /* Altına boşluk koy ki sidebar ile yapışmasın */
		order: 1 !important; /* Sıra numarası 1 (En üst) */
    }

    /* Sidebar widgetları da taşmasın */
    .widget {
        margin-bottom: 15px !important;
    }
	/* 3. Sidebarları ALTINA AL */
    .sidebar {
        order: 2 !important; /* Sıra numarası 2 (İçeriğin altı) */
        margin-top: 20px !important; /* İçerikle arasına biraz boşluk koy */
    }
	/* 1. Kapsayıcıyı Flex Moduna Al */
    .main-content {
        display: flex !important;
        flex-direction: column !important; /* Alt alta dizilim */
    }
}
/* --- GENİŞ SERVER DURUM BARI (CONTENT ÜSTÜ) --- */

.server-wide-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* Arka plan: Siyah'tan çok koyu griye geçiş */
    background: linear-gradient(to bottom, #151515, #050505);
    
    /* Çerçeve: İnce ve Koyu Gri */
    border: 1px solid #333;
    
    /* ÜST VE ALT ÇİZGİ: Kırmızı yerine ALTIN yapıyoruz */
    border-top: 1px solid #cba163; 
    border-bottom: 1px solid #cba163;
    
    padding: 15px 25px;
    border-radius: 4px;
    margin-bottom: 25px;
    
    /* Altın rengi hafif bir parlama (Glow) */
    box-shadow: 0 0 15px rgba(203, 161, 99, 0.1); 
    
    position: relative;
    overflow: hidden;
}

/* Hafif parlama efekti */
.server-wide-bar::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 1px;
    background: rgba(255,255,255,0.05);
}

.sw-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

/* İçerik Yazı Renkleri */
.sw-label {
    font-weight: 700;
    color: #888; /* Başlıklar gri kalsın */
    font-size: 11px;
    letter-spacing: 1px;
}

.sw-value {
    color: #e0e0e0; /* Değerler gümüş beyazı */
    font-family: 'Segoe UI', sans-serif;
}

/* İkon Renkleri */
.time-val i { color: #cba163; } /* Saat ikonu altın */
.count-val { color: #f1c40f; text-shadow: 0 0 5px rgba(241, 196, 15, 0.3); } /* Altın Rengi */

.sw-status {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
}

.sw-status.online {
    background: rgba(46, 204, 113, 0.1);
    color: #2ecc71;
    border: 1px solid #2ecc71;
}

.sw-status.offline {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
    border: 1px solid #e74c3c;
}

/* MOBİL UYUM */
@media (max-width: 768px) {
    .server-wide-bar {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
        text-align: center;
    }
    .sw-item {
        width: 100%;
        justify-content: space-between; /* Mobilde başlık solda, değer sağda olsun */
        border-bottom: 1px dashed #333;
        padding-bottom: 8px;
    }
    .sw-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
}
/* --- FORM ELEMANLARI (LOGİN & REGİSTER) --- */

.form-group { margin-bottom: 20px; }
.form-group label, .form-col label { display: block; color: #888; font-size: 12px; font-weight: bold; margin-bottom: 5px; }
.req { color: #b71c1c; }

/* Input Alanları */
.dark-input {
    width: 100%;
    padding: 12px 15px;
    background: #0a0a0a;
    border: 1px solid #333;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box; /* Taşmayı engeller */
    transition: 0.3s;
}

.dark-input:focus {
    border-color: #cba163; /* Odaklanınca ALTIN çerçeve */
    box-shadow: 0 0 10px rgba(203, 161, 99, 0.2);
    outline: none;
}

/* İkonlu Input Wrapper */
.input-icon-wrapper { position: relative; }
.input-icon-wrapper i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #555;
}
.input-icon-wrapper .dark-input { padding-left: 40px; } /* İkon payı */

/* Form Düzeni (Yan Yana) */
.form-row { display: flex; gap: 20px; margin-bottom: 15px; }
.form-col { flex: 1; }

/* Submit Butonu */
.submit-btn {
    width: 100%;
    padding: 15px;
    background: linear-gradient(to bottom, #b71c1c, #8a1c1c); /* Kırmızı */
    color: #fff;
    border: none;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
    border-radius: 4px;
    text-transform: uppercase;
    transition: 0.3s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.submit-btn:hover {
    background: linear-gradient(to bottom, #d32f2f, #b71c1c);
    box-shadow: 0 0 15px rgba(183, 28, 28, 0.5);
}

/* Register Butonu Altın Olsun */
.register-submit {
    background: linear-gradient(to bottom, #cba163, #a07e32);
    color: #000;
}
.register-submit:hover {
    background: linear-gradient(to bottom, #f1c40f, #cba163);
    box-shadow: 0 0 15px rgba(241, 196, 15, 0.5);
}

/* Mobil Uyum */
@media (max-width: 768px) {
    .form-row { flex-direction: column; gap: 10px; }
}
/* --- USER CP (HESAP PANELİ) STİLLERİ --- */

/* Üst İstatistik Kartları */
.cp-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.cp-card {
    background: #111;
    border: 1px solid #333;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    transition: 0.3s;
}

.cp-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.5); }

/* Renk Temaları */
.cp-card.gold { border-bottom: 3px solid #cba163; }
.cp-card.gold .cp-icon { color: #cba163; background: rgba(203, 161, 99, 0.1); }

.cp-card.blue { border-bottom: 3px solid #3498db; }
.cp-card.blue .cp-icon { color: #3498db; background: rgba(52, 152, 219, 0.1); }

.cp-card.red { border-bottom: 3px solid #e74c3c; }
.cp-card.red .cp-icon { color: #e74c3c; background: rgba(231, 76, 60, 0.1); }
/* Bonus Kartı İçin Mor Tema */
.cp-card.purple { border-bottom: 3px solid #9b59b6; }
.cp-card.purple .cp-icon { color: #9b59b6; background: rgba(155, 89, 182, 0.1); }
.cp-icon {
    width: 50px; height: 50px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    border-radius: 50%;
}

.cp-info span { display: block; font-size: 12px; color: #777; text-transform: uppercase; letter-spacing: 1px; }
.cp-info strong { display: block; font-size: 20px; color: #fff; margin-top: 2px; }

/* Bilgi Tablosu */
.cp-table {
    width: 100%;
    border-collapse: collapse;
}

.cp-table tr { border-bottom: 1px solid #222; }
.cp-table tr:last-child { border-bottom: none; }

.cp-table td {
    padding: 15px 20px;
    color: #ccc;
    font-size: 14px;
}

.cp-table td i { width: 20px; color: #555; text-align: center; margin-right: 10px; }
.cp-table tr:hover { background: rgba(255,255,255,0.02); }

/* İşlem Butonları */
.cp-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.action-btn {
    background: #1a1a1a;
    color: #ccc;
    padding: 12px 20px;
    border-radius: 4px;
    text-decoration: none;
    border: 1px solid #333;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.2s;
}

.action-btn:hover {
    background: #cba163;
    color: #000;
    border-color: #cba163;
}
/* --- PREMIUM ÖZELLİKLERİ KUTUSU --- */
.prem-features {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pf-item {
    background: #111;
    border: 1px solid #222;
    padding: 10px 15px;
    border-radius: 4px;
    flex: 1 1 calc(33.333% - 10px); /* 3 Yan Yana */
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: #aaa;
}

.pf-item i { color: #3498db; margin-right: 8px; }

.pf-item span {
    font-weight: bold;
    color: #3498db;
    font-size: 14px;
}

.pf-item.full {
    flex: 1 1 100%; /* Tam genişlik */
    background: rgba(52, 152, 219, 0.1);
    border-color: #3498db;
    color: #3498db;
}

/* Mobil Uyumluluk */
@media (max-width: 768px) {
    .pf-item { flex: 1 1 100%; } /* Mobilde alt alta */
}

/* =========================================
   STICKY & MOBIL TEK SATIR DÜZENİ
   ========================================= */

/* 1. Ana Menü Yapışkanlık ve Zemin */
.top-menu {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0;
    z-index: 10000;
    background: linear-gradient(to bottom, #1a1a1a, #050505);
    border-bottom: 3px solid #8a1c1c;
    height: 60px;
}

/* 2. Kapsayıcı: Tek Satır Garantisi */
.top-menu .container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* Alt satıra inmeyi yasaklar */
    align-items: center !important;
    justify-content: space-between !important;
    height: 100% !important;
    padding: 0 30px !important;
}

/* 3. Burger Butonu Ayarları */
.burger-btn {
    display: none; /* Masaüstünde gizli */
    cursor: pointer;
    flex-direction: column;
    gap: 4px;
    flex: 0 0 auto; /* Genişliği sabit tut */
}

.burger-btn span {
    width: 25px;
    height: 3px;
    background-color: #cba163;
    border-radius: 2px;
}

/* 4. Mobil Menü Paneli (Açılır Kısım) */
/* 1. Sağdan Açılan Panel Ayarı */
#mobileNavContent {
    display: flex !important; /* Her zaman flex, ama sağda gizli */
    position: fixed !important;
    top: 0;
    right: -200px; /* Panel genişliği kadar sağda gizli */
    width: 200px;
    height: 100vh;
    background: #0e0e0e;
    border-left: 3px solid #8a1c1c; /* Kan kırmızısı ayraç */
    z-index: 10002;
    transition: right 0.3s ease-in-out;
    flex-direction: column;
    overflow-y: auto;
    box-shadow: -10px 0 30px rgba(0,0,0,0.8);
}

/* Panel Aktifken */
#mobileNavContent.active {
    right: 0;
}

/* 1. Her satırda tek bir menü olması için */
#mobileNavContent ul {
    display: flex !important;
    flex-direction: column !important; /* Alt alta diz */
    padding: 0;
    margin: 0;
    width: 100% !important;
}

#mobileNavContent li {
    display: block !important;
    width: 100% !important; /* Satırı tam kapla */
    position: relative;
}

#mobileNavContent li a {
    display: block !important; /* Linkin tüm satıra yayılması için */
    width: 100% !important;
    padding: 15px 20px !important;
    border-bottom: 1px solid #1a1a1a;
}

/* 2. Akordiyon Mantığı: Alt menüyü aşağı kaydırarak açma */
#mobileNavContent .dropdown {
    position: static !important; /* Masaüstündeki absolute yapısını bozar, aşağı itmesini sağlar */
    display: none !important;    /* Başlangıçta gizli */
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    transform: none !important;
    background: #080808 !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}

/* 'open' class'ı gelince alt menüyü göster */
#mobileNavContent li.open > .dropdown {
    display: block !important;
}

/* Alt menü linklerinin biraz daha içeriden başlaması (Hiyerarşi için) */
#mobileNavContent .dropdown li a {
    padding-left: 40px !important; 
    background: #050505 !important;
    font-size: 13px !important;
}

/* 5. MEDYA SORGUSU (Mobil Düzen) */
@media (max-width: 1024px) {
    /* Masaüstü orta menüyü gizle */
    .menu-list {
        display: none !important;
    }

    /* Burgeri göster */
    .burger-btn {
        display: flex !important;
    }

    /* Logo Sola */
    .nav-brand {
        flex: 0 0 auto !important;
    }
    .nav-brand img {
        max-height: 35px !important;
    }

    /* Giriş/Kayıt Ortaya */
    .menu-user {
        display: flex !important;
        flex: 1 1 auto !important; /* Ortadaki boşluğu kapla */
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .user-btn {
        padding: 5px 7px !important;
        font-size: 10px !important;
        white-space: nowrap !important;
    }
    
    /* Mobil Menü İçindeki Linkler */
    #mobileNavContent ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    #mobileNavContent li a {
        display: block;
        padding: 15px 20px;
        color: #fff;
        text-decoration: none;
        border-bottom: 1px solid #1a1a1a;
        font-size: 14px;
    }
    #mobileNavContent .dropdown {
        background: #080808;
        padding-left: 20px;
    }
}
/* --- BANNER ALANLARI (REKLAM) --- */

/* 1. TOP BANNER (Header ile Menü Arası) */
.banner-top-wrapper {
    width: 100%;
    background: #000; /* Resim yoksa siyah zemin */
    text-align: center;
    overflow: hidden;
    position: relative;
    z-index: 999; /* Menünün hemen altında kalsın */
    
    /* Altına ince bir ayraç (Tema renginde) */
    border-bottom: 1px solid #333;
}

.banner-top-wrapper a {
    display: block;
    width: 100%;
}

.banner-top-wrapper img {
    width: 100%;
    height: auto;
    max-height: 90px; /* Yüksekliği sınırlar, çok yer kaplamasını engeller */
    object-fit: cover; /* Resmi alana sığdırır */
    display: block; /* Alt boşluk oluşmasını engeller */
    margin: 0 auto;
    
    /* Mobilde resim çok küçülürse okunmaz, 
       bu yüzden mobilde gerekirse height:auto ile serbest bırakılır */
}

/* 2. CENTER BANNER (Slider ile İçerik Arası) */
.banner-center-wrapper {
    max-width: 1600px; /* İsteğine göre genişlik sınırı */
    margin: 20px auto 30px auto; /* Üstten 20px, Alttan 30px boşluk */
    text-align: center;
    padding: 0 10px; /* Mobilde kenarlara yapışmasın */
    position: relative;
}

.banner-center-wrapper img {
    width: 100%;
    height: auto;
    max-height: 150px; /* İsteğine göre yükseklik sınırı */
    object-fit: fill; /* Resmi kutuya tam yayar */
    
    /* Tema ile uyumlu stil */
    border: 1px solid #333;
    border-radius: 6px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5); /* Hafif gölge */
    transition: transform 0.3s ease;
}

/* Üzerine gelince hafif efekt */
.banner-center-wrapper img:hover {
    transform: translateY(-2px);
    border-color: #555;
    box-shadow: 0 15px 30px rgba(0,0,0,0.7);
}

/* 3. MOBİL UYUM */
@media (max-width: 768px) {
    /* Top banner mobilde 90px'den biraz kısa olabilir veya gizlenebilir */
    .banner-top-wrapper img {
        max-height: 60px; /* Mobilde biraz daha ince olsun */
    }
    
    .banner-center-wrapper {
        margin: 15px auto;
    }
}