/* ABYS Orbit - Dashboard Styles */
/* Arayüz fontları (Roboto Condensed + Roboto + Ubuntu) — self-host, /fonts/ui/ */
@import url('fonts.css');

:root {
    --primary: #00c8ff;
    --primary-glow: rgba(0, 200, 255, 0.4);
    --secondary: #7b4fff;
    --accent: #ff6b35;
    --gold: #ffd700;
    --green: #00ff88;
    --red: #ff3355;
    --bg-dark: #020408;
    --bg-card: rgba(5, 15, 35, 0.85);
    --bg-panel: rgba(8, 20, 50, 0.9);
    --border-glow: rgba(0, 200, 255, 0.3);
    --border-dim: rgba(0, 150, 200, 0.15);
    --text-primary: #e8f4ff;
    /* Arka plan görseli üstünde okunabilirlik için parlatıldı (eski: .7 / .5) */
    --text-secondary: rgba(216, 230, 250, 0.95);
    --text-muted: rgba(184, 204, 230, 0.86);
    /* 'AbysName': şekilli pilot/klan adı glifleri — bkz css/fonts.css.
       Zincire fallback olarak eklenir; unicode-range ile ancak gerekince iner (düz isim = 0 bayt). */
    --font-hud: 'Roboto Condensed', 'Ubuntu', 'AbysName', sans-serif;
    --font-body: 'Ubuntu', 'Roboto', 'AbysName', sans-serif;
    --font-mono: 'Roboto Condensed', 'Ubuntu', 'AbysName', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background: var(--bg-dark);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
}

#starCanvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: rgba(0,10,30,0.5); }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 3px; }

/* ===== DASHBOARD LAYOUT ===== */
.dash-wrapper {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ── TOP NAV BAR ── */
.dash-topbar {
    position: sticky;
    top: 0;
    z-index: 200;
    height: 56px;
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, rgba(0,5,25,0.98), rgba(0,5,25,0.9));
    border-bottom: 1px solid var(--border-dim);
    backdrop-filter: blur(12px);
    padding: 0 16px;
    gap: 0;
}
.dash-topbar::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary), var(--secondary), var(--primary), transparent);
    opacity: 0.5;
}

.topbar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 16px;
    text-decoration: none;
}
.topbar-logo img { height: 36px; filter: drop-shadow(0 0 8px var(--primary)); }

/* Player ID strip */
.topbar-player-id {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    padding-right: 20px;
    border-right: 1px solid var(--border-dim);
    margin-right: 16px;
}
.topbar-player-id span { color: var(--primary); }

/* Signal bars */
.signal-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 18px;
    margin-right: 20px;
}
.signal-bar {
    width: 4px;
    background: var(--primary);
    border-radius: 1px;
    box-shadow: 0 0 4px var(--primary);
}

/* Currency strip */
.topbar-currency {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}
.currency-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 12px;
}
.currency-item .icon { font-size: 14px; }
.currency-item .amount { color: var(--text-primary); }
.currency-item.credits .icon { color: #00d4ff; }
.currency-item.orbidium .icon { color: #a078ff; }

/* Real currency icon images */
.currency-icon-img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: drop-shadow(0 0 4px rgba(0, 200, 255, 0.5));
    vertical-align: middle;
    flex-shrink: 0;
}

/* Topbar actions */
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 16px;
    border-left: 1px solid var(--border-dim);
    margin-left: 16px;
}
.topbar-btn {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,20,50,0.6);
    border: 1px solid var(--border-dim);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    transition: all 0.25s;
    text-decoration: none;
}
.topbar-btn:hover { border-color: var(--primary); color: var(--primary); box-shadow: 0 0 10px var(--primary-glow); }
.topbar-btn.red:hover { border-color: var(--red); color: var(--red); box-shadow: 0 0 10px rgba(255,30,60,0.3); }

/* ── SIDE NAV ── */
.dash-body {
    display: flex;
    flex: 1;
}

.side-nav {
    width: 200px;
    flex-shrink: 0;
    background: rgba(0,5,20,0.7);
    border-right: 1px solid var(--border-dim);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 8px;
    backdrop-filter: blur(8px);
}

.nav-section-label {
    font-family: var(--font-hud);
    font-size: 8px;
    letter-spacing: 2px;
    color: var(--text-muted);
    padding: 8px 10px 4px;
    text-transform: uppercase;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.25s;
    font-size: 13px;
    color: var(--text-secondary);
    border: 1px solid transparent;
    position: relative;
    text-decoration: none;
}
.nav-item:hover { background: rgba(0,200,255,0.07); color: var(--text-primary); border-color: var(--border-dim); }
.nav-item.active {
    background: rgba(0,200,255,0.12);
    color: var(--primary);
    border-color: var(--border-glow);
    box-shadow: 0 0 10px rgba(0,200,255,0.1);
}
.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 3px;
    background: var(--primary);
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 8px var(--primary);
}
/* ORBIDIUM = satın alma mağazası → menüde altın renkle ayrışsın (kullanıcı isteği).
   ÜÇ durumu da ezmek ŞART: yalnız normal hâli altın yapılsaydı üstüne gelince
   veya seçilince .nav-item:hover / .nav-item.active kuralları maviye çevirirdi.
   Kimlik seçicisi (#) sınıf kurallarını özgüllükle yener → !important gerekmez. */
#nav-orbidium { color: var(--gold); }
#nav-orbidium:hover {
    background: rgba(255,215,0,0.08);
    color: #ffe680;
    border-color: rgba(255,215,0,0.30);
}
#nav-orbidium.active {
    background: rgba(255,215,0,0.13);
    color: var(--gold);
    border-color: rgba(255,215,0,0.45);
    box-shadow: 0 0 10px rgba(255,215,0,0.13);
}
#nav-orbidium.active::before {
    background: var(--gold);
    box-shadow: 0 0 8px var(--gold);
}
.nav-item .nav-icon { font-size: 15px; width: 20px; text-align: center; }
.nav-badge {
    margin-left: auto;
    background: var(--red);
    color: #fff;
    font-size: 9px;
    padding: 1px 6px;
    border-radius: 10px;
    font-family: var(--font-hud);
}

/* ── MAIN CONTENT ── */
.main-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── PANEL CARD ── */
.panel {
    background: var(--bg-card);
    border: 1px solid var(--border-dim);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.3s;
}
.panel:hover { border-color: var(--border-glow); }
.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: rgba(0,200,255,0.04);
    border-bottom: 1px solid var(--border-dim);
}
.panel-title {
    font-family: var(--font-hud);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--primary);
    text-transform: uppercase;
}
.panel-body { padding: 18px; }

/* Roboto Condensed'de --font-hud varsayılan 400'e düştü (eski Eurostile Cond SADECE bold'du) →
   panel başlıkları + öne çıkan HUD içeriği için kalınlığı (700) geri getir = okunabilirlik */
.panel-title { font-weight: 700; font-size: 12px; }
.stat-value  { font-weight: 700; }
.pilot-info .pilot-name { font-weight: 700; }

/* ── PILOT LICENSE (Dashboard Home) ── */
.pilot-license {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: start;
}
.pilot-avatar {
    width: 80px; height: 80px;
    background: linear-gradient(135deg, rgba(0,100,200,0.3), rgba(100,50,200,0.3));
    border: 2px solid var(--border-glow);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    box-shadow: 0 0 20px var(--primary-glow);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.pilot-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* PREMIUM: profil çerçevesi mavi yerine ALTIN parlasın */
.pilot-avatar.premium {
    background: linear-gradient(135deg, rgba(255,200,40,0.32), rgba(150,95,0,0.32));
    border-color: rgba(255,205,50,0.9);
    box-shadow: 0 0 24px rgba(255,200,40,0.65), inset 0 0 18px rgba(255,200,40,0.18);
}
/* PREMIUM: pilot lisansı detayı 2 SÜTUN — solda alan tablosu, sağda altın PREMIUM kutusu (rozet + bitiş tarihi) */
.pilot-detail-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pilot-detail-row .pilot-detail { flex: 1; }
.pilot-premium-col {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    flex-shrink: 0; padding: 7px 14px; border-radius: 8px;
    background: rgba(80,55,0,0.28); border: 1px solid rgba(255,205,50,0.45);
}
.pilot-premium-col .premium-badge-inline { margin-left: 0; }
.premium-expiry { color: #ffcf3a !important; font-weight: bold; font-size: 11px; text-shadow: 0 0 6px rgba(255,200,40,0.4); }
/* PREMIUM: "Üyelik" satırının sağındaki altın rozet */
.premium-badge-inline {
    display: inline-block; margin-left: 6px;
    font-family: var(--font-hud, sans-serif); font-size: 9px; font-weight: bold;
    letter-spacing: 1px; padding: 1px 7px; border-radius: 4px;
    color: #ffd24a; background: rgba(80,55,0,0.4);
    border: 1px solid rgba(255,200,40,0.55); text-shadow: 0 0 6px rgba(255,200,0,0.5);
    vertical-align: middle;
}
.pilot-company-badge {
    position: absolute;
    bottom: 2px; right: 2px;
    background: rgba(0,0,0,0.8);
    border-radius: 3px;
    padding: 1px 4px;
    font-family: var(--font-hud);
    font-size: 7px;
    color: var(--primary);
}
.pilot-info .pilot-name {
    font-family: var(--font-hud);
    font-size: 18px;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.pilot-detail {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 12px;
    font-size: 12px;
}
.pilot-detail .label { color: var(--text-muted); font-family: var(--font-mono); }
.pilot-detail .value { color: var(--text-secondary); }

/* XP Bar */
.xp-bar-wrap { margin-top: 10px; }
.xp-label { font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); margin-bottom: 4px; display: flex; justify-content: space-between; }
.xp-bar { height: 6px; background: rgba(0,200,255,0.1); border-radius: 3px; overflow: hidden; border: 1px solid var(--border-dim); }
.xp-fill { height: 100%; background: linear-gradient(90deg, var(--secondary), var(--primary)); border-radius: 3px; box-shadow: 0 0 8px var(--primary); transition: width 1s ease-out; }

/* ── PILOT TABS ── */
.pilot-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border-dim);
    padding: 0 18px;
}
.pilot-tab {
    padding: 8px 16px;
    font-family: var(--font-hud);
    font-size: 9px;
    font-weight: 700;   /* başlıklar kalın (Profil / Başarılar / Ar-Ge) */
    letter-spacing: 2px;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.25s;
}
.pilot-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.pilot-tab:hover:not(.active) { color: var(--text-secondary); }
.pilot-tab-content { display: none; }
.pilot-tab-content.active { display: block; }

/* ── STATS GRID ── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}
.stat-card {
    background: rgba(0,15,40,0.6);
    border: 1px solid var(--border-dim);
    border-radius: 8px;
    padding: 14px;
    text-align: center;
    transition: all 0.3s;
}
.stat-card:hover { border-color: var(--border-glow); }
.stat-value { font-family: var(--font-hud); font-size: 20px; color: var(--primary); margin-bottom: 4px; }
.stat-label { font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); letter-spacing: 1px; }

/* ── BAŞARILAR (Achievements) ───────────────────────────────── */
.ach-cat-tabs {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px;
}
.ach-cat-btn {
    padding: 6px 12px; font-size: 11px; font-family: var(--font-hud);
    background: rgba(0,20,55,0.5); border: 1px solid rgba(0,80,160,0.3);
    color: var(--text-secondary); border-radius: 4px; cursor: pointer;
    transition: all 0.15s; letter-spacing: 0.5px;
}
.ach-cat-btn:hover { border-color: var(--primary); color: var(--text-primary); }
.ach-cat-btn.active {
    background: rgba(0,60,160,0.4); border-color: var(--primary); color: #fff;
    box-shadow: 0 0 8px rgba(0,160,255,0.2);
}
.ach-stats-bar {
    display: flex; gap: 18px; padding: 8px 14px; margin-bottom: 12px;
    background: rgba(0,15,40,0.6); border-radius: 4px; border: 1px solid rgba(0,80,160,0.2);
    font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary);
    flex-wrap: wrap;
}
.ach-stats-bar b { color: var(--gold); }
.ach-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
}
.ach-card {
    background: rgba(0,15,40,0.7); border: 1px solid rgba(0,80,160,0.3);
    border-radius: 6px; padding: 12px; display: flex; flex-direction: column;
    transition: all 0.18s;
}
.ach-card:hover { border-color: var(--primary); background: rgba(0,25,70,0.7); }
.ach-card.completed {
    border-color: var(--gold);
    background: linear-gradient(135deg, rgba(255,215,0,0.07), rgba(0,15,40,0.7));
    box-shadow: 0 0 10px rgba(255,215,0,0.15);
}
.ach-card.locked { opacity: 0.55; }
.ach-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ach-icon { font-size: 32px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.7)); }
.ach-name {
    flex: 1; font-family: var(--font-hud); font-size: 12px;
    letter-spacing: 0.5px; color: var(--text-primary); line-height: 1.2;
}
.ach-card.completed .ach-name { color: var(--gold); }
.ach-tier {
    font-family: var(--font-mono); font-size: 9px; color: var(--text-muted);
    background: rgba(0,0,0,0.4); padding: 2px 5px; border-radius: 3px;
}
.ach-desc {
    font-size: 11px; color: var(--text-secondary); line-height: 1.4;
    margin-bottom: 10px; min-height: 32px;
}
.ach-progress {
    background: rgba(0,0,0,0.5); border-radius: 3px; overflow: hidden;
    height: 8px; margin-bottom: 4px;
}
.ach-progress-fill {
    height: 100%; background: linear-gradient(90deg, #00c8ff, #7fffd0);
    transition: width 0.3s;
}
.ach-card.completed .ach-progress-fill { background: linear-gradient(90deg, #ffd700, #ffb000); }
.ach-progress-text {
    font-family: var(--font-mono); font-size: 10px; color: var(--text-muted);
    display: flex; justify-content: space-between;
}
.ach-rewards {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-top: 8px; padding-top: 8px;
    border-top: 1px dashed rgba(0,80,160,0.2);
    font-family: var(--font-mono); font-size: 9px; color: var(--text-muted);
}
.ach-reward { display: inline-flex; align-items: center; gap: 3px; }
.ach-reward.cred { color: #7ee8fa; }
.ach-reward.orb  { color: #a78bfa; }
.ach-reward.exp  { color: #7fffd0; }
.ach-reward.hon  { color: var(--gold); }

/* ── LEADERBOARD PAGER ── */
.lb-page-btn {
    padding: 5px 12px;
    font-family: var(--font-hud);
    font-size: 10px;
    letter-spacing: 1px;
    background: rgba(0,15,40,0.7);
    border: 1px solid var(--border-dim);
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}
.lb-page-btn:hover { border-color: var(--primary); color: var(--primary); }
.lb-page-btn.active { background: rgba(0,200,255,0.15); border-color: var(--primary); color: var(--primary); }

/* ── HOME DUAL GRID (Şirket Kayıtları + Haberler yan yana) ── */
.home-dual-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
}
@media (max-width: 900px) {
    .home-dual-grid { grid-template-columns: 1fr; }
}

/* ── COMPANY TAB SWITCHER ── */
.comp-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-dim);
    margin-bottom: 14px;
}
.comp-tab {
    padding: 8px 20px;
    font-family: var(--font-hud);
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.2s;
    user-select: none;
}
.comp-tab:hover:not(.active) { color: var(--text-secondary); }
.comp-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

/* ── COMPANY RECORDS ── */
.company-table { width: 100%; border-collapse: collapse; }
.company-table th {
    font-family: var(--font-hud); font-size: 9px; letter-spacing: 1px;
    color: var(--text-muted); padding: 8px 10px; text-align: left;
    border-bottom: 1px solid var(--border-dim); background: rgba(0,200,255,0.04);
}
.company-table td { padding: 9px 10px; font-size: 13px; border-bottom: 1px solid rgba(0,150,200,0.07); }
.company-table tr:hover td { background: rgba(0,200,255,0.04); }
.company-table tr:last-child td { border-bottom: none; }
.rank-num { font-family: var(--font-hud); font-weight: 700; }
.rank-1 { color: var(--gold); }
.rank-2 { color: #c0c0c0; }
.rank-3 { color: #cd7f32; }

/* ── Liderlik tablosu — "Sen" satırı (TEK PARÇA altın gradient) ── */
/* Gradient'i <tr> üzerine veriyoruz, td'leri tamamen transparan tutuyoruz
   → satır boyunca KESİNTİSİZ tek bir gradient akar (hücre hücre tekrar etmez) */
.company-table tr.lb-self-row {
    background: linear-gradient(90deg,
        rgba(255,200,80,0.18) 0%,
        rgba(255,200,80,0.08) 55%,
        rgba(255,200,80,0.02) 100%);
}
.company-table tr.lb-self-row td {
    background: transparent !important;
    border-top: 1px solid rgba(255,200,80,0.35);
    border-bottom: 1px solid rgba(255,200,80,0.35);
}
.company-table tr.lb-self-row td:first-child {
    border-left: 2px solid #ffce6a;
    box-shadow: inset 2px 0 8px rgba(255,200,80,0.18);
}
.company-table tr.lb-self-row:hover {
    background: linear-gradient(90deg,
        rgba(255,200,80,0.26) 0%,
        rgba(255,200,80,0.12) 55%,
        rgba(255,200,80,0.04) 100%);
}
.company-table tr.lb-self-row:hover td { background: transparent !important; }
/* Ayırıcı çizgi (kullanıcı top10 dışındaysa altta belirir) */
.company-table tr.lb-self-sep td {
    padding: 4px 0 !important;
    background: transparent !important;
    border: none !important;
    position: relative;
}
.company-table tr.lb-self-sep td::after {
    content: '';
    position: absolute;
    left: 12px; right: 12px; top: 50%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,200,80,0.5) 50%,
        transparent 100%);
}
/* SEN etiketi — minimal düz kapsül (satırın altın gradient'iyle rekabet etmez) */
.lb-self-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    font-family: var(--font-hud);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #ffce6a;
    background: transparent;
    border: 1px solid rgba(255, 200, 80, 0.55);
    border-radius: 8px;
    vertical-align: middle;
}

/* ── NEWS / EVENT CAROUSEL ── */
.event-card {
    background: rgba(0,15,40,0.7);
    border: 1px solid var(--border-dim);
    border-radius: 10px;
    padding: 16px;
    transition: all 0.3s;
    cursor: pointer;
}
.event-card:hover { border-color: var(--border-glow); box-shadow: 0 0 15px var(--primary-glow); }
/* Haber kartı <a> oldu (yeni sekmede yazıyı açar) — link varsayılanları nötrlenir,
   kart görünümü DEĞİŞMEZ. display:block yoksa <a> satır-içi kalır ve kutu bozulur. */
.news-card { display: block; text-decoration: none; color: inherit; }
.news-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.event-date { font-family: var(--font-mono); font-size: 11px; color: var(--primary); margin-bottom: 6px; }
.event-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.event-desc { font-size: 11px; color: var(--text-muted); }

.events-list { display: flex; flex-direction: column; gap: 8px; }

/* ── UPCOMING EVENT ── */
.upcoming-section { font-size: 12px; }
.upcoming-item {
    display: flex;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0,150,200,0.08);
    align-items: flex-start;
}
.upcoming-item:last-child { border-bottom: none; }
.upcoming-date {
    font-family: var(--font-hud);
    font-size: 11px;
    color: var(--primary);
    width: 74px;
    flex-shrink: 0;
    line-height: 1.3;
}
.upcoming-title { font-size: 12px; color: var(--text-secondary); }
.upcoming-time { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }
/* ── OYUNCU DUYURULARI ── */
/* İskelet UPCOMING ile BİLEREK aynı (solda sabit genişlikte zaman kolonu, sağda
   metin). İki panel alt alta duruyor; farklı hizalama göz yorardı. */
.announce-section { font-size: 12px; }
.announce-item {
    display: flex;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0,150,200,0.08);
    align-items: flex-start;
}
.announce-item:last-child { border-bottom: none; }
/* ⚠ SABİT width KULLANMA. Saat biçimi yerele göre değişir: tr "18:47" (5 karakter)
   ama en-US "06:47 PM" (8 karakter). Dar sabit genişlik İngilizce'de kırpardı,
   geniş sabit genişlik Türkçe'de boşuna yer yerdi (ilk hâli 74px'ti, çok genişti).
   min-width hizayı korur, nowrap taşmayı önler, kolon içeriğe göre büyür. */
