/* superbilen.css — SüperBilen oyun sayfası */
.sb-sayfa { --sb-lacivert: #0b2150; --sb-lacivert-2: #16357a; --sb-kirmizi: #e1251b; --sb-cizgi: #e3e8f1; --sb-soluk: #5b6678;
  padding: 28px 0 56px; background: radial-gradient(1200px 420px at 50% -120px, #dfe9fb 0%, rgba(223, 233, 251, 0) 70%); }
.sb-ust { text-align: center; max-width: 720px; margin: 0 auto 22px; }
.sb-etiket { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--sb-cizgi); font-size: .8rem; font-weight: 700; color: var(--sb-lacivert-2); }
.sb-ust h1 { margin: 10px 0 8px; font-family: "Outfit", system-ui, sans-serif; font-weight: 800; font-size: clamp(2.2rem, 7vw, 3.6rem); line-height: 1.05; color: var(--sb-lacivert); letter-spacing: -.02em; }
.sb-ust h1 span { color: var(--sb-kirmizi); }
.sb-ust p { margin: 0; color: var(--sb-soluk); font-size: 1rem; line-height: 1.6; }

/* Oyun alanı */
.sb-cerceve { max-width: 960px; margin: 0 auto; }
.sb-oyun { position: relative; border-radius: 18px; overflow: hidden; background: #05070d; outline: none;
  box-shadow: 0 24px 60px -24px rgba(11, 33, 80, .55), 0 0 0 4px #fff, 0 0 0 6px var(--sb-lacivert-2);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.sb-oyun:focus-visible { box-shadow: 0 24px 60px -24px rgba(11, 33, 80, .55), 0 0 0 4px #fff, 0 0 0 6px var(--sb-kirmizi); }
.sb-ekran { position: relative; width: 100%; aspect-ratio: 5 / 3; display: flex; align-items: center; justify-content: center; }
.sb-ekran canvas { display: block; cursor: pointer; }
.sb-kapat { display: none; position: absolute; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); width: 40px; height: 40px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(6, 12, 28, .5); color: #fff; font-size: 1.1rem; z-index: 3; }

/* Dokunmatik tuşlar: dikey ekranda oyunun altında, tam ekran yatayda oyunun üstünde */
.sb-dokun { display: none; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #0b1733, #070d1f); }
.sb-dokun > div { display: flex; gap: 10px; align-items: center; }
.sb-dokun button { width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .08); color: #fff;
  font: 800 1.35rem "Outfit", system-ui, sans-serif; display: grid; place-items: center; touch-action: none; -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .3); transition: transform .06s, background .06s; }
.sb-dokun button i { font-size: 1.7rem; pointer-events: none; }
.sb-dokun button.is-kucuk { width: 48px; height: 48px; }
.sb-dokun button.is-kucuk i { font-size: 1.3rem; }
.sb-dokun button.is-a { width: 74px; height: 74px; background: linear-gradient(180deg, #ff4a3d, #c81e15); border-color: rgba(255, 255, 255, .7); }
.sb-dokun button.is-b { background: linear-gradient(180deg, #2f5fc7, #16357a); border-color: rgba(255, 255, 255, .6); }
.sb-dokun button.is-on { transform: scale(.9); filter: brightness(1.25); }
.sb-yatay { display: none; margin: 10px 0 0; text-align: center; font-size: .85rem; color: var(--sb-soluk); }
@media (pointer: coarse), (hover: none) {
  .sb-dokun { display: flex; }
  .sb-yatay { display: block; }
}

/* Tam ekran (gerçek tam ekran ya da iPhone için sayfa içi tam ekran) */
.sb-oyun:fullscreen, .sb-oyun.is-tam { border-radius: 0; box-shadow: none; display: flex; flex-direction: column; background: #000; width: 100%; height: 100%; }
.sb-oyun.is-tam { position: fixed; inset: 0; z-index: 3000; height: 100dvh; }
.sb-oyun:fullscreen .sb-ekran, .sb-oyun.is-tam .sb-ekran { flex: 1; min-height: 0; aspect-ratio: auto; }
.sb-oyun:fullscreen .sb-kapat, .sb-oyun.is-tam .sb-kapat { display: grid; place-items: center; }
@media (orientation: landscape) {
  .sb-oyun:fullscreen .sb-dokun, .sb-oyun.is-tam .sb-dokun { position: absolute; left: 0; right: 0; bottom: 0; background: none; pointer-events: none;
    padding: 0 max(18px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
  .sb-oyun:fullscreen .sb-dokun > div, .sb-oyun.is-tam .sb-dokun > div { pointer-events: auto; }
  .sb-oyun:fullscreen .sb-dokun button, .sb-oyun.is-tam .sb-dokun button { background-color: rgba(6, 12, 28, .38); opacity: .92; }
}
html.sb-kilit, html.sb-kilit body { overflow: hidden; }

.sb-arac { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.sb-btn { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--sb-cizgi); background: #fff; color: var(--sb-lacivert);
  font-weight: 700; font-size: .9rem; text-decoration: none; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.sb-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(11, 33, 80, .45); color: var(--sb-lacivert); }
.sb-btn--kirmizi { background: var(--sb-kirmizi); border-color: var(--sb-kirmizi); color: #fff; }
.sb-btn--kirmizi:hover { color: #fff; background: #c81e15; }

.sb-kazandi { max-width: 960px; margin: 18px auto 0; display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 14px; background: var(--sb-lacivert); color: #fff; }
.sb-kazandi[hidden] { display: none; }
.sb-kazandi > i { font-size: 2rem; color: #ffd25e; }
.sb-kazandi div { flex: 1; display: grid; gap: 3px; }
.sb-kazandi span { color: rgba(255, 255, 255, .78); font-size: .9rem; }

/* Bilgi kartları */
.sb-bilgi { max-width: 990px; margin: 26px auto 0 !important; }
.sb-kart { height: 100%; background: #fff; border: 1px solid var(--sb-cizgi); border-radius: 16px; padding: 20px 22px; }
.sb-kart h2 { font-size: 1.05rem; font-weight: 800; color: var(--sb-lacivert); margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.sb-kart h2 i { color: var(--sb-kirmizi); }
.sb-tuslar { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sb-tuslar li { display: grid; grid-template-columns: minmax(150px, auto) 1fr; gap: 10px; align-items: center; font-size: .9rem; color: #2a3446; }
.sb-tuslar span { color: var(--sb-soluk); font-size: .82rem; }
.sb-tuslar kbd { display: inline-block; min-width: 24px; padding: 2px 6px; margin-right: 3px; border-radius: 6px; background: #f1f4f9; border: 1px solid #d5dce8; border-bottom-width: 2px; color: var(--sb-lacivert); font: 700 .74rem ui-monospace, monospace; text-align: center; }
.sb-not { margin: 16px 0 0; font-size: .86rem; color: var(--sb-soluk); line-height: 1.55; }
.sb-karakterler { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.sb-karakterler > div { display: grid; justify-items: center; align-content: start; text-align: center; gap: 2px; padding: 10px 6px; border-radius: 12px; background: #f6f8fc; }
.sb-karakterler canvas { width: 52px; height: 52px; }
.sb-karakterler b { font-size: .82rem; color: var(--sb-lacivert); }
.sb-karakterler span { font-size: .72rem; color: var(--sb-soluk); line-height: 1.35; }

@media (max-width: 991px) { .sb-karakterler { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .sb-sayfa { padding-top: 16px; }
  .sb-oyun { border-radius: 12px; margin: 0 -4px; }
  .sb-karakterler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sb-tuslar li { grid-template-columns: 1fr; gap: 2px; }
  .sb-kazandi { flex-direction: column; text-align: center; }
  .sb-arac .sb-btn { flex: 1 1 calc(50% - 8px); justify-content: center; }
}
@media (max-width: 380px) {
  .sb-dokun { padding: 12px 10px calc(12px + env(safe-area-inset-bottom)); }
  .sb-dokun button { width: 56px; height: 56px; }
  .sb-dokun button.is-a { width: 64px; height: 64px; }
  .sb-dokun button.is-kucuk { width: 42px; height: 42px; }
}
.sb-tuslar em { font-style: normal; }
.sb-karakterler .sb-ek { display: block; font-size: .7rem; color: #b77a00; text-transform: uppercase; letter-spacing: .03em; }

/* Ad giriş penceresi (oyun alanının üstünde; tam ekranda da çalışır) */
.sb-adform { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 14px; background: rgba(5, 9, 22, .72); backdrop-filter: blur(3px); }
.sb-adform[hidden] { display: none; }
.sb-adform__kutu { width: min(420px, 100%); background: #fff; border-radius: 18px; padding: 22px 22px 16px; text-align: center; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .6); }
.sb-adform__kutu > i { font-size: 2rem; color: #f5b82e; }
.sb-adform__kutu h2 { margin: 4px 0 6px; font: 800 1.25rem "Outfit", system-ui, sans-serif; color: var(--sb-lacivert); }
.sb-adform__kutu p { margin: 0 0 12px; font-size: .9rem; color: var(--sb-soluk); }
.sb-adform__kutu input { width: 100%; height: 48px; padding: 0 14px; border: 2px solid var(--sb-cizgi); border-radius: 12px; font: 700 1.05rem "Outfit", system-ui, sans-serif; color: var(--sb-lacivert); text-align: center; }
.sb-adform__kutu input:focus { outline: none; border-color: var(--sb-lacivert-2); box-shadow: 0 0 0 4px rgba(22, 53, 122, .12); }
.sb-adform__hata { display: block; min-height: 1.2em; margin-top: 6px; font-size: .8rem; color: var(--sb-kirmizi); font-weight: 600; }
.sb-adform__btn { display: flex; gap: 8px; justify-content: center; margin-top: 4px; }
.sb-adform__btn .sb-btn--kirmizi { flex: 1; justify-content: center; }
.sb-adform__not { display: block; margin-top: 10px; font-size: .72rem; color: var(--sb-soluk); }
.sb-oyuncu { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; font-size: .88rem; color: var(--sb-soluk); }
.sb-oyuncu b { color: var(--sb-lacivert); }
.sb-link { border: 0; background: none; padding: 0; color: var(--sb-kirmizi); font-weight: 700; font-size: .85rem; text-decoration: underline; cursor: pointer; }
.sb-bildirim { max-width: 520px; margin: 10px auto 0; padding: 10px 14px; border-radius: 12px; background: #eafaf0; border: 1px solid #b9e8c9; color: #136c34; font-weight: 700; font-size: .9rem; text-align: center; }
.sb-bildirim.is-hata { background: #fff1f1; border-color: #f5c2c2; color: #a3201a; }
.sb-bildirim[hidden] { display: none; }

/* Bonus sıralaması */
.sb-siralama { max-width: 990px; margin: 28px auto 0; background: linear-gradient(135deg, #0b2150, #16357a); color: #fff; border-radius: 20px; padding: 22px 24px; box-shadow: 0 24px 60px -30px rgba(11, 33, 80, .8); }
.sb-siralama header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.sb-siralama .sb-etiket { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .2); color: #ffd25e; }
.sb-siralama h2 { margin: 8px 0 4px; font: 800 1.8rem "Outfit", system-ui, sans-serif; }
.sb-siralama header p { margin: 0; max-width: 560px; color: rgba(255, 255, 255, .8); font-size: .92rem; }
.sb-siralama__ist { display: flex; gap: 10px; }
.sb-siralama__ist div { min-width: 86px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .1); text-align: center; display: grid; }
.sb-siralama__ist b { font: 800 1.4rem "Outfit", system-ui, sans-serif; }
.sb-siralama__ist span { font-size: .75rem; color: rgba(255, 255, 255, .7); }
.sb-siralama__tablo { overflow-x: auto; border-radius: 14px; background: #fff; }
.sb-siralama table { width: 100%; border-collapse: collapse; color: #1d2a44; font-size: .92rem; }
.sb-siralama th { padding: 10px 12px; background: #f3f6fb; color: var(--sb-soluk); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; text-align: left; white-space: nowrap; }
.sb-siralama td { padding: 10px 12px; border-top: 1px solid #eef1f6; white-space: nowrap; }
.sb-siralama .sb-sira { width: 52px; font-size: 1.2rem; font-weight: 800; text-align: center; color: var(--sb-lacivert); }
.sb-siralama .sb-ad { font-weight: 700; white-space: normal; }
.sb-siralama .sb-skor { font: 800 1.05rem "Outfit", system-ui, sans-serif; color: var(--sb-lacivert); }
.sb-siralama tr.is-ilk1 { background: linear-gradient(90deg, #fff6d6, #fff); }
.sb-siralama tr.is-ilk2 { background: linear-gradient(90deg, #f1f4f8, #fff); }
.sb-siralama tr.is-ilk3 { background: linear-gradient(90deg, #fbeee3, #fff); }
.sb-siralama tr.is-ben td { box-shadow: inset 0 0 0 9999px rgba(225, 37, 27, .05); }
.sb-siralama tr.is-ben .sb-ad::after { content: " (sen)"; color: var(--sb-kirmizi); font-weight: 600; font-size: .8rem; }
.sb-rekor { display: inline-block; padding: 1px 7px; border-radius: 999px; background: #e1251b; color: #fff; font-size: .66rem; font-weight: 800; vertical-align: middle; }
.sb-odul { display: inline-block; padding: 1px 7px; border-radius: 999px; background: #fff0c2; color: #8a5a00; font-size: .66rem; font-weight: 800; vertical-align: middle; }
.sb-bos { text-align: center; color: var(--sb-soluk); padding: 22px !important; }
.sb-siralama__not { margin: 12px 0 0; font-size: .8rem; color: rgba(255, 255, 255, .72); }
@media (max-width: 575px) {
  .sb-siralama { padding: 18px 14px; border-radius: 16px; }
  .sb-siralama h2 { font-size: 1.5rem; }
  .sb-siralama td, .sb-siralama th { padding: 8px; }
  .sb-siralama th:nth-child(5), .sb-siralama td:nth-child(5) { display: none; }
  .sb-odul { display: none; }
}
.sb-adform__kutu input[name="telefon"] { margin-top: 8px; }
.sb-adform__kvkk { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; text-align: left; font-size: .78rem; color: var(--sb-soluk); line-height: 1.4; cursor: pointer; }
.sb-adform__kvkk input { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--sb-kirmizi); }
.sb-adform__kvkk a { color: var(--sb-lacivert-2); font-weight: 700; }
.sb-tel { color: var(--sb-soluk); font-weight: 600; font-size: .75rem; }
.sb-adform { overflow-y: auto; }

/* ---- Bilgi sorusu (? balonu) ---- */
.sb-soru { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 12px; background: rgba(5, 9, 22, .74); backdrop-filter: blur(3px); overflow-y: auto; }
.sb-soru[hidden] { display: none; }
.sb-soru__kutu { width: min(520px, 100%); background: #fff; border-radius: 18px; padding: 16px 18px 12px; text-align: center; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .6); }
.sb-soru__etiket { display: inline-flex; gap: 6px; align-items: center; padding: 4px 12px; border-radius: 999px; background: #fff4d6; color: #8a5a00; font: 700 .78rem "Outfit", system-ui, sans-serif; }
.sb-soru__etiket i { color: #e1251b; }
.sb-soru__kutu h2 { margin: 10px 0 12px; font: 800 1.15rem/1.3 "Outfit", system-ui, sans-serif; color: var(--sb-lacivert); }
.sb-soru__secenek { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sb-soru__btn { min-height: 46px; padding: 8px 12px; border: 2px solid var(--sb-cizgi); border-radius: 12px; background: #f6f8fc; color: var(--sb-lacivert); font: 700 .98rem "Outfit", system-ui, sans-serif; text-align: left; cursor: pointer; transition: border-color .12s, background .12s; }
.sb-soru__btn b { color: var(--sb-kirmizi); margin-right: 4px; }
.sb-soru__btn:hover:not(:disabled), .sb-soru__btn:focus-visible { border-color: var(--sb-lacivert-2); background: #eef3ff; outline: none; }
.sb-soru__btn:disabled { cursor: default; opacity: .7; }
.sb-soru__btn.is-dogru { border-color: #1e9e4a; background: #e3f8ea; opacity: 1; }
.sb-soru__btn.is-yanlis { border-color: var(--sb-kirmizi); background: #fde8e7; opacity: 1; }
.sb-soru__sonuc { min-height: 1.3em; margin: 10px 0 0; font: 800 .95rem "Outfit", system-ui, sans-serif; color: var(--sb-lacivert); }

@media (max-width: 767px), (max-height: 520px) {
  .sb-soru { position: fixed; z-index: 4000; }
  .sb-soru__kutu h2 { font-size: 1rem; margin: 8px 0 10px; }
  .sb-soru__btn { min-height: 40px; font-size: .9rem; }
  .sb-adform { position: fixed; z-index: 4000; padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)); }   /* küçük ekranda oyun alanına sığmadığı için tam ekran */
}

/* ---- Telefon: yön pedi, yatay tam ekran, "yan çevirin" uyarısı ---- */
.sb-altbaslik { margin: -2px 0 10px; font: 800 1rem "Outfit", system-ui, sans-serif; letter-spacing: .32em; text-transform: uppercase; color: #b77a00; }
.sb-pad { position: relative; width: 150px; height: 66px; border-radius: 33px; border: 2px solid rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .08);
  display: grid; grid-template-columns: 1fr 1fr; touch-action: none; -webkit-tap-highlight-color: transparent; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .3); }
.sb-pad span { display: grid; place-items: center; color: #fff; font-size: 1.8rem; pointer-events: none; transition: background .06s; }
.sb-pad span:first-child { border-radius: 31px 0 0 31px; border-right: 1px solid rgba(255, 255, 255, .18); }
.sb-pad span:last-child { border-radius: 0 31px 31px 0; }
.sb-pad.is-sol span:first-child, .sb-pad.is-sag span:last-child { background: rgba(255, 255, 255, .28); }
.sb-kapat--dur { right: calc(max(10px, env(safe-area-inset-right)) + 50px); }
.sb-dondur { display: none; position: fixed; inset: 0; z-index: 6; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px;
  background: radial-gradient(circle at 50% 40%, #16357a, #050b1e 70%); color: #fff; text-align: center; }
.sb-dondur > i { font-size: 4.2rem; color: #ffd25e; animation: sbDondur 2.2s ease-in-out infinite; }
.sb-dondur b { font: 800 1.5rem "Outfit", system-ui, sans-serif; }
.sb-dondur span { max-width: 300px; color: rgba(255, 255, 255, .8); font-size: .95rem; }
.sb-dondur .sb-btn { margin-top: 8px; background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); }
@keyframes sbDondur { 0%, 20% { transform: rotate(-90deg); } 50%, 80% { transform: rotate(0); } 100% { transform: rotate(-90deg); } }
@media (pointer: coarse) and (orientation: portrait) {
  .sb-oyun.is-tam:not(.dikey-ok) .sb-dondur { display: flex; }
}
@media (orientation: landscape) {
  .sb-oyun:fullscreen .sb-dokun, .sb-oyun.is-tam .sb-dokun { align-items: flex-end; }
  .sb-oyun:fullscreen .sb-pad, .sb-oyun.is-tam .sb-pad { width: 172px; height: 76px; border-radius: 38px; background-color: rgba(6, 12, 28, .32); }
  .sb-oyun:fullscreen .sb-dokun button.is-a, .sb-oyun.is-tam .sb-dokun button.is-a { width: 82px; height: 82px; font-size: 1.6rem; }
  .sb-oyun:fullscreen .sb-dokun button.is-b, .sb-oyun.is-tam .sb-dokun button.is-b { width: 66px; height: 66px; margin-bottom: 30px; }
  .sb-oyun:fullscreen .sb-dokun__sag, .sb-oyun.is-tam .sb-dokun__sag { gap: 14px; }
}
@media (max-width: 380px) { .sb-pad { width: 132px; height: 58px; } }
.sb-oyun.is-tam, .sb-oyun:fullscreen { margin: 0 !important; }
.sb-oyun.is-tam .sb-kapat, .sb-oyun:fullscreen .sb-kapat { top: calc(max(10px, env(safe-area-inset-top)) + 34px); width: 38px; height: 38px; background: rgba(6, 12, 28, .45); }   /* üst bilgi çubuğunun altında, can göstergesini kapatmasın */