/* BatakX masa ekrani (#masa). Kaynak: APK ekran goruntuleri out/referans/04..11 (610 x 1356 px).
   Sayilar o goruntulerden okunan piksellerdir (1u = 1 px; --u tasarim.css'te). Goruntu 1356u yuksekliginde;
   daha kisa ekranda (en az 1045u) ust grup yukari, alt grup asagi yaklasir: --e, 1045u ile 1356u arasindaki
   kullanilabilir fazlaliktir (0..311u) ve her dikey konum "kisa ekran degeri + oran * --e" olarak yazilir. */

#masa {
  container-type: size;
  height: 100dvh;
  overflow: hidden auto;
  user-select: none;
  -webkit-user-select: none;
}

.sahne {
  --e: clamp(0px, calc(100cqh - 1045 * var(--u)), calc(311 * var(--u)));
  --fazla: max(0px, calc((100cqh - 1356 * var(--u)) / 2)); /* 1356u'dan uzun ekranda orta bolge ortalanir */
  --ust: calc(-47 * var(--u) + 0.1511 * var(--e)); /* ust serit: goruntudeki y'ye eklenir */
  --ust-yelpaze: calc(-82 * var(--u) + 0.2637 * var(--e));
  --ust-cipler: calc(-120 * var(--u) + 0.3859 * var(--e));
  --alt: calc(-28 * var(--u) + 0.09 * var(--e)); /* alt grup: goruntudeki alt bosluga eklenir */
  --alt-el: calc(-26 * var(--u) + 0.0836 * var(--e));
  --orta-y: calc(451 * var(--u) + 0.6077 * var(--e) + var(--fazla));
  --yan-y: calc(512 * var(--u) + 0.3987 * var(--e) + var(--fazla));
  --ow: calc(132 * var(--u) + 0.0579 * var(--e)); /* ortadaki kartin eni: 132u..150u */
  --arka: url('varlik/kart/gravur/back.png');
  position: relative;
  flex: none;
  width: calc(610 * var(--u));
  height: 100%;
  min-height: calc(1045 * var(--u));
  margin: 0 auto;
  overflow: hidden;
}

.renk {
  flex: none;
  fill: currentColor;
}

/* Kart arkasi: beyaz cerceve + secilen desen. */
.arka {
  display: block;
  padding: calc(3 * var(--u));
  border-radius: calc(6 * var(--u));
  background: #fff;
  box-shadow: 0 calc(1 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.35);
}

.arka::before {
  content: '';
  display: block;
  height: 100%;
  border-radius: calc(4 * var(--u));
  background: var(--arka) center / cover;
}

/* ------------------------------------------------------------ ust serit */

.ust-cip,
.duraklat {
  position: absolute;
  z-index: 3;
}

.ust-cip {
  display: flex;
  align-items: center;
  border: max(1px, calc(1.5 * var(--u))) solid var(--cizgi);
  border-radius: var(--r-hap);
  background: var(--cip-zemin);
  color: var(--krem);
  white-space: nowrap;
}

#sol-cip {
  top: calc(84 * var(--u) + var(--ust));
  left: calc(26 * var(--u));
  gap: calc(9 * var(--u));
  height: calc(52 * var(--u));
  padding: 0 calc(16 * var(--u)) 0 calc(13 * var(--u));
}

#sol-cip .deste {
  width: calc(42 * var(--u));
  height: calc(25 * var(--u));
  color: var(--krem);
  opacity: 0.8;
  --ikon-zemin: var(--cip-zemin);
}

.el-yazi {
  color: var(--gri);
  font-size: calc(21 * var(--u));
  font-weight: 500;
}

.el-yazi b {
  margin-left: calc(4 * var(--u));
  color: var(--krem);
  font-size: calc(23 * var(--u));
  font-weight: 700;
}

/* Son love: dort minyatur kart; loveyi alan kart biraz yukarida. */
#sol-cip.son-love {
  top: calc(79 * var(--u) + var(--ust));
  gap: calc(4 * var(--u));
  height: calc(63 * var(--u));
  padding: 0 calc(16 * var(--u)) 0 calc(12 * var(--u));
}

#sol-cip img {
  width: calc(31 * var(--u));
  height: calc(44 * var(--u));
  border-radius: calc(3 * var(--u));
  background: #fff;
}

#sol-cip img.alan {
  transform: translateY(calc(-6 * var(--u)));
}

