/* ============================================================
   OG OYUNCU HUD (V4) — menü altı ince altın XP şeridi + panel
   Faruk tercihi: HUD HER İKİ temada da KOYU kalır (light modda da koyu tasarım),
   bu yüzden tema değişkenleri yerine sabit koyu renkler kullanılır (bilinçli istisna).
   Altın vurgu + hareketli shimmer + level atlama parlaması.
   ============================================================ */
.og-hud {
    position: relative;
    margin-top: 4px;
    padding: 12px var(--og-pad-x, 24px) 12px;
    border-top: 1px solid var(--og-hairline, rgba(128, 128, 128, .2)); /* menüden ayıran çizgi */
}

/* Aşağı kaydırınca şerit viewport üstünde sabit kalır (JS og-hud--stuck ekler) */
.og-hud--stuck {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    margin-top: 0;
    border-top: none;
    padding-top: 8px;
    padding-bottom: 8px;
    animation: og-hud-drop .28s ease-out;
}
.og-hud--stuck .og-hud__bar {
    max-width: 1320px;
    margin: 0 auto;
    box-shadow: 0 8px 22px -6px rgba(0, 0, 0, .55);
}
@keyframes og-hud-drop {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

/* --- Tıklanabilir şerit (ince, koyu) --- */
.og-hud__bar {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #1a1e27;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 11px;
    padding: 7px 14px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.og-hud__bar:hover {
    border-color: #F5B838;
    box-shadow: 0 3px 16px -7px rgba(245, 184, 56, .9);
}

.og-hud__lvl {
    display: flex; flex-direction: column; align-items: center;
    min-width: 38px; line-height: 1;
}
.og-hud__lvl-num { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 19px; color: #F5B838; }
.og-hud__lvl-label { font-size: 8px; letter-spacing: 1px; text-transform: uppercase; color: #8a9099; margin-top: 2px; }

/* Oyun-tarzı ince altın XP dolum çubuğu */
.og-hud__track {
    position: relative; flex: 1; height: 7px;
    border-radius: 4px; background: rgba(255, 255, 255, .13);
    overflow: hidden;
}
.og-hud__fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: linear-gradient(90deg, #E3A712, #FFD24A, #F5B838);
    border-radius: 4px;
    transition: width 1s cubic-bezier(.2, .8, .2, 1);
    box-shadow: 0 0 10px -1px rgba(245, 184, 56, .85);
}
.og-hud__fill::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
    animation: og-hud-shimmer 2.2s linear infinite;
}
@keyframes og-hud-shimmer { from { transform: translateX(-100%); } to { transform: translateX(220%); } }

.og-hud__xptext { font-size: 11px; font-weight: 700; white-space: nowrap; color: #cbd0d8; }

.og-hud__cta { display: inline-flex; align-items: center; gap: 6px; color: #F5B838; font-weight: 700; font-size: 12px; white-space: nowrap; }
.og-hud__chev { transition: transform .2s; font-size: 10px; }
.og-hud.is-open .og-hud__chev { transform: rotate(180deg); }

/* Level atlama parlaması (JS is-levelup ekler) */
.og-hud__bar.is-levelup { animation: og-hud-levelup 1.8s ease-out; }
@keyframes og-hud-levelup {
    0%   { box-shadow: 0 0 0 0 rgba(245, 184, 56, 0); border-color: rgba(255, 255, 255, .1); }
    25%  { box-shadow: 0 0 26px 5px rgba(245, 184, 56, .95); border-color: #FFD24A; }
    100% { box-shadow: 0 0 0 0 rgba(245, 184, 56, 0); border-color: rgba(255, 255, 255, .1); }
}

/* --- Açılır panel (koyu) --- */
.og-hud__panel {
    position: absolute; z-index: 60;
    left: 25%; right: 25%; top: calc(100% - 4px);
    background: #1a1e27;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .55);
    padding: 14px;
    animation: og-hud-in .18s ease-out;
}
.og-hud__panel[hidden] { display: none; }
@keyframes og-hud-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.og-hud__phead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.og-hud__prank { font-weight: 800; font-size: 14px; color: #f0f2f5; }
.og-hud__pnext { font-size: 11px; color: #8a9099; }

.og-hud__tabs { display: flex; gap: 4px; margin-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.og-hud__tab { background: none; border: none; cursor: pointer; font-family: inherit; padding: 6px 12px; font-weight: 700; font-size: 12px; color: #8a9099; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.og-hud__tab.is-active { color: #F5B838; border-bottom-color: #F5B838; }

.og-hud__pane { display: none; }
.og-hud__pane.is-active { display: block; }

.og-hud__quests { max-height: 340px; overflow-y: auto; }
.og-hud__loading { text-align: center; color: #8a9099; padding: 20px; font-size: 13px; }

.og-hud__ligs { display: flex; gap: 8px; flex-wrap: wrap; }
.og-hud__lig { flex: 1; min-width: 130px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid; text-decoration: none; font-weight: 800; font-size: 14px; }
.og-hud__lig small { display: block; font-size: 9px; font-weight: 600; opacity: .8; text-transform: uppercase; letter-spacing: .5px; }

.og-hud__links { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .1); }
.og-hud__links a { flex: 1; min-width: 100px; text-align: center; text-decoration: none; padding: 8px; border-radius: 8px; font-size: 12px; font-weight: 700; color: #b0b6c0; background: rgba(255, 255, 255, .06); transition: color .15s; }
.og-hud__links a:hover { color: #F5B838; }

/* --- Mobil --- */
@media (max-width: 600px) {
    .og-hud { padding: 10px 12px; }
    .og-hud__cta-txt { display: none; }
    .og-hud__lvl-label { display: none; }
    .og-hud__xptext { display: none; }
    .og-hud__panel { left: 8px; right: 8px; }
}