/* Duz varlik vaka calismalari · ortak kaliplar.
   Kullananlar: FORGE, REFORM, MELODY MAKER.

   BALKON, SINDRAGOSA ve ARC REACTOR fotograf anlatilariydi: kareler tam
   genislikte akiyor, kalip da fotografin oranina gore seciliyordu. Bu
   projelerde ise varliklarin cogu fotograf degil; kilavuz sayfasi, dergi
   spreadi, ekran maketi, gomulu prototip. Hepsi kendi cercevesi olan duz
   belgeler. Bunlari tam kanamali fotograf kaliplarina sokmak isi yanlis
   gosteriyor, o yuzden burada kendi kaliplari var:

     .sheetRow   kilavuz sayfalari, belge gibi cerceveli panellerde
     .markStage  marka isareti tek basina, yaninda kendi gerekcesi
     .swatchSet  palet, ekran goruntusu yerine gercek renk alanlari olarak
     .reelGrid   hareket filmleri (1 yatay + 3 dikey gomulu oynatici)
     .protoDeck  sekmeli canli prototip / 3B model cercevesi
     .sourceRow  disaridaki ozgun proje kaynaklarina cikis

   Ritim, tipografi ve bolum basliklari yine case-editorial.css'ten geliyor; bu
   dosya onun ustune biniyor. Palet ve kahraman perdesi projeden projeye
   degistigi icin burada degil, her sayfanin kendi <style> blogunda. */

/* Orani CSS'te tanimli olmayan karelere belgede width/height oznitelikleri
   verildi ki tarayici yeri bastan ayirsin (yoksa gec yuklenen gorsel ustteki
   bolumleri buyutup #capa hedefini kaciriyor). Ama ortak stildeki
   img{width:100%} yuksekligi serbest birakmiyor: oznitelikteki piksel degeri
   oldugu gibi uygulanip kareleri dikey esnetiyordu. Yukseklik otomatiye
   alininca oran yine ozniteliklerden turuyor, sekil de dogru kaliyor. */
main img[width][height]:not(.heroImage) {
  height: auto;
}

/* Fotograf kalibinin orani sayfadan sayfaya degisiyor; FORGE'ta 2:1 crop bazi
   karelerin ustunu kesiyordu, oran artik disaridan verilebiliyor. */
.barWide img {
  aspect-ratio: var(--ar, 2 / 1);
}

/* Bu iki projenin kahraman karesi de aydinlik bir urun cekimi (FORGE'ta beyaz
   ambalajlar, REFORM'da beyaz zeminde kutu); fotograf anlatilari icin yazilan
   perde burada basligi tasiyacak kontrasti vermiyordu. Karartma sola ve
   asagiya, yani yazinin durdugu koseye yiginiyor; karenin sagi acik kaliyor. */
.hero .heroShade {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.62) 0%, transparent 34%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.34) 46%, transparent 76%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.58) 0%, transparent 46%);
}

/* ---- Marka isareti ------------------------------------------------------ */
.markStage {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.78fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
  padding: clamp(72px, 10vw, 150px) clamp(24px, 5vw, 76px);
  background: var(--white);
}

.markStage figure {
  margin: 0;
}

.markStage img {
  border: 1px solid var(--line);
}

.markPitch p {
  margin: 0;
  color: #5c5860;
  font-size: 16px;
  line-height: 1.55;
}

