/* =========================================================
   AXION MU — DmN CMS kabuk skin'i (bileşen katmanı)
   =========================================================
   Katman sırası (view.header.php'de bu sırayla yüklenir):
     dmn.css           DmN CMS çekirdek bileşenler
     content.css       içerik view'larının kullandığı sınıflar
     axion-landing.css WebEngine axionmu tasarımı (hero, karakterler, popup'lar)
     override.css      WebEngine modül işaretlemesi → Axion (aynı sınıflar)
     axion.css         ← bu dosya: DmN CMS'e özel kabuk + renk geçişi

   Kural: düzen (genişlik/padding/margin) content.css'te kalır; burada yalnızca
   renk, tipografi, zemin ve kenarlık değiştirilir. Aks halde 120 içerik
   view'ının tablo/form düzeni bozulur.
   ========================================================= */

body.axion-theme {
    background: #050607;
    color: #d9dde2;
    font-family: 'Inter', sans-serif;
}

body.axion-theme:before,
body.axion-theme:after {
    content: "";
    position: fixed;
    pointer-events: none;
    z-index: -5;
}

body.axion-theme:before {
    width: 600px;
    height: 600px;
    left: -350px;
    top: 20%;
    background: radial-gradient(circle, rgba(180, 15, 30, .15), transparent 68%);
}

body.axion-theme:after {
    width: 650px;
    height: 650px;
    right: -400px;
    bottom: 5%;
    background: radial-gradient(circle, rgba(170, 180, 190, .07), transparent 68%);
}

body.axion-theme a {
    color: #d9dde2;
}

body.axion-theme a:hover {
    color: #fff;
}

/* ------------------------------------------------------------
   KABUK KONTEYNER
   content.css'teki .wrapper ile aynı ölçü; .axion-shell header'da
   açılıp view.right_sidebar.php'de kapanır.
------------------------------------------------------------ */
.axion-shell,
.wrapper {
    width: 1200px;
    max-width: 100%;
    padding: 0 25px;
    margin: 0 auto;
    position: relative;
}

.axion-shell {
    padding-top: 30px;
    padding-bottom: 30px;
}

@media (max-width: 1249px) {
    .axion-shell,
    .wrapper {
        width: 100%;
    }
}

/* ------------------------------------------------------------
   SAYFA BAŞLIĞI
------------------------------------------------------------ */
.axion-theme .h2-title {
    align-items: flex-end;
    margin-bottom: 22px;
}

.axion-theme .h2-title span {
    color: #e8ebee;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 19px;
    letter-spacing: 1.5px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .8);
}

.axion-theme .h2-title span:before {
    filter: drop-shadow(0 0 8px rgba(227, 38, 53, .75));
}

.axion-theme .h2-title a {
    color: #9ca3aa;
}

.axion-theme .h2-title a:hover {
    color: #fff;
}

/* ------------------------------------------------------------
   İÇERİK KARTI
   #box1 dmn.css'te boş; tüm içerik view'ları sarmalayıcı olarak kullanır.
------------------------------------------------------------ */
.axion-theme #box1 {
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
    border: 1px solid rgba(210, 215, 220, .13);
    border-radius: 4px;
    padding: 24px 26px;
    margin-bottom: 24px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}

.axion-theme .content {
    color: #d9dde2;
}

/* ------------------------------------------------------------
   HABER LİSTESİ (anasayfa)
------------------------------------------------------------ */
.axion-home-blocks {
    width: 100%;
}

.axion-news-block {
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
    border: 1px solid rgba(210, 215, 220, .13);
    border-radius: 4px;
    padding: 22px 26px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}

.axion-theme .newsLink {
    border-bottom: 1px solid rgba(210, 215, 220, .09);
    transition: background .25s;
}

.axion-theme .newsLink:last-child {
    border-bottom: 0;
}

.axion-theme .newsLink:hover {
    background: rgba(255, 255, 255, .035);
}

.axion-theme .newsLink-info a {
    color: #e8ebee;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

.axion-theme .newsLink-info a:hover {
    color: #fff;
}

.axion-theme .newsLink-info span {
    color: #6f767d;
}

.axion-theme .newsLink-more {
    color: #9ca3aa;
}

.axion-theme .newsLink-more:hover {
    color: #e32635;
}

.axion-empty {
    color: #6f767d;
    font-size: 13px;
    padding: 10px 0;
    margin: 0;
}

/* ------------------------------------------------------------
   SIDEBAR PANELLERİ
------------------------------------------------------------ */
.axion-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
    border: 1px solid rgba(210, 215, 220, .13);
    border-radius: 4px;
    margin-bottom: 22px;
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .4);
}

.axion-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(210, 215, 220, .13);
    background: rgba(255, 255, 255, .025);
}

.axion-panel-head > span {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.axion-theme .colorfull {
    color: #e32635;
    text-shadow: 0 0 14px rgba(227, 38, 53, .5);
}

.axion-panel-body {
    padding: 18px 20px;
}

.axion-cs-note {
    color: #e32635;
    font-size: 12px;
    font-style: italic;
    margin-top: 10px;
}

/* CTA şeridi (anasayfa) */
.axion-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 0 0 24px;
}

.axion-cta {
    flex: 1 1 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 22px 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
    border: 1px solid rgba(210, 215, 220, .13);
    border-radius: 4px;
    text-decoration: none;
    transition: border-color .25s, transform .25s, background .25s;
}

.axion-cta:hover {
    border-color: rgba(227, 38, 53, .55);
    background: rgba(227, 38, 53, .07);
    transform: translateY(-3px);
}

.axion-cta i {
    font-size: 22px;
    color: #e32635;
    margin-bottom: 4px;
}

.axion-cta strong {
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #e8ebee;
}

.axion-cta span {
    font-size: 11px;
    color: #7d848b;
    line-height: 1.5;
}

/* ------------------------------------------------------------
   KAYIT KARTI (JOIN NOW JPG yerine)
   Hazir gorsel WebEngine temasindan kaldi; renk paleti, kenarlik
   olcusu ve tipografisi bu panelin diger parcalariyla uyusmuyordu.
   Ayni cagri (registration linki) artik tema diliyle, tek bir
   kompakt kart olarak uretiliyor.
------------------------------------------------------------ */
.axion-join-card {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 22px;
    padding: 16px 18px;

    text-decoration: none;

    background:
        linear-gradient(135deg, rgba(227, 38, 53, .16), rgba(227, 38, 53, .04) 62%, rgba(255, 255, 255, .015)),
        linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));

    border: 1px solid rgba(227, 38, 53, .42);
    border-radius: 5px;

    box-shadow: 0 12px 34px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05);

    position: relative;
    overflow: hidden;

    /* Parlama pseudo-element'i kendi katmaninda kalsin, kartin kendi
       gradient zeminine tasmasin. */
    isolation: isolate;

    transition: border-color .25s, box-shadow .25s, transform .25s;
}

/* Sol kenarda tema aksaninin parlak dikey cizgisi.
   z-index:2 -> parlama (:after, z-index:0 varsayilan) altinda kalir. */
.axion-join-card:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 3px;
    background: linear-gradient(180deg, #e32635, rgba(227, 38, 53, .15));
    transition: background .25s, box-shadow .25s;
}

.axion-join-card:hover {
    border-color: rgba(227, 38, 53, .85);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .55), 0 0 28px rgba(227, 38, 53, .28);
    transform: translateY(-2px);
    color: #fff;
}

/* Sol vurgu cubugu hover'da tam kirmizi ve parlak olur. */
.axion-join-card:hover:before {
    background: linear-gradient(180deg, #ff4657, rgba(227, 38, 53, .45));
    box-shadow: 0 0 14px rgba(227, 38, 53, .8);
}

/* Hover katmani — ortak altyapi
   Uc efekt birlikte calisiyor:
     1) ::after  imlecin uzerinden gecen parlama (shine sweep)
     2) ::before altta ortadan acilan vurgu cubugu (link kartlari)
     3) kutu gölge + kenar rengi + transform
   Pseudo-element'ler icerik karti EN USTUNDE dursun diye z-index
   verildi; metin ve ikon altta kalir. */
.axion-join-card:after,
.axion-link-card:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 42%;

    background: linear-gradient(100deg,
            transparent,
            rgba(255, 255, 255, .07) 35%,
            rgba(255, 255, 255, .15) 50%,
            rgba(255, 255, 255, .07) 65%,
            transparent);

    opacity: 0;
    pointer-events: none;

    /* soluk dururken kartin uzerinde gorunmez; translate ile soldan
       saga bir tur atar, sonra opacity ile belirir. */
    transform: translateX(-140%) skewX(-18deg);

    transition: transform .65s cubic-bezier(.22, .61, .36, 1), opacity .25s;
}

.axion-join-card:hover:after,
.axion-link-card:hover:after,
.axion-join-card:focus-visible:after,
.axion-link-card:focus-visible:after {
    opacity: 1;
    transform: translateX(340%) skewX(-18deg);
}

/* Klavye ile gezinenler icin gorunur odak halkasi (fare ile
   tıklamada gorunmez, :hover ile karismaz). */
.axion-join-card:focus-visible,
.axion-link-card:focus-visible {
    outline: 2px solid rgba(227, 38, 53, .8);
    outline-offset: 2px;
}

/* Tiskinin kendi hover kurallari ayni seyi yapsin diye
   :focus-visible da :hover ile ayni gorsel duruma baglanir. */
.axion-join-card:focus-visible,
.axion-link-card:focus-visible {
    border-color: rgba(227, 38, 53, .85);
    transform: translateY(-2px);
}

.axion-join-card:active,
.axion-link-card:active {
    transform: translateY(0);
    transition-duration: .06s;
}

/* Hareket duyarliligi olan kullanici icin efektler kapali. */
@media (prefers-reduced-motion: reduce) {
    .axion-join-card,
    .axion-link-card,
    .axion-join-card:after,
    .axion-link-card:after,
    .axion-join-ico,
    .axion-link-ico,
    .axion-link-ico i,
    .axion-join-ico i,
    .axion-join-go {
        transition: none;
    }

    /* Ikon animasyonlari: hepsi animasyon-adi tasiyan kurallar; tek
       liste halinde sifirlanir. */
    .axion-join-card:hover .axion-join-ico i,
    .axion-join-card:focus-visible .axion-join-ico i,
    .axion-link-card:hover .axion-link-ico i,
    .axion-link-card:focus-visible .axion-link-ico i {
        animation: none !important;
    }

    .axion-join-card:hover,
    .axion-link-card:hover,
    .axion-join-card:focus-visible,
    .axion-link-card:focus-visible {
        transform: none;
    }

    .axion-join-card:hover:after,
    .axion-link-card:hover:after,
    .axion-join-card:focus-visible:after,
    .axion-link-card:focus-visible:after {
        transform: none;
    }
}

.axion-join-ico {
    flex: 0 0 auto;
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    color: #e32635;
    font-size: 17px;

    background: rgba(227, 38, 53, .12);
    border: 1px solid rgba(227, 38, 53, .34);
    border-radius: 50%;

    transition: background .25s, color .25s, border-color .25s, transform .25s, box-shadow .25s;
}

.axion-join-card:hover .axion-join-ico {
    background: #e32635;
    border-color: #e32635;
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 0 18px rgba(227, 38, 53, .7);
}

.axion-join-txt {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.axion-join-txt strong {
    color: #fff;
    font-family: 'Cinzel', serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.axion-join-txt em {
    color: #8b9299;
    font-size: 11px;
    font-style: normal;
    line-height: 1.45;
}

.axion-join-go {
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
    margin-left: auto;

    color: #e32635;
    font-size: 11px;

    transition: transform .25s, color .25s;
}

.axion-join-card:hover .axion-join-go {
    transform: translateX(3px);
    color: #fff;
}

/* ------------------------------------------------------------
   QUICK LINKS — ikonlu kart izgarasi
   Onceki duz ayiracli liste (11 satir, ince cetvel) panelin
   govdesini oldugundan uzuyor ve WebEngine kalintisi gibi
   duruyordu. Ayni 11 hedef, 300px kolona sigacak sekilde
   2'li kart izgarasinda: ikon rozeti ustte, etiket altta.
------------------------------------------------------------ */
.axion-links-panel .axion-panel-body {
    padding: 16px;
}

.axion-link-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;

    list-style: none;
    margin: 0;
    padding: 0;
}

.axion-link-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;

    height: 100%;
    padding: 14px 8px 13px;

    text-align: center;
    text-decoration: none;

    background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
    border: 1px solid rgba(210, 215, 220, .12);
    border-radius: 4px;

    position: relative;
    overflow: hidden;

    /* Konumlanan cocuklar (parlama) metnin ALTINDA kalsin diye
       ikon, etiket ve yeni vurgu cubugu z-index ile yukseltilir. */
    isolation: isolate;

    transition: border-color .22s, background .22s, transform .22s, box-shadow .22s;
}

/* Altta ortadan acilan kirmizi vurgu cubugu. Sifir genislikte baslar,
   hover'da karta tam oturur. */
.axion-link-card:before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 1;

    width: 0;
    height: 2px;

    background: linear-gradient(90deg, rgba(227, 38, 53, 0), #e32635, rgba(227, 38, 53, 0));

    transform: translateX(-50%);

    transition: width .3s cubic-bezier(.22, .61, .36, 1);
}

.axion-link-card:hover:before,
.axion-link-card:focus-visible:before {
    width: 100%;
}

