@font-face {
  font-family: "Bedstead";
  src: url("assets/fonts/bedstead.otf") format("opentype");
  font-display: block;
}

:root {
  --black: #000;
  --red: #ff0000;
  --green: #00ff00;
  --yellow: #ffff00;
  --blue: #0000ff;
  --magenta: #ff00ff;
  --cyan: #00ffff;
  --white: #fff;
  /* 40 sütun x 25 satır ekran; hücre yazı boyutundan türetilir */
  --fs: min(calc(100vw / 24.8), calc(100vh / 25.8));
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--black);
  color: var(--white);
}

body {
  font-family: "Bedstead", "Courier New", monospace;
  font-size: var(--fs);
  line-height: 1;
  min-height: 100vh;
  display: grid;
  place-items: center;
  scrollbar-color: var(--cyan) var(--black);
}

::selection { background: var(--yellow); color: var(--black); }

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--yellow); outline-offset: 0; }

.screen {
  width: 40ch;
  height: 25em;
  position: relative;
  overflow: hidden;
}

/* Sayfalar: hash ile seçilir; JS olmadan da çalışır (DOM'da p100 sonda) */
.page { position: absolute; inset: 0; display: none; }
.page:target { display: block; }
#p100 { display: block; }
.page:target ~ #p100 { display: none; }

.row {
  height: 1em;
  white-space: pre;
  overflow: hidden;
  display: flex;
}
.dh { height: 2em; }
.dh > span { display: inline-block; transform: scaleY(2); transform-origin: 0 0; }

.y { color: var(--yellow); }
.c { color: var(--cyan); }
.g { color: var(--green); }
.r { color: var(--red); }
.m { color: var(--magenta); }
.w { color: var(--white); }
.bgb { background: var(--blue); }

/* Başlık satırı */
.hdr .pn { width: 5ch; color: var(--white); }
.hdr .ttl { width: 15ch; color: var(--cyan); }
.hdr .pc { width: 5ch; color: var(--white); }
.hdr .clk { width: 15ch; color: var(--yellow); text-align: right; }

/* Dizin satırları: numara, etiket, nokta dolgu, değer */
.ix { cursor: pointer; }
.ix .n { color: var(--cyan); width: 4ch; }
.ix .l { color: var(--white); }
.ix .d { flex: 1; color: var(--blue); overflow: hidden; }
.ix .v { color: var(--yellow); }
.ix:hover, .ix:focus-visible { background: var(--blue); outline: none; }
.ix:hover .d, .ix:focus-visible .d { color: var(--black); }

/* Logo mozaik bloğu: 4 satır yüksek, 32 sütun geniş */
.logo { height: 4em; padding-left: 4ch; }
.logo svg { width: 32ch; height: 4em; display: block; }

/* Gizli metin (teletekst conceal) ve GÖSTER */
.hid { color: transparent; }
.revealed .hid { color: var(--white); }
.rev { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--yellow); cursor: pointer; }
.rev:hover { background: var(--blue); }

/* Boş proje yuvası */
.slot { display: inline-block; width: 22ch; height: 1em; background: var(--blue); }

/* Mozaik çubuk grafik: her çubuk 2 hücre, yükseklik üçte birlik adımlarla */
.bars { height: 6em; display: flex; align-items: flex-end; padding-left: 1ch; gap: 0; }
.bars i { display: block; width: 2ch; background: var(--cyan); }
.bars i:nth-child(odd) { background: var(--green); }

/* Fastext renkli tuşlar */
.ft a { width: 10ch; display: inline-block; }
.ft a:hover { background: var(--blue); }

.disabled { opacity: 1; color: var(--white); background: var(--blue); cursor: not-allowed; }

/* Yükleme: satırlar yukarıdan aşağıya çizilir */
@media (prefers-reduced-motion: no-preference) {
  .page.drawn .row { animation: rowin 1ms steps(1) both; animation-delay: calc(var(--i, 0) * 28ms); }
  @keyframes rowin { from { opacity: 0; } to { opacity: 1; } }
  .blink { animation: blink 1s steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0; } }
}