:root {
    --intro-background: #020204;
    --intro-white: #fff9fc;
    --intro-muted: #a99da4;

    --intro-pink: #ef579d;
    --intro-light-pink: #ff9ec8;
    --intro-purple: #7c2c9b;
    --intro-red: #c82761;
}


/* ================================
   BAŞLANGIÇ EKRANI ETKİLEŞİMİ
================================ */

.story-placeholder {
    cursor: pointer;
}

.story-placeholder-content {
    transition:
        opacity 700ms ease,
        transform 700ms ease,
        filter 700ms ease;
}

.story-placeholder:hover .story-placeholder-content {
    transform: scale(1.025);
}

.story-placeholder:focus-visible {
    outline: 2px solid rgba(255, 148, 196, 0.85);
    outline-offset: -12px;
}

.story-placeholder.is-leaving {
    opacity: 0;
    visibility: hidden;
}

.story-placeholder.is-leaving .story-placeholder-content {
    opacity: 0;
    transform: scale(1.08);
    filter: blur(8px);
}


/* ================================
   BAŞLAMAK İÇİN DOKUN
================================ */

.story-placeholder-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    margin-top: 34px;

    color: #8f7c87;

    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;

    animation:
        storyHintPulse 2.2s ease-in-out infinite;
}

.story-placeholder-hint span {
    display: block;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #ee6ca5;

    box-shadow:
        0 0 9px rgba(238, 86, 158, 0.9),
        0 0 19px rgba(238, 86, 158, 0.5);
}


/* ================================
   SİNEMATİK INTRO
================================ */

.cinematic-intro {
    position: fixed;
    inset: 0;
    z-index: 300;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 100dvh;

    overflow: hidden;

    background: var(--intro-background);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 900ms ease,
        visibility 900ms ease;
}

.cinematic-intro.is-visible {
    opacity: 1;
    visibility: visible;
}


/* ================================
   ARKA PLAN ŞEKİLLERİ
================================ */

.intro-background-elements {
    position: absolute;
    inset: 0;

    overflow: hidden;

    pointer-events: none;
}

.intro-shape {
    position: absolute;

    display: block;

    opacity: 0;

    transition:
        opacity 1.5s ease,
        transform 3s cubic-bezier(0.22, 1, 0.36, 1);
}

.intro-shape-one {
    top: -32vh;
    left: -15vw;

    width: 70vw;
    height: 70vw;

    border: 2px solid rgba(239, 70, 151, 0.3);
    border-radius: 42% 58% 61% 39% / 37% 34% 66% 63%;

    transform:
        scale(0.7)
        rotate(-25deg);
}

.intro-shape-two {
    right: -26vw;
    bottom: -50vh;

    width: 85vw;
    height: 85vw;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            rgba(105, 31, 135, 0.5),
            rgba(219, 43, 107, 0.25)
        );

    filter: blur(8px);

    transform:
        scale(0.7)
        rotate(20deg);
}

.intro-shape-three {
    top: 35%;
    left: 50%;

    width: 34vw;
    height: 34vw;

    border: 1px solid rgba(255, 136, 191, 0.22);
    border-radius: 50%;

    transform:
        translate(-50%, -50%)
        scale(0.4);
}

.cinematic-intro.has-radio .intro-shape {
    opacity: 1;
}

.cinematic-intro.has-radio .intro-shape-one {
    transform:
        scale(1)
        rotate(8deg);
}

.cinematic-intro.has-radio .intro-shape-two {
    transform:
        scale(1)
        rotate(-12deg);
}

.cinematic-intro.has-radio .intro-shape-three {
    transform:
        translate(-50%, -50%)
        scale(1);
}


/* ================================
   ARKA PLAN IŞIKLARI
================================ */

.intro-light {
    position: absolute;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    filter: blur(130px);

    opacity: 0;

    transition: opacity 1.8s ease;
}

.intro-light-one {
    top: -280px;
    left: -250px;

    background: rgba(122, 34, 149, 0.4);
}

.intro-light-two {
    right: -270px;
    bottom: -300px;

    background: rgba(226, 48, 125, 0.38);
}

.cinematic-intro.has-radio .intro-light {
    opacity: 1;
}


/* ================================
   FİLM GRENİ
================================ */

.intro-grain {
    position: absolute;
    inset: -50%;

    width: 200%;
    height: 200%;

    pointer-events: none;

    opacity: 0.055;

    background-image:
        repeating-radial-gradient(
            circle at 30% 40%,
            rgba(255, 255, 255, 0.8) 0 1px,
            transparent 1px 4px
        );

    background-size: 8px 8px;

    animation:
        introGrainMovement 350ms steps(2) infinite;
}


/* ================================
   SAHNE YAZILARI
================================ */

.intro-scene-copy {
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 50%;

    width: min(88%, 1100px);

    text-align: center;

    opacity: 0;
    visibility: hidden;

    transform:
        translate(-50%, calc(-50% + 32px))
        scale(0.97);

    filter: blur(6px);

    transition:
        opacity 900ms ease,
        visibility 900ms ease,
        transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
        filter 900ms ease;
}

.intro-scene-copy.is-visible {
    opacity: 1;
    visibility: visible;

    transform:
        translate(-50%, -50%)
        scale(1);

    filter: blur(0);
}

.intro-scene-copy.is-leaving {
    opacity: 0;

    transform:
        translate(-50%, calc(-50% - 28px))
        scale(1.025);

    filter: blur(8px);
}


.intro-scene-copy h2 {
    margin: 0;

    color: var(--intro-white);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(2.6rem, 7vw, 7.1rem);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: -0.065em;
}

.intro-scene-copy h2 span {
    display: block;

    margin-top: 7px;

    color: var(--intro-light-pink);

    font-style: italic;

    text-shadow:
        0 0 35px rgba(239, 76, 152, 0.25);
}

.intro-scene-two h2 {
    font-size: clamp(2.4rem, 7vw, 6.5rem);
}


/* ================================
   TELSİZ FREKANSI
================================ */

.radio-frequency {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: min(90%, 470px);

    margin: 38px auto 0;

    opacity: 0;
    transform: translateY(15px);

    transition:
        opacity 1s ease 450ms,
        transform 1s ease 450ms;
}

.intro-scene-two.is-visible .radio-frequency {
    opacity: 1;
    transform: translateY(0);
}

.radio-frequency-line {
    display: block;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(234, 79, 150, 0.55),
            rgba(255, 171, 210, 0.85),
            rgba(234, 79, 150, 0.55),
            transparent
        );

    box-shadow:
        0 0 14px rgba(235, 76, 151, 0.24);
}

.radio-wave {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    height: 32px;
    margin-top: 12px;
}

.radio-wave i {
    display: block;

    width: 2px;
    height: 5px;

    border-radius: 999px;

    background: #ee72a9;

    box-shadow:
        0 0 8px rgba(239, 91, 157, 0.65);

    animation:
        radioWaveMovement 720ms ease-in-out infinite alternate;
}

.radio-wave i:nth-child(2) {
    animation-delay: -100ms;
}

.radio-wave i:nth-child(3) {
    animation-delay: -480ms;
}

.radio-wave i:nth-child(4) {
    animation-delay: -250ms;
}

.radio-wave i:nth-child(5) {
    animation-delay: -600ms;
}

.radio-wave i:nth-child(6) {
    animation-delay: -180ms;
}

.radio-wave i:nth-child(7) {
    animation-delay: -520ms;
}

.radio-wave i:nth-child(8) {
    animation-delay: -330ms;
}

.radio-wave i:nth-child(9) {
    animation-delay: -680ms;
}

.radio-wave i:nth-child(10) {
    animation-delay: -230ms;
}

.radio-wave i:nth-child(11) {
    animation-delay: -420ms;
}

.radio-frequency-text {
    margin-top: 3px;

    color: #985d78;

    font-family:
        "Courier New",
        monospace;

    font-size: 0.65rem;
    letter-spacing: 0.22em;
}


/* ================================
   TEKRAR OYNAT
================================ */

.intro-replay-button {
    position: absolute;
    z-index: 10;
    left: 50%;
    bottom: 34px;

    display: flex;
    align-items: center;
    gap: 9px;

    padding: 12px 18px;

    border: 1px solid rgba(239, 102, 164, 0.22);
    border-radius: 999px;

    background: rgba(18, 11, 20, 0.5);
    color: #a88d9a;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    font-family: inherit;
    font-size: 0.75rem;
    letter-spacing: 0.05em;

    cursor: pointer;

    opacity: 0;
    visibility: hidden;

    transform:
        translate(-50%, 12px);

    transition:
        opacity 500ms ease,
        visibility 500ms ease,
        transform 500ms ease,
        color 200ms ease,
        border-color 200ms ease;
}

.intro-replay-button.is-visible {
    opacity: 1;
    visibility: visible;

    transform:
        translate(-50%, 0);
}

.intro-replay-button:hover {
    border-color: rgba(242, 113, 171, 0.58);
    color: #f09abe;
}

.intro-replay-button span {
    font-size: 1rem;
}

/* ================================
   TELSİZ SAHNESİ
================================ */

.intro-scene-radio,
.intro-scene-question {
    position: absolute;
    z-index: 6;
    top: 50%;
    left: 50%;

    width: min(90%, 1100px);

    opacity: 0;
    visibility: hidden;

    transform: translate(-50%, calc(-50% + 28px)) scale(0.97);
    filter: blur(6px);

    transition:
        opacity 850ms ease,
        visibility 850ms ease,
        transform 1s cubic-bezier(0.22, 1, 0.36, 1),
        filter 850ms ease;
}

.intro-scene-radio.is-visible,
.intro-scene-question.is-visible {
    opacity: 1;
    visibility: visible;

    transform: translate(-50%, -50%) scale(1);
    filter: blur(0);
}

.intro-scene-radio.is-leaving,
.intro-scene-question.is-leaving {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 24px)) scale(1.02);
    filter: blur(8px);
}


/* ================================
   TELSİZ KARTI
================================ */

.radio-ui-card {
    position: relative;

    width: min(100%, 720px);
    margin: 0 auto;
    padding: 34px 32px 30px;

    border: 1px solid rgba(243, 101, 164, 0.26);
    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            rgba(26, 10, 22, 0.86),
            rgba(13, 8, 19, 0.84)
        );

    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.42),
        0 0 45px rgba(229, 63, 138, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    overflow: hidden;
}

.radio-ui-card::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            120deg,
            rgba(255, 255, 255, 0.03),
            transparent 35%,
            transparent 65%,
            rgba(255, 255, 255, 0.025)
        );

    pointer-events: none;
}

.radio-ui-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.radio-ui-label,
.radio-ui-frequency-label {
    color: #9e7788;

    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.radio-ui-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: #f1d7e3;
    font-size: 0.76rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.radio-status-dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #ff5ca6;

    box-shadow:
        0 0 10px rgba(255, 92, 166, 0.85),
        0 0 24px rgba(255, 92, 166, 0.45);

    animation: radioDotBlink 1.2s ease-in-out infinite;
}

.radio-ui-center {
    margin-top: 42px;

    text-align: center;
}

.radio-ui-frequency {
    margin: 8px 0 0;

    color: #fff7fb;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(4.5rem, 12vw, 7.5rem);
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: -0.08em;

    text-shadow:
        0 0 28px rgba(255, 155, 203, 0.14);
}

.radio-ui-noise {
    margin-top: 18px;

    color: #ef86b5;

    font-family: "Courier New", monospace;
    font-size: clamp(0.95rem, 2vw, 1.2rem);
    letter-spacing: 0.12em;
    text-transform: lowercase;

    opacity: 0.85;
}

.radio-ui-wave-block {
    margin-top: 38px;
}

.large-wave {
    gap: 7px;
    height: 56px;
}

.large-wave i {
    width: 4px;
    min-height: 8px;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            #ffb6d4,
            #ee5e9c
        );

    box-shadow:
        0 0 10px rgba(239, 85, 155, 0.55);

    animation: largeRadioWave 850ms ease-in-out infinite alternate;
}

.large-wave i:nth-child(1)  { animation-delay: -0.05s; }
.large-wave i:nth-child(2)  { animation-delay: -0.16s; }
.large-wave i:nth-child(3)  { animation-delay: -0.29s; }
.large-wave i:nth-child(4)  { animation-delay: -0.09s; }
.large-wave i:nth-child(5)  { animation-delay: -0.37s; }
.large-wave i:nth-child(6)  { animation-delay: -0.15s; }
.large-wave i:nth-child(7)  { animation-delay: -0.31s; }
.large-wave i:nth-child(8)  { animation-delay: -0.11s; }
.large-wave i:nth-child(9)  { animation-delay: -0.43s; }
.large-wave i:nth-child(10) { animation-delay: -0.2s; }
.large-wave i:nth-child(11) { animation-delay: -0.33s; }
.large-wave i:nth-child(12) { animation-delay: -0.14s; }
.large-wave i:nth-child(13) { animation-delay: -0.39s; }
.large-wave i:nth-child(14) { animation-delay: -0.17s; }
.large-wave i:nth-child(15) { animation-delay: -0.28s; }


/* ================================
   BÜYÜK SORU SAHNESİ
================================ */

.intro-scene-question {
    text-align: center;
}

.intro-question-text {
    margin: 0;

    color: #fff8fb;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3.6rem, 11vw, 9rem);
    font-weight: 400;
    line-height: 0.92;
    letter-spacing: -0.085em;

    text-shadow:
        0 0 40px rgba(255, 164, 210, 0.12);
}

.intro-question-text .letter {
    display: inline-block;

    opacity: 0;

    transform:
        translateY(28px)
        scale(0.72)
        rotate(-4deg);

    filter: blur(10px);

    transition:
        opacity 160ms ease,
        transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
        filter 240ms ease;

    will-change:
        opacity,
        transform,
        filter;
}

.intro-question-text .letter.is-visible {
    opacity: 1;

    transform:
        translateY(0)
        scale(1)
        rotate(0);

    filter: blur(0);
}

