/* =========================================================================
   AÇILIŞ SAHNESİ — "Bir çizgiden, yaşanacak bir eve"
   Sahne ilerlemesi --p (0–1) assets/js/scene.min.js'ten gelir; yazılar CSS ile ona bağlanır.
   Kaynak: src/acilis/scene.js  →  npm run build:scene
   ========================================================================= */

/* ---------- Sahne kabı ---------- */
.sc { position: relative; height: 430vh; background: #121314; }
.sc__stage {
  --p: 0;
  --fill: clamp(0, calc((var(--p) - 0.015) / 0.26), 1);
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; color: var(--paper); isolation: isolate;
}
.sc__sky { position: absolute; inset: 0; z-index: -2; background: #121417;
  --morning: clamp(0, calc((var(--p) - 0.68) / 0.1), 1);
  --day: max(calc(clamp(0, calc((var(--p) - 0.06) / 0.16), 1) * (1 - clamp(0, calc((var(--p) - 0.3) / 0.3), 1))), var(--morning));
  --night: calc(clamp(0, calc((var(--p) - 0.3) / 0.3), 1) * (1 - var(--morning))); }
.sc__sky::before, .sc__sky::after { content: ''; position: absolute; inset: 0; }
.sc__sky::before { opacity: var(--day); background: linear-gradient(180deg, #1c2633 0%, #3b3a41 38%, #8a6a4e 62%, #6b5444 100%); }
.sc__sky::after { opacity: var(--night); background: radial-gradient(70% 40% at 50% 62%, rgba(201,171,121,.12), transparent 70%), linear-gradient(180deg, #070a0e 0%, #0e131a 45%, #10141a 62%, #0d1014 100%); }
.sc__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -1; }
.sc__fallback { position: absolute; inset: 0; z-index: -1; display: none; }
.sc__fallback img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.sc__vignette { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(18,19,20,.55) 0%, rgba(18,19,20,0) 22%, rgba(18,19,20,0) 55%, rgba(18,19,20,.86) 100%),
    radial-gradient(130% 100% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%); }

/* ---------- Başlık bloğu ---------- */
.sc__head {
  --out: clamp(0, calc((var(--p) - 0.2) / 0.1), 1);
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: max(11vh, 96px);
  display: grid; gap: 18px; max-width: 900px;
  opacity: calc(1 - var(--out)); transform: translateY(calc(var(--out) * -60px));
}
.sc__eyebrow { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.sc__eyebrow span { width: 40px; height: 9px; border-inline: 1px solid currentColor; background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat; }
.sc__title { font-size: clamp(58px, 10.5vw, 168px); line-height: .86; letter-spacing: -.03em; font-weight: 800; font-stretch: 66%; text-transform: uppercase; }
.sc__l1, .sc__l2 { display: block; }
.sc__l2 { position: relative; width: fit-content; color: transparent; -webkit-text-stroke: 1.2px var(--gold); }
.sc__l2::after { content: attr(data-text); position: absolute; inset: 0; color: var(--gold); -webkit-text-stroke: 0; clip-path: inset(0 calc((1 - var(--fill)) * 100%) 0 0); }
.sc__l2::before { content: ''; position: absolute; top: 4%; bottom: 4%; width: 2px; left: calc(var(--fill) * 100%); background: var(--paper); box-shadow: 0 0 18px rgba(255,220,160,.9); opacity: calc((1 - var(--fill)) * 4); }
.sc__lead { font-size: clamp(17px, 1.6vw, 21px); color: #e2dbd0; max-width: 36ch; }
.sc__routes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; max-width: none; }
.sc__routes { grid-column: auto; grid-row: auto; width: auto; }
.sc__routes .route { flex: 0 1 auto; }
.sc__route { display: inline-flex; align-items: center; gap: 14px; min-height: 58px; padding: 0 22px; border-radius: 999px; background: var(--gold); color: var(--ink); text-decoration: none; font-weight: 650; font-size: 16px; transition: transform .5s var(--ease), background .3s; }
.sc__route span { font-family: var(--mono); font-size: 11px; opacity: .65; }
.sc__route i { font-style: normal; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid currentColor; transition: transform .5s var(--ease); }
.sc__route:hover { transform: translateY(-2px); background: #dcc092; }
.sc__route:hover i { transform: rotate(-45deg); }
.sc__route--ghost { background: rgba(18,19,20,.5); color: var(--paper); border: 1px solid rgba(242,237,229,.35); }
.sc__route--ghost:hover { background: rgba(18,19,20,.8); border-color: var(--gold); }

/* ---------- Anlatı cümleleri ---------- */
.sc__say { position: absolute; left: var(--gutter); max-width: 12ch; text-align: left; margin: 0; pointer-events: none;
  font-size: clamp(46px, 7.6vw, 132px); line-height: .92; font-weight: 300; font-stretch: 72%; letter-spacing: -.02em; text-transform: uppercase; }
.sc__say em { font-style: normal; display: block; }
.sc__say--a { --in: clamp(0, calc((var(--p) - 0.29) / 0.07), 1); --o: clamp(0, calc((0.58 - var(--p)) / 0.06), 1); top: 24vh; color: var(--paper); }
.sc__say--b { --in: clamp(0, calc((var(--p) - 0.58) / 0.06), 1); --o: clamp(0, calc((0.72 - var(--p)) / 0.04), 1); bottom: 16vh; color: var(--gold); }
.sc__say { opacity: min(var(--in), var(--o)); transform: translateY(calc((1 - var(--in)) * 40px)) scale(calc(0.96 + var(--in) * 0.04)); }

/* ---------- Aşama göstergesi ---------- */
.sc__phases { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); display: grid; gap: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(242,237,229,.32); }
.sc__phases li { display: flex; align-items: center; gap: 10px; justify-content: flex-end; transition: color .5s; }
.sc__phases li span { color: inherit; }
.sc__phases li::after { content: ''; width: 18px; height: 1px; background: currentColor; transition: width .6s var(--ease); }
[data-phase='1'] [data-ph='1'], [data-phase='2'] [data-ph='2'], [data-phase='3'] [data-ph='3'], [data-phase='4'] [data-ph='4'] { color: var(--gold); }
[data-phase='1'] [data-ph='1']::after, [data-phase='2'] [data-ph='2']::after, [data-phase='3'] [data-ph='3']::after, [data-phase='4'] [data-ph='4']::after { width: 42px; }


.sc__note { position: absolute; left: var(--gutter); bottom: 22px; margin: 0; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(242,237,229,.4); }
.sc__skip { position: absolute; right: var(--gutter); bottom: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(242,237,229,.22); color: var(--muted-light); text-decoration: none; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; transition: color .3s, border-color .3s; }
.sc__skip:hover { color: var(--paper); border-color: var(--gold); }
.sc__skip i { font-style: normal; }
.sc__cue { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(242,237,229,.6); opacity: calc(1 - clamp(0, calc(var(--p) / 0.04), 1)); }
.sc__cue i { position: relative; width: 1px; height: 38px; background: rgba(242,237,229,.2); overflow: hidden; }
.sc__cue i::after { content: ''; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--gold); animation: scrollLine 2.2s var(--ease) infinite; }

/* ---------- Pencereden geçiş ---------- */
.sc__flash { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 60% at 45% 55%, #ffe3b5, #f1c88a 45%, #b9894d 100%); opacity: clamp(0, calc((var(--p) - 0.8) / 0.09), 1); }
.sc__dark { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 40%, #121314); opacity: clamp(0, calc((var(--p) - 0.9) / 0.1), 1); }

/* ---------- Çizildi → Uygulandı ---------- */
.sc__reveal { position: absolute; inset: 0; pointer-events: none;
  --rv: clamp(0, calc((var(--p) - 0.73) / 0.07), 1);
  --rvo: 1; }
.sc__reveal::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,13,15,.15) 0%, rgba(12,13,15,.35) 45%, rgba(12,13,15,.7) 100%); opacity: min(var(--rv), var(--rvo)); }
.sc__mark { position: absolute; left: var(--gutter); top: calc(var(--topbar-h) + 4vh); margin: 0; transform: translateX(calc((1 - var(--rv)) * -30px));
  font-size: clamp(56px, 8vw, 140px); line-height: .9; font-weight: 800; font-stretch: 66%; text-transform: uppercase; letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1.2px var(--gold); opacity: min(var(--rv), var(--rvo)); }
.sc__photo { position: absolute; right: calc(var(--gutter) + 110px); top: 50%; margin: 0; width: min(42vw, 600px);
  transform: translateY(-50%) scale(calc(0.92 + var(--rv) * 0.08)); opacity: min(calc(var(--rv) * 1.4), var(--rvo)); display: grid; gap: 14px; }
.sc__photo-img { aspect-ratio: 720 / 558; overflow: hidden; border-radius: 6px; box-shadow: 0 50px 100px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(201,171,121,.35);
  clip-path: inset(0 0 0 calc((1 - var(--rv)) * 100%)); }
.sc__photo-img picture, .sc__photo-img img { display: block; width: 100%; height: 100%; }
.sc__photo-img img { object-fit: cover; transform: scale(calc(1.15 - var(--rv) * 0.15)); }
.sc__photo figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.sc__photo strong { font-size: clamp(34px, 3.6vw, 60px); line-height: 1; font-weight: 800; font-stretch: 66%; text-transform: uppercase; color: var(--gold); letter-spacing: -.01em; }
.sc__photo figcaption span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-light); }

