/* ==========================================================================
   LACUNATE — tasarım sistemi
   Yön: PLATE. Sayfa bir gözlem kaydı gibi kurulur: kenardan kenara ince
   referans çizgileri, kenar boşluğunda yalnız dizin numaraları, ve
   ölçülmüş sayılar. Süs yok, gölge yok, köşe yuvarlaması yok.

   PALET — keyfi değil, hero'nun kendisinden türetildi:
     --cold  merceklenen yıldız ışığı, 12000 K, shader'ın Planck
             fonksiyonundan hesaplandı (#b7d1ff), vurgu olsun diye
             bir tık koyulaştırıldı
     --warm  birikim diskinin UZAKLAŞAN kolu, yakalanan kareden
             örneklendi (#462405, ton 28°), AA'yı geçecek parlaklığa
             taşındı
   İkisi aynı diskin iki kolu: biri mavi kayma, biri kırmızı kayma.
   Üçüncü renk yok.

   Kontrast oranları --void (#050609) zeminine karşı, gerçek bağıl
   parlaklık formülüyle hesaplandı:
     ink 17.02:1 · muted 6.83:1 · cold 10.85:1 · warm 6.81:1
   ========================================================================== */

:root{
  /* --- altı renk, ikisi vurgu --- */
  --void:    #050609;
  /* İKİ AYRI ÇİZGİ TOKENI — aynı değil, çünkü işleri farklı.
     --line  dekoratif ayraç. Eski değeri #1a1f27 zeminde 1.22:1 idi:
             telefonda gün ışığında görünmüyordu. 1.74:1'e çekildi —
             hâlâ sessiz, ama var olduğu belli.
     --edge  İŞLEVSEL sınır: düğme kenarı, form denetimi, tablo başlığı,
             sponsorluk çerçevesi. WCAG 1.4.11 arayüz bileşeni sınırından
             en az 3:1 istiyor; bu 3.37:1. Süs değil, denetimin kendisi. */
  --line:    #313944;
  --edge:    #5b646e;
  --ink:     #e6ecf2;
  --muted:   #8c97a4;
  --cold:    #9dbeff;
  --warm:    #e8762e;

  /* --- tipografi --- */
  --display: "Oxanium", ui-sans-serif, system-ui, sans-serif;
  --text:    "Public Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:    "Azeret Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* --- ölçü --- */
  --gut:     clamp(20px, 4.2vw, 64px);   /* sayfa kenar boşluğu */
  --rule:    1px;
  --measure: 64ch;                        /* metin satır uzunluğu tavanı */
  --idx:     clamp(0px, 6vw, 92px);       /* dizin sütunu genişliği */
}

/* ==========================================================================
   temel
   ========================================================================== */

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