.axion-link-card:hover {
    transform: translateY(-3px);

    border-color: rgba(227, 38, 53, .55);
    background: linear-gradient(180deg, rgba(227, 38, 53, .14), rgba(227, 38, 53, .02));
    box-shadow: 0 14px 28px rgba(0, 0, 0, .5), 0 0 20px rgba(227, 38, 53, .18);

    color: #fff;
}

.axion-link-ico {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    color: #e32635;
    font-size: 14px;

    background: rgba(227, 38, 53, .10);
    border: 1px solid rgba(227, 38, 53, .22);
    border-radius: 3px;

    transition: background .22s, color .22s, border-color .22s,
                transform .22s, box-shadow .22s;
}

.axion-link-card:hover .axion-link-ico,
.axion-link-card:focus-visible .axion-link-ico {
    background: #e32635;
    border-color: #e32635;
    color: #fff;
    transform: scale(1.1) translateY(-1px);
    box-shadow: 0 0 16px rgba(227, 38, 53, .6);
}

.axion-link-name {
    position: relative;
    z-index: 1;

    color: #b6bcc3;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: .3px;

    transition: color .22s, text-shadow .22s;
}

.axion-link-card:hover .axion-link-name,
.axion-link-card:focus-visible .axion-link-name {
    color: #fff;
    text-shadow: 0 0 12px rgba(227, 38, 53, .65);
}

/* ------------------------------------------------------------
   CANLI IKONLAR
   ------------------------------------------------------------
   Her hedefin ikonu kendi anlamina uygun tek bir "flash" animasyonu
   oynatir: indirirken okunur sekilde asagi ziplar, kitap sayfa
   cevirir, hediye sallanir, yildiz doner, terazi salinir vb.
   Animasyon YALNIZCA hover / :focus-visible aninda bir kez oynar,
   sonra baslangic durumuna doner (forwards yok) — boylece panel
   dinlenmis kalir, surekli "uclar" olmaz.

   Teknik not: ikon rozeti (.axion-link-ico) hover'da scale aliyor;
   animasyon ise icteki <i> uzerinde. Bu sayede transform cakismasi
   olmuyor ve rozetle ikonun hareketi bagimsiz katmanlaniyor. */
.axion-link-card .axion-link-ico i {
    display: inline-block;
    will-change: transform;
}

