/* ==========================================================================
   app.css — MaG Canlı Q&A · katılımcı tarafı
   Ekran A (katılım) + Ekran B (katılımcı ekranı, masaüstü).
   Ham değer yok; her ölçü ve renk tokens.css'ten gelir.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* hidden özniteliği, sınıfların display kurallarına yenilmemeli:
   [hidden] tarayıcı stilinde yalnız `display:none` olarak tanımlı ve
   .join/.app gibi sınıf seçicileri onu geçersiz kılıyor. */
[hidden] { display: none !important; }

html { color-scheme: light; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

input, textarea, button { font: inherit; color: inherit; }
textarea { resize: none; }

a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--accent-link); }

/* Görünür odak halkası — klavyeyle gezinmenin şartı (brief §9). */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-6); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--space-8); top: calc(-1 * var(--space-64));
  z-index: 10; background: var(--ink); color: var(--on-ink);
  padding: var(--space-10) var(--space-16); border-radius: var(--radius-10);
  text-decoration: none;
}
.skip-link:focus { top: var(--space-8); color: var(--on-ink); }

/* ==========================================================================
   Ekran A · Katılım
   ========================================================================== */

.join {
  min-height: 100dvh; background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-56);
}

/* İki sütun: solda afiş, sağda etkinliğin adı ve katılım bilgisi.
   Tepeden hizalı — afişin üst kenarı marka bloğunun üst kenarıyla aynı
   çizgide başlar, sütunlar farklı boylarda olsa da kompozisyon dağılmaz. */
.join__inner {
  display: flex; gap: var(--space-56); align-items: flex-start;
  flex-wrap: wrap; justify-content: center;
}

/* Afiş · etkinliğin yüzü. Kare tuval önceden ayrıldığı için görsel geç
   gelse de düzen zıplamaz; kare olmayan afiş kırpılmadan ortalanır
   (contain) — boşluk çerçevesiz olduğu için görünmez. */
.poster {
  flex: none; margin: 0;
  width: var(--poster-size); aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
}
.poster img {
  display: block; max-width: 100%; max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-16);
  /* Yayılımsız ilk gölge saç teli bir çizgidir: cream afiş cream zeminde
     erimesin diye. Kenarlık değil — görselin ölçüsünü değiştirmez. */
  box-shadow: 0 0 0 1px var(--border), var(--shadow-poster);
}

.join__content {
  flex: 1 1 420px; max-width: var(--join-column-max);
  display: flex; flex-direction: column; gap: var(--space-24);
}

/* Etkinlik sahibinin logosu — her ekranda görünür (brief §7).
   Açık temada siyah kutu sarı + beyaz logoyu taşır; koyu temada zemin de
   dolgu da sıfırlandığı için logo çıplak kalır, sütunun sol kenarına oturur. */
.brand {
  margin: 0; background: var(--brand-bg); border-radius: var(--radius-14);
  padding: var(--brand-padding); align-self: flex-start;
  line-height: 0;
}
.brand img { display: block; height: 34px; width: auto; }

.eyebrow {
  margin: 0;
  font-family: var(--font-mono); font-size: var(--text-12);
  letter-spacing: var(--tracking-widest); text-transform: uppercase;
  color: var(--muted);
}

.join__identity { display: flex; flex-direction: column; gap: var(--space-12); }

.join__title {
  margin: 0; font-family: var(--font-heading);
  font-size: var(--text-40); line-height: var(--leading-tight);
  font-weight: var(--weight-bold); letter-spacing: var(--tracking-tightest);
  text-wrap: pretty;
}

/* Kart bileşeni: paylaşımlı, katılım ekranı artık kullanmıyor — admin.css'in
   liste ve form panelleri bunun üstüne kuruluyor (admin-card, admin-card__body). */
.join-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-16); box-shadow: var(--shadow-card);
  overflow: hidden;
}
.join-card__head {
  margin: 0; padding: var(--space-10) var(--space-20);
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: var(--text-12);
  font-weight: var(--weight-medium); letter-spacing: var(--tracking-widest);
  text-transform: uppercase; color: var(--muted);
}
.join-card__foot { padding: 0 var(--space-20) var(--space-20); }