/* ---------- Mobil (ayrı kompozisyon) ---------- */
@media (max-width: 760px) {
  .sc { height: 400vh; }
  .sc__head { bottom: calc(76px + env(safe-area-inset-bottom)); gap: 14px; }
  .sc__title { font-size: clamp(54px, 17vw, 84px); }
  .sc__lead { font-size: 16px; max-width: 30ch; }
  .sc__routes { flex-direction: column; align-items: stretch; }
  .sc__phases { top: calc(var(--topbar-h) + 8px); right: auto; left: var(--gutter); transform: none; display: flex; gap: 14px; font-size: 9.5px; }
  .sc__phases li::after { display: none; }
  .sc__phases li { gap: 5px; }
  .sc__say { right: var(--gutter) !important; left: var(--gutter); max-width: none; text-align: left; font-size: clamp(44px, 13vw, 64px); }
  .sc__say--a { top: auto; bottom: 13vh; max-width: 9.5ch; }
  .sc__say--b { bottom: 13vh; max-width: 9.5ch; }
  .sc__note { bottom: 16px; font-size: 9px; }
  .sc__skip { bottom: 10px; padding: 7px 12px; font-size: 10px; }
  .sc__cue { display: none; }
  .sc__mark { top: calc(var(--topbar-h) + 60px); transform: translateX(calc((1 - var(--rv)) * -20px)); font-size: clamp(48px, 15vw, 72px); }
  .sc__photo { right: var(--gutter); left: var(--gutter); width: auto; top: auto; bottom: 13vh; transform: scale(calc(0.94 + var(--rv) * 0.06)); }
  .sc__photo figcaption { flex-direction: column; gap: 4px; }
  .sc__vignette { background: linear-gradient(180deg, rgba(18,19,20,.7) 0%, rgba(18,19,20,0) 26%, rgba(18,19,20,0) 45%, rgba(18,19,20,.92) 100%); }
}