/* --- Kayit rozeti: kullanici+ isareti, kucuk bir "pop" --- */
.axion-join-card:hover .axion-join-ico i,
.axion-join-card:focus-visible .axion-join-ico i {
    animation: ax-pop .55s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes ax-pop {
    0%   { transform: scale(1) rotate(0); }
    40%  { transform: scale(1.35) rotate(-8deg); }
    70%  { transform: scale(.92) rotate(4deg); }
    100% { transform: scale(1) rotate(0); }
}

/* --- Downloads: asagi ziplayip geri gelir (ok yonu) --- */
.axion-link-card:hover .axion-link-ico .fa-download,
.axion-link-card:focus-visible .axion-link-ico .fa-download {
    animation: ax-drop .6s cubic-bezier(.3, .9, .4, 1);
}

@keyframes ax-drop {
    0%   { transform: translateY(0); }
    35%  { transform: translateY(5px); }
    60%  { transform: translateY(-3px); }
    100% { transform: translateY(0); }
}

/* --- Guides: sayfa cevirme (Y ekseninde daralip genisler) --- */
.axion-link-card:hover .axion-link-ico .fa-book-open,
.axion-link-card:focus-visible .axion-link-ico .fa-book-open {
    animation: ax-page .65s ease-out;
}

@keyframes ax-page {
    0%   { transform: perspective(120px) rotateY(0deg); }
    45%  { transform: perspective(120px) rotateY(-78deg); }
    100% { transform: perspective(120px) rotateY(0deg); }
}

/* --- Drop Guides: hediye kutusu sallanir --- */
.axion-link-card:hover .axion-link-ico .fa-gift,
.axion-link-card:focus-visible .axion-link-ico .fa-gift {
    animation: ax-swing .6s ease-in-out;
}

@keyframes ax-swing {
    0%   { transform: rotate(0) scale(1); }
    25%  { transform: rotate(-14deg) scale(1.06); }
    55%  { transform: rotate(11deg) scale(1.06); }
    80%  { transform: rotate(-6deg) scale(1.02); }
    100% { transform: rotate(0) scale(1); }
}

/* --- Market: dugme hafif zikzak (tirnak hissi) --- */
.axion-link-card:hover .axion-link-ico .fa-store,
.axion-link-card:focus-visible .axion-link-ico .fa-store {
    animation: ax-bump .5s ease-out;
}

@keyframes ax-bump {
    0%   { transform: translateY(0) scale(1); }
    40%  { transform: translateY(-4px) scale(1.08); }
    100% { transform: translateY(0) scale(1); }
}

/* --- Warehouse: kutular yer degistirir --- */
.axion-link-card:hover .axion-link-ico .fa-boxes-stacked,
.axion-link-card:focus-visible .axion-link-ico .fa-boxes-stacked {
    animation: ax-stack .6s ease-in-out;
}

@keyframes ax-stack {
    0%   { transform: translateX(0) rotate(0); }
    30%  { transform: translateX(-3px) rotate(-6deg); }
    65%  { transform: translateX(3px) rotate(5deg); }
    100% { transform: translateX(0) rotate(0); }
}

/* --- Rankings: yildiz buyuyup bir tur doner --- */
.axion-link-card:hover .axion-link-ico .fa-ranking-star,
.axion-link-card:focus-visible .axion-link-ico .fa-ranking-star {
    animation: ax-spin-pop .7s cubic-bezier(.34, 1.4, .64, 1);
}

@keyframes ax-spin-pop {
    0%   { transform: rotate(0) scale(1); }
    40%  { transform: rotate(180deg) scale(1.3); }
    100% { transform: rotate(360deg) scale(1); }
}

/* --- Media: goruntu karesi acilir --- */
.axion-link-card:hover .axion-link-ico .fa-images,
.axion-link-card:focus-visible .axion-link-ico .fa-images {
    animation: ax-zoom .6s ease-out;
}

@keyframes ax-zoom {
    0%   { transform: scale(.7); opacity: .5; }
    55%  { transform: scale(1.25); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* --- Server Info: bilgi dairesi nabiz gibi atar --- */
.axion-link-card:hover .axion-link-ico .fa-circle-info,
.axion-link-card:focus-visible .axion-link-ico .fa-circle-info {
    animation: ax-pulse .7s ease-out;
}

@keyframes ax-pulse {
    0%   { transform: scale(1); }
    25%  { transform: scale(1.3); }
    50%  { transform: scale(.94); }
    75%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}

/* --- Rules: terazi iki yana salinir --- */
.axion-link-card:hover .axion-link-ico .fa-scale-balanced,
.axion-link-card:focus-visible .axion-link-ico .fa-scale-balanced {
    animation: ax-tilt .7s ease-in-out;
}

@keyframes ax-tilt {
    0%   { transform: rotate(0); }
    30%  { transform: rotate(-16deg); }
    60%  { transform: rotate(13deg); }
    100% { transform: rotate(0); }
}

/* --- Support: can simidi doner --- */
.axion-link-card:hover .axion-link-ico .fa-life-ring,
.axion-link-card:focus-visible .axion-link-ico .fa-life-ring {
    animation: ax-wobble .7s ease-in-out;
}

@keyframes ax-wobble {
    0%   { transform: rotate(0); }
    20%  { transform: rotate(-24deg); }
    45%  { transform: rotate(20deg); }
    70%  { transform: rotate(-10deg); }
    100% { transform: rotate(0); }
}

/* --- All News: gazete acilip kapanir --- */
.axion-link-card:hover .axion-link-ico .fa-newspaper,
.axion-link-card:focus-visible .axion-link-ico .fa-newspaper {
    animation: ax-paper .65s ease-out;
}

@keyframes ax-paper {
    0%   { transform: perspective(150px) rotateX(0) translateY(0); }
    40%  { transform: perspective(150px) rotateX(55deg) translateY(-3px); }
    100% { transform: perspective(150px) rotateX(0) translateY(0); }
}

/* 11 hedef tek sayi: son kart yalniz kalmasin diye tam kolona yatirilir.
   Diger kartlardan farkli olarak yatay (ikon + etiket yana yana) ve
   biraz daha genis ic bosluk alir; boylece izgara 5 x 2 + 1 genis kart
   olarak dengeli kapanir. */
.axion-link-grid > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.axion-link-grid > li:last-child:nth-child(odd) .axion-link-card {
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    padding: 14px 18px;
    text-align: left;
}

.axion-link-grid > li:last-child:nth-child(odd) .axion-link-name {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
}

/* Mobilde etiketler sigmasi icin izgara tek kolona iner. Esik 340px:
   390px telefonlarda 2'li izgara hala rahat sigiyor (kolon ~135px),
   tek kolona dusmek paneli gereksiz uzattigi icin daha dar ekranlara
   birakildi. */
@media (max-width: 340px) {
    .axion-link-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .axion-link-grid > li:last-child:nth-child(odd) {
        grid-column: auto;
    }

    .axion-link-grid > li:last-child:nth-child(odd) .axion-link-card {
        justify-content: center;
        padding: 14px 8px 13px;
        text-align: center;
    }
}

/* ------------------------------------------------------------
   SEKMELER (sidebar + rankings)
------------------------------------------------------------ */
.axion-theme .tab-button,
.axion-theme .tabTable-button {
    color: #9ca3aa;
    border-color: rgba(210, 215, 220, .13);
}

.axion-theme .tab-button:hover,
.axion-theme .tabTable-button:hover {
    color: #fff;
}

.axion-theme .tab-button.active,
.axion-theme .tabTable-button.active {
    color: #fff;
    border-color: #e32635;
}

/* ------------------------------------------------------------
   TABLO / LISTE YUZEYLERI
   content.css duzeni korur; burada yalnizca yuzey renkleri degisir.
------------------------------------------------------------ */
.axion-theme .tableBlock table,
.axion-theme table.simple,
.axion-theme table.rankingTable {
    background: transparent;
    color: #d9dde2;
}

.axion-theme .tableBlock table thead td,
.axion-theme .tableBlock table th,
.axion-theme table.rankingTable thead td {
    background: rgba(255, 255, 255, .05);
    color: #e8ebee;
    border-bottom: 1px solid rgba(210, 215, 220, .18);
    font-family: 'Cinzel', serif;
    letter-spacing: .8px;
}

.axion-theme .tableBlock table tbody td,
.axion-theme .tableBlock table tbody tr td {
    background: transparent;
    border-bottom: 1px solid rgba(210, 215, 220, .08);
    color: #c3c9cf;
}

.axion-theme .tableBlock table tbody tr:hover td {
    background: rgba(255, 255, 255, .035);
}

/* Modal ici siralama tablolari arka plani saydam kalmali */
.axion-theme .modalContent table td,
.axion-theme .modalContent table th {
    background: transparent;
}

/* DmN CMS notice kutulari (primemu content.css: acik mavi zemin + lacivert
   yazi). Koyu temada hem okunmuyordu hem de tasarimla cakisiyordu; zemin,
   kenar, ikon ve vurgu rengi tek tek temaya uyarlandi. */
.axion-theme .i_note,
.axion-theme .s_note,
.axion-theme .w_note,
.axion-theme .e_note {
    background-color: rgba(255, 255, 255, .04);
    background-image: none;
    border: 1px solid rgba(210, 215, 220, .16);
    border-left: 3px solid var(--ax-accent, #e02020);
    border-radius: 4px;
    color: #b9c0c8;
    padding: 14px 18px;
    text-shadow: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.axion-theme .i_note { border-left-color: #4a9eff; }
.axion-theme .s_note { border-left-color: #37c871; }
.axion-theme .w_note { border-left-color: #f0b429; }
.axion-theme .e_note { border-left-color: #e02020; }

.axion-theme .i_note b,
.axion-theme .s_note b,
.axion-theme .w_note b,
.axion-theme .e_note b {
    color: #f0f2f5;
}

/* ------------------------------------------------------------
   MODALLAR — KATMAN SIRASI (KRITIK)

   KANIT (_work/panel_log.txt, canli olcum):
     .modal_div  z-index 35
     #overlay    z-index 30
     .topbar     z-index 9000  (position:sticky)
     .registration-overlay / .item-rank-overlay  z-index 99999

   Modal, ust barin ALTINDA kaliyordu. Username merkezinde
   elementFromPoint() `a.logo < header.topbar` donuyordu:
     1) "Username kutusu tiklanmiyor" -> tiklama input'a degil
        ust bardaki logoya gidiyor.
     2) "Panelde bir yere tiklayinca sayfa ana menuye geliyor"
        -> logo tam da $base_url adresine giden <a>; tiklama
        navigasyona donusuyor.

   Cozum: modal + overlay, tum tema katmanlarinin (9000 / 99999)
   USTUNE cikarilir. Ust bar artik modalin ustune binemez.
------------------------------------------------------------ */
.axion-theme #overlay {
    /* content.css 30 -> tema katmanlarinin ustune */
    z-index: 100050;
    background: rgba(3, 4, 5, .82);
    -webkit-backdrop-filter: blur(5px) saturate(120%);
    backdrop-filter: blur(5px) saturate(120%);
    cursor: default;
}

.axion-theme .modal_div {
    /* content.css 35 -> tema katmanlarinin ustune */
    z-index: 100060;
    /* CMS'in global.js'i acilista `top` degerini 10% animasyonla
       yaziyor. Yalniz `top` degistirmek modalu ust barin altinda
       birakirdi; bu yuzden dikey ortalama transform ile yapilir
       (JS transform'a dokunmuyor). */
    top: 50% !important;
    transform: translateY(-50%);

    max-height: 92vh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;

    background:
        radial-gradient(120% 90% at 50% 0%, rgba(227, 38, 53, .16), transparent 60%),
        linear-gradient(180deg, #14171c 0%, #0a0c0f 55%, #060709 100%);
    border: 1px solid rgba(210, 215, 220, .14);
    border-top: 2px solid #e32635;
    border-radius: 6px;
    color: #d9dde2;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, .5),
        0 30px 90px rgba(0, 0, 0, .85),
        0 0 70px rgba(227, 38, 53, .18);
}

/* ------------------------------------------------------------
   SIGN IN PANELI — RÜZGÂR PARÇA EFEKTİ

   Panel tek parça belirmez; ekran dışından savrulan `n` parça
   dönerek yerine oturur ve paneli "kurar". Kapanışta aynı
   parçalar ters yöne savrulup sönümlenir.

   Parçaların başlangıç bitiş değerleri (--ax-from / --ax-to)
   js/axion-landing.js tarafından parça başına atanır; burada
   yalnızca animasyon tanımları vardır.
------------------------------------------------------------ */
.axion-modal-shards {
    position: fixed;
    z-index: 100061;
    pointer-events: none;
    /* Toz panelin biraz dışına taşabilir; kırpma yok. */
    overflow: visible;
}

/* Tek bir toz zerresi. Küçük, yumuşak, kenarları yumuşatılmış.
   --ax-dust: "h, s%, l%" (HSL) — JS atar. */
.axion-modal-shards .axion-shard {
    position: absolute;
    display: block;
    border-radius: 50%;
    background: radial-gradient(
        circle at 50% 50%,
        hsla(var(--ax-dust, 210, 12%, 72%), .95) 0%,
        hsla(var(--ax-dust, 210, 12%, 72%), .55) 42%,
        hsla(var(--ax-dust, 210, 12%, 72%), 0) 72%
    );
    opacity: 0;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* --- geliş: yavaş, yumuşak yaklaşma (sert snap yok) --- */
@keyframes axionMotes {
    0% {
        opacity: 0;
        transform: var(--ax-from) rotate(0deg) scale(.6);
    }
    22% {
        opacity: .9;
    }
    70% {
        opacity: .55;
        transform: translate3d(0, 0, 0) rotate(var(--ax-spin, 90deg)) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate3d(0, 0, 0) rotate(var(--ax-spin, 90deg)) scale(1);
    }
}

.axion-modal-shards .axion-shard {
    animation: axionMotes 1.5s cubic-bezier(.22, .55, .3, 1) both;
}

/* --- gidiş: rüzgâr zerreleri yukarı sürükler --- */
@keyframes axionMotesOut {
    0% {
        opacity: .8;
        transform: translate3d(0, 0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: var(--ax-to) scale(.4);
    }
}

.axion-modal-shards.is-leaving .axion-shard {
    animation: axionMotesOut .9s cubic-bezier(.3, 0, .6, 1) both;
}

/* Zerreler dağılırken panelin kendisi gizli; dağılınca kaldırılır ve
   panel yumuşakça belirir. */
.axion-theme .modal_div.axion-shards-forming {
    opacity: 0 !important;
}

.axion-theme .modal_div.axion-shards-leaving {
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .axion-modal-shards { display: none !important; }
    .axion-theme .modal_div.axion-shards-forming { opacity: 1 !important; }
    .axion-shard { animation: none !important; }
}

/* Modal acilisinda arka plan sayfasi tasmasin. */
.axion-theme .modal_div::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 30%);
}

@media (prefers-reduced-motion: reduce) {
    .axion-theme .modal_div { animation: none; }
}

/* Savunma katmani: CMS'in login modal'i acilken arka sayfa
   (ust bar dahil) etkilesim alamaz. Ust bar 9000'de oldugu icin
   yalniz z-index yetmez; ust barin de kilitlenmesi gerekir.
   CMS global.js inline `display:block` yaziyor. */
body:has(#register[style*="display: block"]) {
    overflow: hidden;
}

body:has(#register[style*="display: block"]) .topbar {
    pointer-events: none;
    filter: saturate(.55);
}

.axion-theme .modal_div .modal_close {
    z-index: 3;
    transition: transform .18s ease, filter .18s ease;
}

.axion-theme .modal_div .modal_close:hover {
    transform: rotate(90deg);
    filter: brightness(1.25);
}

/* Baslik: Cinzel + altinda vurgu cizgisi */
.axion-theme .modalTitle {
    display: block;
    position: relative;
    padding-bottom: 16px;
    color: #fff;
    font-family: 'Cinzel', serif;
    font-size: 27px;
    font-weight: 700;
    letter-spacing: 3px;
    text-shadow: 0 0 26px rgba(227, 38, 53, .55);
}

.axion-theme .modalTitle::after {
    content: "";
    display: block;
    width: 62px;
    height: 2px;
    margin-top: 12px;
    background: linear-gradient(90deg, #e32635, rgba(227, 38, 53, 0));
}

/* CMS'in .fieldGroup düzeni etiketi (span) mutlak konumlu olarak
   input'un ÜST KENARININ ÜZERİNE oturtuyor (top:-12px, z-index:1).
   Bu iki sorun birlikte yaratıyordu:
     1) Etiket, input'un sol-üst köşesindeki şeridi kapladığı için oraya
        tıklanınca odak input'a düşmüyor; kullanıcı kutunun "üstüne"
        tıklamak zorunda kalıyordu.
     2) Input yarı saydam temada etiketin koyu zemini kutuyu deliyor,
        hizalama bozuk görünüyordu.
   Çözüm: alanı dikey akışa alıp etiketi input'un tamamen ÜSTÜNE,
   çakışmayan kendi satırına yerleştiriyoruz. */
.axion-theme .fieldGroup {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 22px 0;
}

.axion-theme .fieldGroup > span {
    position: static;
    padding: 0;
    background: none;
    box-shadow: none;
    z-index: auto;
    pointer-events: none;
    color: #9ca3aa;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    transition: color .2s ease;
}

/* Odaklanan alanin etiketi kirmiziya doner. */
.axion-theme .fieldGroup:focus-within > span {
    color: #ff5561;
}

.axion-theme .fieldGroup input,
.axion-theme .fieldGroup select,
.axion-theme .fieldGroup textarea {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(210, 215, 220, .16);
    border-radius: 3px;
    color: #e8ebee;
    /* content.css'teki height:100%, flex düzende kutuyu esnetiyordu. */
    width: 100%;
    height: auto;
    min-height: 48px;
    padding: 12px 16px;
    font-size: 14px;
    caret-color: #e32635;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.axion-theme .fieldGroup input:focus,
.axion-theme .fieldGroup select:focus,
.axion-theme .fieldGroup textarea:focus {
    border-color: #e32635;
    outline: none;
    background: rgba(227, 38, 53, .07);
    box-shadow: 0 0 0 3px rgba(227, 38, 53, .18);
}

.axion-theme .fieldGroup input::placeholder {
    color: #6b7178;
}

.axion-theme .button-blue,
.axion-theme .button {
    position: relative;
    overflow: hidden;
    min-height: 48px;
    padding: 0 34px;
    background: linear-gradient(135deg, #e32635 0%, #a91520 55%, #5d080e 100%);
    background-size: 200% 100%;
    background-position: 0% 50%;
    border: 1px solid rgba(255, 90, 100, .45);
    border-radius: 3px;
    color: #fff;
    font-family: 'Cinzel', serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-position .35s ease, box-shadow .25s ease, transform .12s ease;
    box-shadow: 0 6px 18px rgba(227, 38, 53, .3);
}

/* Uzerinden geceen parlama */
.axion-theme .button-blue::after,
.axion-theme .button::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .32), transparent);
    transform: skewX(-20deg);
    transition: left .6s ease;
}

.axion-theme .button-blue:hover,
.axion-theme .button:hover {
    background-position: 100% 50%;
    color: #fff;
    box-shadow: 0 10px 26px rgba(227, 38, 53, .5);
}

.axion-theme .button-blue:hover::after,
.axion-theme .button:hover::after {
    left: 130%;
}

.axion-theme .button-blue:active,
.axion-theme .button:active {
    transform: translateY(1px);
}

.axion-theme .forgot {
    display: inline-block;
    padding: 6px 0;
    color: #9ca3aa;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: color .2s ease;
}

.axion-theme .forgot:hover {
    color: #e32635;
    text-decoration: underline;
}

#overlay {
    background: rgba(0, 0, 0, .8);
}

/* Alanlari birbirinden ayiran ince cizgi + alt bosluk. */
.axion-theme .modal_div .fields {
    position: relative;
    margin-top: 4px;
    padding-bottom: 6px;
}

.axion-theme .modal_div .fields::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(210, 215, 220, .18), transparent);
}

/* LOGIN / Forgat Password satirini gorsel olarak ayir. */
.axion-theme .modal_div .enter {
    gap: 14px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(210, 215, 220, .1);
}

.axion-theme .modal_div .enterLinks p {
    margin: 0;
}

/* validationEngine baloncugu (CMS'in kendi temasi kirmizi uyari
   kutusu veriyordu). Artik input'un USTUNE biniyor ve alani
   kapatiyor; temaya uygun, alta acilan ince bir ipucu yapariz. */
.axion-theme .modal_div .formError {
    background: transparent;
    border: 0;
    box-shadow: none;
    margin-top: 4px;
    max-width: 100%;
    opacity: 1;
    padding: 0;
    width: 100%;
}

.axion-theme .modal_div .formError .formErrorContent {
    background: rgba(227, 38, 53, .12);
    border: 1px solid rgba(227, 38, 53, .5);
    border-radius: 3px;
    box-shadow: none;
    color: #ff8a92;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .3px;
    margin: 0;
    padding: 5px 9px;
}

.axion-theme .modal_div .formError .formErrorArrow {
    display: none;
}

/* Alan hataliysa kutu da kirmiziya donsun. */
.axion-theme .modal_div input.formError,
.axion-theme .modal_div .formError input {
    border-color: #e32635 !important;
}

#loading {
    color: #d9dde2;
}

#select_server .modal-header h2 {
    color: #fff;
    font-family: 'Cinzel', serif;
}

/* Dar ekran: 480px altinda mobile-content.css .modal_div'i
   `width:calc(100% - 30px); left:15px` yapiyor ve margin-left'i
   sifirliyor. Bizim top:50% + translateY(-50%) kuralimiz bu
   genislikle de gecerli, ama icerik sikismasin diye olcek ve
   bosluklari biraz kisaltabiliriz. */
@media (max-width: 560px) {
    .axion-theme .modal_div {
        padding: 34px 22px 26px;
    }

    .axion-theme .modalTitle {
        font-size: 21px;
        letter-spacing: 2px;
        padding-bottom: 12px;
    }

    .axion-theme .fieldGroup {
        margin: 16px 0;
    }

    .axion-theme .fieldGroup input,
    .axion-theme .fieldGroup select,
    .axion-theme .fieldGroup textarea {
        min-height: 46px;
        padding: 11px 14px;
    }

    .axion-theme .modal_div .enter {
        flex-direction: column;
        align-items: stretch;
        margin-top: 18px;
        padding-top: 16px;
        text-align: center;
    }

    .axion-theme .button-blue,
    .axion-theme .button {
        width: 100%;
        letter-spacing: 2px;
    }
}

/* Alik yuksekligi kisa ekranlarda (yatay telefon) uyari
   balonu ile asagi tasabilir; ust barin altinda kalmasin. */
@media (max-height: 560px) {
    .axion-theme .modal_div {
        max-height: 96vh;
        padding: 24px 22px;
    }
}

/* ------------------------------------------------------------
   GRAND OPEN GERI SAYIMI
------------------------------------------------------------ */
.axion-theme #timer_div_title {
    color: #fff;
    font-family: 'Cinzel', serif;
}

.axion-theme #timer_div_time .title {
    color: #9ca3aa;
}

.axion-theme #timer_div_time .count {
    color: #e32635;
}

/* ------------------------------------------------------------
   SAG YAN HIZLI LINKLER / YUKARI
------------------------------------------------------------ */
.axion-theme .rightBodyLinks a {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(210, 215, 220, .16);
    color: #c3c9cf;
}

.axion-theme .rightBodyLinks a:hover {
    border-color: #e32635;
    color: #fff;
}

.axion-theme .toTop {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(210, 215, 220, .16);
    color: #c3c9cf;
}

.axion-theme .toTop:hover {
    border-color: #e32635;
    color: #fff;
}

/* ------------------------------------------------------------
   DUYARLI DUZEN
------------------------------------------------------------ */
@media (max-width: 1249px) {
    .axion-shell {
        padding-left: 18px;
        padding-right: 18px;
    }

    .axion-theme #box1 {
        padding: 18px 16px;
    }
}

@media (max-width: 991px) {
    .axion-theme .newsLink-info a {
        width: auto;
        max-width: 100%;
    }

    .axion-cta-row {
        gap: 12px;
    }

    .axion-cta {
        flex: 1 1 100%;
    }
}