/* Katılım bilgisi: davet.css'teki .stage__instructions ile aynı dil — QR
   üstte, yönerge ve adres altında akıyor. Kutulu bir form kartı değil. */
.join__instructions { min-width: 0; display: flex; flex-direction: column; gap: var(--space-16); align-items: flex-start; }
.join__instructions p { margin: 0; }
.instruction-primary { font-size: var(--text-16); color: var(--ink-3); }
.instruction-secondary { font-size: var(--text-14); color: var(--muted); }

/* Kısa adres: kod parçası mono — 0/O ve 1/I ayrımı okunaklı (brief §3). */
.address {
  display: flex; align-items: baseline; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--text-22);
  letter-spacing: var(--tracking-tight); overflow-wrap: anywhere;
}
.address__root { color: var(--muted); }
.address__code {
  font-weight: var(--weight-bold);
  background: var(--accent); color: var(--on-accent);
  padding: var(--space-2) var(--space-8); border-radius: var(--radius-6);
}

.btn-primary {
  display: block; width: 100%;
  background: var(--ink); color: var(--on-ink);
  border: none; border-radius: var(--radius-12);
  padding: var(--space-16) var(--space-30);
  font-size: var(--text-16); font-weight: var(--weight-semibold);
  cursor: pointer; transition: opacity var(--duration-fast) var(--ease);
}
.btn-primary:hover { opacity: 0.88; }

/* QR: kontrastlı düz zemin. Arkasına desen/gradyan konmaz (brief §3).
   Beyaz sabit — koyu temada da QR okunurluğu bozulmasın. */
.qr-card {
  background: #FFFFFF; padding: var(--space-12);
  border-radius: var(--radius-12); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-card);
  flex: none; line-height: 0;
}
.qr-card svg { display: block; width: var(--qr-size); height: var(--qr-size); }

/* ==========================================================================
   Ekran B · Katılımcı ekranı
   ========================================================================== */

.app { min-height: 100dvh; background: var(--surface); display: flex; flex-direction: column; }

/* --- Üst bar -------------------------------------------------------------- */
.topbar {
  flex: none; height: var(--topbar-height); padding: 0 var(--space-40);
  background: var(--card); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-24); position: sticky; top: 0; z-index: 5;
}
.topbar__left { display: flex; align-items: center; gap: var(--space-20); min-width: 0; }
.topbar .brand { border-radius: var(--radius-10); padding: var(--brand-padding-bar); flex: none; }
.topbar .brand img { height: 20px; }
.topbar__divider { width: 1px; height: var(--space-28); background: var(--border); flex: none; }
.topbar__identity { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.topbar__label {
  font-family: var(--font-mono); font-size: var(--text-11);
  letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--muted);
}
.topbar__title {
  font-family: var(--font-heading);
  font-size: var(--text-18); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tighter);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar__right { display: flex; align-items: center; gap: var(--space-22); flex: none; }

.live { display: flex; align-items: center; gap: var(--space-8); font-size: var(--text-14); color: var(--ink-3); }
.live__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); flex: none; }
.live[data-state="offline"] { color: var(--muted); }
.live[data-state="offline"] .live__dot { background: var(--disabled); animation: pulse 1.4s ease-in-out infinite; }

/* Sayaçlar paydasız yazılır — üründe hiçbir yerde tavan yok (brief §1). */
.counts { font-size: var(--text-14); color: var(--muted-2); font-variant-numeric: tabular-nums; }

/* --- Gövde ---------------------------------------------------------------- */
.layout {
  flex: 1; min-height: 0; width: 100%;
  max-width: var(--content-max-width); margin: 0 auto;
  display: flex; gap: var(--space-32);
  padding: var(--space-32) var(--space-40) var(--space-40);
}