.intro-question-text .letter.is-accent-beat {
    animation:
        questionBeatImpact 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes questionBeatImpact {
    0% {
        transform: scale(0.76);
    }

    55% {
        transform: scale(1.13);
    }

    100% {
        transform: scale(1);
    }
}

.intro-question-text .space {
    display: inline-block;
    width: 0.32em;
}

.intro-question-text .accent {
    color: #f38ab9;

    text-shadow:
        0 0 25px rgba(239, 98, 164, 0.22);
}


/* ================================
   SAHNE 2 GELİNCE ŞEKİLLER HAREKETLENSİN
================================ */

.cinematic-intro.has-radio .intro-shape-one {
    animation: wrappedShapeOne 8s ease-in-out infinite alternate;
}

.cinematic-intro.has-radio .intro-shape-two {
    animation: wrappedShapeTwo 10s ease-in-out infinite alternate;
}

.cinematic-intro.has-radio .intro-shape-three {
    animation: wrappedShapeThree 7s ease-in-out infinite alternate;
}

.story-placeholder {
    z-index: 100;
    pointer-events: auto;
    cursor: pointer;
}

.story-placeholder-content {
    pointer-events: none;
}

/* ================================
   SESSİZLİK SAHNESİ
================================ */

.intro-scene-silence {
    position: absolute;
    z-index: 6;
    top: 50%;
    left: 50%;

    width: min(90%, 1000px);

    text-align: center;

    opacity: 0;
    visibility: hidden;

    transform: translate(-50%, calc(-50% + 28px)) scale(0.97);
    filter: blur(6px);

    transition:
        opacity 850ms ease,
        visibility 850ms ease,
        transform 1s cubic-bezier(0.22, 1, 0.36, 1),
        filter 850ms ease;
}

.intro-scene-silence.is-visible {
    opacity: 1;
    visibility: visible;

    transform: translate(-50%, -50%) scale(1);
    filter: blur(0);
}

.intro-scene-silence.is-leaving {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 24px)) scale(1.02);
    filter: blur(8px);
}


/* ================================
   DÜMDÜZ SES DALGASI
================================ */

.silence-wave-block {
    display: flex;
    justify-content: center;

    margin-bottom: 34px;
}

.silence-wave {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 0 16px;
}

.silence-wave i {
    display: block;

    width: 4px;
    height: 8px;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 189, 221, 0.85),
            rgba(236, 91, 157, 0.82)
        );

    box-shadow:
        0 0 10px rgba(238, 86, 156, 0.28);

    opacity: 0.78;
}

.silence-wave i:nth-child(4),
.silence-wave i:nth-child(7),
.silence-wave i:nth-child(10) {
    height: 9px;
}

.silence-wave i:nth-child(2),
.silence-wave i:nth-child(6),
.silence-wave i:nth-child(11) {
    height: 7px;
}


/* ================================
   METİNLER
================================ */

.silence-copy {
    max-width: 820px;
    margin: 0 auto;
}

.silence-title {
    margin: 0;

    color: #fff8fb;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3rem, 8vw, 6.6rem);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.07em;

    text-shadow:
        0 0 32px rgba(255, 175, 213, 0.12);
}

.silence-secondary {
    max-width: 670px;
    margin: 26px auto 0;

    color: #ef9fc3;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.15rem, 2.8vw, 1.85rem);
    line-height: 1.6;

    opacity: 0;
    transform: translateY(18px);
    filter: blur(8px);

    transition:
        opacity 900ms ease,
        transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 900ms ease;
}

.silence-secondary.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* ================================
   FOTOĞRAF SAHNESİ
================================ */

.intro-scene-photo {
    position: absolute;
    inset: 0;
    z-index: 7;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 50px 24px;

    opacity: 0;
    visibility: hidden;

    transform: scale(1.02);
    filter: blur(8px);

    transition:
        opacity 1000ms ease,
        visibility 1000ms ease,
        transform 1200ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 1000ms ease;
}

.intro-scene-photo.is-visible {
    opacity: 1;
    visibility: visible;

    transform: scale(1);
    filter: blur(0);
}

.intro-scene-photo.is-leaving {
    opacity: 0;
    transform: scale(1.03);
    filter: blur(8px);
}


/* ================================
   ARKA PLAN FOTOĞRAF
================================ */

.photo-scene-backdrop {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.photo-scene-backdrop::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(5, 4, 10, 0.58),
            rgba(9, 5, 14, 0.75)
        );
}

.photo-scene-backdrop-image {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transform: scale(1.12);
    filter: blur(24px) brightness(0.72);
}


/* ================================
   FOTOĞRAF İÇERİĞİ
================================ */

.photo-scene-content {
    position: relative;
    z-index: 3;

    display: grid;
    grid-template-columns: minmax(360px, 680px) minmax(280px, 500px);
    align-items: center;
    gap: clamp(38px, 4vw, 62px);

    width: min(1380px, 100%);
}

.photo-scene-card {
    position: relative;

    border-radius: 28px;
    overflow: hidden;

    border: 1px solid rgba(255, 186, 216, 0.22);

    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.45),
        0 0 40px rgba(238, 84, 155, 0.08);

    background: rgba(20, 11, 20, 0.65);

    transform: scale(0.96);
    opacity: 0;

    transition:
        transform 1200ms cubic-bezier(0.22, 1, 0.36, 1) 180ms,
        opacity 900ms ease 180ms;
}

.intro-scene-photo.is-visible .photo-scene-card {
    transform: scale(1);
    opacity: 1;
}

.photo-scene-main-image {
    display: block;
    width: 100%;
    height: auto;
}


/* ================================
   FOTOĞRAF YAZILARI
================================ */

.photo-scene-copy {
    opacity: 0;
    transform: translateY(26px);

    transition:
        opacity 1000ms ease 320ms,
        transform 1000ms cubic-bezier(0.22, 1, 0.36, 1) 320ms;
}

.intro-scene-photo.is-visible .photo-scene-copy {
    opacity: 1;
    transform: translateY(0);
}

.photo-scene-title {
    margin: 0;

    color: #fff8fb;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.3rem, 5vw, 4.6rem);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.055em;
}

.photo-scene-title span {
    display: block;

    margin-top: 8px;

    color: #f08eb9;

    font-style: italic;

    text-shadow:
        0 0 25px rgba(240, 98, 167, 0.22);
}

.photo-scene-description {
    max-width: 470px;
    margin-top: 24px;

    color: #e4c7d3;

    font-size: clamp(1rem, 2vw, 1.2rem);
    line-height: 1.75;
}

.intro-scene-connection {
    position: absolute;
    z-index: 7;
    top: 50%;
    left: 50%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: min(92%, 1100px);
    min-height: 520px;

    text-align: center;

    opacity: 0;
    visibility: hidden;

    transform:
        translate(-50%, calc(-50% + 30px))
        scale(0.97);

    filter: blur(7px);

    transition:
        opacity 900ms ease,
        visibility 900ms ease,
        transform 1100ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 900ms ease;
}

.intro-scene-connection.is-visible {
    opacity: 1;
    visibility: visible;

    transform:
        translate(-50%, -50%)
        scale(1);

    filter: blur(0);
}

.intro-scene-connection.is-leaving {
    opacity: 0;

    transform:
        translate(-50%, calc(-50% - 24px))
        scale(1.025);

    filter: blur(8px);
}


/* ================================
   EGE — ÇİZGİ — KUMSAL
================================ */

.connection-network {
    display: grid;
    grid-template-columns:
        minmax(100px, 145px)
        minmax(240px, 620px)
        minmax(100px, 145px);

    align-items: center;

    width: 100%;
    margin-bottom: 55px;
}

.connection-person {
    display: flex;
    align-items: center;
    gap: 13px;

    opacity: 0;
    transform: translateY(14px);

    transition:
        opacity 700ms ease 250ms,
        transform 800ms cubic-bezier(0.22, 1, 0.36, 1) 250ms;
}

.intro-scene-connection.is-visible
.connection-person {
    opacity: 1;
    transform: translateY(0);
}

.connection-person-left {
    justify-content: flex-end;
}

.connection-person-right {
    justify-content: flex-start;
}

.connection-name {
    color: #d8beca;

    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.28em;
}

.connection-dot {
    position: relative;

    display: block;

    width: 14px;
    height: 14px;

    flex-shrink: 0;

    border: 2px solid #f58ab9;
    border-radius: 50%;

    background: #180c15;

    box-shadow:
        0 0 12px rgba(241, 99, 166, 0.55),
        0 0 25px rgba(241, 99, 166, 0.16);

    transition:
        background 700ms ease,
        box-shadow 700ms ease,
        transform 700ms ease;
}

.connection-dot::after {
    content: "";

    position: absolute;
    inset: 3px;

    border-radius: 50%;

    background: #f58ab9;

    opacity: 0.45;
}


/* ================================
   BAĞLANTI ÇİZGİSİ
================================ */

.connection-path {
    position: relative;

    width: 100%;
    height: 80px;
}

.connection-path svg {
    display: block;

    width: 100%;
    height: 100%;

    overflow: visible;
}

.connection-wave-path,
.connection-bond-path {
    fill: none;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.connection-wave-path {
    stroke: rgba(238, 104, 166, 0.72);
    stroke-width: 2.2;

    stroke-dasharray: 10 9;

    filter:
        drop-shadow(
            0 0 7px rgba(237, 82, 154, 0.62)
        );

    animation:
        connectionSignalTravel 650ms linear infinite,
        connectionSignalJitter 480ms ease-in-out infinite alternate;

    transition:
        opacity 650ms ease,
        filter 650ms ease;
}

.connection-bond-path {
    stroke: #ff8fbd;
    stroke-width: 3;

    stroke-dasharray: 600;
    stroke-dashoffset: 600;

    opacity: 0;

    filter:
        drop-shadow(
            0 0 8px rgba(255, 109, 177, 0.85)
        )
        drop-shadow(
            0 0 20px rgba(237, 68, 146, 0.4)
        );
}


/* ================================
   HAREKET EDEN SİNYAL NOKTASI
================================ */

.connection-signal-dot {
    position: absolute;
    top: 50%;
    left: 0;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #ffc0da;

    box-shadow:
        0 0 9px #ff9bc4,
        0 0 23px rgba(238, 73, 149, 0.9);

    transform: translate(-50%, -50%);

    animation:
        connectionDotTravel 1800ms ease-in-out infinite alternate;

    transition:
        opacity 500ms ease;
}


/* ================================
   BAĞ OLUŞTUĞUNDA
================================ */

.intro-scene-connection.is-linked
.connection-wave-path {
    opacity: 0;

    filter: blur(5px);
}

.intro-scene-connection.is-linked
.connection-bond-path {
    opacity: 1;

    animation:
        connectionBondDraw 1200ms cubic-bezier(0.22, 1, 0.36, 1)
        forwards;
}

.intro-scene-connection.is-linked
.connection-signal-dot {
    opacity: 0;
}

.intro-scene-connection.is-linked
.connection-dot {
    background: #f172a9;

    transform: scale(1.15);

    box-shadow:
        0 0 12px rgba(255, 142, 190, 0.95),
        0 0 32px rgba(237, 72, 148, 0.58);
}

.intro-scene-connection.is-linked
.connection-dot::after {
    background: #fff4fa;
    opacity: 1;
}


/* ================================
   BÜYÜK YAZILAR
================================ */

.connection-phrases {
    position: relative;

    width: min(100%, 930px);
    min-height: 180px;
}

.connection-phrase {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 100%;
    margin: 0;

    color: #fff8fb;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(3.5rem, 9vw, 8rem);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.075em;

    opacity: 0;
    visibility: hidden;

    transform:
        translate(-50%, calc(-50% + 28px))
        scale(0.88);

    filter: blur(10px);

    transition:
        opacity 600ms ease,
        visibility 600ms ease,
        transform 750ms cubic-bezier(0.16, 1, 0.3, 1),
        filter 600ms ease;
}

.connection-phrase span {
    color: #f18ab7;

    font-style: italic;

    text-shadow:
        0 0 28px rgba(239, 90, 157, 0.27);
}

.connection-phrase.is-active {
    opacity: 1;
    visibility: visible;

    transform:
        translate(-50%, -50%)
        scale(1);

    filter: blur(0);
}

.connection-phrase.is-leaving {
    opacity: 0;

    transform:
        translate(-50%, calc(-50% - 26px))
        scale(1.08);

    filter: blur(9px);
}

.connection-phrase-final {
    max-width: 950px;

    font-size: clamp(2.8rem, 7vw, 6.5rem);
    line-height: 1;
}

.connection-phrase-final span {
    display: block;

    margin-top: 7px;
}

/* ================================
   FİNAL SAHNESİ
================================ */

.intro-scene-final {
    position: absolute;
    inset: 0;
    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 40px 20px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(211, 55, 127, 0.09),
            transparent 38%
        ),
        #020204;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 1400ms ease,
        visibility 1400ms ease;
}

.intro-scene-final.is-visible {
    opacity: 1;
    visibility: visible;
}

.intro-scene-final.show-button {
    pointer-events: auto;
}

.intro-scene-final.is-leaving {
    opacity: 0;
    visibility: hidden;
}


/* ================================
   FİNAL ARKA PLAN IŞIĞI
================================ */

.final-scene-glow {
    position: absolute;
    top: 50%;
    left: 50%;

    width: min(70vw, 700px);
    height: min(70vw, 700px);

    border-radius: 50%;

    background:
        rgba(220, 61, 136, 0.16);

    filter: blur(150px);

    opacity: 0.25;

    transform:
        translate(-50%, -50%)
        scale(0.75);

    transition:
        opacity 2s ease,
        transform 3s ease;
}

.intro-scene-final.is-visible
.final-scene-glow {
    opacity: 0.55;

    transform:
        translate(-50%, -50%)
        scale(1);
}


/* ================================
   FİNAL İÇERİĞİ
================================ */

.final-scene-content {
    position: relative;
    z-index: 2;

    width: min(94%, 950px);
    min-height: 520px;

    text-align: center;
}


/* ================================
   TARİH
================================ */

.final-date {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 100%;
    margin: 0;

    color: #fff8fb;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(3.5rem, 10vw, 8rem);
    font-weight: 400;
    letter-spacing: -0.055em;

    text-shadow:
        0 0 34px rgba(255, 149, 199, 0.15);

    opacity: 0;
    filter: blur(10px);

    transform:
        translate(-50%, -50%)
        scale(0.88);

    transition:
        opacity 1100ms ease 300ms,
        transform 1300ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 1000ms ease,
        color 800ms ease,
        letter-spacing 1000ms ease;
}

.intro-scene-final.is-visible
.final-date {
    opacity: 1;
    filter: blur(0);

    transform:
        translate(-50%, -50%)
        scale(1);
}

.intro-scene-final.show-message
.final-date {
    color: #dc759f;

    font-size: clamp(0.9rem, 2vw, 1.25rem);
    letter-spacing: 0.28em;

    transform:
        translate(-50%, -185px)
        scale(1);
}


/* ================================
   FİNAL CÜMLESİ
================================ */

