/* Vaka calismasi editoryal dili.

   Ilk olarak BALKON sayfasi icin tasarlandi; SINDRAGOSA da ayni konsepti
   kullaninca stil buraya alindi. Iki sayfa da bu dosyayi cagiriyor, boylece
   ritim, tipografi ve bolum kaliplari tek yerden yonetiliyor.

   Sayfaya ozel olan tek sey renk degiskenleri ve varlik yollari; onlar kendi
   belgelerinde tanimli. */
:root {
  --ink: #0b0b0b;
  --paper: #f3f1ec;
  --white: #ffffff;
  --line: rgba(11, 11, 11, 0.18);
  --orange: #d46022;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img,
video {
  display: block;
  width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Sitenin yapisik baslik cubugu bu sayfada da duruyor, bu yuzden kahraman bolum
   artik tam ekran degil, ekrandan baslik yuksekligi dusulmus kadar. Boylece
   baslik + kahraman birlikte tek ekrana oturuyor. */
.hero {
  position: relative;
  min-height: calc(100svh - var(--site-header-h, 75px));
  overflow: hidden;
  background: #21140c;
  color: var(--white);
}

.heroImage,
.heroShade {
  position: absolute;
  inset: 0;
  height: 100%;
}

.heroImage {
  object-fit: cover;
  object-position: 50% 52%;
  transform: scale(1.015);
}

.heroShade {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, transparent 35%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.58) 0%, transparent 68%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.45) 0%, transparent 40%);
}

/* Kaynak dosyada bu satirda sayfanin kendi VISOLVE logosu vardi. Sayfa siteye
   alininca ustte sitenin ortak baslik cubugu duruyor, iki logo ust uste
   binecekti; marka isareti kaldirildi, satirda yalnizca kategori etiketleri ve
   vaka kunyesi kaldi. Yan bosluk da site olcusune (gutter) esitlendi, boylece
   etiketler ustteki logoyla ayni dikey cizgide basliyor. */
.nav {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px clamp(20px, 5vw, 72px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

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

.navCategories a {
  padding: 9px 12px 8px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: rgba(0, 0, 0, 0.14);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease;
}

.navCategories a:hover,
.navCategories a:focus-visible {
  background: var(--white);
  color: var(--ink);
  outline: none;
}

.heroCopy {
  position: absolute;
  z-index: 2;
  left: clamp(28px, 6vw, 92px);
  /* Blok dibe yapisik degil; fotografin alt kismi acik kalsin diye biraz
     yukari alindi. */
  bottom: clamp(112px, 22vh, 260px);
  /* Baslik tek kelime oldugu icin kaplama yeniden daraltildi; blok kompakt
     kalinca kahraman fotograf acikta kaliyor. */
  width: min(860px, 86vw);
}

.eyebrow,
.sectionIndex,
.heroMeta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
}

.eyebrow.light {
  color: rgba(255, 255, 255, 0.78);
}

.heroCopy .eyebrow {
  margin: 0;
  letter-spacing: 0.28em;
}

.hero h1 {
  /* Baslik buyudukce ust ve alttaki kucuk satirlar ona yapisiyordu; kicker ve
     kunye satiriyla arasindaki bosluk acildi. */
  margin: clamp(24px, 2.8vh, 40px) 0 clamp(34px, 3.6vh, 52px);
  /* Sikisik durmasin diye satir araligi 0.84 -> 0.94, harf araligi -0.075em ->
     -0.04em. Bu sikilik iki kelimelik bir baslikta karakterdi; uc kelimelik bir
     isimde okumayi zorlastiriyordu. */
  font-size: clamp(56px, 9vw, 138px);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.04em;
}

.heroMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 44px;
}

.heroMeta span::before {
  content: "●";
  margin-right: 12px;
  font-size: 6px;
  vertical-align: 2px;
}

