/*
  Frekans düzeni (Ek K, scratchpad KONSEPT.md bölüm 4, 6, 11 ve 13): uygulamanın çekirdek yerleşimi.
  Yukarıdan aşağı: üst çubuk (#top), bağlantı şeridi, frekans bandı (#band), sahne (#stage: sol bilgi
  sütun: telsiz kartı ve ayarlı istasyon kartı, konuşma sütunu kalan alanı alır, sağda İstasyonlar listesi
  veya Telsiz DJ kartı. 1280 px altında telsiz kartı sağ sütuna iner), televizyon ipucu çubuğu
  ve yan/alt sayfalar (#frekans-sheet, #stations-sheet, #people-sheet, 1280 px altında #info-col).
  Bant katılınan frekansları dizer (24-frekans.js), yazı ve ses odaları sağdaki İstasyonlar listesinde,
  sağ sütun görünmediğinde üst çubuktaki İstasyonlar düğmesiyle açılan İstasyonlar sayfasındadır.
  Bileşenlerin ayrıntılı görünümü kendi dosyalarındadır: konuşma sütunu convo.css, telsiz kartı radio.css,
  kişisel alanlar (Çevrimiçi, Gelenler, özel mesaj ve arkadaşlar) people.css. Bu dosya yalnızca yerleşimi,
  bandı, üst çubuğu, sayfa kabuğunu ve kesme noktalarını tanımlar.
  Kurallar: renkler yalnızca var(--...) belirteçleriyle, grid, flex gap, clamp, :is, :where,
  aspect-ratio ve inset kullanılmaz (konsol tarayıcı uyumu). Belirteçler tokens.css içindedir.
  Kesme noktaları: tv 1800 px ve üstü, geniş 1280 px ve üstü, geniş dar 1000 ile 1279 px,
  orta 760 ile 999 px, dar 760 px altı, alçak 860 px altı yükseklik.
*/

/* =========================================================
   1. Görünümler: açılış, kimlik ekranları ve uygulama kabuğu
   ========================================================= */

/* Görünümler zemindeki ışığın üstünde durur */
.boot-view,
.auth-view,
.app-view {
  position: relative;
  z-index: 1;
}

.boot-view {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 1rem;
}

.boot-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.auth-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.auth-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  padding: 1rem 1.5rem;
  padding-top: calc(1rem + env(safe-area-inset-top));
}

.auth-tools {
  display: flex;
  align-items: center;
}

.auth-tools > * + * {
  margin-left: 0.5rem;
}

.auth-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 0 auto;
  padding: 1rem 1rem 3rem;
}

.auth-card {
  width: 100%;
  max-width: 30rem;
}

.app-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* Ortak etiket stili (temanın etiket yazı tipi) */
.kicker {
  margin: 0 0 0.5rem;
  color: var(--text-3);
  font-family: var(--font-label);
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--label-spacing);
  line-height: 1.3;
  text-transform: uppercase;
}

:root[data-skin="turkuaz"] .kicker,
:root[data-skin="turkuaz"] .band-group-label,
:root[data-skin="turkuaz"] .radio-label {
  text-transform: none;
}

/* =========================================================
   2. Üst çubuk: solda frekans değiştirici ve Çevrimiçi, tam ortada Ara, sağda yayın çipi, İstasyonlar,
      Özel mesajlar ile Arkadaşlar ve avatar
   ========================================================= */

.top-bar {
  display: flex;
  align-items: center;
  flex: none;
  min-height: var(--top-h);
  padding: 0 1.25rem;
  padding-top: env(safe-area-inset-top);
}

/* İki yan bölüm aynı oranda esner, böylece aradaki Ara düğmesi tam ortada durur. Sağ bölümün en küçük
   genişliği içerik kadardır (min-width: auto): yer daralınca bölümler üst üste binmez, Ara biraz kayar. Sol
   bölüm içeriğinin altına inebilir (min-width: 0): uzun frekans adı üç noktayla kısalır, sağdaki düğmeler
   (profil dahil) ekran dışına itilmez. */
.top-side {
  display: flex;
  align-items: center;
  flex: 1 1 0;
}

.top-side-end {
  justify-content: flex-end;
}

.top-side-start {
  min-width: 0;
}

.top-bar > .top-find {
  margin: 0 0.625rem;
}

.top-brand {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
}

/* Frekans değiştirici (24-frekans.js): amblem, frekans adı ve aşağı ok, alt satırda "Frekans · üye" */
.top-brand-heading {
  display: flex;
  min-width: 0;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.top-brand-button {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: var(--target);
  margin-left: -0.375rem;
  padding: 0.25rem 0.625rem 0.25rem 0.375rem;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-control);
  background-color: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.top-brand-button:hover {
  border-color: var(--line);
  background-color: var(--surface-hover);
}

.top-brand-button[aria-expanded="true"] {
  border-color: var(--accent-text);
  background-color: var(--surface-3);
}

.top-brand-row {
  display: flex;
  align-items: center;
  min-width: 0;
}

.top-brand-caret {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-left: 0.375rem;
  color: var(--text-2);
}

.top-brand-button[aria-expanded="true"] .top-brand-caret {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

/* Kişisel girişler: profil düğmesinin hemen solunda iki belirgin düğme (Özel mesajlar, Arkadaşlar) */
.top-personal {
  display: flex;
  align-items: center;
  flex: none;
  margin: 0 0 0 0.625rem;
  padding: 0.1875rem;
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-pill);
  background-color: var(--surface-alt);
}

.top-personal-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--target);
  min-height: 2.5rem;
  padding: 0 1rem;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-pill);
  background-color: transparent;
  color: var(--text-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  white-space: nowrap;
  cursor: pointer;
}

.top-personal-button + .top-personal-button {
  margin-left: 0.25rem;
}

.top-personal-button:hover {
  background-color: var(--surface-hover);
  color: var(--text-strong);
}

.top-personal-button.is-current {
  border-color: var(--line-strong);
  background-color: var(--station-tuned-bg);
  color: var(--text-strong);
}

.top-personal-button > .icon {
  flex: none;
  margin-right: 0.5rem;
}

.top-personal-button.is-current > .icon {
  color: var(--accent-text);
}

.top-personal-button > .station-mark {
  margin-left: 0.5rem;
}

/* Frekans menüsü: kayıtlı frekanslar, Frekans ekle ve notlar */
.frekans-menu {
  width: 23rem;
  max-width: 92%;
  max-height: 80%;
  overflow-y: auto;
}

.frekans-kicker {
  margin: 0.375rem 0.5rem 0.375rem;
}

.frekans-row {
  display: flex;
  align-items: center;
}

.frekans-row > .frekans-item {
  flex: 1 1 auto;
  min-width: 0;
}

.frekans-item,
.frekans-add {
  min-height: 3.25rem;
  padding: 0.375rem 0.5rem;
}

.frekans-row.is-active > .frekans-item {
  background-color: var(--station-tuned-bg);
  color: var(--text-strong);
}

.frekans-emblem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  margin-right: 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 30%;
  background-color: var(--surface-3);
  color: var(--text-strong);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: 1;
}

.frekans-row.is-active .frekans-emblem {
  border-color: transparent;
  background-color: var(--accent);
  color: var(--on-accent);
}

.frekans-item-text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25;
}

