/* Pixelce · Voyager 1 gezisi sayfa stilleri (çatı). Bölümlere özel stiller: css/<bolum>.css ya da VOY.css(). */

:root {
  --hud-ust: 64px;   /* üst göstergenin kapladığı yükseklik (kartlar bunun altından başlar) */
  --hud-alt: 70px;   /* alt göstergenin kapladığı yükseklik (kartlar bunun üstünde biter) */
}

/* the window never scrolls: <main id="yol"> is the scroller (see journey.js) */
html, body.voy { height: 100%; overflow: hidden; }
body.voy { background: var(--c-k); overscroll-behavior: none; }

/* ---------------------------------------------------------------- sahne (tuval) */
.sahne-kutu { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--c-k); }
#sahne { position: absolute; left: 0; top: 0; max-width: none; pointer-events: none; }

/* ---------------------------------------------------------------- bölümler */
#yol {
  position: fixed; inset: 0; z-index: 2;
  overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#yol::-webkit-scrollbar { display: none; }
#yol:focus { outline: none; }
html.tus #yol:focus-visible { outline: 2px dashed var(--c-a); outline-offset: -4px; }   /* keyboard users only (journey.js sets html.tus) */
html.voy-kilit #yol { overflow: hidden; }
.bolum { position: relative; height: calc(var(--h, 3) * 100vh); height: calc(var(--h, 3) * 100svh); }
.katman { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

/* vurgu (beat) yerleri */
.vurgu-yer { position: absolute; display: flex; flex-direction: column; gap: 14px; pointer-events: none; z-index: 3; }
.vurgu-yer > * { pointer-events: auto; }
.vurgu-yer[data-yer="sol"] { left: max(28px, 4vw, var(--sa-sol)); top: 50%; transform: translateY(-50%); width: min(380px, 36vw); }
.vurgu-yer[data-yer="sag"] { right: max(28px, 4vw, var(--sa-sag)); top: 50%; transform: translateY(-50%); width: min(380px, 36vw); }
.vurgu-yer[data-yer="orta"] { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, 80vw); align-items: center; }
.vurgu-yer[data-yer="ust"] { left: 50%; top: calc(var(--hud-ust) + var(--sa-ust)); transform: translateX(-50%); width: min(620px, 70vw); align-items: center; }
.vurgu-yer[data-yer="alt"] { left: 50%; bottom: calc(var(--hud-alt) + 16px + var(--sa-alt)); transform: translateX(-50%); width: min(620px, 70vw); align-items: center; }

.vurgu { max-width: 100%; }
.vurgu-kart {
  position: relative;
  padding: 14px 16px;
  background: rgba(26, 28, 44, .93);
  color: var(--c-w);
  transform-origin: 50% 50%;
  box-shadow:
    inset 0 2px 0 0 var(--c-a),
    0 -2px 0 0 var(--c-d), 0 2px 0 0 var(--c-d), -2px 0 0 0 var(--c-d), 2px 0 0 0 var(--c-d),
    4px 4px 0 0 rgba(13, 11, 20, .8);
}
[data-yer="orta"] .vurgu-kart, [data-yer="ust"] .vurgu-kart, [data-yer="alt"] .vurgu-kart { text-align: center; }
.vurgu-baslik {
  font-family: var(--font-piksel); font-size: 20px; line-height: 1.2; text-transform: uppercase;
  color: var(--c-y); text-shadow: 2px 2px 0 var(--c-m);
  margin: 0 0 8px; min-height: 1.2em; font-weight: 400;   /* h3: the pixel font has one weight */
  overflow-wrap: break-word;   /* long English words never push out of the card */
}
.vurgu-baslik:last-child { margin-bottom: 0; }
.vurgu-metin { font-size: 17px; line-height: 1.45; }
.vurgu-metin p + p { margin-top: .45em; }
.vurgu-metin b, .vurgu-metin strong { color: var(--c-y); font-weight: 600; }
.vurgu-metin em { color: var(--c-c); font-style: normal; }
.vurgu-metin a:not(.dugme) { color: var(--c-c); }   /* link-buttons keep their own colours */
.vurgu-metin .dugme { margin-top: 12px; }
.vurgu-metin small, .vurgu-not { display: block; margin-top: 8px; font-size: 13px; color: var(--c-L); }

