/* ServisAjan — atölye planlama panosu.
   A day is a column and duration is distance; the state is stamped into the
   strip rather than printed on a badge beside it. */

:root {
  /* Enamelled steel, the ground the whole surface is painted on. */
  --emaye: #16302b;
  --emaye-koyu: #0e2320;
  --emaye-acik: #1e3d37;
  --tebesir: rgba(233, 227, 210, 0.14);
  --tebesir-parlak: rgba(233, 227, 210, 0.3);

  /* Bone paper: the job card and the conversation are paper on that steel. */
  --kemik: #ebe5d4;
  --kemik-golge: #dcd4be;
  --murekkep: #22201b;
  --murekkep-ikincil: #5c574c;

  /* Text and rules that sit directly on the enamel. */
  --celik-parlak: #d5dcd4;
  --celik: #b3bcb4;

  /* Painted strip colours. One role each, no decoration. */
  --kehribar: #f2a413; /* ULASILAMADI — the strip that needs a human */
  --lake: #a83324;     /* IPTAL — struck off the board */
  --tasindi: #47a0be;  /* YENIDEN_PLANLANDI — the strip that moved */
  --onay: #78a866;     /* ONAYLANDI / TAMAMLANDI */
  --tasindi-yazi: #a5dcef; /* the same roles as text on enamel, lightened */
  --lake-yazi: #ef9d8b;

  /* Secondary text sitting ON a painted strip. Each is that fill's own ink,
     dark enough to clear 4.5:1 against it. */
  --kehribar-ikincil: #4a3206;
  --tasindi-ikincil: #0b2b36;
  --onay-ikincil: #1f3418;
  --lake-ikincil: #f0d9d3;

  --serit-yuksek: 0 2px 0 rgba(0, 0, 0, 0.28), 0 6px 14px -6px rgba(0, 0, 0, 0.55);
  --kagit-golge: 0 1px 0 rgba(255, 255, 255, 0.16), 0 10px 26px -14px rgba(0, 0, 0, 0.7);

  --hiz: cubic-bezier(0.16, 0.84, 0.44, 1);

  color-scheme: dark;
}

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

html,
body {
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  padding: 8px;
  font-family: Archivo, "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--celik-parlak);
  background-color: var(--emaye);
  /* Painted steel: a wide sheen across the panel plus a fine roller texture. */
  background-image:
    radial-gradient(120% 80% at 22% -10%, rgba(255, 255, 255, 0.07), transparent 62%),
    repeating-linear-gradient(
      92deg,
      rgba(0, 0, 0, 0.05) 0 2px,
      rgba(255, 255, 255, 0.012) 2px 4px
    );
}

/* --- browser surfaces, themed rather than inherited ---------------------- */

::selection {
  background: var(--kehribar);
  color: var(--murekkep);
}

:focus-visible {
  outline: 2px solid var(--kehribar);
  outline-offset: 2px;
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(233, 227, 210, 0.28) transparent;
}

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-thumb {
  background: rgba(233, 227, 210, 0.26);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(233, 227, 210, 0.42);
}

::-webkit-scrollbar-track {
  background: transparent;
}

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

.atla {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 9;
  padding: 8px 14px;
  background: var(--kehribar);
  color: var(--murekkep);
  font-weight: 700;
  text-decoration: none;
  transition: top 140ms var(--hiz);
}

.atla:focus-visible {
  top: 12px;
}

/* --- künye plate --------------------------------------------------------- */

.kunye {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 6px 16px 7px;
  background: linear-gradient(var(--emaye-acik), var(--emaye-koyu));
  border: 1px solid rgba(0, 0, 0, 0.45);
  border-top-color: rgba(255, 255, 255, 0.09);
  box-shadow: var(--kagit-golge);
}

.kunye h1 {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  font-stretch: 84%;
  letter-spacing: 0.005em;
  color: var(--kemik);
}

.kunye-alt {
  margin: 0;
  font-size: 12px;
  font-stretch: 90%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--celik);
}

.kunye-saat {
  margin: 0 0 0 auto;
  font-family: "Chivo Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--celik);
}

