.app-root--auth {
  min-height: 100dvh;
  background:
    radial-gradient(900px 600px at 8% 0%, rgba(var(--tstv-cyan-rgb), .16), transparent 60%),
    radial-gradient(760px 520px at 92% 100%, rgba(var(--tstv-primary-rgb), .14), transparent 62%),
    var(--md-sys-color-background);
}

.login {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  min-height: 100dvh;
  max-width: 1360px;
  margin: 0 auto;
  gap: var(--ts-space-7);
  padding: var(--ts-space-7) var(--ts-space-6);
  align-items: center;
}

.login__brand {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-4);
  max-width: 58ch;
}

.login__brand-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ts-space-2);
  margin-bottom: var(--ts-space-5);
}

.login__logo {
  /* Yatay kilit 1896x606; genişlik dar ekranda kabın içinde kalır, oran korunur. */
  width: min(312px, 100%);
  height: auto;
}

.login__brand-sub {
  color: var(--md-sys-color-on-surface-variant);
  letter-spacing: 1.6px;
}

.login__headline {
  color: var(--md-sys-color-on-surface);
  max-width: 16ch;
}

.login__lede {
  color: var(--md-sys-color-on-surface-variant);
}

.login__highlights {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-3);
  margin-top: var(--ts-space-3);
}

.login__highlight {
  display: flex;
  align-items: center;
  gap: var(--ts-space-3);
  color: var(--md-sys-color-on-surface-variant);
}

.login__highlight .icon {
  color: var(--md-sys-color-primary);
  padding: var(--ts-space-2);
  width: 32px;
  height: 32px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary-container);
}

.login__panel {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-3);
  align-items: stretch;
}

.login__card {
  width: min(100%, 440px);
  margin-left: auto;
  border-radius: var(--md-sys-shape-corner-extra-large);
}

.login__card-body {
  padding: var(--ts-space-6);
}

.login__card-sub {
  margin-top: var(--ts-space-1);
}

.login__form {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-4);
  margin-top: var(--ts-space-5);
}

.login__error {
  display: flex;
  align-items: center;
  gap: var(--ts-space-2);
  padding: var(--ts-space-3);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

.login__footnote {
  width: min(100%, 440px);
  margin-left: auto;
  text-align: center;
}

.stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--ts-space-5);
  border-radius: var(--md-sys-shape-corner-large);
  border: 1px solid transparent;
  min-height: 160px;
  overflow: hidden;
  transition: transform var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-emphasized),
    box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--md-sys-elevation-2);
}

.stat-card__top {
  display: flex;
  align-items: center;
  gap: var(--ts-space-2);
}

.stat-card__label {
  min-width: 0;
}

.stat-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--ts-glass-veil);
}

.stat-card__icon .icon {
  width: 18px;
  height: 18px;
}

.stat-card__value {
  display: flex;
  align-items: baseline;
  gap: var(--ts-space-2);
  margin-top: var(--ts-space-4);
  font-variant-numeric: tabular-nums;
}

.stat-card__unit {
  color: inherit;
}

.stat-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ts-space-2) var(--ts-space-3);
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: var(--ts-space-3);
}

.stat-card__support {
  color: inherit;
  max-width: 32ch;
  margin-top: var(--ts-space-2);
}

.stat-card__trend {
  display: inline-flex;
  align-items: center;
  gap: var(--ts-space-1);
  height: 24px;
  padding: 0 var(--ts-space-2);
  flex: none;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--ts-glass-veil);
  color: inherit;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stat-card__trend .icon {
  width: 14px;
  height: 14px;
  stroke-width: 2.2;
}

.stat-card--online {
  background: var(--md-sys-color-success-container);
  color: var(--md-sys-color-on-success-container);
}

.stat-card--offline {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

.stat-card--unpaired {
  background: var(--md-sys-color-warning-container);
  color: var(--md-sys-color-on-warning-container);
}

.stat-card--media {
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
}

.stat-card--hero {
  min-height: 200px;
  box-shadow: var(--md-sys-elevation-1);
  background-image: var(--ts-hero-sheen);
}

.sparkline {
  width: 128px;
  max-width: 100%;
  height: 40px;
  flex: none;
  overflow: visible;
}

.sparkline__line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .55;
}

.sparkline__dot {
  fill: currentColor;
  stroke: var(--md-sys-color-success-container);
  stroke-width: 2;
}

.region-chart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ts-space-4);
  flex-wrap: wrap;
  margin-bottom: var(--ts-space-4);
}

.region-chart {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-3);
}

.region-chart__row {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) 32px;
  align-items: center;
  gap: var(--ts-space-3);
}

.region-chart__label {
  color: var(--md-sys-color-on-surface-variant);
  text-align: right;
}

.region-chart__track {
  width: var(--row-scale, 100%);
  min-width: 48px;
}

.region-chart__bar {
  display: flex;
  gap: 2px;
  height: 24px;
  border-radius: var(--md-sys-shape-corner-extra-small);
  overflow: hidden;
}

.region-chart__segment {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 4px;
  flex-basis: 0;
  color: var(--md-sys-color-on-success);
}

.region-chart__segment--online { background: var(--md-sys-color-success); }
.region-chart__segment--offline { background: var(--md-sys-color-error); }

/* Eşleşmemiş şube çubuğu grafiğin en geniş alanını kaplayabilir (kurulumun ilk günü tüm
   şubeler eşleşmemiştir). Doygun warning tonu bu ölçekte kahverengi bir yüzeye dönüşüyordu;
   dolgu warning-container'a alındı, kenarlık ve sayı koyu warning tonunda bırakıldı. */
.region-chart__segment--unpaired,
.region-chart__segment--partial {
  background-color: var(--md-sys-color-warning-container);
  color: var(--md-sys-color-on-warning-container);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-warning);
}

.region-chart__segment-value {
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.region-chart__segment-value.is-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.region-chart__total {
  color: var(--md-sys-color-on-surface-variant);
  text-align: right;
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
}

.data-table {
  min-width: 520px;
}

.data-table th,
.data-table td {
  padding: var(--ts-space-3) var(--ts-space-3);
  text-align: left;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line);
  vertical-align: top;
}

.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-medium-size);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  text-transform: uppercase;
  white-space: nowrap;
}

.data-table tbody tr:last-child td,
.data-table tbody tr:last-child th {
  border-bottom: none;
}

.data-table .is-numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.feed {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-1);
}

.feed__item {
  display: flex;
  align-items: flex-start;
  gap: var(--ts-space-3);
  padding: var(--ts-space-2) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 60%, transparent);
}

.feed__item:last-child {
  border-bottom: none;
}

.feed__dot {
  width: 8px;
  height: 8px;
  margin-top: var(--ts-space-2);
  flex: none;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-outline);
}

.feed__dot--error { background: var(--md-sys-color-error); }
.feed__dot--warning { background: var(--md-sys-color-warning); }
.feed__dot--info { background: var(--md-sys-color-primary); }
.feed__dot--neutral { background: var(--md-sys-color-outline); }

.feed__content {
  min-width: 0;
  flex: 1 1 auto;
}

.feed__title {
  color: var(--md-sys-color-on-surface);
}

.feed__meta {
  display: flex;
  align-items: center;
  gap: var(--ts-space-2);
  flex-wrap: wrap;
  color: var(--md-sys-color-on-surface-variant);
}

.dashboard__feeds .md-card__body {
  padding-top: 0;
}

.stores__search {
  flex: 1 1 260px;
  max-width: 380px;
}

.stores__summary {
  margin-bottom: var(--ts-space-3);
}

/* §17 — kart durgunken durumu gösterir, ayarları değil. Kart başına eklenen her satır
   ekranda 57 kez tekrar ettiği için dolgu ve boşluklar da o ölçeğe göre seçilir:
   kurulmamış bir kart başlık + künye + kesikli konum kutuları + tek eylemden ibarettir
   ve 1280 px'te 200 px'i aşmaz (§17.7/5). */
.store-card {
  --ts-store-accent: var(--md-sys-color-outline-variant);
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-2);
  padding: var(--ts-space-3) var(--ts-space-3) var(--ts-space-2) var(--ts-space-4);
}

.store-card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--ts-store-accent);
  transition: background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.store-card[data-state="calisiyor"] { --ts-store-accent: var(--md-sys-color-success); }
.store-card[data-state="sorunlu"] { --ts-store-accent: var(--md-sys-color-error); }
.store-card[data-state="kurulmadi"] { --ts-store-accent: var(--md-sys-color-outline-variant); }
.store-card[data-state="kismen"] { --ts-store-accent: var(--md-sys-color-warning); }

/* Yarım kurulmuş duvar tek bakışta ayırt edilir: kesikli şerit, kesikli konum
   kutularıyla aynı dili konuşur. */
.store-card[data-state="kismen"]::before {
  background:
    repeating-linear-gradient(135deg,
      color-mix(in srgb, var(--md-sys-color-on-warning-container) 34%, transparent) 0 5px,
      transparent 5px 10px),
    var(--ts-store-accent);
}

.store-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ts-space-2);
}

.store-card__identity {
  min-width: 0;
}

.store-card__name {
  color: var(--md-sys-color-on-surface);
}

/* §17.4 — künye tek satırdır ve tek satır kalır: uzun şube adları sarmaz, kırpılır. */
.store-card__meta {
  display: flex;
  align-items: center;
  gap: var(--ts-space-2);
  min-width: 0;
  color: var(--md-sys-color-on-surface-variant);
  white-space: nowrap;
}

.store-card__code {
  padding: 0 var(--ts-space-1);
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: var(--md-sys-color-surface-container-high);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--md-sys-typescale-label-medium-size);
  letter-spacing: .4px;
}

.store-card__preview {
  position: relative;
  width: 96px;
  height: 54px;
  border-radius: var(--md-sys-shape-corner-small);
  overflow: hidden;
  background: var(--ts-media-surface);
  display: flex;
  align-items: center;
  justify-content: center;
}

.store-card__preview img,
.store-card__preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.store-card__preview--empty {
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
}

.store-card__preview-badge {
  position: absolute;
  right: 4px;
  bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--ts-media-scrim);
  color: var(--ts-media-on-scrim);
}

.store-card__actions {
  padding: var(--ts-space-2) 0 0;
  border-top: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 60%, transparent);
}

/* §17.2 — kartın tek birincil eylemi ve taşma menüsü parmakla da basılabilmeli. Devre dışı
   düğmenin dokunmatikte sebebini söyleyememesi neyse, 32 px'lik hedefi ıskalamak da odur.
   Yoğun ölçü fare ve kalem imlecinde korunur. */
@media (pointer: coarse) {
  .store-card__actions .md-button--small {
    height: 48px;
  }

  .store-card__actions .md-icon-button--small {
    width: 48px;
    height: 48px;
  }
}

/* §17.1 — kurulmamış kartın gövdesi: bölge başına bir grup kesikli kutu, içinde yalnız
   konum numarası. Kesikli çerçeve "burada cihaz yok" demenin yazısız hâlidir; kutuya
   ayrıca "boş konum" yazmak aynı şeyi ikinci kez söylemektir. */
.slot-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ts-space-2);
}

/* Grup zeminini kutular kadar tutar. Blok bağlamında (çok bölgeli kartta kurulmamış bölge)
   satırın tamamını kaplasaydı, tek konumluk bir bölge kart genişliğinde boş bir şerit
   çizerdi — kesikli kutunun anlattığı boşluğu ikinci kez, bu kez zeminle söylemek olurdu. */
.slot-strip__group {
  display: flex;
  width: max-content;
  max-width: 100%;
  gap: 4px;
  padding: 4px;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-low);
}

.slot-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 34px;
  border: 1px dashed var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small);
  color: var(--md-sys-color-on-surface-variant);
  font-variant-numeric: tabular-nums;
}

.slot-box--mirror {
  min-width: 56px;
}

