/* ═══════════════════════════════════════════════════════════════════════════
   WINNERS SHOP — TASARIM DİLİ
   Koyu zemin + altın vurgu. Neon YOK, glow YOK. Temiz, premium, hareketli.
   Hareket bütçesi: açılış toplamı 600 ms altında; hover 150 ms; basma 80 ms.
   prefers-reduced-motion: reduce → tüm süreler 0 (en altta).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --zemin:      #0d0d11;
  --zemin-2:    #121218;
  --kart:       #17171f;
  --kart-ust:   #21212c;
  --kenar:      #2e2e3a;
  --kenar-parlak:#44445a;

  --altin:      #d4a24a;
  --altin-acik: #f0c674;
  --altin-koyu: #8a6420;

  --pozitif:    #3ecc7a;
  --pozitif-loş:#1c3d2a;
  --negatif:    #e0555f;
  --negatif-loş:#3d1f22;

  --metin:      #f2f2f8;
  --metin-2:    #a3a3b4;
  --metin-3:    #7a7a8d;

  --r:          16px;
  --r-kucuk:    10px;
  --bosluk:     14px;

  --golge:      0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.25);
  --golge-hover:0 2px 6px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.4);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --hiz:  .15s;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.45;
}

/* Zeminde çok hafif bir altın ışıma — glow değil, derinlik. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(1200px 620px at 72% -14%, rgba(212,162,74,.10), transparent 62%),
    radial-gradient(900px 500px at 12% 108%, rgba(96,110,190,.07), transparent 60%);
}
/* Cok hafif izgara dokusu — duz siyah "olu" gorunmesin. Kontrast fark etmez,
   yuzeye derinlik verir. */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(1000px 700px at 50% 0%, #000 20%, transparent 78%);
}
body > * { position: relative; z-index: 1; }

/* ── Sayılar ──────────────────────────────────────────────────────────────
   Para görünsün: büyük, kalın, sıkı. tabular-nums → sayarken zıplamaz.      */
.sayi {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 750;
  letter-spacing: -.02em;
  line-height: 1.05;
}
.sayi-dev  { font-size: clamp(34px, 6vw, 52px); }
.sayi-buyuk{ font-size: clamp(26px, 4.2vw, 34px); }
.sayi-orta { font-size: clamp(21px, 3.2vw, 26px); }
.tl::before { content: "₺"; font-size: .58em; font-weight: 600; opacity: .6; margin-right: .12em;
              vertical-align: .12em; }

/* ── Bento ızgarası ───────────────────────────────────────────────────────
   12 kolon. Kutular .k{n} ile genişlik, .y{n} ile yükseklik alır.           */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--bosluk);
  align-items: stretch;
}
.k3{grid-column:span 3} .k4{grid-column:span 4} .k5{grid-column:span 5}
.k6{grid-column:span 6} .k7{grid-column:span 7} .k8{grid-column:span 8}
.k12{grid-column:span 12}
.y1{grid-row:span 1} .y2{grid-row:span 2}

/* ── Kart ─────────────────────────────────────────────────────────────── */
.kart {
  background: linear-gradient(168deg, var(--kart-ust), var(--kart));
  border: 1px solid var(--kenar);
  border-radius: var(--r);
  padding: 18px 20px;
  box-shadow: var(--golge);
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform var(--hiz) ease, box-shadow var(--hiz) ease,
              border-color var(--hiz) ease;
  min-height: 108px;
}
.kart:hover { transform: translateY(-2px); box-shadow: var(--golge-hover);
              border-color: var(--kenar-parlak); }

/* Hakediş kutusu — tek altın çerçeveli eleman. Nadir kullanıldığı için değerli. */
.kart-altin {
  border-color: var(--altin-koyu);
  background:
    linear-gradient(168deg, rgba(212,162,74,.10), rgba(212,162,74,.02) 46%),
    linear-gradient(168deg, var(--kart-ust), var(--kart));
}
.kart-altin:hover { border-color: var(--altin); }
.kart-altin .sayi { color: var(--altin-acik); }