/* --- Soru formu ------------------------------------------------------------
   Liste akarken form kaybolmasın diye sabit sütun (brief §4.2).
   Sütun sola kaydırılıp kapanabilir; kapanınca genişliği sıfıra iner ve
   yerini ray alır. İkisinin de sağ boşluğu ters işaretle taşınıyor: açıkken
   rayın, kapalıyken sütunun gap'i eritiliyor. Böylece geçiş boyunca listenin
   sol kenarı tek yönde ilerler, sıçramaz. */
.form-column {
  width: var(--form-column-width); flex: none; overflow: hidden;
  position: sticky; top: calc(var(--topbar-height) + var(--space-32));
  align-self: flex-start;
  visibility: visible;
  transition: width var(--duration-slow) var(--ease),
              margin-right var(--duration-slow) var(--ease),
              opacity var(--duration-base) var(--ease),
              visibility 0s linear 0s;
}

/* İçerik sabit genişlikte: sütun daralırken metin yeniden dizilmez, kırpılır. */
.form-column__inner {
  width: var(--form-column-width);
  display: flex; flex-direction: column; gap: var(--space-16);
  transition: transform var(--duration-slow) var(--ease);
}

/* Kapalı sütun `visibility: hidden` olur: sekme sırasından ve ekran
   okuyucudan çıkar. Bunu CSS'in yapması önemli — dar ekranda aşağıdaki
   kırılım kuralı hem görünümü hem erişilebilirliği tek hamlede geri alıyor,
   JS'in pencere genişliğini izlemesi gerekmiyor. Gizlenme kaydırma bitince
   uygulansın diye geçişte gecikme var; açılırken gecikme yok. */
.layout[data-form-collapsed="1"] .form-column {
  width: 0; margin-right: calc(-1 * var(--space-32));
  opacity: 0; visibility: hidden;
  transition: width var(--duration-slow) var(--ease),
              margin-right var(--duration-slow) var(--ease),
              opacity var(--duration-base) var(--ease),
              visibility 0s linear var(--duration-slow);
}

/* Hatırlanan kapalı hâl ilk karede yerine otursun: açıkken başlayıp gözümüzün
   önünde kapanmasın diye JS ilk uygulamada geçişleri bir kare susturur. */
.layout[data-no-transition="1"] .form-column,
.layout[data-no-transition="1"] .form-column__inner,
.layout[data-no-transition="1"] .form-rail { transition: none; }
.layout[data-form-collapsed="1"] .form-column__inner {
  transform: translateX(calc(-1 * var(--space-24)));
}

/* Kapalı hâlin tek izi: dikey yazılı ray. Açıkken genişliği sıfır — JS ayrıca
   inert yaptığı için sekmede de yoktur. Çerçeve inset gölge; border kutuyu
   2 px şişirip ray daralırken içeriği kaydırırdı. */
.form-rail {
  flex: none; width: 0; overflow: hidden; opacity: 0; visibility: hidden;
  margin-right: calc(-1 * var(--space-32));
  position: sticky; top: calc(var(--topbar-height) + var(--space-32));
  align-self: flex-start;
  display: flex; padding: 0; border: 0; cursor: pointer;
  background: var(--card); color: var(--ink-3);
  border-radius: var(--radius-14); box-shadow: inset 0 0 0 1px var(--border);
  transition: width var(--duration-slow) var(--ease),
              margin-right var(--duration-slow) var(--ease),
              opacity var(--duration-base) var(--ease),
              color var(--duration-fast) var(--ease),
              box-shadow var(--duration-fast) var(--ease),
              visibility 0s linear var(--duration-slow);
}
/* Ray da simetrik: kapanırken kaydırma bitince gizlenir, açılırken hemen görünür. */
.layout[data-form-collapsed="1"] .form-rail {
  width: var(--rail-width); margin-right: 0; opacity: 1; visibility: visible;
  transition: width var(--duration-slow) var(--ease),
              margin-right var(--duration-slow) var(--ease),
              opacity var(--duration-base) var(--ease),
              color var(--duration-fast) var(--ease),
              box-shadow var(--duration-fast) var(--ease),
              visibility 0s linear 0s;
}
.form-rail:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--border-strong); }