#koz-cip {
  top: calc(76 * var(--u) + var(--ust));
  left: 50%;
  gap: calc(9 * var(--u));
  height: calc(68 * var(--u));
  padding: 0 calc(22 * var(--u)) 0 calc(11 * var(--u));
  transform: translateX(-50%);
}

.koz-kart {
  display: grid;
  place-items: center;
  width: calc(34 * var(--u));
  height: calc(47 * var(--u));
  margin-right: calc(6 * var(--u));
  border-radius: calc(5 * var(--u));
  background: var(--krem-panel);
  color: var(--kart-siyah);
  transform: rotate(-6deg);
}

.koz-kart.kirmizi {
  color: var(--kirmizi);
}

.koz-kart .renk {
  width: calc(23 * var(--u));
  height: calc(23 * var(--u));
}

.kozsuz {
  margin-left: calc(10 * var(--u));
  font-size: calc(24 * var(--u));
  font-weight: 700;
}

.ihale-sayi {
  font-size: calc(30 * var(--u));
  font-weight: 700;
}

.ihaleci-harf {
  display: grid;
  place-items: center;
  width: calc(33 * var(--u));
  height: calc(33 * var(--u));
  border-radius: 50%;
  background: var(--nokta);
  color: var(--altin-ustu);
  font-size: calc(15 * var(--u));
  font-weight: 800;
}

.ihaleci-ad {
  max-width: calc(150 * var(--u));
  overflow: hidden;
  color: var(--gri);
  font-size: calc(24 * var(--u));
  font-weight: 500;
  text-overflow: ellipsis;
}

.duraklat {
  top: calc(67 * var(--u) + var(--ust));
  right: calc(37 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(5 * var(--u));
  width: calc(68 * var(--u));
  height: calc(68 * var(--u));
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: max(2px, calc(3 * var(--u))) solid rgba(226, 182, 95, 0.72);
  border-radius: 50%;
  background: var(--cip-zemin);
}

.duraklat i {
  width: calc(5 * var(--u));
  height: calc(18 * var(--u));
  border-radius: calc(2 * var(--u));
  background: var(--krem);
}

.duraklat:active {
  filter: brightness(1.2);
}

/* Baglanti / koltuk uyarisi: ust seridin altinda altin hap. */
.masa-uyari {
  position: absolute;
  top: calc(152 * var(--u) + var(--ust));
  left: 50%;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(10 * var(--u));
  width: max-content;
  max-width: calc(570 * var(--u));
  padding: calc(9 * var(--u)) calc(20 * var(--u));
  border-radius: calc(22 * var(--u));
  background: var(--altin);
  box-shadow: var(--golge);
  color: var(--altin-ustu);
  font-size: max(12px, calc(20 * var(--u)));
  font-weight: 700;
  text-align: center;
  transform: translateX(-50%);
}

.masa-uyari button {
  min-height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--altin-ustu);
  border-radius: var(--r-hap);
  background: transparent;
  color: inherit;
  font-weight: 800;
}

.donen {
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: don 0.9s linear infinite;
}

@keyframes don {
  to {
    transform: rotate(360deg);
  }
}

/* ------------------------------------------------------------ koltuk cipleri ve balonlar */

.koltuk {
  position: absolute;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(11 * var(--u));
}

.koltuk[data-yer='2'] {
  top: calc(320 * var(--u) + var(--ust-cipler));
  left: 50%;
  transform: translateX(-50%);
}

.koltuk[data-yer='1'] {
  top: calc(382 * var(--u) + var(--ust-cipler));
  left: calc(14 * var(--u));
}

.koltuk[data-yer='3'] {
  top: calc(382 * var(--u) + var(--ust-cipler));
  right: calc(14 * var(--u));
}

.koltuk[data-yer='0'] {
  bottom: calc(375 * var(--u) + var(--alt));
  left: 50%;
  flex-direction: column-reverse;
  transform: translateX(-50%);
}

.koltuk-cip {
  display: flex;
  align-items: center;
  height: calc(58 * var(--u));
  padding: 0 calc(20 * var(--u)) 0 calc(8 * var(--u));
  border: max(1px, calc(1.5 * var(--u))) solid var(--cizgi);
  border-radius: var(--r-hap);
  background: var(--cip-zemin);
  color: var(--krem);
  white-space: nowrap;
  transition: box-shadow 0.2s;
}

/* Sirasi olan koltuk: altin halka + yumusak dis isima. */
.koltuk.sirada .koltuk-cip {
  border-color: var(--altin);
  box-shadow: 0 0 0 calc(2 * var(--u)) var(--altin), 0 0 calc(22 * var(--u)) calc(2 * var(--u)) rgba(226, 182, 95, 0.4);
}

