/* BatakX tasarim sistemi: belirtecler, ortak bilesenler, ana ekran ve online bekleme ekrani.
   Kaynak: APK ekran goruntuleri (out/referans/01..03, 610x1356 px). Bu dosyadaki olculer o goruntulerden
   piksel olarak okundu ve `--u` birimiyle yazildi: 1u = ekran goruntusunun 1 pikseli. 610 px genislikte
   1u = 1px (goruntuyle bire bir), dar ekranda ayni oranla kuculur. Masa ekrani masa.css'te. */

@font-face {
  font-family: 'Young Serif';
  src: url('varlik/font/YoungSerif-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('varlik/font/Manrope.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* renkler (ekran goruntusunden piksel sayimiyla) */
  --altin: #e2b65f;
  --altin-yazi: #e4be7f;
  --altin-ustu: #241c12; /* altin ve krem zemin ustundeki koyu yazi */
  --krem: #f5efe3;
  --krem-panel: #f6f2e7;
  --gri: #b9ae9e;
  --gri-alt: #a79c8e;
  --soluk: #8c8172;
  --panel-soluk: #8a8175;
  --nokta: #7d746c;
  --zemin-ust: #433b30;
  --zemin-orta: #5f5343;
  --zemin-alt: #1c1815;
  --kirmizi: #c2261c;
  --cizgi: rgba(245, 239, 227, 0.16);
  --cip-zemin: #382f28; /* masa: koltuk cipi, balon, ust serit cipleri */
  --kart-siyah: #1b1611;
  --panel-ayrac: #7a766b; /* krem panelde basligin altindaki cizgi */
  --panel-cizgi: #e1ddd2;
  --panel-kapsul: #f2eee5;
  --panel-kapsul-vurgu: #e6e2d7;
  --panel-pasif-yazi: #b3a998;
  --panel-cerceve: #a9a59a;
  --dolgu-soluk: rgba(255, 255, 255, 0.06);

  /* olcu birimi: 1u = referans goruntunun 1 pikseli (610 x 1356) */
  --u: clamp(0.52px, min(calc(100vw / 610), calc(100dvh / 1045)), 1px);

  /* bosluk olcegi */
  --b1: calc(10 * var(--u));
  --b2: calc(15 * var(--u));
  --b3: calc(25 * var(--u));
  --b4: calc(33 * var(--u)); /* ekran kenar boslugu */

  /* yaricaplar */
  --r-segment: calc(15.5 * var(--u));
  --r-dugme: calc(18.6 * var(--u));
  --r-panel: calc(20 * var(--u));
  --r-kart: calc(10 * var(--u));
  --r-hap: 999px;

  /* golgeler */
  --golge-kart: 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, 0.35);
  --golge-panel: 0 calc(6 * var(--u)) calc(26 * var(--u)) rgba(0, 0, 0, 0.38);
  --golge: 0 2px 6px rgba(0, 0, 0, 0.35);

  --yazi-serif: 'Young Serif', Georgia, 'Times New Roman', serif;
  --yazi-arayuz: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  min-height: 100%;
  overscroll-behavior: none;
}

body {
  min-height: 100dvh;
  font: 500 16px/1.35 var(--yazi-arayuz);
  color: var(--krem);
  background: var(--zemin-alt);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

/* Zemin: dikey gecis + ortada yumusak isik + ince capraz cizgi dokusu. Kaydirmada yerinde kalir. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.028) 0 max(1px, calc(1.4 * var(--u))), transparent max(1px, calc(1.4 * var(--u))) max(4px, calc(5.7 * var(--u)))),
    radial-gradient(ellipse calc(317 * var(--u)) calc(488 * var(--u)) at 50% 38.5%, rgba(255, 226, 160, 0.15) 0%, rgba(255, 226, 160, 0.07) 45%, rgba(255, 226, 160, 0) 100%),
    linear-gradient(180deg, var(--zemin-ust) 0%, #4d4339 37%, var(--zemin-alt) 100%);
}

h1,
h2,
p {
  margin: 0;
}

button,
input {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  opacity: 0.5;
  cursor: default;
}

:focus-visible {
  outline: 3px solid var(--altin);
  outline-offset: 2px;
}

.panel :focus-visible,
.dugme:focus-visible {
  outline-color: var(--krem);
  box-shadow: 0 0 0 5px var(--altin-ustu);
}

.gizli-svg {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ikon {
  flex: none;
  width: calc(38 * var(--u));
  height: calc(38 * var(--u));
  fill: currentColor;
}

/* ------------------------------------------------------------ ortak bilesenler */

.baslik-serif {
  font-family: var(--yazi-serif);
  font-weight: 400;
  line-height: 1;
  color: var(--krem);
}

/* Altin dugme: ekranin ana eylemi. */
.dugme,
.dugme-ikincil {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--u));
  width: 100%;
  padding: 0 var(--b2);
  border-radius: var(--r-dugme);
  font-size: calc(27.3 * var(--u));
  font-weight: 700;
  line-height: 1.1;
}

