/* ==========================================================================
   PERA FESTIVAL — BAŞVURU FORMU / WIZARD
   ========================================================================== */

/* ---------- Hazırlık listesi ---------- */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.checklist li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--fs-body); }
.checklist li::before { content: "✓"; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--success-100); color: var(--success-700); display: grid; place-items: center; font-size: 12px; font-weight: 700; }

.howstep { display: flex; gap: var(--space-4); }
.howstep .n { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--ink-200); display: grid; place-items: center; font-family: var(--font-display); font-size: 16px; }
.howstep strong { display: block; margin-bottom: 2px; }
.howstep p { margin: 0; font-size: var(--fs-body-sm); color: var(--text-secondary); }

/* ---------- Açık başvuru kartı ---------- */
.openapp { display: flex; gap: var(--space-5); padding: var(--space-5); border: var(--border-subtle); border-left: 4px solid var(--fcolor, var(--festival-primary)); border-radius: var(--radius-md); background: var(--surface); flex-wrap: wrap; align-items: center; }
.openapp .oa-main { flex: 1; min-width: 240px; }
.openapp.is-closed { background: var(--surface-2); opacity: .8; }

/* ==========================================================================
   WIZARD
   ========================================================================== */
body.wizard { background: var(--surface-2); }

.wz-top {
  position: sticky; top: 0; z-index: var(--z-stickybar); background: var(--surface-glass);
  backdrop-filter: blur(12px); border-bottom: var(--border-subtle);
}
.wz-top .inner { display: flex; align-items: center; gap: var(--space-4); height: 60px; max-width: var(--w-wide); margin-inline: auto; padding-inline: var(--space-4); }
.wz-top .wz-brand { display: flex; align-items: center; gap: var(--space-3); font-weight: 600; }
.wz-top .wz-brand .brand-mark { border-color: var(--ink-300); color: var(--ink-900); width: 32px; height: 32px; font-size: 15px; }
.wz-title { font-size: var(--fs-body-sm); font-weight: 600; min-width: 0; }
.wz-title b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-title span { display: block; font-size: var(--fs-micro); color: var(--text-secondary); font-weight: 400; }
.wz-panel .wz-head h1:focus { box-shadow: none; outline: none; }
@media (max-width: 767px) {
  .wz-top .inner { gap: var(--space-2); }
  .wz-title span { display: none; }
  .save-state { min-width: 0; }
  .save-state span:not(.spinner) { display: none; }
}
.save-state { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--text-secondary); min-height: 20px; min-width: 132px; justify-content: flex-end; }
.save-state.is-saved { color: var(--success-600); }
.save-state.is-error { color: var(--warning-600); }

.wz-progress-mobile { display: none; padding: 10px var(--space-4); border-top: var(--border-subtle); background: var(--surface); }
@media (max-width: 991px) { .wz-progress-mobile { display: block; } }

.wz-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-10); max-width: 1040px; margin-inline: auto; padding: var(--space-10) var(--space-4) var(--space-24); }
@media (max-width: 991px) { .wz-layout { grid-template-columns: 1fr; padding-top: var(--space-6); padding-bottom: 120px; } .wz-rail { display: none; } }

.wz-rail { position: sticky; top: 92px; align-self: start; }
.wz-rail .rail-foot { margin-top: var(--space-6); padding-top: var(--space-4); border-top: var(--border-subtle); font-size: var(--fs-caption); color: var(--text-secondary); }

.wz-panel { background: var(--surface); border: var(--border-subtle); border-radius: var(--radius-lg); padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); box-shadow: var(--shadow-xs); }
.wz-panel > .wz-head { margin-bottom: var(--space-8); }
.wz-panel .wz-head h1 { margin-bottom: var(--space-2); }
.wz-panel .wz-head p { color: var(--text-secondary); margin: 0; }
.wz-form { max-width: var(--w-form); }

.wz-anim { animation: step-in var(--dur-medium) var(--ease-out); }
.wz-anim.back { animation-name: step-in-back; }
@keyframes step-in { from { opacity: 0; transform: translateX(14px); } }
@keyframes step-in-back { from { opacity: 0; transform: translateX(-14px); } }

.wz-nav { display: flex; gap: var(--space-3); margin-top: var(--space-8); padding-top: var(--space-6); border-top: var(--border-subtle); }
.wz-nav .grow { flex: 1; }
@media (max-width: 991px) {
  .wz-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-stickybar);
    margin: 0; padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
    background: var(--surface-glass); backdrop-filter: blur(12px); border-top: var(--border-subtle);
  }
  .wz-nav .btn { flex: 1; }
  .wz-nav .btn-back { flex: 0 0 56px; }
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 575px) { .field-row { grid-template-columns: 1fr; } }

