/* 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: kanit duvari ---------- */

.depo-izgara { list-style: none; margin: 0 0 40px; padding: 0;
               columns: clamp(160px, 15vw, 220px);
               column-gap: clamp(10px, 2.5vw, 24px); }
.depo-izgara li { break-inside: avoid; margin: 0 0 clamp(14px, 2.5vw, 28px);
                  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; }
.parca img.makine { image-rendering: pixelated; }
.parca:focus-visible { outline: 1px solid var(--murekkep); outline-offset: 3px; }
.kimlik { display: block; margin-top: 5px; font-size: 10px;
          letter-spacing: .12em; color: #4a4a4a; }
.depo-izgara li:hover .kimlik { color: var(--murekkep); }

.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: rgba(0, 0, 0, .94); }
.kayit img { max-width: min(56vw, 900px); max-height: 76vh;
             width: auto; height: auto; }
.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-kapat { position: absolute; top: 18px; right: 22px;
               border: 1px solid #333; background: none; padding: 8px 14px;
               color: var(--soluk); font: inherit; font-size: 12px;
               letter-spacing: .2em; cursor: pointer; }
.kayit-kapat:hover, .kayit-kapat:focus-visible { color: var(--murekkep);
               border-color: var(--murekkep); }

/* ---------- 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; }
  .kayit { flex-direction: column; align-items: flex-start;
           overflow: auto; }
  .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; }
}

/* fondaki cizimler: makine dilinde, los */
.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: .16; mix-blend-mode: screen;
                    image-rendering: pixelated; }
@media (max-width: 720px) { .fon-cizimler img { width: 52vw; opacity: .13; } }