.form-rail__inner {
  width: var(--rail-width); flex: none;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-12);
  padding: var(--space-14) 0 var(--space-16);
}
.form-rail svg { width: var(--icon-size); height: var(--icon-size); display: block; flex: none; }
.form-rail__text {
  writing-mode: vertical-rl;
  font-size: var(--text-13); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight); white-space: nowrap;
}

.panel {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-16); padding: var(--space-24);
  display: flex; flex-direction: column; gap: var(--space-18);
}
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); }
.panel__title {
  font-family: var(--font-heading);
  font-size: var(--text-17); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight);
}

.icon-button {
  flex: none; width: var(--icon-button-size); height: var(--icon-button-size);
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: var(--radius-9);
  color: var(--muted-2); cursor: pointer;
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.icon-button:hover { background: var(--surface-2); color: var(--ink); }
.icon-button svg { width: var(--icon-size); height: var(--icon-size); display: block; }

.field { display: flex; flex-direction: column; gap: var(--space-7); }
.field__label { font-size: var(--text-13); font-weight: var(--weight-semibold); color: var(--ink-3); }

.input, .textarea {
  width: 100%;
  border: 1px solid var(--border-strong); background: var(--field);
  border-radius: var(--radius-10); padding: var(--space-12) var(--space-14);
  font-size: var(--text-15); outline: none;
  transition: border-color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}
.textarea { line-height: var(--leading-body); min-height: 118px; }
.input:focus, .textarea:focus { border-color: var(--ink); background: var(--card); }
.input:disabled, .textarea:disabled { color: var(--disabled); cursor: not-allowed; }
.input::placeholder, .textarea::placeholder { color: var(--muted-2); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger-border); }

.counter-row { display: flex; justify-content: flex-end; }

/* Karakter sayacının üç hâli: normal · uyarı · sınır aşımı (brief §4.2). */
.char-counter {
  font-family: var(--font-mono); font-size: var(--text-12);
  padding: var(--space-2) var(--space-7); border-radius: var(--radius-6);
  color: var(--muted-2); background: transparent; font-weight: 400;
  font-variant-numeric: tabular-nums;
  transition: color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}
.char-counter[data-state="warn"] { color: var(--accent-ink); background: var(--accent-soft); font-weight: var(--weight-bold); }
.char-counter[data-state="over"] { color: var(--danger); background: var(--danger-bg-2); font-weight: var(--weight-bold); }

.alert {
  display: flex; align-items: center; gap: var(--space-8);
  background: var(--danger-bg); border: 1px solid var(--danger-border);
  border-radius: var(--radius-10); padding: var(--space-10) var(--space-12);
  font-size: var(--text-13); color: var(--danger);
}

.btn-submit {
  border: none; border-radius: var(--radius-12);
  padding: var(--space-14) var(--space-20);
  font-size: var(--text-15); font-weight: var(--weight-bold);
  background: var(--ink); color: var(--on-ink); cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease);
}
.btn-submit:hover:not(:disabled) { opacity: 0.88; }
.btn-submit:disabled { background: var(--border-answered); color: var(--disabled); cursor: not-allowed; }

.form-note { font-size: var(--text-13); line-height: var(--leading-body); color: var(--muted); padding: 0 var(--space-4); }

/* Etkinlik kilitli: form kapanır, liste okunmaya devam eder (brief §8). */
.lock-note {
  display: flex; align-items: center; gap: var(--space-10);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-10); padding: var(--space-12) var(--space-14);
  font-size: var(--text-13); color: var(--ink-3);
}
.panel[data-locked="1"] .field,
.panel[data-locked="1"] .counter-row { opacity: 0.5; }

/* --- Liste sütunu ---------------------------------------------------------- */
.list-column { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-16); }
.list-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); }
.list-head__note { font-size: var(--text-13); color: var(--muted); }