/* çeşitler: beat.cls */
.vurgu--sade .vurgu-kart { background: none; box-shadow: none; padding: 0; text-shadow: 2px 2px 0 var(--c-k); }
.vurgu--buyuk .vurgu-baslik { font-size: 40px; text-shadow: 4px 4px 0 var(--c-m); }
.vurgu--camgobegi .vurgu-baslik { color: var(--c-c); text-shadow: 2px 2px 0 var(--c-b); }
.vurgu--kirmizi .vurgu-baslik { color: var(--c-R); text-shadow: 2px 2px 0 var(--c-k); }
.vurgu--beyaz .vurgu-baslik { color: var(--c-w); text-shadow: 2px 2px 0 var(--c-d); }
.vurgu--dar { max-width: 300px; }

/* bölümlerin kendi düğmeleri/öğeleri için hazır konumlar: <div class="konum konum--alt">…</div> */
.konum { position: absolute; z-index: 4; pointer-events: auto; }
.konum--alt { left: 50%; bottom: calc(var(--hud-alt) + 16px + var(--sa-alt)); transform: translateX(-50%); }
.konum--ust { left: 50%; top: calc(var(--hud-ust) + var(--sa-ust)); transform: translateX(-50%); }
.konum--orta { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.konum--sol-alt { left: max(var(--kenar), var(--sa-sol)); bottom: calc(var(--hud-alt) + 16px + var(--sa-alt)); }
.konum--sag-alt { right: max(var(--kenar), var(--sa-sag)); bottom: calc(var(--hud-alt) + 16px + var(--sa-alt)); }
.konum--sag { right: max(28px, 4vw); top: 50%; transform: translateY(-50%); }
.konum--sol { left: max(28px, 4vw); top: 50%; transform: translateY(-50%); }
.dugme-sira { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---------------------------------------------------------------- gösterge (HUD) */
.hud { position: fixed; inset: 0; z-index: 30; pointer-events: none; transition: opacity .3s steps(3, end), visibility .3s; }
.hud.gizli { opacity: 0; visibility: hidden; }
.hud-ust { position: absolute; top: calc(12px + var(--sa-ust)); left: calc(14px + var(--sa-sol)); }
.hud-ad { font-size: 10px; color: var(--c-L); text-shadow: 1px 1px 0 var(--c-k); }
.hud-tarih { margin-top: 6px; font-size: 20px; color: var(--c-y); text-shadow: 2px 2px 0 var(--c-m); display: flex; align-items: center; gap: 10px; }
.hud-canli:empty { display: none; }
.hud-canli {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; color: var(--c-w); background: var(--c-r); padding: 4px 6px 3px; text-shadow: none;
  box-shadow: 0 0 0 2px var(--c-k);
}
.hud-canli::before { content: ''; width: 4px; height: 4px; background: var(--c-w); animation: voy-yanip 1s steps(1, end) infinite; }

.hud-alt {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 calc(14px + var(--sa-sag)) calc(10px + var(--sa-alt)) calc(14px + var(--sa-sol));
}
.hud-bilgi { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.hud-kutu { display: flex; flex-direction: column; gap: 5px; }
.hud-kutu--sag { align-items: flex-end; text-align: right; }
.hud-etiket { font-size: 10px; color: var(--c-L); text-shadow: 1px 1px 0 var(--c-k); }
.hud-deger { font-size: 20px; color: var(--c-w); text-shadow: 2px 2px 0 var(--c-k); white-space: nowrap; }
.hud.canli .hud-deger { color: var(--c-c); }
.ilerleme { position: relative; height: 4px; margin-top: 10px; background: var(--c-d); box-shadow: 0 0 0 2px var(--c-k); }
.ilerleme-dolu { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--c-c); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }
.ilerleme-cizgi { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: var(--c-k); }

/* ---------------------------------------------------------------- menü */
.menu-dugme {
  position: fixed; z-index: 60;
  top: calc(10px + var(--sa-ust)); right: calc(68px + var(--sa-sag));
  width: 44px; height: 44px; padding: 6px;
  display: grid; place-items: center;
  border: 0; border-radius: 0; cursor: pointer; touch-action: manipulation;
  background: var(--c-n); color: var(--c-L);
  box-shadow: 0 -2px 0 0 var(--c-d), 0 2px 0 0 var(--c-d), -2px 0 0 0 var(--c-d), 2px 0 0 0 var(--c-d), inset 0 2px 0 0 var(--c-a);
}
.menu-dugme svg { width: 32px; height: 32px; fill: currentColor; }
.menu-dugme:hover, .menu-dugme[aria-expanded="true"] { color: var(--c-y); }
.kapi:not([hidden]) ~ .menu-dugme { display: none; }

.menu {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(13, 11, 20, .72);
  display: flex; justify-content: flex-end; align-items: flex-start;
  padding: calc(66px + var(--sa-ust)) calc(12px + var(--sa-sag)) calc(16px + var(--sa-alt)) 16px;
}
.menu-ic {
  background: var(--c-n);   /* opaque: no card or canvas text ghosting through the chapter names */
  width: min(380px, 100%);
  max-height: 100%; overflow: auto;
  transform-origin: 100% 0;
  padding: 16px 14px 14px;
}
.menu-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px 6px; }
.menu-baslik { font-size: 10px; color: var(--c-L); margin: 0; }
.menu-liste { display: flex; flex-direction: column; gap: 2px; }
.menu-oge {
  width: 100%; min-height: 44px;
  display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px;
  padding: 8px 8px 7px; border: 0; border-radius: 0; cursor: pointer; text-align: left;
  background: transparent; color: var(--c-w);
  font-family: var(--font-piksel); text-transform: uppercase;
}
.menu-oge:hover, .menu-oge:focus-visible { background: var(--c-d); }
.menu-oge[aria-current="true"] { background: var(--c-b); box-shadow: inset 4px 0 0 0 var(--c-c); }
.menu-oge[aria-current="true"] .menu-ad { color: var(--c-y); }
.menu-no { font-size: 10px; color: var(--c-L); }
.menu-ad { font-size: 20px; line-height: 1.1; }
.menu-yil { font-size: 10px; color: var(--c-L); }
.menu-ana { display: flex; align-items: center; min-height: 44px; margin: 8px 6px 0; font-size: 10px; color: var(--c-c); text-decoration: none; padding: 0; }
.menu-ana:hover { color: var(--c-y); }

/* ---------------------------------------------------------------- giriş kapısı */
.kapi {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  text-align: center;
  padding: calc(64px + var(--sa-ust)) max(var(--kenar), var(--sa-sag)) calc(26px + var(--sa-alt)) max(var(--kenar), var(--sa-sol));
}
/* top-left: PIXELCE link + TR | EN switch (the switch leaves with the gate; inside the journey it lives in the menu) */
.kapi-bar {
  position: absolute; top: calc(10px + var(--sa-ust)); left: calc(16px + var(--sa-sol));
  display: flex; align-items: center; gap: 16px;
}
.kapi-ana {
  font-size: 20px; color: var(--c-y); text-decoration: none; text-shadow: 2px 2px 0 var(--c-m);
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px 0 0;
}
.kapi-ana:hover { color: var(--c-w); }
.kapi-baslik { font-size: 60px; line-height: 1; color: var(--c-y); text-shadow: 6px 6px 0 var(--c-m); }
.kapi-alt { margin-top: 18px; font-size: 20px; color: var(--c-c); text-shadow: 2px 2px 0 var(--c-k); }
.kapi-bosluk { flex: 1; min-height: 120px; }
.kapi-alt-blok { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.kapi-canli { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--c-L); text-shadow: 1px 1px 0 var(--c-k); }
.canli-nokta { width: 6px; height: 6px; background: var(--c-R); animation: voy-yanip 1s steps(1, end) infinite; }
.kapi-km { font-size: 20px; color: var(--c-w); text-shadow: 2px 2px 0 var(--c-k); margin-bottom: 14px; white-space: nowrap; }
#kapi-basla { margin-top: 4px; }
/* the live block (distance, buttons) appears when the journey is ready (journey.js adds .kapi--hazir): before
   that the buttons would look clickable but do nothing. Without JavaScript it stays away (noscript card instead). */
html.js .kapi:not(.kapi--hazir) .kapi-canli, html.js .kapi:not(.kapi--hazir) .kapi-km,
html.js .kapi:not(.kapi--hazir) #kapi-basla, html.js .kapi:not(.kapi--hazir) #kapi-sessiz { visibility: hidden; }
html:not(.js) .kapi-canli, html:not(.js) .kapi-km, html:not(.js) #kapi-basla, html:not(.js) #kapi-sessiz,
html:not(.js) .ses-dugme { display: none; }
.kapi-alt-blok { position: relative; }
.kapi-yukleniyor { display: none; }
html.js .kapi:not(.kapi--hazir) .kapi-yukleniyor {
  display: block; position: absolute; left: 0; right: 0; top: 50%; margin: 0;
  font-size: 20px; color: var(--c-c); text-shadow: 2px 2px 0 var(--c-k);
  animation: voy-belir .3s steps(3, end) .9s both;   /* shows only when loading takes a while */
}
.kapi-yukleniyor::after { content: 'YÜKLENİYOR...'; }
html[data-dil="en"] .kapi-yukleniyor::after { content: 'LOADING...'; }
.kapi-noscript { max-width: 560px; max-height: 55vh; overflow: auto; text-align: left; font-size: 15px; line-height: 1.45; }
.kapi-noscript p + p { margin-top: .6em; }
@media (min-width: 720px) and (min-height: 560px) {
  .kapi-baslik { font-size: 80px; text-shadow: 8px 8px 0 var(--c-m); }
  .kapi-alt { font-size: 30px; text-shadow: 3px 3px 0 var(--c-k); }
  .kapi-km { font-size: 30px; text-shadow: 3px 3px 0 var(--c-k); }
}
@media (max-width: 359px) {
  .kapi-baslik { font-size: 40px; text-shadow: 4px 4px 0 var(--c-m); }
}
@media (max-width: 719px) and (min-height: 600px) {
  .kapi { padding-top: calc(84px + var(--sa-ust)); }
}
/* short landscape screens (phones turned sideways) */
@media (max-height: 520px) {
  .kapi { padding-top: calc(14px + var(--sa-ust)); padding-bottom: calc(10px + var(--sa-alt)); }
  .kapi-baslik { font-size: 40px; text-shadow: 4px 4px 0 var(--c-m); }
  .kapi-alt { margin-top: 10px; font-size: 20px; }
  .kapi-bosluk { min-height: 0; }
  .kapi-alt-blok { gap: 6px; }
  .kapi-km { margin-bottom: 4px; }
  .kapi-bar { top: calc(8px + var(--sa-ust)); gap: 12px; }
  .kapi-ana { font-size: 10px; text-shadow: 1px 1px 0 var(--c-m); }
}

/* ---------------------------------------------------------------- kaydır ipucu */
.kaydir {
  position: fixed; z-index: 25; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--hud-alt) + 12px + var(--sa-alt));   /* above the bottom HUD, never on the progress bar */
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 20px; color: var(--c-c); text-shadow: 2px 2px 0 var(--c-k);
  pointer-events: none;
}
.kaydir-ok {
  width: 14px; height: 8px; background: var(--c-c);
  clip-path: polygon(0 0, 28.6% 0, 28.6% 25%, 42.9% 25%, 42.9% 50%, 57.1% 50%, 57.1% 25%, 71.4% 25%, 71.4% 0, 100% 0, 100% 25%,
    85.7% 25%, 85.7% 50%, 71.4% 50%, 71.4% 75%, 57.1% 75%, 57.1% 100%, 42.9% 100%, 42.9% 75%, 28.6% 75%, 28.6% 50%, 14.3% 50%, 14.3% 25%, 0 25%);
  animation: voy-zipla 1s steps(2, end) infinite;
}