html{
  background: var(--void);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body{
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.62;
  font-weight: 350;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, canvas{ display: block; max-width: 100%; }
img{ height: auto; }

/* odak halkası — her yerde görünür, yuvarlatılmamış */
:focus-visible{
  outline: 2px solid var(--cold);
  outline-offset: 3px;
}
:focus:not(:focus-visible){ outline: none; }

::selection{ background: var(--warm); color: var(--void); }

/* ==========================================================================
   tipografi ölçeği
   Başlıklar Oxanium — enstrüman harflendirmesi, düz kesik uçlar, kare
   kâseler. Geniş harf aralığında dağılmıyor, açılıyor.
   ========================================================================== */

h1, h2, h3, h4{
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

h1{ font-size: clamp(30px, 4.6vw, 58px); letter-spacing: .012em; }
h2{ font-size: clamp(22px, 2.5vw, 31px); letter-spacing: .016em; }
h3{ font-size: clamp(17px, 1.5vw, 20px); letter-spacing: .022em; }

p{ margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child{ margin-bottom: 0; }

a{ color: var(--ink); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover{ color: var(--cold); }

strong{ font-weight: 600; color: var(--ink); }

.lede{
  font-size: clamp(17px, 1.55vw, 20px);
  line-height: 1.56;
  color: var(--ink);
  font-weight: 300;
  max-width: 56ch;
}

.muted{ color: var(--muted); }

/* küçük etiket — bölüm dizini, tablo başlığı, resim altı */
.label{
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.num{ font-variant-numeric: tabular-nums; font-family: var(--mono); }

/* ==========================================================================
   kelime markası
   LACUNATE geniş harf aralığıyla. N'in çapraz kolundan bir parça eksik —
   logodaki "kesilmiş çubuk" jestinin harf ölçeğindeki karşılığı.
   Yazı tipi yüklenmeden de doğru görünsün diye SVG olarak gelir.
   ========================================================================== */

.wordmark{ display: block; color: var(--ink); }
.wordmark svg{ width: 100%; height: auto; fill: currentColor; }

/* ==========================================================================
   iskelet: kenardan kenara referans çizgisi + dizin sütunu
   ========================================================================== */

.wrap{
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* bölüm: solda dizin numarası, sağda içerik */
.sec{
  display: grid;
  grid-template-columns: var(--idx) minmax(0, 1fr);
  gap: 0 clamp(16px, 2.4vw, 40px);
  padding-block: clamp(48px, 7vw, 104px);
  border-top: var(--rule) solid var(--line);
}
.sec > .sec-idx{
  grid-column: 1;
  padding-top: .42em;
}
.sec > .sec-body{ grid-column: 2; min-width: 0; }

@media (max-width: 760px){
  .sec{ grid-template-columns: 1fr; gap: 14px 0; }
  .sec > .sec-idx{ grid-column: 1; padding-top: 0; }
  .sec > .sec-body{ grid-column: 1; }
}

/* ==========================================================================
   üst bilgi
   ========================================================================== */

.masthead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 18px;
  border-bottom: var(--rule) solid var(--line);
}
.masthead .brand{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}
.masthead .brand .mark{ width: 26px; height: 26px; flex: none; }
.masthead .brand .wordmark{ width: 132px; }

.nav{ display: flex; gap: clamp(14px, 2vw, 30px); align-items: center; }
.nav a{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding-block: 6px;
}
.nav a:hover, .nav a[aria-current="page"]{ color: var(--ink); }
.nav a[aria-current="page"]{ box-shadow: inset 0 -1px 0 0 var(--warm); }

@media (max-width: 680px){
  .masthead{ flex-wrap: wrap; gap: 12px; }
  .nav{ width: 100%; flex-wrap: wrap; gap: 10px 18px; }
}

/* ==========================================================================
   HERO — frontispis
   Görselin ÜZERİNDE hiç yazı yok. Levha sert bir kenarla biter, kelime
   markası ve altyazı düz siyahın üstünde, kesiğin altında durur.
   Bu bir tercih değil, yapısal bir güvence: shader derlenmeden de sayfa
   okunur, çünkü okunacak her şey zaten görselin dışında.
   ========================================================================== */

/* ==========================================================================
   SABİT ARKA PLAN — kara delik
   Levha artık akışta değil: ekrana sabitlenmiş, sayfa onun üstünden akıyor.
   Aşağı kaydırdıkça kamera olay ufkuna yaklaşıyor.

   OKUNABİLİRLİK üç katmanla güvenceye alınıyor:
   1. Yaklaştıkça gölge ekranı kaplıyor — gölge mutlak siyah, yani en iyi
      zemin. Fizik zaten bizim için çalışıyor.
   2. Yaklaştıkça pozlama düşüyor: disk sönüyor (düşerken kızıla kayması).
   3. Üstüne kaydırmaya bağlı bir perde biniyor. Güvenlik ağı; ilk ekranda
      sıfır, içerik başlayınca devreye giriyor.
   ========================================================================== */
.backdrop{
  position: fixed; inset: 0;
  z-index: -1;                     /* içeriğin ARKASINDA; body'nin doğrudan
                                      çocuğu olmalı, yoksa <main> kendi yığın
                                      bağlamını kurup üst bilgiyi örtüyor */
  background: #000; overflow: hidden;
  contain: strict;                 /* düzen/boyama izole — kaydırma ucuzlasın */
}
.backdrop > img,
.backdrop > canvas{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.backdrop > canvas{ opacity: 0; transition: opacity 1.1s linear; }
.backdrop.live > canvas{ opacity: 1; }
.backdrop.live > img{ opacity: 0; transition: opacity 1.1s linear; }

.scrim{
  position: absolute; inset: 0;
  background: var(--void);
  opacity: 0;                      /* hero.js kaydırmaya göre sürüyor */
  will-change: opacity;
}

/* İçerik arka planın ÜSTÜNDE */
body > header, body > main, body > footer{ position: relative; z-index: 1; }
body{ isolation: isolate; position: relative; }  /* z-index:-1 dışarı kaçmasın;
                                    .veil'in kapsayıcı bloğu body olsun */

/* Uzamsal örtü — okunabilirliğin asıl güvencesi.
   ÖLÇÜMLE bulundu: sabit perde + pozlama sönümü tek başına yetmiyordu;
   geçiş bölgesinde gövde metninin arkasındaki en parlak %1 piksel 0.20
   parlaklıkta kalıyor, --ink 3.52:1'e düşüyordu (AA 4.5).
   Bu örtü hero'nun üstünü hiç karartmıyor, yalnız metnin oturduğu bandı
   ve sonrasını --void'e indiriyor. */
.veil{
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(5,6,9,0)    0,
    rgba(5,6,9,0)    58svh,
    rgba(5,6,9,.45)  76svh,
    rgba(5,6,9,.88)  94svh,
    rgba(5,6,9,.88)  100%);
  /* Yatayda saga dogru silinir: karartma yalniz METNIN OTURDUGU sutunu
     kapsar, sagdaki bosluk acik kalir ve kara delik orada tam
     parlakliginda gorunur. Once butun ekran karartiliyordu ve kara
     delik asagi indikce kayboluyordu. */
  -webkit-mask-image: linear-gradient(to right,
    #000 0, #000 68%, rgba(0,0,0,.45) 80%, transparent 92%);
          mask-image: linear-gradient(to right,
    #000 0, #000 68%, rgba(0,0,0,.45) 80%, transparent 92%);
}
/* Dar ekranda metin tum genisligi kullanir; orada kara delik ile metin
   ayni alani paylasamaz, metin kazanir. */
@media (max-width: 900px){
  .veil{ -webkit-mask-image: none; mask-image: none; }
}
@supports not (height: 100svh){
  .veil{ background: linear-gradient(to bottom,
    rgba(5,6,9,0) 0, rgba(5,6,9,0) 58vh,
    rgba(5,6,9,.55) 78vh, rgba(5,6,9,.93) 98vh, rgba(5,6,9,.93) 100%); }
}

/* İlk ekran: kelime markası alt üçte birde dursun, kara delik üstte nefes alsın */
.hero-word{
  /* Üst bilgi bu bölümün ÜSTÜNDE duruyor; 100svh dersem altyazı şeridi
     katlamanın altına düşüyor. Üst bilginin yüksekliğini düşüyorum. */
  min-height: calc(100svh - 4.4rem);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: clamp(30px, 5vw, 62px) clamp(26px, 4vw, 44px);
}
@supports not (height: 100svh){ .hero-word{ min-height: calc(100vh - 4.4rem); } }
.hero-word .wordmark{ margin-bottom: clamp(20px, 2.6vw, 34px); }
.hero-word .lede{
  /* Metin arka plandaki diskin üstünde de okunsun diye ince bir zemin
     gölgesi. Kutu değil, yalnız harflerin arkasındaki hava. */
  text-shadow: 0 1px 18px rgba(5,6,9,.9), 0 0 44px rgba(5,6,9,.75);
}
.hero-word .wordmark svg{ filter: drop-shadow(0 2px 26px rgba(5,6,9,.85)); }

/* prefers-reduced-motion: yaklaşma yok. Arka plan sabit tek kare olarak
   kalır, perde de sabitlenir. */
@media (prefers-reduced-motion: reduce){
  .backdrop > canvas{ transition: none; }
}

.plate-caption{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: clamp(26px, 3vw, 40px) 0 0;
  padding-top: 14px;
  border-top: var(--rule) solid var(--line);
  max-width: none;
}

.hero-word .wordmark{ width: min(100%, 620px); }

/* ==========================================================================
   bağlantı ve düğmeler
   ========================================================================== */

.link{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: .6em;
  padding-block: 4px;
  box-shadow: inset 0 -1px 0 0 var(--line);
}
.link:hover{ color: var(--cold); box-shadow: inset 0 -1px 0 0 var(--cold); }
.link::after{ content: "→"; font-family: var(--text); }

.btn{
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: var(--rule) solid var(--edge);
  padding: 14px 22px;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover{ border-color: var(--ink); color: var(--ink); }
.btn-warm{ border-color: var(--warm); color: var(--warm); }
.btn-warm:hover{ background: var(--warm); color: var(--void); border-color: var(--warm); }

/* ==========================================================================
   oyun kartı
   ========================================================================== */

.card{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 46px);
  align-items: start;
  text-decoration: none;
  color: inherit;
}
.card .shot{
  aspect-ratio: 16 / 10;
  background: #000 linear-gradient(180deg, #0b0e13, #050609);
  border: var(--rule) solid var(--edge);
  display: grid;
  place-items: center;
}
.card .shot .label{ color: #3d4650; }
.card:hover .shot{ border-color: var(--muted); }
.card h2{ margin-bottom: .5em; }
@media (max-width: 760px){ .card{ grid-template-columns: 1fr; } }

.meta{
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: var(--rule) solid var(--line);
}

/* ==========================================================================
   veri tablosu — /support sıralaması, /games/galaxy-fusion kademe listesi
   ========================================================================== */

.table{
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.table th{
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 0 16px 10px 0;
  border-bottom: var(--rule) solid var(--edge);
  white-space: nowrap;
}
.table td{
  padding: 13px 16px 13px 0;
  border-bottom: var(--rule) solid var(--line);
  vertical-align: baseline;
}
.table td:last-child, .table th:last-child{ padding-right: 0; }
.table .r{ text-align: right; font-family: var(--mono); font-size: 14px; }
.table tbody tr:hover td{ color: var(--ink); }
.table .rank{ font-family: var(--mono); font-size: 13px; color: var(--muted); width: 3.2em; }
.table tbody tr:nth-child(-n+3) .rank{ color: var(--warm); }

.scroll-x{ overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ==========================================================================
   liste — sistemler, SSS
   ========================================================================== */

/* Izgara çizgileri gap+arka plan hilesiyle DEĞİL, hücre gölgeleriyle
   çiziliyor. Sebebi somut: son satır eksik kaldığında (6 hücre, 4 sütun)
   arka plan hilesi boşluğu kocaman bir blok olarak boyuyordu. Gölge
   yaklaşımında boş alan zeminde kalır; taşan sağ kenar overflow ile kırpılır. */
.grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 0;
  background: transparent;
  border-top: var(--rule) solid var(--line);
  overflow: hidden;
}
.grid > *{
  background: var(--void);
  padding: 24px 22px 26px;
  box-shadow: 0 1px 0 0 var(--line);
}
.grid h3{ margin-bottom: .55em; }
.grid p{ font-size: 15px; color: var(--muted); margin: 0; }

details{ border-bottom: var(--rule) solid var(--line); }
details summary{
  cursor: pointer;
  padding: 18px 0;
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: .02em;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
details summary::-webkit-details-marker{ display: none; }
details summary::after{ content: "+"; color: var(--muted); font-family: var(--text); }
details[open] summary::after{ content: "–"; }
details .answer{ padding-bottom: 20px; color: var(--muted); font-size: 15px; }

/* ==========================================================================
   /support — bağış ile sponsorluk GÖRSEL OLARAK ayrı
   Bağış bölümü çerçevesiz ve açık; sponsorluk sitedeki TEK çerçeveli
   kutudur. Çerçevenin kendisi "bu bir reklam alanıdır" der.
   ========================================================================== */

.notice{
  border-left: 2px solid var(--warm);
  padding: 2px 0 2px 18px;
  margin: 26px 0;
  color: var(--ink);
  font-size: 15px;
  max-width: 58ch;
}

.prospectus{
  border: var(--rule) solid var(--edge);
  padding: clamp(22px, 3vw, 40px);
  margin-top: 8px;
}
.prospectus .label{ color: var(--warm); }

.consent{
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 10px 0;
  font-size: 14px;
  color: var(--muted);
}
.consent input{ margin: 4px 0 0; accent-color: var(--cold); flex: none; }

.empty{
  padding: 34px 0;
  color: var(--muted);
  font-size: 15px;
  border-bottom: var(--rule) solid var(--line);
}

/* ==========================================================================
   alt bilgi
   ========================================================================== */

.foot{
  border-top: var(--rule) solid var(--line);
  padding-block: 34px 46px;
  display: flex;
  flex-wrap: wrap;
  gap: 26px 48px;
  justify-content: space-between;
  align-items: flex-start;
}
.foot .cols{ display: flex; flex-wrap: wrap; gap: 26px 48px; }
.foot nav{ display: flex; flex-direction: column; gap: 7px; }
.foot nav a{
  font-size: 14px; color: var(--muted); text-decoration: none;
}
.foot nav a:hover{ color: var(--ink); }

/* alt sayfa izi: kenardan kenara tek çizgi, içinde TEK boşluk.
   Boşluğun yeri ve genişliği ana sayfadaki gölgenin merkezi ve açısal
   genişliği. Alt sayfalar kara deliği resmi olarak değil, "hiçbir şeyin
   kaydedilmediği aralık" olarak devralır. Sıfır bayt, sıfır hareket. */
.trace{
  height: 1px;
  background:
    linear-gradient(90deg,
      var(--line) 0 calc(63% - 84px),
      transparent calc(63% - 84px) calc(63% + 84px),
      var(--line) calc(63% + 84px) 100%);
  margin: 0;
  border: 0;
}

.skip{
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--void);
  padding: 12px 18px; z-index: 99;
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
}
.skip:focus{ left: var(--gut); top: 10px; }

/* ==========================================================================
   kelime markası — CSS maskesi
   Alt sayfalarda 25 path'i tekrar tekrar gömmemek için. Maske + currentColor
   olduğu için renk devralınır; <img> ile bu mümkün değil.
   Ana sayfadaki H1 gömülü kalır: maske desteği olmayan bir tarayıcıda bile
   kelime markası görünmeli.
   ========================================================================== */
.wm{
  display:block; aspect-ratio:428/54; background:currentColor;
  -webkit-mask:url("/assets/logo/lacunate-wordmark.svg") no-repeat center/contain;
          mask:url("/assets/logo/lacunate-wordmark.svg") no-repeat center/contain;
}

/* ==========================================================================
   KADEME MERDİVENİ  (/games/galaxy-fusion)
   Daireler oyunun KENDİ yarıçap merdiveninden ölçekleniyor (14 → 136 px,
   GameData.cs). Uydurma değil, oyunun verisi.
   12. kademenin dairesi YOK: taban çizgisinde tam onun kaplayacağı kadar
   bir boşluk var. Kara delik sitede de bir yokluk olarak duruyor — ve
   etiketi, boşluğun içinde kalan tek etiket.
   ========================================================================== */
.ladder{ margin-top: 28px; }
.ladder-strip{
  display: flex; align-items: flex-end; gap: 18px;
  padding: 0 2px 0 2px; min-height: 190px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.tier{
  flex: none; scroll-snap-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.tier .disc{
  border: 1px solid var(--edge); border-radius: 50%;
  display: block;
}
.tier .nm{
  font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.tier .ix{
  font-family: var(--mono); font-size: 10px; color: #3f4854;
  font-variant-numeric: tabular-nums;
}
.tier:hover .disc{ border-color: var(--ink); }
.tier:hover .nm{ color: var(--ink); }

/* 12. kademe — daire yok, taban çizgisi yok. Yalnız boşluk. */
.tier.void{ border-bottom-color: transparent; }
.tier.void .disc{ border-color: transparent; }
.tier.void .nm{ color: var(--warm); }

@media (max-width: 760px){
  /* Şerit mobilde dikey listeye düşer: 12. kademenin bütün anlamı
     yatay kaydırmanın sonunda ekran dışında kalmasın. */
  .ladder-strip{
    flex-direction: column; align-items: flex-start; gap: 0;
    overflow: visible; min-height: 0;
  }
  .tier{
    flex-direction: row; align-items: center; gap: 16px;
    width: 100%; padding: 11px 0; border-bottom: 1px solid var(--line);
  }
  .tier .ix{ width: 2.2em; }
  .tier .disc{ flex: none; }
  .tier .nm{ font-size: 12px; }
  .tier.void{ border-bottom-color: var(--line); }
}

/* ekran görüntüsü galerisi */
.shots{
  display: grid; gap: 0; background: transparent;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  border-top: 1px solid var(--line); overflow: hidden;
}
.shots figure{
  margin: 0; background: var(--void); aspect-ratio: 9/16;
  display: grid; place-items: center;
  box-shadow: 1px 0 0 0 var(--line), 0 1px 0 0 var(--line);
}
/* ekran görüntüleri sabit oranlı ve satır hep dolu — dikey ayraç burada
   doğru, çünkü ayırdığı şey metin değil görsel. */
.shots figure .label{ color: #39424d; }

/* yol haritası */
.road{ list-style: none; padding: 0; margin: 22px 0 0; }
.road li{
  display: grid; grid-template-columns: 12px 1fr; gap: 18px; align-items: baseline;
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
.road li::before{ content: ""; width: 7px; height: 7px; border: 1px solid var(--muted); }
.road li.now::before{ background: var(--warm); border-color: var(--warm); }
.road li b{ font-family: var(--display); font-weight: 500; letter-spacing: .02em; }
.road li span{ color: var(--muted); font-size: 15px; display: block; }