.dugme {
  height: calc(86 * var(--u));
  min-height: 44px;
  border: 0;
  background: var(--altin);
  color: var(--altin-ustu);
  --ikon-zemin: var(--altin);
}

.dugme:active:not(:disabled) {
  filter: brightness(0.94);
}

/* Cerceveli ikincil dugme. */
.dugme-ikincil {
  height: calc(79 * var(--u));
  min-height: 44px;
  border: max(1.5px, calc(2 * var(--u))) solid var(--soluk);
  background: transparent;
  color: var(--krem);
  font-size: calc(25.6 * var(--u));
}

.dugme-ikincil:active:not(:disabled) {
  background: var(--dolgu-soluk);
}

/* Yalniz ikon tasiyan dugme (disli, geri, oklar): gorunen ikon kucuk, dokunma alani >= 44 px. */
.ikon-dugme {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(72 * var(--u));
  height: calc(72 * var(--u));
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--krem);
  opacity: 0.86;
}

.ikon-dugme:active {
  background: var(--dolgu-soluk);
}

/* Krem panel. */
.panel {
  border: 0;
  border-radius: var(--r-panel);
  background: var(--krem-panel);
  box-shadow: var(--golge-panel);
  color: var(--altin-ustu);
}

.panel .dugme-ikincil {
  border-color: rgba(36, 28, 18, 0.32);
  color: var(--altin-ustu);
}

.panel .dugme-ikincil:active:not(:disabled) {
  background: rgba(36, 28, 18, 0.06);
}

/* Koyu hap. */
.cip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  max-width: 100%;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-hap);
  background: var(--altin-ustu);
  color: var(--krem);
  font-size: max(13px, calc(20.5 * var(--u)));
  font-weight: 700;
  white-space: nowrap;
}

.cip b {
  letter-spacing: 0.14em;
}

/* Mesaj hapi: krem, koyu yazi. Konumunu kullanan yer belirler. */
.balon {
  padding: 5px 12px;
  border-radius: var(--r-hap);
  background: var(--krem-panel);
  box-shadow: var(--golge);
  color: var(--altin-ustu);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* Metin alani (krem panel icinde). */
.alan {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.alan > span {
  color: var(--panel-soluk);
  font-size: max(13px, calc(20.5 * var(--u)));
  font-weight: 600;
}

.alan input,
.kod-girisi {
  width: 100%;
  min-width: 0;
  height: calc(76 * var(--u));
  min-height: 46px;
  padding: 0 14px;
  border: 1.5px solid rgba(36, 28, 18, 0.2);
  border-radius: var(--r-segment);
  background: #fff;
  color: var(--altin-ustu);
  font-size: max(16px, calc(24 * var(--u))); /* 16 px alti iOS'ta odaklaninca yakinlastirir */
  font-weight: 600;
}

.kod-girisi {
  letter-spacing: 0.3em;
  text-align: center;
  text-transform: uppercase;
  font-weight: 800;
}

/* Ac / kapa anahtari (checkbox). */
.anahtar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  font-size: max(15px, calc(24 * var(--u)));
  font-weight: 700;
}

.anahtar input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 66px; /* gorunen ray 52 x 30; seffaf cerceve dokunma alanini 66 x 44 yapar */
  height: 44px;
  margin: 0 -7px 0 0;
  border: 7px solid transparent;
  border-radius: var(--r-hap);
  background: rgba(36, 28, 18, 0.22);
  background-clip: padding-box;
  cursor: pointer;
  transition: background 0.15s;
}

.anahtar input::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s;
}

.anahtar input:checked {
  background: var(--altin);
}

.anahtar input:checked::after {
  transform: translateX(22px);
}

/* Alt sayfa: ekranin altindan acilan krem panel; geri kalan kararir. */
dialog.sayfa {
  width: min(100vw, calc(610 * var(--u)));
  max-width: none;
  max-height: 92dvh;
  margin: auto auto 0;
  padding: calc(34 * var(--u)) var(--b4) calc(var(--b4) + env(safe-area-inset-bottom));
  overflow-y: auto;
  border-radius: calc(30 * var(--u)) calc(30 * var(--u)) 0 0;
}

dialog.sayfa[open] {
  display: flex;
  flex-direction: column;
  gap: calc(22 * var(--u));
  animation: sayfa-ac 0.2s ease-out;
}