.koltuk.kopuk .koltuk-cip {
  opacity: 0.55;
}

.koltuk-cip .avatar,
.konusanlar .avatar,
.ozet .avatar {
  width: calc(42 * var(--u));
  height: calc(42 * var(--u));
}

.avatar.harf {
  background: var(--altin);
  color: var(--altin-ustu);
}

.koltuk-cip .isim {
  max-width: calc(150 * var(--u));
  margin-left: calc(13 * var(--u));
  overflow: hidden;
  font-size: calc(25 * var(--u));
  font-weight: 600;
  text-overflow: ellipsis;
}

.koltuk-cip .puan {
  margin-left: calc(17 * var(--u));
  color: var(--altin-yazi);
  font-size: calc(26 * var(--u));
  font-weight: 700;
}

.dagitan {
  display: grid;
  place-items: center;
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  margin: 0 calc(-8 * var(--u)) 0 calc(10 * var(--u));
  border-radius: 50%;
  background: var(--krem);
  color: var(--zemin-ust);
  font-size: calc(16 * var(--u));
  font-weight: 800;
}

/* Bu elde alinan loveler: puanin saginda en cok iki ince, soluk cubuk; yavasca nabiz atar. */
.alinan {
  display: flex;
  gap: calc(3 * var(--u));
  margin-left: calc(16 * var(--u));
}

.dagitan + .alinan {
  margin-left: calc(20 * var(--u));
}

.alinan i {
  width: calc(4 * var(--u));
  height: calc(16 * var(--u));
  border-radius: calc(2 * var(--u));
  background: var(--krem);
  opacity: 0.55;
  animation: nabiz 2s ease-in-out infinite;
}

@keyframes nabiz {
  50% {
    opacity: 0.9;
  }
}

.soz-balon {
  display: grid;
  place-items: center;
  min-width: calc(44 * var(--u));
  height: calc(32 * var(--u));
  padding: 0 calc(17 * var(--u));
  border: max(1px, calc(1.5 * var(--u))) solid var(--cizgi);
  border-radius: var(--r-hap);
  background: var(--cip-zemin);
  color: var(--krem);
  font-size: calc(22 * var(--u));
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.soz-balon.dusunuyor {
  display: flex;
  align-items: center;
  gap: calc(7 * var(--u));
  height: calc(37 * var(--u));
  padding: 0 calc(19 * var(--u));
}

.soz-balon.dusunuyor i {
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
  border-radius: 50%;
  background: var(--krem);
  animation: zipla 1.2s ease-in-out infinite;
}

.soz-balon.dusunuyor i:nth-child(2) {
  animation-delay: 0.15s;
}

.soz-balon.dusunuyor i:nth-child(3) {
  animation-delay: 0.3s;
}

.soz-balon.ihale {
  border-color: transparent;
  background: var(--altin);
  color: var(--altin-ustu);
  font-weight: 800;
}

.soz-balon.sohbet {
  border-color: transparent;
  background: var(--krem-panel);
  color: var(--altin-ustu);
  font-size: calc(20 * var(--u));
}

@keyframes zipla {
  30% {
    transform: translateY(calc(-5 * var(--u)));
  }

  60% {
    transform: none;
  }
}

/* Ipucu hapi: kendi cipinin hemen ustunde. */
.ipucu-hap {
  position: absolute;
  bottom: calc(445 * var(--u) + var(--alt));
  left: 50%;
  z-index: 6;
  display: grid;
  place-items: center;
  grid-auto-flow: column;
  height: calc(36 * var(--u));
  padding: 0 calc(18 * var(--u));
  border-radius: var(--r-hap);
  background: var(--altin);
  color: var(--altin-ustu);
  font-size: calc(23 * var(--u));
  font-weight: 800;
  white-space: nowrap;
  transform: translateX(-50%);
}

/* ------------------------------------------------------------ rakip yelpazeleri */

/* Kap, yelpazenin orta kartinin merkezindedir ve koltuga gore doner; kartlar, merkezin 248u "altindaki"
   eksen cevresinde 4 derece arayla acilir (rakibin elinde tuttugu yelpaze: eksen rakibe dogru). */
.rakip-yelpaze {
  position: absolute;
  z-index: 1;
  width: 0;
  height: 0;
}

.rakip-yelpaze[data-yer='2'] {
  top: calc(232 * var(--u) + var(--ust-yelpaze));
  left: 50%;
  transform: rotate(180deg);
}

.rakip-yelpaze[data-yer='1'] {
  top: var(--yan-y);
  left: calc(78 * var(--u));
  transform: rotate(90deg);
}

.rakip-yelpaze[data-yer='3'] {
  top: var(--yan-y);
  right: calc(78 * var(--u));
  transform: rotate(-90deg);
}

.rakip-yelpaze .arka {
  position: absolute;
  top: calc(-38 * var(--u));
  left: calc(-26.5 * var(--u));
  width: calc(53 * var(--u));
  height: calc(76 * var(--u));
  transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * 4deg));
  transform-origin: 50% calc(286 * var(--u));
}