.kunye-saat[data-acik] {
  color: var(--kehribar);
}

/* --- the bench ----------------------------------------------------------- */

.tezgah {
  display: grid;
  grid-template-columns: minmax(292px, 23%) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "konusma kayit"
    "konusma pano";
  gap: 8px;
  min-height: 0;
}

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

.panel h2 {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  font-stretch: 88%;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* --- conversation: paper on steel ---------------------------------------- */

.panel-konusma {
  grid-area: konusma;
  background: var(--kemik);
  background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.03));
  color: var(--murekkep);
  box-shadow: var(--kagit-golge);
  padding: 13px 15px 14px;
}

.panel-konusma h2 {
  color: var(--murekkep-ikincil);
  padding-bottom: 9px;
  border-bottom: 1px solid var(--kemik-golge);
}

.mesajlar {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 14px 2px 4px 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.mesaj p {
  margin: 0;
  max-width: 62ch;
  font-size: 14px;
}

.mesaj-ajan p {
  padding-left: 11px;
  border-left: 1px solid var(--murekkep);
}

.mesaj-kullanici {
  padding-top: 12px;
  border-top: 1px dashed var(--kemik-golge);
}

.mesaj-kullanici p {
  font-weight: 600;
  color: var(--murekkep);
}

.uyari {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--lake);
}

.yazma {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--kemik-golge);
}

.yazma input {
  flex: 1;
  min-width: 0;
  padding: 9px 11px;
  font: inherit;
  font-size: 14px;
  color: var(--murekkep);
  caret-color: var(--lake);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--kemik-golge);
  border-radius: 0;
}

.yazma input::placeholder {
  color: var(--murekkep-ikincil);
}

.yazma input:focus-visible {
  outline: 2px solid var(--lake);
  outline-offset: 1px;
}

.yazma button {
  display: grid;
  place-items: center;
  width: 42px;
  padding: 0;
  color: var(--kemik);
  background: var(--murekkep);
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background 140ms var(--hiz);
}

.yazma button:hover:not(:disabled) {
  background: var(--lake);
}

.yazma button:disabled {
  opacity: 0.45;
  cursor: progress;
}

#mikrofon {
  display: grid;
  place-items: center;
  width: 42px;
  padding: 0;
  color: var(--murekkep);
  background: transparent;
  border: 1px solid var(--murekkep);
  border-radius: 0;
  cursor: pointer;
  transition: background 140ms var(--hiz), color 140ms var(--hiz);
}

#mikrofon:hover:not(:disabled) {
  background: var(--kemik-golge);
}

/* Listening is a state of the room, not a label on a button: the control
   fills in and the line under the box says what is happening. */
#mikrofon[aria-pressed="true"] {
  color: var(--kemik);
  background: var(--lake);
  border-color: var(--lake);
}

#mikrofon:disabled {
  opacity: 0.45;
  cursor: progress;
}

.ses-durumu {
  margin: 7px 0 0;
  min-height: 1.2em;
  font-size: 12px;
  font-weight: 600;
  color: var(--murekkep-ikincil);
}

.ses-durumu:empty {
  margin: 0;
  min-height: 0;
}

/* The strip's own play control: a call that was written can be heard. */
.serit-ses {
  position: absolute;
  right: 5px;
  bottom: 4px;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 0;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 140ms var(--hiz);
}

/* A class that sets display beats the browser's own [hidden] rule, so the
   button has to hide itself: without this every strip offers to play a call
   that was never made. */
.serit-ses[hidden] {
  display: none;
}

.serit-ses:hover:not(:disabled),
.serit-ses:focus-visible {
  opacity: 1;
}

.serit-ses[aria-busy="true"] {
  opacity: 0.35;
  cursor: progress;
}

.serit-ses svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
  stroke: none;
}

/* The play control sits in the strip's bottom-right, so the text stops short
   of it rather than running underneath. */
.serit:has(.serit-ses:not([hidden])) .serit-sonuc {
  padding-right: 24px;
}