/* ---------------------------------------------------------------- hata kutusu (?debug=1) */
.hata-kutu {
  position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 9999;
  max-height: 25vh; overflow: hidden; pointer-events: none;   /* click-through: QA taps reach the controls under it */
  padding: 8px 10px; background: #b00020; color: #fff; border: 2px solid #fff;
  font: 12px/1.4 ui-monospace, Consolas, monospace; white-space: pre-wrap; word-break: break-word;
}
.hata-kutu[hidden] { display: none; }
.hata-kapat { pointer-events: auto; float: right; margin: -4px -6px 0 8px; width: 28px; height: 28px; border: 2px solid #fff; background: #7a0016; color: #fff; font: 16px/1 ui-monospace, monospace; cursor: pointer; }
.hata-kutu > div + div { border-top: 1px solid rgba(255, 255, 255, .35); margin-top: 4px; padding-top: 4px; }

@keyframes voy-yanip { 50% { opacity: 0; } }
@keyframes voy-zipla { 50% { transform: translateY(4px); } }
@keyframes voy-belir { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------------- telefon (dikey / dar) — journey.js isMobile ile aynı eşik */
@media (max-width: 719px), (orientation: portrait) and (max-width: 899px) {
  :root { --hud-ust: 60px; --hud-alt: 74px; }
  .vurgu-yer[data-yer="alt"], .vurgu-yer[data-yer="ust"] {
    left: max(var(--kenar), var(--sa-sol)); right: max(var(--kenar), var(--sa-sag)); width: auto; transform: none;
  }
  .vurgu-yer[data-yer="alt"] { max-height: 46svh; }
  .vurgu-yer[data-yer="ust"] { max-height: 38svh; top: calc(var(--hud-ust) + var(--sa-ust) + 4px); }
  .vurgu-yer[data-yer="orta"] { width: calc(100vw - 2 * var(--kenar)); }
  .vurgu-yer { gap: 10px; }
  .vurgu-kart { padding: 12px 14px; }
  .vurgu-metin { font-size: 16px; line-height: 1.4; }
  .vurgu--buyuk .vurgu-baslik { font-size: 30px; text-shadow: 3px 3px 0 var(--c-m); }
  .konum--sag, .konum--sol { top: auto; transform: none; bottom: calc(var(--hud-alt) + 16px + var(--sa-alt)); }

  .hud-ust { top: calc(14px + var(--sa-ust)); }
  /* the LIVE / CANLI tag moves up beside "VOYAGER 1": long dates (SEPTEMBER 30, 2026) stay clear of the menu button */
  .hud-tarih { white-space: nowrap; }
  .hud-canli { position: absolute; top: -4px; left: 64px; }
  .hud-bilgi { flex-direction: column; align-items: flex-start; gap: 6px; }
  .hud-kutu, .hud-kutu--sag { flex-direction: row; align-items: baseline; gap: 8px; text-align: left; }
  .hud-etiket { min-width: 0; }
  /* above the two-row bottom HUD, so the hint never touches the distance value (longer in English) */
  .kaydir { left: auto; right: calc(14px + var(--sa-sag)); transform: none; bottom: calc(var(--hud-alt) + 12px + var(--sa-alt)); align-items: flex-end; }
}

/* ---------------------------------------------------------------- kısa ekranlar (yatay telefon, %200 yakınlaştırma)
   Kartlar üst ve alt göstergenin arasındaki bantta kalır; sığmazsa kartın içi kayar (göstergenin üstüne binmez). */
@media (max-height: 560px) {
  .vurgu-yer[data-yer="orta"], .vurgu-yer[data-yer="sol"], .vurgu-yer[data-yer="sag"] {
    top: calc(50% + (var(--hud-ust) + var(--sa-ust) - var(--hud-alt) - var(--sa-alt)) / 2);
  }
  .vurgu-kart {
    max-height: calc(100vh - var(--hud-ust) - var(--hud-alt) - 24px - var(--sa-ust) - var(--sa-alt));
    max-height: calc(100svh - var(--hud-ust) - var(--hud-alt) - 24px - var(--sa-ust) - var(--sa-alt));
    overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--c-a) transparent;
  }
  .vurgu-yer[data-yer="alt"] .vurgu-kart, .vurgu-yer[data-yer="ust"] .vurgu-kart {
    max-height: calc(100vh - var(--hud-ust) - var(--hud-alt) - 32px - var(--sa-ust) - var(--sa-alt));
    max-height: calc(100svh - var(--hud-ust) - var(--hud-alt) - 32px - var(--sa-ust) - var(--sa-alt));
  }
}
/* the chapter menu at laptop heights: all 12 rows and the home link fit without an inner scroll */
@media (max-height: 760px) {
  .menu { padding-top: calc(60px + var(--sa-ust)); padding-bottom: calc(10px + var(--sa-alt)); }
  .menu-ic { padding: 12px 12px 10px; }
  .menu-ust { margin-bottom: 6px; }
  .menu-oge { min-height: 36px; padding: 6px 8px 5px; }
  .menu-ana { min-height: 36px; margin-top: 4px; }
}

/* ---------------------------------------------------------------- yatay telefon (kısa ve geniş)
   Göstergeler tek satıra iner, kartlar sıkılaşır, bölüm menüsü iki sütun olur. */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --hud-ust: 44px; --hud-alt: 56px; }
  .hud-ad { display: none; }
  .hud-ust { top: calc(8px + var(--sa-ust)); }
  .hud-tarih { margin-top: 0; white-space: nowrap; }
  .hud-canli { position: static; }
  .hud-alt { padding-bottom: calc(8px + var(--sa-alt)); }
  .hud-bilgi { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 12px; }
  .hud-kutu, .hud-kutu--sag { flex-direction: row; align-items: baseline; gap: 8px; }
  .hud-kutu--sag { text-align: right; }
  .ilerleme { margin-top: 8px; }

  .vurgu-yer { gap: 8px; }
  .vurgu-yer[data-yer="alt"], .vurgu-yer[data-yer="ust"] { left: 50%; right: auto; width: min(620px, 76vw); transform: translateX(-50%); max-height: none; }
  .vurgu-yer[data-yer="alt"] { bottom: calc(var(--hud-alt) + 8px + var(--sa-alt)); }
  .vurgu-yer[data-yer="ust"] { top: calc(var(--hud-ust) + 4px + var(--sa-ust)); }
  .vurgu-yer[data-yer="orta"] { width: min(560px, 76vw); }
  .vurgu-kart { padding: 10px 12px; background: rgba(26, 28, 44, .97); }   /* less canvas text ghosting through */
  .vurgu--sade .vurgu-kart { background: none; padding: 0; }
  .vurgu-baslik { margin-bottom: 6px; }
  .vurgu-metin { font-size: 15px; line-height: 1.35; }
  .vurgu-metin .dugme { margin-top: 8px; }
  .vurgu-metin small, .vurgu-not { margin-top: 6px; font-size: 12px; }
  .vurgu--buyuk .vurgu-baslik { font-size: 30px; text-shadow: 3px 3px 0 var(--c-m); }
  .vurgu-yer .dugme { min-height: 40px; padding: 10px 14px 8px; }
  .vurgu-yer .son-dugmeler { margin: 8px 0 2px; gap: 8px 10px; }
  .vurgu-yer .son-basa { min-height: 36px; padding-top: 4px; padding-bottom: 4px; margin-top: 2px; }
  .vurgu-yer .son-kunye { margin-top: 2px; font-size: 12px; }
  .konum--alt, .konum--sol-alt, .konum--sag-alt { bottom: calc(var(--hud-alt) + 8px + var(--sa-alt)); }
  .kaydir { font-size: 10px; text-shadow: 1px 1px 0 var(--c-k); bottom: calc(var(--hud-alt) + 8px + var(--sa-alt)); }

  .menu { padding-top: calc(58px + var(--sa-ust)); padding-bottom: calc(8px + var(--sa-alt)); }
  .menu-ic { width: min(600px, 100%); padding: 10px 12px; }
  .menu-ust { margin-bottom: 4px; }
  .menu-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
  .menu-oge { min-height: 34px; padding: 4px 8px 3px; }
  .menu-ana { min-height: 34px; margin-top: 2px; }
}