/* ------------------------------------------------------------ ortadaki love */

.orta {
  position: absolute;
  top: var(--orta-y);
  left: 50%;
  z-index: 5;
  width: 0;
  height: 0;
}

.orta .kart {
  position: absolute;
  top: calc(var(--ow) * -0.7267);
  left: calc(var(--ow) * -0.5);
  width: var(--ow);
  height: calc(var(--ow) * 1.4533);
  border-radius: var(--r-kart);
  background: #fff;
  box-shadow: var(--golge-kart);
  transform: translate(calc(var(--ow) * var(--x)), calc(var(--ow) * var(--y))) rotate(var(--aci));
  animation: kart-gel 0.18s ease-out;
}

/* Koltuk basina sabit yer ve aci (yeniden cizimde kart oynamaz). --gx / --gy: kartin geldigi yon. */
.orta .kart[data-yer='0'] {
  --x: 0;
  --y: 0.633;
  --aci: 5deg;
  --gx: 0;
  --gy: 1.6;
}

.orta .kart[data-yer='1'] {
  --x: -0.647;
  --y: -0.013;
  --aci: -4deg;
  --gx: -1.3;
  --gy: 0;
}

.orta .kart[data-yer='2'] {
  --x: 0;
  --y: -0.647;
  --aci: -3deg;
  --gx: 0;
  --gy: -1.6;
}

.orta .kart[data-yer='3'] {
  --x: 0.653;
  --y: -0.027;
  --aci: 2deg;
  --gx: 1.3;
  --gy: 0;
}

@keyframes kart-gel {
  from {
    opacity: 0.3;
    transform: translate(calc(var(--ow) * (var(--x) + var(--gx))), calc(var(--ow) * (var(--y) + var(--gy)))) rotate(var(--aci)) scale(0.7);
  }
}

/* ------------------------------------------------------------ kendi elim */

/* Iki sira: ustte ceil(n/2), altta floor(n/2) kart (7 karta kadar tek sira, alt sirada). Kart 130 x 184u;
   her sira, kart merkezinin 636u altindaki eksen cevresinde 6 derece arayla acilan bir yaydir. */
.el {
  position: absolute;
  right: 0;
  bottom: calc(71 * var(--u) + var(--alt-el));
  left: 0;
  z-index: 7;
  height: calc(283 * var(--u));
  pointer-events: none;
}

.el .kart {
  position: absolute;
  top: calc(99 * var(--u));
  left: 50%;
  z-index: 3;
  width: calc(130 * var(--u));
  height: calc(184 * var(--u));
  margin-left: calc(-65 * var(--u));
  padding: 0;
  border: 0;
  border-radius: var(--r-kart);
  background: none;
  pointer-events: auto;
  transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * 6deg)) translateY(var(--kalk, 0px));
  transform-origin: 50% calc(728 * var(--u));
  transition: transform 0.16s ease-out;
}

.el .kart.ust {
  top: 0;
  z-index: 1;
}

/* Kaldirilan kart kendi sirasindaki komsularinin ustune cikar, alt siranin altinda kalir. */
.el .kart.kalkik {
  --kalk: calc(-40 * var(--u));
  z-index: 4;
}

.el .kart.ust.kalkik {
  z-index: 2;
}

.el .kart img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: #fff;
  box-shadow: var(--golge-kart);
  pointer-events: none;
}

.el .kart.gomulecek img {
  outline: calc(4 * var(--u)) solid var(--altin);
}

.el .kart:focus-visible {
  outline-offset: -2px;
  z-index: 5;
}

/* ------------------------------------------------------------ dagitim animasyonu */

.dagitim-kartlari {
  display: none;
}

.sahne.dagitim .dagitim-kartlari {
  position: absolute;
  top: var(--orta-y);
  left: 50%;
  z-index: 8;
  display: block;
}

