/* Sakin, Sığacık: preview page, version 2. One family (Mona Sans, two widths), flat sky and
   sea fields split by one horizon line, one accent (mandarin, from the garden). */

/* The engine writes --sc-p on every act each frame; nothing here reads it, so stop it inheriting
   and re-styling every element in the pinned stages. */
@property --sc-p { syntax: '<number>'; inherits: false; initial-value: 0; }

@font-face {
  font-family: "Mona Sans";
  src: url("fonts/mona-sans-latin.woff2") format("woff2");
  font-weight: 200 900; font-stretch: 75% 125%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Mona Sans";
  src: url("fonts/mona-sans-latin-ext.woff2") format("woff2");
  font-weight: 200 900; font-stretch: 75% 125%; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --sc-canvas: #15171f;
  --sc-surface: #1d1f2a;
  --sc-ink: #eef4f5;
  --sc-ink-soft: #c3d2d8;
  --sc-accent: #f28a1e;
  --sc-accent-ink: #2a1405;
  --sc-font-display: "Mona Sans", system-ui, sans-serif;
  --sc-font-text: "Mona Sans", system-ui, sans-serif;
  --sc-r-sm: 2px; --sc-r-md: 2px; --sc-r-lg: 2px;
  --gece-zemin: #15171f;
  /* Field colours; site.js mixes day, evening and night and writes these. */
  --f-gok-1: #a9c3d6; --f-gok-2: #d4dee6;
  --f-deniz-1: #a3bcc5; --f-deniz-2: #3f6c7d; --f-deniz-3: #22495a;
  --f-cizgi: #f4f8f9;
  --y: 36svh;
}
html { overflow-x: hidden; overflow-x: clip; overscroll-behavior-y: none; background: var(--gece-zemin); }
body { overflow-x: hidden; overflow-x: clip; background: transparent; }

/* ---------------------------------------------------------------- preview tag */
.onizleme {
  position: fixed; z-index: 70; margin: 0; pointer-events: none;
  top: calc(env(safe-area-inset-top, 0px) + 12px); left: calc(env(safe-area-inset-left, 0px) + 12px);
  padding: 6px 9px;
  font-size: 0.75rem; line-height: 1.2; font-weight: 560; letter-spacing: 0.01em;
  color: #f4f8f9; background: rgb(16 34 44 / 0.74); border-radius: 2px;
}
/* Stops the loop videos; site.js shows it only while one is on screen. */
.durdur {
  position: fixed; z-index: 70; display: grid; place-items: center;
  top: calc(env(safe-area-inset-top, 0px) + 12px); right: calc(env(safe-area-inset-right, 0px) + 12px);
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 2px; cursor: pointer;
  color: #f4f8f9; background: rgb(16 34 44 / 0.74); touch-action: manipulation;
}
.durdur[hidden] { display: none; }
.durdur svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.durdur[aria-pressed="true"] .durdur__dur, .durdur:not([aria-pressed="true"]) .durdur__oynat { display: none; }
@media (hover: hover) and (pointer: fine) { .durdur:hover { background: rgb(16 34 44 / 0.9); } }
::selection { background: rgb(242 138 30 / 0.35); color: #f1eef4; }

/* ---------------------------------------------------------------- the environment */
.cevre { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.cevre__gok { position: absolute; left: 0; right: 0; top: 0; height: var(--y); background: linear-gradient(to bottom, var(--f-gok-1), var(--f-gok-2)); }
.cevre__deniz {
  position: absolute; left: 0; right: 0; top: var(--y); bottom: 0;
  background: linear-gradient(to bottom, var(--f-deniz-1) 0, var(--f-deniz-2) 4.5rem, var(--f-deniz-3) 45%);
}
.cizgi { position: absolute; left: 0; right: 0; top: calc(var(--y) - 0.5px); height: 1px; opacity: var(--cizgi-o, 1); }
.cizgi > span { position: absolute; top: 0; height: 1px; background: var(--f-cizgi); }
.cizgi__sol { left: 0; width: var(--cl, 0px); transform-origin: 100% 50%; }
.cizgi__sag { right: 0; width: var(--cr, 0px); transform-origin: 0 50%; }
@media (prefers-reduced-motion: no-preference) {
  .js .cizgi > span { animation: cizgi-ac 760ms var(--sc-ease-out) 200ms both; }
}
@keyframes cizgi-ac { from { transform: scaleX(0); } to { transform: scaleX(1); } }

main { position: relative; z-index: 1; }

/* First paint before the engine runs: acts and stages already have their size. */
.js .acilis { height: 440vh; }
.js .aksam { height: 260vh; }
.js .gece { height: 320vh; }
.js .acilis__sahne, .js .aksam__sahne, .js .gece__sahne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; overflow: clip; }
.js .pencere:not([style]) { visibility: hidden; }

/* ---------------------------------------------------------------- windows */
.pencere {
  position: absolute; margin: 0; z-index: 2;
  left: var(--px); top: var(--py); width: var(--pw); height: var(--ph);
  overflow: hidden; border-radius: 2px;
}
.pencere--acilis { transform-origin: 50% 50%; will-change: transform; }
.pencere video, .pencere img, .kare video, .kare img, .ray__kare video, .ray__kare img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.pencere video { transform: translateZ(0); }
/* The first frame stays under the clip, so the opening never shows blank if the clip cannot paint. */
.acilis.sc-has-clip .sc-stage__poster { opacity: 1; }
.dongu { z-index: 1; opacity: 0; transition: opacity 420ms var(--sc-ease-out); }
.dongu.oynuyor { opacity: 1; }
/* The scrim under the opening copy, only while the flight fills the phone screen. */
.pencere__perde {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: var(--perde, 0);
  background: linear-gradient(to top, rgb(9 22 30 / 0.84) 0%, rgb(9 22 30 / 0.55) 24%, rgb(9 22 30 / 0) 50%);
}

/* ---------------------------------------------------------------- opening copy */
.bant { position: absolute; z-index: 6; left: var(--bx, 20px); right: var(--brx, 20px); top: var(--by, 70svh); }
.logo { position: absolute; width: auto; height: var(--logo-h, 64px); left: var(--logo-x, 0px); top: var(--logo-y, -120px); }
.baslik {
  margin: 0; max-width: 17ch;
  font-size: clamp(1.75rem, 1.1rem + 2.9vw, 3.6rem); line-height: 1.04;
  font-stretch: 110%; font-weight: 540; letter-spacing: -0.024em; text-wrap: balance;
  color: var(--sc-ink);
}
.bant__satir { margin: 0; max-width: 26ch; font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.6rem); line-height: 1.3; font-weight: 480; text-wrap: balance; color: var(--sc-ink); }
.telefon .bant { text-shadow: 0 1px 2px rgb(5 14 20 / 0.9), 0 3px 12px rgb(5 14 20 / 0.6); }
.telefon .bant .dugme { text-shadow: none; }
.telefon .bant--3 > * { opacity: var(--b3, 1); }