.final-story-message {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 100%;

    opacity: 0;
    visibility: hidden;

    filter: blur(12px);

    transform:
        translate(-50%, calc(-50% + 40px))
        scale(0.93);

    transition:
        opacity 1100ms ease,
        visibility 1100ms ease,
        transform 1300ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 1000ms ease;
}

.intro-scene-final.show-message
.final-story-message {
    opacity: 1;
    visibility: visible;

    filter: blur(0);

    transform:
        translate(-50%, -50%)
        scale(1);
}

.final-story-message h2 {
    margin: 0;

    color: #fff8fb;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(2.8rem, 8vw, 6.8rem);
    font-weight: 400;
    line-height: 0.97;
    letter-spacing: -0.065em;

    text-shadow:
        0 0 36px rgba(255, 172, 211, 0.12);
}

.final-story-message h2 span {
    display: block;

    margin-top: 7px;

    color: #ef8ab7;
    font-style: italic;

    text-shadow:
        0 0 28px rgba(239, 91, 158, 0.25);
}


/* ================================
   DEVAM ET BUTONU
================================ */

.final-continue-button {
    position: absolute;
    left: 50%;
    bottom: 25px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    min-width: 190px;
    height: 58px;

    padding: 0 31px;

    border: 1px solid rgba(255, 174, 210, 0.38);
    border-radius: 999px;

    background:
        linear-gradient(
            110deg,
            rgba(143, 39, 88, 0.95),
            rgba(210, 68, 132, 0.95),
            rgba(239, 121, 170, 0.95)
        );

    color: #fff8fb;

    box-shadow:
        0 15px 38px rgba(202, 54, 122, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.1rem;

    cursor: pointer;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform:
        translate(-50%, 20px)
        scale(0.94);

    transition:
        opacity 800ms ease,
        visibility 800ms ease,
        transform 850ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 220ms ease,
        filter 220ms ease;
}

.intro-scene-final.show-button
.final-continue-button {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform:
        translate(-50%, 0)
        scale(1);
}

.final-continue-button:hover {
    filter: brightness(1.08);

    box-shadow:
        0 19px 44px rgba(211, 63, 130, 0.36),
        0 0 28px rgba(239, 93, 157, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.final-continue-button:active {
    transform:
        translate(-50%, 2px)
        scale(0.98);
}

.final-continue-button:focus-visible {
    outline: 2px solid #ffb6d3;
    outline-offset: 5px;
}

.final-button-heart {
    display: inline-block;

    font-size: 1.25rem;

    transition: transform 250ms ease;
}

.final-continue-button:hover
.final-button-heart {
    transform:
        scale(1.2)
        rotate(8deg);
}


/* ================================
   ASIL HİKÂYE GEÇİCİ EKRANI
================================ */

.main-story-screen {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 100dvh;

    background:
        radial-gradient(
            circle at center,
            rgba(211, 55, 126, 0.14),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #08060d,
            #120816
        );

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 1100ms ease,
        visibility 1100ms ease;
}

.main-story-screen.is-visible {
    opacity: 1;
    visibility: visible;
}

.main-story-placeholder {
    padding: 30px;

    text-align: center;
}

.main-story-placeholder p {
    margin-bottom: 14px;

    color: #d26b99;

    font-size: 0.75rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.main-story-placeholder h2 {
    margin: 0;

    color: #fff8fb;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(2.7rem, 8vw, 6rem);
    font-weight: 400;
}

.main-story-heart {
    display: block;

    margin-top: 25px;

    color: #ef83b2;

    font-size: 3rem;

    text-shadow:
        0 0 24px rgba(238, 78, 151, 0.55);
}

/* ================================
   ANİMASYONLAR
================================ */

@keyframes storyHintPulse {
    0%,
    100% {
        opacity: 0.45;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

@keyframes introGrainMovement {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(2%, -3%);
    }

    50% {
        transform: translate(-3%, 2%);
    }

    75% {
        transform: translate(3%, 4%);
    }

    100% {
        transform: translate(-2%, -2%);
    }
}

@keyframes radioWaveMovement {
    from {
        height: 4px;
        opacity: 0.38;
    }

    to {
        height: 27px;
        opacity: 1;
    }
}

@keyframes radioDotBlink {
    0%,
    100% {
        opacity: 0.5;
        transform: scale(0.95);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

@keyframes largeRadioWave {
    from {
        height: 10px;
        opacity: 0.35;
    }

    to {
        height: 52px;
        opacity: 1;
    }
}

@keyframes wrappedShapeOne {
    from {
        transform: scale(1) rotate(8deg) translate(0, 0);
    }

    to {
        transform: scale(1.08) rotate(22deg) translate(40px, 20px);
    }
}

@keyframes wrappedShapeTwo {
    from {
        transform: scale(1) rotate(-12deg) translate(0, 0);
    }

    to {
        transform: scale(1.06) rotate(8deg) translate(-50px, -18px);
    }
}

@keyframes wrappedShapeThree {
    from {
        transform: translate(-50%, -50%) scale(1);
    }

    to {
        transform: translate(-50%, -50%) scale(1.18);
    }
}

@keyframes connectionSignalTravel {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -38;
    }
}

@keyframes connectionSignalJitter {
    from {
        transform: translateY(-2px);
    }

    to {
        transform: translateY(3px);
    }
}

@keyframes connectionBondDraw {
    from {
        stroke-dashoffset: 600;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes connectionDotTravel {
    from {
        left: 0%;
    }

    to {
        left: 100%;
    }
}

/* ================================
   MOBİL
================================ */

@media (max-width: 600px) {
    .story-placeholder-hint {
        margin-top: 27px;

        font-size: 0.64rem;
    }

    .intro-scene-copy {
        width: 91%;
    }

    .intro-scene-copy h2 {
        line-height: 1.05;
    }

    .radio-frequency {
        width: min(88%, 330px);

        margin-top: 30px;
    }

    .intro-shape-one {
        width: 130vw;
        height: 130vw;
    }

    .intro-shape-two {
        width: 150vw;
        height: 150vw;
    }

    .intro-shape-three {
        width: 75vw;
        height: 75vw;
    }

    .intro-replay-button {
        bottom: 22px;
    }

    .radio-ui-card {
        padding: 24px 18px 22px;
        border-radius: 22px;
    }

    .radio-ui-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .radio-ui-center {
        margin-top: 26px;
    }

    .radio-ui-noise {
        margin-top: 14px;
        font-size: 0.88rem;
    }

    .radio-ui-wave-block {
        margin-top: 28px;
    }

    .large-wave {
        gap: 5px;
        height: 44px;
    }

    .large-wave i {
        width: 3px;
    }

    .silence-wave-block {
        margin-bottom: 24px;
    }

    .silence-wave {
        gap: 5px;
        padding: 0 6px;
    }

    .silence-wave i {
        width: 3px;
        height: 7px;
    }

    .silence-secondary {
        margin-top: 18px;
    }

        .photo-scene-content {
        grid-template-columns: 1fr;
        gap: 24px;
        text-align: center;
    }

    .photo-scene-description {
        margin-left: auto;
        margin-right: auto;
    }

    intro-scene-connection {
        width: 94%;
        min-height: 450px;
    }

    .connection-network {
        grid-template-columns:
            minmax(70px, 95px)
            minmax(130px, 1fr)
            minmax(70px, 95px);

        margin-bottom: 35px;
    }

    .connection-person {
        gap: 7px;
    }

    .connection-name {
        font-size: 0.61rem;
        letter-spacing: 0.15em;
    }

    .connection-dot {
        width: 11px;
        height: 11px;
    }

    .connection-path {
        height: 58px;
    }

    .connection-phrases {
        min-height: 150px;
    }

    .connection-phrase {
        line-height: 1;
    }

     .final-scene-content {
        min-height: 450px;
    }

    .intro-scene-final.show-message
    .final-date {
        transform:
            translate(-50%, -145px);
    }

    .final-story-message h2 {
        line-height: 1.02;
    }

    .final-continue-button {
        bottom: 12px;

        min-width: 175px;
        height: 55px;
    }
}


/* ================================
   HAREKET AZALTMA TERCİHİ
================================ */

@media (prefers-reduced-motion: reduce) {
    .intro-grain,
    .radio-wave i,
    .story-placeholder-hint {
        animation: none;
    }
}

/* ================================
   TANIŞTIĞIMIZ GÜN TIKLAMA EKRANI
================================ */

.main-story-screen {
    cursor: pointer;
    overflow: hidden;
}

.main-story-screen:focus-visible {
    outline: 2px solid rgba(255, 148, 196, 0.85);
    outline-offset: -12px;
}

.main-story-placeholder {
    transition:
        opacity 700ms ease,
        transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 700ms ease;
}

.main-story-screen:hover
.main-story-placeholder {
    transform: scale(1.025);
}

.main-story-screen.is-leaving {
    opacity: 0;
    visibility: hidden;
}

.main-story-screen.is-leaving
.main-story-placeholder {
    opacity: 0;
    transform: scale(1.08);
    filter: blur(9px);
}

.main-story-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    margin-top: 31px !important;

    color: #907d88 !important;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.72rem !important;
    font-weight: 400;
    letter-spacing: 0.12em !important;
    line-height: 1;
    text-transform: uppercase;

    animation:
        mainStoryHintPulse 2.2s ease-in-out infinite;
}

.main-story-hint span {
    display: block;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #ee6ca5;

    box-shadow:
        0 0 9px rgba(238, 86, 158, 0.9),
        0 0 19px rgba(238, 86, 158, 0.5);
}


/* ================================
   YENİ MÜZİKLE AÇILAN HİKÂYE ALANI
================================ */

.relationship-story-screen {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 100dvh;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(227, 75, 145, 0.15),
            transparent 37%
        ),
        radial-gradient(
            circle at 12% 85%,
            rgba(109, 48, 139, 0.13),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #07050c,
            #120716
        );

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 1100ms ease,
        visibility 1100ms ease;
}

.relationship-story-screen.is-visible {
    opacity: 1;
    visibility: visible;
}

.relationship-story-placeholder {
    padding: 30px;

    text-align: center;

    opacity: 0;
    transform: translateY(26px) scale(0.98);

    transition:
        opacity 1100ms ease 180ms,
        transform 1200ms cubic-bezier(0.22, 1, 0.36, 1) 180ms;
}

.relationship-story-screen.is-visible
.relationship-story-placeholder {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.relationship-story-placeholder p {
    margin-bottom: 14px;

    color: #d26b99;

    font-size: 0.75rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.relationship-story-placeholder h2 {
    margin: 0;

    color: #fff8fb;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(2.7rem, 8vw, 6rem);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.055em;
}

.relationship-story-placeholder > span {
    display: block;

    margin-top: 25px;

    color: #ef83b2;

    font-size: 3rem;

    text-shadow:
        0 0 24px rgba(238, 78, 151, 0.55);
}

@keyframes mainStoryHintPulse {
    0%,
    100% {
        opacity: 0.45;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

@media (max-width: 600px) {
    .main-story-hint {
        margin-top: 27px !important;
        font-size: 0.63rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .main-story-hint {
        animation: none;
    }
}


/* ================================
   ANA HİKÂYE HERO — BUGÜNKÜ BİZ
================================ */

.relationship-story-screen {
    display: block;
    min-height: 200dvh;
    overflow: visible;
    background: #050309;
}

.story-hero {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 100dvh;
    padding: 80px clamp(24px, 7vw, 110px) 130px;

    overflow: hidden;
    isolation: isolate;

    background: #07050a;
}

.story-hero-media,
.story-hero-overlay,
.story-hero-vignette,
.story-hero-grain {
    position: absolute;
    inset: 0;
}

.story-hero-media {
    z-index: 0;
    overflow: hidden;
    background: #07050a;
}

.story-hero-video {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: 50% center;

    transform: scale(1.035);
    filter:
        saturate(0.88)
        contrast(1.04)
        brightness(0.84);

    animation:
        storyHeroVideoBreath
        11s ease-in-out infinite alternate;
}

.story-hero-overlay {
    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(4, 3, 7, 0.92) 0%,
            rgba(5, 3, 8, 0.73) 34%,
            rgba(5, 3, 8, 0.28) 65%,
            rgba(5, 3, 8, 0.5) 100%
        ),
        linear-gradient(
            180deg,
            rgba(4, 3, 7, 0.2) 0%,
            rgba(4, 3, 7, 0.06) 48%,
            rgba(4, 3, 7, 0.82) 100%
        );
}

.story-hero-vignette {
    z-index: 2;

    background:
        radial-gradient(
            circle at 54% 43%,
            transparent 10%,
            rgba(4, 2, 7, 0.18) 56%,
            rgba(4, 2, 7, 0.76) 116%
        ),
        radial-gradient(
            circle at 24% 56%,
            rgba(223, 66, 137, 0.17),
            transparent 38%
        );

    pointer-events: none;
}

.story-hero-grain {
    z-index: 3;
    inset: -50%;

    width: 200%;
    height: 200%;

    opacity: 0.045;
    pointer-events: none;

    background-image:
        repeating-radial-gradient(
            circle at 30% 40%,
            rgba(255, 255, 255, 0.72) 0 1px,
            transparent 1px 5px
        );

    background-size: 9px 9px;

    animation:
        storyHeroGrainMove
        420ms steps(2) infinite;
}

.story-hero-content {
    position: relative;
    z-index: 4;

    width: min(980px, 92%);
    margin: 0 auto;
    text-align: center;

    opacity: 0;
    transform: translateY(34px);
    filter: blur(8px);
}

.relationship-story-screen.is-visible
.story-hero-content {
    animation:
        storyHeroContentEntrance
        1500ms cubic-bezier(0.22, 1, 0.36, 1)
        380ms forwards;
}

.story-hero-kicker {
    margin: 0 0 18px;

    color: #f08ab7;

    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.42em;
    text-transform: uppercase;

    text-shadow:
        0 0 18px rgba(238, 91, 157, 0.25);
}

.story-hero-title {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.12em;

    margin: 0;

    color: #fff8fb;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(4rem, 10vw, 8.7rem);
    font-weight: 400;
    line-height: 0.86;
    letter-spacing: -0.075em;

    text-shadow:
        0 8px 34px rgba(0, 0, 0, 0.58),
        0 0 36px rgba(255, 161, 204, 0.1);
}

.story-hero-title span {
    display: inline-block;
}

.story-hero-title i {
    color: #ef7fb0;

    font-size: 0.69em;
    font-weight: 400;
    font-style: italic;

    text-shadow:
        0 0 28px rgba(238, 89, 157, 0.4);
}

.story-hero-description {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;

    max-width: 760px;
    margin: 31px auto 0;

    color: rgba(255, 241, 248, 0.82);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(1rem, 2vw, 1.27rem);
    line-height: 1.65;

    text-shadow:
        0 3px 16px rgba(0, 0, 0, 0.46);
}

.story-hero-description strong {
    color: #ffb0d0;
    font-weight: 400;
}

.story-hero-description > span {
    color: rgba(239, 113, 172, 0.75);
}

.story-day-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;

    margin: 34px auto 0;
    padding: 14px 22px;

    border: 1px solid rgba(255, 176, 212, 0.28);
    border-radius: 999px;

    background: rgba(13, 7, 14, 0.48);

    box-shadow:
        0 15px 45px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.story-day-counter p {
    margin: 0;

    color: #dfccd5;

    font-size: 0.84rem;
    letter-spacing: 0.06em;
}

.story-day-counter strong {
    margin: 0 4px;

    color: #fff7fb;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.18rem;
    font-weight: 400;
}

.story-day-counter > span {
    color: #ef7faf;

    font-size: 1rem;

    text-shadow:
        0 0 13px rgba(238, 91, 157, 0.72);
}

.story-scroll-hint {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: 28px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    color: rgba(255, 233, 243, 0.86);

    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;

    transform: translateX(-50%);

    animation:
        storyHeroScrollPulse
        2.2s ease-in-out infinite;
}

.story-scroll-hint i {
    display: block;

    width: 2px;
    height: 56px;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 171, 213, 1),
            rgba(255, 171, 213, 0.08)
        );
}

.story-scroll-hint b {
    font-size: 1.5rem;
    line-height: 1;
    color: #ff8fc1;
    font-weight: 400;
    text-shadow: 0 0 18px rgba(255, 110, 180, 0.45);
}

.story-scroll-hint:focus-visible {
    outline: 2px solid rgba(255, 174, 211, 0.85);
    outline-offset: 8px;
    border-radius: 4px;
}

/* ================================
   SONRAKİ BÖLÜME GEÇİŞ ÖNİZLEMESİ
================================ */

.story-beginning-preview {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 100dvh;
    padding: 80px 24px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(212, 55, 128, 0.13),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #050309,
            #0c0610
        );

    scroll-margin-top: 0;
}

.story-beginning-preview::before {
    content: "";

    position: absolute;
    top: 0;
    left: 50%;

    width: min(70%, 760px);
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(238, 104, 166, 0.48),
            transparent
        );

    transform: translateX(-50%);
}

.story-beginning-preview-content {
    width: min(92%, 760px);
    text-align: center;
}

.story-beginning-preview-content p {
    margin: 0 0 18px;

    color: #d56f9d;

    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.36em;
    text-transform: uppercase;
}

.story-beginning-preview-content > span {
    display: inline-block;

    margin-bottom: 25px;
    padding: 9px 16px;

    border: 1px solid rgba(239, 121, 172, 0.2);
    border-radius: 999px;

    color: #e88bb4;
    background: rgba(21, 10, 20, 0.5);

    font-size: 0.73rem;
    letter-spacing: 0.2em;
}

.story-beginning-preview-content h2 {
    margin: 0;

    color: #fff7fb;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(2.8rem, 7vw, 6.3rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.06em;
}

.story-beginning-preview-content small {
    display: block;

    max-width: 520px;
    margin: 26px auto 0;

    color: #a98f9c;

    font-size: 0.85rem;
    line-height: 1.7;
}

@keyframes storyHeroVideoBreath {
    from {
        transform: scale(1.035);
    }

    to {
        transform: scale(1.075);
    }
}

@keyframes storyHeroContentEntrance {
    from {
        opacity: 0;
        transform: translateY(34px);
        filter: blur(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes storyHeroGrainMove {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-2%, 3%);
    }

    100% {
        transform: translate(3%, -2%);
    }
}

@keyframes storyHeroScrollPulse {
    0%,
    100% {
        opacity: 0.43;
        transform:
            translateX(-50%)
            translateY(0);
    }

    50% {
        opacity: 1;
        transform:
            translateX(-50%)
            translateY(5px);
    }
}

@media (max-width: 760px) {
    .story-hero {
        align-items: flex-end;
        padding:
            80px
            20px
            118px;
    }

    .story-hero-video {
        object-position: 46% center;
        filter:
            saturate(0.82)
            contrast(1.05)
            brightness(0.8);
    }

    .story-hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(4, 3, 7, 0.14) 0%,
                rgba(4, 3, 7, 0.35) 42%,
                rgba(4, 3, 7, 0.94) 100%
            );
    }

    .story-hero-content {
        width: 100%;
        text-align: center;
    }

    .story-hero-title,
    .story-hero-description {
        justify-content: center;
    }

    .story-hero-title {
        font-size: clamp(3.5rem, 18vw, 5.7rem);
        line-height: 0.95;
    }

    .story-hero-description {
        max-width: 340px;
        margin-right: auto;
        margin-left: auto;
    }

    .story-hero-description > span {
        display: none;
    }

    .story-day-counter {
        margin-top: 27px;
        padding: 13px 18px;
    }

    .story-scroll-hint {
        bottom: 22px;
        width: 100%;
        padding: 0 18px;
        font-size: 0.76rem;
    }
}

@media (max-width: 430px) {
    .story-hero-title {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .story-hero-title i {
        margin: -0.04em 0;
    }

    .story-day-counter {
        gap: 9px;
    }

    .story-day-counter p {
        font-size: 0.74rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .story-hero-video,
    .story-hero-grain,
    .story-scroll-hint {
        animation: none;
    }

    .relationship-story-screen.is-visible
    .story-hero-content {
        opacity: 1;
        transform: none;
        filter: none;
        animation: none;
    }
}


/* ================================
   BÖLÜM 01 — İLK DISCORD MESAJI
================================ */

.discord-origin-section {
    min-height: auto;
    padding:
        clamp(90px, 10vw, 150px)
        clamp(20px, 6vw, 86px)
        clamp(105px, 12vw, 170px);

    background:
        radial-gradient(
            circle at 13% 17%,
            rgba(109, 55, 145, 0.17),
            transparent 27%
        ),
        radial-gradient(
            circle at 88% 54%,
            rgba(221, 70, 140, 0.13),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #050309 0%,
            #0a050d 52%,
            #07040a 100%
        );
}

.discord-origin-section::before {
    width: min(76%, 900px);
}

.discord-origin-shell {
    position: relative;
    z-index: 2;

    width: min(1180px, 100%);
    margin: 0 auto;
}

.discord-origin-header {
    width: min(850px, 100%);
    margin: 0 auto 72px;

    text-align: center;
}

.story-section-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    margin: 0 0 22px;

    color: #dc7ba6;

    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
}

.story-section-label span,
.story-section-label time {
    white-space: nowrap;
}

.story-section-label i {
    display: block;

    width: 42px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(244, 128, 181, 0.8),
            transparent
        );
}

.discord-origin-header h2 {
    margin: 0;

    color: #fff7fb;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(3rem, 7.2vw, 6.8rem);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.065em;
}

.discord-origin-header h2 em {
    display: inline-block;

    color: #ef86b5;
    font-weight: 400;
    font-style: italic;

    text-shadow:
        0 0 34px rgba(239, 93, 160, 0.22);
}

.discord-origin-intro {
    max-width: 680px;
    margin: 30px auto 0;

    color: #c7afbb;

    font-size: clamp(1rem, 1.7vw, 1.17rem);
    line-height: 1.85;
}

.discord-origin-grid {
    display: grid;
    grid-template-columns:
        minmax(320px, 1.04fr)
        minmax(290px, 0.86fr);

    align-items: center;
    gap: clamp(42px, 7vw, 92px);
}

.discord-chat-card {
    position: relative;

    margin: 0;
    padding: 12px;

    border: 1px solid rgba(154, 118, 176, 0.24);
    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            rgba(25, 19, 31, 0.94),
            rgba(12, 9, 17, 0.92)
        );

    box-shadow:
        0 34px 90px rgba(0, 0, 0, 0.46),
        0 0 44px rgba(102, 54, 135, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.discord-chat-card::after {
    content: "";

    position: absolute;
    inset: 14% -10% -12% 8%;
    z-index: -1;

    border-radius: 50%;

    background: rgba(206, 58, 126, 0.12);
    filter: blur(70px);
}

.discord-window-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    min-height: 48px;
    padding: 0 12px;
}

.discord-window-bar > div {
    display: flex;
    gap: 7px;
}

.discord-window-bar > div span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #5e5364;
}

.discord-window-bar > div span:nth-child(1) {
    background: #d76b98;
}

.discord-window-bar > div span:nth-child(2) {
    background: #9e6aad;
}

.discord-window-bar > div span:nth-child(3) {
    background: #74667c;
}

.discord-window-bar p {
    margin: 0;

    color: #918494;

    font-size: 0.65rem;
    letter-spacing: 0.17em;
}

.discord-online-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #ed75aa;

    box-shadow:
        0 0 9px rgba(237, 117, 170, 0.8),
        0 0 18px rgba(237, 117, 170, 0.34);
}

.discord-chat-image-frame {
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.045);
    border-radius: 21px;

    background: #0c0910;
}

.discord-chat-image-frame img {
    display: block;

    width: 100%;
    height: auto;
    max-height: 720px;

    object-fit: contain;
    object-position: center;
}

.discord-chat-card figcaption {
    padding: 15px 10px 7px;

    color: #b8a3ae;

    font-size: 0.76rem;
    letter-spacing: 0.09em;
    text-align: center;
}

.discord-memory-column {
    position: relative;
}

.discord-memory-number {
    position: absolute;
    top: -78px;
    right: -8px;
    z-index: -1;

    margin: 0;

    color: rgba(239, 115, 171, 0.08);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(8rem, 18vw, 15rem);
    line-height: 1;
}

.discord-photo-card {
    position: relative;

    width: min(100%, 470px);
    margin: 0 0 34px auto;
    padding: 11px 11px 17px;

    border: 1px solid rgba(255, 191, 219, 0.16);
    border-radius: 26px;

    background: rgba(24, 14, 23, 0.72);

    box-shadow:
        0 26px 72px rgba(0, 0, 0, 0.39),
        0 0 34px rgba(221, 70, 140, 0.08);

    transform: rotate(2.1deg);
}

.discord-photo-card img {
    display: block;

    width: 100%;
    max-height: 450px;

    border-radius: 18px;

    object-fit: cover;
    object-position: center;
}

.discord-photo-card figcaption {
    margin-top: 14px;

    color: #d5bdc9;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 0.93rem;
    font-style: italic;
    text-align: center;
}

.discord-memory-column blockquote {
    position: relative;

    margin: 0;
    padding: 6px 0 6px 29px;

    color: #fff2f8;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(1.7rem, 3.25vw, 2.75rem);
    line-height: 1.23;
    letter-spacing: -0.03em;
}

.discord-memory-column blockquote::before {
    content: "";

    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 0;

    width: 2px;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            #f28aba,
            rgba(242, 138, 186, 0.08)
        );
}

.discord-memory-note {
    margin: 25px 0 0 29px;

    color: #ac96a2;

    font-size: 0.98rem;
    line-height: 1.8;
}

.discord-origin-footer {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: min(680px, 100%);
    margin: 110px auto 0;

    text-align: center;
}

.discord-origin-footer span {
    color: #d4749f;

    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
}

.discord-origin-footer strong {
    margin-top: 13px;

    color: #f7e7ee;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(1.5rem, 3vw, 2.3rem);
    font-weight: 400;
}

.discord-origin-footer small {
    margin-top: 10px;

    color: #88747f;

    font-size: 0.76rem;
    letter-spacing: 0.18em;
}

.discord-origin-footer i {
    margin-top: 22px;

    color: #ee82b2;

    font-size: 1.7rem;
    font-style: normal;

    animation:
        discordFooterArrow
        1.8s ease-in-out infinite;
}

.story-reveal {
    opacity: 0;
    transform: translateY(42px);
    filter: blur(7px);

    transition:
        opacity 900ms ease,
        transform 1100ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 900ms ease;
}

.story-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.discord-origin-grid
.story-reveal:nth-child(2) {
    transition-delay: 120ms;
}

@keyframes discordFooterArrow {
    0%,
    100% {
        opacity: 0.45;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(7px);
    }
}

@media (max-width: 850px) {
    .discord-origin-header {
        margin-bottom: 52px;
    }

    .discord-origin-grid {
        grid-template-columns: 1fr;
        gap: 58px;
    }

    .discord-chat-card {
        width: min(650px, 100%);
        margin: 0 auto;
    }

    .discord-memory-column {
        width: min(620px, 100%);
        margin: 0 auto;
    }

    .discord-photo-card {
        width: min(470px, 92%);
        margin-right: auto;
        margin-left: auto;
    }

    .discord-memory-number {
        right: 3%;
    }

    .discord-memory-column blockquote {
        text-align: left;
    }
}

@media (max-width: 520px) {
    .discord-origin-section {
        padding:
            82px
            16px
            105px;
    }

    .story-section-label {
        gap: 9px;
        letter-spacing: 0.16em;
    }

    .story-section-label i {
        width: 23px;
    }

    .discord-origin-header h2 {
        font-size: clamp(2.7rem, 14vw, 4.5rem);
    }

    .discord-origin-intro {
        font-size: 0.94rem;
        line-height: 1.75;
    }

    .discord-chat-card {
        padding: 8px;
        border-radius: 22px;
    }

    .discord-window-bar {
        min-height: 42px;
        padding: 0 8px;
    }

    .discord-window-bar p {
        font-size: 0.55rem;
        letter-spacing: 0.12em;
    }

    .discord-chat-image-frame {
        border-radius: 16px;
    }

    .discord-photo-card {
        width: 100%;
        transform: rotate(1deg);
    }

    .discord-memory-column blockquote {
        padding-left: 20px;
        font-size: clamp(1.55rem, 8vw, 2.2rem);
    }

    .discord-memory-note {
        margin-left: 20px;
    }

    .discord-origin-footer {
        margin-top: 82px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .story-reveal {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }

    .discord-origin-footer i {
        animation: none;
    }
}


/* ================================
   DISCORD İKİNCİ KONUŞMA GÖRSELİ
================================ */

.discord-second-chat-card {
    padding-top: 0;
    overflow: hidden;
    background:
        linear-gradient(
            145deg,
            rgba(25, 19, 31, 0.96),
            rgba(11, 8, 15, 0.95)
        );
}

.discord-second-chat-label {
    margin: 0 -11px 11px;
    padding: 13px 16px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.045);

    color: #a997a2;
    background: rgba(255, 255, 255, 0.018);

    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-align: center;
    text-transform: uppercase;
}

.discord-second-chat-card img {
    width: 100%;
    max-height: 560px;

    border-radius: 18px;

    object-fit: contain;
    object-position: center;

    background: #070509;
}

@media (max-width: 850px) {
    .discord-second-chat-card {
        width: min(540px, 100%);
    }
}

@media (max-width: 520px) {
    .discord-second-chat-label {
        margin-right: -11px;
        margin-left: -11px;
        padding: 11px 12px;

        font-size: 0.58rem;
    }

    .discord-second-chat-card img {
        max-height: none;
    }
}


/* ================================
   BÖLÜM 01 DEVAMI — İLK WHATSAPP
================================ */

.whatsapp-origin-section {
    position: relative;

    min-height: 100dvh;
    padding:
        clamp(95px, 11vw, 165px)
        clamp(20px, 6vw, 86px)
        clamp(110px, 12vw, 175px);

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #07040a 0%,
            #08060b 45%,
            #050407 100%
        );
}