.announce-when {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    min-width: 38px;
    flex-shrink: 0;
    white-space: nowrap;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;   /* rakamlar alt alta hizalansın */
}
.announce-text { font-size: 12px; color: var(--text-secondary); line-height: 1.45; }
.announce-text b { color: var(--primary); font-weight: 700; }   /* pilot adı vurgusu */
/* Spaceball etkinlik satırı — dinamik enjekte (config takviminden), turuncu aksan */
.upcoming-item.sb .upcoming-date { color: #ff8f6a; }
.upcoming-item.sb .upcoming-title { color: #ffd9c0; }
.sb-tag { font-family: var(--font-hud); font-size: 8px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase;
    background: rgba(255,120,60,.16); color: #ff9b6a; border: 1px solid rgba(255,120,60,.32); border-radius: 4px; padding: 1px 5px; margin-left: 5px; vertical-align: middle; }

/* ── PLAY BUTTON ── */
.play-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 44px;
    padding: 28px 24px;
    min-height: 220px;
    border-radius: 16px;
    position: relative;
    background:
        radial-gradient(110% 130% at 50% 38%, rgba(0,150,255,0.11), transparent 60%),
        radial-gradient(70% 100% at 50% 125%, rgba(0,255,150,0.09), transparent 72%);
    flex-wrap: wrap;
}
.btn-play {
    padding: 18px 64px;
    background: linear-gradient(135deg, #007a3d, #00c864);
    border: 2px solid #00ff88;
    border-radius: 12px;
    color: #fff;
    font-family: var(--font-hud);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 6px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 0 30px rgba(0,200,100,0.4);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    animation: playPulse 2.6s ease-in-out infinite;
}
@keyframes playPulse {
    0%,100% { box-shadow: 0 0 22px rgba(0,255,136,0.40); }
    50%     { box-shadow: 0 0 46px rgba(0,255,136,0.75), 0 0 80px rgba(0,200,100,0.30); }
}
.btn-play::before {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transition: left 0.5s;
}
.btn-play:hover::before { left: 100%; }
.btn-play:hover {
    animation: none;
    box-shadow: 0 0 50px rgba(0,255,136,0.6), 0 0 100px rgba(0,200,100,0.3);
    transform: translateY(-3px) scale(1.03);
}
/* Pilot adı kısıtlıysa: OYNA butonu gri/kilitli görünür + hover efektleri kapalı */
.btn-play.is-locked {
    background: linear-gradient(135deg, #3a3f45, #565c64);
    border-color: #6b7178;
    color: #c9ced4;
    cursor: not-allowed;
    animation: none;
    box-shadow: none;
    opacity: 0.85;
}
.btn-play.is-locked::before { display: none; }
.btn-play.is-locked:hover { transform: none; box-shadow: none; }
/* Başla butonunun altındaki uyarı bandı (kendi satırına düşsün) */
.name-restrict-banner {
    flex-basis: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: -22px;
    padding: 12px 18px;
    border-radius: 12px;
    background: rgba(200, 40, 40, 0.12);
    border: 1px solid rgba(255, 90, 90, 0.35);
    color: #ff9a9a;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
    text-align: center;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}
.name-restrict-banner .nrb-ico { font-size: 18px; flex: none; }

.server-info {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
    padding: 12px 20px;
    border-radius: 12px;
    background: rgba(0,20,45,0.45);
    border: 1px solid rgba(0,200,255,0.14);
}
.server-info .server-name { font-size: 15px; color: var(--text-primary); font-family: var(--font-hud); margin-bottom: 4px; }
.server-dot { display: inline-block; width: 8px; height: 8px; background: var(--green); border-radius: 50%; box-shadow: 0 0 6px var(--green); margin-right: 5px; animation: pulse 2s infinite; }

/* ═══ HAPPY HOUR rozeti (2 Eyl 2026) — "Çevrimiçi" kutusunun sağında ═══
   Oyun içi banner'la AYNI renk ailesi: normal turuncu, MEGA mor. Oyuncu
   iki yüzeyi ilişkilendirsin diye bilerek eşleştirildi. */
.hh-badge {
    font-family: var(--font-mono);
    text-align: center;
    padding: 10px 18px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(70,32,2,0.75), rgba(38,18,2,0.85));
    border: 1px solid rgba(255,168,56,0.55);
    box-shadow: 0 0 18px rgba(255,150,30,0.22), inset 0 0 22px rgba(255,150,30,0.07);
    animation: hhBadgePulse 2.4s ease-in-out infinite;
}
.hh-badge .hhb-top   { display: flex; align-items: center; justify-content: center; gap: 7px; }
.hh-badge .hhb-ico   { font-size: 16px; line-height: 1; }
.hh-badge .hhb-name  { font-size: 13px; font-weight: 700; letter-spacing: 1.1px; color: #ffc774; white-space: nowrap; }
.hh-badge .hhb-pct   { margin-top: 3px; font-size: 17px; font-weight: 700; color: #ffe7c2; letter-spacing: 0.5px; }
.hh-badge .hhb-left  { margin-top: 2px; font-size: 11px; color: rgba(255,214,160,0.72); letter-spacing: 0.4px; }

.hh-badge.mega {
    background: linear-gradient(180deg, rgba(58,10,86,0.78), rgba(30,6,44,0.88));
    border-color: rgba(214,120,255,0.62);
    box-shadow: 0 0 22px rgba(190,80,255,0.30), inset 0 0 24px rgba(190,80,255,0.09);
}
.hh-badge.mega .hhb-name { color: #e3a8ff; }
.hh-badge.mega .hhb-pct  { color: #f6dcff; }
.hh-badge.mega .hhb-left { color: rgba(233,196,255,0.72); }

@keyframes hhBadgePulse {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.14); }
}
/* ⚠ Hareket hassasiyeti: nabız süsleme, bilgi taşımıyor → kapatılabilir olmalı. */
@media (prefers-reduced-motion: reduce) { .hh-badge { animation: none; } }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:0.4} }

/* OYNA butonunun solundaki oyuncu gemisi görseli (admin gemisinde gizli) */
.play-ship { display: flex; align-items: center; justify-content: center; min-width: 0; }
.play-ship img {
    max-height: 165px; max-width: 250px; object-fit: contain;
    filter: drop-shadow(0 0 16px rgba(0,200,255,0.5)) drop-shadow(0 8px 12px rgba(0,0,0,0.45));
    animation: shipFloat 4.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes shipFloat { 0%,100% { transform: translateY(-7px); } 50% { transform: translateY(7px); } }

/* SERVER SELECTION kurallari 20 Agu 2026da SILINDI — dashboard.html icindeki
   sahte sunucu listesi (#page-servers + #serverModal) kaldirildi, bu kurallari
   kullanan tek yer orasiydi. index.html kendi .server-row kurallarini
   css/style.css icinde tutar; ORAYA DOKUNULMADI. */

/* ── SKILL TREE PLACEHOLDER ── */
.skill-tree {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 16px;
}
.skill-node {
    aspect-ratio: 1;
    background: rgba(0,20,50,0.6);
    border: 1px solid var(--border-dim);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 10px;
    color: var(--text-muted);
    text-align: center;
    padding: 8px;
}
.skill-node.unlocked { border-color: var(--border-glow); color: var(--primary); background: rgba(0,200,255,0.08); }
.skill-node.maxed { border-color: var(--gold); color: var(--gold); background: rgba(255,215,0,0.08); }
.skill-node:hover { transform: scale(1.05); }
.skill-icon { font-size: 22px; }
.skill-level { font-family: var(--font-hud); font-size: 9px; }

/* ── CLAN SECTION ── */
.clan-empty {
    text-align: center;
    padding: 30px;
    font-size: 13px;
    color: var(--text-muted);
}
.clan-empty .big-icon { font-size: 40px; margin-bottom: 10px; }

/* ── Klan sistemi ── */
.clan-tab-bar {
    display: flex;
    gap: 2px;
    background: rgba(0,10,30,0.8);
    border-bottom: 1px solid rgba(0,80,180,0.3);
    padding: 0 8px;
}
.clan-tab {
    padding: 8px 18px;
    font-family: var(--font-hud);
    font-size: 11px;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    user-select: none;
}
.clan-tab:hover { color: var(--primary); }
.clan-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

.clan-tab-content {
    padding: 16px;
    background: rgba(0,8,24,0.6);
    min-height: 200px;
}
.clan-input {
    background: rgba(0,15,40,0.8);
    border: 1px solid rgba(0,80,160,0.4);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 6px 10px;
    border-radius: 4px;
    outline: none;
}
.clan-input:focus { border-color: var(--primary); }
.clan-label {
    display: block;
    font-family: var(--font-hud);
    font-size: 9px;
    color: var(--text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.clan-info-row td { padding: 5px 8px; border-bottom: 1px solid rgba(0,60,120,0.2); }
.clan-info-lbl { color: var(--text-muted); font-family: var(--font-hud); font-size: 10px; width: 120px; }
.clan-info-val { color: var(--text-primary); font-size: 11px; }
.clan-section-title {
    font-family: var(--font-hud);
    font-size: 10px;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(0,100,200,0.3);
    padding-bottom: 4px;
}
.clan-text-box {
    background: rgba(0,15,40,0.5);
    border: 1px solid rgba(0,60,120,0.3);
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 11px;
    color: var(--text-secondary);
    min-height: 40px;
    line-height: 1.6;
    white-space: pre-wrap;
}
.clan-info-box {
    background: rgba(0,40,100,0.2);
    border: 1px solid rgba(0,100,200,0.3);
    border-radius: 6px;
    padding: 12px 16px;
    font-size: 11px;
    color: var(--text-secondary);
}
.clan-create-form { max-width: 500px; }
.btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0,200,255,0.1);
    border: 1px solid var(--border-glow);
    color: var(--primary);
    font-family: var(--font-hud);
    font-size: 10px;
    letter-spacing: 1px;
    padding: 6px 16px;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 14px;
    transition: all 0.25s;
    text-decoration: none;
}
.btn-sm:hover { box-shadow: 0 0 12px var(--primary-glow); background: rgba(0,200,255,0.2); }

/* ── AUCTION TAB BAR ── */
.auct-tab {
    padding: 8px 16px;
    font-family: var(--font-hud);
    font-size: 11px;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
    user-select: none;
}
.auct-tab:hover  { color: var(--primary); }
.auct-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.auct-tab-content { }

/* ── AUCTION ── */
.auction-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border-dim); }
.auction-tab {
    padding: 8px 20px;
    font-family: var(--font-hud);
    font-size: 9px;
    letter-spacing: 1px;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.25s;
}
.auction-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
.auction-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.auction-table th { font-family: var(--font-hud); font-size: 9px; letter-spacing: 1px; color: var(--text-muted); padding: 8px 12px; background: rgba(255,215,0,0.04); border-bottom: 1px solid var(--border-dim); text-align: left; }
.auction-table td { padding: 9px 12px; border-bottom: 1px solid rgba(0,150,200,0.07); }
.auction-table tr:hover td { background: rgba(0,200,255,0.04); }
/* ── Ticaret salonu: SABİT yükseklik + iç scroll (sayfa aşağı uzamaz) ── */
#auctionSlots, #myBidsContent, #historyContent {
    max-height: calc(100vh - 300px);
    min-height: 180px;
    overflow-y: auto;
    overflow-x: hidden;
}
/* Sütun başlıkları kayarken üstte SABİT kalsın (opak zemin → satırlar arkadan görünmez) */
.auction-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: linear-gradient(rgba(255,215,0,0.04), rgba(255,215,0,0.04)), #0a1530;
    box-shadow: inset 0 -1px 0 var(--border-dim);
}
.btn-bid {
    background: rgba(0,200,255,0.1);
    border: 1px solid var(--border-glow);
    color: var(--primary);
    font-family: var(--font-hud);
    font-size: 8px;
    padding: 3px 8px;
    border-radius: 3px;
    cursor: pointer;
    margin-right: 4px;
    transition: all 0.2s;
}
.btn-bid:hover { background: rgba(0,200,255,0.2); }
.btn-bid-retop { background: rgba(255,150,0,0.15) !important; border-color: rgba(255,150,0,0.5) !important; color: #ffaa44 !important; }
.btn-bid-retop:hover { background: rgba(255,150,0,0.3) !important; }
.btn-buy-now {
    background: rgba(255,200,0,0.1);
    border: 1px solid rgba(255,200,0,0.4);
    color: var(--gold);
    font-family: var(--font-hud);
    font-size: 8px;
    padding: 3px 8px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-buy-now:hover { background: rgba(255,200,0,0.2); }

/* ── SKYLAB ── */
.skylab-header {
    display: flex; align-items: center; gap: 16px;
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(0,10,40,0.95), rgba(0,30,80,0.9));
    border-bottom: 1px solid rgba(0,100,255,0.2);
    flex-wrap: wrap;
}
.skylab-station-icon { font-size: 48px; filter: drop-shadow(0 0 12px rgba(0,150,255,0.8)); flex-shrink:0; }
.skylab-header-info  { flex: 1; min-width: 160px; }
.skylab-title  { font-family: var(--font-hud); font-size: 16px; letter-spacing: 3px; color: var(--primary); text-shadow: 0 0 10px var(--primary-glow); }
.skylab-subtitle { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.skylab-energy-wrap { display:flex; flex-direction:column; gap:4px; min-width:180px; }
.skylab-energy-label { font-family:var(--font-hud); font-size:9px; letter-spacing:2px; color:var(--text-muted); }
.skylab-energy-bar-outer { height:8px; background:rgba(255,255,255,0.08); border-radius:4px; overflow:hidden; }
.skylab-energy-bar-inner { height:100%; border-radius:4px; transition: width 0.5s, background 0.5s; }
.skylab-energy-text { font-family:var(--font-mono); font-size:10px; color:var(--text-muted); }
.skylab-collect-all-btn {
    padding: 8px 16px; font-family: var(--font-hud); font-size: 10px; letter-spacing: 1px;
    background: linear-gradient(135deg, rgba(0,80,200,0.5), rgba(0,40,120,0.8));
    border: 1px solid rgba(0,150,255,0.4); border-radius: 6px; color: var(--primary);
    cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.skylab-collect-all-btn:hover { background: linear-gradient(135deg, rgba(0,120,255,0.5), rgba(0,60,160,0.8)); box-shadow: 0 0 12px rgba(0,150,255,0.3); }

/* Hammadde bar */
.skylab-materials-bar {
    display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 20px;
    background: rgba(0,5,20,0.8); border-bottom: 1px solid rgba(0,100,255,0.1);
}
.skylab-mat-chip {
    display: flex; align-items: center; gap: 5px; padding: 4px 10px;
    background: rgba(0,15,40,0.8); border: 1px solid rgba(255,255,255,0.06); border-radius: 20px;
    font-size: 11px;
}
.skylab-mat-icon  { font-size: 13px; }
.skylab-mat-name  { font-family: var(--font-hud); font-size: 9px; letter-spacing: 0.5px; }
.skylab-mat-val   { font-family: var(--font-mono); font-size: 11px; color: #fff; }

/* Modüller wrap */
.skylab-modules-wrap { padding: 16px 20px; display: flex; flex-direction: column; gap: 4px; }
.skylab-group-label  { font-family: var(--font-hud); font-size: 9px; letter-spacing: 2px; color: var(--text-muted); padding: 10px 0 6px; border-bottom: 1px solid rgba(255,255,255,0.05); margin-bottom: 10px; }
/* ⚠ Sütun sayısı ESKİSİ GİBİ minmax(200px, 1fr) ile hesaplanır. (auto-fit, üst sınır
   kesinse sütun sayısını ONA göre sayar → minmax(...,340px) denemesi 4 sütunu 2'ye
   düşürmüştü.) Tek kartlı grubun (Reaktör) satırı doldurup deforme olmasını ise
   TRACK'e değil KARTIN kendisine konan max-width engeller. */
.skylab-group-row    { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.skylab-group-row > .skylab-card { max-width: 420px; }

/* Modül kartları */
.skylab-card {
    background: linear-gradient(145deg, rgba(0,12,35,0.95), rgba(0,5,20,0.98));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 8px;
    transition: box-shadow 0.3s, border-color 0.3s; position: relative; overflow: hidden;
}
.skylab-card::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.02), transparent);
    pointer-events: none;
}
.skylab-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,180,255,0.25); border-color: rgba(0,180,255,0.35); }
.skylab-card-full  { animation: skylabPulse 2s infinite; }
@keyframes skylabPulse { 0%,100%{box-shadow:0 0 16px rgba(0,200,255,0.2)} 50%{box-shadow:0 0 28px rgba(0,200,255,0.4)} }