.kart-baslik {
  font-size: 11.5px; font-weight: 650; letter-spacing: .085em;
  text-transform: uppercase; color: var(--metin-2); margin-bottom: 10px;
  display: flex; align-items: center; gap: 7px;
}
.kart-alt { margin-top: 12px; font-size: 12.5px; color: var(--metin-2);
            display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Rozetler ─────────────────────────────────────────────────────────── */
.rozet {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; line-height: 1.5;
  border: 1px solid transparent; white-space: nowrap;
}
.rozet-poz { color: var(--pozitif); background: var(--pozitif-loş); border-color: rgba(62,204,122,.28); }
.rozet-neg { color: var(--negatif); background: var(--negatif-loş); border-color: rgba(224,85,95,.28); }
.rozet-altin{ color: var(--altin-acik); background: rgba(212,162,74,.12); border-color: rgba(212,162,74,.30); }
.rozet-notr{ color: var(--metin-2); background: rgba(255,255,255,.045); border-color: var(--kenar); }

.nokta { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.nokta-aktif { background: var(--pozitif); box-shadow: 0 0 0 3px rgba(62,204,122,.15); }
.nokta-pasif { background: var(--metin-3); }

/* ── Sparkline ────────────────────────────────────────────────────────── */
.spark { display: flex; align-items: flex-end; gap: 3px; height: 34px; margin-top: 4px; }
.spark i {
  flex: 1; background: linear-gradient(180deg, var(--altin), var(--altin-koyu));
  border-radius: 2px 2px 0 0; opacity: .55; min-height: 3px;
  transform-origin: bottom; animation: cubuk .45s cubic-bezier(.2,.8,.3,1) both;
}
.spark i:last-child { opacity: 1; }
@keyframes cubuk { from { transform: scaleY(.05); } to { transform: scaleY(1); } }

/* ── İlerleme çubuğu ──────────────────────────────────────────────────── */
.ilerleme { height: 6px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.ilerleme > span { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--altin-koyu), var(--altin));
  transform-origin: left; animation: dolus .6s cubic-bezier(.2,.8,.3,1) both; }
@keyframes dolus { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── Filtre çipleri ───────────────────────────────────────────────────── */
.cipler { display: flex; gap: 8px; flex-wrap: wrap; }
.cip {
  padding: 7px 15px; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.04); border: 1px solid var(--kenar);
  color: var(--metin-2); font-size: 13px; font-weight: 600;
  transition: all var(--hiz) ease;
}
.cip:hover { color: var(--metin); border-color: var(--kenar-parlak); }
.cip[aria-pressed="true"] {
  background: rgba(212,162,74,.14); border-color: rgba(212,162,74,.42); color: var(--altin-acik);
}
.cip:active { transform: scale(.97); }

/* ── Tablo ────────────────────────────────────────────────────────────── */
.tablo-sar { overflow-x: auto; margin: 0 -4px; }
table.ws { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 640px; }
table.ws th {
  text-align: right; padding: 10px 12px; font-size: 11px; font-weight: 650;
  letter-spacing: .07em; text-transform: uppercase; color: var(--metin-3);
  border-bottom: 1px solid var(--kenar); white-space: nowrap; cursor: pointer;
  user-select: none; transition: color var(--hiz) ease;
}
table.ws th:first-child, table.ws td:first-child { text-align: left; }
table.ws th:hover { color: var(--metin-2); }
table.ws th[aria-sort] { color: var(--altin); }
table.ws th .ok { opacity: .5; font-size: 9px; margin-left: 3px; }
table.ws td {
  padding: 12px; text-align: right; border-bottom: 1px solid rgba(255,255,255,.035);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
table.ws tbody tr { transition: background var(--hiz) ease; }
table.ws tbody tr:hover { background: rgba(255,255,255,.028); }
.tel { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; }
.sonuk { color: var(--metin-3); }

/* Satırlar sırayla belirir — en fazla 12 satır, sonrası anında (bekletmek işkence). */
tbody.stagger tr { animation: satir .28s ease both; }
tbody.stagger tr:nth-child(1){animation-delay:.02s} tbody.stagger tr:nth-child(2){animation-delay:.06s}
tbody.stagger tr:nth-child(3){animation-delay:.10s} tbody.stagger tr:nth-child(4){animation-delay:.14s}
tbody.stagger tr:nth-child(5){animation-delay:.18s} tbody.stagger tr:nth-child(6){animation-delay:.22s}
tbody.stagger tr:nth-child(7){animation-delay:.26s} tbody.stagger tr:nth-child(8){animation-delay:.30s}
tbody.stagger tr:nth-child(9){animation-delay:.34s} tbody.stagger tr:nth-child(10){animation-delay:.38s}
tbody.stagger tr:nth-child(11){animation-delay:.42s} tbody.stagger tr:nth-child(12){animation-delay:.46s}
@keyframes satir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Kart giriş animasyonu (stagger, toplam < 600 ms) ─────────────────── */
.giris > * { animation: kartGir .3s cubic-bezier(.2,.8,.3,1) both; }
.giris > *:nth-child(1){animation-delay:0s}    .giris > *:nth-child(2){animation-delay:.05s}
.giris > *:nth-child(3){animation-delay:.10s}  .giris > *:nth-child(4){animation-delay:.15s}
.giris > *:nth-child(5){animation-delay:.20s}  .giris > *:nth-child(6){animation-delay:.25s}
.giris > *:nth-child(7){animation-delay:.30s}
@keyframes kartGir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Düğmeler ─────────────────────────────────────────────────────────── */
.dugme {
  padding: 10px 18px; border-radius: var(--r-kucuk); border: 1px solid var(--kenar);
  background: rgba(255,255,255,.05); color: var(--metin);
  font-size: 13.5px; font-weight: 650; cursor: pointer; font-family: inherit;
  transition: all var(--hiz) ease;
}
.dugme:hover { background: rgba(255,255,255,.09); border-color: var(--kenar-parlak); }
.dugme:active { transform: scale(.97); }
.dugme-altin {
  background: linear-gradient(180deg, var(--altin-acik), var(--altin));
  color: #1a1206; border-color: var(--altin); font-weight: 700;
}
.dugme-altin:hover { filter: brightness(1.07); background: linear-gradient(180deg, var(--altin-acik), var(--altin)); }

/* Başarı dalgası — kaydet sonrası 400 ms */
@keyframes dalga { 0%{box-shadow:0 0 0 0 rgba(62,204,122,.45)} 100%{box-shadow:0 0 0 14px rgba(62,204,122,0)} }
.dalga { animation: dalga .4s ease-out; }

/* ── İskelet (spinner yok) ────────────────────────────────────────────── */
.iskelet {
  background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.08) 37%, rgba(255,255,255,.04) 63%);
  background-size: 400% 100%; animation: parilti 1.3s ease infinite;
  border-radius: 6px; color: transparent !important;
}
@keyframes parilti { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ── Başlık çubuğu ────────────────────────────────────────────────────── */
.ust {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px 0 22px; flex-wrap: wrap;
}
.marka { display: flex; align-items: center; gap: 11px; font-weight: 750;
         font-size: 17px; letter-spacing: -.015em; }
.marka .w {
  width: 32px; height: 32px; border-radius: 9px; flex: 0 0 auto;
  background: linear-gradient(145deg, var(--altin-acik), var(--altin-koyu));
  color: #171104; display: grid; place-items: center; font-size: 16px; font-weight: 800;
}
.marka small { display: block; font-size: 11px; font-weight: 500; color: var(--metin-2);
               letter-spacing: .06em; text-transform: uppercase; }

.sar { max-width: 1220px; margin: 0 auto; padding: 0 20px 56px; }

/* ── Mobil: tek kolon, sıkışma yok ────────────────────────────────────── */
@media (max-width: 860px) {
  :root { --bosluk: 11px; --r: 14px; }
  .sar { padding: 0 13px 40px; }
  /* Bento tek kolona düşer; ikili kalması gereken küçük kartlar .ikili alır. */
  .k3,.k4,.k5,.k6,.k7,.k8,.k12 { grid-column: span 12; }
  .ikili { grid-column: span 6 !important; }
  .y2 { grid-row: span 1; }
  .kart { min-height: 92px; padding: 15px 16px; }
  .tablo-sar { display: none; }        /* mobilde tablo değil KART listesi */
  .kart-liste { display: flex !important; }
}
.kart-liste { display: none; flex-direction: column; gap: 9px; }
.oyuncu-kart {
  border: 1px solid var(--kenar); border-radius: var(--r-kucuk);
  padding: 13px 14px; background: var(--kart);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  animation: satir .28s ease both;
}

/* ── Hareket kısıtlaması ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-delay: 0ms !important;
    animation-iteration-count: 1 !important; transition-duration: .001ms !important;
  }
  .kart:hover { transform: none; }
}

/* ═══ FORM · KİP (modal) · SEKME — Faz 1'de eklendi ═══════════════════════ */
.alan { margin-bottom: 14px; }
.alan label { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--metin-2); margin: 0 0 8px; }
.alan .ipucu { font-size: 11.5px; color: var(--metin-3); margin-top: 5px; }
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], select, textarea {
  width: 100%; padding: 10px 12px; border-radius: var(--r-kucuk);
  border: 1px solid var(--kenar); background: rgba(255,255,255,.035);
  color: var(--metin); font-size: 14.5px; font-family: inherit;
  transition: border-color var(--hiz) ease, background var(--hiz) ease;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--altin); background: rgba(212,162,74,.05); }