.whatsapp-origin-section::before {
    content: "";

    position: absolute;
    top: 0;
    left: 50%;

    width: min(76%, 900px);
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(104, 205, 159, 0.34),
            rgba(236, 113, 171, 0.36),
            transparent
        );

    transform: translateX(-50%);
}

.whatsapp-origin-glow {
    position: absolute;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    filter: blur(130px);
    pointer-events: none;
}

.whatsapp-origin-glow-one {
    top: 8%;
    left: -320px;

    background: rgba(61, 171, 116, 0.12);
}

.whatsapp-origin-glow-two {
    right: -330px;
    bottom: 4%;

    background: rgba(221, 64, 137, 0.12);
}

.whatsapp-origin-shell {
    position: relative;
    z-index: 2;

    width: min(1180px, 100%);
    margin: 0 auto;
}

.whatsapp-origin-header {
    width: min(860px, 100%);
    margin: 0 auto 72px;

    text-align: center;
}

.whatsapp-origin-header h2 {
    margin: 0;

    color: #fff7fb;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(3rem, 7.2vw, 6.8rem);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.065em;
}

.whatsapp-origin-header h2 em {
    display: block;

    margin-top: 7px;

    color: #72d2a3;

    font-weight: 400;
    font-style: italic;

    text-shadow:
        0 0 32px rgba(86, 198, 145, 0.18);
}