@media (max-width: 650px) {
    .axion-theme .h2-title span {
        font-size: 16px;
        padding-left: 22px;
    }

    .axion-theme .h2-title span:before {
        width: 20px;
        height: 20px;
        margin-top: -10px;
    }

    .axion-panel-head {
        padding: 12px 14px;
    }

    .axion-panel-body {
        padding: 14px;
    }
}

/* ------------------------------------------------------------
   WEB DEPO ESYA IZGARASI (storage/view.index.php)
------------------------------------------------------------ */
.axion-item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
    transition: opacity .2s;
}

.axion-item {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(210, 215, 220, .13);
    border-radius: 4px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.axion-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    background: rgba(0, 0, 0, .35);
    border-radius: 3px;
}

.axion-item-icon img {
    max-width: 48px;
    max-height: 48px;
    image-rendering: pixelated;
}

.axion-item-noimg {
    color: #555b62;
    font-size: 22px;
}

.axion-item-name {
    font-size: 12px;
    line-height: 1.4;
    color: #c3c9cf;
    min-height: 34px;
    overflow: hidden;
}

.axion-item-slot {
    font-size: 10px;
    color: #6f767d;
    letter-spacing: 1px;
}

.axion-item-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.axion-item-sell {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid rgba(210, 215, 220, .09);
}

.axion-item-sell input,
.axion-item-sell select {
    width: 100%;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(210, 215, 220, .16);
    border-radius: 3px;
    color: #e8ebee;
    font-size: 12px;
    padding: 6px 8px;
}

.axion-item-sell input:focus,
.axion-item-sell select:focus {
    border-color: #e32635;
    outline: none;
}

.axion-btn {
    flex: 1;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(210, 215, 220, .18);
    border-radius: 3px;
    color: #d9dde2;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .6px;
    padding: 7px 8px;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}

.axion-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, .12);
    border-color: #e32635;
    color: #fff;
}

.axion-btn:disabled {
    opacity: .5;
    cursor: default;
}

.axion-btn-danger:hover:not(:disabled) {
    background: rgba(227, 38, 53, .18);
    border-color: #e32635;
    color: #fff;
}

.axion-btn-sell {
    background: rgba(227, 38, 53, .22);
    border-color: rgba(227, 38, 53, .5);
    color: #fff;
}

.axion-btn-sell:hover:not(:disabled) {
    background: rgba(227, 38, 53, .4);
}

/* ------------------------------------------------------------
   .table-simple
   Axion temasinda yazilan yeni modullerin basit bilgi tablosu
   (information, rewards, vip, partner, market, storage vb.).
   DmN CMS'in kendi tablolari farkli sinflar kullanir; bu yalnizca
   yeni sayfalardaki ortak bicimdir.
------------------------------------------------------------ */
.axion-theme .table-simple {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.axion-theme .table-simple th,
.axion-theme .table-simple td {
    padding: 11px 14px;
    text-align: left;
    border-bottom: 1px solid rgba(210, 215, 220, .1);
    vertical-align: middle;
}

.axion-theme .table-simple thead th {
    background: rgba(255, 255, 255, .05);
    color: #e8ebee;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    white-space: nowrap;
}

.axion-theme .table-simple tbody tr:hover {
    background: rgba(255, 255, 255, .03);
}

.axion-theme .table-simple tbody tr:last-child td {
    border-bottom: 0;
}

.axion-theme .table-simple td:first-child {
    color: #9ca3aa;
    width: 45%;
}

@media (max-width: 650px) {
    .axion-theme .table-simple th,
    .axion-theme .table-simple td {
        padding: 9px 8px;
        font-size: 12px;
    }

    .axion-theme .table-simple td:first-child {
        width: 50%;
    }
}

/* ------------------------------------------------------------
   CANLI SAYACIN VURGUSU
   server-strip icindeki oyuncu sayisi; axion tasariminda altin.
------------------------------------------------------------ */
.axion-theme .server-strip .online-count {
    color: #ffd43b;
    font-weight: 700;
}

/* ------------------------------------------------------------
   REHBER MAKALESI (guides/view.read_guide.php)
   DmN CMS makale metnini ham basar; makale yazari dogrudan bu
   siniflari kullanabilir.
------------------------------------------------------------ */
.axion-theme .axion-article {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    color: #c3c9cf;
    line-height: 1.75;
    font-size: 14px;
}

.axion-theme .axion-article h1,
.axion-theme .axion-article h2,
.axion-theme .axion-article h3,
.axion-theme .axion-article h4 {
    color: #e8ebee;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 26px 0 12px;
}

.axion-theme .axion-article h1 { font-size: 22px; }
.axion-theme .axion-article h2 { font-size: 18px; }
.axion-theme .axion-article h3 { font-size: 15px; }

.axion-theme .axion-article p { margin: 0 0 14px; }

.axion-theme .axion-article a {
    color: #e32635;
    text-decoration: none;
    border-bottom: 1px solid rgba(227, 38, 53, .35);
}

.axion-theme .axion-article a:hover { color: #fff; border-bottom-color: #fff; }

.axion-theme .axion-article ul,
.axion-theme .axion-article ol { margin: 0 0 16px; padding-left: 22px; }

.axion-theme .axion-article li { margin-bottom: 7px; }

.axion-theme .axion-article img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 10px 0;
}

.axion-theme .axion-article blockquote {
    margin: 16px 0;
    padding: 12px 18px;
    border-left: 3px solid #e32635;
    background: rgba(255, 255, 255, .04);
    color: #9ca3aa;
}

.axion-theme .axion-article table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 13px;
}

.axion-theme .axion-article table th {
    background: rgba(255, 255, 255, .05);
    color: #e8ebee;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.axion-theme .axion-article table th,
.axion-theme .axion-article table td {
    padding: 10px 12px;
    border: 1px solid rgba(210, 215, 220, .1);
    text-align: left;
}

.axion-theme .axion-article table tr:nth-child(even) td {
    background: rgba(255, 255, 255, .02);
}

.axion-theme .axion-article code,
.axion-theme .axion-article pre {
    background: rgba(0, 0, 0, .4);
    border: 1px solid rgba(210, 215, 220, .12);
    border-radius: 3px;
    color: #ffd43b;
    font-size: 13px;
    padding: 2px 6px;
}

.axion-theme .axion-article pre { padding: 12px 14px; overflow-x: auto; }

/* =========================================================
   ICERIK + YAN SIDEBAR GRIDI (sadece ic sayfalar)
   ---------------------------------------------------------
   content.css (primemu) `.content` icin `width: calc(100% - 365px - 25px)`
   yaziyor; bu tek yan sutun varsayiyor. axionmu'da `main` flex ve yan
   kolon TEK bir <aside class="axion-sidebar"> (rankings + join banner +
   quick links).

   DIKKAT: bu kural yalniz ic sayfalara uygulanir. Anasayfada `main`in
   cocuklari `.axion-home-blocks` (landing), `.axion-cta-row` ve
   `.axion-cs-panel` ve ALT ALTA yigilmasi gerekir; flex onlari yan yana
   dizip ezdi. `body.axion-home` sinifi header'da konuyor. */
body.axion-theme:not(.axion-home) main {
    display: flex;
    align-items: flex-start;
    gap: 25px;
}

body.axion-theme:not(.axion-home) .content {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

body.axion-theme:not(.axion-home) .axion-sidebar {
    flex: 0 0 300px;
    width: 300px;
    max-width: 300px;
}

.axion-sidebar > * {
    width: 100%;
}

@media (max-width: 1249px) {
    body.axion-theme:not(.axion-home) .axion-sidebar {
        flex: 0 0 250px;
        width: 250px;
        max-width: 250px;
    }
}

@media (max-width: 991px) {
    body.axion-theme:not(.axion-home) main {
        flex-wrap: wrap;
    }
    body.axion-theme:not(.axion-home) .content {
        flex: 1 1 100%;
    }
    body.axion-theme:not(.axion-home) .axion-sidebar {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
    }
}

/* =========================================================
   MOBIL NAV (hamburger menusu)
   ---------------------------------------------------------
   Iki katman catisiyordu:
     axion-landing.css @650  -> .nav-menu a span { display:none }  (ikon-only)
     override.css       @980  -> .nav-menu.open { flex-direction:column }
   Mobilde menu aciliyor ama ETIKETLER gorunmuyordu, menu de 390px yerine
   ~156px genislikte kaliyordu. DmN CMS kabugunda menu tam ekran acildigi
   icin etiketleri geri getiriyor ve menuyu ust satirin altina alip tam
   genislige aciyoruz. */
@media (max-width: 980px) {
    .axion-theme .nav-menu,
    .axion-theme .nav-menu.open {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
        flex-basis: auto;
        margin: 0;
        padding: 10px 14px 16px;
        background: linear-gradient(180deg, #0d0f12, #08090b);
        border-bottom: 1px solid rgba(210, 215, 220, .16);
        box-shadow: 0 24px 48px rgba(0, 0, 0, .6);
        z-index: 40;
    }

    /* Panel ekrandan tasmasin. 10 link icin panel 546px'e cikiyordu; kisip
       gorsunur alana sigdiriyoruz ve icinde kaydirma aciyoruz. Aksi halde
       panel, altindaki .server-strip uzerine uzandi (olculen cakisma 666x67)
       ve alttaki "PLAYERS ONLINE / Register / Login" satiriyla ust uste
       biniyordu. Ust satir yüksekligi override.css'te min-height:86px. */
    .axion-theme .nav-menu.open {
        box-sizing: border-box;
        max-height: calc(100vh - 86px);
        max-height: calc(100dvh - 86px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .axion-theme .nav-menu a,
    .axion-theme .nav-menu .nav-popup-btn {
        width: 100%;
        height: auto;
        min-height: 44px;
        padding: 10px 14px;
        justify-content: flex-start;
        gap: 12px;
        font-size: 13px;
        letter-spacing: .06em;

        /* Etiket hicbir genislikte iki satira bolunup komsu satira
           tasmasin; flex daralmasinda metin tasmasi -> ust uste binme. */
        white-space: nowrap;
        flex: 0 0 auto;
    }

    /* ikon-only kuralini geri al */
    .axion-theme .nav-menu a span,
    .axion-theme .nav-menu .nav-popup-btn span {
        display: inline;
    }

    .axion-theme .nav-menu a i,
    .axion-theme .nav-menu .nav-popup-btn i {
        font-size: 14px;
        width: 18px;
        flex: 0 0 18px;
    }
}
/* ==========================================================================

/* ==========================================================================
   12) INFORMATION SAYFASI  (/information)

   Sorun: sayfa DmN CMS'in `.box-style1` + `.table-simple` kaliklarini
   kullaniyordu. dmn.css icinde `.title1` ve `.box-style1 .title`
   `display:none` oldugu icin basliklar HIC gorunmuyor, `.custom_button`
   stili de tamamen yorum satirinda kaldiigi icin Quick Links butonlari
   stilsiz kaliyordu. Sayfa uc cubuk tablo + dort duz baglanti
   gorunumundeydi.

   Burada sayfaya ozel `.ax-info-*` modulu tanimlanir. Kapsam `#box1`
   icinde `.ax-info` ile sinirli; diger icerik view'lari etkilenmez.

   NOT: <header> kullanilmaz. content.css'te global `header{height:550px}`
   kurali var; ayri bkz. view.rules.php.
   ========================================================================== */

/* #box1'in kendi karti bicimini sifirla; hero icin yer acilsin.
   specificity: `.axion-theme .ax-info#box1` (1 id + 2 class)
   > `.axion-theme #box1` (1 id + 1 class) */
.axion-theme .ax-info#box1 {
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
.axion-theme .ax-info-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 32px 34px;
    margin-bottom: 20px;

    background:
        radial-gradient(120% 170% at 86% 0%, rgba(227, 38, 53, .30), rgba(227, 38, 53, 0) 58%),
        linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
    border: 1px solid rgba(227, 38, 53, .28);
    border-radius: 4px;
}

/* Sol kenardaki kirmizi serit. */
.axion-theme .ax-info-hero:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--red-bright), var(--red-dark));
}

.axion-theme .ax-info-hero-glow {
    position: absolute;
    right: -60px;
    top: -60px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(227, 38, 53, .22), rgba(227, 38, 53, 0) 70%);
    pointer-events: none;
}

.axion-theme .ax-info-hero-text {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.axion-theme .ax-info-eyebrow {
    margin: 0 0 8px;
    color: var(--red-bright);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.axion-theme .ax-info-title {
    margin: 0 0 10px;
    color: #fff;
    font-family: 'Cinzel', serif;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: 1px;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .8);
}

.axion-theme .ax-info-lead {
    margin: 0 0 16px;
    max-width: 60ch;
    color: var(--silver2);
    font-size: 13px;
    line-height: 1.8;
}

/* Etiket seridi (version / platform / online) */
.axion-theme .ax-info-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.axion-theme .ax-info-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    color: var(--silver);
    font-size: 11px;
    letter-spacing: 1px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(210, 215, 220, .14);
    border-radius: 3px;
}

.axion-theme .ax-info-chip i {
    color: var(--red-bright);
    font-size: 11px;
}

.axion-theme .ax-info-chip.is-live {
    color: #d9f5e2;
    background: rgba(34, 197, 94, .10);
    border-color: rgba(34, 197, 94, .34);
}