.frekans-item-name {
  overflow: hidden;
  color: var(--text-strong);
  font-weight: var(--weight-strong);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.frekans-item-sub {
  overflow: hidden;
  color: var(--text-3);
  font-size: var(--text-xs);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.frekans-item-check {
  flex: none;
  margin: 0 0 0 0.5rem;
  color: var(--accent-text);
}

.frekans-remove {
  flex: none;
  margin-left: 0.25rem;
  color: var(--text-3);
}

.frekans-remove:hover {
  color: var(--danger);
}

.frekans-add > .icon {
  width: 2.25rem;
  margin-right: 0.75rem;
  color: var(--accent-text);
}

.frekans-menu .frekans-note {
  margin: 0.375rem 0.625rem 0.25rem;
  font-size: var(--text-xs);
  line-height: 1.4;
}

.frekans-remove-clear {
  margin-top: 0.75rem;
}

.top-bar .server-emblem {
  width: 2.25rem;
  height: 2.25rem;
  margin-right: 0.625rem;
  font-size: 1.05rem;
}

.top-brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}

.top-bar .server-name {
  margin: 0;
  overflow: hidden;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-lg);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.top-bar .server-meta {
  display: flex;
  align-items: center;
  margin: 0.1rem 0 0;
  overflow: hidden;
  color: var(--text-3);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.top-bar .server-meta .icon {
  width: 0.875rem;
  height: 0.875rem;
  margin: 0 0.25rem 0 0.5rem;
  color: var(--ok);
}

.top-cast {
  display: flex;
  align-items: center;
}

.top-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: var(--target);
  min-height: var(--target);
  margin-left: 0.625rem;
  padding: 0 0.875rem;
  border: var(--border-width) solid var(--line-strong);
  border-radius: var(--radius-pill);
  background-color: var(--surface-1);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  white-space: nowrap;
  cursor: pointer;
}

.top-chip:hover {
  background-color: var(--surface-hover);
}

.top-chip[aria-expanded="true"] {
  border-color: var(--accent-text);
  background-color: var(--surface-3);
}

.top-chip > .icon {
  margin-right: 0.5rem;
}

.top-chip .top-kbd {
  min-width: 0;
  margin-left: 0.5rem;
  padding: 0.0625rem 0.4375rem;
  color: var(--text-3);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.4;
  box-shadow: none;
}

.top-live {
  padding-left: 0.5rem;
}

.top-live-dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin: 0 0.5rem 0 0.25rem;
  border-radius: 50%;
  background-color: var(--live);
  box-shadow: 0 0 0 3px var(--live-bg);
}

.top-stack {
  display: inline-flex;
  margin-right: 0.625rem;
}

.top-stack:empty {
  display: none;
}

.top-stack .avatar {
  width: 1.875rem;
  height: 1.875rem;
  margin-left: -0.5rem;
  border: 2px solid var(--surface-1);
  font-size: var(--text-xs);
}

.top-stack .avatar:first-child {
  margin-left: 0;
}

.top-me {
  padding: 0 0.75rem 0 0.25rem;
}

.top-me .avatar {
  width: 2.125rem;
  height: 2.125rem;
  margin-right: 0.5rem;
  font-size: var(--text-sm);
}

.top-me-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  max-width: 11rem;
  line-height: 1.15;
}

.top-me .me-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-me .me-status {
  max-width: 100%;
  overflow: hidden;
  color: var(--text-3);
  font-size: var(--text-xs);
  font-weight: 400;
  text-overflow: ellipsis;
}

.top-me-caret {
  width: 1rem;
  height: 1rem;
  margin-left: 0.375rem;
  color: var(--text-3);
}

/* =========================================================
   3. Frekans bandı: uç düğmeleri, kayan kadran, istasyonlar, ibre
   ========================================================= */

.band {
  position: relative;
  display: flex;
  align-items: flex-end;
  flex: none;
  height: var(--band-h);
  margin: 0 1.25rem;
  padding: 0 0.5rem var(--band-pad);
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-card);
  background-color: var(--band-bg);
  box-shadow: var(--shadow-card);
}