.scrollCue {
  position: absolute;
  right: 38px;
  bottom: 34px;
  z-index: 2;
  display: flex;
  gap: 28px;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.intro {
  padding: 36px clamp(24px, 5vw, 76px) 96px;
}

/* Yapisik baslik cubugu bolum baslarini ortmesin diye pay onun yuksekligi
   kadar; degeri mobile-fixes.css veriyor. */
/* Bolum kimlikleri sayfadan sayfaya degisiyor (BALKON: content-production /
   visual-systems, SINDRAGOSA: uretim / isik). Pay kimlige degil, main icindeki
   herhangi bir hedefe veriliyor. */
main [id] {
  scroll-margin-top: calc(var(--site-header-h, 75px) + 28px);
}

/* CLS icin yazilan width/height oznitelikleri sunum ipucu olarak da uygulaniyor;
   img{width:100%} ile birlesince goruntu dikeyde eziliyor. Yukseklik hesaplansin,
   oran ozniteliklerden gelsin. (case-system.css'te ayni kural var.) */
main img[width][height]:not(.heroImage) {
  height: auto;
}

/* Kunye yerine arsive donus baglantisi: sayfada zaten yazan bir bilgiyi
   tekrarlamak yerine bir cikis kapisi. */
.navCase {
  margin: 0;
  transition: opacity 160ms ease;
}

a.navCase:hover,
a.navCase:focus-visible {
  opacity: 0.68;
  outline: none;
}

.sectionIndex {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.introGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.75fr);
  gap: clamp(48px, 9vw, 150px);
  padding: clamp(60px, 9vw, 140px) 0 90px;
}

.intro h2,
.daylight h2,
.filmTeaser h2 {
  margin: 0;
  font-size: clamp(50px, 7vw, 110px);
  line-height: 0.95;
  letter-spacing: -0.065em;
}

.introBody {
  align-self: end;
  font-size: 16px;
  line-height: 1.55;
}

.introBody p {
  margin: 0;
}

.introBody .translation {
  margin-top: 26px;
  color: #6f6b64;
}

.metaGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.metaGrid div {
  padding: 22px 18px 24px 0;
}

.metaGrid div + div {
  padding-left: 18px;
  border-left: 1px solid var(--line);
}

.metaGrid dt {
  margin-bottom: 12px;
  color: #77736d;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.metaGrid dd {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

/* Fotograf bolumu. Ilk kurulumda metin sutunu en genis olan sutundu ve iki
   fotograf 261px'e sikisiyordu; bir fotograf isi icin fazla kucuktu. Oranlar
   ters cevrildi, bosluk kisaldi ve baslik bu bolumde kendi olcegini aliyor,
   boylece dar sutunda da duzgun sariyor. */
.daylight {
  display: grid;
  /* minmax(0,…): aksi halde ortadaki basligin min-content genisligi sutunu
     payindan daha genis tutup fotograflardan yer caliyor. */
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.86fr) minmax(0, 1.1fr);
  gap: clamp(20px, 3.2vw, 52px);
  align-items: center;
  min-height: 110vh;
  padding: 100px clamp(24px, 5vw, 76px);
  background: var(--white);
}

.daylightCopy h2 {
  font-size: clamp(34px, 3.6vw, 54px);
}

.portraitFrame img {
  aspect-ratio: 0.79;
  object-fit: cover;
}

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

.portraitLeft {
  transform: translateY(-11vh);
}

.portraitRight {
  transform: translateY(12vh);
}

.daylightCopy {
  position: relative;
  z-index: 1;
}

.daylightCopy h2 {
  margin: 16px 0 30px;
}

.daylightCopy > p:last-child {
  max-width: 420px;
  color: #5c5953;
  font-size: 15px;
  line-height: 1.55;
}

.filmTeaser {
  display: grid;
  grid-template-columns: 0.74fr 1.26fr;
  min-height: 116vh;
  background: var(--ink);
  color: var(--white);
}

.filmText {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 42px clamp(28px, 6vw, 92px);
}

.sectionIndex.inverse {
  margin-bottom: auto;
  border-bottom-color: rgba(255, 255, 255, 0.35);
}

.filmText h2 {
  margin-top: auto;
}

.filmText p {
  max-width: 430px;
  margin: 30px 0 12vh;
  color: rgba(255, 255, 255, 0.62);
  font-size: 16px;
  line-height: 1.55;
}

/* Dikey film. Yuksekligi ekranla sinirli oldugu icin buyuyebilmesinin tek yolu
   bolumun ekrandan biraz uzun olmasi; sahne 116vh, video da o yuksekligin
   neredeyse tamamini kullaniyor. Metin sutunu de daraltildi. */