/* §17.1 — duvarın tamamı aynı dosyayı oynatırken ad şeridin altında bir kez yazılır;
   kutucuklar yalnız konum ve durum taşır. */
.wall-group {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-1);
  min-width: 0;
}

.wall-group__now {
  min-width: 0;
  color: var(--md-sys-color-on-surface-variant);
}

/* The strip mirrors the physical wall: leftmost tile is wall_position 1 and the gaps
   stand in for the bezel between two panels. */
.wall-strip {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--ts-media-surface);
}

.wall-screen {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 0;
  min-width: 0;
  min-height: 56px;
  padding: var(--ts-space-2);
  border-radius: var(--md-sys-shape-corner-extra-small);
  border: 1px solid transparent;
  background: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface-variant);
  text-align: left;
  transition: border-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

/* Oynatma adı şeridin altında tek satıra indiğinde kutucuk yalnız konum ve durum taşır;
   yüksekliği dokunma hedefinin altına düşmez. */
.wall-strip[data-now="shared"] .wall-screen:not([data-state="empty"]) {
  min-height: 48px;
}

.wall-screen[data-state="online"] {
  background: var(--md-sys-color-success-container);
  color: var(--md-sys-color-on-success-container);
}

.wall-screen[data-state="offline"] {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

/* §17.1 — boş konum kutucuğu: kesikli çerçeve ve ortada konum numarası, başka hiçbir şey. */
.wall-screen[data-state="empty"] {
  align-items: center;
  justify-content: center;
  min-height: 34px;
  background: transparent;
  border: 1px dashed var(--md-sys-color-outline);
}

/* §17.3 — eşiği aşan ölçüm kutucuğun altında uyarı renginde belirir. */
.wall-screen__alert {
  margin-top: auto;
  display: block;
  min-width: 0;
  color: var(--md-sys-color-error);
  font-variant-numeric: tabular-nums;
}

.wall-screen__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ts-space-1);
}

.wall-screen__pos {
  font-variant-numeric: tabular-nums;
}

.wall-screen__dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-outline);
}

.wall-screen[data-state="online"] .wall-screen__dot {
  background: var(--md-sys-color-success);
}

.wall-screen[data-state="offline"] .wall-screen__dot {
  background: var(--md-sys-color-error);
}

.wall-screen__now {
  display: block;
  min-width: 0;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--md-sys-typescale-label-small-size);
}

.wall-strip[data-count="5"] .wall-screen__now,
.wall-strip[data-count="6"] .wall-screen__now {
  display: none;
}

.store-editor__wall {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-2);
  align-items: flex-start;
  padding-top: var(--ts-space-3);
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

.store-editor__blockers {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-1);
  margin-top: var(--ts-space-2);
}

.store-editor__blockers li {
  display: flex;
  align-items: center;
  gap: var(--ts-space-2);
}

.store-editor__blockers code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

.wall-picker {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-2);
  padding-top: var(--ts-space-3);
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

.wall-picker__title {
  color: var(--md-sys-color-on-surface);
}

.wall-picker__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ts-space-2);
}

.wall-picker__slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 108px;
  min-height: 68px;
  padding: var(--ts-space-2);
  border-radius: var(--md-sys-shape-corner-small);
  border: 2px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface-variant);
}

.wall-picker__slot[data-state="online"] {
  background: var(--md-sys-color-success-container);
  color: var(--md-sys-color-on-success-container);
  border-color: transparent;
}

.wall-picker__slot[data-state="offline"] {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
  border-color: transparent;
}

.wall-picker__slot[data-state="empty"] {
  border-style: dashed;
}

.wall-picker__slot.is-selected {
  border-style: solid;
  border-color: var(--md-sys-color-primary);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
}

.wall-picker__slot-state {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wall-picker__slot-mark {
  position: absolute;
  top: var(--ts-space-1);
  right: var(--ts-space-1);
}

.wall-picker__hint {
  color: var(--md-sys-color-on-surface-variant);
}

.publish__store-flag {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  color: var(--md-sys-color-warning);
}

.pairing {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-4);
}

.pairing__form {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--ts-space-4);
  align-items: start;
}

.pairing__pin-field input {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 22px;
  letter-spacing: 4px;
}

.pairing__store-field {
  position: relative;
}

.pairing__error {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--ts-space-2);
  padding: var(--ts-space-2) var(--ts-space-3);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

.pairing__error--error {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

.pairing__error--info {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.combobox__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: var(--ts-layer-menu);
  max-height: 260px;
  overflow-y: auto;
  padding: var(--ts-space-1);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline-variant);
  box-shadow: var(--md-sys-elevation-2);
}

.combobox__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ts-space-3);
  padding: var(--ts-space-2) var(--ts-space-3);
  border-radius: var(--md-sys-shape-corner-small);
  cursor: pointer;
}

.combobox__option:hover,
.combobox__option.is-active {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.combobox__option-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.combobox__empty {
  padding: var(--ts-space-3);
  color: var(--md-sys-color-on-surface-variant);
}

.pairing__pending-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ts-space-3);
  border-top: 1px solid var(--md-sys-color-outline-variant);
  padding-top: var(--ts-space-3);
}

.pairing__pending {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-1);
  max-height: 260px;
  overflow-y: auto;
}

.pairing__pending-item {
  border: 1px solid transparent;
}

.pairing__pending-item.is-selected {
  border-color: var(--md-sys-color-primary);
}

.pairing__pin-tag {
  padding: var(--ts-space-1) var(--ts-space-2);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  letter-spacing: 1px;
}

.pairing__loading {
  display: flex;
  align-items: center;
  gap: var(--ts-space-3);
  padding: var(--ts-space-5);
  color: var(--md-sys-color-on-surface-variant);
}

.media__tabs {
  margin-bottom: var(--ts-space-4);
}

.media__panel {
  animation: view-enter var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard) both;
}

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ts-space-2);
  text-align: center;
  padding: var(--ts-space-7) var(--ts-space-5);
  border: 2px dashed var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
  background:
    linear-gradient(180deg, rgba(var(--tstv-primary-rgb), .04), rgba(var(--tstv-primary-rgb), 0) 70%),
    var(--md-sys-color-surface-container-lowest);
  cursor: pointer;
  transition: border-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
    background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
    transform var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-emphasized);
}

.dropzone:hover,
.dropzone.is-dragging {
  border-color: var(--md-sys-color-primary);
  background: var(--md-sys-color-primary-container);
}

.dropzone.is-dragging {
  transform: scale(1.005);
}

.dropzone__art {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.dropzone__title {
  color: var(--md-sys-color-on-surface);
}

.dropzone__text {
  color: var(--md-sys-color-on-surface-variant);
  max-width: 62ch;
}

.upload-panel {
  margin-top: var(--ts-space-4);
}

.upload-queue {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-2);
  max-height: 320px;
  overflow-y: auto;
}

.upload-queue__item {
  display: flex;
  align-items: center;
  gap: var(--ts-space-3);
  padding: var(--ts-space-2) var(--ts-space-3);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline-variant);
}

.upload-queue__item.is-done {
  border-color: var(--md-sys-color-success);
}

.upload-queue__item.is-error {
  border-color: var(--md-sys-color-error);
}

.upload-queue__item.is-cancelled {
  opacity: .6;
}

.upload-queue__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
}

.upload-queue__content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-2);
}

.upload-queue__meta {
  display: flex;
  align-items: center;
  gap: var(--ts-space-2);
  color: var(--md-sys-color-on-surface-variant);
}

.upload-queue__item.is-error .upload-queue__status {
  color: var(--md-sys-color-error);
}

.media-card {
  display: flex;
  flex-direction: column;
}

.media-card__thumb:focus-visible {
  outline-offset: calc(-1 * var(--ts-focus-ring-width));
}

.media-card__thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--ts-media-surface);
  overflow: hidden;
}

.media-card__thumb-image,
.media-card__thumb-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-card__type {
  position: absolute;
  left: var(--ts-space-2);
  bottom: var(--ts-space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--ts-space-1);
  padding: var(--ts-space-1) var(--ts-space-2);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--ts-media-scrim);
  color: var(--ts-media-on-scrim);
}

.media-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-1);
  padding: var(--ts-space-3) var(--ts-space-3) 0;
  flex: 1 1 auto;
}

.media-card__name {
  color: var(--md-sys-color-on-surface);
}

.media-card__meta {
  display: flex;
  align-items: center;
  gap: var(--ts-space-1);
  flex-wrap: wrap;
  color: var(--md-sys-color-on-surface-variant);
  margin-top: var(--ts-space-1);
}

.media-card__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ts-space-1);
  padding: var(--ts-space-2);
}

.media-preview {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-4);
}

.media-preview__stage {
  background: var(--ts-media-surface);
  border-radius: var(--md-sys-shape-corner-medium);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 52dvh;
}

.media-preview__image,
.media-preview__video {
  max-width: 100%;
  max-height: 52dvh;
  object-fit: contain;
}

.media-preview__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--ts-space-3);
}

.media-preview__facts dt {
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-medium-size);
  text-transform: uppercase;
  letter-spacing: .6px;
}

.media-preview__facts dd {
  margin: var(--ts-space-1) 0 0;
  word-break: break-all;
}

.playlist-card {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-3);
  padding: var(--ts-space-4);
}

.playlist-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ts-space-3);
}

.playlist-card__identity {
  min-width: 0;
}

.playlist-card__identity code,
.playlist-card__facts code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--md-sys-typescale-label-medium-size);
}

.playlist-card__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ts-space-3);
}

.playlist-card__facts dt {
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-medium-size);
  text-transform: uppercase;
  letter-spacing: .6px;
}

.playlist-card__facts dd {
  margin: var(--ts-space-1) 0 0;
  color: var(--md-sys-color-on-surface);
}

.playlist-editor {
  align-items: start;
}

.playlist-items-card {
  min-width: 0;
}

.playlist-settings__block {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-2);
  align-items: flex-start;
  padding-top: var(--ts-space-3);
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

.schedule__body {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-3);
  width: 100%;
}

.schedule__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ts-space-3);
}

.schedule__days {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ts-space-1);
}

.schedule__day {
  min-width: 52px;
  justify-content: center;
}

.playlist-items {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-2);
}

.playlist-item {
  display: grid;
  grid-template-columns: auto auto 96px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--ts-space-3);
  padding: var(--ts-space-2) var(--ts-space-3);
  border-radius: var(--md-sys-shape-corner-medium);
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-lowest);
  transition: border-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
    box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
    opacity var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.playlist-item.is-dragging {
  opacity: .5;
}

.playlist-item.is-drop-target {
  border-color: var(--md-sys-color-primary);
  box-shadow: inset 0 2px 0 0 var(--md-sys-color-primary);
}

.playlist-item__handle {
  color: var(--md-sys-color-outline);
  cursor: grab;
}

.playlist-item__order {
  color: var(--md-sys-color-on-surface-variant);
  min-width: 20px;
  text-align: right;
}

.playlist-item__thumb {
  width: 96px;
  height: 54px;
  object-fit: cover;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--ts-media-surface);
}

.playlist-item__thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--md-sys-color-on-surface-variant);
  background: var(--md-sys-color-surface-container-high);
}

.playlist-item__info {
  min-width: 0;
}

.playlist-item__controls {
  display: flex;
  align-items: center;
  gap: var(--ts-space-3);
  flex-wrap: wrap;
}

.playlist-item__duration {
  width: 104px;
}

.playlist-item__buttons {
  display: flex;
  align-items: center;
  gap: 2px;
}

.media-picker {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-3);
}

.media-picker__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--ts-space-2);
  max-height: 52dvh;
  overflow-y: auto;
  padding: 2px;
}

.media-picker__option {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-2);
  padding: var(--ts-space-2);
  border-radius: var(--md-sys-shape-corner-medium);
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-lowest);
  text-align: left;
  transition: border-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.media-picker__option.is-selected {
  border-color: var(--md-sys-color-primary);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
}