.yazma svg,
#mikrofon svg,
#tekrar svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

/* --- job card ------------------------------------------------------------ */

.panel-kayit {
  grid-area: kayit;
  padding: 8px 15px 9px;
  background: var(--kemik);
  background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.03));
  color: var(--murekkep);
  box-shadow: var(--kagit-golge);
}

.panel-kayit h2 {
  color: var(--murekkep-ikincil);
}

.kart {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)) minmax(0, 1.45fr);
  gap: 1px;
  margin: 9px 0 0;
  background: var(--kemik-golge);
  border: 1px solid var(--kemik-golge);
}

.alan {
  padding: 6px 9px 7px;
  background: rgba(255, 255, 255, 0.42);
  /* Empty until the agent fills it: the field is ruled but not yet written. */
  transition: background 260ms var(--hiz);
}

.alan dt {
  font-size: 10px;
  font-weight: 700;
  font-stretch: 88%;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--murekkep-ikincil);
}

/* One line per field. A phone number broken across two lines reads as two
   numbers, and a two-line card costs the board the row it needs. */
.alan dd {
  margin: 2px 0 0;
  min-height: 1.3em;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--murekkep);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alan:not(.dolu) dd::after {
  content: "";
  display: block;
  width: 44%;
  height: 1px;
  margin-top: 0.62em;
  background: var(--murekkep-ikincil);
  opacity: 0.4;
}

.alan.dolu {
  background: rgba(255, 255, 255, 0.85);
}

.alan-plaka dd,
[data-alan="telefon"] dd {
  font-family: "Chivo Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.alan-durum dd {
  font-size: 12px;
  font-weight: 800;
  font-stretch: 84%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.alan-durum[data-durum="ULASILAMADI"],
.alan-durum[data-durum="YENIDEN_PLANLANDI"],
.alan-durum[data-durum="ONAYLANDI"],
.alan-durum[data-durum="TAMAMLANDI"],
.alan-durum[data-durum="TAKIP_EDILDI"] {
  /* On a painted cell the label takes the ink of the paper it sits on;
     the secondary grey drops to 2.4:1 there. */
}

.alan-durum[data-durum="ULASILAMADI"] dt,
.alan-durum[data-durum="YENIDEN_PLANLANDI"] dt,
.alan-durum[data-durum="ONAYLANDI"] dt,
.alan-durum[data-durum="TAMAMLANDI"] dt,
.alan-durum[data-durum="TAKIP_EDILDI"] dt {
  color: var(--murekkep);
}

.alan-durum[data-durum="ULASILAMADI"] { background: var(--kehribar); }
.alan-durum[data-durum="IPTAL"] { background: var(--lake); }
.alan-durum[data-durum="IPTAL"] dt,
.alan-durum[data-durum="IPTAL"] dd { color: var(--kemik); }
.alan-durum[data-durum="YENIDEN_PLANLANDI"] { background: var(--tasindi); }
.alan-durum[data-durum="ONAYLANDI"],
.alan-durum[data-durum="TAMAMLANDI"],
.alan-durum[data-durum="TAKIP_EDILDI"] { background: var(--onay); }

/* --- the board ----------------------------------------------------------- */

.panel-pano {
  grid-area: pano;
  padding: 8px 14px 8px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.16)),
    var(--emaye-acik);
  border: 1px solid rgba(0, 0, 0, 0.45);
  border-top-color: rgba(255, 255, 255, 0.1);
  box-shadow: var(--kagit-golge);
}

.pano-basi {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--tebesir);
}

.panel-pano h2 {
  color: var(--celik);
}

.pano-not {
  margin: 0;
  font-family: "Chivo Mono", ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--celik);
}

#tekrar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 6px 12px 6px 9px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  font-stretch: 88%;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--murekkep);
  background: var(--kehribar);
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: filter 140ms var(--hiz);
}

#tekrar:hover:not(:disabled) {
  filter: brightness(1.12);
}

#tekrar:disabled {
  color: var(--celik);
  background: rgba(233, 227, 210, 0.1);
  cursor: not-allowed;
}

