/* Kim Ajan — görsel kimlik.
 *
 * Yön: karanlık bir masa üstünde duran gizli dosya. Rol kartı bir manila klasör;
 * Ajan'ın kartında mekân alanı KARALANMIŞ. Redaksiyon oyunun kuralının kendisi
 * olduğu için dekor değil, mekaniğin görselleşmiş hâli.
 *
 * Tailwind CDN yerleşim yardımcıları için kullanılıyor; kimlik burada tanımlı ki
 * CDN yavaş gelse bile sayfa doğru görünsün.
 */

/* Renkler WCAG AA'ya göre seçildi, göze göre değil. Ölçülen oranlar yorumlarda:
   ilk yazdığım palette kırmızı 2.87:1, kenarlıklar 1.26:1 ve placeholder 3.0:1
   çıkıyordu — hepsi eşiğin altında. Koyu zemin ve kâğıt zemin için ayrı kırmızı/
   yeşil gerekiyor, çünkü tek bir ton ikisinde birden geçmiyor. */
:root {
  --ink: #14120e; /* masa */
  --ink-2: #1f1c16; /* yükseltilmiş yüzey */
  --ink-3: #736a57; /* kenarlık — 3.50:1 / 3.18:1 (UI sınırı için ≥3 şart) */
  --paper: #e8dcc0; /* manila dosya */
  --paper-2: #d8c9a6; /* dosya kenarı / sekme */
  --paper-ink: #14120e; /* kâğıt üstündeki yazı — 13.74:1 */
  --redact: #0b0a08; /* karalama bandı */

  --stamp: #e45a4a; /* koyu zeminde kırmızı metin — 5.22:1 / 4.74:1 */
  --stamp-paper: #b3271e; /* kâğıt üstünde kırmızı — 4.78:1 */
  --stamp-dim: #7d1c16; /* dolgu; üstüne açık metin gelir */
  --olive: #7a9c66; /* koyu zeminde onay — 5.48:1 */
  --olive-paper: #456034; /* kâğıt üstünde onay — 5.19:1 */

  --muted: #9a9080; /* yardımcı metin — 5.95:1 / 5.40:1 */
  --placeholder: #948a76; /* 4.98:1 */
  --label-paper: #554c3d; /* kâğıt üstü küçük etiket — 6.20:1 */

  --edge: 2px;
  --radius: 3px; /* dosya kâğıdı: neredeyse köşeli */

  --pad: clamp(16px, 4.5vw, 24px);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--ink);
  /* Masanın üstüne düşen tek bir lamba. */
  background-image: radial-gradient(
    120% 80% at 50% -10%,
    rgba(232, 220, 192, 0.09) 0%,
    rgba(232, 220, 192, 0) 60%
  );
  background-attachment: fixed;
  color: var(--paper);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}

.shell {
  min-height: 100dvh;
  max-width: 34rem;
  margin: 0 auto;
  padding: calc(var(--safe-top) + 12px) var(--pad) calc(var(--safe-bottom) + 20px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* --- kurumsal etiket dili ------------------------------------------------- */

.label {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.label-on-paper {
  color: var(--label-paper);
}

.mono {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* --- dosya başlığı --------------------------------------------------------- */

.casebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ink-3);
}

.casebar__code {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--paper);
}

/* --- dosya kartı (imza öğesi) --------------------------------------------- */

.dossier {
  position: relative;
  border-radius: var(--radius);
  background: linear-gradient(168deg, var(--paper) 0%, var(--paper-2) 100%);
  color: var(--paper-ink);
  padding: 20px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 18px 40px -18px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}

/* Klasör sekmesi — kartın üstünden taşan küçük çıkıntı. */
.dossier::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 20px;
  width: 82px;
  height: 12px;
  background: var(--paper-2);
  border-radius: var(--radius) var(--radius) 0 0;
}