dialog.sayfa::backdrop {
  background: rgba(12, 10, 8, 0.62);
}

@keyframes sayfa-ac {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
}

.sayfa h2 {
  font-size: max(17px, calc(27 * var(--u)));
  font-weight: 800;
  line-height: 1.25;
}

.sayfa .ipucu {
  color: var(--panel-soluk);
  font-size: max(13px, calc(20.5 * var(--u)));
  text-align: center;
}

.sayfa form {
  display: contents;
}

.ayrac {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--panel-soluk);
  font-size: max(12px, calc(19 * var(--u)));
  font-weight: 600;
}

.ayrac::before,
.ayrac::after {
  content: '';
  flex: 1 1 0;
  height: 1px;
  background: rgba(36, 28, 18, 0.16);
}

/* Bildirim: ekranin ustunde kisa sure gorunen mesaj hapi. */
#bildirim {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top));
  left: 50%;
  z-index: 50;
  width: max-content;
  max-width: 90vw;
  padding: 10px 16px;
  font-size: 14px;
  white-space: normal;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -12px);
  transition: opacity 0.18s, transform 0.18s;
}

#bildirim.gorunur {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ------------------------------------------------------------ ekran iskeleti */

.ekran {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  margin: 0 auto;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Ana ve bekleme ekranlari: 610u genisliginde tek sutun, kenarlarda 33u. */
.duzen {
  width: calc(610 * var(--u));
  max-width: 100%;
  padding-left: max(var(--b4), env(safe-area-inset-left));
  padding-right: max(var(--b4), env(safe-area-inset-right));
}

/* Esnek bosluk: artan yukseklik agirliklarla paylasilir (agirlik = referanstaki piksel boslugu). */
.pay {
  flex: var(--agirlik, 1) 1 0px;
  min-height: 0;
}

.ust-serit {
  display: flex;
  align-items: center;
  flex: none;
  min-height: calc(72 * var(--u));
  margin: 0 calc(2.5 * var(--u));
}

.ust-serit .yay {
  flex: 1 1 0;
  min-width: 0;
}

.dipnot {
  color: var(--gri-alt);
  font-size: calc(21.8 * var(--u));
  font-weight: 400;
  line-height: calc(24 * var(--u));
  text-align: center;
}

.dipnot .ikon {
  width: calc(25 * var(--u));
  height: calc(25 * var(--u));
  margin-left: calc(14 * var(--u));
  vertical-align: calc(-5 * var(--u));
}

/* ------------------------------------------------------------ ana ekran */

.marka {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: calc(20 * var(--u));
  margin-top: calc(7 * var(--u));
  font-size: calc(88.7 * var(--u));
}

.marka-maca {
  width: calc(30 * var(--u));
  height: calc(35 * var(--u));
  margin-bottom: calc(22 * var(--u));
  fill: currentColor;
}

.unvan {
  margin-top: calc(14.3 * var(--u));
  color: var(--altin-yazi);
  font-size: calc(23.3 * var(--u));
  font-weight: 600;
  line-height: calc(26 * var(--u));
  text-align: center;
}

.istatistik {
  color: var(--gri);
  font-size: calc(21 * var(--u));
  font-weight: 400;
  line-height: calc(26 * var(--u));
  text-align: center;
}

.segment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--b1);
  flex: none;
  margin-top: var(--b3);
}

.segment button {
  height: calc(71 * var(--u));
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--r-segment);
  background: var(--dolgu-soluk);
  color: var(--gri);
  font-size: calc(22.5 * var(--u));
  font-weight: 600;
}

.segment button[aria-checked='true'] {
  background: var(--altin);
  color: var(--altin-ustu);
  font-weight: 700;
}

/* Yelpaze: bes kart, kartin 660u altindaki ortak eksen cevresinde 6 derece arayla doner. */
.yelpaze {
  position: relative;
  flex: none;
  height: calc(279 * var(--u));
}

.yelpaze img {
  position: absolute;
  top: calc(40 * var(--u));
  left: 50%;
  width: calc(150 * var(--u));
  height: calc(218 * var(--u));
  margin-left: calc(-75 * var(--u));
  border-radius: var(--r-kart);
  background: #fff;
  box-shadow: var(--golge-kart);
  transform: rotate(var(--aci));
  transform-origin: 50% calc(769 * var(--u));
  user-select: none;
  -webkit-user-drag: none;
}

.yelpaze-rozet {
  position: absolute;
  top: calc(-1 * var(--u));
  left: calc(50% + 175 * var(--u));
  display: grid;
  place-items: center;
  width: calc(62 * var(--u));
  height: calc(62 * var(--u));
  border-radius: 50%;
  background: var(--altin);
  box-shadow: var(--golge-kart);
  color: var(--altin-ustu);
  font-size: calc(25 * var(--u));
  font-weight: 800;
}

