/* Konsept B: sahne, hareket, imleç, preloader, geçişler. Gizli başlangıç durumları yalnız `.js` sınıfı + hareket kısıtsızken geçerlidir. */

/* ---------- 3D sahne katmanı ---------- */
.sahne3d { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--e-cik); }
.sahne3d canvas { display: block; width: 100%; height: 100%; mix-blend-mode: lighten; } /* tuval siyahı sayfa zemini (#060606) üstünde erir */
.gl .sahne3d { opacity: 1; }
main, .alt { position: relative; z-index: 1; }
.ust { z-index: 60; }

/* kompozisyon: karartma yok. Şalter, metnin olmadığı yarıya geçer (kamera kaydırması sahne.js'te); metin sütunları dar tutulur. */
.gl .alt { background: var(--murekkep); }
.gl .serit { background: var(--murekkep); }
@media (min-width: 64em) {
  .gl [data-sahne="1"] > *, .gl [data-sahne="4"] > *, .gl [data-sahne="3"] > h2, .gl [data-sahne="3"] > p { max-width: min(46%, 34rem); }
  .gl [data-sahne="2"] > * { margin-left: auto; width: 46%; max-width: none; }
  .gl [data-sahne="2"] .adimlar { max-width: none; }
  .gl [data-sahne="3"] > h2 { font-size: clamp(2rem, 3.6vw, 3.4rem); }
}
/* telefon: nesne üstte, metin cam paneller üzerinde (karartma değil, buzlu cam) */
@media (max-width: 63.99em) {
  .gl main .blok:not(.zemin-krem):not(.zemin-kirmizi), .gl main .son { margin: .75rem .5rem; width: auto; border-radius: 1.25rem; background: rgba(9, 9, 10, .62); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); border: 1px solid var(--cizgi); padding-inline: clamp(1rem, 5vw, 2rem); }
  .gl main .blok::before, .gl main .son::before { display: none; }
}

/* ritim: krem ve kırmızı bölümler, siyahın arasına kırmızı çizgiyle girer */
.zemin-krem, .zemin-kirmizi { background: var(--zemin); color: var(--yazi-r); box-shadow: 0 0 0 100vmax var(--zemin); clip-path: inset(0 -100vmax); --kagit: var(--yazi-r); --gri-koyu: var(--ikinci-r); --kirmizi-koyu: var(--vurgu-r); }
.zemin-krem { --zemin: #ece9e1; --yazi-r: #0b0b0a; --ikinci-r: #4f4b44; --vurgu-r: #b8261d; --cizgi: rgba(11, 11, 10, .22); }
.zemin-kirmizi { --zemin: #e5372c; --yazi-r: #0b0b0a; --ikinci-r: #2b0b08; --vurgu-r: #0b0b0a; --cizgi: rgba(11, 11, 10, .3); }
.zemin-krem h2, .zemin-kirmizi h2 { color: var(--yazi-r); }
.zemin-krem .ozet-liste dt, .zemin-kirmizi .madde li::before { color: var(--ikinci-r); }
.zemin-kirmizi a { color: var(--yazi-r); }

/* ---------- hero ---------- */
.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(3rem, 9vh, 6rem); }
.hero h1 { font-size: clamp(2.6rem, 7.3vw, 7.2rem); max-width: 14ch; margin-bottom: 1.8rem; }
.hero h1 .vurgu { color: var(--kirmizi); font-style: normal; }
.hero-alt { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; max-width: 66rem; }
.hero-alt .ozet { margin: 0; flex: 1 1 24rem; }
.hero-poster { position: absolute; inset: 0; background: url("/assets/sahne-poster.jpg") 50% 0 / cover no-repeat; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); pointer-events: none; z-index: -1; transition: opacity 1s var(--e-cik); }
.gl .hero-poster { opacity: 0; }
@media (max-width: 52em) { .hero-poster { background-image: url("/assets/sahne-poster-telefon.jpg"); } }
body:not([data-sayfa="home"]) .hero-poster { display: none; }
.kaydir { position: absolute; right: clamp(1rem, 4vw, 2.5rem); bottom: clamp(1.5rem, 4vh, 3rem); font: 500 .7rem var(--mono); letter-spacing: .24em; color: var(--gri-koyu); writing-mode: vertical-rl; display: flex; align-items: center; gap: .9rem; }
.kaydir::after { content: ""; width: 1px; height: 4.5rem; background: linear-gradient(var(--kirmizi), transparent); transform-origin: top; animation: kaydir 2.4s var(--e-kes) infinite; }
@keyframes kaydir { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.hero-alt .dugme { flex: none; }

/* ---------- şerit ---------- */
.serit { overflow: hidden; border-block: 1px solid var(--cizgi); padding-block: 1.1rem; position: relative; z-index: 1; background: rgba(6, 6, 6, .72); }
.serit-ic { display: flex; width: max-content; animation: serit 60s linear infinite; }
.serit-ic > div { display: flex; flex: none; }
.serit span { font: 600 clamp(1.8rem, 5vw, 4.2rem)/1.1 "Clash Static", var(--gosterim); letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px rgba(236, 234, 228, .42); padding-inline: 1.4rem; white-space: nowrap; display: inline-flex; align-items: center; gap: 2.8rem; }
.serit span::after { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--kirmizi); flex: none; }
@keyframes serit { to { transform: translateX(-50%); } }