.media-picker__thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--ts-media-surface);
}

.media-picker__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.media-picker__check {
  position: absolute;
  top: var(--ts-space-3);
  right: var(--ts-space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-primary);
}

.publish {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-3);
}

.publish__stores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--ts-space-1);
  max-height: 44dvh;
  overflow-y: auto;
  padding: 2px;
}

.publish__store {
  display: flex;
  align-items: center;
  gap: var(--ts-space-2);
  padding: var(--ts-space-2);
  border-radius: var(--md-sys-shape-corner-small);
  border: 1px solid transparent;
  text-align: left;
  color: var(--md-sys-color-on-surface);
}

.publish__store:hover {
  background: var(--md-sys-color-surface-container-high);
}

.publish__store.is-selected {
  border-color: var(--md-sys-color-primary);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.publish__store-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.publish__summary {
  padding-top: var(--ts-space-1);
}

.publish-report {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-4);
}

.publish-report__block h3 {
  display: flex;
  align-items: center;
  gap: var(--ts-space-2);
  margin-bottom: var(--ts-space-2);
}

.publish-report__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ts-space-1);
  max-height: 200px;
  overflow-y: auto;
}

/* §17.4 — atlanan bölgeler sebep başına tek satır; bölgeler çip olarak altında toplanır. */
.publish-report__skipped {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-2);
}

.simulator__toolbar {
  align-items: flex-end;
}

.simulator__picker {
  flex: 1 1 280px;
  max-width: 420px;
}

.simulator__panel-pick {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-1);
}

.simulator__source-info {
  margin-bottom: var(--ts-space-3);
}

/* §11.14.3 — telafi çubuğu araç çubuğunun kendi satırında durur: ekran sayısı 1 iken
   gizlenir, çünkü tek ekranda çerçeve boşluğu diye bir şey yoktur. */
.simulator__bezel {
  flex: 1 1 260px;
  max-width: 360px;
}

.simulator__bezel[hidden] {
  display: none;
}

.simulator__bezel-note {
  margin-top: var(--ts-space-2);
  color: var(--md-sys-color-on-surface-variant);
}

/* §11.13.7 — iki kurulum yolu yan yana. Kolonlar eşit genişliktedir ki ekran başına
   piksel farkı yalnız sayıdan değil, görüntünün kendisinden de okunabilsin. */
.mode-compare {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-3);
  margin-bottom: var(--ts-space-4);
  padding: var(--ts-space-4);
  border-radius: var(--md-sys-shape-corner-large);
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-low);
}

.mode-compare[hidden] {
  display: none;
}

.mode-compare__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ts-space-3);
}

.mode-compare__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ts-space-4);
}

.mode-compare__col {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-2);
  min-width: 0;
  padding: var(--ts-space-3);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline-variant);
}

.mode-compare__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ts-space-2);
}

.mode-compare__badge {
  padding: 2px 10px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.mode-compare__pixels {
  color: var(--md-sys-color-primary);
}

@media (max-width: 839px) {
  .mode-compare__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.simulator__advice {
  margin-bottom: var(--ts-space-4);
}

.simulator__stages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ts-space-4);
}

/* Three walls of four frames each never fit side by side, so the wall layout stacks
   the modes and gives every wall the full content width. */
.simulator__stages--wall {
  grid-template-columns: minmax(0, 1fr);
}

.simulator__verdict {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-3);
  margin-bottom: var(--ts-space-4);
  padding: var(--ts-space-4);
  border-radius: var(--md-sys-shape-corner-large);
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-lowest);
}

.simulator__verdict-head {
  color: var(--md-sys-color-on-surface);
}

.simulator__verdict-head .md-body-medium {
  margin-top: var(--ts-space-1);
  color: var(--md-sys-color-on-surface-variant);
}

.simulator__slices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ts-space-2);
}

.simulator__slice-chip {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--ts-space-2) var(--ts-space-3);
  border-radius: var(--md-sys-shape-corner-small);
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface-variant);
  font-variant-numeric: tabular-nums;
}

.simulator__slice-chip.is-alert {
  border-color: transparent;
  background: var(--md-sys-color-warning-container);
  color: var(--md-sys-color-on-warning-container);
}

.simulator__slice-pos {
  color: inherit;
}

.simulator__estimate {
  margin-top: var(--ts-space-2);
}

.simulator__estimate.is-match {
  color: var(--md-sys-color-success);
}

.simulator__estimate.is-mismatch {
  color: var(--md-sys-color-warning);
}

.simulator__reference {
  min-width: 640px;
}

.simulator__reference td.is-preferred {
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
}

.simulator__reference caption {
  caption-side: bottom;
  padding-top: var(--ts-space-2);
  text-align: left;
  color: var(--md-sys-color-on-surface-variant);
}

.simulator__reference tbody tr.is-active {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.wall-stage {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.wall-stage .tv-frame {
  flex: 1 1 0;
  min-width: 0;
}

/* §11.14.3 — ekranlar arasındaki fiziksel boşluk, telafi yüzdesinin sanal tuvaldeki payı
   kadar yer kaplar; genişliği JS'ten gelir. Kendi aralığı sıfırlanır ki çizilen boşluk
   yalnız gerçek montaj payını göstersin. */
.wall-stage--gapped {
  gap: 0;
}

.wall-stage__gap {
  align-self: stretch;
  min-height: 24px;
  background: var(--ts-bezel-frame);
  border-radius: var(--md-sys-shape-corner-extra-small);
}

.wall-slice {
  position: relative;
}

/* Sized per scaling mode in js/views/simulator.js: the box is the slice as the panel
   would show it, and it clips the neighbouring slices of the same source file. */
.wall-slice__box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

/* The media is deliberately screen_count times wider than the panel it sits in, so the
   global img/video reset has to be lifted here — max-width: 100% would clamp it back and
   every frame would show the whole canvas instead of its own slice. */
.wall-slice__box .tv-frame__media {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
}

.tv-frame__position {
  position: absolute;
  top: var(--ts-space-2);
  left: var(--ts-space-3);
  padding: 0 6px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--ts-media-scrim);
  color: var(--ts-media-on-scrim);
  font-variant-numeric: tabular-nums;
}

.tv-frame--wall .tv-frame__bezel {
  padding: var(--ts-space-1) var(--ts-space-1) var(--ts-space-3);
}

.stage {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-3);
  padding: var(--ts-space-4);
  border-radius: var(--md-sys-shape-corner-large);
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-lowest);
}

.stage__head {
  min-width: 0;
}

.stage__title {
  display: flex;
  align-items: center;
  gap: var(--ts-space-2);
  color: var(--md-sys-color-on-surface);
}

.stage__title .icon {
  color: var(--md-sys-color-primary);
}

.stage__mode {
  padding: 0 var(--ts-space-1);
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--md-sys-typescale-label-medium-size);
}

.stage__summary {
  margin-top: var(--ts-space-1);
}

.stage__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ts-space-2);
}

.stage__facts dt {
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-medium-size);
  text-transform: uppercase;
  letter-spacing: .6px;
}

.stage__facts dd {
  margin: var(--ts-space-1) 0 0;
  font-size: var(--md-sys-typescale-title-medium-size);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--md-sys-color-on-surface);
}

.stage__facts dd.is-alert {
  color: var(--md-sys-color-error);
}

.stage__detail {
  margin-top: auto;
  padding-top: var(--ts-space-2);
  border-top: 1px solid var(--md-sys-color-outline-variant);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--md-sys-typescale-label-medium-size);
}

.tv-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tv-frame__bezel {
  position: relative;
  width: 100%;
  padding: var(--ts-space-2) var(--ts-space-2) var(--ts-space-4);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--ts-bezel-frame);
  box-shadow: var(--md-sys-elevation-2);
}

.tv-frame__screen {
  width: 100%;
  height: 100%;
  border-radius: var(--md-sys-shape-corner-extra-small);
  overflow: hidden;
  background: var(--ts-bezel-screen);
}

.tv-frame__media {
  width: 100%;
  height: 100%;
  display: block;
}

.tv-frame__brand {
  position: absolute;
  left: 50%;
  bottom: var(--ts-space-1);
  transform: translateX(-50%);
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--ts-bezel-brand);
}

.tv-frame__neck {
  width: 56px;
  height: 16px;
  background: var(--ts-bezel-stand);
}

.tv-frame__foot {
  width: 128px;
  height: 8px;
  border-radius: 0 0 var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-extra-small);
  background: var(--ts-bezel-base);
}

.simulator__apply {
  display: flex;
  align-items: center;
  gap: var(--ts-space-4);
  flex-wrap: wrap;
  margin-top: var(--ts-space-5);
  padding: var(--ts-space-4);
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.simulator__apply-text {
  flex: 1 1 320px;
  min-width: 0;
}

.logs__filter {
  flex: 0 1 240px;
}

.logs__surface {
  overflow: hidden;
}

.logs__table {
  min-width: 780px;
}

.logs__row {
  cursor: pointer;
  transition: background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.logs__row:hover {
  background: var(--md-sys-color-surface-container-low);
}

.logs__row:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 var(--ts-focus-ring-width) var(--md-sys-color-primary);
}

.logs__row.is-new {
  animation: log-row-enter var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard) both;
}

@keyframes log-row-enter {
  from {
    background: var(--md-sys-color-primary-container);
  }

  to {
    background: transparent;
  }
}

.logs__cell-time {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
}

.logs__code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--md-sys-typescale-label-medium-size);
  padding: 0 var(--ts-space-1);
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  white-space: nowrap;
}

.logs__message {
  word-break: break-word;
}

.logs__context-row td {
  background: var(--md-sys-color-surface-container-low);
}

.logs__context {
  margin: 0;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--md-sys-color-on-surface-variant);
}

.logs__status {
  padding: var(--ts-space-3) var(--ts-space-4);
}

.logs__sentinel {
  height: 1px;
}

.logs__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ts-space-3);
  padding: var(--ts-space-6);
  color: var(--md-sys-color-on-surface-variant);
}

.log-level {
  display: inline-flex;
  align-items: center;
  gap: var(--ts-space-1);
  padding: 0 var(--ts-space-2);
  height: 24px;
  border-radius: var(--md-sys-shape-corner-full);
  font-size: var(--md-sys-typescale-label-medium-size);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  white-space: nowrap;
}

.log-level--error {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

.log-level--warning {
  background: var(--md-sys-color-warning-container);
  color: var(--md-sys-color-on-warning-container);
}

.log-level--info {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.log-level--neutral {
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
}

.stream-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ts-space-2);
  height: 32px;
  padding: 0 var(--ts-space-3);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  white-space: nowrap;
}

.stream-chip__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-outline);
}

.stream-chip[data-status="open"] {
  background: var(--md-sys-color-success-container);
  color: var(--md-sys-color-on-success-container);
}

.stream-chip[data-status="open"] .stream-chip__dot {
  background: var(--md-sys-color-success);
  animation: pulse-dot 2.4s var(--md-sys-motion-easing-standard) infinite;
}

.stream-chip[data-status="reconnecting"],
.stream-chip[data-status="connecting"] {
  background: var(--md-sys-color-warning-container);
  color: var(--md-sys-color-on-warning-container);
}

.stream-chip[data-status="reconnecting"] .stream-chip__dot,
.stream-chip[data-status="connecting"] .stream-chip__dot {
  background: var(--md-sys-color-warning);
}

@keyframes pulse-dot {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: .55;
    transform: scale(.8);
  }
}

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ts-space-2);
  height: 40px;
  padding: 0 var(--ts-space-2) 0 var(--ts-space-1);
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-on-surface-variant);
  transition: background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.user-chip:hover {
  background: var(--md-sys-color-surface-container-high);
}

.user-chip__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

.store-editor__row {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-2);
  align-items: flex-start;
  width: 100%;
}

