/* ==========================================================================
   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;
}

/* Etiketler hicbir genislikte daralip komsu ogeye tasmasin.
   flex-wrap:wrap + varsayilan flex-shrink, dar containerda ogeleri
   sikistiriyor; icerik tasmasi metinleri ust uste bindiriyordu
   (aktif ogenin kirmizi kutusu icinde karmasa yazilar). */
.nav-menu a,
.nav-menu .nav-popup-btn{
    flex:0 0 auto;
    white-space:nowrap;
}

.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ı
/* Anasayfa sidebar'ındaki otomatik event paneli */
.axion-events-panel .axion-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.axion-ev-state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(255, 255, 255, 0.6);
}

.axion-ev-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}

.axion-ev-state.on .axion-ev-dot {
    background: #2ecc71;
    box-shadow: 0 0 6px rgba(46, 204, 113, 0.8);
}

.axion-ev-state.off .axion-ev-dot {
    background: #e74c3c;
    box-shadow: 0 0 6px rgba(231, 76, 60, 0.8);
}

.axion-events-panel .axion-panel-body {
    max-height: 420px;
    overflow-y: auto;
}

.axion-ev-empty {
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    margin: 0;
    padding: 8px 0;
}

/* Modal listesi kendi kapsayicisini kullanir (scrollbar panelde). */
#events-modal > li {
    padding: 8px 0;
}

/* ============================================================
   Local mirror tail re-merged after a bad overwrite on 05.10.2026.
   Contains .ax-rules*, .rankingTable and .axion-rank-panel rules
   that were dropped from the server copy.
   ============================================================ */
/* content.css @3040 icinde .btn adi DmN CMS'in ESKI mobil hamburger
   menusu icin yazilmis bir kural duruyor:
       .btn { position:fixed; top:12px; left:20px; z-index:15 }
       .btn span { display:block; width:25px; height:3px; ... }
   Landing hero'sundaki Download / Characters / Register butonlari da
   "btn" sinifini tasidigi icin bu kural onlara da bakiyordu; ucu de
   ekranin sol ustKosune (20,12) sabitlenip UST USTE biniyordu
   (olculen rect'ler birebir ayni: 20,12,150,48).

   Temada hamburger menusu .nav-toggle ile yapiliyor (.btn degil), yani
   bu kuralin ise yaradigi bir oge yok. Burada konumu akisa geri aliyoruz:
   butonlar .hero-actions flex kabinda normal sirada dursun. */
.btn{
    position:static;
    top:auto;
    left:auto;
    z-index:auto;

    border-radius:0;

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

/* Hamburger cubuklarini (3 adet span) buton metnine uygulayan ayni eski
   kural: buton icindeki span'i 25x3px beyaz cubuga ceviriyordu.
   Landing butonlarinda <i> ikon + duz metin var, span yok; yine de
   temizlik icin .btn icinde span'i metin gibi akisa birakiyoruz. */
.btn span{
    display:inline;
    width:auto;
    height:auto;
    margin:0;
    background:none;
}

.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;
}

/* --------------------------------------------------------------------------
   9) Rules sayfasi (application/views/axionmu/rules/view.rules.php)

   Eski yapida kurallar `assets/rules.html` icinden **ham** basiliyordu; bu
   yuzden markdown **isaretleri ekranda gorunuyordu ve "MUONLINE Season 20
   Part 1-3" yaziyordu. Icerik artik gercek HTML; asagidaki blok o HTML'i
   temanin dmn.css'iyle (serif basliklar) uyumlu hale getirir.
   Kapsam `.ax-rules` ile sinirli; diger moduller etkilenmez.
   -------------------------------------------------------------------------- */
.ax-rules{
    margin-bottom:20px;
}

.ax-rules-head{
    padding-bottom:22px;
    margin-bottom:26px;

    /* content.css declares a global `header { height:550px }` banner rule.
       If this markup is ever moved back into a <header> element that height
       would stretch the block and leave a large blank gap. */
    height:auto;

    border-bottom:1px solid rgba(255,255,255,.08);
}