input:disabled { opacity: .5; }
.satir2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 620px) { .satir2 { grid-template-columns: 1fr; } }

.kip-fon {
  position: fixed; inset: 0; z-index: 50; display: none;
  background: rgba(6,6,9,.72); backdrop-filter: blur(3px);
  align-items: center; justify-content: center; padding: 18px;
  animation: fon .18s ease both;
}
.kip-fon[data-acik] { display: flex; }
@keyframes fon { from { opacity: 0; } to { opacity: 1; } }
.kip {
  width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto;
  background: linear-gradient(168deg, var(--kart-ust), var(--kart));
  border: 1px solid var(--kenar-parlak); border-radius: var(--r);
  padding: 22px; box-shadow: 0 24px 64px rgba(0,0,0,.6);
  animation: kipGir .22s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes kipGir { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.kip h2 { margin: 0 0 4px; font-size: 18px; font-weight: 700; letter-spacing: -.015em; }
.kip .alt { margin: 0 0 18px; font-size: 13px; color: var(--metin-2); }
.kip-dip { display: flex; gap: 9px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }

.sekmeler { display: flex; gap: 4px; border-bottom: 1px solid var(--kenar);
  margin-bottom: 20px; overflow-x: auto; }
.sekme { padding: 11px 16px; background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--metin-2); font-size: 14px; font-weight: 650; cursor: pointer;
  font-family: inherit; white-space: nowrap; transition: all var(--hiz) ease; }
.sekme:hover { color: var(--metin); }
.sekme[aria-selected="true"] { color: var(--altin-acik); border-bottom-color: var(--altin); }
.sekme[disabled] { opacity: .35; cursor: not-allowed; }

.eylem { display: flex; gap: 6px; justify-content: flex-end; }
.eylem button { padding: 5px 10px; font-size: 12px; border-radius: 7px; }
.dugme-tehlike { color: var(--negatif); border-color: rgba(224,85,95,.3); }
.dugme-tehlike:hover { background: var(--negatif-loş); border-color: var(--negatif); }

.bildirim {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 90;
  padding: 12px 18px; border-radius: var(--r-kucuk); font-size: 14px; font-weight: 600;
  border: 1px solid var(--kenar-parlak); background: var(--kart-ust);
  box-shadow: 0 12px 40px rgba(0,0,0,.5); animation: bildir .25s ease both; max-width: 92vw;
}
.bildirim.iyi  { border-color: rgba(62,204,122,.4);  color: var(--pozitif); }
.bildirim.kotu { border-color: rgba(224,85,95,.45);  color: var(--negatif); }
@keyframes bildir { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

.gizli-deger {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px;
  letter-spacing: .06em; padding: 13px 15px; border-radius: var(--r-kucuk);
  background: rgba(212,162,74,.10); border: 1px dashed rgba(212,162,74,.42);
  color: var(--altin-acik); word-break: break-all; user-select: all; text-align: center;
}
.zaman-cizgi { list-style: none; margin: 0; padding: 0; }
.zaman-cizgi li { position: relative; padding: 0 0 16px 22px; border-left: 2px solid var(--kenar); }
.zaman-cizgi li:last-child { border-left-color: transparent; padding-bottom: 0; }
.zaman-cizgi li::before { content: ""; position: absolute; left: -6px; top: 4px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--kenar-parlak);
  border: 2px solid var(--zemin); }
.zaman-cizgi li.acik::before { background: var(--altin); }
.bos-durum { text-align: center; padding: 40px 18px; color: var(--metin-3); font-size: 13.5px; }