.dugme {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 1.4rem; margin-top: 1rem;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-weight: 650; font-stretch: 104%; letter-spacing: 0.005em; text-decoration: none;
  border-radius: 2px; touch-action: manipulation;
  transition: background-color 140ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.dugme:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .dugme:hover { background: #f69a37; } }
.dugme:focus-visible { outline-color: #f4f8f9; }

/* ---------------------------------------------------------------- place copy */
.yer__ad {
  margin: 0; font-size: clamp(2.4rem, 1.3rem + 4.6vw, 5.4rem); line-height: 0.95;
  font-stretch: 125%; font-weight: 380; letter-spacing: -0.03em; color: var(--sc-ink);
}
.yer__satir { margin: 0.6rem 0 0; max-width: 32ch; font-size: clamp(1rem, 0.95rem + 0.35vw, 1.25rem); line-height: 1.45; color: var(--sc-ink-soft); }
.yazi { position: absolute; z-index: 6; left: var(--yx, 20px); right: var(--yrx, 20px); top: var(--yy, 70svh); }

/* ---------------------------------------------------------------- Bahçe */
.bahce {
  position: relative; z-index: 2;
  background: linear-gradient(to bottom, #22495a 0, #1d4150 100%);
  padding: clamp(4.5rem, 11vw, 9rem) var(--sc-gutter) clamp(4rem, 9vw, 8rem);
}
.bahce__metin, .sofra__metin { max-width: 72rem; margin: 0 auto clamp(2rem, 4vw, 3.5rem); }
.bahce__izgara {
  max-width: 72rem; margin: 0 auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem;
}
.kare { position: relative; margin: 0; overflow: hidden; border-radius: 2px; background: #2b5566; }
.kare--yuruyus { grid-column: 1 / -1; aspect-ratio: 4 / 5; }
.kare--havadan { grid-column: 1 / -1; aspect-ratio: 1200 / 993; }
.kare--giris { aspect-ratio: 5 / 8; }
.kare--pencere { aspect-ratio: 950 / 1440; }
@media (min-width: 861px) {
  .bahce__izgara { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; align-items: start; }
  .kare--yuruyus { grid-column: 1 / span 5; grid-row: 1 / span 2; aspect-ratio: 9 / 15; }
  .kare--havadan { grid-column: 6 / span 7; grid-row: 1; }
  .kare--giris { grid-column: 6 / span 3; grid-row: 2; margin-top: 2.5rem; }
  .kare--pencere { grid-column: 9 / span 3; grid-row: 2; margin-top: 6rem; }
}

/* ---------------------------------------------------------------- Gece rail */
.ray {
  position: absolute; z-index: 3; left: 0; top: calc(var(--ry, 56vh) - var(--kh, 30vh) / 2);
  display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.5rem);
  padding-inline: var(--kenar, var(--sc-gutter)); height: var(--kh, 30vh); will-change: transform;
}
.ray__kare { position: relative; flex: none; margin: 0; height: 100%; aspect-ratio: var(--a); overflow: hidden; border-radius: 2px; background: #1d1f2c; }
/* The two wide bands are cropped toward their lit sign, which sits left of centre. */
.ray__kare--isiklar img { object-position: 15% 50%; }
.ray__kare--cephe img { object-position: 20% 50%; }
.yazi--gece .yer__ad, .yazi--gece .yer__satir, .yazi--aksam .yer__ad, .yazi--aksam .yer__satir { color: #f1eef4; }
.yazi--gece .yer__satir, .yazi--aksam .yer__satir { color: #cfc9d8; }

/* ---------------------------------------------------------------- Sofra */
.sofra {
  position: relative; z-index: 2; background: var(--gece-zemin);
  padding: clamp(4.5rem, 11vw, 9rem) var(--sc-gutter) clamp(3rem, 7vw, 6rem);
}
.sofra .yer__ad { color: #f1eef4; }
.sofra .yer__satir { color: #cfc9d8; }
.sofra__izgara { max-width: 72rem; margin: 0 auto; display: grid; gap: 0.75rem; }
.kare--kahvalti { aspect-ratio: 1 / 1; background: #1d1f2c; }
.kare--sofra { aspect-ratio: 1 / 1; background: #1d1f2c; }
@media (min-width: 861px) {
  .sofra__izgara { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; align-items: end; }
  .kare--kahvalti { grid-column: 2 / span 4; }
  .kare--sofra { grid-column: 6 / span 6; margin-bottom: 4rem; }
}

/* ---------------------------------------------------------------- Tarih (the close) */
.tarih {
  position: relative; z-index: 2;
  background: var(--gece-zemin);
  padding: clamp(3.5rem, 8vw, 7rem) var(--sc-gutter) clamp(3rem, 6vw, 5rem);
  padding-inline: max(var(--sc-gutter), calc((100% - 72rem) / 2)); /* the page's one left edge */
  color: #f1eef4;
}
.tarih__ic, .sahibine { max-width: 34rem; margin-inline: 0; }
@media (min-width: 1100px) {
  .tarih { display: grid; grid-template-columns: minmax(0, 34rem) minmax(0, 24rem); column-gap: clamp(4rem, 8vw, 9rem); justify-content: start; align-items: start; }
  .tarih__ic, .sahibine { margin: 0; }
  .sahibine { position: sticky; top: 6rem; margin-top: 0 !important; border-top: 0 !important; padding-top: 0 !important; }
}
.tarih__baslik {
  margin: 0; font-size: clamp(2rem, 1.3rem + 3vw, 3.6rem); line-height: 1;
  font-stretch: 118%; font-weight: 420; letter-spacing: -0.03em; text-wrap: balance;
}
.tarih__yardim { margin: 0.8rem 0 0; color: #bdb7c8; max-width: 40ch; }

.secim { margin-top: 2.2rem; display: grid; gap: 1.6rem; }
.secim__grup { margin: 0; padding: 0; border: 0; min-width: 0; }
.secim__grup legend, .secim__etiket {
  display: block; padding: 0; margin: 0 0 0.6rem;
  font-size: 0.86rem; font-weight: 600; letter-spacing: 0.02em; color: #bdb7c8;
}
.secenekler { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.secenekler label { position: relative; display: flex; touch-action: manipulation; }
.secenekler input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.secenekler span {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 0.4rem;
  border: 1px solid rgb(241 238 244 / 0.42); border-radius: 2px;
  font-weight: 540; transition: background-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out);
}
.secenekler input:checked + span { background: #f1eef4; color: #15171f; border-color: #f1eef4; }
.secenekler input:focus-visible + span { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
@media (forced-colors: active) {
  .secenekler input:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
}
@media (hover: hover) and (pointer: fine) { .secenekler label:hover span { border-color: rgb(241 238 244 / 0.7); } }

.adim { display: flex; align-items: stretch; }
.adim__tus {
  display: grid; place-items: center; width: 48px; min-height: 48px; padding: 0; cursor: pointer;
  background: transparent; color: inherit; touch-action: manipulation;
  border: 1px solid rgb(241 238 244 / 0.42); border-radius: 2px;
  transition: background-color 140ms var(--sc-ease-out), opacity 140ms var(--sc-ease-out);
}
.adim__tus svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.adim__tus:active { transform: translateY(1px); }
.adim__tus[aria-disabled="true"] { opacity: 0.38; cursor: default; }
@media (hover: hover) and (pointer: fine) { .adim__tus:not([aria-disabled="true"]):hover { background: rgb(241 238 244 / 0.08); } }
.adim__deger {
  flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 0.6rem;
  border-block: 1px solid rgb(241 238 244 / 0.42);
  font-weight: 560; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.adim__deger.bos { color: #a7a1b4; font-weight: 460; }

.mesaj { margin: 0.4rem 0 0; padding: 1rem 0; border-block: 1px solid rgb(241 238 244 / 0.22); }
.mesaj figcaption { font-size: 0.86rem; font-weight: 600; letter-spacing: 0.02em; color: #bdb7c8; }
.mesaj blockquote { margin: 0.5rem 0 0; font-size: 1.08rem; line-height: 1.5; color: #f1eef4; text-wrap: pretty; }
.dugme--gonder { width: 100%; min-height: 52px; margin-top: 0.2rem; font-size: 1.05rem; }
.numara { margin: -0.6rem 0 0; font-size: 0.86rem; color: #aaa4b8; }

.sahibine { margin-top: clamp(3rem, 7vw, 5rem); padding-top: 1.6rem; border-top: 1px solid rgb(241 238 244 / 0.16); color: #c8c2d2; font-size: 0.98rem; }
.sahibine p { margin: 0 0 0.8rem; max-width: 58ch; }
.sahibine__baslik { margin: 0 0 1rem; font-size: 1.3rem; line-height: 1.2; font-weight: 600; font-stretch: 108%; color: #f1eef4; }
.sahibine__liste { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.sahibine__liste li { padding: 0.75rem 0; border-top: 1px solid rgb(241 238 244 / 0.16); color: #f1eef4; line-height: 1.45; }
.sahibine__devam { color: #f1eef4; font-weight: 560; }
.plaka { font-size: 0.82rem; color: #a49eb1; }
.sahibine p, .sahibine__liste li, .tarih__yardim { text-wrap: pretty; }

/* ---------------------------------------------------------------- without JS, or when it fails */
html:not(.js) .acilis__sahne, html:not(.js) .aksam__sahne, html:not(.js) .gece__sahne { position: static; height: auto; }
html:not(.js) .cevre { display: none; }
html:not(.js) .pencere, html:not(.js) .bant, html:not(.js) .yazi, html:not(.js) .logo, html:not(.js) .ray {
  position: static; width: auto; height: auto; max-width: 480px; margin: 1.5rem var(--sc-gutter); transform: none !important; opacity: 1 !important;
}
html:not(.js) .pencere { position: relative; aspect-ratio: 9 / 16; max-width: 360px; }
html:not(.js) .pencere--aksam { aspect-ratio: 2 / 3; }
html:not(.js) .logo { width: min(240px, 62%); margin: 0 0 1.25rem; }
html:not(.js) .ray { display: grid; gap: 1rem; }
html:not(.js) .ray__kare { height: auto; }
html:not(.js) [data-sc-cue], html:not(.js) [data-sc-in] { opacity: 1; transform: none; }
html:not(.js) .acilis__sahne, html:not(.js) .aksam__sahne, html:not(.js) .gece__sahne { background: #22495a; padding-block: 2rem; }

@media (prefers-reduced-motion: reduce) {
  .dugme, .secenekler span, .adim__tus, .dongu { transition: none; }
  /* The rail does not travel here, so its stage scrolls sideways instead (the engine's floor). */
  .js .gece__sahne { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: #e8b878 transparent; }
  .js .gece__sahne:focus-visible { outline-offset: -4px; }
}