.dossier__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dossier__value {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: clamp(1.5rem, 7vw, 2.125rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* Karalama bandı: Ajan'ın mekân alanı. */
.redacted {
  display: inline-block;
  background: var(--redact);
  color: transparent;
  border-radius: 1px;
  padding: 0.1em 0.35em;
  user-select: none;
}

/* Kapalı dosya — basılı tutmadan içi görünmez. */
.dossier--sealed {
  background: var(--ink-2);
  color: var(--paper);
  border: 1px dashed var(--ink-3);
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 132px;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
}

.dossier--sealed::before {
  display: none;
}

.dossier-slot {
  position: relative;
  min-height: 132px;
}

.dossier-slot > * {
  transition: opacity 140ms ease;
}

/* --- mühür ---------------------------------------------------------------- */

.stamp {
  display: inline-block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stamp);
  border: var(--edge) solid var(--stamp);
  border-radius: 2px;
  padding: 6px 12px;
  transform: rotate(-3deg);
}

.stamp--lg {
  font-size: clamp(1.125rem, 5.5vw, 1.5rem);
  padding: 10px 18px;
  border-width: 3px;
}

.stamp--olive {
  color: var(--olive);
  border-color: var(--olive);
}

/* Kâğıt zemindeki mühürler: koyu zemin kırmızısı manila üstünde soluk kalıyor. */
.stamp--paper {
  color: var(--stamp-paper);
  border-color: var(--stamp-paper);
}

.stamp--paper-olive {
  color: var(--olive-paper);
  border-color: var(--olive-paper);
}

/* --- yüzeyler ------------------------------------------------------------- */

.panel {
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  padding: 18px;
}

.headline {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: clamp(1.375rem, 6vw, 1.875rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--paper);
}

.subtle {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* --- kontroller ----------------------------------------------------------- */

.btn {
  appearance: none;
  width: 100%;
  min-height: 56px;
  padding: 14px 18px;
  border: var(--edge) solid transparent;
  border-radius: var(--radius);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    transform 90ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.btn:active:not(:disabled) {
  transform: translateY(1px) scale(0.995);
}

/* İşaretçi olan cihazlarda hover; dokunmatikte yapışkan hover bırakmasın diye
   `hover: hover` şartı var. */
@media (hover: hover) {
  .btn--primary:hover:not(:disabled) {
    background: #f2e8d2;
    border-color: #f2e8d2;
  }

  .btn--ghost:hover:not(:disabled) {
    border-color: var(--paper);
  }

  .btn--danger:hover:not(:disabled) {
    background: rgba(228, 90, 74, 0.12);
  }

  .btn--quiet:hover:not(:disabled) {
    color: var(--paper);
  }

  .pick:hover {
    border-color: var(--paper);
  }
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn--primary {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.btn--ghost {
  background: transparent;
  color: var(--paper);
  border-color: var(--ink-3);
}

.btn--danger {
  background: transparent;
  color: var(--stamp);
  border-color: var(--stamp);
}

.btn--sm {
  min-height: 44px;
  font-size: 0.75rem;
  padding: 10px 14px;
}

.btn--quiet {
  background: transparent;
  color: var(--muted);
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 4px;
  letter-spacing: 0.08em;
  text-transform: none;
  min-height: 44px;
}

.field {
  width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  background: var(--ink-2);
  border: var(--edge) solid var(--ink-3);
  border-radius: var(--radius);
  color: var(--paper);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 1rem; /* 16px altı iOS'ta sayfayı zoomlar */
}

.field::placeholder {
  color: var(--placeholder);
}

/* Odak halkası TEK yerde tanımlı — yeni bir tıklanabilir öğe eklendiğinde
   listeye eklenmeyi unutmak, halkayı sessizce kaybetmenin en kolay yolu. */
.field:focus-visible,
.btn:focus-visible,
.pick:focus-visible,
.dossier--sealed:focus-visible,
[role='button']:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}

/* Görsel olarak gizli ama ekran okuyucunun ve odak sırasının gördüğü etiket.
   Placeholder etiket değildir: yazmaya başlayınca kaybolur. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.field--code {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-align: center;
  text-transform: uppercase;
}

/* --- karekod --------------------------------------------------------------- */

/* QR'ın kendi açık zemini var (kâğıt tonu) — koyu panelin üstünde okunması için
   kontrast şart, tarayıcılar koyu üstüne koyu QR'ı çözemez. */
.qr {
  display: block;
  width: min(220px, 62vw);
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius);
  background: var(--paper);
  padding: 6px;
}

/* --- kişi listesi / seçim ------------------------------------------------- */

.roster {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.roster__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
}

.roster__num {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  color: var(--muted);
  min-width: 1.5em;
}

.roster__name {
  flex: 1;
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--olive);
  flex: none;
}

.dot--off {
  background: var(--stamp-dim);
}

.picks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.pick {
  appearance: none;
  min-height: 60px;
  padding: 12px 14px;
  background: var(--ink-2);
  border: var(--edge) solid var(--ink-3);
  border-radius: var(--radius);
  color: var(--paper);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  overflow-wrap: anywhere;
  transition:
    border-color 140ms ease,
    background-color 140ms ease;
}

.pick[aria-pressed='true'] {
  border-color: var(--stamp);
  color: var(--stamp);
  background: rgba(179, 39, 30, 0.08);
}

.pick--compact {
  min-height: 52px;
  font-size: 0.9375rem;
  font-weight: 500;
}

/* --- soru bandı (2. tur) --------------------------------------------------- */

.exchange {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  text-align: center;
}

.exchange__name {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: clamp(1.125rem, 5vw, 1.5rem);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.exchange__arrow {
  color: var(--stamp);
  font-size: 1.5rem;
  line-height: 1;
}

/* --- alt eylem çubuğu ------------------------------------------------------ */

.actionbar {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding-top: 12px;
  padding-bottom: calc(var(--safe-bottom) + 4px);
  /* Altından geçen içerik butonun arkasında okunmasın diye tam opak bir taban,
     üstte kısa bir geçiş. Zayıf gradyan "üst üste binmiş" gibi görünüyordu. */
  background: linear-gradient(to top, var(--ink) 0%, var(--ink) 78%, rgba(20, 18, 14, 0) 100%);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --- açılır sayfa (şüphelen) ---------------------------------------------- */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 9, 7, 0.78);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 40;
  animation: fade-in 160ms ease;
}

.sheet {
  width: 100%;
  max-width: 34rem;
  background: var(--ink-2);
  border-top: var(--edge) solid var(--stamp);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 20px var(--pad) calc(var(--safe-bottom) + 20px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 82dvh;
  overflow-y: auto;
  animation: sheet-up 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- bildirim mührü -------------------------------------------------------- */

.toast-stack {
  position: fixed;
  top: calc(var(--safe-top) + 10px);
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  padding: 0 var(--pad);
}

.toast {
  max-width: 32rem;
  background: var(--ink-2);
  border: var(--edge) solid var(--ink-3);
  border-radius: var(--radius);
  padding: 11px 16px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.95);
  animation: stamp-down 260ms cubic-bezier(0.2, 1.4, 0.4, 1);
}

.toast--suspect {
  border-color: var(--stamp);
  color: var(--stamp);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.toast--error {
  border-color: var(--stamp);
  color: var(--paper);
  background: var(--stamp-dim);
}

.toast--leaving {
  animation: fade-out 200ms ease forwards;
}

/* --- bağlantı uyarısı ------------------------------------------------------ */

.offline {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  padding: 10px 16px calc(var(--safe-bottom) + 10px);
  background: var(--stamp-dim);
  color: var(--paper);
  text-align: center;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
}

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

@keyframes stamp-down {
  0% {
    opacity: 0;
    transform: scale(1.35) rotate(-4deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes sheet-up {
  from {
    transform: translateY(16px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.reveal {
  animation: fade-in 200ms ease;
}

/* Kısa ekranlar (eski SE, tarayıcı çubuğu açıkken). Rol kartı ve boşluklar
   küçülüp faz içeriği yapışkan çubuğun üstünde kalsın. */
@media (max-height: 700px) {
  .shell {
    gap: 12px;
    padding-top: calc(var(--safe-top) + 8px);
  }

  .dossier-slot,
  .dossier--sealed {
    min-height: 86px;
  }

  .dossier--sealed .headline {
    font-size: 1.0625rem;
  }

  .panel {
    padding: 14px;
  }

  .btn {
    min-height: 50px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}