.skylab-card-head  { display: flex; align-items: center; gap: 8px; }
.skylab-card-icon  { font-size: 22px; flex-shrink: 0; }
.skylab-card-title { font-family: var(--font-hud); font-size: 10px; letter-spacing: 0.5px; color: #dde; flex: 1; line-height: 1.3; }
.skylab-card-lvl   { font-family: var(--font-mono); font-size: 10px; color: var(--primary); background: rgba(0,100,255,0.15); border: 1px solid rgba(0,100,255,0.3); border-radius: 4px; padding: 2px 6px; white-space: nowrap; }
.skylab-card-lvl-empty { color: var(--text-muted); background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }

.skylab-prod-bar-wrap { height: 6px; background: rgba(255,255,255,0.07); border-radius: 3px; overflow: hidden; }
.skylab-prod-bar      { height: 100%; border-radius: 3px; transition: width 0.6s ease; }
.skylab-prod-info     { display: flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 10px; }
.skylab-rate-badge    { margin-left: auto; font-size: 9px; color: var(--text-muted); background: rgba(255,255,255,0.05); padding: 1px 5px; border-radius: 3px; }

/* margin-top:auto → buton bloğu kartın ALTINA sabitlenir; kart flex-column + grid eşit-yükseklik
   olduğu için satırdaki tüm "Yükselt/Kur" butonları AYNI hizada durur (içerik uzunluğundan bağımsız). */
.skylab-card-btns { display: flex; gap: 6px; margin-top: auto; padding-top: 8px; }
.skylab-btn-collect {
    flex: 1; padding: 5px 8px; font-family: var(--font-hud); font-size: 9px; letter-spacing: 0.5px;
    background: rgba(0,80,200,0.3); border: 1px solid rgba(0,150,255,0.3); border-radius: 5px;
    color: var(--primary); cursor: pointer; transition: all 0.2s;
}
.skylab-btn-collect:hover:not(:disabled) { background: rgba(0,120,255,0.4); }
.skylab-btn-collect-full {
    background: rgba(0,200,100,0.25); border-color: rgba(0,200,100,0.5); color: #44ff88;
    animation: collectPulse 1.5s infinite;
}
@keyframes collectPulse { 0%,100%{box-shadow:none} 50%{box-shadow:0 0 8px rgba(0,200,100,0.5)} }
.skylab-btn-upgrade {
    flex: 1; padding: 5px 8px; font-family: var(--font-hud); font-size: 9px; letter-spacing: 0.5px;
    background: rgba(255,160,0,0.15); border: 1px solid rgba(255,160,0,0.35); border-radius: 5px;
    color: #ffaa44; cursor: pointer; transition: all 0.2s;
}
.skylab-btn-upgrade:hover:not(:disabled) { background: rgba(255,160,0,0.3); }
.skylab-btn-maxed { background: rgba(0,200,100,0.1); border-color: rgba(0,200,100,0.3); color: #44ff88; cursor: default; }

/* ══ MODÜL KONTROL GÜVERTESİ ══════════════════════════════════════════════
   Eskiden robot satırı + oto rozeti + durdur + yükselt hepsi ayrı ayrı
   inline-flex satırlardı → farklı yükseklik/hizada duruyordu. Tek güverte:
   üstte 2 EŞİT sütunlu robot yuvası, altta sabit-genişlik güç düğmesi +
   esneyen birincil eylem. Tüm kontroller 26px yüksekliğe kilitli. */
.sl-deck   { margin-top: auto; padding-top: 9px; display: flex; flex-direction: column; gap: 6px;
             border-top: 1px solid rgba(255,255,255,0.07); }
.sl-slots  { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

.sl-slot   { display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 7px; min-width: 0;
             background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08);
             border-radius: 6px; cursor: pointer; transition: background .18s, border-color .18s;
             font-family: var(--font-mono); overflow: hidden; }
.sl-slot:hover { background: rgba(255,255,255,0.075); }
.sl-slot-dot  { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.sl-slot-cnt  { font-size: 10px; font-variant-numeric: tabular-nums; color: #9fb0c6; letter-spacing: .2px; }
.sl-slot-cost { margin-left: auto; font-size: 9px; color: var(--text-muted); white-space: nowrap;
                overflow: hidden; text-overflow: ellipsis; }
.sl-slot.has  .sl-slot-cnt { color: #e6eefc; }

/* ⭐ 13 Eyl 2026 — XxCAZATESOROSxX (Discord): "Add button to pay 12 robots on 1 click".
   Yuvayı 12'ye çıkarmak 12 ayrı tıklama gerektiriyordu. Bu çip KALAN kadarını
   TEK istekte alır (sunucu ucu zaten `count` parametresini destekliyordu).
   ⚠ Yuva 26px'e kilitli ve dar kartta daralıyor → çip flex-shrink:0, masrafı
   zaten ellipsis'li. ⚠ Buton İÇİNDE buton OLMAZ (geçersiz HTML) → span. */
.sl-slot-max  { flex-shrink: 0; font-size: 9px; line-height: 1; padding: 3px 4px; border-radius: 4px;
                font-family: var(--font-mono); letter-spacing: .2px; cursor: pointer;
                background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14);
                color: #9fb0c6; transition: background .15s, border-color .15s, color .15s; }
.sl-slot.cr  .sl-slot-max:hover { background: rgba(255,210,60,0.18);  border-color: rgba(255,210,60,0.55);  color: #ffd23b; }
.sl-slot.orb .sl-slot-max:hover { background: rgba(34,221,170,0.18); border-color: rgba(34,221,170,0.55); color: #22ddaa; }
.sl-slot.cr:hover  { border-color: rgba(255,210,60,0.45); }
.sl-slot.cr:hover  .sl-slot-cost { color: #ffd23b; }
.sl-slot.orb:hover { border-color: rgba(34,221,170,0.45); }
.sl-slot.orb:hover .sl-slot-cost { color: #22ddaa; }

.sl-ctrl   { display: flex; align-items: stretch; gap: 6px; }
.sl-power  { flex: 0 0 30px; width: 30px; height: 26px; display: grid; place-items: center;
             border-radius: 6px; cursor: pointer; font-size: 11px; transition: all .18s;
             background: rgba(34,221,170,0.10); border: 1px solid rgba(34,221,170,0.32); color: #22ddaa; }
.sl-power:hover { background: rgba(34,221,170,0.2); }
.sl-power.off   { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.14); color: #7d8798; }
.sl-power.off:hover { border-color: rgba(34,221,170,0.4); color: #22ddaa; }
/* Güç düğmesi yanındaki birincil eylem güverte yüksekliğine oturur */
.sl-ctrl > .skylab-btn-upgrade { height: 26px; padding: 0 8px; display: flex; align-items: center;
                                 justify-content: center; flex: 1; min-width: 0; }
/* Yükseltme sürerken: geri sayım + "hemen bitir" dikey sütunu.
   ⚠ flex-basis:0 (temel .skylab-btn-upgrade'in flex:1'i) dikey eksende height'i EZİYOR →
   satırlar 14px'e çöküyordu. Sütun çocuklarına sabit temel ver. */
.sl-upcol { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.sl-upcol > .skylab-btn-upgrade { flex: 0 0 26px; height: 26px; padding: 0 8px; display: flex;
                                  align-items: center; justify-content: center; gap: 4px; }
.sl-upcol > .btn-sm { flex: 0 0 24px; height: 24px; display: flex; align-items: center;
                      justify-content: center; gap: 4px; }
/* Duraklatılmış modülde üretim hızı yerine durum rozeti */
.sl-off-badge { margin-left: auto; font-family: var(--font-mono); font-size: 9px; color: #b9a15f;
                background: rgba(255,206,106,0.10); border: 1px solid rgba(255,206,106,0.22);
                padding: 1px 5px; border-radius: 3px; white-space: nowrap; }
/* Robot üretim bonusu — hız rozetinin yanında (anlamsal yeri orası) */
.sl-boost { font-family: var(--font-mono); font-size: 9px; color: #7fffd4;
            background: rgba(34,221,170,0.10); border: 1px solid rgba(34,221,170,0.25);
            padding: 1px 4px; border-radius: 3px; white-space: nowrap; }

/* ── SKYLAB PANEL (Depo / Sevkiyat / Kargo) ── */
.sl-panel {
    background: rgba(0,8,25,0.7);
    border: 1px solid rgba(0,150,255,0.15);
    border-radius: 8px;
    padding: 10px 12px;
}
.sl-panel-title {
    font-family: var(--font-hud);
    font-size: 10px;
    letter-spacing: 0.8px;
    color: rgba(0,180,255,0.8);
    margin-bottom: 8px;
    text-transform: uppercase;
}
#slStorageBar, #slMaterialsBar { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── TOAST ── */
#toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.toast-item {
    background: var(--bg-panel);
    border: 1px solid var(--border-glow);
    border-radius: 8px;
    padding: 10px 16px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-primary);
    box-shadow: 0 0 15px var(--primary-glow);
    animation: toastIn 0.3s ease-out, toastOut 0.3s ease-in 2.7s forwards;
    display: flex; align-items: center; gap: 8px;
}
.toast-item.success { border-color: rgba(0,255,136,0.5); color: var(--green); }
.toast-item.error { border-color: rgba(255,50,80,0.5); }
@keyframes toastIn { from{transform:translateX(80px);opacity:0}to{transform:translateX(0);opacity:1} }
@keyframes toastOut { to{transform:translateX(80px);opacity:0} }

/* ── MODAL ── */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(6px);
    z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal {
    background: linear-gradient(160deg, rgba(5,15,40,0.98), rgba(8,5,30,0.99));
    border: 1px solid var(--border-glow);
    border-radius: 16px;
    padding: 28px;
    width: 90%; max-width: 520px;
    box-shadow: 0 0 60px rgba(0,200,255,0.2);
    transform: scale(0.9); transition: transform 0.3s;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}
.modal-overlay.open .modal { transform: scale(1); }
.modal-close {
    position: absolute; top: 14px; right: 14px;
    background: none; border: none; color: var(--text-muted);
    font-size: 18px; cursor: pointer; transition: color 0.2s;
}
.modal-close:hover { color: var(--red); }
.modal-title { font-family: var(--font-hud); font-size: 13px; letter-spacing: 2px; color: var(--primary); margin-bottom: 20px; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-family: var(--font-hud); font-size: 9px; letter-spacing: 2px; color: var(--text-secondary); margin-bottom: 5px; text-transform: uppercase; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    background: rgba(0,15,40,0.8);
    border: 1px solid var(--border-dim);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 13px;
    padding: 9px 12px;
    outline: none;
    transition: all 0.3s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 10px var(--primary-glow);
}
.form-group textarea { resize: vertical; min-height: 80px; }
.btn-modal-submit {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #003d8a, #0066cc);
    border: 1px solid var(--primary);
    border-radius: 8px;
    color: #fff;
    font-family: var(--font-hud);
    font-size: 12px;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 8px;
}
.btn-modal-submit:hover { box-shadow: 0 0 20px var(--primary-glow); transform: translateY(-1px); }

/* Right column */
.right-col { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; padding: 20px 20px 20px 0; }

/* ── RESPONSIVE ── */
@media (max-width: 1100px) { .right-col { display: none; } }
@media (max-width: 800px) {
    .nav-section-label { display: none; }
    .main-content { padding: 12px; }
}
@media (max-width: 500px) {
    .dash-topbar { gap: 8px; }
    .topbar-currency { gap: 8px; }
}

/* ═══════════════════════════════════════
   HANGAR PAGE - Masaüstü Stili
═══════════════════════════════════════ */
.hangar-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: rgba(2, 8, 20, 0.95);
    border: 1px solid rgba(0,150,220,0.4);
    border-radius: 8px;
    overflow: hidden;
    height: calc(100vh - 120px);
    min-height: 580px;
}

/* Top toolbar */
.hangar-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: linear-gradient(180deg, rgba(10,25,60,0.95), rgba(5,12,35,0.95));
    border-bottom: 1px solid rgba(0,120,200,0.4);
    flex-shrink: 0;
}
.hangar-toolbar-title {
    font-family: var(--font-hud);
    font-size: 13px;
    letter-spacing: 3px;
    color: var(--primary);
    text-shadow: 0 0 10px var(--primary);
    margin-right: 10px;
}
.hng-btn {
    padding: 4px 14px;
    background: linear-gradient(180deg, rgba(30,60,120,0.8), rgba(10,30,80,0.9));
    border: 1px solid rgba(0,120,200,0.6);
    border-radius: 3px;
    color: #a0c8ff;
    font-family: var(--font-hud);
    font-size: 10px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.hng-btn:hover { background: linear-gradient(180deg, rgba(0,100,200,0.6), rgba(0,60,150,0.7)); border-color: var(--primary); color: #fff; }
.hng-btn.active { background: linear-gradient(180deg, rgba(0,80,180,0.8), rgba(0,40,120,0.9)); border-color: var(--primary); color: var(--primary); box-shadow: 0 0 8px var(--primary-glow); }
.hng-slot-num {
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,60,140,0.6);
    border: 1px solid rgba(0,120,200,0.5);
    border-radius: 3px;
    font-family: var(--font-hud);
    font-size: 12px;
    color: #7aafff;
    cursor: pointer;
    transition: all 0.2s;
}
.hng-slot-num.active { background: rgba(0,100,220,0.7); border-color: var(--primary); color: var(--primary); }
.hng-slot-num:hover { border-color: var(--primary); }
.hng-divider { width: 1px; height: 24px; background: rgba(0,120,200,0.3); margin: 0 4px; }
.hng-btn-red {
    background: linear-gradient(180deg, rgba(120,20,20,0.8), rgba(80,10,10,0.9));
    border-color: rgba(200,50,50,0.6);
    color: #ff9090;
}
.hng-btn-red:hover { background: linear-gradient(180deg, rgba(180,30,30,0.8), rgba(120,15,15,0.9)); border-color: #ff5555; }

/* Tabs: UZAY GEMİSİ / DİROİTLER / P.E.T. */
.hangar-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid rgba(0,100,180,0.4);
    flex-shrink: 0;
}
.hangar-tab {
    padding: 8px 28px;
    font-family: var(--font-hud);
    font-size: 10px;
    letter-spacing: 2px;
    color: rgba(100,150,200,0.7);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
    background: rgba(5,12,35,0.5);
    white-space: nowrap;
}
.hangar-tab:hover { color: var(--primary); background: rgba(0,50,120,0.3); }
.hangar-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: rgba(0,50,150,0.3);
    text-shadow: 0 0 8px var(--primary);
}

/* Main hangar body */
.hangar-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Ship preview - left column */
.hangar-ship-preview {
    width: 200px;
    flex-shrink: 0;
    background: radial-gradient(ellipse at center, rgba(0,30,80,0.6), rgba(0,5,20,0.9));
    border-right: 1px solid rgba(0,100,180,0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
    overflow: hidden;
}
.hangar-ship-preview::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center bottom, rgba(0,100,200,0.15), transparent 70%);
}
.hangar-ship-img {
    width: 160px;
    height: 160px;
    object-fit: contain;
    filter: drop-shadow(0 0 20px var(--primary)) brightness(1.1);
    animation: shipFloat 4s ease-in-out infinite;
}
@keyframes shipFloat {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-8px) rotate(1deg); }
}
.hangar-ship-name {
    position: absolute;
    bottom: 12px;
    font-family: var(--font-hud);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--primary);
    text-shadow: 0 0 8px var(--primary);
}

/* Equipment center */
.hangar-equipment {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.hangar-equipment::-webkit-scrollbar { width: 4px; }
.hangar-equipment::-webkit-scrollbar-thumb { background: rgba(0,150,220,0.4); }

.equip-section {
    border: 1px solid rgba(0,80,160,0.4);
    border-radius: 4px;
    overflow: hidden;
}
.equip-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    background: linear-gradient(90deg, rgba(0,60,140,0.6), rgba(0,20,60,0.6));
    cursor: pointer;
    user-select: none;
}
.equip-section-header::before {
    content: '▼';
    font-size: 8px;
    color: var(--primary);
    transition: transform 0.2s;
}
.equip-section-header.collapsed::before { transform: rotate(-90deg); }
.equip-section-title {
    font-family: var(--font-hud);
    font-size: 9px;
    letter-spacing: 2px;
    color: var(--gold);
    text-transform: uppercase;
    text-shadow: 0 0 6px rgba(255,200,0,0.5);
}
.equip-slots-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 8px;
    background: rgba(0,8,25,0.7);
}
.equip-slot {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(10,20,50,0.9), rgba(5,10,30,0.95));
    border: 1px solid rgba(0,80,160,0.5);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}
.equip-slot:hover { border-color: var(--primary); box-shadow: 0 0 10px var(--primary-glow); }
.equip-slot.filled { border-color: rgba(0,150,220,0.6); background: rgba(0,30,80,0.8); }
.equip-slot.filled:hover { border-color: var(--primary); }

/* ── EKSTRA (CPU) slot styling ── */
.equip-slot.extra-slot {
    border-color: rgba(255,200,80,0.55);
    background: linear-gradient(180deg, rgba(60,40,0,0.45), rgba(30,20,0,0.55));
    position: relative;
}
.equip-slot.extra-slot:hover {
    border-color: rgba(255,200,80,0.95);
    box-shadow: 0 0 10px rgba(255,200,80,0.45);
}
.equip-slot.extra-slot-empty {
    border-style: dashed;
    border-color: rgba(255,200,80,0.30);
}
.equip-slot.extra-slot-empty:hover {
    border-color: rgba(255,200,80,0.75);
    background: rgba(60,40,0,0.20);
    box-shadow: 0 0 10px rgba(255,200,80,0.30);
}
.equip-slot.extra-slot.drop-hover,
.equip-slot.extra-slot-empty.drop-hover {
    border-color: #ffce6a !important;
    background: rgba(255,200,80,0.22) !important;
    box-shadow: 0 0 14px rgba(255,200,80,0.6);
}
.extra-pill {
    position: absolute;
    bottom: 1px; right: 2px;
    font-family: var(--font-mono);
    font-size: 8px;
    padding: 1px 4px;
    background: rgba(0,0,0,0.7);
    border: 1px solid rgba(255,200,80,0.4);
    border-radius: 6px;
    color: #ffce6a;
    line-height: 1;
}
.extra-pill + .extra-pill { bottom: 14px; }
.extra-inv-slot {
    border-color: rgba(255,200,80,0.45) !important;
    background: linear-gradient(180deg, rgba(60,40,0,0.4), rgba(30,20,0,0.55)) !important;
}
.extra-inv-slot:hover {
    border-color: rgba(255,200,80,0.9) !important;
    background: rgba(80,60,0,0.5) !important;
}
.equip-slot .slot-icon { font-size: 22px; }
.equip-slot .slot-icon-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    display: block;
}
/* CPU / Ekstra hangar slot küçük görsel (64x64 kaynak → 42px ekranda) */
.extra-icon-img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    display: block;
    image-rendering: -webkit-optimize-contrast;
    pointer-events: none;
    filter: drop-shadow(0 0 3px rgba(255,200,80,0.25));
}
.extra-inv-slot .extra-icon-img {
    width: 40px;
    height: 40px;
}
.equip-slot .slot-lvl {
    position: absolute;
    top: 1px; right: 2px;
    font-family: var(--font-hud);
    font-size: 7px;
    color: rgba(255,200,100,0.9);
    background: rgba(0,0,0,0.7);
    padding: 0 2px;
    border-radius: 2px;
}
.equip-slot .slot-tier {
    position: absolute;
    bottom: 1px; left: 2px;
    font-family: var(--font-hud);
    font-size: 7px;
    color: rgba(100,200,255,0.9);
}
.equip-slot-empty {
    background: rgba(5,10,25,0.6);
    border: 1px dashed rgba(0,60,120,0.4);
}

/* Item tooltip */
.hangar-tooltip {
    position: absolute;
    background: linear-gradient(135deg, rgba(5,15,45,0.98), rgba(2,8,30,0.99));
    border: 1px solid rgba(0,120,220,0.6);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 12px;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 0 20px rgba(0,100,200,0.4);
    /* CPU açıklamaları uzun olabilir — sınırlı genişlik + sarmalama */
    max-width: 260px;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.hangar-tooltip .tt-row .tt-val { white-space: normal; word-break: break-word; }
.hangar-tooltip .tt-name { font-family: var(--font-hud); font-size: 11px; color: var(--primary); margin-bottom: 4px; }
.hangar-tooltip .tt-row { display: flex; gap: 8px; font-family: var(--font-mono); font-size: 11px; }
.hangar-tooltip .tt-label { color: var(--text-muted); }
.hangar-tooltip .tt-val { color: var(--text-primary); }

/* Inventory - right panel */
.hangar-inventory {
    width: 220px;
    flex-shrink: 0;
    background: rgba(2,8,22,0.9);
    border-left: 1px solid rgba(0,100,180,0.3);
    display: flex;
    flex-direction: column;
}
.inventory-header {
    padding: 8px 12px;
    background: linear-gradient(90deg, rgba(0,60,140,0.6), rgba(0,20,60,0.6));
    font-family: var(--font-hud);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--primary);
    border-bottom: 1px solid rgba(0,100,180,0.3);
    flex-shrink: 0;
}
.inventory-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
    padding: 6px;
    overflow-y: auto;
    overflow-x: hidden;
    align-content: start;
}
.inventory-grid::-webkit-scrollbar { width: 4px; }
.inventory-grid::-webkit-scrollbar-thumb { background: rgba(0,150,220,0.4); }
.inv-slot {
    aspect-ratio: 1;
    min-width: 0;
    background: rgba(5,12,32,0.8);
    border: 1px solid rgba(0,60,120,0.5);
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.15s;
    position: relative;
}
.inv-slot:hover { border-color: var(--primary); background: rgba(0,40,100,0.6); }
.inv-slot .inv-item-img {
    width: 80%;
    height: 80%;
    object-fit: contain;
    display: block;
}
.inv-slot .item-emoji { font-size: 16px; }