.store-editor__row[hidden] {
  display: none;
}

/* §11.13.4 — iki yolun ekran başına yatay pikselini yan yana koyar. Panel karar vermez,
   farkı ölçüp gösterir. */
.res-chain {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-2);
  width: 100%;
  padding: var(--ts-space-3);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container);
}

.res-chain[hidden] {
  display: none;
}

.res-chain__title {
  color: var(--md-sys-color-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: .6px;
}

.res-chain__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ts-space-2);
}

.res-chain__cell {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-1);
  padding: var(--ts-space-2) var(--ts-space-3);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-lowest);
}

.res-chain__cell.is-weak {
  background: var(--md-sys-color-warning-container);
  color: var(--md-sys-color-on-warning-container);
}

.res-chain__label {
  color: var(--md-sys-color-on-surface-variant);
}

.res-chain__cell.is-weak .res-chain__label {
  color: var(--md-sys-color-on-warning-container);
}

.res-chain__foot {
  color: var(--md-sys-color-on-surface-variant);
}

.res-chain.is-severe .res-chain__foot {
  color: var(--md-sys-color-on-surface);
}

/* §11.13.7 — donanım kontrolcülü şubede TV'lerin kendi durumu yoktur. Kart bunu tek kutu
   ve ondan beslenen bir ekran grubu olarak çizer; konum konum durum gösteren yazılım
   duvarı şeridiyle karışmaması gerekir. */
.hw-wall {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-2);
  padding: var(--ts-space-3);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container);
}

.hw-wall__flow {
  display: flex;
  align-items: center;
  gap: var(--ts-space-2);
  min-width: 0;
}

.hw-wall__box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 0 96px;
  min-width: 0;
  min-height: 64px;
  padding: var(--ts-space-2);
  border: 1px solid transparent;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-surface-variant);
  text-align: left;
}

.hw-wall__box[data-state="online"] {
  background: var(--md-sys-color-success-container);
  color: var(--md-sys-color-on-success-container);
}

.hw-wall__box[data-state="offline"] {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

.hw-wall__box[data-state="empty"] {
  border: 1px dashed var(--md-sys-color-outline);
}

.hw-wall__box[data-state="online"] .wall-screen__dot {
  background: var(--md-sys-color-success);
}

.hw-wall__box[data-state="offline"] .wall-screen__dot {
  background: var(--md-sys-color-error);
}

.hw-wall__box-head {
  display: flex;
  align-items: center;
  gap: var(--ts-space-1);
}

.hw-wall__box-head .md-label-medium {
  flex: 1 1 auto;
}

.hw-wall__box-now {
  display: block;
  min-width: 0;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--md-sys-typescale-label-small-size);
}

.hw-wall__link {
  flex: none;
  color: var(--md-sys-color-on-surface-variant);
}

/* Tek kaynaktan bölünen tuval: paneller bitişik çizilir, aralarında yalnız çerçeve payı
   kadar boşluk kalır. Ayrı ayrı durum rozeti taşımazlar. */
.hw-wall__screens {
  display: flex;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 64px;
  padding: 3px;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--ts-media-surface);
}

.hw-wall__pane {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 2px;
  background: var(--md-sys-color-surface-container-high);
}

.hw-wall__pane[data-state="online"] {
  background: var(--md-sys-color-success-container);
}

.hw-wall__pane[data-state="offline"] {
  background: var(--md-sys-color-error-container);
}

/* §11.14.4 görsel kalibrasyon — kullanıcı duvara bakamadığında da etkiyi görebilsin diye
   kaynağın dilimlenmiş hâli gerçek çerçeve boşluğuyla çizilir. */
.calibrate {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 1fr);
  gap: var(--ts-space-5);
  align-items: start;
}

.calibrate__stage {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-2);
  min-width: 0;
}

.calibrate__stage-label {
  color: var(--md-sys-color-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: .6px;
}

.calibrate__wall {
  display: flex;
  width: 100%;
  padding: var(--ts-space-2);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--ts-media-surface);
}

.calibrate__screen {
  position: relative;
  flex: none;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 2px;
  background: var(--ts-bezel-screen);
}

.calibrate__pattern-holder {
  position: absolute;
  inset: 0;
  height: 100%;
}

.calibrate__pattern {
  display: block;
  width: 100%;
  height: 100%;
}

.calibrate__pattern-line {
  stroke: var(--tstv-brand-cyan);
  stroke-width: 3;
  fill: none;
}

.calibrate__pattern-tick {
  stroke: var(--ts-media-on-scrim);
  stroke-width: 2;
  fill: none;
  opacity: .55;
}

.calibrate__pattern-tick.is-major {
  stroke-width: 3;
  opacity: 1;
}

.calibrate__screen-pos {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 0 5px;
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: var(--ts-media-scrim);
  color: var(--ts-media-on-scrim);
  font-variant-numeric: tabular-nums;
}

.calibrate__stage-help {
  color: var(--md-sys-color-on-surface-variant);
}

.calibrate__side {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-3);
  min-width: 0;
}

.calibrate__hidden {
  color: var(--md-sys-color-on-surface-variant);
}

.calibrate__chips {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-1);
}

.calibrate__chip {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ts-space-2);
  padding: var(--ts-space-1) var(--ts-space-2);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface-variant);
}

.calibrate__status {
  min-height: 16px;
  color: var(--md-sys-color-primary);
}

.calibrate__status.is-error {
  color: var(--md-sys-color-error);
}

.calibrate__countdown {
  display: flex;
  align-items: center;
  gap: var(--ts-space-1);
  margin-top: auto;
  color: var(--md-sys-color-on-surface-variant);
}

/* §11.16 dokunarak konum atama — harf kartları parmakla dokunulacak kadar büyüktür,
   seçim sırası kartın köşesinde rakamla durur. */
.identify {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-4);
}

.identify__steps {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-1);
  padding-left: var(--ts-space-5);
  color: var(--md-sys-color-on-surface-variant);
  list-style: decimal;
}

.identify__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--ts-space-3);
}

.identify__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ts-space-1);
  min-height: 152px;
  padding: var(--ts-space-3);
  border: 2px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
  transition:
    border-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
    background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.identify__card:hover {
  border-color: var(--md-sys-color-primary);
}

.identify__card.is-picked {
  border-color: var(--md-sys-color-primary);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.identify__letter {
  font-size: 64px;
  line-height: 72px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.identify__order {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: var(--ts-space-2);
  left: var(--ts-space-2);
  width: 28px;
  height: 28px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  font-variant-numeric: tabular-nums;
  opacity: 0;
}

.identify__card.is-picked .identify__order {
  opacity: 1;
}

.identify__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: auto;
  color: var(--md-sys-color-on-surface-variant);
  text-align: center;
  overflow-wrap: anywhere;
}

.identify__card.is-picked .identify__meta {
  color: var(--md-sys-color-on-primary-container);
}

.identify__meta code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

.identify__hint {
  min-height: 40px;
  padding: var(--ts-space-2) var(--ts-space-3);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.identify__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ts-space-3);
  flex-wrap: wrap;
}

.identify__countdown {
  display: flex;
  align-items: center;
  gap: var(--ts-space-1);
  color: var(--md-sys-color-on-surface-variant);
}

.identify__loading {
  grid-column: 1 / -1;
}

/* §11.15.2 — kütüphane kartındaki hedef duvar rozeti ve yükleme kuyruğundaki
   değiştirilebilir tahmin. */
.media-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ts-space-1);
}

.variant-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ts-space-1);
  height: 22px;
  padding: 0 var(--ts-space-2);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
}

/* §14.2 — türev medya rozeti. Kaynağın kendisiyle karışmaması için ana renk taşır:
   bir varyantın kütüphanede orijinal sanılması, yanlış dosyanın yayına gitmesi demektir. */
.derived-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ts-space-1);
  height: 22px;
  padding: 0 var(--ts-space-2);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.media-preview__derived {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ts-space-1) var(--ts-space-2);
}

.media-preview__derived .md-button {
  height: 32px;
  padding: 0 var(--ts-space-2);
}

.variant-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ts-space-1);
  height: 24px;
  padding: 0 var(--ts-space-2);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface-variant);
}

.variant-chip:hover:not(:disabled) {
  background: var(--md-sys-color-surface-container-high);
}

.variant-chip.is-uncertain {
  border-color: var(--md-sys-color-warning);
  color: var(--md-sys-color-on-warning-container);
  background: var(--md-sys-color-warning-container);
}

.variant-chip:disabled {
  opacity: .55;
}

/* §11.15.1 — playlist öğesinin varyant kümesi. Varsayılan her zaman ilk sırada durur:
   ekran sayısı eşleşmeyen şubeler onu alır. */
.variant-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ts-space-1);
  margin-top: var(--ts-space-1);
}

.variant-strip__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ts-space-1);
  height: 24px;
  padding: 0 var(--ts-space-1) 0 var(--ts-space-2);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.variant-strip__chip.is-default {
  padding-right: var(--ts-space-2);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
}

.variant-strip__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--md-sys-shape-corner-full);
  color: inherit;
}

.variant-strip__remove:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) 14%, transparent);
}

.variant-strip__add {
  display: inline-flex;
  align-items: center;
  gap: var(--ts-space-1);
  height: 24px;
  padding: 0 var(--ts-space-2);
  border: 1px dashed var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-primary);
}

.variant-strip__add:hover {
  background: var(--md-sys-color-primary-container);
}

/* §11.15.3 yayın öncesi kontrol — hangi duvar boyutunda kaç şubenin açıkta kaldığı. */
.variant-gate {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-4);
}

.variant-gate__list {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-3);
}

.variant-gate__row {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-2);
  padding: var(--ts-space-3);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container);
}

.variant-gate__stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ts-space-1);
}

/* §19.1 — yukarı doğru türetme onayı. Üç yöntemin §14.3 bedeli yan yana durur ve seçili
   satır, onay verilirse gerçekten kodlanacak olan yöntemdir. */
.variant-gate__methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--ts-space-2);
}

.variant-gate__method {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: var(--ts-space-1) var(--ts-space-2);
  padding: var(--ts-space-2) var(--ts-space-3);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface);
  cursor: pointer;
}

.variant-gate__method[data-selected='yes'] {
  border-color: var(--md-sys-color-primary);
  background: var(--md-sys-color-primary-container);
}

.variant-gate__method .md-body-small {
  grid-column: 1 / -1;
}

.variant-gate__method input {
  accent-color: var(--md-sys-color-primary);
  margin: 0;
}

/* İki seçenek yan yana: hangi düğmenin ne yaptığı basmadan önce okunur. */
.variant-gate__choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--ts-space-3);
  align-items: start;
}

/* §12 uygulama güncelleme ekranı. */
.devices__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--ts-space-4);
  align-items: start;
}

/* §1.0 — sahadaki ilk soru "bu cihaz nereye bağlanacak" olduğu için adres cihaz
   listesinin en üstünde, kopyalanabilir biçimde durur. */
.mqtt-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ts-space-3);
  margin-bottom: var(--ts-space-4);
  padding: var(--ts-space-3) var(--ts-space-4);
  border-radius: var(--md-sys-shape-corner-large);
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-lowest);
}

.mqtt-bar__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
}

.mqtt-bar[data-tone="secure"] .mqtt-bar__mark {
  background: var(--md-sys-color-success-container);
  color: var(--md-sys-color-on-success-container);
}

.mqtt-bar[data-tone="plain"] .mqtt-bar__mark {
  background: var(--md-sys-color-warning-container);
  color: var(--md-sys-color-on-warning-container);
}

.mqtt-bar[data-tone="unknown"] .mqtt-bar__mark {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

.mqtt-bar__text {
  flex: 1 1 420px;
  min-width: 0;
}

.mqtt-bar__text > p + p {
  margin-top: 2px;
}

.mqtt-bar__url code {
  display: inline-block;
  padding: 2px var(--ts-space-2);
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--md-sys-typescale-body-large-size);
  word-break: break-all;
}

