/* Yonca web istemci. Renkler Yonca'nın: yeşil, koyu yeşil, altın, teal, kırmızı, mor. */
:root {
  color-scheme: light dark;
  --green: #2EAD66;
  --green-dark: #0F5C3D;
  --gold: #EDB840;
  --teal: #299E9E;
  --red: #D9404C;
  --purple: #8C6BD9;

  --bg: #F4F7F3;
  --card: #FFFFFF;
  --line: #DCE5DD;
  --text: #16211A;
  --sub: #5E6E63;
  --ink-on-green: #FFFFFF;
  --cell: #EEF3EF;
  --cell-marked: #2EAD66;
  --shadow: 0 6px 24px rgba(15, 92, 61, 0.10);
  --r: 20px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1512;
    --card: #17211C;
    --line: #27352D;
    --text: #F1F6F2;
    --sub: #9FB0A5;
    --cell: #202C25;
    --shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: var(--green-dark); }
@media (prefers-color-scheme: dark) { a { color: var(--green); } }

.wrap { max-width: 560px; margin: 0 auto; padding: 16px 16px 48px; }

/* Üst şerit */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 0 16px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; font-weight: 700; }
.brand svg { width: 28px; height: 28px; }
.code-chip {
  font-variant-numeric: tabular-nums; letter-spacing: 0.12em; font-weight: 700;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 14px;
}
.meta { display: flex; gap: 8px; flex-wrap: wrap; color: var(--sub); font-size: 14px; margin-bottom: 14px; }
.meta .kind { color: var(--green-dark); font-weight: 600; }
@media (prefers-color-scheme: dark) { .meta .kind { color: var(--green); } }

.open-row { display: flex; gap: 8px; margin: -4px 0 14px; }