.pano-alan {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

/* The day axis. Every row below inherits these columns, so a step's column is
   its day — no timestamp has to be read to place it. */
.gunler,
.odak {
  display: grid;
  grid-template-columns: repeat(var(--gunler, 7), minmax(0, 1fr));
}

.gunler {
  border-bottom: 1px solid var(--tebesir-parlak);
}

.gun {
  padding: 7px 8px 6px;
  border-left: 1px solid var(--tebesir);
  transition: background 300ms var(--hiz);
}

.gun:first-child {
  border-left: 0;
}

.gun-sayi {
  font-family: "Chivo Mono", ui-monospace, monospace;
  font-size: 19px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--kemik);
}

.gun-ay,
.gun-ad {
  font-size: 11px;
  font-stretch: 88%;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--celik);
}

.gun-ay {
  margin-left: 5px;
}

.gun-ad {
  display: block;
  margin-top: 1px;
}

.gun.aktif {
  background: rgba(242, 164, 19, 0.16);
  box-shadow: inset 0 -2px 0 var(--kehribar);
}

.odak {
  min-height: 0;
  overflow-y: auto;
  padding-top: 6px;
}

.sutun {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 0 6px 4px;
  border-left: 1px solid var(--tebesir);
}

.sutun:first-child {
  border-left: 0;
}

/* --- painted magnetic strips --------------------------------------------- */

.serit {
  position: relative;
  padding: 4px 8px 5px;
  background: var(--kemik);
  color: var(--murekkep);
  border: 1px solid rgba(0, 0, 0, 0.42);
  box-shadow: var(--serit-yuksek);
}

/* Only a real gap is worded: a run of "aynı gün" labels is noise, and the
   waiting is what the reader is meant to notice. */
.serit-fark {
  display: block;
  margin-bottom: 1px;
  font-family: "Chivo Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--murekkep-ikincil);
}

.serit-eylem {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  font-stretch: 90%;
  line-height: 1.2;
  color: inherit;
}

.serit-sonuc {
  display: block;
  margin-top: 1px;
  font-size: 11.5px;
  line-height: 1.2;
  color: var(--murekkep-ikincil);
}

.serit-sonuc:empty,
.serit-fark:empty,
.serit-saat:empty {
  display: none;
}

.serit-saat {
  display: block;
  margin-top: 2px;
  font-family: "Chivo Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--murekkep-ikincil);
}

/* A retry is not a sibling of the call it retries: it hangs off it. */
.serit.zincir {
  margin-left: 15px;
  padding: 3px 8px 3px;
}

/* Scheduling notes are the agent's bookkeeping, not its actions: they carry
   the same weight as a retry, so they get the same small type. */
.serit.kisa {
  padding: 3px 8px 3px;
}

.serit.zincir .serit-eylem,
.serit.kisa .serit-eylem {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
}

.serit.zincir .serit-sonuc,
.serit.kisa .serit-sonuc {
  margin-top: 0;
  font-size: 10.5px;
  line-height: 1.15;
}

.serit.zincir::before {
  content: "";
  position: absolute;
  left: -15px;
  top: -8px;
  width: 11px;
  height: 21px;
  border-left: 1px solid var(--tebesir-parlak);
  border-bottom: 1px solid var(--tebesir-parlak);
}

/* --- narrow columns ------------------------------------------------------

   A lifecycle that really does span two weeks puts fourteen columns on the
   board, and a fourteenth of the panel is narrower than the Turkish words
   printed on the strips. This was invisible while the board was only ever
   driven with five columns.

   Two things follow, and both are measured against the column rather than the
   viewport — the strip cannot know how wide the window is, only how wide its
   own day is. First, a long word breaks instead of running out over its
   neighbour. Second, below roughly 92px the strip gives up type size and the
   retry's indent: what the board is saying is the ordering and the spacing,
   and that survives being set smaller. Nothing is dropped. */

.sutun {
  container-type: inline-size;
  container-name: sutun;
}

