/* ============================================================
   LİV — hub + üç ayrı dünya, üç ayrı tasarım sistemi
   01 Şelale Park: BİR AKŞAM (gökyüzü scroll'la kararır)
   02 LiviaX: IŞIK (şalterle açılır, siyah-amber)
   03 Livia: DAVETİYE (fildişi, simetrik, tezhipli)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --serif: 'Fraunces', Georgia, serif;
  --iserif: 'Instrument Serif', Georgia, serif;
  --syne: 'Syne', sans-serif;
  --sans: 'Figtree', system-ui, sans-serif;
  --gold: #B98A2F;
  --amber: #F2A93B;
  --navy: #0C1B33;
  --ivory: #FBF8F2;
}

html { scroll-behavior: auto; }
body { font-family: var(--sans); background: #141210; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
h1, h2, h3 { line-height: 1.16; }
.page { display: none; min-height: 100vh; }
.page.active { display: block; }
cite { font-style: normal; opacity: .65; font-size: .85em; }

/* ============================================================
   GEÇİŞ PERDELERİ
   ============================================================ */
#veil { position: fixed; inset: 0; z-index: 200; pointer-events: none; visibility: hidden; }
#veil.on { visibility: visible; }
.veil-art { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
.veil-art.on { display: flex; }
.veil-selale { background: linear-gradient(180deg, #E8A765 0%, #7A5470 34%, #23355C 62%, #0C1B33 100%); }
.veil-selale svg { width: 100%; height: 34%; position: absolute; top: 33%; }
.vs-wire { stroke: rgba(251,248,242,.35); stroke-width: 2; }
.vs-bulbs circle { fill: #4A3F26; }
.vs-bulbs circle.lit { fill: #FFD98E; filter: drop-shadow(0 0 10px rgba(255,217,142,.95)); }
.veil-liviax { background: #0B0A08; }
.veil-liviax svg { width: min(64vh, 80vw); height: min(64vh, 80vw); }
.vx-l1, .vx-l2 { stroke: var(--amber); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 14px rgba(242,169,59,.7)); }
.veil-livia { background: var(--ivory); }
.veil-livia svg { height: 76vh; }
.vl-arch { stroke: var(--gold); stroke-width: 2.5; }
.vl-arch-in { stroke-width: 1; opacity: .55; }

/* ============================================================
   SABİT NAV (orbit)
   ============================================================ */
#orbit {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 90; display: flex; gap: 4px; padding: 6px;
  border-radius: 999px; backdrop-filter: blur(14px);
  background: rgba(20,18,16,.82); border: 1px solid rgba(255,255,255,.14);
  transition: background .4s;
}
#orbit a {
  font-size: .82rem; font-weight: 600; letter-spacing: .03em; text-decoration: none;
  color: #EFEBE2; padding: 9px 15px; border-radius: 999px; white-space: nowrap;
  transition: background .25s, color .25s;
}
#orbit a:hover { background: rgba(255,255,255,.13); }
#orbit a.on { background: #EFEBE2; color: #17140F; }
.ob-home { font-family: var(--serif); font-weight: 700; letter-spacing: .12em; color: var(--gold) !important; }
#orbit a.ob-home.on { background: var(--gold); color: #fff !important; }

/* ============================================================
   HUB — üç dilim, ortada monogram
   ============================================================ */
#page-hub { background: #17140F; }
.hub { position: relative; display: flex; height: 100svh; gap: 3px; padding: 3px; }
.slice { position: relative; flex: 1; overflow: hidden; display: flex; align-items: flex-end; text-decoration: none; transition: flex .65s cubic-bezier(.3,.85,.25,1); }
.hub:hover .slice { flex: .82; }
.hub .slice:hover { flex: 1.7; }
.slice img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform 1.2s ease, filter .6s; filter: saturate(.92) brightness(.94); }
.slice:hover img { transform: scale(1.13); filter: saturate(1.05) brightness(1); }
.slice-veil { position: absolute; inset: 0; background: linear-gradient(10deg, rgba(10,9,7,.88) 10%, rgba(10,9,7,.12) 52%, rgba(10,9,7,.25) 100%); transition: opacity .5s; }
.slice:hover .slice-veil { opacity: .82; }
.slice-body { position: relative; padding: 40px 34px; color: #fff; width: 100%; }
.slice-no { display: block; font-family: var(--iserif); font-style: italic; font-size: 1rem; color: var(--gold); margin-bottom: 10px; }
.slice-name { display: block; font-size: clamp(1.9rem, 3.6vw, 3.4rem); line-height: 1.12; }
.slice-selale .slice-name { font-family: var(--iserif); font-style: italic; font-weight: 400; }
.slice-liviax .slice-name { font-family: var(--syne); font-weight: 800; }
.slice-liviax .slice-name b { color: var(--amber); }
.slice-livia .slice-name { font-family: var(--serif); font-weight: 600; }
.slice-line { display: block; margin-top: 10px; font-size: .92rem; color: #D9D3C7; opacity: 0; transform: translateY(10px); transition: opacity .4s .12s, transform .4s .12s; }
.slice:hover .slice-line { opacity: 1; transform: none; }
.hub-center {
  position: absolute; inset: 0; margin: auto; width: fit-content; height: fit-content;
  text-align: center; pointer-events: none; z-index: 5; mix-blend-mode: normal;
}
.hub-mark {
  display: block; font-family: var(--serif); font-weight: 700; letter-spacing: .18em;
  font-size: clamp(3rem, 7vw, 5.6rem); color: #fff;
  text-shadow: 0 8px 60px rgba(0,0,0,.75);
}
.hub-sub { display: block; margin-top: 6px; font-size: .8rem; letter-spacing: .3em; text-transform: uppercase; color: #E4DECF; text-shadow: 0 2px 20px rgba(0,0,0,.8); }
.hub-foot { display: flex; justify-content: space-between; padding: 16px 22px 74px; color: #8C8577; font-size: .85rem; }
.hub-foot a { color: #C8C1B2; text-decoration: none; }

/* ============================================================
   01 ŞELALE PARK — BİR AKŞAM
   Gökyüzü ve metin renkleri JS scrub ile --skyA/--skyB/--inkL üzerinden
   ============================================================ */
#page-selale {
  --skyA: #F4C98A; --skyB: #E9915C; --inkL: #2B1E14; --warm: #FFD98E;
  background: linear-gradient(180deg, var(--skyA), var(--skyB));
  color: var(--inkL);
  font-family: var(--sans);
  position: relative;
}
.sp-sky { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.sp-stars { position: absolute; inset: 0; opacity: var(--starO, 0);
  background-image:
    radial-gradient(1.5px 1.5px at 11% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 27% 9%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 41% 22%, rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 12%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(2px 2px at 72% 26%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 15%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 44%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 18% 38%, rgba(255,255,255,.6) 50%, transparent 51%);
}
.sp-clock {
  position: fixed; right: 26px; top: 24px; z-index: 40; text-align: right;
  color: var(--inkL); transition: color .3s;
}
.sp-clock span { display: block; font-family: var(--iserif); font-style: italic; font-size: 2rem; line-height: 1; }
.sp-clock em { font-style: normal; font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; opacity: .7; }
#page-selale > * { position: relative; z-index: 1; }

.sp-hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 0 7vw; position: relative; overflow: hidden; }
.sp-kicker { font-size: .78rem; letter-spacing: .32em; text-transform: uppercase; margin-bottom: 20px; opacity: .8; }
.sp-title { font-family: var(--iserif); font-weight: 400; font-size: clamp(3.2rem, 9.5vw, 7.6rem); }
.sp-title em { font-style: italic; }
.sp-lede { margin-top: 26px; font-size: 1.08rem; line-height: 1.7; max-width: 460px; }
.sp-strand { position: absolute; left: 0; right: 0; bottom: -12px; width: 100%; height: 200px; }
.sp-wire { stroke: rgba(43,30,20,.4); stroke-width: 2; transition: stroke .3s; }
.sp-bulbs circle { fill: rgba(43,30,20,.32); transition: fill .2s; }
.sp-bulbs circle.lit { fill: var(--warm); filter: drop-shadow(0 0 8px rgba(255,217,142,.95)); }
.sp-bulbs line { stroke: rgba(43,30,20,.3); }

.sp-moment { max-width: 640px; margin: 0 auto; padding: 22vh 7vw; }
.sp-time { font-family: var(--iserif); font-style: italic; font-size: 1.3rem; opacity: .75; display: block; margin-bottom: 12px; }
.sp-moment h2 { font-family: var(--iserif); font-weight: 400; font-size: clamp(1.9rem, 4.4vw, 3.1rem); margin-bottom: 18px; }
.sp-moment p { font-size: 1.05rem; line-height: 1.75; opacity: .92; }
/* 22:00 — tam ekran sahne, yazı fotoğrafın üstünde */
.sp-scene { position: relative; min-height: 108vh; overflow: hidden; display: flex; align-items: flex-end; margin: 10vh 0; }
.sp-scene img { position: absolute; inset: 0; width: 100%; height: 116%; object-fit: cover; will-change: transform; }
.sp-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,14,29,.35) 0%, rgba(6,14,29,0) 30%, rgba(6,14,29,.72) 88%); }
.sp-scene-copy { position: relative; z-index: 2; padding: 0 7vw 10vh; max-width: 720px; color: #F1EDE4; }
.sp-scene-copy .sp-time { opacity: .9; }
.sp-scene-copy h2 { font-family: var(--iserif); font-weight: 400; font-size: clamp(2rem, 5vw, 3.6rem); margin-bottom: 16px; }
.sp-scene-copy p { font-size: 1.05rem; line-height: 1.75; color: #DDD8CC; }
.sp-final { text-align: center; padding: 20vh 7vw 16vh; }
.sp-final .sp-time { font-size: 1.6rem; }
.sp-final-line { font-family: var(--iserif); font-weight: 400; font-size: clamp(2.4rem, 6.4vw, 4.6rem); }
.sp-final-line em { font-style: italic; }
.sp-cta { margin-top: 48px; }
.sp-btn {
  display: inline-block; background: var(--warm); color: #2B1E14; font-weight: 700;
  text-decoration: none; padding: 16px 34px; border-radius: 999px;
  box-shadow: 0 0 0 rgba(255,217,142,0); transition: transform .25s, box-shadow .3s;
}
.sp-btn:hover { transform: translateY(-2px); box-shadow: 0 0 44px rgba(255,217,142,.45); }
.sp-cta p { margin-top: 16px; font-size: .9rem; opacity: .8; }
.sp-cta a:not(.sp-btn) { color: inherit; }

.page-next { margin-top: 12vh; padding-top: 26px; border-top: 1px solid currentColor; opacity: .92; max-width: 640px; margin-left: auto; margin-right: auto; }
.page-next span { display: block; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; opacity: .6; margin-bottom: 8px; }
.page-next a { color: inherit; text-decoration: none; font-family: var(--iserif); font-style: italic; font-size: clamp(1.2rem, 2.6vw, 1.7rem); }
.page-next a:hover { text-decoration: underline; }

/* ============================================================
   02 LIVIAX — İLK DANS (sinematik tam ekran fotoğraf)
   ============================================================ */
#page-liviax { background: #17130E; color: #F3EEE3; font-family: var(--sans); }
.lx-kicker { font-family: var(--syne); font-size: .76rem; letter-spacing: .3em; text-transform: uppercase; color: #FFD98E; margin-bottom: 18px; text-shadow: 0 1px 14px rgba(0,0,0,.75); }
.lx-hero-copy .lx-title, .lx-sub { text-shadow: 0 2px 26px rgba(10,8,5,.55); }

.lx-hero { min-height: 100svh; position: relative; display: flex; align-items: flex-end; overflow: hidden; }
.lx-hero-img { position: absolute; inset: 0; width: 100%; height: 112%; object-fit: cover; object-position: center 30%; will-change: transform; }
.lx-hero-grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,19,14,.4) 0%, rgba(23,19,14,.05) 40%, rgba(23,19,14,.86) 92%); }
.lx-hero-copy { position: relative; z-index: 2; padding: 0 7vw 12vh; max-width: 900px; }
.lx-title { font-family: var(--iserif); font-weight: 400; font-size: clamp(2.6rem, 7.6vw, 6rem); line-height: 1.14; color: #FBF7EF; }
.lx-title em { font-style: italic; color: var(--amber); }
.lx-sub { margin-top: 20px; font-size: 1.06rem; line-height: 1.7; color: #E5DFD2; max-width: 480px; }

/* tam ekran sahneler — yazı fotoğrafın üstünde */
.lx-scene { position: relative; min-height: 106vh; overflow: hidden; display: flex; align-items: flex-end; margin: 12vh 0; }
.lx-scene img { position: absolute; inset: 0; width: 100%; height: 116%; object-fit: cover; will-change: transform; }
.lx-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,19,14,.3) 0%, rgba(23,19,14,0) 34%, rgba(23,19,14,.78) 90%); }
.lx-scene-copy { position: relative; z-index: 2; padding: 0 7vw 10vh; max-width: 680px; }
.lx-scene-right { justify-content: flex-end; }
.lx-scene-right .lx-scene-copy { text-align: right; }
.lx-scene-copy h2 { font-family: var(--iserif); font-weight: 400; font-size: clamp(2rem, 5vw, 3.8rem); margin-bottom: 16px; color: #FBF7EF; }
.lx-scene-copy h2 em { font-style: italic; color: var(--amber); }
.lx-scene-copy p { font-size: 1.04rem; line-height: 1.75; color: #DDD6C8; }

.lx-line { max-width: 860px; margin: 0 auto; padding: 6vh 7vw; text-align: center; }
.lx-line > p { font-family: var(--iserif); font-size: clamp(1.5rem, 3.4vw, 2.4rem); line-height: 1.45; color: #F3EEE3; }
.lx-line > p em { font-style: italic; color: var(--amber); }
.lx-facts { display: flex; gap: 34px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
.lx-facts span { font-size: .92rem; color: #B5AC9B; letter-spacing: .02em; }
.lx-facts b { font-family: var(--syne); font-weight: 800; color: var(--amber); font-size: 1.15rem; margin-right: 6px; }

.lx-cta { text-align: center; padding: 10vh 7vw 16vh; }
.lx-cta h2 { font-family: var(--iserif); font-weight: 400; font-size: clamp(2.2rem, 5.4vw, 4rem); margin-bottom: 30px; }
.lx-cta h2 em { font-style: italic; color: var(--amber); }
.lx-btn { display: inline-block; background: var(--amber); color: #17130E; font-weight: 700; letter-spacing: .04em; text-decoration: none; padding: 17px 36px; border-radius: 999px; transition: transform .2s, box-shadow .3s; }
.lx-btn:hover { transform: translateY(-2px); box-shadow: 0 0 50px rgba(242,169,59,.45); }
.lx-cta > p { margin-top: 16px; font-size: .9rem; color: #A79F8F; }
.lx-cta > p a { color: inherit; }
.lx-next { color: #CFC8BA; }
.lx-next a { font-family: var(--iserif); }

/* ============================================================
   03 LİVİA — DAVETİYE (kart → sahne → kart → diptik → kart)
   Tipografi davetiye, fotoğraf tam ekran sinema
   ============================================================ */
#page-livia { background: #EFE9DD; color: #23201A; padding: 1px 0; /* kart margin'i dışarı taşmasın */ }

/* Davetiye kartları — sadece metin taşır */
.lv-card {
  position: relative; background: var(--ivory); text-align: center;
  max-width: 1060px; margin: clamp(16px, 3vh, 40px) auto;
  padding: 12vh 8vw; box-shadow: 0 24px 70px rgba(60,48,30,.14);
}
.lv-card-hero { min-height: 92svh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lv-card-slim { padding: 10vh 8vw; }
.lv-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lvf-outer, .lvf-inner { fill: none; stroke: var(--gold); vector-effect: non-scaling-stroke; }
.lvf-outer { stroke-width: 1.6; }
.lvf-inner { stroke-width: .7; opacity: .6; }

.lv-monogram {
  display: inline-grid; place-items: center; width: 74px; height: 74px; border-radius: 50%;
  border: 1px solid var(--gold); color: var(--gold);
  font-family: var(--serif); font-style: italic; font-size: 2.2rem; margin-bottom: 30px;
}
.lv-pre { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: #6B6355; margin-bottom: 14px; }
.lv-title { font-family: var(--serif); font-weight: 600; font-size: clamp(2.8rem, 7.4vw, 5.4rem); color: #23201A; }
.lv-sub { margin-top: 22px; font-size: 1.02rem; line-height: 1.75; color: #57503F; }
.lv-rule { display: flex; align-items: center; gap: 14px; margin: 44px auto 0; max-width: 340px; color: var(--gold); }
.lv-rule i { flex: 1; height: 1px; background: var(--gold); opacity: .55; }

/* Tam ekran sahne — yazı fotoğrafın üstünde */
.lv-scene { position: relative; min-height: 104vh; overflow: hidden; display: flex; align-items: flex-end; }
.lv-scene img { position: absolute; inset: 0; width: 100%; height: 116%; object-fit: cover; will-change: transform; }
.lv-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,24,14,.22) 0%, rgba(30,24,14,0) 36%, rgba(30,24,14,.66) 90%); }
.lv-scene-copy { position: relative; z-index: 2; padding: 0 7vw 10vh; max-width: 660px; color: #FBF8F2; text-align: left; }
.lv-scene-copy h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(2.2rem, 5.4vw, 4rem); margin-bottom: 16px; }
.lv-scene-copy h2 em { font-style: italic; color: #E8C97A; }
.lv-scene-copy p { font-size: 1.05rem; line-height: 1.75; color: #EFE9DC; }

/* Tam ekran diptik */
.lv-diptych { display: grid; grid-template-columns: 1.35fr 1fr; gap: 4px; }
.lv-diptych figure { position: relative; overflow: hidden; height: 96vh; }
.lv-diptych img { width: 100%; height: 112%; object-fit: cover; will-change: transform; }
.lv-diptych figure:last-child img { object-position: center 62%; }
.lv-diptych figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 40px 26px 20px; color: #fff;
  font-family: var(--serif); font-style: italic; font-size: 1rem;
  background: linear-gradient(transparent, rgba(20,16,8,.6));
}

/* Program listesi */
.lv-h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin-bottom: 34px; letter-spacing: .02em; }
.lv-list { display: flex; flex-direction: column; gap: 0; text-align: left; max-width: 640px; margin: 0 auto; }
.lv-list > div { display: grid; grid-template-columns: 150px 1fr; gap: 18px; padding: 18px 4px; border-top: 1px solid rgba(185,138,47,.35); }
.lv-list > div:last-child { border-bottom: 1px solid rgba(185,138,47,.35); }
.lv-list dt { font-family: var(--serif); font-weight: 600; color: var(--gold); }
.lv-list dd { color: #57503F; line-height: 1.6; font-size: .96rem; }

.lv-quote { max-width: 680px; margin: 0 auto 8vh; text-align: center; font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 2.6vw, 1.75rem); line-height: 1.55; color: #3E382C; }
.lv-quote cite { display: block; margin-top: 16px; font-family: var(--sans); font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; }

.lv-card .lv-rule { margin-bottom: 44px; }
.lv-rsvp-line { font-family: var(--serif); font-style: italic; color: #6B6355; margin-bottom: 20px; font-size: 1.1rem; }
.lv-btn {
  display: inline-block; margin-top: 8px; background: var(--gold); color: #fff;
  font-weight: 700; letter-spacing: .04em; text-decoration: none;
  padding: 16px 40px; border-radius: 2px;
  transition: transform .2s, box-shadow .3s;
}
.lv-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(185,138,47,.35); }
.lv-addr { margin-top: 18px; font-size: .9rem; color: #6B6355; }
.lv-addr a { color: inherit; }
.lv-next { color: #57503F; border-color: rgba(185,138,47,.5); }
.lv-next a { font-family: var(--serif); }

/* ============================================================
   REVEAL & MOBİL & REDUCED
   ============================================================ */
@media (max-width: 860px) {
  .hub { flex-direction: column; height: auto; min-height: 100svh; }
  .slice { min-height: 30vh; flex: unset !important; }
  .slice-line { opacity: 1; transform: none; }
  .hub-center { position: fixed; top: 18px; left: 0; right: 0; margin: 0 auto; }
  .hub-mark { font-size: 2rem; }
  .hub-sub { display: none; }
  .lx-scene { min-height: 78vh; }
  .lx-scene-right .lx-scene-copy { text-align: left; }
  .lv-diptych { grid-template-columns: 1fr; }
  .lv-diptych figure { height: 62vh; }
  .lv-card { margin: 10px; padding: 10vh 8vw; }
  .lv-card-hero { min-height: 88svh; }
  .lv-list > div { grid-template-columns: 1fr; gap: 4px; }
  .lv-list > div { grid-template-columns: 1fr; gap: 4px; }
  .sp-clock { right: 16px; top: 14px; }
  .sp-clock span { font-size: 1.5rem; }
  #orbit { bottom: 10px; max-width: calc(100vw - 14px); overflow-x: auto; }
  #orbit a { padding: 8px 11px; font-size: .76rem; }
  #page-livia { padding: 8px; }
  .lv-paper { padding: 8vh 7vw; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}