.tabs { display: flex; background: var(--surface-2); border-radius: var(--radius-11); padding: var(--space-3); gap: var(--space-2); }
.tab {
  border: none; cursor: pointer; border-radius: var(--radius-9);
  padding: var(--space-8) var(--space-16); font-size: var(--text-14);
  font-weight: var(--weight-medium); background: transparent; color: var(--muted-2);
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.tab[aria-pressed="true"] {
  font-weight: var(--weight-bold); background: var(--tab-active);
  color: var(--ink); box-shadow: var(--shadow-tab);
}

/* Bağlantı koptu — küçük, panik yaratmayan, geri alınabilir (brief §8). */
.offline-notice {
  display: flex; align-items: center; gap: var(--space-8); align-self: flex-start;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-full); padding: var(--space-6) var(--space-12);
  font-size: var(--text-13); color: var(--ink-3);
}
.offline-notice__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--disabled); animation: pulse 1.4s ease-in-out infinite; }

/* Liste sayfayla birlikte akar (tasarımdaki sabit yükseklikli çerçeve bir
   mock'tu). Form sütunu sticky kaldığı için liste akarken kaybolmuyor. */
.list {
  display: flex; flex-direction: column; gap: var(--space-12);
  list-style: none; margin: 0; padding: 0;
}

/* --- Kart ------------------------------------------------------------------ */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-14); padding: var(--space-18) var(--space-20);
  transition: background var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease);
}
.card--new { animation: card-in var(--duration-base) var(--ease) both; }

/* Kendi sorum: hafif sahiplik işareti. */
.card[data-mine="1"] { border-color: var(--ink); }
/* Sabitlenmiş: listenin akışından ayrıldığı okunur. */
.card[data-pinned="1"] {
  background: var(--accent-soft); border-color: var(--accent-soft-border);
  box-shadow: var(--shadow-pinned);
}
/* Cevaplandı: geri çekilmiş ama okunaklı. Sabit + cevaplandı üst üste
   gelirse yüzeyi bu belirler, sarı rozet üstte kalarak sabitliği taşır. */
.card[data-answered="1"] {
  background: var(--surface-3); border-color: var(--border-answered); box-shadow: none;
}

.card__inner { display: flex; gap: var(--space-14); align-items: flex-start; }

.avatar {
  width: var(--avatar-size); height: var(--avatar-size); flex: none; border-radius: var(--radius-10);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-13); font-weight: var(--weight-bold); letter-spacing: 0.02em;
  background: var(--surface-2); color: var(--avatar-ink);
}
.card[data-mine="1"] .avatar { background: var(--ink); color: var(--accent); }

.card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-9); }
.card__top { display: flex; align-items: center; gap: var(--space-9); flex-wrap: wrap; }

.card__name {
  font-size: var(--text-14); font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight); color: var(--ink); overflow-wrap: anywhere;
}
.card[data-answered="1"] .card__name { color: var(--muted); }
.card__time { font-size: var(--text-13); color: var(--muted-2); white-space: nowrap; }

.card__text {
  margin: 0; font-size: var(--text-15); line-height: var(--leading-body);
  color: var(--ink-2); text-wrap: pretty; overflow-wrap: anywhere;
}
.card[data-answered="1"] .card__text { color: var(--muted); }

/* Rozet de bir büyük harf mikro etiketi — .eyebrow ve .topbar__label ile
   aynı sesi paylaşır, o yüzden aynı yazıyı paylaşır. */
.badge {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-11); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; padding: var(--space-3) var(--space-9);
  border-radius: var(--radius-20); white-space: nowrap;
}
.badge--pinned { background: var(--accent); color: var(--on-accent); font-weight: var(--weight-bold); }
.badge--answered { border: 1px solid var(--border-strong); color: var(--muted); font-weight: var(--weight-semibold); }
.badge--mine { background: var(--ink); color: var(--on-ink); font-weight: var(--weight-semibold); }

