/* ==========================================================================
   Axion Mu theme — WebEngine uyumluluk katmanı
   style.css  : sitenin kendi tasarım sistemi (WebSite/index.html'den)
   override.css: CMS'e özgü düzeltmeler + WebEngine/Bootstrap modül görünümü
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Yerleşim: landing sayfasında absolute olan topbar, CMS'te akışta olmalı
   -------------------------------------------------------------------------- */
.topbar{
    position:sticky;
    top:0;
    left:auto;

    height:auto;
    min-height:86px;

    padding:10px 5%;

    background:rgba(5,6,7,.94);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    border-bottom:1px solid var(--line);

    z-index:9000;
}

.nav-menu{
    flex-wrap:wrap;
    justify-content:flex-end;
}

.nav-menu a.active{
    color:#fff;
    border-color:rgba(227,38,53,.45);
    background:rgba(169,21,32,.14);
}

.nav-menu a.active i{
    color:var(--red-bright);
}

.nav-toggle{
    display:none;

    width:46px;
    height:46px;

    color:var(--silver);
    font-size:18px;

    background:var(--glass);
    border:1px solid var(--line);

    cursor:pointer;
}

.nav-toggle:hover{
    color:#fff;
    border-color:rgba(227,38,53,.45);
}

@media(max-width:980px){

    .topbar{
        padding:10px 4%;
    }

    .logo img{
        height:48px;
    }

    .nav-toggle{
        display:block;
    }

    .nav-menu{
        display:none;

        width:100%;
        margin-top:14px;

        flex-direction:column;
        align-items:stretch;
    }

    .nav-menu.open{
        display:flex;
    }

    .nav-menu a{
        justify-content:flex-start;
        width:100%;
    }

}

/* --------------------------------------------------------------------------
   2) Canlı sunucu şeridi (tema tarafından eklenir)
   -------------------------------------------------------------------------- */
.server-strip{
    background:linear-gradient(180deg,var(--black2),var(--black3));
    border-bottom:1px solid var(--line);
}

.server-strip-inner{
    max-width:1400px;
    margin:0 auto;

    padding:14px 5%;

    display:flex;
    flex-wrap:wrap;
    gap:14px 34px;
}

.server-strip-item{
    display:flex;
    align-items:center;
    gap:10px;
}

.server-strip-label{
    color:var(--silver-dark);

    font-size:9px;
    font-weight:700;
    letter-spacing:1.8px;
    text-transform:uppercase;
}

.server-strip-label i{
    color:var(--red-bright);
}

.server-strip-value{
    color:var(--silver);

    font-size:12px;
    font-weight:600;
    letter-spacing:1px;
}

.server-strip-muted{
    color:var(--silver-dark);
}

.server-strip-sep{
    padding:0 6px;
    color:var(--silver-dark);
}

.server-strip-account a{
    color:var(--silver2);
    transition:.3s;
}

.server-strip-account a:hover{
    color:var(--red-bright);
}

.webengine-online-bar{
    display:block;

    width:80px;
    height:3px;

    background:rgba(255,255,255,.08);
}

.webengine-online-bar-progress{
    display:block;
    height:100%;

    background:linear-gradient(90deg,var(--red-dark),var(--red-bright));
}

/* --------------------------------------------------------------------------
   3) İçerik alanı
   -------------------------------------------------------------------------- */
#container{
    max-width:1400px;
    margin:0 auto;

    padding:34px 5% 70px;
}

#content .row{
    margin-left:0;
    margin-right:0;
}

.page-title{
    margin:0 0 22px;

    color:#fff;

    font-family:Cinzel,serif;
    font-size:24px;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
}

.page-title span{
    display:inline-block;

    padding-bottom:12px;

    border-bottom:2px solid var(--red);
}

/* --------------------------------------------------------------------------
   4) WebEngine / Bootstrap bileşenleri
   -------------------------------------------------------------------------- */
#content h2,
#content h3,
#content h4{
    color:#fff;
    font-family:Cinzel,serif;
    letter-spacing:2px;
}

#content p,
#content li{
    color:var(--silver2);
    font-size:13px;
    line-height:1.9;
}

.panel{
    background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));

    border:1px solid var(--line);
    border-radius:0;

    box-shadow:none;
}

.panel-heading{
    padding:16px 18px;

    background:rgba(0,0,0,.35);

    border-bottom:1px solid var(--line);
    border-radius:0;
}

.panel-title{
    color:#fff;

    font-family:Cinzel,serif;
    font-size:13px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
}

