/* =====================================================================
   EPIC.CSS  —  Duke paneli (V4 + modal fix)
   En SON yuklenir; style.css'i BOZMAZ, uzerine biner.
   Geri alma: header.php'deki tek <link> satirini sil.
   NOT: logo (konum/boyut/filtre/hover) admin ayaridir; bu dosya ona DOKUNMAZ.
   NOT: .modalx-overlay arka planina !important VERILMEZ (modal kapanmasini bozar).
===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800&display=swap');

:root{
    --ep-gold:   #ffd27a;
    --ep-gold-2: #ffe9bd;
    --ep-orange: #ff8a2b;
    --ep-ember:  #ff6a13;
    --ep-text:   #cabdac;
    --ep-text-2: #ece0d0;
    --ep-line:   rgba(255,160,70,.45);
    --ep-line-s: rgba(255,160,70,.20);
    --ep-glow:   rgba(255,122,24,.5);
}

/* ============================ OKUNABILIRLIK ============================ */
.wrapper, .wrap{ color:var(--ep-text); }
.content{ line-height:1.6 !important; color:var(--ep-text) !important; }
.content p, .news-right p, .top-news-info, .bottom-news, p, li{ line-height:1.6; }
.top-news-info{ color:var(--ep-text-2) !important; font-size:12px !important; text-shadow:0 1px 3px rgba(0,0,0,.9); }
.hero-guides-block .block-info{ color:var(--ep-text-2) !important; text-shadow:0 1px 3px rgba(0,0,0,.8); }
.hero-guides-block .block-info span{ color:var(--ep-gold) !important; }
::selection{ background:var(--ep-ember); color:#fff; }

/* kaydirma cubugu */
*{ scrollbar-color:var(--ep-orange) #1a0f08; scrollbar-width:thin; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:#140b06; }
::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--ep-orange),#8a3d12); border-radius:8px; }

/* atmosfer (hafif sicak isik) */
.wrapper::before{
    content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
    background:
        radial-gradient(1000px 420px at 50% -8%, rgba(255,138,43,.12), transparent 62%),
        radial-gradient(800px 320px at 50% 105%, rgba(0,0,0,.45), transparent 60%);
}
.wrapper > *{ position:relative; z-index:1; }

/* ============================ BASLIKLAR ============================ */
.sidebar-title, .reg-title, .tabs-title h4, .news-itm-title h4,
.box-title, .block-title, .title, h1, h2, h3, h4{
    font-family:'Cinzel','Candara',serif !important; letter-spacing:1px;
}
.sidebar-title{
    color:#fff !important;
    text-shadow:0 2px 10px rgba(0,0,0,.6), 0 0 16px var(--ep-glow);
    background:linear-gradient(90deg, rgba(255,138,43,.16), rgba(255,138,43,0)) !important;
    border-bottom:1px solid var(--ep-line) !important;
}
.sidebar-title a{ color:var(--ep-gold) !important; }
.tabs-title h4, .news-itm-title h4{
    color:var(--ep-gold-2) !important;
    text-shadow:0 2px 10px rgba(0,0,0,.6), 0 0 14px var(--ep-glow);
    display:inline-block; position:relative; padding-bottom:8px;
}
.tabs-title h4::after{
    content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
    background:linear-gradient(90deg, var(--ep-orange), transparent);
    box-shadow:0 0 10px var(--ep-glow);
}

/* ==================== 3 TANITIM KARTI (.top-news) — ALTIN cerceve ==================== */
.news-top-block .top-news{
    position:relative;
    border:1px solid var(--ep-line);
    border-radius:12px; overflow:hidden;
    background-size:cover !important; background-position:center !important;
    box-shadow:0 14px 34px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.04);
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.news-top-block .top-news::before{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.12) 32%, rgba(0,0,0,.15) 52%, rgba(0,0,0,.85) 100%);
}
.news-top-block .top-news > *{ position:relative; z-index:1; }
.news-top-block .top-news:hover{
    transform:translateY(-6px); border-color:var(--ep-gold);
    box-shadow:0 22px 50px var(--ep-glow), inset 0 0 0 1px rgba(255,210,120,.3);
}
.news-top-block .top-news .top-news-title a{
    font-family:'Cinzel',serif !important; color:var(--ep-gold-2) !important;
    text-shadow:0 2px 8px rgba(0,0,0,.9), 0 0 12px var(--ep-glow); font-size:16px !important;
}
.news-top-block .top-news .top-news-read-more a{
    color:#fff !important; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
    background:linear-gradient(180deg,#3a2112,#1d1009); border:1px solid var(--ep-line);
    padding:6px 12px; border-radius:8px; display:inline-block; box-shadow:0 4px 12px rgba(0,0,0,.5);
    transition:filter .2s ease, transform .2s ease;
}
.news-top-block .top-news .top-news-read-more a:hover{ filter:brightness(1.15); transform:translateY(-2px); box-shadow:0 8px 18px var(--ep-glow); }

/* ==================== ARKA PLANLAR (v4 - duz koyu degrade) ==================== */
.left-sidebar{ background:linear-gradient(180deg,#0d0804 0%, #06040a 60%, #01010b 100%) !important; border-right:1px solid var(--ep-line-s); }
.right-sidebar{ background:linear-gradient(180deg,#0d0804 0%, #06040a 60%, #01010b 100%) !important; }
.content{ background:linear-gradient(180deg, #0a0509, #01010b 70%) !important; border:1px solid var(--ep-line-s); border-radius:14px; }

.rankings-block, .top-guilds-block, .sngle-news-itm, .news-tab-area{
    border:1px solid var(--ep-line-s); border-radius:12px;
    box-shadow:0 14px 34px rgba(0,0,0,.4);
    transition:border-color .3s ease, box-shadow .3s ease;
}
.rankings-block:hover, .top-guilds-block:hover, .sngle-news-itm:hover{ border-color:var(--ep-line); box-shadow:0 18px 46px rgba(0,0,0,.5); }
.sngle-news-itm{ padding:14px; margin-bottom:18px; }
.news-itm-title h4{ color:var(--ep-gold-2) !important; }
.news-right p{ color:var(--ep-text) !important; }
.news-left img{ border-radius:10px; border:1px solid var(--ep-line-s); box-shadow:0 8px 20px rgba(0,0,0,.5); }
.news-right p a, .news-right a[href*="patch/view"]{ color:var(--ep-gold) !important; font-weight:700; }
.hero-guides-block{ border-radius:12px; transition:filter .3s ease, transform .3s ease; }
.hero-guides-block:hover{ filter:brightness(1.1) drop-shadow(0 8px 16px var(--ep-glow)); transform:translateY(-2px); }

/* ============================ BUTONLAR ============================ */
.button{
    background:linear-gradient(180deg,#3a2112,#1d1009) !important;
    border:1px solid #7a3f16 !important; color:#ffeede !important; border-radius:8px !important;
    text-shadow:0 1px 2px rgba(0,0,0,.7);
    box-shadow:0 6px 16px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
    transition:transform .22s ease, box-shadow .22s ease, filter .22s ease; overflow:hidden;
}
.button:hover{ transform:translateY(-2px); box-shadow:0 12px 26px var(--ep-glow), inset 0 1px 0 rgba(255,255,255,.1); filter:brightness(1.08); }
.button::after{
    content:""; position:absolute; top:0; left:-130%; width:55%; height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,.22), transparent);
    transform:skewX(-20deg); transition:left .6s ease; pointer-events:none;
}
.button:hover::after{ left:160%; }
.button-bg{ border-radius:8px !important; box-shadow:0 6px 16px rgba(0,0,0,.45); }
.button-bg:hover{ filter:brightness(1.12) drop-shadow(0 6px 14px var(--ep-glow)); }
.itemshop, .itemshop-btn{ color:var(--ep-gold) !important; text-shadow:0 0 12px var(--ep-glow); }
.dowload-button a{ transition:filter .22s ease, transform .22s ease; }
.dowload-button a:hover{ filter:brightness(1.12) drop-shadow(0 8px 16px var(--ep-glow)); transform:translateY(-2px); }

/* ==================== UST LOGIN BUTONLARI — altin CTA ==================== */
.login-panel .button{
    background:linear-gradient(180deg,#ffc861,#ff7e1e) !important;
    border:1px solid #ffe0a0 !important; color:#2a1404 !important; font-weight:800 !important;
    border-radius:10px !important; text-shadow:0 1px 0 rgba(255,255,255,.25) !important;
    box-shadow:0 6px 16px var(--ep-glow), inset 0 1px 0 rgba(255,255,255,.45) !important;
}
.login-panel .button:hover{
    filter:brightness(1.06); transform:translateY(-2px);
    box-shadow:0 12px 28px var(--ep-glow), inset 0 1px 0 rgba(255,255,255,.55) !important;
}

/* ============================ UST PANEL + MENU ============================ */
.top-panel{
    background:linear-gradient(180deg,#120a06,#01010b) !important;
    border-bottom:1px solid var(--ep-line) !important; box-shadow:0 6px 24px rgba(0,0,0,.5);
}
.top-menu ul li a{ transition:color .2s ease, text-shadow .2s ease; }
.top-menu ul li a:hover{ color:var(--ep-gold) !important; text-shadow:0 0 12px var(--ep-glow); }
.top-menu .active a:before{
    background:linear-gradient(90deg, transparent, var(--ep-orange), transparent) !important;
    height:2px !important; box-shadow:0 0 8px var(--ep-glow);
}
.top-menu ul li ul{ border:1px solid var(--ep-line); background:#0d0703 !important; }
.progress-bar{ background:linear-gradient(90deg,var(--ep-ember),var(--ep-gold)) !important; box-shadow:0 0 10px var(--ep-glow); }

/* ==================== OYUNCU / LONCA SIRALAMASI (rozetli) ==================== */
.rankings-title{ color:var(--ep-gold) !important; border-bottom:1px solid var(--ep-line-s); }
.rankings-title-block, .guilds{
    color:var(--ep-text-2) !important; border-left:2px solid transparent;
    transition:background .2s ease, border-color .2s ease;
}
.rankings-title-block:hover, .guilds:hover{
    background:linear-gradient(90deg, rgba(255,138,43,.16), rgba(255,138,43,0)) !important;
    border-left-color:var(--ep-orange);
}
.rankings-title-block .rank-number, .guilds .rank-number{ text-align:center; font-weight:800; color:var(--ep-orange) !important; }
.rankings-title-block:nth-child(-n+4):nth-child(n+2) .rank-number,
.guilds:nth-child(-n+4):nth-child(n+2) .rank-number{
    display:inline-flex; align-items:center; justify-content:center;
    width:22px; height:22px; border-radius:50%; color:#1a0f06 !important; box-shadow:0 2px 6px rgba(0,0,0,.5);
}
.rankings-title-block:nth-child(2) .rank-number, .guilds:nth-child(2) .rank-number{ background:linear-gradient(180deg,#ffe7a3,#ffb52e); box-shadow:0 0 12px var(--ep-glow); }
.rankings-title-block:nth-child(3) .rank-number, .guilds:nth-child(3) .rank-number{ background:linear-gradient(180deg,#eef2f5,#aeb7c2); }
.rankings-title-block:nth-child(4) .rank-number, .guilds:nth-child(4) .rank-number{ background:linear-gradient(180deg,#f0b27a,#cd7f32); }
.rankings-title-block .rank-name, .guilds .clan-team-name{ color:var(--ep-text-2) !important; }
.rank-lvl .purple, .points{ color:var(--ep-gold) !important; font-weight:700; }

/* ============================ TABLOLAR ============================ */
table th, .table th, .table-monster th, .table-dark th{ color:var(--ep-gold) !important; text-transform:uppercase; letter-spacing:.5px; }
.table td, .table-monster td, .table-bordered td{ color:var(--ep-text); }
.table tr:hover td, .table-hover tr:hover td, .table-monster tr:hover td{ background:rgba(255,138,43,.07) !important; }

/* ============================ FORMLAR / INPUTLAR ============================ */
input, textarea, select{
    background:rgba(20,12,7,.7) !important; border:1px solid var(--ep-line-s) !important;
    color:#fff !important; border-radius:8px !important; transition:border-color .2s ease, box-shadow .2s ease;
}
input:focus, textarea:focus, select:focus{ border-color:var(--ep-orange) !important; box-shadow:0 0 0 3px rgba(255,122,24,.18) !important; outline:none !important; }
input::placeholder, textarea::placeholder{ color:#9a8f80; }
.content label, .reg-form p{ color:var(--ep-gold) !important; }

/* ============================ MODAL / POPUP ============================ */
.modal_window, .popup-block{ border-radius:14px !important; box-shadow:0 30px 80px rgba(0,0,0,.7), 0 0 0 1px var(--ep-line); }
.popup-block{ border-top:2px solid var(--ep-orange) !important; background:linear-gradient(180deg,#22150b,#170d07) !important; }
.reg-title{ color:var(--ep-gold) !important; }
/* DUZELTME: overlay arka planina !important VERILMEZ; eklenti kapanirken background'u
   seffafa cevirip transitionend ile overlay'i siliyor, !important bunu engelliyordu. */
.modalx-overlay{ -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }

/* ============================ FOOTER + GENEL ============================ */
.footer{ border-top:1px solid var(--ep-line-s); }
.footer-menu a{ transition:color .2s ease; }
.footer-menu a:hover{ color:var(--ep-gold) !important; }
a{ transition:color .2s ease, filter .2s ease; }
a:hover{ filter:brightness(1.12); }