/* ════════════════════════════════════════════════════════════════════════
   hud.css — global taktik HUD görsel katmanı (tüm app sayfaları)
   EN SON yüklenir; mevcut sınıfları üst katmandan geçersiz kılar.
   ════════════════════════════════════════════════════════════════════════ */
:root {
    /* Karargah teması: ana vurgu altın (eski cyan #00c8a0 → #c9a23a) */
    --hud-cyan:   #c9a23a;
    --hud-purple: #7f77dd;
    --hud-gold:   #c9a23a;
    --hud-red:    #e24b4a;
    --hud-panel:  #111820;
    --hud-border: #2a2f5a;
    --hud-bg:     #0d1117;
    --hud-text:   #e8f0f5;
    --hud-muted:  #6c79a8;
}

/* ── Zemin (tüm app sayfaları) ── */
body.radar-page {
    background:
        linear-gradient(rgba(110,130,200,.05) 1px, transparent 1px) 0 0 / 36px 36px,
        linear-gradient(90deg, rgba(110,130,200,.05) 1px, transparent 1px) 0 0 / 36px 36px,
        #0d1117 !important;
    color: var(--hud-text);
    padding-top: 54px;
}

/* ── Sayfa içerik wrapper: tüm .next-placeholder / layout sarmalayıcıları ── */
body.radar-page .next-placeholder,
body.radar-page .stat-layout,
body.radar-page .env-layout,
body.radar-page .gorev-layout,
body.radar-page .basari-layout,
body.radar-page .sira-layout,
body.radar-page .birlik-layout,
body.radar-page .karargah-layout,
body.radar-page .kogus-layout,
body.radar-page .kantin-layout,
body.radar-page .ayarlar-layout,
body.radar-page .admin-layout,
body.radar-page .profil-layout {
    padding-top: 24px;
}

/* ── Panel: her sayfanın ana kart/panel bileşeni ── */
body.radar-page .stat-kart,
body.radar-page .env-kusanim,
body.radar-page .env-katalog-bolum,
body.radar-page .gorev-kart,
body.radar-page .basari-kart,
body.radar-page .sira-kart,
body.radar-page .birlik-panel,
body.radar-page .karargah-panel,
body.radar-page .kogus-panel,
body.radar-page .kantin-panel,
body.radar-page .ayarlar-panel,
body.radar-page .next-panel,
body.radar-page .admin-panel {
    /* hud-panel görünümü: düz koyu zemin + ince border (komuta paneliyle aynı) */
    background: #111820;
    border: 0.5px solid #1e3a4a;
    border-radius: 8px;
    box-shadow: none;
    color: var(--hud-text);
}

/* ── Sayfa başlıkları ── */
body.radar-page h1,
body.radar-page h2,
body.radar-page h3 {
    color: var(--hud-text);
    font-family: 'Orbitron', monospace;
}