.whatsapp-origin-header > p:last-child {
    max-width: 675px;
    margin: 30px auto 0;

    color: #c1adb7;

    font-size: clamp(1rem, 1.7vw, 1.17rem);
    line-height: 1.85;
}

.whatsapp-origin-grid {
    display: grid;
    grid-template-columns:
        minmax(300px, 0.9fr)
        minmax(330px, 1.1fr);

    align-items: center;
    gap: clamp(45px, 7vw, 94px);
}

.whatsapp-phone-card {
    position: relative;

    width: min(100%, 465px);
    margin: 0 auto;
    padding: 13px 13px 18px;

    border: 1px solid rgba(152, 207, 180, 0.18);
    border-radius: 42px;

    background:
        linear-gradient(
            150deg,
            rgba(22, 26, 27, 0.96),
            rgba(10, 12, 14, 0.97)
        );

    box-shadow:
        0 36px 100px rgba(0, 0, 0, 0.48),
        0 0 44px rgba(66, 177, 123, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.whatsapp-phone-card::after {
    content: "";

    position: absolute;
    inset: 16% -13% -12% 10%;
    z-index: -1;

    border-radius: 50%;

    background: rgba(63, 185, 124, 0.09);
    filter: blur(72px);
}

.whatsapp-phone-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    height: 39px;
    padding: 0 12px;
}

.whatsapp-phone-top > span {
    display: block;

    width: 83px;
    height: 7px;

    border-radius: 999px;

    background: #090b0c;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.whatsapp-phone-top > div {
    display: flex;
    gap: 6px;
}

.whatsapp-phone-top i {
    display: block;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #4f5d56;
}

.whatsapp-phone-top i:last-child {
    background: #68c896;

    box-shadow:
        0 0 9px rgba(104, 200, 150, 0.5);
}

.whatsapp-screen {
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.045);
    border-radius: 29px;

    background: #080b0a;
}

.whatsapp-screen img {
    display: block;

    width: 100%;
    height: auto;
    max-height: 730px;

    object-fit: contain;
    object-position: center;
}

.whatsapp-phone-card figcaption {
    padding: 15px 10px 2px;

    color: #b9a8b0;

    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-align: center;
}

.whatsapp-dialogue-column {
    position: relative;
}

.whatsapp-dialogue-kicker {
    margin: 0 0 20px;

    color: #70c99a;

    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.whatsapp-message {
    position: relative;

    width: min(92%, 520px);
    margin-bottom: 15px;
    padding: 17px 19px 15px;

    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 22px;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.22);
}

.whatsapp-message span {
    display: block;

    margin-bottom: 7px;

    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.whatsapp-message p {
    margin: 0;

    color: #fff2f7;

    font-size: 1rem;
    line-height: 1.55;
}

.whatsapp-message small {
    display: block;

    margin-top: 9px;

    color: rgba(255, 255, 255, 0.38);

    font-size: 0.64rem;
    text-align: right;
}

.whatsapp-message-ege {
    margin-right: auto;

    border-bottom-left-radius: 6px;

    background:
        linear-gradient(
            145deg,
            rgba(35, 28, 39, 0.94),
            rgba(24, 19, 29, 0.92)
        );
}

.whatsapp-message-ege span {
    color: #da8faf;
}

.whatsapp-message-kumsal {
    margin-left: auto;

    border-color: rgba(102, 201, 151, 0.14);
    border-bottom-right-radius: 6px;

    background:
        linear-gradient(
            145deg,
            rgba(31, 69, 51, 0.76),
            rgba(24, 53, 40, 0.75)
        );
}

.whatsapp-message-kumsal span {
    color: #84d4ab;
}

.whatsapp-message-short {
    width: max-content;
    min-width: 135px;
}

.whatsapp-dialogue-column blockquote {
    position: relative;

    margin: 38px 0 0;
    padding: 5px 0 5px 28px;

    color: #fff0f7;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(1.7rem, 3.1vw, 2.65rem);
    line-height: 1.25;
    letter-spacing: -0.03em;
}

.whatsapp-dialogue-column blockquote::before {
    content: "";

    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 0;

    width: 2px;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            #6fd09f,
            rgba(239, 117, 171, 0.2),
            transparent
        );
}

.whatsapp-origin-note {
    margin: 26px 0 0 28px;

    color: #ae99a4;

    font-size: 0.98rem;
    line-height: 1.82;
}

.whatsapp-origin-footer {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: min(700px, 100%);
    margin: 115px auto 0;

    text-align: center;
}

.whatsapp-origin-footer span {
    color: #70c99a;

    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
}

.whatsapp-origin-footer strong {
    margin-top: 13px;

    color: #f7e7ee;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(1.5rem, 3vw, 2.35rem);
    font-weight: 400;
}

.whatsapp-origin-footer small {
    margin-top: 10px;

    color: #8d7983;

    font-size: 0.76rem;
    letter-spacing: 0.18em;
}

.whatsapp-origin-footer i {
    margin-top: 22px;

    color: #ed82b2;

    font-size: 1.7rem;
    font-style: normal;

    animation:
        discordFooterArrow
        1.8s ease-in-out infinite;
}

@media (max-width: 850px) {
    .whatsapp-origin-header {
        margin-bottom: 54px;
    }

    .whatsapp-origin-grid {
        grid-template-columns: 1fr;
        gap: 62px;
    }

    .whatsapp-dialogue-column {
        width: min(650px, 100%);
        margin: 0 auto;
    }

    .whatsapp-message {
        width: min(90%, 520px);
    }
}

@media (max-width: 520px) {
    .whatsapp-origin-section {
        padding:
            86px
            16px
            110px;
    }

    .whatsapp-origin-header h2 {
        font-size: clamp(2.7rem, 14vw, 4.5rem);
    }

    .whatsapp-origin-header > p:last-child {
        font-size: 0.94rem;
        line-height: 1.75;
    }

    .whatsapp-phone-card {
        padding: 9px 9px 14px;
        border-radius: 30px;
    }

    .whatsapp-phone-top {
        height: 32px;
    }

    .whatsapp-phone-top > span {
        width: 67px;
        height: 6px;
    }

    .whatsapp-screen {
        border-radius: 22px;
    }

    .whatsapp-message {
        padding: 15px 16px 13px;
        border-radius: 18px;
    }

    .whatsapp-message p {
        font-size: 0.93rem;
    }

    .whatsapp-dialogue-column blockquote {
        padding-left: 20px;
        font-size: clamp(1.55rem, 8vw, 2.2rem);
    }

    .whatsapp-origin-note {
        margin-left: 20px;
    }

    .whatsapp-origin-footer {
        margin-top: 86px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .whatsapp-origin-footer i {
        animation: none;
    }
}


.whatsapp-forma-card {
    overflow: hidden;

    width: min(92%, 520px);
    margin: 22px 0 26px auto;

    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(27, 21, 30, 0.94),
            rgba(16, 13, 19, 0.95)
        );

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.24),
        0 0 28px rgba(237, 130, 178, 0.06);
}

.whatsapp-forma-card-label {
    padding: 12px 15px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.045);

    color: #e39bbc;
    background: rgba(255, 255, 255, 0.02);

    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-align: center;
    text-transform: uppercase;
}

.whatsapp-forma-card img {
    display: block;

    width: 100%;
    max-height: 360px;

    object-fit: cover;
    object-position: center;

    background: #0b0a0d;
}

.whatsapp-forma-card figcaption {
    padding: 14px 16px 16px;

    color: #b6a5ae;

    font-size: 0.86rem;
    line-height: 1.55;
    text-align: center;
}

@media (max-width: 850px) {
    .whatsapp-forma-card {
        width: min(100%, 520px);
        margin-right: 0;
    }
}

@media (max-width: 520px) {
    .whatsapp-forma-card {
        width: 100%;
        margin-top: 18px;
        margin-bottom: 22px;
        border-radius: 20px;
    }

    .whatsapp-forma-card-label {
        padding: 11px 13px;
        font-size: 0.58rem;
    }

    .whatsapp-forma-card img {
        max-height: 300px;
    }

    .whatsapp-forma-card figcaption {
        padding: 12px 13px 14px;
        font-size: 0.82rem;
    }
}


/* ================================
   BÖLÜM 02 — 3 ŞUBAT
================================ */

.turning-point-section {
    position: relative;

    min-height: 100dvh;
    padding:
        clamp(100px, 11vw, 170px)
        clamp(20px, 6vw, 86px)
        clamp(115px, 13vw, 185px);

    overflow: hidden;

    background:
        radial-gradient(
            circle at 16% 20%,
            rgba(163, 42, 106, 0.16),
            transparent 29%
        ),
        radial-gradient(
            circle at 84% 70%,
            rgba(91, 46, 136, 0.15),
            transparent 31%
        ),
        linear-gradient(
            180deg,
            #050407 0%,
            #0b050d 50%,
            #070409 100%
        );
}

.turning-point-section::before {
    content: "";

    position: absolute;
    top: 0;
    left: 50%;

    width: min(78%, 940px);
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(241, 111, 171, 0.5),
            transparent
        );

    transform: translateX(-50%);
}

.turning-point-light {
    position: absolute;

    width: 540px;
    height: 540px;

    border-radius: 50%;

    filter: blur(145px);
    pointer-events: none;
}

.turning-point-light-one {
    top: 17%;
    left: -350px;

    background: rgba(224, 62, 135, 0.13);
}

.turning-point-light-two {
    right: -350px;
    bottom: 4%;

    background: rgba(103, 50, 150, 0.13);
}

.turning-point-shell {
    position: relative;
    z-index: 2;

    width: min(1180px, 100%);
    margin: 0 auto;
}

.turning-point-header {
    width: min(880px, 100%);
    margin: 0 auto 78px;

    text-align: center;
}

.turning-point-header h2 {
    margin: 0;

    color: #fff7fb;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(3rem, 7.4vw, 7rem);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.067em;
}

.turning-point-header h2 em {
    display: block;

    margin-top: 8px;

    color: #ee80b1;
    font-weight: 400;
    font-style: italic;

    text-shadow:
        0 0 34px rgba(239, 86, 159, 0.22);
}

.turning-point-header > p:last-child {
    max-width: 690px;
    margin: 31px auto 0;

    color: #c7adb9;

    font-size: clamp(1rem, 1.7vw, 1.17rem);
    line-height: 1.85;
}

.turning-point-story-grid {
    display: grid;
    grid-template-columns:
        minmax(260px, 0.9fr)
        minmax(300px, 1.08fr)
        minmax(260px, 0.9fr);

    align-items: stretch;
    gap: 24px;
}

.turning-point-story-card,
.turning-point-chat-card {
    position: relative;

    min-height: 100%;
    margin: 0;

    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 28px;

    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.turning-point-story-card {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: clamp(27px, 4vw, 43px);

    overflow: hidden;
}

.turning-point-story-card::after {
    content: "";

    position: absolute;
    inset: auto -60px -90px auto;

    width: 190px;
    height: 190px;

    border-radius: 50%;

    filter: blur(52px);
}

.turning-point-story-night {
    background:
        linear-gradient(
            145deg,
            rgba(42, 16, 31, 0.88),
            rgba(18, 11, 20, 0.94)
        );
}

.turning-point-story-night::after {
    background: rgba(214, 51, 119, 0.17);
}

.turning-point-story-dawn {
    background:
        linear-gradient(
            145deg,
            rgba(29, 20, 41, 0.9),
            rgba(17, 12, 23, 0.94)
        );
}

.turning-point-story-dawn::after {
    background: rgba(114, 69, 165, 0.18);
}

.turning-point-story-index {
    position: absolute;
    top: 17px;
    right: 21px;

    color: rgba(255, 255, 255, 0.08);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 4rem;
    line-height: 1;
}

.turning-point-story-time {
    margin: 0 0 17px;

    color: #df75a4;

    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
}

.turning-point-story-card h3 {
    margin: 0;

    color: #fff1f7;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(1.8rem, 3vw, 2.65rem);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.turning-point-story-card > p:not(.turning-point-story-time) {
    margin: 24px 0 0;

    color: #bda7b2;

    font-size: 0.94rem;
    line-height: 1.8;
}

.turning-point-story-card strong {
    display: block;

    margin-top: 28px;

    color: #f6dbe7;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.12rem;
    font-weight: 400;
    line-height: 1.55;
}

.turning-point-chat-card {
    overflow: hidden;

    padding: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(24, 18, 29, 0.97),
            rgba(11, 9, 15, 0.97)
        );
}