/* ---------- Seçim kartları ---------- */
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 575px) { .choice-grid { grid-template-columns: 1fr; } }
.choice {
  text-align: left; padding: var(--space-5); border: 1.5px solid var(--ink-150); border-radius: var(--radius-md);
  background: var(--surface); transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.choice:hover { border-color: var(--ink-300); transform: translateY(-2px); }
.choice.is-active { border-color: var(--festival-primary); background: var(--festival-primary-soft); box-shadow: 0 0 0 3px var(--festival-ring); }
.choice .ic { font-size: 24px; margin-bottom: var(--space-2); }
.choice strong { display: block; font-size: var(--fs-body); margin-bottom: 4px; }
.choice p { margin: 0; font-size: var(--fs-caption); color: var(--text-secondary); }

/* ---------- Kategori sonucu ---------- */
.cat-result { animation: rise var(--dur-medium) var(--ease-out); }

/* ---------- Repertuvar ---------- */
.piece {
  border: var(--border-subtle); border-radius: var(--radius-md); background: var(--surface); margin-bottom: var(--space-4);
  animation: rise var(--dur-medium) var(--ease-out);
}
.piece-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: var(--border-subtle); background: var(--surface-2); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.piece-head .grip { cursor: grab; color: var(--ink-400); }
.piece-head strong { font-size: var(--fs-caption); letter-spacing: .08em; color: var(--ink-500); }
.piece-head .sum { font-size: var(--fs-caption); color: var(--text-secondary); margin-left: auto; }
.piece-body { padding: var(--space-4); }
.piece.is-collapsed .piece-body { display: none; }
.piece.dragging { opacity: .5; }
.piece.drag-over { border-color: var(--festival-primary); box-shadow: 0 0 0 3px var(--festival-ring); }

.time-meter { position: sticky; top: 72px; z-index: 5; background: var(--surface); border: var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-5); }
.time-meter .spread { margin-bottom: var(--space-2); }
.time-meter .val { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---------- Belgeler ---------- */
.doc-block { border: var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-4); background: var(--surface); }
.doc-block > .spread { margin-bottom: var(--space-3); }
.mobile-upload { display: none; gap: var(--space-2); flex-direction: column; margin-top: var(--space-3); }
@media (max-width: 575px) { .mobile-upload { display: flex; } }

.iban-box { background: var(--surface-2); border: var(--border-subtle); border-radius: var(--radius-sm); padding: var(--space-3); font-size: var(--fs-caption); margin-top: var(--space-3); }
.iban-box .t-code { font-size: var(--fs-body-sm); font-weight: 600; }

/* ---------- Önizleme ---------- */
.rev-card { border: var(--border-subtle); border-radius: var(--radius-md); background: var(--surface); margin-bottom: var(--space-4); }
.rev-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: var(--border-subtle); background: var(--surface-2); }
.rev-head strong { font-size: var(--fs-micro); letter-spacing: .08em; color: var(--ink-500); }
.rev-body { padding: var(--space-4); }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: var(--space-2) var(--space-4); font-size: var(--fs-body-sm); }
.kv dt { color: var(--text-secondary); }
.kv dd { margin: 0; font-weight: 500; }
@media (max-width: 575px) { .kv { grid-template-columns: 1fr; gap: 0 0; } .kv dd { margin-bottom: var(--space-3); } }

/* ---------- Başarı ---------- */
.success-wrap { text-align: center; padding-block: var(--space-8); }
.success-icon {
  width: 88px; height: 88px; margin: 0 auto var(--space-6); border-radius: 50%;
  background: var(--success-100); color: var(--success-600); display: grid; place-items: center; font-size: 40px;
  animation: pop var(--dur-medium) var(--ease-spring);
}
@keyframes pop { from { transform: scale(0); } }
.appno {
  display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-ui);
  font-variant-numeric: tabular-nums; letter-spacing: .06em; font-weight: 700; font-size: clamp(1rem, .9rem + .8vw, 1.375rem);
  background: var(--surface-2); border: var(--border-default); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5); user-select: all;
}
.next-list { text-align: left; max-width: 480px; margin: var(--space-8) auto 0; }
.next-list li { display: flex; gap: var(--space-3); margin-bottom: var(--space-3); font-size: var(--fs-body-sm); }
.next-list .n { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--festival-primary-soft); color: var(--festival-primary); display: grid; place-items: center; font-size: var(--fs-micro); font-weight: 700; }