body.radar-page .stat-ust h2,
body.radar-page .gorev-ust h2,
body.radar-page .basari-ust h2,
body.radar-page .sira-ust h2,
body.radar-page .env-kusanim h3 {
    font-family: 'Orbitron', monospace;
    letter-spacing: 1px;
    color: var(--hud-text);
    text-transform: uppercase;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

/* ── Accent renkler ── */
body.radar-page .stat-ust h2 .ui-ikon,
body.radar-page .gorev-ust h2 .ui-ikon,
body.radar-page .basari-ust h2 .ui-ikon,
body.radar-page .sira-ust h2 .ui-ikon {
    filter: drop-shadow(0 0 5px var(--hud-cyan));
}

/* ── Sekme aktif vurgusu ── */
body.radar-page .env-tab.aktif,
body.radar-page .sira-tab.aktif,
body.radar-page .admin-tab.aktif {
    border-color: #c9a23a !important;
    color: #c9a23a !important;
    box-shadow: inset 0 0 0 1px #c9a23a;
}

/* ── XP/progress barlar — karargah altın dili ── */
body.radar-page .xp-dolu,
body.radar-page .rutbe-dolu {
    background: linear-gradient(90deg, #9c7e2e, #c9a23a) !important;
}

/* ── Butonlar ── */
body.radar-page .btn-ana,
body.radar-page .env-satin-al,
body.radar-page .gorev-talep,
body.radar-page .basari-btn {
    background: #2a2410;
    border: 0.5px solid var(--hud-cyan);
    color: var(--hud-cyan);
}
body.radar-page .btn-ana:hover,
body.radar-page .env-satin-al:hover {
    background: #3a3216;
}

/* ── Tablo/liste satırları ── */
body.radar-page table { color: var(--hud-text); }
body.radar-page td, body.radar-page th { border-color: var(--hud-border); }
body.radar-page tr:hover td { background: rgba(255,216,107,.05); }

/* ── Tooltip ── */
.hud-tooltip {
    position: fixed; z-index: 6000; pointer-events: none;
    transform: translate(-50%, -100%);
    max-width: 240px; white-space: normal; text-align: center;
    background: #0e1520; border: 0.5px solid var(--hud-border); color: var(--hud-text);
    padding: 7px 11px; border-radius: 6px;
    font-family: 'Rajdhani', sans-serif; font-size: .78rem; font-weight: 600; line-height: 1.35;
    box-shadow: 0 10px 26px rgba(0,0,0,.55);
    opacity: 0; transition: opacity .1s; display: none;
}
.hud-tooltip.gor { opacity: 1; }

/* ── Köşe parantezi yardımcı ── */
.hud-cerce { position: relative; }
.hud-cerce::before, .hud-cerce::after {
    content: ''; position: absolute; width: 14px; height: 14px;
    border: 1px solid var(--hud-cyan); opacity: .5; pointer-events: none;
}
.hud-cerce::before { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.hud-cerce::after  { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }

/* ── Duty pill ── */
.duty-pill {
    position: fixed; bottom: 20px; right: 20px; z-index: 400;
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 6px;
    background: #1a1230; border: 0.5px solid var(--hud-purple);
    color: #afa9ec; font-size: 11px; font-family: 'Courier New', monospace;
    cursor: pointer; transition: background .15s;
}
.duty-pill:hover { background: #241840; }
.duty-pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hud-purple); }

/* ── Yaşam HUD (sağ kenar) ── */
.yasam-hud {
    position: fixed; right: 14px; top: 68px; z-index: 70;
    transition: opacity .25s ease, transform .25s ease;
}
.yasam-hud.gizli { opacity: 0; transform: translateX(12px); pointer-events: none; }
.yh-link {
    display: flex; flex-direction: column; gap: 7px; min-width: 164px;
    background: rgba(11, 17, 26, .92); border: 0.5px solid var(--hud-border);
    border-left: 2px solid var(--hud-cyan);
    border-radius: 6px; padding: 10px 12px; text-decoration: none;
    transition: min-width .2s ease, padding .2s ease, opacity .2s ease, border-width .2s ease;
}
.yh-link:hover { border-color: var(--hud-cyan); }
.yh-baslik { font-family: 'Orbitron', monospace; font-size: .52rem; letter-spacing: 2px; color: var(--hud-muted); }
.yh-row { display: grid; grid-template-columns: 18px 1fr 24px; align-items: center; gap: 8px; }
.yh-row img { width: 16px; height: 16px; opacity: .85; }
.yh-bar { height: 5px; background: #0a1520; border: 0.5px solid var(--hud-border); border-radius: 3px; overflow: hidden; }
.yh-bar i { display: block; height: 100%; border-radius: 3px; transition: width .4s ease; }
.yh-row[data-stat="aclik"]    .yh-bar i { background: #d85a30; }
.yh-row[data-stat="susuzluk"] .yh-bar i { background: #378add; }
.yh-row[data-stat="stamina"]  .yh-bar i { background: #ef9f27; }
.yh-row b { font-family: 'Orbitron', monospace; font-size: .68rem; color: var(--hud-text); text-align: right; }
.yh-kond { font-size: .6rem; letter-spacing: .5px; color: var(--hud-muted); text-align: center;
    border-top: 0.5px solid var(--hud-border); padding-top: 5px; margin-top: 1px; }
.yh-kond.iyi { color: var(--hud-cyan); }
.yh-kond.kotu { color: var(--hud-red); }
.yasam-hud.dusuk .yh-link { border-left-color: var(--hud-red); }

/* Toggle tab */
.yh-toggle {
    position: absolute; left: -20px; top: 50%; transform: translateY(-50%);
    width: 20px; height: 44px;
    background: rgba(11, 17, 26, .92); border: 0.5px solid var(--hud-border);
    border-right: none; border-radius: 6px 0 0 6px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    color: var(--hud-muted); font-size: 10px; padding: 0;
    transition: color .2s;
}
.yh-toggle::after { content: '▶'; }
.yh-toggle:hover { color: var(--hud-cyan); }
.yasam-hud.kapali .yh-toggle::after { content: '◀'; }

/* Kapalı durum — sadece toggle tab görünür */
.yasam-hud.kapali .yh-link {
    width: 0; min-width: 0; padding: 0; overflow: hidden;
    border-width: 0; opacity: 0; pointer-events: none;
}

@media (max-width: 900px) {
    .yasam-hud { top: auto; bottom: 60px; right: 10px; }
    .yh-link { min-width: 0; flex-direction: row; align-items: center; gap: 8px; padding: 7px 10px; }
    .yh-baslik, .yh-kond { display: none; }
    .yh-row { grid-template-columns: 15px 32px 18px; gap: 4px; }
    .yh-bar { height: 4px; }
    .yh-toggle { display: none; }
    .yasam-hud.kapali .yh-link { min-width: 0; padding: 7px 10px; overflow: visible; opacity: 1; pointer-events: auto; border-width: 0.5px; }
}

/* ── Feedback button konumu ── */
.fb-btn { bottom: 20px; left: 20px; }

/* ── GuidedTour balonu z-index ── */
.gt-kart { z-index: 10001; }

/* ── Feedback modal overlay z-index ── */
.fb-overlay { z-index: 10050; }

/* ════════════════════════════════════════════════════════════════════════
   HAREKET KATMANI — site geneli animasyon & mikro-etkileşim
   Tek merkezden tüm app sayfalarına: giriş animasyonları, kart hover'ları,
   buton bası, bar parlaması, zemin akışı. prefers-reduced-motion korumalı.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Etkileşim geçişleri (hafif — her zaman açık) ── */
body.radar-page button,
body.radar-page a {
    transition: transform .13s ease, box-shadow .16s ease, background .15s ease,
                border-color .15s ease, color .15s ease, opacity .15s ease;
}
body.radar-page button:not(:disabled):active { transform: translateY(1px) scale(.98); }

/* İç kartlar: hover'da kalkma + bronz kenar + parıltı */
.section-card, .fizik-kutu, .kariyer-il, .rutin-oge, .doll-slot,
.krg-metrik, .krg-lig .lig-satir,
.hud-game-card, .hud-lb-row, .hud-menu-card {
    transition: transform .16s ease, border-color .16s ease, box-shadow .2s ease;
}
.section-card:hover, .fizik-kutu:hover, .krg-metrik:hover,
.krg-lig .lig-satir:hover, .hud-lb-row:hover, .rutin-oge:hover {
    transform: translateY(-2px);
    border-color: #c9a23a;
    box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 10px rgba(201,162,58,.12);
}
.hud-game-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 10px rgba(201,162,58,.12); }

/* Menü kartı ikonu hover'da büyür */
.hud-menu-icon { transition: transform .18s cubic-bezier(.34,1.56,.64,1); }
.hud-menu-card:hover .hud-menu-icon { transform: scale(1.18); }

/* Nav linki: alt çizgi büyüme */
.hnav-menu a { position: relative; }
.hnav-menu a::after {
    content: ''; position: absolute; left: 8px; right: 8px; bottom: 1px; height: 1px;
    background: #c9a23a; transform: scaleX(0); transform-origin: left;
    transition: transform .18s ease;
}
.hnav-menu a:hover::after { transform: scaleX(1); }

/* Rozet/vitrin hover pop */
.vitrin-rozet { transition: transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .2s; }
.vitrin-rozet:hover { transform: scale(1.15); }

/* ── Keyframe animasyonları (reduced-motion kapatır) ── */
@media (prefers-reduced-motion: no-preference) {

    /* Sayfa girişi: paneller aşağıdan yumuşak belirir */
    @keyframes hud-panel-in {
        from { opacity: 0; transform: translateY(10px); }
        to   { opacity: 1; transform: none; }
    }
    body.radar-page .stat-kart,
    body.radar-page .env-kusanim,
    body.radar-page .env-katalog-bolum,
    body.radar-page .gorev-kart,
    body.radar-page .basari-kart,
    body.radar-page .sira-kart,
    body.radar-page .birlik-panel,
    body.radar-page .kogus-panel,
    body.radar-page .kantin-panel,
    body.radar-page .ayarlar-panel,
    body.radar-page .admin-panel,
    body.radar-page .kariyer-kart,
    body.radar-page .react-profile-main,
    body.radar-page .krg-kart {
        animation: hud-panel-in .45s ease both;
    }
    /* Komuta 3 kolon: kademeli giriş */
    body.komuta-page .hud-left   { animation: hud-panel-in .4s ease both; }
    body.komuta-page .hud-center { animation: hud-panel-in .4s ease .08s both; }
    body.komuta-page .hud-right  { animation: hud-panel-in .4s ease .16s both; }

    /* XP / progress barları: periyodik ışık süpürmesi */
    @keyframes bar-shine {
        0%       { transform: translateX(-100%); }
        55%,100% { transform: translateX(220%); }
    }
    body.radar-page .xp-dolu,
    body.radar-page .hud-bar-xp,
    body.radar-page .krg-track i,
    body.radar-page .acemi-dolu {
        position: relative; overflow: hidden;
    }
    body.radar-page .xp-dolu::after,
    body.radar-page .hud-bar-xp::after,
    body.radar-page .krg-track i::after,
    body.radar-page .acemi-dolu::after {
        content: ''; position: absolute; inset: 0; width: 55%;
        background: linear-gradient(105deg, transparent, rgba(255,255,255,.32), transparent);
        animation: bar-shine 3.2s ease-in-out infinite;
    }

    /* Zemin taktik grid: çok yavaş akış (canlılık hissi) */
    @keyframes grid-drift {
        from { background-position: 0 0, 0 0; }
        to   { background-position: 36px 36px, 36px 36px; }
    }
    body.radar-page { animation: grid-drift 90s linear infinite; }

    /* Panel etiketi: nadir yanıp sönen imleç noktası hissi */
    @keyframes label-blink { 0%,92%,100% { opacity: 1; } 96% { opacity: .35; } }
    .hud-panel-label { animation: label-blink 6s ease-in-out infinite; }

    /* Bölüm menü kartları: kademeli giriş */
    .hud-menu-grid .hud-menu-card { animation: hud-panel-in .35s ease both; }
    .hud-menu-grid .hud-menu-card:nth-child(2)  { animation-delay: .03s; }
    .hud-menu-grid .hud-menu-card:nth-child(3)  { animation-delay: .06s; }
    .hud-menu-grid .hud-menu-card:nth-child(4)  { animation-delay: .09s; }
    .hud-menu-grid .hud-menu-card:nth-child(5)  { animation-delay: .12s; }
    .hud-menu-grid .hud-menu-card:nth-child(6)  { animation-delay: .15s; }
    .hud-menu-grid .hud-menu-card:nth-child(7)  { animation-delay: .18s; }
    .hud-menu-grid .hud-menu-card:nth-child(8)  { animation-delay: .21s; }
    .hud-menu-grid .hud-menu-card:nth-child(9)  { animation-delay: .24s; }
    .hud-menu-grid .hud-menu-card:nth-child(10) { animation-delay: .27s; }
    .hud-menu-grid .hud-menu-card:nth-child(11) { animation-delay: .30s; }
    .hud-menu-grid .hud-menu-card:nth-child(12) { animation-delay: .33s; }
    .hud-menu-grid .hud-menu-card:nth-child(13) { animation-delay: .36s; }

    /* Çevrimiçi noktası nabız */
    @keyframes dot-pulse { 0%,100% { box-shadow: 0 0 4px rgba(201,162,58,.4); } 50% { box-shadow: 0 0 10px rgba(201,162,58,.9); } }
    .hnav-dot, .hud-dot { animation: dot-pulse 2.2s ease-in-out infinite; }
}

/* Reduced-motion: geçişler de kısalır */
@media (prefers-reduced-motion: reduce) {
    body.radar-page * { transition-duration: .01s !important; }
}