/* Sahne boyunca hızlı arama çubuğu gizli (başlıktaki iki buton zaten görünür) */
html.in-scene .quickbar { transform: translateY(160%); }

/* 3B yoksa ya da hareket azaltılmışsa */
.no-3d .sc, .scene-static .sc { height: auto; }
.no-3d .sc__stage, .scene-static .sc__stage { position: relative; min-height: 100svh; }
.no-3d .sc__canvas { display: none; }
.no-3d .sc__fallback { display: block; }
.no-3d .sc__stage, .scene-static .sc__stage { --p: 0 !important; --fill: 1 !important; }
.no-3d .sc__say, .no-3d .sc__phases, .no-3d .sc__cue, .no-3d .sc__flash, .no-3d .sc__dark,
.scene-static .sc__say, .scene-static .sc__phases, .scene-static .sc__cue, .scene-static .sc__flash, .scene-static .sc__dark { display: none; }

/* =========================================================================
   SONRAKİ BÖLÜM — gerçeğe geçiş (derinlikli kolaj)
   ========================================================================= */
.nx { position: relative; background: #121314; color: var(--paper); padding: clamp(48px, 7vw, 96px) 0 clamp(100px, 14vw, 200px); overflow: hidden; }
.nx::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 75% 40%, rgba(201,171,121,.08), transparent 70%); }
.nx__inner { position: relative; display: grid; gap: 56px; align-items: center; }
.nx__copy { display: grid; gap: 22px; align-content: start; }
.nx__h { font-size: clamp(54px, 9vw, 150px); line-height: .86; letter-spacing: -.03em; font-weight: 800; font-stretch: 66%; text-transform: uppercase; }
.nx__h .ln:nth-child(2) > span { color: transparent; -webkit-text-stroke: 1.2px var(--gold); }
.nx__p { color: #d9d2c7; max-width: 38ch; font-size: 18px; }
.nx__stack { position: relative; height: clamp(520px, 62vw, 760px); }
.nx__ph { position: absolute; margin: 0; overflow: hidden; border-radius: 6px; box-shadow: 0 40px 90px -40px rgba(0,0,0,.85); background: #1d1f21; }
.nx__ph picture, .nx__ph img { display: block; width: 100%; height: 100%; }
.nx__ph img { object-fit: cover; }
.nx__ph figcaption { position: absolute; left: 12px; bottom: 12px; padding: 6px 10px; border-radius: 999px; background: rgba(18,19,20,.75); font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--paper); }
.nx__ph--a { width: 72%; aspect-ratio: 16 / 10; left: 0; top: 6%; z-index: 2; }
.nx__ph--b { width: 46%; aspect-ratio: 4 / 5; right: 0; top: 0; z-index: 1; }
.nx__ph--c { width: 56%; aspect-ratio: 16 / 10; right: 6%; bottom: 0; z-index: 3; }
@media (min-width: 1000px) { .nx__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; } }
@media (max-width: 760px) {
  .nx__stack { height: auto; display: grid; gap: 14px; }
  .nx__ph { position: relative; width: auto !important; inset: auto !important; }
  .nx__ph--a { margin-right: 14%; }
  .nx__ph--b { margin-left: 30%; aspect-ratio: 4 / 4.4; margin-top: -60px; }
  .nx__ph--c { margin-right: 8%; margin-top: -40px; }
}