/* Last resort only. `anywhere` also breaks words that would have fitted,
   which is how "Randevu açıldı" becomes "Randev / u açıldı"; `break-word`
   breaks a word only when it genuinely cannot fit on a line of its own. */
.serit-eylem,
.serit-sonuc,
.serit-fark {
  overflow-wrap: break-word;
}

@container sutun (max-width: 92px) {
  .serit {
    padding: 3px 4px 4px;
  }

  /* Sized so the longest words the board prints — "Hatırlatma",
     "Ulaşılamadı", "gönderildi" — still set on one line at this width. The
     condensed axis of the variable face does the work a smaller size would
     otherwise have to. */
  .serit-eylem {
    font-size: 9.5px;
    font-stretch: 68%;
    letter-spacing: -0.005em;
    line-height: 1.22;
  }

  .serit-sonuc {
    font-size: 9.5px;
    font-stretch: 78%;
    line-height: 1.2;
  }

  .serit-fark,
  .serit-saat {
    font-size: 9.5px;
  }

  /* The elbow still reads at half the width; the indent was costing a third
     of the strip. */
  .serit.zincir {
    margin-left: 6px;
    padding: 2px 4px;
  }

  .serit.zincir::before {
    left: -6px;
    width: 4px;
  }

  .serit.zincir .serit-eylem,
  .serit.kisa .serit-eylem {
    font-size: 9px;
    font-stretch: 64%;
  }

  .serit.zincir .serit-sonuc,
  .serit.kisa .serit-sonuc {
    font-size: 8.5px;
    font-stretch: 70%;
  }

  /* "+10 gün" is the one label that must never wrap: it is the number the
     whole board exists to show. */
  .serit-fark {
    white-space: nowrap;
  }

  /* The play control stops floating over the text and takes its own line.
     A 21px button pinned to the corner of a 50px strip has nowhere to sit
     that is not on top of a word. */
  .serit-ses {
    position: static;
    width: 18px;
    height: 16px;
    margin: 2px 0 0 auto;
  }

  .serit:has(.serit-ses:not([hidden])) .serit-sonuc {
    padding-right: 0;
  }
}

/* Each state is a different physical treatment of the same object, so the
   three the brief demands stay apart in greyscale and under compression. */
.serit[data-durum="ULASILAMADI"] {
  background: var(--kehribar);
  transform: rotate(-0.5deg);
}

.serit[data-durum="ULASILAMADI"] .serit-fark,
.serit[data-durum="ULASILAMADI"] .serit-sonuc,
.serit[data-durum="ULASILAMADI"] .serit-saat {
  color: var(--kehribar-ikincil);
}

.serit[data-durum="YENIDEN_PLANLANDI"] {
  background: var(--tasindi);
  border-left: 3px double rgba(0, 0, 0, 0.55);
}

.serit[data-durum="YENIDEN_PLANLANDI"] .serit-fark,
.serit[data-durum="YENIDEN_PLANLANDI"] .serit-sonuc,
.serit[data-durum="YENIDEN_PLANLANDI"] .serit-saat {
  color: var(--tasindi-ikincil);
}

.serit[data-durum="IPTAL"] {
  background: var(--lake);
  color: var(--kemik);
}

