/* Rekor Oyun - ortak kart stili - ver 0.2 (2026-10-25)
 * Görsel dil Okey / 101 Okey ile aynı: yeşil desenli masa, Bebas Neue + Poppins, Okey'in ikon düğmeleri
 * (ortak/tema/ - embed/okey/img'den kopya), altın menü düğmeleri, koyu-yeşil kenarlı pencereler.
 * Kart ölçüleri --kg (kart genişliği) değişkenine bağlı; yükseklik 1,4 x genişlik. */
:root{
	--masa: rgba(6,92,55,1);
	--masa-koyu: rgba(0,39,25,1);
	--yazi: #fff;
	--kirmizi: #d1202f;
	--siyah: #1b1f2a;
	--arka1: #b8222e;
	--arka2: #8e1621;
	--renkli: #f2b134;
	--yesil: #36ff00;
	--kg: 80px;
	--ust-h: clamp(46px, 8.5vmin, 68px);     /* üst bant */
	--ib: calc(var(--ust-h) - 12px);          /* bant düğmesi */
	font-family: 'Poppins', "Segoe UI", Roboto, Arial, sans-serif;
}
*{ box-sizing: border-box; }
html, body{ margin: 0; height: 100%; overflow: hidden; }
body{
	background: url('tema/pattern.png'), radial-gradient(circle, var(--masa) 0%, var(--masa-koyu) 100%);
	color: var(--yazi);
	user-select: none; -webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	touch-action: none;
}
button{ font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }

/* ---------- üst bant (Okey'deki gibi: solda bilgi, sağda ikon düğmeleri) ---------- */
#ust{
	position: absolute; left: 0; right: 0; top: 0; height: var(--ust-h);
	display: flex; align-items: center; gap: 6px; padding: 0 8px;
	z-index: 20000; font-family: 'Bebas Neue', sans-serif;
}
#ust .sag{ margin-left: auto; display: flex; align-items: center; gap: 6px; }
/* Okey'in kare parlak düğmeleri (button-new.svg turkuaz, button-settings.svg sarı) */
.ikon-b{
	width: var(--ib); height: var(--ib); flex: none;
	background: center / 100% 100% no-repeat;
	filter: drop-shadow(0 2px 3px rgba(0,0,0,.35));
	transition: transform .1s;
}
.ikon-b:active{ transform: translateY(1px) scale(.97); }
.ikon-b.yeni{ background-image: url('tema/button-new.svg'); }
.ikon-b.ayar{ background-image: url('tema/button-settings.svg'); }
.ikon-b.puan{ background-image: url('tema/button-scores.svg'); }
/* Okey'in siyah "TAŞLARI GÖR / SERİ DİZ" düğmeleri gibi */
.koyu-b{
	height: var(--ib); padding: 0 calc(var(--ib) * .32); flex: none;
	display: flex; align-items: center; gap: calc(var(--ib) * .16);
	border-radius: calc(var(--ib) * .16);
	background: linear-gradient(180deg, #3d3d3d 0%, #1d1d1d 52%, #0e0e0e 100%);
	box-shadow: 0 3px 0 #000, inset 0 1px 0 rgba(255,255,255,.18), 0 4px 8px rgba(0,0,0,.35);
	color: #fff; font-family: 'Bebas Neue', sans-serif; font-size: calc(var(--ib) * .52); line-height: 1;
	white-space: nowrap; padding-top: 2px;
}
.koyu-b svg{ width: calc(var(--ib) * .5); height: calc(var(--ib) * .5); fill: #fff; flex: none; margin-top: -2px; }
.koyu-b:active{ transform: translateY(2px); box-shadow: 0 1px 0 #000, inset 0 1px 0 rgba(255,255,255,.18); }
.koyu-b:disabled{ opacity: .4; cursor: default; transform: none; }
/* Okey'deki oyuncu kutusu gibi bilgi kutusu */
/* yardım hakkı rozeti (ipucu / geri al): kalan hak; sıradaki hak reklamlıysa önünde oynat simgesi */
.koyu-b{ position: relative; }
.koyu-b .hak{
	position: absolute; top: -5px; right: -7px;   /* bandın üst boşluğu (~6 px) içinde kalsın, kırpılmasın */
	min-width: calc(var(--ib) * .4); height: calc(var(--ib) * .4); padding: 0 .25em;
	display: flex; align-items: center; justify-content: center; gap: .15em;
	border-radius: 999px; background: #1ed94f; color: #062b12; box-shadow: 0 1px 3px rgba(0,0,0,.5);
	font-family: 'Poppins', sans-serif; font-weight: 700; font-style: normal; font-size: calc(var(--ib) * .26); line-height: 1;
}
.koyu-b .hak.reklam{ background: var(--renkli); color: #3a2500; }
.koyu-b .hak.reklam::before{ content: ''; border-style: solid; border-width: .32em 0 .32em .5em; border-color: transparent transparent transparent currentColor; }
.koyu-b:disabled .hak{ background: #777; color: #222; }
/* sonuç penceresi: rekor kayıt formu */
.kk-rekor-form{ display: flex; gap: 6px; margin-top: 10px; }
.kk-rekor-form input{
	flex: 1 1 auto; min-width: 0; height: clamp(34px, 6vmin, 44px); padding: 0 10px; border-radius: 8px;
	border: 2px solid #3d3d3d; background: #111; color: #fff; font: 600 clamp(14px, 2.4vmin, 18px) 'Poppins', sans-serif;
}
.kk-rekor-form input:focus{ outline: none; border-color: #1ed94f; }
.kk-rekor-form .kk-b{ flex: none; margin: 0; }
.kk-rekor-durum{ min-height: 1.2em; margin-top: 6px; color: #ccc; font-size: clamp(12px, 2vmin, 14px); }
/* ortak rekor tablosu katmanı (embed/score HTML'i içine yüklenir) */
#rekor-kap{ position: fixed; inset: 0; z-index: 40000; background: #f5f5f5; overflow: hidden; }
#rekor-kap .rekor-yukleniyor{ position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); text-align: center; font: 18px/1.6 'Poppins', sans-serif; color: #555; }
#rekor-kap .rekor-yukleniyor button{ margin-top: 10px; height: 40px; padding: 0 1.2em; border-radius: 6px; background: #1b7d3a; color: #fff; font-family: 'Bebas Neue', sans-serif; font-size: 20px; }

/* oyun özellikleri (Okey #game-properties): yeşil kutucuk + gri simge, değer varsa yanında; dokununca/üstüne gelince açıklama */
.ozellikler{ display: flex; align-items: center; gap: calc(var(--ib) * .1); height: var(--ib); min-width: 0; }
.ozellik{
	position: relative; flex: none;
	display: flex; align-items: center; gap: calc(var(--ib) * .1);
	height: calc(var(--ib) * .74); min-width: calc(var(--ib) * .74);
	padding: 0 calc(var(--ib) * .13); border-radius: calc(var(--ib) * .18);
	background: linear-gradient(to right, #044c2e, #022f1d);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 2px 4px rgba(0,0,0,.25);
	cursor: default; -webkit-tap-highlight-color: transparent;
}
.ozellik .ik{ width: calc(var(--ib) * .46); height: calc(var(--ib) * .46); flex: none; background: center / contain no-repeat; }
.ozellik b{ font-weight: normal; color: #e9ecf5; font-size: calc(var(--ib) * .5); line-height: 1; padding-top: .12em; font-variant-numeric: tabular-nums; }
.ik.cekis{ background-image: url('tema/ikon-cekis.svg'); }
.ik.gunun{ background-image: url('tema/ikon-gunun.svg'); }
.ik.hamle{ background-image: url('tema/ikon-hamle.svg'); }
.ik.sure{ background-image: url('tema/ikon-sure.svg'); }
.ik.el{ background-image: url('tema/ikon-el.svg'); }
.ik.puan{ background-image: url('tema/icon-settings-Points.svg'); }
.ik.takim{ background-image: url('tema/icon-settings-Team-off.svg'); }
.esli > .ik.takim{ background-image: url('tema/icon-settings-Team.svg'); }
.ozellik[data-ipucu]::after{
	content: attr(data-ipucu);
	position: absolute; left: 0; top: calc(100% + 5px);
	background: rgba(0,0,0,.9); color: #fff; white-space: nowrap;
	font-family: 'Poppins', sans-serif; font-size: clamp(11px, 1.7vmin, 14px); line-height: 1.2;
	padding: .45em .7em; border-radius: 6px;
	opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 5;
}
.ozellik:hover::after, .ozellik.ipucu::after{ opacity: 1; }
/* Okey'in sarı kupa düğmesi (button-scores.svg): puan tablosu / istatistik */
.skor-b{ width: calc(var(--ib) * .74); height: calc(var(--ib) * .74); flex: none; background: url('tema/button-scores.svg') center / auto 100% no-repeat; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.skor-b:active{ transform: scale(.92); }
.kk-icerik .gecmis td{ padding: 2px 8px; }
.bilgi-kutu{
	height: var(--ib); display: flex; align-items: center; gap: calc(var(--ib) * .35);
	padding: 0 calc(var(--ib) * .3); border-radius: 5px;
	background: rgba(0,0,0,.27); border: 1px solid rgba(255,255,255,.85);
	box-shadow: 0 3px 6px rgba(0,0,0,.2), inset 0 0 14px rgba(31,173,13,.45);
	font-family: 'Bebas Neue', sans-serif; font-size: calc(var(--ib) * .5); letter-spacing: .02em; white-space: nowrap;
	padding-top: 2px;
}
.bilgi-kutu b{ font-weight: normal; color: #ffeb3b; font-variant-numeric: tabular-nums; }
@media (max-width: 520px){ #ust .koyu-b .y{ display: none; } #ust .koyu-b{ padding: 0 calc(var(--ib) * .24); } }
@media (max-width: 420px){ #ust .dar-gizle{ display: none; } #ust, #ust .sag{ gap: 5px; } #ust{ padding: 0 6px; } }

/* ---------- masa ---------- */
#masa{ position: absolute; left: 0; right: 0; top: var(--ust-h); bottom: 0; overflow: hidden; }

/* ---------- oyuncu kutusu (Okey .user: beyaz halkalı avatar + ince çerçeveli isim kutusu) ---------- */
.oyuncu{
	--oy: clamp(34px, 8.4vmin, 64px);
	position: absolute; z-index: 15000; display: flex; align-items: center; pointer-events: none;
}
.oyuncu .avatar{
	width: var(--oy); height: var(--oy); border-radius: 50%; flex: none; position: relative; z-index: 1;
	background: #fff center / 88% no-repeat;
	box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.oyuncu .ad-kutu{
	margin-left: calc(var(--oy) * -.42); padding: 2px calc(var(--oy) * .22) 0 calc(var(--oy) * .55);
	height: calc(var(--oy) * .8); min-width: calc(var(--oy) * 2.2);
	display: flex; flex-direction: column; justify-content: center;
	background: rgba(0,0,0,.27); border: 1px solid #fff; border-radius: 4px;
	box-shadow: 0 4px 8px rgba(0,0,0,.2), inset 0 0 14px rgba(31,173,13,.5);
	white-space: nowrap; line-height: 1.25;
}
.oyuncu .ad{ font-size: calc(var(--oy) * .23); }
.oyuncu .skor{ font-size: calc(var(--oy) * .21); color: #ffeb3b; }
.oyuncu.aktif .avatar{ box-shadow: 0 0 0 3px #30ff00, 0 0 16px rgba(48,255,0,.6); }
.oyuncu.aktif .ad-kutu{ border-color: #30ff00; box-shadow: 0 0 18px rgba(31,173,13,.55), inset 0 0 8px 2px rgba(31,173,13,.5); }
.oyuncu.aktif .ad{ color: #30ff00; }

/* deste sayacı (Okey'deki kalan taş rozeti) */
.rozet{
	position: absolute; z-index: 14000; pointer-events: none;
	min-width: calc(var(--kg) * .38); height: calc(var(--kg) * .38); padding: 0 4px;
	border-radius: 999px; background: #1b1b1b; border: 2px solid #3a3a3a;
	display: flex; align-items: center; justify-content: center;
	font-weight: 600; font-size: calc(var(--kg) * .19); color: #fff;
	box-shadow: 0 2px 5px rgba(0,0,0,.5);
	transform: translate(-50%, -50%);
}

/* ---------- kart ---------- */
.kart{
	position: absolute; left: 0; top: 0;
	width: var(--kg); height: calc(var(--kg) * 1.4);
	transform-origin: 0 0;
	transition: transform .28s cubic-bezier(.25,.8,.35,1);
	cursor: pointer; touch-action: none;
	perspective: calc(var(--kg) * 8);
}
.kart.animsiz, .kart.surukle{ transition: none !important; }
.kart.ucuyor{ pointer-events: none; }
.kart.surukle .ic{ box-shadow: 0 calc(var(--kg)*.08) calc(var(--kg)*.18) rgba(0,0,0,.45); }
.kart .ic{
	position: absolute; inset: 0;
	transition: transform .3s ease;
	transform-style: preserve-3d;
	border-radius: calc(var(--kg) * .08);
	box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.kart:not(.acik) .ic{ transform: rotateY(180deg); }
.kart .on, .kart .arka{
	position: absolute; inset: 0; border-radius: inherit;
	backface-visibility: hidden; -webkit-backface-visibility: hidden;
	overflow: hidden;
}
.kart .on{ background: #fdfdfb; border: 1px solid #c9c9c2; }
.kart .arka{
	transform: rotateY(180deg);
	font-size: var(--kg);   /* desen ölçüleri em = kart genişliği */
	border: .045em solid #fff;
	background-color: var(--arka2);
	background-image: var(--arka-desen), linear-gradient(var(--arka1), var(--arka2));
	background-size: var(--arka-boy), 100% 100%;
	background-position: var(--arka-konum), 0 0;
	box-shadow: var(--arka-golge);
}
/* deste arkası: renk (arka-*) ve desen (desen-*) <html>'e konur (KartKabuk.arka); önizlemede sarmalayıcıya.
 * Desen değişkenleri yalnız em ve sabit renk içerir: kullanıldığı kartın boyuna göre çözülür. */
:root, .arka-kirmizi{ --arka1: #b8222e; --arka2: #8e1621; }
.arka-mavi{ --arka1: #2c62c4; --arka2: #173f8a; }
.arka-yesil{ --arka1: #1f9150; --arka2: #11603a; }
.arka-mor{ --arka1: #7a3cc4; --arka2: #4d2287; }
.arka-siyah{ --arka1: #41454f; --arka2: #17191d; }
:root, .desen-capraz{
	--arka-desen: repeating-linear-gradient(45deg, rgba(255,255,255,.14) 0 .04em, transparent .04em .08em),
		repeating-linear-gradient(-45deg, rgba(255,255,255,.14) 0 .04em, transparent .04em .08em);
	--arka-boy: auto, auto; --arka-konum: 0 0, 0 0; --arka-golge: none;
}
.desen-baklava{
	--arka-desen: linear-gradient(45deg, rgba(255,255,255,.16) 25%, transparent 25% 75%, rgba(255,255,255,.16) 75%),
		linear-gradient(-45deg, rgba(255,255,255,.16) 25%, transparent 25% 75%, rgba(255,255,255,.16) 75%);
	--arka-boy: .2em .2em, .2em .2em; --arka-konum: 0 0, 0 0; --arka-golge: none;
}
.desen-nokta{
	--arka-desen: radial-gradient(circle, rgba(255,255,255,.32) .028em, transparent .034em),
		radial-gradient(circle, rgba(255,255,255,.32) .028em, transparent .034em);
	--arka-boy: .13em .13em, .13em .13em; --arka-konum: 0 0, .065em .065em; --arka-golge: none;
}
.desen-cerceve{
	--arka-desen: radial-gradient(circle, rgba(255,255,255,.2) 0 .17em, transparent .175em .2em, rgba(255,255,255,.2) .205em .215em, transparent .22em);
	--arka-boy: 100% 100%; --arka-konum: 0 0;
	--arka-golge: inset 0 0 0 .05em rgba(0,0,0,.22), inset 0 0 0 .07em rgba(255,255,255,.5);
}
.kart.kirmizi .on{ color: var(--kirmizi); }
.kart.siyah .on{ color: var(--siyah); }
.kart.joker .on{ color: #6b2fb3; }

.kose{
	position: absolute; display: flex; flex-direction: column; align-items: center;
	line-height: .95; width: 17%;
}
/* gerçek kartlardaki gibi köşe simgesi piplerden belirgin küçük; köşe dar, pip sütunları içeride (karışmasın) */
.kose b{ font-size: calc(var(--kg) * .22); font-weight: 700; letter-spacing: -.04em; }
.kose i{ font-style: normal; font-size: calc(var(--kg) * .13); margin-top: 1px; }
.kose.ust{ left: 2.5%; top: 3%; }
.kose.alt{ right: 2.5%; bottom: 3%; transform: rotate(180deg); }
.pip{
	position: absolute; font-style: normal; line-height: 1;
	font-size: calc(var(--kg) * .18);
	transform: translate(-50%, -50%);
}
.pip.ters{ transform: translate(-50%, -50%) rotate(180deg); }
.as{
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	font-size: calc(var(--kg) * .55); line-height: 1;
}
.resim{
	position: absolute; left: 22%; right: 22%; top: 16%; bottom: 16%;
	border: 1px solid currentColor; border-radius: calc(var(--kg) * .05);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	background: linear-gradient(160deg, rgba(242,177,52,.22), rgba(242,177,52,.05));
}
.resim b{ font-size: calc(var(--kg) * .34); line-height: 1; }
.resim i{ font-style: normal; font-size: calc(var(--kg) * .26); line-height: 1; }
.joker .resim b{ font-size: calc(var(--kg) * .14); }
.orta{ display: none; }

/* küçük kartta (dar ekran) pipler yerine tek büyük sembol */
.kucuk-kart .pip, .kucuk-kart .resim{ display: none; }
.kucuk-kart .orta{
	display: block; position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%);
	font-size: calc(var(--kg) * .5); line-height: 1;
}
.kucuk-kart .as{ top: 58%; }
.kucuk-kart .as + .orta{ display: none; }
.kucuk-kart .kose.alt{ display: none; }
.kucuk-kart .kose{ width: auto; flex-direction: row; gap: 1px; align-items: baseline; }
.kucuk-kart .kose b{ font-size: calc(var(--kg) * .3); }
.kucuk-kart .kose i{ font-size: calc(var(--kg) * .24); }

/* ---------- resimli kart setleri (byron / fomin) ---------- */
.gorsel, .kose-buyuk{ display: none; }
.set-resim .on > :not(.gorsel):not(.kose-buyuk){ display: none; }
/* görseller kenar çizgisiz üretilir (_araclar/cevir.py); kenarı her sette aynı biçimde CSS çizer */
.set-resim .kart .on{ border: 1px solid #c9c9c2; background: #fff; }
.set-resim .gorsel{
	display: block; position: absolute; inset: 0;
	background: center / 100% 100% no-repeat;
}
/* küçük ekranda gerçek kartın köşe yazısı okunmaz: üstüne büyük köşe yazısı */
.kucuk-kart.set-resim .kose-buyuk{
	display: flex; flex-direction: column; align-items: center;
	position: absolute; left: 0; top: 0;
	width: 40%; padding: 3% 0 4%;
	background: #fff; border-bottom-right-radius: calc(var(--kg) * .12);
	line-height: .92;
}
.kose-buyuk b{ font-size: calc(var(--kg) * .34); font-weight: 700; letter-spacing: -.05em; }
.kose-buyuk i{ font-style: normal; font-size: calc(var(--kg) * .3); }

/* ---------- boş yuva ---------- */
.yuva{
	position: absolute; left: 0; top: 0; transform-origin: 0 0;
	width: var(--kg); height: calc(var(--kg) * 1.4);
	/* Okey'in taş bırakma alanları gibi: yarı saydam koyu, ince kenar */
	background: rgba(0,0,0,.17); border: 1px solid rgba(255,255,255,.16); border-radius: calc(var(--kg) * .08);
	box-shadow: inset 0 0 calc(var(--kg) * .12) rgba(0,0,0,.25);
	display: flex; align-items: center; justify-content: center;
	color: rgba(255,255,255,.28); font-family: 'Bebas Neue', sans-serif; font-size: calc(var(--kg) * .42); padding-top: 3%;
	cursor: pointer;
}

/* ---------- geri bildirim ---------- */
.kart.salla .ic{ animation: salla .35s; }
@keyframes salla{ 20%{ transform: translateX(-6%); } 40%{ transform: translateX(6%); } 60%{ transform: translateX(-4%); } 80%{ transform: translateX(3%); } }
/* ipucu: oynanacak kart sarı nabızla parlar, konacağı kart yeşil çerçeve alır (kalıcı; hamle yapılınca söner) */
.kart.isaret .ic{ animation: isaret-nabiz 1s ease-in-out infinite; }
.kart.isaret-hedef .ic{ animation: isaret-hedef 1s ease-in-out infinite; }
@keyframes isaret-nabiz{
	0%, 100%{ box-shadow: 0 0 0 max(3px, calc(var(--kg) * .04)) #ffd23f, 0 0 max(8px, calc(var(--kg) * .12)) max(2px, calc(var(--kg) * .03)) rgba(255,210,63,.7); }
	50%{ box-shadow: 0 0 0 max(5px, calc(var(--kg) * .07)) #ffd23f, 0 0 max(16px, calc(var(--kg) * .4)) max(5px, calc(var(--kg) * .12)) rgba(255,210,63,.95); }
}
@keyframes isaret-hedef{
	0%, 100%{ box-shadow: 0 0 0 max(3px, calc(var(--kg) * .04)) #36ff00, 0 0 max(8px, calc(var(--kg) * .1)) rgba(54,255,0,.55); }
	50%{ box-shadow: 0 0 0 max(4px, calc(var(--kg) * .06)) #36ff00, 0 0 max(14px, calc(var(--kg) * .32)) max(3px, calc(var(--kg) * .08)) rgba(54,255,0,.85); }
}
@media (prefers-reduced-motion: reduce){
	.kart.isaret .ic{ animation: none; box-shadow: 0 0 0 calc(var(--kg) * .06) #ffd23f, 0 0 calc(var(--kg) * .3) rgba(255,210,63,.9); }
	.kart.isaret-hedef .ic{ animation: none; box-shadow: 0 0 0 calc(var(--kg) * .05) #36ff00; }
}
.kart.soluk .on{ filter: brightness(.68); }

/* ---------- pencere (Okey #message-box) ---------- */
.kk-katman{
	position: fixed; inset: 0; z-index: 30000;
	background: rgba(0,0,0,.6);
	display: flex; align-items: center; justify-content: center; padding: 12px;
}
.kk-katman.seffaf{ background: rgba(0,0,0,.12); }   /* arkada animasyon oynarken (Solitaire zafer kaskadı) */
.kk-pencere{
	position: relative;
	background: linear-gradient(0deg, rgb(43,43,43) 0%, rgb(18,16,11) 100%); color: #fff;
	border: 2px solid #1ed94f; border-radius: clamp(10px, 2vmin, 18px);
	box-shadow: 0 0 6vmin 0 rgba(186,255,0,.14);
	width: min(420px, 100%); max-height: 100%; overflow: auto;
	padding: clamp(10px, 2vmin, 18px) clamp(14px, 3vmin, 24px); text-align: center;
}
.kk-baslik{ font-family: 'Bebas Neue', sans-serif; color: var(--yesil); font-size: clamp(26px, 5.4vmin, 44px); line-height: 1.15; letter-spacing: .02em; margin-bottom: 6px; }
.kk-icerik{ font-size: clamp(13px, 2.2vmin, 16px); line-height: 1.45; margin-bottom: 12px; color: #eee; }
.kk-icerik b{ color: #fff; }
.kk-icerik table{ width: 100%; border-collapse: collapse; margin-top: 4px; }
/* puan sayma animasyonu (KartKabuk.puanSay) */
.kk-icerik tr.say-satir{ opacity: 0; transform: translateX(-12px); transition: opacity .25s, transform .25s; }
.kk-icerik tr.say-satir.gorun{ opacity: 1; transform: none; }
.kk-icerik tr.say-satir.vurgu td{ background: rgba(255,235,59,.13); }
.kk-icerik .say-ek{ display: inline-block; margin-left: .25em; color: #ffeb3b; font-weight: 700; transform: scale(0); transition: transform .3s cubic-bezier(.3,1.7,.5,1); }
.kk-icerik .say-ek.gorun{ transform: scale(1); }
.kk-icerik tr.say-toplam td.lider{ color: #ffeb3b; }
.kk-icerik tr.say-toplam td.lider b{ text-shadow: 0 0 8px rgba(255,235,59,.6); }
/* oyun sonu kazanan kutusu: taçlı profil resmi(ler) + ad; sayım bitince fırlayarak gelir */
.kk-kazanan{
	--kav: clamp(38px, 9vmin, 66px);
	display: flex; align-items: center; justify-content: center; gap: 12px;
	width: max-content; max-width: 100%; margin: calc(var(--kav) * .38) auto 2px; padding: 6px 18px 6px 8px;
	border-radius: 999px; border: 2px solid var(--renkli);
	background: linear-gradient(90deg, rgba(255,215,64,.22), rgba(255,215,64,.04));
	box-shadow: 0 0 18px rgba(242,177,52,.45);
}
.kk-kazanan .avlar{ display: flex; position: relative; flex: none; }
.kk-kazanan .avlar i{
	width: var(--kav); height: var(--kav); border-radius: 50%; flex: none;
	background: #fff center / 88% no-repeat; border: 3px solid var(--renkli); box-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.kk-kazanan .avlar i + i{ margin-left: calc(var(--kav) * -.28); }
.kk-kazanan .avlar::before{
	content: ''; position: absolute; z-index: 2; left: calc(var(--kav) * .5); top: calc(var(--kav) * -.4);
	width: calc(var(--kav) * .6); height: calc(var(--kav) * .5); transform: translateX(-50%) rotate(-14deg);
	background: url('tema/icon-crown.svg') center / contain no-repeat; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4));
}
.kk-kazanan .yazi{ display: flex; flex-direction: column; align-items: flex-start; text-align: left; line-height: 1.05; min-width: 0; }
.kk-kazanan em{ font-style: normal; font-family: 'Bebas Neue', sans-serif; font-size: clamp(13px, 2.2vmin, 17px); letter-spacing: .08em; color: var(--renkli); }
.kk-kazanan b{ font-family: 'Bebas Neue', sans-serif; font-weight: normal; font-size: clamp(22px, 4.6vmin, 36px); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.kk-kazanan span{ font-size: clamp(11px, 1.8vmin, 14px); color: #ccc; }
.say-sonuc.goster .kk-kazanan{ animation: kazanan-gel .6s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes kazanan-gel{ 0%{ transform: scale(.3); opacity: 0; } 100%{ transform: scale(1); opacity: 1; } }
/* kısa yatay ekran (ör. 568x320): kazanan kutusu tablonun sağında, dikey */
@media (max-height: 420px) and (min-aspect-ratio: 1/1){
	.kk-pencere.kk-oyunsonu{ width: min(640px, 100%); }
	.kk-oyunsonu .kk-icerik{ display: flex; align-items: center; gap: 14px; }
	.kk-oyunsonu .kk-icerik table{ flex: 1 1 auto; }
	.kk-oyunsonu .say-sonuc{ flex: none; max-width: 38%; }
	.kk-oyunsonu .kk-kazanan{ flex-direction: column; gap: 6px; border-radius: 16px; padding: 10px 12px; margin: calc(var(--kav) * .3) 0 0; }
	.kk-oyunsonu .kk-kazanan .yazi{ align-items: center; text-align: center; }
}

/* puan sayımında masadaki yığından tablodaki hücreye uçan kart */
.kk-ucan{ position: fixed; left: 0; top: 0; z-index: 30005; pointer-events: none; transform-origin: 50% 50%; will-change: transform; }
.kk-ucan.uc{ transition: transform .46s cubic-bezier(.25,.75,.3,1); }
.kk-ucan.vardi{ opacity: 0; transition: opacity .25s; }
.kk-ucan .kk-ornek{ --kg: inherit; }
.kk-ucan .kart .ic{ box-shadow: 0 4px 10px rgba(0,0,0,.55); }
.kk-icerik .say{ display: inline-block; }
.kk-icerik .say.vurus{ animation: say-vurus .35s ease-out; }
@keyframes say-vurus{ 0%{ transform: scale(1); } 40%{ transform: scale(1.5); color: #ffeb3b; } 100%{ transform: scale(1); } }
.kk-icerik td{ padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,.12); text-align: left; }
.kk-icerik td + td{ text-align: right; font-variant-numeric: tabular-nums; }
.kk-icerik tr:last-child td{ border-bottom: 0; color: #ffeb3b; }
.kk-dugmeler{ display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.kk-b{
	flex: 1 1 0; min-width: 120px; max-width: 220px; height: clamp(38px, 6vmin, 50px);
	border-radius: 8px; font-family: 'Bebas Neue', sans-serif; font-size: clamp(19px, 3vmin, 26px); padding-top: 2px;
	color: #fff; text-shadow: 0 2px 3px rgba(0,0,0,.56);
	background: linear-gradient(180deg, rgb(116,116,117) 38%, rgb(96,96,97) 57%);
	box-shadow: 0 3px 5px rgba(0,0,0,.34), inset 0 1px 5px rgba(255,255,255,.25);
}
.kk-b.renkli{ background: linear-gradient(180deg, rgba(102,189,32,1) 30%, rgba(53,117,0,1) 57%); box-shadow: 0 3px 5px rgba(0,0,0,.34), inset 0 1px 5px #b1ff6b; }
.kk-kapat{ position: absolute; top: 8px; right: 8px; width: clamp(28px, 4.6vmin, 38px); height: clamp(28px, 4.6vmin, 38px); background: url('tema/settings-close.svg') center / 100% no-repeat; }
@media (max-height: 420px){
	.kk-katman{ padding: 6px; }
	.kk-icerik{ font-size: 13px; line-height: 1.3; margin-bottom: 8px; }
	.kk-icerik td{ padding: 1px 6px; }
}

/* ---------- ayarlar (Okey #settings) ---------- */
.kk-ayarlar{ width: min(560px, 100%); text-align: left; padding-bottom: clamp(12px, 2.4vmin, 20px); }
.kk-ayarlar .kk-baslik{ text-align: center; }
.kk-satir{
	display: flex; align-items: center; gap: 10px;
	background: #2c2c2c; border-radius: 6px; margin-top: 8px;
	padding: clamp(6px, 1.4vmin, 10px) clamp(8px, 1.6vmin, 14px);
}
.kk-satir .yazi{ flex: 1 1 auto; min-width: 0; }
.kk-satir .yazi b{ display: block; font-family: 'Bebas Neue', sans-serif; font-weight: normal; font-size: clamp(18px, 3.2vmin, 26px); line-height: 1.05; }
.kk-satir .yazi em{ display: block; font-style: normal; color: #ccc; font-size: clamp(10px, 1.7vmin, 13px); line-height: 1.3; }
.kk-satir .secim{ display: flex; gap: 4px; flex: none; }
.kk-secim-b{
	width: clamp(64px, 11vmin, 92px); height: clamp(30px, 5vmin, 40px); padding-top: 2px;
	background: url('tema/settings-button-passive.svg') center / 100% 100% no-repeat; color: #797979;
	font-family: 'Bebas Neue', sans-serif; font-size: clamp(15px, 2.6vmin, 21px);
}
.kk-secim-b.sec{ background-image: url('tema/settings-button-active.svg'); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.kk-anahtar{ width: clamp(56px, 9vmin, 76px); height: clamp(30px, 5vmin, 40px); flex: none; background: url('tema/settings-switch-off.svg') center / 100% 100% no-repeat; }
.kk-anahtar.acik{ background-image: url('tema/settings-switch-on.svg'); }
@media (max-width: 460px){
	.kk-satir{ flex-wrap: wrap; }
	.kk-satir .secim{ width: 100%; }
	.kk-secim-b{ flex: 1; }
}

/* ayarlarda örnek kartlı seçenek (kart seti, deste rengi/deseni) */
.kk-satir .secim.ornekli{ gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.kk-ornek-b{
	display: flex; flex-direction: column; align-items: center; gap: 3px;
	padding: 5px 5px 4px; border-radius: 8px; min-width: 0;
	background: #1d1d1d; border: 2px solid #3d3d3d; color: #8c8c8c;
	font-family: 'Bebas Neue', sans-serif; font-size: clamp(13px, 2.3vmin, 18px); line-height: 1;
}
.kk-ornek-b.sec{ border-color: var(--renkli); background: #33301f; color: #fff; }
.kk-ornek{ --kg: clamp(26px, 5.6vmin, 42px); display: flex; justify-content: center; pointer-events: none; }
.kk-ornek .kart{ position: relative; flex: none; transition: none; }
.kk-ornek .kart .ic{ transition: none; }
.kk-ornek .kart:first-child:not(:last-child){ transform: rotate(-7deg); transform-origin: 50% 100%; }
.kk-ornek .kart + .kart{ margin-left: calc(var(--kg) * -.45); transform: rotate(8deg); transform-origin: 50% 100%; }
@media (max-width: 460px){
	.kk-satir .secim.ornekli{ justify-content: space-between; }
	.kk-ornek-b{ flex: 1; }
}

/* ---------- başlangıç ekranı (Okey #start-screen) ---------- */
.kk-baslangic{
	position: fixed; inset: 0; z-index: 25000;
	background: url('tema/pattern.png'), radial-gradient(circle, rgba(5,81,49,1) 0%, rgba(0,42,26,1) 100%);
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vmin;
	padding: 12px; font-family: 'Bebas Neue', sans-serif;
}
.kk-baslangic .kapat{ position: absolute; top: 1vmin; right: 1vmin; width: clamp(42px, 8vmin, 64px); height: clamp(42px, 8vmin, 64px); background: url('tema/start-screen-close.svg') center / cover no-repeat; }
.kk-logo{ --yh: clamp(70px, 17vmin, 150px); position: relative; display: flex; flex-direction: column; align-items: center; }
.kk-logo .yelpaze{ position: relative; height: var(--yh); width: calc(var(--yh) * 2.1); margin-bottom: calc(var(--yh) * -.4); }
.kk-logo .yelpaze i{
	position: absolute; left: 50%; bottom: 0; width: calc(var(--yh) * .72); aspect-ratio: 5 / 7;
	background: #fff center / 100% 100% no-repeat; border-radius: 8%; box-shadow: 0 4px 12px rgba(0,0,0,.4);
	transform-origin: 50% 100%;
}
.kk-logo .yelpaze i:nth-child(1){ transform: translateX(-50%) translateX(-58%) rotate(-14deg); }
.kk-logo .yelpaze i:nth-child(2){ transform: translateX(-50%) translateY(-6%); }
.kk-logo .yelpaze i:nth-child(3){ transform: translateX(-50%) translateX(58%) rotate(14deg); }
.kk-logo .ad{
	position: relative; font-family: 'Poppins', sans-serif; font-weight: 800; color: #fff;
	font-size: clamp(38px, 10.5vmin, 104px); line-height: 1; letter-spacing: -.01em;
	-webkit-text-stroke: .07em #e8901f; paint-order: stroke fill;
	text-shadow: 0 .07em 0 #b9661a, 0 .12em 0 #8a4a12, 0 .18em .2em rgba(0,0,0,.45);
	/* Ş/Ç çengeli + kalın kenar + 3B gölge kutunun altına taşar (~.4em): altındaki seçicilere binmesin */
	margin-bottom: .4em;
}
.kk-logo .rozet-yazi{
	position: absolute; left: 0; top: calc(var(--yh) * .45); z-index: 1;
	font-family: 'Poppins', sans-serif; font-weight: 800; font-size: clamp(13px, 3.2vmin, 28px); color: #fff;
	-webkit-text-stroke: .2em #e5487c; paint-order: stroke fill; text-shadow: 0 .14em 0 #9e2550;
	transform: rotate(-4deg);
}
.kk-menu{
	background: radial-gradient(circle, rgba(5,81,49,1) 0%, rgba(0,42,26,1) 100%);
	border-radius: 2vmin; padding: 1vmin; box-shadow: inset 0 0 18px rgba(0,0,0,.35);
	--sb: clamp(220px, 44vmin, 380px);
}
.kk-menu-b{
	display: block; width: var(--sb); height: calc(var(--sb) * .2425); margin: 1vmin auto;
	background: center / 100% 100% no-repeat; color: #441908; text-align: left;
	font-size: calc(var(--sb) * .1); padding: calc(var(--sb) * .014) 0 0 calc(var(--sb) * .34);
	filter: drop-shadow(0 3px 2px rgba(0,0,0,.35));
}
.kk-menu-b:active{ transform: translateY(2px); }
.kk-menu-b.i-1p{ background-image: url('tema/start-1p.svg'); }
.kk-menu-b.i-2p{ background-image: url('tema/start-2p.svg'); }
.kk-menu-b.i-online{ background-image: url('tema/start-online.svg'); }
.kk-menu-b.i-ayar{ background-image: url('tema/start-settings.svg'); }
/* alçak yatay ekran: logo solda, menü sağda */
@media (min-aspect-ratio: 1/1) and (max-height: 520px){
	.kk-baslangic{ flex-direction: row; gap: 5vw; }
	.kk-menu{ --sb: clamp(200px, 36vw, 340px); }
	.kk-menu-b{ margin: 1.6vh auto; }
}

.kk-baslangic .sag-kolon{ display: flex; flex-direction: column; align-items: center; gap: 2vmin; }
.kk-menu-b.i-kural{ background-image: url('tema/start-kural.svg'); }
.kk-menu-b.i-yeni{ background-image: url('tema/start-yeni.svg'); }     /* oynat */
.kk-menu-b.i-gunun{ background-image: url('tema/start-gunun.svg'); }   /* takvim */
.kk-menu-b.i-rekor{ background-image: url('tema/start-rekor.svg'); }   /* kupa: rekor tablosu */
/* başlangıç ekranı seçicileri: oyuncu sayısı (parçalı) + Okey'in TEK/EŞLİ anahtarı */
.kk-secimler{ display: flex; flex-direction: column; align-items: center; gap: 1.2vmin; --sc: clamp(30px, 5.4vmin, 46px); }
.kk-parca{
	display: flex; padding: 3px; gap: 3px; border-radius: calc(var(--sc) * .3);
	background: #062c1b; box-shadow: inset 0 2px 6px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.08);
}
.kk-parca button{
	height: var(--sc); min-width: calc(var(--sc) * 2.3); padding: 2px calc(var(--sc) * .3) 0;
	border-radius: calc(var(--sc) * .24); color: #8bbf77;
	font-family: 'Bebas Neue', sans-serif; font-size: calc(var(--sc) * .62); letter-spacing: .02em;
}
.kk-parca button.sec{
	color: #441908;
	background: linear-gradient(180deg, #fbe06f 0%, #f2b134 55%, #d59a39 100%);
	box-shadow: 0 2px 0 #85480f, inset 0 1px 0 rgba(255,255,255,.5);
}
.kk-takim{ display: flex; align-items: center; gap: calc(var(--sc) * .3); transition: opacity .2s; }
.kk-takim i{ height: var(--sc); aspect-ratio: 7 / 5; background: center / contain no-repeat; }
.kk-takim i.tek{ background-image: url('tema/start-icon-single.svg'); }
.kk-takim i.esli{ background-image: url('tema/start-icon-team.svg'); }
.kk-takim button{
	height: var(--sc); aspect-ratio: 211.09 / 66.18; display: flex; align-items: stretch;
	background: url('tema/start-team-off.svg') center / 100% 100% no-repeat;
	font-family: 'Bebas Neue', sans-serif; font-size: calc(var(--sc) * .46); line-height: 1;
	/* SVG'de hap x 16.81–193.23, y 0.25–55.85 (viewBox 211.09 x 66.18; altı gölge): yazılar hapın yarılarına ortalanır */
	padding: 0 calc(var(--sc) * .27) calc(var(--sc) * .156) calc(var(--sc) * .254);   /* = viewBox oranları x yükseklik */
}
.kk-takim button span{ flex: 1; display: flex; align-items: center; justify-content: center; padding-top: .12em; color: #441908; }
.kk-takim button span + span{ color: #8bbf77; }
.kk-takim button.esli{ background-image: url('tema/start-team-on.svg'); }
.kk-takim button.esli span{ color: #8bbf77; }
.kk-takim button.esli span + span{ color: #441908; }
/* yalnız 4 kişide etkin: diğerlerinde TEK konumunda kilitli ve soluk */
.kk-takim.pasif{ opacity: .35; filter: grayscale(.7); pointer-events: none; }
.kk-takim.pasif button.esli{ background-image: url('tema/start-team-off.svg'); }
.kk-takim.pasif button.esli span{ color: #441908; }
.kk-takim.pasif button.esli span + span{ color: #8bbf77; }
@media (min-aspect-ratio: 1/1) and (max-height: 520px){
	.kk-baslangic .sag-kolon{ display: flex; flex-direction: column; align-items: center; gap: 1.5vh; }
	.kk-secimler{ --sc: clamp(26px, 8vh, 40px); gap: 1.2vh; }
	.kk-menu-b{ margin: 1.1vh auto; }
	.kk-menu{ --sb: clamp(190px, 34vw, 320px); }
}

/* eşli oyunda takım rengi (Okey'deki mavi/kırmızı toplam kutuları gibi) */
.oyuncu.takim-a .ad-kutu{ border-color: #6fb6ff; box-shadow: 0 4px 8px rgba(0,0,0,.2), inset 0 0 14px rgba(70,150,255,.45); }
.oyuncu.takim-b .ad-kutu{ border-color: #ff7a7a; box-shadow: 0 4px 8px rgba(0,0,0,.2), inset 0 0 14px rgba(255,80,80,.45); }
.oyuncu.aktif .ad-kutu{ border-color: #30ff00; box-shadow: 0 0 18px rgba(31,173,13,.55), inset 0 0 8px 2px rgba(31,173,13,.5); }

/* ---------- oyun sonu hedefi penceresi (Okey #point-select: "Düşülecek Puanı Seçin") ----------
 * Tek ekran: her tür (PUAN, EL SAYISI) kendi satırında; seçili kutucuğun satırı vurgulanır */
.kk-hedef-satir{ background: #333; border-radius: 8px; padding: clamp(6px, 1.4vmin, 10px) clamp(8px, 1.6vmin, 12px); margin-bottom: 8px; }
.kk-hedef-satir .etiket{
	font-family: 'Bebas Neue', sans-serif; font-size: clamp(17px, 2.8vmin, 22px); letter-spacing: .03em;
	color: #9a9a9a; text-align: left; margin-bottom: 4px; line-height: 1;
}
.kk-hedef-satir.etkin .etiket{ color: var(--yesil); }
.kk-cipler{ display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(6px, 1.2vmin, 10px); }
.kk-cip{
	flex: 1 1 0; min-width: 44px; max-width: 78px; height: clamp(32px, 5.2vmin, 44px); padding: 0 4px;
	border-radius: 6px; color: #fff; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: clamp(15px, 2.5vmin, 19px);
	background: #404040; border: 2px solid #7b7b7b; box-shadow: inset 0 0 12px #000;
}
.kk-cip.sec{ background: #2c651b; border-color: #55c234; }
.kk-hedef .kk-aciklama{ font-size: clamp(12px, 2vmin, 14px); color: #ccc; margin: 2px 0 10px; min-height: 1.4em; }
@media (max-height: 420px){
	.kk-hedef-satir{ margin-bottom: 5px; }
	.kk-hedef .kk-aciklama{ margin-bottom: 6px; }
}

/* ---------- üst bantta ses düğmesi: koyu kare ---------- */
.koyu-b.kare{ width: var(--ib); padding: 0; justify-content: center; }
.koyu-b.kare svg{ width: calc(var(--ib) * .58); height: calc(var(--ib) * .58); margin: 0; }
.koyu-b.kapali svg{ fill: #ff8a80; }
@media (max-width: 360px){ #ust .cok-dar-gizle{ display: none; } }