.mqtt-bar__warn {
  color: var(--md-sys-color-on-warning-container);
  background: var(--md-sys-color-warning-container);
  border-radius: var(--md-sys-shape-corner-small);
  padding: var(--ts-space-1) var(--ts-space-2);
}

.version-panel,
.release-panel,
.rollout-panel,
.device-table-panel {
  margin-bottom: var(--ts-space-4);
}

.version-bar {
  display: flex;
  width: 100%;
  height: 20px;
  overflow: hidden;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-high);
}

.version-bar__seg {
  height: 100%;
  min-width: 3px;
}

.version-bar__seg--current {
  background: var(--md-sys-color-primary);
}

.version-bar__seg--old {
  background: var(--md-sys-color-warning);
}

.version-bar__seg--unknown {
  background: var(--md-sys-color-outline);
}

.version-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ts-space-2);
}

.version-legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--ts-space-2);
}

.version-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--md-sys-shape-corner-full);
}

.version-legend__dot--current {
  background: var(--md-sys-color-primary);
}

.version-legend__dot--old {
  background: var(--md-sys-color-warning);
}

.version-legend__dot--unknown {
  background: var(--md-sys-color-outline);
}

.release-panel__facts {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-2);
}

.release-panel__facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ts-space-3);
}

.release-panel__facts dt {
  color: var(--md-sys-color-on-surface-variant);
}

.release-panel__facts dd {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.release-panel__checksum {
  flex-direction: column !important;
  align-items: flex-start !important;
}

.release-panel__checksum dd {
  width: 100%;
  text-align: left;
  overflow-wrap: anywhere;
}

.release-panel__checksum code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--md-sys-typescale-body-small-size);
}

.dropzone--compact {
  min-height: 0;
  padding: var(--ts-space-4);
  gap: var(--ts-space-1);
}

.dropzone.is-busy {
  opacity: .55;
  pointer-events: none;
}

.release-panel__progress {
  display: flex;
  align-items: center;
  gap: var(--ts-space-2);
}

.release-panel__progress .md-linear-progress {
  flex: 1 1 auto;
}

.rollout__stores {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-1);
  max-height: 260px;
  overflow-y: auto;
  padding-right: var(--ts-space-1);
}

.rollout__stores[hidden],
.rollout-panel .md-field[hidden] {
  display: none;
}

.rollout__store {
  display: flex;
  align-items: center;
  gap: var(--ts-space-2);
  padding: var(--ts-space-2);
  border-radius: var(--md-sys-shape-corner-medium);
  color: var(--md-sys-color-on-surface);
  text-align: left;
}

.rollout__store:hover {
  background: var(--md-sys-color-surface-container-high);
}

.rollout__store.is-selected {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.rollout__store-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.rollout__store-flag {
  flex: none;
  padding: 0 var(--ts-space-2);
  height: 20px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-warning-container);
  color: var(--md-sys-color-on-warning-container);
}

.rollout__foot {
  display: flex;
  justify-content: flex-end;
}

.device-table td > span {
  display: block;
}

/* Durum hücresi alt alta yığılır: rozet, altında varsa oynatamama sebebi. Hücrenin kendisi
   tablo hücresi olarak kalır, yığın içeride kurulur — `td`'ye flex vermek sütun hizasını
   bozar. Rozet burada yeniden satır içi kutudur: yukarıdaki
   `.device-table td > span { display: block }` kuralı rozeti blok yapıyor, simge ile metin
   alt alta düşüp yazı yuvarlak zeminin dışına taşıyordu. */
.device-table__status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.device-table__status > span {
  display: inline-flex !important;
  align-items: center;
  max-width: 100%;
  margin-top: 0;
}

/* §15 — bölge hücresi: tip simgesi adın soluna oturur, ad uzunsa satır kırılmaz. */
.device-table__zone {
  display: inline-flex !important;
  align-items: center;
  gap: var(--ts-space-1);
  white-space: nowrap;
}

.device-table__zone .icon {
  color: var(--md-sys-color-on-surface-variant);
  flex: none;
}

.device-table__flag {
  display: inline-flex !important;
  align-items: center;
  gap: var(--ts-space-1);
  margin-top: 2px;
  padding: 0 var(--ts-space-2);
  height: 20px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-warning-container);
  color: var(--md-sys-color-on-warning-container);
}

.device-table tr.is-outdated td:first-child {
  box-shadow: inset 3px 0 0 var(--md-sys-color-warning);
}

.publish-report__fallback {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-1);
  margin-top: var(--ts-space-2);
}

/* §13 Şube Yönetimi
   ------------------------------------------------------------------ */

/* Boş durum ve hata bloğu kart ızgarasının tek bir sütununa sıkışmamalı: kurulumun ilk
   gününde ekranda başka hiçbir şey yok. */
.grid > .empty-state,
.grid > .error-state {
  grid-column: 1 / -1;
}

.md-field__support--warning {
  color: var(--md-sys-color-on-warning-container);
  background: var(--md-sys-color-warning-container);
  border-radius: var(--md-sys-shape-corner-extra-small);
  padding: 2px var(--ts-space-2);
  margin-top: var(--ts-space-1);
}

/* §13.1 — kod sorulmaz, üretilir. Kayıttan sonra kullanıcının göreceği tek yer burasıdır. */
.store-created {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ts-space-2);
  text-align: center;
  padding: var(--ts-space-4) var(--ts-space-3);
}

.store-created__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-success-container);
  color: var(--md-sys-color-on-success-container);
}

.store-created__code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  letter-spacing: 1px;
  padding: var(--ts-space-2) var(--ts-space-4);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  user-select: all;
}

/* §13.2 — toplu ekleme: yapıştır → önizle → onayla. Tablo düzenlenebilir olduğu için
   hücreler alan gibi değil, satır içi metin gibi durur; odaklanınca çerçeve kazanır. */
.store-import textarea {
  min-height: 168px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: 1.6;
  white-space: pre;
  overflow-x: auto;
}

.import-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ts-space-3);
  flex-wrap: wrap;
}

.import-summary {
  color: var(--md-sys-color-on-surface-variant);
}

.import-summary.has-errors {
  color: var(--md-sys-color-error);
  font-weight: 500;
}

.import-table {
  min-width: 640px;
}

.import-table th,
.import-table td {
  padding: var(--ts-space-2) var(--ts-space-2);
  vertical-align: middle;
}

.import-table__index {
  width: 40px;
  color: var(--md-sys-color-on-surface-variant);
  text-align: right;
}

.import-table__tools {
  width: 48px;
}

.import-table__input {
  width: 100%;
  min-width: 0;
  padding: var(--ts-space-1) var(--ts-space-2);
  border: 1px solid transparent;
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
  font: inherit;
}

.import-table__input:hover {
  border-color: var(--md-sys-color-outline-variant);
}

.import-table__input:focus-visible {
  outline: var(--ts-focus-ring-width) solid var(--md-sys-color-primary);
  outline-offset: 1px;
  border-color: transparent;
}

.import-table__input--count {
  width: 72px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.import-row td {
  background: transparent;
}

.import-row--error td {
  background: color-mix(in srgb, var(--md-sys-color-error-container) 62%, transparent);
  color: var(--md-sys-color-on-error-container);
}

.import-row--error td:first-child {
  box-shadow: inset 3px 0 0 var(--md-sys-color-error);
}

.import-row--warn td {
  background: color-mix(in srgb, var(--md-sys-color-warning-container) 42%, transparent);
  color: var(--md-sys-color-on-warning-container);
}

.import-row--warn td:first-child {
  box-shadow: inset 3px 0 0 var(--md-sys-color-warning);
}

.import-row__status {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--ts-space-1);
}

.import-row__status--ok {
  color: var(--md-sys-color-on-surface-variant);
}

.import-row__status--warn {
  color: var(--md-sys-color-on-warning-container);
}

.import-row__status--error {
  color: var(--md-sys-color-error);
  font-weight: 500;
}

.import-report__totals {
  display: flex;
  align-items: center;
  gap: var(--ts-space-2);
  flex-wrap: wrap;
}

.import-report__totals .status-badge {
  height: 28px;
  padding: 0 var(--ts-space-3);
}

/* ---------------------------------------------------------------------------
   §14 Otomatik varyant üretimi — uyarlama paneli.
   Üç yöntem aynı genişlikte yan yana çizilir ki bozulma metinden değil,
   görüntünün kendisinden okunsun.
--------------------------------------------------------------------------- */

.adapt-panel {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-4);
  margin-bottom: var(--ts-space-4);
  padding: var(--ts-space-4);
  border-radius: var(--md-sys-shape-corner-large);
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-low);
}

.adapt-panel[hidden] {
  display: none;
}

.adapt-panel__head h2 {
  margin-top: var(--ts-space-1);
  color: var(--md-sys-color-on-surface);
}

.adapt-panel__head p:last-child {
  margin-top: var(--ts-space-1);
}

.simulator__adapt-jump {
  margin-top: var(--ts-space-3);
}

.adapt-panel__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ts-space-3);
}

@media (max-width: 1023px) {
  .adapt-panel__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.adapt-method {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-2);
  min-width: 0;
  padding: var(--ts-space-3);
  border-radius: var(--md-sys-shape-corner-medium);
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-lowest);
  cursor: pointer;
  transition: border-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
              box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.adapt-method:hover {
  border-color: var(--md-sys-color-primary);
}

.adapt-method:focus-visible {
  outline: var(--ts-focus-ring-width) solid var(--md-sys-color-primary);
  outline-offset: var(--ts-focus-ring-offset);
}

.adapt-method.is-selected {
  border-color: var(--md-sys-color-primary);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
  background: color-mix(in srgb, var(--md-sys-color-primary-container) 34%, var(--md-sys-color-surface-container-lowest));
}

.adapt-method__head {
  display: flex;
  align-items: center;
  gap: var(--ts-space-2);
  min-width: 0;
}

.adapt-method__head h3 {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--md-sys-color-on-surface);
}

.adapt-method__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--md-sys-shape-corner-full);
  border: 2px solid var(--md-sys-color-outline);
  color: var(--md-sys-color-on-surface-variant);
}

.adapt-method.is-selected .adapt-method__mark {
  border-color: var(--md-sys-color-primary);
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

.adapt-method__existing {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 var(--ts-space-2);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-success-container);
  color: var(--md-sys-color-on-success-container);
}

.adapt-method__code {
  padding: 0 var(--ts-space-1);
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--md-sys-typescale-label-medium-size);
}

.adapt-method__cost {
  padding: var(--ts-space-2) var(--ts-space-3);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container);
}

.adapt-method__cost > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ts-space-2);
}

.adapt-method__cost dt {
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-medium-size);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  text-transform: uppercase;
}

.adapt-method__cost dd {
  color: var(--md-sys-color-primary);
}

.adapt-method__summary {
  color: var(--md-sys-color-on-surface-variant);
}

/* Uyarlanmış tuval ekranlar boyunca kesintisizdir; çerçeve ayrımı üstüne çizilir. */
.adapt-wall {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: var(--ts-bezel-screen);
}

.adapt-wall__canvas {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.adapt-wall__media {
  position: absolute;
  max-width: none;
  object-fit: fill;
}

.adapt-wall__grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--adapt-screens), minmax(0, 1fr));
  pointer-events: none;
}

.adapt-wall__cell {
  position: relative;
  border-right: 2px solid var(--ts-bezel-base);
}

.adapt-wall__cell:last-child {
  border-right: 0;
}

.adapt-wall__cell-label {
  position: absolute;
  top: 4px;
  left: 6px;
  padding: 0 5px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--ts-media-scrim);
  color: var(--ts-media-on-scrim);
  font-variant-numeric: tabular-nums;
}

