/* Responsive Design — Neftaria
 * İki çalışma modu:
 *   <html.view-mode-desktop> → masaüstü (varsayılan, 1280px+ tasarım)
 *   <html.view-mode-mobile>  → mobil layout (drawer sidebar, full-screen modal, dokunmatik butonlar)
 *
 * Mobil class'ı KULLANICI seçimine bağlıdır (lobby'de checkbox) — sadece ekran genişliğine değil.
 */

:root {
    --mobile: 480px;
    --tablet: 768px;
    --desktop: 1024px;
    --wide: 1440px;
}

/* ===== ORTAK ===== */
img { max-width: 100%; height: auto; display: block; }

.carousel-card img { width: 100%; height: 100%; object-fit: cover; }
.gh-res-icon, .gh-currency-icon { max-width: 100%; height: auto; }

/* ============================================================
   MOBİL GÖRÜNÜM — <html.view-mode-mobile> aktifken
   ============================================================ */

.view-mode-mobile body {
    overflow-x: hidden;
    font-size: 14px;
}

/* Scale container'ı kapat — mobilde transform ölçeklemesi sorun çıkarır */
.view-mode-mobile #scale-container,
.view-mode-mobile .scale-container {
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    position: static !important;
    transition: none !important; /* layout değişimini anlık yap, transition olmasın */
}

/* ── Navbar: sidebar'lar drawer'a dönsün ── */
.view-mode-mobile .gn-sidebar-left,
.view-mode-mobile .gn-sidebar-right {
    position: fixed;
    top: 60px;
    bottom: 0;
    width: 70px;
    z-index: 9000;
    transition: transform 0.25s ease;
    background: rgba(20, 16, 11, 0.96);
    overflow-y: auto;
    backdrop-filter: blur(8px);
}
.view-mode-mobile .gn-sidebar-left  { left:  0;    transform: translateX(-100%); }
.view-mode-mobile .gn-sidebar-right { right: 0;    transform: translateX(100%); }
.view-mode-mobile .gn-sidebar-left.gn-drawer-open,
.view-mode-mobile .gn-sidebar-right.gn-drawer-open {
    transform: translateX(0);
}

/* Drawer açma butonları (mobil-only) */
.view-mode-mobile .gn-drawer-toggle-left,
.view-mode-mobile .gn-drawer-toggle-right {
    position: fixed;
    top: 8px;
    z-index: 9500;
    width: 44px;
    height: 44px;
    background: rgba(139, 115, 85, 0.9);
    border: 1.5px solid #1a1a1a;
    border-radius: 8px;
    color: #dfc084;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.view-mode-mobile .gn-drawer-toggle-left  { left: 8px; }
.view-mode-mobile .gn-drawer-toggle-right { right: 8px; }
.view-mode-desktop .gn-drawer-toggle-left,
.view-mode-desktop .gn-drawer-toggle-right { display: none; }

/* ── Modal sistemini full-screen yap ── */
.view-mode-mobile .messages-modal,
.view-mode-mobile .reports-modal,
.view-mode-mobile .alliance-modal,
.view-mode-mobile .statistics-modal,
.view-mode-mobile .gold-shop-modal,
.view-mode-mobile #profile-modal,
.view-mode-mobile #settings-modal {
    position: fixed !important;
    inset: 0 !important;
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    border-radius: 0 !important;
}
.view-mode-mobile .reports-card,
.view-mode-mobile .messages-card,
.view-mode-mobile .stats-card,
.view-mode-mobile .alliance-card {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
}

/* ── Tablo'lar yatay kaydırılabilir ── */
.view-mode-mobile .stats-table-container,
.view-mode-mobile .reports-list,
.view-mode-mobile .messages-list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.view-mode-mobile table {
    font-size: 0.8rem;
}

/* ── Harita: tüm ekranı kapla, kontroller büyüsün ── */
.view-mode-mobile #map-canvas,
.view-mode-mobile .map-canvas {
    touch-action: none; /* Tarayıcı pinch/scroll'unu kapat, biz handle ediyoruz */
    width: 100vw !important;
    height: calc(100vh - 60px) !important;
}
.view-mode-mobile .map-toolbar button,
.view-mode-mobile [data-action] {
    min-width: 44px;
    min-height: 44px;
}

/* ── Login/lobby kartları tek sütun ── */
.view-mode-mobile .lobby-container,
.view-mode-mobile .lobby-wrapper {
    grid-template-columns: 1fr !important;
    padding-right: 0 !important;
    padding-left: 8px !important;
}
.view-mode-mobile .panel {
    padding: 12px !important;
}

/* ── Resource bar yatay scroll ── */
.view-mode-mobile .gh-resource-bar,
.view-mode-mobile .gh-resources {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
}

/* ── Toast/Alert daha büyük ── */
.view-mode-mobile #toast-container {
    left: 10px !important;
    right: 10px !important;
    top: 10px !important;
}
.view-mode-mobile .nef-toast {
    max-width: none !important;
    font-size: 0.95rem !important;
}

/* ── Buton minimum dokunma alanı (Apple HIG: 44x44) ── */
.view-mode-mobile button,
.view-mode-mobile .btn,
.view-mode-mobile a.btn,
.view-mode-mobile .nav-btn {
    min-height: 44px;
    padding: 8px 16px;
}

/* ===== MASAÜSTÜ — Mobil-specific element'leri gizle ===== */
.view-mode-desktop .gn-drawer-toggle-left,
.view-mode-desktop .gn-drawer-toggle-right { display: none; }

/* ===== ESKİ MEDIA QUERY'LERİ (yedek, view-mode-mobile yoksa devreye girer) ===== */
@media (max-width: 479px) {
    .hero { min-height: auto; padding: 20px 10px; }
    .carousel-wrapper { max-width: 100%; }
    .carousel-card { width: 200px; height: 200px; }
}