/* ---------- mekanizma HUD ---------- */
.hud { position: fixed; z-index: 40; left: 50%; bottom: clamp(.8rem, 2.5vh, 1.6rem); translate: -50% 0; list-style: none; margin: 0; padding: .35rem 1.1rem; display: none; flex-direction: row; gap: 1.6rem; align-items: center; font: 500 .68rem var(--mono); letter-spacing: .18em; background: rgba(8, 8, 9, .55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--cizgi); border-radius: 999px; }
.gl .hud { display: flex; }
.hud li { display: flex; align-items: center; gap: .7rem; color: rgba(236, 234, 228, .38); transition: color var(--s-orta) var(--e-his); padding: .35rem 0; }
.hud li i { font-style: normal; }
.hud li::after { content: none; }
.hud li { padding: .3rem 0; border-bottom: 1px solid transparent; transition: color var(--s-orta) var(--e-his), border-color var(--s-orta); }
.hud li.aktif { color: var(--kagit); }
.hud li.aktif { border-bottom-color: var(--kirmizi); }
.hud li.aktif i { color: var(--kirmizi-koyu); }
.hud li.gecti { color: rgba(236, 234, 228, .7); }
@media (max-width: 52em) { .gl .hud { display: none; } } /* telefonda metnin üstüne binmesin */

/* ---------- kırmızı çizgi: bölüm geçişi (sahneyi keser) ---------- */
.blok, .son { isolation: isolate; }
.blok::before, .son::before { content: ""; position: absolute; left: 50%; width: 100vw; margin-left: -50vw; top: 0; height: 1px; background: var(--kirmizi); opacity: .32; pointer-events: none; }
.blok::after, .son::after { content: none; position: absolute; left: 50%; width: 100vw; margin-left: -50vw; top: 0; bottom: 0; z-index: -1; pointer-events: none; }
.hikaye .blok::before { opacity: .32; }
@media (prefers-reduced-motion: no-preference) {
  .js .blok:not(.kesti)::before, .js .son:not(.kesti)::before { transform: scaleX(0); transform-origin: left; opacity: 1; box-shadow: 0 0 20px 2px rgba(229, 55, 44, .8); }
  .js .blok.kesti::before, .js .son.kesti::before { animation: kes 1.5s var(--e-kes) both; transform-origin: left; }
}
@keyframes kes { 0% { transform: scaleX(0); opacity: 1; box-shadow: 0 0 22px 3px rgba(229, 55, 44, .9); } 55% { transform: scaleX(1); opacity: 1; box-shadow: 0 0 22px 3px rgba(229, 55, 44, .9); } 100% { transform: scaleX(1); opacity: .32; box-shadow: none; } }

