/* ADIM 166 — MİSAFİR (yalnız izleme): misafir lobisi üst çubuğu, Okey şeridi, giriş penceresi, oyun ekranındaki giriş düğmeleri.
   Renkler sitenin yeşil / altın temasıyla aynı. */
:root {
  --msf-altin: #d4a537;
  --msf-altin-k: #a9791a;
  --msf-yesil: #1f9d55;
  --msf-yesil-k: #157a41;
  --msf-zemin: #0f2a1d;
  --msf-yazi: #f4f1e8;
}

/* ---------- üst çubuk ---------- */
.msf-bar { gap: 12px; }
.msf-marka { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; min-width: 0; }
.msf-marka, .msf-marka h1 { color: #f4f1e8; }
.msf-marka h1 { margin: 0; }
.msf-alt { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: 12.5px; opacity: .9; }
.msf-goz { display: inline-flex; color: var(--msf-altin); }
.msf-sag { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.msf-dil .ok-lang-switcher.in-acct { position: static; box-shadow: none; }
.msf-gir, .msf-uye {
  display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 16px; border-radius: 999px;
  font-weight: 800; font-size: 14px; text-decoration: none; white-space: nowrap; border: 0; cursor: pointer; font-family: inherit;
  transition: transform .15s ease, filter .15s ease;
}
.msf-gir { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
.msf-uye { background: linear-gradient(160deg, var(--msf-altin), var(--msf-altin-k)); color: #14261c; box-shadow: 0 3px 10px rgba(212,165,55,.35); }
.msf-gir:active, .msf-uye:active { transform: scale(.95); }
@media (hover: hover) and (pointer: fine) { .msf-gir:hover, .msf-uye:hover { filter: brightness(1.1); } }

/* ---------- 101 Okey şeridi (üye lobisindeki öneri kartının yerinde) ---------- */
.msf-serit {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 14px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(212,165,55,.16), rgba(31,157,85,.14)); border: 1px solid rgba(212,165,55,.35);
}
.msf-serit-yazi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.msf-serit-yazi b { font-size: 15.5px; color: #173d29; }
.msf-serit-yazi span { font-size: 13px; color: #3d4f45; line-height: 1.4; }
.msf-masa-kur { flex-shrink: 0; }
.msf-kapali { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 26px 16px; }
.msf-kapali .msf-gir { background: linear-gradient(160deg, var(--msf-yesil), var(--msf-yesil-k)); box-shadow: 0 3px 10px rgba(31,157,85,.35); }

/* misafir lobisinde oyun kartı: "İzle" + "Giriş yap ve oyna" */
.ok-misafir .gx-play.gx-izle { background: linear-gradient(160deg, var(--msf-yesil), var(--msf-yesil-k)); color: #fff; }
/* oyun kartı açık zeminli: ikinci düğme krem zemin + koyu altın yazı (beyaz yazı kartta okunmuyordu) */
.ok-misafir .gx-play-2 { margin-top: 8px; background: #fff8e6; color: #6f4c0c; box-shadow: inset 0 0 0 1.5px rgba(196,148,40,.8); border: 0; cursor: pointer; font-family: inherit; width: 100%; }
.ok-misafir button.gx-play { border: 0; cursor: pointer; font-family: inherit; }

.msf-alt-bilgi { text-align: center; font-size: 12.5px; opacity: .8; margin: 18px 8px 6px; line-height: 1.9; }
.msf-alt-bilgi a { color: rgba(244,241,232,.78); }

/* ---------- giriş penceresi ---------- */
.msf-pen {
  position: fixed; inset: 0; z-index: 2147483100; display: flex; align-items: center; justify-content: center; padding: 18px;
  background: rgba(4, 14, 9, .66); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .18s ease;
}
.msf-pen.show { opacity: 1; }
.msf-pk {
  position: relative; width: 100%; max-width: 380px; padding: 26px 22px 20px; border-radius: 20px; text-align: center; color: var(--msf-yazi);
  background: linear-gradient(170deg, #17402b, #0d2619); border: 1px solid rgba(212,165,55,.4); box-shadow: 0 22px 60px rgba(0,0,0,.55);
  transform: translateY(14px) scale(.97); transition: transform .2s ease;
}
.msf-pen.show .msf-pk { transform: none; }
.msf-x { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.msf-ikon { width: 62px; height: 62px; margin: 0 auto 12px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #14261c; background: linear-gradient(160deg, var(--msf-altin), var(--msf-altin-k)); box-shadow: 0 6px 18px rgba(212,165,55,.4); }
.msf-pk h3 { margin: 0 0 8px; font-size: 19px; color: #fff; }
.msf-pk p { margin: 0 0 18px; font-size: 14px; line-height: 1.5; opacity: .9; }
.msf-dg { display: flex; flex-direction: column; gap: 9px; }
.msf-dg a, .msf-dg button { display: flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 14px; font-weight: 800; font-size: 15px; text-decoration: none; border: 0; cursor: pointer; font-family: inherit; }
.msf-dg-gir { background: linear-gradient(160deg, var(--msf-yesil), var(--msf-yesil-k)); color: #fff; box-shadow: 0 4px 14px rgba(31,157,85,.35); }
.msf-dg-uye { background: linear-gradient(160deg, var(--msf-altin), var(--msf-altin-k)); color: #14261c; box-shadow: 0 4px 14px rgba(212,165,55,.35); }
.msf-dg-sonra { background: transparent; color: rgba(244,241,232,.8); font-weight: 700 !important; min-height: 40px !important; }

/* ---------- oyun ekranı (pages/oyun.php) misafir çubuğu ---------- */
.ob-ad h1.ob-h1 { font-size: inherit; font-weight: inherit; margin: 0; line-height: inherit; color: inherit; letter-spacing: inherit; }
.ob-misafir { display: flex; align-items: center; gap: 6px; }
.ob-misafir .msf-gir, .ob-misafir .msf-uye { min-height: 32px; padding: 0 12px; font-size: 13px; }
.ob-izle { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--msf-altin); white-space: nowrap; }

@media (max-width: 600px) {
  .msf-bar { flex-wrap: nowrap; }
  .msf-marka { gap: 8px; }
  .msf-marka h1 { font-size: 16px; }
  .msf-alt { font-size: 11px; }
  .msf-sag { gap: 5px; }
  .msf-gir, .msf-uye { min-height: 34px; padding: 0 11px; font-size: 12.5px; }
  .msf-serit { flex-direction: column; align-items: stretch; text-align: center; padding: 12px; }
  .msf-masa-kur { justify-content: center; }
  .ob-izle span { display: none; }
  .ob-misafir .msf-gir, .ob-misafir .msf-uye { padding: 0 9px; font-size: 12px; }
}
@media (max-width: 380px) {
  .msf-alt { display: none; }
}
@media (max-width: 420px) {
  .ob-ad h1.ob-h1 { display: none; }
}