:root {
--atmosphere: #336468;
--depth: #003F47;
--void: #111A19;
--ink: #F8D794;
--light: #F8F0E5;
--glow: #FFF6E9;
--accent: #E8712A;
--rail: 0.6875rem;
--ease-cinema: cubic-bezier(0.65, 0, 0.35, 1);
--ease-magnetic: cubic-bezier(0.16, 1, 0.3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html, body {
margin: 0; padding: 0;
background: var(--void);
color: var(--ink);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overscroll-behavior: none;
}
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
section { scroll-margin-top: 20px; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
a { transition: color 0.3s, opacity 0.3s; }
@media (pointer: fine) {
html, body, a, button, [data-cursor] { cursor: none; }
}
::selection { background: #E8712A; color: #111A19; }
::-moz-selection { background: #E8712A; color: #111A19; }
:focus-visible { outline: 2px solid #E8712A; outline-offset: 4px; border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }
/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
/* ═══ GERÇEK NAVBAR — Genesis sonrası belirir ═══ */
.klik-nav {
position: fixed;
top: 0; left: 0; right: 0;
height: 64px;
z-index: 50;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 clamp(1.5rem, 6vw, 4rem);
pointer-events: none;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1),
transform 0.6s cubic-bezier(0.16,1,0.3,1),
visibility 0.6s,
background 0.4s, backdrop-filter 0.4s, border-color 0.4s;
border-bottom: 1px solid transparent;
}
.klik-nav.revealed { opacity: 1; visibility: visible; transform: translateY(0); }
.klik-nav.scrolled {
background: rgba(17, 26, 25, 0.7);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-bottom-color: rgba(232, 184, 92, 0.12);
}
.klik-nav a, .klik-nav .klik-nav-burger { pointer-events: auto; }
.klik-nav-logo {
font-family: 'Bebas Neue', sans-serif;
font-size: 26px;
letter-spacing: 0.14em;
color: #F8D794;
text-decoration: none;
}
.klik-nav-logo .dot { color: #E8712A; }
.klik-nav-links {
display: flex;
align-items: center;
gap: clamp(18px, 2.2vw, 34px);
padding-right: 120px;
}
.klik-nav-link {
position: relative;
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 11px;
letter-spacing: 0.15em;
color: rgba(248, 215, 148, 0.75);
text-decoration: none;
transition: color 0.3s;
padding: 6px 0;
}
.klik-nav-link::after {
content: '';
position: absolute; left: 0; bottom: -2px;
width: 100%; height: 1px;
background: #E8B85C;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.klik-nav-link:hover { color: #E8B85C; }
.klik-nav-link:hover::after { transform: scaleX(1); }
.klik-nav-burger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 34px; height: 34px;
background: transparent; border: none; cursor: pointer;
}
.klik-nav-burger span {
display: block; width: 22px; height: 2px;
background: #F8D794; border-radius: 2px;
transition: transform 0.35s var(--ease-cinema), opacity 0.25s;
}
.klik-nav.menu-open .klik-nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.klik-nav.menu-open .klik-nav-burger span:nth-child(2) { opacity: 0; }
.klik-nav.menu-open .klik-nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 900px) {
.klik-nav-burger { display: flex; }
.klik-nav-links {
position: fixed;
top: 0; right: 0;
width: min(78vw, 340px); height: 100vh;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 28px;
padding: 0 0 0 40px;
background: rgba(10, 15, 14, 0.97);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
border-left: 1px solid rgba(232, 184, 92, 0.12);
transform: translateX(100%);
transition: transform 0.45s cubic-bezier(0.16,1,0.3,1);
}
.klik-nav.menu-open .klik-nav-links { transform: translateX(0); }
.klik-nav-link { font-size: 15px; letter-spacing: 0.18em; }
}
@media (prefers-reduced-motion: reduce) {
.klik-nav { transition: none; }
.klik-nav-links { transition: none; }
.klik-nav-link::after { transition: none; }
}
/* Veil */
.veil {
position: fixed; inset: 0; z-index: 100;
background: var(--void);
pointer-events: none;
}
/* Shared utilities */
.mask {
display: inline-block;
overflow: hidden;
vertical-align: top;
line-height: 0.92;
}
.mask > span {
display: inline-block;
transform: translateY(110%);
will-change: transform;
}
.keyline {
height: 1px; width: 64px;
background: linear-gradient(
to right,
transparent,
rgba(248, 240, 229, 0.18) 18%,
rgba(248, 240, 229, 0.18) 82%,
transparent
);
}
.rail-text {
font-family: 'Fraunces', serif;
font-weight: 400;
font-size: var(--rail);
letter-spacing: 0.32em;
text-transform: uppercase;
}
/* ════════════════════════════════════════════════
PERSISTENT UI
════════════════════════════════════════════════ */
/* Sound toggle */
.sound-toggle {
position: fixed;
top: 2rem; right: 2rem;
z-index: 40;
display: flex;
align-items: center;
gap: 0.75rem;
background: none;
border: 0; padding: 0;
color: inherit;
user-select: none;
}
.sound-toggle .label {
font-family: 'Fraunces', serif;
font-weight: 400;
font-size: var(--rail);
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(248, 215, 148, 0.55);
transition: color 500ms;
}
.sound-toggle.on .label { color: var(--light); }
.sound-toggle .bars {
display: flex;
align-items: flex-end;
gap: 3px;
height: 14px;
}
.sound-toggle .bars span {
display: block;
width: 2px;
background: rgba(248, 215, 148, 0.45);
transform-origin: bottom;
transition: height 500ms var(--ease-cinema), background 500ms;
}
.sound-toggle .bars span:nth-child(n) { height: 2px; }
.sound-toggle.on .bars span { background: var(--light); }
.sound-toggle.on .bars span:nth-child(1) { height: 4px; animation: breathe 1.4s ease-in-out infinite; }
.sound-toggle.on .bars span:nth-child(2) { height: 7px; animation: breathe 1.5s ease-in-out infinite 80ms; }
.sound-toggle.on .bars span:nth-child(3) { height: 10px; animation: breathe 1.6s ease-in-out infinite 160ms; }
.sound-toggle.on .bars span:nth-child(4) { height: 13px; animation: breathe 1.7s ease-in-out infinite 240ms; }
@keyframes breathe { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
/* Custom cursor */
.cursor-dot, .cursor-ring {
position: fixed; left: 0; top: 0;
pointer-events: none;
z-index: 90;
border-radius: 50%;
will-change: transform;
}
.cursor-dot {
width: 6px; height: 6px;
background: var(--light);
mix-blend-mode: difference;
}
.cursor-ring {
width: 32px; height: 32px;
border: 1px solid rgba(248, 240, 229, 0.55);
transition: width 300ms var(--ease-magnetic), height 300ms var(--ease-magnetic),
border-color 300ms, background 300ms, opacity 300ms;
}
.cursor-ring.hover {
width: 80px; height: 80px;
background: rgba(248, 240, 229, 0.04);
border-color: var(--light);
opacity: 1;
}
.cursor-ring.accent {
width: 64px; height: 64px;
border-color: var(--accent);
opacity: 1;
}
@media (pointer: coarse), (hover: none) {
.cursor-dot, .cursor-ring { display: none; }
html, body { cursor: auto !important; }
}
/* ════════════════════════════════════════════════
GLOBAL BACKGROUND SYSTEM
16mm grain · drifting accent leaks · parallax dust
Active for Act II, III, IV only — Act I has its own
════════════════════════════════════════════════ */
.global-bg {
position: fixed;
inset: 0;
z-index: 2;
pointer-events: none;
opacity: 0;
transition: opacity 1.4s var(--ease-cinema);
overflow: hidden;
}
.global-bg.active { opacity: 1; }
.bg-grain {
position: absolute;
top: -12%; left: -12%;
width: 124%; height: 124%;
z-index: 2;
opacity: 0.07;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
animation: filmGrain 1s steps(8) infinite;
transform: translateZ(0);
backface-visibility: hidden;
will-change: transform;
}
@keyframes filmGrain {
0% { transform: translate(0, 0); }
12% { transform: translate(-3%, -2%); }
24% { transform: translate(2%, 4%); }
36% { transform: translate(-4%, 2%); }
48% { transform: translate(5%, -3%); }
60% { transform: translate(-2%, 5%); }
72% { transform: translate(3%, -4%); }
84% { transform: translate(-5%, 1%); }
100% { transform: translate(0, 0); }
}
.bg-leaks {
position: absolute;
inset: -20%;
z-index: 1;
pointer-events: none;
}
.leak {
position: absolute;
width: 65vw; height: 65vw;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(232, 113, 42, 0.12) 0%,
rgba(232, 113, 42, 0.05) 35%,
transparent 70%
);
filter: blur(90px);
mix-blend-mode: screen;
transform: translateZ(0);
backface-visibility: hidden;
will-change: transform, opacity;
}
.leak-1 { top: -10%; left: -10%; animation: drift1 78s ease-in-out infinite; }
.leak-2 { top: 30%; left: 40%; animation: drift2 92s ease-in-out infinite; }
.leak-3 { top: 60%; left: -15%; animation: drift3 68s ease-in-out infinite; }
/* Constrained drift ranges — never approach viewport edges */
@keyframes drift1 {
0%, 100% { transform: translate(-5%, -3%) scale(1); }
50% { transform: translate(3%, 4%) scale(1.04); }
}
@keyframes drift2 {
0%, 100% { transform: translate(0%, 0%) scale(1.06); }
50% { transform: translate(-4%, 3%) scale(0.96); }
}
@keyframes drift3 {
0%, 100% { transform: translate(2%, 3%) scale(1); }
50% { transform: translate(-3%, -2%) scale(1.05); }
}
.bg-particles {
position: absolute;
inset: 0;
z-index: 3;
width: 100%;
height: 100%;
}
@media (prefers-reduced-motion: reduce) {
.bg-grain, .leak { animation: none !important; }
}
/* ════════════════════════════════════════════════
ACT I — GENESIS · RORSCHACH (procedural ink intro)
Replaces former OK & YAY sprite sequence.
════════════════════════════════════════════════ */
.act { position: relative; width: 100%; }
/* ═══ GENESIS · RORSCHACH ═══ */
.gen-section { position: relative; height: 500vh; background: #EFE9DC; z-index: 6; }
.gen-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.gen-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 2; }
/* Kağıt dokusu — canvas'ın ALTINDA, JS bg rengiyle senkron */
.gen-paper {
position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
radial-gradient(ellipse at 30% 20%, rgba(0,0,0,0.025), transparent 60%),
radial-gradient(ellipse at 75% 80%, rgba(0,0,0,0.02), transparent 55%);
}
.gen-grain {
position: absolute; inset: 0; z-index: 8; pointer-events: none;
opacity: 0.05; mix-blend-mode: multiply;
}
/* Tahminler */
.gen-guess {
position: absolute; z-index: 5;
font-size: clamp(11px, 1.3vw, 14px);
letter-spacing: 0.3em;
color: rgba(30, 30, 28, 0.0);
transition: color 0.6s, transform 0.9s cubic-bezier(0.16,1,0.3,1);
transform: translateY(8px);
pointer-events: none;
}
.gen-guess.on { transform: translateY(0); }
/* Metin satırları */
.gen-line {
position: absolute; left: 50%; transform: translateX(-50%) translateY(14px);
z-index: 6; text-align: center; margin: 0; opacity: 0; pointer-events: none;
transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
font-family: 'Playfair Display', serif; font-style: italic; font-weight: 700;
}
.gen-line.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.gen-line-ask { bottom: 14vh; font-size: clamp(15px, 1.8vw, 20px); color: rgba(30,30,28,0.55); }
.gen-line-mid { bottom: 12vh; font-size: clamp(20px, 3vw, 34px); color: #F8D794; line-height: 1.3; }
.gen-line-final { bottom: 12vh; font-size: clamp(22px, 3.4vw, 40px); color: #F8D794; }
.gen-acc { color: #E8712A; }
/* KLIK kelime mührü — tipografik final lockup */
.gen-word-wrap {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: clamp(300px, 56vw, 760px);
display: flex; flex-direction: column; align-items: center; gap: 18px;
opacity: 0; z-index: 4; pointer-events: none;
transition: none; /* JS sürüyor */
}
.gen-word { width: 100%; height: auto; display: block; overflow: visible; }
.gw-t {
font-family: 'Bebas Neue', sans-serif;
font-weight: 400;
font-size: 240px;
letter-spacing: 0.015em;
}
#gwShadow { fill: #0B1512; opacity: 0; }
.gw-fill { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
.gen-word-eyebrow {
font-size: 11px; letter-spacing: 0.45em;
color: rgba(248, 215, 148, 0.4);
opacity: 0;
}
.gen-word-line {
font-family: 'Inter', 'Outfit', sans-serif;
font-weight: 400;
font-size: clamp(15px, 1.6vw, 19px);
color: rgba(248, 215, 148, 0.75);
text-align: center; margin: 0; opacity: 0;
text-wrap: balance;
line-height: 1.6;
}
.gen-word-line em {
font-family: 'Fraunces', 'Playfair Display', serif;
font-style: italic; font-weight: 600;
color: #E8712A; /* sahnedeki tek kroma vurgu */
}
@media (max-width: 768px) { .gen-word-wrap { width: 88vw; } }
/* Hint + skip */
.gen-hint {
position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
z-index: 7; font-size: 16px; color: rgba(30,30,28,0.4);
animation: genHintPulse 2s ease-in-out infinite;
transition: opacity 0.5s, color 0.5s;
}
@keyframes genHintPulse { 0%,100%{ transform:translateX(-50%) translateY(0);} 50%{ transform:translateX(-50%) translateY(6px);} }
.gen-skip {
position: absolute; top: 24px; right: 28px; z-index: 9;
background: transparent; border: 1px solid rgba(30,30,28,0.15);
color: rgba(30,30,28,0.45); font-size: 10px; letter-spacing: 0.25em;
padding: 8px 16px; cursor: pointer; border-radius: 3px;
font-family: 'Space Mono', ui-monospace, monospace;
transition: all 0.35s;
}
.gen-skip:hover { border-color: #E8712A; color: #E8712A; }
.gen-skip.dark { border-color: rgba(248,215,148,0.2); color: rgba(248,215,148,0.5); }
.gen-skip.dark:hover { border-color: #E8712A; color: #E8712A; }
/* Reduced motion: sekans devre dışı, statik geçiş */
@media (prefers-reduced-motion: reduce) {
.gen-section { height: 100vh; }
.gen-canvas, .gen-guess, .gen-hint { display: none; }
.gen-stage { background: #111A19; }
.gen-word-wrap { opacity: 1 !important; }
.gen-word-wrap .gw-fill { opacity: 1; fill: #F8D794; }
.gen-word-wrap #gwShadow { opacity: 0.85; transform: translate(7px, 7px); }
.gen-word-eyebrow, .gen-word-line { opacity: 1 !important; }
.gen-line-final { opacity: 1; }
}
@media (max-width: 768px) {
.gen-guess { font-size: 10px; }
.gen-skip { top: 16px; right: 16px; }
}
/* ════════════════════════════════════════════════
ACT II — THE PROJECTOR · film başlıyor
Replaces the former Observatory parallax sequence.
600vh scroll budget · sticky stage · projector → countdown
→ 3 sahne (b&w → renk) → credits.
════════════════════════════════════════════════ */
.proj-section {
position: relative;
height: 600vh;
background: #050505;
}
.proj-stage {
position: sticky;
top: 0;
height: 100vh;
width: 100%;
overflow: hidden;
}
.proj-layer {
position: absolute;
inset: 0;
pointer-events: none;
}
.proj-black { background: #050505; z-index: 0; }
/* Perde dokusu — ince yatay kumaş çizgileri */
.proj-black::after {
content: '';
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
0deg,
transparent 0px, transparent 2px,
rgba(248, 215, 148, 0.008) 2px, rgba(248, 215, 148, 0.008) 3px);
pointer-events: none;
}
/* ── Kadife perde çerçevesi ── */
.proj-curtain {
position: absolute;
inset: 0;
z-index: 15;
pointer-events: none;
}
.proj-curtain-left,
.proj-curtain-right {
position: absolute;
top: 0; bottom: 0;
width: clamp(30px, 4vw, 60px);
background: linear-gradient(90deg,
#1a0808 0%, #2a0e0e 30%, #1a0808 70%, #0a0404 100%);
box-shadow: inset 0 0 30px rgba(0,0,0,0.5);
transition: width 1.5s cubic-bezier(0.16, 1, 0.3, 1);
will-change: width;
}
.proj-curtain-left { left: 0; }
.proj-curtain-right {
right: 0;
background: linear-gradient(270deg,
#1a0808 0%, #2a0e0e 30%, #1a0808 70%, #0a0404 100%);
}
.proj-curtain-top {
position: absolute;
top: 0; left: 0; right: 0;
height: clamp(20px, 3vw, 40px);
background: linear-gradient(180deg, #1a0808 0%, #2a0e0e 60%, transparent 100%);
}
.proj-curtain-valance {
position: absolute;
top: clamp(15px, 2.5vw, 32px);
left: clamp(30px, 4vw, 60px);
right: clamp(30px, 4vw, 60px);
height: 12px;
background: repeating-linear-gradient(90deg,
transparent 0px, transparent 40px,
rgba(40, 14, 14, 0.4) 40px, rgba(40, 14, 14, 0.4) 42px);
border-bottom: 1px solid rgba(200, 169, 110, 0.06);
}
/* ── Sinemaskop letterbox bantları ── */
.proj-letterbox {
position: absolute;
left: 0; right: 0;
height: 0;
background: #050505;
z-index: 14;
transition: height 0.8s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
will-change: height;
}
.proj-lb-top { top: 0; }
.proj-lb-bot { bottom: 0; }
.proj-beam {
z-index: 1;
opacity: 0;
background: conic-gradient(
from 180deg at 50% -20%,
transparent 35%,
rgba(248, 215, 148, 0.03) 45%,
rgba(248, 215, 148, 0.06) 50%,
rgba(248, 215, 148, 0.03) 55%,
transparent 65%);
will-change: opacity;
}
.proj-dust { z-index: 2; width: 100%; height: 100%; }
.proj-countdown {
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
}
.proj-cd-circle {
position: relative;
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.proj-cd-svg {
position: absolute;
inset: 0;
animation: cdSpin 2s linear infinite;
}
@keyframes cdSpin { to { transform: rotate(360deg); } }
.proj-cd-num {
font-size: 96px;
color: #C8A96E;
text-shadow: 0 0 20px rgba(200, 169, 110, 0.3);
position: relative;
z-index: 2;
}
.proj-perf {
position: absolute;
top: 0; bottom: 0;
width: 28px;
z-index: 4;
display: flex;
flex-direction: column;
gap: 10px;
padding: 8px 0;
justify-content: center;
}
.proj-perf-left { left: 8%; }
.proj-perf-right { right: 8%; }
.proj-title-card {
z-index: 6;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
opacity: 0;
}
.proj-scene-num {
font-size: 13px;
letter-spacing: 0.5em;
color: rgba(248, 215, 148, 0.3);
margin-bottom: 20px;
text-align: center;
}
.proj-scene-title {
font-size: clamp(32px, 5.5vw, 64px);
color: #F8D794;
text-align: center;
letter-spacing: 0.06em;
margin: 0;
}
.proj-content {
z-index: 7;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
opacity: 0;
}
.proj-content-inner {
text-align: center;
max-width: 680px;
padding: 40px;
margin-top: 0;
}
.proj-principle {
font-size: clamp(36px, 6vw, 72px);
color: #F8D794;
margin: 0 0 24px;
line-height: 1.05;
letter-spacing: 0.02em;
text-align: center;
}
.proj-principle-desc {
font-family: 'Outfit', sans-serif;
font-size: clamp(15px, 1.6vw, 19px);
color: rgba(248, 215, 148, 0.45);
line-height: 1.85;
font-weight: 300;
margin: 0 auto;
max-width: 560px;
text-align: center;
}
.proj-frame-marks { position: absolute; inset: 40px; pointer-events: none; }
.proj-fm {
position: absolute;
width: 20px; height: 20px;
border-color: rgba(248, 215, 148, 0.12);
border-style: solid;
border-width: 0;
}
.proj-fm-tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.proj-fm-tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.proj-fm-bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.proj-fm-br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.proj-rec {
position: absolute;
top: 32px; left: 40px;
font-size: 11px;
letter-spacing: 0.15em;
color: #E8712A;
display: flex;
align-items: center;
gap: 8px;
opacity: 0;
}
.proj-rec-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: #E8712A;
animation: recBlink 1.2s ease-in-out infinite;
}
@keyframes recBlink { 0%,100%{opacity:1} 50%{opacity:0.2} }
.proj-timecode {
position: absolute;
bottom: 32px; right: 40px;
font-size: 12px;
letter-spacing: 0.1em;
color: rgba(248, 215, 148, 0.2);
font-variant-numeric: tabular-nums;
opacity: 0;
}
.proj-credits {
z-index: 8;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
background: #111A19;
}
.proj-credits-roll {
text-align: center;
transform: translateY(100px);
}
.proj-cr-label {
font-size: 11px;
letter-spacing: 0.4em;
color: rgba(248, 215, 148, 0.3);
margin: 0 0 8px;
}
.proj-cr-main {
font-size: clamp(28px, 4vw, 48px);
color: #F8D794;
margin: 0 0 4px;
line-height: 1.15;
letter-spacing: 0.04em;
}
.proj-cr-line {
color: rgba(248, 215, 148, 0.1);
margin: 28px 0;
font-size: 20px;
}
.proj-cr-final {
font-size: 13px;
letter-spacing: 0.25em;
color: #E8712A;
margin-top: 40px;
line-height: 1.8;
}
.proj-grain {
z-index: 10;
opacity: 0.15;
mix-blend-mode: overlay;
}
.proj-scratches { z-index: 11; opacity: 0; }
.proj-vignette {
z-index: 12;
background: radial-gradient(ellipse at 50% 50%, transparent 35%, rgba(0,0,0,0.6) 100%);
}
.proj-strip-left, .proj-strip-right {
z-index: 9;
width: 24px;
top: 0; bottom: 0;
display: flex;
flex-direction: column;
gap: 12px;
padding: 6px 4px;
align-items: center;
opacity: 0;
}
.proj-strip-left { left: 0; right: auto; }
.proj-strip-right { right: 0; left: auto; }
@media (max-width: 768px) {
.proj-strip-left, .proj-strip-right { display: none; }
.proj-frame-marks { inset: 20px; }
.proj-rec { top: 20px; left: 20px; }
.proj-timecode { bottom: 20px; right: 20px; }
}
@media (prefers-reduced-motion: reduce) {
.proj-cd-svg, .proj-rec-dot { animation: none !important; }
.proj-beam { opacity: 0.4 !important; }
.proj-credits { opacity: 1 !important; }
.proj-credits-roll { transform: translateY(0) !important; }
}
/* ════════════════════════════════════════════════
ACT III — A: THE WALK
Art Deco palace cinema · A24 editorial restraint
Wet sidewalk · neon "KLIK" marquee · 12 brand stars
════════════════════════════════════════════════ */
.act-three { position: relative; background: transparent; overflow: hidden; z-index: 1; }
.walk-wrap {
position: relative;
height: 280vh; /* breathing room around 200vh pin */
}
.walk-pin {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
background: #111A19;
}
.walk-scene {
position: absolute;
inset: 0;
isolation: isolate;
}
/* Edge vignette — STATIC immersive falloff, focuses cinema-sidewalk axis */
.walk-scene::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 60;
background: radial-gradient(
ellipse 90% 80% at 50% 50%,
transparent 40%,
rgba(17, 26, 25, 0.20) 75%,
rgba(17, 26, 25, 0.42) 100%);
}
/* ─── CINEMA FACADE — FULL-BLEED IMMERSIVE · edge-to-edge architecture ─── */
.cinema-facade {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 73vh;
z-index: 5;
/* No drop-shadow, no card edges, no max-width — the cinema IS the viewport */
}
/* ZONE 1 — Top cornice (0 → 8vh) — building's crown */
.cinema-cornice {
position: absolute;
top: 0; left: -6%;
width: 112%;
height: 8vh;
background: linear-gradient(180deg, #14323a 0%, #0F2A2E 60%, #003F47 100%);
border-bottom: 1px solid rgba(51, 100, 104, 0.55);
}
/* Scalloped detail above */
.cinema-cornice::before {
content: '';
position: absolute;
top: -10px; left: 0; right: 0;
height: 12px;
background-image: radial-gradient(circle at 14px 12px, #14323a 9px, transparent 10px);
background-size: 28px 12px;
background-repeat: repeat-x;
}
/* Inner stepped highlight band */
.cinema-cornice::after {
content: '';
position: absolute;
bottom: 18%; left: 5%; right: 5%;
height: 1px;
background: rgba(184, 85, 48, 0.28);
}
/* Fluted columns — flank the FULL facade height (Zones 1–4) */
.cinema-column {
position: absolute;
top: 0; bottom: 0;
width: 36px;
background:
linear-gradient(90deg,
rgba(184, 85, 48, 0.08) 0%,
rgba(184, 85, 48, 0.22) 50%,
rgba(184, 85, 48, 0.08) 100%),
repeating-linear-gradient(90deg,
#001a1f 0px, #001a1f 5px,
#003F47 5px, #003F47 6px,
#001a1f 6px, #001a1f 11px,
#336468 11px, #336468 12px);
box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.55);
}
/* Columns hidden — full-bleed facade conveys architectural mass without flanking elements */
.cinema-column-left, .cinema-column-right { display: none; }
.cinema-column::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 12px;
background: #003F47;
border-bottom: 1px solid rgba(0,0,0,0.5);
}
.cinema-column::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 18px;
background: linear-gradient(180deg, #003F47, #001a1f);
}
/* Upper architectural band removed — cornice (8vh) anchors Zone 1 alone */
/* ZONE 2 — KLIK neon marquee (8vh → 38vh, 30vh tall) */
.cinema-marquee-main {
position: absolute;
top: 8vh;
left: -3%;
width: 106%;
height: 30vh;
background:
radial-gradient(ellipse at 50% 30%, rgba(184, 85, 48, 0.12) 0%, transparent 70%),
linear-gradient(180deg, #001218 0%, #000a0e 100%);
border-radius: 14px 14px 30px 30px;
border-top: 2px solid rgba(184, 85, 48, 0.35);
border-bottom: 1px solid rgba(184, 85, 48, 0.45);
border-left: 1px solid rgba(0, 0, 0, 0.6);
border-right: 1px solid rgba(0, 0, 0, 0.6);
box-shadow:
inset 0 0 60px rgba(184, 85, 48, 0.10),
0 0 0 2px #001a1f;
overflow: visible;
}
/* Tier transition between Zone 2 and Zone 3 — 6px architectural ribbing */
.cinema-tier {
position: absolute;
top: 38vh;
left: 0; right: 0;
height: 6px;
background: linear-gradient(180deg, #003F47 0%, #001218 100%);
border-top: 1px solid rgba(51, 100, 104, 0.55);
border-bottom: 1px solid rgba(184, 85, 48, 0.18);
z-index: 1;
}
/* Inner recessed frame */
.cinema-marquee-main::before {
content: '';
position: absolute;
inset: 14px;
border: 1px solid rgba(184, 85, 48, 0.18);
border-radius: 6px 6px 18px 18px;
pointer-events: none;
}
/* Neon sign — KLIK */
.neon-sign {
margin: 0;
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 0.06em;
font-family: 'Limelight', 'Poiret One', serif;
font-weight: 400;
font-size: clamp(8rem, 16vw, 22rem);
letter-spacing: 0.06em;
line-height: 0.85;
color: #FFF6E9;
text-shadow:
0 0 4px #FFF6E9,
0 0 12px #E8712A,
0 0 32px #B85530,
0 0 64px rgba(138, 74, 58, 0.65),
0 0 120px rgba(107, 68, 56, 0.35);
will-change: opacity;
animation: glowPulse 7s ease-in-out infinite;
}
.neon-letter {
display: inline-block;
will-change: opacity;
}
@keyframes glowPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.96; }
}
/* ZONE 3 — NOW SHOWING tier (38vh → 46vh) */
.cinema-marquee-now {
position: absolute;
top: 38vh;
left: 4%; right: 4%;
height: 8vh;
min-height: 64px;
background: #111A19;
border-top: 2px solid rgba(184, 85, 48, 0.65);
border-bottom: 2px solid rgba(184, 85, 48, 0.65);
box-shadow:
inset 0 0 24px rgba(184, 85, 48, 0.10),
0 0 36px rgba(184, 85, 48, 0.14);
overflow: hidden;
}
.now-marquee {
position: absolute;
inset: 0;
display: flex;
align-items: center;
white-space: nowrap;
mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
}
.now-track {
display: inline-block;
font-family: 'JetBrains Mono', 'Space Mono', ui-monospace, monospace;
font-weight: 500;
font-size: 1.35rem;
letter-spacing: 0.1em;
color: #F8D794;
animation: nowScroll 38s linear infinite;
padding-left: 0;
will-change: transform;
}
.now-track .star-icon { color: rgba(184, 85, 48, 0.85); margin: 0 0.4em; }
@keyframes nowScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ZONE 4 — Lower facade (46vh → 68vh) — building body with lobby entrance */
.cinema-lower {
position: absolute;
top: 46vh;
left: 0; right: 0;
height: 22vh;
background:
linear-gradient(180deg, #003F47 0%, #001a1f 60%, #000a0e 100%);
border-top: 1px solid rgba(0, 0, 0, 0.6);
overflow: hidden;
}
/* Vertical pilaster ribbing on facade wall */
.cinema-lower::before {
content: '';
position: absolute; inset: 0;
background: repeating-linear-gradient(90deg,
transparent 0px, transparent 84px,
rgba(0, 0, 0, 0.4) 84px, rgba(0, 0, 0, 0.4) 88px,
transparent 88px, transparent 92px,
rgba(51, 100, 104, 0.18) 92px, rgba(51, 100, 104, 0.18) 93px);
opacity: 0.5;
}
/* Faint base shadow where wall meets ground */
.cinema-lower::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 40%;
background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.55) 100%);
pointer-events: none;
}
/* Lobby entrance — 14vw × 18vh, dominant doorway, source of star light beam */
.cinema-entrance {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 14vw;
height: 18vh;
max-width: 220px;
max-height: 200px;
min-width: 140px;
min-height: 150px;
background:
radial-gradient(
ellipse 90% 55% at 50% 100%,
rgba(184, 85, 48, 0.45) 0%,
rgba(184, 85, 48, 0.22) 30%,
rgba(107, 68, 56, 0.10) 60%,
rgba(17, 26, 25, 0.95) 100%);
border-top-left-radius: 48% 28%;
border-top-right-radius: 48% 28%;
border: 2px solid rgba(51, 100, 104, 0.45);
border-bottom: 0;
box-shadow:
inset 0 -14px 28px rgba(184, 85, 48, 0.32),
0 0 60px rgba(184, 85, 48, 0.22),
0 0 120px rgba(184, 85, 48, 0.12);
z-index: 2;
}
/* Door frame inner shadow */
.cinema-entrance::before {
content: '';
position: absolute;
inset: 8px 8px 0 8px;
background:
radial-gradient(
ellipse 95% 75% at 50% 100%,
rgba(255, 246, 233, 0.12) 0%,
rgba(184, 85, 48, 0.22) 22%,
rgba(0, 5, 8, 0.94) 78%);
border-top-left-radius: 44% 26%;
border-top-right-radius: 44% 26%;
}
/* Threshold step shadow at base of doorway */
.cinema-entrance::after {
content: '';
position: absolute;
bottom: -4px; left: -12%; right: -12%;
height: 10px;
background: radial-gradient(ellipse at center, rgba(184, 85, 48, 0.42) 0%, transparent 70%);
filter: blur(5px);
}
@media (max-width: 768px) {
.cinema-entrance { min-width: 110px; min-height: 130px; }
}
/* ─── ZONE 5: Atmospheric Bridge (60-75vh) ─── */
.atmosphere-bridge {
position: absolute;
top: 60vh;
left: 0; right: 0;
height: 15vh;
z-index: 4;
pointer-events: none;
}
/* Warm wash — originates at marquee (28vh of viewport), bleeds down past sidewalk */
.warm-wash {
position: fixed;
inset: 0;
background: radial-gradient(
ellipse 95% 75% at 50% 28%,
rgba(184, 85, 48, 0.24) 0%,
rgba(184, 85, 48, 0.16) 20%,
rgba(184, 85, 48, 0.08) 45%,
rgba(184, 85, 48, 0.03) 65%,
transparent 82%);
mix-blend-mode: screen;
pointer-events: none;
}
/* Unifying atmospheric veil — ties marquee glow to sidewalk in one continuous breath */
.atmosphere-veil {
position: absolute;
inset: 0;
z-index: 7;
pointer-events: none;
background: linear-gradient(
to bottom,
transparent 0%,
transparent 35%,
rgba(17, 26, 25, 0.32) 55%,
rgba(17, 26, 25, 0.45) 68%,
rgba(17, 26, 25, 0.55) 78%,
rgba(17, 26, 25, 0.35) 92%,
transparent 100%);
}
/* Palm fronds — corner silhouettes */
.palm {
position: absolute;
top: -8%;
width: 240px;
height: 100%;
opacity: 0.18;
pointer-events: none;
background-repeat: no-repeat;
background-position: top center;
background-size: contain;
}
.palm-left { left: -20px; transform: scaleX(-1); }
.palm-right { right: -20px; }
/* Parked 1970s coupe — front-right quarter only, anchored at bridge zone right edge */
.parked-car {
position: absolute;
bottom: 25%; /* mid-bridge vertically */
right: -260px; /* only ~12vw visible per brief */
width: 380px;
height: 80px;
opacity: 0.42;
background-repeat: no-repeat;
background-position: bottom right;
background-size: contain;
filter: drop-shadow(0 0 12px rgba(184, 85, 48, 0.25));
}
/* Light cone canvas — apex at neon center (~25vh), base meets sidewalk top (73vh) */
.dust-canvas {
position: absolute;
top: 23vh; /* apex aligned with KLIK neon */
left: 0; right: 0;
height: 50vh; /* extends to sidewalk top */
width: 100%;
pointer-events: none;
z-index: 6;
mix-blend-mode: screen;
}
/* Cool ambient particles — sparse, peripheral, outside the cone */
.cool-particles {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 5;
width: 100%;
height: 100%;
mix-blend-mode: screen;
}
/* Vertical warm haze rising from sidewalk into the night
(replaces the previous horizontal fog band that read as a hard horizon) */
.warm-haze {
position: absolute;
bottom: 25%; /* sits at sidewalk top (sidewalk now 27%) */
left: -10%; right: -10%;
height: 120px;
pointer-events: none;
z-index: 6;
background: linear-gradient(
180deg,
transparent 0%,
rgba(184, 85, 48, 0.07) 50%,
transparent 100%);
filter: blur(14px);
mix-blend-mode: screen;
animation: hazeDrift 38s linear infinite;
will-change: transform;
}
@keyframes hazeDrift {
from { transform: translateX(-8%); }
to { transform: translateX(8%); }
}
/* Local light leak — projector spill from upper-left, constrained drift */
.local-leak {
position: absolute;
top: 6%;
left: 14%;
width: 420px;
height: 420px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(232, 113, 42, 0.22) 0%,
rgba(232, 113, 42, 0.08) 38%,
transparent 70%);
filter: blur(110px);
mix-blend-mode: screen;
animation: leakDrift 16s ease-in-out infinite;
z-index: 3;
pointer-events: none;
transform: translateZ(0);
backface-visibility: hidden;
will-change: transform, opacity;
}
/* Drift + opacity merged — small range, never approaches edges */
@keyframes leakDrift {
0%, 100% { transform: translate(0, 0) translateZ(0); opacity: 0.85; }
50% { transform: translate(20px, 12px) translateZ(0); opacity: 1.0; }
}
/* ─── ZONE 6: Wet Sidewalk (lower 27%) — compressed for dramatic 70/30 ─── */
.sidewalk {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 27%;
perspective: 900px;
perspective-origin: 50% 0%;
z-index: 8;
overflow: hidden;
/* Softer mask — top dissolves into atmospheric depth */
mask-image: linear-gradient(
to bottom,
transparent 0%,
rgba(0, 0, 0, 0.25) 8%,
rgba(0, 0, 0, 0.6) 18%,
rgba(0, 0, 0, 0.9) 32%,
black 48%);
-webkit-mask-image: linear-gradient(
to bottom,
transparent 0%,
rgba(0, 0, 0, 0.25) 8%,
rgba(0, 0, 0, 0.6) 18%,
rgba(0, 0, 0, 0.9) 32%,
black 48%);
}
.sidewalk-surface {
position: absolute;
top: 0; bottom: -40%;
left: -70%; right: -70%;
transform: rotateX(68deg);
transform-origin: 50% 0%;
background:
radial-gradient(ellipse 35% 90% at 50% 0%, rgba(184, 85, 48, 0.24) 0%, transparent 65%),
linear-gradient(180deg, #1a3640 0%, #336468 35%, #224a52 100%);
}
.sidewalk-surface::before {
content: '';
position: absolute; inset: 0;
opacity: 0.14;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 320px 320px;
}
/* Wet reflection patches */
.sidewalk-surface::after {
content: '';
position: absolute; inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse 16% 9% at 28% 22%, rgba(184, 85, 48, 0.32) 0%, transparent 55%),
radial-gradient(ellipse 22% 11% at 68% 38%, rgba(184, 85, 48, 0.28) 0%, transparent 55%),
radial-gradient(ellipse 14% 7% at 42% 55%, rgba(184, 85, 48, 0.22) 0%, transparent 55%),
radial-gradient(ellipse 20% 9% at 58% 78%, rgba(184, 85, 48, 0.30) 0%, transparent 55%),
radial-gradient(ellipse 12% 6% at 18% 70%, rgba(184, 85, 48, 0.18) 0%, transparent 55%);
mix-blend-mode: screen;
}
/* Faint specular sheen on wet surface */
.sidewalk-surface .sheen {
position: absolute; inset: 0;
background: linear-gradient(
180deg,
transparent 0%,
rgba(255, 246, 233, 0.04) 30%,
rgba(255, 246, 233, 0.06) 50%,
transparent 100%);
pointer-events: none;
}
/* Lobby light beam — soft cone from doorway (~60vh) through sidewalk to viewer */
.lobby-light-beam {
position: absolute;
top: 60vh;
left: 50%;
width: 70vw;
height: 40vh;
pointer-events: none;
z-index: 6;
background: radial-gradient(
ellipse 100% 100% at 50% 0%,
rgba(184, 85, 48, 0.22) 0%,
rgba(184, 85, 48, 0.12) 30%,
rgba(184, 85, 48, 0.05) 60%,
transparent 85%);
clip-path: polygon(42% 0%, 58% 0%, 100% 100%, 0% 100%);
filter: blur(24px);
mix-blend-mode: screen;
transform: translate(-50%, 0) translateZ(0);
backface-visibility: hidden;
will-change: opacity;
}
/* ─── Brand stars — clickable, open hidden brand subpages ─── */
.brand-stars {
position: absolute;
inset: 0;
z-index: 12;
pointer-events: none;
}
.star-brand {
text-decoration: none;
cursor: none;
position: absolute;
z-index: 20;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
pointer-events: auto;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.star-brand:hover {
transform: scale(1.2) translateY(-4px);
}
.star-brand-svg {
filter: drop-shadow(0 0 8px rgba(248, 215, 148, 0.3));
transition: filter 0.4s;
}
.star-brand:hover .star-brand-svg {
filter: drop-shadow(0 0 16px rgba(248, 215, 148, 0.5))
drop-shadow(0 0 30px rgba(232, 113, 42, 0.2));
}
.star-brand-label {
font-size: 9px;
letter-spacing: 0.25em;
color: rgba(248, 215, 148, 0.5);
opacity: 0;
transform: translateY(4px);
transition: opacity 0.4s, transform 0.4s;
white-space: nowrap;
}
.star-brand:hover .star-brand-label {
opacity: 1;
transform: translateY(0);
}
.star-brand-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
border-radius: 50%;
background: radial-gradient(circle, rgba(232, 113, 42, 0.06) 0%, transparent 70%);
pointer-events: none;
animation: brandGlowPulse 3s ease-in-out infinite;
}
@keyframes brandGlowPulse {
0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
.star-brand-glow { animation: none; }
}
@media (max-width: 700px) {
.star-brand-svg { width: 38px; height: 38px; }
}
/* Editorial bookend */
.walk-headline {
position: absolute;
top: clamp(6rem, 10vh, 8rem);
left: clamp(2rem, 6vw, 5rem);
z-index: 26;
max-width: min(34rem, 50vw);
pointer-events: none;
transition: opacity 700ms var(--ease-cinema);
}
.walk-headline.dimmed { opacity: 0.3; }
.walk-headline .eyebrow {
font-family: 'Fraunces', serif;
font-size: var(--rail);
letter-spacing: 0.42em;
text-transform: uppercase;
color: rgba(248, 215, 148, 0.7);
display: block;
margin-bottom: 1rem;
}
.walk-headline h2 {
margin: 0;
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: clamp(1.8rem, 3vw, 3rem);
line-height: 1.05;
letter-spacing: -0.022em;
color: var(--ink);
}
.walk-cue {
position: absolute;
bottom: clamp(1.5rem, 3vh, 2.5rem);
left: 50%; transform: translateX(-50%);
z-index: 26;
font-family: 'Inter', sans-serif;
font-size: 0.875rem;
letter-spacing: 0.1em;
text-transform: lowercase;
color: rgba(248, 215, 148, 0.5);
pointer-events: none;
animation: cuePulse 3s ease-in-out infinite;
}
.walk-cue.hidden { opacity: 0 !important; transition: opacity 600ms; }
@keyframes cuePulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.6; }
}
/* Local intensified film grain — OVERSIZED to prevent corner flicker
at translation extremes. 120% × 120% ensures no transparent edges */
.walk-grain {
position: absolute;
top: -10%; left: -10%;
width: 120%; height: 120%;
pointer-events: none;
z-index: 35;
opacity: 0.16;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 200px 200px;
animation: filmGrain 1s steps(8) infinite;
transform: translateZ(0);
backface-visibility: hidden;
will-change: transform;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.neon-sign { animation: none !important; opacity: 1 !important; }
.now-track { animation: none !important; }
.warm-haze, .local-leak, .walk-grain { animation: none !important; }
.walk-cue { animation: none !important; }
}
@media (max-width: 700px) {
.neon-sign { font-size: clamp(5rem, 18vw, 9rem); }
.cinema-marquee-now { height: 42px; }
.now-track { font-size: 0.85rem; }
}
@media (max-width: 700px) {
.walk-headline { left: 1.5rem; max-width: 80vw; }
}
/* ═══ PERCEPTION KART SLIDER ═══ */
.pm-section {
position: relative;
z-index: 5;
padding: 120px 0 140px;
background: #111A19;
overflow: hidden;
border-top: 1px solid rgba(248, 215, 148, 0.06);
}
.pm-section::before {
content: '';
position: absolute;
top: -2px;
left: 0;
right: 0;
height: 80px;
background: linear-gradient(180deg, #111A19 60%, transparent 100%);
z-index: 10;
pointer-events: none;
}
/* Ambient glow — mavi, sol alt */
.pm-section::after {
content: '';
position: absolute;
width: 500px;
height: 500px;
border-radius: 50%;
background: radial-gradient(circle, rgba(107,159,212,0.025) 0%, transparent 70%);
bottom: 10%;
left: -5%;
pointer-events: none;
z-index: 0;
}
/* Ambient glow — turuncu, sağ üst (projektör bölümü) */
.proj-section { position: relative; }
.proj-section::after {
content: '';
position: absolute;
width: 600px;
height: 600px;
border-radius: 50%;
background: radial-gradient(circle, rgba(232,113,42,0.03) 0%, transparent 70%);
top: 20%;
right: -10%;
pointer-events: none;
z-index: 0;
}
.pm-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 0 60px;
margin-bottom: 48px;
}
.pm-eyebrow {
font-size: 12px;
letter-spacing: 0.4em;
color: #E8712A;
margin-bottom: 20px;
opacity: 0;
transform: translateY(15px);
transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s,
transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}
.pm-eyebrow.visible {
opacity: 1;
transform: translateY(0);
}
.pm-title {
font-size: clamp(36px, 5.5vw, 64px);
color: #F8D794;
line-height: 1.1;
margin: 0 0 16px;
opacity: 0;
transform: translateY(25px);
transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.pm-title.visible {
opacity: 1;
transform: translateY(0);
}
.pm-desc {
font-family: 'Outfit', sans-serif;
font-size: 16px;
color: rgba(248, 215, 148, 0.45);
line-height: 1.7;
font-weight: 300;
max-width: 520px;
opacity: 0;
transform: translateY(15px);
transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.25s,
transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}
.pm-desc.visible {
opacity: 1;
transform: translateY(0);
}
.pm-arrows {
display: flex;
gap: 12px;
flex-shrink: 0;
}
.pm-arrow {
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid rgba(248, 215, 148, 0.15);
background: rgba(248, 215, 148, 0.04);
color: #F8D794;
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.pm-arrow:hover {
background: #E8712A;
border-color: #E8712A;
color: #111A19;
transform: scale(1.1);
box-shadow: 0 0 16px rgba(232, 113, 42, 0.25);
}
.pm-arrow:active {
transform: scale(0.95);
}
.pm-arrow:disabled {
opacity: 0.2;
cursor: default;
pointer-events: none;
}
.pm-slider-wrap {
padding: 0 60px;
overflow: visible;
}
.pm-slider {
display: flex;
gap: 24px;
transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
.pm-card {
flex-shrink: 0;
width: clamp(600px, 68vw, 920px);
min-height: 500px;
border-radius: 24px;
border: 1px solid rgba(248, 215, 148, 0.08);
position: relative;
overflow: hidden;
will-change: transform, opacity;
opacity: 0;
transform: translateY(40px);
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.5s,
border-color 0.4s;
}
.pm-card.visible {
opacity: 1;
transform: translateY(0);
}
.pm-card:nth-child(2) { transition-delay: 0.1s; }
.pm-card:nth-child(3) { transition-delay: 0.2s; }
.pm-card:nth-child(4) { transition-delay: 0.3s; }
.pm-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35),
0 0 40px rgba(232, 113, 42, 0.04);
border-color: rgba(232, 113, 42, 0.15);
}
.pm-card:hover .pm-card-title {
color: #E8712A;
transition: color 0.4s;
}
.pm-card:hover .pm-card-num {
color: rgba(248, 215, 148, 0.12);
transition: color 0.5s;
}
.pm-card:hover .pm-card-desc {
color: rgba(248, 215, 148, 0.6);
transition: color 0.4s;
}
.pm-card:hover .pm-card-gradient {
filter: brightness(1.15);
transition: filter 0.5s;
}
.pm-card-inner {
position: relative;
z-index: 2;
display: flex;
height: 100%;
padding: 40px;
gap: 20px;
}
.pm-card-text {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.pm-card-num {
font-size: clamp(80px, 10vw, 120px);
color: rgba(248, 215, 148, 0.06);
line-height: 1;
margin-bottom: auto;
}
.pm-card-title {
font-size: clamp(28px, 3.5vw, 38px) !important;
color: #F8D794;
margin: 0 0 14px;
line-height: 1.2;
}
.pm-card-desc {
font-family: 'Outfit', sans-serif;
font-size: 15px;
color: rgba(248, 215, 148, 0.45);
line-height: 1.8;
font-weight: 300;
margin: 0;
max-width: 400px;
}
.pm-card-3d {
flex: 0 0 48%;
position: relative;
min-height: 360px;
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
}
/* Kart içi metin stagger animasyonu */
.pm-card.visible .pm-card-num {
animation: pmFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.pm-card.visible .pm-card-title {
animation: pmFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}
.pm-card.visible .pm-card-desc {
animation: pmFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}
@keyframes pmFadeUp {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
/* ════════════════════════════════════════════════
REX PUPPETS — 4 kukla sahnesi (sprite + CSS keyframes)
Sözleşme: .rex-* kökü + data-native + data-scale;
is-live YALNIZ ortak observer + slider callback'inden gelir.
════════════════════════════════════════════════ */
.rex-kasif, .rex-stratejist, .rex-simyager, .rex-sanatkar {
position: relative;
flex: 0 0 auto;
overflow: visible;
pointer-events: none;
}
.rex-zoom { position: relative; transform-origin: 0 0; will-change: transform; }
.rex-zoom img { user-select: none; -webkit-user-drag: none; }
/* paused-by-default → yalnız .is-live koşar (inline shorthand'ı ezmek için !important) */
.rex-stratejist [data-anim], .rex-simyager [data-anim], .rex-sanatkar [data-anim] { animation-play-state: paused !important; }
.rex-stratejist.is-live [data-anim], .rex-simyager.is-live [data-anim], .rex-sanatkar.is-live [data-anim] { animation-play-state: running !important; }
/* ── KAŞİF (5s master) ── */
.rex-kasif{--dur:5s;--ease-soft:cubic-bezier(0.37,0,0.63,1);--ease-out:cubic-bezier(0.16,1,0.3,1);--ease-snap:cubic-bezier(0.34,1.56,0.64,1);--ease-gust:cubic-bezier(0.55,0,0.1,1)}
.rex-kasif img,.rex-kasif .rx-layer{position:absolute;inset:0;width:100%;height:100%;user-select:none;-webkit-user-drag:none}
.rex-kasif [class^="rx-"]{animation-duration:var(--dur);animation-iteration-count:infinite;animation-play-state:paused;will-change:transform}
.rex-kasif.is-live [class^="rx-"]{animation-play-state:running}
.rx-tail{transform-origin:32% 82.5%;animation-name:rexKsfTail}
.rx-body-rot{transform-origin:50% 38%;animation-name:rexBodyRot}
.rx-body-scale{transform-origin:50% 100%;animation-name:rexBodyScale;animation-timing-function:var(--ease-soft)}
.rx-hat{transform-origin:49.25% 30.85%;animation-name:rexHat}
.rx-map{transform-origin:61.25% 66.5%;animation-name:rexMap}
.rx-arm-l{transform-origin:38.75% 68.5%;animation-name:rexArmL}
.rx-arm-r{transform-origin:78.25% 67.5%;animation-name:rexArmR}
.rx-glow{position:absolute;left:73.5%;top:49%;width:12%;height:12%;border-radius:50%;
background:radial-gradient(circle,rgba(232,184,92,.95) 0%,rgba(232,184,92,0) 70%);
opacity:0;transform-origin:50% 50%;animation-name:rexGlow;will-change:transform,opacity;pointer-events:none}
.rx-wind{position:absolute;height:0;border-top:4px solid #F3E9D7;border-radius:2px;opacity:0;
animation-timing-function:linear !important;will-change:transform,opacity;pointer-events:none}
.rx-wind-1{left:-4%;top:45%;width:26%;animation-name:rexWind1}
.rx-wind-2{left:-8%;top:52%;width:22%;border-top-width:3px;animation-name:rexWind2}
/* prefers-reduced-motion: statik poz + yalnız X parıltısı (8s) */
@media (prefers-reduced-motion: reduce){
.rex-kasif [class^="rx-"]{animation-play-state:paused !important}
.rex-kasif .rx-glow{animation:rexGlowStatic 8s var(--ease-soft) infinite !important;animation-play-state:running !important}
}
@keyframes rexBodyScale{
0%{transform:scale(1);animation-timing-function:var(--ease-soft)}
15%{transform:scale(1.015);animation-timing-function:var(--ease-soft)}
30%,92%{transform:scale(1)}
100%{transform:scale(1)}
}
@keyframes rexBodyRot{
0%,30%{transform:rotate(0deg);animation-timing-function:var(--ease-snap)}
31.5%{transform:translateX(2px) rotate(1deg);animation-timing-function:var(--ease-snap)}
33%{transform:translateX(1px) rotate(1deg);animation-timing-function:var(--ease-snap)}
34.5%{transform:rotate(0.4deg);animation-timing-function:var(--ease-snap)}
36%{transform:rotate(0.8deg);animation-timing-function:var(--ease-snap)}
39%{transform:rotate(0.6deg)}
64%{transform:rotate(0.6deg);animation-timing-function:var(--ease-soft)}
72%{transform:rotate(0deg)}
84%{transform:rotate(0deg);animation-timing-function:var(--ease-out)}
92%{transform:rotate(-4deg);animation-timing-function:var(--ease-soft)}
100%{transform:rotate(0deg)}
}
@keyframes rexMap{
0%{transform:rotate(-1deg);animation-timing-function:var(--ease-soft)}
5.5%{transform:rotate(1deg);animation-timing-function:var(--ease-soft)}
11%{transform:rotate(-1deg);animation-timing-function:var(--ease-soft)}
16.5%{transform:rotate(1deg);animation-timing-function:var(--ease-soft)}
22%{transform:rotate(-1deg)}
23.5%{transform:rotate(-1deg) skewX(2deg)}
25%{transform:rotate(-1deg) skewX(-2deg)}
26.5%{transform:rotate(-1deg) skewX(2deg)}
28%{transform:rotate(-1deg) skewX(-1deg);animation-timing-function:var(--ease-soft)}
30%{transform:rotate(-3deg) skewX(0deg);animation-timing-function:var(--ease-gust)}
34%{transform:translate(-7%,-14%) rotate(-14deg) skewX(6deg);animation-timing-function:var(--ease-gust)}
39%{transform:translate(-15.5%,-22%) rotate(-4deg) skewX(-3deg) scale(0.97);animation-timing-function:var(--ease-snap)}
40%{transform:translate(-15.5%,-22%) rotate(-4deg) scale(1.01);animation-timing-function:var(--ease-snap)}
41%{transform:translate(-15.5%,-22%) rotate(-4deg) scale(1)}
44%{transform:translate(-15.45%,-21.95%) rotate(-4deg) skewX(1.5deg)}
47%{transform:translate(-15.55%,-22%) rotate(-4deg) skewX(-1.5deg)}
50%{transform:translate(-15.45%,-22.05%) rotate(-4deg) skewX(1.5deg)}
53%{transform:translate(-15.55%,-21.95%) rotate(-4deg) skewX(-1.5deg)}
56%{transform:translate(-15.45%,-22%) rotate(-4deg) skewX(1.5deg)}
59%{transform:translate(-15.5%,-22.05%) rotate(-4deg) skewX(-1.5deg)}
62%{transform:translate(-15.5%,-22%) rotate(-4deg) skewX(0deg);animation-timing-function:var(--ease-soft)}
64%{transform:translate(-14.5%,-21%) rotate(-3deg);animation-timing-function:var(--ease-out)}
67%{transform:translate(-7%,-9%) rotate(6deg);animation-timing-function:var(--ease-out)}
70%{transform:translate(0%,0%) rotate(3deg);animation-timing-function:var(--ease-soft)}
74%{transform:rotate(-1.5deg)}
77%{transform:rotate(0.5deg)}
80%{transform:rotate(0deg)}
86%{transform:rotate(0.9deg)}
93%{transform:rotate(-0.2deg)}
100%{transform:rotate(-1deg)}
}
@keyframes rexArmL{
0%{transform:rotate(-1deg);animation-timing-function:var(--ease-soft)}
5.5%{transform:rotate(1deg);animation-timing-function:var(--ease-soft)}
11%{transform:rotate(-1deg);animation-timing-function:var(--ease-soft)}
16.5%{transform:rotate(1deg);animation-timing-function:var(--ease-soft)}
22%{transform:rotate(-1deg);animation-timing-function:var(--ease-soft)}
30%{transform:rotate(0deg);animation-timing-function:var(--ease-snap)}
33%{transform:rotate(-12deg);animation-timing-function:var(--ease-snap)}
35%{transform:rotate(8deg);animation-timing-function:var(--ease-snap)}
37%{transform:rotate(-6deg);animation-timing-function:var(--ease-snap)}
39%{transform:rotate(3deg)}
46%{transform:rotate(3.5deg)}
51%{transform:rotate(2.6deg)}
56%{transform:rotate(3.4deg)}
62%{transform:rotate(3deg);animation-timing-function:var(--ease-out)}
70%{transform:rotate(-10deg);animation-timing-function:var(--ease-out)}
75%{transform:rotate(1.5deg)}
80%{transform:rotate(-0.5deg)}
86%{transform:rotate(0.8deg)}
100%{transform:rotate(-1deg)}
}
@keyframes rexArmR{
0%{transform:rotate(-1deg);animation-timing-function:var(--ease-soft)}
5.5%{transform:rotate(1deg);animation-timing-function:var(--ease-soft)}
11%{transform:rotate(-1deg);animation-timing-function:var(--ease-soft)}
16.5%{transform:rotate(1deg);animation-timing-function:var(--ease-soft)}
22%{transform:rotate(-1deg);animation-timing-function:var(--ease-soft)}
31.2%{transform:rotate(0deg);animation-timing-function:var(--ease-snap)}
34.2%{transform:rotate(-12deg);animation-timing-function:var(--ease-snap)}
36.2%{transform:rotate(8deg);animation-timing-function:var(--ease-snap)}
38.2%{transform:rotate(-6deg);animation-timing-function:var(--ease-snap)}
40.2%{transform:rotate(3deg)}
47%{transform:rotate(3.4deg)}
52%{transform:rotate(2.6deg)}
57%{transform:rotate(3.5deg)}
63.2%{transform:rotate(3deg);animation-timing-function:var(--ease-out)}
70%{transform:rotate(-10deg);animation-timing-function:var(--ease-out)}
75%{transform:rotate(1.5deg)}
80%{transform:rotate(-0.5deg)}
86%{transform:rotate(0.8deg)}
100%{transform:rotate(-1deg)}
}
@keyframes rexHat{
0%,22%{transform:rotate(0deg);animation-timing-function:var(--ease-soft)}
28%{transform:rotate(1deg)}
32%{transform:rotate(1deg);animation-timing-function:var(--ease-gust)}
34%{transform:translateY(-3px) rotate(-2deg);animation-timing-function:var(--ease-out)}
36%{transform:translateY(0px) rotate(0deg)}
37%{transform:translateY(-1px);animation-timing-function:var(--ease-snap)}
38%{transform:translateY(0px)}
85.6%{transform:rotate(0deg);animation-timing-function:var(--ease-out)}
93.6%{transform:rotate(-1.5deg);animation-timing-function:var(--ease-soft)}
100%{transform:rotate(0deg)}
}
@keyframes rexKsfTail{
0%{transform:rotate(0deg);animation-timing-function:var(--ease-soft)}
4.5%{transform:rotate(1deg);animation-timing-function:var(--ease-soft)}
18%{transform:rotate(-1deg);animation-timing-function:var(--ease-soft)}
30%{transform:rotate(0deg);animation-timing-function:var(--ease-snap)}
33%{transform:rotate(16deg);animation-timing-function:var(--ease-snap)}
35.5%{transform:rotate(14deg)}
40%{transform:rotate(15deg)}
46%{transform:rotate(13.2deg)}
52%{transform:rotate(14.8deg)}
58%{transform:rotate(13.5deg)}
62%{transform:rotate(14deg);animation-timing-function:var(--ease-out)}
70%{transform:rotate(-2deg)}
74%{transform:rotate(1deg)}
78%{transform:rotate(0deg);animation-timing-function:var(--ease-soft)}
88%{transform:rotate(0.8deg);animation-timing-function:var(--ease-soft)}
100%{transform:rotate(0deg)}
}
@keyframes rexGlow{
0%,84%{opacity:0;transform:scale(0);animation-timing-function:var(--ease-out)}
88%{opacity:.9;transform:scale(1.25)}
92%{opacity:.65;transform:scale(1)}
100%{opacity:0;transform:scale(1)}
}
@keyframes rexGlowStatic{
0%,70%,100%{opacity:0;transform:scale(1)}
80%{opacity:.5;transform:scale(1.1)}
}
@keyframes rexWind1{
0%,26%{transform:translateX(0%);opacity:0}
30%{opacity:.12}
41%,100%{transform:translateX(320%);opacity:0}
}
@keyframes rexWind2{
0%,30%{transform:translateX(0%);opacity:0}
34%{opacity:.12}
45%,100%{transform:translateX(320%);opacity:0}
}
/* ── STRATEJİST (5s master) — inline stillerden çağrılır ── */
@keyframes rexBreath{
0%{transform:scale(1);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
11%{transform:scale(1.015);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
22%,37%{transform:scale(1);animation-timing-function:cubic-bezier(0.16,1,0.3,1)}
41%{transform:scale(1.02) translateY(-1px);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
49%{transform:scale(1.028) translateY(-1px);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
57%{transform:scale(1.02) translateY(-1px);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
63%{transform:scale(1.026) translateY(-1px);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
70%{transform:scale(1.02) translateY(-1px);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
100%{transform:scale(1)}
}
/* L1 gövde — dinleme eğimi (origin 50% 92%) · %30–34 mutlak durgunluk */
@keyframes rexTilt{
0%,22%{transform:rotate(0deg);animation-timing-function:cubic-bezier(0.45,0,0.2,1)}
30%,34%{transform:rotate(1.6deg);animation-timing-function:cubic-bezier(0.34,1.56,0.64,1)}
36%{transform:rotate(-0.8deg);animation-timing-function:cubic-bezier(0.34,1.56,0.64,1)}
37%,100%{transform:rotate(0deg)}
}
/* L2 çene kolu (origin omuz) */
@keyframes rexArmChin{
0%,6.5%{transform:rotate(0deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
8%{transform:rotate(2deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
9.5%,12.5%{transform:rotate(0deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
14%{transform:rotate(2deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
15.5%,34%{transform:rotate(0deg);animation-timing-function:cubic-bezier(0.34,1.56,0.64,1)}
38%{transform:rotate(-14deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
41%{transform:rotate(-11deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
44%,70%{transform:rotate(-13deg);animation-timing-function:cubic-bezier(0.16,1,0.3,1)}
86%,88%{transform:rotate(0deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
90%{transform:rotate(1deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
92%,100%{transform:rotate(0deg)}
}
/* L3 diğer kol (origin omuz) — L2'den 60ms gecikmeli overlap */
@keyframes rexArmSide{
0%{transform:rotate(0deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
10%{transform:rotate(0.5deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
20%{transform:rotate(-0.5deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
28%{transform:rotate(0.2deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
30%,35.2%{transform:rotate(0deg);animation-timing-function:cubic-bezier(0.34,1.56,0.64,1)}
36.6%{transform:rotate(-4deg);animation-timing-function:cubic-bezier(0.34,1.56,0.64,1)}
38%{transform:rotate(-2deg);animation-timing-function:cubic-bezier(0.16,1,0.3,1)}
60%{transform:rotate(0deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
72%{transform:rotate(0.3deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
86%{transform:rotate(-0.2deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
100%{transform:rotate(0deg)}
}
/* L4 monokl + zincir — sarkaç, gövdeden ~120ms gecikmeli, 1.4× ters genlik */
@keyframes rexMonocle{
0%{transform:rotate(0deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
6%{transform:rotate(0.8deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
16%{transform:rotate(-0.8deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
22%,24.4%{transform:rotate(0.3deg);animation-timing-function:cubic-bezier(0.45,0,0.2,1)}
30%{transform:rotate(2.2deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
34%{transform:rotate(1.8deg);animation-timing-function:cubic-bezier(0.34,1.56,0.64,1)}
35.5%{transform:rotate(-3.5deg);animation-timing-function:cubic-bezier(0.34,1.56,0.64,1)}
37%{transform:rotate(2deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
41%{transform:rotate(-2deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
45.5%{transform:rotate(1deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
49.5%{transform:rotate(-1deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
52.5%{transform:rotate(0.4deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
55.5%{transform:rotate(-0.4deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
56.5%,70%{transform:rotate(0deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
78%{transform:rotate(0.3deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
90%{transform:rotate(-0.2deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
100%{transform:rotate(0deg)}
}
/* L5 kuyruk (origin kök) — gövdeden 80ms gecikmeli "!" */
@keyframes rexTail{
0%{transform:rotate(0deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
4%{transform:rotate(0.4deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
10%{transform:rotate(1deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
16%{transform:rotate(-1deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
22%{transform:rotate(0deg);animation-timing-function:cubic-bezier(0.45,0,0.2,1)}
30%{transform:rotate(3.7deg);animation-timing-function:cubic-bezier(0.45,0,0.2,1)}
34%,35.6%{transform:rotate(4deg);animation-timing-function:cubic-bezier(0.34,1.56,0.64,1)}
36.6%{transform:rotate(17deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
37.6%{transform:rotate(15deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
42%{transform:rotate(15.8deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
48%{transform:rotate(14.4deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
54%{transform:rotate(15.6deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
58%{transform:rotate(14.8deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
62%{transform:rotate(15deg);animation-timing-function:cubic-bezier(0.16,1,0.3,1)}
74%{transform:rotate(-2deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
78%{transform:rotate(1deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
82%{transform:rotate(0deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
88%{transform:rotate(0.5deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
94%{transform:rotate(-0.3deg);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
100%{transform:rotate(0deg)}
}
/* L7 ampul (origin duy) — fısıltı, senkron dikleşme, veda sönüşü */
@keyframes rexBulb{
0%,22%{transform:none;opacity:0.35;animation-timing-function:cubic-bezier(0.45,0,0.2,1)}
30%,34%{transform:rotate(-7deg) translate(-3px,2px);opacity:0.5;animation-timing-function:cubic-bezier(0.34,1.56,0.64,1)}
36%{transform:rotate(1.5deg) scale(1.08);opacity:0.95;animation-timing-function:cubic-bezier(0.34,1.56,0.64,1)}
37%,41%{transform:none;opacity:1;animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
48%{transform:translateY(-1.5px);opacity:1;animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
58%{transform:translateY(1.5px);opacity:1;animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
66%,70%{transform:none;opacity:1;animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
76%{opacity:0.5;animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
80%{opacity:0.65;animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
88%,100%{transform:none;opacity:0.35}
}
/* FX3 hale */
@keyframes rexHalo{
0%,37%{opacity:0;animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
41%,70%{opacity:0.7;animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
88%,100%{opacity:0}
}
@keyframes rexHaloPulse{
0%{opacity:0;animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
50%{opacity:0.3;animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
100%{opacity:0}
}
/* L8 ışın grubu — overshoot + mikro nefes */
@keyframes rexRaysGroup{
0%,39%{transform:scale(1);animation-timing-function:cubic-bezier(0.34,1.56,0.64,1)}
40%{transform:scale(1.06);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
41%{transform:scale(1);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
48%{transform:scale(1.02);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
55%{transform:scale(1);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
62%{transform:scale(1.02);animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
70%,100%{transform:scale(1)}
}
/* L8 tek ışınlar — 40ms stagger açılış (saat 12'den saat yönünde), ters sırayla kapanış */
@keyframes rexRay1{0%,34%{transform:scale(0);opacity:0;animation-timing-function:cubic-bezier(0.16,1,0.3,1)}35.5%,74.2%{transform:scale(1);opacity:1;animation-timing-function:cubic-bezier(0.37,0,0.63,1)}75.7%,100%{transform:scale(0);opacity:0}}
@keyframes rexRay2{0%,34.7%{transform:scale(0);opacity:0;animation-timing-function:cubic-bezier(0.16,1,0.3,1)}36.2%,73.5%{transform:scale(1);opacity:1;animation-timing-function:cubic-bezier(0.37,0,0.63,1)}75%,100%{transform:scale(0);opacity:0}}
@keyframes rexRay3{0%,35.4%{transform:scale(0);opacity:0;animation-timing-function:cubic-bezier(0.16,1,0.3,1)}36.9%,72.8%{transform:scale(1);opacity:1;animation-timing-function:cubic-bezier(0.37,0,0.63,1)}74.3%,100%{transform:scale(0);opacity:0}}
@keyframes rexRay4{0%,36.1%{transform:scale(0);opacity:0;animation-timing-function:cubic-bezier(0.16,1,0.3,1)}37.6%,72.1%{transform:scale(1);opacity:1;animation-timing-function:cubic-bezier(0.37,0,0.63,1)}73.6%,100%{transform:scale(0);opacity:0}}
@keyframes rexRay5{0%,36.8%{transform:scale(0);opacity:0;animation-timing-function:cubic-bezier(0.16,1,0.3,1)}38.3%,71.4%{transform:scale(1);opacity:1;animation-timing-function:cubic-bezier(0.37,0,0.63,1)}72.9%,100%{transform:scale(0);opacity:0}}
@keyframes rexRay6{0%,37.5%{transform:scale(0);opacity:0;animation-timing-function:cubic-bezier(0.16,1,0.3,1)}39%,70.7%{transform:scale(1);opacity:1;animation-timing-function:cubic-bezier(0.37,0,0.63,1)}72.2%,100%{transform:scale(0);opacity:0}}
@keyframes rexRay7{0%,38.2%{transform:scale(0);opacity:0;animation-timing-function:cubic-bezier(0.16,1,0.3,1)}39.7%,70%{transform:scale(1);opacity:1;animation-timing-function:cubic-bezier(0.37,0,0.63,1)}71.5%,100%{transform:scale(0);opacity:0}}
/* FX1 monokl parlaması — %25 fısıltı, %38 eureka */
@keyframes rexGlint{
0%,24.9%{transform:translateX(-260%);opacity:0}
25%{opacity:0.35;animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
29.6%{transform:translateX(260%);opacity:0.35}
30%,37.9%{transform:translateX(-260%);opacity:0}
38%{opacity:0.35;animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
41.6%{transform:translateX(260%);opacity:0.35}
42%,100%{transform:translateX(-260%);opacity:0}
}
/* FX2 ışık nefesi */
@keyframes rexFx2{
0%,34%{opacity:0;animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
36%{opacity:0.05;animation-timing-function:cubic-bezier(0.37,0,0.63,1)}
38%,100%{opacity:0}
}
.rex-stratejist.is-static [data-anim]{animation:none !important}
.rex-stratejist.is-static .fx3{animation:rexHaloPulse 8s cubic-bezier(0.37,0,0.63,1) infinite !important}
@media (prefers-reduced-motion: reduce){
.rex-stratejist [data-anim]{animation:none !important}
.rex-stratejist .fx3{animation:rexHaloPulse 8s cubic-bezier(0.37,0,0.63,1) infinite !important}
}
/* ── SİMYAGER (4s master) — rexSim* namespace ── */
@keyframes rexSimBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015); } }
@keyframes rexSimArm { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
@keyframes rexSimTail { 0%, 100% { transform: rotate(-1deg); } 50% { transform: rotate(1deg); } }
@keyframes rexSimGlint {
0% { transform: translateX(-70px) rotate(18deg); opacity: 0; }
2.5% { opacity: 0.3; }
6% { opacity: 0.26; }
7.5%, 100%{ transform: translateX(310px) rotate(18deg); opacity: 0; }
}
@keyframes rexBub1 {
0% { transform: translate(0, 0) scale(0); opacity: 0; }
12% { transform: translate(0, -2px) scale(1); opacity: 0.9; }
50% { transform: translate(2px, -7px) scale(1); opacity: 0.9; }
82% { transform: translate(-1px, -12px) scale(1); opacity: 0.5; }
94%, 100% { transform: translate(0, -14px) scale(1); opacity: 0; }
}
@keyframes rexBub2 {
0% { transform: translate(0, 0) scale(0); opacity: 0; }
12% { transform: translate(0, -3px) scale(1); opacity: 0.9; }
50% { transform: translate(2px, -9px) scale(1); opacity: 0.9; }
82% { transform: translate(-1px, -15px) scale(1); opacity: 0.5; }
94%, 100% { transform: translate(0, -18px) scale(1); opacity: 0; }
}
@keyframes rexBub3 {
0% { transform: translate(0, 0) scale(0); opacity: 0; }
12% { transform: translate(0, -2px) scale(1); opacity: 0.9; }
50% { transform: translate(2px, -6px) scale(1); opacity: 0.9; }
82% { transform: translate(-1px, -10px) scale(1); opacity: 0.5; }
94%, 100% { transform: translate(0, -12px) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){ .rex-simyager [data-anim]{animation:none !important} }
/* ── SANATKÂR (4s master) — tireli adlar benzersiz ── */
@keyframes rex-breath { 0%,100% { transform: scale(1); } 50% { transform: scale(1.015); } }
@keyframes rex-arm { 0%,100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
@keyframes rex-wrist {
0%,40%,60%,100% { transform: translate(0,0); animation-timing-function: cubic-bezier(0.16,1,0.3,1); }
45% { transform: translate(1.5px,-2px); animation-timing-function: cubic-bezier(0.16,1,0.3,1); }
50% { transform: translate(-1.5px,-3px); animation-timing-function: cubic-bezier(0.16,1,0.3,1); }
55% { transform: translate(1.2px,-1.5px); animation-timing-function: cubic-bezier(0.16,1,0.3,1); }
}
@keyframes rex-beret { 0%,100% { transform: rotate(-0.6deg); } 50% { transform: rotate(0.6deg); } }
@keyframes rex-tail { 0%,100% { transform: rotate(-1deg); } 50% { transform: rotate(1deg); } }
@keyframes rex-tip { 0%,40%,60%,100% { opacity: 0; } 45%,55% { opacity: 0.4; } }
@keyframes rex-lens {
0%,86%,100% { transform: translate(0,0); opacity: 0.5; }
89% { transform: translate(-13px,-13px); opacity: 0.2; }
93% { transform: translate(0,0); opacity: 0.55; }
97.75% { transform: translate(12px,12px); opacity: 0.2; }
}
.rex-sanatkar.is-static [data-anim]{animation:none !important}
@media (prefers-reduced-motion: reduce){ .rex-sanatkar [data-anim]{animation:none !important} }
.pm-card-gradient {
position: absolute;
inset: 0;
z-index: 0;
border-radius: 20px;
}
.pm-grad-1 {
background: linear-gradient(135deg, #111A19 0%, #1a1528 40%, #15202a 100%);
}
.pm-grad-2 {
background: linear-gradient(135deg, #1a1610 0%, #2a1a0e 40%, #1f1208 100%);
}
.pm-grad-3 {
background: linear-gradient(135deg, #0e1a1e 0%, #0e2028 40%, #111A19 100%);
}
.pm-grad-4 {
background: linear-gradient(135deg, #111A19 0%, #142018 40%, #0e1a14 100%);
}
/* ═══ AWARDS SECTION ═══ */
.aw-section {
position: relative;
z-index: 4;
padding: 80px 60px;
background: #0e1614;
}
.aw-container {
max-width: 1100px;
margin: 0 auto;
text-align: center;
}
.aw-headline {
font-size: 14px;
letter-spacing: 0.18em;
color: rgba(248, 215, 148, 0.4);
margin: 0 0 28px;
opacity: 0;
transform: translateY(15px);
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.aw-headline.visible {
opacity: 1;
transform: translateY(0);
}
.aw-divider {
width: 100%;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(248, 215, 148, 0.1) 20%,
rgba(248, 215, 148, 0.1) 80%,
transparent 100%
);
margin-bottom: 48px;
opacity: 0;
transform: translateY(15px);
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.aw-divider.visible {
opacity: 1;
transform: translateY(0);
}
.aw-logos {
display: flex;
justify-content: center;
align-items: center;
gap: clamp(48px, 10vw, 120px);
flex-wrap: wrap;
}
.aw-logo-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
cursor: default;
}
.aw-logo-item.visible {
opacity: 0.35;
transform: translateY(0);
}
.aw-logo-item.visible:hover {
opacity: 0.7;
transform: translateY(-4px);
}
.aw-svg {
width: 80px;
height: 50px;
margin-bottom: 8px;
}
.aw-name {
font-size: clamp(18px, 2vw, 24px);
color: #F8D794;
letter-spacing: 0.1em;
line-height: 1;
}
.aw-sub {
font-size: 9px;
letter-spacing: 0.3em;
color: rgba(248, 215, 148, 0.25);
}
@media (max-width: 768px) {
.aw-section { padding: 60px 24px; }
.aw-logos { gap: 36px; }
}
@media (max-width: 768px) {
.pm-header { flex-direction: column; align-items: flex-start; gap: 20px; padding: 0 24px; }
.pm-slider-wrap { padding: 0 24px; }
.pm-card { width: 85vw; min-height: 500px; }
.pm-card-inner { flex-direction: column; }
.pm-card-3d { flex: none; height: 200px; }
}
/* ════════════════════════════════════════════════
(Former ACT IV — Invitation / obelisk / hello@medyaklik.com
completely removed.)
════════════════════════════════════════════════ */
.footer {
position: relative;
z-index: 20;
padding: clamp(3rem, 6vh, 5rem) clamp(2rem, 6vw, 5rem);
background: var(--void);
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
flex-wrap: wrap;
border-top: 1px solid rgba(248, 240, 229, 0.08);
}
.footer-mark {
font-family: 'Fraunces', serif;
font-weight: 900;
font-size: clamp(2rem, 4vw, 3.5rem);
letter-spacing: -0.04em;
color: var(--light);
animation: drift 14s ease-in-out infinite;
}
@keyframes drift {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(8px); }
}
.footer-meta, .footer-social {
font-family: 'Fraunces', serif;
font-weight: 400;
font-size: var(--rail);
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(248, 215, 148, 0.55);
}
.footer-social { display: flex; gap: 2rem; }
.footer-social a {
color: inherit;
text-decoration: none;
transition: color 400ms;
}
.footer-social a:hover { color: var(--light); }
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.mask > span { transform: translateY(0) !important; }
.scene-wrap, .tagline-wrap, .meta, .scroll-cue, .statement { opacity: 1 !important; }
}
/* ════════════════════════════════════════════════
ACT 2 — KLAVYE BUTONU + DÜŞEN BİLET
Inserted between Act I (bow/arrow) and Act II (Philosophy)
Uses .kf / .mf utilities already defined for espresso CTA
════════════════════════════════════════════════ */
.act2-sec {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #111A19;
overflow: hidden;
padding: 60px 20px;
z-index: 2;
}
.act2-sec::before {
content: '';
position: absolute; inset: 0;
pointer-events: none;
z-index: 1;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
opacity: 0.06;
mix-blend-mode: overlay;
}
.act2-sec::after {
content: '';
position: absolute; inset: 0;
pointer-events: none;
z-index: 1;
background: repeating-linear-gradient(
0deg, transparent, transparent 3px,
rgba(0,0,0,0.025) 3px, rgba(0,0,0,0.025) 6px);
}
/* Button */
.act2-button {
position: relative;
width: min(280px, 45vw);
height: min(280px, 45vw);
cursor: pointer;
transition: transform 0.15s ease-out;
animation: btnBreathe 3s ease-in-out infinite;
z-index: 3;
}
@keyframes btnBreathe {
0%, 100% { transform: scale(1); filter: drop-shadow(0 0 20px rgba(232, 113, 42, 0.10)); }
50% { transform: scale(1.02); filter: drop-shadow(0 0 35px rgba(232, 113, 42, 0.20)); }
}
.act2-button.pressed { animation: none; transform: translateY(4px); }
.act2-button.disabled {
animation: none;
cursor: default;
pointer-events: none;
opacity: 0.6;
}
.act2-btn-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
mix-blend-mode: screen; /* black PNG bg → transparent */
transition: opacity 0.05s;
will-change: opacity;
}
.act2-pressed { opacity: 0; }
/* Pulse ring on click */
.act2-pulse-ring {
position: absolute;
inset: -10px;
border-radius: 20px;
border: 2px solid #E8712A;
opacity: 0;
transform: scale(1);
pointer-events: none;
}
/* Hint text */
.act2-hint {
margin-top: 32px;
font-size: 10px;
letter-spacing: 0.35em;
text-transform: uppercase;
color: rgba(248, 215, 148, 0.22);
animation: hintPulse 2s ease-in-out infinite;
transition: opacity 0.4s;
z-index: 3;
}
@keyframes hintPulse {
0%, 100% { opacity: 0.2; }
50% { opacity: 0.45; }
}
.act2-hint.hidden { opacity: 0 !important; animation: none; }
/* ─── TICKET ─── */
.ticket {
position: absolute;
left: 50%;
top: -300px;
width: min(320px, 70vw);
transform: translateX(-50%);
display: none;
cursor: default;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s;
z-index: 10;
}
.ticket-inner {
position: relative;
background: linear-gradient(145deg, #1a1612 0%, #0f0d0a 100%);
border: 1px solid rgba(212, 168, 74, 0.15);
border-radius: 12px;
padding: 32px 28px;
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.4),
0 0 30px rgba(232, 113, 42, 0.05);
overflow: hidden;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.ticket:hover .ticket-inner {
transform: translateY(-8px);
box-shadow:
0 30px 80px rgba(0, 0, 0, 0.55),
0 0 50px rgba(232, 113, 42, 0.10);
}
/* Inner dashed frame */
.ticket-inner::before {
content: '';
position: absolute;
inset: 8px;
border: 1px dashed rgba(248, 215, 148, 0.08);
border-radius: 8px;
pointer-events: none;
}
/* Side notches (ticket tear-marks) */
.ticket-notch {
position: absolute;
width: 20px; height: 20px;
background: #111A19;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
z-index: 2;
}
.ticket-notch-left { left: -10px; }
.ticket-notch-right { right: -10px; }
.ticket-content {
text-align: center;
position: relative;
z-index: 3;
}
.ticket-brand {
font-size: 36px;
color: #F8D794;
letter-spacing: 0.15em;
margin-bottom: 4px;
line-height: 1;
}
.ticket-sub {
font-size: 9px;
color: rgba(248, 215, 148, 0.32);
letter-spacing: 0.3em;
text-transform: uppercase;
margin-bottom: 20px;
}
.ticket-divider {
width: 60%;
height: 1px;
margin: 0 auto 20px;
background: repeating-linear-gradient(90deg,
rgba(248, 215, 148, 0.12) 0px, rgba(248, 215, 148, 0.12) 4px,
transparent 4px, transparent 8px);
}
.ticket-access {
font-size: 10px;
color: rgba(248, 215, 148, 0.28);
letter-spacing: 0.2em;
text-transform: uppercase;
margin-bottom: 4px;
}
.ticket-pass {
font-size: 11px;
color: rgba(248, 215, 148, 0.42);
letter-spacing: 0.15em;
margin-bottom: 16px;
}
.ticket-admit {
font-size: 11px;
color: #E8712A;
letter-spacing: 0.25em;
font-weight: 700;
}
/* Hover overlay message */
.ticket-message {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.88);
border-radius: 12px;
opacity: 0;
transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
z-index: 5;
padding: 24px;
border: 1px solid rgba(232, 113, 42, 0.25);
}
.ticket:hover .ticket-message { opacity: 1; }
.ticket-message p {
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 13px;
font-style: italic;
color: #F8D794;
text-align: center;
line-height: 2;
letter-spacing: 0.05em;
margin: 0;
}
@media (max-width: 600px) {
.act2-button { width: min(200px, 55vw); height: min(200px, 55vw); }
.ticket { width: min(280px, 85vw); }
.ticket-brand { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
.act2-button, .act2-hint { animation: none !important; }
}
/* ════════════════════════════════════════════════
ESPRESSO CTA — 1980s lounge bar atmosphere
Inserted before footer; reuses site cursor system
════════════════════════════════════════════════ */
.kf { font-family: 'Bebas Neue', sans-serif; }
.mf { font-family: 'Space Mono', ui-monospace, monospace; }
.espresso-sec {
position: relative;
z-index: 2;
padding: 100px 60px;
text-align: center;
background: radial-gradient(ellipse at 40% 45%,
#1a1614 0%, #111A19 50%, #0e1615 100%);
overflow: hidden;
}
/* Atmosfer katmanları — site paleti, subtle */
.esp-amber-glow {
position: absolute; inset: 0;
pointer-events: none; z-index: 0;
background: radial-gradient(ellipse at 85% 15%, rgba(248,215,148,0.03) 0%, transparent 45%);
}
.esp-red-glow {
position: absolute; inset: 0;
pointer-events: none; z-index: 0;
background: radial-gradient(ellipse at 15% 80%, rgba(232,113,42,0.03) 0%, transparent 35%);
}
.esp-vignette {
position: absolute; inset: 0;
pointer-events: none; z-index: 0;
background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.4) 100%);
}
.coffee-visual {
position: relative;
width: min(520px, 85vw);
aspect-ratio: 1 / 1;
margin: 0 auto 56px;
border-radius: 28px;
overflow: hidden;
background: #111A19;
cursor: none;
transition: box-shadow 0.8s cubic-bezier(0.16, 1, 0.3, 1);
border: 1px solid rgba(248, 215, 148, 0.06);
}
.coffee-visual:hover {
box-shadow:
0 30px 80px rgba(0, 0, 0, 0.3),
0 0 60px rgba(232, 113, 42, 0.04);
}
.espresso-embed {
width: 100%;
height: 100%;
border: none;
display: block;
background: #15100c;
border-radius: inherit;
pointer-events: auto;
}
.cv-corner {
position: absolute;
width: 32px; height: 32px;
z-index: 5;
pointer-events: none;
transition: border-color 0.5s;
}
.cv-tl { top: 14px; left: 14px;
border-top: 1.5px solid rgba(248, 215, 148, 0.06);
border-left: 1.5px solid rgba(248, 215, 148, 0.06); }
.cv-tr { top: 14px; right: 14px;
border-top: 1.5px solid rgba(248, 215, 148, 0.06);
border-right: 1.5px solid rgba(248, 215, 148, 0.06); }
.cv-bl { bottom: 14px; left: 14px;
border-bottom: 1.5px solid rgba(248, 215, 148, 0.06);
border-left: 1.5px solid rgba(248, 215, 148, 0.06); }
.cv-br { bottom: 14px; right: 14px;
border-bottom: 1.5px solid rgba(248, 215, 148, 0.06);
border-right: 1.5px solid rgba(248, 215, 148, 0.06); }
.coffee-visual:hover .cv-corner { border-color: rgba(248, 215, 148, 0.2); }
.coffee-hint {
position: absolute;
bottom: 18px; left: 50%;
transform: translateX(-50%);
font-size: 9px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: rgba(248, 215, 148, 0.2);
z-index: 5;
pointer-events: none;
transition: opacity 0.5s;
}
.coffee-visual:hover .coffee-hint { opacity: 0; }
.esp-label {
font-size: 13px;
letter-spacing: 0.35em;
text-transform: uppercase;
color: rgba(248, 215, 148, 0.25);
margin-bottom: 20px;
}
.esp-title {
font-size: clamp(44px, 7vw, 80px);
line-height: 0.95;
letter-spacing: 0.02em;
color: var(--ink);
margin: 0 0 28px;
text-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
}
.esp-title .accent { color: var(--accent); }
.esp-body {
font-size: 15px;
color: rgba(248, 215, 148, 0.35);
line-height: 1.8;
max-width: 520px;
margin: 0 auto 44px;
font-weight: 300;
}
.esp-body strong { color: rgba(248, 215, 148, 0.6); font-weight: 500; }
.cta-row {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.btn {
display: inline-block;
padding: 18px 48px;
border: none;
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 12px;
letter-spacing: 0.2em;
text-transform: uppercase;
text-decoration: none;
text-align: center;
cursor: none;
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.bp { background: var(--accent); color: var(--ink); }
.bp:hover { background: var(--ink); color: var(--void); transform: scale(1.04); }
.bo { background: transparent; color: var(--ink);
border: 1px solid rgba(248, 215, 148, 0.15); }
.bo:hover { border-color: var(--ink); background: rgba(248, 215, 148, 0.05); }
/* ─── Dönüşüm elementleri ─── */
/* CTA pulse — espresso dolduktan sonra dikkat çekme */
@keyframes ctaPulse {
0%, 100% { box-shadow: 0 0 0 rgba(232, 113, 42, 0); }
50% { box-shadow: 0 0 20px rgba(232, 113, 42, 0.3), 0 0 40px rgba(232, 113, 42, 0.1); }
}
/* Kelime kelime başlık reveal */
.esp-word {
display: inline-block;
opacity: 0;
transform: translateY(15px);
}
.esp-word.in {
opacity: 1;
transform: translateY(0);
}
/* Sosyal kanıt — yeşil dot + aktif çalışma sinyali */
.esp-social-proof {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 24px;
font-size: 10px;
letter-spacing: 0.1em;
color: rgba(248, 215, 148, 0.2);
}
.esp-sp-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #4CAF50;
animation: dotBlink 2s ease-in-out infinite;
}
@keyframes dotBlink {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.esp-word { opacity: 1 !important; transform: none !important; transition: none !important; }
.esp-sp-dot { animation: none; }
}
@media (max-width: 600px) {
.espresso-sec { padding: 60px 16px; }
}
/* ════════════════════════════════════════════════
BACKGROUND BOXES FOOTER — compact, 2-row identity strip
KLIK + nav + copyright with skewed boxes grid behind
150 × 100 grid, event-delegated hover color burst
════════════════════════════════════════════════ */
.boxes-footer {
position: relative;
z-index: 2;
width: 100%;
background: #111A19;
overflow: hidden;
isolation: isolate;
}
/* Top border hairline */
.boxes-footer::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
z-index: 30;
background: rgba(248, 215, 148, 0.04);
pointer-events: none;
}
/* Skewed grid plane (Manhattan-style perspective) — sits behind content */
.boxes-grid {
position: absolute;
left: 25%;
top: -25%;
width: 100%;
height: 100%;
padding: 16px;
z-index: 0;
display: flex;
transform: translate(-90%, -110%) skewX(-48deg) skewY(14deg) scale(0.675) translateZ(0);
transform-origin: 50% 50%;
}
.boxes-row {
width: 64px;
flex-shrink: 0;
position: relative;
border-left: 1px solid rgba(248, 215, 148, 0.04);
}
.box-cell {
width: 64px;
height: 32px;
border-right: 1px solid rgba(248, 215, 148, 0.04);
border-top: 1px solid rgba(248, 215, 148, 0.04);
background-color: transparent;
transition: background-color 2s ease;
position: relative;
will-change: background-color;
}
.box-cell .plus {
position: absolute;
top: -14px;
left: -22px;
width: 40px;
height: 24px;
pointer-events: none;
stroke: rgba(248, 215, 148, 0.06);
fill: none;
stroke-width: 1;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Mask overlay — ellipse falloff per new spec (center transparent, edges dark) */
.boxes-mask {
position: absolute;
inset: 0;
z-index: 20;
background: #111A19;
-webkit-mask-image: radial-gradient(ellipse at 50% 50%, transparent 20%, black 70%);
mask-image: radial-gradient(ellipse at 50% 50%, transparent 20%, black 70%);
pointer-events: none;
}
/* Vignettes — top blend, bottom slightly darker per spec (#0a1a1d) */
.boxes-vignette-top {
position: absolute;
top: 0; left: 0; right: 0;
height: 96px;
z-index: 25;
pointer-events: none;
background: linear-gradient(to bottom, #111A19, transparent);
}
.boxes-vignette-bottom {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 64px;
z-index: 25;
pointer-events: none;
background: linear-gradient(to top, #0a1a1d, transparent);
}
/* ─── Content rows ─── */
/* CRITICAL: container is mouse-transparent so the grid behind receives hover events.
Only interactive children (nav links) get pointer-events back. */
.boxes-inner {
position: relative;
z-index: 30;
padding: clamp(48px, 6vw, 80px) clamp(1.5rem, 6vw, 4rem);
pointer-events: none;
}
/* Top row: brand + nav */
.boxes-top-row {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
gap: 40px;
margin-bottom: 64px;
}
.boxes-brand h3 {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(36px, 5vw, 56px);
color: #F8D794;
letter-spacing: 0.08em;
line-height: 1;
margin: 0;
}
.boxes-brand h3 .accent { color: #E8712A; }
.boxes-brand p {
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 11px;
color: rgba(248, 215, 148, 0.2);
letter-spacing: 0.15em;
margin: 8px 0 0 0;
}
.boxes-nav {
display: flex;
flex-wrap: wrap;
gap: 40px;
}
.boxes-nav a {
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 11px;
color: rgba(248, 215, 148, 0.3);
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
transition: color 0.3s;
pointer-events: auto; /* re-enable on links so they remain clickable */
}
.boxes-nav a:hover { color: #E8712A; }
/* Social + contact row */
.boxes-social-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
padding: 20px 0;
}
.boxes-social { display: flex; gap: 28px; }
.boxes-social a,
.boxes-mail {
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 11px;
color: rgba(248, 215, 148, 0.3);
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
transition: color 0.3s;
pointer-events: auto;
}
.boxes-social a:hover,
.boxes-mail:hover { color: #E8712A; }
/* Bottom row: copyright */
.boxes-bottom-row {
padding-top: 24px;
border-top: 1px solid rgba(248, 215, 148, 0.03);
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.boxes-copy,
.boxes-locale {
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 10px;
color: rgba(248, 215, 148, 0.12);
letter-spacing: 0.15em;
margin: 0;
}
.boxes-locale { letter-spacing: 0.10em; }
@media (max-width: 768px) {
.boxes-top-row {
flex-direction: column;
align-items: flex-start;
gap: 24px;
margin-bottom: 40px;
}
.boxes-nav { gap: 24px; }
.boxes-bottom-row {
flex-direction: column;
align-items: center;
text-align: center;
gap: 8px;
}
}
@media (prefers-reduced-motion: reduce) {
.box-cell { transition: none !important; }
}
/* ════════════════════════════════════════════════
RETRO-NOIR AESTHETIC LAYER
Analog sıcaklık + sinematik karanlık + editöryal hassasiyet
Tümü dekoratif — içerik katmanına dokunmaz.
════════════════════════════════════════════════ */
/* ─── 1A. VHS parazit ayırıcısı (bölümler arası) ─── */
.klik-vhs-divider {
width: 100%;
height: 12px;
position: relative;
overflow: hidden;
margin: 0;
background: var(--void);
}
.vhs-line {
width: 100%;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(248,215,148,0.03) 20%,
rgba(232,113,42,0.08) 50%,
rgba(248,215,148,0.03) 80%,
transparent 100%);
}
.vhs-glitch {
width: 100%;
height: 4px;
background: repeating-linear-gradient(90deg,
transparent 0px, transparent 4px,
rgba(248,215,148,0.02) 4px, rgba(248,215,148,0.02) 5px);
animation: vhsGlitch 8s linear infinite;
will-change: transform;
}
@keyframes vhsGlitch {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* ─── 1B. Film şeridi kenar perforasyonları (sol, fixed) ─── */
.klik-film-strip {
position: fixed;
left: 0; top: 0;
width: 20px;
height: 100vh;
z-index: 50;
pointer-events: none;
display: flex;
flex-direction: column;
gap: 24px;
padding: 20px 4px;
opacity: 0.04;
overflow: hidden;
}
.film-perf {
width: 12px;
height: 8px;
border-radius: 2px;
border: 1px solid #F8D794;
flex-shrink: 0;
}
/* ─── 1C. Köşe frame numaraları ─── */
.klik-frame-num {
position: absolute;
top: 20px;
left: 24px;
font-size: 9px;
letter-spacing: 0.2em;
color: rgba(248, 215, 148, 0.08);
z-index: 5;
pointer-events: none;
}
/* ─── 1D. Runtime timecode (sol alt, fixed) ─── */
.klik-timecode {
position: fixed;
bottom: 20px;
left: 24px;
z-index: 50;
display: flex;
align-items: center;
gap: 10px;
pointer-events: none;
}
.tc-label {
font-size: 8px;
letter-spacing: 0.2em;
color: rgba(248, 215, 148, 0.1);
}
.tc-counter {
font-size: 11px;
letter-spacing: 0.15em;
color: rgba(248, 215, 148, 0.12);
font-variant-numeric: tabular-nums;
}
/* ─── 2. Dev arka plan tipografisi ─── */
.klik-bgword {
position: absolute;
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(120px, 20vw, 300px);
color: rgba(248, 215, 148, 0.015);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
white-space: nowrap;
z-index: 0;
letter-spacing: 0.1em;
user-select: none;
}
/* ─── 4. Marquee bandı ─── */
.klik-marquee {
width: 100%;
overflow: hidden;
padding: 20px 0;
border-top: 1px solid rgba(248,215,148,0.04);
border-bottom: 1px solid rgba(248,215,148,0.04);
background: rgba(232, 113, 42, 0.03);
}
.klik-marquee-track {
display: flex;
gap: 32px;
white-space: nowrap;
animation: marqueeScroll 25s linear infinite;
width: max-content;
will-change: transform;
}
.klik-marquee-track span {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(14px, 1.8vw, 20px);
letter-spacing: 0.15em;
color: rgba(248, 215, 148, 0.2);
flex-shrink: 0;
}
.marquee-dot {
color: #E8712A !important;
opacity: 0.4;
}
@keyframes marqueeScroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* ─── 5. Dönen badge dekorasyonu ─── */
.klik-badge {
position: absolute;
z-index: 5;
pointer-events: none;
}
.klik-badge-espresso { top: 40px; right: 48px; }
.klik-badge-rotate {
animation: badgeSpin 30s linear infinite;
will-change: transform;
}
@keyframes badgeSpin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* ─── 6A. Scroll progress bar (üst) ─── */
.klik-progress {
position: fixed;
top: 0; left: 0;
width: 100%;
height: 2px;
z-index: 1001;
background: rgba(248, 215, 148, 0.03);
pointer-events: none;
}
.klik-progress-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #E8712A, #F8D794);
transition: width 0.1s;
will-change: width;
}
/* ─── 7. Tüm sayfa film grain (JS canvas → CSS var) ─── */
body::after {
content: '';
position: fixed;
inset: 0;
z-index: 9998;
pointer-events: none;
opacity: 0.06;
mix-blend-mode: overlay;
background-image: var(--klik-grain-img, none);
background-size: 256px 256px;
animation: grainShift 0.5s steps(1) infinite;
}
@keyframes grainShift {
0% { background-position: 0 0; }
25% { background-position: -50px -50px; }
50% { background-position: 50px 0; }
75% { background-position: 0 50px; }
}
/* ─── Responsive + reduced motion ─── */
@media (max-width: 768px) {
.klik-film-strip, .klik-timecode { display: none; }
.klik-badge-espresso { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.vhs-glitch,
.klik-marquee-track,
.klik-badge-rotate { animation: none !important; }
body::after { animation: none !important; }
}
/* ═══ AWWWARDS RAFİNASYON PAKETİ ═══ */
/* 2.2 · Sayfa yüklenme kapısı */
.ec-loader{position:fixed;inset:0;background:#111A19;z-index:99999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1),visibility 0.8s;}
.ec-loader.done{opacity:0;visibility:hidden;}
.ec-loader-brand{font-size:clamp(48px,8vw,96px);color:#F8D794;letter-spacing:0.05em;}
.ec-loader-num{font-size:14px;color:rgba(248,215,148,0.4);letter-spacing:0.3em;}
.ec-loader-bar{width:min(280px,60vw);height:1px;background:rgba(248,215,148,0.1);overflow:hidden;}
.ec-loader-fill{height:100%;width:0%;background:#E8712A;transition:width 0.3s linear;}
/* 2.3 · Split-text reveal */
.ec-word{display:inline-block;overflow:hidden;vertical-align:top;}
.ec-word-inner{display:inline-block;transform:translateY(110%);transition:transform 0.9s cubic-bezier(0.22,1,0.36,1);}
.ec-word.in .ec-word-inner{transform:translateY(0);}
/* 2.4 · Magnetic CTA */
.ec-magnet{transition:transform 0.4s cubic-bezier(0.16,1,0.3,1);}
/* 2.5 · Scroll progress rail (sol kenar, dikey) */
.ec-progress-rail{position:fixed;left:0;top:0;width:2px;height:100vh;background:rgba(248,215,148,0.06);z-index:100;}
.ec-progress-bar{width:100%;height:0%;background:linear-gradient(180deg,#E8712A,#F8D794);transition:height 0.1s linear;}
/* 2.6 · Link underline efekti */
a:not(.no-underline):not(.nav-logo):not(.primary-cta):not(.ec-magnet):not(.btn):not(.star-brand){position:relative;display:inline-block;}
a:not(.no-underline):not(.nav-logo):not(.primary-cta):not(.ec-magnet):not(.btn):not(.star-brand)::after{
content:'';position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:currentColor;
transform:scaleX(0);transform-origin:right center;
transition:transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
a:not(.no-underline):not(.nav-logo):not(.primary-cta):not(.ec-magnet):not(.btn):not(.star-brand):hover::after{
transform:scaleX(1);transform-origin:left center;
}
/* 2.7 · Section sayaç numaraları */
.ec-section-num{position:absolute;top:40px;right:40px;font-size:10px;letter-spacing:0.35em;color:rgba(248,215,148,0.18);z-index:5;pointer-events:none;}
@media(max-width:768px){.ec-section-num{top:20px;right:20px;font-size:9px;}}
/* GÖREV 3 · Aktif nav vurgusu (footer boxes-nav) */
.boxes-nav a{position:relative;}
.boxes-nav a.active{color:#E8712A;}
.boxes-nav a.active::before{
content:'●';position:absolute;left:-14px;top:50%;transform:translateY(-50%);
font-size:6px;color:#E8712A;
}