/* Kartlar */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px; box-shadow: var(--shadow); margin-bottom: 14px;
}
.card h2 { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: var(--sub); text-transform: uppercase; letter-spacing: 0.04em; }
.big { font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; margin: 6px 0; word-break: break-word; }
.sub { color: var(--sub); font-size: 15px; }
.center { text-align: center; }
.notice { background: var(--card); border: 1px dashed var(--line); border-radius: var(--r); padding: 20px; color: var(--sub); text-align: center; }
.banner { border-radius: 14px; padding: 12px 14px; font-weight: 600; margin-bottom: 14px; text-align: center; }
.banner.red { background: rgba(217, 64, 76, 0.12); color: var(--red); }
.banner.gold { background: rgba(237, 184, 64, 0.18); color: #8A6410; }
@media (prefers-color-scheme: dark) { .banner.gold { color: var(--gold); } }

/* Düğmeler */
.btn {
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 20px; border-radius: 16px; font-weight: 700; font-size: 16px;
  background: var(--green); color: var(--ink-on-green); width: 100%;
  transition: transform 0.08s ease, opacity 0.2s;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.ghost { background: transparent; color: var(--green-dark); border: 1px solid var(--line); }
@media (prefers-color-scheme: dark) { .btn.ghost { color: var(--green); } }
.btn.dark { background: var(--green-dark); }
.btn.small { min-height: 38px; width: auto; font-size: 14px; padding: 0 14px; border-radius: 12px; }

.field { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; }
.field label { font-size: 14px; color: var(--sub); }
.field input {
  width: 100%; min-height: 56px; border-radius: 16px; border: 2px solid var(--line); background: var(--card);
  padding: 0 16px; font-size: 26px; letter-spacing: 0.25em; text-transform: uppercase; text-align: center; font-weight: 700;
  outline: none;
}
.field input:focus { border-color: var(--green); }
.err { color: var(--red); font-size: 14px; min-height: 20px; }

/* Liste */
.list { display: flex; flex-direction: column; gap: 8px; }
.row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: start; padding: 14px 16px; border-radius: 14px;
  background: var(--cell); border: 1px solid transparent; font-size: 17px; font-weight: 600;
}
.row:disabled { opacity: 0.55; cursor: default; }
.row.selected { border-color: var(--green); background: rgba(46, 173, 102, 0.12); }
.row .tag { font-size: 13px; font-weight: 600; color: var(--sub); }
.row .tag.gold { color: #8A6410; }
@media (prefers-color-scheme: dark) { .row .tag.gold { color: var(--gold); } }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { background: var(--cell); border-radius: 999px; padding: 6px 12px; font-size: 14px; font-weight: 600; }

/* Tombala */
.last-numbers { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.ball {
  width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--cell); font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums;
}
.ball.big-ball { width: 104px; height: 104px; font-size: 48px; background: var(--red); color: #fff; box-shadow: 0 10px 30px rgba(217, 64, 76, 0.35); }
.grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; }
.cell {
  aspect-ratio: 1; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: clamp(13px, 4vw, 20px); font-variant-numeric: tabular-nums; background: var(--cell);
}
.cell.empty { background: transparent; border: 1px dashed var(--line); }
.cell.marked { background: var(--cell-marked); color: #fff; }
.cell.last { background: var(--gold); color: #3A2A00; box-shadow: 0 0 0 3px rgba(237, 184, 64, 0.35); transform: scale(1.05); }
.bag { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.bag .cell { font-size: clamp(11px, 3.2vw, 15px); border-radius: 8px; }
.badges { display: flex; gap: 8px; justify-content: center; margin: 12px 0 4px; flex-wrap: wrap; }
.badge { padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: 14px; background: var(--cell); color: var(--sub); }
.badge.on { background: var(--green); color: #fff; }
.badge.tombala.on { background: var(--gold); color: #3A2A00; }

/* Çark */
.wheel-wrap { position: relative; width: min(86vw, 360px); margin: 10px auto; }
.wheel-wrap canvas { width: 100%; height: auto; display: block; }
.pointer {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 28px solid var(--red);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}
.result-name { color: var(--green-dark); }
@media (prefers-color-scheme: dark) { .result-name { color: var(--green); } }

/* Yükleniyor noktaları */
.dots { display: inline-flex; gap: 6px; margin-inline-start: 6px; vertical-align: middle; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: dot 1.2s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: 0.2s; }
.dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }
.pulse { animation: pulse 1.6s infinite ease-in-out; }
@keyframes pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

/* Hediye: basılı tut */
.hold {
  position: relative; overflow: hidden; width: 100%; min-height: 64px; border-radius: 18px; font-weight: 700; font-size: 17px;
  background: var(--purple); color: #fff; user-select: none; -webkit-user-select: none; touch-action: none;
}
.hold .fill { position: absolute; inset: 0; width: 0%; background: rgba(255, 255, 255, 0.28); transition: none; }
.hold span { position: relative; }
.hold:disabled { opacity: 0.5; }
.match { background: linear-gradient(135deg, var(--purple), var(--teal)); color: #fff; border: 0; }
.match h2 { color: rgba(255, 255, 255, 0.8); }
.match .sub { color: rgba(255, 255, 255, 0.85); }

/* Takımlar */
.team { border-inline-start: 5px solid var(--green); }
.team:nth-child(2) { border-inline-start-color: var(--teal); }
.team:nth-child(3) { border-inline-start-color: var(--gold); }
.team:nth-child(4) { border-inline-start-color: var(--red); }
.team:nth-child(5) { border-inline-start-color: var(--purple); }
.team h3 { margin: 0 0 8px; font-size: 20px; }

/* Konfeti */
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 50; }

/* Alt bilgi */
.foot { text-align: center; color: var(--sub); font-size: 13px; margin-top: 24px; }
.foot a { text-decoration: none; }

/* Ana sayfa */
.hero { text-align: center; padding: 28px 0 10px; }
.hero .logo { width: 72px; height: 72px; margin: 0 auto 10px; }
.hero h1 { margin: 0; font-size: 34px; letter-spacing: -0.02em; }
.hero p { color: var(--sub); font-size: 17px; margin: 10px auto 0; max-width: 420px; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 18px 0; }
.feature { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.feature i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.appstore { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; }

[dir="rtl"] .pointer { left: 50%; }