/* FLOWON ana sayfa: açılış ve "sabahtan geceye" tek sahne. Ortak parçalar stil.css'te. */
/* Açılış ve bir gün: tek sahne (açılış, sabah, öğle, gece). Sahne yapışır; --t açılışın ilerlemesi (0 → 1), betik kaydırmayı
   yumuşak takip ederek verir. Açılışta stüdyo karanlığı: arka yüzdeki yeşil ışıklar yanar; kaydırınca yazı, kartlar ve bileklik
   birlikte solarken karanlık açılır ve altta hazır duran sabah belirir (bileklik tek başına kalmaz). Geçişin hepsi kaydırmaya bağlı; açılışla sabah
   aynı gökyüzünü paylaşır, renk sıçraması olmaz. */
.c-gun { position: relative; height: 420vh; }
.c-gun-sahne { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.c-gun[data-adim="acilis"] .c-gun-sahne, .c-gun[data-adim="sabah"] .c-gun-sahne { --gok-1: #0A0B0C; --gok-2: #121813; --gok-3: #5C8A2E; }
.c-gun[data-adim="gun"] .c-gun-sahne { --gok-1: #0A0B0C; --gok-2: #101311; --gok-3: #2B3D22; }
.c-gun[data-adim="gece"] .c-gun-sahne { --gok-1: #050606; --gok-2: #08090A; --gok-3: #121612; }
.c-gun-ic { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; padding: 104px 0 56px; }
.c-acilis { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.c-gun[data-adim="acilis"] .c-acilis { pointer-events: auto; }
/* Karanlık: açılışın zemini; bileklik solunca açılır ve alttaki sabah görünür */
.c-acilis::before { content: ""; position: absolute; inset: 0; background: #000; opacity: clamp(0, calc((.88 - var(--t, 0)) * 2.2), 1); will-change: opacity; }
/* Yeşil ışık: görsel 3:2 kutuda sağa yaslı, sol ve alt kenarı siyaha erir (görselin zemini saf siyah; maske yerine üstte siyah
   geçiş, her karede yeniden çizilmesin). */
.c-isik { position: absolute; right: 0; top: 57%; width: min(94%, 152vh); aspect-ratio: 3 / 2; translate: 0 -50%;
  opacity: clamp(0, calc((.48 - var(--t, 0)) * 2.5), 1); scale: calc(1 - var(--t, 0) * .15); will-change: opacity, scale; animation: isik-belir 1.8s var(--yumusak) both; }
.c-isik::after { content: ""; position: absolute; inset: -1px; background: linear-gradient(90deg, #000, rgba(0, 0, 0, 0) 12%), linear-gradient(0deg, #000, rgba(0, 0, 0, 0) 12%); }
@keyframes isik-belir { from { opacity: 0; transform: scale(1.05); } }
.c-isik img { position: absolute; inset: 0; width: 100%; height: 100%; }
.c-acilis-ic { position: relative; height: 100%; display: grid; align-content: center; gap: 48px; padding-top: 40px; }
.c-acilis-yazi { position: relative; z-index: 2; display: grid; justify-items: start; gap: 22px; max-width: 600px; opacity: clamp(0, calc((.4 - var(--t, 0)) * 3), 1); translate: 0 calc(var(--t, 0) * -70px); will-change: opacity, translate; }
.c-acilis-yazi h1 { max-width: 7em; font-size: clamp(44px, 5.4vw, 82px); }
.c-acilis-yazi .ozet { max-width: 40ch; }
.c-acilis-kartlar { display: grid; grid-template-columns: repeat(3, minmax(0, 190px)); gap: 12px; opacity: clamp(0, calc((.38 - var(--t, 0)) * 3), 1); translate: 0 calc(var(--t, 0) * -40px); will-change: opacity, translate; }
.c-acilis-kart { display: grid; align-content: start; gap: 2px; padding: 16px 18px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 20px; background: rgba(18, 19, 20, .78); }
.c-acilis-kart b { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.c-acilis-kart small { font-size: 14.5px; line-height: 1.4; color: rgba(255, 255, 255, .72); }
.c-acilis-kart--puan { display: flex; align-items: center; gap: 14px; }
.c-acilis-kart--puan > span:last-child { display: grid; gap: 2px; }
.c-acilis-kart--puan b { font-size: 17px; color: #fff; }
.c-puan-halka { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border: 3px solid var(--yesil); border-radius: 50%; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.c-gun-bas { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.c-gun[data-adim="acilis"] .c-gun-bas { pointer-events: none; }
.c-gun-bas h2 { margin: 0; }
.c-sekmeler { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .12); }
.c-sekmeler button { height: 40px; padding: 0 18px; border: 0; border-radius: 20px; background: transparent; color: rgba(255, 255, 255, .78); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color .4s, color .4s; }
.c-sekmeler [aria-selected="true"] { background: var(--yesil); color: var(--siyah); }
.c-anlar { position: relative; min-height: 0; margin-top: 36px; }
.c-an { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 72px; align-items: center; opacity: 0; visibility: hidden; transition: opacity .7s var(--yumusak), visibility 0s .7s; }
.c-an.etkin { opacity: 1; visibility: visible; transition: opacity .7s var(--yumusak); }
.c-an-gorsel { position: relative; }
.c-foto { margin: 0; overflow: hidden; border-radius: 28px; aspect-ratio: 3 / 2; max-height: calc(100vh - 260px); }
.c-foto img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform 1.8s var(--yumusak); }
.c-an.etkin .c-foto img { transform: none; }
.c-an .c-telefon { position: absolute; right: -44px; bottom: -40px; width: clamp(150px, 13vw, 196px); translate: 0 24px; transition: translate 1s var(--yumusak) .1s; }
.c-an.etkin .c-telefon { translate: 0 0; }
.c-an-metin { display: grid; gap: 18px; justify-items: start; }
.c-an-metin time { font-size: 15px; font-weight: 600; color: var(--yesil); }
.c-an-metin h3 { margin: 0; font-size: clamp(26px, 2.4vw, 36px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.12; }
.c-an-metin p { max-width: 36ch; margin: 0; font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, .88); }

@media (min-width: 861px) {
  /* Sabah anı açılışın altında hazır durur; karanlık açılırken kaydırmayla yerine oturur (--g: 0 → 1) */
  .c-gun { --g: clamp(0, calc((var(--t, 1) - .43) / .45), 1); }
  .c-an[data-an="sabah"] .c-an-gorsel { translate: 0 calc((1 - var(--g)) * 56px); }
  .c-an[data-an="sabah"] .c-an-metin { translate: 0 calc((1 - var(--g)) * 36px); }
  .c-an[data-an="sabah"] .c-foto img { scale: calc(1 + (1 - var(--g)) * .06); }
  .c-gun-bas { translate: 0 calc((1 - var(--g)) * 24px); }
}
@media (min-width: 861px) and (max-width: 1180px) {
  .c-acilis-kartlar { grid-template-columns: repeat(3, minmax(0, 150px)); }
  .c-acilis-kart--puan { display: grid; gap: 8px; }
}
@media (max-width: 1100px) {
  .c-an { gap: 48px; }
  .c-an .c-telefon { right: -24px; }
}
@media (max-width: 860px) {
  /* Açılış ve bir gün: yapışma yok; açılış, başlık ve üç an alt alta, her biri kendi gökyüzünde */
  .c-gun { height: auto; }
  .c-gun-sahne { position: static; height: auto; overflow: visible; background: #24361C; }
  /* Açılış: görsel kare, yazının üstü görselin karanlık zeminine biner; düğmeler ilk ekranda kalır */
  .c-acilis { position: static; overflow: hidden; padding: 72px 0 56px; background: #000; }
  .c-acilis::before { display: none; }
  .c-isik { position: relative; right: auto; top: auto; width: auto; aspect-ratio: 1; translate: none; opacity: 1; scale: none; }
  .c-isik::after { background: linear-gradient(180deg, #000, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 0) 78%, #000); }
  .c-isik img { object-fit: cover; object-position: 100% 50%; }
  .c-acilis-ic { display: block; height: auto; margin-top: -28px; padding: 0; }
  .c-acilis-yazi { opacity: 1; translate: none; }
  .c-acilis-yazi h1 { font-size: clamp(40px, 11vw, 56px); }
  .c-acilis-kartlar { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 32px; opacity: 1; translate: none; }
  .c-acilis-kart { padding: 14px 16px; border-radius: 18px; }
  .c-acilis-kart b { font-size: 17px; }
  .c-acilis-kart small { font-size: 13.5px; }
  .c-acilis-kart--puan { grid-column: 1 / -1; }
  .c-puan-halka { width: 42px; height: 42px; border-width: 2.5px; font-size: 16px; }
  /* Siyah açılıştan sabahın yeşiline kesintisiz geçiş */
  .c-gun-ic { display: block; width: 100%; padding: 0; }
  .c-gun-bas { padding: 72px var(--oluk) 0; background: linear-gradient(180deg, #000, #24361C); }
  .c-sekmeler { display: none; }
  .c-anlar { margin-top: 0; }
  .c-an { position: static; grid-template-columns: 1fr; gap: 36px; padding: 40px var(--oluk) 72px; opacity: 1; visibility: visible; background: linear-gradient(180deg, var(--gok-1) 0%, var(--gok-2) 62%, var(--gok-3) 100%); }
  .c-an[data-an="sabah"] { --gok-1: #24361C; --gok-2: #121813; --gok-3: #0A0B0C; }
  .c-an[data-an="gun"] { --gok-1: #0A0B0C; --gok-2: #101311; --gok-3: #1B2717; }
  .c-an[data-an="gece"] { --gok-1: #1B2717; --gok-2: #08090A; --gok-3: #050606; }
  .c-an .c-telefon { right: 12px; bottom: -28px; width: 116px; translate: none; }
  .c-foto { aspect-ratio: 4 / 5; max-height: none; }
  .c-foto img { transform: none; }
}