.karusel {
  flex: none;
  touch-action: pan-y;
}

.karusel-ust {
  display: flex;
  align-items: center;
  margin: 0 calc(2.5 * var(--u));
}

.karusel-ust .ikon-dugme {
  margin-block: calc(-6 * var(--u));
}

.karusel-ust .ikon {
  width: calc(46 * var(--u));
  height: calc(46 * var(--u));
}

.cesit-adi {
  flex: 1 1 0;
  min-width: 0;
  font-size: calc(60 * var(--u));
  text-align: center;
  white-space: nowrap;
}

.noktalar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--b1);
  height: calc(10 * var(--u));
  margin-top: calc(19.5 * var(--u));
}

.noktalar span {
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  border-radius: var(--r-hap);
  background: var(--nokta);
  transition: width 0.18s, background 0.18s;
}

.noktalar span.aktif {
  width: calc(31 * var(--u));
  background: var(--altin);
}

.aciklama {
  min-height: calc(64 * var(--u)); /* iki satir: cesit degisince alttaki dugmeler oynamasin */
  margin-top: calc(20.5 * var(--u));
  color: var(--gri);
  font-size: calc(23.3 * var(--u));
  font-weight: 400;
  line-height: calc(32 * var(--u));
  text-align: center;
}

.eylemler {
  display: flex;
  flex-direction: column;
  flex: none;
  min-height: calc(214 * var(--u));
  margin-top: calc(28 * var(--u));
}

.eylem-grubu {
  display: flex;
  flex-direction: column;
}

.eylem-grubu .dugme-ikincil {
  margin-top: var(--b2);
}

.eylem-grubu .dugme-ikincil + .dipnot {
  margin-top: var(--b1);
}

.eylem-grubu .dugme + .dipnot {
  margin-top: calc(34 * var(--u));
}

.durum {
  min-height: calc(24 * var(--u));
  color: var(--altin-yazi);
  font-size: calc(21 * var(--u));
  font-weight: 600;
  line-height: calc(28 * var(--u));
  text-align: center;
}

.dipnot.uyari {
  color: var(--altin-yazi);
}

#not-online {
  font-size: calc(20.2 * var(--u));
}

.ikon.kartlar {
  width: calc(50 * var(--u));
  height: calc(30 * var(--u));
}

/* Kayitli masaya donus: ust seritte koyu hap + unut dugmesi. */
.donus {
  display: flex;
  align-items: center;
  min-width: 0;
}

.donus .cip {
  background: rgba(0, 0, 0, 0.34);
}

.sayfa-ust {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.sayfa-ust h2 {
  flex: 1 1 0;
  min-width: 0;
  padding-top: 8px;
}

.sayfa-ust .ikon-dugme {
  margin: -4px -8px 0 0;
  color: var(--altin-ustu);
}

/* ------------------------------------------------------------ online bekleme ekrani */

.bekleme-baslik {
  margin-top: calc(2 * var(--u));
  font-size: calc(62.8 * var(--u));
  text-align: center;
}

.bekleme-alt {
  margin-top: calc(13 * var(--u));
  color: var(--gri-alt);
  font-size: calc(24.8 * var(--u));
  font-weight: 400;
  line-height: calc(28 * var(--u));
  text-align: center;
}

.oturanlar-paneli {
  flex: none;
  padding: calc(34 * var(--u)) calc(37 * var(--u)) calc(35 * var(--u));
}

.oturanlar {
  margin: 0;
  padding: 0;
  list-style: none;
}

.oturanlar li {
  display: flex;
  align-items: center;
  gap: var(--b2);
  height: calc(48.5 * var(--u));
  color: var(--panel-soluk);
  font-size: calc(25.5 * var(--u));
  font-weight: 500;
}

.oturanlar li.dolu {
  color: var(--altin-ustu);
  font-weight: 700;
}

.oturanlar li.kopuk {
  opacity: 0.55;
}

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

.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(38 * var(--u));
  height: calc(38 * var(--u));
  border-radius: 50%;
  object-fit: cover;
  color: #fff;
  font-size: calc(21 * var(--u));
  font-weight: 800;
  line-height: 1;
}

.bekleme-not {
  margin-top: calc(17 * var(--u));
  color: var(--panel-soluk);
  font-size: calc(21.8 * var(--u));
  font-weight: 400;
  line-height: calc(23 * var(--u));
  text-align: center;
}

.bekleme-davet {
  display: flex;
  justify-content: center;
  margin-top: var(--b2);
}

.bekleme-alt-eylem .dipnot {
  margin-top: var(--b1);
}

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}