/* Ödül Avcısı — sayfa stilleri (oa- öneki, tema renkleri: altın #c9a36a, koyu #14110f) */

/* Banner: .sub-outer-wrapper'ın kendi arka planı yok (her sayfa kendi sınıfını verir);
   beyaz başlık görünsün diye uygulama sayfasıyla aynı koyu/altın degrade. */
.oa-banner {
    background-image:
        radial-gradient(58% 62% at 50% 34%, rgba(190, 134, 68, .30) 0%, rgba(190, 134, 68, 0) 68%),
        linear-gradient(158deg, #241c15 0%, #14110f 58%, #1e1710 100%);
    background-color: #14110f;
    height: 620px;
}
@media (max-width: 991px) { .oa-banner { height: 540px; } }
@media (max-width: 575px) {
    .oa-banner {
        height: 470px;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), 50% 100%, 0 calc(100% - 26px));
    }
}
.oa-alan { padding: 60px 0; }
.oa-kart { background: #fff; border-radius: 18px; box-shadow: 0 10px 40px rgba(20, 17, 15, .08); padding: 28px; }
.oa-baslik { font-weight: 700; margin-bottom: 18px; }
.oa-bos { padding: 18px; border-radius: 12px; background: #f7f1e8; text-align: center; margin: 0; }

.oa-kapi .nav-tabs .nav-link { color: #14110f; font-weight: 600; }
.oa-kapi .nav-tabs .nav-link.active { border-bottom: 3px solid #c9a36a; }
.oa-kapi .form-control { font-size: 16px; }              /* iOS yakınlaştırmasın */
.oa-kapi .invalid-feedback, .oa-hata { display: block; color: #b42318; font-size: 13px; min-height: 1em; }
.oa-bal { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.oa-dugme { background: #c9a36a; border: 0; color: #14110f; font-weight: 700; border-radius: 999px; padding: 12px 22px; }
.oa-dugme:hover { background: #b8925b; color: #14110f; }

.oa-oyun__ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.oa-oyun__cerceve { height: min(85vh, 860px); aspect-ratio: 9 / 16; max-width: 100%; margin: 0 auto; border-radius: 18px; overflow: hidden; background: #14110f; box-shadow: 0 20px 60px rgba(20, 17, 15, .25); }
.oa-oyun__cerceve iframe { width: 100%; height: 100%; border: 0; display: block; }
.oa-oyun__cerceve { position: relative; }
.oa-oyun__cerceve:fullscreen { height: 100vh; width: 100vw; max-width: none; aspect-ratio: auto; border-radius: 0; }
.oa-oyun__cerceve:-webkit-full-screen { height: 100vh; width: 100vw; max-width: none; aspect-ratio: auto; border-radius: 0; }
/* Yedek tam ekran (Fullscreen API olmayan/reddeden cihazlar, ör. iPhone Safari) */
/* Çift sınıf seçici bilerek: dosya sonundaki mobil kuralı (.oa-oyun__cerceve { height: calc(100svh - 140px) })
   aynı öncelikte olsaydı sonra geldiği için yüksekliği ezerdi (390x844'te 704px ölçüldü). */
.oa-oyun__cerceve.oa-oyun__cerceve--tam { position: fixed; inset: 0; z-index: 2147483000; width: 100vw; height: 100vh; height: 100dvh;
    max-width: none; aspect-ratio: auto; margin: 0; border-radius: 0; }
html.oa-tam-ekran-kilit, html.oa-tam-ekran-kilit body { overflow: hidden; overscroll-behavior: none; }

/* Tam ekran araçları (Ses + Çık) yalnız tam ekranda görünür; dokunmatik için en az 48px, çentikte güvenli alan */
.oa-oyun__araclar { display: none; position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right));
    z-index: 5; gap: 8px; }
.oa-oyun__arac { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; min-width: 88px; padding: 10px 16px; border: 2px solid rgba(255, 255, 255, .85); border-radius: 999px;
    background: rgba(20, 17, 15, .85); color: #fff; font-weight: 700; font-size: 16px; line-height: 1; cursor: pointer;
    touch-action: manipulation; box-shadow: 0 4px 16px rgba(0, 0, 0, .35); white-space: nowrap; }
.oa-oyun__arac:focus-visible { outline: 3px solid #c9a36a; outline-offset: 2px; }
.oa-oyun__cerceve:fullscreen .oa-oyun__araclar,
.oa-oyun__cerceve:-webkit-full-screen .oa-oyun__araclar,
.oa-oyun__cerceve--tam .oa-oyun__araclar { display: flex; }
@media (max-width: 360px) { .oa-oyun__arac { min-width: 0; padding: 10px 12px; font-size: 14px; } }

.oa-avatar { border-radius: 50%; object-fit: cover; flex: none; }
.oa-avatar--harf { display: inline-grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; }
.oa-skor th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #7a6a58; }
.oa-skor__sira { font-weight: 700; width: 48px; }
.oa-skor__podyum--1 .oa-skor__sira { color: #c9a36a; }
.oa-skor__podyum--2 .oa-skor__sira { color: #8e9aa6; }
.oa-skor__podyum--3 .oa-skor__sira { color: #b0764a; }
.oa-skor__ad { font-weight: 600; word-break: break-word; }
.oa-rozet { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #14110f; color: #c9a36a; font-size: 12px; font-weight: 700; }

.oa-odul { border-radius: 16px; padding: 22px; background: #fff; border-top: 4px solid #c9a36a; box-shadow: 0 8px 30px rgba(20, 17, 15, .07); }
.oa-odul--2 { border-top-color: #8e9aa6; }
.oa-odul--3 { border-top-color: #b0764a; }
.oa-odul__basamak { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #7a6a58; }
.oa-odul__gorsel { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; margin: 10px 0; }
.oa-odul__ad { font-size: 20px; font-weight: 700; margin: 6px 0; }
.oa-odul__sart { font-size: 14px; background: #f7f1e8; border-radius: 8px; padding: 8px 10px; }
.oa-odul__lider { display: flex; align-items: center; gap: 6px; font-size: 14px; }

@media (max-width: 575.98px) {
    .oa-alan { padding: 32px 0; }
    .oa-kart { padding: 18px; border-radius: 14px; }
    .oa-oyun__cerceve { height: calc(100svh - 140px); border-radius: 12px; }
}