/* §14.1 — kırpma penceresini kullanıcı seçer. Pencere kaynağın üzerinde yatay kayar,
   dışarıda kalan bölge karartılır: hangi sütunların gideceği tahmine bırakılmaz. */
.adapt-crop {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-2);
  padding: var(--ts-space-3);
  border-radius: var(--md-sys-shape-corner-medium);
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-lowest);
}

.adapt-crop__head p:last-child {
  margin-top: var(--ts-space-1);
}

.adapt-crop__readout {
  color: var(--md-sys-color-on-surface-variant);
}

.crop-strip {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: var(--ts-bezel-screen);
  touch-action: none;
  cursor: grab;
}

.crop-strip.is-dragging {
  cursor: grabbing;
}

.crop-strip__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
}

.crop-strip__shade {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(16, 18, 21, .72);
}

.crop-strip__shade--left {
  left: 0;
}

.crop-strip__shade--right {
  right: 0;
}

.crop-strip__window {
  position: absolute;
  top: 0;
  bottom: 0;
  box-shadow: 0 0 0 2px var(--md-sys-color-primary), 0 0 0 4px rgba(255, 255, 255, .55);
  cursor: grab;
}

.crop-strip.is-dragging .crop-strip__window {
  cursor: grabbing;
}

.crop-strip__window:focus-visible {
  outline: var(--ts-focus-ring-width) solid var(--md-sys-color-inverse-primary);
  outline-offset: 0;
}

.crop-strip__grip {
  position: absolute;
  top: 50%;
  width: 6px;
  height: 34%;
  min-height: 18px;
  transform: translateY(-50%);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .55);
}

.crop-strip__grip--start {
  left: -3px;
}

.crop-strip__grip--end {
  right: -3px;
}

.crop-strip__badge {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  white-space: nowrap;
}

.adapt-honesty {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-3);
}

.adapt-honesty__toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ts-space-2) var(--ts-space-4);
}

.adapt-panel__action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ts-space-3);
  padding: var(--ts-space-3);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container);
}

.adapt-panel__action-text {
  flex: 1 1 320px;
  min-width: 0;
}

.adapt-panel__action-text p:last-child {
  margin-top: 2px;
}

.adapt-job {
  display: inline-flex;
  align-items: center;
  gap: var(--ts-space-1);
  height: 32px;
  padding: 0 var(--ts-space-3);
  border-radius: var(--md-sys-shape-corner-full);
}

.adapt-job--info {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.adapt-job--success {
  background: var(--md-sys-color-success-container);
  color: var(--md-sys-color-on-success-container);
}

.adapt-job--error {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

.adapt-report {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-2);
}

.adapt-report__list {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-1);
  padding-left: 0;
  list-style: none;
}

.adapt-report__list li {
  padding: var(--ts-space-2) var(--ts-space-3);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline-variant);
}

.adapt-report__playlist {
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
}

/* ==========================================================================
   §15 Bölgeler — şube kartı bölgelere ayrılır. Kasa arkasındaki duvar ile
   elektronik reyonu görsel olarak karışmaz: her bölge kendi çerçevesinde,
   kendi durum rozetiyle ve kendi komut satırıyla durur.
   ========================================================================== */

.store-card__zones {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-2);
  min-width: 0;
}

/* Tek bölgeli kartta bölge çerçevesi yoktur: başlığı kartın başlığını, rozeti kartın
   rozetini tekrar ederdi. Gövde doğrudan kartın içinde durur (§17.1). */
.store-card__zones[data-mode="zones"] {
  gap: var(--ts-space-3);
}

.zone-block {
  --ts-zone-accent: var(--md-sys-color-outline-variant);
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-2);
  padding: var(--ts-space-2) var(--ts-space-3);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-left: 3px solid var(--ts-zone-accent);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-lowest);
}

.zone-block[data-state="calisiyor"] { --ts-zone-accent: var(--md-sys-color-success); }
.zone-block[data-state="sorunlu"] { --ts-zone-accent: var(--md-sys-color-error); }
.zone-block[data-state="kismen"] { --ts-zone-accent: var(--md-sys-color-warning); }

.zone-block__head {
  display: flex;
  align-items: center;
  gap: var(--ts-space-2);
  min-width: 0;
}

.zone-block__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
}

.zone-block[data-zone-type="mirror"] .zone-block__icon {
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
}

.zone-block[data-zone-type="wall"] .zone-block__icon {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.zone-block__name {
  min-width: 0;
  flex: 1 1 auto;
  color: var(--md-sys-color-on-surface);
}

/* §17.6 — gerekçe satırı yalnız `sorunlu` durumda çizilir; o yüzden rengi de hata
   rengidir, sürekli sararan bir uyarı şeridi değil. */
.zone-block__note {
  display: flex;
  align-items: flex-start;
  gap: var(--ts-space-1);
  padding: var(--ts-space-1) var(--ts-space-2);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

.zone-block__note[hidden] {
  display: none;
}

.zone-block__note .icon {
  flex: none;
  margin-top: 2px;
}

.zone-block__body {
  min-width: 0;
}

.zone-block__alert {
  color: var(--md-sys-color-error);
  font-variant-numeric: tabular-nums;
}

/* Tek ekranlı duvar bölgesi: kutucuk şeridine gerek yok, ne oynadığı yeter. */
.zone-single {
  display: flex;
  align-items: center;
  gap: var(--ts-space-3);
  width: 100%;
  padding: var(--ts-space-2);
  border: 1px solid transparent;
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-low);
  color: inherit;
  text-align: left;
}

.zone-single:hover {
  border-color: var(--md-sys-color-outline-variant);
}

/* §17.3 — çalışan ekran nötr kalır, düşen ekran belirir. Duvar şeridindeki kutucuk aynı
   rengi taşıyor; tek ekranlık bölgede de arıza aynı yerden okunmalı, yoksa kart "Sorunlu"
   derken gövdesi hiçbir şey olmamış gibi durur. */
.zone-single[data-state="offline"] {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

.zone-single[data-state="offline"] .zone-single__sub {
  color: var(--md-sys-color-on-error-container);
}

.zone-single__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.zone-single__name {
  color: var(--md-sys-color-on-surface);
}

.zone-single__sub {
  color: var(--md-sys-color-on-surface-variant);
}

.zone-single__sub.is-alert {
  color: var(--md-sys-color-error);
  font-variant-numeric: tabular-nums;
}

/* §15.6 — aynı görüntü bölgesinde konumlu kutucuk yoktur: kaç ekran bağlı, kaçı
   çevrimiçi ve ne oynuyor. Beş de olabilir yirmi beş de; sayı tek başına okunur
   büyüklükte durur ve panel farkı uyarı saymaz. */
.mirror-zone {
  display: flex;
  align-items: stretch;
  gap: var(--ts-space-3);
  padding: var(--ts-space-3);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-low);
}

.mirror-zone__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 84px;
  padding: 0 var(--ts-space-2);
  border-right: 1px solid var(--md-sys-color-outline-variant);
}

.mirror-zone__count {
  color: var(--md-sys-color-on-surface);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.mirror-zone__unit {
  color: var(--md-sys-color-on-surface-variant);
}

.mirror-zone__body {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-2);
  min-width: 0;
  flex: 1 1 auto;
}

.mirror-zone__bar {
  display: flex;
  height: 8px;
  border-radius: var(--md-sys-shape-corner-full);
  overflow: hidden;
  background: var(--md-sys-color-surface-container-highest);
}

.mirror-zone__seg {
  display: block;
  min-width: 3px;
}

.mirror-zone__seg--online { background: var(--md-sys-color-success); }
.mirror-zone__seg--offline { background: var(--md-sys-color-error); }
.mirror-zone__seg--empty { background: var(--md-sys-color-outline-variant); flex: 1 1 auto; }

.mirror-zone__now {
  color: var(--md-sys-color-on-surface-variant);
}

.mirror-zone__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ts-space-1);
}

.mirror-zone__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ts-space-1);
  height: 26px;
  padding: 0 var(--ts-space-2);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface-variant);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

.mirror-zone__chip[data-state="online"] { border-color: var(--md-sys-color-success); }
.mirror-zone__chip[data-state="offline"] { border-color: var(--md-sys-color-error); }

.mirror-zone__chip[data-state="online"] .wall-screen__dot { background: var(--md-sys-color-success); }
.mirror-zone__chip[data-state="offline"] .wall-screen__dot { background: var(--md-sys-color-error); }

.mirror-zone__chip--more {
  font-family: var(--md-sys-typescale-font);
  color: var(--md-sys-color-primary);
}

/* Bölgedeki cihazların tam listesi — 25 ekranlı bir reyonda kart bloğu özetler,
   işlem burada yapılır. */
.zone-devices {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-1);
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 60vh;
  overflow-y: auto;
}

.zone-devices__row {
  display: grid;
  grid-template-columns: 10px 132px minmax(0, 1fr) 120px 48px auto;
  align-items: center;
  gap: var(--ts-space-2);
  padding: var(--ts-space-2);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-low);
}

.zone-devices__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-outline);
}

.zone-devices__dot--online { background: var(--md-sys-color-success); }
.zone-devices__dot--offline { background: var(--md-sys-color-error); }

.zone-devices__hash {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--md-sys-typescale-label-medium-size);
  color: var(--md-sys-color-on-surface);
}

/* ==========================================================================
   §17.6 Teşhis penceresi — bellek, depolama, sıcaklık, IP ve sürüm kartın
   yüzünden buraya taşındı. Kart durumu gösterir, bu pencere sebebi gösterir:
   burası yoğun olabilir, çünkü açan kişi zaten bir sebep arıyordur.
   ========================================================================== */
.store-diag {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-5);
}

.store-diag__zone {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-2);
  min-width: 0;
}

.store-diag__zone-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ts-space-2);
  min-width: 0;
}

.store-diag__zone-head h3 {
  color: var(--md-sys-color-on-surface);
}

.store-diag__screens {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--ts-space-3);
}

.store-diag__screen {
  --ts-diag-accent: var(--md-sys-color-outline-variant);
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-2);
  min-width: 0;
  padding: var(--ts-space-3);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-left: 3px solid var(--ts-diag-accent);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-lowest);
}

.store-diag__screen[data-state="online"] { --ts-diag-accent: var(--md-sys-color-success); }
.store-diag__screen[data-state="offline"] { --ts-diag-accent: var(--md-sys-color-error); }

.store-diag__screen-head {
  display: flex;
  align-items: center;
  gap: var(--ts-space-2);
  min-width: 0;
}

.store-diag__screen-head h4 {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--md-sys-color-on-surface);
}

.store-diag__screen[data-state="online"] .wall-screen__dot {
  background: var(--md-sys-color-success);
}

.store-diag__screen[data-state="offline"] .wall-screen__dot {
  background: var(--md-sys-color-error);
}

.store-diag__rows {
  display: flex;
  flex-direction: column;
}

/* Etiket solda, ölçüm sağda: göz tek sütun aşağı iner ve iki ekranı yan yana
   karşılaştırmak satır satır okumayı gerektirmez. */
.store-diag__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ts-space-3);
  min-width: 0;
  padding: 3px var(--ts-space-1);
  border-radius: var(--md-sys-shape-corner-extra-small);
}

.store-diag__row + .store-diag__row {
  border-top: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 50%, transparent);
}

.store-diag__label {
  flex: none;
  color: var(--md-sys-color-on-surface-variant);
}

.store-diag__value {
  min-width: 0;
  text-align: right;
  color: var(--md-sys-color-on-surface);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* §17.3 — eşiği aşan ölçüm burada da uyarı rengindedir. Kartta beliren satırla
   pencerede okunan satır aynı rengi taşımazsa, kullanıcı ikisini aynı olguya
   bağlayamaz. */
.store-diag__row.is-alert {
  background: var(--md-sys-color-error-container);
}

.store-diag__row.is-alert .store-diag__label,
.store-diag__row.is-alert .store-diag__value {
  color: var(--md-sys-color-on-error-container);
  font-weight: 500;
}

.store-diag__hint {
  display: flex;
  align-items: center;
  gap: var(--ts-space-1);
  color: var(--md-sys-color-on-surface-variant);
}

.store-diag__hint .icon {
  flex: none;
  color: var(--md-sys-color-warning);
}

/* Eşleştirme penceresindeki bölge seçimi (§15.4). */
.zone-picker {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-2);
  padding: var(--ts-space-3);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-low);
}

