/* ==========================================================================
   Büyüme — Samet Fidancı · Kinetik tipografi
   Marka paleti (ilk siteden): beyaz #ffffff, yazı #1a1a1a, siyah #0a0a0a,
   yeşil #02b768 / açık yeşil #03d47a. Sahneler beyaz–siyah–yeşil arasında döner.
   ========================================================================== */

:root {
    --white: #ffffff;
    --ink: #1a1a1a;
    --black: #0a0a0a;
    --g: #02b768;
    --g-light: #03d47a;
    --topc: #1a1a1a;                 /* üst şeridin rengi sahneye göre değişir */

    --display: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
    --serif: 'Instrument Serif', Georgia, serif;
    --sans: 'Inter Tight', system-ui, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

    --pad: clamp(18px, 4vw, 56px);
    --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--white); -webkit-text-size-adjust: 100%; }
body {
    background: var(--white);
    color: var(--ink);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--g); color: var(--white); }

.mono { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.serif { font-family: var(--serif); font-style: italic; font-weight: 400; }
.display { font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: .9; letter-spacing: -.01em; }
.g { color: var(--g); }
em { font-style: italic; color: var(--g); }

.w { display: inline-block; white-space: nowrap; }
.cw { display: inline-block; }
.c { display: inline-block; will-change: transform; }

/* ---------- Genel katmanlar ---------- */
.grain {
    position: fixed;
    inset: -50%;
    z-index: 50;
    pointer-events: none;
    opacity: .05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grain 1s steps(6) infinite;
}
@keyframes grain {
    0% { transform: translate(0, 0); } 25% { transform: translate(-4%, 3%); }
    50% { transform: translate(3%, -5%); } 75% { transform: translate(-6%, -2%); }
    100% { transform: translate(5%, 4%); }
}

.top {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 40;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px var(--pad);
    color: var(--topc);
    pointer-events: none;
    transition: color .5s;
}
.top__name { font-weight: 500; letter-spacing: -.02em; }
.top__tag { opacity: .6; }
.top__right { display: flex; align-items: center; gap: 26px; }


.progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 45; }
.progress i { display: block; height: 100%; background: var(--topc); transform: scaleX(0); transform-origin: left; transition: background-color .5s; }

.step {
    position: fixed;
    right: var(--pad);
    bottom: 24px;
    z-index: 40;
    color: var(--topc);
    opacity: .6;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    transition: color .5s;
}

.hint {
    position: fixed;
    bottom: 34px;
    left: 0;
    right: 0;
    z-index: 40;
    width: max-content;
    max-width: calc(100% - 32px);
    margin-inline: auto;
    display: grid;
    justify-items: center;
    gap: 12px;
    color: var(--ink);
    pointer-events: none;
}
/* Okunur ipucu: koyu hap, beyaz yazı, hafif nefes */
.hint b {
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--white);
    font-weight: 400;
    font-size: clamp(.68rem, 3vw, .9rem);
    letter-spacing: .06em;
    white-space: nowrap;
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .45);
    animation: breathe 2.4s ease-in-out infinite;
}
@keyframes breathe { 50% { transform: scale(1.05); } }
.hint i { position: relative; width: 1px; height: 36px; background: currentColor; opacity: .25; overflow: hidden; }
.hint i::after {
    content: '';
    position: absolute;
    inset: 0;
    background: currentColor;
    animation: drip 2s var(--ease) infinite;
}
@keyframes drip { 0% { transform: translateY(-100%); } 60% { transform: translateY(0); } 100% { transform: translateY(100%); } }

/* ---------- Sahneler ---------- */
.scene {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 0 var(--pad);
    overflow: hidden;
}
/* Hareket açıkken sayfa kaymaz: sahneler üst üste durur, adım adım oynar */
.motion, .motion body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.motion .scene { position: fixed; inset: 0; visibility: hidden; touch-action: none; }
.motion .hero { visibility: visible; }

/* 1 · Büyüme — beyaz */
.hero { background: var(--white); color: var(--ink); align-content: center; gap: 2vh; text-align: center; }
.hero__word {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(5rem, 24vw, 26rem);
    line-height: .86;
    letter-spacing: -.02em;
}
.hero__word .cw:nth-child(2) { color: var(--g); }   /* BÜYÜME'nin ilk Ü'sü yeşil */
.hero__sub { font-size: clamp(1.6rem, 4vw, 3.4rem); opacity: .55; }

/* 2 · İki şey — siyah */
.two { background: var(--black); color: var(--white); }
.two__text {
    font-size: clamp(3rem, 9.5vw, 10rem);
    text-align: center;
    max-width: 14ch;
    line-height: 1.08;              /* İ, Ü, Ş işaretleri üst satıra çarpmasın */
    perspective: 900px;
}
.two .g { color: var(--g-light); }

