/* Tema değişkenleri — Tailwind renkleri bunlara bağlıdır (tw-config.js) */
:root,
html.dark {
  --bg: 13 21 36;          /* #0D1524 lacivert mürekkep */
  --panel: 21 32 54;       /* #152036 */
  --panel-2: 28 42 70;     /* #1C2A46 */
  --line: 40 56 90;        /* #28385A */
  --fg: 231 236 245;       /* #E7ECF5 */
  --mute: 140 154 181;     /* #8C9AB5 */
  --gold: 242 181 68;      /* #F2B544 kehribar / bilet altını */
  --gold-ink: 43 29 4;     /* altın üstü yazı */
  --ok: 61 214 140;
  --bad: 242 100 90;
  --info: 110 168 254;
  color-scheme: dark;
}
html.light {
  --bg: 239 242 248;
  --panel: 255 255 255;
  --panel-2: 246 248 252;
  --line: 214 221 234;
  --fg: 19 32 58;
  --mute: 92 106 135;
  --gold: 183 121 31;
  --gold-ink: 255 255 255;
  --ok: 22 150 92;
  --bad: 205 58 48;
  --info: 37 99 235;
  color-scheme: light;
}

/* Yönetim paneli: Otomat renkleri (nane / çam yeşili / pirinç) */
html[data-admin].light {
  --bg: 238 245 240;
  --panel: 255 255 255;
  --panel-2: 244 249 246;
  --line: 205 224 212;
  --fg: 16 48 42;
  --mute: 47 82 73;
  --gold: 16 48 42;
  --gold-ink: 211 234 219;
  --ok: 24 122 78;
  --bad: 179 50 31;
  --info: 37 99 235;
}
html[data-admin].dark {
  --bg: 9 31 27;
  --panel: 16 48 42;
  --panel-2: 22 61 53;
  --line: 44 88 78;
  --fg: 228 241 232;
  --mute: 169 211 186;
  --gold: 217 164 65;
  --gold-ink: 16 48 42;
  --ok: 95 211 154;
  --bad: 242 128 108;
  --info: 130 175 255;
}
html[data-admin] body { font-family: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; }
html[data-admin] h1, html[data-admin] h2 { font-stretch: 88%; }
.meter { height: 8px; border-radius: 9999px; background: rgb(var(--line) / .8); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 9999px; background: rgb(var(--gold)); }

html { -webkit-text-size-adjust: 100%; }
body {
  background: rgb(var(--bg));
  color: rgb(var(--fg));
  font-family: 'Onest', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: 'tnum' 1;
}
.font-code { font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Bilet kartı: iki yanda yarım daire çentik + perfore ayraç */
.ticket { position: relative; }
.ticket-perf {
  position: relative;
  height: 0;
  border-top: 2px dashed rgb(var(--line));
  margin: 0 22px;
}
.ticket-perf::before,
.ticket-perf::after {
  content: '';
  position: absolute;
  top: -15px;
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  background: rgb(var(--bg));
  box-shadow: inset 0 0 0 1px rgb(var(--line));
}
.ticket-perf::before { left: -37px; clip-path: inset(0 0 0 50%); }
.ticket-perf::after  { right: -37px; clip-path: inset(0 50% 0 0); }

/* Kod girişinin "baskı" hissi */
.code-input {
  letter-spacing: 0.14em;
  caret-color: rgb(var(--gold));
}
.code-input::placeholder { letter-spacing: 0.14em; color: rgb(var(--mute) / 0.45); }

/* İlerleme çubuğu */
.bar { height: 10px; border-radius: 9999px; background: rgb(var(--line) / 0.7); overflow: hidden; }
.bar > span {
  display: block; height: 100%; border-radius: 9999px;
  background: rgb(var(--gold));
  transition: width 700ms cubic-bezier(.2,.8,.2,1);
}
.bar.is-live > span {
  background-image: linear-gradient(110deg, rgb(var(--gold)) 40%, rgb(255 255 255 / .35) 50%, rgb(var(--gold)) 60%);
  background-size: 220% 100%;
  animation: shimmer 2.2s linear infinite;
}
@keyframes shimmer { to { background-position: -220% 0; } }

/* Sonuç paneli açılışı (kullanıcı eylemine cevap) */
.reveal { animation: reveal 320ms ease-out; }
@keyframes reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.spinner {
  width: 18px; height: 18px; border-radius: 9999px;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin .7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

:focus-visible { outline: 2px solid rgb(var(--gold)); outline-offset: 2px; }

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

/* Admin tablo kaydırma */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { min-width: 720px; }

dialog::backdrop { background: rgb(5 10 20 / .6); backdrop-filter: blur(2px); }
dialog { color: rgb(var(--fg)); }

.tabs-scroll { scrollbar-width: none; }
.tabs-scroll::-webkit-scrollbar { display: none; }

/* ---- Form ve yönetim paneli bileşenleri ---- */
.field {
  display: block;
  margin-top: .5rem;
  width: 100%;
  border-radius: .75rem;
  border: 1px solid rgb(var(--line));
  background: rgb(var(--bg) / .6);
  padding: .7rem .95rem;
  color: rgb(var(--fg));
  outline: none;
}
.field:focus { border-color: rgb(var(--gold)); }
.field::placeholder { color: rgb(var(--mute) / .6); }
select.field { appearance: none; background-image: linear-gradient(45deg, transparent 50%, rgb(var(--mute)) 50%), linear-gradient(135deg, rgb(var(--mute)) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.25rem; }
textarea.field { resize: vertical; }

.nav-btn {
  padding: .85rem .9rem;
  border-bottom: 2px solid transparent;
  color: rgb(var(--mute));
  white-space: nowrap;
}
.nav-btn:hover { color: rgb(var(--fg)); }
.nav-btn[aria-selected="true"] { color: rgb(var(--fg)); border-bottom-color: rgb(var(--gold)); }

.type-opt span {
  display: block;
  border: 1px solid rgb(var(--line));
  border-radius: .75rem;
  padding: .65rem .8rem;
  text-align: center;
  cursor: pointer;
  font-size: .875rem;
  font-weight: 600;
  color: rgb(var(--mute));
}
.type-opt input:checked + span { border-color: rgb(var(--gold)); background: rgb(var(--gold) / .12); color: rgb(var(--fg)); }
.type-opt input:focus-visible + span { outline: 2px solid rgb(var(--gold)); outline-offset: 2px; }