/* Seçili item highlight */
.inv-slot.inv-selected {
    border-color: var(--gold) !important;
    background: rgba(180,130,0,0.18) !important;
    box-shadow: 0 0 8px rgba(255,200,0,0.4);
}
/* Sürüklenen item opaklık */
.inv-slot.inv-dragging { opacity: 0.4; }
/* Drag over slot: uyumlu */
.equip-slot.slot-drag-over {
    border-color: #00ff88 !important;
    background: rgba(0,255,136,0.12) !important;
    box-shadow: 0 0 14px rgba(0,255,136,0.5) !important;
}
/* Drag over slot: uyumsuz */
.equip-slot.slot-drag-invalid {
    border-color: #ff4455 !important;
    background: rgba(255,40,60,0.10) !important;
}
/* Live stat değerleri renk */
.ss-live { color: #00e5ff !important; }

.inv-slot .inv-qty {
    position: absolute;
    bottom: 0; right: 2px;
    font-family: var(--font-hud);
    font-size: 8px;
    color: var(--gold);
}
.inventory-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    border-top: 1px solid rgba(0,100,180,0.3);
    flex-shrink: 0;
}
.inv-action-btn {
    width: 100%;
    padding: 5px;
    font-family: var(--font-hud);
    font-size: 9px;
    letter-spacing: 1px;
    cursor: pointer;
    border-radius: 3px;
    text-align: center;
    transition: all 0.2s;
}
.inv-action-btn.blue {
    background: linear-gradient(180deg, rgba(0,50,130,0.8), rgba(0,25,80,0.9));
    border: 1px solid rgba(0,100,200,0.6);
    color: #a0c8ff;
}
.inv-action-btn.blue:hover { border-color: var(--primary); color: #fff; }
.inv-action-btn.green {
    background: linear-gradient(180deg, rgba(0,80,40,0.8), rgba(0,50,25,0.9));
    border: 1px solid rgba(0,180,80,0.6);
    color: #80ffb0;
}
.inv-action-btn.green:hover { border-color: #00ff88; }
.inv-action-btn.red {
    background: linear-gradient(180deg, rgba(120,20,20,0.8), rgba(80,10,10,0.9));
    border: 1px solid rgba(220,60,60,0.6);
    color: #ffaaaa;
}
.inv-action-btn.red:hover { border-color: #ff4444; color: #fff; }
.inv-action-btn.credits-label {
    background: none;
    border: none;
    color: var(--gold);
    font-size: 11px;
    padding: 2px;
    cursor: default;
}

/* ── Hangar ek stiller ──────────────────────────────────────── */

/* Gemi istatistik satırları */
.hangar-ship-mfr {
    font-size: 9px;
    color: var(--text-muted);
    letter-spacing: 2px;
    margin-top: 2px;
}
.hangar-ship-stats {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 8px;
    width: 100%;
    padding: 0 2px;
}
.ship-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-hud);
    font-size: 9px;
    padding: 2px 6px;
    background: rgba(0,40,100,0.3);
    border-radius: 3px;
    border: 1px solid rgba(0,80,160,0.2);
    white-space: nowrap;
    overflow: hidden;
}
.ss-lbl { color: var(--text-muted); flex-shrink: 0; }
.ss-val { color: var(--primary); text-align: right; margin-left: 4px; overflow: hidden; text-overflow: ellipsis; }

/* Gemi emoji (fallback) */
.hangar-ship-emoji {
    font-size: 90px;
    animation: shipFloat 4s ease-in-out infinite;
}

/* Section sayacı */
.equip-section-count {
    margin-left: auto;
    font-size: 10px;
    color: var(--text-muted);
    font-family: var(--font-hud);
}

/* Slot label (item adı) */
.slot-label {
    font-size: 8px;
    color: #88aacc;
    font-family: var(--font-hud);
    letter-spacing: .5px;
    margin-top: 2px;
    max-width: 56px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
.slot-plus {
    color: rgba(0,80,160,0.35);
    font-size: 20px;
}

/* Cephane bar */
.ammo-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
}
.ammo-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(0,30,80,0.7);
    border: 1px solid rgba(0,100,180,0.4);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 11px;
    cursor: default;
}
.ammo-name { color: #88aacc; font-family: var(--font-hud); font-size: 10px; }
.ammo-qty  { color: var(--gold); font-size: 10px; }
.ammo-x    { color: #ff8855; font-size: 10px; font-weight: bold; }
.ammo-img  { width: 28px; height: 28px; object-fit: contain; display: block; flex-shrink: 0; }
.ammo-img + .item-emoji { font-size: 18px; }

/* Drone kartları */
.drone-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 80px;
    height: 90px;
    background: rgba(0,30,80,0.6);
    border: 1px solid rgba(0,100,180,0.4);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    float: left;
    margin: 6px;
}
.drone-card.filled { border-color: rgba(0,150,220,0.6); background: rgba(0,50,120,0.5); }
.drone-card:hover  { border-color: var(--primary); background: rgba(0,80,180,0.4); }
.drone-icon { font-size: 28px; }
.drone-name { font-size: 10px; font-family: var(--font-hud); color: #aaccff; }
.drone-type { font-size: 9px;  color: var(--text-muted); }

/* ── Drone Item Card ─────────────────────────────────────────── */
.drone-item-card {
    background: linear-gradient(135deg, rgba(0,20,60,0.85), rgba(0,10,35,0.9));
    border: 1px solid rgba(0,100,220,0.45);
    border-radius: 8px;
    margin-bottom: 10px;
    transition: border-color .2s, box-shadow .2s;
}
.drone-item-card:hover {
    border-color: rgba(0,160,255,0.7);
    box-shadow: 0 0 12px rgba(0,120,255,0.18);
}

/* Üst başlık — tıklanabilir (collapse toggle) */
.dic-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(0,40,100,0.5);
    border-bottom: 1px solid rgba(0,80,180,0.3);
    border-radius: 8px 8px 0 0;
    user-select: none;
}
.dic-header.collapsed { border-radius: 8px; border-bottom: none; }

/* ── Klan pager ── */
.clan-page-btn {
    min-width: 28px; height: 26px;
    padding: 0 6px;
    background: rgba(0,20,60,0.7);
    border: 1px solid rgba(0,120,255,0.25);
    border-radius: 4px;
    color: var(--text-muted);
    font-family: var(--font-hud);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
}
.clan-page-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.clan-page-btn.active { background: rgba(0,100,255,0.3); border-color: var(--primary); color: #fff; font-weight: 700; }
.clan-page-btn:disabled { opacity: 0.3; cursor: default; }
.clan-page-dots { color: var(--text-muted); font-size: 11px; padding: 0 2px; line-height: 26px; }
.clan-page-info { color: var(--text-muted); font-size: 10px; margin-left: 6px; font-family: var(--font-hud); }

/* Drone sat butonu */
.dic-sell-btn {
    margin-left: auto;
    padding: 2px 8px;
    font-family: var(--font-hud);
    font-size: 9px;
    background: linear-gradient(180deg, rgba(120,20,20,0.8), rgba(80,10,10,0.9));
    border: 1px solid rgba(220,60,60,0.5);
    border-radius: 3px;
    color: #ffaaaa;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
}
.dic-sell-btn:hover { border-color: #ff4444; color: #fff; }

/* Chevron toggle butonu */
.dic-toggle-btn {
    width: 22px; height: 22px;
    background: rgba(0,60,160,0.5);
    border: 1px solid rgba(0,100,220,0.5);
    border-radius: 4px;
    color: #88ccff;
    font-size: 10px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    pointer-events: none;   /* tıklamayı üst header alır */
}
.dic-toggle-btn i {
    transition: transform .25s ease;
}
.dic-drone-name {
    font-family: var(--font-hud);
    font-size: 12px;
    color: #cce8ff;
    letter-spacing: .04em;
    text-transform: uppercase;
    flex: 1;
}
.dic-unit-num {
    font-size: 10px;
    color: rgba(100,180,255,0.55);
    font-family: var(--font-hud);
}

/* Kart gövdesi */
.dic-body {
    display: flex;
    padding: 10px 10px 10px 10px;
    gap: 12px;
    align-items: flex-start;
}

/* Sol: fotoğraf */
.dic-image-wrap {
    width: 68px;
    flex-shrink: 0;
    background: rgba(0,30,80,0.6);
    border: 1px solid rgba(0,80,180,0.35);
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    padding: 6px;
    align-self: flex-start;
}
.dic-img {
    width: 56px; height: 56px;
    object-fit: contain;
    display: block;
}
.dic-img-fallback {
    font-size: 36px;
    line-height: 56px;
    width: 56px;
    text-align: center;
}

/* Sağ: satır listesi */
.dic-slots-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Her satır: label + değer/slot */
.dic-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
}
.dic-row-lbl {
    font-size: 10px;
    color: var(--text-muted);
    font-family: var(--font-hud);
    width: 52px;
    flex-shrink: 0;
    white-space: nowrap;
}
.dic-lvl-val {
    font-size: 12px;
    color: var(--gold);
    font-family: var(--font-hud);
    font-weight: 700;
}

/* Body sağ taraf — dikey slot grubu */
.dic-body-slots {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    align-self: flex-start;
    flex-shrink: 0;
}
/* Drone item slotu */
.dic-slot-sq {
    width: 38px !important;
    height: 38px !important;
    flex-shrink: 0;
}

/* Slot picker overlay */
.hng-picker-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,5,20,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    border-radius: 8px;
}
.hng-picker {
    background: linear-gradient(180deg, rgba(5,15,40,0.98), rgba(2,8,25,0.98));
    border: 1px solid rgba(0,120,220,0.6);
    border-radius: 8px;
    padding: 16px;
    min-width: 260px;
    max-width: 340px;
    max-height: 400px;
    overflow-y: auto;
    box-shadow: 0 0 30px rgba(0,100,200,0.3);
}
.hng-picker-title {
    font-family: var(--font-hud);
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--primary);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0,100,200,0.3);
}
.hng-picker-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.picker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(0,30,80,0.5);
    border: 1px solid rgba(0,80,160,0.3);
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    transition: background .15s, border-color .15s;
}
.picker-item:hover       { background: rgba(0,60,160,0.5); border-color: var(--primary); }
.picker-item-active      { border-color: #00ff88; background: rgba(0,80,40,0.4); }
.picker-item b           { color: #cce0ff; font-family: var(--font-hud); }
.picker-item-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}
.item-emoji { font-size: 20px; }

/* Loading spinner */
.hangar-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 200px;
    color: #334466;
    font-family: var(--font-hud);
    font-size: 12px;
    letter-spacing: 1px;
    width: 100%;
}
.hng-spinner {
    width: 28px; height: 28px;
    border: 3px solid rgba(0,100,200,0.2);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Tooltip spec satırı */
.hangar-tooltip .tt-row:last-child .tt-val { color: #88aacc; font-size: 10px; }

/* ── Slot satır kırması (>10 slot) ── */
.slots-row-break { width: 100%; height: 0; flex-basis: 100%; }

/* ── Section-level drag highlight (envanterdeki item sürüklenirken) ── */
.equip-section.section-drag-compat .equip-slots-row {
    background: rgba(0,255,136,0.10);
    border-radius: 4px;
    transition: background 0.15s;
}
.equip-section.section-drag-incompat .equip-slots-row {
    background: rgba(255,40,60,0.07);
    border-radius: 4px;
    transition: background 0.15s;
}
/* ── Drone kart drag highlight ── */
.drone-item-card.section-drag-compat {
    border-color: rgba(0,255,136,0.55) !important;
    background: rgba(0,255,136,0.06);
    transition: border-color 0.15s, background 0.15s;
}
.drone-item-card.section-drag-incompat {
    border-color: rgba(255,40,60,0.3) !important;
    background: rgba(255,40,60,0.04);
    transition: border-color 0.15s, background 0.15s;
}

/* ── Slottan sürüklenen item ── */
.equip-slot.slot-item-dragging { opacity: 0.4; }

/* ── Envanter drop zone (slottan envantere sürükleme) ── */
#invGrid.inv-drop-zone-active {
    outline: 2px dashed rgba(0,180,255,0.5);
    background: rgba(0,80,180,0.05);
    border-radius: 4px;
}
#invGrid.inv-drop-zone-hover {
    outline: 2px solid rgba(0,255,136,0.7);
    background: rgba(0,255,136,0.06);
    border-radius: 4px;
}

/* ── Lasso seçim kutusu ── */
.inv-lasso {
    position: fixed;
    border: 1px dashed rgba(0,200,255,0.85);
    background: rgba(0,150,255,0.07);
    pointer-events: none;
    z-index: 9999;
    border-radius: 2px;
}

/* ── Lasso ile seçilmiş item ── */
.inv-slot.inv-lasso-selected {
    border-color: #00ccff !important;
    background: rgba(0,180,255,0.18) !important;
    box-shadow: 0 0 8px rgba(0,200,255,0.45);
}

/* ── Lasso ile seçilmiş ekipman slotu ── */
.equip-slot.equip-slot-selected {
    outline: 2px solid rgba(255,200,0,0.9) !important;
    background: rgba(255,180,0,0.18) !important;
    box-shadow: 0 0 10px rgba(255,200,0,0.5);
}

/* ── Ekipman toplu işlem butonu çubuğu ── */
.equip-bulk-bar {
    display: flex;
    gap: 6px;
    padding: 6px 10px;
    border-top: 1px solid rgba(200,80,80,0.3);
    background: rgba(5,10,25,0.7);
    flex-shrink: 0;
}

/* ── Sürükleme sırasında imleci gizle ── */
body.is-dragging,
body.is-dragging * { cursor: none !important; }

.shop-wrapper {
    display: flex;
    background: rgba(2,8,20,0.95);
    border: 1px solid rgba(0,150,220,0.4);
    border-radius: 8px;
    overflow: hidden;
    height: calc(100vh - 120px);
    min-height: 580px;
}

/* Shop header bar (credits + orbidium) */
.shop-header {
    display: flex;
    align-items: center;
    padding: 6px 14px;
    background: linear-gradient(180deg, rgba(10,25,60,0.95), rgba(5,12,35,0.95));
    border-bottom: 1px solid rgba(0,120,200,0.4);
    gap: 20px;
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 12px;
}
.shop-header-currency {
    display: flex;
    align-items: center;
    gap: 6px;
}
.shop-header-currency .icon { font-size: 14px; }
.shop-header-currency .val { color: #fff; }

/* Left sidebar */
.shop-sidebar {
    width: 145px;
    flex-shrink: 0;
    background: rgba(3,10,28,0.9);
    border-right: 1px solid rgba(0,100,180,0.3);
    display: flex;
    flex-direction: column;
    padding: 6px 0;
    overflow-y: auto;
}
.shop-sidebar::-webkit-scrollbar { width: 3px; }

.shop-cat {
    padding: 10px 14px;
    font-family: var(--font-hud);
    font-size: 10px;
    letter-spacing: 1.5px;
    color: rgba(120,160,210,0.8);
    cursor: pointer;
    border-left: 3px solid transparent;
    border-bottom: 1px solid rgba(0,60,120,0.2);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.shop-cat:hover { color: var(--primary); background: rgba(0,50,120,0.3); }
.shop-cat.active {
    color: var(--primary);
    background: linear-gradient(90deg, rgba(0,60,160,0.5), rgba(0,30,80,0.3));
    border-left-color: var(--primary);
    text-shadow: 0 0 6px var(--primary);
}
.shop-cat .cat-dot {
    width: 6px; height: 6px;
    background: var(--red);
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 4px var(--red);
}

/* Main shop area */
.shop-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Scroll arrows top/bottom */
.shop-scroll-btn {
    width: 100%;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,30,80,0.6);
    border-bottom: 1px solid rgba(0,80,160,0.3);
    cursor: pointer;
    color: var(--primary);
    font-size: 12px;
    transition: background 0.2s;
    flex-shrink: 0;
}
.shop-scroll-btn.bottom { border-bottom: none; border-top: 1px solid rgba(0,80,160,0.3); }
.shop-scroll-btn:hover { background: rgba(0,50,120,0.6); }

/* Item grid */
.shop-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    overflow-y: auto;
    align-content: start;
}
.shop-grid::-webkit-scrollbar { width: 4px; }
.shop-grid::-webkit-scrollbar-thumb { background: rgba(0,150,220,0.4); }

.shop-item-card {
    border: 1px solid rgba(0,70,140,0.4);
    border-radius: 0;
    padding: 8px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: rgba(3,10,28,0.7);
    position: relative;
    min-height: 110px;
}
.shop-item-card:hover { background: rgba(0,30,80,0.8); border-color: var(--primary); z-index: 1; }
.shop-item-card.selected {
    border-color: var(--gold);
    background: rgba(0,40,100,0.8);
    box-shadow: inset 0 0 20px rgba(255,200,0,0.06);
}
.shop-item-img {
    width: 90px;
    height: 60px;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(0,150,255,0.4));
}
.shop-item-img-placeholder {
    width: 90px; height: 60px;
    display: flex; align-items: center; justify-content: center;
    font-size: 36px;
    filter: drop-shadow(0 0 8px rgba(0,150,255,0.4));
}
.shop-item-name {
    font-family: var(--font-hud);
    font-size: 9px;
    letter-spacing: 0.5px;
    color: var(--text-primary);
    text-align: center;
    line-height: 1.3;
}
.shop-item-price {
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 3px;
    margin-top: auto;
}
.shop-item-price.payment {
    background: rgba(255,100,0,0.15);
    border: 1px solid rgba(255,100,0,0.4);
    color: #ff8844;
}
.shop-item-price.credits {
    background: rgba(0,150,255,0.1);
    border: 1px solid rgba(0,150,255,0.3);
    color: #44aaff;
}
.shop-item-price.orbidium {
    background: rgba(150,80,255,0.1);
    border: 1px solid rgba(150,80,255,0.3);
    color: #bb88ff;
}