/* Kapali sunucu: yesil canli rozetinin durust karsiligi. Renkler burada
   acik degerle yazildi; proje genelinde kullanilan --silver / --silver-dark
   degiskenleri HICBIR CSS dosyasinda tanimli degil, var() referansi
   gecersiz kalip rengi mirasina birakiyor. */
.axion-theme .ax-info-chip.is-off {
    color: rgba(210, 215, 220, .62);
    background: rgba(255, 255, 255, .04);
    border-color: rgba(210, 215, 220, .13);
}

/* Kapaliyken nabiz durur: canliymis gibi gorunmemeli. */
.axion-theme .ax-info-chip.is-off .ax-info-dot {
    background: rgba(210, 215, 220, .55);
    box-shadow: none;
    animation: none;
}

/* Canlilik noktasi — hafif nabiz. */
.axion-theme .ax-info-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, .65);
    animation: ax-info-pulse 2.1s infinite;
}

@keyframes ax-info-pulse {
    70%  { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* Sag taraftaki dekoratif rune. Onceki degerlerde (kirmizi text-shadow +
   92px) ikon arka plandaki kirmizi gradyanta karisip leke gibi
   gorunuyordu; bu yuzden golge kaldirildi ve ikon netlestirildi. */
.axion-theme .ax-info-hero-rune {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;

    color: rgba(255, 255, 255, .07);
    font-size: 76px;
    line-height: 1;
    pointer-events: none;
}

/* Hero sag tarafinda dekoratif ikon KULLANILMIYOR: `fa-server` ikonu iki
   surucu bolmesi ciziyor ve kirmizi gradyan uzerinde leke gibi
   gorunuyordu. Varlik kaldirildi; yerine bosluk hero metnine kalir. */

/* ------------------------------------------------------------
   LIVE FIGURES — istatistik kartlari
   ------------------------------------------------------------ */
.axion-theme .ax-info-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.axion-theme .ax-info-stat {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 20px 12px 18px;
    text-align: center;

    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
    border: 1px solid rgba(210, 215, 220, .13);
    border-radius: 4px;
    transition: transform .22s, border-color .22s, box-shadow .22s;
}

.axion-theme .ax-info-stat:hover {
    transform: translateY(-3px);
    border-color: rgba(227, 38, 53, .5);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .5), 0 0 20px rgba(227, 38, 53, .16);
}

.axion-theme .ax-info-stat > i {
    color: var(--red-bright);
    font-size: 17px;
    opacity: .9;
}

.axion-theme .ax-info-stat-num {
    color: #fff;
    font-family: 'Cinzel', serif;
    font-size: 26px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: .5px;
    text-shadow: 0 0 16px rgba(227, 38, 53, .35);
}

.axion-theme .ax-info-stat-lbl {
    color: var(--silver-dark);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

/* ------------------------------------------------------------
   PANEL kabugu
   ------------------------------------------------------------ */
.axion-theme .ax-info-panel {
    overflow: hidden;
    margin-bottom: 20px;

    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
    border: 1px solid rgba(210, 215, 220, .13);
    border-radius: 4px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .4);
}

.axion-theme .ax-info-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;

    background: rgba(0, 0, 0, .28);
    border-bottom: 1px solid rgba(227, 38, 53, .28);
}

.axion-theme .ax-info-panel-head > span {
    color: #fff;
    font-family: 'Cinzel', serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.axion-theme .ax-info-panel-head > i {
    color: var(--red-bright);
    font-size: 13px;
    opacity: .85;
}

.axion-theme .ax-info-panel-body {
    padding: 18px 20px;
}

/* ------------------------------------------------------------
   GENERAL — etiket/deger satirlari
   ------------------------------------------------------------ */
.axion-theme .ax-info-rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 26px;

    /* GENERAL paneli .ax-info-panel-body kullanmiyor (satirlar dogrudan
       panelin cocugu). Bu yuzden yan boslugu burada veriliyor; aksi
       halde degerler panelin ic/sag kenarina yapisiyordu. */
    padding: 18px 20px;
}

.axion-theme .ax-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 2px;

    border-bottom: 1px solid rgba(210, 215, 220, .07);
}

.axion-theme .ax-info-row-k {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;

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

.axion-theme .ax-info-row-k i {
    width: 15px;
    color: var(--red-bright);
    font-size: 12px;
    text-align: center;
}

/* min-width:0 + kelime kaymasi: uzun degerler ("Season 21 Part 2-3")
   darf olmasina ragmen iki sutunlu ızgarada panelin disina tasip
   kirpilmasin. */
.axion-theme .ax-info-row-v {
    min-width: 0;

    color: #fff;
    font-family: 'Cinzel', serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    text-align: right;
    overflow-wrap: anywhere;
}

/* Rate gibi onde gelen degerler (exp/drop) vurgulanir. */
.axion-theme .ax-info-row-v.is-hi {
    color: #ffd43b;
    text-shadow: 0 0 14px rgba(255, 212, 59, .35);
}

/* Admin panelden girilmemis alan: sessiz tire yerine "Not set". */
.axion-theme .ax-info-row-v.is-muted {
    color: var(--silver-dark);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ------------------------------------------------------------
   SERVERS — sunucu kartlari
   ------------------------------------------------------------ */
.axion-theme .ax-info-servers {
    display: grid;
    gap: 12px;
}

.axion-theme .ax-info-server {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;

    background: linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012));
    border: 1px solid rgba(210, 215, 220, .13);
    border-radius: 4px;
    transition: border-color .22s, background .22s;
}

.axion-theme .ax-info-server:hover {
    border-color: rgba(227, 38, 53, .45);
}

.axion-theme .ax-info-server-ico {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;

    color: var(--silver-dark);
    font-size: 16px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(210, 215, 220, .12);
    border-radius: 3px;
    transition: color .22s, background .22s, border-color .22s, box-shadow .22s;
}

.axion-theme .ax-info-server.is-online .ax-info-server-ico {
    color: #fff;
    background: linear-gradient(180deg, var(--red-bright), var(--red-dark));
    border-color: rgba(227, 38, 53, .55);
    box-shadow: 0 0 16px rgba(227, 38, 53, .35);
}

.axion-theme .ax-info-server-txt {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.axion-theme .ax-info-server-txt strong {
    overflow: hidden;
    color: #fff;
    font-family: 'Cinzel', serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.axion-theme .ax-info-server-txt em {
    color: var(--silver-dark);
    font-size: 10px;
    font-style: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Durum rozeti */
.axion-theme .ax-info-status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: 3px;
}

.axion-theme .ax-info-status > i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.axion-theme .ax-info-status.is-online {
    color: #6ee7a0;
    background: rgba(34, 197, 94, .10);
    border-color: rgba(34, 197, 94, .34);
}

.axion-theme .ax-info-status.is-online > i {
    animation: ax-info-blink 1.6s ease-in-out infinite;
}

@keyframes ax-info-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}

.axion-theme .ax-info-status.is-offline {
    color: var(--silver-dark);
    background: rgba(255, 255, 255, .04);
    border-color: rgba(210, 215, 220, .13);
}

/* Sunucu yoksa bos durum */
.axion-theme .ax-info-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 26px 10px;
    color: var(--silver-dark);
    font-size: 13px;
}

.axion-theme .ax-info-empty i {
    color: var(--red-bright);
    opacity: .8;
}

/* ------------------------------------------------------------
   QUICK LINKS — ikonlu kartlar
   ------------------------------------------------------------ */
.axion-theme .ax-info-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.axion-theme .ax-info-link {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 10px 18px;

    color: var(--silver);
    text-align: center;
    text-decoration: none;

    background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
    border: 1px solid rgba(210, 215, 220, .12);
    border-radius: 4px;
    transition: transform .22s, border-color .22s, background .22s, box-shadow .22s;
}

/* Altta ortadan acilan kirmizi vurgu cubugu (axion-link-card ile ayni). */
.axion-theme .ax-info-link:before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 1;

    width: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(227, 38, 53, 0), var(--red-bright), rgba(227, 38, 53, 0));

    transform: translateX(-50%);
    transition: width .3s cubic-bezier(.22, .61, .36, 1);
}

.axion-theme .ax-info-link:hover,
.axion-theme .ax-info-link:focus-visible {
    transform: translateY(-3px);
    color: #fff;
    border-color: rgba(227, 38, 53, .55);
    background: linear-gradient(180deg, rgba(227, 38, 53, .14), rgba(227, 38, 53, .02));
    box-shadow: 0 14px 28px rgba(0, 0, 0, .5), 0 0 20px rgba(227, 38, 53, .18);
    text-decoration: none;
}

.axion-theme .ax-info-link:hover:before,
.axion-theme .ax-info-link:focus-visible:before {
    width: 100%;
}

.axion-theme .ax-info-link > i {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;

    color: var(--red-bright);
    font-size: 15px;
    background: rgba(227, 38, 53, .10);
    border: 1px solid rgba(227, 38, 53, .22);
    border-radius: 3px;
    transition: background .22s, color .22s, border-color .22s, transform .22s;
}

.axion-theme .ax-info-link:hover > i,
.axion-theme .ax-info-link:focus-visible > i {
    color: #fff;
    background: var(--red-bright);
    border-color: var(--red-bright);
    transform: translateY(-2px);
}

.axion-theme .ax-info-link > span {
    position: relative;
    z-index: 1;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 900px) {
    .axion-theme .ax-info-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .axion-theme .ax-info-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .axion-theme .ax-info-rows  { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
    .axion-theme .ax-info-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px 20px;
    }

    .axion-theme .ax-info-title { font-size: 23px; }
    .axion-theme .ax-info-lead  { font-size: 12px; }/* Rune alan kaplayacak kadar yer kaplamasin. */
    .axion-theme .ax-info-hero-rune { display: none; }
}
/* ^^^^^ BU KAPANIS ONCEDEN YOKTU. Yukaridaki @media (max-width: 767px)
   blogu hic kapanmiyordu; tarayici burada parse'i durdurup SONRAKI
   TUM KURALLARI (ax-acp dahil) sessizce atiyordu. ACCOUNT PANEL
   blogunu eklerken bu satir yanlislikla kesildi. Bir CSS hatasinin
   etkisi dosyanin sonuna kadar yayilir: 3750 satirlik dosyanin
   son ~1220 satiri hic uygulanmiyordu. */

/* =========================================================
   ACCOUNT PANEL (application/views/axionmu/account_panel/view.index.php)
   ---------------------------------------------------------
   SURUM 3 — KONTROL MERKEZI.

   Sorun: 15 eylem ayni genislikte duz satirlardi; 10-13px tip,
   satirin saginda devasa bos alan, 3 ogeli kartin yaninda bosluk.
   Kategorizasyon dogruydu ama ekran "buton listesi" gibi okunuyordu.

   Cozum: iki kolonlu govde. Sol'da YAPISAN kategori RAYI (4 kategori,
   ikon + adet, aktif olan vurgulanir), sagda secili kategorinin TEK
   modulu. Eylemler duz satir degil, buyuk ikon madalyonlu KART.
   Uzerine: canli sunucu saati, sayaç animasyonu, 2FA'dan hesaplanan
   koruma halkasi, isaretciyi izleyen spot isigi, konik gradyan
   cerceve, aurora ve tarama cizgisi, arama/filtre.

   NOT — JS OPSIYONEL. `.ax-acp-js` sinifi view'in script'i ile
   EKLENIR; bu sinif olmadan hicbir modul gizlenmez, dort modul de
   alt alta gorunur. `.ax-acp-find` sunucuda `hidden` basili gelir,
   yalnizca JS acar. `.ax-acp-pending` de JS ile eklenir. Script
   calismazsa sayfa tamamen kullanilabilir kalir.
   ========================================================= */

/* --- #box1 bu sayfada bos bir kart olmali; panel kendi cercevesini
       ciziyor. :has() bu projede zaten kullaniliyor (bkz. ax-gd). --- */
.axion-theme #box1:has(> .ax-acp) {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 0;
}

.ax-acp {
    /* --- TEMA PALETI ---------------------------------------------------
       Canli axionmu.com'dan 2026-10-06'da getComputedStyle ile OLCULDU:
         body #050607 | kart #0b0d10 | kizil #e32635 #d51d2d #a91520
         altin #ffd43b | gri #9ca3aa | golge rgba(140,10,20,.2)
       Onceki surumdeki #ff2d46 / #5b9cff / #b18cff / #ffc043 degerlerinin
       HICBIRI temada gecmiyordu; panel bu yuzden ayri bir dil konusuyordu.
       Mavi ve mor tamamen kaldirildi. */
    --axacp-red:     #e32635;
    --axacp-blood:   #a91520;
    --axacp-gold:    #ffd43b;
    --axacp-bronze:  #b8862f;
    --axacp-steel:   #9ca3aa;
    --axacp-panel:   #0b0d10;
    --axacp-panel-2: #15171a;
    --axacp-line:    rgba(255, 255, 255, .07);
    --axacp-line-2:  rgba(255, 255, 255, .13);
    --axacp-muted:   #9ca3aa;
    --axacp-ink:     #050607;
    display: flex;
    flex-direction: column;
    gap: 26px;
    /* moduller arasindaki vurgu rengi; her modul kendi rengini yazar */
    --axacp-x: 50%;
    --axacp-y: 50%;
}