/* Kayan kadran: iki katmanlı ölçek çizgisi içerikle birlikte kayar */
.band-track {
  position: relative;
  display: flex;
  align-items: flex-end;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 0.75rem;
  overflow-x: auto;
  overflow-y: hidden;
  background-image: repeating-linear-gradient(90deg, var(--tick) 0, var(--tick) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(90deg, var(--tick-major) 0, var(--tick-major) 1px, transparent 1px, transparent 60px);
  background-position: 0 var(--dial-top), 0 var(--dial-top);
  background-repeat: repeat-x;
  background-size: 100% 0.3125rem, 100% 0.625rem;
  background-attachment: local;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.band-track::-webkit-scrollbar {
  display: none;
}

.band-track.is-dragging {
  cursor: grabbing;
}

.band-group {
  position: relative;
  display: flex;
  align-items: flex-end;
  flex: none;
}

/* Grup etiketi istasyonlarla aynı satırda, grubun başında durur (bant tek satırdır, ibreyle çakışmaz) */
.band-group-label {
  display: flex;
  align-items: center;
  align-self: flex-end;
  min-height: var(--station-h);
  margin-right: 0.5rem;
  padding-left: 0.25rem;
  color: var(--text-3);
  font-family: var(--font-label);
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--label-spacing);
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.band-sep {
  flex: none;
  align-self: stretch;
  width: 1px;
  margin: 0.75rem 0.625rem 0;
  background-color: var(--line-strong);
}

.band-empty {
  display: flex;
  align-items: center;
  min-height: var(--station-h);
  padding: 0 0.75rem;
  color: var(--text-3);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.station {
  position: relative;
  display: flex;
  align-items: center;
  flex: none;
  min-height: var(--station-h);
  margin-right: 0.25rem;
  padding: 0 1rem 0 0.75rem;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-control);
  background-color: transparent;
  color: var(--text-2);
  font-size: var(--text-md);
  font-weight: var(--weight-strong);
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.station:hover {
  background-color: var(--surface-hover);
  color: var(--text-strong);
}

.station > .station-icon {
  margin-right: 0.5rem;
  color: var(--text-3);
}

.station-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.station-name {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.station-meta {
  display: flex;
  align-items: center;
  color: var(--text-3);
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 1.15;
}

.station-meta .channel-freq {
  min-width: 0;
  margin-right: 0.375rem;
  padding: 0 0.25rem;
  font-size: 0.6875rem;
}

/* Ayarlı istasyon: ibre üstünde durur */
.station.is-tuned {
  border-color: var(--line-strong);
  background-color: var(--station-tuned-bg);
  color: var(--text-strong);
}

.station.is-tuned > .station-icon {
  color: var(--accent-text);
}

/* İbre sürüklenirken altındaki hedef istasyon */
.station.is-target {
  border-color: var(--focus);
  background-color: var(--station-target);
}

.station.is-unread {
  color: var(--text-strong);
}

/* İskelet istasyon (meta gelene kadar) */
.station-skeleton {
  width: 7.5rem;
  margin-right: 0.5rem;
  border-color: var(--line);
  background-color: var(--surface-3);
  opacity: 0.6;
  cursor: default;
}

/* Okunmamış ve anma işaretleri (bant, Tümü sayfası, Gelenler) */
.station-mark {
  display: inline-block;
  flex: none;
  min-width: 1.375rem;
  height: 1.375rem;
  padding: 0 0.375rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.375rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.station > .station-mark {
  position: absolute;
  top: -0.375rem;
  right: -0.25rem;
}

.mark-unread {
  border: 1px solid var(--line-strong);
  background-color: var(--surface-3);
  color: var(--text-strong);
  line-height: 1.25rem;
}

.mark-mention {
  background-color: var(--attention);
  color: var(--on-attention);
}

/* İbre: 44 px isabet alanı, çizgi ve topuz. Sürüklerken kadrana bağlanır (21-band.js). */
.needle {
  position: absolute;
  bottom: 100%;
  left: 50%;
  z-index: 2;
  width: var(--target);
  height: calc(var(--band-h) - var(--station-h) - var(--band-pad) - var(--dial-top));
  margin-left: calc(var(--target) / -2);
  cursor: grab;
  touch-action: none;
}

.needle::after {
  content: "";
  position: absolute;
  top: 0.25rem;
  bottom: 0;
  left: 50%;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 2px;
  background-color: var(--needle);
}

/* Topuz ölçek şeridinin üstüne biner, ince bantta istasyonun kenarına taşmaz */
.needle::before {
  content: "";
  position: absolute;
  top: -0.125rem;
  left: 50%;
  z-index: 1;
  width: 0.875rem;
  height: 0.875rem;
  margin-left: -0.4375rem;
  border: 2px solid var(--needle-ring);
  border-radius: 50%;
  background-color: var(--needle-knob);
  box-shadow: 0 0 0 1px var(--needle), 0 2px 8px var(--halo-2);
}

.needle:hover::before,
.needle.is-dragging::before {
  box-shadow: 0 0 0 1px var(--needle), 0 0 0 6px var(--focus-halo);
}

.needle.is-free {
  top: var(--dial-top);
  bottom: auto;
}

.needle.is-dragging {
  cursor: grabbing;
}

/* Ses istasyonu: bağlı, bağlanıyor, içinde konuşan var (nabız), küçük avatar yığını */
.station-voice.is-connected {
  border-color: var(--live);
  background-color: var(--live-bg);
  color: var(--text-strong);
}

.station-voice.is-connected > .station-icon,
.station-voice.is-joining > .station-icon {
  color: var(--live);
}

.station-voice.is-joining {
  border-color: var(--idle);
  border-style: dashed;
}

.station-pulse {
  position: relative;
  display: none;
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  margin-left: 0.625rem;
  border-radius: 50%;
  background-color: var(--live);
}

.station-voice.is-live .station-pulse {
  display: inline-block;
}

.station-pulse::after {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  width: 20px;
  height: 20px;
  border: 2px solid var(--live);
  border-radius: 50%;
  opacity: 0.45;
  -webkit-animation: band-pulse var(--dur-slow) var(--ease) infinite;
  animation: band-pulse var(--dur-slow) var(--ease) infinite;
}

@-webkit-keyframes band-pulse {
  0% { -webkit-transform: scale(0.6); transform: scale(0.6); opacity: 0.7; }
  100% { -webkit-transform: scale(1.5); transform: scale(1.5); opacity: 0; }
}

@keyframes band-pulse {
  0% { -webkit-transform: scale(0.6); transform: scale(0.6); opacity: 0.7; }
  100% { -webkit-transform: scale(1.5); transform: scale(1.5); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .station-pulse::after {
    -webkit-animation: none;
    animation: none;
  }
}

/* Telsiz DJ bu odada çalıyor: nota işareti (KONSEPT 6.2) */
.station > .station-dj {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-left: 0.5rem;
  color: var(--live);
}

.mini-stack {
  display: inline-flex;
  margin-left: 0.625rem;
}

.mini-stack .avatar {
  width: 1.5rem;
  height: 1.5rem;
  margin-left: -0.375rem;
  border: 2px solid var(--band-bg);
  font-size: 0.625rem;
}

.mini-stack .avatar:first-child {
  margin-left: 0;
}

.station-voice.is-connected .mini-stack .avatar {
  border-color: var(--live-bg);
}

/* Frekans istasyonu (24-frekans.js frekansBuildStation): amblem ve köşesinde durum noktası, ad, alt satırda
   durum veya çevrimiçi sayısı, satır içinde okunmamış rozeti, köşede anma rozeti */
.station-frekans {
  padding-left: 0.375rem;
}

.station-frekans > .station-emblem {
  position: relative;
  width: 2rem;
  height: 2rem;
  margin-right: 0.625rem;
  font-size: var(--text-sm);
}

.station-frekans.is-tuned > .station-emblem {
  border-color: transparent;
  background-color: var(--accent);
  color: var(--on-accent);
}

.station-frekans.is-offline .station-name,
.station-frekans.is-offline .station-sub {
  color: var(--text-3);
}

.station-frekans > .frekans-unread {
  position: static;
  margin-left: 0.625rem;
}

/* Köşedeki anma rozeti adın sonunu örtmesin */
.station-frekans.is-mentioned {
  padding-right: 1.75rem;
}

.station-frekans.is-mentioned > .frekans-unread {
  margin-right: 0.25rem;
}

.station-frekans > .frekans-mention {
  position: absolute;
  top: -0.375rem;
  right: -0.25rem;
}

/* Durum noktası: açık (ibre rengi), çevrimiçi, çevrimdışı, giriş gerekli, bilinmiyor (boş halka) */
/* Frekans fotoğrafı (24-frekans.js frekansPhoto): amblemin içinde baş harfin üstünü örter, amblemin biçimini
   (köşe yuvarlaklığı) alır. Yüklenemezse kaldırılır ve baş harf görünür. */
.frekans-emblem.has-photo,
.server-emblem.has-photo {
  position: relative;
}

.has-photo > .emblem-letter {
  visibility: hidden;
}

.frekans-photo {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-color: var(--surface-3);
  object-fit: cover;
}

/* Temaların amblem süsleri (kartuş noktası, kemer çizgisi) fotoğrafın üstüne çizilmez */
:root[data-skin] .server-emblem.has-photo::after {
  content: none;
}

.frekans-dot {
  position: absolute;
  right: -0.25rem;
  bottom: -0.25rem;
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--band-bg);
  border-radius: 50%;
  background-color: var(--offline);
}

.frekans-dot.is-open {
  background-color: var(--needle);
}

.frekans-dot.is-online {
  background-color: var(--live);
}

.frekans-dot.is-offline {
  background-color: var(--danger);
}

.frekans-dot.is-login {
  background-color: var(--idle);
}

.frekans-dot.is-unknown {
  background-color: var(--band-bg);
  box-shadow: inset 0 0 0 2px var(--offline);
}

.sheet .frekans-dot,
.frekans-menu .frekans-dot {
  border-color: var(--surface-float);
}

.sheet .frekans-dot.is-unknown {
  background-color: var(--surface-float);
}

/* Bandın uçları: önceki ve sonraki frekans, Frekans ekle, rehber ve Tümü */
.band-step {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--target);
  min-height: var(--station-h);
  padding: 0;
  border: var(--border-width) solid var(--line-strong);
  border-radius: var(--radius-control);
  background-color: var(--surface-alt);
  color: var(--text);
  cursor: pointer;
}

.band-step:hover {
  background-color: var(--surface-hover);
}

.band-step:disabled {
  opacity: 0.45;
  cursor: default;
}

/* Kayan kenarlarda yumuşak geçiş: kesilen istasyon kasıtlı görünür */
.band-step::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1rem;
  pointer-events: none;
}

.band-step-prev {
  margin-right: 0.375rem;
}

.band-step-prev::after {
  left: 100%;
  margin-left: 0.375rem;
  background-image: linear-gradient(90deg, var(--band-bg), transparent);
}

.band-step-next {
  margin-left: 0.375rem;
}

.band-step-next::after {
  right: 100%;
  margin-right: 0.375rem;
  background-image: linear-gradient(270deg, var(--band-bg), transparent);
}

.band-add,
.band-help,
.band-all {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: var(--target);
  min-height: var(--station-h);
  margin-left: 0.5rem;
  padding: 0 0.625rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-control);
  background-color: transparent;
  color: var(--text-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  white-space: nowrap;
  cursor: pointer;
}

.band-all {
  border-style: solid;
  background-color: var(--surface-alt);
  color: var(--text);
}

.band-help {
  border-style: solid;
  color: var(--text-2);
}

.band-help[aria-expanded="true"] {
  border-color: var(--accent-text);
  color: var(--text-strong);
}

.band-add:hover,
.band-help:hover,
.band-all:hover {
  background-color: var(--surface-hover);
}

.band-all .icon {
  margin-right: 0.375rem;
}

/* =========================================================
   4. Sahne: sol bilgi sütunu, konuşma sütunu, DJ sütunu, sağ sütun
   ========================================================= */

/* Sahnenin iç boşluğu ve sütun aralıkları temanın düzen belirteçlerinden gelir (--layout-pad, --column-gap):
   yüzen panelli temalarda boşluk kalır, düz panelli temalarda (0rem) sütunlar ince ayırıcılarla bitişir. 1000
   pikselin altı kendi sabit boşluklarını kullanır. Belirteçler calc() içinde kullanıldığı için birimlidir:
   birimsiz 0 calc() içinde sayı sayılır, uzunlukla toplanınca bildirim geçersiz olur (tokens.css). */
.stage {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--layout-pad) calc(var(--layout-pad) * 1.25) calc(var(--layout-pad) * 1.25);
}

.side {
  display: flex;
  flex-direction: column;
  flex: none;
  min-height: 0;
}

.side-left {
  width: var(--side-left-w);
  margin-right: calc(var(--column-gap) * 1.25);
}

.side-scroll {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.side-scroll > * {
  flex: none;
}

/* Sol sütunun altı: bildirimler, telsiz kartı (geniş ekranda, 12-init.js placeRadio) ve ayarlı istasyon kartı
   (yalnızca 1280 pikselin altındaki Oda bilgisi sayfasında). Üstte kalan alanı özel mesaj listesi ve kişisel
   kartlar kullanır. */
.info-bottom {
  margin-top: auto;
}

.radio-slot > .radio {
  margin: 1.25rem 0 1rem;
}

.info-bottom > .side-card:last-child {
  margin-bottom: 0;
}

/* Bildirimler (28-bildirim.js): telsiz kartının üstünde kısa olay listesi, en yeni üstte. Paylaşım kaydında
   İzle düğmesi satırın sonunda durur. */
.activity-card {
  margin-bottom: 0;
  padding: 0.75rem 0.875rem;
}

.activity-card .kicker {
  margin-bottom: 0.375rem;
}

.activity-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.activity-item {
  display: flex;
  align-items: center;
  min-height: 2.25rem;
}

.activity-item + .activity-item {
  margin-top: 0.25rem;
}

.activity-avatar {
  flex: none;
  margin-right: 0.625rem;
}

.activity-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.activity-text {
  overflow: hidden;
  color: var(--text);
  font-size: var(--text-sm);
  line-height: 1.3;
  text-overflow: ellipsis;
}

.activity-item.is-share .activity-text {
  color: var(--text-strong);
  font-weight: var(--weight-strong);
}

.activity-time {
  color: var(--text-3);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.activity-watch {
  flex: none;
  margin-left: 0.5rem;
}

/* Sayfa başlığı yalnızca oda bilgisi yan sayfa olarak açıkken görünür */
.side-sheet-head {
  display: none;
}

.center {
  position: relative;
  display: flex;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

.side-dj {
  width: var(--side-w);
  margin-left: calc(var(--column-gap) * 1.25);
}

.side-right {
  width: var(--radio-w);
  margin-left: calc(var(--column-gap) * 1.25);
}

/* 1280 px altında telsiz kartı sağ altta, üstte kalan alanı İstasyonlar kartı kullanır */
.side-right > .radio {
  margin-top: auto;
}

/* Geniş ekranda sağ sütun dar ve sabit genişlikte yalnızca İstasyonlar listesidir, konuşma kalan alanı alır */
@media (min-width: 1280px) {
  .side-right {
    width: var(--side-right-w);
  }

  .side-right > .inbox {
    flex: 1 1 auto;
    margin-bottom: 0;
  }

  .side-dj {
    width: var(--side-right-w);
    margin-left: var(--column-gap);
  }

  .side-left {
    margin-right: var(--column-gap);
  }

  .side-right {
    margin-left: var(--column-gap);
  }

  /* Ayarlı istasyonun kartı geniş ekranda gösterilmez: oda adı ve şifreleme durumu konuşmanın başlığındadır,
     Şifreleme ayrıntıları ve Odayı yönet Ayarlar'dan açılır. Telsiz kartı sütunun en altına iner, üstünde
     bildirimler durur. Telsiz kartının ses etkinliği satırı kısalır. */
  .side-left .room-card {
    display: none;
  }

  .radio-slot > .radio {
    margin-bottom: 0;
  }

  .side-left .radio-vad-label {
    overflow: hidden;
    font-size: var(--text-sm);
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .side-left .radio-vad-meter {
    width: 3rem;
  }

  /* Telsiz DJ kartı açıkken İstasyonlar listesi sağ sütunun üstünde kalır, kart altına yerleşir (frekans bandı
     frekansları dizdiği için odalara buradan ulaşılır). Kart en çok içeriği kadar yer alır, liste en az 12rem
     kalır, kart sığmazsa kendi içinde kayar. Kart taşınmaz (YouTube çerçevesi yeniden yüklenmesin), yalnızca
     yeri değişir. Düzen flexbox ile kurulur: sahne sütun yönlü ve satır kaydırmalıdır, sol sütun ve konuşma
     sütunu tam yükseklikte birer flex çizgisi olur, üçüncü çizgide İstasyonlar listesi üstte (order), DJ kartı
     altta durur. Kartın en büyük yüksekliği listeye 12rem bırakır, böylece kart dördüncü bir çizgiye kaymaz.
     Sütun aralıkları da öteki düzenlerdeki gibi temanın --column-gap belirtecinden gelir (düz panelli temalarda
     0rem). */
  .app-view[data-dj-col="on"] .stage {
    /* Sağ sütun, YouTube oynatıcısı yazı boyutundan bağımsız en az 200 piksel kalacak kadar geniştir */
    --dj-col-w: max(var(--side-right-w), 15rem, calc(204px + 2rem));
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
  }

  .app-view[data-dj-col="on"] .side-left {
    flex: 0 0 100%;
    margin-right: var(--column-gap);
  }

  .app-view[data-dj-col="on"] .center {
    flex: 0 0 100%;
    width: calc(100% - var(--side-left-w) - var(--dj-col-w) - var(--column-gap) * 2);
    margin-right: var(--column-gap);
  }

  .app-view[data-dj-col="on"] .side-dj {
    order: 2;
    flex: 0 1 auto;
    width: var(--dj-col-w);
    max-height: calc(100% - 12rem - var(--column-gap));
    margin: var(--column-gap) 0 0;
  }

  .app-view[data-dj-col="on"] .side-dj .dj-card {
    margin-top: 0;
  }

  .app-view[data-dj-col="on"] .side-right {
    order: 1;
    flex: 1 1 0;
    width: var(--dj-col-w);
    min-height: 12rem;
    margin: 0;
  }

  /* Ekran paylaşımı sahnesi geniş kalsın diye sağ sütun gizlenir, telsiz kartı solda kalır. Kamera ızgarasında
     (data-cast-mode="cams") sağ sütun yerinde kalır, sahne yalnızca konuşma sütununu kaplar. */
  body[data-cast="live"]:not([data-cast-mode="cams"]) .side-right {
    display: none;
  }

  /* Sağ sütun gizliyken odalar üst çubuktaki İstasyonlar düğmesiyle açılır */
  body[data-cast="live"]:not([data-cast-mode="cams"]) .top-rooms {
    display: inline-flex;
  }

  /* El telsizi (istek 10): telsiz kartı sol sütunun kalanını kaplar, Bildirimler üstünde kalır ve sütunun üstünde
     boş alan kalmaz. Kartın içeriği üstte durur, altta kalan yeri hoparlör ızgarası süsü doldurur (.radio::after).
     Sütun yetmezse (uzun özel mesaj listesi, alçak ekran) kart içeriği kadar kalır ve sütun kayar. Kapalı kart bir
     kanal tarayıcısıdır: ses odaları Katıl düğmeleriyle görünür, liste kartın yüksekliğini kullanır. */
  .side-left .side-scroll > .info-bottom {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    margin-top: 0;
  }

  .side-left .radio-slot {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
  }

  /* Bildirimler ile kart arasında yalnızca antenin yeri kalır (.side-card'ın alt boşluğu yok) */
  .side-left .info-bottom > .activity-card {
    margin-bottom: 0;
  }

  .side-left .radio-slot > .radio {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
  }

  .side-left .radio::after {
    content: "";
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 0.875rem;
    border-radius: var(--radius-control);
    background-image: radial-gradient(circle, var(--line-strong) 0, var(--line-strong) 1.25px, rgba(0, 0, 0, 0) 1.75px);
    background-position: 0 0;
    background-size: 0.625rem 0.625rem;
  }

  .side-left .radio .radio-rooms {
    max-height: none;
  }
}

/* Konuşma sütunu kabı: başlık, arama katmanı, mesajlar, yazma alanı (ayrıntılar convo.css) */
.convo {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Konuşma sütunu yan sütunlar dışında kalan bütün genişliği alır, yazı boyutuna bağlı üst sınırı yoktur */
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-panel);
  background-color: var(--surface-1);
  box-shadow: var(--shadow-panel);
}

.convo-head {
  display: flex;
  align-items: center;
  flex: none;
  min-height: 3.75rem;
  padding: 0.5rem 0.75rem 0.5rem 1.25rem;
  border-bottom: var(--border-width) solid var(--line);
}

.convo-head > * + * {
  margin-left: 0.5rem;
}

.convo-head .convo-titles {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.convo-title {
  display: flex;
  align-items: center;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-lg);
  line-height: 1.2;
}

.convo-title > span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.convo-title-icon {
  margin-right: 0.5rem;
  color: var(--accent-text);
}

.convo-sub {
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  color: var(--text-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pill {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 2rem;
  padding: 0 0.75rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
}

.pill .icon {
  width: 1rem;
  height: 1rem;
  margin-right: 0.375rem;
}

.pill-ok {
  background-color: var(--live-bg);
  color: var(--live);
}

.pill-short {
  display: none;
}

/* Oda bilgisi düğmesi yalnızca sol sütun gizliyken (1280 px altı) görünür */
.convo-head .room-info-button {
  display: none;
}

/* Arkadaşlar görünümünde konuşma başlığı ve oda bilgisi gizlenir */
.app-view[data-view="home"] .convo-head,
.app-view[data-view="home"] .messages,
.app-view[data-view="home"] .composer,
.app-view[data-view="home"] .key-warning {
  display: none;
}

/* Yayın sahnesi (Ek L1) konuşma sütununun yerini alır, ayrıntıları 22-cast.js ve convo.css */
.cast {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

/* =========================================================
   5. Sol bilgi sütunu kartları ve Gelenler kartı
   ========================================================= */

.side-card {
  margin-bottom: 1rem;
  padding: 1.125rem;
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-card);
  background-color: var(--surface-1);
  box-shadow: var(--shadow-card);
}

.side-scroll > .side-card:last-child {
  margin-bottom: 0;
}

.side-card-title {
  margin: 0 0 0.375rem;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-xl);
  line-height: 1.2;
  word-wrap: break-word;
}

.side-card-text {
  margin: 0 0 0.875rem;
  color: var(--text-2);
  font-size: var(--text-sm);
}

.facts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.facts li {
  display: flex;
  align-items: center;
  min-height: 2.25rem;
  border-top: 1px solid var(--line);
  color: var(--text-2);
  font-size: var(--text-sm);
}

.facts .icon {
  margin-right: 0.625rem;
  color: var(--text-3);
}

.facts .is-ok .icon {
  color: var(--ok);
}

.facts .is-warn,
.facts .is-warn .icon {
  color: var(--warn);
}

.link-button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--target);
  margin-top: 0.5rem;
  padding: 0 0.75rem;
  border: var(--border-width) solid var(--line-strong);
  border-radius: var(--radius-control);
  background-color: var(--surface-alt);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  text-align: left;
  cursor: pointer;
}

.link-button:hover {
  background-color: var(--surface-hover);
}

.link-button .icon {
  margin-right: 0.625rem;
  color: var(--accent-text);
}

.link-button > span {
  flex: 1 1 auto;
}

/* Kişisel alan: özel mesaj listesi yalnızca Özel ve Arkadaşlar istasyonlarında, oda kartı odalarda */
.dm-section {
  display: none;
}

.app-view[data-view="dm"] .dm-section,
.app-view[data-view="home"] .dm-section {
  display: block;
}

.dm-section .dm-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hints {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hints li {
  display: flex;
  align-items: flex-start;
  padding: 0.3125rem 0;
  color: var(--text-2);
  font-size: var(--text-sm);
  line-height: 1.35;
}

.hints .icon {
  margin: 0 0.625rem 0 0;
  color: var(--accent-text);
}

.hints b {
  color: var(--text-strong);
  font-weight: var(--weight-strong);
}

.hints .kbd {
  min-width: 0;
  margin: 0 0.125rem;
  padding: 0 0.3125rem;
  font-size: var(--text-xs);
  line-height: 1.5;
  box-shadow: none;
}

/* Kol ipuçları yalnızca Gamepad API bir kol bildirince görünür (Ek K7.6) */
.gamepad-only,
.hints .gamepad-only {
  display: none;
}

.has-gamepad .hints .gamepad-only {
  display: flex;
}

/* İstasyon değiştirme rehberi: bandın sonundaki ? düğmesiyle açılan küçük pencere (21-band.js) */
.hints-pop {
  width: 20rem;
  padding: 0.75rem 0.75rem 0.875rem 1rem;
}

.hints-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.hints-pop-head .kicker {
  margin: 0;
}

.hints-pop:focus {
  outline: none;
}

.inbox {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-height: 0;
  padding: 1rem 0.625rem 0.75rem;
}

.inbox-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* İstasyonlar listesi: iki grup (yazı ve ses odaları), her satır 44 px. Grup başlığı büyük harf yerine
   temanın etiket yazısıyla ve altında kadran çizgileriyle (bandın ölçek çizgileri, --tick) çizilir. */
.rooms-group-title {
  margin: 0.75rem 0.5rem 0.375rem;
  padding-bottom: 0.4375rem;
  background-image: repeating-linear-gradient(90deg, var(--tick) 0, var(--tick) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 8px);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.25rem;
  color: var(--text-3);
  font-family: var(--font-label);
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.rooms-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rooms-empty {
  margin: 0.25rem 0.5rem;
}

.room-row {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--target);
  margin: 0 0 0.125rem;
  padding: 0.25rem 0.5rem 0.25rem 0.625rem;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-control);
  background-color: transparent;
  color: var(--text-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}

.room-row:hover {
  background-color: var(--surface-hover);
  color: var(--text-strong);
}

.room-row-icon {
  flex: none;
  margin-right: 0.625rem;
  color: var(--text-3);
}

.room-row-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.room-row-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.room-row-sub {
  overflow: hidden;
  color: var(--text-3);
  font-size: var(--text-xs);
  font-weight: 400;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.room-row.is-unread {
  color: var(--text-strong);
}

/* Ayarlı oda: bantla aynı zemin, solda ibre renginde çizgi */
.room-row.is-current {
  border-color: var(--line-strong);
  background-color: var(--station-tuned-bg);
  color: var(--text-strong);
}

.room-row.is-current::before {
  content: "";
  position: absolute;
  top: 0.625rem;
  bottom: 0.625rem;
  left: -0.0625rem;
  width: 3px;
  border-radius: 2px;
  background-color: var(--needle);
}

.room-row.is-current .room-row-icon {
  color: var(--accent-text);
}

.room-row-voice.is-connected {
  border-color: var(--live);
  background-color: var(--live-bg);
  color: var(--text-strong);
}

.room-row-voice.is-connected .room-row-icon {
  color: var(--live);
}

.room-row .station-mark {
  margin-left: 0.5rem;
}

.room-row-dj {
  flex: none;
  margin-left: 0.375rem;
  color: var(--live);
}

.room-row-count {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin-left: 0.375rem;
  color: var(--text-2);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.room-row-count .icon {
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.125rem;
}

/* Konuşan göstergesi: odada biri konuşurken yeşil nabız noktası */
.room-row-live {
  display: none;
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: 0.375rem;
  border-radius: 50%;
  background-color: var(--live);
  box-shadow: 0 0 0 3px var(--live-bg);
}

.room-row-voice.is-live .room-row-live {
  display: inline-block;
  -webkit-animation: band-pulse var(--dur-slow) var(--ease) infinite;
  animation: band-pulse var(--dur-slow) var(--ease) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .room-row-voice.is-live .room-row-live {
    -webkit-animation: none;
    animation: none;
  }
}

/* Özel mesajlar grubu (istek 17, 38-gezinme.js navDmGroup): satırda küçük avatar ve ad, okunmamış rozeti Özel
   düğmesindeki gibi anma renginde. Son satır Tüm Özel Mesajlar: grubu açar ve kapar, konuşma sayısını gösterir. */
.room-row-avatar {
  flex: none;
  margin-right: 0.625rem;
}

.room-row-dm.is-blocked .room-row-name {
  text-decoration: line-through;
}

.room-row-more {
  color: var(--text-3);
  font-weight: 400;
}

.room-row-more .room-row-icon {
  width: 1rem;
  height: 1rem;
}

/* Ses odasındaki kişiler (04-meta.js buildRoomPeople): oda satırının altında, adın hizasından başlayan yan
   yana çipler (liste anlamı ul ve li ile korunur). Çipte küçük avatar, ad ve susturma ile kamera simgeleri, uzun
   ad kısalır. Konuşan kişinin avatarında canlı renkli halka ve çipin kenarı canlı renkte. Eski WebKit flex gap
   desteklemez: çipler arasındaki aralık sağ ve alt boşluktur. */
/* Çipler odanın frekans okumasının hizasından başlar (o frekanstakiler): satırın iç boşluğu ve kenarı, simge
   (1.25em) ve boşluğu. Yazı boyutu satırınkiyle aynıdır (em). */
.room-people {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 0.375rem;
  padding: 0.125rem 0.25rem 0 calc(0.625rem + var(--border-width) + 1.25em + 0.625rem);
  font-size: var(--text-sm);
  list-style: none;
}

.room-person {
  display: flex;
  align-items: center;
  flex: none;
  max-width: 100%;
  min-height: 1.75rem;
  margin: 0 0.25rem 0.25rem 0;
  padding: 0.125rem 0.5rem 0.125rem 0.125rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background-color: var(--surface-sunken);
  color: var(--text-2);
  font-size: var(--text-sm);
}

.room-person-avatar {
  flex: none;
  margin-right: 0.375rem;
}

.room-person.is-speaking {
  border-color: var(--live);
}

.room-person.is-speaking .room-person-avatar {
  box-shadow: 0 0 0 2px var(--live);
}

.room-person-name {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 9rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.room-person.is-speaking .room-person-name {
  color: var(--text-strong);
}

.room-person-state {
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  margin-left: 0.375rem;
  color: var(--text-3);
}

.room-person.is-server-muted .room-person-state {
  color: var(--danger);
}

/* İstasyonlar kartının başlığı: başlık ve Oda ekle (yalnızca sahip ve yönetici) */
.inbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0.25rem 0.25rem 0.5rem;
}

.inbox-head > .kicker {
  margin: 0;
}

.inbox-add,
.rooms-sheet-add {
  flex: none;
  color: var(--text-2);
}

.inbox-add:hover,
.rooms-sheet-add:hover {
  color: var(--accent-text);
}

.rooms-sheet-add {
  margin-right: 0.25rem;
}

/* Frekans okuması oda satırında simgeden sonra (components.css .channel-freq). Bütün odalarda aynı genişliktedir:
   en uzun okuma beş karakterdir (108.0), tek aralıklı yazıda her karakter 1ch, yanına iç boşluk ve kenar eklenir.
   Böylece her temanın yazısında ve yazı boyutunda oda adları tek hizada durur. Ayarlı odada vurgu renginde. */
.room-row > .channel-freq {
  min-width: calc(5ch + 0.75rem + 2px);
  margin-right: 0.5rem;
  white-space: nowrap;
}

.room-row.is-current > .channel-freq {
  border-color: var(--accent-text);
  color: var(--accent-text);
}

/* İstasyonlar düğmesi (üst çubuk): yalnızca sağ sütun görünmediğinde (kesme noktaları bölüm 9) */
.top-rooms {
  display: none;
}

.top-rooms > .station-mark {
  margin-left: 0.5rem;
}

/* Frekanslar sayfası (#frekans-sheet) ve frekans menüsünün başlığı */
.frekans-sheet-lead {
  margin: 0.75rem 0.375rem 0.5rem;
}

.frekans-sheet-li {
  display: flex;
  align-items: center;
}

.frekans-sheet-li > .frekans-sheet-row {
  flex: 1 1 auto;
  min-width: 0;
}

.frekans-sheet-row > .frekans-emblem {
  position: relative;
}

.frekans-sheet-row.is-current > .frekans-emblem {
  border-color: transparent;
  background-color: var(--accent);
  color: var(--on-accent);
}

.frekans-sheet-row.is-offline .sheet-row-name {
  color: var(--text-2);
}

.frekans-sheet-body .frekans-note {
  margin: 0.5rem 0.375rem 0;
  font-size: var(--text-xs);
  line-height: 1.4;
}

.sheet-foot {
  display: flex;
  flex: none;
  padding: 0.625rem 0.75rem 0.75rem;
  border-top: var(--border-width) solid var(--line);
}

.frekans-sheet-add {
  flex: 1 1 auto;
}

.frekans-sheet-add > .icon {
  margin-right: 0.5rem;
}

.frekans-menu-head {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.625rem 0.375rem;
}

.frekans-menu-head > .frekans-emblem {
  border-color: transparent;
  background-color: var(--accent);
  color: var(--on-accent);
}

.frekans-entry > .icon {
  width: 2.25rem;
  margin-right: 0.75rem;
  color: var(--accent-text);
}

.frekans-entry {
  min-height: 2.75rem;
  padding: 0.25rem 0.5rem;
}

/* =========================================================
   6. Telsiz kartı kabı (ayrıntılı görünüm radio.css)
   ========================================================= */

.radio {
  position: relative;
  flex: none;
  padding: 0.875rem 1rem 1rem;
  border: var(--border-width) solid var(--line-strong);
  border-radius: 1.75rem;
  background-color: var(--radio-bg);
  box-shadow: var(--shadow-panel);
}

.radio-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.625rem;
}

.radio-label {
  display: flex;
  align-items: center;
  margin: 0;
  color: var(--text-2);
  font-family: var(--font-label);
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
}

.radio-led {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background-color: var(--offline);
}

.radio[data-state="on"] .radio-led {
  background-color: var(--live);
  box-shadow: 0 0 0 3px var(--live-bg);
}

.radio[data-state="joining"] .radio-led {
  background-color: var(--idle);
}

.radio-grille {
  width: 4rem;
  height: 0.875rem;
  background-image: repeating-linear-gradient(90deg, var(--line-strong) 0, var(--line-strong) 2px, transparent 2px, transparent 5px);
}

.radio-screen {
  padding: 0.625rem 0.75rem;
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-card);
  background-color: var(--screen-bg);
}

.radio-pick {
  margin: 0 0 0.375rem;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
}

.radio-rooms {
  max-height: 14rem;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.radio-row {
  display: flex;
  margin-top: 0.625rem;
}

.radio-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  min-height: 3.5rem;
  margin-right: 0.375rem;
  padding: 0.25rem;
  border: var(--border-width) solid var(--line-strong);
  border-radius: var(--radius-control);
  background-color: var(--surface-alt);
  color: var(--text);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  cursor: pointer;
}

.radio-button:last-child {
  margin-right: 0;
}

.radio-button:hover {
  background-color: var(--surface-hover);
}

.radio-button .icon {
  margin-bottom: 0.25rem;
}

.radio-button.is-off,
.radio-button[aria-pressed="true"] {
  border-color: var(--danger);
  background-color: var(--danger-bg);
  color: var(--danger);
}

.radio-button.is-danger {
  border-color: var(--danger);
  color: var(--danger);
}

.radio-button-text {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* =========================================================
   7. Yan ve alt sayfalar (Tümü, Çevrimiçi, Oda bilgisi) ve ortak örtü
   ========================================================= */

.drawer-backdrop {
  position: fixed;
  top: var(--titlebar-h, 0px);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 45;
  background-color: var(--overlay);
}

.sheet,
.side-left.is-open {
  position: fixed;
  top: calc(var(--titlebar-h, 0px) + 0.75rem);
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 50;
  display: flex;
  flex-direction: column;
  width: var(--sheet-w);
  max-width: calc(100% - 1.5rem);
  margin: 0;
  overflow: hidden;
  border: var(--border-width) solid var(--line-strong);
  border-radius: var(--radius-card);
  background-color: var(--surface-float);
  box-shadow: var(--shadow-pop);
  -webkit-animation: sheet-from-right var(--dur-med) var(--ease);
  animation: sheet-from-right var(--dur-med) var(--ease);
}

.sheet-head,
.side-left.is-open .side-sheet-head {
  display: flex;
  align-items: center;
  flex: none;
  padding: 0.75rem 0.75rem 0.75rem 1.25rem;
  border-bottom: var(--border-width) solid var(--line);
}

.sheet-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-lg);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sheet-head .members-count {
  margin: 0 0.5rem;
  color: var(--text-3);
  font-size: var(--text-sm);
  font-weight: 700;
}

.sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0.25rem 0.75rem 0.75rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.side-left.is-open .side-scroll {
  padding: 0.75rem;
}

.sheet-handle {
  display: none;
}

/* Telefonda kapalı telsiz kartının Ses Odaları düğmesi (istek 17): İstasyonlar sayfasını ses odalarında açar */
.radio-pick-button {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.9375rem;
  padding: 0 1rem;
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-card);
  background-color: var(--screen-bg);
  color: var(--text-strong);
  font: inherit;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-sm);
  cursor: pointer;
}

.radio-pick-button:hover {
  border-color: var(--line-strong);
}

.radio-pick-button .icon {
  flex: none;
  margin-right: 0.5rem;
  color: var(--accent-text);
}

.sheet-section {
  margin: 1rem 0.25rem 0.375rem;
}

.sheet-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sheet-row {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 3.25rem;
  margin: 0 0 0.25rem;
  padding: 0.375rem 0.625rem;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-control);
  background-color: transparent;
  color: var(--text);
  font-size: var(--text-md);
  text-align: left;
  cursor: pointer;
}

.sheet-row:hover {
  background-color: var(--surface-hover);
}

.sheet-row.is-current {
  border-color: var(--line-strong);
  background-color: var(--station-tuned-bg);
}

.sheet-row.is-connected {
  border-color: var(--live);
  background-color: var(--live-bg);
}

.sheet-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  margin-right: 0.75rem;
  border-radius: var(--radius-small);
  background-color: var(--surface-3);
  color: var(--accent-text);
}

.sheet-row > .avatar {
  margin-right: 0.75rem;
}

.sheet-li-dm .sheet-row {
  padding-left: 1.5rem;
}

.sheet-row-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25;
}

