/* ==================================================
   MOBILE CSS – KnightImperia Panel
   Author: ChatGPT
   Only Mobile (max-width: 768px)
================================================== */

@media screen and (max-width: 768px) {

    /* -------------------------
       GLOBAL
    ------------------------- */
    body {
        font-size: 12px;
        overflow-x: hidden;
    }

    /* -------------------------
       HEADER
    ------------------------- */
    .panel-header,
    .panel-footer {
        width: 100% !important;
        height: auto !important;
    }

    .panel-header img,
    .panel-footer img {
        width: 100% !important;
        height: auto !important;
    }

    /* -------------------------
       PANEL LAYOUT
    ------------------------- */
    .panel {
        width: 100% !important;
        padding: 10px !important;
        flex-direction: column !important;
        gap: 12px !important;
        background-size: cover !important;
    }


    /* -------------------------
       CONTENT
    ------------------------- */
    .content {
        width: 100% !important;
        padding: 0 !important;
        min-width: 0 !important;
    }

    /* -------------------------
       HOME BOXES / RANKING
    ------------------------- */
    .home-boxes,
    .ranking-boxes {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .latest-news,
    .server-status,
    .clan-ranking,
    .user-ranking {
        padding: 14px !important;          /* 🔥 boşluğu sıfırla */
        width: 100% !important;
        height: auto !important;
        padding: 80px 20px 20px !important;
        background-size: cover !important;
    }

    /* -------------------------
       TABLES
    ------------------------- */
    .panel-table,
    .rank-table {
        font-size: 11px !important;
    }

    .panel-table th,
    .panel-table td {
        padding: 6px !important;
    }

    /* -------------------------
       STORE
    ------------------------- */
    .store-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* -------------------------
       VOTE REWARD
    ------------------------- */
    .vote-rewards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .vote-btn-box img {
        width: 100% !important;
        height: auto !important;
    }

    /* -------------------------
       INVENTORY
    ------------------------- */
    .inventory-grid {
        grid-template-columns: repeat(6, 42px) !important;
        justify-content: center !important;
    }

@media (max-width: 768px) {

    /* SOLA YAPIŞMAYI TAMAMEN İPTAL ET */
    .menu,
    .menu-wrapper {
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;

        position: relative !important;
        left: 0 !important;
        right: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* MENÜ KAPSAYICI (PNG YOK) */
    .account-menu-decoration {
        width: 100% !important;
        max-width: 420px !important;   /* 🔥 mobilde ortalı kart */
        margin: 10px auto !important;

        position: relative !important;
        left: 0 !important;
        top: 0 !important;

        background: none !important;
        height: auto !important;

        display: block !important;
    }

    /* MENÜ LİSTESİ */
    .account-submenu {
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;

        position: relative !important;
        left: 0 !important;
        top: 0 !important;
    }

    /* MENÜ BUTONLARI */
    .account-submenu a {
        width: 100% !important;
        max-width: 420px !important;

        margin: 6px auto !important;
        padding: 12px 0 !important;

        text-align: center !important;
        font-size: 14px !important;

        display: block !important;
    }

}

 /* =========================
       MENU BUTTON
    ========================= */
    .menu-btn {
        display: block !important;
        width: 160px;
        height: 44px;
        margin: 10px auto;

        background: linear-gradient(#2b2b2b, #151515);
        border: 1px solid #333;
        border-radius: 6px;

        text-align: center;
        line-height: 44px;
        font-size: 14px;
        font-weight: bold;
        color: #ffd77a !important;
        text-decoration: none !important;
    }

    .menu-btn::before {
        content: "☰ MENU";
    }

    /* =========================
       MENU (CLOSED BY DEFAULT)
    ========================= */
    .account-menu-decoration {
        display: none !important;
    }

    /* OPEN STATE */
    .menu-wrapper.open .account-menu-decoration {
        display: block !important;
    }

    /* MENÜ KARTI */
    .account-menu-decoration {
        width: 100% !important;
        max-width: 420px !important;
        margin: 10px auto !important;
        background: none !important;
    }

    .account-submenu a {
        width: 100% !important;
        margin: 6px auto !important;
        padding: 12px 0 !important;
        font-size: 14px !important;
    }

}
/* =========================
       MENU BUTTON STYLE
    ========================= */

    .account-submenu {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        padding: 6px 0 !important;
    }

    .account-submenu a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 44px !important;

        padding: 10px 12px !important;
        margin: 0 !important;

        font-size: 14px !important;
        font-weight: bold !important;
        letter-spacing: .3px !important;

        color: #ffd77a !important;
        text-decoration: none !important;

        background: linear-gradient(#2b2b2b, #151515) !important;
        border: 1px solid #333 !important;
        border-radius: 8px !important;

        text-shadow: 1px 1px 1px #000 !important;
        box-shadow:
            inset 0 0 6px rgba(255,215,122,0.15),
            0 2px 6px rgba(0,0,0,0.6) !important;

        transition: all .15s ease !important;
    }

    /* Hover / Active */
    .account-submenu a:hover,
    .account-submenu a:active {
        background: linear-gradient(#3a2a14, #1a120b) !important;
        border-color: #7a4a20 !important;
        color: #fff3b0 !important;
        transform: scale(1.02);
    }

    /* Aktif sayfa vurgusu (opsiyonel) */
    .account-submenu a.active {
        background: linear-gradient(#5a3a18, #2a1608) !important;
        border-color: #9a6a30 !important;
        color: #fff !important;
        box-shadow:
            inset 0 0 8px rgba(255,215,122,0.5),
            0 0 10px rgba(255,215,122,0.4) !important;
    }

}    
/* -------------------------
       FOOTER
    ------------------------- *

.footer-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}