/* --- [hidden] NIYETI BOZULMASIN ---------------------------------------
   Tarayicinin `*[hidden]{display:none}` kurali dusuk specificity'li oldugu
   icin asagidaki `.ax-acp-find{display:flex}` ve `.ax-acp-empty{display:flex}`
   onu EZERDI: JS kapaliyken hem arama kutusu hem "sonuc yok" kutusu
   ekranda gorunuyordu. Bu kural onu geri alir. */
.axion-theme .ax-acp [hidden] { display: none !important; }

/* Vurgu rengi yardimcilari — modul/ray ogeleri bunlari okur.
   Dort modulun rengi artik TEMA paletinden: kizil, altin, bronz, celik.
   Sinif adlari (--blue/--violet) geriye donuk uyum icin korundu;
   gorsel deger degistirildi. */
.ax-acp-hero,
.ax-acp-read--gold   { --axacp-accent: var(--axacp-gold); }
.ax-acp-read--violet { --axacp-accent: var(--axacp-bronze); }
.ax-acp-read--ink    { --axacp-accent: var(--axacp-steel); }

.ax-acp-tile,
.ax-acp-module,
.ax-acp-nav__item { --axacp-accent: var(--axacp-red); }
.ax-acp-module--blue,
.ax-acp-nav__item--blue   { --axacp-accent: var(--axacp-gold); }
.ax-acp-module--gold,
.ax-acp-nav__item--gold   { --axacp-accent: var(--axacp-bronze); }
.ax-acp-module--violet,
.ax-acp-nav__item--violet { --axacp-accent: var(--axacp-steel); }

/* ============================================================
   HERO — kimlik + ekonomi okumasi
   ============================================================ */
/* --- MU/TEMA ZEMINI ---------------------------------------------
   Canli temadaki bölümlerin tamami ayni reçeteyi kullaniyor:
     radial-gradient(circle at 50% 0%, rgba(169,21,32,.12..16), transparent 38-44%)
     linear-gradient(145deg, #15171a 0%, #090a0c 48%, #050506 100%)
   Golge de ayni: 0 12px 35px rgba(140,10,20,.2).
   Kose yuvarlak DEGIL: temada her yerde border-radius:0px olculdu.
   Sol kenarda 3px kizil cubuk + ince kizil kenar, temanin imzasi. */
.axion-theme .ax-acp-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 26px 30px 28px;
    border-radius: 0;
    border: 1px solid rgba(227, 38, 53, .22);
    border-left: 3px solid var(--axacp-red);
    background:
        radial-gradient(circle at 50% 0%, rgba(169, 21, 32, .16), transparent 44%),
        linear-gradient(145deg, #15171a 0%, #090a0c 52%, #050506 100%);
    box-shadow: 0 12px 35px rgba(140, 10, 20, .2);
}

/* Sitenin imza dokusu: iki yonde de ince capraz kafes. Onceki 46px
   teknik izgara + blur(66px) aurora + konik donen cerceve + tarama
   cizgisi KALDIRILDI: bunlar temada hicbir yerde gecmiyordu ve
   paneli "amator" gosteriyordu. */
.axion-theme .ax-acp-hero__grid {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 74px),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 74px);
    mask-image: radial-gradient(88% 92% at 50% 0%, #000 4%, transparent 76%);
    -webkit-mask-image: radial-gradient(88% 92% at 50% 0%, #000 4%, transparent 76%);
    pointer-events: none;
}

/* Hero yerlesimi (2026-10-06 yeniden yazildi).
   SORUN: `.ax-acp-readout` dikey kolon + `min-width:268px` idi; 1300px
   genislikte bir satira sarip SOLA yapisip sagda devasa bosluk
   birakiyordu ("cok fazla gereksiz bosluk"). AYRICA harf madalyonu
   kimlik kartini tekrar ediyordu.
   COZUM: madalyon kaldirildi; okuma kutulari UCBEN sag tarafa
   yatay dizildi. Hero artik tek satirlik, dolu ve kompak. */
.axion-theme .ax-acp-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
}

.axion-theme .ax-acp-hero__id {
    flex: 1 1 100%;
    min-width: 0;
}

.axion-theme .ax-acp-hero__say { min-width: 0; }

/* --- Harf madalyonu KALDIRILDI -----------------------------------------
   Kullanici geri bildirimi: "A yazan logo cok cirkin duruyor". Madalyon
   ayrica asagidaki kimlik kartinin (ad/e-posta/rank/VIP/2FA + koruma
   halkasi) TEKRARIYDI. Kaldirildi; `.ax-acp-avatar`,
   `.ax-acp-avatar__ring`, `.ax-acp-avatar__letter` kurallari ve
   `axacp-spin`/`axacp-beat` animasyonlarinin bu kullanimi gitti.
   ------------------------------------------------------- */

/* --- Hero metin alani --- */
.axion-theme .ax-acp-hero__kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

/* Temadaki "Server Online" kutusuyla ayni: keski kose, ince kizil kenar,
   sol kizil cubuk. Onceki 999px hap + cam efekti temada yok. */
.axion-theme .ax-acp-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 10px;
    border-radius: 0;
    border: 1px solid rgba(227, 38, 53, .38);
    border-left: 2px solid var(--axacp-red);
    background: rgba(227, 38, 53, .09);
    color: #ff8b9b;
    letter-spacing: .22em;
}

.axion-theme .ax-acp-live i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--axacp-red);
    box-shadow: 0 0 0 0 rgba(227, 38, 53, .7);
    animation: axacp-pulse 1.9s ease-out infinite;
}

/* Baslik artik temadaki gibi DUZ: Cinzel 700, #e2e5e8, ls 2px.
   (onceki gradient+shimmer "acik renkli parlar metal" idi) */
.axion-theme .ax-acp-hero__title {
    margin: 0 0 6px;
    font-family: 'Cinzel', serif;
    font-size: clamp(26px, 3.1vw, 40px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #e2e5e8;
}

/* Hero'nun sol kizil cubugu mobilde kart yapisina uymuyordu. */
@media (max-width: 640px) {
    .axion-theme .ax-acp-hero { border-left-width: 1px; }
    .axion-theme .ax-acp-idcard,
    .axion-theme .ax-acp-module { border-left-width: 1px; }
}

.axion-theme .ax-acp-hero__sub {
    margin: 0 0 18px;
    font-size: 14.5px;
    color: var(--axacp-muted);
}

.axion-theme .ax-acp-hero__sub strong {
    color: #fff;
    font-weight: 600;
}

.axion-theme .ax-acp-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.axion-theme .ax-acp-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border-radius: 0;
    border: 1px solid var(--axacp-line);
    background: rgba(255, 255, 255, .028);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
}

.axion-theme .ax-acp-chip i { color: var(--axacp-red); font-size: 11px; }

/* --- Hero sag: ekonomi okumasi (eski 6 ozet kartinin yerini alir) --- */
/* Okuma alani HER genislikte tam satir (flex-basis 100%) olur.
   Denendi: id blogu + okuma kutulari yan yana. Baslik Cinzel 46px oldugu
   icin id'nin min-content genisligi okuma alanini tasiriyordu, sarmalama
   olunca da saga bosluk kaliyordu. Tam satir: 3 plaka kenar kenara
   yayilir, hicbir genislikte bosluk olusmaz. */
.axion-theme .ax-acp-hero__readout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    flex: 1 1 100%;
    max-width: none;
    margin-top: 18px;
}

/* Kompakt dikey istatistik plakası (MU sunucu secim ekranı dili) */
.axion-theme .ax-acp-read {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 5px;
    padding: 13px 15px 14px 17px;
    border-radius: 0;
    border: 1px solid var(--axacp-line);
    background: linear-gradient(155deg, #101318 0%, #0a0b0e 100%);
    overflow: hidden;
    transition: transform .4s var(--axacp-ease), border-color .4s var(--axacp-ease);
}

/* Sol kenardaki vurgu cubugu */
.axion-theme .ax-acp-read::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    border-radius: 0;
    background: var(--axacp-accent);
    box-shadow: 0 0 16px var(--axacp-accent);
}

.axion-theme .ax-acp-read:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--axacp-accent) 48%, transparent);
}

.axion-theme .ax-acp-read__icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 0;
    display: grid;
    place-items: center;
    font-size: 14px;
    color: var(--axacp-accent);
    background: color-mix(in srgb, var(--axacp-accent) 15%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--axacp-accent) 30%, transparent);
}

.axion-theme .ax-acp-read__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.axion-theme .ax-acp-read__label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .46);
}

.axion-theme .ax-acp-read__value {
    font-family: 'Cinzel', serif;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.axion-theme .ax-acp-read__value--time {
    font-size: 19px;
    letter-spacing: .04em;
    color: var(--axacp-accent);
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   GOVDE — ray + sahne
   ============================================================ */
.axion-theme .ax-acp-body {
    display: grid;
    grid-template-columns: 306px minmax(0, 1fr);
    gap: 26px;
    align-items: start;
}

.axion-theme .ax-acp-rail {
    position: sticky;
    top: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.axion-theme .ax-acp-stage {
    display: flex;
    flex-direction: column;
    gap: 26px;
    min-width: 0;
}

/* ============================================================
   KIMLIK KARTI — kullanici + koruma halkasi
   ============================================================ */
.axion-theme .ax-acp-idcard {
    position: relative;
    padding: 20px;
    border-radius: 0;
    border: 1px solid var(--axacp-line);
    border-left: 3px solid var(--axacp-red);
    background:
        radial-gradient(120% 100% at 8% 0%, rgba(169, 21, 32, .12), transparent 58%),
        linear-gradient(145deg, #0f1114 0%, #0b0d10 55%, #08090c 100%);
    box-shadow: 0 12px 35px rgba(140, 10, 20, .18);
    overflow: hidden;
    transition: transform .45s var(--axacp-ease), border-color .45s var(--axacp-ease);
}

/* Imleci izleyen isik lekesi */
.axion-theme .ax-acp-idcard__glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(230px 230px at var(--axacp-x) var(--axacp-y),
        rgba(227, 38, 53, .10), transparent 72%);
    opacity: 0;
    transition: opacity .4s var(--axacp-ease);
    pointer-events: none;
}

.axion-theme .ax-acp-idcard:hover { transform: translateY(-3px); border-color: var(--axacp-line-2); }
.axion-theme .ax-acp-idcard:hover .ax-acp-idcard__glow { opacity: 1; }

.axion-theme .ax-acp-idcard__top {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 17px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--axacp-line);
}

/* --- Koruma halkasi: gercek 2FA ayarindan hesaplanan yuzde --- */
.axion-theme .ax-acp-guard {
    position: relative;
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.axion-theme .ax-acp-guard__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(var(--axacp-gold) var(--axacp-guard),
        rgba(255, 255, 255, .09) var(--axacp-guard));
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
    animation: axacp-spin 7s linear infinite;
}

.axion-theme .ax-acp-guard.is-full .ax-acp-guard__ring {
    background: conic-gradient(var(--axacp-red) var(--axacp-guard),
        rgba(255, 255, 255, .09) var(--axacp-guard));
}

.axion-theme .ax-acp-guard.is-full .ax-acp-guard__num {
    color: var(--axacp-red);
    text-shadow: 0 0 16px rgba(227, 38, 53, .55);
}

.axion-theme .ax-acp-guard__num {
    position: relative;
    z-index: 2;
    font-family: 'Cinzel', serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--axacp-gold);
    text-shadow: 0 0 16px rgba(255, 212, 59, .45);
}

.axion-theme .ax-acp-idcard__who {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.axion-theme .ax-acp-idcard__name {
    font-family: 'Cinzel', serif;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.axion-theme .ax-acp-idcard__mail {
    font-size: 11.5px;
    color: var(--axacp-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.axion-theme .ax-acp-idcard__rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.axion-theme .ax-acp-kv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 13px;
    border-radius: 0;
    background: rgba(255, 255, 255, .032);
    font-size: 11.5px;
    text-decoration: none;
    transition: background .35s var(--axacp-ease);
}

.axion-theme .ax-acp-kv__k {
    color: rgba(255, 255, 255, .5);
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
}

.axion-theme .ax-acp-kv__v {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    font-weight: 600;
    text-align: right;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.axion-theme .ax-acp-kv--link:hover { background: rgba(227, 38, 53, .12); }
.axion-theme .ax-acp-kv--link:hover .ax-acp-kv__v { color: #ff8b9b; }
.axion-theme .ax-acp-kv--link .ax-acp-kv__v i { font-size: 10px; transition: transform .35s var(--axacp-ease); }
.axion-theme .ax-acp-kv--link:hover .ax-acp-kv__v i { transform: translateX(4px); }

.axion-theme .ax-acp-kv__v--ok { color: #7ee0a8; }
.axion-theme .ax-acp-kv__v--warn { color: var(--axacp-gold); }

/* ============================================================
   KATEGORI RAYI
   ============================================================ */
.axion-theme .ax-acp-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.axion-theme .ax-acp-nav__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 15px;
    border-radius: 0;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, .022);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    overflow: hidden;

    /* content.css @343'teki global `button, .button` kurali:
       height:40px; width:147px; box-shadow; letter-spacing:2px;
       font-family:"Philosopher"; text-transform:uppercase.
       `height` ve `box-shadow` burada hic gecersiz kilinmazsa
       kategori butonlari 40px'e kilitlenir ve mobilde baslik/alt
       metin `overflow:hidden` tarafindan kirpilir (olcerek dogrulandi).
       Tamamı burada sifirlaniyor; .is-active kendi golgesini yazar. */
    height: auto;
    box-shadow: none;
    letter-spacing: normal;
    text-transform: none;
    font-family: inherit;

    transition: transform .4s var(--axacp-ease), background .4s var(--axacp-ease),
                border-color .4s var(--axacp-ease), box-shadow .4s var(--axacp-ease);
}

.axion-theme .ax-acp-nav__item:hover {
    transform: translateX(4px);
    background: rgba(255, 255, 255, .05);
    border-color: var(--axacp-line);
}

.axion-theme .ax-acp-nav__item:focus-visible {
    outline: 2px solid var(--axacp-accent);
    outline-offset: 2px;
}

.axion-theme .ax-acp-nav__item.is-active {
    background: linear-gradient(96deg,
        color-mix(in srgb, var(--axacp-accent) 20%, transparent), rgba(255, 255, 255, .028));
    border-color: color-mix(in srgb, var(--axacp-accent) 45%, transparent);
    box-shadow: 0 12px 30px rgba(140, 10, 20, .22);
}

/* Aktif olanin solunda beliren isik cubugu */
.axion-theme .ax-acp-nav__item::before {
    content: '';
    position: absolute;
    left: 0; top: 16%; bottom: 16%;
    width: 3px;
    border-radius: 0;
    background: var(--axacp-accent);
    box-shadow: 0 0 18px var(--axacp-accent);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform .45s var(--axacp-ease);
}

.axion-theme .ax-acp-nav__item.is-active::before { transform: scaleY(1); }

.axion-theme .ax-acp-nav__glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(200px 200px at var(--axacp-x) var(--axacp-y),
        color-mix(in srgb, var(--axacp-accent) 22%, transparent), transparent 70%);
    opacity: 0;
    transition: opacity .4s var(--axacp-ease);
    pointer-events: none;
}

.axion-theme .ax-acp-nav__item:hover .ax-acp-nav__glow { opacity: 1; }

.axion-theme .ax-acp-nav__icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 0;
    display: grid;
    place-items: center;
    font-size: 16px;
    color: var(--axacp-accent);
    background: color-mix(in srgb, var(--axacp-accent) 13%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--axacp-accent) 26%, transparent);
    transition: transform .45s var(--axacp-ease), box-shadow .45s var(--axacp-ease);
}

.axion-theme .ax-acp-nav__item:hover .ax-acp-nav__icon { transform: scale(1.08) rotate(-4deg); }

.axion-theme .ax-acp-nav__item.is-active .ax-acp-nav__icon {
    background: color-mix(in srgb, var(--axacp-accent) 26%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--axacp-accent) 55%, transparent),
                0 0 22px color-mix(in srgb, var(--axacp-accent) 45%, transparent);
}

.axion-theme .ax-acp-nav__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.axion-theme .ax-acp-nav__title {
    font-family: 'Cinzel', serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    /* onceki nowrap/ellipsis "ACCOUNT & SEC..." gibi kesiyordu;
       288px'lik rayda baslik 2 satira sigiyor. */
    overflow-wrap: break-word;
}

.axion-theme .ax-acp-nav__note {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 10.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .42);
}

