/* 🎮 Oyun kimliği (oyun-kimlik.js) · önek okm- · Riven 2 Eki: "usta, elmas, zümrüt, altın… derecesi olsun".
   Derece renkleri --okm-a (koyu) → --okm-b (açık); kart her temada koyu "oyuncu kartı", liste temanın yüzeyinde. */
.okm-d-yok { --okm-a:#7f889a; --okm-b:#c3cad6; }
.okm-d-bronz { --okm-a:#9c5a26; --okm-b:#e6a96f; }
.okm-d-gumus { --okm-a:#6f7d90; --okm-b:#e3e9f1; }
.okm-d-altin { --okm-a:#c08300; --okm-b:#ffd95e; }
.okm-d-zumrut { --okm-a:#06805a; --okm-b:#52e3a4; }
.okm-d-elmas { --okm-a:#1a86c9; --okm-b:#aeefff; }
.okm-d-sampiyon { --okm-a:#5531c4; --okm-b:#bda6ff; }
.okm-d-efsane { --okm-a:#d23a1c; --okm-b:#ffc24d; }

.okm { display:flex; flex-direction:column; gap:14px; padding-bottom:24px; }
.okm-bas { margin:6px 0 -6px; font-size:12px; letter-spacing:.09em; font-weight:800; color:var(--muted); text-transform:uppercase; }

/* rozet (hap) + altıgen taş */
.okm-rozet { display:inline-flex; align-items:center; gap:5px; padding:3px 10px 3px 5px; border-radius:999px; background:linear-gradient(135deg, var(--okm-a), var(--okm-b));
  color:#fff; font-size:12px; font-weight:800; white-space:nowrap; text-shadow:0 1px 1px #0005; box-shadow:inset 0 1px 0 #fff6; }
.okm-rozet i { width:14px; height:16px; clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background:linear-gradient(160deg, #fff, #ffffff55); }
.okm-rozet.buyuk { font-size:14px; padding:5px 13px 5px 7px; }
.okm-rozet.buyuk i { width:18px; height:20px; }

/* oyuncu kartı */
.okm-kart { position:relative; overflow:hidden; color:#fff; border-radius:24px; padding:16px 16px 14px;
  background:radial-gradient(130% 110% at 0% 0%, color-mix(in srgb, var(--okm-b) 32%, transparent), transparent 62%), linear-gradient(140deg, #121a2e, #1d2844);
  box-shadow:0 10px 28px #0a0f1f40; }
.okm-kart::after { content:""; position:absolute; inset:0; border-radius:inherit; border:1.5px solid color-mix(in srgb, var(--okm-b) 45%, transparent); pointer-events:none; }
.okm-kart-ust { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.okm-kart-ust small { font-size:11px; letter-spacing:.14em; font-weight:800; color:#ffffffa8; }
.okm-kart-ust span { font-weight:800; font-size:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.okm-kart-orta { display:flex; align-items:center; gap:14px; margin:14px 0; }
.okm-amblem { flex:none; display:grid; place-items:center; width:74px; height:84px; clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background:linear-gradient(150deg, var(--okm-b), var(--okm-a)); color:#fff; }
.okm-amblem svg { width:34px; height:34px; filter:drop-shadow(0 2px 2px #0005); }
.okm-amblem.kucuk { width:44px; height:50px; } .okm-amblem.kucuk svg { width:22px; height:22px; }
.okm-genel { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.okm-genel small { color:#ffffffb8; font-size:12px; }
.okm-genel b { font-size:26px; line-height:1.1; background:linear-gradient(90deg, #fff, var(--okm-b)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.okm-bar { display:block; height:7px; border-radius:4px; overflow:hidden; background:#ffffff26; }
.okm-bar b { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--okm-a), var(--okm-b)); }
.okm-sayilar { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
.okm-sayilar div { background:#ffffff12; border-radius:14px; padding:9px 4px; text-align:center; min-width:0; }
.okm-sayilar b { display:block; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.okm-sayilar small { color:#ffffffa8; font-size:11px; }

/* oyun satırları */
.okm-liste { display:flex; flex-direction:column; background:var(--card, #fff); border-radius:22px; padding:4px 12px; box-shadow:var(--koci-golge, 0 2px 0 var(--line)); }
.okm-oyun { display:flex; align-items:center; gap:12px; width:100%; border:0; background:none; color:inherit; text-align:left; padding:12px 0; font:inherit; cursor:pointer; }
.okm-oyun + .okm-oyun { border-top:1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.okm-oik { flex:none; width:40px; height:40px; }
.okm-oad { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.okm-oad b { font-size:15px; }
.okm-oad small { color:var(--muted); font-size:12px; }
.okm-liste .okm-bar { height:5px; margin-top:2px; background:color-mix(in srgb, var(--line) 80%, transparent); }
.okm-kalan { font-size:11px !important; }
.okm-sag { flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.okm-sag small { color:var(--muted); font-size:11px; font-weight:700; }

/* boş, not, kurallar */
.okm-bos { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; padding:22px 16px; background:var(--card, #fff); border-radius:22px; }
.okm-bos small { color:var(--muted); }
.okm-bos .btn { margin-top:6px; }
.okm-not { margin:0; font-size:13px; color:var(--muted); }
.okm-link { border:0; background:none; color:var(--primary); font:inherit; font-weight:700; padding:0; cursor:pointer; }
.okm-kural { background:var(--card, #fff); border-radius:18px; padding:12px 14px; }
.okm-kural summary { font-weight:800; cursor:pointer; }
.okm-kural p { font-size:13px; margin:10px 0 0; }
.okm-tablo { display:grid; grid-template-columns:auto 1fr 1fr; gap:8px 12px; align-items:center; margin-top:12px; font-size:13px; }
.okm-tablo small { color:var(--muted); font-weight:700; }
.okm-kucuk { color:var(--muted); font-size:12px !important; }

/* sıralama */
.okm-sira-bas { display:flex; align-items:center; gap:12px; }
.okm-sira-bas b { display:block; font-size:18px; }
.okm-sira-bas small { color:var(--muted); }
.okm-sira { list-style:none; margin:0; padding:4px 12px; background:var(--card, #fff); border-radius:22px; }
.okm-sira li { display:flex; align-items:center; gap:10px; padding:10px 0; }
.okm-sira li + li { border-top:1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.okm-sira li.ben { background:color-mix(in srgb, var(--primary) 12%, transparent); margin:0 -12px; padding:10px 12px; border-radius:14px; }
.okm-no { flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-weight:800; background:color-mix(in srgb, var(--line) 80%, transparent); }
.okm-no.n1 { background:linear-gradient(135deg, #c08300, #ffd95e); color:#3a2700; }
.okm-no.n2 { background:linear-gradient(135deg, #6f7d90, #e3e9f1); color:#1d2533; }
.okm-no.n3 { background:linear-gradient(135deg, #9c5a26, #e6a96f); color:#2e1605; }
.okm-kim { flex:1; min-width:0; display:flex; flex-direction:column; }
.okm-kim b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.okm-kim b[data-profil] { cursor:pointer; }
.okm-kim small { color:var(--muted); font-size:12px; }

/* Oyna sekmesi kartı */
.okm-oyna-kart { display:flex; align-items:center; gap:12px; width:100%; border:0; text-align:left; font:inherit; color:#fff; cursor:pointer; border-radius:22px; padding:12px 14px;
  background:radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--okm-b) 30%, transparent), transparent 60%), linear-gradient(140deg, #121a2e, #1d2844); box-shadow:0 6px 18px #0a0f1f33; }
.okm-oyna-kart .okm-oad small { color:#ffffffb0; }
.okm-oyna-kart .okm-oad b { font-size:18px; color:var(--okm-b); }
.okm-ok { font-size:26px; color:#ffffff99; }

/* profil kartı bölümü (gaz.js) */
.okm-profil-ust { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.okm-profil-ust small { color:var(--muted); }
.okm-profil-oyun { display:flex; flex-direction:column; gap:6px; margin:10px 0; }
.okm-profil-oyun span { display:flex; align-items:center; gap:8px; }
.okm-profil-oyun .okm-oik { width:28px; height:28px; }
.okm-profil-oyun b { flex:1; min-width:0; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 🤝 arkadaş ekleme (Riven 2 Eki) */
.okm-ark { align-self:flex-start; display:inline-flex; align-items:center; gap:6px; }
.okm-ark svg { width:18px; height:18px; }
.okm-ekle { background:var(--card, #fff); border-radius:18px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
.okm-ekle-satir { display:flex; gap:8px; }
.okm-ekle-satir input { flex:1; min-width:0; padding:10px 12px; border-radius:12px; border:1.5px solid var(--line); background:transparent; color:inherit; font:inherit; }
.okm-ekle small { color:var(--muted); }
.okm-ekle-satir .btn { flex:none; width:auto; min-width:0; margin:0; padding:10px 18px; }
.okm-ark.btn { width:auto; margin:0; padding:10px 16px; }

/* 🔳 QR (logolu) */
.okm-qr-dug { display:flex; gap:16px; flex-wrap:wrap; }
.okm-qr-dug .okm-link { display:inline-flex; align-items:center; gap:6px; }
.okm-qr-dug svg { width:18px; height:18px; }
.okm-qr-ortu { position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:16px; background:#0a0f1fb3; }
.okm-qr-kart { position:relative; width:min(340px, 100%); background:var(--card, #fff); color:var(--ink); border-radius:24px; padding:20px 18px 16px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; }
.okm-qr-kart small { font-size:11px; letter-spacing:.14em; font-weight:800; color:var(--muted); }
.okm-qr-kart > b { font-size:20px; }
.okm-qr-kart p { margin:6px 0 0; font-size:13px; color:var(--muted); }
.okm-qr-kapat { position:absolute; top:10px; right:12px; border:0; background:none; font-size:18px; color:var(--muted); cursor:pointer; }
.okm-qr { position:relative; width:100%; max-width:280px; border-radius:16px; overflow:hidden; margin-top:8px; }
.okm-qr svg { display:block; width:100%; height:auto; }
.okm-qr-logo { position:absolute; left:50%; top:50%; width:22%; aspect-ratio:1; transform:translate(-50%, -50%); background:#fff; border-radius:18%; padding:3%; box-sizing:content-box; display:grid; place-items:center; }
.okm-qr-logo img { width:100%; height:100%; object-fit:contain; }
.okm-qr-video { width:100%; border-radius:16px; background:#000; margin-top:8px; }

/* 🤝 Arena maç sonu "Arkadaş ekle" şeridi (arena.js arArkadasOner) */
.ar-ark-serit { position:fixed; left:12px; right:12px; bottom:calc(env(safe-area-inset-bottom, 0px) + 88px); z-index:9700; max-width:460px; margin:0 auto; display:flex; flex-direction:column; gap:8px;
  background:#141b2ef2; color:#fff; border-radius:18px; padding:12px 40px 12px 14px; box-shadow:0 10px 28px #0006; max-width:520px; margin:0 auto; }
.ar-ark-serit > div { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ar-ark-serit span { display:flex; align-items:center; gap:8px; min-width:0; font-size:14px; }
.ar-ark-serit span b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ar-ark-serit svg { width:18px; height:18px; flex:none; }
.ar-ark-serit [data-ar-ark] { flex:none; border:0; border-radius:12px; padding:8px 12px; font:inherit; font-size:13px; font-weight:800; background:var(--primary); color:var(--koci-on-primary, #fff); cursor:pointer; }
.ar-ark-serit [data-ar-ark]:disabled { background:#ffffff26; color:#fff; }
.ar-ark-kapat { position:absolute; top:8px; right:10px; border:0; background:none; color:#ffffffb0; font-size:16px; cursor:pointer; }
.okm-qr-vizor { position:relative; width:100%; margin-top:8px; }
.okm-qr-vizor .okm-qr-video { display:block; margin:0; aspect-ratio:1; object-fit:cover; }
.okm-qr-vizor i { position:absolute; inset:14%; border:3px solid #ffffffd9; border-radius:18px; box-shadow:0 0 0 999px #0005; pointer-events:none; }
.ark-qr { margin:4px 0 10px; }