.ax-rules-eyebrow{
    margin:0 0 6px 0;

    color:var(--red-bright,#e32635);
    font-size:11px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
}

.ax-rules-title{
    margin:0 0 12px 0;

    color:#fff;
    font-family:serif;
    font-size:26px;
    line-height:1.25;
    text-shadow:2px 1px 0 rgba(0,0,0,.5);
}

.ax-rules-lead,
.ax-rules-lead-sm{
    margin:0;
    color:var(--silver,#b9bcc6);
    font-size:14px;
    line-height:1.7;
}

.ax-rules-lead-sm{
    margin-bottom:18px;
    font-size:13px;
    color:#8a8d97;
}

.ax-rules-block{
    margin-bottom:34px;
}

/* Bolum basligi: 01/02/03 numarasi + serif baslik */
.ax-rules-h3{
    display:flex;
    align-items:center;
    gap:14px;

    margin:0 0 16px 0;
    padding-bottom:10px;

    border-bottom:1px solid rgba(255,255,255,.06);

    color:#fff;
    font-family:serif;
    font-size:17px;
    font-weight:400;
    letter-spacing:.5px;
    text-transform:uppercase;
    text-shadow:2px 1px 0 rgba(0,0,0,.5);
}

.ax-rules-num{
    flex:0 0 auto;

    padding:3px 9px;

    color:var(--red-bright,#e32635);
    background:rgba(169,21,32,.14);
    border:1px solid rgba(227,38,53,.35);

    font-family:inherit;
    font-size:12px;
    font-weight:700;
    letter-spacing:1px;
}

/* Madde listeleri (01, 03, 04, 05) */
.ax-rules-list{
    margin:0;
    padding:0;
    list-style:none;
}

.ax-rules-list li{
    position:relative;

    padding:0 0 0 26px;
    margin-bottom:11px;
}

.ax-rules-list li:last-child{
    margin-bottom:0;
}

.ax-rules-list li::before{
    content:"";
    position:absolute;
    left:6px;
    top:11px;

    width:6px;
    height:6px;

    background:var(--red-bright,#e32635);
    transform:rotate(45deg);
}

.ax-rules-list p,
.ax-rules-rule p{
    margin:0;

    color:#c7cad3;
    font-size:14px;
    line-height:1.75;
}

.ax-rules-list strong{
    color:#fff;
}

/* Numarali tekil kurallar (2-A ... 2-R) */
.ax-rules-rule{
    display:flex;
    align-items:flex-start;
    gap:12px;

    padding:11px 14px;
    margin-bottom:8px;

    background:rgba(255,255,255,.022);
    border-left:2px solid rgba(227,38,53,.4);
    border-radius:0 3px 3px 0;
}

.ax-rules-rule:hover{
    background:rgba(255,255,255,.04);
}

.ax-rules-code{
    flex:0 0 42px;
    margin-top:1px;

    color:#fff;
    font-family:serif;
    font-size:13px;
    font-weight:700;
    letter-spacing:.5px;
    opacity:.85;
}

/* Ceza rozetleri */
.ax-pen{
    display:inline-block;
    padding:1px 7px;

    border-radius:2px;

    font-size:11px;
    font-style:normal;
    font-weight:700;
    letter-spacing:.8px;
    white-space:nowrap;
    vertical-align:1px;
}

.ax-pen--del{
    color:#ff8b8b;
    background:rgba(169,21,32,.18);
    border:1px solid rgba(227,38,53,.4);
}

.ax-pen--warn{
    color:#ffc75f;
    background:rgba(180,120,20,.16);
    border:1px solid rgba(200,140,30,.4);
}

.ax-rules-foot{
    margin-top:26px;
    padding-top:16px;

    border-top:1px solid rgba(255,255,255,.06);
}

.ax-rules-foot p{
    margin:0;

    color:#6f727c;
    font-size:12px;
    font-style:italic;
    line-height:1.7;
}

@media (max-width:767px){
    .ax-rules-title{ font-size:21px; }
    .ax-rules-h3{ font-size:15px; gap:10px; }
    .ax-rules-list p,
    .ax-rules-rule p{ font-size:13px; }
    .ax-rules-rule{ padding:10px 11px; gap:9px; }
    .ax-rules-code{ flex:0 0 36px; font-size:12px; }
    .ax-pen{ white-space:normal; }
}
/* --------------------------------------------------------------------------
   10) Rankings tablosu (assets/axionmu/js_templates/rank_players.ejs)

   Iki sorun buradan geliyor:

   a) content.css'te `.rankingTable tbody tr td:nth-child(3)` -> display:flex.
      Tablo hucresi flex kutusuna donusunca satir yuksekligi hucreye gore
      hesaplanmiyor; satir 55px'e sikisip kalinca "class" bilgisi ve satir
      hover goruntusu (hover-xbig.png, 1155x60) altta eziliyor.

   b) Ayni hucre `overflow` ve `position` belirtmediigi icin, hucreye
      baglanan herhangi bir aciilir kutu/IPucu (tooltip) yine de
      tasma yerine hucre icinde kirpilir.

   Duzeltme: hucreyi flex yerine icerik akisina geri al, sirasal yerlesimi
   ic img + metni flex YAPMADAN, tablo hucresi olarak birak. Boylece hucre
   yuksekligi icerikle esitlenir ve tasan her sey gorunur.
   -------------------------------------------------------------------------- */
.rankingTable tbody tr td:nth-child(3){
    /* flex -> table-cell: hucre artik icerik yuksekligine esitlenir */
    display:table-cell;
    vertical-align:middle;

    /* class etiketi + ikon ayni hizada kalsin, metin tasmasin */
    white-space:nowrap;
}

.rankingTable tbody tr td:nth-child(3) img{
    vertical-align:middle;
}
/* --------------------------------------------------------------------------
   11) Sidebar karakter bilgi kutusu (.tablePopup) kirpiliyor

   Canli olcum (diag_clip.mjs, 1440x1200):
       .axion-rank-panel  -> overflow: hidden
       .tablePopup        -> position: absolute; right: calc(100% + 15px); top: -40px
       sonuc              -> 10/10 kutu kirpiliyor
                              her biri panelin solundan 134px,
                              3. satirdan itibaren altta 9px -> 268px

   Yani imlecle karakterin uzerine gelince acilan bilgi kutusu panelin
   disina tasiyor ve panel onu kesiyor; son satirlarda kutunun alt
   yarisi tamamen kayboluyor.

   Cozum:
     - Panel overflow:hidden yerine overflow:visible alir (kirpma kalkar).
     - Head'in arka plani panelin koselerine uymasi icin kendi
       border-radius'ini alir; boylece gorunum bozulmaz.
     - Popup yuksekligi panelin altina tasmasin diye ust satirlarda
       konumunu yukariye kaydiran bir kural.
     - Popup'in panel disina cikabilmesi icin z-index verilir.
   -------------------------------------------------------------------------- */
.axion-theme .axion-rank-panel,
body.axion-theme .axion-panel.axion-rank-panel{
    overflow: visible;
}

/* Panel artik kirpmiyor; head kendi koselerini alir. */
.axion-theme .axion-rank-panel > .axion-panel-head:first-child{
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

/* Asil kesici bu: tematik sayfa govdesinde yatay tasmayi onlemek icin
   `overflow-x: hidden` var (olcum: body 134px, yani kutunun %62'sini
   kesiyordu). Dikey eksende zaten kirpma yok, bu yuzden yalnizca yatay
   eksen gorunur birakilir; boylece popup panelin soluna cikabilir. */


/* Popup her zaman ustte ve kirpilmaz. */
.axion-theme .axion-rank-panel .tablePopup{
    z-index: 60;
}

/* Panelin altindaki son satirlarda kutu asagi tasmasin:
   kutu yuksekligi kadar yukari cekilir. */
.axion-theme .axion-rank-panel .tableBlock-content:nth-last-child(-n+2) .tablePopup{
    top: -320px;
}

/* Dikey ekranlarda kutu panelden daha yuksege de tasabilir; guvenli
   yukseklik siniri. */
@media (max-height: 900px){
    .axion-theme .axion-rank-panel .tablePopup{
        top: -140px;
    }
    .axion-theme .axion-rank-panel .tableBlock-content:nth-last-child(-n+2) .tablePopup{
        top: -300px;
    }
}


/* ==========================================================================
   KAYIT PANELI (registration) - yeniden tasarim
   --------------------------------------------------------------------------
   KANIT (CDP olcumu, canli sayfa, 1440x900):
     - Her .fieldGroup komsusuyla dikeyde 8px cakisiyordu. Sebep:
       content.css `.regBlock .fieldGroup { margin: 0 0 55px }` yaziyordu,
       axion.css bu degeri flex+gap duzenine gore `margin: 22px 0` yapti;
       eski CMS'in negatif `m-top-less-30` (-30px) kurali bu yuzden
       alanlari birbirinin USTUNE cekiyordu.
     - `.select-acc` (kurallar satiri) country select'inin 8px ustune
       biniyordu (accBox top 698 vs country select bottom 706).
     - Baslik iki kez basiliyordu: view.header.php + panel ici
       `.modalTitle`.Ekran goruntusunda "REGISTRATION" iki satir.
     - Select'lerin acilir oku YOKTU: content.css `select{}` icindeki
       background-image (select-icon.png), axion.css'in
       `.fieldGroup select { background: rgba(...) }` shorthand'i ile
       siliniyor. computed bgImage = "none".

   COZUM: Legacy .fieldGroup / .m-top-less-30 tabanli iskeleti tamamen
   birakip, panele ozel .axreg__* siniflari kullanildi. Butun kurallar
   `.axion-theme` altinda ve .axreg ile sinirli; login modali, hesap
   paneli ve diger sayfalarin `.fieldGroup` kullanimi ETKILENMEZ.
   ========================================================================== */

.axion-theme .mainRegister .blockR{
    max-width: 840px;
    width: 100%;
    margin: 20px auto;
}

.axion-theme .regBlock.axreg{
    position: relative;
    padding: 36px 44px 34px;
    border: 1px solid rgba(227, 38, 53, .20);
    border-radius: 4px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .04);
    overflow: hidden;
}

/* Ustte ince kirmizi-turuncu vurgu cizgisi. */
.axion-theme .regBlock.axreg::before{
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, #e32635 0%, #fc9162 55%, rgba(252, 146, 98, 0) 100%);
}

/* --- Baslik ------------------------------------------------------------ */
.axion-theme .axreg__head{
    margin: 0 0 28px;
    text-align: center;
}
.axion-theme .axreg__kicker{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: #fc9162;
}
.axion-theme .axreg__kicker i{
    width: 24px;
    height: 1px;
    background: linear-gradient(90deg, rgba(252, 146, 98, 0), #fc9162);
}
.axion-theme .axreg__title{
    margin: 12px 0 8px;
    font-family: 'Cinzel', serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 26px rgba(227, 38, 53, .30);
}
.axion-theme .axreg__sub{
    margin: 0 auto;
    max-width: 460px;
    font-size: 12.5px;
    line-height: 1.6;
    color: #8d95a0;
}

/* --- Izgara ------------------------------------------------------------ */
.axion-theme .axreg__grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
}
.axion-theme .axreg__cell--full{
    grid-column: 1 / -1;
}
.axion-theme .axreg__label{
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #9aa3ad;
}
.axion-theme .axreg__label i{
    font-size: 11px;
    color: #e32635;
}
/* --- Alanlar ----------------------------------------------------------- */
.axion-theme .axreg__ctrl{
    position: relative;
    display: block;
}
.axion-theme .axreg__ctrl input,
.axion-theme .axreg__ctrl select{
    display: block;
    width: 100%;
    height: 46px;
    margin: 0;
    padding: 0 15px;
    font-family: inherit;
    font-size: 14px;
    line-height: 46px;
    color: #e9edf1;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(210, 215, 220, .15);
    border-radius: 3px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.axion-theme .axreg__ctrl input::placeholder{ color: #6b7178; }
.axion-theme .axreg__ctrl input:focus,
.axion-theme .axreg__ctrl select:focus{
    outline: none;
    border-color: #e32635;
    background: rgba(255, 255, 255, .07);
    box-shadow: 0 0 0 3px rgba(227, 38, 53, .13), 0 0 20px rgba(227, 38, 53, .16);
}
.axion-theme .axreg__ctrl input[readonly]{
    color: #8d95a0;
    background: rgba(255, 255, 255, .025);
}
/* Select'ler icin ozel ok (content.css'teki ok, axion.css'in
   background shorthand'i ile siliniyordu). */
.axion-theme .axreg__ctrl select{
    padding-right: 40px;
    cursor: pointer;
}
.axion-theme .axreg__caret{
    position: absolute;
    right: 15px;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -6px;
    pointer-events: none;
    background: no-repeat center / 10px 10px url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 3.5l3.5 3.5 3.5-3.5' fill='none' stroke='%23fc9162' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* "Seciniz" placeholder soluk kalsin. */
.axion-theme .axreg__ctrl select.is-empty{ color: #6b7178; }

/* Native acilir liste: Windows/Chrome <option>'lari varsayilan BEYAZ
 * zeminle boyar; select rengimiz acik oldugu icin yazi okunmuyordu.
 * Liste paleti burada zorlanir. */
.axion-theme .axreg__ctrl select option{
    background-color: #0f1119;
    color: #e9edf1;
}
.axion-theme .axreg__ctrl select option:checked{
    background-color: #c3121f;
    color: #fff;
}
.axion-theme .axreg__ctrl select option:hover{
    background-color: #1a1d28;
}
/* Ayni beyaz-liste sorunu hesap paneli (country) ve login modalindaki
 * select'larda da gecerli; onlar .fieldGroup yapisini kullaniyor. */
.axion-theme .fieldGroup select option{
    background-color: #0f1119;
    color: #e9edf1;
}
.axion-theme .fieldGroup select option:checked{
    background-color: #c3121f;
    color: #fff;
}

/* --- Bayrak rozeti ----------------------------------------------------- */
.axion-theme .axreg__flagbadge{
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 16px;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(255, 255, 255, .06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
    pointer-events: none;
}
.axion-theme .axreg__flagbadge.is-hidden{ display: none; }
.axion-theme .axreg__ctrl--flag select{ padding-left: 46px; }

.axion-theme .axreg__note{
    display: block;
    margin: 7px 2px 0;
    font-size: 10.5px;
    line-height: 1.5;
    color: #6f7883;
}

/* --- validationEngine hata baloncugu ----------------------------------- */
.axion-theme .axreg__form .formError{
    position: static;
    display: block;
    width: auto;
    min-width: 0;
    margin: 6px 0 0;
}
.axion-theme .axreg__form .formError .formErrorContent{
    width: auto;
    min-width: 0;
    display: inline-block;
    padding: 4px 9px;
    font-size: 10.5px;
    letter-spacing: .2px;
    color: #fff;
    background: #c3121f;
    border: 0;
    border-radius: 2px;
    box-shadow: 0 4px 14px rgba(195, 18, 31, .35);
}
.axion-theme .axreg__form .formError .formErrorArrow{ display: none; }
.axion-theme .axreg__form .formError.greenPopup .formErrorContent{
    background: #1f7a3d;
    box-shadow: 0 4px 14px rgba(31, 122, 61, .35);
}
/* --- Kurallar onay kutusu ---------------------------------------------- */
.axion-theme .axreg__rules{
    margin: 24px 0 0;
    padding: 14px 16px;
    border: 1px solid rgba(210, 215, 220, .10);
    border-radius: 3px;
    background: rgba(255, 255, 255, .02);
}
.axion-theme .axreg__check{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    cursor: pointer;
    user-select: none;
}
.axion-theme .axreg__check input{
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}
.axion-theme .axreg__checkmark{
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: transparent;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(210, 215, 220, .28);
    border-radius: 2px;
    transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.axion-theme .axreg__check input:checked + .axreg__checkmark{
    color: #fff;
    background: #e32635;
    border-color: #e32635;
    box-shadow: 0 0 14px rgba(227, 38, 53, .45);
}
.axion-theme .axreg__check input:focus-visible + .axreg__checkmark{
    box-shadow: 0 0 0 3px rgba(227, 38, 53, .25);
}
.axion-theme .axreg__ruletext{
    font-size: 12.5px;
    line-height: 1.5;
    color: #a7b0ba;
}
.axion-theme .axreg__ruletext b{ color: #fff; }
.axion-theme .axreg__ruletext a{
    color: #fc9162;
    text-decoration: none;
}
.axion-theme .axreg__ruletext a:hover{ text-decoration: underline; }

/* --- Buton ------------------------------------------------------------- */
.axion-theme .axreg__cta{
    display: block;
    width: 100%;
    height: 52px;
    margin: 22px 0 0;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(180deg, #f0384a 0%, #c3121f 100%);
    box-shadow: 0 10px 26px rgba(227, 38, 53, .28);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.axion-theme .axreg__cta:hover{
    transform: translateY(-2px);
    filter: brightness(1.07);
    box-shadow: 0 16px 34px rgba(227, 38, 53, .40);
}
.axion-theme .axreg__cta:active{ transform: translateY(0); }

/* --- Duyarli ----------------------------------------------------------- */
@media (max-width: 900px){
    .axion-theme .axreg__grid{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
    .axion-theme .regBlock.axreg{ padding: 26px 20px 24px; }
    .axion-theme .axreg__title{ font-size: 23px; letter-spacing: 1.6px; }
    .axion-theme .axreg__sub{ font-size: 11.5px; }
}

/* ==========================================================================
   EVENT TIMERS + RANKINGS KARTLARININ YENIDEN TASARIMI (05.10.2026)
   --------------------------------------------------------------------------
   KANIT (canli sayfa olcumu, 1440x900 ve 390x900):
     - Anasayfada `.axion-events-panel` Castle Siege panelinden sonra, en altta
       TAM GENISLIKTE (1150px) tek basina duruyordu. `main.home` cocuklarinin
       olcumu: home-blocks 455 / cta-row 109 / cs-panel 116 / events 463.
     - Panel govdesinde `.events-table` icin HICBIR kural yoktu (grep: 0 eslesme)
       ve `.event-slots` de hic gizlenmiyordu; bu yuzden isim, geri sayim,
       saat ve gun "Devil Square14m 28s23:45Today" olarak ic ice giriyor,
       48 slot saati tek satira dokup yatay kaydirma cubugu cikariyordu
       (olcum: slot satiri 1714-1834px).
     - "+47" dugmesi content.css `button, .button` kuralina takiliyordu
       (147x40 sprite, box-shadow, uppercase). Tarayicida olcum:
       `button, .button => 147px`; buton 40px kolonu tasip "TOMORROW"un
       uzerine biniyordu.
     - Sidebar `.axion-rank-panel` icinde `.tableBlock-content` sabit 365px +
       margin-left:-35px + padding:0 50px tasiyordu; 300px kolonda "Guild"
       sutunu panelin disina kirpiliyordu.

   COZUM: anasayfa `main.home` 2 kolonlu grid; event satirlari 4 kolonlu grid;
   slot saatleri "+N" ile acilip hap halinde sariliyor; rankings satirlari
   akis tabanli grid, ilk uc madalyali, hover'da kirmizi isik.

   ETKI ALANI: yalniz `.axion-events-panel`, `.axion-rank-panel` ve anasayfa
   `main.home` grid'i. Rankings SAYFASI ve mobil bar kurallari degismedi.
   ========================================================================== */

/* --- 1) Anasayfa alt satiri: Castle Siege | Event Timers ----------------- */
@media (min-width: 992px) {
    .axion-theme main.home {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 22px;
        align-items: stretch;
    }

    .axion-theme main.home > .axion-home-blocks,
    .axion-theme main.home > .axion-cta-row {
        grid-column: 1 / -1;
    }

    .axion-theme main.home > .axion-cs-panel {
        grid-column: 1;
        display: flex;
        flex-direction: column;
    }

    .axion-theme main.home > .axion-events-panel {
        grid-column: 2;
    }

    .axion-theme main.home > .axion-cs-panel .axion-panel-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* --- 2) Event Timers basligi -------------------------------------------- */
.axion-theme .axion-events-panel .axion-panel-head {
    padding: 13px 18px;
}

.axion-theme .axion-ev-state {
    gap: 7px;
    padding: 4px 11px 4px 9px;
    border: 1px solid rgba(210, 215, 220, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .035);
    color: rgba(255, 255, 255, .66);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 1.1px;
}

.axion-theme .axion-ev-dot {
    width: 6px;
    height: 6px;
}

/* Canli sunucuda nabiz atar; kapaliyken (last known) durur. */
.axion-theme .axion-ev-state.on .axion-ev-dot {
    animation: axEvPulse 2.4s ease-out infinite;
}

.axion-theme .axion-ev-state.off {
    color: rgba(255, 255, 255, .5);
}

@keyframes axEvPulse {
    0%   { box-shadow: 0 0 0 0 rgba(46, 204, 113, .55); }
    70%  { box-shadow: 0 0 0 7px rgba(46, 204, 113, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

/* --- 3) Event Timers listesi -------------------------------------------- */
.axion-theme .axion-events-panel .axion-panel-body {
    padding: 0;
    max-height: 344px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(227, 38, 53, .5) transparent;
}

.axion-theme .axion-events-panel .axion-panel-body::-webkit-scrollbar {
    width: 8px;
}

.axion-theme .axion-events-panel .axion-panel-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .03);
}

.axion-theme .axion-events-panel .axion-panel-body::-webkit-scrollbar-thumb {
    background: rgba(227, 38, 53, .45);
    border-radius: 8px;
}

.axion-theme .axion-events-panel .axion-panel-body::-webkit-scrollbar-thumb:hover {
    background: rgba(227, 38, 53, .75);
}

.axion-theme .axion-events-panel .events-table {
    margin: 0;
    padding: 0;
    list-style: none;
}

.axion-theme .axion-events-panel .events-table li {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 100px 122px 46px;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-top: 1px solid rgba(210, 215, 220, .08);
    transition: background .22s ease;
}

.axion-theme .axion-events-panel .events-table li:first-child {
    border-top: 0;
}

/* Hover'da sol kenardan kirmizi isik cizgisi. */
.axion-theme .axion-events-panel .events-table li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, #e32635, rgba(227, 38, 53, 0));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .25s ease;
}

.axion-theme .axion-events-panel .events-table li:hover {
    background: rgba(255, 255, 255, .035);
}

.axion-theme .axion-events-panel .events-table li:hover::before {
    transform: scaleY(1);
}

.axion-theme .axion-events-panel .event-name {
    min-width: 0;
    color: #e8ebee;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Geri sayim rozeti; saat ciftleri tabular-nums ile sabit genislikte. */
.axion-theme .axion-events-panel .event-timer {
    justify-self: end;
    min-width: 92px;
    white-space: nowrap;
    padding: 3px 8px;
    border: 1px solid rgba(255, 221, 169, .2);
    border-radius: 4px;
    background: rgba(255, 221, 169, .08);
    color: #ffdda9;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
    box-shadow: none;
    text-shadow: none;
}

.axion-theme .axion-events-panel .event-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    min-width: 0;
}

.axion-theme .axion-events-panel .event-time {
    font-style: normal;
    font-size: 12px;
    color: #9ca3aa;
    font-variant-numeric: tabular-nums;
}

.axion-theme .axion-events-panel .event-day {
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .05);
    color: #8b9299;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
}

/* "+N" dugmesi: content.css `button, .button` kuralini (147x40 sprite,
   box-shadow, uppercase, `color !important`) burada sifirliyoruz. */
.axion-theme .axion-events-panel .event-more {
    justify-self: end;
    width: auto;
    min-width: 42px;
    height: 22px;
    padding: 0 9px;
    border: 1px solid rgba(210, 215, 220, .18);
    border-radius: 4px;
    background: rgba(255, 255, 255, .03);
    background-image: none;
    box-shadow: none;
    text-shadow: none;
    color: #9ca3aa !important;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: none;
    line-height: 1;
    cursor: pointer;
    z-index: auto;
    transition: color .2s, border-color .2s, background .2s, box-shadow .2s;
}

.axion-theme .axion-events-panel .event-more:hover {
    color: #fff !important;
    border-color: rgba(227, 38, 53, .8);
    background: rgba(227, 38, 53, .14);
    box-shadow: 0 0 14px rgba(227, 38, 53, .35);
}

/* Gunun diger saatleri: kapali, "+N" ile acilir. */
.axion-theme .axion-events-panel .event-slots {
    grid-column: 1 / -1;
    display: none;
}

.axion-theme .axion-events-panel .event-slots.open {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
    padding-top: 10px;
    border-top: 1px dashed rgba(210, 215, 220, .14);
}

.axion-theme .axion-events-panel .event-slots i {
    padding: 2px 7px;
    border: 1px solid rgba(210, 215, 220, .1);
    border-radius: 3px;
    background: rgba(255, 255, 255, .04);
    color: #9ca3aa;
    font-size: 11px;
    font-style: normal;
    font-variant-numeric: tabular-nums;
}

/* Mobilde 2x2: isim + geri sayim ustte, saat + dugme altta. */
@media (max-width: 767px) {
    .axion-theme .axion-events-panel .events-table li {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 9px;
        padding: 12px 16px;
    }

    .axion-theme .axion-events-panel .event-name  { grid-column: 1; grid-row: 1; }
    .axion-theme .axion-events-panel .event-timer { grid-column: 2; grid-row: 1; }

    .axion-theme .axion-events-panel .event-meta {
        grid-column: 1;
        grid-row: 2;
        justify-content: flex-start;
    }

    .axion-theme .axion-events-panel .event-more { grid-column: 2; grid-row: 2; }
}

/* --- 4) Rankings sidebar karti ------------------------------------------ */
.axion-theme .axion-rank-panel .axion-panel-body {
    padding: 12px;
}

.axion-theme .axion-rank-panel .tableBlock-title {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) 44px 26px;
    gap: 8px;
    align-items: center;
    height: auto;
    padding: 8px 10px;
    margin-bottom: 8px;
    border: 1px solid rgba(210, 215, 220, .1);
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
    box-shadow: none;
}

.axion-theme .axion-rank-panel .tableBlock-title span {
    color: #6f767d;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.1px;
}

/* content.css yuzdeleri (62/17/21) ve satir ici margin temizleniyor. */
.axion-theme .axion-rank-panel .tableBlock-title_player { width: auto !important; }

.axion-theme .axion-rank-panel .tableBlock-title_level {
    width: auto !important;
    margin: 0 !important;
    text-align: right !important;
}

.axion-theme .axion-rank-panel .tableBlock-title_score {
    width: auto !important;
    text-align: right !important;
}

/* content.css `width:365px; margin-left:-35px; padding:0 50px` yerine
  akis tabanli grid: 300px kolonda sutunlar hizalanir, tasma olmaz. */
.axion-theme .axion-rank-panel .tableBlock-content {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) 44px 26px;
    gap: 8px;
    align-items: center;
    width: auto;
    margin-left: 0;
    padding: 6px 10px;
    height: auto;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent !important;
    background-image: none !important;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.axion-theme .axion-rank-panel .tableBlock-content:hover {
    background-color: rgba(255, 255, 255, .04) !important;
    background-image: linear-gradient(90deg, rgba(227, 38, 53, .16), rgba(227, 38, 53, 0) 65%) !important;
    border-color: rgba(227, 38, 53, .3);
    transform: translateX(2px);
}

.axion-theme .axion-rank-panel .tableBlock-content > div {
    height: auto;
    padding: 0;
}

.axion-theme .axion-rank-panel .tableBlock-conten_number {
    width: auto !important;
    justify-content: center;
    color: #6f767d;
    font-family: 'Cinzel', serif;
    font-size: 11px;
}

/* Ilk uc: madalyali vurgu. */
.axion-theme .axion-rank-panel .tableBlock-content:nth-child(2) .tableBlock-conten_number {
    color: #ffd15c;
    text-shadow: 0 0 12px rgba(255, 209, 92, .55);
}

.axion-theme .axion-rank-panel .tableBlock-content:nth-child(3) .tableBlock-conten_number {
    color: #d8dee5;
    text-shadow: 0 0 12px rgba(216, 222, 229, .4);
}

.axion-theme .axion-rank-panel .tableBlock-content:nth-child(4) .tableBlock-conten_number {
    color: #e0a06a;
    text-shadow: 0 0 12px rgba(224, 160, 106, .4);
}

.axion-theme .axion-rank-panel .tableBlock-conten_name {
    width: auto !important;
    min-width: 0;
}

.axion-theme .axion-rank-panel .tableBlock-conten_name img {
    width: 26px;
    height: 26px;
    margin-right: 9px;
    flex: 0 0 auto;
    box-shadow: 0 0 0 1px rgba(227, 38, 53, .3), 0 4px 10px rgba(0, 0, 0, .55);
    transition: box-shadow .25s ease, transform .25s ease;
}

.axion-theme .axion-rank-panel .tableBlock-content:hover .tableBlock-conten_name img {
    box-shadow: 0 0 0 1px rgba(227, 38, 53, .85), 0 0 14px rgba(227, 38, 53, .45);
    transform: scale(1.07);
}

.axion-theme .axion-rank-panel .tableBlock-conten_name a {
    min-width: 0;
    color: #d9dde2;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .2s ease, text-shadow .2s ease;
}

.axion-theme .axion-rank-panel .tableBlock-content:hover .tableBlock-conten_name a {
    color: #fff;
    text-shadow: 0 0 12px rgba(227, 38, 53, .5);
}

.axion-theme .axion-rank-panel .tableBlock-conten_lvl {
    width: auto !important;
    justify-content: flex-end;
    color: #a97fff;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

.axion-theme .axion-rank-panel .tableBlock-conten_scr {
    width: auto !important;
    justify-content: flex-end;
}

.axion-theme .axion-rank-panel .tableBlock-conten_scr img {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    opacity: .88;
    transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}

.axion-theme .axion-rank-panel .tableBlock-content:hover .tableBlock-conten_scr img {
    transform: scale(1.14);
    opacity: 1;
    box-shadow: 0 0 12px rgba(227, 38, 53, .45);
}
/* ==========================================================================
   EVENT TIMERS POP-UP: SOL KENARA SABIT DOCK (06.10.2026)
   --------------------------------------------------------------------------
   KULLANICI ISTEGI: "Event timers ana sayfanin sol ortalanmis tarafinda
   acilabilir kapanabilir bir sekilde pop up seklinde dursun, uzerine tiklayinca
   acilsin, kapatilmadigi muddetce kapansin."

   COZUM
     1. Kart `main.home` gridinden CIKARILDI; `.axion-ev-dock` sabit (fixed)
        konumda, ekranin sol kenarina yaslanmis ve D IKEY ortalanmis.
     2. Kapaliyken yalnizca 46px'lik dikey bir SEKME gorunur (saat ikonu +
        dikey "EVENT TIMERS" yazisi). Tiklaninca kart sola dayali acilir.
     3. Kapatma YALNIZ X dugmesiyle (veya Escape ile). Disari tiklamak
        KAPATMAZ -> `data-open` sadece bu iki yolla degisir.
     4. Kart 380px genis oldugu icin event satirlari 2'li (isim+geri sayim /
        saat+dugme) duzene gecer; 4 kolon 380px'e sigmazdi.

   ETKI ALANI: yalniz `.axion-ev-dock`, `.axion-ev-tab`, `.axion-ev-close`
   ve anasayfa `main.home` grid'i. Footer'daki `#timers` modalinin
   `#events-modal` markup'i dokunulmadi.
   ========================================================================== */

/* --- 5a) Anasayfa gridi: Event Timers akistan ciktigi icin ikinci kolon
       bos kalmasin diye Castle Siege tam genislige alindi. --------------- */
@media (min-width: 992px) {
    .axion-theme main.home {
        grid-template-columns: minmax(0, 1fr);
    }

    .axion-theme main.home > .axion-cs-panel {
        grid-column: 1 / -1;
    }
}

/* --- 5b) Dock kabi: sol kenara yasli, dikey ortali ------------------- */
.axion-theme .axion-ev-dock {
    position: fixed;
    left: 0;
    top: 50%;
    /* 9400: tema ust barinin (9000) ustunde, modal/overlay'in (100050+)
       altinda. Modal acilirken dock panelin altinda kalir. */
    z-index: 9400;
    display: flex;
    align-items: center;
    transform: translateY(-50%);
    pointer-events: none;
    font-family: 'Inter', sans-serif;
}

.axion-theme .axion-ev-tab,
.axion-theme .axion-ev-dock .axion-events-panel {
    pointer-events: auto;
}

/* content.css `button, .button` 147x40 sprite kuralini sifirliyoruz. */
.axion-theme .axion-ev-tab,
.axion-theme .axion-ev-close {
    width: auto;
    height: auto;
    padding: 0;
    background-color: transparent;
    background-image: none;
    background-repeat: no-repeat;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-shadow: none;
    color: #d7dbe0;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* --- 5c) Kapali durum: dikey sekme ---------------------------------- */
.axion-theme .axion-ev-tab {
    /* Sekme akistan CIKARILIR: panel her zaman sola dayali (x=0) kalsin,
       kapaliyken de sekmenin genisligi paneli itmesin. */
    position: absolute;
    left: 0;
    top: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 46px;
    padding: 18px 0 20px;
    border: 1px solid rgba(210, 215, 220, .14);
    border-left: 0;
    border-radius: 0 10px 10px 0;
    background: linear-gradient(180deg, rgba(24, 26, 32, .97), rgba(13, 14, 18, .97));
    box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
    transform: translateY(-50%);
    transition: transform .3s cubic-bezier(.22, .9, .28, 1),
                border-color .3s ease, box-shadow .3s ease, opacity .25s ease;
}

.axion-theme .axion-ev-tab-ico {
    color: #e32635;
    font-size: 15px;
    filter: drop-shadow(0 0 8px rgba(227, 38, 53, .65));
    transition: color .25s ease, filter .25s ease, transform .25s ease;
}

.axion-theme .axion-ev-tab-txt {
    writing-mode: vertical-rl;
    color: #c9ced4;
    font-family: 'Cinzel', serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    white-space: nowrap;
}

.axion-theme .axion-ev-tab:hover {
    transform: translateY(-50%) translateX(5px);
    border-color: rgba(227, 38, 53, .55);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .6), 0 0 24px rgba(227, 38, 53, .32);
}

.axion-theme .axion-ev-tab:hover .axion-ev-tab-ico {
    transform: scale(1.12);
}

.axion-theme .axion-ev-tab:hover .axion-ev-tab-txt {
    color: #fff;
}

/* Panel acilinca sekme sola kaybolur. Eskiden translateY(-50%) de vardi
   (5c tek-sekme donemi); 5j statik akista Y bileseni gereksizdi ve dikey
   dizilimde (06.10.2026) iki sekme arasinda 17px BOSLUK yaratiyordu — kaldirildi. */
.axion-theme .axion-ev-dock[data-open="1"] .axion-ev-tab {
    opacity: 0;
    transform: translateX(-130%);
    pointer-events: none;
}

/* --- 5d) Acik durum: panel sola dayali kayar ------------------------- */
.axion-theme .axion-ev-dock .axion-events-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(380px, calc(100vw - 24px));
    max-height: min(72vh, 560px);
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-30px);
    border-color: rgba(227, 38, 53, .28);
    background: linear-gradient(180deg, rgba(21, 23, 29, .99), rgba(11, 12, 16, .99));
    box-shadow: 0 26px 70px rgba(0, 0, 0, .72), 0 0 0 1px rgba(227, 38, 53, .22);
    transition: opacity .3s ease, transform .38s cubic-bezier(.22, .9, .28, 1), visibility .38s ease;
}

.axion-theme .axion-ev-dock[data-open="1"] .axion-events-panel {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.axion-theme .axion-ev-dock .axion-events-panel .axion-panel-head {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 12px 13px 12px 16px;
    border-bottom-color: rgba(210, 215, 220, .12);
}

/* Rozet baslikla X arasinda kalir. */
.axion-theme .axion-ev-dock .axion-events-panel .axion-ev-state {
    margin-left: auto;
    flex: 0 0 auto;
    font-family: 'Inter', sans-serif;
}

/* Govde: panelin icinde esner, liste kendi icinde kayar. */
.axion-theme .axion-ev-dock .axion-events-panel .axion-panel-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}

/* --- 5e) Kapatma dugmesi -------------------------------------------- */
.axion-theme .axion-ev-dock .axion-ev-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border: 1px solid rgba(210, 215, 220, .16);
    border-radius: 7px;
    color: #9aa1a8;
    font-size: 13px;
    background-color: rgba(255, 255, 255, .03);
    transition: color .2s ease, border-color .2s ease, background-color .2s ease,
                box-shadow .2s ease, transform .25s ease;
}

.axion-theme .axion-ev-dock .axion-ev-close:hover {
    color: #fff;
    border-color: rgba(227, 38, 53, .85);
    background-color: rgba(227, 38, 53, .2);
    box-shadow: 0 0 14px rgba(227, 38, 53, .45);
    transform: rotate(90deg);
}

.axion-theme .axion-ev-dock .axion-ev-close:focus-visible,
.axion-theme .axion-ev-dock .axion-ev-tab:focus-visible {
    outline: 2px solid rgba(227, 38, 53, .9);
    outline-offset: 2px;
}

/* --- 5f) Satirlar 380px'e sigmaz: 2'li duzen (isim + geri sayim ustte,
       saat + "+N" altta). Mobil kurallarla ayni mantik. ----------------- */
.axion-theme .axion-ev-dock .axion-events-panel .events-table li {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 8px;
    column-gap: 12px;
    padding: 11px 15px;
}

.axion-theme .axion-ev-dock .axion-events-panel .event-name {
    grid-column: 1;
    grid-row: 1;
}

.axion-theme .axion-ev-dock .axion-events-panel .event-timer {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    min-width: 84px;
}

.axion-theme .axion-ev-dock .axion-events-panel .event-meta {
    grid-column: 1;
    grid-row: 2;
    justify-content: flex-start;
}

.axion-theme .axion-ev-dock .axion-events-panel .event-more {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
}

.axion-theme .axion-ev-dock .axion-events-panel .event-slots {
    grid-column: 1 / -1;
}

/* Bos kutu hali */
.axion-theme .axion-ev-dock .axion-events-panel .axion-ev-empty {
    margin: 0;
    padding: 22px 16px;
    color: #8b9299;
    font-size: 13px;
    text-align: center;
}

/* --- 5g) Mobil: sekme incelir, panel ekrana sigar ------------------ */
@media (max-width: 767px) {
    .axion-theme .axion-ev-dock .axion-events-panel {
        width: min(360px, calc(100vw - 20px));
        max-height: min(76vh, 520px);
    }

    .axion-theme .axion-ev-tab {
        width: 40px;
        padding: 14px 0 16px;
    }

    .axion-theme .axion-ev-tab-txt {
        font-size: 11px;
        letter-spacing: 2.2px;
    }
}

/* --- 5h) Hareket duyarliligi: gecisleri kapat, durum degismez ------ */
@media (prefers-reduced-motion: reduce) {
    .axion-theme .axion-ev-tab,
    .axion-theme .axion-ev-dock .axion-events-panel,
    .axion-theme .axion-ev-dock .axion-ev-close {
        transition: none !important;
    }
}
/* --- 5i) Mini bildirim rozeti + "yaklasiyor" uyarisi (06.10.2026) -------
   Sekmenin ustunde kalan sureyi gosteren kucuk bir rozet. Sure 5 dakikanin
   altina dusunce sekme kirmiziya doner ve hafifce titrer (1.6 sn dongu,
   3px genlik). `data-alert="1"` dock uzerinde tutulur.
   -------------------------------------------------------------------- */

/* Rozet eklendigi icin sekmede 3 cocuk var; bosluk biraz kisaldi. */
.axion-theme .axion-ev-dock .axion-ev-tab {
    gap: 10px;
}

.axion-theme .axion-ev-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Sekme mobilde 40px; rozet tasmasin diye sert ust sinir + kirma. */
    min-width: 28px;
    max-width: 100%;
    overflow: hidden;
    padding: 2px 4px;
    border: 1px solid rgba(210, 215, 220, .2);
    border-radius: 4px;
    background: rgba(255, 255, 255, .07);
    color: #ffdda9;
    font-family: 'Inter', sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .3px;
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: none;
    text-shadow: none;
    transition: color .25s ease, border-color .25s ease, background-color .25s ease,
                box-shadow .25s ease;
}

/* Veri yoksa (event listesi bos / App yuklenmedi) rozet gorunmez. */
.axion-theme .axion-ev-next:empty {
    display: none;
}

.axion-theme .axion-ev-tab:hover .axion-ev-next {
    color: #fff;
    border-color: rgba(227, 38, 53, .5);
    background: rgba(227, 38, 53, .18);
}

/* --- UYARI: 5 dakikadan az kaldi ------------------------------------- */
.axion-theme .axion-ev-dock[data-alert="1"] .axion-ev-tab {
    border-color: rgba(227, 38, 53, .8);
    background: linear-gradient(180deg, rgba(48, 14, 19, .98), rgba(20, 8, 11, .98));
    box-shadow: 0 14px 34px rgba(0, 0, 0, .55),
                0 0 0 1px rgba(227, 38, 53, .6),
                0 0 26px rgba(227, 38, 53, .5);
    animation: axEvShake 1.6s ease-in-out infinite;
}

/* Titreşim transform'u ele alir; hover kaymasini da icermeli. */
@keyframes axEvShake {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    25%      { transform: translateY(-50%) translateX(-3px); }
    75%      { transform: translateY(-50%) translateX(3px); }
}

.axion-theme .axion-ev-dock[data-alert="1"] .axion-ev-next {
    color: #fff;
    border-color: rgba(227, 38, 53, .95);
    background: rgba(227, 38, 53, .9);
    box-shadow: 0 0 14px rgba(227, 38, 53, .6);
}

.axion-theme .axion-ev-dock[data-alert="1"] .axion-ev-tab-ico {
    color: #ff5560;
}

/* Panel acikken sekme zaten gizli; titremenin gecisi bozmamasi icin dur. */
.axion-theme .axion-ev-dock[data-open="1"] .axion-ev-tab {
    animation: none;
}/* --- 5j) Castle Siege da dock'a tasindi (06.10.2026) -------------------
   Kullanici istegi: Castle Siege paneli de Event Timers gibi acilir-kapanir
   pop-up dockta dursun. Dock artik IKI sekme + IKI panel tasir:
     - `data-open`  : 0/1 (dock acik mi)  -> iki panel ORTAK kullanir
     - `data-view`  : 'events' | 'cs'     -> hangi panel gorunur
   Yalniz bir panel ayni anda acik; sekmeye tiklama acik paneldeyken digerine
   GECIS yapar (kapatmaz), kendi panelindeyken kapatir.

   YERLESIM: iki sekme `.axion-ev-tabs` sarmalayicinda UST USTE (dikey,
   statik; 06.10.2026 guncelleme: "yan yana degil ust uste dursun");
   iki panel de dock icinde MUTLUK konumda (left:0, top:50%) ust uste
   biner -> panel acikken digeri yer kaplamaz, x=0 sola dayali kalir.
   -------------------------------------------------------------------- */

/* Sekme cifti: UST USTE dikey akis; kapaliyken ikisi de gorunur. */
.axion-theme .axion-ev-dock .axion-ev-tabs {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 5c sekmeyi absolute+translateY ile ortaliyordu; cift sekmede statik
   akis kullanilir (dock zaten align-items:center ile dikey ortalar). */
.axion-theme .axion-ev-dock .axion-ev-tab {
    position: static;
    top: auto;
    transform: none;
}

/* Dikey dizilimde ustteki sekme (Event Timers): sol kenar ekran
   kenarina yasli kalsin (taban kuralda border-left:0), yalniz sag-ust
   kose yuvarlak; iki sekme arasinda cift cizgi kalmasin. */
.axion-theme .axion-ev-dock .axion-ev-tabs .axion-ev-tab:first-child {
    border-radius: 0 10px 0 0;
    border-bottom: 0;
}

/* Alttaki sekme (Castle Siege): sag-alt kose yuvarlak, ust siniri yok. */
.axion-theme .axion-ev-dock .axion-ev-tabs .axion-ev-tab:last-child {
    border-radius: 0 0 10px 0;
    border-top: 0;
}

/* 5c hover'i translateY(-50%) ile kaydiriyordu; statik sekmede Y yok. */
.axion-theme .axion-ev-dock .axion-ev-tab:hover {
    transform: translateX(5px);
}

/* Uyari titremesi: ayni nedenle Y bileseni kaldirilir (ayni isimle
   yeniden tanimlanir; son tanim kazanir). */
@keyframes axEvShake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-3px); }
    75%      { transform: translateX(3px); }
}

/* CS sekmesi: ayni sekme dili; ayirt edici parlak kale ikonu. */
.axion-theme .axion-ev-dock .axion-cs-tab .axion-ev-tab-ico {
    filter: drop-shadow(0 0 8px rgba(227, 38, 53, .8));
}

/* --- Paneller ust uste: ikisi de sola dayali, ayni yerde acilir ------- */
.axion-theme .axion-ev-dock .axion-events-panel,
.axion-theme .axion-ev-dock .axion-cs-panel {
    position: absolute;
    left: 0;
    top: 50%;
}

/* Kapali taban durumu: 5d'in translateX'ine Y eklenir. */
.axion-theme .axion-ev-dock .axion-events-panel {
    transform: translateY(-50%) translateX(-30px);
}

/* Acik events (view=events) */
.axion-theme .axion-ev-dock[data-open="1"][data-view="events"] .axion-events-panel {
    transform: translateY(-50%);
}

/* view=cs iken events paneli tamamen gizli + disari kaydirili. */
.axion-theme .axion-ev-dock[data-view="cs"] .axion-events-panel {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%) translateX(-30px);
}

/* --- CS paneli: Event Timers panelinin bicim kopyasi ------------------ */
.axion-theme .axion-ev-dock .axion-cs-panel {
    display: flex;
    flex-direction: column;
    pointer-events: auto;
    width: min(380px, calc(100vw - 24px));
    max-height: min(72vh, 560px);
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%) translateX(-30px);
    border-color: rgba(227, 38, 53, .28);
    background: linear-gradient(180deg, rgba(21, 23, 29, .99), rgba(11, 12, 16, .99));
    box-shadow: 0 26px 70px rgba(0, 0, 0, .72), 0 0 0 1px rgba(227, 38, 53, .22);
    transition: opacity .3s ease, transform .38s cubic-bezier(.22, .9, .28, 1), visibility .38s ease;
}

.axion-theme .axion-ev-dock[data-open="1"][data-view="cs"] .axion-cs-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%);
}

.axion-theme .axion-ev-dock .axion-cs-panel .axion-panel-head {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 12px 13px 12px 16px;
    border-bottom-color: rgba(210, 215, 220, .12);
}

.axion-theme .axion-ev-dock .axion-cs-panel .axion-panel-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    padding: 14px 16px 16px;
}

/* --- Baslik sekmeleri: Owner / Info ----------------------------------- */
.axion-theme .axion-ev-dock .axion-cs-panel .tabTable {
    display: flex;
    align-items: center;
    margin: 0;
    margin-left: auto;
    flex: 0 0 auto;
}

.axion-theme .axion-ev-dock .axion-cs-panel .tab-button {
    margin: 0 5px;
    color: #aeb5bd !important;
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.axion-theme .axion-ev-dock .axion-cs-panel .tab-button:hover {
    color: #fff !important;
}

.axion-theme .axion-ev-dock .axion-cs-panel .tab-button.active {
    color: #fff !important;
}

/* Alt cizgi: basliga yakin, kirmizi, hafif parilti. */
.axion-theme .axion-ev-dock .axion-cs-panel .tab-button:after {
    bottom: -4px;
    height: 2px;
    background: #e32635;
    box-shadow: 0 0 8px rgba(227, 38, 53, .7);
}

/* --- Icerik dili ------------------------------------------------------- */
.axion-theme .axion-ev-dock .axion-cs-panel .axion-panel-body h3 {
    margin: 0 0 12px;
    color: #e8eaee;
    font-family: 'Cinzel', serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.axion-theme .axion-ev-dock .axion-cs-panel table {
    width: 100%;
    border-collapse: collapse;
    color: #cfd4da;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    line-height: 1.65;
}

.axion-theme .axion-ev-dock .axion-cs-panel table td {
    vertical-align: middle;
}

.axion-theme .axion-ev-dock .axion-cs-panel table img {
    display: block;
    border-radius: 6px;
}

.axion-theme .axion-ev-dock .axion-cs-panel table span {
    color: #9aa1a8;
}

.axion-theme .axion-ev-dock .axion-cs-panel ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.axion-theme .axion-ev-dock .axion-cs-panel ul li {
    padding: 7px 10px;
    border-left: 2px solid rgba(227, 38, 53, .45);
    background: rgba(255, 255, 255, .03);
    color: #d7dbe0;
    font-size: 12.5px;
    margin-bottom: 6px;
    border-radius: 0 5px 5px 0;
}

.axion-theme .axion-ev-dock .axion-cs-panel .axion-cs-note {
    margin: 14px 0 0;
    color: #9aa1a8;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
}

.axion-theme .axion-ev-dock .axion-cs-panel .axion-cs-note span {
    color: #ffd15c;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* --- Mobil: panel 360px'e iner (Event Timers ile ayni) ----------------- */
@media (max-width: 767px) {
    .axion-theme .axion-ev-dock .axion-cs-panel {
        width: min(360px, calc(100vw - 20px));
        max-height: min(76vh, 520px);
    }

    .axion-theme .axion-ev-dock .axion-ev-tab {
        width: 40px;
        padding: 14px 0 16px;
    }
}

/* --- Hareket duyarliligi ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .axion-theme .axion-ev-dock .axion-cs-panel {
        transition: none !important;
    }
}
/* --- 5k) Dock, hero'nun USTUNE cizilir + paneller tam opak (06.10.2026) --
   KULLANICI ISTEGI: "Castle Siege ve Event Timer altta eziliyor ve
   transparent oldugu icin okunusta sorun oluyor."

   TESHIS (canli olcum):
   1) DmN CMS'in taban content.css'i `main { position:relative; z-index:4 }`
      yazar. Ana sayfada `main.home` bu yuzden bir STACKING CONTEXT kuruyor;
      dock (z-index:9400) bu contextin icinde hapsolup etkin olarak 4'e
      dusuyor. Hero basligi ise kok (root) katmaninda `z-index:20` ile
      (.hero-copy) cizildigi icin panelin USTUNE biniyordu.
      Kanit: elementsFromPoint panel uzerinde h1>strong donuyor.
   2) Panel/sekme arka planlari rgba(...,.99)/rgba(...,.97) yari saydamdi;
      hero yazisi arkasindan sizip okunabilirligi bozuyordu.

   COZUM:
   a) Ana sayfadaki main stacking context kurmasin: `z-index:auto` ile
      dock gercek 9400 degeriyle KOK katmanina cikar (hero z:20'yi gecer,
      topbar 9000... dock 9400 zaten topbarin ustunde tasarim edildi,
      modal 100050'nin altinda kalir). Ic sayfalar etkilenmez:
      kural `main.home`a ozel.
   b) Sekme + iki panel arka plani TAM OPAK hale getirilir (ayni renkler,
      alfa 1). */

.axion-theme main.home {
    z-index: auto;
}

.axion-theme .axion-ev-tab {
    background: linear-gradient(180deg, #181a20, #0d0e12);
}

/* Uyari (data-alert=1) kirmizi gradyani da opak: 5f kurali ayni ozellikle
   geliyor; bu bolum dosyanin sonunda oldugu icen kazanir. */
.axion-theme .axion-ev-dock[data-alert="1"] .axion-ev-tab {
    background: linear-gradient(180deg, #300e13, #14080b);
}

.axion-theme .axion-ev-dock .axion-events-panel,
.axion-theme .axion-ev-dock .axion-cs-panel {
    background: linear-gradient(180deg, #15171d, #0b0c10);
}