/* ---------- belirme ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .r:not(.gorunur) { opacity: 0; translate: 0 2.4rem; }
  .js .r { transition: opacity var(--s-uzun) var(--e-cik), translate var(--s-uzun) var(--e-cik); transition-delay: calc(var(--s, 0) * 90ms); }
  .js .r.bitti { transition-delay: 0s; }
  .js .hero h1 { opacity: 0; }
  .js .hero.acildi h1, .js .hero h1.hazir-h1 { opacity: 1; }
  .js .hero h1 .kw { margin-right: .22em; display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
  .js .hero h1 .kw .k { display: inline-block; translate: 0 112%; rotate: 4deg; transform-origin: 0 100%; transition: translate 1.1s var(--e-cik), rotate 1.1s var(--e-cik); transition-delay: calc(var(--i, 0) * 14ms + var(--w, 0) * 55ms); }
  .js .hero.acildi h1 .kw .k { translate: 0 0; rotate: 0deg; }
  .js .hero .ust-yazi, .js .hero-alt, .js .kaydir { opacity: 0; translate: 0 1.2rem; transition: opacity 1s var(--e-cik) .5s, translate 1s var(--e-cik) .5s; }
  .js .hero.acildi .ust-yazi, .js .hero.acildi .hero-alt, .js .hero.acildi .kaydir { opacity: 1; translate: 0 0; }
  .js .dev-ad .h { translate: 0 105%; transition: translate 1.2s var(--e-cik); transition-delay: calc(var(--i, 0) * 60ms); }
  .js .dev-ad.gorunur .h { translate: 0 0; }
}

/* ---------- ilerleyen bölüm: adımlar ---------- */
.adim-bolum .adimlar li { transition: opacity var(--s-orta) var(--e-his); }