.panel-body{
    padding:18px;
}

.panel-body p:last-child{
    margin-bottom:0;
}

.table{
    margin-bottom:0;

    color:var(--silver2);
    font-size:12px;
}

.table > thead > tr > th{
    color:var(--silver-dark);

    font-size:9px;
    font-weight:700;
    letter-spacing:1.6px;
    text-transform:uppercase;

    border-bottom:1px solid var(--line);
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td{
    border-top:1px solid rgba(210,215,220,.07);
    vertical-align:middle;
}

.table > tbody > tr:hover > td{
    background:rgba(169,21,32,.07);
}

.table a{
    color:var(--silver);
}

.table a:hover{
    color:var(--red-bright);
}

.smalltext{
    color:var(--silver-dark);
    font-size:10px;
    letter-spacing:1px;
}

.btn{
    border-radius:0;

    font-size:10px;
    font-weight:700;
    letter-spacing:1.8px;
    text-transform:uppercase;
}

.btn-primary{
    color:#fff;

    background:linear-gradient(180deg,var(--red),var(--red-dark));
    border:1px solid rgba(227,38,53,.5);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active{
    color:#fff;

    background:linear-gradient(180deg,var(--red-bright),var(--red));
    border-color:var(--red-bright);
}

.btn-default{
    color:var(--silver);

    background:var(--glass);
    border:1px solid var(--line);
}

.btn-default:hover{
    color:#fff;

    background:rgba(255,255,255,.08);
    border-color:rgba(220,225,230,.25);
}

.btn-xs{
    padding:4px 9px;
}

.form-control{
    height:auto;

    padding:10px 12px;

    color:#fff;

    background:rgba(0,0,0,.4);

    border:1px solid var(--line);
    border-radius:0;

    box-shadow:none;
}

.form-control:focus{
    border-color:rgba(227,38,53,.5);

    box-shadow:0 0 0 2px rgba(169,21,32,.18);
}

.form-control::placeholder{
    color:var(--silver-dark);
}

.alert{
    border-radius:0;
    border:1px solid var(--line);

    background:var(--glass);
    color:var(--silver);
}

.alert-danger{
    color:#ffb9c0;

    background:rgba(169,21,32,.16);
    border-color:rgba(227,38,53,.35);
}

.alert-success{
    color:#b8f0c9;

    background:rgba(38,140,80,.14);
    border-color:rgba(38,140,80,.35);
}

.nav-tabs{
    border-bottom:1px solid var(--line);
}

.nav-tabs > li > a{
    color:var(--silver2);

    border-radius:0;
    border:1px solid transparent;

    font-size:10px;
    font-weight:700;
    letter-spacing:1.6px;
    text-transform:uppercase;
}

.nav-tabs > li > a:hover{
    color:#fff;

    background:var(--glass);
    border-color:var(--line);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus{
    color:#fff;

    background:rgba(169,21,32,.16);
    border-color:rgba(227,38,53,.4);
    border-bottom-color:transparent;
}

.pagination > li > a,
.pagination > li > span{
    color:var(--silver2);

    background:var(--glass);
    border:1px solid var(--line);
}

.pagination > .active > a,
.pagination > .active > span{
    color:#fff;

    background:var(--red);
    border-color:var(--red-bright);
}

.dropdown-menu{
    background:var(--black3);

    border:1px solid var(--line);
    border-radius:0;
    box-shadow:0 18px 40px rgba(0,0,0,.6);
}

.dropdown-menu > li > a{
    color:var(--silver2);
}

.dropdown-menu > li > a:hover{
    color:#fff;
    background:rgba(169,21,32,.2);
}

/* Anasayfa haber bloğu (modules/home.php) */
.home-news-block-header{
    padding:16px 0;
    border-bottom:1px solid var(--line);
}

.home-news-block-article{
    padding:14px 0;
    border-bottom:1px solid rgba(210,215,220,.07);
}

.home-news-block-article-title a{
    color:var(--silver);
}

.home-news-block-article-title a:hover{
    color:var(--red-bright);
}

.home-news-block-article-type{
    color:var(--red-bright);

    font-size:9px;
    font-weight:700;
    letter-spacing:1.8px;
}

.home-news-block-article-date{
    color:var(--silver-dark);
    font-size:10px;
    letter-spacing:1px;
}

.sidebar-banner{
    display:block;
    margin:20px 0;
}

.sidebar-banner img{
    width:100%;
    height:auto;
    display:block;

    border:1px solid var(--line);
}

.panel-sidebar .panel-title{
    font-size:12px;
}

/* Üye profili (profiles.css üzerine) */
.profile-character-name{
    color:#fff;

    font-family:Cinzel,serif;
    letter-spacing:2px;
}

/* --------------------------------------------------------------------------
   5) Footer (tema tarafından eklenen parçalar)
   -------------------------------------------------------------------------- */
.footer-legal{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:4px 10px;

    margin:18px 0;
}

.footer-legal a{
    color:var(--silver2);

    font-size:10px;
    font-weight:600;
    letter-spacing:1.4px;
    text-transform:uppercase;

    transition:.3s;
}

.footer-legal a:hover{
    color:var(--red-bright);
}

.footer-legal span{
    color:var(--silver-dark);
}

.footer-webzen{
    color:var(--silver-dark);
    font-size:11px;
}

.axion-footer .webengine-powered{
    margin-top:10px;

    color:var(--silver-dark);
    font-size:10px;
    letter-spacing:1.2px;
}

.axion-footer .webengine-powered a{
    color:var(--silver2);
}

/* --------------------------------------------------------------------------
   6) Sıralama sayfası: sınıf filtresi (WebEngine çekirdek rankings modülü)

   Çekirdek modül `ul.rankings-class-filter` üretir; görünümü `default` temasında
   tanımlıdır ama axionmu'da hiç yoktu. Stilsiz kalınca 17 <li> madde işaretli
   DİKEY listeye dönüşüyor, ~2100px boşluk açıyor ve sıralama tablosunu
   sayfanın çok altına itiyordu. Burada yatay, ortalanmış bir filtre şeridine
   çevrilir.
   -------------------------------------------------------------------------- */
.rankings-class-filter{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px;

    margin:20px auto;
    padding:10px 20px;

    list-style:none;
}

.rankings-class-filter li{
    display:inline-block;

    margin:0;

    list-style:none;

    transition:all .3s ease;
}

.rankings-class-filter-selection{
    display:inline-block;

    width:78px;

    color:var(--silver2);
    font-size:11px;
    text-align:center;
    text-decoration:none;

    cursor:pointer;
}

.rankings-class-filter-selection:hover{
    color:var(--red-bright);
}

.rankings-class-filter-selection img{
    width:40px;
    height:auto;

    margin-bottom:6px;

    border-radius:50%;

    filter:grayscale(60%);
    box-shadow:0 0 10px 0 rgba(169,21,32,.35);

    transition:all .3s ease;
}

.rankings-class-filter-selection:hover img{
    filter:grayscale(0%) brightness(115%);
}

.rankings-class-filter-grayscale,
.rankings-class-filter-grayscale img{
    filter:grayscale(100%);
}

/* --------------------------------------------------------------------------
   7) Landing ana sayfa bölümleri (inc/modules/landing.php)

   Stillerin tamamı style.css'te (landing'den taşındı); buradakiler yalnız CMS
   yerleşimine uyarlama. Landing tek sayfaydı; CMS'te hero ve bölümler
   `#container` dışında tam genişlik basılır.
   -------------------------------------------------------------------------- */

/* Landing'de `.live-section` yan boşluksuzdu (grid ekran kenarına yapışıyordu);
   CMS'te bölümleri diğer bloklarla hizala. */
.live-section{
    padding-left:6%;
    padding-right:6%;
}

.live-grid{
    max-width:1200px;
    margin-left:auto;
    margin-right:auto;
}

.axion-live-empty{
    padding:20px;

    color:#8a8d97;
    font-size:13px;
}

/* Karakter kartı bir seçicidir (bağlantı değil); tıklanabilirliği belli etsin. */
.character-card{
    cursor:pointer;
    user-select:none;
}

/* --------------------------------------------------------------------------
   8) Modül sarmalayıcı temizliği (clearfix)

   `index.php` modülü `<div class="col-xs-12">` içine alır; Bootstrap bu sınıfı
   `float:left` yapar. `#content`/`#container` bunları temizlemediği için
   yükseklikleri 0'a düşüyor ve ALT BİLGİ modül içeriğinin ÜZERİNE biniyordu
   (footer, son panelin ortasından başlıyordu). Temizlik eklenince footer doğru
   yere iner; tüm modül sayfaları için geçerlidir.
   -------------------------------------------------------------------------- */
#container::after,
#content::after{
    content:"";

    display:table;
    clear:both;
}