/*
  A.T.G. PORTFOLYO - css/oyun-salonu.css
  Devre Arası oyun salonu: başlık, kabin seçici (◄ ad ► + noktalar), kabin kutusu, yükleniyor / hata durumları.
  Kullanan sayfalar: pages/oyun.html
  Oyunların kendi görünümü kabin seçilince yüklenir (ör. css/oyunlar/kisa-devre/game.css); bu dosya oyunların içine dokunmaz.
  Sıra (HTML <link> sırası bozulmamalı): base → oyun-salonu → [kabinin CSS'i, JS ekler] → utilities → print
*/

/* ==========================================================================
   1. SAYFA VE BAŞLIK (eski Kısa Devre sayfasının başlık görünümüyle aynı dil: neon başlık, açılışta bir kez "güç verilirken" titrer)
   ========================================================================== */
.salon { padding-bottom: 80px; }
.salon-hero { text-align: center; margin: 40px auto 22px; padding: 0 20px; }
.salon-eyebrow { font-family: monospace; font-size: 13px; letter-spacing: 2px; color: var(--accent-color); margin: 0; }
.salon-hero h1 {
    font-size: 40px; letter-spacing: 3px; margin: 10px 0 10px; color: var(--accent-color);
    text-shadow: 0 0 18px rgba(0, 230, 118, 0.25);
    animation: salon-guc 1.1s ease-out 0.15s both;
}
body.light-mode .salon-hero h1 { text-shadow: none; }
@keyframes salon-guc { 0% { opacity: 0; } 10% { opacity: 1; } 16% { opacity: 0.55; } 24% { opacity: 1; } 32% { opacity: 0.8; } 40%, 100% { opacity: 1; } }
.salon-intro { max-width: 680px; margin: 0 auto; font-size: 16px; opacity: 0.8; line-height: 1.6; }

/* ==========================================================================
   2. KABİN SEÇİCİ: ◄ [oyunun adı · sıra / noktalar] ►
   Oklar sitenin neon çizgi simgeleri (.salon-ico: dolgu yok, çizgi currentColor, hafif parlama; emoji yok).
   ========================================================================== */
.salon-secici {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    width: min(760px, calc(100% - 32px)); margin: 0 auto 16px;
}
.salon-secici__orta { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.salon-secici__ad { margin: 0; font-family: monospace; font-size: 15px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-color); text-align: center; }
.salon-ad { color: var(--accent-color); font-weight: 700; }
.salon-sayac { opacity: 0.55; margin-left: 6px; font-size: 12px; }

.salon-ok {
    flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; cursor: pointer;
    color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 7%, var(--card-bg));
    border: 1px solid var(--border-color); border-radius: 12px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}
.salon-ok:hover:not(:disabled), .salon-ok:focus-visible { border-color: var(--accent-color); box-shadow: 0 0 12px color-mix(in srgb, var(--accent-color) 35%, transparent); }
.salon-ok:active:not(:disabled) { transform: scale(0.94); }
.salon-ok:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 3px; }
.salon-ok:disabled { opacity: 0.35; cursor: default; }
.salon-ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent-color) 70%, transparent)); }
body.light-mode .salon-ico { filter: none; }

.salon-noktalar { display: flex; gap: 4px; }
.salon-nokta {                                              /* dokunma alanı 24 px, görünen nokta 9 px */
    width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center;
}
.salon-nokta::before {
    content: ''; width: 9px; height: 9px; border-radius: 50%;
    border: 1px solid var(--accent-color); background: transparent; transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.salon-nokta.is-on::before { background: var(--accent-color); box-shadow: 0 0 8px var(--accent-color); transform: scale(1.15); }
.salon-nokta:hover::before { box-shadow: 0 0 6px var(--accent-color); }
.salon-nokta:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 0; border-radius: 50%; }
body.light-mode .salon-nokta.is-on::before { box-shadow: none; }

/* ==========================================================================
   3. KABİN: oyun modülü içini kurar. Yüklenirken kısa bir yazı, yüklenemezse yeniden dene düğmesi.
   ========================================================================== */
.salon-kabin[hidden] { display: none; }
.salon-yukleniyor, .salon-hata {
    text-align: center; font-family: monospace; font-size: 13px; letter-spacing: 1.5px; color: var(--accent-color);
    margin: 60px auto; padding: 0 20px;
}
.salon-yukleniyor { animation: salon-yanip 1.2s ease-in-out infinite; }
@keyframes salon-yanip { 50% { opacity: 0.35; } }
.salon-hata { color: var(--text-color); margin-bottom: 14px; }
.salon-hata__btn { margin: 0 auto; }

/* ==========================================================================
   4. TELEFON VE HAREKETİ AZALT
   ========================================================================== */
@media (max-width: 640px) {
    .salon { padding-bottom: 44px; }
    .salon-hero { margin: 16px auto 12px; padding: 0 14px; }
    .salon-hero h1 { font-size: 26px; margin: 6px 0 6px; }
    .salon-eyebrow { font-size: 11px; }
    .salon-intro { font-size: 13.5px; line-height: 1.45; }
    .salon-secici { gap: 10px; width: calc(100% - 16px); margin-bottom: 10px; }
    .salon-ok { width: 40px; height: 40px; border-radius: 10px; }
    .salon-secici__ad { font-size: 13px; letter-spacing: 1px; }
    .salon-secici__orta { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    .salon-hero h1, .salon-yukleniyor { animation: none; }
    .salon-ok, .salon-nokta::before { transition: none; }
}