/* 3 · Müşteri — beyaz, fizik */
.phys { background: var(--white); color: var(--ink); place-items: stretch; padding: 0; }
.phys__head,
.sale__head {
    position: absolute;
    top: clamp(80px, 13vh, 130px);
    left: var(--pad);
    z-index: 2;
    display: grid;
    gap: 10px;
}
.phys__head .mono { color: var(--g); }
.phys__head p,
.sale__head p { font-size: clamp(1.8rem, 3.6vw, 3.2rem); line-height: 1; }
.phys__box { position: absolute; inset: 0; }
.phys__item {
    position: absolute;
    left: 0;
    top: 0;
    user-select: none;
    -webkit-user-select: none;
    will-change: transform;
    cursor: grab;
}
.letter {
    font-family: var(--display);
    font-size: clamp(3rem, 12.5vw, 13rem);
    line-height: .85;
    padding: 0 .04em;
}
.pill {
    padding: .9em 1.4em;
    border: 1px solid rgba(26, 26, 26, .18);
    border-radius: 999px;
    font-size: clamp(.7rem, 1vw, .85rem);
    background: var(--white);
}
.pill--g { background: var(--g); border-color: var(--g); color: var(--white); }
.phys__tip { position: absolute; left: var(--pad); bottom: 26px; opacity: .5; }

/* 4 · Satış — yeşil */
.sale { background: var(--g); color: var(--white); place-items: center start; padding: 0; }
.sale .g,
.sale em { color: var(--ink); }
.sale__head .mono { color: var(--ink); }
.sale__track {
    white-space: nowrap;
    font-size: clamp(8rem, 36vw, 34rem);
    line-height: .8;
    padding-left: 100vw;
    will-change: transform;
}

/* 5 · Çarpışma — siyah */
.clash { background: var(--black); color: var(--white); align-content: center; gap: 4vh; text-align: center; }
.clash .g { color: var(--g-light); }
.clash__label { font-size: clamp(1.5rem, 3.2vw, 2.8rem); opacity: .6; }
.clash__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .15em;
    font-size: clamp(3.4rem, 13vw, 13rem);
}
.clash__row > span { display: inline-block; will-change: transform; }
.clash__plus { opacity: .5; }
.clash__result {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: clamp(4.5rem, 19vw, 20rem);
    color: var(--g-light);
    pointer-events: none;
}
.clash__flash { position: absolute; inset: 0; background: var(--g); opacity: 0; pointer-events: none; }

/* 6 · Cümleler — beyaz */
.lines { background: var(--white); color: var(--ink); align-content: center; gap: 5vh; }
.line {
    font-size: clamp(2rem, 5vw, 4.6rem);
    line-height: 1.05;
    max-width: 18ch;
    text-align: center;
}

/* 7 · Sonuç — beyazdan yeşile, O'nun içinden */
.zoom { background: var(--white); color: var(--ink); align-content: center; gap: 3vh; }
.zoom__pre { text-align: center; opacity: .55; }
.zoom__word { font-size: clamp(6rem, 27vw, 28rem); will-change: transform; }
.zoom__o { display: inline-block; }

/* 8 · Final — yeşil */
.final { background: var(--g); color: var(--ink); align-content: center; gap: 6vh; text-align: center; }
.final { gap: 4vh; }
.final__q { font-size: clamp(3rem, 10vw, 10rem); line-height: .92; }
.reels-handle { display: none; font-size: clamp(1.4rem, 6vw, 3rem); }

/* Reels modu: kayıt için sade, 9:16 çerçevede kendiliğinden oynar */
.reels .hint, .reels .step, .reels .progress,
.reels .wa, .reels .foot, .reels .phys__tip, .reels .top__tag { display: none !important; }
.reels .reels-handle { display: block; }
.wa {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    justify-self: center;
    padding: 18px 32px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--white);
    font-weight: 500;
    font-size: 1.05rem;
    transition: transform .5s var(--ease), box-shadow .5s;
}
.wa:hover { transform: scale(1.05); box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .5); }
.wa span { transition: transform .5s var(--ease); }
.wa:hover span { transform: translateX(6px); }
.foot {
    position: absolute;
    left: var(--pad);
    right: var(--pad);
    bottom: 26px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 28px;
    opacity: .7;
}
.foot a:hover { text-decoration: underline; }

/* ---------- Hareket yoksa: sade, alt alta okuma ---------- */
.no-motion .phys__box { position: relative; display: flex; flex-wrap: wrap; gap: 12px; padding: 30vh var(--pad) 10vh; }
.no-motion .phys__item { position: static; }
.no-motion .sale__track { padding-left: var(--pad); font-size: 16vw; white-space: normal; }
.no-motion .clash__result { position: static; transform: none; }
.no-motion .hint, .no-motion .phys__tip, .no-motion .step { display: none; }

@media (max-width: 700px) {
    .top__tag { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .grain, .hint i::after { animation: none; }
}