.axion-theme .ax-acp-nav__count {
    flex: 0 0 auto;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    border-radius: 0;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--axacp-accent);
    background: color-mix(in srgb, var(--axacp-accent) 16%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--axacp-accent) 32%, transparent);
}

/* JS acikken imlecler buton gibi davranir (role=tab yoksa bile anlamli).

   DIKKAT: `.ax-acp-js` sinifi `.ax-acp` UZERINDE, `.axion-theme` ise
   `<body>` uzerindedir. Yani `.ax-acp-js .axion-theme ...` yazimi HIC
   BIR ZAMAN eslesmez (birinin digerinin torunu olmasi gerekir) ve
   modul gizleme sessizce calismaz — dort modul de ekranda kalir.
   Bu blokta `.ax-acp-js` ile eslesen cocuklar dogrudan yazildi. */
.ax-acp-js .ax-acp-nav__item { -webkit-appearance: none; appearance: none; }

/* ============================================================
   ARAMA / FILTRE
   ============================================================ */
.axion-theme .ax-acp-find {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 15px;
    border-radius: 0;
    border: 1px solid var(--axacp-line);
    background: rgba(255, 255, 255, .035);
    transition: border-color .4s var(--axacp-ease), box-shadow .4s var(--axacp-ease);
}

.axion-theme .ax-acp-find:focus-within {
    border-color: rgba(227, 38, 53, .5);
    box-shadow: 0 0 0 3px rgba(227, 38, 53, .12);
}

.axion-theme .ax-acp-find > i {
    font-size: 13px;
    color: rgba(255, 255, 255, .38);
    flex: 0 0 auto;
}

.axion-theme .ax-acp-find__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 13px;
}

.axion-theme .ax-acp-find__input::placeholder { color: rgba(255, 255, 255, .34); }

/* tarayici varsayilanindaki temizleme dugmesini gizle */
.axion-theme .ax-acp-find__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.axion-theme .ax-acp-find__count {
    flex: 0 0 auto;
    min-width: 26px;
    height: 24px;
    padding: 0 8px;
    border-radius: 0;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--axacp-gold);
    background: rgba(255, 212, 59, .12);
    box-shadow: inset 0 0 0 1px rgba(255, 212, 59, .28);
}

.axion-theme .ax-acp-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0;
    padding: 46px 24px;
    border-radius: 0;
    border: 1px dashed var(--axacp-line-2);
    background: rgba(255, 255, 255, .02);
    color: var(--axacp-muted);
    font-size: 14px;
}

.axion-theme .ax-acp-empty i { color: var(--axacp-red); }

/* ============================================================
   MODUL — bir kategorinin tam icerigi
   ============================================================ */
.axion-theme .ax-acp-module {
    position: relative;
    padding: 30px 30px 32px;
    border-radius: 0;
    border: 1px solid var(--axacp-line);
    border-left: 3px solid color-mix(in srgb, var(--axacp-accent) 70%, transparent);
    background:
        radial-gradient(120% 130% at 100% 0%,
            color-mix(in srgb, var(--axacp-accent) 9%, transparent), transparent 56%),
        linear-gradient(145deg, #0f1114 0%, #0b0d10 55%, #08090c 100%);
    box-shadow: 0 12px 35px rgba(0, 0, 0, .38);
    overflow: hidden;
}

/* JS varken yalnizca secili modul gorunur. JS YOKSA bu kural hic
   uygulanmaz — dort modul alt alta normal sekilde durur.
   (`.ax-acp-js` `.ax-acp` uzerinde oldugu icin `.axion-theme` oneki
   buraya YAZILMAZ; bkz. yukaridaki not.) */
.ax-acp-js .ax-acp-module { display: none; }
.ax-acp-js .ax-acp-module.is-open { display: block; animation: axacp-module-in .5s var(--axacp-ease) both; }

/* Modul basliginin uzerinden gecen isik huzmesi */
.axion-theme .ax-acp-module__beam {
    position: absolute;
    top: -60%;
    left: -30%;
    width: 46%;
    height: 220%;
    background: linear-gradient(90deg, transparent,
        color-mix(in srgb, var(--axacp-accent) 16%, transparent), transparent);
    transform: rotate(14deg);
    animation: axacp-beam 7s ease-in-out infinite;
    pointer-events: none;
}

.axion-theme .ax-acp-module__head {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 19px;
    padding-bottom: 24px;
    margin-bottom: 26px;
    border-bottom: 1px solid var(--axacp-line);
}

.axion-theme .ax-acp-module__medal {
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    border-radius: 0;
    display: grid;
    place-items: center;
    font-size: 23px;
    color: var(--axacp-accent);
    background: color-mix(in srgb, var(--axacp-accent) 14%, transparent);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--axacp-accent) 34%, transparent),
        0 10px 28px color-mix(in srgb, var(--axacp-accent) 22%, transparent);
    animation: axacp-medal 6s ease-in-out infinite;
}

.axion-theme .ax-acp-module__titles { flex: 1 1 auto; min-width: 0; }

.axion-theme .ax-acp-module__title {
    margin: 0 0 5px;
    font-family: 'Cinzel', serif;
    font-size: clamp(19px, 2.1vw, 25px);
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
    letter-spacing: .01em;
}

.axion-theme .ax-acp-module__note {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--axacp-muted);
}

.axion-theme .ax-acp-module__meta {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 9px 17px;
    border-radius: 0;
    background: color-mix(in srgb, var(--axacp-accent) 11%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--axacp-accent) 28%, transparent);
}

.axion-theme .ax-acp-module__hit {
    font-family: 'Cinzel', serif;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: var(--axacp-accent);
    font-variant-numeric: tabular-nums;
}

.axion-theme .ax-acp-module__unit {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .48);
}

/* --- Eylem karti ---
   minimum 300px: daha darinda aciklama tek satira sigmiyor ve
   "Update your account passwo..." gibi kesiliyordu. */
.axion-theme .ax-acp-module__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.axion-theme .ax-acp-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 17px;
    min-height: 104px;
    padding: 20px 20px;
    border-radius: 0;
    border: 1px solid var(--axacp-line);
    background: linear-gradient(140deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transition: transform .45s var(--axacp-ease), border-color .45s var(--axacp-ease),
                box-shadow .45s var(--axacp-ease), opacity .35s var(--axacp-ease);
}

.axion-theme .ax-acp-tile:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--axacp-accent) 50%, transparent);
    box-shadow:
        0 22px 48px rgba(140, 10, 20, .3),
        0 0 0 1px color-mix(in srgb, var(--axacp-accent) 22%, transparent),
        0 0 40px color-mix(in srgb, var(--axacp-accent) 16%, transparent);
}

/* Temanin kart imzasi: sol kenar kizil cubuk (canli temada
   `.character-card` ve okuma kutulari ayni cubugu tasiyor).
   Onceki yuvarlak kartlarda bu imza yoktu. */
.axion-theme .ax-acp-tile::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: color-mix(in srgb, var(--axacp-accent) 62%, transparent);
    transition: background .45s var(--axacp-ease), box-shadow .45s var(--axacp-ease);
}

.axion-theme .ax-acp-tile:hover::before {
    background: var(--axacp-accent);
    box-shadow: 0 0 18px var(--axacp-accent);
}

.axion-theme .ax-acp-tile:focus-visible {
    outline: 2px solid var(--axacp-accent);
    outline-offset: 3px;
}

/* Imleci izleyen spot isigi */
.axion-theme .ax-acp-tile__spot {
    position: absolute;
    inset: 0;
    background: radial-gradient(240px 240px at var(--axacp-x) var(--axacp-y),
        color-mix(in srgb, var(--axacp-accent) 26%, transparent), transparent 70%);
    opacity: 0;
    transition: opacity .4s var(--axacp-ease);
    pointer-events: none;
}

.axion-theme .ax-acp-tile:hover .ax-acp-tile__spot { opacity: 1; }

.axion-theme .ax-acp-tile__icon {
    position: relative;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 0;
    display: grid;
    place-items: center;
    font-size: 20px;
    color: var(--axacp-accent);
    background: color-mix(in srgb, var(--axacp-accent) 13%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--axacp-accent) 26%, transparent);
    transition: transform .5s var(--axacp-ease), box-shadow .5s var(--axacp-ease),
                background .5s var(--axacp-ease);
}

.axion-theme .ax-acp-tile:hover .ax-acp-tile__icon {
    transform: scale(1.1) rotate(-6deg);
    background: color-mix(in srgb, var(--axacp-accent) 24%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--axacp-accent) 52%, transparent),
                0 0 26px color-mix(in srgb, var(--axacp-accent) 42%, transparent);
}

.axion-theme .ax-acp-tile__text {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 auto;
    min-width: 0;
}

.axion-theme .ax-acp-tile__title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: 'Cinzel', serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
}

.axion-theme .ax-acp-tile__badge {
    padding: 3px 8px;
    border-radius: 0;
    font-family: inherit;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .16em;
    color: #fff;
    background: var(--axacp-red);
    box-shadow: 0 0 14px rgba(227, 38, 53, .4);
}

/* aciklama en fazla 2 satir: kesilme yerine tam gorunsun */
.axion-theme .ax-acp-tile__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--axacp-muted);
}

.axion-theme .ax-acp-tile__go {
    position: relative;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 0;
    display: grid;
    place-items: center;
    font-size: 11px;
    color: rgba(255, 255, 255, .3);
    border: 1px solid var(--axacp-line);
    transition: transform .45s var(--axacp-ease), color .45s var(--axacp-ease),
                background .45s var(--axacp-ease), border-color .45s var(--axacp-ease);
}

.axion-theme .ax-acp-tile:hover .ax-acp-tile__go {
    transform: translateX(5px);
    color: #fff;
    background: var(--axacp-accent);
    border-color: var(--axacp-accent);
    box-shadow: 0 0 20px color-mix(in srgb, var(--axacp-accent) 60%, transparent);
}

/* Arama sirasinda eslesmeyen kart soluklasir (gizlenmez). */
.axion-theme .ax-acp-tile.is-muted {
    opacity: .2;
    filter: grayscale(.85);
    transform: none;
}

/* Filtrelemede sonucu olmayan modul yatay kisilir. */
.axion-theme .ax-acp-module.is-filtered .ax-acp-module__grid { display: none; }
.axion-theme .ax-acp-module.is-filtered .ax-acp-module__beam { animation: none; opacity: .3; }