.btn-delete {
  align-self: flex-start; background: none; border: none; padding: 0;
  font-size: var(--text-13); color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.btn-delete:hover { color: var(--danger); }

.vote {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
  min-width: var(--vote-width); padding: var(--space-10) var(--space-8);
  border-radius: var(--radius-12); cursor: pointer;
  background: var(--card); border: 1px solid var(--border-strong); color: var(--ink);
  transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}
.vote:hover { border-color: var(--ink); }
.vote[aria-pressed="true"] { background: var(--accent); border-color: var(--accent-border); color: var(--on-accent); }
.vote:active { transform: scale(0.96); }
.vote:disabled { cursor: not-allowed; opacity: 0.6; }
.vote__arrow { font-size: var(--text-11); line-height: 1; }
.vote__count { font-size: var(--text-15); font-weight: var(--weight-bold); line-height: 1; font-variant-numeric: tabular-nums; }

/* --- Boş liste / yükleniyor ------------------------------------------------- */
.empty {
  border: 1px dashed var(--border-strong); border-radius: var(--radius-14);
  padding: var(--space-40) var(--space-24); text-align: center;
  display: flex; flex-direction: column; gap: var(--space-6);
}
.empty__title {
  font-family: var(--font-heading);
  font-size: var(--text-16); font-weight: var(--weight-semibold); color: var(--ink-3);
}
.empty__text { font-size: var(--text-14); color: var(--muted); }

.skeleton {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-14); padding: var(--space-18) var(--space-20);
  display: flex; gap: var(--space-14);
}
.skeleton__block { background: var(--surface-2); border-radius: var(--radius-6); animation: fade 1.5s ease-in-out infinite; }
.skeleton__avatar { width: var(--avatar-size); height: var(--avatar-size); border-radius: var(--radius-10); flex: none; }
.skeleton__lines { flex: 1; display: flex; flex-direction: column; gap: var(--space-8); }
.skeleton__line { height: 12px; }
.skeleton__line--short { width: 30%; }
.skeleton__line--long { width: 92%; }
.skeleton__line--medium { width: 64%; }

/* --- Hareket ---------------------------------------------------------------- */
@keyframes card-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes fade { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* prefers-reduced-motion: hareket kapanır, yalnız durum değişir (brief §6). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- Orta genişlik ----------------------------------------------------------
   İki sütun 1280 px'lik dizüstü ekranına da yan yana sığsın diye afiş
   küçülür; sarmalamak yerine ölçek verilir. */
@media (max-width: 1280px) {
  .join__inner { gap: var(--space-40); }
  .poster { width: 320px; }
}

/* --- Dar ekran --------------------------------------------------------------
   Bu tur masaüstü. Aşağısı mobil tasarım değil; bileşenler tek sütuna
   düşerken bozulmasın diye asgari kırılım (brief §2 notu). */
@media (max-width: 900px) {
  .layout { flex-direction: column; padding: var(--space-20); gap: var(--space-20); }
  /* Tek sütunda kapanacak bir "sol" yok: hatırlanan kapalı tercih ne olursa
     olsun form açık, ray ve kapatma düğmesi görünmez. */
  .form-column,
  .layout[data-form-collapsed="1"] .form-column {
    width: 100%; position: static; overflow: visible;
    margin-right: 0; opacity: 1; visibility: visible; transition: none;
  }
  .form-column__inner,
  .layout[data-form-collapsed="1"] .form-column__inner { width: 100%; transform: none; }
  .form-rail,
  .layout[data-form-collapsed="1"] .form-rail { display: none; }
  .icon-button { display: none; }
  .topbar { padding: 0 var(--space-20); gap: var(--space-12); }
  .topbar__right { gap: var(--space-12); }
  .join { padding: var(--space-20); }
  /* Tek sütun: afiş üstte kimliği verir, altında başlık ve katılım bilgisi.
     QR küçülür — "Katıl" düğmesi telefonda katlamanın üstünde kalsın diye. */
  .join__inner { flex-direction: column; align-items: stretch; gap: var(--space-24); }
  .poster { width: 200px; align-self: center; }
  .join__content { flex: none; max-width: none; }
  .qr-card svg { width: 150px; height: 150px; }
  .join__title { font-size: var(--text-40); }
}