/* ---------- hizmetler: yatay sürüklenebilir kartlar, ince 3D eğim ---------- */
.yatay-aday { --yan: max(clamp(1rem, 4vw, 2.5rem), calc((100vw - 78rem) / 2 + clamp(1rem, 4vw, 2.5rem))); }
.yatay-aday .kartlar { display: flex; gap: 1.2rem; overflow-x: auto; margin-inline: calc(50% - 50vw); padding: 1.5rem var(--yan) 2.5rem; scroll-padding-inline: var(--yan); scroll-snap-type: x proximity; perspective: 1400px; scrollbar-width: thin; scrollbar-color: var(--kirmizi) transparent; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.yatay-aday .kartlar::-webkit-scrollbar { height: 3px; } .yatay-aday .kartlar::-webkit-scrollbar-thumb { background: var(--kirmizi); }
.yatay-aday .kart { flex: 0 0 min(82vw, 25rem); min-height: 22rem; scroll-snap-align: start; transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)) translateZ(var(--tz, 0px)); transform-style: preserve-3d; transition: transform .5s var(--e-his), border-color var(--s-orta), background var(--s-orta); will-change: transform; display: flex; flex-direction: column; }
.yatay-aday .kart::before { content: attr(data-no); position: absolute; right: 1.4rem; top: 1.2rem; font: 500 .72rem var(--mono); letter-spacing: .16em; color: var(--kirmizi-koyu); }
.yatay-aday .kart:hover { border-color: rgba(229, 55, 44, .6); background: rgba(20, 12, 12, .76); }
.yatay-aday .kartlar.suruk { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.yatay-aday .kartlar.suruk .kart { transition: none; }
.yatay-aday .kartlar.suruk a { pointer-events: none; }
.kart h3 { padding-right: 2.5rem; }

/* ---------- footer dev yazı ---------- */
.dev-ad { font: 700 clamp(4.2rem, 21vw, 24rem)/.82 "Clash Static", var(--gosterim); letter-spacing: -.045em; margin: 1.5rem 0 .5rem; overflow: hidden; white-space: nowrap; padding-bottom: .06em; user-select: none; }
.dev-ad .h { display: inline-block; color: transparent; -webkit-text-stroke: 1px rgba(236, 234, 228, .3); transition: color .4s var(--e-his), -webkit-text-stroke-color .4s; }
.dev-ad .h:hover { color: var(--kirmizi); -webkit-text-stroke-color: var(--kirmizi); }

/* ---------- imleç ---------- */
.imlec, .imlec-nokta { position: fixed; left: 0; top: 0; z-index: 500; pointer-events: none; opacity: 0; transition: opacity .3s; }
.imlec-gorunur .imlec, .imlec-gorunur .imlec-nokta { opacity: 1; }
.imlec-nokta { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--kirmizi); }
.imlec i { position: absolute; left: 0; top: 0; width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid rgba(236, 234, 228, .55); border-radius: 50%; display: grid; place-content: center; font: 500 .62rem/1 var(--mono); letter-spacing: .14em; font-style: normal; color: transparent; transition: width .45s var(--e-cik), height .45s var(--e-cik), margin .45s var(--e-cik), background .3s, border-color .3s, color .25s, border-radius .45s var(--e-cik); white-space: nowrap; }
.imlec-var, .imlec-var a, .imlec-var button, .imlec-var summary, .imlec-var label, .imlec-var select, .imlec-var .kart { cursor: none; }
.imlec-var input, .imlec-var textarea { cursor: text; }
.imlec-link .imlec i { width: 74px; height: 74px; margin: -37px 0 0 -37px; border-color: var(--kirmizi); color: var(--kagit); }
.imlec-tetik .imlec i { width: 104px; height: 104px; margin: -52px 0 0 -52px; background: var(--kirmizi); border-color: var(--kirmizi); color: var(--beyaz); }
.imlec-tetik .imlec-nokta, .imlec-link .imlec-nokta { opacity: 0; }
.imlec-surukle .imlec i { width: 96px; height: 54px; margin: -27px 0 0 -48px; border-radius: 999px; background: rgba(236, 234, 228, .96); border-color: transparent; color: #060606; }
.imlec-yaz .imlec i { width: 2px; height: 28px; margin: -14px 0 0 -1px; border-radius: 1px; background: var(--kirmizi); border-color: transparent; }
.imlec-yaz .imlec-nokta { opacity: 0; }
.imlec-bas .imlec i { scale: .8; }

/* ---------- preloader: şalterin kurulması ---------- */
.yukleme { position: fixed; inset: 0; z-index: 300; display: none; pointer-events: none; }
.yukleniyor .yukleme { display: block; pointer-events: auto; }
.yukleme-ust, .yukleme-alt { position: absolute; left: 0; right: 0; height: 50.2%; background: var(--murekkep); transition: translate 1.05s var(--e-kes); }
.yukleme-ust { top: 0; } .yukleme-alt { bottom: 0; }
.yukleme-cizgi { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--kirmizi); box-shadow: 0 0 24px 4px rgba(229, 55, 44, .85); transform: scaleX(var(--yp, 0)); transform-origin: left; transition: opacity .5s; z-index: 2; }
.yukleme-sayac { position: absolute; left: clamp(1rem, 4vw, 2.5rem); bottom: clamp(1.2rem, 4vh, 2.5rem); margin: 0; display: flex; align-items: baseline; gap: 1.2rem; z-index: 3; transition: opacity .5s, translate .8s var(--e-kes); }
.yukleme-sayac b { font: 600 clamp(3.5rem, 11vw, 9rem)/.85 var(--gosterim); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.yukleme-sayac span { font: 500 .72rem var(--mono); letter-spacing: .22em; color: var(--gri-koyu); max-width: 8rem; }
.yukleme.acik .yukleme-ust { translate: 0 -101%; } .yukleme.acik .yukleme-alt { translate: 0 101%; }
.yukleme.acik .yukleme-cizgi { opacity: 0; }
.yukleme.bitti-y .yukleme-sayac { opacity: 0; translate: 0 -1.5rem; }

/* ---------- sayfa geçişi: perde, kırmızı çizgi keser ---------- */
.perde { position: fixed; inset: 0; z-index: 400; background: var(--murekkep); pointer-events: none; transform: scaleY(0); transform-origin: top; transition: transform var(--s-perde) var(--e-kes); }
.perde::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--kirmizi); box-shadow: 0 0 22px 3px rgba(229, 55, 44, .9); }
.perde.kapan { transform: scaleY(1); pointer-events: auto; }
.gecis-var .perde { transform: scaleY(1); transform-origin: bottom; transition: none; }
.gecis-var .perde.ac { transform: scaleY(0); transition: transform var(--s-perde) var(--e-kes); }
.gecis-var .perde.ac::after { top: 0; bottom: auto; }

