/* postrockmusic — oda
   Fotograf: Onder Cakirtas. Pencerenin disi: NASA / NPS / Commons (kamu mali).

   Iki kadraj var: yatay ekran icin yatay fotograf, dikey ekran icin dikey.
   Ayni oda, farkli aci — bu yuzden camlarin, ekranin ve kolonun yeri de
   farkli. Sinir tek bir sart: ekranin orani 1'den buyukse yatay.

   Tek kural: konumlar odanin oraninda, perspektif dortgenleri kucuk
   tasarim kutulari + olcek carpani ile kurulur. Boylece cam, ekran ve kolon
   fotografla milimetrik hizali kalir — ekran ne olursa olsun. */

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; background: #EDEBE7; }

body {
  font-family: 'PRM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  color: #23231f;
}

@font-face {
  font-family: 'PRM Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/plexsans-lat.woff2?v=1784972196) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: 'PRM Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/plexsans-ext.woff2?v=1784972196) format('woff2');
  /* Turkce: S s G g I buradan */
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- sahne ---------- */

.stage { position: fixed; inset: 0; overflow: hidden; background: #EDEBE7; }
body.dark .stage { background: #171310; }

/* Oda her zaman ekran genisligini doldurur.
   - Ekran fotograftan BASIK ise (genis monitor): fotograf ekrandan uzun kalir,
     usttu ve alti kirpilir. Kirpilan yer tavan ve zemin — orasi bos.
   - Ekran fotograftan UZUN ise (telefon): fotograf ortalanir, ustte ve altta
     bosluk kalir. O bosluga .fill girer.
   Boylece sloganin ya da pencerenin yanlardan kirpilmasi hic olmaz. */
.room {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  aspect-ratio: 3392 / 5056;      /* dikey kadraj */
  z-index: 1;
}

/* Fotografin kenar satiri dikeyde uzatilir: duvar duvar, zemin zemin gibi
   devam eder. Duz bir renk isi gormezdi — yatay kadrajin ust satiri hem cam
   hem duvar tasiyor, ortalamasi ikisine de benzemiyor. */
.fill {
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--ext-top), var(--ext-bot);
  background-size: 100% 50.2%, 100% 50.2%;
  background-position: top, bottom;
  background-repeat: no-repeat;
  --ext-top: url(/assets/edge-room-d-top.png?v=1784972196);
  --ext-bot: url(/assets/edge-room-d-bot.png?v=1784972196);
}
.fill.night {
  --ext-top: url(/assets/edge-room-d-n-top.png?v=1784972196);
  --ext-bot: url(/assets/edge-room-d-n-bot.png?v=1784972196);
}

.photo {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; display: block;
  pointer-events: none;
}

/* Gece hali gunduzun uzerinde durur; opaklikla acilip kapanir.
   Isik sonerken 1.1 sn, yanarken 0.75 sn — sonmek her zaman daha yavas. */
.photo.night, .outside.night, .fill.night {
  opacity: 0;
  transition: opacity 750ms ease-in;
}
body.dark .photo.night, body.dark .outside.night, body.dark .fill.night {
  opacity: 1;
  transition: opacity 1100ms ease-out;
}
/* Ilk boyama: gece kayitliysa oda dogrudan karanlik acilsin. */
body.boot .photo.night, body.boot .outside.night, body.boot .fill.night,
body.boot .glare { transition: none; }

/* ---------- pencerenin disi ---------- */

.outside, .glare {
  position: absolute;
  left: 0; top: 10.8643%;
  width: 34.4634%; height: 32.0392%;
  clip-path: url(#panes-d);
  pointer-events: none;
}
.outside {
  z-index: 2;
  object-fit: cover;
  filter: saturate(0.90) brightness(1.03);
}
/* camdaki yansima: sol ustten inen yumusak isik.
   Pencereyi "duvarda acilmis delik" olmaktan cikarir. */
.glare {
  z-index: 3;
  background: linear-gradient(148deg,
    rgba(255,255,255,0.30) 0%,
    rgba(255,255,255,0.12) 26%,
    rgba(255,255,255,0.02) 52%,
    rgba(255,255,255,0.00) 74%);
  transition: opacity 900ms ease;
}
/* Gece disarida gun isigi yok: yansima neredeyse kaybolur. */
body.dark .glare { opacity: 0.18; }

/* ---------- dizustu ekrani ----------
   Tasarim kutusu once matrix3d ile ekranin dortgenine oturur (goruntu
   pikselinde), sonra olcek carpani ile ekran olcegine iner. Kutunun orani
   dortgenin oranina esit tutulur — yoksa harfler ezilirdi. */

.screen {
  position: absolute; z-index: 4;
  left: 44.4870%; top: 41.0463%;
  width: 495px; height: 460px;
  transform-origin: 0 0;        /* transform'u JS yazar: scale(k) + perspektif matrisi */
  pointer-events: none;
}
.screen-in {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 24px 14px;
  text-align: center;
  background: radial-gradient(120% 90% at 50% 44%, rgba(150,168,190,0.16), rgba(0,0,0,0) 70%);
}
.scr-label {
  font-size: 26px; letter-spacing: 0.30em; color: #8d949e; text-transform: uppercase;
}
/* Punto ölçüyle kuruldu, tahminle degil: kutunun ic genisligi 467 piksel,
   en uzun kelime ("Astronaut") 100 puntoda 442 piksel. 100 punto tam oturur;
   ustune cikinca kelime ortasindan kirilip klavyenin uzerine tasiyordu. */
.scr-band {
  font-size: 100px; line-height: 1.06; color: #f2f4f7; font-weight: 400;
  max-width: 100%; overflow-wrap: break-word;
}
.scr-song {
  font-size: 46px; line-height: 1.15; color: #aeb4bd;
  max-width: 100%; overflow-wrap: break-word;
}
/* Dikey kadrajda dizustu ekrani 3392 pikselin ancak %12'si: iki satir metin
   okunmaz olurdu. Orada yalniz grubun adi yazar, buyuk. Sarki adi kosedeki
   sessiz satirda ve isletim sisteminin oynatma bilgisinde durur. */
.scr-label, .scr-song { display: none; }

/* ---------- kolon uzerindeki calma tusu ---------- */

.play {
  position: absolute; z-index: 4;
  left: 43.3550%; top: 52.4328%;
  width: 393px; height: 735px;
  transform-origin: 0 0;        /* transform'u JS yazar */
  appearance: none; background: none; border: 0; padding: 0;
  cursor: pointer; color: #e9ebee;
}
.play-in { position: absolute; inset: 0; display: grid; place-items: center; }
.ico { width: 300px; height: 300px; opacity: 0.80; transition: opacity 700ms ease; }
.play:hover .ico, .play:focus-visible .ico { opacity: 1; }
.play:focus-visible { outline: 3px solid #e9ebee; outline-offset: -18px; }
.play .bars { display: none; }
.play[data-on="1"] .tri { display: none; }
.play[data-on="1"] .bars { display: block; }
.play[data-busy="1"] .ico { opacity: .38; }

/* ---------- isik anahtari ----------
   Elektrik panosundaki uyari ucgeni. Gece kendisi zaten parliyor; gunduz
   sadece bir etiket. Ustune hicbir sey cizmiyoruz.

   Ucgen dikey kadrajda 17 piksel kadar kaliyor — parmak icin cok kucuk.
   Bu yuzden dugme ucgenin MERKEZINE oturur ve en az 44 piksel olur:
   gorunum degismez, dokunma alani buyur. */
.switch {
  position: absolute; z-index: 4;
  left: 57.9894%; top: 33.8971%;
  width: 3.3608%; height: 2.8481%;
  min-width: 44px; min-height: 44px;
  transform: translate(-50%, -50%);
  appearance: none; border: 0; padding: 0;
  background: radial-gradient(circle at 50% 50%,
              rgba(255,214,120,0.00) 42%, rgba(255,214,120,0) 70%);
  cursor: pointer;
  border-radius: 8%;
  transition: background 700ms ease;
}
.switch:hover, .switch:focus-visible {
  background: radial-gradient(circle at 50% 50%,
              rgba(255,214,120,0.20) 26%, rgba(255,214,120,0) 64%);
}
.switch:focus-visible { outline: 2px solid rgba(255,214,120,.85); outline-offset: 4px; }

/* ---------- kose ---------- */

.corner {
  position: fixed; z-index: 5;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
}
.ctl {
  appearance: none; border: 0; background: none; padding: 8px 4px;
  font: inherit; font-size: 12px; letter-spacing: 0.22em; text-transform: lowercase;
  cursor: pointer;
  transition: opacity 600ms ease, letter-spacing 600ms ease;
}
.ctl:hover, .ctl:focus-visible { opacity: 1; letter-spacing: 0.30em; }

.nowline {
  position: fixed; z-index: 5;
  left: max(18px, env(safe-area-inset-left));
  bottom: max(20px, env(safe-area-inset-bottom));
  right: 84px;
  font-size: 11px; letter-spacing: 0.14em; line-height: 1.5;
  display: none;
}

/* Kose yazilari kimi zaman acik zeminde, kimi zaman koyu zeminde durur.
   Rengi ve arkasindaki yumusak halkayi birlikte cevirmek okunurlugu
   zemine bagli olmaktan kurtariyor. */
.ctl, .nowline {
  color: #3B372F; opacity: .78;
  text-shadow: 0 0 3px rgba(255,255,255,.75), 0 1px 2px rgba(255,255,255,.55);
}
body.dark .ctl, body.dark .nowline {
  color: #CFC6BA;
  text-shadow: 0 0 4px rgba(0,0,0,.70), 0 1px 3px rgba(0,0,0,.55);
}

/* ---------- gizli metin katmani ---------- */

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.defs { position: absolute; width: 0; height: 0; }

/* ---------- yatay kadraj ----------
   Ekranin orani 1'den buyukse yatay fotograf. Sinir tam 1: altinda dikey
   fotograf her zaman daha az kirpiliyor, ustunde yatay. */

@media (min-aspect-ratio: 1/1) {
  .room { aspect-ratio: 5056 / 3372; }

  .fill {
    --ext-top: url(/assets/edge-room-y-top.png?v=1784972196);
    --ext-bot: url(/assets/edge-room-y-bot.png?v=1784972196);
  }
  .fill.night {
    --ext-top: url(/assets/edge-room-y-n-top.png?v=1784972196);
    --ext-bot: url(/assets/edge-room-y-n-bot.png?v=1784972196);
  }

  .outside, .glare {
    top: 0;
    width: 35.3817%; height: 43.7426%;
    clip-path: url(#panes-y);
  }

  .screen { left: 47.0352%; top: 39.8488%; width: 625px; height: 460px; }
  .screen-in { padding: 32px 30px; }
  .scr-label, .scr-song { display: block; }
  .scr-band { font-size: 76px; }

  .play   { left: 46.0977%; top: 60.8096%; width: 461px; height: 735px; }
  .switch { left: 59.0487%; top: 28.3939%; width: 3.0261%; height: 4.9525%; }
}

/* Kosedeki satir yalniz dizustu ekraninin okunmayacagi kadar kucuk kaldigi
   yerlerde gorunur: dikey kadrajda her zaman, yatayda dar ekranlarda. */
@media (max-aspect-ratio: 1/1), (max-width: 1100px) {
  .nowline { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .photo.night, .outside.night, .fill.night, .glare, .ico { transition: none; }
}

/* ---------- dil ----------
   Iki dilli metinler iki span olarak durur, biri gizli. Tek istisna dizustu
   ekranindaki etiket: onu JS yazar, cunku o eleman dikey kadrajda hic
   gorunmemeli ve iki kural birbirine takiliyordu. */
[data-en] { display: none; }
html[lang="en"] [data-en] { display: inline; }
html[lang="en"] [data-tr] { display: none; }