.sheet-row-name {
  overflow: hidden;
  font-weight: var(--weight-strong);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sheet-row-sub {
  color: var(--text-3);
  font-size: var(--text-xs);
}

.sheet-row .station-mark {
  margin-left: 0.5rem;
}

.sheet-row-check {
  margin-left: 0.5rem;
  color: var(--accent-text);
}

/* Telsiz DJ bu odada çalıyor (bant istasyonundaki nota işaretinin Tümü sayfasındaki karşılığı) */
.sheet-row-dj {
  flex: none;
  margin-left: 0.5rem;
  color: var(--live);
}

.sheet-empty {
  margin: 0.25rem 0.5rem;
}

@-webkit-keyframes sheet-from-right {
  from { -webkit-transform: translateX(1.5rem); transform: translateX(1.5rem); opacity: 0; }
  to { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
}

@keyframes sheet-from-right {
  from { -webkit-transform: translateX(1.5rem); transform: translateX(1.5rem); opacity: 0; }
  to { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; }
}

@-webkit-keyframes sheet-from-bottom {
  from { -webkit-transform: translateY(2rem); transform: translateY(2rem); opacity: 0; }
  to { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}

@keyframes sheet-from-bottom {
  from { -webkit-transform: translateY(2rem); transform: translateY(2rem); opacity: 0; }
  to { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}

/* =========================================================
   8. Televizyon ipucu çubuğu
   ========================================================= */

.tvbar {
  display: none;
}

/* =========================================================
   9. Kesme noktaları
   ========================================================= */

/* Televizyon (1800 px ve üstü): kök yazı 22 px (tokens.css), büyük odak halkası, kol algılanınca
   ipucu çubuğu, telsiz kartının başlık satırı gizli (bağlı bilgisi bantta da var) */
@media (min-width: 1800px) {
  .app-view.has-gamepad .tvbar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-height: 2.5rem;
    padding: 0 1.25rem 0.75rem;
    color: var(--text-2);
    font-size: var(--text-sm);
  }

  .tvhint {
    display: inline-flex;
    align-items: center;
    margin: 0 1rem;
    white-space: nowrap;
  }

  .pad {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    margin-right: 0.5rem;
    padding: 0 0.375rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    background-color: var(--surface-3);
    color: var(--text-strong);
    font-size: var(--text-xs);
    font-weight: 700;
  }

  .app-view.has-gamepad .stage {
    padding-bottom: 0.5rem;
  }

  .radio-head {
    display: none;
  }

  .app-view :focus-visible {
    outline-width: 4px;
    outline-offset: 4px;
    box-shadow: 0 0 0 10px var(--focus-halo);
  }
}

/* Geniş dar (1279 px ve altı): sol bilgi sütunu gizlenir, başlıktaki Oda bilgisi düğmesiyle yan
   sayfada açılır. DJ sütunu da kadrodan açılan sayfaya iner (23-dj.js). */
@media (max-width: 1279px) {
  .side-left {
    display: none;
  }

  /* Üst çubukta yer açılır: kişisel düğmeler simge olarak kalır (erişilebilir adları değişmez), Ara
     kısayol ipucu gizlenir */
  .top-personal-label,
  .top-chip .top-kbd {
    display: none;
  }

  .top-personal-button {
    padding: 0 0.75rem;
  }

  .top-personal-button > .icon {
    margin-right: 0;
  }

  .side-left.is-open {
    display: flex;
  }

  /* Oda bilgisi sayfasında özel mesaj listesi yoktur: özel konuşmalar İstasyonlar sayfasındaki Özel mesajlar
     grubundadır, üst çubuktaki Özel düğmesi sayfayı o grupta açar (istek 17) */
  .app-view[data-view="dm"] .dm-section,
  .app-view[data-view="home"] .dm-section {
    display: none;
  }

  /* Özel mesaj görünümünde sayfada oda bilgisi yoktur: Oda bilgisi düğmesi yalnızca sayfada gelen arkadaşlık
     istekleri veya Bildirimler kartı varken görünür (38-gezinme.js navSyncInfoCards, .has-info-cards) */
  .app-view[data-view="dm"]:not(.has-info-cards) .convo-head .room-info-button {
    display: none;
  }

  .side-left.is-open .side-sheet-head {
    display: flex;
  }

  .convo-head .room-info-button {
    display: inline-flex;
  }

  .side-dj {
    display: none;
  }
}

/* 760 ile 1279 px arasında İstasyonlar kartı sağ sütunda telsiz kartının üstündedir, sığmazsa listesi kayar
   (istek 17). Çok alçak ekranda ve telsiz kartı uzayıp listeye iki satırlık yer kalmayınca (ses odasında kalabalık
   kadro, 38-gezinme.js navFitInbox, .is-inbox-cramped) gizlenir (telsiz kartıyla aynı sütundadır), odalar üst
   çubuktaki İstasyonlar düğmesiyle sayfa olarak açılır. Geniş ekranda liste sağ sütunun tamamıdır, kaydırılır. */
@media (max-height: 720px) and (max-width: 1279px) {
  .inbox {
    display: none;
  }

  .top-rooms {
    display: inline-flex;
  }
}

@media (max-width: 1279px) {
  .app-view.is-inbox-cramped .inbox {
    display: none;
  }

  .app-view.is-inbox-cramped .top-rooms {
    display: inline-flex;
  }
}

/* Orta (999 px ve altı): telsiz kartı 17rem, İstasyonlar kartı telsiz kartının üstünde (çok alçak ekranda ve
   telefonda gizli, üst çubuktaki İstasyonlar düğmesi yan sayfa olarak açar), istasyonların alt satırı ve küçük
   avatar yığını gizli, üst çubukta Ara etiketi ve kısayol gizli */
@media (max-width: 999px) {
  .top-rooms > .station-mark {
    position: absolute;
    top: -0.375rem;
    right: -0.375rem;
    margin: 0;
  }

  .top-bar {
    padding: 0 0.875rem;
  }

  .band {
    margin: 0 0.875rem;
  }

  .stage {
    padding: 0.75rem 0.875rem 0.875rem;
  }

  .side-right {
    margin-left: 0.875rem;
  }

  .top-personal-label,
  .top-chip-label,
  .top-chip .top-kbd,
  .station-meta,
  .mini-stack,
  .pill-text,
  .top-me-text {
    display: none;
  }

  .pill-short {
    display: inline;
  }

  .top-find > .icon,
  .top-rooms > .icon,
  .top-personal-button > .icon {
    margin-right: 0;
  }

  .top-personal-button {
    padding: 0 0.625rem;
  }

  /* Dar telsiz kartında ses etkinliği adı tek satırda kalır, seviye çubuğuyla çakışmaz */
  .radio-vad-label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .radio .radio-vad-meter {
    width: 3rem;
  }

  .radio-row {
    flex-wrap: wrap;
  }

  .radio-button {
    flex: 0 0 48.5%;
    flex-direction: row;
    min-height: var(--target);
    margin: 0 0 0.375rem;
  }

  .radio-button:nth-child(odd) {
    margin-right: 3%;
  }

  .radio-button .icon {
    margin: 0 0.375rem 0 0;
  }
}

/* Dar (759 px ve altı, telefon): üst çubuk sadeleşir, bant kenardan kenara ve sağ ucunda sabit Tümü,
   konuşma tam genişlik, telsiz kartı ekranın altına yapışır, odalar İstasyonlar düğmesiyle açılan sayfadadır,
   sayfalar alttan açılır */
@media (max-width: 759px) {
  .inbox {
    display: none;
  }

  .top-rooms {
    display: inline-flex;
  }

  .top-bar {
    padding: 0 0.625rem 0 0.75rem;
    padding-top: env(safe-area-inset-top);
  }

  .top-bar .server-meta,
  .top-live-text,
  .top-me-caret {
    display: none;
  }

  .top-personal {
    margin: 0 0 0 0.375rem;
    padding: 0;
    border: 0;
    background-color: transparent;
  }

  .top-personal-button {
    min-width: 2.5rem;
    padding: 0 0.375rem;
  }

  .top-personal-button + .top-personal-button {
    margin-left: 0.125rem;
  }

  .top-personal-button > .station-mark {
    position: absolute;
    top: -0.125rem;
    right: -0.25rem;
    margin: 0;
  }

  .top-brand-caret {
    margin-left: 0.125rem;
  }

  /* Telefonda üst çubukta yer açılır: açık frekansın adı bantta (ibrenin olduğu istasyon) göründüğü için
     frekans düğmesinde yalnızca amblem kalır (erişilebilir adı değişmez), Çevrimiçi çipinde ilkinden
     sonraki avatarlar gizlenir */
  .top-bar .top-brand-text,
  .top-stack .avatar:nth-child(n+2) {
    display: none;
  }

  .top-brand-button {
    margin-left: -0.25rem;
    padding: 0.25rem 0.375rem;
  }

  .top-bar .server-name {
    font-size: var(--text-md);
  }

  .top-bar .server-emblem {
    width: 2rem;
    height: 2rem;
    margin-right: 0;
  }

  .top-chip {
    margin-left: 0.375rem;
    padding: 0 0.5rem;
  }

  .top-chip > .icon,
  .top-stack {
    margin-right: 0;
  }

  .top-stack .avatar:nth-child(n+4) {
    display: none;
  }

  .top-me {
    padding: 0 0.25rem;
  }

  .top-me .avatar {
    margin-right: 0;
  }

  .band {
    margin: 0;
    padding: 0 0 var(--band-pad) 0.25rem;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .band-track {
    padding: 0 1rem 0 0.5rem;
  }

  .band-sep {
    margin: var(--dial-top) 0.375rem 0;
  }

  /* Telefonda bantta daha çok frekans görünsün diye grup etiketi gizlenir (bandın erişilebilir adı kalır) */
  .band-group-label {
    display: none;
  }

  .station {
    padding: 0 0.75rem 0 0.5rem;
    font-size: var(--text-sm);
  }

  .band-step,
  .band-add,
  .band-help {
    display: none;
  }

  .band-all {
    flex-direction: column;
    align-self: stretch;
    width: 4rem;
    min-height: 0;
    margin: 0 0 calc(var(--band-pad) * -1);
    padding: 0;
    border: 0;
    border-left: 1px solid var(--line-strong);
    border-radius: 0;
    background-color: var(--band-bg);
    font-size: var(--text-xs);
    font-weight: 700;
  }

  .band-all .icon {
    margin: 0 0 0.125rem;
  }

  .stage {
    flex-direction: column;
    padding: 0;
  }

  .center {
    flex: 1 1 auto;
    min-height: 0;
  }

  .convo {
    max-width: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .convo-head {
    min-height: 3rem;
    padding: 0.25rem 0.5rem 0.25rem 0.75rem;
  }

  .convo-sub,
  .convo-title-icon {
    display: none;
  }

  .side-right {
    width: auto;
    margin: 0;
  }

  .radio {
    padding: 0.625rem 0.75rem 0.75rem;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    border-bottom: 0;
    border-radius: 1.25rem 1.25rem 0 0;
  }

  .radio-head,
  .radio-button-text {
    display: none;
  }

  /* Telefonda telsiz kartı kısa kalır: kapalıyken ses odaları İstasyonlar sayfasında seçilir,
     bağlıyken kart durum satırını, Bas konuş düğmesini ve ses düğmelerini gösterir */
  .radio .radio-rooms {
    display: none;
  }

  /* Kapalı kart tek bir Ses Odaları düğmesidir (44 piksel), ses odası İstasyonlar sayfasında seçilir */
  .radio[data-state="off"] .radio-screen {
    padding: 0;
    border: 0;
    background-color: transparent;
  }

  .radio[data-state="off"] .radio-pick {
    display: none;
  }

  .radio[data-state="off"] .radio-pick-button:not([hidden]) {
    display: flex;
  }

  .radio[data-state="off"] .radio-support {
    margin: 0.5rem 0 0;
  }

  .radio[data-state="on"] .radio-screen,
  .radio[data-state="joining"] .radio-screen {
    display: none;
  }

  .radio-button {
    flex: 1 1 0;
    min-height: 3.25rem;
    margin: 0 0.375rem 0 0;
  }

  .radio-button:nth-child(odd) {
    margin-right: 0.375rem;
  }

  .radio-button:last-child {
    margin-right: 0;
  }

  .radio-button .icon {
    margin: 0;
  }

  .radio-row {
    flex-wrap: nowrap;
  }

  /* Sayfalar alttan açılır */
  .sheet,
  .side-left.is-open {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-width: none;
    max-height: 84%;
    border-bottom: 0;
    border-radius: 1.5rem 1.5rem 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    -webkit-animation: sheet-from-bottom var(--dur-med) var(--ease);
    animation: sheet-from-bottom var(--dur-med) var(--ease);
  }

  /* Tutamaç ve başlık aşağı sürüklenince sayfa kapanır (38-gezinme.js, istek 17). Tutamacın dokunma alanı görünen
     çizgiden geniştir (görünmez ::before). */
  .sheet-handle {
    position: relative;
    display: block;
    flex: none;
    width: 2.75rem;
    height: 0.3125rem;
    margin: 0.5rem auto 0;
    border-radius: var(--radius-pill);
    background-color: var(--line-strong);
    cursor: grab;
    touch-action: none;
  }

  .sheet-handle::before {
    content: "";
    position: absolute;
    top: -0.5rem;
    right: -1.5rem;
    bottom: -0.5rem;
    left: -1.5rem;
  }

  .sheet-head {
    touch-action: none;
  }

  .sheet.is-dragging,
  .side-dj.is-dragging {
    -webkit-animation: none;
    animation: none;
  }

  .sheet-head,
  .side-left.is-open .side-sheet-head {
    padding: 0.25rem 0.5rem 0.5rem 1rem;
  }

  .sheet-body {
    padding: 0.25rem 0.5rem 0.75rem;
  }

  .auth-top {
    padding: 0.75rem 1rem;
  }

  .auth-stage {
    align-items: flex-start;
    padding: 0 0 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sheet,
  .side-left.is-open {
    -webkit-animation: none;
    animation: none;
  }
}

/* Dokunmatik ekranda (istek 17) oda ve sayfa satırları, üst çubuğun ve konuşma başlığının düğmeleri en az 44 piksel
   yüksekliktedir. Üst çubuğun düğmeleri 400 pikselden dar telefonda eninde kalır (frekans amblemi sığsın). */
@media (pointer: coarse) {
  .top-brand-button,
  .top-chip,
  .top-personal-button,
  .room-row,
  .sheet-row,
  .convo-head .icon-button,
  .sheet-close {
    min-height: 2.9375rem;
  }

  .convo-head .icon-button,
  .sheet-close {
    min-width: 2.9375rem;
  }
}

@media (pointer: coarse) and (min-width: 400px) {
  .top-chip,
  .top-personal-button {
    min-width: 2.9375rem;
  }
}