.dagitim-kartlari .arka {
  position: absolute;
  top: calc(-73 * var(--u));
  left: calc(-50 * var(--u));
  width: calc(100 * var(--u));
  height: calc(146 * var(--u));
  animation: dagit 0.5s ease-in both;
}

.dagitim-kartlari .arka[data-yer='0'] {
  --dx: 0;
  --dy: 460;
  --donus: 12deg;
}

.dagitim-kartlari .arka[data-yer='1'] {
  --dx: -230;
  --dy: 0;
  --donus: -70deg;
  animation-delay: 0.04s;
}

.dagitim-kartlari .arka[data-yer='2'] {
  --dx: 0;
  --dy: -330;
  --donus: 160deg;
  animation-delay: 0.08s;
}

.dagitim-kartlari .arka[data-yer='3'] {
  --dx: 230;
  --dy: 0;
  --donus: 70deg;
  animation-delay: 0.12s;
}

@keyframes dagit {
  to {
    opacity: 0.2;
    transform: translate(calc(var(--dx) * var(--u)), calc(var(--dy) * var(--u))) rotate(var(--donus)) scale(0.55);
  }
}

.sahne.dagitim .rakip-yelpaze .arka,
.sahne.dagitim .el .kart img {
  animation: belir 0.65s ease-out;
}

@keyframes belir {
  0%,
  55% {
    opacity: 0;
  }
}

/* ------------------------------------------------------------ paneller (ihale, koz, gomme, el ozeti) */

/* Arka plan karartilmaz; panel kendi cipinin hemen ustunde biter. */
.masa-panel {
  position: absolute;
  right: calc(27 * var(--u));
  bottom: calc(444 * var(--u) + var(--alt));
  left: calc(26 * var(--u));
  z-index: 20;
  display: flex;
  flex-direction: column;
  max-height: calc(100cqh - 452 * var(--u) - var(--alt));
  padding: calc(34 * var(--u)) calc(34 * var(--u)) calc(30 * var(--u));
  overflow-y: auto;
  border-radius: calc(18 * var(--u));
  animation: panel-ac 0.18s ease-out;
}

@keyframes panel-ac {
  from {
    opacity: 0;
    transform: translateY(calc(16 * var(--u)));
  }
}

.panel-ust {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex: none;
  gap: calc(12 * var(--u));
  padding-bottom: calc(22 * var(--u));
  border-bottom: max(1.5px, calc(2 * var(--u))) solid var(--panel-ayrac);
}

.panel-ust h2 {
  color: var(--altin-ustu);
  font-size: calc(37 * var(--u));
}

.panel-sayi {
  padding-right: calc(2 * var(--u));
  color: var(--panel-soluk);
  font-size: calc(23 * var(--u));
  font-weight: 500;
  line-height: 1;
}

.panel-aciklama {
  margin-top: calc(18 * var(--u));
  color: var(--panel-soluk);
  font-size: calc(22 * var(--u));
  font-weight: 500;
  text-align: center;
}

.masa-panel .dugme,
.masa-panel .dugme-ikincil {
  flex: none;
  margin-top: calc(20 * var(--u));
}

.masa-panel .anahtar {
  margin-top: calc(14 * var(--u));
}

/* Bu el konusanlar. */
.konusanlar {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--u)) calc(10 * var(--u));
  margin: calc(16 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
}

.konusanlar li {
  display: flex;
  align-items: center;
  gap: calc(9 * var(--u));
  height: calc(40 * var(--u));
  padding: 0 calc(15 * var(--u)) 0 calc(6 * var(--u));
  border: 1px solid var(--panel-cizgi);
  border-radius: calc(12 * var(--u));
  background: var(--panel-kapsul);
  color: var(--panel-soluk);
  font-size: calc(21 * var(--u));
  font-weight: 500;
  white-space: nowrap;
}

.konusanlar li.yuksek {
  background: var(--panel-kapsul-vurgu);
  color: var(--altin-ustu);
  font-weight: 600;
}

.konusanlar .avatar {
  width: calc(29 * var(--u));
  height: calc(29 * var(--u));
  font-size: calc(15 * var(--u));
}

.teklifler {
  display: grid;
  grid-template-columns: repeat(var(--sutun, 3), minmax(0, 1fr));
  gap: calc(15 * var(--u)) calc(14 * var(--u));
  margin-top: calc(26 * var(--u));
}

.teklifler button {
  height: calc(74 * var(--u) + 0.0257 * var(--e));
  min-height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: calc(14 * var(--u));
  background: var(--altin);
  color: var(--altin-ustu);
  font-size: calc(34 * var(--u));
  font-weight: 800;
}

