/* ogedeus — makine arsivi.
   Palet: saf #000 zemin, saf #fff murekkep, #666 soluk, #2a2a2a cizgi.
   Renk aksani yok; sok, bir karelik tam ters cevirmeden gelir. */

:root {
  --zemin: #000;
  --murekkep: #fff;
  --soluk: #666;
  --cizgi: #2a2a2a;
  --gecis: 420ms;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--zemin); color: var(--murekkep); }
body { font: 400 15px/1.7 ui-monospace, Menlo, Consolas, monospace; }

html.ters { filter: invert(1); }

#sahne { min-height: 100%; padding: clamp(16px, 5vw, 64px); }
body.plan-acik #sahne { padding: 0; }

#perde { position: fixed; inset: 0; background: var(--zemin); pointer-events: none;
         opacity: 0; transition: opacity var(--gecis) ease; z-index: 40; }
#perde.kapali { opacity: 1; }

.plan-baslik { letter-spacing: .34em; text-transform: uppercase;
               color: var(--soluk); font-size: 12px; margin: 0 0 clamp(24px, 6vh, 64px); }
.uyari { color: var(--soluk); font-size: 12px; margin: 0 0 20px; }
.cikis { color: var(--soluk); font-size: 12px; letter-spacing: .2em; }
.cikis:hover, .cikis:focus-visible { color: var(--murekkep); }

/* ---------- plan: makine arsivi semasi ---------- */

.plan { position: relative; min-height: 100dvh; overflow: hidden; }

.yilan-fon { position: absolute; inset: 0; z-index: 0; }

.wordmark { position: relative; z-index: 2; display: block;
            margin: clamp(28px, 7vh, 84px) auto 0; }

.plan .uyari { position: relative; z-index: 2; text-align: center; margin-top: 16px; }

.sema { position: absolute; inset: 0; z-index: 1; }
.sema-cizgi { position: absolute; inset: 0; width: 100%; height: 100%; }
.sema-cizgi polyline { fill: none; stroke: var(--cizgi); stroke-width: 1px; }

.dugum { position: absolute; transform: translate(-50%, -50%);
         display: flex; flex-direction: column; gap: 6px;
         min-width: 168px; padding: 16px 18px;
         border: 1px solid #333; background: rgba(0, 0, 0, .78);
         color: var(--murekkep); text-decoration: none; }
.dugum-ad { font-size: 19px; }
.dugum-not { font-size: 11px; color: var(--soluk); letter-spacing: .08em; }
a.dugum:hover, a.dugum:focus-visible { border-color: var(--murekkep); }
a.dugum:focus-visible { outline: 1px solid var(--murekkep); outline-offset: 4px; }
.dugum[data-durum="kapali"] { border-style: dashed; color: var(--soluk); }

.nisan { position: fixed; z-index: 3; pointer-events: none;
         background: rgba(255, 255, 255, .13); }