.serit[data-durum="IPTAL"] .serit-eylem {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.serit[data-durum="IPTAL"] .serit-fark,
.serit[data-durum="IPTAL"] .serit-sonuc,
.serit[data-durum="IPTAL"] .serit-saat {
  color: var(--lake-ikincil);
}

.serit[data-durum="ONAYLANDI"],
.serit[data-durum="TAMAMLANDI"],
.serit[data-durum="TAKIP_EDILDI"] {
  background: var(--onay);
}

.serit[data-durum="ONAYLANDI"] .serit-fark,
.serit[data-durum="TAMAMLANDI"] .serit-fark,
.serit[data-durum="TAKIP_EDILDI"] .serit-fark,
.serit[data-durum="ONAYLANDI"] .serit-sonuc,
.serit[data-durum="TAMAMLANDI"] .serit-sonuc,
.serit[data-durum="TAKIP_EDILDI"] .serit-sonuc,
.serit[data-durum="ONAYLANDI"] .serit-saat,
.serit[data-durum="TAMAMLANDI"] .serit-saat,
.serit[data-durum="TAKIP_EDILDI"] .serit-saat {
  color: var(--onay-ikincil);
}

.serit[data-durum="TASLAK"] {
  background: transparent;
  color: var(--celik-parlak);
  border-style: dashed;
  border-color: var(--tebesir-parlak);
  box-shadow: none;
}

.serit[data-durum="TASLAK"] .serit-fark,
.serit[data-durum="TASLAK"] .serit-sonuc,
.serit[data-durum="TASLAK"] .serit-saat {
  color: var(--celik);
}

/* --- quiet lanes: the rest of the shop, on the same axis ----------------- */

/* One rail, however many appointments the shop has open: a second row would
   come out of the board's height, which is the panel that must not shrink. */
.sessizler {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  padding-top: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-top: 1px solid var(--tebesir);
}

.sessiz {
  flex: 0 0 auto;
}

.sessiz {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  padding: 4px 10px;
  font: inherit;
  text-align: left;
  color: var(--celik-parlak);
  background: rgba(233, 227, 210, 0.07);
  border: 1px solid var(--tebesir);
  border-radius: 0;
  cursor: pointer;
  transition: background 140ms var(--hiz), border-color 140ms var(--hiz);
}

.sessiz:hover {
  background: rgba(233, 227, 210, 0.15);
  border-color: var(--tebesir-parlak);
}

.sessiz[aria-current="true"] {
  color: var(--murekkep);
  background: var(--kemik);
  border-color: var(--kemik);
}

.sessiz-plaka {
  font-family: "Chivo Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
}

.sessiz-musteri {
  font-size: 12px;
  color: var(--celik);
}

.sessiz[aria-current="true"] .sessiz-musteri {
  color: var(--murekkep-ikincil);
}

.sessiz-durum {
  font-size: 10px;
  font-weight: 700;
  font-stretch: 88%;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--celik);
}

.sessiz[aria-current="true"] .sessiz-durum {
  color: var(--murekkep-ikincil);
}

/* State colour belongs to the unselected lanes. The selected one is bone
   paper, where these lightened inks would vanish. */
.sessiz[data-durum="ULASILAMADI"]:not([aria-current="true"]) .sessiz-durum { color: var(--kehribar); }
.sessiz[data-durum="IPTAL"]:not([aria-current="true"]) .sessiz-durum { color: var(--lake-yazi); }
.sessiz[data-durum="YENIDEN_PLANLANDI"]:not([aria-current="true"]) .sessiz-durum { color: var(--tasindi-yazi); }

.pano-bos {
  margin: auto;
  max-width: 34ch;
  text-align: center;
  font-size: 14px;
  color: var(--celik);
}

/* --- replay: the one authored moment ------------------------------------- */

.odak.oynat .serit {
  animation: yerlesme 420ms var(--hiz) both;
  animation-delay: calc(var(--sira, 0) * 130ms);
}

@keyframes yerlesme {
  from {
    opacity: 0;
    transform: translateY(-14px) rotate(-1.4deg);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

.odak.oynat .serit[data-durum="ULASILAMADI"] {
  animation-name: yerlesme-egik;
}

@keyframes yerlesme-egik {
  from {
    opacity: 0;
    transform: translateY(-14px) rotate(-3deg);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: rotate(-0.5deg);
    filter: blur(0);
  }
}

@keyframes yerlesme-sade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  /* Replay still replays: the strips arrive in order, they just arrive
     without travelling. Removing the animation entirely would make the
     button do nothing at all. */
  .odak.oynat .serit,
  .odak.oynat .serit[data-durum="ULASILAMADI"] {
    animation-name: yerlesme-sade;
  }

  .serit[data-durum="ULASILAMADI"] {
    transform: none;
  }

  .gun,
  .alan,
  .atla,
  .sessiz,
  #tekrar,
  .yazma button {
    transition: none;
  }
}