/* =========================================================================
   SAHNE DİLİ — sitenin geri kalanına taşınan iki imza
   ========================================================================= */
/* 1) Çizgiden dolan başlık satırı (yalnızca hareket açıkken; JS sınıfı ekler) */
.inkline { --ink-c: var(--ink); --f: 0; position: relative; color: transparent; -webkit-text-stroke: 1.2px var(--ink-c); }
.head--light .inkline, .apply .inkline, .works .inkline, .story .inkline { --ink-c: var(--gold); }
.inkline::after { content: attr(data-text); position: absolute; inset: 0; color: var(--ink-c); -webkit-text-stroke: 0; clip-path: inset(0 calc((1 - var(--f)) * 100%) 0 0); }
.inkline::before { content: ''; position: absolute; top: 6%; bottom: 6%; left: calc(var(--f) * 100%); width: 2px; background: var(--gold); box-shadow: 0 0 16px rgba(255,214,150,.85); opacity: calc(min(var(--f) * 12, (1 - var(--f)) * 4)); }

/* 2) Perde: açık bölüm, öncekinin üstüne yuvarlak bir kenarla biner */
.curtain { --r: clamp(22px, 3.2vw, 44px); position: relative; z-index: 2; margin-top: calc(var(--r) * -1); border-radius: var(--r) var(--r) 0 0; box-shadow: 0 -40px 80px -40px rgba(0,0,0,.55); }
.services.curtain { background: var(--ink-3, #1a1b1d); border-top: 1px solid rgba(201,171,121,.22); }
@media (prefers-reduced-motion: reduce) { .curtain { margin-top: 0; border-radius: 0; box-shadow: none; } }

/* =========================================================================
   DÜZELTMELER — tur 3
   ========================================================================= */

/* Kayan bant: ölçü çizgisi ayracı, dolu / çizgi kelimeler */
.marquee__track .mq-dim { flex: none; width: clamp(34px, 4vw, 56px); height: .42em; border-inline: 2px solid currentColor; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat; opacity: .75; }
.marquee__track span.o { color: transparent; -webkit-text-stroke: 1.4px var(--ink); }

/* Manifesto: koyu zemin, pafta ızgarası, son sözcükler altın */
.manifesto { position: relative; background: var(--ink); color: var(--paper); overflow: hidden; isolation: isolate; }
.manifesto::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(201,171,121,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(201,171,121,.08) 1px, transparent 1px);
  background-size: 88px 88px; -webkit-mask-image: radial-gradient(80% 70% at 30% 50%, #000 20%, transparent 85%); mask-image: radial-gradient(80% 70% at 30% 50%, #000 20%, transparent 85%); }
.manifesto__text .wd:nth-last-child(-n+3) { color: var(--gold); }
.manifesto__meta { display: flex; flex-wrap: wrap; gap: 10px; }
.manifesto__meta li { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-light); padding: 9px 14px; border: 1px solid rgba(201,171,121,.25); border-radius: 999px; }

/* Hizmetler: koyu antrasit */
.services { background: #1a1b1d; color: var(--paper); }

/* 33: havadan fotoğraf, alttan dolan sayı, 33 küçük ev */
.bignum { position: relative; background: var(--ink); color: var(--paper); isolation: isolate; }
.bignum__bg { position: absolute; inset: 0; z-index: -2; }
.bignum__bg picture, .bignum__bg img { width: 100%; height: 100%; }
.bignum__bg img { object-fit: cover; opacity: .28; filter: grayscale(.4); }
.bignum::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(18,19,20,.92) 0%, rgba(18,19,20,.55) 60%, rgba(18,19,20,.8) 100%); }
.bignum__n { -webkit-text-stroke: 2px var(--gold); }
.bignum__n span { --f: 1; display: inline-block; padding: .14em .03em .06em; margin: -.14em -.03em -.06em; color: transparent; background: linear-gradient(to top, var(--gold) calc(var(--f) * 100%), transparent calc(var(--f) * 100%)); -webkit-background-clip: text; background-clip: text; }
.bignum .link-line { color: var(--paper); }
.villas { width: min(100%, 420px); margin: 4px 0 6px; }
.homes { display: block; width: 100%; height: auto; overflow: visible; }
.home { --on: 1; }
.home__roof, .home__body { fill: var(--gold); fill-opacity: calc(var(--on) * .92); stroke: var(--gold); stroke-opacity: calc(.4 + var(--on) * .6); stroke-width: .9; }
.home__door { fill: var(--ink); fill-opacity: var(--on); stroke: var(--gold); stroke-width: .7; stroke-opacity: calc(.4 - var(--on) * .4); }

/* Önce / Sonra: üç seçenek her ekranda yan yana sığar */
.ba-tabs { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
@media (max-width: 899px) {
  .ba-tabs [role='tab'] { grid-template-columns: 1fr; grid-template-rows: auto auto auto; justify-items: start; row-gap: 6px; padding: 8px; }
  .ba-tabs .t-thumb { grid-row: auto; width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .ba-tabs .t-l { font-size: 14px; }
}
@media (min-width: 900px) { .ba-tabs { grid-template-columns: repeat(3, 180px); } }

/* Rehber: mobilde yan yana kaydırılan kartlar */
.reader__nav { display: none; }
@media (max-width: 999px) {
  .reader__list { display: none; }
  .reader__panels { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .reader__panels::-webkit-scrollbar { display: none; }
  .reader__panel, .reader__panel[hidden] { display: grid; align-content: start; gap: 16px; flex: 0 0 86%; scroll-snap-align: start; min-height: 0; }
  .reader__panel .reader__body { font-size: 16px; }
  .reader__nav { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; margin-top: 6px; }
  .reader__count { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--muted); }
  .reader__count b { color: var(--text); font-weight: 600; }
  .reader__track { height: 1px; background: var(--line); overflow: hidden; }
  .reader__track i { display: block; height: 100%; background: var(--gold-ink); transform-origin: left; transform: scaleX(.1667); transition: transform .4s var(--ease); }
  .reader__arrow { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; }
  .reader__arrow .ico { width: 18px; height: 18px; }
  .reader__arrow:active { background: var(--ink); color: var(--paper); }
}

/* Alt bilgi: saat kalktı */
.footer__bottom { justify-content: space-between; }

/* Başa dön: sağda sabit, ilerleme halkalı */
.up { position: fixed; z-index: 49; right: 24px; bottom: 166px; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(21,22,23,.94); color: var(--paper); box-shadow: 0 14px 30px rgba(0,0,0,.35);
  opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .4s, transform .5s var(--ease); }
.up .ico { width: 20px; height: 20px; transition: transform .5s var(--ease); }
.up__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; }
.up__ring circle { stroke: rgba(201,171,121,.25); stroke-width: 1.5; }
.up__ring .up__prog { stroke: var(--gold); stroke-dasharray: 1; stroke-dashoffset: 1; }
.up:hover .ico { transform: translateY(-3px); }
html.past-hero:not(.in-scene):not(.menu-open) .up { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 899px) {
  .up { right: 14px; bottom: calc(var(--quickbar-h, 74px) + 10px); width: 46px; height: 46px; }
}

/* Referanslar: fotoğraflı kartlar */
.refs__list--cards { grid-template-columns: minmax(0, 1fr); gap: 28px; border-top: 0; }
@media (min-width: 900px) { .refs__list--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.ref--card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 0; border: 0; align-items: start; align-content: start; }
.ref--card::after { display: none; }
.ref__img { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: var(--stone, #d9d3c8); }
.ref__img picture, .ref__img img { display: block; width: 100%; height: 100%; }
.ref__img img { object-fit: cover; transition: transform 1.2s var(--ease); }
.ref--card:hover .ref__img img { transform: scale(1.05); }
.ref__txt { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 10px; row-gap: 4px; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--line); }
.ref--card .ref__meta { grid-column: 2; }

/* Referanslar: koyu, gösterişli */
.refs { background: #141517; color: var(--paper); border-top: 1px solid rgba(201,171,121,.18); }
.refs__top { display: grid; gap: 36px; margin-bottom: clamp(36px, 5vw, 64px); }
.refs .head { margin-bottom: 0; }
.refs__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(201,171,121,.3); }
.refs__stats > div { display: grid; gap: 4px; padding: 18px 0 0; }
.refs__stats > div + div { padding-left: 18px; border-left: 1px solid rgba(242,237,229,.12); }
.refs__stats dt { order: 2; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-light); }
.refs__stats dd { order: 1; margin: 0; font-size: clamp(56px, 7vw, 104px); line-height: .9; font-weight: 800; font-stretch: 62%; color: var(--gold); font-variant-numeric: tabular-nums; }
@media (min-width: 1000px) { .refs__top { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; gap: 64px; } }
.refs .ref__txt { border-top-color: rgba(242,237,229,.14); }
.refs .ref__name { color: var(--paper); }
.refs .ref__meta { color: var(--muted-light); }
.refs .ref__n { color: var(--gold); }
.refs .ref__img { background: #1f2022; box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.refs .ref__img img { filter: saturate(.9); transition: transform 1.2s var(--ease), filter .6s; }
.refs .ref--card:hover .ref__img img { filter: saturate(1.05); }
/* Yapı türü: fotoğrafın altında ince altın çizgi + aralıklı harfler (editoryal etiket) */
.ref__type { position: absolute; z-index: 1; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 4px;
  background: linear-gradient(135deg, #e3c88f, #c9ab79 55%, #a8874f); color: #141517; box-shadow: 0 10px 24px -8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.45);
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.ref__type svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ref--card:hover .ref__type { transform: translateY(-2px); transition: transform .5s var(--ease); }
.refs__more { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px; margin-top: clamp(28px, 4vw, 44px); padding: 18px 22px; border: 1px solid rgba(201,171,121,.28); border-radius: 12px; color: #d9d2c7; font-size: 17px; line-height: 1.5; }
.refs__more-k { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }

/* Hizmet bölgesi: merkez + Türkiye geneli */
.area__txt small { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-top: 4px; }
.refs__top { grid-template-columns: minmax(0, 1fr) !important; }

/* Referans notu: vizör köşeli premium çerçeve */
.rnote { position: relative; display: grid; gap: 26px; margin-top: clamp(36px, 5vw, 64px); padding: clamp(28px, 4vw, 48px); border-radius: 4px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(201,171,121,.12), transparent 55%), linear-gradient(180deg, #1b1c1f, #151618); border: 1px solid rgba(201,171,121,.18); }
.rnote__c { position: absolute; width: 22px; height: 22px; border: 0 solid var(--gold); }
.rnote__c--tl { left: -1px; top: -1px; border-left-width: 2px; border-top-width: 2px; }
.rnote__c--tr { right: -1px; top: -1px; border-right-width: 2px; border-top-width: 2px; }
.rnote__c--bl { left: -1px; bottom: -1px; border-left-width: 2px; border-bottom-width: 2px; }
.rnote__c--br { right: -1px; bottom: -1px; border-right-width: 2px; border-bottom-width: 2px; }
.rnote__main { display: grid; gap: 16px; }
.rnote__t { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.22; font-weight: 650; font-stretch: 86%; letter-spacing: -.01em; color: var(--paper); max-width: 30ch; }
.rnote__list { display: grid; border-top: 1px solid rgba(242,237,229,.12); }
.rnote__list li { display: grid; grid-template-columns: 38px 1fr; align-items: baseline; padding: 14px 0; border-bottom: 1px solid rgba(242,237,229,.12); color: #e4ddd2; font-size: 16px; font-weight: 600; }
.rnote__list span { font-family: var(--mono); font-size: 11px; color: var(--gold); }
@media (min-width: 1000px) { .rnote { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: center; } .rnote__list { border-top: 0; } .rnote__list li:first-child { border-top: 1px solid rgba(242,237,229,.12); } }
.pgroup .pgal__grid { margin-top: 4px; }

/* Çizimden yapıya — mobil tam ekran hikâye modu (yalnızca hareket açıkken; JS .story--m ekler) */
@media (max-width: 999px) {
  .story--m .story__pin { height: 100vh; height: 100svh; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 14px; padding: calc(var(--topbar-h) + 10px) var(--gutter) calc(var(--quickbar-h, 74px) + 12px); }
  .story--m .story__info { gap: 10px; }
  .story--m .story__info .kicker { display: none; }
  .story--m .story__h { font-size: clamp(34px, 10vw, 48px); }
  .story--m .story__sub { display: none; }
  .story--m .story__counter { display: flex; align-items: baseline; gap: 8px; font-family: var(--mono); color: var(--gold); order: 3; }
  .story--m .story__counter > span { font-family: var(--font); font-size: 34px; line-height: 1; font-weight: 800; font-stretch: 68%; color: var(--paper); font-variant-numeric: tabular-nums; }
  .story--m .story__counter small { font-size: 12px; }
  .story__segs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; order: 2; }
  .story__segs i { display: block; height: 3px; border-radius: 2px; background: rgba(242,237,229,.18); overflow: hidden; }
  .story__segs b { display: block; height: 100%; background: var(--gold); transform-origin: left; transform: scaleX(0); }
  .story--m .story__stage { position: relative; min-height: 0; border-radius: 14px; overflow: hidden; }
  .story--m .story__frames { position: relative; display: block; height: 100%; overflow: hidden; background: var(--ink-2); gap: 0; }
  .story--m .sframe { position: absolute; inset: 0; display: block; overflow: hidden; }
  .story--m .sframe__img { position: absolute; inset: 0; aspect-ratio: auto; }
  .story--m .sframe__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 18px 18px; background: linear-gradient(transparent, rgba(21,22,23,.9)); }
  .story--m .sframe__t { color: var(--paper); }
}

/* Başvuru formu: vizör köşeleri + canlı mesaj önizlemesi + fotoğraf notu */
.wizard::after { content: ''; position: absolute; inset: 10px; pointer-events: none; border-radius: 14px; opacity: .7;
  background:
    linear-gradient(var(--gold), var(--gold)) left top / 18px 1.5px no-repeat, linear-gradient(var(--gold), var(--gold)) left top / 1.5px 18px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right top / 18px 1.5px no-repeat, linear-gradient(var(--gold), var(--gold)) right top / 1.5px 18px no-repeat,
    linear-gradient(var(--gold), var(--gold)) left bottom / 18px 1.5px no-repeat, linear-gradient(var(--gold), var(--gold)) left bottom / 1.5px 18px no-repeat,
    linear-gradient(var(--gold), var(--gold)) right bottom / 18px 1.5px no-repeat, linear-gradient(var(--gold), var(--gold)) right bottom / 1.5px 18px no-repeat; }
.wlive { display: none; }
@media (min-width: 1000px) {
  .wlive { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 16px; border-radius: 14px; background: rgba(0,0,0,.25); border: 1px dashed rgba(201,171,121,.28); }
  .wizard.is-review .wlive { display: none; }
}
.wlive__k { display: inline-flex; align-items: center; gap: 8px; padding-top: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.wlive__k svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.wlive__b { position: relative; justify-self: start; max-width: 100%; display: grid; gap: 3px; padding: 10px 14px; border-radius: 4px 14px 14px 14px; background: #1f3a30; color: #e9efe9; font-size: 14px; line-height: 1.45; box-shadow: 0 8px 20px -10px rgba(0,0,0,.6); }
.wlive__b p { display: flex; gap: 8px; margin: 0; min-width: 0; animation: wliveIn .45s var(--ease) both; }
.wlive__b b { flex: none; font-weight: 600; color: #b9e3c9; }
.wlive__b b::after { content: ':'; }
.wlive__b span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wlive__b .wlive__ph { color: rgba(233,239,233,.65); font-style: italic; }
@keyframes wliveIn { from { opacity: 0; transform: translateY(4px); } }
.wstep__tip { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(201,171,121,.3); background: rgba(201,171,121,.07); color: #e4ddd2; font-size: 15px; line-height: 1.5; }
.wstep__tip svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linejoin: round; }

/* İletişim: ofis adresi kartı (haritada açılır) */
a.area { text-decoration: none; color: inherit; transition: border-color .3s, background .3s; }
a.area:hover { border-color: rgba(201,171,121,.7); background: rgba(201,171,121,.05); }
.area__addr { font-style: normal; font-size: 14px; line-height: 1.5; color: #d9d2c7; margin-top: 4px; }
.area__go { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(201,171,121,.45); color: var(--gold); transition: background .3s, color .3s; }
.area__go .ico { width: 16px; height: 16px; }
a.area:hover .area__go { background: var(--gold); color: var(--ink); }