/* ---------- iç sayfalar: aynı sistem (hero'da şalter posteri, krem/kırmızı ritim) ---------- */
body:not([data-sayfa="home"]) .hero { min-height: 62svh; display: flex; flex-direction: column; justify-content: flex-end; }
body:not([data-sayfa="home"]) .hero > * { position: relative; z-index: 1; }
body:not([data-sayfa="home"]) .hero > .dugme { align-self: flex-start; }
body:not([data-sayfa="home"]) .hero h1 { font-size: clamp(2.4rem, 7vw, 6.4rem); max-width: 16ch; }
body:not([data-sayfa="home"]) .hero::before { content: ""; position: absolute; z-index: 0; bottom: 3%; right: 2%; width: min(40%, 38rem); height: 56%; left: auto; background: url("/assets/sahne-poster.jpg") 74% 36% / 230% auto no-repeat; -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000 35%, transparent 80%); mask-image: radial-gradient(60% 60% at 50% 50%, #000 35%, transparent 80%); opacity: .95; pointer-events: none; }
@media (max-width: 52em) { body:not([data-sayfa="home"]) .hero::before { width: 100%; opacity: .45; background-image: url("/assets/sahne-poster-telefon.jpg"); background-position: 50% 0; } }
body[data-sayfa="404"] .hero::before, body[data-sayfa="e404"] .hero::before { opacity: .55; }
/* ritim: hizmet makaleleri, hakkında bölümleri */
body[data-sayfa="services"] .hizmet:nth-of-type(even), body[data-sayfa="about"] main > .blok:nth-of-type(odd):not(:last-child) { background: var(--zemin); color: var(--yazi-r); box-shadow: 0 0 0 100vmax var(--zemin); clip-path: inset(0 -100vmax); --kagit: var(--yazi-r); --gri-koyu: var(--ikinci-r); --kirmizi-koyu: var(--vurgu-r); --zemin: #ece9e1; --yazi-r: #0b0b0a; --ikinci-r: #4f4b44; --vurgu-r: #b8261d; --cizgi: rgba(11, 11, 10, .22); }
.zemin-krem .adimlar li span, .zemin-krem .takvim li span, .zemin-krem .hizmet-liste dd, .zemin-krem .ipucu { color: var(--ikinci-r); }
.zemin-kirmizi .adimlar li span, .zemin-kirmizi .takvim li span { color: var(--yazi-r); }
.zemin-krem .adimlar::before, .zemin-krem .takvim::before { background: var(--cizgi); }
body[data-sayfa="services"] .hizmet:nth-of-type(even) h2, body[data-sayfa="about"] main > .blok:nth-of-type(odd):not(:last-child) h2 { color: var(--yazi-r); }
body[data-sayfa="services"] .hizmet:nth-of-type(even) .hizmet-liste dd, body[data-sayfa="services"] .hizmet:nth-of-type(even) p, body[data-sayfa="about"] main > .blok:nth-of-type(odd):not(:last-child) p { color: var(--ikinci-r); }

@media (prefers-reduced-motion: reduce) {
  .serit-ic { animation: none; flex-wrap: wrap; width: auto; }
  .kaydir::after { animation: none; }
  .perde, .yukleme { display: none !important; }
}
@media (hover: none), (pointer: coarse) { .imlec, .imlec-nokta { display: none; } }