.turning-point-chat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 43px;
    padding: 0 10px;
}

.turning-point-chat-top span {
    color: #a78f9c;

    font-size: 0.62rem;
    letter-spacing: 0.18em;
}

.turning-point-chat-top i {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #ed78aa;

    box-shadow:
        0 0 10px rgba(237, 120, 170, 0.76),
        0 0 20px rgba(237, 120, 170, 0.28);
}

.turning-point-chat-card img {
    display: block;

    width: 100%;
    height: 100%;
    max-height: 570px;

    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 19px;

    object-fit: contain;
    object-position: center;

    background: #08070a;
}

.turning-point-chat-card figcaption {
    padding: 14px 8px 5px;

    color: #ae99a4;

    font-size: 0.74rem;
    text-align: center;
}

.turning-point-quote {
    position: relative;

    width: min(900px, 100%);
    margin: 105px auto;

    text-align: center;
}

.turning-point-quote > span {
    display: block;

    height: 78px;

    color: rgba(238, 128, 178, 0.32);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 8rem;
    line-height: 1;
}

.turning-point-quote blockquote {
    margin: -14px 0 0;

    color: #fff1f7;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(2.3rem, 5.5vw, 5rem);
    line-height: 1.08;
    letter-spacing: -0.05em;
}

.turning-point-quote small {
    display: block;

    margin-top: 25px;

    color: #9e8793;

    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.turning-point-gallery {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    grid-template-rows:
        minmax(190px, 28vw)
        minmax(150px, 22vw);

    gap: 16px;
}

.turning-point-photo {
    margin: 0;

    overflow: hidden;

    border: 1px solid rgba(255, 188, 218, 0.12);
    border-radius: 24px;

    background: #100a11;

    box-shadow:
        0 22px 62px rgba(0, 0, 0, 0.28);
}

.turning-point-photo-large {
    grid-column: span 2;
    grid-row: span 2;
}

.turning-point-photo-tall {
    grid-row: span 2;
}

.turning-point-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition:
        transform 800ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 500ms ease;
}

.turning-point-photo:hover img {
    transform: scale(1.045);
    filter: brightness(1.06);
}

.turning-point-gallery-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;

    grid-column: 1 / -1;
    min-height: clamp(155px, 16vw, 210px);
    padding: clamp(25px, 3.5vw, 40px);

    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(44, 19, 34, 0.88),
            rgba(20, 12, 22, 0.94)
        );
}

.turning-point-gallery-copy span {
    color: #e27aa7;

    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.turning-point-gallery-copy p {
    margin: 16px 0 0;

    color: #c8b0bb;

    font-size: 0.93rem;
    line-height: 1.65;
}

.turning-point-gallery-copy strong {
    margin-top: 10px;

    color: #fff1f7;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.12rem;
    font-weight: 400;
    line-height: 1.42;
}

.turning-point-footer {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: min(700px, 100%);
    margin: 120px auto 0;

    text-align: center;
}

.turning-point-footer span {
    color: #dc78a5;

    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
}

.turning-point-footer strong {
    margin-top: 13px;

    color: #f8e9f0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(1.5rem, 3vw, 2.35rem);
    font-weight: 400;
}

.turning-point-footer small {
    margin-top: 10px;

    color: #8e7884;

    font-size: 0.76rem;
    letter-spacing: 0.18em;
}

.turning-point-footer i {
    margin-top: 22px;

    color: #ed82b2;

    font-size: 1.7rem;
    font-style: normal;

    animation:
        discordFooterArrow
        1.8s ease-in-out infinite;
}

@media (max-width: 960px) {
    .turning-point-story-grid {
        grid-template-columns: 1fr 1fr;
    }

    .turning-point-chat-card {
        grid-column: span 2;
        grid-row: 1;

        width: min(620px, 100%);
        margin: 0 auto;
    }

    .turning-point-gallery {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        grid-template-rows:
            repeat(3, minmax(220px, 42vw));
    }

    .turning-point-photo-large {
        grid-column: span 2;
        grid-row: span 1;
    }

    .turning-point-photo-tall {
        grid-row: span 2;
    }
}

@media (max-width: 620px) {
    .turning-point-section {
        padding:
            88px
            16px
            115px;
    }

    .turning-point-header {
        margin-bottom: 55px;
    }

    .turning-point-header h2 {
        font-size: clamp(2.7rem, 14vw, 4.6rem);
    }

    .turning-point-header > p:last-child {
        font-size: 0.94rem;
        line-height: 1.75;
    }

    .turning-point-story-grid {
        grid-template-columns: 1fr;
    }

    .turning-point-chat-card {
        grid-column: auto;
        grid-row: auto;
    }

    .turning-point-story-card {
        padding: 27px 23px;
    }

    .turning-point-quote {
        margin-top: 82px;
        margin-bottom: 82px;
    }

    .turning-point-quote > span {
        height: 55px;
        font-size: 6rem;
    }

    .turning-point-quote blockquote {
        font-size: clamp(2rem, 11vw, 3.5rem);
    }

    .turning-point-gallery {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .turning-point-photo,
    .turning-point-photo-large,
    .turning-point-photo-tall {
        grid-column: auto;
        grid-row: auto;

        min-height: 300px;
    }

    .turning-point-gallery-copy {
        min-height: 240px;
    }

    .turning-point-footer {
        margin-top: 90px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .turning-point-photo img {
        transition: none;
    }

    .turning-point-footer i {
        animation: none;
    }
}


/* ================================
   GELİŞTİRME KISAYOLU
================================ */

.dev-goto-mode #loadingScreen,
.dev-goto-mode #passwordScreen,
.dev-goto-mode #startScreen,
.dev-goto-mode #storyScreen,
.dev-goto-mode #cinematicIntro,
.dev-goto-mode #mainStoryScreen {
    display: none !important;
}

/* ================================
   ÖZEL ARA BÖLÜM — OYUNDAN KARELER
================================ */

.game-memories-section {
    position: relative;

    min-height: 100dvh;
    padding:
        clamp(100px, 11vw, 170px)
        clamp(18px, 5.5vw, 78px)
        clamp(115px, 13vw, 185px);

    overflow: hidden;

    background:
        radial-gradient(
            circle at 14% 18%,
            rgba(103, 57, 157, 0.2),
            transparent 29%
        ),
        radial-gradient(
            circle at 88% 62%,
            rgba(225, 55, 136, 0.15),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #070409 0%,
            #0a0610 50%,
            #050307 100%
        );
}

.game-memories-section::before {
    content: "";

    position: absolute;
    top: 0;
    left: 50%;

    width: min(78%, 960px);
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(143, 101, 196, 0.52),
            rgba(237, 104, 166, 0.48),
            transparent
        );

    transform: translateX(-50%);
}

.game-memories-noise {
    position: absolute;
    inset: -50%;

    width: 200%;
    height: 200%;

    opacity: 0.035;
    pointer-events: none;

    background-image:
        repeating-radial-gradient(
            circle at 30% 40%,
            rgba(255, 255, 255, 0.7) 0 1px,
            transparent 1px 5px
        );

    background-size: 10px 10px;

    animation:
        storyHeroGrainMove
        500ms steps(2) infinite;
}

.game-memories-glow {
    position: absolute;

    width: 560px;
    height: 560px;

    border-radius: 50%;

    filter: blur(150px);
    pointer-events: none;
}

.game-memories-glow-one {
    top: 10%;
    left: -370px;

    background: rgba(111, 62, 165, 0.18);
}

.game-memories-glow-two {
    right: -370px;
    bottom: 3%;

    background: rgba(222, 62, 137, 0.14);
}

.game-memories-shell {
    position: relative;
    z-index: 2;

    width: min(1240px, 100%);
    margin: 0 auto;
}

.game-memories-header {
    width: min(880px, 100%);
    margin: 0 auto 76px;

    text-align: center;
}

.game-memories-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    margin: 0 0 22px;

    color: #ca87e5;

    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.game-memories-label i {
    display: block;

    width: 46px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(207, 128, 239, 0.8),
            transparent
        );
}

.game-memories-header h2 {
    margin: 0;

    color: #fff7fb;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(3rem, 7.5vw, 7.2rem);
    font-weight: 400;
    line-height: 0.94;
    letter-spacing: -0.067em;
}

.game-memories-header h2 em {
    color: #ee7fb1;
    font-weight: 400;
    font-style: italic;

    text-shadow:
        0 0 34px rgba(238, 86, 158, 0.24);
}

.game-memories-header > p:last-child {
    max-width: 720px;
    margin: 31px auto 0;

    color: #c4adba;

    font-size: clamp(1rem, 1.7vw, 1.17rem);
    line-height: 1.85;
}

.game-memories-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    grid-auto-rows:
        minmax(175px, 15vw);

    gap: 15px;
}

.game-memory-card {
    position: relative;

    min-width: 0;
    margin: 0;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.065);
    border-radius: 25px;

    background: #0d0910;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.game-memory-card img,
.game-memory-card video {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

.game-memory-video-main {
    grid-column: span 2;
    grid-row: span 2;
}

.game-memory-video-main::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 38%,
            rgba(6, 4, 8, 0.84) 100%
        );

    pointer-events: none;
}

.game-memory-video-overlay {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 0;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;

    padding: 25px;
}

.game-memory-video-overlay > span {
    max-width: 260px;

    color: #f9e8f0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(1.15rem, 2vw, 1.65rem);
    line-height: 1.25;
}

.game-video-sound-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    min-height: 42px;
    padding: 0 15px;

    border: 1px solid rgba(255, 182, 216, 0.24);
    border-radius: 999px;

    color: #f8dce9;
    background: rgba(13, 8, 15, 0.62);

    font: inherit;
    font-size: 0.72rem;
    letter-spacing: 0.08em;

    cursor: pointer;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.game-video-sound-button b {
    color: #ef83b3;

    font-size: 1rem;
    font-weight: 400;
}

.game-memory-photo {
    min-height: 0;
}

.game-memory-photo-one,
.game-memory-photo-three {
    grid-row: span 2;
}

.game-memory-photo figcaption {
    position: absolute;
    right: 10px;
    bottom: 10px;
    left: 10px;

    padding: 12px 14px;

    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 15px;

    color: #f4dfe8;
    background: rgba(10, 7, 12, 0.68);

    font-size: 0.75rem;
    line-height: 1.45;
    text-align: center;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.game-memory-copy-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: clamp(23px, 3vw, 34px);

    background:
        linear-gradient(
            145deg,
            rgba(55, 27, 64, 0.94),
            rgba(24, 14, 28, 0.96)
        );
}