.filmStage {
  display: grid;
  place-items: center;
  min-height: 116vh;
  overflow: hidden;
  background: #141414;
}

.filmStage video {
  width: min(64vh, 74%);
  max-height: 106vh;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
}

.foodStory {
  padding: 40px clamp(24px, 5vw, 76px) 120px;
  background: var(--paper);
}

.foodTitleRow {
  display: grid;
  grid-template-columns: 1.5fr 0.5fr;
  gap: clamp(40px, 8vw, 130px);
  align-items: end;
  padding: clamp(70px, 10vw, 150px) 0 90px;
}

.foodTitleRow h2,
.peopleIntro h2,
.nightCopy h2 {
  margin: 0;
  font-size: clamp(54px, 8vw, 126px);
  line-height: 0.9;
  letter-spacing: -0.07em;
}

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

.foodPair {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: clamp(20px, 3.5vw, 56px);
  align-items: end;
}

.foodPair figure,
.barWide,
.peopleGrid figure,
.selectedGrid figure {
  margin: 0;
}

.foodPair img {
  object-fit: cover;
}

.foodMain img {
  aspect-ratio: 1.08;
}

.drinkDetail {
  padding-bottom: 6vw;
}

.drinkDetail img {
  aspect-ratio: 0.74;
}

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

.barWide {
  margin-top: clamp(80px, 11vw, 170px);
}

.barWide img {
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

.barWide figcaption {
  display: flex;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.menuStory {
  padding: 40px clamp(24px, 5vw, 76px) 120px;
  overflow: hidden;
  background: #0f0d0e;
  color: var(--white);
}

.menuLead {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
  gap: clamp(48px, 8vw, 130px);
  align-items: end;
  padding: clamp(70px, 10vw, 150px) 0 clamp(82px, 11vw, 170px);
}

.menuLead h2 {
  margin: 0;
  font-size: clamp(58px, 8.5vw, 136px);
  line-height: 0.88;
  letter-spacing: -0.075em;
}

.menuLeadCopy {
  font-size: 16px;
  line-height: 1.55;
}

.menuLeadCopy p {
  margin: 0;
}

.menuLeadCopy .menuTranslation {
  margin-top: 24px;
  color: rgba(255, 255, 255, 0.48);
}

.menuSystem {
  overflow: hidden;
}

.menuSystem + .menuSystem {
  margin-top: clamp(52px, 7vw, 108px);
}

.menuFood {
  background: #e8dfcf;
  color: #241c20;
}

.menuDrink {
  background: #21181f;
  color: #f4ecdf;
}

.menuSystemHead {
  display: grid;
  grid-template-columns: 0.35fr 1.05fr 0.6fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: end;
  padding: clamp(30px, 4vw, 58px);
  border-bottom: 1px solid currentColor;
}

.menuSystemHead p {
  margin: 0;
}

.menuSystemHead > p:last-child {
  max-width: 420px;
  color: color-mix(in srgb, currentColor 62%, transparent);
  font-size: 14px;
  line-height: 1.55;
}

.menuMode {
  align-self: start;
  padding-top: 10px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.menuSystem h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(48px, 6.6vw, 104px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.055em;
}

.menuPages {
  display: grid;
  grid-template-columns: 1.06fr 0.88fr 0.88fr;
  gap: clamp(16px, 2.5vw, 40px);
  align-items: end;
  padding: clamp(82px, 11vw, 170px) clamp(24px, 4vw, 58px) clamp(58px, 7vw, 108px);
}

.menuPage {
  margin: 0;
}

.menuPageRaised {
  transform: translateY(-6vw);
}

.menuPage img {
  aspect-ratio: 210 / 297;
  object-fit: cover;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}

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

.menuDrink .menuPage figcaption {
  color: rgba(244, 236, 223, 0.58);
}

.menuPdfButton {
  display: flex;
  justify-content: space-between;
  margin: 0 clamp(24px, 4vw, 58px) clamp(30px, 4vw, 58px);
  padding: 18px 0;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  transition: padding 180ms ease;
}

.menuPdfButton:hover {
  padding-right: 10px;
  padding-left: 10px;
}

.peopleStory {
  padding: 40px clamp(24px, 5vw, 76px) 120px;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
}

.peopleIntro {
  display: grid;
  grid-template-columns: 1fr 1.4fr 0.6fr;
  gap: clamp(30px, 5vw, 76px);
  padding-bottom: 100px;
}

.peopleIntro .sectionIndex {
  grid-column: 1 / -1;
}

.peopleIntro h2 {
  grid-column: 1 / 3;
}

.peopleIntro > p {
  align-self: end;
  margin: 0 0 4px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 15px;
  line-height: 1.55;
}

.peopleGrid {
  display: grid;
  grid-template-columns: 1.15fr 0.75fr 0.6fr;
  gap: clamp(18px, 3vw, 44px);
  align-items: start;
}

.peopleGrid img {
  width: 100%;
  object-fit: cover;
}

.seagullFrame img {
  aspect-ratio: 0.8;
}

.flowersFrame {
  margin-top: 13vw !important;
}

.flowersFrame img {
  aspect-ratio: 0.78;
}

.cocktailFrame {
  margin-top: 4vw !important;
}

.cocktailFrame img {
  aspect-ratio: 0.78;
}

.nightHero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #110b07;
  color: var(--white);
}

.nightHero > img,
.nightShade {
  position: absolute;
  inset: 0;
  height: 100%;
}

.nightHero > img {
  object-fit: cover;
}

.nightShade {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.72), transparent 72%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent 50%);
}