.nisan.dikey { top: 0; bottom: 0; left: 0; width: 1px; }
.nisan.yatay { left: 0; right: 0; top: 0; height: 1px; }
.nisan-okuma { position: fixed; right: 14px; bottom: 44px; z-index: 3;
               pointer-events: none; font-size: 11px; color: #4a4a4a; }

.durum-kose { position: absolute; top: 16px; right: 18px; z-index: 2;
              font-size: 11px; color: var(--soluk); }

.serit { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
         display: inline-flex; width: max-content; white-space: nowrap;
         padding: 10px 0; border-top: 1px solid #1c1c1c;
         font-size: 11px; color: #575757;
         animation: serit-kay 48s linear infinite; }
.serit:hover { animation-play-state: paused; }
.serit.sabit { animation: none; width: 100%; overflow: hidden; }
@keyframes serit-kay { to { transform: translateX(-50%); } }

.boot { position: absolute; inset: 0; z-index: 8; background: var(--zemin);
        padding: clamp(24px, 8vh, 96px) clamp(20px, 6vw, 72px);
        transition: opacity 380ms ease; }
.boot p { margin: 0 0 6px; font-size: 13px; color: #bbb; }
.boot.soner { opacity: 0; pointer-events: none; }

/* ---------- depo: karanlik arsiv ---------- */

.depo-izgara { list-style: none; margin: 0 0 40px; padding: 0;
               columns: clamp(200px, 21vw, 320px);
               column-gap: clamp(14px, 3vw, 36px); }
.depo-izgara li { break-inside: avoid; margin: 0 0 clamp(20px, 3.5vw, 44px);
                  perspective: 720px;
                  transform: rotate(var(--egim, 0deg)); }
.parca { display: block; width: 100%; padding: 0; margin: 0;
         border: 0; background: none; cursor: pointer; }
.parca img { width: 100%; height: auto; display: block;
             mix-blend-mode: screen; opacity: .88;
             animation: plaka-salinim 16s ease-in-out infinite alternate; }
.parca img.donen { animation-name: plaka-devir;
                   animation-timing-function: linear;
                   animation-direction: normal; }
.parca img.makine { image-rendering: pixelated; }
.depo-izgara li.uyur img { animation-play-state: paused; }
.parca:focus-visible { outline: 1px solid var(--murekkep); outline-offset: 3px; }
.kimlik { display: block; margin-top: 6px; font-size: 10px;
          letter-spacing: .12em; color: #4a4a4a; }
.depo-izgara li:hover .kimlik { color: var(--murekkep); }

@keyframes plaka-salinim {
  from { transform: rotateY(-17deg) rotateX(4deg); }
  to   { transform: rotateY(17deg) rotateX(-4deg); }
}
@keyframes plaka-devir { to { transform: rotateY(360deg); } }

/* Isaretci plakaya gelince makine plakayi duzler ve aydinlatir. */
@media (pointer: fine) {
  .parca:hover img, .parca:focus-visible img {
    animation: none; transform: none;
    transition: transform 420ms ease, filter 420ms ease, opacity 420ms ease;
    opacity: 1; filter: drop-shadow(0 0 20px rgba(255, 255, 255, .25));
  }
}

.kayit { position: fixed; inset: 0; z-index: 30;
         display: flex; align-items: center; justify-content: center;
         gap: clamp(20px, 4vw, 56px); padding: clamp(16px, 5vw, 64px);
         background: #000; }
.kayit-sahne { perspective: 1000px; display: flex;
               align-items: center; justify-content: center; }
.kayit img { max-width: min(56vw, 900px); max-height: 76vh;
             width: auto; height: auto; }
.kayit img.kayit-plaka { mix-blend-mode: screen;
             animation: kayit-salinim 9s ease-in-out infinite alternate; }
.kayit img.makine { image-rendering: pixelated; }
.kayit img.kagit { mix-blend-mode: normal; animation: none; }
@keyframes kayit-salinim {
  from { transform: rotateY(-21deg); }
  to   { transform: rotateY(21deg); }
}
.kayit-yan { display: flex; flex-direction: column;
             align-items: flex-start; gap: 18px; }
.kayit-veri { margin: 0; font-size: 12px; line-height: 1.9; min-width: 200px; }
.kayit-veri dt { color: var(--soluk); float: left; clear: left;
                 width: 76px; }
.kayit-veri dd { margin: 0 0 0 88px; }
.renk-ornek { display: inline-block; width: 11px; height: 11px;
              border: 1px solid #333; vertical-align: baseline; }
.kayit-kaynak, .kayit-kapat { border: 1px solid #333; background: none;
              padding: 8px 14px; color: var(--soluk); font: inherit;
              font-size: 12px; letter-spacing: .2em; cursor: pointer; }
.kayit-kaynak:hover, .kayit-kaynak:focus-visible,
.kayit-kapat:hover, .kayit-kapat:focus-visible {
              color: var(--murekkep); border-color: var(--murekkep); }
.kayit-kapat { position: absolute; top: 18px; right: 22px; }

/* ---------- dar ekran ---------- */

@media (max-width: 720px) {
  .sema { position: relative; inset: auto; display: flex;
          flex-direction: column; gap: 14px;
          padding: clamp(24px, 8vh, 56px) 20px 96px; }
  .sema-cizgi { display: none; }
  .dugum { position: static; transform: none;
           left: auto !important; top: auto !important; }
  .durum-kose { position: fixed; }
  .depo-izgara { columns: 2; column-gap: 12px; }
  .kayit { flex-direction: column; align-items: flex-start;
           overflow: auto; }
  .kayit-sahne { width: 100%; }
  .kayit img { max-width: 100%; max-height: 56vh; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --gecis: 1ms; }
  html.ters { filter: none; }
  .serit { animation: none; width: 100%; overflow: hidden; }
  .depo-izgara li { transform: none; }
  .parca img, .kayit img.kayit-plaka { animation: none; transform: none; }
}

/* fondaki cizimler: makine dilinde, los. Yuklenene dek gorunmez,
   gelince yumusakca belirir. */
.fon-cizimler { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.fon-cizimler img { position: absolute; width: clamp(200px, 24vw, 440px);
                    height: auto; opacity: 0; mix-blend-mode: screen;
                    image-rendering: pixelated;
                    transition: opacity 700ms ease; }
.fon-cizimler img.yuklendi { opacity: .16; }
.fon-cizimler img.ikiz { image-rendering: auto; }
.fon-cizimler img.ikiz.yuklendi { opacity: .2; }
@media (max-width: 720px) {
  .fon-cizimler img { width: 52vw; }
  .fon-cizimler img.yuklendi { opacity: .13; }
}

/* yem sayaci + tebrik (wordmark tamamen yenince) */
.yem-durum { position: absolute; top: 36px; right: 18px; z-index: 2;
             font-size: 11px; color: var(--soluk); letter-spacing: .12em; }
.tebrik { position: fixed; inset: 0; z-index: 50; background: var(--zemin);
          display: flex; flex-direction: column; gap: 16px;
          align-items: center; justify-content: center; text-align: center; }
.tebrik-buyuk { margin: 0; font-size: clamp(30px, 7vw, 72px);
                letter-spacing: .3em; text-transform: uppercase;
                animation: tebrik-yanip 900ms steps(2) infinite; }
.tebrik-kucuk { margin: 0; font-size: 12px; color: var(--soluk);
                letter-spacing: .18em; }
@keyframes tebrik-yanip { 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) {
  .tebrik-buyuk { animation: none; }
}

/* ---------- gezi: tel-kafes dunya ---------- */

.gezi-tuval { display: block; width: 100%;
              height: clamp(320px, 62vh, 680px); }
.gezi-hud { margin: 18px 0 0; font-size: 12px; color: var(--soluk);
            letter-spacing: .08em; line-height: 1.9; min-height: 96px; }
.gezi-hud p { margin: 0; }
.gezi-hud .buyuk { color: var(--murekkep); font-size: 16px;
                   letter-spacing: .14em; }
.gezi-yardim { font-size: 11px; color: #4a4a4a; margin: 4px 0 18px;
               letter-spacing: .12em; }