/* ============================================================
   ANIMASYONLAR
   ------------------------------------------------------------
   axacp-shimmer / axacp-scan / axacp-drift / axacp-float-a|b|c
   KALDIRILDI: bunlar aurora, tarama cizgisi, konik donen cerceve ve
   46px izgara gibi temada gecmeyen katmanlara aitti. Artik hicbir
   kural onlari cagramiyor; olu kod birakildi.
   ============================================================ */
.ax-acp { --axacp-ease: cubic-bezier(.22, .68, .32, 1); }

@keyframes axacp-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(227, 38, 53, .65); }
    70%  { box-shadow: 0 0 0 11px rgba(227, 38, 53, 0); }
    100% { box-shadow: 0 0 0 0 rgba(227, 38, 53, 0); }
}

@keyframes axacp-spin {
    to { transform: rotate(360deg); }
}

@keyframes axacp-beat {
    0%, 72%, 100% { opacity: .55; transform: scale(1); }
    80%           { opacity: 1;   transform: scale(1.07); }
}
/* axacp-beat artik kullanilmiyor (avatar madalyonu kaldirildi);
   asagidaki koruma halkasi yalnizca axacp-spin kullanir. Biriakildi. */

@keyframes axacp-beam {
    0%, 100% { left: -34%; opacity: 0; }
    35%      { opacity: 1; }
    70%      { left: 96%; opacity: 0; }
}

@keyframes axacp-medal {
    0%, 100% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--axacp-accent) 34%, transparent),
                             0 10px 28px color-mix(in srgb, var(--axacp-accent) 22%, transparent); }
    50%      { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--axacp-accent) 58%, transparent),
                             0 14px 36px color-mix(in srgb, var(--axacp-accent) 40%, transparent); }
}

@keyframes axacp-module-in {
    from { opacity: 0; transform: translateY(16px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

/* Gorunume girince: .ax-acp-pending JS ile eklenir, CSS varsayilan
   olarak HICBIR seyi gizlemez. */
.axion-theme .ax-acp-pending {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s var(--axacp-ease), transform .7s var(--axacp-ease);
}

.axion-theme .ax-acp-pending.is-in {
    opacity: 1;
    transform: none;
}

/* ============================================================
   DUYARLI
   ============================================================ */
@media (max-width: 1080px) {
    .axion-theme .ax-acp-body { grid-template-columns: minmax(0, 1fr); }

    /* Ray yatay serit haline gelir. Onceki surumde yatay KAYDIRILABILIR
       bir seritti ve ekranda tek kategori gorunuyordu; kullanici digerlerinin
       varligindan haberdar olamiyordu. Simdi dortlu izgara: butun
       kategoriler ayni anda gorunur. */
    .axion-theme .ax-acp-rail {
        position: static;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .axion-theme .ax-acp-nav {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    .axion-theme .ax-acp-nav__item {
        flex-direction: column;
        gap: 10px;
        min-width: 0;
        padding: 14px;
    }

    /* Kolon dizilimde baslik/not kartin tam genisligine yayilsin;
       `flex:0 0 auto` de metnin yatayda sikistirilmasini engeller.
       (Basliklarin 40px'te kirpilmasinin sebebi BU degil; asagidaki
       global `button{height:40px}` kuraliydi, ana kuralda sifirlaniyor.) */
    .axion-theme .ax-acp-nav__text {
        flex: 0 0 auto;
        width: 100%;
    }

    .axion-theme .ax-acp-nav__count {
        position: absolute;
        top: 12px;
        right: 12px;
    }

    .axion-theme .ax-acp-nav__item:hover { transform: translateY(-3px); }
    .axion-theme .ax-acp-nav__item::before { top: auto; left: 16%; right: 16%; bottom: 0; width: auto; height: 3px;
        transform: scaleX(0); }
    .axion-theme .ax-acp-nav__item.is-active::before { transform: scaleX(1); }
}

@media (max-width: 900px) {
    .axion-theme .ax-acp-hero { padding: 26px 24px; }
    .axion-theme .ax-acp-hero__inner { gap: 22px; }
    .axion-theme .ax-acp-hero__readout { margin-top: 14px; }
    .axion-theme .ax-acp-read:hover { transform: translateY(-3px); }
    .axion-theme .ax-acp-module { padding: 24px 22px 26px; }
}

@media (max-width: 640px) {
    .axion-theme .ax-acp { gap: 20px; }

    .axion-theme .ax-acp-hero { padding: 22px 16px 24px; border-radius: 0; }
    .axion-theme .ax-acp-hero__id { flex: 1 1 100%; }
    .axion-theme .ax-acp-hero__title { font-size: 26px; }
    .axion-theme .ax-acp-hero__sub { font-size: 13px; margin-bottom: 14px; }
    .axion-theme .ax-acp-chip { padding: 7px 12px; font-size: 11px; }

    /* Telefonda da TEK satir: once 2+1 (saat tam genislikte) iki satira
       sarip hero'yu 413px'e siyiriyordu — "gereksiz bosluk" sikayetinin
       mobildeki kaynagi. Artik uc plaka yan yana, tek satirda. */
    .axion-theme .ax-acp-hero__readout {
        margin-top: 12px;
        gap: 7px;
    }
    .axion-theme .ax-acp-read { padding: 10px 10px 11px 12px; gap: 4px; }
    .axion-theme .ax-acp-read__icon { width: 22px; height: 22px; font-size: 11px; }
    .axion-theme .ax-acp-read__label { font-size: 7.5px; letter-spacing: .1em; }
    .axion-theme .ax-acp-read__value { font-size: 16px; }
    .axion-theme .ax-acp-read__value--time { font-size: 14px; letter-spacing: 0; }
    .axion-theme .ax-acp-read:hover { transform: none; }

    /* 4 kart yan yana sigmaz -> 2x2 */
    .axion-theme .ax-acp-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .axion-theme .ax-acp-nav__item { padding: 12px 12px 13px; }
    .axion-theme .ax-acp-nav__note { -webkit-line-clamp: 3; }

    /* modul basligindaki "3 ACTIONS" rozeti tek basina bir satir
       tutuyordu; yatay ve saga yaslanmis olarak daraltildi. */
    .axion-theme .ax-acp-module__meta {
        flex-direction: row;
        align-items: baseline;
        gap: 7px;
        margin-left: auto;
        padding: 7px 13px;
    }
    .axion-theme .ax-acp-module__hit { font-size: 17px; }
    .axion-theme .ax-acp-module__unit { font-size: 8px; }

    .axion-theme .ax-acp-module { padding: 20px 15px 22px; border-radius: 0; }
    .axion-theme .ax-acp-module__head { flex-wrap: wrap; gap: 14px; }
    .axion-theme .ax-acp-module__medal { width: 48px; height: 48px; font-size: 19px; }
    .axion-theme .ax-acp-module__title { font-size: 18px; }
    .axion-theme .ax-acp-module__note { font-size: 12px; }

    .axion-theme .ax-acp-module__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }

    .axion-theme .ax-acp-tile { min-height: 88px; padding: 16px; gap: 14px; }
    .axion-theme .ax-acp-tile__icon { width: 44px; height: 44px; font-size: 17px; }
    .axion-theme .ax-acp-tile__title { font-size: 15px; }
    .axion-theme .ax-acp-tile__desc { -webkit-line-clamp: 3; font-size: 11.5px; }
}

/* ============================================================
   ERISILEBILIRLIK — hareket azaltma tercihi olanlar icin
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .axion-theme .ax-acp *,
    .axion-theme .ax-acp *::before,
    .axion-theme .ax-acp *::after {
        animation: none !important;
        transition: none !important;
    }

    .axion-theme .ax-acp-pending {
        opacity: 1;
        transform: none;
    }
}/* ============================================================
   ULKE BAYRAGI MODALI (#axacp-country-modal) — view.index.php (g)
   ------------------------------------------------------------
   Tema recetesi: radius 0, siyah-kizil yuzey, sol 3px kizil
   cubuk, Cinzel baslik — aksiyon kartlariyla ayni dil.
   NOT: modal `hidden` ile baslar ve JS `hidden = false` ile
   acar; asagidaki [hidden] korumasi olmadan `display:flex`
   kurali gizlemeyi ezer (JS kapaliyken kutu ekranda kalirdi).
   ============================================================ */

.axion-theme .ax-acp-modal[hidden] { display: none !important; }

.axion-theme .ax-acp-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
}

.axion-theme .ax-acp-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 4, 5, .82);
    backdrop-filter: blur(4px);
}

.axion-theme .ax-acp-modal__panel {
    position: relative;
    width: min(430px, 100%);
    max-height: calc(100vh - 44px);
    overflow: auto;
    padding: 30px 30px 26px;
    border-radius: 0;
    border: 1px solid #d51d2d;
    border-left: 3px solid var(--axacp-red, #e32635);
    background: linear-gradient(145deg, #15171a, #090a0c 55%, #050506);
    box-shadow:
        0 30px 80px rgba(140, 10, 20, .35),
        0 0 0 1px rgba(227, 38, 53, .12),
        0 0 46px rgba(169, 21, 32, .16);
}

/* ust kenarda ince kizil isi — panelin madalyon imzasi */
.axion-theme .ax-acp-modal__panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #e32635, transparent);
}

.axion-theme .ax-acp-modal__x {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 0;
    border: 1px solid rgba(255, 255, 255, .13);
    background: rgba(255, 255, 255, .04);
    color: #9ca3aa;
    cursor: pointer;
    transition: color .25s, border-color .25s, box-shadow .25s;
}

.axion-theme .ax-acp-modal__x:hover {
    color: #fff;
    border-color: #d51d2d;
    box-shadow: 0 0 14px rgba(227, 38, 53, .3);
}

.axion-theme .ax-acp-modal__kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font: 600 10px/1 'Inter', sans-serif;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #e32635;
}

.axion-theme .ax-acp-modal__title {
    margin: 0 0 8px;
    font-family: 'Cinzel', serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #f4f5f7;
}

.axion-theme .ax-acp-modal__hint {
    margin: 0 0 18px;
    font-size: 12.5px;
    line-height: 1.55;
    color: #9ca3aa;
}

.axion-theme .ax-acp-modal__now {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
    border-radius: 0;
    border: 1px solid rgba(255, 255, 255, .07);
    border-left: 3px solid #d51d2d;
    background: rgba(227, 38, 53, .06);
}

.axion-theme .ax-acp-modal__cur { display: flex; flex-direction: column; gap: 2px; }
.axion-theme .ax-acp-modal__cur b { font-size: 13.5px; color: #f4f5f7; }
.axion-theme .ax-acp-modal__cur i {
    font-style: normal;
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9ca3aa;
}

.axion-theme .ax-acp-modal__label {
    display: block;
    margin: 0 0 7px;
    font: 600 10px/1 'Inter', sans-serif;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #9ca3aa;
}

.axion-theme .ax-acp-modal__select { position: relative; }

.axion-theme .ax-acp-modal__selbadge {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    pointer-events: none;
}

.axion-theme .ax-acp-modal__select select {
    width: 100%;
    padding: 12px 38px 12px 44px;
    border-radius: 0;
    border: 1px solid rgba(255, 255, 255, .13);
    background: #0b0d10;
    color: #f4f5f7;
    font: 500 14px/1.2 'Inter', sans-serif;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color .25s, box-shadow .25s;
}

.axion-theme .ax-acp-modal__select select:focus-visible {
    outline: none;
    border-color: #e32635;
    box-shadow: 0 0 0 2px rgba(227, 38, 53, .22);
}

.axion-theme .ax-acp-modal__select option {
    background: #0b0d10;
    color: #f4f5f7;
}

.axion-theme .ax-acp-modal__select .fa-chevron-down {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: #9ca3aa;
    pointer-events: none;
}

/* f16 sprite modal icinde de tek satir dursun */
.axion-theme .ax-acp-modal .f16 { display: inline-block; line-height: 0; }

.axion-theme .ax-acp-modal__actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.axion-theme .ax-acp-modal__actions .ax-acp-btn { flex: 1; }

.axion-theme .ax-acp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 0;
    border: 1px solid transparent;
    font: 700 12px/1 'Inter', sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .25s, box-shadow .25s, background .25s, color .25s;
}

.axion-theme .ax-acp-btn--red {
    border-color: #d51d2d;
    background: linear-gradient(145deg, #e32635, #a91520);
    color: #fff;
}

.axion-theme .ax-acp-btn--red:hover {
    border-color: #e32635;
    box-shadow: 0 0 20px rgba(227, 38, 53, .4);
}

.axion-theme .ax-acp-btn--ghost {
    border-color: rgba(255, 255, 255, .16);
    background: transparent;
    color: #9ca3aa;
}

.axion-theme .ax-acp-btn--ghost:hover {
    color: #f4f5f7;
    border-color: rgba(255, 255, 255, .34);
}

.axion-theme .ax-acp-btn:focus-visible {
    outline: 2px solid #e32635;
    outline-offset: 3px;
}

@media (max-width: 767px) {
    .axion-theme .ax-acp-modal { padding: 14px; }
    .axion-theme .ax-acp-modal__panel { padding: 24px 18px 20px; }
    .axion-theme .ax-acp-modal__title { font-size: 19px; }
    .axion-theme .ax-acp-modal__actions { flex-direction: column; }
}