/* ---------------------------------------------------------------- büyük ekranlar (1600+ geniş, 900+ yüksek)
   Tuval 5-6 kat büyür; arayüz yazıları da (10'un katları, keskin piksel yazı) onunla büyür. */
@media (min-width: 1600px) and (min-height: 900px) {
  :root { --hud-ust: 96px; --hud-alt: 100px; }
  .vurgu-yer[data-yer="sol"], .vurgu-yer[data-yer="sag"] { width: min(560px, 32vw); }
  .vurgu-yer[data-yer="orta"], .vurgu-yer[data-yer="alt"], .vurgu-yer[data-yer="ust"] { width: min(840px, 60vw); }
  .vurgu-yer { gap: 20px; }
  .vurgu-kart { padding: 20px 24px; }
  .vurgu-baslik { font-size: 30px; text-shadow: 3px 3px 0 var(--c-m); margin-bottom: 12px; }
  .vurgu--buyuk .vurgu-baslik { font-size: 60px; text-shadow: 6px 6px 0 var(--c-m); }
  .vurgu--camgobegi .vurgu-baslik { text-shadow: 3px 3px 0 var(--c-b); }
  .vurgu--kirmizi .vurgu-baslik { text-shadow: 3px 3px 0 var(--c-k); }
  .vurgu--beyaz .vurgu-baslik { text-shadow: 3px 3px 0 var(--c-d); }
  .vurgu--dar { max-width: 440px; }
  .vurgu-metin { font-size: 24px; line-height: 1.45; }
  .vurgu-metin small, .vurgu-not { font-size: 18px; margin-top: 12px; }
  .vurgu-metin .dugme { margin-top: 18px; }
  body.voy .dugme { font-size: 30px; padding: 16px 26px 14px; min-height: 64px; gap: 14px; }
  body.voy .dugme--kucuk { font-size: 20px; padding: 14px 18px 12px; min-height: 48px; gap: 10px; }
  body.voy .link-sessiz { font-size: 20px; }
  .dugme-sira { gap: 20px; }

  .hud-ust { top: calc(18px + var(--sa-ust)); left: calc(24px + var(--sa-sol)); }
  .hud-ad { font-size: 20px; text-shadow: 2px 2px 0 var(--c-k); }
  .hud-tarih { margin-top: 8px; font-size: 30px; text-shadow: 3px 3px 0 var(--c-m); gap: 14px; }
  .hud-canli { font-size: 20px; padding: 6px 8px 4px; gap: 8px; }
  .hud-canli::before { width: 6px; height: 6px; }
  .hud-alt { padding: 0 calc(24px + var(--sa-sag)) calc(16px + var(--sa-alt)) calc(24px + var(--sa-sol)); }
  .hud-kutu { gap: 8px; }
  .hud-etiket { font-size: 20px; text-shadow: 2px 2px 0 var(--c-k); }
  .hud-deger { font-size: 30px; text-shadow: 3px 3px 0 var(--c-k); }
  .ilerleme { height: 6px; margin-top: 14px; }
  .kaydir { font-size: 20px; }
  .kaydir-ok { width: 21px; height: 12px; }

  .menu { padding-top: calc(84px + var(--sa-ust)); }
  .menu-ic { width: min(520px, 100%); padding: 20px 18px 18px; }
  .menu-baslik, .menu-no, .menu-yil, .menu-ana { font-size: 20px; }
  .menu-oge { grid-template-columns: 44px 1fr auto; min-height: 52px; gap: 12px; }
  .menu-ad { font-size: 30px; }

  .kapi-baslik { font-size: 120px; text-shadow: 12px 12px 0 var(--c-m); }
  .kapi-alt { font-size: 40px; text-shadow: 4px 4px 0 var(--c-k); }
  .kapi-canli { font-size: 20px; gap: 12px; text-shadow: 2px 2px 0 var(--c-k); }
  .canli-nokta { width: 10px; height: 10px; }
  .kapi-km { font-size: 40px; text-shadow: 4px 4px 0 var(--c-k); }
  .kapi-ana { font-size: 30px; text-shadow: 3px 3px 0 var(--c-m); }
  .kapi-yukleniyor { font-size: 30px; }
}