/* ---------- Chip seçici ---------- */
.chip-picker { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip-picker button { height: 34px; padding: 0 var(--space-3); border-radius: var(--radius-full); border: 1px solid var(--ink-200); background: var(--surface); font-size: var(--fs-caption); font-weight: 500; }
.chip-picker button[aria-pressed="true"] { background: var(--festival-primary); border-color: var(--festival-primary); color: var(--festival-on-primary); }

body.wizard .site-footer { display: none; }
body.wizard .skip-link { display: none; }

/* Kategori bağlamı şeridi */
.cat-context {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  background: var(--festival-primary-soft); border: 1px solid var(--festival-ring);
}
.cat-context strong { font-size: var(--fs-body-sm); }

/* Mobil wizard iyileştirmeleri */
@media (max-width: 767px) {
  .wz-panel { border-radius: var(--radius-md); padding: var(--space-4); }
  .wz-form .field { margin-bottom: var(--space-4); }
  .piece-head { position: sticky; top: 96px; z-index: 4; }
  .time-meter { top: 96px; }
  .doc-block { padding: var(--space-3); }
  .dropzone { min-height: 130px; padding: var(--space-4); }
  .choice { padding: var(--space-4); }
  .wz-nav .btn { min-height: 52px; }
}

/* Bağımsız başvuru sistemi kartı */
.syscard {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6); background: var(--surface); border: var(--border-subtle);
  border-top: 4px solid var(--fcolor, var(--festival-primary)); border-radius: var(--radius-md);
  transition: box-shadow var(--dur-base), transform var(--dur-base) var(--ease-out);
}
.syscard:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.syscard h3 { margin: var(--space-2) 0 0; }
.syscard .checklist li { font-size: var(--fs-body-sm); }
.syscard .cc-facts { margin-top: auto; }
.syscard .btn { margin-top: var(--space-4); }

/* ==========================================================================
   ONAYLAR (Rev.5)
   TEK checkbox kuralı: onay metni label'ın içinde, belge okuma düğmesi
   label'ın DIŞINDA. Böylece ikinci bir onay satırı izlenimi doğmaz ve
   düğmeye tıklamak kutuyu tetiklemez.
   ========================================================================== */
.consent {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--border-default); border-radius: var(--radius-md); background: var(--surface);
  transition: border-color .15s, background .15s;
}
.consent:hover { border-color: var(--ink-300); }
.consent.is-selected { border-color: var(--festival-primary); background: var(--festival-primary-soft); }
.consent-main {
  flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: var(--space-3);
  cursor: pointer; margin: 0; font-size: var(--fs-body-sm); font-weight: 500; line-height: 1.45;
}
.consent-main input { margin: 1px 0 0; width: 18px; height: 18px; flex: none; accent-color: var(--festival-primary); }
.consent-read { flex: none; white-space: nowrap; }

/* Belge okuma penceresi */
.doc-meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.doc-scroll {
  max-height: 52vh; overflow-y: auto; padding: var(--space-4);
  border: var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-2);
}
.doc-scroll:focus-visible { outline: 2px solid var(--festival-primary); outline-offset: 2px; }
.doc-sec + .doc-sec { margin-top: var(--space-4); }
.doc-sec h4 { font-size: var(--fs-body-sm); font-weight: 700; margin: 0 0 4px; }
.doc-sec p { margin: 0; font-size: var(--fs-body-sm); line-height: 1.65; color: var(--text-secondary); }
.doc-end { text-align: center; margin: var(--space-5) 0 0; }
.doc-agree { flex: 0 1 auto; font-size: var(--fs-caption); }
@media (max-width: 560px) {
  .consent { flex-wrap: wrap; }
  .consent-read { width: 100%; }
  .doc-agree { flex: 1 1 100%; margin-bottom: var(--space-2); }
}

/* PF-052 — mobil (≤ 767px) başvuru sihirbazı: üst şerit yapışkan DEĞİL ve sıkı; alttaki sabit
   gezinme şeridi ~60px. Kaydırırken ekranı kaplayan sabit/yapışkan alan ≤ 120px (önce 112 + 77). */
@media (max-width: 767px) {
  .wz-top { position: static; backdrop-filter: none; }
  .wz-top .inner { height: 52px; }
  .wz-progress-mobile { padding: 6px var(--space-4) 8px; }
  .wz-progress-mobile .spread { margin-bottom: 4px !important; }
  .wz-nav { padding: 8px var(--space-4) calc(8px + env(safe-area-inset-bottom)); }
  .wz-nav .btn { min-height: 44px; }
  .wz-layout { padding-bottom: 88px; }
  .piece-head, .time-meter { top: 8px; }   /* üst şerit artık yapışkan değil */
}

/* Sihirbaz üst şeridindeki dil seçici açık zemindedir: public header'ın beyaz (koyu şerit) bağlantı
   rengi burada EN'yi görünmez yapıyordu. Dokunma hedefleri ≥ 44px (PF-057). */
.wz-top .lang-switch a { color: var(--text-2); }
.wz-top .lang-switch a[aria-current="true"] { color: var(--text); }
.wz-top .lang-switch a, .wz-top .btn-icon { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 36px; }
.wz-top .btn-icon { width: 44px; min-width: 44px; padding: 0; }
@media (max-width: 767px) {
  /* Kayıt durumu mobilde yalnızca simge (metin düğüm olduğundan eski "span" kuralı işlemiyordu; ekran okuyucu metni okumaya devam eder) */
  .save-state { font-size: 0; min-width: 0; gap: 0; flex: none; }
  .save-state svg, .save-state .spinner { flex: none; }
  .wz-top .lang-switch { padding-left: 0; }
  .wz-top .lang-switch > span { display: none; }
  .wz-top .lang-switch a { min-width: 32px; }
}
