/* Okeyistan sosyal ekranları (Owner 2026-10-15, Soho uyarlaması). Kahvehane renkleri: koyu ceviz, altın, fildişi.
   Ölçüler telefon yatayına göre (vh). Sınıflar: .pg sayfa, .dl-ov pencere, .sp-ov yan panel. */
:root {
  --s-bg1: #3a1f0c; --s-bg2: #1a0c04; --s-card: #fff8ea; --s-card2: #f3e6c8; --s-ink: #3b2412; --s-ink2: #7a5a3c;
  --s-gold: #f2c14e; --s-gold2: #d99a1e; --s-line: rgba(122, 90, 60, .22); --s-green: #2e9e5b; --s-red: #e0453a; --s-blue: #2a64e6;
  --fz: clamp(11px, 3.4vh, 16px);
}

/* ---------- ana menü (Soho düzeni) ---------- */
.h-icons { gap: 1.2vh; }
.h-ic2 { position: relative; display: flex; flex-direction: column; align-items: center; gap: .1vh; border: 0; background: none; cursor: pointer; padding: 0 .4vh; color: #fff;
  font: 700 clamp(8.5px, 2.3vh, 13px) Fredoka, sans-serif; text-shadow: 0 .2vh .5vh rgba(0,0,0,.9); transition: transform .15s; }
.h-ic2 .e { font-size: clamp(20px, 7.6vh, 40px); line-height: 1; filter: drop-shadow(0 .5vh .6vh rgba(0,0,0,.55)); }
.h-ic2:hover { transform: translateY(-.4vh); }
.h-ic2:active { transform: scale(.92); }
[data-dot].dot::after, .h-me.dot::after { content: ""; position: absolute; top: 0; right: 10%; width: 1.9vh; height: 1.9vh; min-width: 9px; min-height: 9px; border-radius: 50%;
  background: #ff3b30; box-shadow: 0 0 0 2px #fff; animation: dotPop 1.6s ease-in-out infinite; z-index: 2; }
@keyframes dotPop { 50% { transform: scale(1.18); } }
.h-tier { display: inline-flex; align-items: center; gap: .6vh; align-self: flex-start; border: 0; cursor: pointer; padding: .4vh 1.4vh .4vh .8vh; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,215,106,.95), rgba(217,154,30,.95)); color: #4a2600; font: 700 clamp(9px, 2.5vh, 14px) Fredoka, sans-serif; box-shadow: 0 .3vh 0 #9b5a08; }
.h-tier span { font-size: 1.15em; }
.h-marquee { position: absolute; top: 20.5vh; left: 50%; transform: translateX(-50%); width: min(46vw, 120vh); height: 5.4vh; min-height: 22px; overflow: hidden; border-radius: 999px;
  background: linear-gradient(90deg, rgba(10,5,0,0), rgba(10,5,0,.6) 12%, rgba(10,5,0,.6) 88%, rgba(10,5,0,0)); display: flex; align-items: center; pointer-events: none; z-index: 3; }