/* Vurgu rengi projeden projeye degisiyor; her sayfa --accent ile veriyor. */
.markPitch .tagline {
  margin: 0 0 26px;
  color: var(--accent, currentColor);
  font-size: clamp(24px, 2.8vw, 40px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* Ayni kalibin koyu hali: varligin kendisi zaten gurultuluyse (MELODY MAKER'in
   Breaking Rules kapagi) beyaz panel onu boguyordu. */
.markStage.onDark {
  background: var(--ink);
  color: var(--white);
}

.markStage.onDark img {
  border-color: rgba(255, 255, 255, 0.18);
}

.markStage.onDark .markPitch p {
  color: rgba(255, 255, 255, 0.68);
}

/* ---- Kilavuz sayfalari -------------------------------------------------- */
/* Kilavuz sayfalari markanin kendi belgeleri; kenarlik onlari fotograf degil
   dokuman olarak okutuyor. */
.sheetRow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(18px, 2.6vw, 40px);
  padding: 0 clamp(24px, 5vw, 76px) clamp(72px, 9vw, 130px);
  background: var(--paper);
}

.sheetRow.onDark {
  background: var(--ink);
}

.sheetRow figure {
  margin: 0;
}

.sheetRow img {
  border: 1px solid var(--line);
  background: var(--white);
}

.sheetRow.onDark img {
  border-color: rgba(255, 255, 255, 0.16);
}

.sheetRow figcaption {
  margin-top: 12px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.sheetRow.onDark figcaption {
  color: rgba(255, 255, 255, 0.6);
}

/* Ayni izgara, bu kez belge degil fotograf tasiyor: cerceve kalkiyor, kareler
   ortak bir orana kirpiliyor. */
.sheetRow.asPhoto img {
  border: 0;
  aspect-ratio: var(--ar, 16 / 9);
  object-fit: cover;
}

/* ---- Koyu bolum basligi ------------------------------------------------- */
/* .foodStory acik zeminli; hareket ve fiziksel uretim bolumleri koyu zeminde
   basliyor, bu yuzden ayni baslik satiri koyu bir yatakta tekrarlaniyor. */
.darkHead {
  padding: 40px clamp(24px, 5vw, 76px) 0;
  background: var(--ink);
  color: var(--white);
}

.darkHead .foodTitleRow {
  padding-bottom: clamp(44px, 6vw, 80px);
}

.darkHead .foodTitleRow p {
  color: rgba(255, 255, 255, 0.62);
}

/* Koyu zeminde duran gomulu cerceveler icin yatak; alt bosluk cercevenin kendi
   alt payindan geliyor. */
.darkBed {
  padding-top: clamp(52px, 7vw, 104px);
  background: var(--ink);
}

/* ---- Palet -------------------------------------------------------------- */
/* Kilavuzdaki palet sayfasinin ekran goruntusunu koymak yerine renkler burada
   gercekten basiliyor; hem daha keskin, hem degerler kopyalanabilir. */
/* Sutun sayisi paletin buyuklugune gore degisiyor: FORGE'ta uc renk, REFORM'da
   dort. Sayfa --swatches ile veriyor. */
.swatchSet {
  display: grid;
  grid-template-columns: repeat(var(--swatches, 3), minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
}

/* Dikey alanlar: yanindaki yazi karakteri sayfasi 16:9 ve uzun; kare rengeler
   onun yaninda kisa kaliyordu, sutun yuksekligi boylece esitleniyor. */
.swatch {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: var(--swatch-ar, 0.62);
  padding: clamp(16px, 1.8vw, 26px);
  color: var(--white);
  font-weight: 700;
}

.swatch b {
  font-size: 11px;
  letter-spacing: 0.16em;
}

.swatch span {
  margin-top: 8px;
  font-family: "Courier New", monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  opacity: 0.72;
}

/* ---- Tipografi + palet ikilisi ------------------------------------------ */
.typeRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
  padding: 0 clamp(24px, 5vw, 76px) clamp(72px, 9vw, 130px);
  background: var(--paper);
}

.typeRow figure {
  margin: 0;
}

.typeRow img {
  border: 1px solid var(--line);
}

.typeRow figcaption,
.swatchSet + figcaption {
  margin-top: 12px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

/* ---- Hareket ------------------------------------------------------------ */
.reelGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 30px);
  padding: clamp(46px, 6vw, 96px) clamp(24px, 5vw, 76px);
  background: var(--ink);
  color: var(--white);
}

.reelGrid figure {
  margin: 0;
}

.reelWide {
  grid-column: 1 / -1;
}

.reelFrame {
  position: relative;
  overflow: hidden;
  background: #191919;
}

.reelWide .reelFrame {
  aspect-ratio: 16 / 9;
}

.reelTall .reelFrame {
  aspect-ratio: 9 / 16;
}

.reelFrame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.reelGrid figcaption {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

/* ---- Sekmeli prototip / 3B model ---------------------------------------- */
.protoDeck {
  margin: 0 clamp(24px, 5vw, 76px) clamp(72px, 9vw, 130px);
  border: 1px solid var(--line);
  background: var(--white);
}

.protoBar,
.protoFoot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: clamp(18px, 2vw, 26px) clamp(18px, 2.2vw, 30px);
}

.protoBar {
  border-bottom: 1px solid var(--line);
}

.protoFoot {
  border-top: 1px solid var(--line);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.protoBar strong {
  display: block;
  margin-top: 8px;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.protoBar .eyebrow {
  color: var(--tan);
}

.protoTabs {
  display: flex;
  gap: 8px;
}

.protoTabs button {
  padding: 10px 18px 9px;
  border: 1px solid var(--line);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.protoTabs button[aria-selected="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}

.protoFrame {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #f6f4f0;
}

.protoFrame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.protoFoot a {
  transition: opacity 160ms ease;
}

.protoFoot a:hover,
.protoFoot a:focus-visible {
  opacity: 0.62;
  outline: none;
}

/* Koyu bolumde duran ayni kalip. */
.protoDeck.onDark {
  border-color: rgba(255, 255, 255, 0.2);
  background: #1b1826;
  color: var(--white);
}

.protoDeck.onDark .protoBar,
.protoDeck.onDark .protoFoot {
  border-color: rgba(255, 255, 255, 0.2);
}

.protoDeck.onDark .protoTabs button {
  border-color: rgba(255, 255, 255, 0.28);
}

.protoDeck.onDark .protoTabs button[aria-selected="true"] {
  border-color: var(--white);
  background: var(--white);
  color: var(--ink);
}

.protoDeck.onDark .protoFrame {
  background: #12101a;
}

/* ---- Tek varlik + metin -------------------------------------------------- */
/* Kalip case-editorial.css'te; burada orani disaridan alinabilir hale geliyor
   (TOKYO 1964'te kapak fotograflari 0.75) ve koyu bir varyant kazaniyor. */
.soloShot img {
  aspect-ratio: var(--ar, 0.8);
}

.soloShot.onDark {
  background: var(--ink);
  color: var(--white);
}

.soloShot.onDark figcaption b {
  color: rgba(255, 255, 255, 0.55);
}

/* ---- Kunye notu --------------------------------------------------------- */
/* Kucuk punto dipnot: projenin ticari durumu, hayran calismasi oldugu ya da
   maketlerin nasil uretildigi gibi soylenmesi gereken ama anlatinin ritmini
   bozmamasi gereken seyler. */
.caseNote {
  padding: 0 clamp(24px, 5vw, 76px) clamp(76px, 10vw, 130px);
  background: var(--paper);
}

.caseNote p {
  max-width: 680px;
  margin: 0;
  color: color-mix(in srgb, var(--ink) 58%, transparent);
  font-size: 13px;
  line-height: 1.6;
}

/* ---- Kaynaklar ---------------------------------------------------------- */
.sourceRow {
  display: grid;
  gap: 0;
  padding: 0 clamp(24px, 5vw, 76px) clamp(76px, 10vw, 140px);
  background: var(--paper);
}

.sourceRow a {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  transition: padding 180ms ease;
}

.sourceRow a:first-child {
  border-top: 1px solid var(--line);
}

/* Kaynaklardan sonra kunye notu geliyorsa aradaki bosluk kapaniyor; ikisi tek
   blok gibi okunuyor. Destegi olmayan tarayicida yalnizca bosluk buyuk kalir. */
.sourceRow:has(+ .caseNote) {
  padding-bottom: clamp(34px, 4vw, 54px);
}

.sourceRow a:hover,
.sourceRow a:focus-visible {
  padding-right: 10px;
  padding-left: 10px;
  outline: none;
}

@media (max-width: 900px) {
  .markStage,
  .typeRow {
    grid-template-columns: 1fr;
  }

  .reelGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .markStage {
    padding: 64px 22px;
  }

  .sheetRow,
  .typeRow {
    grid-template-columns: 1fr;
    padding-bottom: 64px;
  }

  .swatchSet {
    grid-template-columns: 1fr;
  }

  .swatch {
    aspect-ratio: 2.4;
  }

  .reelGrid {
    grid-template-columns: 1fr;
  }

  .protoDeck {
    margin-right: 22px;
    margin-left: 22px;
    margin-bottom: 64px;
  }

  .protoFrame {
    aspect-ratio: 3 / 4;
  }

  .sourceRow {
    padding-right: 22px;
    padding-left: 22px;
    padding-bottom: 64px;
  }
}