/* ═══════════════════════════════════════════════════════════
   ARKON ONLINE — mobile.css
   Tüm mobil düzeltmeler burada
═══════════════════════════════════════════════════════════ */

/* ── HAMBURGer MENÜ ────────────────────────────────────────── */
.nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    background: rgba(100,55,15,.3);
    border: 1px solid rgba(212,160,32,.3);
    cursor: pointer;
    padding: 8px;
    flex-shrink: 0;
}
.nav-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #d4a020;
    transition: all .3s ease;
    transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Mobile nav panel */
.nav-mobile-panel {
    display: none;
    flex-direction: column;
    background: linear-gradient(180deg, #1a0a00, #120700);
    border-top: 1px solid rgba(212,160,32,.15);
}
.nav-mobile-panel.open { display: flex; }
.nav-mobile-panel a {
    display: block;
    padding: 13px 20px;
    font-family: 'Cinzel', serif;
    font-size: .78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #b09060;
    border-bottom: 1px solid rgba(100,55,15,.3);
    transition: background .2s, color .2s;
}
.nav-mobile-panel a:hover,
.nav-mobile-panel a.active { color: #f0c040; background: rgba(100,55,15,.2); }
.nav-mobile-panel .nm-section {
    padding: 8px 20px 4px;
    font-family: 'Cinzel', serif;
    font-size: .58rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(212,160,32,.4);
    border-bottom: 1px solid rgba(100,55,15,.15);
    background: rgba(0,0,0,.2);
}
.nav-mobile-panel .nm-theme {
    background: linear-gradient(90deg, rgba(200,168,32,.2), rgba(138,96,16,.2));
    color: #f0c040 !important;
}

/* ── ≤ 1010px  WRAPPER TAM GENİŞLİK ────────────────────────── */
@media (max-width: 1010px) {
    .bg-l, .bg-r { display: none; }
    #wrap { width: 100%; border-left: none; border-right: none; box-shadow: none; }
}

/* ── ≤ 900px  TABLET ────────────────────────────────────────── */
@media (max-width: 900px) {
    /* Header */
    .hdr-logo img { width: 220px; }
    .hw { display: none; }

    /* Nav → hamburger */
    #nav > ul { display: none; }
    #nav { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
    .nav-hamburger { display: flex; }

    /* Hero */
    #hero { height: 320px; }
    .hero-title { font-size: 1.8rem; }
    .hero-sub { font-size: .78rem; letter-spacing: 3px; }
    .hero-stats { gap: 8px; flex-wrap: wrap; justify-content: center; }
    .hstat { padding: 6px 12px; }
    .hstat-n { font-size: 1.1rem; }
    .hero-btns { flex-direction: column; align-items: center; gap: 8px; }
    .btn-hero-primary, .btn-hero-ghost { width: 240px; text-align: center; }

    /* Stats strip */
    #stats-strip { flex-wrap: wrap; }
    .sstrip-item { min-width: 50%; border-bottom: 1px solid rgba(100,55,15,.35); }
    .strip-war { min-width: 100%; order: -1; }

    /* Main → tek kolon */
    #main { display: block; }
    #col-l { display: block; width: 100%; border-right: none; }
    #col-r { display: block; width: 100%; border-top: 2px solid #7a4820; }

    /* Faction cards */
    .faction-cards { display: grid; grid-template-columns: repeat(3, 1fr); }
    .fc { }
    .fc:hover { flex: unset; }

    /* Gallery */
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }

    /* How to play */
    .howto-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .hstep:not(:last-child)::after { display: none; }
}

/* ── ≤ 640px  MOBİL ─────────────────────────────────────────── */
@media (max-width: 640px) {
    /* Header logo küçük */
    .hdr-in { padding: 6px 14px 0; }
    .hdr-logo img { width: 170px; }
    .hdr-logo::before, .hdr-logo::after { display: none; }

    /* Hero daha kısa */
    #hero { height: 280px; }
    .hero-eyebrow { font-size: .5rem; letter-spacing: 4px; }
    .hero-title { font-size: 1.5rem; letter-spacing: 3px; }
    .hero-sub { display: none; }
    .hero-stats { gap: 5px; }
    .hstat { padding: 5px 8px; }
    .hstat-n { font-size: .95rem; }
    .hstat-l { font-size: .45rem; }
    .hero-btns { gap: 8px; }
    .btn-hero-primary, .btn-hero-ghost { width: 200px; font-size: .7rem; padding: 10px 20px; }

    /* Stats strip — 2x2 grid */
    #stats-strip { display: grid; grid-template-columns: 1fr 1fr; }
    .sstrip-item { min-width: unset; }
    .strip-war { grid-column: 1 / -1; }

    /* Featured banner */
    .feat-img { height: 170px; }
    .feat-h { font-size: .9rem; }
    .feat-s { display: none; }

    /* Faction cards → 1 kolon */
    .faction-cards { display: flex; flex-direction: column; }
    .fc { width: 100%; }
    .fc-content { height: 120px; padding: 10px; }
    .fc-icon { font-size: 1.4rem; margin-bottom: 3px; }
    .fc-name { font-size: .85rem; }
    .fc-desc { display: none; }
    .fc:hover { flex: unset; }

    /* News items */
    .ni { display: block; padding: 10px 12px; }
    .ni-img { display: block; width: 100%; padding: 0 0 8px 0; }
    .ni-img img { width: 100%; height: 140px; }
    .ni-bd { display: block; }

    /* How to play → 2x2 */
    .howto-steps { grid-template-columns: 1fr 1fr; }
    .hstep { padding: 8px 5px; }
    .hstep-title { font-size: .62rem; }
    .hstep-text { font-size: .72rem; }

    /* Gallery */
    .gallery-grid { grid-template-columns: 1fr; }
    .gitem { aspect-ratio: 16/7; }

    /* Sidebar widgets full width */
    .wgt-b { padding: 10px; }
    .fp { gap: 4px; }
    .fp a { padding: 7px 3px; font-size: .5rem; }
    .fp-ic { font-size: 1rem; }

    /* Countdown */
    .cd-n { font-size: 1.1rem; }
    .cd-l { font-size: .48rem; }

    /* Footer */
    .ftr-row { flex-direction: column; align-items: flex-start; gap: 12px; }
    .ftr-lnk { flex-wrap: wrap; gap: 12px; }

    /* Nav */
}

/* ── ≤ 380px  KÜÇÜK MOBİL ───────────────────────────────────── */
@media (max-width: 380px) {
    .hdr-logo img { width: 140px; }
    #hero { height: 240px; }
    .hero-title { font-size: 1.25rem; }
    .hero-stats { gap: 3px; }
    .hstat { padding: 4px 6px; }
    .hstat-n { font-size: .85rem; }
    .btn-hero-primary, .btn-hero-ghost { width: 180px; font-size: .65rem; }
    .howto-steps { grid-template-columns: 1fr; }
    .hstep:not(:last-child)::after { display: none; }
    .faction-cards { display: flex; flex-direction: column; }
}

/* ── THREE.JS PERFORMANS: MOBİLDE BASIT MOD ─────────────────── */
@media (max-width: 640px) {
    /* Canvas görünür ama Three.js JS'de düşük kalite modunda çalışır */
    #hero-canvas { opacity: .7; }
}