/* Item detail panel */
.shop-detail {
    width: 260px;
    flex-shrink: 0;
    background: rgba(2,8,22,0.95);
    border-left: 1px solid rgba(0,100,180,0.3);
    display: flex;
    flex-direction: column;
}
.shop-detail-header {
    padding: 8px 14px;
    background: linear-gradient(90deg, rgba(0,50,120,0.6), rgba(0,20,60,0.6));
    font-family: var(--font-hud);
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--primary);
    border-bottom: 1px solid rgba(0,100,180,0.3);
    flex-shrink: 0;
}
.shop-detail-img-wrap {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    background: radial-gradient(ellipse at center, rgba(0,30,80,0.5), rgba(0,5,20,0.8));
    min-height: 180px;
}
.shop-detail-item-img {
    font-size: 72px;
    filter: drop-shadow(0 0 15px rgba(0,150,255,0.6));
    animation: shopItemGlow 3s ease-in-out infinite;
}
@keyframes shopItemGlow {
    0%,100% { filter: drop-shadow(0 0 15px rgba(0,150,255,0.6)); }
    50% { filter: drop-shadow(0 0 25px rgba(0,200,255,0.9)); }
}
.shop-detail-item-name-main {
    font-family: var(--font-hud);
    font-size: 12px;
    color: var(--text-primary);
    text-align: center;
}
.shop-detail-item-name-sub {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
}
.shop-detail-price-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,100,0,0.1);
    border: 1px solid rgba(255,100,0,0.4);
    border-radius: 4px;
    padding: 4px 12px;
    font-family: var(--font-hud);
    font-size: 12px;
    color: #ff8844;
}
.shop-detail-desc {
    padding: 12px 14px;
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.6;
    border-top: 1px solid rgba(0,100,180,0.2);
    flex: 1;
}
.shop-detail-stats {
    padding: 8px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-top: 1px solid rgba(0,100,180,0.2);
}
.shop-detail-stat-row {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 11px;
}
.shop-detail-stat-row .lbl { color: var(--text-muted); }
.shop-detail-stat-row .val { color: var(--primary); }
.shop-buy-btn {
    margin: 10px 14px 14px;
    padding: 10px;
    background: linear-gradient(180deg, #2a7a1a, #1a5a10);
    border: 1px solid #4aaa2a;
    border-radius: 4px;
    color: #fff;
    font-family: var(--font-hud);
    font-size: 12px;
    letter-spacing: 2px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    flex-shrink: 0;
}
.shop-buy-btn:hover { background: linear-gradient(180deg, #3a9a22, #2a7a18); box-shadow: 0 0 15px rgba(100,220,50,0.3); }
.shop-buy-btn:disabled { background: linear-gradient(180deg,#444,#222); border-color:#555; color:#999; cursor:not-allowed; box-shadow:none; }

/* ── Shop Quantity Selector ── */
.shop-qty-box {
    margin: 8px 14px 4px;
    padding: 8px 10px;
    background: linear-gradient(180deg, rgba(0,30,60,0.55), rgba(0,15,35,0.65));
    border: 1px solid rgba(0,140,200,0.35);
    border-radius: 4px;
    flex-shrink: 0;
}
.shop-qty-title {
    font-family: var(--font-hud);
    font-size: 10px;
    letter-spacing: 2px;
    color: rgba(160,210,255,0.85);
    text-align: center;
    margin-bottom: 6px;
}
.shop-qty-presets {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
    margin-bottom: 6px;
}
.shop-qty-preset {
    padding: 5px 0;
    background: rgba(0,40,80,0.55);
    border: 1px solid rgba(0,140,200,0.4);
    border-radius: 3px;
    color: #cde7fa;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.14s;
}
.shop-qty-preset:hover { filter: brightness(1.25); border-color: #00c8ff; }
.shop-qty-preset.active {
    background: linear-gradient(180deg,#ffd56a,#c98a20);
    border-color: #ffce6a;
    color: #1a1000;
    font-weight: bold;
    box-shadow: 0 0 6px rgba(255,200,80,0.4);
}
.shop-qty-input-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: 5px;
}
.shop-qty-step {
    width: 28px;
    background: rgba(0,40,80,0.6);
    border: 1px solid rgba(0,140,200,0.4);
    color: #cde7fa;
    font-family: var(--font-mono);
    font-size: 15px;
    cursor: pointer;
    transition: all 0.14s;
    line-height: 1;
}
.shop-qty-step:first-child { border-radius: 3px 0 0 3px; }
.shop-qty-step:last-child  { border-radius: 0 3px 3px 0; }
.shop-qty-step:hover { background: rgba(0,80,140,0.7); border-color: #00c8ff; color: #fff; }
.shop-qty-input {
    flex: 1;
    min-width: 0;
    padding: 5px 6px;
    text-align: center;
    background: rgba(0,10,25,0.85);
    border: 1px solid rgba(0,140,200,0.4);
    border-left: none;
    border-right: none;
    color: #fff;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: bold;
    outline: none;
    -moz-appearance: textfield;
}
.shop-qty-input::-webkit-outer-spin-button,
.shop-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.shop-qty-input:focus { border-color: #ffce6a; box-shadow: 0 0 5px rgba(255,200,80,0.4); }
.shop-qty-total {
    text-align: center;
    padding: 4px 0 2px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: #ffce6a;
    border-top: 1px dashed rgba(0,140,200,0.3);
    margin-top: 4px;
}
.shop-qty-total .lbl { color: rgba(160,200,240,0.55); margin-right: 4px; font-size: 9px; letter-spacing: 1px; }

/* Shop yükleniyor / boş */
.shop-loading, .shop-empty {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
    color: var(--text-muted);
    font-family: var(--font-hud);
    font-size: 11px;
    letter-spacing: 2px;
}
.shop-loading { animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:0.5} 50%{opacity:1} }

/* Far right item name column (optional mini list) */
.shop-mini-list {
    width: 140px;
    flex-shrink: 0;
    background: rgba(3,10,28,0.8);
    border-left: 1px solid rgba(0,80,160,0.3);
    overflow-y: auto;
    padding: 4px 0;
}
.shop-mini-list::-webkit-scrollbar { width: 3px; }
.shop-mini-item {
    padding: 6px 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(0,60,120,0.2);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.shop-mini-item:hover { color: var(--primary); background: rgba(0,40,100,0.4); }
.shop-mini-item.active { color: var(--primary); background: rgba(0,50,130,0.5); }

/* ═══════════════════════════════════════
   YETENEK AGACI - Masaüstü Stili
═══════════════════════════════════════ */
.skilltree-wrapper {
    background: rgba(2,8,20,0.95);
    border: 1px solid rgba(0,150,220,0.4);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 500px;
}

/* Top logfile/ArGe bar */
.skilltree-topbar {
    display: flex;
    align-items: center;
    gap: 0;
    background: linear-gradient(180deg, rgba(10,25,60,0.95), rgba(5,12,35,0.95));
    border-bottom: 1px solid rgba(0,120,200,0.4);
    padding: 0;
    flex-shrink: 0;
}
.skilltree-logfile-bar {
    flex: 1;
    padding: 8px 16px;
    font-family: var(--font-hud);
    font-size: 11px;
    letter-spacing: 1px;
    color: #a0c8ff;
    border-right: 1px solid rgba(0,100,180,0.4);
    background: rgba(0,20,60,0.6);
}
.skilltree-logfile-bar span { color: var(--primary); }
.skilltree-convert-btn {
    padding: 8px 20px;
    background: linear-gradient(90deg, rgba(0,60,160,0.6) 0%, rgba(0,30,100,0.8) 100%);
    border: none;
    border-right: 1px solid rgba(0,100,180,0.4);
    font-family: var(--font-hud);
    font-size: 11px;
    letter-spacing: 1.5px;
    color: var(--primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    white-space: nowrap;
}
.skilltree-convert-btn:hover { background: rgba(0,80,200,0.5); }
.skilltree-convert-arrow {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: rgba(100,180,255,0.8);
    font-size: 10px;
}
.skilltree-arge-bar {
    padding: 8px 20px;
    font-family: var(--font-hud);
    font-size: 11px;
    letter-spacing: 1px;
    color: #a0c8ff;
    white-space: nowrap;
}
.skilltree-arge-bar .arge-val { color: var(--gold); font-size: 14px; }

/* Profile tabs (PROFİL / BAŞARILAR / YETENEK AĞACI) */
.skilltree-profile-tabs {
    display: flex;
    border-bottom: 2px solid rgba(0,100,180,0.4);
    background: rgba(3,10,28,0.8);
    flex-shrink: 0;
}
.skilltree-ptab {
    padding: 9px 24px;
    font-family: var(--font-hud);
    font-size: 10px;
    letter-spacing: 2px;
    color: rgba(100,150,200,0.7);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
    white-space: nowrap;
}
.skilltree-ptab:hover { color: var(--primary); background: rgba(0,50,120,0.2); }
.skilltree-ptab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    text-shadow: 0 0 8px var(--primary);
    background: rgba(0,50,150,0.2);
}

/* Main body */
.skilltree-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Left: conversion panel */
.skilltree-left {
    width: 180px;
    flex-shrink: 0;
    background: rgba(3,10,28,0.9);
    border-right: 1px solid rgba(0,100,180,0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px 12px;
    gap: 12px;
}
.skilltree-conversion-visual {
    width: 130px;
    height: 130px;
    background: linear-gradient(135deg, rgba(0,30,80,0.8), rgba(0,10,40,0.9));
    border: 1px solid rgba(0,100,180,0.4);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.skilltree-conversion-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(0,100,200,0.2), transparent 70%);
}
.cv-logfile {
    font-size: 32px;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 8px rgba(0,150,255,0.6));
}
.cv-arrow {
    font-size: 20px;
    color: rgba(0,150,255,0.8);
    position: relative;
    z-index: 1;
    animation: arrowPulse 1.5s ease-in-out infinite;
}
@keyframes arrowPulse { 0%,100%{opacity:0.5;transform:translateX(0)} 50%{opacity:1;transform:translateX(4px)} }
.cv-brain {
    font-size: 32px;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 8px rgba(180,100,255,0.6));
}
.skilltree-orbidium-btn {
    width: 100%;
    padding: 8px 6px;
    background: linear-gradient(90deg, rgba(200,100,0,0.3), rgba(150,70,0,0.4), rgba(200,100,0,0.3));
    border: 1px solid rgba(220,120,0,0.5);
    border-radius: 4px;
    font-family: var(--font-hud);
    font-size: 9px;
    letter-spacing: 0.5px;
    color: #ffcc44;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.skilltree-orbidium-btn:hover { background: linear-gradient(90deg, rgba(220,130,0,0.4), rgba(180,90,0,0.5), rgba(220,130,0,0.4)); box-shadow: 0 0 10px rgba(220,120,0,0.3); }
.skilltree-orbidium-btn .arr { color: rgba(255,180,0,0.8); font-size: 11px; }

/* Right: skill grid area */
.skilltree-right {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    gap: 0;
}
.skilltree-right::-webkit-scrollbar { width: 4px; }
.skilltree-right::-webkit-scrollbar-thumb { background: rgba(0,150,220,0.4); }

/* Skill column */
.skill-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 8px;
    border-right: 1px solid rgba(0,80,160,0.3);
}
.skill-column:last-child { border-right: none; }

.skill-column-title {
    font-family: var(--font-hud);
    font-size: 9px;
    letter-spacing: 2px;
    text-align: center;
    padding: 4px;
    margin-bottom: 4px;
    border-radius: 3px;
    text-transform: uppercase;
}
.skill-column.engineering .skill-column-title { color: #44aaff; background: rgba(0,100,200,0.1); border: 1px solid rgba(0,100,200,0.3); }
.skill-column.offense .skill-column-title { color: #ff6644; background: rgba(200,50,0,0.1); border: 1px solid rgba(200,50,0,0.3); }

/* Skill node */
.skill-node-do {
    background: linear-gradient(135deg, rgba(8,18,45,0.95), rgba(4,10,28,0.98));
    border: 2px solid rgba(40,80,140,0.6);
    border-radius: 6px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
    overflow: hidden;
    min-height: 90px;
}
.skill-node-do:hover { transform: scale(1.03); }
.skill-node-do::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.03), transparent);
}

/* States */
.skill-node-do.maxed {
    border-color: rgba(0,200,255,0.7);
    background: linear-gradient(135deg, rgba(0,40,100,0.8), rgba(0,20,60,0.9));
    box-shadow: 0 0 12px rgba(0,150,255,0.3), inset 0 0 20px rgba(0,100,200,0.1);
}
.skill-node-do.maxed.engineering { border-color: rgba(0,180,255,0.7); box-shadow: 0 0 12px rgba(0,150,255,0.3); }
.skill-node-do.maxed.offense { border-color: rgba(200,50,0,0.7); box-shadow: 0 0 12px rgba(200,50,0,0.3); background: linear-gradient(135deg, rgba(60,10,10,0.8), rgba(30,5,5,0.9)); }
.skill-node-do.maxed.purple { border-color: rgba(150,50,220,0.7); box-shadow: 0 0 12px rgba(120,50,200,0.3); background: linear-gradient(135deg, rgba(40,10,80,0.8), rgba(20,5,50,0.9)); }

.skill-node-do.partial {
    border-color: rgba(0,120,200,0.5);
    background: linear-gradient(135deg, rgba(5,15,35,0.9), rgba(2,8,22,0.95));
}
.skill-node-do.partial.engineering { border-color: rgba(0,120,200,0.5); }
.skill-node-do.partial.offense { border-color: rgba(160,40,0,0.5); }
.skill-node-do.partial.purple { border-color: rgba(100,40,160,0.5); }

.skill-node-do.locked {
    border-color: rgba(30,50,90,0.4);
    background: linear-gradient(135deg, rgba(5,10,25,0.8), rgba(2,5,15,0.9));
    opacity: 0.6;
}

/* Skill icon */
.skill-node-icon {
    font-size: 30px;
    filter: drop-shadow(0 0 6px rgba(0,150,255,0.4));
    position: relative;
    z-index: 1;
}
.skill-node-do.locked .skill-node-icon { filter: grayscale(0.8) brightness(0.5); }
.skill-node-do.maxed.offense .skill-node-icon { filter: drop-shadow(0 0 6px rgba(255,80,0,0.5)); }
.skill-node-do.maxed.purple .skill-node-icon { filter: drop-shadow(0 0 6px rgba(180,80,255,0.5)); }

/* Skill name */
.skill-node-name {
    font-family: var(--font-hud);
    font-size: 8px;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    text-align: center;
    position: relative;
    z-index: 1;
    line-height: 1.3;
}
.skill-node-do.locked .skill-node-name { color: var(--text-muted); }

/* Level indicator bar */
.skill-node-level {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    z-index: 1;
}
.skill-level-bar-bg {
    width: 100%;
    height: 4px;
    background: rgba(0,0,0,0.5);
    border-radius: 2px;
    overflow: hidden;
    border: 1px solid rgba(0,60,120,0.4);
}
.skill-level-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease-out;
}
.engineering .skill-level-bar-fill { background: linear-gradient(90deg, #004499, #0088ff); box-shadow: 0 0 4px #0088ff; }
.offense .skill-level-bar-fill { background: linear-gradient(90deg, #881100, #ff4400); box-shadow: 0 0 4px #ff4400; }
.purple .skill-level-bar-fill { background: linear-gradient(90deg, #440088, #aa44ff); box-shadow: 0 0 4px #aa44ff; }
.skill-level-text {
    font-family: var(--font-hud);
    font-size: 8px;
    color: rgba(150,180,220,0.8);
    text-align: center;
}
.skill-node-do.locked .skill-level-text { color: rgba(80,100,140,0.6); }

/* Upgrade button */
.skill-upgrade-btn {
    width: 100%;
    padding: 3px;
    background: linear-gradient(180deg, rgba(0,100,200,0.6), rgba(0,60,140,0.7));
    border: 1px solid rgba(0,150,255,0.4);
    border-radius: 3px;
    font-family: var(--font-hud);
    font-size: 7px;
    letter-spacing: 0.5px;
    color: var(--primary);
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
    z-index: 1;
    position: relative;
    display: none;
}
.skill-node-do:not(.locked):not(.maxed) .skill-upgrade-btn { display: block; }
.skill-upgrade-btn:hover { background: rgba(0,120,240,0.5); border-color: var(--primary); }

/* Footer stats bar */
.skilltree-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: linear-gradient(180deg, rgba(5,12,35,0.9), rgba(2,8,22,0.95));
    border-top: 1px solid rgba(0,100,180,0.3);
    flex-shrink: 0;
    gap: 12px;
}
.skilltree-footer-stats {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-secondary);
}
.skilltree-footer-stats .hl { color: var(--primary); }
.skilltree-reset-btn {
    padding: 6px 16px;
    background: linear-gradient(180deg, rgba(120,15,15,0.8), rgba(80,8,8,0.9));
    border: 1px solid rgba(200,30,30,0.6);
    border-radius: 4px;
    font-family: var(--font-hud);
    font-size: 9px;
    letter-spacing: 1px;
    color: #ff8888;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    white-space: nowrap;
}
.skilltree-reset-btn:hover { background: rgba(180,25,25,0.7); border-color: #ff4444; box-shadow: 0 0 10px rgba(200,0,0,0.3); }

/* Skill detail panel (appears on click) */
.skill-detail-panel {
    position: fixed;
    background: linear-gradient(135deg, rgba(5,15,45,0.98), rgba(2,8,30,0.99));
    border: 1px solid rgba(0,120,220,0.6);
    border-radius: 8px;
    padding: 14px;
    width: 220px;
    z-index: 500;
    box-shadow: 0 0 20px rgba(0,100,200,0.4);
    pointer-events: none;
    display: none;
}
.skill-detail-panel.visible { display: block; }
.sdp-name { font-family: var(--font-hud); font-size: 11px; color: var(--primary); margin-bottom: 6px; }
.sdp-desc { font-size: 11px; color: var(--text-secondary); margin-bottom: 8px; line-height: 1.5; }
.sdp-row { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; padding: 3px 0; border-bottom: 1px solid rgba(0,60,120,0.2); }
.sdp-row .lbl { color: var(--text-muted); }
.sdp-row .val { color: var(--text-primary); }

/* ═══════════════════════════════════════
   DÜKKAN (SHOP) LAYOUT - Tam Yapı
═══════════════════════════════════════ */
.shop-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: rgba(2,8,22,0.97);
    border: 1px solid rgba(0,120,220,0.3);
    border-radius: 8px;
    overflow: hidden;
}

/* Header */
.shop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    background: linear-gradient(90deg, rgba(0,20,60,0.95), rgba(0,10,40,0.95));
    border-bottom: 1px solid rgba(0,100,200,0.35);
    flex-shrink: 0;
}
.shop-header-title {
    font-family: var(--font-hud);
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--primary);
}
.shop-header-currency {
    display: flex;
    gap: 18px;
    font-family: var(--font-mono);
    font-size: 12px;
}
.shop-header-currency .credits-label { color: #7ee8fa; }
.shop-header-currency .orbidium-label { color: #a78bfa; }

/* Body: 4 sütun yan yana */
.shop-body {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Sol Sidebar - Kategoriler */
.shop-sidebar {
    width: 150px;
    flex-shrink: 0;
    background: rgba(0,10,30,0.85);
    border-right: 1px solid rgba(0,80,160,0.3);
    overflow-y: auto;
    padding: 6px 0;
}
.shop-cat-item {
    padding: 9px 14px;
    font-family: var(--font-hud);
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--text-secondary);
    cursor: pointer;
    border-left: 3px solid transparent;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.18s;
}
.shop-cat-item:hover {
    color: var(--primary);
    background: rgba(0,60,140,0.25);
    border-left-color: rgba(0,160,255,0.3);
}
.shop-cat-item.active {
    color: var(--primary);
    background: rgba(0,80,180,0.2);
    border-left-color: var(--primary);
    font-weight: 600;
}
.shop-cat-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f59e0b;
    flex-shrink: 0;
    box-shadow: 0 0 4px #f59e0b;
}

/* Orta: Ürün Izgarası — mini liste kaldırıldı, native scrollbar */
.shop-grid-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(0,80,160,0.3);
    background: rgba(0,8,25,0.7);
    min-width: 0;
}
.shop-item-grid {
    flex: 1;
    /* SABİT 2 SÜTUN — kalan öğeler hep aşağıya kayar */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px;
    overflow-y: auto;
    align-content: start;
    scrollbar-width: thin;
    scrollbar-color: #1f7fb8 rgba(0,8,20,0.85);
}
/* Tema uyumlu özel scrollbar (Webkit) */
.shop-item-grid::-webkit-scrollbar { width: 9px; }
.shop-item-grid::-webkit-scrollbar-track {
    background: linear-gradient(180deg, rgba(0,8,22,0.95), rgba(0,4,16,0.95));
    border-left: 1px solid rgba(0,80,140,0.25);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
}
.shop-item-grid::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #2196d6 0%, #0a5a8c 50%, #2196d6 100%);
    border-radius: 5px;
    border: 1px solid rgba(120,210,255,0.35);
    box-shadow: 0 0 6px rgba(0,180,255,0.35), inset 0 0 4px rgba(150,220,255,0.25);
}
.shop-item-grid::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #46b8f2 0%, #1276b0 50%, #46b8f2 100%);
    box-shadow: 0 0 9px rgba(0,200,255,0.55), inset 0 0 5px rgba(180,230,255,0.4);
}
.shop-item-grid::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, #ffce6a 0%, #c98a20 50%, #ffce6a 100%);
    box-shadow: 0 0 9px rgba(255,200,80,0.55);
}
.shop-item-grid::-webkit-scrollbar-corner { background: transparent; }
.shop-item-card {
    /* Her itemin arka planı: base.webp (800x320). Solid renk fallback olarak kalır. */
    background: rgba(0,20,55,0.7) url('/img/shop/bg/base.webp') center/cover no-repeat;
    border: 1px solid rgba(0,80,160,0.3);
    border-radius: 6px;
    padding: 14px 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: all 0.18s;
    text-align: center;
    min-height: 200px;          /* itemler büyük + alan dolu gözüksün */
}
.shop-item-card:hover {
    border-color: var(--primary);
    /* background-image'i EXPLICIT ver — eski duplicate kuraldaki `background:` shorthand
       bg-image'i none yapıyordu; specificity aynı olduğu için color override etmek yetmiyor. */
    background-color: rgba(0,50,130,0.3);
    background-image: url('/img/shop/bg/base.webp');
    background-size: cover; background-position: center; background-repeat: no-repeat;
}
.shop-item-card.selected {
    border-color: var(--primary);
    background-color: rgba(0,60,160,0.35);
    background-image: url('/img/shop/bg/base.webp');
    background-size: cover; background-position: center; background-repeat: no-repeat;
    box-shadow: 0 0 10px rgba(0,160,255,0.2);
}
.shop-item-card.insufficient {
    opacity: 0.55;
}
.shop-item-card.insufficient .shop-item-price {
    color: #ff7a8c !important;
    background: rgba(255,80,100,0.12) !important;
}
/* SAHİPSİN — zaten sahip olunan tasarım/item (satın alınamaz) */
.shop-item-card.owned {
    border-color: rgba(60,220,130,0.55) !important;
    box-shadow: 0 0 12px rgba(40,200,120,0.22);
}
.shop-owned-badge {
    display: inline-block;
    padding: 2px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 800; letter-spacing: .5px;
    color: #062; background: rgba(60,220,130,0.9);
    text-transform: uppercase;
}
.shop-item-img {
    /* Eski blokta width:90px height:60px sabit set edilmiş — override için explicit auto. */
    width: auto; height: auto;
    max-width: 80%;
    max-height: 130px;          /* eskiden 56 — itemler daha belirgin */
    object-fit: contain;
    /* Glow yerine alta düşen yumuşak koyu gölge — ürün "havada duruyor" hissi */
    filter: drop-shadow(0 5px 9px rgba(0,0,0,0.7)) drop-shadow(0 1px 2px rgba(0,0,0,0.55));
}
.shop-item-img-placeholder {
    width: auto; height: auto;
    font-size: 72px;            /* emoji fallback de büyük gözüksün */
    line-height: 1;
    filter: drop-shadow(0 5px 9px rgba(0,0,0,0.7));
}
.shop-item-name {
    font-family: var(--font-hud);
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--text-primary);
}
.shop-item-price {
    font-family: var(--font-mono);
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
}
.shop-item-price.payment  { color: #f59e0b; background: rgba(245,158,11,0.1); }
.shop-item-price.credits  { color: #7ee8fa; background: rgba(126,232,250,0.1); }
.shop-item-price.orbidium  { color: #a78bfa; background: rgba(167,139,250,0.1); }

/* ── PREMIUM — orbidium ürünlerde %5 indirim göstergesi ─────────── */
/* Köşe şeridinin kart dışına taşan kısmı kırpılsın (klasik çapraz banner). */
.shop-item-card { position: relative; overflow: hidden; }
.shop-disc-ribbon {
    position: absolute; top: 12px; right: -24px;
    width: 86px; text-align: center;
    transform: rotate(45deg);
    background: linear-gradient(135deg, #ffe07a 0%, #f0b429 45%, #a9741a 100%);
    color: #2a1c00;
    font-family: var(--font-hud); font-size: 9px; font-weight: 800; letter-spacing: 1px;
    padding: 3px 0;
    box-shadow: 0 1px 5px rgba(0,0,0,0.55);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35);
    z-index: 4; pointer-events: none;
}
/* İndirimli fiyat: eski fiyat üstü çizili + altın yeni fiyat */
.shop-price-old  { color: var(--text-muted); opacity: 0.7; font-size: 9px; margin-right: 4px; }
.shop-price-prem { color: #ffcf3a; font-weight: 800; text-shadow: 0 0 6px rgba(255,200,40,0.45); }
.shop-disc-tag {
    display: inline-block; margin-left: 5px; padding: 1px 6px; border-radius: 3px;
    background: linear-gradient(135deg, #ffe07a, #c8901f); color: #2a1c00;
    font-family: var(--font-hud); font-size: 9px; font-weight: 800; letter-spacing: 1px;
    vertical-align: middle;
}

/* Galaxy Gate — premium enerji şeridi (%15). Aynı çapraz banner stili. */
.gg-energy-wrap.gg-prem { position: relative; overflow: hidden; border-radius: 6px; }
.gg-disc-ribbon { top: 10px; right: -24px; }

/* ── HAPPY HOUR (Cumartesi indirim) — premium altınından ayrışan turuncu-kırmızı ── */
.hh-banner {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 6px 0; padding: 7px 12px; border-radius: 7px;
    background: linear-gradient(90deg, rgba(255,90,30,0.16), rgba(255,150,40,0.22), rgba(255,90,30,0.16));
    border: 1px solid rgba(255,140,50,0.55);
    color: #ffd9b0; font-family: var(--font-hud); font-size: 11px; font-weight: 700; letter-spacing: 0.6px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6); box-shadow: 0 0 14px rgba(255,110,30,0.25) inset;
    animation: hhPulse 2.4s ease-in-out infinite;
}
.hh-banner i { color: #ffae5a; }
@keyframes hhPulse { 0%,100% { box-shadow: 0 0 10px rgba(255,110,30,0.18) inset; } 50% { box-shadow: 0 0 18px rgba(255,140,40,0.34) inset; } }
/* Happy-hour rozet varyantı: çapraz şerit + etiket turuncu-kırmızı (premium = altın) */
.shop-disc-ribbon.shop-disc-hh,
.shop-disc-tag.shop-disc-hh {
    background: linear-gradient(135deg, #ff9a3c 0%, #f0552a 55%, #b3260f 100%);
    color: #fff3e8; text-shadow: 0 1px 1px rgba(0,0,0,0.45);
}
/* Gate enerji kutusunda küçük "HH" bayrağı (sol üst) */
.gg-hh-flag {
    position: absolute; top: 8px; left: -22px; width: 80px; text-align: center;
    transform: rotate(-45deg);
    background: linear-gradient(135deg, #ff9a3c, #e6481f);
    color: #fff3e8; font-family: var(--font-hud); font-size: 8px; font-weight: 800; letter-spacing: 1px;
    padding: 2px 0; box-shadow: 0 1px 5px rgba(0,0,0,0.55); z-index: 4; pointer-events: none;
}

/* Sağ: Detay Paneli */
.shop-detail-panel {
    width: 190px;
    flex-shrink: 0;
    background: rgba(0,12,35,0.9);
    border-right: 1px solid rgba(0,80,160,0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    gap: 8px;
    overflow: hidden;          /* panel KENDİSİ kaymaz → resim/isim/fiyat sabit kalır */
    min-height: 0;
}
/* Kayan bölge HARİÇ tüm parçalar (resim/isim/alt/fiyat/miktar/buton) sabit —
   küçülmez, hep görünür. ⛔ Eskiden istisna `.shop-detail-desc` idi ama o
   `min-height:auto` yüzünden içeriğinden kısalamıyordu → taşma kuyruğa biniyor
   ve SATIN AL butonu kırpılıyordu (2 Eyl 2026, jeneratörlerde bildirildi). */
.shop-detail-panel > :not(.shop-detail-scroll) { flex-shrink: 0; }
/* ⭐ Açıklama + statların ortak KAYAN bölgesi.
   ⚠ `min-height: 0` ŞART: sütun yönlü flex'te varsayılan `auto`, öğenin
     içeriğinden kısalmasını engeller ve overflow bir alt kardeşe taşar. */
.shop-detail-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    scrollbar-width: thin;
}
/* Bölge içindeyken açıklamanın kendi `flex:1`i anlamsız — doğal yüksekliğini alsın. */
.shop-detail-scroll > .shop-detail-desc { flex: 0 0 auto; }
.shop-detail-img {
    /* SABİT 160×160 kutu — tüm itemlar aynı yerde aynı boyutta görünür.
       Parent'ın boyutu olmadığında <img max-width:100%> doğal boyuta düşüyordu. */
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 6px;
    position: relative;             /* ileride bg image'i için */
    font-size: 54px;                /* emoji fallback (📦) için */
    line-height: 1;
    /* Arka plan: kullanıcı kendi resmini ekleyecek. Şimdilik subtle koyu zemin. */
    background: rgba(0,8,25,0.6) center/cover no-repeat;
}
.shop-detail-img img {
    position: relative; z-index: 1;  /* bg üstünde */
    max-width: 92%; max-height: 92%;
    object-fit: contain;
}
/* Currency-bazlı arka plan — JS, item seçimine göre class ekler/kaldırır */
.shop-detail-img.bg-credits  { background-image: url('/img/shop/bg/std.webp'); }
.shop-detail-img.bg-orbidium { background-image: url('/img/shop/bg/pre.webp'); }
.shop-detail-name {
    font-family: var(--font-hud);
    font-size: 12px;
    letter-spacing: 1.5px;
    color: var(--text-primary);
    text-align: center;
}
.shop-detail-sub {
    font-size: 10px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}
.shop-detail-price {
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.shop-detail-price.payment { color: #f59e0b; background: rgba(245,158,11,0.12); }
.shop-detail-price.credits { color: #7ee8fa; background: rgba(126,232,250,0.12); }
.shop-detail-price.orbidium { color: #a78bfa; background: rgba(167,139,250,0.12); }
.shop-detail-desc {
    font-size: 11px;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.5;
    /* ⭐ 29 Ağu 2026: açıklama `textContent` ile basılıyor ve normal `white-space`
       satır sonlarını YUTUYORDU → NEXUS "ev avantajı" madde listesi tek paragraf
       hâlinde eziliyordu. `pre-line` satır sonunu korur, fazla boşluğu yine
       birleştirir (tek satırlık eski açıklamalar aynen görünür). */
    white-space: pre-line;
    /* Uzun açıklama → KENDİ İÇİNDE kayar (resim/başlık yerinde kalır); kısa metinde scroll YOK. */
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow-y: auto;
    padding-right: 4px;
}
.shop-detail-desc::-webkit-scrollbar { width: 6px; }
.shop-detail-desc::-webkit-scrollbar-thumb { background: rgba(0,120,220,0.45); border-radius: 3px; }
.shop-detail-desc::-webkit-scrollbar-track { background: transparent; }
.shop-detail-stats {
    width: 100%;
    border-top: 1px solid rgba(0,80,160,0.3);
    padding-top: 8px;
}
.shop-detail-stat-row {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 10px;
    padding: 3px 0;
    border-bottom: 1px solid rgba(0,60,120,0.2);
}
.shop-detail-stat-row .lbl { color: var(--text-muted); }
.shop-detail-stat-row .val { color: var(--primary); }

/* ⭐ 29 Ağu 2026 — BÖLGESEL AVANTAJ SÜTUNU (NEXUS).
   Panel 190px: flex + space-between üç hücrede taşıyordu. Izgarada etiket
   sütunu minmax(0,1fr) → uzun etiket (pl: "Punkty wytrzymałości:") KIRPILMAZ,
   sarar; değer sütunları içeriğe göre daralır ve asla bölünmez.
   ⚠ Bu kurallar SON .shop-detail-stat-row bloğundan SONRA: dosyada iki tanım
     var ve sonraki kazanıyor. */
.shop-detail-stat-row.bonus {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 6px;
    align-items: baseline;
    font-size: 10px;
}
.shop-detail-stat-row.bonus .lbl { overflow-wrap: anywhere; }
.shop-detail-stat-row.bonus .val { white-space: nowrap; text-align: right; }
.shop-detail-stat-row.bonus .val.bon { color: #36d1a0; }
.shop-detail-stat-row.bonus .val.bon.up { font-weight: 700; }   /* gerçekten artan değer */
.shop-detail-stat-row.bonus.head { font-size: 9px; letter-spacing: .5px; opacity: .8; border-bottom-color: rgba(54,209,160,.3); }
.shop-detail-stat-row.bonus.head .val { color: var(--text-muted); }
.shop-detail-stat-row.bonus.head .val.bon { color: #36d1a0; }
.shop-bonus-note {
    font-size: 9px;
    color: var(--text-muted);
    line-height: 1.45;
    padding-top: 4px;
    overflow-wrap: anywhere;
}
.shop-buy-btn {
    margin-top: auto;
    width: 100%;
    padding: 9px;
    background: linear-gradient(135deg, #0050b3, #003a8c);
    border: 1px solid rgba(0,160,255,0.4);
    border-radius: 6px;
    color: var(--primary);
    font-family: var(--font-hud);
    font-size: 11px;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.2s;
}
.shop-buy-btn:hover {
    background: linear-gradient(135deg, #0066e0, #0050b3);
    box-shadow: 0 0 12px rgba(0,160,255,0.3);
}
.shop-buy-btn:disabled,
.shop-buy-btn.disabled {
    background: linear-gradient(135deg, #3a3a3a, #222);
    border-color: rgba(120,120,120,0.4);
    color: rgba(200,200,200,0.55);
    cursor: not-allowed;
    box-shadow: none;
}

/* ══════════════════════════════════════════════════════════════
   AR-GE (Yetenek Çizelgesi)
   ══════════════════════════════════════════════════════════════ */
.arge-wrapper { position: relative; min-height: 520px; }
.arge-loading {
    padding: 60px 20px; text-align: center;
    color: var(--text-muted); font-family: var(--font-hud); letter-spacing: 1px;
}

/* Üst bar */
.arge-topbar {
    display: flex; align-items: stretch; gap: 0;
    background: linear-gradient(180deg, rgba(10,25,60,0.95), rgba(5,12,35,0.95));
    border-bottom: 1px solid rgba(0,120,200,0.4);
    flex-shrink: 0;
}
.arge-logfile {
    flex: 1; display: flex; align-items: center; gap: 8px;
    padding: 12px 16px; font-family: var(--font-mono); font-size: 12px;
    color: var(--text-secondary);
}
.arge-lf-label { color: var(--text-muted); letter-spacing: 1px; }
.arge-lf-val   { color: #7ee8fa; font-weight: bold; }
.arge-lf-sep   { color: var(--text-muted); }
.arge-lf-need  { color: var(--gold); font-weight: bold; }
.arge-convert-btn {
    border: none; border-left: 1px solid rgba(0,120,200,0.4);
    border-right: 1px solid rgba(0,120,200,0.4);
    background: linear-gradient(135deg, #0a4d2e, #06351f);
    color: #7fffa0; font-family: var(--font-hud); font-size: 12px;
    letter-spacing: 2px; padding: 0 22px; cursor: pointer; transition: all 0.18s;
    display: flex; align-items: center; gap: 8px;
}
.arge-convert-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #0d6b40, #0a4d2e);
    box-shadow: 0 0 14px rgba(80,255,160,0.25);
}
.arge-convert-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.arge-conv-arrow { font-weight: bold; }
.arge-points {
    flex: 1; display: flex; align-items: center; justify-content: flex-end;
    gap: 6px; padding: 12px 16px; font-family: var(--font-hud); font-size: 12px;
    letter-spacing: 1px; color: var(--text-secondary);
}
.arge-pts-val { color: var(--gold); font-size: 16px; font-weight: bold; }
.arge-pts-max { color: var(--text-muted); }

/* Kaynak çubuğu (dosya/seprom/orbidium/kredi + dosya al) */
.arge-resbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 8px 16px; background: rgba(0,12,32,0.7);
    border-bottom: 1px solid rgba(0,80,160,0.25); flex-shrink: 0;
}
.arge-res-chip {
    font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
    padding: 4px 10px; background: rgba(0,20,50,0.6);
    border: 1px solid rgba(0,80,160,0.25); border-radius: 14px;
}
.arge-res-chip b { color: #7ee8fa; }
.arge-buy-files-btn {
    margin-left: auto; padding: 6px 14px;
    background: linear-gradient(135deg, #5a3a00, #3a2600);
    border: 1px solid rgba(255,180,60,0.4); border-radius: 6px;
    color: var(--gold); font-family: var(--font-hud); font-size: 10px;
    letter-spacing: 1px; cursor: pointer; transition: all 0.18s;
}
.arge-buy-files-btn:hover { box-shadow: 0 0 12px rgba(255,180,60,0.3); }
.arge-buy-files-btn .arr { opacity: 0.7; }

/* Simülasyon bağlantısı — "Dosya Satın Al"ın YANINDA ama ondan AYRIŞIR:
   biri gerçek harcama, öbürü denemedir. Altın yerine soğuk mavi + deney ikonu
   → oyuncu yanlışlıkla harcama yaptığını sanmasın.
   ⚠ margin-left:auto SADECE satın-al düğmesinde; burada olsaydı ikisi ayrılırdı. */
.arge-sim-link {
    padding: 6px 13px; text-decoration: none;
    background: linear-gradient(135deg, #10304e, #0a1d31);
    border: 1px solid rgba(90,170,240,0.38); border-radius: 6px;
    color: #8fd0ff; font-family: var(--font-hud); font-size: 10px;
    letter-spacing: 1px; cursor: pointer; transition: all 0.18s;
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.arge-sim-link:hover { color: #d6efff; border-color: rgba(90,170,240,0.75);
    box-shadow: 0 0 12px rgba(60,150,240,0.28); }
.arge-sim-link i { opacity: 0.85; }

/* 3×3 MATRİS (satır=kategori, sütun=BÖLGE) — dosimulator birebir */
.arge-matrix-scroll {
    flex: 1; min-height: 0; overflow: auto; padding: 14px 16px;
    background:
        radial-gradient(circle at 50% 0%, rgba(0,60,140,0.10), transparent 60%),
        rgba(2,8,22,0.6);
}
.arge-matrix {
    display: grid;
    gap: 10px 14px;
    align-items: start;
    width: max-content; margin: 0 auto;
}
/* Sol-üst boş köşe */
.arge-mx-corner { }
/* BÖLGE sütun başlıkları */
.arge-bolge-head {
    font-family: var(--font-hud); font-size: 13px; letter-spacing: 1px;
    color: #cfe0ff; text-align: center; padding: 4px 0 8px;
    border-bottom: 2px solid rgba(0,140,220,0.35);
}
/* Kategori satır etiketleri (sol) */
.arge-cat-label {
    display: flex; align-items: center; justify-content: flex-end;
    font-family: var(--font-hud); font-size: 12px; letter-spacing: 1px;
    padding-right: 12px; text-align: right;
}
.arge-cat-label.defensive { color: #5ab4ff; }
.arge-cat-label.utility   { color: #c48bff; }
.arge-cat-label.offensive { color: #ff6b6b; }
/* Hücre (bir kategori × bir BÖLGE) — sabit sütunlu grid, sol-hizalı
   → kategoriler arası dikey hizalama (dosimulator birebir). Kutu/çerçeve yok. */
.arge-cell {
    display: grid; gap: 12px 8px;
    justify-content: start; align-content: start;
    padding: 8px 4px; min-height: 96px;
    border-left: 1px solid rgba(255,255,255,0.05);
}

/* Beceri kartı */
.arge-node {
    position: relative; width: 76px; height: 94px;
    background: rgba(6,16,38,0.92);
    border: 1.5px solid rgba(120,140,170,0.25); border-radius: 8px;
    display: flex; flex-direction: column; align-items: center;
    justify-content: flex-end;                   /* name/bar/lvl alt orta kısmaya kümelensin */
    padding: 7px 3px 5px; cursor: default; transition: all 0.15s; box-sizing: border-box;
    overflow: hidden;                            /* ikon cell-fill için: kenarlar yuvarlağa kırpılsın */
}
/* Alt strip — name/bar/lvl'in ikon arkaplanından net okunması için yumuşak koyu gradient */
.arge-node::before {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 52px;
    background: linear-gradient(to top,
        rgba(0,0,0,0.78) 0%,
        rgba(0,0,0,0.55) 55%,
        rgba(0,0,0,0)    100%);
    pointer-events: none;
    z-index: 1;                                  /* ikon üstünde, metinlerin altında */
    border-radius: 0 0 6px 6px;                  /* node alt köşeleriyle uyum */
}
.arge-node:hover { transform: translateY(-2px); }
/* Kategori renkleri (sol kenar şeridi + hover glow) */
.arge-node.defensive { border-left: 3px solid #3aa0ff; }
.arge-node.utility   { border-left: 3px solid #b266ff; }
.arge-node.offensive { border-left: 3px solid #ff4d4d; }
.arge-node.defensive:hover { box-shadow: 0 0 12px rgba(58,160,255,0.35); }
.arge-node.utility:hover   { box-shadow: 0 0 12px rgba(178,102,255,0.35); }
.arge-node.offensive:hover { box-shadow: 0 0 12px rgba(255,77,77,0.35); }
/* Durumlar */
.arge-node.locked { opacity: 0.42; filter: grayscale(0.6); }
.arge-node.maxed  { border-color: rgba(255,215,0,0.6); box-shadow: 0 0 10px rgba(255,215,0,0.18); }
.arge-node.available { border-color: rgba(0,200,255,0.45); }

.arge-node-icon {
    /* CELL-FILL modu: ikon node'un TAMAMINI arkaplan olarak kaplar.
       Diğer elementler (name, bar, lvl, +button) üstüne overlay edilir. */
    position: absolute;
    inset: 0;                                   /* top/right/bottom/left = 0 */
    margin: 0;
    z-index: 0;
    display: flex; align-items: center; justify-content: center;
}
.arge-node-icon img {
    width: 100%; height: 100%;
    object-fit: cover;                          /* hücreyi tamamen doldur */
    border-radius: 6px;                         /* node köşeleriyle uyum */
    display: block;
}

/* ── Roma rakamı overlay (paired skill'ler — Zırh Tak. I/II vb.) ──
   Düz metin: arka plan YOK, yalnız siyah halo ile okunabilir.
   Sağ-alt köşede, branş rengiyle uyumlu. */
.arge-roman {
    position: absolute;
    top: 2px; right: 4px;                       /* cell-fill modu: sağ-ÜST köşe (level ile çakışmasın) */
    z-index: 2;                                 /* ikon arkaplanın üstünde */
    font-family: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
    font-weight: 800;
    font-size: 15px;                            /* cell büyük → rakam belirgin */
    line-height: 1;
    letter-spacing: 0.5px;
    color: #ffffff;
    pointer-events: none;
    /* Arka plan yerine güçlü siyah halo → her ikon üstünde okunur */
    text-shadow:
        0 0 2px rgba(0,0,0,0.95),
        0 0 3px rgba(0,0,0,0.9),
        1px 1px 0 rgba(0,0,0,0.9),
        -1px 1px 0 rgba(0,0,0,0.85),
        1px -1px 0 rgba(0,0,0,0.85),
        -1px -1px 0 rgba(0,0,0,0.6);
}
.arge-node.defensive .arge-roman { color: #6db8ff; }   /* mavi */
.arge-node.utility   .arge-roman { color: #d29bff; }   /* mor */
.arge-node.offensive .arge-roman { color: #ff8080; }   /* kırmızı */
.arge-node.maxed     .arge-roman { color: #ffd23b; }   /* MAX → altın */
.arge-node-ph {
    width: 32px; height: 32px; border-radius: 50%;
    align-items: center; justify-content: center; display: flex;
    font-family: var(--font-hud); font-size: 15px; color: #cfe8ff;
    background: rgba(0,40,90,0.7); border: 1px solid rgba(0,140,220,0.4);
}
.arge-node.utility   .arge-node-ph { background: rgba(60,20,90,0.7); border-color: rgba(178,102,255,0.45); }
.arge-node.offensive .arge-node-ph { background: rgba(90,20,20,0.7); border-color: rgba(255,90,90,0.45); }
.arge-node-name {
    font-size: 8.5px; line-height: 1.05; text-align: center; height: 20px;
    overflow: hidden; color: #f0f4ff; margin-bottom: 3px;
    display: flex; align-items: center;
    position: relative; z-index: 2;             /* ikon arkaplan üstünde kalsın */
    /* Cell-fill ikon üstünde okunurluk — koyu halo (arka plan yok) */
    text-shadow:
        0 0 3px rgba(0,0,0,0.95),
        1px 1px 2px rgba(0,0,0,0.9),
        -1px 1px 2px rgba(0,0,0,0.9);
    padding: 1px 2px;
}
.arge-node-bar {
    width: 78%; height: 5px; background: rgba(0,0,0,0.7);
    border-radius: 3px; overflow: hidden; margin-bottom: 3px;
    position: relative; z-index: 2;
    border: 1px solid rgba(0,0,0,0.5);          /* ikon üzerinde bar görünür kalsın */
}
.arge-node-fill { height: 100%; background: linear-gradient(90deg, #00c8ff, #7fffd0); }
.arge-node.maxed .arge-node-fill { background: linear-gradient(90deg, #ffd700, #ffb000); }
.arge-node-lvl {
    font-family: var(--font-mono); font-size: 10px; color: #d8e0ec;
    position: relative; z-index: 2;
    background: rgba(0,0,0,0.55);                /* ufak okuma şeridi */
    padding: 1px 5px;
    border-radius: 3px;
    text-shadow: 0 0 2px rgba(0,0,0,0.95);
}
.arge-node.maxed .arge-node-lvl { color: var(--gold); }
/* + butonu da en üstte olsun (tıklanabilir kalsın) */
.arge-node-up { position: relative; z-index: 3; }
/* Tıkla-yükselt: yükseltilebilir node imleci pointer + yeşil ipucu glow */
.arge-node.clickable { cursor: pointer; }
.arge-node.clickable::after {
    content: ''; position: absolute; inset: -1.5px; border-radius: 8px;
    border: 1.5px solid rgba(0,255,130,0.0); transition: border-color 0.15s; pointer-events: none;
}
.arge-node.clickable:hover::after { border-color: rgba(0,255,130,0.7); }
.arge-node.clickable:active { transform: scale(0.95); }

/* Footer */
.arge-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; background: linear-gradient(0deg, rgba(10,25,60,0.95), rgba(5,12,35,0.9));
    border-top: 1px solid rgba(0,120,200,0.4); flex-shrink: 0;
}
.arge-footer-stats { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.arge-footer-stats .hl { color: #7ee8fa; font-weight: bold; }
.arge-reset-btn {
    padding: 8px 16px; background: linear-gradient(135deg, #5a1020, #3a0a16);
    border: 1px solid rgba(255,80,100,0.4); border-radius: 6px;
    color: #ff8597; font-family: var(--font-hud); font-size: 10px;
    letter-spacing: 1px; cursor: pointer; transition: all 0.18s;
}
.arge-reset-btn:hover { box-shadow: 0 0 12px rgba(255,80,100,0.3); }

/* Tooltip (hover bilgi penceresi) */
.arge-tooltip {
    position: absolute; z-index: 50; width: 230px;
    background: rgba(4,12,30,0.98); border: 1px solid rgba(0,160,255,0.5);
    border-radius: 8px; padding: 10px 12px; pointer-events: none;
    box-shadow: 0 6px 24px rgba(0,0,0,0.6); font-size: 11px;
}
.arge-tt-head {
    font-family: var(--font-hud); font-size: 13px; letter-spacing: 1px;
    margin-bottom: 2px; padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.arge-tt-head.defensive { color: #5ab4ff; }
.arge-tt-head.utility   { color: #c48bff; }
.arge-tt-head.offensive { color: #ff6b6b; }
.arge-tt-branch { font-size: 10px; color: var(--text-muted); margin-bottom: 6px; }
.arge-tt-desc { color: var(--text-secondary); line-height: 1.4; margin-bottom: 6px; }
.arge-tt-eff { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; color: #cfe8ff; }
.arge-tt-eff b { color: #7ee8fa; }
.arge-tt-req { color: #ff9aa6; margin-bottom: 6px; line-height: 1.4; }
.arge-tt-cost {
    border-top: 1px solid rgba(255,255,255,0.08); padding-top: 6px;
    font-size: 10px; color: var(--text-muted);
}
.arge-tt-cost-row { display: flex; justify-content: space-between; padding: 1px 0; }
.arge-tt-cost-row b { color: #ffd98a; }

/* Özel onay kutusu (native confirm yerine) */
.arge-confirm-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,4,12,0.72); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    animation: argeFadeIn 0.15s ease;
}
@keyframes argeFadeIn { from { opacity: 0; } to { opacity: 1; } }
.arge-confirm-box {
    width: 360px; max-width: 90vw;
    background: linear-gradient(180deg, rgba(10,22,48,0.98), rgba(5,12,30,0.98));
    border: 1px solid rgba(0,160,255,0.45); border-radius: 12px;
    padding: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.7);
    animation: argePop 0.18s cubic-bezier(0.2,0.9,0.3,1.2);
}
@keyframes argePop { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.arge-confirm-title {
    font-family: var(--font-hud); font-size: 15px; letter-spacing: 1px;
    color: var(--gold); margin-bottom: 12px; text-align: center;
}
.arge-confirm-msg {
    font-size: 12.5px; color: var(--text-secondary); line-height: 1.6;
    margin-bottom: 18px; text-align: center;
}
.arge-confirm-msg b { color: #ffd98a; }
.arge-confirm-actions { display: flex; gap: 10px; justify-content: center; }
.arge-confirm-actions button {
    padding: 9px 22px; border-radius: 6px; font-family: var(--font-hud);
    font-size: 11px; letter-spacing: 1px; cursor: pointer; transition: all 0.16s;
}
.arge-confirm-no {
    background: rgba(40,50,70,0.8); border: 1px solid rgba(150,160,180,0.3); color: var(--text-secondary);
}
.arge-confirm-no:hover { background: rgba(60,72,95,0.9); }
.arge-confirm-yes {
    background: linear-gradient(135deg, #b3001b, #7a0012);
    border: 1px solid rgba(255,80,100,0.5); color: #fff;
}
.arge-confirm-yes:hover { box-shadow: 0 0 14px rgba(255,60,90,0.5); }

/* Satın alma dialogu */
.arge-buy-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.arge-buy-tab {
    flex: 1; padding: 8px; border-radius: 6px; cursor: pointer;
    background: rgba(0,20,50,0.6); border: 1px solid rgba(0,80,160,0.3);
    color: var(--text-muted); font-family: var(--font-hud); font-size: 11px; transition: all 0.15s;
}
.arge-buy-tab.active { background: rgba(0,60,140,0.5); border-color: var(--primary); color: #cfe8ff; }
.arge-buy-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 10px; }
.arge-buy-row span { color: var(--text-secondary); font-size: 13px; }
.arge-buy-input {
    width: 120px; padding: 7px 10px; border-radius: 6px;
    background: rgba(0,12,30,0.9); border: 1px solid rgba(0,140,220,0.4);
    color: #cfe8ff; font-family: var(--font-mono); font-size: 14px; text-align: center;
}
.arge-buy-info { text-align: center; font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
.arge-buy-info b { color: #ffd98a; }

/* ══════════════════════════════════════════════════════════════
   GALAXY GATES
   ══════════════════════════════════════════════════════════════ */
.gg-wrapper { min-height: 540px; }
.gg-loading { padding: 60px 20px; text-align: center; color: var(--text-muted); font-family: var(--font-hud); letter-spacing: 1px; }
.gg-panel {
    background: rgba(2,8,20,0.95); border: 1px solid rgba(0,150,220,0.4);
    border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; min-height: 520px;
}
.gg-titlebar {
    padding: 12px 18px; font-family: var(--font-hud); font-size: 14px; letter-spacing: 2px;
    color: #cfe0ff; background: linear-gradient(180deg, rgba(10,25,60,0.95), rgba(5,12,35,0.95));
    border-bottom: 1px solid rgba(0,120,200,0.4);
}
.gg-body { display: flex; flex: 1; min-height: 0; }

/* SOL: kapı listesi */
.gg-gates {
    width: 190px; flex-shrink: 0; padding: 14px 10px; display: flex; flex-direction: column; gap: 8px;
    background: rgba(0,10,28,0.6); border-right: 1px solid rgba(0,80,160,0.3);
}
.gg-gate-btn {
    position: relative; text-align: left; padding: 12px 14px; border-radius: 6px; cursor: pointer;
    background: linear-gradient(180deg, rgba(20,35,65,0.7), rgba(10,20,45,0.7));
    border: 1px solid rgba(0,90,170,0.35); color: var(--text-secondary);
    font-family: var(--font-hud); font-size: 12px; letter-spacing: 1px; transition: all 0.15s;
}
.gg-gate-btn:hover { border-color: var(--primary); color: #cfe8ff; }
.gg-gate-btn.active { background: linear-gradient(180deg, rgba(0,70,150,0.6), rgba(0,40,100,0.6)); border-color: var(--primary); color: #fff; box-shadow: inset 3px 0 0 var(--primary); }
.gg-gate-badge {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: #00b050; color: #fff; font-size: 10px; font-weight: bold;
    width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}

/* ORTA: kapı görseli + ilerleme */
.gg-center { flex: 1; display: flex; flex-direction: column; padding: 14px; min-width: 0; }
.gg-center-head {
    text-align: center; font-family: var(--font-hud); font-size: 13px; letter-spacing: 2px;
    color: #cfe0ff; padding: 8px; background: rgba(0,20,50,0.6); border: 1px solid rgba(0,90,170,0.3);
    border-radius: 6px 6px 0 0;
}
.gg-image {
    flex: 1; position: relative; border: 1px solid rgba(0,90,170,0.3); border-top: none;
    background: #000; display: flex; align-items: flex-end; justify-content: center;
    min-height: 260px; overflow: hidden;
}
/* Canlı parallax starfield (dashboard-starfield.js) — en altta arka plan katmanı */
.gg-starfield {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block; pointer-events: none;
    z-index: 0;
}
.gg-image-img {
    position: absolute; inset: 0; margin: auto;
    max-width: 90%; max-height: 90%; object-fit: contain; opacity: 0.9;
    z-index: 1;                               /* starfield üstünde */
}
/* Kapı HAZIR (prepared) → sadece görsel tam görünür.
   NABIZ (pulse) + PARLAMA (aura) efekti KALDIRILDI — kullanıcı isteği. */
.gg-image.gg-ready .gg-image-img {
    opacity: 1;
}
/* ── Kapı mozaiği: toplanan her parça bir hücreyi açar ──────────────────────
   Kutu KARE tutulur (aspect-ratio) çünkü kapı görselleri 512×512; kare olmazsa
   hücrelerin birleşimi görseli gerer. Yükseklik sürücü, dar panelde max-width
   devreye girip kareliği korur. */
.gg-mosaic {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    height: 90%; max-width: 90%; aspect-ratio: 1 / 1;
    z-index: 1;                               /* starfield üstü, sayaç altı */
    pointer-events: none;
}
/* Boş yuva TAMAMEN görünmez (kullanıcı isteği): ızgara çizgisi yok, parça
   kenarında koyu ayraç yok — kapı boşluktan maddeleşiyormuş gibi dursun. */
.gg-mos-cell {
    position: absolute; display: block;
}
.gg-mos-cell.on {
    background-repeat: no-repeat;
}
/* YALNIZ yeni bulunan parça animasyonlanır — her panel yenilemesinde hepsi
   birden oynasaydı basış sonrası ekran çok gürültülü olurdu. */
.gg-mos-cell.fresh {
    animation: ggMosIn .5s cubic-bezier(.2,.9,.3,1.4) both;
}
@keyframes ggMosIn {
    from { opacity: 0; transform: scale(1.7); filter: brightness(2.4); }
    to   { opacity: 1; transform: none;       filter: none; }
}
@media (prefers-reduced-motion: reduce) {
    .gg-mos-cell.fresh { animation: none; }
}
.gg-progress-text {
    position: absolute; right: 14px; bottom: 12px; font-family: var(--font-mono); font-size: 22px;
    color: #fff; text-shadow: 0 0 8px rgba(0,0,0,0.9); font-weight: bold;
    z-index: 2;                               /* gate img + starfield üstünde */
}
.gg-active-info {
    position: absolute; left: 14px; bottom: 12px; font-family: var(--font-mono); font-size: 13px;
    color: #cfe8ff; text-shadow: 0 0 6px rgba(0,0,0,0.9);
    z-index: 2;
}
.gg-active-row b { color: #7fffa0; }
.gg-center-actions { display: flex; gap: 10px; margin-top: 10px; }
.gg-buy-life, .gg-prepare {
    flex: 1; padding: 10px; border-radius: 6px; cursor: pointer; font-family: var(--font-hud);
    font-size: 11px; letter-spacing: 1px; border: 1px solid rgba(0,90,170,0.4);
    background: linear-gradient(135deg, rgba(20,40,75,0.8), rgba(10,22,48,0.8)); color: var(--text-secondary); transition: all 0.15s;
}
.gg-buy-life:hover:not(:disabled), .gg-prepare:hover:not(:disabled) { border-color: var(--primary); color: #cfe8ff; }
.gg-buy-life:disabled, .gg-prepare:disabled { opacity: 0.4; cursor: not-allowed; }
.gg-prepare.ready { background: linear-gradient(135deg, #0a6b3a, #064d29); border-color: rgba(80,255,160,0.4); color: #aaffcc; }

/* SAĞ: enerji + çarpan + log */
.gg-right {
    width: 250px; flex-shrink: 0; padding: 14px; display: flex; flex-direction: column; gap: 12px;
    background: rgba(0,10,28,0.6); border-left: 1px solid rgba(0,80,160,0.3);
}
.gg-res { background: rgba(0,20,50,0.6); border: 1px solid rgba(0,90,170,0.3); border-radius: 6px; padding: 8px 12px; }
.gg-res-row { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 12px; padding: 3px 0; color: var(--text-muted); }
.gg-res-row b { color: #ffd98a; }

.gg-mult-panel { background: rgba(0,20,50,0.5); border: 1px solid rgba(0,90,170,0.3); border-radius: 6px; padding: 10px; }
.gg-mult-title { text-align: center; font-family: var(--font-hud); font-size: 11px; letter-spacing: 2px; color: #8fd0ff; margin-bottom: 8px; }
.gg-mult-toggle { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text-secondary); cursor: pointer; margin-bottom: 8px; justify-content: center; }
.gg-mult-toggle.auto { color: #7fffa0; }
.gg-mult-toggle input { width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; }
.gg-mult-row { display: flex; gap: 5px; justify-content: center; }
.gg-mult-x {
    flex: 1; text-align: center; padding: 5px 0; border-radius: 4px; font-family: var(--font-mono); font-size: 11px;
    background: rgba(0,12,30,0.7); border: 1px solid rgba(80,90,110,0.3); color: var(--text-muted);
}
.gg-mult-x.on { background: rgba(0,70,150,0.6); border-color: var(--primary); color: #fff; font-weight: bold; box-shadow: 0 0 8px rgba(0,160,255,0.3); }

.gg-energy-wrap { display: flex; flex-direction: column; gap: 8px; }
.gg-energy-btn {
    padding: 14px; border-radius: 6px; cursor: pointer; font-family: var(--font-hud); font-size: 14px; letter-spacing: 1px;
    background: linear-gradient(135deg, #0d7a44, #075230); border: 1px solid rgba(80,255,160,0.45); color: #d6ffe8;
    transition: all 0.15s;
}
.gg-energy-btn:hover:not(:disabled) { background: linear-gradient(135deg, #109a56, #0d7a44); box-shadow: 0 0 16px rgba(80,255,160,0.3); }
.gg-energy-btn:disabled { opacity: 0.5; cursor: wait; }
.gg-count-row { display: flex; gap: 5px; }
.gg-count-btn {
    flex: 1; padding: 7px 0; border-radius: 4px; cursor: pointer; font-family: var(--font-mono); font-size: 12px;
    background: rgba(0,12,30,0.7); border: 1px solid rgba(0,90,170,0.3); color: var(--text-muted); transition: all 0.15s;
}
.gg-count-btn:hover { color: #cfe8ff; }
.gg-count-btn.active { background: rgba(0,70,150,0.6); border-color: var(--primary); color: #fff; font-weight: bold; }

.gg-log-title { text-align: center; font-family: var(--font-hud); font-size: 11px; letter-spacing: 2px; color: var(--text-muted); margin-top: 4px; }
.gg-log { flex: 1; min-height: 80px; max-height: 200px; overflow-y: auto; background: rgba(0,8,22,0.7); border: 1px solid rgba(0,80,160,0.25); border-radius: 6px; padding: 6px 8px; }
.gg-log-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--font-mono); font-size: 11px; padding: 3px 2px; color: var(--text-secondary); }
.gg-log-line b { color: #7ee8fa; flex-shrink: 0; }
.gg-log-left { display: flex; align-items: center; gap: 6px; min-width: 0; }
.gg-log-ic { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.gg-log-ph {
    width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 9px; background: rgba(0,60,120,0.6); color: #9fd6ff;
}
.gg-log-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Çarpan rozeti — ödül satırının BAŞINDA, "x4" gibi. Çarpanlı satır gözle
   ayrılsın diye altın/amber: paneldeki diğer her şey mavi tonda, bu tek
   sıcak renk. Sağdaki adet mavi kalır → "kaç katı" ile "kaç tane" karışmaz. */
.gg-log-mult {
    flex-shrink: 0; font-weight: 700; font-size: 10px; letter-spacing: .5px;
    padding: 1px 5px; border-radius: 4px;
    color: #ffcf4d; background: rgba(255,180,40,0.14);
    border: 1px solid rgba(255,180,40,0.45);
}
.gg-log-hr { border: none; border-top: 1px dashed rgba(0,120,200,0.35); margin: 6px 0; }


/* ============================================================
   CUSTOM LAYOUT (added): topbar 3-zone + ship inside PLAY btn.
   Lang left | ID/Sv  ...  LOGO center  ...  credits/orbidium + buttons right.
   Signal bars removed from HTML. Layout only; theme/colors unchanged.
   ============================================================ */
.dash-topbar { gap: 12px; overflow: visible; }
.topbar-left  { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 14px; justify-content: flex-start; }
.topbar-right { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px;  justify-content: flex-end; }
.topbar-right .topbar-currency { margin-left: 0; }
.topbar-logo { flex: 0 0 auto; align-self: center; position: relative; display: flex; align-items: center; justify-content: center; overflow: visible; margin: 0; padding: 0; gap: 0; }
/* logo CENTER + big, overflows the 56px bar (bar has fixed height so it will not grow) */
.topbar-logo img { height: 140px; width: auto; max-width: none; transform: translateY(12px); filter: drop-shadow(0 4px 10px rgba(0,0,0,0.65)); }

/* ship inside PLAY button: left, big, spills out (override the button overflow:hidden) */
.btn-play { overflow: visible; justify-content: center; }
.btn-play::before { display: none; }
.btn-play .play-ship { position: absolute; left: -70px; top: 50%; transform: translateY(-50%); z-index: 2; pointer-events: none; margin: 0; padding: 0; min-width: 0; }
.btn-play .play-ship img { height: 140px; max-height: 140px; max-width: none; width: auto; }

/* logo/ID-Sv sagindaki dikey ayrac cizgisini kaldir */
.topbar-player-id { border-right: none; padding-right: 0; }
/* OYNA panelini kisalt (220 -> 150) */
.play-cta { min-height: 150px; padding: 16px 24px; }
/* ══════════════════════════════════════════════════════════════
   SÜRELİ MAĞAZA PAKETİ ROZETLERİ (İndirim %  ·  Kutu Katlayıcı ×2)
   Pilot lisansında ad satırının EN SAĞINDA, altın. Sahip değilse hiç render
   edilmez (JS boş bırakır). Bitiş tarihi imlecin ALTINDA açılan kutuda.
   ══════════════════════════════════════════════════════════════ */
.pilot-name-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.pilot-name-row .pilot-name { margin-bottom: 0; }
.pkg-badges { margin-left: auto; display: flex; align-items: center; gap: 6px; }

.pkg-badge {
    font-family: var(--font-hud);
    font-weight: 800;
    font-size: 13px;
    line-height: 1;
    padding: 4px 9px;
    border-radius: 6px;
    color: #1a1206;
    background: linear-gradient(180deg, #ffdf7a, #e0a920);
    border: 1px solid #b8860b;
    box-shadow: 0 2px 8px rgba(224, 169, 32, .35);
    cursor: default;
    user-select: none;
    white-space: nowrap;
}

/* İmlecin ALTINDA açılan bitiş-tarihi kutusu (JS konumlandırır) */
.pkg-tip {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    background: rgba(8, 20, 38, .97);
    border: 1px solid #b8860b;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.5;
    color: #e8f0f8;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
    white-space: nowrap;
    opacity: 0;
    transition: opacity .12s;
}
.pkg-tip.on { opacity: 1; }
.pkg-tip b { color: #ffd76a; font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════
   KLAN DETAY PANELİ (22 Ağu 2026) — listede ada/Başvur'a tıklayınca.
   Oyuncu önce klanı görsün, başvuru yazısını yazsın, öyle başvursun.
   ══════════════════════════════════════════════════════════════════ */
.cd-head { display:flex; gap:14px; align-items:flex-start; margin-bottom:16px; padding-right:26px; }
.cd-logo {
    width:64px; height:64px; flex:0 0 64px; border-radius:10px; object-fit:cover;
    background:rgba(0,20,50,0.7); border:1px solid var(--border-glow);
    display:flex; align-items:center; justify-content:center;
    color:var(--primary); font-size:26px;
}
.cd-htext { min-width:0; flex:1; }
.cd-name {
    font-size:17px; font-weight:700; color:#e9f3ff; line-height:1.25;
    word-break:break-word; margin-bottom:3px;
}
.cd-tag { font-family:var(--font-mono); color:var(--primary); font-size:13px; }
.cd-sub { font-size:11.5px; color:var(--text-muted); margin-top:4px; display:flex; gap:10px; flex-wrap:wrap; }
.cd-sub b { color:#cfe3f7; font-weight:600; }

/* Durum rozeti */
.cd-badge {
    display:inline-block; font-family:var(--font-hud); font-size:9px; letter-spacing:1.5px;
    padding:3px 8px; border-radius:4px; border:1px solid;
}
.cd-badge.ok    { color:#44ff88; border-color:rgba(68,255,136,0.4); background:rgba(20,80,40,0.35); }
.cd-badge.lvl   { color:#ffb347; border-color:rgba(255,179,71,0.4);  background:rgba(90,60,10,0.35); }
.cd-badge.no    { color:#ff6666; border-color:rgba(255,100,100,0.4); background:rgba(80,20,20,0.35); }

/* İstatistik kutucukları */
.cd-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:8px; margin-bottom:14px; }
.cd-stat {
    background:rgba(0,18,45,0.62); border:1px solid var(--border-dim);
    border-radius:7px; padding:9px 10px; min-width:0;
}
.cd-stat .k {
    font-family:var(--font-hud); font-size:8.5px; letter-spacing:1.6px;
    color:var(--text-muted); display:block; margin-bottom:4px;
}
.cd-stat .v {
    font-family:var(--font-mono); font-size:13px; color:#e9f3ff; font-weight:600;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cd-stat .v.hi { color:var(--primary); }

/* Bölüm başlığı */
.cd-sect {
    font-family:var(--font-hud); font-size:9.5px; letter-spacing:2px; color:var(--primary);
    margin:14px 0 7px; padding-bottom:5px; border-bottom:1px solid var(--border-dim);
}
.cd-desc {
    background:rgba(0,14,36,0.55); border:1px solid var(--border-dim); border-radius:7px;
    padding:10px 12px; font-size:12px; line-height:1.6; color:#cfe0f2;
    white-space:pre-wrap; word-break:break-word; max-height:132px; overflow-y:auto;
}
.cd-desc.empty { color:var(--text-muted); font-style:italic; }

/* Üye listesi */
.cd-members { max-height:168px; overflow-y:auto; border:1px solid var(--border-dim); border-radius:7px; }
.cd-mrow {
    display:flex; align-items:center; gap:8px; padding:6px 10px; font-size:11.5px;
    border-bottom:1px solid rgba(255,255,255,0.045);
}
.cd-mrow:last-child { border-bottom:none; }
.cd-dot { width:7px; height:7px; border-radius:50%; flex:0 0 7px; background:#44506a; }
.cd-dot.on { background:#44ff88; box-shadow:0 0 6px rgba(68,255,136,0.75); }
.cd-mname { flex:1; min-width:0; color:#dce9f8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cd-mrole { font-family:var(--font-mono); font-size:10px; color:var(--text-muted); }

/* Başvuru bölümü */
.cd-apply { margin-top:16px; border-top:1px solid var(--border-dim); padding-top:14px; }
.cd-fee {
    background:rgba(255,200,0,0.08); border:1px solid rgba(255,200,0,0.25);
    border-radius:6px; padding:8px 11px; font-size:11.5px; color:#ffd76a;
    line-height:1.5; margin-bottom:10px;
}
.cd-msg {
    width:100%; min-height:78px; max-height:190px; resize:vertical;
    background:rgba(0,15,40,0.8); border:1px solid var(--border-dim); border-radius:6px;
    padding:9px 11px; color:#e6eefb; font-family:inherit; font-size:12px; line-height:1.55;
}
.cd-msg:focus { outline:none; border-color:var(--primary); }
.cd-msgfoot { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:6px; }
.cd-count { font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted); }
.cd-count.warn { color:#ff8866; }
.cd-go {
    background:linear-gradient(135deg,var(--primary),#36c8ff); color:#04111f;
    border:none; border-radius:6px; padding:9px 20px; font-weight:700; font-size:12px;
    cursor:pointer; transition:.15s; font-family:var(--font-hud); letter-spacing:1px;
}
.cd-go:hover  { filter:brightness(1.12); }
.cd-go:disabled { opacity:.45; cursor:not-allowed; filter:none; }
.cd-block {
    background:rgba(120,30,30,0.22); border:1px solid rgba(220,80,80,0.35);
    border-radius:6px; padding:10px 12px; font-size:12px; color:#ffb3b3; line-height:1.5;
}
.cd-pending {
    background:rgba(20,70,120,0.28); border:1px solid rgba(80,180,255,0.35);
    border-radius:6px; padding:10px 12px; font-size:12px; color:#a8d8ff; line-height:1.55;
}
.cd-pending .q {
    display:block; margin-top:6px; padding-left:9px; border-left:2px solid rgba(80,180,255,0.45);
    color:#d6ecff; white-space:pre-wrap; word-break:break-word; font-style:italic;
}

/* Başvuru yazısı — yetkilinin gördüğü satır (bekleyen başvurular tablosu) */
.cd-appmsg {
    display:block; margin-top:4px; padding:6px 9px; font-size:11px; line-height:1.5;
    background:rgba(0,18,45,0.55); border-left:2px solid var(--primary); border-radius:0 5px 5px 0;
    color:#cfe0f2; white-space:pre-wrap; word-break:break-word; max-width:560px;
}
.cd-appmsg.empty { color:var(--text-muted); font-style:italic; border-left-color:#44506a; }

/* Listede klan adı artık tıklanabilir */
.clan-name-link {
    color:#e9f3ff; font-weight:600; cursor:pointer; text-decoration:none;
    border-bottom:1px dashed rgba(120,200,255,0.45); transition:.15s;
}
.clan-name-link:hover { color:var(--primary); border-bottom-color:var(--primary); }

@media (max-width: 520px) {
    .cd-head { gap:10px; }
    .cd-logo { width:52px; height:52px; flex-basis:52px; font-size:21px; }
    .cd-stats { grid-template-columns:repeat(2,1fr); }
}

/* ══════════════════════════════════════════════════════════════════════════
   ŞİRKET DEĞİŞTİRME (22 Ağu 2026) — profil > "Şirket Değiştir".
   3 adım: şartlar+bedel onayı → şirket seçimi (kendi şirketi HARİÇ) → karşılama.
   Kart görselleri kayıt ekranıyla (index.html .cc-portrait) aynı varlıkları kullanır.
   ══════════════════════════════════════════════════════════════════════════ */
.fc-cur {
    display:flex; align-items:center; gap:8px; font-size:13px;
    color:var(--text-secondary); margin:2px 0 16px; padding-right:26px;
}
.fc-dot { width:10px; height:10px; border-radius:50%; flex:0 0 10px; box-shadow:0 0 8px currentColor; }
.fc-sec-t {
    font-family:var(--font-hud); font-size:9px; letter-spacing:2px;
    color:var(--text-muted); margin:16px 0 8px;
}
.fc-sub { font-size:13px; color:var(--text-secondary); margin:2px 0 14px; padding-right:26px; }

/* ── şart listesi ── */
.fc-checks { display:flex; flex-direction:column; gap:6px; }
.fc-check {
    display:flex; align-items:center; gap:9px; font-size:13px;
    background:rgba(0,15,40,0.55); border:1px solid var(--border-dim);
    border-radius:6px; padding:9px 11px;
}
.fc-check i { font-size:14px; flex:0 0 auto; }
.fc-check.ok  { color:var(--text-secondary); }
.fc-check.ok  i { color:#22c55e; }
.fc-check.no  { color:#ffd7d7; border-color:rgba(255,80,80,0.35); background:rgba(60,0,0,0.25); }
.fc-check.no  i { color:#ff5555; }
.fc-check b { color:var(--text-primary,#fff); font-family:var(--font-mono); }

/* ── bedel ── */
.fc-cost { display:flex; flex-direction:column; gap:6px; }
.fc-cost-row {
    display:flex; align-items:center; gap:9px; font-size:13px;
    background:rgba(0,15,40,0.55); border:1px solid var(--border-dim);
    border-radius:6px; padding:9px 11px; color:var(--text-secondary);
}
.fc-cost-row i { color:var(--gold); width:15px; text-align:center; flex:0 0 15px; }
/* Bedel ikonları: oyunun KENDİ görselleri (fa-gem/fa-star yerine) —
   Orbidium üst bardaki ile, Şeref oyun-içi HUD'daki ile AYNI simge. */
.fc-cost-row img.fc-ico {
    width:17px; height:17px; flex:0 0 17px; object-fit:contain;
    image-rendering:auto; display:block;
}
.fc-cost-row span { flex:1 1 auto; }
.fc-cost-row b { font-family:var(--font-mono); color:var(--gold); white-space:nowrap; }

.fc-q {
    margin-top:18px; padding:12px 14px; border-radius:8px; text-align:center;
    font-size:14px; font-weight:600; color:#fff;
    background:rgba(0,30,70,0.6); border:1px solid var(--border-glow);
}
.fc-warn {
    margin-top:16px; padding:11px 13px; border-radius:8px; font-size:13px;
    color:#ffd7d7; background:rgba(60,0,0,0.3); border:1px solid rgba(255,80,80,0.4);
}
.fc-warn i { margin-right:6px; }
/* Bekleyen klan başvurusu uyarısı — engel DEĞİL, sonuç bildirimi → amber. */
.fc-warn-soft {
    color:#ffcf88; background:rgba(60,40,0,0.32); border-color:rgba(255,190,90,0.38);
}

.fc-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:18px; flex-wrap:wrap; }
.fc-actions .btn-sm { min-width:120px; justify-content:center; }
.fc-go[disabled] { opacity:.45; cursor:not-allowed; filter:grayscale(.6); }

/* ── şirket kartları ── */
.fc-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.fc-card {
    position:relative; cursor:pointer; border-radius:10px; overflow:hidden;
    border:1px solid var(--border-dim); background:rgba(0,10,30,0.6);
    transition:border-color .18s, transform .18s, box-shadow .18s;
}
.fc-card img { width:100%; height:190px; object-fit:cover; display:block; filter:grayscale(.55) brightness(.72); transition:filter .18s; }
.fc-card:hover { transform:translateY(-2px); border-color:var(--c-color); }
.fc-card:hover img { filter:grayscale(.15) brightness(.9); }
.fc-card.sel { border-color:var(--c-color); box-shadow:0 0 0 1px var(--c-color), 0 0 22px -6px var(--c-color); }
.fc-card.sel img { filter:none; }
.fc-card-mark {
    position:absolute; inset:0; pointer-events:none; opacity:0;
    background:linear-gradient(to top, color-mix(in srgb, var(--c-color) 55%, transparent), transparent 55%);
    transition:opacity .18s;
}
.fc-card.sel .fc-card-mark { opacity:1; }
.fc-card-lbl {
    position:absolute; left:0; right:0; bottom:0; padding:10px 12px;
    display:flex; flex-direction:column; gap:1px;
    background:linear-gradient(to top, rgba(0,0,0,.85), transparent);
}
.fc-card-ab   { font-family:var(--font-hud); font-size:15px; letter-spacing:2px; color:#fff; }
.fc-card-full { font-size:10.5px; color:rgba(255,255,255,.72); }

/* ── lore ── */
.fc-lore:empty { display:none; }
.fc-lore {
    margin-top:14px; padding:12px 14px; border-radius:8px;
    background:rgba(0,15,40,0.55); border:1px solid var(--border-dim);
}
.fc-lore-t { font-family:var(--font-hud); font-size:12px; letter-spacing:1.6px; margin-bottom:6px; }
.fc-lore-m { font-size:11.5px; color:var(--text-muted); margin-bottom:6px; }
.fc-lore-m b { color:var(--text-secondary); margin-right:4px; }
.fc-lore-s { font-size:12.5px; line-height:1.55; color:var(--text-secondary); }
.fc-lore-x { margin-top:8px; font-size:12px; color:var(--gold); }
.fc-lore-x i { margin-right:5px; }

/* ── karşılama ── */
.fc-welcome { text-align:center; padding:4px 4px 8px; }
.fc-w-img {
    width:100%; max-width:420px; margin:0 auto 16px; border-radius:12px; overflow:hidden;
    border:1px solid var(--c-color); box-shadow:0 0 34px -10px var(--c-color);
}
.fc-w-img img { width:100%; height:200px; object-fit:cover; display:block; }
.fc-w-hi {
    font-family:var(--font-hud); font-size:10px; letter-spacing:5px;
    color:var(--text-muted); margin-bottom:5px;
}
.fc-w-co { font-family:var(--font-hud); font-size:20px; letter-spacing:2px; color:var(--c-color); margin-bottom:10px; }
.fc-w-msg { font-size:13.5px; line-height:1.6; color:var(--text-secondary); max-width:460px; margin:0 auto 16px; }
.fc-w-meta { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:14px; }
.fc-w-meta > div {
    background:rgba(0,15,40,0.6); border:1px solid var(--border-dim); border-radius:8px;
    padding:9px 14px; display:flex; flex-direction:column; gap:3px; min-width:112px;
}
.fc-w-meta span { font-family:var(--font-hud); font-size:8.5px; letter-spacing:1.4px; color:var(--text-muted); }
.fc-w-meta b { font-family:var(--font-mono); font-size:13px; color:#fff; }
.fc-w-note { font-size:12px; color:var(--text-muted); margin-bottom:16px; }

@media (max-width:560px) {
    .fc-cards { grid-template-columns:1fr; }
    .fc-card img { height:150px; }
    .fc-w-img img { height:150px; }
    .fc-actions .btn-sm { flex:1 1 100%; }
}
/* ── Klan Kasası revize (23 Ağu) — özet kutuları + scroll kapları ── */
.kasa-stat { background: rgba(0,60,120,0.18); border: 1px solid rgba(0,150,220,0.25);
             border-radius: 6px; padding: 8px 14px; min-width: 120px; }
.kasa-stat-l { font-size: 9px; letter-spacing: 1px; color: var(--text-muted); text-transform: uppercase; }
.kasa-stat-v { font-size: 13px; font-family: var(--font-mono); color: #dff0ff; margin-top: 3px; }
.kasa-scroll { border: 1px solid rgba(0,150,220,0.12); border-radius: 4px; }
.kasa-scroll::-webkit-scrollbar { width: 6px; }
.kasa-scroll::-webkit-scrollbar-thumb { background: rgba(0,150,220,0.35); border-radius: 3px; }
.kasa-scroll thead th { position: sticky; top: 0; background: rgba(2,10,28,0.97); z-index: 1; }

/* ═══════════════════════════════════════════════════════════════════
   ÇOK-GEMİ HANGARI — GEMİ SEÇİM EKRANI          (1 Eyl 2026)
   Kullanıcı: "hangara basınca önce gemi ekranı açılacak … sol tarafta
   tüm gemiler, sağ tarafta tıkladığı geminin özellikleri."
   ⚠ YENİ GÖRÜNÜM İCAT EDİLMEDİ: renkler/font/kenarlık hangarın kendi
     dilinden (--primary #00c8ff, --gold, --font-hud, rgba(0,120,200,*)).
     Sahip-değil görünümü AR-GE'nin kilitli düğüm desenini izler
     (.arge-node.locked → grayscale + opacity).
   ═══════════════════════════════════════════════════════════════════ */
.hng-select { display: flex; flex: 1; min-height: 0; overflow: hidden; }

/* ── SOL: gemi + tasarım ızgarası ───────────────────────────────── */
.hng-sel-left {
    flex: 1; min-width: 0;
    padding: 14px;
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(4,12,28,.6), rgba(2,8,20,.85));
}
.hng-sel-head {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-hud); font-size: 11px; letter-spacing: 2.5px;
    color: #7aafff; text-transform: uppercase; margin: 2px 0 10px;
}
.hng-sel-head::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, rgba(0,150,220,.45), transparent);
}
.hng-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
    gap: 10px;
}
/* Kart — arka plan: /img/hangar/card-bg.webp (çelik panel dokusu) */
.hng-card {
    position: relative;
    border: 1px solid rgba(0,120,200,.45);
    border-radius: 4px;
    background: rgba(6,16,34,.9) url('/img/hangar/card-bg.webp') center/cover no-repeat;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .18s, box-shadow .18s, transform .18s;
}
.hng-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.hng-card.selected {
    border-color: var(--gold, #ffd700);
    box-shadow: 0 0 0 1px rgba(255,215,0,.35), 0 0 16px rgba(255,215,0,.22);
}
.hng-card-name {
    font-family: var(--font-hud); font-size: 10.5px; letter-spacing: 1.2px;
    text-transform: uppercase; text-align: center;
    padding: 5px 4px 4px; color: #cfe6ff;
    background: linear-gradient(180deg, rgba(3,10,24,.92), rgba(3,10,24,.55));
    border-bottom: 1px solid rgba(0,120,200,.25);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hng-card.selected .hng-card-name { color: var(--gold, #ffd700); }
.hng-card-img {
    display: block; width: 100%; height: 86px;
    object-fit: contain; padding: 5px 6px 2px;
    /* ⭐ Dükkân render'ları yatay ve ayrıntılı — 74px'te küçük kalıyordu.
       86px + dar iç boşluk, kart yüksekliğini fazla büyütmeden gemiyi okutur. */
}
.hng-card-foot { height: 18px; display: flex; align-items: center; justify-content: center; }
.hng-card-own  { color: var(--primary); font-size: 12px; line-height: 1; }
/* ⭐ AKTİF gemi rozeti — kullanıcı: "kullandığı gemi en başta duracak" */
.hng-card-star {
    position: absolute; top: 3px; right: 4px;
    color: var(--gold, #ffd700); font-size: 11px; line-height: 1;
    text-shadow: 0 0 6px rgba(255,215,0,.6);
}
/* ⛔ SAHİP DEĞİL — kullanıcı: "gri filigranlı olacak ki oyuncu anlasın" */
.hng-card.locked .hng-card-img { filter: grayscale(1) brightness(.55); opacity: .5; }
.hng-card.locked .hng-card-name { color: #6b7f96; }
.hng-card.locked { border-color: rgba(70,95,125,.4); }
.hng-card.locked::after {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0,0,0,.16) 6px 12px);
    pointer-events: none;
}
.hng-card-lock { color: #6b7f96; font-size: 10px; letter-spacing: .5px; }

/* ── SAĞ: özellik paneli ────────────────────────────────────────── */
/* Arka plan: /img/hangar/feature-bg.webp (sıcak altın hangar koridoru).
   ⚠ Görsel PARLAK ve SICAK; altın sayılar üstünde okunmaz. Bu yüzden
     üstüne KOYU lacivert scrim biniyor — okunabilirlik tasarımdan önce gelir. */
.hng-sel-right {
    width: 300px; flex-shrink: 0;
    display: flex; flex-direction: column;
    border-left: 1px solid rgba(0,120,200,.4);
    /* ⚠ 2 Eyl 2026 (kullanıcı: "arkaplan çok koyu kalmış"): örtü açıldı.
       Eskiden rgba(2,8,20,.93→.97) — hem panel kararıyordu hem de altındaki
       feature-bg görseli neredeyse tamamen örtülüyordu (görsel boşa gidiyordu).
       Renk de saf siyaha yakından lacivere çekildi (HUD paletiyle uyumlu).
       ⚠ Kontrast ÖLÇÜLDÜ: etiket #9fb6cc bu zeminde 8,0:1 · değer altını 11,9:1
       (WCAG AA eşiği 4.5:1) → daha fazla açmak metni okunmaz yapardı. */
    background:
        linear-gradient(180deg, rgba(12,30,58,.82), rgba(8,20,42,.90)),
        url('/img/hangar/feature-bg.webp') center/cover no-repeat;
}
.hng-sel-right-head {
    font-family: var(--font-hud); font-size: 11.5px; letter-spacing: 2.5px;
    color: var(--primary); text-transform: uppercase;
    padding: 10px 14px; border-bottom: 1px solid rgba(0,120,200,.35);
    background: linear-gradient(180deg, rgba(10,25,60,.85), rgba(5,12,35,.6));
    text-shadow: 0 0 10px rgba(0,200,255,.5);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hng-sel-stats { flex: 1; overflow-y: auto; padding: 8px 14px 12px; }
.hng-stat {
    display: flex; align-items: baseline; gap: 8px;
    padding: 4px 0; border-bottom: 1px dotted rgba(0,120,200,.16);
    font-size: 12px;
}
.hng-stat-k { color: #9fb6cc; flex: 1; min-width: 0; }
.hng-stat-v {
    color: var(--gold, #ffd700); font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.hng-stat-sub { color: #6b7f96; font-size: 11px; padding: 6px 0 2px; line-height: 1.45; }
.hng-sel-actions {
    padding: 10px 14px 12px; border-top: 1px solid rgba(0,120,200,.35);
    display: flex; flex-direction: column; gap: 8px;
    background: linear-gradient(0deg, rgba(3,10,24,.9), transparent);
}
/* ⭐ Kullanıcı: "1. BUTON: ETKİN (buton çerçevesi olmasına gerek yok,
   sadece yazı ve basılamasın)" → çerçevesiz, tıklanamaz metin. */
.hng-act-plain {
    text-align: center; font-family: var(--font-hud);
    font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--gold, #ffd700); text-shadow: 0 0 10px rgba(255,215,0,.35);
    padding: 9px 0; cursor: default; user-select: none;
}
.hng-act-btn {
    display: block; width: 100%; padding: 9px 0;
    font-family: var(--font-hud); font-size: 12.5px; letter-spacing: 2px;
    text-transform: uppercase; border-radius: 4px; cursor: pointer;
    transition: filter .18s, border-color .18s;
}
.hng-act-btn:hover { filter: brightness(1.18); }
.hng-act-btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.hng-act-go {
    background: linear-gradient(180deg, rgba(0,110,70,.9), rgba(0,70,45,.95));
    border: 1px solid rgba(0,220,140,.55); color: #7dffc4;
}
.hng-act-buy {
    background: linear-gradient(180deg, rgba(120,80,0,.9), rgba(80,52,0,.95));
    border: 1px solid rgba(255,190,60,.55); color: #ffd98a;
}
.hng-act-manage {
    background: linear-gradient(180deg, rgba(0,60,140,.85), rgba(0,35,90,.95));
    border: 1px solid rgba(0,150,220,.55); color: #9fd8ff;
}
/* Geri düğmesi — konfig çiplerinin SOLUNDA (kullanıcı isteği) */
.hng-back {
    display: flex; align-items: center; gap: 5px;
    height: 26px; padding: 0 10px;
    background: rgba(0,60,140,.6); border: 1px solid rgba(0,120,200,.5);
    border-radius: 3px; color: #7aafff; cursor: pointer;
    font-family: var(--font-hud); font-size: 11px; letter-spacing: 1.2px;
    transition: border-color .2s, color .2s;
}
.hng-back:hover { border-color: var(--primary); color: var(--primary); }

@media (max-width: 900px) {
    .hng-select { flex-direction: column; }
    .hng-sel-right { width: auto; border-left: 0; border-top: 1px solid rgba(0,120,200,.4); }
}

/* ── AR-GE SIFIRLAMA BİLETLERİ (18 Eyl 2026) ───────────────────────────────
   Kapı bitişinden düşen biletler: Ar-Ge çubuğunda rozet + sıfırlamada seçenek.
   ⚠ `css/` harden'a GİRMEZ (tools/harden.js yalnız HTML + js/ + lang/ yürür)
     → bu dosya dist'ten DEĞİL, KAYNAKTAN scp edilir. */
.arge-bilet-chip.gumus { border-color: rgba(190,200,215,0.45); }
.arge-bilet-chip.gumus b { color: #dfe6ef; }
.arge-bilet-chip.elmas { border-color: rgba(120,230,255,0.55); box-shadow: 0 0 10px -3px rgba(80,220,255,0.55); }
.arge-bilet-chip.elmas b { color: #9beeff; }

/* N-seçenekli kutu — mevcut onay kutusunu genişletir (yes/hayır kutusu bozulmadı) */
.arge-secim-box { width: 420px; }
.arge-secim-liste { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.arge-secim-satir {
    display: flex; flex-direction: column; gap: 3px; text-align: left;
    padding: 11px 14px; border-radius: 8px; cursor: pointer; transition: all 0.16s;
    background: rgba(0,20,48,0.7); border: 1px solid rgba(0,110,190,0.30);
}
.arge-secim-satir:hover { background: rgba(0,34,74,0.9); border-color: rgba(0,170,255,0.55); transform: translateX(2px); }
.arge-secim-ad  { font-family: var(--font-hud); font-size: 12px; letter-spacing: 0.6px; color: #cfe6ff; }
.arge-secim-alt { font-size: 11px; color: var(--text-muted); line-height: 1.45; }
/* Elmas > gümüş > ücretli: değer sırası görsel olarak da okunsun */
.arge-secim-satir.elmas   { border-color: rgba(120,230,255,0.50); background: rgba(0,32,58,0.78); }
.arge-secim-satir.elmas .arge-secim-ad { color: #9beeff; }
.arge-secim-satir.gumus   { border-color: rgba(190,200,215,0.40); }
.arge-secim-satir.gumus .arge-secim-ad { color: #e4ecf5; }
.arge-secim-satir.ucretli { background: rgba(10,14,26,0.7); border-color: rgba(120,130,150,0.28); }
.arge-secim-satir.ucretli .arge-secim-ad { color: #b9c4d4; }
/* 0 iken solık — "böyle bir şey var" bilgisi verir ama dolu rozetle karışmaz */
.arge-bilet-chip.bos { opacity: 0.42; border-color: rgba(120,130,150,0.22); box-shadow: none; }
.arge-bilet-chip.bos b { color: var(--text-muted); }