.h-marquee > span { display: inline-block; white-space: nowrap; font: 700 clamp(9.5px, 2.7vh, 15px) Fredoka, sans-serif; color: #ffe08a; text-shadow: 0 1px 2px #000; padding-left: 100%; animation: mq 14s linear 1 forwards; }
.h-marquee > span::before { content: "📣 "; }
.h-marquee[hidden] { display: none; }
@keyframes mq { to { transform: translateX(-100%); } }
.h-chat { position: absolute; left: var(--pad-l); bottom: max(2.4vh, env(safe-area-inset-bottom)); width: min(31vw, 66vh); display: flex; align-items: center; gap: 1vh; padding: 1vh 1vh 1vh 1.6vh;
  border: 0; border-radius: 1.4vh; cursor: pointer; text-align: left; color: #fff; font: 500 clamp(10px, 2.7vh, 14.5px)/1.3 Fredoka, sans-serif;
  background: linear-gradient(90deg, rgba(10,6,20,.66), rgba(10,6,20,.3)); text-shadow: 0 1px 2px #000; }
.h-chat-lines { flex: 1; min-width: 0; }
.h-chat-lines p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-chat-lines b { color: #7ee8a8; } .h-chat-lines b.sys { color: #ffd76a; }
.h-chat-mic { flex: none; display: grid; place-items: center; width: 7vh; height: 7vh; min-width: 30px; min-height: 30px; border-radius: 50%; font-size: clamp(14px, 4vh, 22px);
  background: radial-gradient(circle at 35% 30%, #c58bff, #7a3ed0); box-shadow: 0 0 0 2px rgba(255,255,255,.5); }

.h-grid2 { position: absolute; right: var(--pad-r); top: 27vh; bottom: 18.5vh; width: var(--gw2, min(60vw, 150vh));
  display: grid; grid-template-columns: 1fr 1fr 1fr .9fr; grid-template-rows: repeat(4, 1fr); gap: 1.3vh; }
.m-auto { grid-column: 1 / 4; grid-row: 1 / 3; background: linear-gradient(100deg, #ff9a2e 0%, #ffb64a 45%, #ff8a1c 100%); box-shadow: 0 .7vh 0 #b9520c, 0 1.4vh 2.6vh rgba(0,0,0,.4); }
.m-auto .mc-title { left: 4.5%; top: 26%; font: 400 clamp(22px, 9.4vh, 58px)/1 Lobster, cursive; text-shadow: 0 .5vh 0 #b9520c, 0 .9vh 1.6vh rgba(0,0,0,.3); white-space: nowrap; }
.m-auto .mc-obj { right: 6%; top: 52%; transform: translateY(-50%); }
.m-auto .mt { width: 6.6vh; height: 9vh; font-size: clamp(12px, 4.8vh, 30px); }
.m-auto .mc-live { position: absolute; right: 3%; top: 7%; font-size: clamp(8.5px, 2.3vh, 13px); font-weight: 700; padding: .5vh 1.2vh; border-radius: 999px; background: rgba(0,0,0,.25); display: flex; align-items: center; gap: .7vh; }
.mc-modes { position: absolute; left: 4.5%; bottom: 9%; display: flex; gap: 1vh; }
.mc-modes i { font: 700 normal clamp(10px, 2.9vh, 16px) Fredoka, sans-serif; padding: .6vh 1.8vh; border-radius: 999px; background: rgba(120,40,0,.32); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); transition: background .15s, transform .15s; }
.mc-modes i:hover { transform: translateY(-.3vh); }
.mc-modes i.sel { background: #fff; color: #c2560b; box-shadow: 0 .4vh 0 #b9520c; }
.m-yar { grid-column: 1; grid-row: 3 / 5; background: linear-gradient(180deg, #3f8dff 0%, #2a64e6 60%, #1d47b8 100%); box-shadow: 0 .7vh 0 #13307e, 0 1.4vh 2.6vh rgba(0,0,0,.4); }
.m-masa2 { grid-column: 2; grid-row: 3 / 5; background: linear-gradient(180deg, #2fd39a 0%, #18a776 60%, #0d7a55 100%); box-shadow: 0 .7vh 0 #075238, 0 1.4vh 2.6vh rgba(0,0,0,.4); }
.m-seri { grid-column: 3; grid-row: 3 / 5; background: linear-gradient(180deg, #b86cff 0%, #8a46e8 60%, #6229b8 100%); box-shadow: 0 .7vh 0 #401a7d, 0 1.4vh 2.6vh rgba(0,0,0,.4); }
.m-yar .mc-title, .m-masa2 .mc-title, .m-seri .mc-title { font-size: clamp(13px, 4.6vh, 28px); left: 7%; top: 7%; right: 4%; line-height: 1.02; }
.mc-emo { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%); font-size: clamp(26px, 12vh, 70px); filter: drop-shadow(0 1vh 1.2vh rgba(0,0,0,.4)); transition: transform .3s; }
.mcard:hover .mc-emo { transform: translate(-50%, -54%) scale(1.06) rotate(-4deg); }
.scard2 { grid-column: 4; position: relative; min-width: 0; min-height: 0; overflow: hidden; border: 0; cursor: pointer; padding: 0; color: #fff; text-align: left; border-radius: 1.6vh;
  background: linear-gradient(160deg, #7cc0ff 0%, #4a8ef0 55%, #3470d8 100%); box-shadow: 0 .5vh 0 #234f9e, 0 1.2vh 2vh rgba(0,0,0,.35); transition: transform .18s, filter .18s; font: inherit; }
.scard2::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(120deg, rgba(255,255,255,.35), rgba(255,255,255,0) 40%); box-shadow: inset 0 0 0 .25vh rgba(255,255,255,.35); }
.scard2:hover { transform: translateY(-.5vh); filter: brightness(1.08); }
.scard2:active { transform: scale(.96); }
.scard2 .sc-t { position: absolute; left: 7%; top: 10%; z-index: 1; font-weight: 700; font-size: clamp(9px, 2.8vh, 16px); line-height: 1.05; text-shadow: 0 .2vh .5vh rgba(0,40,120,.6); max-width: 62%; }
.scard2 .sc-e { position: absolute; right: 5%; bottom: 4%; font-size: clamp(18px, 7.5vh, 42px); filter: drop-shadow(0 .5vh .6vh rgba(0,0,0,.35)); }
.s-lounge { background: linear-gradient(160deg, #c58bff 0%, #9a5cf0 55%, #6d34c8 100%); box-shadow: 0 .5vh 0 #4a2196, 0 1.2vh 2vh rgba(0,0,0,.35); }
.s-posts { background: linear-gradient(160deg, #ff9fb6 0%, #f06a8e 55%, #c8406a 100%); box-shadow: 0 .5vh 0 #8e2448, 0 1.2vh 2vh rgba(0,0,0,.35); }
.s-clan { background: linear-gradient(160deg, #6fd1ff 0%, #2fa3e0 55%, #1979b8 100%); box-shadow: 0 .5vh 0 #0f4f7e, 0 1.2vh 2vh rgba(0,0,0,.35); }
.s-mini { background: linear-gradient(160deg, #ffd36b 0%, #f0a91c 55%, #c47a08 100%); box-shadow: 0 .5vh 0 #8a5404, 0 1.2vh 2vh rgba(0,0,0,.35); }
.h-dock2 { position: absolute; right: var(--pad-r); bottom: max(1.6vh, env(safe-area-inset-bottom)); width: var(--gw2, min(60vw, 150vh)); display: flex; justify-content: space-around; }
.hd2 { position: relative; display: flex; flex-direction: column; align-items: center; gap: .1vh; border: 0; background: none; cursor: pointer; color: #fff; padding: 0 1vh;
  font: 700 clamp(9px, 2.6vh, 15px) Fredoka, sans-serif; text-shadow: 0 .2vh .6vh rgba(0,0,0,.95), 0 0 .3vh rgba(0,0,0,.8); transition: transform .15s; }
.hd2 .e { font-size: clamp(18px, 7vh, 38px); line-height: 1.05; filter: drop-shadow(0 .5vh .6vh rgba(0,0,0,.6)); }
.hd2:hover { transform: translateY(-.4vh); }
.hd2:active { transform: scale(.92); }
.h-rank { top: 25vh; max-height: 46vh; }
@media (max-aspect-ratio: 4/3) { .home { --gw2: 66vw; } .h-chat { width: 28vw; } .h-marquee { width: 60vw; } }
@media (max-aspect-ratio: 16/10) { .h-rank { display: none; } .home { --gw2: 64vw; } }
@media (max-height: 340px) { .h-ic2 small, .hd2 > span:last-child { display: none; } }

/* ---------- ortak: avatar + çerçeve ---------- */
.sav { position: relative; display: inline-block; flex: none; width: 5vh; height: 5vh; min-width: 24px; min-height: 24px; border-radius: 50%; background: #3a2010; vertical-align: middle; cursor: pointer;
  box-shadow: 0 0 0 2px #ffd76a; }
.sav img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.sav.xs { width: 4vh; height: 4vh; min-width: 20px; min-height: 20px; } .sav.sm { width: 6vh; height: 6vh; min-width: 28px; min-height: 28px; }
.sav.md { width: 8.4vh; height: 8.4vh; min-width: 36px; min-height: 36px; } .sav.mid { width: 10vh; height: 10vh; min-width: 40px; min-height: 40px; }
.sav.xl { width: 20vh; height: 20vh; min-width: 70px; min-height: 70px; border-radius: 1.8vh; } .sav.xl img { border-radius: 1.6vh; }
.sav .on { position: absolute; right: 2%; bottom: 2%; width: 22%; height: 22%; border-radius: 50%; background: #3ddc6a; box-shadow: 0 0 0 2px #fff; }
.sav.emb { display: inline-grid; place-items: center; font-size: 4.6vh; background: linear-gradient(180deg, #ffe3a0, #d99a1e); }
/* Çerçeveler (2026-10-24): Higgsfield süslü halka resmi avatarın üstüne biner. --fo = resim kenarı / delik yarıçapı (tools/gorsel_isle_20261024.py ölçer) */
.fr { position: relative; overflow: visible !important; box-shadow: none !important; }
.fr img { border-radius: 50%; }
.fr::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc(100% * var(--fo)); height: calc(100% * var(--fo)); transform: translate(-50%, -50%);
  background: var(--fi) center / contain no-repeat; pointer-events: none; z-index: 2; }
.sav.xl.fr::before { width: calc(100% * var(--fo) * .82); height: calc(100% * var(--fo) * .82); }
.cerceve-altin { --fi: url(img/cer/altin.webp); --fo: 1.699; }
.cerceve-bakir { --fi: url(img/cer/bakir.webp); --fo: 1.241; }
.cerceve-gumus { --fi: url(img/cer/gumus.webp); --fo: 1.504; }
.cerceve-lale { --fi: url(img/cer/lale.webp); --fo: 1.583; }
.cerceve-nazar { --fi: url(img/cer/nazar.webp); --fo: 2.085; }
.cerceve-sultan { --fi: url(img/cer/sultan.webp); --fo: 2.358; }

.ib { display: inline-grid; place-items: center; min-width: 32px; min-height: 32px; padding: 0 6px; border: 0; border-radius: 10px; cursor: pointer; font-size: 17px; background: rgba(122,90,60,.12); color: inherit; position: relative; }
.ib:hover { background: rgba(122,90,60,.24); }
.ib:disabled { opacity: .45; cursor: default; }
.ib.big { min-width: 42px; min-height: 42px; font-size: 21px; border-radius: 12px; }
.ib.plus { background: linear-gradient(180deg, #67e070, #22a03c); color: #fff; font-weight: 700; }
.ib .n, .badge-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #ff3b30; color: #fff; font: 700 11px Fredoka, sans-serif; font-style: normal; }
.ib .n { position: absolute; top: -4px; right: -4px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px; background: rgba(0,0,0,.35); color: #ffe08a; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(255,215,106,.4); }
.tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font: 700 12px Fredoka, sans-serif; background: rgba(122,90,60,.15); color: var(--s-ink2); white-space: nowrap; }
.tag.ok { background: rgba(46,158,91,.15); color: #217a45; }
.bar { position: relative; display: block; height: 16px; border-radius: 999px; background: rgba(60,30,10,.18); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.25); }
.bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #7bd65a, #2e9e5b); border-radius: inherit; }
.bar em { position: relative; display: block; text-align: center; font: 700 11px/16px Fredoka, sans-serif; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.7); font-style: normal; }
.empty { padding: 26px 12px; text-align: center; color: var(--s-ink2); font-size: 15px; line-height: 1.6; }
.empty .btn { margin-top: 10px; }
.loading { padding: 30px; text-align: center; color: var(--s-ink2); }
.fine.center { text-align: center; }
.linkbtn { border: 0; background: none; cursor: pointer; color: #1d5ad8; font: 700 14px Fredoka, sans-serif; text-decoration: underline; }
.row-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.row-btns .btn { flex: 1; }
.sendrow { display: flex; gap: 6px; align-items: stretch; }
.sendrow input, .sendrow select, .ask-in, .lbl + .sendrow input { flex: 1; min-width: 0; font: 500 15px Fredoka, sans-serif; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--s-line); background: #fffdf6; color: var(--s-ink); }
.ask-in { width: 100%; margin: 6px 0; resize: vertical; }
.modal .ask-in { background: rgba(255,255,255,.95); }
.lbl { display: block; margin: 8px 0 4px; font: 700 14px Fredoka, sans-serif; color: var(--s-ink2); }
#modal { z-index: 300; }
.toasts { z-index: 400; }

/* ---------- sayfa (tam ekran) ---------- */
.spg { position: fixed; inset: 0; z-index: 120; display: grid; grid-template-columns: clamp(130px, 22vw, 240px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "top top" "nav body"; font-family: Fredoka, system-ui, sans-serif; color: #fff; opacity: 0; transform: translateX(3vw); transition: opacity .18s, transform .18s;
  background: radial-gradient(120% 90% at 70% 0%, #5a3216 0%, var(--s-bg1) 35%, var(--s-bg2) 100%); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.spg::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07; background: repeating-linear-gradient(115deg, #fff 0 1px, transparent 1px 14px); }
.spg.in { opacity: 1; transform: none; }
.spg:not(:has(.pg-nav)) { grid-template-columns: 1fr; grid-template-areas: "top" "body"; }
.pg-top { grid-area: top; display: flex; align-items: center; gap: 12px; padding: max(6px, env(safe-area-inset-top)) 14px 6px 18px; min-height: 11vh;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0)); position: relative; z-index: 2; }
.pg-title { display: flex; align-items: center; gap: 10px; font-size: clamp(18px, 6vh, 30px); }
.pg-title b { font-weight: 700; color: #ffe7a8; text-shadow: 0 .3vh 0 #7a3f0c, 0 .6vh 1.2vh rgba(0,0,0,.5); }
.pg-ic { font-size: 1.1em; filter: drop-shadow(0 .3vh .4vh rgba(0,0,0,.5)); }
.pg-extra { flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.pg-back { flex: none; width: clamp(40px, 11vh, 56px); height: clamp(40px, 11vh, 56px); border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 30%, #ffe08a, #d99a1e); box-shadow: 0 .4vh 0 #8a5404, 0 .8vh 1.4vh rgba(0,0,0,.4); }
.pg-back svg { width: 55%; height: 55%; fill: none; stroke: #4a2600; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pg-nav { grid-area: nav; display: flex; flex-direction: column; gap: .8vh; padding: 1vh 0 2vh 14px; overflow-y: auto; position: relative; z-index: 1; }
.pg-nav button { position: relative; text-align: left; border: 0; cursor: pointer; padding: 1.6vh 14px; border-radius: 14px 0 0 14px; color: #f3e0c0; background: none;
  font: 700 clamp(12px, 3.6vh, 18px)/1.15 Fredoka, sans-serif; transition: background .15s; }
.pg-nav button small { font-weight: 500; opacity: .8; }
.pg-nav button:hover { background: rgba(255,255,255,.06); }
.pg-nav button.sel { color: #4a2600; background: linear-gradient(90deg, #ffe08a, #f2b632); box-shadow: 0 .4vh 1vh rgba(0,0,0,.35); }
.pg-nav button.dot::after { content: ""; position: absolute; top: 8px; right: 10px; width: 10px; height: 10px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 0 2px #fff; }
.pg-body { grid-area: body; min-width: 0; min-height: 0; overflow-y: auto; padding: 0 16px max(14px, env(safe-area-inset-bottom)) 12px; position: relative; z-index: 1; color: var(--s-ink); }
.pg-body > .empty, .pg-body > .loading { color: #f3e0c0; }
.pg-likes { position: absolute; left: 18px; bottom: max(12px, env(safe-area-inset-bottom)); width: calc(clamp(130px, 22vw, 240px) - 30px); text-align: center; padding: 8px 0; border-radius: 999px; z-index: 2;
  background: linear-gradient(180deg, #ffe08a, #f2b632); color: #4a2600; font: 700 16px Fredoka, sans-serif; box-shadow: 0 .4vh 0 #8a5404; }
.sub { margin: 12px 0 6px; color: #ffe08a; font: 700 15px Fredoka, sans-serif; }

/* ---------- pencere (ortada) ---------- */
.dl-ov { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: max(8px, env(safe-area-inset-top)) 14px 8px; background: rgba(15,6,0,.6); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .18s; font-family: Fredoka, system-ui, sans-serif; }
.dl-ov.in { opacity: 1; }
.dl { position: relative; width: min(980px, 100%); height: min(560px, calc(100vh - 16px)); display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; color: var(--s-ink);
  background: linear-gradient(180deg, var(--s-card), var(--s-card2)); box-shadow: 0 0 0 3px #e9b04a, 0 0 0 6px #6b3a12, 0 2vh 5vh rgba(0,0,0,.6); transform: scale(.96); transition: transform .18s; }
.dl-ov.in .dl { transform: none; }
.dl-tabs { display: flex; gap: 4px; padding: 6px 56px 0 8px; background: linear-gradient(180deg, #7a4212, #5a2f0c); flex: none; overflow-x: auto; }
.dl-tabs button { border: 0; cursor: pointer; padding: 1.6vh 2.4vh; border-radius: 12px 12px 0 0; background: rgba(255,255,255,.12); color: #f6e2bf; font: 700 clamp(12px, 3.5vh, 17px) Fredoka, sans-serif; white-space: nowrap; }
.dl-tabs button.sel { background: linear-gradient(180deg, #ffe08a, #f2b632); color: #4a2600; }
.dl-head { flex: none; padding: 1.6vh 56px 1.4vh 18px; background: linear-gradient(180deg, #7a4212, #5a2f0c); color: #ffe7a8; font-size: clamp(15px, 4.6vh, 22px); }
.dl-x { position: absolute; top: 6px; right: 8px; z-index: 3; width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer; font: 700 26px/1 Fredoka, sans-serif; color: #fff;
  background: radial-gradient(circle at 40% 30%, #ff8a7a, #d23a2a); box-shadow: 0 0 0 2px #fff, 0 .4vh 1vh rgba(0,0,0,.4); }
.dl-wrap { flex: 1; min-height: 0; display: flex; }
.dl-side { flex: none; width: clamp(110px, 20vw, 200px); display: flex; flex-direction: column; gap: 6px; padding: 10px 0 10px 10px; background: rgba(122,90,60,.1); overflow-y: auto; }
.dl-side button { text-align: left; border: 0; cursor: pointer; padding: 1.8vh 12px; border-radius: 12px 0 0 12px; background: none; color: var(--s-ink2); font: 700 clamp(12px, 3.5vh, 17px) Fredoka, sans-serif; }
.dl-side button.sel { background: linear-gradient(90deg, #ffe08a, #f2b632); color: #4a2600; }
.dl-body { flex: 1; min-width: 0; overflow-y: auto; padding: 12px 16px; position: relative; }

/* ---------- yan panel ---------- */
.sp-ov { position: fixed; inset: 0; z-index: 130; background: rgba(10,5,0,.35); opacity: 0; transition: opacity .18s; font-family: Fredoka, system-ui, sans-serif; }
.sp-ov.in { opacity: 1; }
.sp { position: absolute; top: 0; bottom: 0; width: min(560px, 50vw); display: flex; flex-direction: column; color: var(--s-ink); transition: transform .2s cubic-bezier(.2,.8,.2,1);
  background: linear-gradient(180deg, #fffaf0, #f2e3c2); box-shadow: 0 0 4vh rgba(0,0,0,.6); }
.sp-left .sp { left: 0; transform: translateX(-100%); padding-left: env(safe-area-inset-left); }
.sp-right .sp { right: 0; transform: translateX(100%); padding-right: env(safe-area-inset-right); }
.sp-ov.in .sp { transform: none; }
.sp-x { display: none; position: absolute; top: max(6px, env(safe-area-inset-top)); right: max(6px, env(safe-area-inset-right)); z-index: 5; width: 40px; height: 40px;
  align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(20,10,0,.72); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.sp-tabs { flex: none; display: flex; gap: 2px; padding: 6px 6px 0; background: linear-gradient(180deg, #7a4212, #5a2f0c); overflow-x: auto; }
.sp-tabs button { flex: 1; border: 0; cursor: pointer; padding: 1.5vh 6px; border-radius: 10px 10px 0 0; background: rgba(255,255,255,.1); color: #f6e2bf; font: 700 clamp(11px, 3.2vh, 15px) Fredoka, sans-serif; white-space: nowrap; }
.sp-tabs button.sel { background: #fffaf0; color: #7a3f0c; }
.sp-list { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; }
.sp-foot { flex: none; display: flex; justify-content: flex-end; gap: 10px; padding: 8px 12px max(8px, env(safe-area-inset-bottom)); border-top: 1px solid var(--s-line); }

/* ---------- profil ---------- */
.pf-id { display: flex; align-items: center; gap: 6px; color: var(--s-ink2); font-size: 15px; }
.pf-row { display: flex; gap: 2.4vh; align-items: flex-start; margin-top: 8px; }
.pf-av { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pf-fields { flex: 1; display: flex; flex-direction: column; gap: 1vh; min-width: 0; }
.pf-f { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: rgba(122,90,60,.1); min-height: 38px; }
.pf-f b { flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-f .ic { font-size: 18px; }
.pf-f.tier b { flex: none; }
.pf-f.tier small { color: var(--s-ink2); }
.pf-stats { display: flex; gap: 8px; margin: 12px 0; }
.pf-stats div { flex: 1; text-align: center; padding: 8px 4px; border-radius: 12px; background: rgba(122,90,60,.08); }
.pf-stats small { display: block; color: var(--s-ink2); font-size: 12px; }
.pf-stats b { font-size: 20px; color: #2a4fa8; }
.pf-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pf-moments { position: relative; border-radius: 14px; padding: 10px; background: rgba(122,90,60,.08); }
.pf-mt { font-weight: 700; color: #7a3f0c; margin-bottom: 6px; }
.pf-ml { display: flex; gap: 8px; overflow-x: auto; }
.pf-post { flex: 0 0 min(260px, 70%); padding: 8px 10px; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.pf-post p { margin: 0 0 4px; font-size: 14px; color: var(--s-ink); }
.pf-post small { color: var(--s-ink2); }
.pf-empty { flex: 1; text-align: center; padding: 16px; font: 400 26px Lobster, cursive; color: rgba(122,90,60,.35); }
.pf-empty small { font: 500 14px Fredoka, sans-serif; color: var(--s-ink2); }
.pf-moments .linkbtn { position: absolute; right: 12px; bottom: 8px; }
.ach { display: flex; flex-direction: column; gap: 8px; }
.ach-i { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(122,90,60,.08); }
.ach-i.ready { background: rgba(242,193,78,.25); box-shadow: inset 0 0 0 2px #f2c14e; }
.ach-i.done { opacity: .8; }
.ach-m { font-size: 28px; }
.ach-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ach-t small { color: var(--s-ink2); }
.wall-sum { color: var(--s-ink2); margin-bottom: 8px; }
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.wall-i { display: flex; flex-direction: column; align-items: center; padding: 8px; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.wall-i img { width: 54px; height: 54px; object-fit: contain; }
.wall-i small { color: var(--s-ink2); text-align: center; font-size: 12px; }
.fab { position: sticky; bottom: 0; float: right; margin-top: 10px; }
.cities { display: flex; flex-wrap: wrap; gap: 6px; max-height: 50vh; overflow-y: auto; }
.inv { text-align: center; } .inv-av { width: 72px; height: 72px; margin: 0 auto 6px; border-radius: 50%; overflow: hidden; }
.inv-av img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- gönderiler ---------- */
.feed { display: flex; flex-direction: column; gap: 10px; }
.post { padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 1px 4px rgba(60,30,10,.15); }
.post-h { display: flex; align-items: center; gap: 10px; }
.post-h > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.post-h b { color: #2a6e3a; cursor: pointer; }
.post-h small { color: var(--s-ink2); }
.post-topic { margin-top: 6px; color: #b0388e; font-weight: 700; }
.post-t { margin: 6px 0; font-size: 15px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.post-f { display: flex; align-items: center; gap: 10px; color: var(--s-ink2); }
.post-f small { flex: 1; }
.pf-b { border: 0; background: rgba(122,90,60,.08); cursor: pointer; padding: 5px 12px; border-radius: 999px; font: 600 14px Fredoka, sans-serif; color: var(--s-ink2); }
.pf-b.on { background: rgba(224,69,58,.15); color: #c0281c; }
.post-q { padding: 8px 10px; border-radius: 10px; background: rgba(122,90,60,.1); margin-bottom: 8px; }
.coms { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.com { display: flex; gap: 8px; align-items: flex-start; }
.com small { display: block; color: var(--s-ink2); }
.dl-com .dl, .dl-dm .dl { width: min(620px, 100%); }

/* ---------- arkadaşlar ---------- */
.frow { display: flex; align-items: center; gap: 12px; padding: 1.4vh 14px; margin-bottom: 8px; border-radius: 16px; color: var(--s-ink);
  background: linear-gradient(90deg, #e9f3ff, #d4e6ff); box-shadow: 0 .4vh 0 rgba(30,60,120,.25); }
.frow.on { background: linear-gradient(90deg, #fff2cf, #ffe2a6); box-shadow: 0 .4vh 0 rgba(150,90,10,.3); }
.fr-t { flex: 1; min-width: 0; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.fr-t b { font-size: clamp(14px, 4vh, 19px); color: #b5520c; }
.fr-t small { color: #777; } .fr-t small.g { color: #1f9a4c; font-weight: 700; }
.fr-t span { flex-basis: 100%; color: var(--s-ink2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-a { display: flex; align-items: center; gap: 6px; }
.fr-a .ib { font-size: 20px; min-width: 40px; min-height: 40px; background: rgba(255,255,255,.6); }
.fr-a .ib.msg { background: linear-gradient(180deg, #67e070, #22a03c); }
.addf { display: flex; flex-direction: column; gap: 12px; max-width: 560px; color: #f3e0c0; }
.addf p { margin: 0; }
.addf .frow { color: var(--s-ink); }

/* ---------- görevler ---------- */
.tk { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 14px; min-height: 100%; }
.tk-left { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; }
.polaroid { align-self: center; width: min(100%, 44vh); padding: 1.2vh 1.2vh 4vh; background: #fff; border-radius: 4px; box-shadow: 0 1vh 2vh rgba(0,0,0,.5); transform: rotate(-4deg); position: relative; }
.polaroid img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.polaroid span { position: absolute; right: 12px; bottom: .6vh; font: 400 clamp(14px, 4vh, 22px) Lobster, cursive; color: #8a5a2c; }
.tk-day { padding: 10px 12px; border-radius: 14px; background: rgba(255,250,235,.95); }
.tk-dt { font-weight: 700; color: #2a4fa8; margin-bottom: 6px; }
.tk-bar { position: relative; height: 54px; display: flex; justify-content: space-around; align-items: center; }
.tk-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 8px; margin-top: -4px; border-radius: 4px; background: rgba(60,30,10,.18); }
.tk-bar > i { position: absolute; left: 0; top: 50%; height: 8px; margin-top: -4px; border-radius: 4px; background: linear-gradient(90deg, #ffd36b, #f08a1c); }
.chest { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; border: 0; background: none; cursor: pointer; font: 700 12px Fredoka, sans-serif; color: #7a3f0c; }
.chest span { font-size: 28px; line-height: 1; filter: grayscale(.4); }
.chest.ready span { filter: none; animation: giftWiggle 1.8s ease-in-out infinite; }
.chest.open span { filter: grayscale(1); opacity: .6; }
.tk-right { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.tk-week { display: flex; align-items: center; gap: 12px; justify-content: flex-end; color: #ffe7a8; font-weight: 700; }
.tk-week span { flex: 1; }
.tk-week .chest { color: #ffe7a8; }
.tk-list { display: flex; flex-direction: column; gap: 6px; }
.task { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,250,235,.95); }
.task > div { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.task b { flex-basis: 100%; font-size: 15px; }
.task .rw { font-weight: 700; color: #b5520c; } .task .rw.a { color: #2a64e6; }
.task.done { opacity: .65; }
.tk-reset { color: #f3e0c0; font-size: 13px; text-align: right; }

/* ---------- haftalık giriş ---------- */
.login-ov .lg { position: relative; width: min(980px, 100%); padding: 2vh 2vh 1.6vh; border-radius: 20px; background: radial-gradient(120% 120% at 50% 0%, #7a3fd0, #3a1680 60%, #22095a);
  box-shadow: 0 0 0 3px #ffd76a, 0 2vh 5vh rgba(0,0,0,.6); color: #fff; transform: scale(.95); transition: transform .2s; }
.login-ov.in .lg { transform: none; }
.lg-t { margin: 0 0 1.6vh; text-align: center; font: 400 clamp(22px, 8vh, 44px)/1 Lobster, cursive; color: #fff; text-shadow: 0 .4vh 0 #b0388e, 0 0 2vh rgba(255,150,255,.6); }
.lg-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1vh; }
.lg-d { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: .6vh; min-height: 34vh; padding: 1vh .6vh 1.4vh; border: 0; border-radius: 12px;
  background: linear-gradient(180deg, #e9e2ff, #b9a6ff); color: #2a1660; font-family: Fredoka, sans-serif; cursor: default; overflow: hidden; }
.lg-d.big { background: linear-gradient(180deg, #fff3b8, #ffc83d); }
.lg-d.today { cursor: pointer; box-shadow: 0 0 0 3px #fff, 0 0 2.4vh #ffe36b; animation: lgPulse 1.4s ease-in-out infinite; }
@keyframes lgPulse { 50% { transform: translateY(-.6vh); } }
.lg-n { font: 700 clamp(14px, 5vh, 26px) Fredoka, sans-serif; color: #fff; text-shadow: 0 .2vh 0 #5a3ab0; }
.lg-n small { font-size: .5em; }
.lg-art { font-size: clamp(22px, 9vh, 48px); filter: drop-shadow(0 .6vh .8vh rgba(0,0,0,.3)); }
.lg-d b { font-size: clamp(10px, 2.8vh, 15px); text-align: center; line-height: 1.15; }
.lg-d.done { filter: saturate(.55); }
.stamp { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-18deg); padding: .4vh 1.2vh; border: 3px solid #7a5ac8; border-radius: 10px; color: #7a5ac8;
  font: 700 clamp(12px, 3.4vh, 18px) Fredoka, sans-serif; background: rgba(255,255,255,.7); }
.lg-go { padding: .4vh 1.2vh; border-radius: 999px; background: linear-gradient(180deg, #67e070, #22a03c); color: #fff; font-weight: 700; font-size: clamp(10px, 2.8vh, 14px); }
.lg-tm { color: #1f9a4c; font-weight: 700; font-size: clamp(9px, 2.4vh, 13px); }
.lg-dots { display: flex; justify-content: space-around; margin: 1.4vh 4%; }
.lg-dots i { width: 2.4vh; height: 2.4vh; border-radius: 50%; background: rgba(255,255,255,.3); }
.lg-dots i.on { background: #7bd65a; box-shadow: 0 0 1vh #7bd65a; }
.login-ov .fine { color: #e6dcff; text-align: center; margin: 0; }
.login-ov .dl-x { top: -10px; right: -10px; }
.lg-days.small .lg-d { min-height: 22vh; }

/* ---------- posta ---------- */
.mails { display: flex; flex-direction: column; gap: 8px; }
.mail { display: flex; align-items: center; gap: 12px; padding: 1.2vh 14px; border-radius: 12px; cursor: pointer; background: linear-gradient(90deg, #fffdf6, #fff3d9);
  border-left: 6px solid; border-image: repeating-linear-gradient(180deg, #e8344a 0 8px, #fff 8px 12px, #3a7bd5 12px 20px, #fff 20px 24px) 6; }
.mail.read { opacity: .75; }
.mail-ic { font-size: 30px; }
.mail > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mail > div span { color: var(--s-ink2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail em { color: #b5520c; font-style: normal; font-weight: 700; }
.mail small { color: var(--s-ink2); white-space: nowrap; }
.mail-foot { position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 0 0; background: linear-gradient(180deg, rgba(26,12,4,0), rgba(26,12,4,.95) 30%); }
.mail-foot p { flex: 1; margin: 0; font-size: 12.5px; color: #f3e0c0; }

/* ---------- çanta + mağaza ---------- */
.bag { display: flex; gap: 12px; height: 100%; }
.bag-grid { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; align-content: start; }
.bag-i { position: relative; aspect-ratio: 1; border: 0; border-radius: 12px; cursor: pointer; background: linear-gradient(180deg, #e6f1ff, #c4dbff); display: grid; place-items: center; box-shadow: 0 .3vh 0 rgba(30,60,120,.3); }
.bag-i.sel { box-shadow: 0 0 0 3px #f2b632, 0 .3vh 0 rgba(30,60,120,.3); }
.bag-i > b { position: absolute; right: 6px; bottom: 4px; font: 700 15px Fredoka, sans-serif; color: #fff; text-shadow: 0 0 3px #000, 0 0 2px #000; }
.bag-i .tk { position: absolute; left: 6px; top: 4px; font-style: normal; color: #1f9a4c; font-weight: 700; }
.bag-det { flex: none; width: min(36%, 260px); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: rgba(122,90,60,.08); text-align: center; }
.bag-big { transform: scale(1.4); margin: 10px 0; }
.bag-name { font-weight: 700; padding: 4px 16px; border-radius: 999px; background: linear-gradient(90deg, #8ab4ff, #5a8ef0); color: #fff; }
.bag-desc { color: var(--s-ink2); font-size: 14px; }
.ia { display: inline-grid; place-items: center; }
.ia-e { font-size: clamp(26px, 9vh, 48px); filter: drop-shadow(0 .4vh .5vh rgba(0,0,0,.3)); }
.ia-rack { width: 74px; height: 30px; border-radius: 6px; display: flex; gap: 3px; align-items: center; justify-content: center; box-shadow: inset 0 -4px 0 rgba(0,0,0,.25), 0 2px 4px rgba(0,0,0,.4); }
.ia-rack i { width: 14px; height: 20px; border-radius: 3px; background: #fffdf3; box-shadow: 0 1px 0 #b8a77c; }
.ia-rack.r-ceviz { background: linear-gradient(180deg, #8a5a2b, #4a2a10); } .ia-rack.r-krem { background: linear-gradient(180deg, #f4e7c4, #c9b27c); }
.ia-rack.r-mese { background: linear-gradient(180deg, #d0a060, #9a6a2a); } .ia-rack.r-abanoz { background: linear-gradient(180deg, #3a2a20, #120a06); box-shadow: inset 0 0 0 2px #c9a24a; }
.ia-rack.r-sedef { background: linear-gradient(135deg, #5a3a20, #3a2010); box-shadow: inset 0 0 0 2px #e8f0ff, inset 0 0 8px #c8e0ff; }
.ia-rack.r-altin { background: linear-gradient(180deg, #ffe27a, #b07a0e); }
.ia-felt { width: 64px; height: 46px; border-radius: 8px; box-shadow: inset 0 0 12px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.4); }
.ia-felt.cuha-yesil { background: #13704f; } .ia-felt.cuha-turkuaz { background: #1e8f95; } .ia-felt.cuha-lacivert { background: #1d3a7a; } .ia-felt.cuha-bordo { background: #7a1c2a; } .ia-felt.cuha-mor { background: #4a2a7a; }
.stk-prev { margin-top: 6px; font-size: 20px; letter-spacing: 2px; }
.shop-head { color: #ffe7a8; font-weight: 700; margin: 4px 0 10px; }
.ways { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.way { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; border: 0; border-radius: 14px; cursor: pointer; text-align: left; position: relative;
  background: linear-gradient(180deg, #fffaf0, #f3e2bc); color: var(--s-ink); box-shadow: 0 .5vh 0 #b98a3c; font-family: Fredoka, sans-serif; }
.way .e { font-size: 30px; } .way b { font-size: 16px; } .way small { color: var(--s-ink2); }
.way .go { position: absolute; right: 12px; top: 12px; color: #2e9e5b; font-weight: 700; }
.shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.prod { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border-radius: 16px; background: linear-gradient(180deg, #e9f3ff, #c9dcfb);
  box-shadow: 0 0 0 2px #8ad0ff, 0 .6vh 0 rgba(30,60,120,.35); text-align: center; }
.prod-t { width: 100%; padding: 4px 0; border-radius: 999px; background: linear-gradient(180deg, #bfe0ff, #8ec4ff); color: #1d47b8; font-weight: 700; }
.prod-art { min-height: 70px; display: grid; place-items: center; }
.prod-d { flex: 1; color: #3a4a6a; font-size: 13px; }
.prod .buy { width: 100%; }

/* ---------- sıralama paneli ---------- */
.sp-rank .sp { flex-direction: row; width: min(640px, 58vw); background: none; }
.rk-nav { flex: none; width: clamp(84px, 14vw, 130px); display: flex; flex-direction: column; background: linear-gradient(180deg, #3a7bd5, #2a55b0); overflow-y: auto; }
.rk-nav button { flex: 1; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; cursor: pointer; color: #fff; background: none;
  border-bottom: 1px solid rgba(255,255,255,.15); font: 700 clamp(9.5px, 2.7vh, 13px)/1.1 Fredoka, sans-serif; text-align: center; padding: 4px; }
.rk-nav button span { font-size: clamp(16px, 5vh, 26px); }
.rk-nav button.sel { background: linear-gradient(180deg, #ffd36b, #f0a91c); color: #4a2600; }
.rk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: linear-gradient(180deg, #fffaf0, #f2e3c2); }
.podium { flex: none; display: flex; justify-content: center; align-items: flex-end; gap: 10px; padding: 12px 10px 8px; background: linear-gradient(180deg, #4a8ef0, #8ac4ff); }
.pd { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 31%; cursor: pointer; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.pd.p1 { transform: translateY(-1.5vh); }
.pd .sav.md { width: 11vh; height: 11vh; box-shadow: 0 0 0 .5vh #ffd76a, 0 0 0 .9vh #c0681c; }
.pd.p2 .sav.md { box-shadow: 0 0 0 .5vh #f0f0f0, 0 0 0 .9vh #8a8a8a; } .pd.p3 .sav.md { box-shadow: 0 0 0 .5vh #f6be86, 0 0 0 .9vh #9a5520; }
.pd-n { position: absolute; top: -6px; left: 14%; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #ffd76a; color: #4a2600; font-weight: 700; }
.pd b { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.pd small { font-size: 12px; }
.rk-list { flex: 1; min-height: 0; overflow-y: auto; }
.rk-row, .rk-me { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--s-line); cursor: pointer; }
.rk-row b, .rk-me b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #b5520c; }
.rk-i { width: 34px; text-align: center; font: 700 18px Fredoka, sans-serif; color: #2a4fa8; }
.rk-v { font-weight: 700; color: var(--s-ink2); white-space: nowrap; }
.rk-me { flex: none; background: linear-gradient(90deg, #fff1c4, #ffe08a); border-top: 2px solid #f2b632; cursor: default; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
.rk-me .rk-i { color: #1f9a4c; }

/* ---------- küresel sohbet ---------- */
.sp-chat .sp { width: min(600px, 54vw); }
.ch-trend { flex: none; padding: 6px 10px 4px; background: rgba(122,90,60,.08); }
.tr-row { display: flex; gap: 10px; overflow-x: auto; }
.tr { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; width: 64px; border: 0; background: none; cursor: pointer; font-family: Fredoka, sans-serif; }
.tr span { width: 46px; height: 46px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; font-size: 24px; box-shadow: 0 0 0 2px #e8344a; background: #fff; }
.tr span img { width: 100%; height: 100%; object-fit: cover; }
.tr small { font-size: 10.5px; color: var(--s-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tr i { position: absolute; top: -4px; right: 4px; font-style: normal; font-size: 10px; background: #e8344a; color: #fff; border-radius: 8px; padding: 0 5px; }
.tr-t { display: block; text-align: center; color: var(--s-ink2); font-size: 11px; }
.ch-log { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 8px; }
.ch-m { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.ch-m.me { flex-direction: row-reverse; }
.ch-m > div { min-width: 0; max-width: 78%; }
.ch-m.me .ch-n { text-align: right; }
.ch-n b { color: #b5520c; font-size: 14px; } .ch-n small { margin-left: 6px; color: var(--s-ink2); font-size: 11px; }
.ch-b { display: inline-block; margin-top: 2px; padding: 6px 12px; border-radius: 4px 14px 14px 14px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.12); font-size: 15px; word-break: break-word; }
.ch-m.me .ch-b { border-radius: 14px 4px 14px 14px; background: #dff6d4; }
.ch-b.stk { background: none; box-shadow: none; font-size: 44px; line-height: 1; padding: 0; animation: stkIn .4s cubic-bezier(.2,1.6,.4,1); }
.ch-sys { align-self: stretch; padding: 8px 12px; border-radius: 12px; background: linear-gradient(90deg, #fff3c4, #ffe08a); color: #7a3f0c; font-weight: 600; font-size: 14px; }
.ch-note { flex: none; padding: 5px 12px; font-size: 11.5px; color: #fff; background: linear-gradient(90deg, #2a9d8f, #1e7a70); }
.ch-send { flex: none; display: flex; gap: 6px; align-items: center; padding: 8px 10px max(8px, env(safe-area-inset-bottom)); background: linear-gradient(180deg, #4a8ef0, #2a64e6); }
.ch-send[hidden] { display: none; }
.ch-send input { flex: 1; min-width: 0; font: 500 15px Fredoka, sans-serif; padding: 10px 12px; border-radius: 10px; border: 0; }
.ch-send .ib { background: rgba(255,255,255,.25); }

/* ---------- çıkartma paneli ---------- */
.sp-stk .sp { width: min(420px, 42vw); display: grid; grid-template-columns: 1fr auto; grid-template-rows: minmax(0, 1fr) auto; background: rgba(20,30,50,.92); color: #fff; }
.stk-grid { grid-row: 1; grid-column: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; padding: 10px; align-content: start; }
.stk-grid button { aspect-ratio: 1; border: 0; border-radius: 12px; background: rgba(255,255,255,.08); cursor: pointer; font-size: clamp(28px, 10vh, 46px); line-height: 1; transition: transform .12s; }
.stk-grid button:hover { transform: scale(1.12); background: rgba(255,255,255,.16); }
.stk-grid .empty { color: #dde; }
.stk-tabs { grid-row: 2; grid-column: 1; display: flex; border-top: 1px solid rgba(255,255,255,.15); }
.stk-tabs button { flex: 1; border: 0; background: none; cursor: pointer; font-size: 28px; padding: 6px 0; }
.stk-tabs button.sel { background: linear-gradient(180deg, #ffd36b, #f0a91c); }
.stk-tabs button.lock { opacity: .4; }
.stk-phr { grid-row: 1 / 3; grid-column: 2; width: 0; overflow-y: auto; }
.stk-phr:not(:empty) { width: min(190px, 18vw); border-left: 1px solid rgba(255,255,255,.15); display: flex; flex-direction: column; }
.stk-phr b { padding: 8px 10px; color: #ffd76a; }
.stk-phr button { border: 0; border-bottom: 1px solid rgba(255,255,255,.1); background: none; color: #fff; cursor: pointer; padding: 10px; text-align: left; font: 600 14px Fredoka, sans-serif; }
.stk-phr button:hover { background: rgba(255,255,255,.1); }
.stk-fly { position: fixed; z-index: 90; transform: translate(-50%, -110%); font-size: clamp(40px, 16vh, 84px); line-height: 1; pointer-events: none; filter: drop-shadow(0 .6vh 1vh rgba(0,0,0,.5));
  animation: stkFly 3s ease both; }
@keyframes stkFly { 0% { opacity: 0; transform: translate(-50%, -60%) scale(.3); } 12% { opacity: 1; transform: translate(-50%, -115%) scale(1.15); } 22% { transform: translate(-50%, -110%) scale(1); }
  80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -150%) scale(.9); } }
@keyframes stkIn { from { transform: scale(.3); } }

/* ---------- sohbet odaları ---------- */
.sp-lounge .sp { width: min(560px, 50vw); }
.lo-head { flex: none; padding: 10px 14px; background: linear-gradient(90deg, #7a3ed0, #b0388e); color: #fff; display: flex; flex-direction: column; }
.lo-head small { opacity: .85; }
.lo-in { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 8px 10px 0; padding: 10px; border-radius: 12px; background: #ffe3ee; }
.lo-in b { flex-basis: 100%; }
.lo-in span { flex: 1; color: var(--s-ink2); }
.lo-list { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.lo { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px; border: 0; border-radius: 14px; cursor: pointer; text-align: left; font-family: Fredoka, sans-serif; position: relative;
  background: linear-gradient(160deg, #fff, #ffe9f2); box-shadow: 0 0 0 2px #f6a8c8; color: var(--s-ink); }
.lo.in { box-shadow: 0 0 0 3px #e8344a; }
.lo.clan { background: linear-gradient(160deg, #fff, #e3f2ff); box-shadow: 0 0 0 2px #8ad0ff; }
.lo-faces { display: flex; } .lo-faces .sav { margin-right: -6px; box-shadow: 0 0 0 2px #fff; }
.lo-e { font-size: 30px; }
.lo-t { display: flex; flex-direction: column; } .lo-t small { color: #1f9a4c; }
.lo-n { position: absolute; top: 8px; right: 10px; font-weight: 700; color: var(--s-ink2); }
.lo-foot { flex: none; display: flex; gap: 8px; padding: 8px 10px max(8px, env(safe-area-inset-bottom)); border-top: 1px solid var(--s-line); }
.lo-foot .sendrow { flex: 1; }

/* ---------- klan ---------- */
.cl { display: grid; grid-template-columns: minmax(200px, .8fr) minmax(0, 2fr); gap: 14px; min-height: 100%; }
.cl-l { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #f3e0c0; }
.cl-emb { font-size: clamp(44px, 18vh, 90px); width: 1.6em; height: 1.6em; display: grid; place-items: center; border-radius: 22%; background: linear-gradient(180deg, #c0392b, #7a1c12);
  box-shadow: 0 0 0 .5vh #ffd76a, 0 0 0 1vh #8a5404, 0 1vh 2vh rgba(0,0,0,.5); }
.cl-name { font-size: 20px; font-weight: 700; color: #ffe7a8; }
.cl-stats { display: flex; gap: 10px; text-align: center; } .cl-stats small { display: block; font-size: 11px; } .cl-stats b { font-size: 20px; color: #8ac4ff; }
.cl-lv { width: 100%; }
.cl-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.cl-btns .ib { background: linear-gradient(180deg, #4ac0e0, #2a8ab0); color: #fff; }
.cl-desc { width: 100%; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.1); }
.cl-desc p { margin: 4px 0 0; font-size: 14px; }
.cl-r { display: flex; flex-direction: column; min-height: 0; border-radius: 14px; overflow: hidden; background: rgba(0,0,0,.35); }
.cl-th, .cl-m { display: grid; grid-template-columns: auto 2fr 1fr 1.2fr 1fr .6fr; gap: 8px; align-items: center; padding: 8px 12px; }
.cl-th { grid-template-columns: 2.6fr 1fr 1.2fr 1fr .6fr; background: linear-gradient(90deg, #c0392b, #3a7bd5); color: #fff; font-weight: 700; font-size: 13px; }
.cl-ms { flex: 1; overflow-y: auto; }
.cl-m { color: #f3e0c0; border-bottom: 1px solid rgba(255,255,255,.08); }
.cl-m .nm { display: flex; flex-direction: column; cursor: pointer; } .cl-m .nm small { opacity: .75; }
.cl-m .g { color: #7bd65a; }
.cl-m .ib { color: #fff; background: rgba(255,255,255,.12); }
.cl-dock { flex: none; display: flex; gap: 6px; justify-content: space-around; padding: 8px; background: rgba(0,0,0,.25); }
.cd { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: none; cursor: pointer; color: #fff; font: 700 12px Fredoka, sans-serif; }
.cd span { font-size: 26px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(180deg, #4ac0e0, #2a7ab0); }
.cd.red span { background: linear-gradient(180deg, #ff7a6a, #c0392b); }
.cls { display: flex; flex-direction: column; gap: 10px; }
.cls-top { display: flex; gap: 10px; flex-wrap: wrap; } .cls-top .sendrow { flex: 1; min-width: 220px; }
.cls-list { display: flex; flex-direction: column; gap: 8px; }
.cls-i { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: linear-gradient(90deg, #fffaf0, #f3e2bc); cursor: pointer; }
.cls-e { font-size: 34px; }
.cls-i > div { flex: 1; min-width: 0; display: flex; flex-direction: column; } .cls-i small { color: var(--s-ink2); } .cls-i span { color: var(--s-ink2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.embs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.embs button { width: 46px; height: 46px; border-radius: 12px; border: 0; cursor: pointer; font-size: 26px; background: rgba(255,255,255,.12); }
.embs button.sel { background: linear-gradient(180deg, #ffe08a, #f2b632); }

/* ---------- etkinlik ---------- */
.ev-card { padding: 14px; border-radius: 16px; background: linear-gradient(180deg, #fffaf0, #f3e2bc); }
.ev-card h3 { margin: 0 0 10px; color: #7a3f0c; }
.ev-login .lg-d { min-height: 22vh; }
.ev-login .lg-days { margin-bottom: 12px; }
.wheel-wrap { display: flex; gap: 20px; align-items: center; justify-content: center; flex-wrap: wrap; }
.wheel-box { position: relative; width: min(58vh, 72vw); aspect-ratio: 1; }
.wheel { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1vh #ffd76a, 0 0 0 1.6vh #8a5404, 0 2vh 3vh rgba(0,0,0,.45); }
.wheel span { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)); }
.wheel span b { position: absolute; left: 0; top: calc(min(58vh, 72vw) * -.36); transform: translate(-50%, -50%); white-space: nowrap; color: #fff;
  font: 800 clamp(10px, 3.4vh, 17px) Fredoka, sans-serif; text-shadow: 0 1px 2px rgba(0,0,0,.8), 0 0 4px rgba(0,0,0,.4); }
.wheel-pin { position: absolute; left: 50%; top: -3%; transform: translateX(-50%); width: 0; height: 0; border-left: 2.4vh solid transparent; border-right: 2.4vh solid transparent; border-top: 5vh solid #e8344a;
  filter: drop-shadow(0 .4vh .4vh rgba(0,0,0,.5)); z-index: 2; }
.wheel-go { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 26%; height: 26%; border-radius: 50%; border: 0; cursor: pointer; z-index: 2;
  background: radial-gradient(circle at 40% 30%, #ffe08a, #d99a1e); color: #4a2600; font: 700 clamp(12px, 4vh, 20px) Fredoka, sans-serif; box-shadow: 0 0 0 .6vh #fff, 0 .8vh 1.4vh rgba(0,0,0,.45); }
.wheel-go:disabled { filter: grayscale(.6); cursor: default; }
.wheel-info { max-width: 340px; } .wheel-info .g { color: #1f9a4c; font-weight: 700; }
.yar { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; }
.yar-l, .yar-r { display: flex; flex-direction: column; gap: 10px; }
.yar-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(90deg, #ffd36b, #f0a91c); color: #4a2600; }
.yar-card > div { flex: 1; display: flex; flex-direction: column; } .yar-cup { font-size: 40px; }
.yar-me { display: flex; gap: 8px; } .yar-me div { flex: 1; text-align: center; padding: 8px; border-radius: 12px; background: rgba(255,250,235,.95); }
.yar-me small { display: block; color: var(--s-ink2); font-size: 12px; } .yar-me b { font-size: 20px; color: #2a4fa8; }
.yar-act { display: flex; gap: 8px; flex-wrap: wrap; } .yar-act .btn { flex: 1; }
.yar-l .fine { color: #f3e0c0; }
.yar-champ { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.1); color: #ffe7a8; }
.yar-prize, .yar-board { padding: 10px 12px; border-radius: 14px; background: linear-gradient(180deg, #ff9a4a, #e8642a); color: #fff; }
.yar-board { background: rgba(255,250,235,.95); color: var(--s-ink); max-height: 40vh; overflow-y: auto; }
.yp { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px dashed rgba(255,255,255,.35); }
.yb { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--s-line); cursor: pointer; }
.yb span { width: 22px; font-weight: 700; color: #2a4fa8; } .yb b { flex: 1; } .yb em { font-style: normal; color: var(--s-ink2); font-size: 13px; }
.seri { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; }
.seri-l { display: flex; flex-direction: column; gap: 8px; }
.sl { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-radius: 14px; background: linear-gradient(90deg, #fffaf0, #f3e2bc); color: var(--s-ink); }
.sl b { font: 700 italic clamp(16px, 5vh, 26px) Fredoka, sans-serif; color: #c2560b; }
.sl-c { font-weight: 700; }
.sl.got { background: linear-gradient(90deg, #c9f5b0, #7bd65a); }
.seri-r { display: flex; flex-direction: column; gap: 10px; color: #f3e0c0; }
.seri-r h3 { margin: 0; color: #ffe7a8; font-size: 24px; }
.seri-now { font-size: 18px; } .seri-now b { color: #7bd65a; font-size: 26px; }
.lig { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; color: #f3e0c0; }
.lig-c { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lig-emb { font-size: clamp(60px, 26vh, 130px); filter: drop-shadow(0 1vh 2vh rgba(255,200,80,.5)); animation: lgPulse 3s ease-in-out infinite; }
.lig-name { font: 400 clamp(22px, 7vh, 36px) Lobster, cursive; color: #ffe7a8; }
.lig-prog { width: 100%; text-align: center; } .lig-prog span { display: block; margin-bottom: 4px; } .lig-prog small { display: block; margin-top: 6px; opacity: .8; }
.lig-rw { padding: 10px 12px; border-radius: 14px; background: rgba(255,250,235,.95); color: var(--s-ink); max-height: 62vh; overflow-y: auto; }
.lr { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 6px 0; border-bottom: 1px solid var(--s-line); }
.lr small { color: var(--s-ink2); } .lr em { grid-column: 1 / 3; font-style: normal; color: #b5520c; font-size: 13px; }
.lr.got { opacity: .6; }

/* ---------- masalar listesi ---------- */
.pg-rooms .pg-body { display: flex; flex-direction: column; gap: 8px; }
.rm-search { display: flex; gap: 6px; } .rm-search input { width: min(220px, 30vw); font: 600 15px Fredoka, sans-serif; padding: 8px 12px; border-radius: 10px; border: 0; text-transform: uppercase; }
.rm-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rm-filters select { font: 600 14px Fredoka, sans-serif; padding: 8px 10px; border-radius: 999px; border: 0; background: #e3eeff; color: #2a4fa8; }
.rm-list { flex: 1; min-height: 0; display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 8px; scroll-snap-type: x mandatory; }
.rm { flex: 0 0 clamp(220px, 28vw, 300px); scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 18px; cursor: pointer; color: #fff;
  background: linear-gradient(180deg, #3fc08a, #1d8a5c 70%); box-shadow: 0 .6vh 0 #0d5a3a, 0 1vh 2vh rgba(0,0,0,.4); }
.rm.m-101 { background: linear-gradient(180deg, #4a9aff, #2a64e6 70%); box-shadow: 0 .6vh 0 #13307e, 0 1vh 2vh rgba(0,0,0,.4); }
.rm.m-batak { background: linear-gradient(180deg, #b86cff, #7a3ed0 70%); box-shadow: 0 .6vh 0 #401a7d, 0 1vh 2vh rgba(0,0,0,.4); }
.rm.full { filter: saturate(.6) brightness(.85); }
.rm-top { display: flex; justify-content: space-between; align-items: center; } .rm-top b { font-size: clamp(16px, 5vh, 24px); color: #ffe08a; text-shadow: 0 .2vh 0 rgba(0,0,0,.4); }
.rm-tags { display: flex; flex-wrap: wrap; gap: 4px; } .rm-tags i { font-style: normal; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.22); }
.rm-table { position: relative; flex: 1; min-height: 26vh; display: grid; grid-template-columns: 1fr 1.2fr 1fr; grid-template-rows: auto 1fr auto; place-items: center;
  background: radial-gradient(circle, #1e8f95 0 30%, transparent 31%); }
.rm-s { display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: 100%; }
.rm-s small { font-size: 11px; max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-s.s2 { grid-column: 2; grid-row: 1; } .rm-s.s3 { grid-column: 1; grid-row: 2; } .rm-s.s1 { grid-column: 3; grid-row: 2; } .rm-s.s0 { grid-column: 2; grid-row: 3; }
.rm-c { grid-column: 2; grid-row: 2; font: 700 22px Fredoka, sans-serif; color: rgba(255,255,255,.85); }
.rm-plus { width: 6.6vh; height: 6.6vh; min-width: 34px; min-height: 34px; border-radius: 50%; border: 0; cursor: pointer; font: 700 24px Fredoka, sans-serif; color: #fff;
  background: radial-gradient(circle at 40% 30%, #6aa8ff, #2a64e6); box-shadow: 0 0 0 3px rgba(255,255,255,.7); }
.rm-e { width: 6.6vh; height: 6.6vh; min-width: 34px; min-height: 34px; border-radius: 50%; background: rgba(0,0,0,.2); }
.rm-name { font-size: 13px; opacity: .9; }
.rm-foot { flex: none; display: flex; gap: 12px; justify-content: flex-end; }
.rm-foot .btn.big { width: auto; padding: 12px 28px; }
.cr { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.cr-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .cr-r > span { width: 110px; color: #dfe9e3; font-weight: 600; }
.seg { display: flex; flex-wrap: wrap; gap: 4px; }
.seg button { border: 0; cursor: pointer; padding: 7px 12px; border-radius: 10px; background: rgba(255,255,255,.12); color: #fff; font: 700 14px Fredoka, sans-serif; }
.seg button.sel { background: linear-gradient(180deg, #ffd66b, #d99a1e); color: #3a2400; }

/* ---------- mini oyunlar ---------- */
.mini-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2vh; padding: 2vh 1vh; }
.mini-c { display: flex; flex-direction: column; align-items: center; gap: 1vh; padding: 2vh 1.4vh; border: 0; border-radius: 2vh; cursor: pointer; text-align: center; color: #4a2600; font-family: Fredoka, sans-serif;
  background: linear-gradient(180deg, #fff6dc, #ffd98a); box-shadow: 0 0 0 .5vh #fff, 0 .8vh 0 #b98a3c, 0 1.6vh 2.4vh rgba(0,0,0,.4); transition: transform .18s; }
.mini-c:hover { transform: translateY(-1vh) rotate(-1deg); }
.mini-c.c1 { background: linear-gradient(180deg, #e6fbe0, #9be08a); } .mini-c.c2 { background: linear-gradient(180deg, #e0f4ff, #8ac8ff); }
.mini-c.soon { background: linear-gradient(180deg, #eef0f4, #c4c9d4); color: #667; cursor: default; }
.mini-c.soon:hover { transform: none; }
.mini-art { font-size: clamp(40px, 18vh, 96px); filter: drop-shadow(0 1vh 1vh rgba(0,0,0,.3)); }
.mini-c b { font: 400 clamp(16px, 5vh, 26px) Lobster, cursive; color: #a8520c; } .mini-c small { font-size: clamp(11px, 3vh, 15px); }
.pg-mini .fine { color: #f3e0c0; }
.mini-host { position: fixed; inset: 0; z-index: 160; background: #1a0c04; }

/* ---------- ayarlar ---------- */
.set { display: flex; flex-direction: column; gap: 10px; }
.set-g { padding: 8px 12px; border-radius: 14px; background: rgba(122,90,60,.08); }
.set-g > b { display: block; margin-bottom: 4px; color: #2a4fa8; }
.sw { display: flex; align-items: center; gap: 10px; padding: 7px 0; cursor: pointer; border-bottom: 1px solid var(--s-line); }
.sw:last-child { border-bottom: 0; }
.sw span { flex: 1; }
.sw input { position: absolute; opacity: 0; pointer-events: none; }
.sw i { position: relative; flex: none; width: 52px; height: 28px; border-radius: 999px; background: #c9d6e8; transition: background .15s; }
.sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s; }
.sw input:checked + i { background: #2e9e5b; }
.sw input:checked + i::after { transform: translateX(24px); }
/* Ayarlar zengin görünüm (2026-10-24) */
.set-me { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; color: #fff3d6;
  background: linear-gradient(135deg, #7a4212, #4a2208); box-shadow: inset 0 0 0 2px #e9b04a, 0 .5vh 1.2vh rgba(0,0,0,.25); }
.set-me .sav { flex: none; }
.set-me { padding-right: 62px; }
.set-cp { background: rgba(255,255,255,.14); color: #ffe7a8; border: 1px solid rgba(255,224,138,.5); }
.set-mt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.set-mt b { font-size: clamp(16px, 5vh, 22px); color: #ffe08a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-mt small { display: flex; align-items: center; gap: 6px; font-size: 13px; opacity: .9; }
.set-id { font-weight: 700; letter-spacing: .5px; }
.set-lig { width: 22px; height: 22px; object-fit: contain; }
.set-mb { display: flex; flex-direction: column; gap: 6px; }
.set-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; align-items: start; }
.set-g { box-shadow: inset 0 0 0 1px rgba(122,90,60,.15); }
.set-g > b { display: flex; align-items: center; gap: 6px; margin: 4px 0 2px; font-size: 16px; }
.set-g > b + .sw, .set-g > b ~ b { margin-top: 6px; }
.sw-ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; font-style: normal; font-size: 18px; border-radius: 10px;
  background: linear-gradient(180deg, #fff6dc, #f1d9a4); box-shadow: inset 0 0 0 1px rgba(122,90,60,.25); }
.sw > span { display: flex; flex-direction: column; font-weight: 600; }
.sw > span small { font-weight: 400; font-size: 12px; color: var(--s-ink2); opacity: .85; }
.sl-row { display: flex; align-items: center; gap: 8px; padding: 2px 0 8px 44px; border-bottom: 1px solid var(--s-line); }
.sl-row b { width: 46px; flex: none; text-align: right; font-size: 13px; color: #7a3f0c; }
.sl { flex: 1; -webkit-appearance: none; appearance: none; height: 8px; border-radius: 99px; outline: none; touch-action: pan-y;
  background: linear-gradient(90deg, #2e9e5b var(--p, 50%), #c9d6e8 var(--p, 50%)); }
.sl::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #f2d58a); box-shadow: 0 0 0 2px #b07a0e, 0 2px 4px rgba(0,0,0,.35); cursor: pointer; }
.sl::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #b07a0e; background: #fff3c4; cursor: pointer; }
.seg { display: flex; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(122,90,60,.35); }
.seg button { border: 0; cursor: pointer; padding: 7px 10px; background: #fff8e6; font: 700 13px Fredoka, sans-serif; color: #7a3f0c; }
.seg button.sel { background: linear-gradient(180deg, #ffe08a, #f2b632); color: #4a2600; }
.set-look { grid-column: 1 / -1; }
.lks { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 6px 0; }
.lk { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border: 0; cursor: pointer; border-radius: 14px; font-family: Fredoka, sans-serif;
  background: linear-gradient(180deg, #fffaf0, #f3e2bd); box-shadow: inset 0 0 0 1px rgba(122,90,60,.25), 0 .3vh 0 rgba(122,90,60,.3); }
.lk .ia { height: 52px; overflow: hidden; }
.lk .sav.mid { width: 50px; height: 50px; }
.lk .ia-sopa { width: 100%; overflow: hidden; }
.lk b { font-size: 14px; color: #4a2600; }
.lk small { font-size: 12px; color: #2a4fa8; font-weight: 700; }
.lk:active { transform: translateY(1px); }
.set-ver { margin: 10px 0 0; text-align: center; font-size: 12px; opacity: .6; }
@media (max-height: 460px) { .set-me { padding: 8px 12px; } .set-mb { flex-direction: row; } .sw { padding: 5px 0; } .sw-ic { width: 30px; height: 30px; font-size: 16px; } }
.set-btns { display: flex; justify-content: space-around; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.sb { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: none; cursor: pointer; font: 700 13px Fredoka, sans-serif; color: #7a3f0c; }
.sb span { width: 56px; height: 56px; display: grid; place-items: center; font-size: 26px; transform: rotate(45deg); border-radius: 14px; background: linear-gradient(135deg, #ffe08a, #f2b632); box-shadow: 0 .4vh 0 #8a5404; }
.sb span::first-letter { }
.set-acc .prof-account, .set-acc #set-acc { color: var(--s-ink); }
.set-acc h3 { color: #7a3f0c; }
.set-acc .fine, .set-acc p { color: var(--s-ink2) !important; }
.set-acc .fld { color: var(--s-ink); }
.set-acc input { color: var(--s-ink); background: #fff; border: 1px solid var(--s-line); }
.rules-box h2, .rules-box h3 { color: #7a3f0c; } .rules-box li, .rules-box p { color: var(--s-ink); }
.faq details { padding: 8px 12px; margin-bottom: 6px; border-radius: 12px; background: rgba(122,90,60,.08); }
.faq summary { cursor: pointer; font-weight: 700; color: #2a4fa8; }
.faq p { margin: 6px 0 0; }
.pol { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.pol .fine { text-align: left; color: var(--s-ink2); }

/* ---------- hediye gönder ---------- */
.gs-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .gs-top .pill { color: #7a3f0c; background: rgba(242,193,78,.25); }
.gs-top .btn { margin-left: auto; }
.gs-to { min-height: 26px; margin: 6px 0; color: var(--s-ink2); }
.dl-gift .gift-grid { max-height: none; }
.dl-gift .gift-item { color: var(--s-ink); background: #fff; }
.dl-gift .fine { color: var(--s-ink2); text-align: left; }
.gh { display: flex; align-items: center; gap: 8px; padding: 4px 0; } .gh img { width: 32px; height: 32px; } .gh span { flex: 1; } .gh small { opacity: .7; }

/* ---------- özel mesaj ---------- */
.dm-log { display: flex; flex-direction: column; gap: 6px; height: calc(100% - 52px); overflow-y: auto; padding-bottom: 8px; }
.dm { max-width: 76%; align-self: flex-start; } .dm.me { align-self: flex-end; text-align: right; }
.dm p { margin: 0; display: inline-block; padding: 7px 12px; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.12); word-break: break-word; }
.dm.me p { background: #dff6d4; }
.dm small { display: block; color: var(--s-ink2); font-size: 11px; }
.dl-dm .dl-body { display: flex; flex-direction: column; }
.dl-dm .sendrow, .dl-com .sendrow { position: sticky; bottom: 0; padding-top: 6px; background: linear-gradient(180deg, rgba(243,230,200,0), var(--s-card2) 30%); }

/* ---------- masa: menü, ping, araç çubuğu, çıkartma ---------- */
.t-menu-ov { position: fixed; inset: 0; z-index: 110; }
.t-menu { position: absolute; top: max(54px, calc(env(safe-area-inset-top) + 50px)); left: max(6px, env(safe-area-inset-left)); width: min(280px, 60vw); max-height: calc(100vh - 64px); overflow-y: auto;
  border-radius: 14px; background: rgba(20,14,10,.92); box-shadow: 0 1vh 3vh rgba(0,0,0,.6); padding: 4px; font-family: Fredoka, sans-serif; animation: viewIn .15s ease; }
.t-menu button { display: block; width: 100%; text-align: left; border: 0; background: none; color: #fff; cursor: pointer; padding: 11px 12px; border-radius: 10px; font: 600 15px Fredoka, sans-serif; }
.t-menu button:hover { background: rgba(255,255,255,.1); }
.tleft { display: flex; align-items: center; gap: 6px; }
.tround { position: relative; width: clamp(34px, 10vh, 44px); height: clamp(34px, 10vh, 44px); flex: none; border: 0; border-radius: 50%; cursor: pointer; padding: 0;
  display: grid; place-items: center; font-size: clamp(16px, 5vh, 22px); line-height: 1; color: #fff; background: rgba(20,10,3,.55); box-shadow: inset 0 0 0 1px rgba(242,193,78,.35), 0 2px 6px rgba(0,0,0,.35);
  transition: transform .12s, background .12s; }
.tround:hover { transform: translateY(-1px); background: rgba(60,30,10,.7); }
.tround:active { transform: scale(.92); }
#t-menu { border-radius: 12px; font-size: clamp(18px, 6vh, 26px); }
#btn-voice.live { background: linear-gradient(180deg, #2fbf6a, #1c7d44); }
.tround .unread { position: absolute; top: -4px; right: -4px; }
.t-ping { display: flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.35); font: 700 11px Fredoka, sans-serif; color: #ddd; white-space: nowrap; }
.t-ping i { width: 8px; height: 8px; border-radius: 50%; background: #999; }
.t-ping.g i { background: #3ddc6a; } .t-ping.g { color: #8af0a8; } .t-ping.y i { background: #f2c14e; } .t-ping.r i { background: #ff5b4b; } .t-ping.r { color: #ff9a8a; }
@media (max-width: 760px), (max-height: 380px) { .t-ping { display: none; } .tright { gap: 4px; } }
body.no-tilecount .pmeta .tc { display: none; }
body.nochat #btn-world, body.nochat #btn-stk, body.nochat .h-chat, body.nochat #h-lounge, body.nochat #h-posts { display: none !important; }
body.cg #btn-world { display: none !important; }
.badge.openv { background: linear-gradient(180deg, #ffd36b, #f0a91c); color: #4a2600; }
/* kalan saniye: sırası gelen oyuncunun avatarında büyük yeşil sayı (Soho) */
.player .avatar[data-sec]::after { content: attr(data-sec); position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; z-index: 3;
  font: 800 clamp(16px, 6vh, 28px) Fredoka, sans-serif; color: #7CFF8A; text-shadow: 0 0 4px #000, 0 2px 2px #000; background: rgba(0,0,0,.45); pointer-events: none; }
.player { position: relative; }
.gbtn { position: absolute; bottom: 4px; right: 4px; z-index: 4; width: 26px; height: 26px; border: 0; border-radius: 50%; cursor: pointer; font-size: 16px; line-height: 1; padding: 0;
  background: radial-gradient(circle at 40% 30%, #fff3d0, #e8b84a); box-shadow: 0 0 0 2px rgba(255,255,255,.7), 0 2px 5px rgba(0,0,0,.45); }
.gbtn:hover { transform: scale(1.1); }
/* gelen hediye (çay, gül…) kartın üst köşesinde, hediye düğmesinin önünde ve büyük (Owner 2026-10-24: "çay yolluyorum ama önünde hediye paketi var") */
.player .gift-badge { z-index: 6; width: 42px; height: 42px; top: -16px; right: -14px; }
/* taş çekme seçimi (Soho "Istakanıza taş seçiniz") */
.draw-pick { position: fixed; left: 50%; top: 41%; transform: translate(-50%, -50%); z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 16px 10px; border-radius: 16px; background: rgba(8,22,16,.72); box-shadow: 0 0 0 1px rgba(242,193,78,.35), 0 8px 24px rgba(0,0,0,.45); animation: viewIn .2s ease; pointer-events: auto; }
.dp-t { font: 700 clamp(13px, 4vh, 19px) Fredoka, sans-serif; color: #e8f4ff; letter-spacing: .3px; text-shadow: 0 2px 4px #000; }
.dp-row { display: flex; gap: 14px; align-items: flex-end; }
.dp-o { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: none; cursor: pointer; padding: 4px; border-radius: 12px; color: #f6ecd6; font: 600 12px Fredoka, sans-serif; }
.dp-o:hover { background: rgba(255,255,255,.08); }
.dp-o .tile { pointer-events: none; }
.dp-deck { display: grid; place-items: center; width: calc(var(--tw) * 1.05); height: calc(var(--th) * 1.05); border-radius: 8px; font: 800 20px Fredoka, sans-serif; color: #5a3a1a;
  background: linear-gradient(180deg, #fffdf5, #ece2c6); box-shadow: 0 0 0 3px #3ddc6a, 2px 3px 0 #cdbd95, 4px 6px 0 #b9a77c, 6px 9px 10px rgba(0,0,0,.45); }
.dp-o:not(.deck) .tile { box-shadow: 0 0 0 3px #3ddc6a; border-radius: 8px; }
.felt .player .avatar.fr { border-radius: 50%; }

/* çuha renkleri (çantadan seçilir) */
body[data-felt="cuha-turkuaz"] .felt { --felt-1: #1e9aa0; --felt-2: #0e5a62; }
body[data-felt="cuha-lacivert"] .felt { --felt-1: #2a4f9a; --felt-2: #13285a; }
body[data-felt="cuha-bordo"] .felt { --felt-1: #9a2a3a; --felt-2: #5a1018; }
body[data-felt="cuha-mor"] .felt { --felt-1: #6a3a9a; --felt-2: #331a5a; }

/* dar ekran: paneller tam genişlik */
@media (max-width: 700px) {
  .sp, .sp-rank .sp, .sp-chat .sp, .sp-lounge .sp { width: 100vw; }
  .sp-x { display: flex; }
  .tk, .cl, .yar, .seri, .lig { grid-template-columns: 1fr; }
  .mini-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-height: 430px) {
  .pg-top { min-height: 0; padding-top: max(4px, env(safe-area-inset-top)); padding-bottom: 2px; }
  .pg-nav button { padding: 1.2vh 10px; }
  .dl { height: calc(100vh - 12px); }
  .dl-tabs button { padding: 1.2vh 1.6vh; }
  .polaroid { width: min(100%, 36vh); }
  .lg-d { min-height: 46vh; }
}

/* ---------- düzeltmeler (QA 2026-10-15) ---------- */
.spg .btn, .dl .btn, .sp .btn { color: #fff; }
.spg .btn.primary, .dl .btn.primary, .sp .btn.primary { color: #3a2400; }
.spg .btn.act, .dl .btn.act, .sp .btn.act { background: linear-gradient(180deg, #3fbf7a, #1f8a52); box-shadow: 0 .4vh 0 #12603a, 0 .6vh 1.2vh rgba(0,0,0,.25); }
.dl .btn.ghost, .sp .btn.ghost { background: rgba(122,90,60,.16); color: var(--s-ink); box-shadow: inset 0 0 0 1px rgba(122,90,60,.3); }
.spg .btn.ghost { background: rgba(255,255,255,.12); color: #f3e0c0; box-shadow: inset 0 0 0 1px rgba(255,215,106,.3); }
.spg .btn.gift, .dl .btn.gift { color: #fff; }
.spg .pg-body .empty { color: #e8d2ac; }
.yar-board .empty, .lig-rw .empty, .ev-card .empty, .dl .empty, .sp .empty { color: var(--s-ink2); }
.ev-card .fine { color: var(--s-ink2); text-align: center; }
.bag-grid .empty { grid-column: 1 / -1; }
.tk { min-height: 0; align-items: start; }
.tk-left { position: sticky; top: 0; height: calc(100vh - 13vh - 24px); min-height: 220px; }
.polaroid { flex: 1 1 auto; min-height: 0; width: auto; max-width: 100%; display: flex; flex-direction: column; }
.polaroid img { flex: 1; min-height: 0; aspect-ratio: auto; }
.pg-mail .pg-body { display: flex; flex-direction: column; }
.pg-mail .mails { flex: 1; }

#scr-table .felt > .tbar { z-index: 8; }
.felt .player .avatar { position: relative; }
#scr-table:not(:has(.felt)) .draw-pick, #scr-table .overlay:not(.hidden) ~ .draw-pick { display: none; }
body.picking #scr-table .status { visibility: hidden; }
.draw-pick .tile.mid { --w: calc(var(--tw) * .95); --h: calc(var(--th) * .95); }

.salon .s-tier { position: absolute; left: max(14px, env(safe-area-inset-left)); bottom: max(8px, env(safe-area-inset-bottom)); z-index: 3; font-size: 14px; padding: 6px 14px 6px 10px; }

/* QA 2 */
.rm-table { min-height: 30vh; padding-bottom: 2px; }
.rm-name { margin-top: 2px; text-align: center; }
.frow .btn.ghost { background: rgba(122,90,60,.18); color: var(--s-ink); box-shadow: inset 0 0 0 1px rgba(122,90,60,.35); }
.pg-clan .pg-body { overflow: hidden; display: flex; flex-direction: column; }
.pg-clan .pg-body > .cl { flex: 1; min-height: 0; }
.pg-clan .pg-body > .cls { overflow-y: auto; }
.cl-l { min-height: 0; overflow-y: auto; padding-bottom: 6px; }
.cl-r { min-height: 0; }
.cl-emb { font-size: clamp(36px, 13vh, 80px); }
.cl-btns .ib.big { min-width: 38px; min-height: 38px; font-size: 18px; }
.lig-emb { font-size: clamp(48px, 18vh, 120px); }
.lig-c .row-btns { width: 100%; } .lig-c .row-btns .btn { white-space: nowrap; }
@media (max-height: 430px) { .lig-c { gap: 6px; } .lig-name { font-size: 24px; } }

/* CrazyGames / Facebook paketinde: sesli odalar yok, okeyistan.com'a davet (çapraz tanıtım) yok */
body.cg #h-lounge, body.cg .h-chat-mic, body.cg .ch-send [data-mic], body.cg .ch-trend, body.cg [data-voice], body.cg .t-menu [data-m="lounge"], body.cg .t-menu [data-m="voice"],
body.fb #h-lounge, body.fb .h-chat-mic, body.fb .ch-send [data-mic], body.fb .ch-trend, body.fb [data-voice], body.fb .t-menu [data-m="lounge"],
body.cg .addf [data-share], body.cg .set-btns [data-share], body.cg .set-btns [data-acc] { display: none !important; }
/* Facebook: hesap Facebook'a bağlı; hesap değiştirme/bağlama yok (davet Facebook'un kendi penceresiyle) */
body.fb .set-btns [data-acc], body.fb .set-btns [data-out] { display: none !important; }
body.cg .h-grid2 .s-posts, body.fb .h-grid2 .s-posts { grid-row: 1; } body.cg .h-grid2 .s-clan, body.fb .h-grid2 .s-clan { grid-row: 2; } body.cg .h-grid2 .s-mini, body.fb .h-grid2 .s-mini { grid-row: 3 / 5; }
/* CrazyGames kuralları (Owner 2026-10-15: "ana yapı bozulmasın, CG'de yalnız istediklerine göre"): oyuncu içeriği akışı (gönderiler),
   özel mesaj ve sesli odalar CG sürümünde yok; site sürümü tam kalır. */
body.cg #h-posts, body.cg .dl-tabs [data-tab="g"], body.cg .pf-moments, body.cg [data-dm], body.cg .pg-nav [data-tab="mesaj"],
body.cg .pg-mail .pg-nav [data-tab="arkadas"], body.cg .sp-tabs [data-ch="ozel"], body.cg .t-menu [data-m="posts"] { display: none !important; }
body.cg .h-grid2 .s-clan { grid-row: 1 / 3; } body.cg .h-grid2 .s-mini { grid-row: 3 / 5; }

html[lang="en"] .m-seri .mc-title { font-size: clamp(11px, 3.6vh, 22px); }

html[lang="en"] .h-lvl::before { content: "Lv "; }
/* Lobi: başka oyuncu masada bekliyor şeridi (2026-10-22) */
.h-bekle { position: absolute; z-index: 30; top: 13.5vh; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 1.2vh; max-width: min(70vw, 150vh);
  padding: .8vh .8vh .8vh 1.8vh; border-radius: 999px; background: linear-gradient(180deg, rgba(40,22,8,.92), rgba(24,12,4,.92)); box-shadow: 0 0 0 .3vh #e8b84a, 0 1vh 2.4vh rgba(0,0,0,.5);
  font: 600 clamp(10px, 2.8vh, 16px) Fredoka, sans-serif; color: #fff; white-space: nowrap; animation: hb-in .35s ease-out; }
.h-bekle[hidden] { display: none; }
.h-bekle b { color: #ffe08a; overflow: hidden; text-overflow: ellipsis; max-width: 22vh; }
.h-bekle .hb-dot { width: 1.4vh; height: 1.4vh; min-width: 7px; min-height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,.7); animation: hb-pulse 1.4s infinite; }
.h-bekle .hb-bet { display: inline-flex; align-items: center; gap: .5vh; color: #ffd36b; }
.h-bekle .btn { margin-left: .4vh; padding: .6vh 2.4vh; min-height: 0; font-size: clamp(10px, 2.6vh, 15px); }
@keyframes hb-in { from { opacity: 0; transform: translate(-50%, -1.5vh); } }
@keyframes hb-pulse { 70% { box-shadow: 0 0 0 1.2vh rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }

/* ===== 2026-10-24 görsel yenileme (rakip karşılaştırması): emoji yerine Higgsfield resimleri ===== */
.h-ic2 .e img, .hd2 .e img { display: block; width: auto; filter: drop-shadow(0 .5vh .6vh rgba(0,0,0,.5)); }
.h-ic2 .e img { height: clamp(24px, 9vh, 50px); }
.hd2 .e img { height: clamp(22px, 8.4vh, 46px); }
.h-ic2 .e, .hd2 .e { filter: none; }
.mc-emo { line-height: 0; }
.mc-emo img { height: clamp(48px, 21vh, 128px); width: auto; display: block; filter: drop-shadow(0 1vh 1.2vh rgba(0,0,0,.45)); }
.sc-e { line-height: 0; }
.sc-e img { height: clamp(28px, 10.5vh, 62px); width: auto; display: block; filter: drop-shadow(0 .6vh .8vh rgba(0,0,0,.4)); }
.mc-art { line-height: 0; }
.mc-art img { height: clamp(64px, 26vh, 160px); width: auto; display: block; filter: drop-shadow(0 1.2vh 1.4vh rgba(0,0,0,.45)); transition: transform .3s; }
.mcard:hover .mc-art img { transform: scale(1.04) rotate(-2deg); }
.h-chat-mic img { width: 78%; height: 78%; object-fit: contain; }
.tround img { width: 74%; height: 74%; object-fit: contain; display: block; margin: auto; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.45)); }
/* Bağlantı hızı: yalnız renkli nokta (sayı oyuncuya bir şey anlatmıyordu) */
.t-ping { padding: 0 4px; background: none; } .t-ping span { display: none; } .t-ping i { width: 10px; height: 10px; }
/* Seri diz / Çift diz: taş resimli düğme */
.btn.sort-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; line-height: 1.05; }
.btn.sort-btn img { height: clamp(18px, 7vh, 40px); width: auto; margin-bottom: .2vh; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
/* Geçerli per oluşturan taşların altı altın çizgi */
.tile.in-meld::before { content: ''; position: absolute; left: 14%; right: 14%; bottom: 5%; height: 7%; min-height: 2px; border-radius: 3px; background: linear-gradient(90deg, #f7c948, #e0951c); box-shadow: 0 0 4px rgba(247,201,72,.8); }
.tile { position: relative; }
/* Pasif At / Bitir daha okunur */
.rack-side .btn.act:disabled { color: rgba(253,246,227,.62); background: rgba(0,0,0,.28); box-shadow: inset 0 0 0 1px rgba(242,193,78,.35); }
/* Masa bilgisi: bahis ve el, renkli etiket (skor kartı) */
#t-bet:not(:empty), #t-hand:not(:empty) { padding: 2px 9px; border-radius: 999px; font: 700 12.5px/1.4 Fredoka, sans-serif; color: #fff; text-shadow: none; align-self: center; }
#t-bet:not(:empty) { background: linear-gradient(180deg, #2e9c5a, #1d6b3c); box-shadow: 0 2px 0 #10402a; }
#t-hand:not(:empty) { background: linear-gradient(180deg, #c0392b, #8c2318); box-shadow: 0 2px 0 #5a160f; }
/* Per tahtasında soluk logo */
.felt.m-101 .center { background-image: url(img/logo.webp), repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 26px), repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 26px);
  background-repeat: no-repeat, repeat, repeat; background-position: 42% 50%, 0 0, 0 0; background-size: auto 46%, auto, auto; background-color: rgba(0, 20, 12, .42); background-blend-mode: soft-light, normal, normal; }
/* Seviye: rozet + ilerleme çubuğu */
.h-lvl { min-width: 0; width: 6.4vh; height: 6.4vh; min-height: 26px; min-width: 26px; padding: 0; bottom: -2.6vh; border-radius: 0; background: url(img/ui/ik-seviye.webp) center / contain no-repeat;
  box-shadow: none; color: #fff; font-size: clamp(10px, 2.6vh, 16px); line-height: 1; display: grid; place-items: center; padding-top: .9vh; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.h-lvl::before { content: none; }
.h-xp { position: relative; display: inline-block; width: clamp(70px, 22vh, 150px); height: clamp(10px, 2.8vh, 16px); border-radius: 999px; background: rgba(0,0,0,.45); box-shadow: inset 0 0 0 1px rgba(255,215,106,.55); overflow: hidden; vertical-align: middle; }
.h-xp i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(180deg, #ffe58a, #f0a91c); box-shadow: inset 0 -2px 0 rgba(155,90,8,.5); }
.h-xp em { position: relative; display: block; text-align: center; font: 700 clamp(8px, 2vh, 11px)/clamp(10px, 2.8vh, 16px) Fredoka, sans-serif; color: #fff; font-style: normal; text-shadow: 0 1px 2px rgba(0,0,0,.9); }
/* Sıralama: ilk üçte süslü çerçeve sığsın */
.h-rank-list { overflow: visible; }
.h-lr .lav.fr { overflow: visible; }
.h-lr { width: 8.6vh; height: 8.6vh; min-width: 38px; min-height: 38px; margin: .8vh 0; }
.h-lr .n { z-index: 3; }
/* İlk el ipucu ıstakayı ve "Sıra sende" yazısını örtmesin: üst oyuncunun hizasına çıkar */
.coach { top: 11vh; width: min(620px, 64vw); }
@media (max-height: 480px) { .coach { top: 10.5vh; } }
.lg-art { line-height: 0; } .lg-art img { height: clamp(30px, 13vh, 76px); width: auto; display: block; margin: 0 auto; }
.ev-login .lg-art img { height: clamp(24px, 8vh, 48px); }
/* resimler başlıkları örtmesin */
.m-auto .mc-obj.mc-art { right: 2.5%; top: auto; bottom: 4%; transform: none; }
.mc-art img { height: clamp(52px, 19vh, 120px); }
.m-auto .mc-live { z-index: 2; }
.mc-emo { top: 62%; }
.mc-emo img { height: clamp(40px, 15.5vh, 96px); }
.mcard:hover .mc-emo { transform: translate(-50%, -52%) scale(1.06); }
.mc-title { z-index: 2; }
/* İpucu: sağ üstte, deste/gösterge ile sol yerdeki taşın arasında kalmasın */
.coach { left: auto; right: 12vw; transform: none; width: min(440px, 31vw); flex-wrap: wrap; top: 11vh; }
.coach p { flex: 1 1 70%; }
.coach .coach-btns { flex-direction: row; flex: 1 1 100%; justify-content: flex-end; }
@media (max-height: 480px) { .coach { top: 10.5vh; } .coach p { font-size: 11.5px; } }
.btn.sort-btn img { height: clamp(14px, 5.2vh, 30px); }
.btn.sort-btn { font-size: clamp(10px, 3.2vh, 15px); padding-top: .4vh; padding-bottom: .4vh; }
.rack-side .btn.act { overflow-wrap: anywhere; } .rack-side .btn.act.hot { font-size: clamp(10px, 3vh, 14px); line-height: 1.1; }
/* İpucu sol üstte: deste (101'de sağ kolonda) ve alınacak taş (sol altta) açık kalsın */
.coach { right: auto; left: 11vw; width: min(430px, 30vw); }
.way .e { line-height: 0; } .way .e img { height: clamp(30px, 10vh, 56px); width: auto; display: block; }
/* Batak: kart sürükleme */
.bhand .pcard.legal { touch-action: none; }
.card-ghost { position: fixed; z-index: 90; pointer-events: none; margin: 0 !important; filter: drop-shadow(0 10px 14px rgba(0,0,0,.5)); }

/* ===== Şans çarkı v2 (2026-10-24): altın çember + yakut ibre + zümrüt göbek (Higgsfield), mücevher tonlu dilimler ===== */
.wheel-wrap { gap: 4vh; flex-wrap: nowrap; background: radial-gradient(ellipse at 30% 50%, rgba(255,200,90,.18), transparent 60%), linear-gradient(160deg, #3a1f10, #1a0c05) !important; color: #fdf3dc; box-shadow: inset 0 0 0 1px rgba(242,193,78,.35), 0 1vh 3vh rgba(0,0,0,.4) !important; }
.wheel-box { --W: min(64vh, 46vw); width: var(--W); flex: none; }
.wheel-glow { position: absolute; inset: -6%; border-radius: 50%; background: radial-gradient(circle, rgba(255,210,110,.45), transparent 66%); animation: wglow 2.4s ease-in-out infinite; }
@keyframes wglow { 50% { opacity: .5; transform: scale(.97); } }
.wheel { inset: 15.5%; box-shadow: none; overflow: hidden;
  background: radial-gradient(circle, rgba(255,255,255,.18) 0 18%, transparent 60%), repeating-conic-gradient(from 0deg, rgba(255,255,255,.0) 0 44deg, rgba(255,240,200,.85) 44deg 45deg), radial-gradient(circle, transparent 55%, rgba(0,0,0,.35) 100%), var(--seg); }
.wheel span b { top: calc(var(--W) * -.235); display: flex; flex-direction: column; align-items: center; gap: .2vh; font: 700 clamp(9px, 2.6vh, 16px)/1 Fredoka, sans-serif; text-shadow: 0 .2vh .4vh rgba(0,0,0,.8); }
.wheel span b img { width: calc(var(--W) * .085); height: auto; filter: drop-shadow(0 .3vh .4vh rgba(0,0,0,.5)); }
.wheel span b.big { color: #ffe58a; font-size: clamp(10px, 3vh, 18px); }
.wheel span.won b { animation: wwon .5s ease-in-out 4 alternate; }
@keyframes wwon { to { transform: translate(-50%, -50%) scale(1.35); filter: drop-shadow(0 0 1vh #ffe58a); } }
.wheel-rim { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 1.4vh 2vh rgba(0,0,0,.55)); }
.wheel-box.spinning .wheel-rim { animation: wbulb .25s steps(2) infinite; }
@keyframes wbulb { 50% { filter: drop-shadow(0 1.4vh 2vh rgba(0,0,0,.55)) brightness(1.18); } }
.wheel-pin2 { position: absolute; left: 50%; top: -4%; width: 11%; transform: translateX(-50%); z-index: 3; filter: drop-shadow(0 .6vh .8vh rgba(0,0,0,.6)); }
.wheel-pin { display: none; }
.wheel-go { width: 25%; height: 25%; background: none; padding: 0; box-shadow: none; z-index: 3; }
.wheel-go img { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 .8vh 1vh rgba(0,0,0,.5)); }
.wheel-go b { position: relative; font: 700 clamp(11px, 3.4vh, 20px)/1 Fredoka, sans-serif; color: #fff; text-shadow: 0 .3vh 0 #0c4f2c, 0 0 1vh rgba(0,0,0,.5); letter-spacing: .5px; }
.wheel-go:not(:disabled) { animation: wgo 1.2s ease-in-out infinite; }
@keyframes wgo { 50% { transform: translate(-50%, -50%) scale(1.07); } }
.wheel-go:disabled { filter: saturate(.5) brightness(.85); }
.wheel-info { max-width: 360px; display: flex; flex-direction: column; gap: 1.2vh; }
.wheel-info h3 { margin: 0; font: 400 clamp(22px, 7vh, 40px)/1 Lobster, cursive; color: #ffd86b; text-shadow: 0 .3vh 0 #7a3b05; }
.wheel-info p { margin: 0; color: #f4e6c8; }
.wi-art { width: clamp(44px, 14vh, 84px); height: auto; }
.wi-ready { color: #7CFFB2 !important; font-weight: 700; } .wi-wait b { color: #ffd86b; }
.wi-list { display: flex; flex-wrap: wrap; gap: .8vh; }
.wi-list span { display: inline-flex; align-items: center; gap: .5vh; padding: .5vh 1.2vh; border-radius: 999px; background: rgba(0,0,0,.3); box-shadow: inset 0 0 0 1px rgba(242,193,78,.3); font-weight: 700; font-size: clamp(10px, 2.6vh, 14px); }
.wi-list span.big { background: linear-gradient(180deg, #ffe58a, #e09a14); color: #4a2600; }
.wi-list img { width: 2.6vh; min-width: 14px; height: auto; }
@media (max-height: 480px) { .wheel-info p { font-size: 12px; } .wi-list span { padding: 2px 7px; } }

/* Abanoz / sedef / altın varak ıstakalar: gerçek resim (Higgsfield, ceviz ile aynı kalıp ve raf ölçüsü) */
.rack.r-abanoz { --rimg: url(img/istaka-abanoz.webp); } .rack.r-sedef { --rimg: url(img/istaka-sedef.webp); } .rack.r-altin { --rimg: url(img/istaka-altin.webp); }
.ia-rack.r-abanoz, .ia-rack.r-sedef, .ia-rack.r-altin, .ia-rack.r-ceviz, .ia-rack.r-krem, .ia-rack.r-mese { background: var(--ri) center / 100% 100% no-repeat !important; box-shadow: none !important; }
.ia-rack.r-abanoz { --ri: url(img/istaka-abanoz.webp); } .ia-rack.r-sedef { --ri: url(img/istaka-sedef.webp); } .ia-rack.r-altin { --ri: url(img/istaka-altin.webp); }
.ia-rack.r-ceviz { --ri: url(img/istaka-ceviz.webp); } .ia-rack.r-krem { --ri: url(img/istaka-krem.webp); } .ia-rack.r-mese { --ri: url(img/istaka-mese.webp); }

/* ===================== İç ekranlar v2 (2026-10-24): rakiplerden üstün, kahvehane lüksü ===================== */
/* Sayfalar: maun panelli kahvehane duvarı (Higgsfield) */
.spg { background: linear-gradient(180deg, rgba(20,8,2,.55), rgba(20,8,2,.82)), url(img/ui2/sayfa-arka.webp) center / cover; }
.spg::before { opacity: 0; }
.pg-ic { display: inline-flex; } .pg-ic img { height: clamp(26px, 9vh, 48px); width: auto; filter: drop-shadow(0 .4vh .5vh rgba(0,0,0,.5)); }
.pg-nav button.sel { background: linear-gradient(90deg, #ffe58a, #e9a520); box-shadow: inset 0 -.4vh 0 rgba(130,70,0,.35), 0 .5vh 1.2vh rgba(0,0,0,.4); }
.pill-ic { width: 1.3em; height: 1.3em; vertical-align: -.25em; }
.pill { display: inline-flex; align-items: center; gap: 6px; }
/* Pencereler (profil, çanta): parşömen + maun başlık + altın kenar */
.dl { background: radial-gradient(120% 80% at 50% 0%, #fffaf0, #f3e3c0 70%, #e9d3a6); box-shadow: 0 0 0 2px #ffe08a, 0 0 0 5px #8a5404, 0 0 0 7px #3a1c06, 0 2vh 5vh rgba(0,0,0,.65); }
.dl-tabs, .dl-head { background: linear-gradient(180deg, rgba(40,16,4,.2), rgba(40,16,4,.55)), url(img/ui2/sayfa-arka.webp) center 30% / cover; box-shadow: inset 0 -2px 0 #e9b04a; }
.dl-tabs button { display: inline-flex; align-items: center; gap: 6px; }
.tab-ic { height: 1.5em; width: auto; margin: -.3em 0; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.dl-side { background: linear-gradient(90deg, rgba(90,50,20,.16), rgba(90,50,20,.06)); }
.dl-x { background: radial-gradient(circle at 35% 30%, #ff8a7a, #d12a1c 60%, #8e140b); box-shadow: 0 0 0 2px #ffe08a, 0 .4vh .8vh rgba(0,0,0,.5); }
/* Boş ekranlar: resimli, ne işe yaradığını anlatan */
.empty.art { display: flex; flex-direction: column; align-items: center; gap: 1vh; padding: 3vh 12px; color: inherit; }
.empty.art img { height: clamp(70px, 26vh, 150px); width: auto; filter: drop-shadow(0 1.2vh 1.4vh rgba(0,0,0,.35)); animation: emptyFloat 3.4s ease-in-out infinite; }
@keyframes emptyFloat { 50% { transform: translateY(-1vh) rotate(-2deg); } }
.empty.art b { font: 700 clamp(15px, 4.4vh, 22px) Fredoka, sans-serif; }
.empty.art span { max-width: 380px; opacity: .8; font-size: clamp(12px, 3.2vh, 15px); line-height: 1.4; }
.pg-body > .empty.art { color: #f6e6c6; }
/* Mağaza / çanta ürün kartları: maun vitrin, yeşil çuha zemin, bordo kurdele */
.prod { background: linear-gradient(180deg, #fffaf0, #f1dfb8); box-shadow: 0 0 0 2px #e9b04a, 0 0 0 4px #6b3a12, 0 1vh 2vh rgba(0,0,0,.45); border-radius: 16px; overflow: hidden; padding: 0 10px 10px; gap: 8px; }
.prod-t { margin: 0 -10px; width: calc(100% + 20px); border-radius: 0; padding: .9vh 0; color: #ffe9b0; text-shadow: 0 .2vh 0 #4a1a04;
  background: linear-gradient(180deg, #a3212c, #6e0f18); box-shadow: inset 0 -2px 0 #e9b04a; font-size: clamp(13px, 3.6vh, 17px); }
.prod-art { width: 100%; min-height: clamp(70px, 22vh, 120px); border-radius: 12px; background: radial-gradient(ellipse at 50% 40%, rgba(255,226,140,.55), transparent 65%), linear-gradient(180deg, #2a5a3c, #12301f); box-shadow: inset 0 0 0 1px rgba(255,224,138,.4), inset 0 -1vh 2vh rgba(0,0,0,.35); }
.prod-d { color: var(--s-ink2); }
.prod .buy { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.prod .ia-e img, .bag-i .ia-e img, .bag-big .ia-e img { height: clamp(46px, 15vh, 84px); width: auto; filter: drop-shadow(0 .8vh 1vh rgba(0,0,0,.45)); }
.ia-e { font-size: 0; }
.ia-rack { width: min(100%, 200px) !important; height: auto !important; aspect-ratio: 1327 / 222; }
.bag-i .ia-rack { width: 92% !important; }
/* Çuha: gerçek kumaş dokusu (gri örnek, renge boyanır) */
.ia-felt { width: clamp(70px, 22vh, 110px); height: auto; aspect-ratio: 1; border-radius: 0; box-shadow: none; background: url(img/ui2/cuha-ornek.webp) center / contain no-repeat !important; }
.ia-felt.cuha-yesil { filter: sepia(1) saturate(4) hue-rotate(95deg) brightness(.75); }
.ia-felt.cuha-turkuaz { filter: sepia(1) saturate(4) hue-rotate(140deg) brightness(.85); }
.ia-felt.cuha-lacivert { filter: sepia(1) saturate(4) hue-rotate(185deg) brightness(.6); }
.ia-felt.cuha-bordo { filter: sepia(1) saturate(5) hue-rotate(-40deg) brightness(.6); }
.ia-felt.cuha-mor { filter: sepia(1) saturate(4) hue-rotate(225deg) brightness(.65); }
.bag-i .ia-felt { width: 80%; }
/* Çanta */
.bag-i { background: radial-gradient(ellipse at 50% 35%, rgba(255,226,140,.5), transparent 70%), linear-gradient(180deg, #2a5a3c, #12301f); box-shadow: 0 0 0 2px #c9993c, 0 .4vh .8vh rgba(0,0,0,.35); }
.bag-i.sel { box-shadow: 0 0 0 3px #ffe08a, 0 0 1.6vh rgba(255,210,90,.8); }
.bag-i > b { color: #ffe9b0; }
.bag-det { background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(233,211,166,.6)); box-shadow: inset 0 0 0 1px rgba(201,153,60,.55); }
.bag-big { transform: none; }
.bag-name { background: linear-gradient(180deg, #a3212c, #6e0f18); color: #ffe9b0; }
/* Posta: zarf kartları */
.mail { background: linear-gradient(90deg, #fffaf0, #f6e4bd); box-shadow: 0 .4vh 1vh rgba(0,0,0,.3), inset 0 0 0 1px rgba(201,153,60,.5); }
.mail-ic img { height: clamp(32px, 10vh, 52px); width: auto; display: block; }
/* Profil: kahvehane afişi + lig arması */
.dl-prof .dl-body { padding-top: 0; }
.pf-banner { position: relative; margin: 0 -16px 10px; padding: 1.4vh 16px; min-height: 13vh; display: flex; align-items: center; gap: 1.6vh;
  background: linear-gradient(90deg, rgba(20,8,2,.85), rgba(20,8,2,.35) 55%, rgba(20,8,2,.6)), url(img/ui2/profil-afis.webp) center / cover; color: #fff3d6; box-shadow: inset 0 -2px 0 #e9b04a; }
.pf-lig { height: clamp(48px, 17vh, 96px); width: auto; filter: drop-shadow(0 .6vh 1vh rgba(0,0,0,.6)); }
.pf-bt { display: flex; flex-direction: column; flex: 1; }
.pf-bt b { font: 400 clamp(20px, 6.4vh, 34px)/1 Lobster, cursive; color: #ffd86b; text-shadow: 0 .3vh 0 #6b2c04; }
.pf-bt small { opacity: .9; margin-top: .4vh; }
.pf-banner .pf-id { color: #ffe9b0; }
.pf-banner .pf-id .ib { background: rgba(255,255,255,.18); color: #fff; }
.pf-f .ic { display: inline-flex; } .pf-f .ic img { height: 26px; width: auto; }
.pf-f { background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(240,222,184,.7)); box-shadow: inset 0 0 0 1px rgba(201,153,60,.45); }
.pf-stats div { display: flex; flex-direction: column; align-items: center; gap: 2px; background: linear-gradient(180deg, #fffaf0, #efdcb2); box-shadow: inset 0 0 0 1px rgba(201,153,60,.55), 0 .3vh .6vh rgba(0,0,0,.12); }
.pf-stats img { height: clamp(22px, 7vh, 38px); width: auto; filter: drop-shadow(0 .3vh .4vh rgba(0,0,0,.3)); }
.pf-stats b { color: #8e1f22; }
.pf-mt { display: flex; align-items: center; gap: 6px; } .pf-mt img { height: 28px; width: auto; }
.pf-moments { background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(233,211,166,.5)); box-shadow: inset 0 0 0 1px rgba(201,153,60,.45); }
.pf-empty { display: flex; align-items: center; justify-content: center; gap: 14px; font: 700 clamp(14px, 4vh, 18px) Fredoka, sans-serif; color: var(--s-ink); text-align: left; padding: 8px; }
.pf-empty small { display: block; font-weight: 500; }
.pf-empty-art { height: clamp(50px, 16vh, 90px); width: auto; }
.ach-m { display: inline-flex; } .ach-m img { height: clamp(32px, 10vh, 50px); width: auto; } .ach-m img.lock { filter: grayscale(1) brightness(.75); opacity: .6; }
.ach-i { background: linear-gradient(90deg, rgba(255,255,255,.6), rgba(240,222,184,.6)); box-shadow: inset 0 0 0 1px rgba(201,153,60,.4); }
.wall-i { background: radial-gradient(ellipse at 50% 30%, rgba(255,226,140,.5), transparent 70%), #fffaf0; box-shadow: inset 0 0 0 1px rgba(201,153,60,.5), 0 .3vh .6vh rgba(0,0,0,.15); }
/* Etkinlik: lig armaları, yarışma kupası */
.lig-emb { font-size: 0; } .lig-emb img { height: clamp(80px, 30vh, 170px); width: auto; filter: drop-shadow(0 1vh 2vh rgba(255,200,80,.45)); }
.yar-cup { display: inline-flex; } .yar-cup img { height: clamp(40px, 12vh, 64px); width: auto; }
.h3-ic { height: 1.4em; width: auto; vertical-align: middle; }
.tier-ic { height: 1.5em; width: auto; margin: -.35em 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.lr { grid-template-columns: auto 1fr auto; align-items: center; } .lr em { grid-column: 2 / 4; } .lr-ic { grid-row: 1 / 3; height: clamp(28px, 9vh, 44px); width: auto; }
.bag-det[hidden] { display: none; }
.prod .btn.buy.ghost { color: #6b3a12; background: rgba(122,90,60,.18); }

/* ===================== Sohbet + sohbet odaları v2 (2026-10-24) ===================== */
.sp-tabs { background: linear-gradient(180deg, rgba(40,16,4,.25), rgba(40,16,4,.6)), url(img/ui2/sayfa-arka.webp) center 30% / cover; box-shadow: inset 0 -2px 0 #e9b04a; }
.sp-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.sp-tabs button.sel { background: linear-gradient(180deg, #fffaf0, #f3e3c0); }
.sp-chat .sp, .sp-lounge .sp { background: radial-gradient(120% 70% at 50% 0%, #fffaf0, #f3e3c0 70%, #e9d3a6); box-shadow: 0 0 0 2px #e9b04a, 0 0 4vh rgba(0,0,0,.6); }
.ch-trend { background: linear-gradient(180deg, rgba(90,50,20,.14), rgba(90,50,20,.04)); box-shadow: inset 0 -1px 0 rgba(201,153,60,.4); padding: 8px 10px 6px; }
.tr { width: 92px; height: 62px; justify-content: flex-end; border-radius: 12px; overflow: hidden; background: center / cover no-repeat; box-shadow: 0 0 0 2px #e9b04a, 0 .4vh .8vh rgba(0,0,0,.3); }
.tr::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(20,8,2,.85)); }
.tr span { position: absolute; top: 4px; left: 4px; z-index: 1; width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 2px #ffe08a; }
.tr small { position: relative; z-index: 1; color: #fff3d6; font-weight: 700; padding: 0 4px 3px; text-shadow: 0 1px 2px #000; }
.tr i { z-index: 1; top: 4px; right: 4px; background: linear-gradient(180deg, #2e9c5a, #1d6b3c); }
.tr-t { color: #7a3f0c; font-weight: 700; margin-top: 4px; }
.ch-log { background: url(img/ui2/sayfa-arka.webp) center / cover; background-blend-mode: soft-light; background-color: rgba(255,248,232,.9); }
.ch-n b { color: #8e1f22; }
.ch-b { background: #fffdf7; box-shadow: 0 1px 2px rgba(0,0,0,.15), inset 0 0 0 1px rgba(201,153,60,.35); }
.ch-m.me .ch-b { background: linear-gradient(180deg, #e9f8dd, #d3efc2); }
.ch-sys { display: flex; align-items: center; gap: 8px; } .ch-sys img { height: 28px; width: auto; }
.ch-note { background: linear-gradient(90deg, #5a2f0c, #7a4212); color: #ffe9b0; box-shadow: inset 0 1px 0 rgba(233,176,74,.5); }
.ch-send { background: linear-gradient(180deg, rgba(40,16,4,.4), rgba(40,16,4,.75)), url(img/ui2/sayfa-arka.webp) center 70% / cover; box-shadow: inset 0 2px 0 #e9b04a; }
.ch-send .ib { background: rgba(255,224,138,.15); box-shadow: inset 0 0 0 1px rgba(255,224,138,.5); }
.ch-send .ib img { width: 80%; height: 80%; object-fit: contain; }
.ch-send input { background: #fffaf0; color: var(--s-ink); box-shadow: inset 0 0 0 2px #c9993c; }
/* Sohbet odaları: kapak resimli kartlar */
.lo-head { flex-direction: row; align-items: center; gap: 10px; background: linear-gradient(90deg, rgba(40,16,4,.75), rgba(40,16,4,.35)), url(img/ui2/sayfa-arka.webp) center 30% / cover; box-shadow: inset 0 -2px 0 #e9b04a; color: #ffe9b0; }
.lo-head > div { display: flex; flex-direction: column; } .lo-head b { font: 400 clamp(18px, 5.4vh, 26px) Lobster, cursive; color: #ffd86b; }
.lo-hi { height: clamp(34px, 10vh, 54px); width: auto; filter: drop-shadow(0 .4vh .5vh rgba(0,0,0,.5)); }
.lo { min-height: clamp(96px, 30vh, 150px); justify-content: flex-end; overflow: hidden; color: #fff; background: var(--cover) center / cover no-repeat !important; box-shadow: 0 0 0 2px #e9b04a, 0 .6vh 1.2vh rgba(0,0,0,.35) !important; }
.lo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,8,2,0) 30%, rgba(20,8,2,.88)); }
.lo > * { position: relative; z-index: 1; }
.lo:hover { transform: translateY(-2px); }
.lo.in { box-shadow: 0 0 0 3px #ff4d5e, 0 0 2vh rgba(255,77,94,.6) !important; }
.lo-t b { color: #fff3d6; text-shadow: 0 1px 3px #000; font-size: clamp(13px, 3.8vh, 17px); }
.lo-t small { color: #9ff0b8; }
.lo-n { position: absolute !important; z-index: 2; color: #fff; background: rgba(20,8,2,.65); padding: 2px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,224,138,.5); }
.lo-faces { position: absolute !important; top: 8px; left: 10px; }
.lo-in { background: linear-gradient(90deg, #fff1d6, #ffe0e6); box-shadow: inset 0 0 0 1px rgba(232,52,74,.4); }
.lo-foot { background: linear-gradient(180deg, rgba(90,50,20,.08), rgba(90,50,20,.18)); }

/* ===================== Rakibin ıstakası masada görünür (imrenme) ===================== */
.opp-rack { position: relative; display: block; width: 100%; max-width: 120px; aspect-ratio: 1327 / 222; margin: 4px auto 0; border: 0; padding: 0; cursor: pointer; background: center / 100% 100% no-repeat; filter: drop-shadow(0 .4vh .5vh rgba(0,0,0,.6)); }
.seat-top .opp-rack { max-width: 150px; }
.opp-rack i { position: absolute; left: 50%; bottom: -1.9vh; transform: translateX(-50%); white-space: nowrap; font: 700 clamp(8px, 2.2vh, 11px)/1 Fredoka, sans-serif; color: #ffe08a; text-shadow: 0 1px 2px #000; font-style: normal; }
.opp-rack.shiny::after, .rs-img.shiny::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.75) 45%, transparent 60%) -150% 0 / 60% 100% no-repeat; animation: rackShine 2.8s ease-in-out infinite; }
@keyframes rackShine { 60%, 100% { background-position: 250% 0; } }
.opp-rack.shiny { filter: drop-shadow(0 0 .8vh rgba(255,210,90,.8)) drop-shadow(0 .4vh .5vh rgba(0,0,0,.6)); }
.rack-show { text-align: center; }
.rs-img { position: relative; width: 100%; aspect-ratio: 1327 / 222; background: center / 100% 100% no-repeat; margin: 6px 0 14px; filter: drop-shadow(0 1vh 1.4vh rgba(0,0,0,.5)); overflow: hidden; }
/* Yeni ıstakalar (kendi ıstakan + mağaza önizleme) */
.rack.r-kilim { --rimg: url(img/istaka-kilim.webp); } .rack.r-cini { --rimg: url(img/istaka-cini.webp); } .rack.r-telkari { --rimg: url(img/istaka-telkari.webp); }
.rack.r-zumrut { --rimg: url(img/istaka-zumrut.webp); } .rack.r-saf-altin { --rimg: url(img/istaka-saf-altin.webp); }
/* Owner 2026-10-26 "taşlar ıstakaya oturmuyor": satılık ıstakalar cevizin raf ölçüsünü kullanıyordu. Her resmin raf çizgisi ölçüldü
   (üst raf / alt raf piksel satırı ÷ resim yüksekliği), toplam yükseklik ceviz gibi 2.8 taş boyu: rpt = L1·2.8−1, rg = (L2−L1)·2.8−1, rpb = (1−L2)·2.8. */
.rack.r-abanoz, .ia-rack.r-abanoz { --rpt: .261; --rpb: .341; --rg: .198; }
.rack.r-altin, .ia-rack.r-altin { --rpt: .216; --rpb: .304; --rg: .280; }
.rack.r-cini, .ia-rack.r-cini { --rpt: .225; --rpb: .350; --rg: .225; }
.rack.r-kilim, .ia-rack.r-kilim { --rpt: .285; --rpb: .318; --rg: .196; }
.rack.r-saf-altin, .ia-rack.r-saf-altin { --rpt: .268; --rpb: .364; --rg: .168; }
.rack.r-sedef, .ia-rack.r-sedef { --rpt: .279; --rpb: .358; --rg: .163; }
.rack.r-telkari, .ia-rack.r-telkari { --rpt: .281; --rpb: .314; --rg: .205; }
.rack.r-zumrut, .ia-rack.r-zumrut { --rpt: .387; --rpb: .204; --rg: .209; }
.ia-rack.r-kilim, .ia-rack.r-cini, .ia-rack.r-telkari, .ia-rack.r-zumrut, .ia-rack.r-saf-altin { background: var(--ri) center / 100% 100% no-repeat !important; box-shadow: none !important; }
.ia-rack.r-kilim { --ri: url(img/istaka-kilim.webp); } .ia-rack.r-cini { --ri: url(img/istaka-cini.webp); } .ia-rack.r-telkari { --ri: url(img/istaka-telkari.webp); }
.ia-rack.r-zumrut { --ri: url(img/istaka-zumrut.webp); } .ia-rack.r-saf-altin { --ri: url(img/istaka-saf-altin.webp); }
.ia-rack { position: relative; overflow: hidden; }
.ia-rack.r-saf-altin::after, .ia-rack.r-zumrut::after, .ia-rack.r-altin::after { content: ""; position: absolute; inset: 0; mix-blend-mode: screen; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.7) 45%, transparent 60%) -150% 0 / 60% 100% no-repeat; animation: rackShine 2.8s ease-in-out infinite; }
/* rakip ıstakası: oyuncu kartının hemen altında, kenara taşmadan */
.seat { position: relative; }
.seat > .opp-rack { position: absolute; top: calc(100% + .6vh); left: 50%; transform: translateX(-50%); width: clamp(96px, 16vw, 150px); max-width: none; margin: 0; z-index: 4; }
.seat-left > .opp-rack { left: 0; transform: none; } .seat-right > .opp-rack { left: auto; right: 0; transform: none; }
.seat-top > .opp-rack { top: 50%; left: calc(100% + 1vw); transform: translateY(-50%); }
.opp-rack i { bottom: auto; top: calc(100% + .3vh); }
/* v2: ıstaka oyuncu kartının içinde, altta */
.player > .opp-rack { position: relative; top: auto; left: auto; right: auto; transform: none; display: block; width: 100%; min-width: 92px; max-width: 140px; margin: .6vh auto 1.8vh; }
.seat-top .player > .opp-rack { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); width: clamp(110px, 14vw, 160px); margin: 0; }
.seat-left .player > .opp-rack, .seat-right .player > .opp-rack { align-self: center; }
.seat-left .player > .opp-rack, .seat-right .player > .opp-rack { width: 100%; min-width: 0; max-width: 100%; margin: .8vh 0 2vh; }
.ch-send .ib, .ch-send .ib.big { flex: none; width: clamp(38px, 11vh, 46px); height: clamp(38px, 11vh, 46px); padding: 0; display: grid; place-items: center; border-radius: 12px; overflow: hidden; }
.ch-send .ib img { width: 82%; height: 82%; max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.ch-send input { flex: 1 1 auto; min-width: 60px; }

/* ===================== Bilardo masası (2026-10-24) ===================== */
.felt.m-bilardo .seat, .felt.m-bilardo .pile, .felt.m-bilardo .deck-area, .felt.m-bilardo .status-row, .felt.m-bilardo .timebar,
.felt.m-bilardo .bhand, .felt.m-bilardo .rack-wrap, .felt.m-bilardo .mzone, .felt.m-bilardo #trick, .felt.m-bilardo #dummy, .felt.m-bilardo #bidpanel { display: none !important; }
.felt.m-bilardo .center { position: absolute; inset: 0; z-index: 6; pointer-events: none; background: none; box-shadow: none; }
.felt.m-bilardo .center > * { pointer-events: auto; }
.felt.m-bilardo .center .event { top: auto; bottom: 1.4vh; left: 50%; transform: translateX(-50%); }
.felt.m-bilardo::before { background: url(img/bil/salon-bilardo.webp) center 30% / cover no-repeat, #120a05 !important; filter: brightness(.62); animation: none; will-change: auto; } /* Owner 2026-10-24: okey masası (çay, kültablası) değil, bilardo salonu */ /* blur + nefes animasyonu canvas'la birlikte her karede yeniden işleniyordu: telefonda kasma */
.bil { position: absolute; left: 0; right: 0; top: 52px; bottom: 0; z-index: 2; }
.bil-cv { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; touch-action: none; } /* tam ekran: ıstaka masanın dışına taşabilsin (masa yine ortadaki %74'te, bilardo.js resize) */
.bil-p { position: absolute; top: 1vh; width: 12.4vw; min-width: 96px; display: flex; flex-direction: column; align-items: center; gap: .6vh; padding: 1vh .6vw 1.2vh; border-radius: 14px;
  background: linear-gradient(180deg, rgba(40,20,8,.88), rgba(20,10,4,.92)); box-shadow: inset 0 0 0 1px rgba(242,193,78,.35), 0 .8vh 1.6vh rgba(0,0,0,.45); color: #fff3d6; text-align: center; }
.bil-p0 { left: .6vw; } .bil-p1 { right: .6vw; }
.bil-p.turn { box-shadow: inset 0 0 0 2px #ffd76a, 0 0 2vh rgba(255,210,90,.55); }
.bp-av { width: clamp(40px, 13vh, 64px); height: clamp(40px, 13vh, 64px); border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px #ffd76a; }
.bp-av img { width: 100%; height: 100%; object-fit: cover; }
.bp-t { display: flex; flex-direction: column; align-items: center; gap: .3vh; min-width: 0; width: 100%; }
.bp-t b { font-size: clamp(11px, 3.4vh, 15px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bp-t small { font-size: clamp(9px, 2.4vh, 11px); opacity: .75; }
.bp-t .badge { font-style: normal; }
.bp-grp { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.bp-open, .bp-next { font-size: clamp(9px, 2.6vh, 12px); color: #ffd76a; display: inline-flex; align-items: center; gap: 4px; }
.bp-score { font-size: clamp(12px, 3.6vh, 16px); } .bp-score b { font-size: 1.6em; color: #ffd76a; }
.bp-ballc { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset -3px -3px 5px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.3); }
.bp-timer { display: block; width: 90%; height: 5px; border-radius: 4px; background: rgba(255,255,255,.15); overflow: hidden; }
.bp-timer i { display: block; height: 100%; background: linear-gradient(90deg, #ff6b5b, #f2c14e, #7CFFB2); }
.bp-wait { font-size: 12px; opacity: .8; padding: 2vh 0; }
.mb { position: relative; display: inline-grid; place-items: center; width: clamp(14px, 4.6vh, 20px); height: clamp(14px, 4.6vh, 20px); border-radius: 50%; background: var(--c); font-style: normal;
  box-shadow: inset -2px -3px 4px rgba(0,0,0,.45), inset 2px 2px 3px rgba(255,255,255,.35); overflow: hidden; }
.mb.st { background: linear-gradient(180deg, #f6f1e2 0 26%, var(--c) 26% 74%, #f6f1e2 74%); }
.mb b { width: 60%; height: 60%; border-radius: 50%; background: #fbf8ee; color: #111; font: 700 clamp(7px, 2vh, 9px)/1 Fredoka, sans-serif; display: grid; place-items: center; }
.bil-msg { position: absolute; left: 50%; bottom: .8vh; transform: translateX(-50%); padding: .7vh 1.6vw; border-radius: 999px; background: rgba(20,10,4,.82); color: #ffe08a; font: 700 clamp(11px, 3.2vh, 15px) Fredoka, sans-serif; white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(242,193,78,.4); pointer-events: none; z-index: 3; }
.bil-msg[hidden] { display: none; }
/* son 10 saniye geri sayımı (Owner 2026-10-24) */
.bil-clock { position: absolute; left: 50%; top: 13%; transform: translateX(-50%); z-index: 4; pointer-events: none; display: flex; flex-direction: column; align-items: center;
  padding: .3vh 1.6vw; border-radius: 14px; background: rgba(20,10,4,.45); color: #ffe08a; text-shadow: 0 2px 6px rgba(0,0,0,.8); }
.bil-clock b { font: 700 clamp(26px, 11vh, 52px)/1 Fredoka, sans-serif; }
.bil-clock small { font: 600 clamp(10px, 3vh, 14px) Fredoka, sans-serif; opacity: .9; }
.bil-clock.mine b { color: #ff7a5c; animation: bilTik 1s ease-in-out infinite; }
.bil-clock[hidden] { display: none; }
/* hükmen sonuç kartı */
.res-hukmen { max-width: 440px; margin: 0 auto; line-height: 1.4; }
.res-hukmen.kotu { color: #ff9a85; font-weight: 600; }
@keyframes bilTik { 0% { transform: scale(1.18); } 30% { transform: scale(1); } }
.bil-power { position: absolute; right: 1.6vw; bottom: 3vh; top: 42vh; width: 8vw; min-width: 56px; display: flex; flex-direction: column; align-items: center; gap: .6vh; opacity: .35; pointer-events: none; touch-action: none; }
.bil.my-turn .bil-power { opacity: 1; pointer-events: auto; cursor: grab; }
.bp-track { position: relative; flex: 1; width: 42%; border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35)); box-shadow: inset 0 0 0 2px rgba(242,193,78,.55); }
.bp-fill { position: absolute; left: 0; right: 0; top: 0; height: 0; background: linear-gradient(180deg, #7CFFB2, #f2c14e 55%, #ff5b4b); }
.bp-cue { position: absolute; left: 50%; top: -8%; width: 360%; height: auto; transform-origin: 0 0; rotate: 90deg; translate: 50% 0; pointer-events: none; }
.bp-val { font: 700 clamp(9px, 2.6vh, 12px) Fredoka, sans-serif; color: #ffe08a; text-align: center; text-shadow: 0 1px 2px #000; }
.bil-fine { position: absolute; right: 1.2vw; top: 30vh; display: flex; gap: 4px; opacity: .35; pointer-events: none; }
.bil.my-turn .bil-fine { opacity: 1; pointer-events: auto; }
.bil-fine button { width: clamp(30px, 9vh, 40px); height: clamp(30px, 9vh, 40px); border: 0; border-radius: 10px; background: rgba(20,10,4,.82); color: #ffe08a; font-size: 14px; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(242,193,78,.45); }
.bil-spin { touch-action: none; position: absolute; left: 2.4vw; bottom: 3vh; width: clamp(44px, 14vh, 64px); height: clamp(44px, 14vh, 64px); border: 0; border-radius: 50%; cursor: pointer; padding: 0;
  background: radial-gradient(circle at 35% 30%, #fff, #e8e2d2 55%, #a59d8a); box-shadow: 0 0 0 3px rgba(242,193,78,.7), 0 .8vh 1.4vh rgba(0,0,0,.5); }
.bil-spin i, .sp-ball i { position: absolute; width: 18%; height: 18%; border-radius: 50%; background: #d62a2a; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px #fff; }
.bil-spinpad { position: absolute; left: 2vw; bottom: 3vh; z-index: 7; padding: 1.4vh; border-radius: 16px; background: rgba(20,10,4,.94); box-shadow: inset 0 0 0 1px rgba(242,193,78,.5), 0 1vh 2vh rgba(0,0,0,.6); display: flex; flex-direction: column; align-items: center; gap: 1vh; color: #f6e6c6; text-align: center; width: clamp(150px, 26vw, 220px); }
.bil-spinpad.hidden { display: none; }
.sp-ball { position: relative; width: clamp(90px, 34vh, 150px); aspect-ratio: 1; border-radius: 50%; cursor: crosshair; touch-action: none;
  background: radial-gradient(circle at 35% 30%, #fff, #ece6d6 55%, #9e9682); box-shadow: inset 0 0 0 1px rgba(0,0,0,.2), 0 .8vh 1.4vh rgba(0,0,0,.5); }
.sp-ball::before, .sp-ball::after { content: ""; position: absolute; background: rgba(0,0,0,.15); }
.sp-ball::before { left: 50%; top: 10%; bottom: 10%; width: 1px; } .sp-ball::after { top: 50%; left: 10%; right: 10%; height: 1px; }
.bil-spinpad small { font-size: 11px; line-height: 1.35; opacity: .85; }
@media (max-height: 480px) { .bil-p { width: 11.6vw; padding: .6vh .4vw; } .bp-t small { display: none; } }
.bp-cue { display: none; }
.felt > .bil { position: absolute !important; z-index: 2 !important; left: 0; right: 0; bottom: 0; }
.felt.m-bilardo > .center { position: absolute !important; z-index: 6 !important; }
/* Otomatik eşleşme / salon v2 (2026-10-25): Higgsfield salon zemini, resimli oyun sekmeleri, vitrin kartları */
.salon { background: linear-gradient(180deg, rgba(14,6,2,.35), rgba(14,6,2,.78)), url(img/ui3/salon.webp) center / cover !important; }
.salon > .tabs { background: rgba(20,10,3,.72); box-shadow: inset 0 0 0 1px rgba(242,193,78,.45), 0 .8vh 1.6vh rgba(0,0,0,.45); width: min(640px, 100%); }
.salon .tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: #f6e2bf; }
.salon .tab.active { color: #3a2400; }
.tab-art { height: clamp(18px, 6vh, 30px); width: auto; filter: drop-shadow(0 2px 2px rgba(0,0,0,.45)); }
.salon .tcard { background: linear-gradient(180deg, rgba(40,20,8,.9), rgba(18,8,3,.94)); box-shadow: 0 0 0 2px #c9993c, 0 0 0 4px rgba(58,28,6,.9), 0 1.4vh 2.6vh rgba(0,0,0,.55); border-radius: 16px; overflow: hidden; transition: transform .2s; }
.salon .tcard:hover { transform: translateY(-.6vh); }
.salon .tcard .art { border-bottom: 2px solid #c9993c; }
.salon .tcard h3 { font: 400 clamp(18px, 6vh, 28px)/1 Lobster, cursive; color: #ffd86b; text-shadow: 0 .3vh 0 #6b2c04; }
/* bilardo mesajı üstte, olay yazısıyla çakışmasın */
.bil-msg { bottom: auto; top: .6vh; }
.bil-fine { top: auto; bottom: 3vh; right: calc(1.6vw + max(8vw, 56px) + 8px); }
/* Bilardo ıstakası (mağaza/çanta): uzun yatay görsel, hafif eğik */
.ia-sopa { display: flex; align-items: center; justify-content: flex-start; width: 100%; height: 44px; overflow: hidden; }
.ia-sopa img { width: 245%; max-width: none; flex: none; transform: rotate(-9deg); transform-origin: 0 50%; margin-left: 4%; filter: drop-shadow(0 3px 3px rgba(0,0,0,.45)); }
.prod-art .ia-sopa { height: 100%; }
.bag-big .ia-sopa { height: 90px; }
/* Bilardo masası listede 2 kişilik: oyuncular karşılıklı (sol/sağ) */
.rm.m-bilardo .rm-s.s0 { grid-column: 1; grid-row: 2; } .rm.m-bilardo .rm-s.s1 { grid-column: 3; grid-row: 2; }
.hk-kotu { color: #ff9a85; font-weight: 600; }
/* Davet et, kazan (2026-10-24) */
.dv { display: flex; flex-direction: column; gap: 10px; }
.dv-hero { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 16px; color: #fff3d6; background: linear-gradient(135deg, #7a4212, #4a2208); box-shadow: inset 0 0 0 2px #e9b04a; }
.dv-hero img { width: 64px; height: 64px; object-fit: contain; flex: none; }
.dv-hero b { display: block; font-size: clamp(16px, 4.6vh, 21px); color: #ffe08a; }
.dv-hero small { font-size: 13px; opacity: .92; }
.dv-link { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: rgba(255,240,200,.1); box-shadow: inset 0 0 0 1px rgba(233,176,74,.4); }
.dv-link code { flex: 1; min-width: 160px; font-size: 16px; font-weight: 700; color: #ffe08a; }
.dv-sum { font-size: 15px; color: #f6e2bf; } .dv-sum b { color: #ffe08a; }
.dv .frow { position: relative; }
.dv-bar { width: 90px; height: 10px; border-radius: 99px; background: #c9d6e8; overflow: hidden; flex: none; }
.dv-bar i { display: block; height: 100%; background: linear-gradient(90deg, #2e9e5b, #7CFFB2); }
/* Sezon yolu (2026-10-24) */
.sz { display: flex; flex-direction: column; gap: 10px; color: #f6e2bf; }
.sz-head { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 16px; background: linear-gradient(135deg, #7a4212, #4a2208); box-shadow: inset 0 0 0 2px #e9b04a; }
.sz-lv { flex: none; width: 74px; height: 74px; border-radius: 50%; display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; align-content: center;
  background: radial-gradient(circle at 40% 30%, #ffe08a, #b07a0e); color: #4a2600; box-shadow: 0 0 0 3px #6b3a12, 0 .5vh 1vh rgba(0,0,0,.4); }
.sz-lv small { font-size: 11px; font-weight: 700; } .sz-lv small:first-child { width: 100%; text-align: center; } .sz-lv b { font-size: 28px; line-height: 1; }
.sz-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sz-mid > b { font-size: 18px; color: #ffe08a; }
.sz-time { font-size: 13px; opacity: .9; margin-left: 8px; }
.sz-bar { height: 16px; } .sz-how { font-size: 12px; opacity: .8; }
.sz-gold { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; background: rgba(255,224,138,.12); box-shadow: inset 0 0 0 1px rgba(233,176,74,.5); font-size: 14px; }
.sz-gold span { flex: 1; } .sz-gold.on { justify-content: center; color: #ffe08a; font-weight: 700; }
.sz-track { display: flex; gap: 8px; overflow-x: auto; padding: 6px 2px 10px; scroll-snap-type: x proximity; }
.sz-rows { position: sticky; left: 0; z-index: 2; flex: none; display: flex; flex-direction: column; justify-content: space-between; padding: 6px 0; background: linear-gradient(90deg, rgba(40,20,8,.95) 70%, transparent); }
.sz-lab { width: 64px; height: 96px; display: grid; place-items: center; text-align: center; font-weight: 700; font-size: 13px; border-radius: 12px; }
.sz-lab.f { color: #cfe8ff; } .sz-lab.g { color: #ffe08a; }
.sz-col { flex: none; width: 104px; display: flex; flex-direction: column; align-items: center; gap: 6px; scroll-snap-align: center; }
.sz-n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: #3a2414; color: #c9a77a; box-shadow: inset 0 0 0 2px #6b4a2a; }
.sz-col.reached .sz-n { background: linear-gradient(180deg, #ffe08a, #f2b632); color: #4a2600; box-shadow: none; }
.sz-col.next .sz-n { box-shadow: 0 0 0 3px #7CFFB2; color: #fff; }
.sz-c { position: relative; width: 100%; height: 96px; border: 0; border-radius: 14px; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: default;
  font-family: Fredoka, sans-serif; color: #4a2600; background: linear-gradient(180deg, #fffaf0, #e9d6ae); box-shadow: inset 0 0 0 1px rgba(122,90,60,.3); }
.sz-c.g { background: linear-gradient(180deg, #fff3c4, #f2c45a); }
.sz-c small { font-size: 11px; font-weight: 700; line-height: 1.15; text-align: center; }
.sz-c .ia { height: 44px; overflow: hidden; } .sz-c .ia-e img { width: 40px; height: 40px; object-fit: contain; } .sz-c .sav.mid { width: 42px; height: 42px; }
.sz-c .ia-rack { width: 60px; height: 24px; } .sz-c .ia-felt { width: 46px; height: 34px; } .sz-c .ia-sopa { height: 40px; }
.sz-col.big .sz-c { box-shadow: inset 0 0 0 2px #b07a0e, 0 0 10px rgba(255,200,80,.5); }
.sz-c.wait, .sz-c.lock { filter: saturate(.5) brightness(.75); }
.sz-c.ready { cursor: pointer; animation: szPulse 1.4s ease-in-out infinite; }
@keyframes szPulse { 50% { box-shadow: 0 0 0 3px #7CFFB2, 0 0 16px rgba(124,255,178,.7); } }
.sz-c.done { opacity: .6; }
.sz-ok, .sz-lock { position: absolute; top: 4px; right: 6px; font-style: normal; font-size: 14px; }
.sz-ok { color: #2e9e5b; font-weight: 700; }
@media (max-height: 460px) { .sz-head { padding: 6px 10px; } .sz-lv { width: 56px; height: 56px; } .sz-lv b { font-size: 22px; } .sz-c, .sz-lab { height: 80px; } .sz-col { width: 92px; } }
.rm { position: relative; }
/* Bilardo turnuvası (2026-10-24) */
.tur { display: flex; flex-direction: column; gap: 10px; color: #f6e2bf; }
.tur-seg { align-self: center; }
.tur-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: linear-gradient(135deg, #1d5c3a, #0e3420); box-shadow: inset 0 0 0 2px #e9b04a; }
.tur-head img { width: 54px; height: 54px; object-fit: contain; }
.tur-head > div { flex: 1; display: flex; flex-direction: column; } .tur-head b { font-size: 19px; color: #ffe08a; } .tur-head small { font-size: 13px; opacity: .9; }
.tur-prize { flex: none !important; flex-direction: row !important; gap: 8px; } .tur-prize span { padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.3); font-weight: 700; color: #ffe08a; }
.tur-st { text-align: center; font-weight: 700; color: #ffe08a; }
.tur-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tp { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 5px 8px; border-radius: 10px; background: rgba(255,240,200,.1); font-size: 13px; }
.tp b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tp .bot { font-style: normal; font-size: 9px; padding: 1px 4px; border-radius: 4px; background: #4c5be0; color: #fff; }
.tp.empty { justify-content: center; opacity: .5; min-height: 36px; } .tp.me { box-shadow: inset 0 0 0 2px #7CFFB2; }
.tp.win { background: rgba(46,158,91,.35); } .tp.win b { color: #b8ffd3; } .tp.lose, .tp.out { opacity: .5; } .tp.lose b { text-decoration: line-through; }
.tur-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.tur-br { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 10px; overflow-x: auto; align-items: start; }
.tc { display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; align-self: stretch; }
.tc h4 { margin: 0; text-align: center; color: #ffe08a; font-size: 14px; }
.tm { display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 12px; background: rgba(0,0,0,.25); box-shadow: inset 0 0 0 1px rgba(233,176,74,.3); }
.tm.live { box-shadow: inset 0 0 0 2px #ff6b5a; } .tm .btn { align-self: center; padding: 3px 10px; font-size: 12px; }
.tchamp { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px; border-radius: 16px; font-size: 34px; background: radial-gradient(circle, rgba(255,224,138,.25), transparent 70%); }
.tchamp b { font-size: 17px; color: #ffe08a; } .tchamp small { font-size: 12px; opacity: .8; } .tchamp.wait { opacity: .5; }
@media (max-width: 700px) { .tur-slots { grid-template-columns: repeat(2, 1fr); } }

/* ===================== Tavla masası (2026-10-25, rakipli) ===================== */
.felt.m-tavla .seat, .felt.m-tavla .pile, .felt.m-tavla .deck-area, .felt.m-tavla .status-row, .felt.m-tavla .timebar,
.felt.m-tavla .bhand, .felt.m-tavla .rack-wrap, .felt.m-tavla .mzone, .felt.m-tavla #trick, .felt.m-tavla #dummy, .felt.m-tavla #bidpanel { display: none !important; }
.felt.m-tavla > .center { position: absolute !important; inset: 0; z-index: 6 !important; pointer-events: none; background: none; box-shadow: none; }
.felt.m-tavla .center > * { pointer-events: auto; }
.felt.m-tavla .center .event { top: auto; bottom: 1vh; left: 50%; transform: translateX(-50%); }
.felt.m-tavla::before { background: url(img/tavla/salon.webp) center 62% / cover no-repeat, #120a05 !important; filter: brightness(.5) saturate(1.05); animation: none; will-change: auto; }
.rm.m-tavla .rm-s.s0 { grid-column: 1; grid-row: 2; } .rm.m-tavla .rm-s.s1 { grid-column: 3; grid-row: 2; }

.tv { position: absolute !important; left: 0; right: 0; top: 52px; bottom: 0; z-index: 2 !important; display: grid; grid-template-columns: minmax(118px, 1fr) auto minmax(118px, 1fr); align-items: center; gap: 1.2vw; padding: 1vh 1.2vw 1.4vh;
  background: radial-gradient(ellipse 70% 80% at 50% 55%, transparent 40%, rgba(10,4,0,.5)); }
.tv-boardwrap { height: 100%; display: grid; place-items: center; min-width: 0; }
.tv-board { position: relative; height: min(100%, calc((100vw - 300px) / 1.4286)); aspect-ratio: 2000 / 1400; border-radius: 1.6vh; box-shadow: 0 2.4vh 4vh rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.6), 0 0 6vh rgba(255,170,80,.12); }
.tv-wood { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; display: block; user-select: none; -webkit-user-drag: none; }
.tv-svg { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.tv-sh { fill: rgba(0,0,0,.38); filter: blur(5px); pointer-events: none; }
.tv-svg image { pointer-events: none; }
.tv-src { fill: rgba(255,215,106,.22); stroke: #ffd76a; stroke-width: 16; pointer-events: none; animation: tvSrc 1.2s ease-in-out infinite; }
.tv-sel { fill: rgba(124,255,178,.28); stroke: #7CFFB2; stroke-width: 20; pointer-events: none; }
@keyframes tvSrc { 50% { stroke-opacity: .35; fill-opacity: .4; } }
.tv .gbtn { top: .6vh; right: .6vh; left: auto; bottom: auto; transform: none; }
.tv-dest { fill: rgba(124,255,178,.28); stroke: #7CFFB2; stroke-width: 5; pointer-events: none; animation: tvDest 1s ease-in-out infinite; }
@keyframes tvDest { 50% { fill: rgba(124,255,178,.12); } }
.tv-ghost { fill: rgba(124,255,178,.35); stroke: #7CFFB2; stroke-width: 5; stroke-dasharray: 14 10; pointer-events: none; }
.tv-cnt { font: 700 44px Fredoka, sans-serif; text-anchor: middle; pointer-events: none; }
.tv-cnt.W { fill: #4a2a12; } .tv-cnt.B { fill: #f5e6c8; }
.tv-offp { stroke-width: 2; } .tv-offp.W { fill: #efe4cc; stroke: #9c8a62; } .tv-offp.B { fill: #4a2814; stroke: #170a03; }
.tv-offn { font: 700 40px Fredoka, sans-serif; fill: #ffe08a; text-anchor: middle; paint-order: stroke; stroke: rgba(0,0,0,.7); stroke-width: 6px; }
.tv-fly { transition: transform .32s cubic-bezier(.3,.7,.3,1); filter: drop-shadow(10px 22px 10px rgba(0,0,0,.5)); }

/* zarlar: oynayanın yarısında, tahtanın ortasında */
.tv-dice { position: absolute; top: 50%; display: flex; gap: 1.4vh; transform: translateY(-50%); pointer-events: none; z-index: 3; }
.tv-dice.r { left: 73%; transform: translate(-50%, -50%); } .tv-dice.l { left: 27.5%; transform: translate(-50%, -50%); }
.tv-dice.open { left: 0; right: 0; justify-content: space-around; padding: 0 12%; }
.tv-dl { display: flex; flex-direction: column; align-items: center; }
.tv-die { --s: clamp(28px, 10.4vh, 58px); width: var(--s); height: var(--s); display: block; transform: rotate(var(--rot, 0deg)); transition: opacity .2s, transform .2s;
  filter: drop-shadow(.5vh .9vh .7vh rgba(0,0,0,.55)); }
.tv-die img { width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.tv-die.sm { --s: clamp(22px, 7.6vh, 42px); }
.tv-die.used { opacity: .4; transform: rotate(var(--rot, 0deg)) scale(.86); filter: grayscale(.6) drop-shadow(.3vh .5vh .5vh rgba(0,0,0,.4)); }
.tv-dice.rolling .tv-die { animation: tvRoll .7s cubic-bezier(.2,.8,.3,1) both; }
.tv-dice.rolling .tv-die:nth-child(2) { animation-delay: .06s; } .tv-dice.rolling .tv-die:nth-child(3) { animation-delay: .1s; } .tv-dice.rolling .tv-die:nth-child(4) { animation-delay: .14s; }
.tv-dice.rolling .tv-dl .tv-die { animation-delay: 0s; }
@keyframes tvRoll { 0% { transform: translate(-60px, -40px) rotate(-260deg) scale(1.25); opacity: 0; } 55% { transform: translate(6px, 4px) rotate(18deg) scale(1.04); opacity: 1; } 75% { transform: translate(-2px, -2px) rotate(-6deg); } 100% { transform: rotate(var(--rot, 0deg)); } }

/* oyuncu kartları */
.tv-side { height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 1.4vh; min-width: 0; }
.tv .tv-p.player { position: relative; display: flex; flex-direction: column; align-items: center; gap: .6vh; padding: 1.2vh .8vw 1.4vh; border-radius: 16px; min-width: 0; width: auto; height: auto; margin: 0; transform: none;
  background: linear-gradient(180deg, rgba(48,24,10,.9), rgba(22,11,4,.94)); box-shadow: inset 0 0 0 1px rgba(242,193,78,.35), 0 .8vh 1.8vh rgba(0,0,0,.5); color: #fff3d6; text-align: center; cursor: pointer; }
.tv .tv-p.empty { display: grid; place-items: center; min-height: 18vh; border-radius: 16px; background: rgba(20,10,4,.6); box-shadow: inset 0 0 0 1px rgba(242,193,78,.25); color: #f3dfb8; }
.tvp-wait { display: flex; flex-direction: column; align-items: center; gap: .6vh; font: 600 clamp(11px, 3vh, 14px) Fredoka, sans-serif; }
.tvp-hour { font-size: 2em; }
.tv .tv-p.turn { box-shadow: inset 0 0 0 2px #ffd76a, 0 0 2.4vh rgba(255,210,90,.55); }
.tv .tv-p.speaking .tvp-av { box-shadow: 0 0 0 3px #7CFFB2, 0 0 2vh #7CFFB2; }
.tvp-av { position: relative; flex: none; width: clamp(42px, 15vh, 74px); height: clamp(42px, 15vh, 74px); border-radius: 50%; box-shadow: 0 0 0 2px #ffd76a; }
.tvp-av > img, .tvp-av > span, .tvp-av > div { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; object-fit: cover; display: block; }
.tvp-ring { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); transform: rotate(-90deg); pointer-events: none; overflow: visible; }
.tvp-ring circle { fill: none; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 0 289; transition: stroke-dasharray .25s linear, stroke .3s; }
.tvp-t { display: flex; flex-direction: column; align-items: center; gap: .35vh; min-width: 0; width: 100%; }
.tvp-t > b { font: 700 clamp(12px, 3.6vh, 16px) Fredoka, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tvp-t small { font-size: clamp(10px, 2.6vh, 12px); opacity: .8; }
.tvp-t .badge { font-style: normal; }
.tvp-st { display: flex; align-items: center; gap: .6vw; font-size: clamp(9px, 2.5vh, 12px); color: #f3dfb8; flex-wrap: wrap; justify-content: center; }
.tvp-st img { width: clamp(14px, 4.4vh, 20px); height: clamp(14px, 4.4vh, 20px); }
.tvp-st b { color: #ffd76a; }
.tvp-w { font-size: clamp(9px, 2.4vh, 11px); color: #c9b38a; }
.tvp-bub { position: absolute; left: 50%; max-width: 22vw; padding: .8vh 1vw; border-radius: 12px; background: #fff8e6; color: #3a2008; font: 600 clamp(10px, 2.8vh, 13px) Fredoka, sans-serif; box-shadow: 0 .6vh 1.2vh rgba(0,0,0,.4); z-index: 5; animation: tvBub .25s ease-out; white-space: normal; width: max-content; }
.tv-me .tvp-bub { bottom: 100%; transform: translate(-50%, -.6vh); }
.tv-op .tvp-bub { top: 100%; transform: translate(-50%, .6vh); }
@keyframes tvBub { from { opacity: 0; scale: .8; } }

/* düğmeler */
.tv-act { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 1.6vh; min-width: 0; }
.tv-act button[hidden], .tv-msg[hidden], .tv-hint[hidden] { display: none !important; }
.tv-roll { display: flex; flex-direction: column; align-items: center; gap: .8vh; padding: 1.6vh 1vw 1.4vh; border: 0; border-radius: 18px; cursor: pointer; color: #4a2600; font: 700 clamp(14px, 4.6vh, 22px) Fredoka, sans-serif;
  background: linear-gradient(180deg, #ffe58a, #f2b630 55%, #d88a10); box-shadow: 0 .7vh 0 #8a5404, 0 1.4vh 2.4vh rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.6); animation: tvPulse 1.4s ease-in-out infinite; }
.tv-roll:active { transform: translateY(.5vh); box-shadow: 0 .2vh 0 #8a5404, 0 .6vh 1.2vh rgba(0,0,0,.45); }
.tv-roll-d { display: flex; gap: .8vh; }
.tv-roll-d i { width: clamp(18px, 6vh, 30px); height: clamp(18px, 6vh, 30px); border-radius: 22%; background: radial-gradient(circle, #2a1608 26%, transparent 30%) center / 100% 100% no-repeat, #fffaf0; box-shadow: 0 2px 4px rgba(0,0,0,.35); rotate: -12deg; }
.tv-roll-d i + i { rotate: 14deg; background: radial-gradient(circle, #2a1608 24%, transparent 28%) 0 0 / 50% 50%, #fffaf0; }
@keyframes tvPulse { 50% { box-shadow: 0 .7vh 0 #8a5404, 0 0 3vh rgba(255,215,106,.85), inset 0 2px 0 rgba(255,255,255,.6); } }
.tv-undo, .tv-ok { padding: 1.4vh .8vw; border: 0; border-radius: 14px; cursor: pointer; font: 700 clamp(12px, 3.6vh, 17px) Fredoka, sans-serif; }
.tv-undo { background: linear-gradient(180deg, #8a5a32, #5e3a1c); color: #ffe8c4; box-shadow: 0 .5vh 0 #3a2210, 0 1vh 1.6vh rgba(0,0,0,.4); }
.tv-ok { background: linear-gradient(180deg, #8ef0a8, #3fbf68); color: #0b3a1a; box-shadow: 0 .5vh 0 #1f7a3e, 0 1vh 1.6vh rgba(0,0,0,.4); }
.tv-undo:disabled, .tv-ok:disabled { opacity: .45; cursor: default; filter: grayscale(.4); }
.tv-ok.pulse { animation: tvPulse 1s ease-in-out infinite; }
.tv-hint { text-align: center; padding: .8vh .6vw; border-radius: 12px; background: rgba(20,10,4,.78); color: #ffe08a; font: 600 clamp(10px, 3vh, 14px) Fredoka, sans-serif; box-shadow: inset 0 0 0 1px rgba(242,193,78,.35); }
.tv-msg { position: absolute; left: 50%; top: 1vh; transform: translateX(-50%); padding: .7vh 1.6vw; border-radius: 999px; background: rgba(20,10,4,.84); color: #ffe08a; font: 700 clamp(11px, 3.2vh, 15px) Fredoka, sans-serif; white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(242,193,78,.4); pointer-events: none; z-index: 4; }
.tv-clock { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; pointer-events: none; display: flex; flex-direction: column; align-items: center; padding: .4vh 1.6vw; border-radius: 14px; background: rgba(20,10,4,.55); color: #ffe08a; text-shadow: 0 2px 6px rgba(0,0,0,.8); }
.tv-clock b { font: 700 clamp(26px, 11vh, 52px)/1 Fredoka, sans-serif; } .tv-clock small { font: 600 clamp(10px, 3vh, 14px) Fredoka, sans-serif; }
.tv-clock.mine b { color: #ff7a5c; animation: bilTik 1s ease-in-out infinite; }
.tv-clock[hidden] { display: none; }
.tv.watch .tv-act, body.watching .tv-act { visibility: hidden; }
@media (max-height: 480px) {
  .tv { gap: .8vw; padding: .6vh .8vw 1vh; grid-template-columns: minmax(104px, 1fr) auto minmax(104px, 1fr); }
  .tvp-w { display: none; }
  .tv .tv-p.player { padding: .8vh .5vw 1vh; gap: .3vh; }
}

/* ===================== Mini oyunlar vitrini (2026-10-25) ===================== */
.mx { display: flex; flex-direction: column; gap: 1.6vh; padding: .6vh 1vw 2vh; height: 100%; box-sizing: border-box; }
.mx-bar { display: flex; align-items: center; gap: 1.2vw; padding: 1vh 1.4vw; border-radius: 14px; background: linear-gradient(90deg, rgba(60,30,8,.9), rgba(30,14,4,.85)); box-shadow: inset 0 0 0 1px rgba(242,193,78,.35); color: #f6e6c6; font: 600 clamp(11px, 3vh, 14px) Fredoka, sans-serif; flex-wrap: wrap; }
.mx-bar-t { color: #ffd76a; font-weight: 700; }
.mx-bar-s b { color: #ffd76a; }
.mx-dots { display: flex; gap: 5px; } .mx-dots i { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(242,193,78,.5); }
.mx-dots i.on { background: radial-gradient(circle at 35% 30%, #fff3b0, #f2b630 60%, #b07208); box-shadow: 0 0 6px rgba(255,210,90,.7); }
.mx-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: 1.6vh 1.4vw; }
.mx-hero { grid-row: 1 / 3; position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 1.2vh 2.6vh rgba(0,0,0,.55), inset 0 0 0 2px rgba(242,193,78,.55); isolation: isolate; min-height: 0; }
.mx-hero-art { position: absolute; inset: 0; z-index: -2; background: url(img/tavla/kart.webp) center / cover no-repeat; transform: scale(1.04); animation: mxPan 18s ease-in-out infinite alternate; }
.mx-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(18,8,2,.95) 0%, rgba(18,8,2,.86) 50%, rgba(18,8,2,.35) 78%, rgba(18,8,2,.1) 100%); }
@keyframes mxPan { to { transform: scale(1.12) translateX(2%); } }
.mx-hero-in { position: relative; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.2vh; padding: 2.4vh 2vw; max-width: 64%; color: #f6e6c6; }
.mx-live { display: inline-flex; align-items: center; gap: 6px; padding: .5vh 1vw; border-radius: 999px; background: rgba(20,60,30,.85); color: #9dffb9; font: 700 clamp(10px, 2.7vh, 13px) Fredoka, sans-serif; box-shadow: inset 0 0 0 1px rgba(124,255,178,.5); }
.mx-live i { width: 8px; height: 8px; border-radius: 50%; background: #3cff7a; box-shadow: 0 0 8px #3cff7a; animation: tvDest 1.2s infinite; }
.mx-hero-t { font: 400 clamp(30px, 13vh, 62px)/1 Lobster, cursive; color: #ffd76a; text-shadow: 0 .6vh 1.4vh rgba(0,0,0,.7); }
.mx-hero-in small { font: 500 clamp(11px, 3vh, 15px)/1.35 Fredoka, sans-serif; opacity: .92; }
.mx-hero-b { display: flex; gap: 1vw; flex-wrap: wrap; margin-top: .6vh; }
.mx-go { border: 0; cursor: pointer; padding: 1.4vh 1.8vw; border-radius: 14px; color: #4a2600; font: 700 clamp(13px, 4vh, 19px) Fredoka, sans-serif;
  background: linear-gradient(180deg, #ffe58a, #f2b630 55%, #d88a10); box-shadow: 0 .6vh 0 #8a5404, 0 1.2vh 2vh rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.6); animation: tvPulse 1.6s ease-in-out infinite; }
.mx-go:active, .mx-sec:active { transform: translateY(.4vh); }
.mx-sec { border: 0; cursor: pointer; padding: 1.4vh 1.4vw; border-radius: 14px; color: #ffe8c4; font: 700 clamp(12px, 3.6vh, 17px) Fredoka, sans-serif; background: linear-gradient(180deg, #8a5a32, #5e3a1c); box-shadow: 0 .6vh 0 #3a2210, 0 1vh 1.6vh rgba(0,0,0,.4); }
.mx-train { border: 0; background: none; cursor: pointer; padding: .4vh 0; color: #e8d2a6; font: 600 clamp(10px, 2.8vh, 13px) Fredoka, sans-serif; text-decoration: underline; text-underline-offset: 3px; opacity: .85; }
.mx-card { position: relative; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr auto; align-items: center; gap: .8vh; padding: 1.6vh 1.4vw; border: 0; border-radius: 20px; cursor: pointer; text-align: left; min-height: 0; overflow: hidden;
  box-shadow: 0 1vh 2vh rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,255,255,.25); transition: transform .15s; font-family: Fredoka, sans-serif; }
.mx-card:hover { transform: translateY(-.6vh); }
.mx-card:active { transform: translateY(.2vh); }
.mx-esl { background: radial-gradient(ellipse at 70% 20%, rgba(255,255,255,.18), transparent 60%), linear-gradient(160deg, #2c6b4a, #174a31 60%, #0f3322); }
.mx-brl { background: radial-gradient(ellipse at 70% 20%, rgba(255,255,255,.18), transparent 60%), linear-gradient(160deg, #6a3a8a, #48236a 60%, #2e1448); }
.mx-prev { display: flex; align-items: center; justify-content: center; gap: .6vw; min-height: 0; }
.mx-prev em { font: 700 clamp(14px, 4.6vh, 22px) Fredoka, sans-serif; color: #fff3d6; font-style: normal; opacity: .85; }
.mx-t { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: clamp(24px, 9vh, 44px); height: clamp(32px, 12.6vh, 60px); border-radius: 18%; font-style: normal;
  background: linear-gradient(180deg, #fffaf0, #efe4cc); box-shadow: 0 .5vh 0 #c9b48a, 0 1vh 1.4vh rgba(0,0,0,.4); }
.mx-t b { font: 700 clamp(13px, 5vh, 26px)/1 Fredoka, sans-serif; }
.mx-t u { width: 18%; aspect-ratio: 1; border-radius: 50%; margin-top: 8%; background: currentColor; }
.mx-t.r { color: #d0302a; } .mx-t.b { color: #1f5fc4; } .mx-t.y { color: #c98a08; } .mx-t.k { color: #1d1d1d; }
.mx-esl .mx-t:nth-child(1) { rotate: -8deg; } .mx-esl .mx-t:nth-child(2) { rotate: 6deg; translate: 0 -.6vh; box-shadow: 0 0 0 3px #7CFFB2, 0 .5vh 0 #c9b48a, 0 1vh 1.4vh rgba(0,0,0,.4); } .mx-esl .mx-t:nth-child(1) { box-shadow: 0 0 0 3px #7CFFB2, 0 .5vh 0 #c9b48a, 0 1vh 1.4vh rgba(0,0,0,.4); }
.mx-esl .mx-t:nth-child(4) { rotate: 4deg; } .mx-esl .mx-t:nth-child(6) { rotate: -5deg; }
.mx-prev2 .mx-t:last-child { box-shadow: 0 0 0 3px #ffd76a, 0 0 2vh rgba(255,215,106,.8), 0 .5vh 0 #c9b48a; scale: 1.12; }
.mx-ct { display: flex; flex-direction: column; gap: .3vh; color: #fff3d6; padding-right: 5.6vw; }
.mx-ct b { font: 400 clamp(16px, 5.4vh, 26px)/1.1 Lobster, cursive; color: #ffe08a; text-shadow: 0 .3vh .8vh rgba(0,0,0,.5); }
.mx-ct small { font-size: clamp(10px, 2.7vh, 13px); opacity: .9; }
.mx-play { position: absolute; right: 1.2vw; bottom: 1.6vh; padding: .7vh 1vw; border-radius: 999px; background: rgba(255,255,255,.92); color: #3a2008; font: 700 clamp(10px, 2.8vh, 13px) Fredoka, sans-serif; box-shadow: 0 .4vh 0 rgba(0,0,0,.25); }
@media (max-height: 480px) { .mx-hero-in small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mx { gap: 1.2vh; } }
@media (orientation: portrait) { .mx-grid { grid-template-columns: 1fr; grid-template-rows: auto auto auto; } .mx-hero { grid-row: auto; min-height: 36vh; } .mx-hero-in { max-width: 100%; } }

.tv-die.half { opacity: .72; }

/* Owner 2026-10-26: mağaza/çanta ıstaka önizlemesi — ince şerit yerine ıstakanın sol ucunun yakın görünümü, iki rafta taşlar.
   Taşlar gerçek masadaki raf ölçüsüyle (--rpt/--rg/--rpb, .rack.r-* ile ortak) oturur; boy kutunun yüksekliğinden (cqh). */
.ia-rack { --rpt: .271; --rpb: .529; --rg: 0; }
.ia.ia-rack[class] { container-type: size; display: block !important; aspect-ratio: 1.6 !important; width: min(100%, 200px) !important;
  background-size: 375% 100% !important; background-position: left center !important; border-radius: 0 !important; filter: drop-shadow(0 .6vh .8vh rgba(0,0,0,.5)); }
.ia.ia-rack.r-krem { --rpt: .05; --rpb: .312; --rg: .218; } .ia.ia-rack.r-mese { --rpt: .051; --rpb: .298; --rg: .051; }
.ia-rack i { --th: calc(100cqh / (var(--rpt) + 2 + var(--rg) + var(--rpb))); position: absolute; display: grid !important; place-items: start center; align-content: start;
  width: calc(var(--th) / 1.39); height: var(--th); padding-top: calc(var(--th) * .1); box-sizing: border-box; border-radius: calc(var(--th) * .1); box-shadow: none;
  background: url(img/tas.webp) center / 100% 100% no-repeat; font: 700 calc(var(--th) * .46) / 1 Arial, sans-serif; letter-spacing: -.05em;
  filter: drop-shadow(0 calc(var(--th) * .03) calc(var(--th) * .04) rgba(0,0,0,.5)); }
.ia-rack i::after { content: ""; width: calc(var(--th) * .13); height: calc(var(--th) * .13); border-radius: 50%; background: currentColor; margin-top: calc(var(--th) * .08); }
.ia-rack i.c0 { color: #c62424; } .ia-rack i.c2 { color: #1f56b3; } .ia-rack i.c3 { color: #161616; }
.ia-rack i:nth-child(-n+3) { top: calc(var(--th) * var(--rpt)); }
.ia-rack i:nth-child(n+4) { top: calc(var(--th) * (var(--rpt) + 1 + var(--rg))); }
.ia-rack i:nth-child(1), .ia-rack i:nth-child(4) { left: 17%; }
.ia-rack i:nth-child(2), .ia-rack i:nth-child(5) { left: calc(17% + var(--th) * .76); }
.ia-rack i:nth-child(3) { left: calc(17% + var(--th) * 1.52); }
.lk .ia.ia-rack[class], .sz-c .ia.ia-rack[class] { width: auto !important; height: 100% !important; }

.bag-big .ia.ia-rack[class] { width: 190px !important; } /* .bag-big içeriğine göre daralıyor: yüzde genişlik 0 kalıyordu, büyük önizleme hiç görünmüyordu */