.zone-picker__title {
  color: var(--md-sys-color-on-surface);
}

.zone-picker__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--ts-space-2);
}

.zone-picker__option {
  display: flex;
  align-items: center;
  gap: var(--ts-space-2);
  padding: var(--ts-space-2) var(--ts-space-3);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
  text-align: left;
}

.zone-picker__option.is-selected {
  border-color: var(--md-sys-color-primary);
  border-width: 2px;
  padding: calc(var(--ts-space-2) - 1px) calc(var(--ts-space-3) - 1px);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.zone-picker__icon {
  flex: none;
  color: var(--md-sys-color-on-surface-variant);
}

.zone-picker__option.is-selected .zone-picker__icon {
  color: var(--md-sys-color-on-primary-container);
}

.zone-picker__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.zone-picker__option.is-selected .zone-picker__text .text-muted {
  color: var(--md-sys-color-on-primary-container);
}

.zone-picker__mark {
  flex: none;
  color: var(--md-sys-color-primary);
  opacity: 0;
}

.zone-picker__option.is-selected .zone-picker__mark {
  opacity: 1;
  color: var(--md-sys-color-on-primary-container);
}

.zone-picker__hint {
  color: var(--md-sys-color-on-surface-variant);
}

/* Bölge ekleme ve düzenleme penceresi. */
.zone-editor__suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ts-space-1);
}

.zone-editor__types {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-2);
}

/* §15.5 toplu eşleştirme — onaydan önce hangi cihazların ekleneceği listelenir. */
.zone-assign__list {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-1);
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 46vh;
  overflow-y: auto;
}

.zone-assign__item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 132px auto;
  align-items: center;
  gap: var(--ts-space-2);
  padding: var(--ts-space-2);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-low);
}

.zone-assign__item.is-failed {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

.zone-assign__item-icon {
  display: flex;
  color: var(--md-sys-color-on-surface-variant);
}

.zone-assign__item.is-failed .zone-assign__item-icon {
  color: var(--md-sys-color-error);
}

.zone-assign__item-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zone-assign__item-hash {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--md-sys-typescale-label-medium-size);
  color: var(--md-sys-color-on-surface-variant);
}

/* Şube düzenleme penceresindeki salt okunur bölge özeti. */
.store-editor__zones {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-2);
  padding: var(--ts-space-3);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-low);
}

.store-editor__zone-list {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.store-editor__zone {
  display: flex;
  align-items: center;
  gap: var(--ts-space-2);
  flex-wrap: wrap;
}

.store-editor__zone-name {
  color: var(--md-sys-color-on-surface);
  font-weight: var(--md-sys-typescale-label-large-weight);
}

/* §15.6 — yayın hedefi bölge grubudur: tüm kasa arkaları, tüm elektronik reyonlar. */
.publish__groups {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-2);
  max-height: 320px;
  overflow-y: auto;
}

.publish__group {
  display: flex;
  align-items: center;
  gap: var(--ts-space-3);
  padding: var(--ts-space-3);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
  text-align: left;
}

.publish__group:hover {
  background: var(--md-sys-color-surface-container-low);
}

.publish__group.is-selected {
  border-color: var(--md-sys-color-primary);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.publish__group-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.publish__group.is-selected .text-muted {
  color: var(--md-sys-color-on-primary-container);
}

.publish__group-count {
  flex: none;
  font-variant-numeric: tabular-nums;
}

.publish__types {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ts-space-2);
}

.publish__store-type {
  flex: none;
  color: var(--md-sys-color-on-surface-variant);
}

.publish__store.is-selected .publish__store-type {
  color: var(--md-sys-color-on-primary-container);
}

/* ─── §16.3 Kart üzerindeki son komut satırı ──────────────────────────────────────────
   Şube ve bölge kartı, en son ne yapıldığını ve sonucunun ne olduğunu tek satırda taşır.
   Yanıt vermeyen ekran varsa satır uyarı rengine geçer: kart açıldığında ilk görülen şey
   sessizce yanlış çalışan ekran olmalıdır. */
.zone-block__command,
.store-card__command {
  display: flex;
  align-items: center;
  gap: var(--ts-space-1);
  min-width: 0;
  padding: var(--ts-space-1) var(--ts-space-2);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface-variant);
  font-variant-numeric: tabular-nums;
}

.zone-block__command[hidden],
.store-card__command[hidden] {
  display: none;
}

.zone-block__command .icon,
.store-card__command .icon {
  flex: none;
}

.zone-block__command[data-tone="done"],
.store-card__command[data-tone="done"] {
  background: var(--md-sys-color-success-container);
  color: var(--md-sys-color-on-success-container);
}

.zone-block__command[data-tone="problem"],
.store-card__command[data-tone="problem"] {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

/* ─── §16.2 Komut geçmişi ─────────────────────────────────────────────────────────── */
.command-history .toolbar--inset {
  margin-bottom: 0;
  padding: var(--ts-space-2) var(--ts-space-3);
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-medium);
}

.command-history__table {
  min-width: 720px;
}

.command-history__row {
  cursor: pointer;
}

.command-history__row td:first-child {
  display: flex;
  flex-direction: column;
}

.command-history__row:hover {
  background: color-mix(in srgb, var(--md-sys-color-primary) 6%, transparent);
}

.command-history__row[data-tone="problem"] {
  background: color-mix(in srgb, var(--md-sys-color-error) 7%, transparent);
}

.command-history__name {
  display: inline-flex;
  align-items: center;
  gap: var(--ts-space-1);
}

.command-outcome {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--ts-space-2);
  border-radius: var(--md-sys-shape-corner-full);
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.command-outcome--done {
  background: var(--md-sys-color-success-container);
  color: var(--md-sys-color-on-success-container);
}

.command-outcome--live {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.command-outcome--problem {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

.command-history__detail > td {
  background: var(--md-sys-color-surface-container-low);
}

.command-history__detail[hidden] {
  display: none;
}

.command-history__targets {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-1);
  list-style: none;
  margin: 0;
  padding: var(--ts-space-2) 0;
}

.command-history__target {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 110px minmax(0, 1fr);
  align-items: center;
  gap: var(--ts-space-2);
  padding: var(--ts-space-1) var(--ts-space-2);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-lowest);
}

.command-history__target[data-status="applied"] { color: var(--md-sys-color-on-surface); }
.command-history__target[data-status="received"] { color: var(--md-sys-color-on-surface-variant); }

.command-history__target[data-status="timed_out"] {
  background: var(--md-sys-color-warning-container);
  color: var(--md-sys-color-on-warning-container);
}

.command-history__target[data-status="failed"] {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

/* §15.5 — toplu atamada cihazlar tek tek işaretlenebilir; varsayılan hepsi seçilidir. */
.zone-assign__item--pick {
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.zone-assign__item--pick:hover {
  background: var(--md-sys-color-surface-container);
}

.zone-assign__item--pick.is-selected {
  border-color: var(--md-sys-color-primary);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.zone-assign__item--pick:not(.is-selected) {
  opacity: .62;
}

.zone-assign__item-mark {
  display: flex;
  color: var(--md-sys-color-on-surface-variant);
}

.zone-assign__item--pick.is-selected .zone-assign__item-mark {
  color: var(--md-sys-color-primary);
}

/* ── §18 Teşhir modu ───────────────────────────────────────────────────────────────── */

/* §18.4 — teşhir süresi yalnız varsayılandan saptığında yazılır (§17.3), o yüzden burada
   uyarı değil bilgi tonu kullanılır: sapma bir arıza değil, kurulum tercihidir. */
.zone-block__showroom {
  display: flex;
  align-items: center;
  gap: var(--ts-space-1);
  color: var(--md-sys-color-on-surface-variant);
}

.zone-block__showroom[hidden] {
  display: none;
}

.zone-block__showroom .icon {
  flex: none;
}

/* §18.3 — izin verilmemiş televizyon. Ekran çevrimiçi ve sağlıklı olabilir; bu satır
   rozetin söylediğinden başka bir şey söyler ve kurulum bitmeden çözülmesi gerekir. */
.zone-block__blocked {
  display: flex;
  align-items: flex-start;
  gap: var(--ts-space-1);
  padding: var(--ts-space-1) var(--ts-space-2);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-warning-container);
  color: var(--md-sys-color-on-warning-container);
}

.zone-block__blocked[hidden] {
  display: none;
}

.zone-block__blocked .icon {
  flex: none;
  margin-top: 2px;
}

.wall-screen[data-showroom="blocked"],
.mirror-zone__chip[data-showroom="blocked"] {
  border-color: var(--md-sys-color-warning);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-warning);
}

.wall-screen__flag,
.mirror-zone__chip-flag {
  flex: none;
  color: var(--md-sys-color-warning);
}

/* Bölge düzenleme penceresindeki teşhir süresi seçimi (§18.1). */
.zone-editor__showroom {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-2);
  padding: var(--ts-space-3);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-low);
}

.showroom-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ts-space-2);
}

/* ── Bekleyen cihaz öbekleri ───────────────────────────────────────────────────────── */

/* Kurulum ekibi tek şubede çalışırken yirmi beş kutu aynı ağdan kaydolur; iki şube aynı
   gün kuruluyorsa listede iki küme bulunur. Başlık o kümeyi tek dokunuşla seçer. */
.zone-assign__groups {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-3);
}

.zone-assign__group {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-2);
  padding: var(--ts-space-2);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
}

.zone-assign__group[data-selection="all"] {
  border-color: var(--md-sys-color-primary);
}

.zone-assign__group-head {
  display: flex;
  align-items: center;
  gap: var(--ts-space-2);
  padding: var(--ts-space-2);
  text-align: start;
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  cursor: pointer;
}

.zone-assign__group[data-selection="all"] .zone-assign__group-head {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.zone-assign__group-mark {
  display: flex;
  flex: none;
}

.zone-assign__group-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.zone-assign__group[data-selection="all"] .zone-assign__group-text .text-muted {
  color: inherit;
  opacity: .82;
}

.zone-assign__group-count {
  flex: none;
  font-variant-numeric: tabular-nums;
}

.zone-assign__item {
  grid-template-columns: 24px minmax(0, 1fr) 132px auto auto;
}

.zone-assign__item-time {
  white-space: nowrap;
}

.pairing__pending-group {
  margin-top: var(--ts-space-2);
  padding: 0 var(--ts-space-1);
  color: var(--md-sys-color-on-surface-variant);
}

/* Şube eklendikten sonraki adım aynı pencerede önerilir: ekip şubede, kutular elinde. */
.store-created__next {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--ts-space-2);
  width: 100%;
  margin-top: var(--ts-space-3);
  text-align: start;
}

.store-created__next .choice-cards {
  max-width: none;
  margin-top: 0;
}

/* ── §17.6 Oynatamayan ekran ───────────────────────────────────────────────────────────

   17 Ağustos 2026: kutu ayakta, heartbeat kusursuz, ekranda "Yayın hazırlanamadı" yazıyor
   ve panel yeşil gösteriyordu. Bir ekran çevrimiçi olduğu hâlde yayın göstermiyorsa
   kutucuğu asla "çevrimiçi" rengini taşımaz — panelin rengi, mağazadaki ekranla aynı şeyi
   söylemek zorundadır.

   Çevrimdışı kutucuktan ayrı okunur: aynı hata zemini üzerinde tam çerçeve ve `monitor-off`
   simgesi. Çevrimdışı ekran genellikle fişten çekilmiştir; bu ekran çalışıyor ama boş. */