.teklifler button:disabled {
  border-color: var(--panel-cizgi);
  background: transparent;
  color: var(--panel-pasif-yazi);
  opacity: 1;
}

.teklifler button:active:not(:disabled),
.pas:active,
.kozlar button:active {
  filter: brightness(0.94);
}

.pas {
  flex: none;
  height: calc(70 * var(--u) + 0.0257 * var(--e));
  min-height: 44px;
  margin-top: calc(26 * var(--u));
  border: max(1.5px, calc(2 * var(--u))) solid var(--panel-cerceve);
  border-radius: calc(14 * var(--u));
  background: transparent;
  color: var(--altin-ustu);
  font-size: calc(26 * var(--u));
  font-weight: 600;
}

.kozlar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(17 * var(--u));
  margin-top: calc(23 * var(--u));
  padding: 0 calc(8 * var(--u));
}

.kozlar button {
  display: grid;
  place-items: center;
  height: calc(132 * var(--u));
  padding: 0;
  border: 1px solid var(--panel-cizgi);
  border-radius: calc(10 * var(--u));
  background: var(--krem-panel);
  box-shadow: 0 calc(4 * var(--u)) calc(7 * var(--u)) rgba(36, 28, 18, 0.1);
  color: var(--kart-siyah);
}

.kozlar button.kirmizi {
  color: var(--kirmizi);
}

.kozlar .renk {
  width: calc(58 * var(--u));
  height: calc(58 * var(--u));
}

/* El ozeti / oyun sonu. */
.ozet {
  margin: calc(10 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
}

.ozet li {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  height: calc(60 * var(--u));
  border-bottom: 1px solid var(--panel-cizgi);
  color: var(--altin-ustu);
  font-size: calc(25 * var(--u));
  font-weight: 500;
}

.ozet li.ben {
  font-weight: 800;
}

.ozet .avatar {
  width: calc(38 * var(--u));
  height: calc(38 * var(--u));
}

.ozet .isim {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ozet .puan {
  min-width: calc(62 * var(--u));
  padding: calc(3 * var(--u)) calc(12 * var(--u));
  border-radius: var(--r-hap);
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

.ozet .puan.arti {
  background: var(--altin);
}

.ozet .puan.eksi {
  background: rgba(194, 38, 28, 0.14);
  color: var(--kirmizi);
}

.ozet .aldi {
  width: calc(64 * var(--u));
  color: var(--panel-soluk);
  font-size: calc(22 * var(--u));
  text-align: right;
  white-space: nowrap;
}

.ozet .kazanan {
  padding: calc(3 * var(--u)) calc(12 * var(--u));
  border-radius: var(--r-hap);
  background: var(--altin);
  font-size: calc(19 * var(--u));
  font-weight: 800;
  white-space: nowrap;
}

.ozet-ihale {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: calc(6 * var(--u)) calc(14 * var(--u));
  margin-top: calc(18 * var(--u));
  color: var(--altin-ustu);
  font-size: calc(23 * var(--u));
  font-weight: 500;
}

.ozet-ihale b {
  font-weight: 800;
}

.ozet-ihale .batti {
  color: var(--kirmizi);
}

/* ------------------------------------------------------------ duraklat menusu */

.sayfa-alt {
  margin-top: calc(-14 * var(--u));
  color: var(--panel-soluk);
  font-size: max(13px, calc(21 * var(--u)));
  font-weight: 500;
}

#duraklat-durum {
  color: var(--kirmizi);
  font-weight: 700;
}

.arka-secimi {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  font-size: max(15px, calc(24 * var(--u)));
  font-weight: 700;
}

.arkalar {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: calc(12 * var(--u));
}

.arkalar button {
  min-height: 44px;
  aspect-ratio: 53 / 76;
  padding: 0;
  border: 0;
  border-radius: calc(8 * var(--u));
  background: none;
}

.arkalar .arka {
  height: 100%;
}

.arkalar button[aria-checked='true'] {
  outline: 3px solid var(--altin-ustu);
  outline-offset: 2px;
}

.puan-icerik {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
}

.sayfa .satir {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--b1);
}

/* ------------------------------------------------------------ hareket azaltma */

/* tasarim.css butun animasyonlari kapatir; dagitimin ucan kartlari hic gosterilmez. */
@media (prefers-reduced-motion: reduce) {
  .sahne.dagitim .dagitim-kartlari {
    display: none;
  }
}