.game-memory-copy-card span {
    color: #ca8de4;

    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.game-memory-copy-card p {
    margin: 16px 0 0;

    color: #cbb4c0;

    font-size: 0.94rem;
    line-height: 1.65;
}

.game-memory-copy-card strong {
    margin-top: 9px;

    color: #fff0f7;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.4;
}

.game-memory-video-small {
    display: flex;
    flex-direction: column;

    grid-column: span 2;
    grid-row: span 2;
}

.game-memory-video-small video {
    min-height: 0;
    flex: 1;
}

.game-memory-video-small > span {
    display: block;

    padding: 14px 16px;

    color: #c5adb9;
    background: #100b12;

    font-size: 0.75rem;
    text-align: center;
}

.game-memory-video-third {
    grid-column: span 1;
}

.game-memory-photo-four {
    grid-row: span 2;
}

.game-memory-photo-five {
    grid-column: 2 / span 2;
    min-height: 250px;
}

.game-memory-card img {
    transition:
        transform 850ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 500ms ease;
}

.game-memory-photo:hover img {
    transform: scale(1.05);
    filter: brightness(1.07);
}

.game-memories-ending {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: min(760px, 100%);
    margin: 120px auto 0;

    text-align: center;
}

.game-memories-ending p {
    margin: 0;

    color: #b49ba8;

    font-size: 0.95rem;
    line-height: 1.7;
}

.game-memories-ending strong {
    margin-top: 12px;

    color: #fff0f7;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(1.8rem, 4vw, 3.15rem);
    font-weight: 400;
    line-height: 1.17;
    letter-spacing: -0.035em;
}

.game-memories-ending span {
    margin-top: 23px;

    color: #df7baa;

    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.game-memories-ending i {
    margin-top: 19px;

    color: #ed82b2;

    font-size: 1.7rem;
    font-style: normal;

    animation:
        discordFooterArrow
        1.8s ease-in-out infinite;
}

@media (max-width: 980px) {
    .game-memories-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        grid-auto-rows:
            minmax(230px, 35vw);
    }

    .game-memory-video-main {
        grid-column: span 2;
    }

    .game-memory-photo-one,
    .game-memory-photo-three,
    .game-memory-photo-four,
    .game-memory-photo-five {
        grid-row: span 1;
    }

    .game-memory-video-small {
        grid-column: span 2;
        grid-row: span 2;
    }

    .game-memory-video-third {
        grid-column: span 1;
        grid-row: span 1;
    }
}

@media (max-width: 600px) {
    .game-memories-section {
        padding:
            88px
            14px
            115px;
    }

    .game-memories-header {
        margin-bottom: 54px;
    }

    .game-memories-label {
        gap: 9px;
        letter-spacing: 0.16em;
    }

    .game-memories-label i {
        width: 25px;
    }

    .game-memories-header h2 {
        font-size: clamp(2.8rem, 15vw, 4.8rem);
    }

    .game-memories-header > p:last-child {
        font-size: 0.94rem;
        line-height: 1.75;
    }

    .game-memories-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .game-memory-card,
    .game-memory-video-main,
    .game-memory-video-small,
    .game-memory-video-third,
    .game-memory-photo-one,
    .game-memory-photo-three,
    .game-memory-photo-four,
    .game-memory-photo-five {
        grid-column: auto;
        grid-row: auto;

        min-height: 290px;
    }

    .game-memory-video-main {
        min-height: 440px;
    }

    .game-memory-video-small {
        min-height: 420px;
    }

    .game-memory-video-overlay {
        align-items: flex-start;
        flex-direction: column;

        padding: 18px;
    }

    .game-memory-copy-card {
        min-height: 250px;
    }

    .game-memories-ending {
        margin-top: 90px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .game-memories-noise,
    .game-memories-ending i {
        animation: none;
    }

    .game-memory-card img {
        transition: none;
    }
}


/* ================================
   3 ŞUBAT → FIVEM GEÇİŞ DÜZELTMESİ
================================ */

.turning-point-section {
    padding-bottom: 64px;
}

.turning-point-footer {
    width: min(620px, 100%);
    margin-top: 72px;
    padding: 24px 30px 20px;

    border: 1px solid rgba(239, 124, 177, 0.13);
    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(31, 16, 29, 0.72),
            rgba(15, 10, 18, 0.74)
        );

    box-shadow:
        0 22px 65px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.turning-point-footer strong {
    margin-top: 8px;
}

.turning-point-footer small {
    margin-top: 7px;
}

.turning-point-footer i {
    margin-top: 10px;
}

.game-memories-section {
    padding-top: clamp(72px, 7vw, 105px);
}

@media (max-width: 620px) {
    .turning-point-section {
        padding-bottom: 42px;
    }

    .turning-point-footer {
        margin-top: 58px;
        padding: 21px 18px 17px;
        border-radius: 23px;
    }

    .game-memories-section {
        padding-top: 65px;
    }
}

/* ================================
   FIVEM FOTOĞRAFLARINI BÜYÜT
================================ */

.game-memory-photo {
    cursor: zoom-in;
}

.game-memory-photo:focus-visible {
    outline: 2px solid rgba(255, 164, 207, 0.9);
    outline-offset: 5px;
}

.game-memory-photo::after {
    content: "Büyüt";

    position: absolute;
    top: 13px;
    right: 13px;
    z-index: 3;

    padding: 8px 11px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;

    color: rgba(255, 239, 247, 0.82);
    background: rgba(8, 5, 10, 0.58);

    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;

    opacity: 0;
    transform: translateY(-5px);

    transition:
        opacity 220ms ease,
        transform 220ms ease;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    pointer-events: none;
}

.game-memory-photo:hover::after,
.game-memory-photo:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

.game-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: clamp(22px, 4vw, 54px);

    background: rgba(4, 2, 6, 0.93);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 260ms ease,
        visibility 260ms ease;

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.game-lightbox[hidden] {
    display: none;
}

.game-lightbox.is-visible {
    opacity: 1;
    visibility: visible;
}

.game-lightbox-content {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;

    width: min(1120px, 88vw);
    max-height: 88dvh;
    margin: 0;
}

.game-lightbox-content img {
    display: block;

    max-width: 100%;
    max-height: calc(88dvh - 72px);

    border: 1px solid rgba(255, 190, 220, 0.16);
    border-radius: 22px;

    object-fit: contain;

    background: #08060a;

    box-shadow:
        0 36px 110px rgba(0, 0, 0, 0.68),
        0 0 50px rgba(232, 76, 150, 0.1);
}

.game-lightbox-content figcaption {
    margin-top: 15px;

    color: #dbc3cf;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(0.95rem, 1.7vw, 1.15rem);
    text-align: center;
}

.game-lightbox-close,
.game-lightbox-navigation {
    position: absolute;
    z-index: 4;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 187, 219, 0.17);
    border-radius: 50%;

    color: #fff0f7;
    background: rgba(24, 13, 24, 0.76);

    cursor: pointer;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.game-lightbox-close {
    top: 23px;
    right: 25px;

    width: 48px;
    height: 48px;

    font-size: 2rem;
    line-height: 1;
}

.game-lightbox-navigation {
    top: 50%;

    width: 54px;
    height: 54px;

    font-size: 2.6rem;
    line-height: 1;

    transform: translateY(-50%);
}

.game-lightbox-previous {
    left: 24px;
}

.game-lightbox-next {
    right: 24px;
}

.game-lightbox-close:hover,
.game-lightbox-navigation:hover {
    border-color: rgba(255, 172, 211, 0.5);
    background: rgba(50, 22, 42, 0.88);
}

body.game-lightbox-open {
    overflow: hidden !important;
}

/* ================================
   KISAYOL MODU MÜZİK BUTONU
================================ */

.dev-music-button {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 9000;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    min-height: 48px;
    padding: 0 18px;

    border: 1px solid rgba(255, 173, 214, 0.3);
    border-radius: 999px;

    color: #fff0f7;
    background:
        linear-gradient(
            120deg,
            rgba(91, 36, 72, 0.94),
            rgba(180, 57, 113, 0.94)
        );

    box-shadow:
        0 16px 42px rgba(0, 0, 0, 0.36),
        0 0 24px rgba(224, 76, 145, 0.11);

    font: inherit;
    cursor: pointer;

    animation:
        devMusicButtonPulse
        1.9s ease-in-out infinite;
}

.dev-music-button[hidden] {
    display: none;
}

.dev-music-button span {
    color: #ffd2e6;

    font-size: 1.18rem;
}

.dev-music-button b {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
}

@keyframes devMusicButtonPulse {
    0%,
    100% {
        transform: translateY(0);
        box-shadow:
            0 16px 42px rgba(0, 0, 0, 0.36),
            0 0 18px rgba(224, 76, 145, 0.08);
    }

    50% {
        transform: translateY(-4px);
        box-shadow:
            0 20px 48px rgba(0, 0, 0, 0.4),
            0 0 30px rgba(224, 76, 145, 0.2);
    }
}

@media (max-width: 650px) {
    .game-lightbox {
        padding: 70px 15px 24px;
    }

    .game-lightbox-content {
        width: 100%;
    }

    .game-lightbox-content img {
        max-height: calc(82dvh - 65px);
        border-radius: 16px;
    }

    .game-lightbox-close {
        top: 15px;
        right: 15px;

        width: 44px;
        height: 44px;
    }

    .game-lightbox-navigation {
        top: auto;
        bottom: 16px;

        width: 46px;
        height: 46px;

        transform: none;
    }

    .game-lightbox-previous {
        left: calc(50% - 58px);
    }

    .game-lightbox-next {
        right: calc(50% - 58px);
    }

    .dev-music-button {
        right: 14px;
        bottom: 14px;

        min-height: 45px;
        padding: 0 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dev-music-button {
        animation: none;
    }
}


/* ================================
   BÖLÜM 03 — 7 ŞUBAT
================================ */

.love-confession-section {
    position: relative;

    min-height: 100dvh;
    padding:
        clamp(94px, 10vw, 155px)
        clamp(20px, 6vw, 86px)
        clamp(105px, 12vw, 170px);

    overflow: hidden;

    background:
        radial-gradient(
            circle at 14% 22%,
            rgba(218, 59, 133, 0.16),
            transparent 31%
        ),
        radial-gradient(
            circle at 86% 68%,
            rgba(104, 53, 155, 0.17),
            transparent 33%
        ),
        linear-gradient(
            180deg,
            #070409 0%,
            #0d0610 50%,
            #07040a 100%
        );
}

.love-confession-section::before {
    content: "";

    position: absolute;
    top: 0;
    left: 50%;

    width: min(78%, 950px);
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(238, 117, 171, 0.52),
            transparent
        );

    transform: translateX(-50%);
}

.love-confession-glow {
    position: absolute;

    width: 540px;
    height: 540px;

    border-radius: 50%;

    filter: blur(145px);
    pointer-events: none;
}

.love-confession-glow-one {
    top: 7%;
    left: -350px;

    background: rgba(224, 67, 141, 0.15);
}

.love-confession-glow-two {
    right: -350px;
    bottom: 2%;

    background: rgba(111, 56, 162, 0.15);
}

.love-confession-shell {
    position: relative;
    z-index: 2;

    width: min(1180px, 100%);
    margin: 0 auto;
}

.love-confession-header {
    width: min(880px, 100%);
    margin: 0 auto 72px;

    text-align: center;
}

.love-confession-header h2 {
    margin: 0;

    color: #fff7fb;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(3rem, 7.2vw, 6.9rem);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.066em;
}

.love-confession-header h2 em {
    display: block;

    margin-top: 8px;

    color: #ee82b2;
    font-weight: 400;
    font-style: italic;

    text-shadow:
        0 0 34px rgba(238, 88, 158, 0.24);
}

.love-confession-header > p:last-child {
    max-width: 705px;
    margin: 30px auto 0;

    color: #c7afbb;

    font-size: clamp(1rem, 1.7vw, 1.17rem);
    line-height: 1.85;
}

.love-confession-grid {
    display: grid;
    grid-template-columns:
        minmax(310px, 0.92fr)
        minmax(330px, 1.08fr);

    align-items: center;
    gap: clamp(46px, 7vw, 94px);
}

.love-confession-story {
    position: relative;

    padding: clamp(30px, 4vw, 48px);

    border: 1px solid rgba(255, 176, 213, 0.11);
    border-radius: 31px;

    background:
        linear-gradient(
            145deg,
            rgba(42, 18, 35, 0.91),
            rgba(18, 11, 21, 0.95)
        );

    box-shadow:
        0 30px 85px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.love-confession-number {
    position: absolute;
    top: -48px;
    right: 15px;
    z-index: -1;

    color: rgba(239, 119, 173, 0.08);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(8rem, 16vw, 13rem);
    line-height: 1;
}

.love-confession-kicker {
    margin: 0 0 18px;

    color: #df79a6;

    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.love-confession-story h3 {
    margin: 0;

    color: #fff2f8;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(2.2rem, 4.5vw, 4rem);
    font-weight: 400;
    line-height: 1.03;
    letter-spacing: -0.045em;
}

.love-confession-story > p:not(.love-confession-kicker) {
    margin: 24px 0 0;

    color: #bda6b2;

    font-size: 0.96rem;
    line-height: 1.8;
}

.love-confession-dialogue {
    width: min(92%, 420px);
    margin-top: 27px;
    padding: 16px 18px 15px;

    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 20px;
    border-bottom-right-radius: 6px;

    background:
        linear-gradient(
            145deg,
            rgba(103, 39, 75, 0.76),
            rgba(71, 27, 53, 0.8)
        );

    box-shadow:
        0 17px 40px rgba(0, 0, 0, 0.18);
}

.love-confession-dialogue span {
    display: block;

    margin-bottom: 6px;

    color: #f19ac0;

    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.love-confession-dialogue p {
    margin: 0;

    color: #fff3f8;

    font-size: 1rem;
    line-height: 1.5;
}

.love-confession-dialogue-ege {
    margin-top: 13px;
    margin-left: auto;

    border-color: rgba(166, 117, 208, 0.12);
    border-radius: 20px;
    border-bottom-left-radius: 6px;

    background:
        linear-gradient(
            145deg,
            rgba(65, 43, 88, 0.81),
            rgba(43, 29, 60, 0.84)
        );
}

.love-confession-dialogue-ege span {
    color: #caa3e9;
}

.love-confession-story strong {
    display: block;

    margin-top: 29px;

    color: #f7dce8;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.14rem;
    font-weight: 400;
    line-height: 1.55;
}

.love-confession-wallpaper {
    position: relative;

    margin: 0;
    padding: 12px 12px 17px;

    border: 1px solid rgba(203, 145, 230, 0.16);
    border-radius: 31px;

    background:
        linear-gradient(
            145deg,
            rgba(26, 20, 32, 0.96),
            rgba(11, 9, 15, 0.97)
        );

    box-shadow:
        0 34px 95px rgba(0, 0, 0, 0.44),
        0 0 40px rgba(131, 65, 174, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);

    transform: rotate(1.25deg);
}

.love-confession-wallpaper::after {
    content: "";

    position: absolute;
    inset: 15% -12% -12% 10%;
    z-index: -1;

    border-radius: 50%;

    background: rgba(214, 58, 132, 0.1);
    filter: blur(75px);
}

.love-confession-wallpaper-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 44px;
    padding: 0 11px;
}

.love-confession-wallpaper-top span {
    color: #aa95a1;

    font-size: 0.62rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.love-confession-wallpaper-top i {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #ed78aa;

    box-shadow:
        0 0 10px rgba(237, 120, 170, 0.7);
}

.love-confession-wallpaper-frame {
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.045);
    border-radius: 21px;

    background: #08070a;
}

.love-confession-wallpaper-frame img {
    display: block;

    width: 100%;
    max-height: 690px;

    object-fit: contain;
    object-position: center;
}

.love-confession-wallpaper figcaption {
    padding: 15px 10px 2px;

    color: #bda8b3;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 0.9rem;
    font-style: italic;
    text-align: center;
}

.love-confession-quote {
    width: min(850px, 100%);
    margin: 98px auto 0;

    text-align: center;
}

.love-confession-quote p {
    margin: 0;

    color: #a98e9b;

    font-size: 0.94rem;
    line-height: 1.7;
}

.love-confession-quote strong {
    display: block;

    margin-top: 10px;

    color: #fff0f7;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(2rem, 4.7vw, 3.9rem);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.04em;
}

.love-confession-footer {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: min(700px, 100%);
    margin: 92px auto 0;

    text-align: center;
}

.love-confession-footer span {
    color: #cc86e0;

    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
}

.love-confession-footer strong {
    margin-top: 12px;

    color: #f8e9f0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(1.5rem, 3vw, 2.3rem);
    font-weight: 400;
}

.love-confession-footer small {
    margin-top: 9px;

    color: #8f7785;

    font-size: 0.75rem;
    letter-spacing: 0.17em;
}

.love-confession-footer i {
    margin-top: 19px;

    color: #ed82b2;

    font-size: 1.7rem;
    font-style: normal;

    animation:
        discordFooterArrow
        1.8s ease-in-out infinite;
}

@media (max-width: 860px) {
    .love-confession-grid {
        grid-template-columns: 1fr;
        gap: 58px;
    }

    .love-confession-story,
    .love-confession-wallpaper {
        width: min(650px, 100%);
        margin-right: auto;
        margin-left: auto;
    }

    .love-confession-wallpaper {
        transform: rotate(0.7deg);
    }
}

@media (max-width: 540px) {
    .love-confession-section {
        padding:
            84px
            16px
            108px;
    }

    .love-confession-header {
        margin-bottom: 52px;
    }

    .love-confession-header h2 {
        font-size: clamp(2.7rem, 14vw, 4.5rem);
    }

    .love-confession-header > p:last-child {
        font-size: 0.94rem;
        line-height: 1.75;
    }

    .love-confession-story {
        padding: 27px 22px;
        border-radius: 24px;
    }

    .love-confession-wallpaper {
        padding: 9px 9px 14px;
        border-radius: 24px;
    }

    .love-confession-wallpaper-frame {
        border-radius: 17px;
    }

    .love-confession-dialogue {
        width: 100%;
    }

    .love-confession-quote {
        margin-top: 78px;
    }

    .love-confession-footer {
        margin-top: 75px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .love-confession-footer i {
        animation: none;
    }
}


/* ================================
   BÖLÜM 04 — 11–12 ŞUBAT
================================ */

.first-love-words-section {
    position: relative;

    min-height: 100dvh;
    padding:
        clamp(96px, 10vw, 158px)
        clamp(20px, 6vw, 86px)
        clamp(108px, 12vw, 175px);

    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 24%,
            rgba(220, 69, 141, 0.15),
            transparent 31%
        ),
        radial-gradient(
            circle at 86% 68%,
            rgba(100, 54, 151, 0.16),
            transparent 33%
        ),
        linear-gradient(
            180deg,
            #07040a 0%,
            #0b0710 52%,
            #060408 100%
        );
}

.first-love-words-section::before {
    content: "";

    position: absolute;
    top: 0;
    left: 50%;

    width: min(78%, 950px);
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(239, 125, 176, 0.5),
            transparent
        );

    transform: translateX(-50%);
}

.first-love-words-glow {
    position: absolute;

    width: 540px;
    height: 540px;

    border-radius: 50%;

    filter: blur(145px);
    pointer-events: none;
}

.first-love-words-glow-one {
    top: 8%;
    left: -350px;

    background: rgba(224, 72, 142, 0.14);
}

.first-love-words-glow-two {
    right: -350px;
    bottom: 3%;

    background: rgba(111, 60, 161, 0.14);
}

.first-love-words-shell {
    position: relative;
    z-index: 2;

    width: min(1180px, 100%);
    margin: 0 auto;
}

.first-love-words-header {
    width: min(880px, 100%);
    margin: 0 auto 74px;

    text-align: center;
}

.first-love-words-header h2 {
    margin: 0;

    color: #fff7fb;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(3rem, 7.25vw, 6.95rem);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.066em;
}

.first-love-words-header h2 em {
    display: block;

    margin-top: 8px;

    color: #ef84b4;
    font-weight: 400;
    font-style: italic;

    text-shadow:
        0 0 34px rgba(239, 90, 160, 0.24);
}

.first-love-words-header > p:last-child {
    max-width: 700px;
    margin: 30px auto 0;

    color: #c7afbb;

    font-size: clamp(1rem, 1.7vw, 1.17rem);
    line-height: 1.85;
}

.first-love-words-grid {
    display: grid;
    grid-template-columns:
        minmax(300px, 0.92fr)
        minmax(360px, 1.08fr);

    align-items: stretch;
    gap: clamp(30px, 5vw, 62px);
}

.sleepy-love-card,
.real-love-card {
    position: relative;

    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 31px;

    box-shadow:
        0 30px 85px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.sleepy-love-card {
    display: flex;
    flex-direction: column;

    padding: clamp(29px, 4vw, 46px);

    background:
        linear-gradient(
            145deg,
            rgba(33, 20, 42, 0.92),
            rgba(16, 12, 22, 0.96)
        );
}

.sleepy-love-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sleepy-love-card-top span {
    color: #a894a0;

    font-size: 0.63rem;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.sleepy-love-card-top i {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #b886da;

    box-shadow:
        0 0 10px rgba(184, 134, 218, 0.68);
}

.sleepy-love-kicker {
    margin: 42px 0 15px;

    color: #c798e5;

    font-size: 0.67rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.sleepy-love-card h3 {
    margin: 0;

    color: #fff2f8;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(2rem, 3.8vw, 3.5rem);
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -0.04em;
}

.sleepy-love-card > p:not(.sleepy-love-kicker) {
    margin: 24px 0 0;

    color: #bba7b2;

    font-size: 0.96rem;
    line-height: 1.8;
}

.sleepy-love-card blockquote {
    margin: 30px 0 0;

    color: #f3b3d0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(2.2rem, 4.8vw, 4rem);
    font-style: italic;
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.sleepy-love-card > strong {
    margin-top: 25px;

    color: #ead5df;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.08rem;
    font-weight: 400;
    line-height: 1.55;
}

.sleepy-call-ui {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-top: auto;
    padding: 17px 18px;

    border: 1px solid rgba(194, 151, 223, 0.12);
    border-radius: 21px;

    background: rgba(12, 10, 17, 0.55);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.sleepy-call-avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    border-radius: 50%;

    color: #fff4fa;
    background:
        linear-gradient(
            145deg,
            #7c4c9d,
            #d05e9c
        );

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.2rem;
}

.sleepy-call-ui > div {
    min-width: 0;
    flex: 1;
}

.sleepy-call-ui b {
    display: block;

    color: #f5e7ee;

    font-size: 0.85rem;
    font-weight: 600;
}

.sleepy-call-ui small {
    display: block;

    margin-top: 3px;

    color: #8f7d88;

    font-size: 0.67rem;
}

.sleepy-call-ui > i {
    color: #c989e3;

    font-size: 1.2rem;
    font-style: normal;
}

.real-love-card {
    padding: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(27, 20, 33, 0.97),
            rgba(11, 9, 15, 0.98)
        );
}

.real-love-date {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 48px;
    padding: 0 11px;
}

.real-love-date span {
    color: #a7909c;

    font-size: 0.63rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.real-love-date strong {
    color: #ee86b4;

    font-family:
        "Courier New",
        monospace;

    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.1em;
}

.real-love-chat {
    margin: 0;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.045);
    border-radius: 21px;

    background: #08070a;
}

.real-love-chat img {
    display: block;

    width: 100%;
    max-height: 510px;

    object-fit: contain;
    object-position: center;
}

.real-love-chat figcaption {
    padding: 14px 15px;

    color: #ad98a3;
    background: rgba(255, 255, 255, 0.015);

    font-size: 0.74rem;
    text-align: center;
}

.real-love-copy {
    padding: 27px 21px 23px;
}

.real-love-copy > p {
    margin: 0;

    color: #ad97a2;

    font-size: 0.9rem;
}

.real-love-copy blockquote {
    margin: 14px 0 0;

    color: #fff0f7;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(1.9rem, 3.9vw, 3.25rem);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.035em;
}

.real-love-copy strong {
    display: block;

    margin-top: 20px;

    color: #d8c2cd;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.02rem;
    font-weight: 400;
    line-height: 1.6;
}

.first-love-words-quote {
    width: min(800px, 100%);
    margin: 96px auto 0;

    text-align: center;
}

.first-love-words-quote p {
    margin: 0;

    color: #a9909c;

    font-size: 0.94rem;
}

.first-love-words-quote strong {
    display: block;

    margin-top: 8px;

    color: #fff0f7;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(2.1rem, 4.8vw, 4rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.first-love-words-footer {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: min(700px, 100%);
    margin: 90px auto 0;

    text-align: center;
}

.first-love-words-footer span {
    color: #ca88df;

    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.first-love-words-footer strong {
    margin-top: 12px;

    color: #f8e9f0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(1.5rem, 3vw, 2.3rem);
    font-weight: 400;
}

.first-love-words-footer small {
    margin-top: 9px;

    color: #8f7785;

    font-size: 0.75rem;
    letter-spacing: 0.17em;
}

.first-love-words-footer i {
    margin-top: 19px;

    color: #ed82b2;

    font-size: 1.7rem;
    font-style: normal;

    animation:
        discordFooterArrow
        1.8s ease-in-out infinite;
}

@media (max-width: 900px) {
    .first-love-words-grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .sleepy-love-card,
    .real-love-card {
        width: min(680px, 100%);
        margin-right: auto;
        margin-left: auto;
    }
}

@media (max-width: 540px) {
    .first-love-words-section {
        padding:
            84px
            16px
            108px;
    }

    .first-love-words-header {
        margin-bottom: 52px;
    }

    .first-love-words-header h2 {
        font-size: clamp(2.7rem, 14vw, 4.5rem);
    }

    .first-love-words-header > p:last-child {
        font-size: 0.94rem;
        line-height: 1.75;
    }

    .sleepy-love-card {
        padding: 26px 21px;
        border-radius: 24px;
    }

    .real-love-card {
        padding: 9px;
        border-radius: 24px;
    }

    .real-love-chat {
        border-radius: 17px;
    }

    .sleepy-call-ui {
        margin-top: 28px;
    }

    .first-love-words-quote {
        margin-top: 76px;
    }

    .first-love-words-footer {
        margin-top: 74px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .first-love-words-footer i {
        animation: none;
    }
}

/* === EK DÜZENLEMELER: 7 ŞUBAT + 11/12 ŞUBAT AYRIMI + 14 ŞUBAT TEASER === */
.love-confession-grid-double {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: start;
}

.love-confession-visuals {
    display: grid;
    gap: 1.6rem;
}

.love-confession-setup {
    position: relative;
    overflow: hidden;
    border-radius: 1.75rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(14, 10, 26, 0.84);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.34);
}

.love-confession-setup img {
    display: block;
    width: 100%;
    object-fit: cover;
}

.love-confession-setup figcaption {
    padding: 1rem 1.1rem 1.15rem;
    color: rgba(252, 245, 255, 0.72);
    font-size: 0.96rem;
    line-height: 1.6;
}

.sleepy-love-image {
    margin-top: 1.6rem;
    overflow: hidden;
    border-radius: 1.35rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(10, 9, 16, 0.82);
}

.sleepy-love-image img {
    display: block;
    width: 100%;
    height: auto;
}

.sleepy-love-image figcaption {
    padding: 0.95rem 1rem 1.05rem;
    color: rgba(248, 238, 255, 0.76);
    font-size: 0.94rem;
    line-height: 1.55;
}

.funny-love-card {
    position: relative;
    overflow: hidden;
    border-radius: 1.75rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(23, 18, 35, 0.92), rgba(12, 10, 20, 0.95));
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28);
    align-self: start;
}

.funny-love-card img {
    display: block;
    width: 100%;
    height: auto;
}

.funny-love-card figcaption {
    padding: 1rem 1.05rem 1.15rem;
    color: rgba(249, 240, 255, 0.78);
    font-size: 0.96rem;
    line-height: 1.6;
}

.first-love-words-grid-eleven {
    grid-template-columns: minmax(0, 1.02fr) minmax(280px, 0.78fr);
    align-items: start;
}

.first-love-words-grid-twelve {
    grid-template-columns: minmax(0, 1fr);
}

.first-date-teaser-section {
    position: relative;
    overflow: hidden;
    padding: 7rem 0 8rem;
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 98, 186, 0.16), transparent 38%),
        radial-gradient(circle at 80% 26%, rgba(130, 72, 255, 0.18), transparent 34%),
        linear-gradient(180deg, #08070d 0%, #050409 100%);
}

.first-date-teaser-glow {
    position: absolute;
    border-radius: 999px;
    filter: blur(68px);
    opacity: 0.34;
    pointer-events: none;
}

.first-date-teaser-glow-one {
    width: 20rem;
    height: 20rem;
    left: -6rem;
    top: 2rem;
    background: rgba(255, 104, 182, 0.28);
}

.first-date-teaser-glow-two {
    width: 24rem;
    height: 24rem;
    right: -7rem;
    bottom: -6rem;
    background: rgba(153, 95, 255, 0.22);
}

.first-date-teaser-shell {
    position: relative;
    z-index: 1;
    width: min(92%, 820px);
    margin: 0 auto;
    padding: clamp(2rem, 2.5vw, 2.8rem);
    border-radius: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(16, 12, 28, 0.7);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.35);
    text-align: center;
}

.first-date-teaser-shell h2 {
    margin: 1.2rem 0 1rem;
    color: #fcf4ff;
    font-size: clamp(2.6rem, 6vw, 4.8rem);
    line-height: 0.96;
    letter-spacing: -0.05em;
}

.first-date-teaser-shell h2 em {
    color: #ff88d0;
    font-style: italic;
    font-weight: 600;
}

.first-date-teaser-shell p:last-child {
    width: min(100%, 560px);
    margin: 0 auto;
    color: rgba(247, 238, 255, 0.76);
    font-size: 1.04rem;
    line-height: 1.85;
}

@media (max-width: 980px) {
    .love-confession-grid-double,
    .first-love-words-grid-eleven {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 768px) {
    .love-confession-setup,
    .funny-love-card,
    .sleepy-love-image {
        border-radius: 1.25rem;
    }

    .first-date-teaser-section {
        padding: 5.5rem 0 6rem;
    }

    .first-date-teaser-shell {
        width: min(92%, 100%);
        border-radius: 1.5rem;
        padding: 1.75rem 1.2rem;
    }
}

/* === 14 ŞUBAT YENİ SAYFAYA GEÇİŞ === */
.first-date-teaser-eyebrow {
    margin: 0 0 1.25rem;
    color: rgba(255, 226, 241, 0.72);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.first-date-teaser-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.72rem;

    min-width: 12.5rem;
    margin-top: 2rem;
    padding: 0.95rem 1.45rem;

    border: 1px solid rgba(255, 187, 219, 0.34);
    border-radius: 999px;

    color: #fff6fb;
    background:
        linear-gradient(
            120deg,
            rgba(130, 55, 103, 0.94),
            rgba(218, 75, 143, 0.95)
        );

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.3),
        0 0 32px rgba(227, 77, 148, 0.16);

    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;

    transition:
        transform 240ms ease,
        box-shadow 240ms ease,
        border-color 240ms ease;
}

.first-date-teaser-button i {
    color: #ffd4e8;
    font-size: 1.12rem;
    font-style: normal;
}

.first-date-teaser-button:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 211, 231, 0.6);
    box-shadow:
        0 24px 58px rgba(0, 0, 0, 0.35),
        0 0 42px rgba(227, 77, 148, 0.25);
}

.first-date-teaser-button:focus-visible {
    outline: 2px solid #ffc2dd;
    outline-offset: 5px;
}

/* ================================
   STORY SAYFA GEÇİŞİ
================================ */

body::after {
    content: "";

    position: fixed;
    inset: 0;
    z-index: 99999;

    background:
        radial-gradient(
            circle at center,
            rgba(222, 67, 140, 0.18),
            transparent 38%
        ),
        #050307;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 900ms ease,
        visibility 900ms ease;
}

body.story-page-is-leaving::after {
    opacity: 1;
    visibility: visible;
}

.first-date-teaser-button.is-transitioning {
    pointer-events: none;
    filter: brightness(1.08);
    transform: translateY(-2px) scale(0.98);
}


/* İlk FiveM karesi ve sabah albümü son düzenlemeleri */
.photo-scene-card {
    width: 100%;
    max-height: 78dvh;
}

.photo-scene-main-image {
    max-height: 78dvh;
    object-fit: contain;
}

.turning-point-gallery-copy p,
.turning-point-gallery-copy strong {
    max-width: 920px;
}

@media (max-width: 780px) {
    .photo-scene-card,
    .photo-scene-main-image {
        max-height: 54dvh;
    }

    .turning-point-gallery-copy {
        grid-column: 1 / -1;
        min-height: 210px;
    }
}