.nightCopy {
  position: absolute;
  z-index: 1;
  left: clamp(28px, 6vw, 92px);
  bottom: clamp(62px, 10vh, 130px);
}

.nightCopy h2 {
  margin-top: 18px;
  color: var(--white);
}

.selected {
  padding: 40px clamp(24px, 5vw, 76px) 130px;
  background: var(--white);
}

.selectedHead {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.selectedHead .sectionIndex {
  grid-column: 1 / -1;
}

.selectedHead p {
  grid-column: 2;
  max-width: 420px;
  margin: 66px 0 74px;
  font-size: 16px;
  line-height: 1.55;
}

.selectedGrid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  grid-template-rows: 1fr 1fr;
  gap: clamp(16px, 2vw, 30px);
}

.selectedGrid img {
  height: 100%;
  object-fit: cover;
}

.selectTall {
  grid-row: 1 / 3;
}

.selectTall img {
  aspect-ratio: 0.8;
}

.selectWide img {
  aspect-ratio: 1.85;
}

/* Sayfanin kendi altbilgisi kaldirildi; yerini sitenin ortak altbilgisi aldi,
   bu yuzden .footer* kurallari da silindi. */

@media (max-width: 900px) {
  .nav {
    row-gap: 14px;
  }

  .navCase {
    order: -1;
    width: 100%;
  }

  .introGrid,
  .filmTeaser {
    grid-template-columns: 1fr;
  }

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

  .metaGrid div:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .metaGrid div:nth-child(4) {
    border-top: 1px solid var(--line);
  }

  .daylight {
    grid-template-columns: 1fr 1fr;
    min-height: auto;
  }

  .daylightCopy {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: 30px;
  }

  .portraitLeft,
  .portraitRight {
    transform: none;
  }

  .filmText {
    min-height: 66vh;
  }

  .filmStage {
    min-height: 110vh;
  }

  .foodTitleRow,
  .peopleIntro,
  .menuLead,
  .menuSystemHead {
    grid-template-columns: 1fr;
  }

  .foodTitleRow p {
    max-width: 440px;
  }

  .peopleIntro h2,
  .peopleIntro > p {
    grid-column: 1;
  }

  .menuLeadCopy,
  .menuSystemHead > p:last-child {
    max-width: 520px;
  }

  .menuMode {
    padding-top: 0;
  }

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

  .seagullFrame {
    grid-row: 1 / 3;
  }

  .cocktailFrame,
  .flowersFrame {
    margin-top: 0 !important;
  }
}

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

  .navCase {
    max-width: 90px;
    text-align: right;
    line-height: 1.45;
  }

  .navCategories {
    width: 100%;
  }

  .navCategories a {
    flex: 1;
    padding-right: 8px;
    padding-left: 8px;
    text-align: center;
  }

  .heroCopy {
    left: 22px;
    bottom: 110px;
  }

  /* Dar ekranda isim uc satira bolunuyordu; punto biraz dusuruldu ki
     "Balkon Restoran Bar" iki satirda toplansin. */
  .hero h1 {
    font-size: clamp(46px, 15vw, 76px);
  }

  .scrollCue {
    right: 22px;
    bottom: 24px;
  }

  .intro {
    padding-bottom: 64px;
  }

  .introGrid {
    gap: 44px;
    padding: 64px 0;
  }

  .intro h2,
  .daylight h2,
  .filmTeaser h2 {
    font-size: 48px;
  }

  .metaGrid,
  .daylight {
    grid-template-columns: 1fr;
  }

  .metaGrid div + div,
  .metaGrid div:nth-child(3) {
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .daylight {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .filmText {
    min-height: 75vh;
  }

  .filmStage {
    min-height: 100vh;
  }

  .filmStage video {
    width: 78%;
  }

  .foodStory,
  .menuStory,
  .peopleStory,
  .selected {
    padding-bottom: 76px;
  }

  .foodTitleRow {
    padding: 64px 0;
  }

  .foodTitleRow h2,
  .menuLead h2,
  .peopleIntro h2,
  .nightCopy h2 {
    font-size: 52px;
  }

  .menuLead {
    gap: 38px;
    padding: 64px 0 78px;
  }

  .menuSystemHead {
    gap: 18px;
    padding: 28px 22px 34px;
  }

  .menuSystem h3 {
    font-size: 48px;
  }

  .menuPages {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 64px 22px 54px;
  }

  .menuPage,
  .menuPageRaised {
    width: 84%;
    transform: none;
  }

  .menuPage:nth-child(2) {
    margin-left: auto;
  }

  .menuPage:nth-child(3) {
    width: 72%;
  }

  .menuPdfButton {
    margin: 0 22px 30px;
  }

  .foodPair,
  .peopleGrid,
  .selectedGrid {
    grid-template-columns: 1fr;
  }

  .drinkDetail {
    width: 72%;
    margin-left: auto !important;
    padding: 0;
  }

  .barWide {
    margin-top: 72px;
  }

  .barWide img {
    aspect-ratio: 1.2;
  }

  .peopleIntro {
    padding-bottom: 60px;
  }

  .seagullFrame,
  .selectTall {
    grid-row: auto;
  }

  .flowersFrame {
    width: 72%;
    margin-left: auto !important;
  }

  .cocktailFrame {
    width: 72%;
  }

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

  .selectedHead p {
    grid-column: 1;
    margin: 48px 0 56px;
  }

  .selectedGrid {
    grid-template-rows: auto;
  }

  .selectTall img,
  .selectWide img {
    aspect-ratio: auto;
  }

  .nightHero {
    min-height: 85svh;
  }

  .nightHero > img {
    object-position: 62% 50%;
  }

}

/* ---- Iki sayfada da kullanilan ek kaliplar -------------------------------
   SINDRAGOSA icin yazildi, ARC REACTOR da ayni ihtiyaci dogurdu: yatay surec
   klipleri ve yaninda metin duran tek dikey kare. */
/* Yatay klipler. Dort surec videosu da 16:9; tam genislikte, koyu bir zeminde
   duruyorlar ve bolum goruse girene kadar oynamiyorlar. */
.clipStage {
  padding: clamp(46px, 6vw, 96px) clamp(24px, 5vw, 76px);
  background: var(--ink);
  color: var(--white);
}

.clipStage figure {
  max-width: 1180px;
  margin: 0 auto;
}

.clipStage video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  background: #05070a;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5);
}

.clipStage figcaption {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

/* Tek basina duran dikey kare: yanina eslik edecek ikinci bir gorsel olmadigi
   yerlerde kullaniliyor. */
.soloShot {
  padding: clamp(52px, 7vw, 104px) clamp(24px, 5vw, 76px);
}

.soloShot figure {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
}

.soloShot img {
  width: 100%;
  aspect-ratio: 0.8;
  object-fit: cover;
}

.soloShot figcaption {
  font-size: 16px;
  line-height: 1.55;
}

.soloShot figcaption b {
  display: block;
  margin-bottom: 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #6b7280;
}

@media (max-width: 900px) {
  .soloShot figure {
    grid-template-columns: 1fr;
  }
}