.wall-screen[data-fault="playback"],
.mirror-zone__chip[data-fault="playback"],
.hw-wall__box[data-fault="playback"],
.zone-single[data-fault="playback"] {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
  border-color: var(--md-sys-color-error);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-error);
}

.wall-screen[data-fault="playback"] .wall-screen__dot,
.mirror-zone__chip[data-fault="playback"] .wall-screen__dot,
.hw-wall__box[data-fault="playback"] .wall-screen__dot {
  background: var(--md-sys-color-error);
}

.wall-screen[data-fault="playback"] .wall-screen__flag,
.mirror-zone__chip[data-fault="playback"] .mirror-zone__chip-flag {
  color: var(--md-sys-color-error);
}

/* Sebep, dosya adının durduğu yerde durur: ekranda o dosya olmadığı için yerine geçer,
   yanına eklenmez (§17.1 — bir durum kartta bir kez söylenir). */
.wall-screen__fault {
  display: block;
  min-width: 0;
  color: var(--md-sys-color-on-error-container);
  font-size: var(--md-sys-typescale-label-small-size);
  line-height: 1.25;
}

/* Beş ve altı ekranlık şeritte dosya adı zaten gizleniyor; arıza sebebi gizlenmez —
   kutucuğun tek işi o an neyin ters gittiğini söylemek. */
.wall-strip[data-count="5"] .wall-screen__fault,
.wall-strip[data-count="6"] .wall-screen__fault {
  display: block;
  font-size: 10px;
}

.zone-single__name--fault {
  color: var(--md-sys-color-error);
}

/* Kontrolcü duvarında kutu oynatamıyorsa ondan beslenen bütün panolar karanlıktır. */
.hw-wall__pane[data-fault="playback"] {
  background: var(--md-sys-color-error-container);
  border-color: var(--md-sys-color-error);
}

/* Teşhis penceresinde arızalı ekranın başlığı. */
.store-diag__screen[data-fault="playback"] {
  border-color: var(--md-sys-color-error);
}

.store-diag__screen[data-fault="playback"] .wall-screen__dot {
  background: var(--md-sys-color-error);
}

/* Üst çubuktaki "N ekran oynatamıyor" rozeti. Bölge eksiği uyarı tonundadır (bekleyen bir
   iş), bu hata tonundadır (şu anda müşterinin gördüğü boş ekran). */
.network-pulse__wall--fault {
  color: var(--md-sys-color-error);
}

.network-pulse__wall--fault .icon {
  color: var(--md-sys-color-error);
}

/* ── Ekran önizlemesi ──────────────────────────────────────────────────────────────────

   Kutucuğun zeminine o ekranın kendi dilimi konur; kart mağazadaki duvarın minyatürü olur.
   Katman mutlak konumludur: kutucuk bir piksel bile büyümez (§17.7-5), metin ve durum
   noktası okunur zeminleriyle üstünde durur.

   Panel yalnız aydınlık temada çalışır (§9), bu yüzden okunurluk perdesi beyaz üzerinden
   sabittir; jeton üzerinden türetilmiş yarı saydam bir renk keyfî bir karenin üstünde
   öngörülebilir kontrast vermez. */

.screen-poster {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  background: var(--ts-media-surface);
  pointer-events: none;
}

/* Kare gelene kadar — ya da hiç gelmeyecekse — katman görünmez kalır: yarım yüklenmiş gri
   bir dikdörtgen "burada bir şey var" der ama ne olduğunu söylemez. */
.screen-poster[data-state="loading"],
.screen-poster[data-state="failed"] {
  opacity: 0;
}

.screen-poster[data-state="ready"] {
  opacity: 1;
  transition: opacity var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard);
}

/* Dilim: öğe kaynağın tamamı kadar geniştir ve kutucuğun gösterdiği parçaya kaydırılır.
   Genişlik ve kaydırma `preview.js` içinde §11.14.2 formülünden hesaplanır. */
.screen-poster__frame {
  display: block;
  height: 100%;
  object-fit: cover;
  transform-origin: left center;
  /* base.css'teki `img { max-width: 100% }` sıfırlaması dilim genişliğini kutucuğa kırpıyordu:
     `width:300%` yazılıyor, öğe %100'de kalıyor ve üç kutucuğun üçü de duvarın tamamını
     gösteriyordu. Önizlemenin tek işi parçanın doğru olup olmadığını göstermek olduğu için
     bu sıfırlama burada geçersiz kılınır. */
  max-width: none;
}

/* Kare varken kutucuğun içeriği perdeli zeminde okunur; durum rengi ince bir halka olarak
   kalır, çünkü rengin kendisi de bir bilgidir (§17.6). */
.wall-screen[data-poster="on"],
.hw-wall__pane[data-poster="on"],
.mirror-zone__figure[data-poster="on"] {
  position: relative;
  overflow: hidden;
}

.wall-screen[data-poster="on"] {
  box-shadow: inset 0 0 0 2px var(--md-sys-color-success);
}

.wall-screen[data-poster="on"] > .wall-screen__head,
.wall-screen[data-poster="on"] > .wall-screen__now,
.wall-screen[data-poster="on"] > .wall-screen__alert {
  position: relative;
  z-index: 1;
}

.wall-screen[data-poster="on"] > .wall-screen__head {
  padding: 1px 4px;
  margin: -1px -4px;
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: rgba(255, 255, 255, .82);
}

.wall-screen[data-poster="on"] > .wall-screen__now {
  align-self: flex-start;
  max-width: 100%;
  padding: 1px 4px;
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: rgba(255, 255, 255, .82);
  color: var(--md-sys-color-on-surface);
}

.mirror-zone__figure[data-poster="on"] .mirror-zone__count,
.mirror-zone__figure[data-poster="on"] .mirror-zone__unit {
  position: relative;
  z-index: 1;
  padding: 0 var(--ts-space-1);
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: rgba(255, 255, 255, .82);
}

/* Tek ekranlık bölgenin önizleme kutusu zaten kareye ayrılmış bir alan; perde gerekmez. */
.store-card__preview .screen-poster {
  background: transparent;
}

/* ── §12 / SONRAKI-TUR §3b Kurulumun dürüst sınırı ─────────────────────────────────────

   "Sürümü Güncelle" düğmesi indirmeyi başlatır; kurulumu Android'in kendisi yapar ve
   televizyonun ekranında onay ister. Bu kutu düğmenin yanında durur, dipnotta değil:
   sahada kaybedilen gün, düğmenin vaat ettiği ile yaptığı arasındaki farktı. */

.rollout__limit {
  display: flex;
  gap: var(--ts-space-3);
  padding: var(--ts-space-3);
  border-radius: var(--md-sys-shape-corner-medium);
  border: 1px solid var(--md-sys-color-warning);
  background: var(--md-sys-color-warning-container);
  color: var(--md-sys-color-on-warning-container);
}

.rollout__limit-mark {
  flex: none;
  color: var(--md-sys-color-warning);
}

.rollout__limit-text {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-1);
  min-width: 0;
}

/* Kurulumu tamamlayamamış cihaz, eski sürümde kalmış cihazdan farklı bir iştir: orada iş
   hiç başlamamıştır, burada son adımda takılmıştır ve televizyonun başına gitmek gerekir. */
.device-table__flag[data-tone="error"] {
  color: var(--md-sys-color-error);
}

.device-table__flag[data-tone="error"] .icon {
  color: var(--md-sys-color-error);
}

.device-table__actions {
  width: 1%;
  white-space: nowrap;
  text-align: end;
}

/* ── Şube kurulum kontrol listesi ──────────────────────────────────────────────────────

   Teknisyenin şubeden ayrılmadan okuduğu liste. Şube başına bir blok; açık maddesi olan
   blok maddeleriyle, kapanmış blok tek satırla durur. Bu ekranın tamamı §17.1'in
   uygulamasıdır: kapanmış bir madde yazılmaz, açık bir madde bir kez yazılır. */

.checklist {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-3);
}

.checklist__store {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-3);
  padding: var(--ts-space-4);
}

/* Kapanmış şube görsel olarak da geri çekilir: listede kalır ama göz onu atlayabilir. */
.checklist__store[data-open="no"] {
  padding: var(--ts-space-3) var(--ts-space-4);
  background: var(--md-sys-color-surface-container-low);
}

.checklist__store-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ts-space-3);
}

.checklist__store-identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.checklist__store-identity .md-body-small {
  display: flex;
  align-items: center;
  gap: var(--ts-space-2);
  flex-wrap: wrap;
}

.checklist__items {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--ts-space-2);
  padding: var(--ts-space-2) var(--ts-space-3);
  border-radius: var(--md-sys-shape-corner-small);
  border-inline-start: 3px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-low);
}

/* Aciliyet renkle de okunur: kırmızı madde müşterinin şu anda gördüğü bir eksikliktir,
   sarı madde şubeden çıkmadan yapılacak iştir, mavi bekleyen bir kutudur. */
.checklist__item[data-tone="error"] {
  border-inline-start-color: var(--md-sys-color-error);
}

.checklist__item[data-tone="warning"] {
  border-inline-start-color: var(--md-sys-color-warning);
}

.checklist__item[data-tone="info"] {
  border-inline-start-color: var(--md-sys-color-primary);
}

.checklist__item-mark {
  flex: none;
  display: flex;
  padding-top: 2px;
}

.checklist__item[data-tone="error"] .checklist__item-mark {
  color: var(--md-sys-color-error);
}

.checklist__item[data-tone="warning"] .checklist__item-mark {
  color: var(--md-sys-color-warning);
}

.checklist__item[data-tone="info"] .checklist__item-mark {
  color: var(--md-sys-color-primary);
}

.checklist__item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.checklist__item-text > p {
  display: flex;
  align-items: baseline;
  gap: var(--ts-space-2);
  flex-wrap: wrap;
  min-width: 0;
}

.checklist__item-title {
  font-weight: var(--md-sys-typescale-label-large-weight);
}

.checklist__item-zone::before {
  content: "·";
  margin-inline-end: var(--ts-space-2);
}

.checklist__store-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ts-space-2);
  padding-top: var(--ts-space-2);
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

/* Kurulum günü yirmi beş kutu aynı ağdan kaydolur ve hiçbiri henüz bir şubeye ait değildir;
   bu yüzden şube bloklarının dışında, listenin başında dururlar. */
.checklist__pending {
  display: flex;
  flex-direction: column;
}

.checklist__pending-groups {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-2);
}

.checklist__pending-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ts-space-3);
  padding: var(--ts-space-2) var(--ts-space-3);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
}

.checklist__pending-group-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ── §19 Yayın anında üretim ─────────────────────────────────────────────────────────── */

.publish-progress {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-3);
}

.publish-progress__bar {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-2);
}

.publish-progress__list {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.publish-progress__line {
  display: flex;
  align-items: center;
  gap: var(--ts-space-2);
  color: var(--md-sys-color-on-surface-variant);
}

.publish-progress__line[data-ready="yes"] {
  color: var(--md-sys-color-on-surface);
}

.publish-progress__line[data-ready="yes"] .icon {
  color: var(--md-sys-color-success);
}

/* §19.2-4 — hangi bölgeye hangi yöntemle üretilmiş sürüm gitti. */
.publish-report__deliveries {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-2);
}

.publish-report__delivery {
  padding: var(--ts-space-2) var(--ts-space-3);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface-container-low);
}

.publish-report__items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: var(--ts-space-1) 0 0;
  padding: 0;
  list-style: none;
}

.publish-report__items li {
  display: flex;
  align-items: center;
  gap: var(--ts-space-2);
  min-width: 0;
}

.publish-report__items li[data-origin="fallback"] .icon {
  color: var(--md-sys-color-warning);
}

.publish-report__items li[data-origin="derived"] .icon {
  color: var(--md-sys-color-primary);
}