:root {
    --home-bg: #060408;
    --home-panel: #120b14;
    --home-text: #fff4f9;
    --home-muted: #bba5b0;
    --home-pink: #ef80b3;
    --home-purple: #9c73cf;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    color: var(--home-text);
    background: var(--home-bg);

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;
}

a,
button {
    font: inherit;
}

.same-home-page {
    overflow: hidden;
}

.same-home-hero {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 100dvh;
    padding:
        clamp(90px, 10vw, 145px)
        clamp(20px, 7vw, 100px);

    overflow: hidden;

    background:
        radial-gradient(
            circle at 18% 22%,
            rgba(225, 67, 140, 0.2),
            transparent 32%
        ),
        radial-gradient(
            circle at 82% 72%,
            rgba(120, 73, 170, 0.19),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #09050b,
            #050307
        );
}

.same-home-glow {
    position: absolute;

    width: 520px;
    height: 520px;

    border-radius: 50%;

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

.same-home-glow-one {
    top: -260px;
    left: -290px;

    background: rgba(229, 69, 142, 0.26);
}

.same-home-glow-two {
    right: -310px;
    bottom: -250px;

    background: rgba(129, 74, 177, 0.23);
}

.same-home-hero-shell {
    position: relative;
    z-index: 2;

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

    text-align: center;
}

.same-home-back {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 55px;

    color: #ad96a1;

    font-size: 0.73rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

.same-home-kicker {
    margin: 0 0 20px;

    color: #df79a6;

    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}

.same-home-hero h1 {
    margin: 0;

    color: #fff7fb;

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

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

.same-home-hero h1 em {
    display: block;

    margin-top: 9px;

    color: var(--home-pink);
    font-weight: 400;
    font-style: italic;

    text-shadow:
        0 0 36px rgba(239, 128, 179, 0.22);
}

.same-home-hero-shell > p:not(.same-home-kicker) {
    max-width: 700px;
    margin: 32px auto 0;

    color: #c4adb8;

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

.same-home-periods {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 13px;

    margin-top: 31px;

    color: #a68e9a;

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

.same-home-periods i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--home-pink);
    box-shadow:
        0 0 12px rgba(239, 128, 179, 0.7);
}

.same-home-scroll {
    display: inline-flex;
    align-items: center;
    gap: 11px;

    margin-top: 38px;

    color: #f8e1eb;

    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-decoration: none;
}

.same-home-scroll b {
    color: var(--home-pink);

    font-size: 1.2rem;
    font-weight: 400;

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

.same-home-section {
    position: relative;

    padding:
        clamp(95px, 11vw, 165px)
        clamp(20px, 7vw, 100px);

    background:
        radial-gradient(
            circle at 12% 30%,
            rgba(213, 64, 133, 0.13),
            transparent 31%
        ),
        linear-gradient(
            180deg,
            #050307,
            #09050b
        );
}

.same-home-section-second {
    background:
        radial-gradient(
            circle at 88% 24%,
            rgba(113, 67, 165, 0.16),
            transparent 33%
        ),
        linear-gradient(
            180deg,
            #09050b,
            #050307
        );
}

.same-home-shell {
    width: min(1180px, 100%);
    margin: 0 auto;
}

.same-home-header {
    width: min(820px, 100%);
    margin-bottom: 65px;
}

.same-home-header-centered {
    margin-right: auto;
    margin-left: auto;

    text-align: center;
}

.same-home-header > p:first-child {
    display: flex;
    align-items: center;
    gap: 12px;

    margin: 0 0 18px;

    color: #d17ba5;

    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.same-home-header-centered > p:first-child {
    justify-content: center;
}

.same-home-header h2 {
    margin: 0;

    color: #fff3f9;

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

    font-size: clamp(2.9rem, 6.5vw, 6.2rem);
    font-weight: 400;
    line-height: 0.97;
    letter-spacing: -0.063em;
}

.same-home-header h2 em {
    color: var(--home-pink);
    font-weight: 400;
    font-style: italic;
}

.same-home-header > p:last-child {
    max-width: 680px;
    margin: 28px 0 0;

    color: var(--home-muted);

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

.same-home-header-centered > p:last-child {
    margin-right: auto;
    margin-left: auto;
}

.same-home-grid {
    display: grid;
    grid-template-columns:
        minmax(300px, 0.82fr)
        minmax(350px, 1.18fr);

    gap: clamp(30px, 5vw, 65px);
    align-items: stretch;
}

.same-home-copy-card {
    padding: clamp(27px, 4vw, 44px);

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

    background:
        linear-gradient(
            145deg,
            rgba(42, 21, 39, 0.9),
            rgba(16, 11, 20, 0.95)
        );

    box-shadow:
        0 27px 80px rgba(0, 0, 0, 0.3);
}

.same-home-copy-card > span {
    color: #df79a6;

    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.same-home-copy-card h3 {
    margin: 23px 0 0;

    color: #fff0f7;

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

    font-size: clamp(2rem, 4.2vw, 3.7rem);
    font-weight: 400;
    line-height: 1.05;
}

.same-home-copy-card p {
    margin: 25px 0 0;

    color: #bca5b1;

    line-height: 1.82;
}

.same-home-copy-card strong {
    display: block;

    margin-top: 24px;

    color: #f5dbe7;

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

    font-size: 1.08rem;
    font-weight: 400;
    line-height: 1.58;
}

.same-home-placeholder-grid,
.same-home-placeholder-wide {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 15px;
}

.same-home-placeholder-grid article,
.same-home-placeholder-wide article {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    min-height: 250px;
    padding: 24px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 25px;

    background:
        radial-gradient(
            circle at 75% 18%,
            rgba(210, 78, 147, 0.16),
            transparent 35%
        ),
        linear-gradient(
            155deg,
            rgba(37, 21, 38, 0.97),
            rgba(12, 9, 16, 0.98)
        );

    box-shadow:
        0 21px 65px rgba(0, 0, 0, 0.25);
}

.same-home-placeholder-grid article:first-child {
    grid-row: span 2;
    min-height: 515px;
}

.same-home-placeholder-wide {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}

.same-home-placeholder-wide article {
    min-height: 300px;
}

.same-home-placeholder-grid span,
.same-home-placeholder-wide span {
    color: #fff0f7;

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

    font-size: 1.5rem;
}

.same-home-placeholder-grid code,
.same-home-placeholder-wide code {
    margin-top: 10px;

    color: #95808c;

    font-family:
        "Courier New",
        monospace;

    font-size: 0.68rem;
    line-height: 1.5;
    word-break: break-all;
}

.same-home-quote {
    width: min(860px, 100%);
    margin: 90px auto 0;

    color: #f4dce7;

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

    font-size: clamp(1.7rem, 3.8vw, 3.3rem);
    font-weight: 400;
    font-style: italic;
    line-height: 1.35;
    text-align: center;
}

.same-home-ending {
    padding:
        clamp(100px, 12vw, 180px)
        20px;

    background:
        radial-gradient(
            circle at center,
            rgba(224, 69, 140, 0.14),
            transparent 38%
        ),
        #050307;
}

.same-home-ending-shell {
    width: min(850px, 100%);
    margin: 0 auto;

    text-align: center;
}

.same-home-ending-shell p {
    margin: 0;

    color: #b89faa;

    font-size: 0.92rem;
}

.same-home-ending-shell h2 {
    margin: 17px 0 0;

    color: #fff3f9;

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

    font-size: clamp(2.8rem, 6.8vw, 6.2rem);
    font-weight: 400;
    line-height: 0.96;
    letter-spacing: -0.06em;
}

.same-home-ending-shell h2 em {
    display: block;

    color: var(--home-pink);
    font-weight: 400;
    font-style: italic;
}

.same-home-ending-shell span {
    display: block;

    margin-top: 26px;

    color: #927d88;

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

.same-home-music-start {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9998;

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

    min-height: 47px;
    padding: 0 17px;

    border: 1px solid rgba(255, 190, 222, 0.28);
    border-radius: 999px;

    color: #fff3f9;
    background:
        linear-gradient(
            120deg,
            rgba(94, 43, 111, 0.95),
            rgba(213, 70, 135, 0.95)
        );

    box-shadow:
        0 18px 46px rgba(0, 0, 0, 0.36);

    font: inherit;
    cursor: pointer;
}

.same-home-music-start[hidden] {
    display: none;
}

.same-home-reveal {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(5px);

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

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

@keyframes sameHomeArrow {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(5px);
    }
}

@media (max-width: 850px) {
    .same-home-grid,
    .same-home-placeholder-wide {
        grid-template-columns: 1fr;
    }

    .same-home-placeholder-grid {
        grid-template-columns: 1fr;
    }

    .same-home-placeholder-grid article:first-child {
        grid-row: auto;
        min-height: 340px;
    }

    .same-home-placeholder-wide article {
        min-height: 270px;
    }
}

@media (max-width: 560px) {
    .same-home-hero {
        padding-right: 16px;
        padding-left: 16px;
    }

    .same-home-section {
        padding-right: 16px;
        padding-left: 16px;
    }

    .same-home-music-start {
        right: 13px;
        bottom: 13px;
    }
}


/* ================================
   24 NİSAN — AYNI EVDEKİ İLK GÜN
================================ */

.same-home-april-start {
    overflow: hidden;

    background:
        radial-gradient(
            circle at 84% 18%,
            rgba(225, 68, 137, 0.15),
            transparent 31%
        ),
        radial-gradient(
            circle at 12% 78%,
            rgba(116, 68, 163, 0.14),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #050307,
            #09050b
        );
}

.same-home-april-start::before {
    content: "";

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

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

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(234, 111, 164, 0.45),
            transparent
        );

    transform: translateX(-50%);
}

.same-home-april-glow {
    position: absolute;
    top: 10%;
    right: -340px;

    width: 620px;
    height: 620px;

    border-radius: 50%;

    background: rgba(221, 73, 141, 0.13);

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

.same-home-april-layout {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns:
        minmax(360px, 0.92fr)
        minmax(420px, 1.08fr);

    gap: clamp(28px, 5vw, 62px);
    align-items: stretch;
}

.same-home-flower-photo {
    position: relative;

    min-width: 0;
    min-height: 720px;
    margin: 0;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 31px;

    background: #0d0910;

    box-shadow:
        0 34px 100px rgba(0, 0, 0, 0.38);

    cursor: zoom-in;
}

.same-home-flower-photo::after {
    content: "Büyüt";

    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 4;

    padding: 7px 10px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;

    color: rgba(255, 241, 248, 0.84);
    background: rgba(8, 5, 10, 0.64);

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

    opacity: 0;
    transform: translateY(-5px);

    transition:
        opacity 220ms ease,
        transform 220ms ease;

    backdrop-filter: blur(10px);
}

.same-home-flower-photo:hover::after,
.same-home-flower-photo:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

.same-home-flower-photo img {
    display: block;

    width: 100%;
    height: 100%;

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

    transition:
        transform 760ms
        cubic-bezier(0.22, 1, 0.36, 1);
}

.same-home-flower-photo:hover img {
    transform: scale(1.035);
}

.same-home-flower-photo figcaption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;

    padding:
        90px 24px 25px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(6, 4, 8, 0.92)
        );
}

.same-home-flower-photo figcaption span,
.same-home-flower-photo figcaption small {
    display: block;

    color: #d589ad;

    font-size: 0.65rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.same-home-flower-photo figcaption strong {
    display: block;

    margin-top: 8px;

    color: #fff2f8;

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

    font-size: clamp(1.6rem, 3.2vw, 2.55rem);
    font-weight: 400;
    line-height: 1.1;
}

.same-home-flower-photo figcaption small {
    margin-top: 8px;

    color: #a68f9a;
    letter-spacing: 0.06em;
    text-transform: none;
}

.same-home-april-story {
    display: grid;
    grid-template-rows:
        auto 1fr;
    gap: 17px;
}

.same-home-april-card {
    padding: clamp(28px, 5vw, 46px);

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

    background:
        radial-gradient(
            circle at 84% 13%,
            rgba(224, 75, 143, 0.14),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(43, 21, 38, 0.92),
            rgba(15, 10, 18, 0.97)
        );

    box-shadow:
        0 30px 88px rgba(0, 0, 0, 0.33);
}

.same-home-april-card > p:first-child {
    margin: 0;

    color: #d17ba5;

    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.19em;
    text-transform: uppercase;
}

.same-home-april-card h3 {
    margin: 21px 0 0;

    color: #fff0f7;

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

    font-size: clamp(2rem, 4.4vw, 3.75rem);
    font-weight: 400;
    line-height: 1.05;
}

.same-home-april-card >
p:not(:first-child) {
    margin: 25px 0 0;

    color: #baa3ae;

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

.same-home-april-card > strong {
    display: block;

    margin-top: 25px;

    color: #f1d9e4;

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

    font-size: 1.08rem;
    font-weight: 400;
    line-height: 1.58;
}

.same-home-april-details {
    display: grid;
    gap: 12px;
}

.same-home-april-details article {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 16px;

    padding: 17px;

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

    background:
        linear-gradient(
            145deg,
            rgba(31, 17, 27, 0.89),
            rgba(11, 8, 13, 0.96)
        );

    box-shadow:
        0 22px 65px rgba(0, 0, 0, 0.24);
}

.same-home-april-details article > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    border: 1px solid rgba(238, 127, 179, 0.19);
    border-radius: 50%;

    color: #eb88b4;
    background: rgba(67, 26, 50, 0.4);

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

    font-size: 0.76rem;
}

.same-home-april-details small {
    display: block;

    color: #9e7086;

    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.same-home-april-details strong {
    display: block;

    margin-top: 6px;

    color: #f8e8f0;

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

    font-size: clamp(1.25rem, 2.6vw, 1.9rem);
    font-weight: 400;
}

.same-home-april-details p {
    margin: 7px 0 0;

    color: #a58d99;

    font-size: 0.82rem;
    line-height: 1.65;
}

.same-home-april-quote {
    width: min(820px, 100%);
    margin: 105px auto 0;

    text-align: center;
}

.same-home-april-quote p {
    margin: 0;

    color: #a9919d;

    font-size: 0.91rem;
}

.same-home-april-quote strong {
    display: block;

    margin-top: 13px;

    color: #f7deea;

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

    font-size: clamp(1.9rem, 4.5vw, 3.75rem);
    font-weight: 400;
    line-height: 1.23;
}

.same-home-first-period-intro {
    width: min(760px, 100%);
    margin: 85px auto 0;
    padding-top: 34px;

    border-top: 1px solid rgba(235, 118, 170, 0.16);

    text-align: center;
}

.same-home-first-period-intro span {
    color: #d17ba5;

    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.19em;
    text-transform: uppercase;
}

.same-home-first-period-intro p {
    margin: 12px 0 0;

    color: #d9c1cc;

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

    font-size: clamp(1.45rem, 3vw, 2.3rem);
}

.same-home-first-period-intro i {
    display: block;

    margin-top: 18px;

    color: var(--home-pink);

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

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


/* ================================
   FOTOĞRAF LIGHTBOX
================================ */

.same-home-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;

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

    padding: clamp(24px, 5vw, 60px);

    background: rgba(4, 2, 6, 0.94);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 250ms ease,
        visibility 250ms ease;

    backdrop-filter: blur(20px);
}

.same-home-lightbox[hidden] {
    display: none;
}

.same-home-lightbox.is-visible {
    opacity: 1;
    visibility: visible;
}

.same-home-lightbox-content {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: min(1120px, 88vw);
    max-height: 88dvh;
    margin: 0;
}

.same-home-lightbox-content img {
    display: block;

    max-width: 100%;
    max-height: calc(88dvh - 70px);

    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);
}

.same-home-lightbox-content figcaption {
    margin-top: 15px;

    color: #dbc3cf;

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

    text-align: center;
}

.same-home-lightbox-close {
    position: absolute;
    top: 23px;
    right: 25px;
    z-index: 3;

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

    width: 48px;
    height: 48px;

    border: 1px solid rgba(255, 187, 219, 0.17);
    border-radius: 50%;

    color: #fff0f7;
    background: rgba(24, 13, 24, 0.76);

    font-size: 2rem;

    cursor: pointer;

    backdrop-filter: blur(12px);
}

body.same-home-lightbox-open {
    overflow: hidden;
}


/* ================================
   24 NİSAN RESPONSIVE
================================ */

@media (max-width: 920px) {
    .same-home-april-layout {
        grid-template-columns: 1fr;
    }

    .same-home-flower-photo {
        width: min(100%, 690px);
        min-height: 680px;
        margin: 0 auto;
    }

    .same-home-april-story {
        width: min(100%, 760px);
        margin: 0 auto;
    }
}

@media (max-width: 560px) {
    .same-home-flower-photo {
        min-height: 520px;
        border-radius: 25px;
    }

    .same-home-april-card {
        border-radius: 24px;
    }

    .same-home-april-details article {
        grid-template-columns: 44px 1fr;
        gap: 12px;

        padding: 14px;
        border-radius: 19px;
    }

    .same-home-april-details article > span {
        width: 42px;
        height: 42px;
    }

    .same-home-april-quote,
    .same-home-first-period-intro {
        margin-top: 72px;
    }

    .same-home-lightbox {
        padding: 68px 14px 24px;
    }
}


/* ================================
   İLK UZUN BİRLİKTE YAŞAMA DÖNEMİ
================================ */

.same-home-long-period {
    overflow: hidden;

    background:
        radial-gradient(
            circle at 12% 15%,
            rgba(217, 67, 137, 0.14),
            transparent 31%
        ),
        radial-gradient(
            circle at 86% 75%,
            rgba(114, 69, 164, 0.15),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #09050b,
            #050307,
            #09050b
        );
}

.same-home-long-period::before {
    content: "";

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

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

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(234, 111, 164, 0.43),
            transparent
        );

    transform: translateX(-50%);
}

.same-home-long-glow {
    position: absolute;

    width: 620px;
    height: 620px;

    border-radius: 50%;

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

.same-home-long-glow-one {
    top: 8%;
    left: -360px;

    background: rgba(220, 72, 140, 0.13);
}

.same-home-long-glow-two {
    right: -370px;
    bottom: 10%;

    background: rgba(112, 68, 162, 0.14);
}

.same-home-long-counts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 11px;

    margin-top: 25px;

    color: #c6aab7;

    font-size: 0.69rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.same-home-long-counts b {
    font-weight: 600;
}

.same-home-long-counts i {
    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: var(--home-pink);

    box-shadow:
        0 0 10px rgba(239, 128, 179, 0.65);
}

.same-home-long-intro {
    width: min(820px, 100%);
    margin-bottom: 45px;
}

.same-home-long-intro > p {
    margin: 0;

    color: #d17ba5;

    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.19em;
    text-transform: uppercase;
}

.same-home-long-intro > strong {
    display: block;

    margin-top: 14px;

    color: #f8e6ef;

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

    font-size: clamp(1.9rem, 4.5vw, 3.8rem);
    font-weight: 400;
    line-height: 1.13;
}

.same-home-long-intro > span {
    display: block;

    margin-top: 18px;

    color: #a9919d;

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

.same-home-long-grid {
    display: grid;
    grid-template-columns:
        repeat(12, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: 15px;

    position: relative;
    z-index: 2;
}

.same-home-long-grid-second {
    margin-top: 0;
}

.same-home-long-media {
    position: relative;

    min-width: 0;
    min-height: 360px;
    margin: 0;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 25px;

    background: #0d0910;

    box-shadow:
        0 24px 72px rgba(0, 0, 0, 0.31);
}

.same-home-media-third {
    grid-column: span 4;
    min-height: 390px;
}

.same-home-media-half {
    grid-column: span 6;
    min-height: 420px;
}

.same-home-media-wide {
    grid-column: 1 / -1;
    min-height: 470px;
}

.same-home-media-feature {
    grid-column: span 8;
    min-height: 560px;
}

.same-home-long-photo {
    cursor: zoom-in;
}

.same-home-long-photo::after,
.same-home-holiday-photo::after {
    content: "Büyüt";

    position: absolute;
    top: 13px;
    right: 13px;
    z-index: 4;

    padding: 7px 10px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;

    color: rgba(255, 241, 248, 0.84);
    background: rgba(8, 5, 10, 0.64);

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

    opacity: 0;
    transform: translateY(-5px);

    transition:
        opacity 220ms ease,
        transform 220ms ease;

    backdrop-filter: blur(10px);
}

.same-home-long-photo:hover::after,
.same-home-long-photo:focus-visible::after,
.same-home-holiday-photo:hover::after,
.same-home-holiday-photo:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

.same-home-long-photo img,
.same-home-holiday-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 760ms
        cubic-bezier(0.22, 1, 0.36, 1);
}

.same-home-long-photo:hover img,
.same-home-holiday-photo:hover img {
    transform: scale(1.035);
}

.same-home-long-photo figcaption,
.same-home-holiday-photo figcaption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;

    padding: 62px 19px 18px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(6, 4, 8, 0.91)
        );
}

.same-home-long-photo figcaption span,
.same-home-holiday-photo figcaption span {
    display: block;

    color: #d58aad;

    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.same-home-long-photo figcaption strong,
.same-home-holiday-photo figcaption strong {
    display: block;

    margin-top: 7px;

    color: #fff2f8;

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

    font-size: clamp(1.25rem, 2.7vw, 2rem);
    font-weight: 400;
    line-height: 1.1;
}

.same-home-long-video {
    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(97, 51, 103, 0.17),
            transparent 55%
        ),
        #070509;
}

.same-home-long-video > video {
    position: relative;
    z-index: 1;

    display: block;

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

    object-fit: contain;
    background: #070509;

    opacity: 0;
    visibility: hidden;

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

.same-home-long-video.is-video-ready > video {
    opacity: 1;
    visibility: visible;
}

.same-home-video-placeholder {
    position: absolute;
    inset: 0;
    z-index: 2;

    display: flex;
    align-items: flex-end;
    gap: 16px;

    padding: 22px;

    background:
        radial-gradient(
            circle at 78% 16%,
            rgba(221, 76, 143, 0.16),
            transparent 35%
        ),
        linear-gradient(
            155deg,
            rgba(36, 19, 36, 0.96),
            rgba(9, 7, 12, 0.98)
        );

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

.same-home-long-video.is-video-ready
.same-home-video-placeholder {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.same-home-video-placeholder > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    flex-shrink: 0;

    border: 1px solid rgba(239, 128, 179, 0.2);
    border-radius: 50%;

    color: #ef8bb7;
    background: rgba(60, 27, 50, 0.42);

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

.same-home-video-placeholder small,
.same-home-video-placeholder strong,
.same-home-video-placeholder code {
    display: block;
}

.same-home-video-placeholder small {
    color: #a0778b;

    font-size: 0.61rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.same-home-video-placeholder strong {
    margin-top: 7px;

    color: #f9e8f0;

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

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

.same-home-video-placeholder code {
    margin-top: 8px;

    color: #8e7782;

    font-family:
        "Courier New",
        monospace;

    font-size: 0.65rem;
    line-height: 1.5;
    word-break: break-all;
}


/* ================================
   10 MAYIS İŞARETİ
================================ */

.same-home-may-marker {
    position: relative;
    z-index: 2;

    width: min(900px, 100%);
    margin:
        clamp(100px, 11vw, 145px)
        auto;

    padding:
        clamp(45px, 7vw, 72px)
        clamp(25px, 6vw, 60px);

    border: 1px solid rgba(241, 153, 198, 0.15);
    border-radius: 34px;

    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(230, 92, 155, 0.16),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            rgba(42, 20, 39, 0.9),
            rgba(13, 9, 16, 0.97)
        );

    box-shadow:
        0 35px 105px rgba(0, 0, 0, 0.37),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);

    text-align: center;
}

.same-home-may-marker-line {
    position: absolute;
    top: 0;
    left: 50%;

    width: 1px;
    height: 46px;

    background:
        linear-gradient(
            180deg,
            rgba(239, 128, 179, 0.75),
            transparent
        );

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

.same-home-may-marker > p {
    margin: 0;

    color: #d17ba5;

    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.same-home-may-marker time {
    display: block;

    margin-top: 15px;

    color: #fff0f7;

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

    font-size: clamp(3rem, 7vw, 6.3rem);
    line-height: 0.95;
    letter-spacing: -0.055em;
}

.same-home-may-marker h3 {
    margin: 25px 0 0;

    color: #f5dce7;

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

    font-size: clamp(1.6rem, 3.6vw, 3rem);
    font-weight: 400;
    line-height: 1.2;
}

.same-home-may-marker h3 em {
    color: var(--home-pink);
    font-weight: 400;
    font-style: italic;
}

.same-home-may-marker > span {
    display: block;

    max-width: 620px;
    margin: 18px auto 0;

    color: #a9919d;

    font-size: 0.84rem;
    line-height: 1.75;
}

.same-home-may-marker > i {
    display: block;

    margin-top: 24px;

    color: #ef8bb7;

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

    text-shadow:
        0 0 18px rgba(239, 128, 179, 0.55);
}


/* ================================
   DÖNEM ALINTISI
================================ */

.same-home-long-quote {
    width: min(850px, 100%);
    margin: 105px auto 0;

    text-align: center;
}

.same-home-long-quote p {
    margin: 0;

    color: #a9919d;

    font-size: 0.92rem;
}

.same-home-long-quote strong {
    display: block;

    margin-top: 13px;

    color: #f7deea;

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

    font-size: clamp(1.9rem, 4.6vw, 3.8rem);
    font-weight: 400;
    line-height: 1.23;
}


/* ================================
   BAYRAM TATİLİ ALANI
================================ */

.same-home-holiday {
    position: relative;
    z-index: 2;

    margin-top: clamp(105px, 12vw, 160px);

    overflow: hidden;

    border: 1px solid rgba(255, 231, 159, 0.2);
    border-radius: 35px;

    background:
        radial-gradient(
            circle at 88% 14%,
            rgba(255, 196, 83, 0.16),
            transparent 34%
        ),
        radial-gradient(
            circle at 12% 80%,
            rgba(239, 85, 158, 0.19),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(51, 25, 47, 0.98),
            rgba(21, 13, 28, 0.99)
        );

    box-shadow:
        0 38px 115px rgba(0, 0, 0, 0.39);
}

.same-home-holiday-marquee {
    overflow: hidden;

    padding: 13px 0;

    border-bottom: 1px solid rgba(255, 229, 157, 0.17);

    color: #ffd77f;
    background: rgba(255, 194, 72, 0.08);

    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    white-space: nowrap;
}

.same-home-holiday-marquee span {
    display: inline-block;

    padding-left: 100%;

    animation:
        sameHomeHolidayMarquee
        18s linear infinite;
}

.same-home-holiday-layout {
    display: grid;
    grid-template-columns:
        minmax(360px, 1.06fr)
        minmax(330px, 0.94fr);

    gap: clamp(25px, 5vw, 58px);
    align-items: stretch;

    padding: clamp(22px, 5vw, 45px);
}

.same-home-holiday-photo {
    position: relative;

    min-height: 570px;
    margin: 0;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 27px;

    background: #0d0910;

    box-shadow:
        0 28px 82px rgba(0, 0, 0, 0.32);

    cursor: zoom-in;
}

.same-home-holiday-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: clamp(15px, 3vw, 30px);
}

.same-home-holiday-stickers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-bottom: 28px;
}

.same-home-holiday-stickers span {
    display: inline-flex;
    align-items: center;

    min-height: 30px;
    padding: 0 12px;

    border: 1px solid rgba(255, 225, 145, 0.22);
    border-radius: 999px;

    color: #ffe39d;
    background: rgba(255, 193, 68, 0.1);

    font-size: 0.61rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;

    transform: rotate(-2deg);
}

.same-home-holiday-stickers span:nth-child(2) {
    color: #ffc0dc;
    background: rgba(238, 92, 158, 0.11);

    transform: rotate(2deg);
}

.same-home-holiday-stickers span:nth-child(3) {
    transform: rotate(-1deg);
}

.same-home-holiday-copy > p:first-of-type {
    margin: 0;

    color: #ffd27a;

    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.same-home-holiday-copy h3 {
    margin: 18px 0 0;

    color: #fff5fa;

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

    font-size: clamp(2.2rem, 5vw, 4.5rem);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.same-home-holiday-copy >
p:not(:first-of-type) {
    margin: 25px 0 0;

    color: #c1a8b5;

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

.same-home-holiday-copy > strong {
    display: block;

    margin-top: 25px;

    color: #ffe2b3;

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

    font-size: 1.08rem;
    font-weight: 400;
    line-height: 1.58;
}

@keyframes sameHomeHolidayMarquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}


/* ================================
   LIGHTBOX NAVİGASYONU
================================ */

.same-home-lightbox-navigation {
    position: absolute;
    top: 50%;
    z-index: 3;

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

    width: 54px;
    height: 54px;

    border: 1px solid rgba(255, 187, 219, 0.17);
    border-radius: 50%;

    color: #fff0f7;
    background: rgba(24, 13, 24, 0.76);

    font-size: 2.6rem;

    cursor: pointer;

    transform: translateY(-50%);

    backdrop-filter: blur(12px);
}

.same-home-lightbox-previous {
    left: 24px;
}

.same-home-lightbox-next {
    right: 24px;
}


/* ================================
   İLK UZUN DÖNEM RESPONSIVE
================================ */

@media (max-width: 950px) {
    .same-home-long-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .same-home-media-third,
    .same-home-media-half,
    .same-home-media-feature {
        grid-column: auto;
    }

    .same-home-media-wide {
        grid-column: 1 / -1;
    }

    .same-home-holiday-layout {
        grid-template-columns: 1fr;
    }

    .same-home-holiday-photo,
    .same-home-holiday-copy {
        width: min(100%, 760px);
        margin: 0 auto;
    }
}

@media (max-width: 620px) {
    .same-home-long-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .same-home-media-third,
    .same-home-media-half,
    .same-home-media-wide,
    .same-home-media-feature {
        grid-column: 1;
        min-height: 350px;
    }

    .same-home-long-video {
        min-height: 330px;
    }

    .same-home-may-marker {
        margin-top: 80px;
        margin-bottom: 80px;

        padding: 42px 20px;
        border-radius: 27px;
    }

    .same-home-long-quote {
        margin-top: 76px;
    }

    .same-home-holiday {
        margin-top: 85px;
        border-radius: 27px;
    }

    .same-home-holiday-layout {
        padding: 16px;
    }

    .same-home-holiday-photo {
        min-height: 430px;
        border-radius: 22px;
    }

    .same-home-holiday-copy {
        padding: 20px 8px 16px;
    }

    .same-home-lightbox-navigation {
        top: auto;
        bottom: 18px;

        width: 46px;
        height: 46px;

        transform: none;
    }

    .same-home-lightbox-previous {
        left: calc(50% - 58px);
    }

    .same-home-lightbox-next {
        right: calc(50% - 58px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .same-home-holiday-marquee span {
        animation: none;
        padding-left: 0;
    }
}


/* ================================
   10 MAYIS ÖZEL ARŞİVİ
================================ */

.same-home-may-archive {
    position: relative;
    z-index: 2;

    margin: -10px 0 90px;
    padding:
        clamp(26px, 5vw, 40px);

    border: 1px solid rgba(244, 172, 208, 0.12);
    border-radius: 30px;

    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(234, 102, 163, 0.12),
            transparent 34%
        ),
        radial-gradient(
            circle at 15% 82%,
            rgba(113, 69, 164, 0.14),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(28, 16, 29, 0.92),
            rgba(10, 8, 14, 0.97)
        );

    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.same-home-may-archive-header {
    width: min(820px, 100%);
    margin-bottom: 28px;
}

.same-home-may-archive-header > p {
    margin: 0;

    color: #ee96be;

    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.same-home-may-archive-header h3 {
    margin: 14px 0 0;

    color: #fff0f8;

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

    font-size: clamp(2rem, 4.6vw, 4rem);
    font-weight: 400;
    line-height: 1.05;
}

.same-home-may-archive-header h3 em {
    display: block;

    color: var(--home-pink);
    font-weight: 400;
    font-style: italic;
}

.same-home-may-archive-header > span {
    display: block;

    margin-top: 16px;

    color: #af95a2;

    font-size: 0.88rem;
    line-height: 1.72;
}

.same-home-may-archive-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: 15px;
}

@media (max-width: 950px) {
    .same-home-may-archive-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .same-home-may-archive {
        margin-bottom: 70px;
        padding: 18px;
        border-radius: 24px;
    }

    .same-home-may-archive-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}


/* ================================
   İKİNCİ UZUN DÖNEM — GÖRSELSİZ
================================ */

.same-home-section-second {
    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(83, 70, 102, 0.12),
            transparent 31%
        ),
        linear-gradient(
            180deg,
            #070508,
            #040305,
            #070508
        );
}

.same-home-section-second::before {
    content: "";

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

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

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(139, 118, 153, 0.34),
            transparent
        );

    transform: translateX(-50%);
}

.same-home-second-static {
    position: absolute;
    inset: -40%;

    width: 180%;
    height: 180%;

    opacity: 0.02;
    pointer-events: none;

    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.45) 0 1px,
            transparent 1px 5px
        );

    animation:
        sameHomeSecondStatic
        520ms steps(2) infinite;
}

.same-home-second-empty {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-top: 25px;
    padding: 11px 16px;

    border: 1px dashed rgba(160, 139, 172, 0.23);
    border-radius: 999px;

    color: #9c899f;
    background: rgba(15, 12, 18, 0.58);

    font-size: 0.7rem;
    letter-spacing: 0.04em;
}

.same-home-second-empty i {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 23px;
    height: 23px;

    border: 1px solid rgba(166, 142, 179, 0.2);
    border-radius: 50%;

    color: #c0a4c8;
    font-style: normal;
}

.same-home-second-state {
    display: grid;
    grid-template-columns:
        minmax(330px, 0.92fr)
        minmax(370px, 1.08fr);

    gap: clamp(26px, 5vw, 58px);

    position: relative;
    z-index: 2;
}

.same-home-second-main {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-height: 590px;
    padding: clamp(29px, 5vw, 49px);

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

    background:
        radial-gradient(
            circle at 83% 13%,
            rgba(111, 89, 125, 0.12),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            rgba(29, 24, 33, 0.9),
            rgba(10, 8, 12, 0.97)
        );

    box-shadow:
        0 32px 96px rgba(0, 0, 0, 0.38);
}

.same-home-second-main > p:first-child {
    margin: 0;

    color: #9d839f;

    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.19em;
    text-transform: uppercase;
}

.same-home-second-main h3 {
    margin: 20px 0 0;

    color: #eee7ef;

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

    font-size: clamp(2.15rem, 4.8vw, 4.1rem);
    font-weight: 400;
    line-height: 1.03;
    letter-spacing: -0.04em;
}

.same-home-second-main >
p:not(:first-child) {
    margin: 26px 0 0;

    color: #a69aa7;

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

.same-home-second-main > strong {
    display: block;

    margin-top: 26px;

    color: #d9ccd9;

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

    font-size: 1.06rem;
    font-weight: 400;
    line-height: 1.6;
}

.same-home-second-signals {
    display: grid;
    gap: 14px;
}

.same-home-second-signal {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 17px;

    min-height: 180px;
    padding: 20px;

    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            rgba(25, 21, 29, 0.87),
            rgba(9, 7, 11, 0.96)
        );

    box-shadow:
        0 24px 72px rgba(0, 0, 0, 0.28);
}

.same-home-second-signal > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;

    border: 1px solid rgba(164, 141, 177, 0.18);
    border-radius: 50%;

    color: #b79abe;
    background: rgba(74, 59, 83, 0.28);

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

    font-size: 0.8rem;
}

.same-home-second-signal small {
    display: block;

    color: #847486;

    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.same-home-second-signal strong {
    display: block;

    margin-top: 7px;

    color: #e8dfe9;

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

    font-size: clamp(1.35rem, 2.9vw, 2.05rem);
    font-weight: 400;
}

.same-home-second-signal p {
    margin: 8px 0 0;

    color: #958897;

    font-size: 0.84rem;
    line-height: 1.68;
}

.same-home-second-quote {
    width: min(820px, 100%);
    margin: 105px auto 0;

    text-align: center;
}

.same-home-second-quote p {
    margin: 0;

    color: #d5c6d7;

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

    font-size: clamp(1.8rem, 4.3vw, 3.55rem);
    font-weight: 400;
    line-height: 1.28;
}

.same-home-second-quote span {
    display: block;

    margin-top: 17px;

    color: #897a8b;

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

.same-home-sleep-transition {
    width: min(760px, 100%);
    margin: 95px auto 0;
    padding-top: 35px;

    border-top: 1px solid rgba(191, 161, 204, 0.13);

    text-align: center;
}

.same-home-sleep-transition p {
    margin: 0;

    color: #8f7d91;

    font-size: 0.88rem;
}

.same-home-sleep-transition strong {
    display: block;

    margin-top: 12px;

    color: #e8dcea;

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

    font-size: clamp(1.7rem, 4vw, 3.2rem);
    font-weight: 400;
    line-height: 1.25;
}

.same-home-sleep-transition i {
    display: block;

    margin-top: 19px;

    color: #c9a7d0;
    font-size: 1.4rem;
    font-style: normal;

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

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

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

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


/* ================================
   UYKU ÖZEL ARŞİVİ
================================ */

.same-home-sleep-archive {
    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 12%,
            rgba(124, 102, 177, 0.19),
            transparent 31%
        ),
        radial-gradient(
            circle at 12% 78%,
            rgba(78, 104, 158, 0.14),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #07060d,
            #04040a,
            #090711
        );
}

.same-home-sleep-archive::before {
    content: "";

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

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

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(179, 157, 225, 0.4),
            transparent
        );

    transform: translateX(-50%);
}

.same-home-sleep-moon {
    position: absolute;
    top: 7%;
    right: 5%;

    width: clamp(150px, 20vw, 285px);
    height: clamp(150px, 20vw, 285px);

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #efe8ff,
            #a99ad2 54%,
            #5d557b 100%
        );

    opacity: 0.11;

    box-shadow:
        0 0 90px rgba(183, 162, 226, 0.22);

    pointer-events: none;
}

.same-home-sleep-stars {
    position: absolute;
    inset: 0;

    opacity: 0.24;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 14% 18%,
            rgba(255, 255, 255, 0.9) 0 1px,
            transparent 2px
        ),
        radial-gradient(
            circle at 78% 22%,
            rgba(255, 255, 255, 0.8) 0 1px,
            transparent 2px
        ),
        radial-gradient(
            circle at 63% 53%,
            rgba(255, 255, 255, 0.75) 0 1px,
            transparent 2px
        ),
        radial-gradient(
            circle at 24% 71%,
            rgba(255, 255, 255, 0.75) 0 1px,
            transparent 2px
        ),
        radial-gradient(
            circle at 89% 85%,
            rgba(255, 255, 255, 0.72) 0 1px,
            transparent 2px
        );
}

.same-home-sleep-counts {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 11px;

    margin-top: 25px;

    color: #c6b8da;

    font-size: 0.69rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.same-home-sleep-counts b {
    font-weight: 600;
}

.same-home-sleep-counts i {
    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #c2a8dd;

    box-shadow:
        0 0 11px rgba(194, 168, 221, 0.68);
}

.same-home-sleep-intro {
    width: min(850px, 100%);
    margin: 0 auto 45px;

    text-align: center;
}

.same-home-sleep-intro > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 68px;
    height: 68px;
    margin: 0 auto 22px;

    border: 1px solid rgba(192, 170, 221, 0.2);
    border-radius: 50%;

    color: #d6c0ec;
    background: rgba(86, 69, 111, 0.25);

    font-size: 1.9rem;

    box-shadow:
        0 0 35px rgba(172, 144, 207, 0.1);
}

.same-home-sleep-intro p {
    margin: 0;

    color: #b49ac9;

    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.same-home-sleep-intro strong {
    display: block;

    margin-top: 14px;

    color: #eee7f5;

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

    font-size: clamp(1.9rem, 4.5vw, 3.8rem);
    font-weight: 400;
    line-height: 1.14;
}

.same-home-sleep-grid {
    display: grid;
    grid-template-columns:
        repeat(12, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: 15px;

    position: relative;
    z-index: 2;
}

.same-home-sleep-media {
    position: relative;

    min-width: 0;
    min-height: 360px;
    margin: 0;

    overflow: hidden;

    border: 1px solid rgba(226, 214, 242, 0.08);
    border-radius: 25px;

    background: #0a0910;

    box-shadow:
        0 25px 76px rgba(0, 0, 0, 0.34);
}

.same-home-sleep-third {
    grid-column: span 4;
    min-height: 390px;
}

.same-home-sleep-half {
    grid-column: span 6;
    min-height: 430px;
}

.same-home-sleep-wide {
    grid-column: 1 / -1;
    min-height: 470px;
}

.same-home-sleep-feature {
    grid-column: span 8;
    min-height: 570px;
}

.same-home-sleep-photo {
    cursor: zoom-in;
}

.same-home-sleep-photo::after {
    content: "Büyüt";

    position: absolute;
    top: 13px;
    right: 13px;
    z-index: 4;

    padding: 7px 10px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;

    color: rgba(247, 241, 255, 0.86);
    background: rgba(7, 6, 12, 0.66);

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

    opacity: 0;
    transform: translateY(-5px);

    transition:
        opacity 220ms ease,
        transform 220ms ease;

    backdrop-filter: blur(10px);
}

.same-home-sleep-photo:hover::after,
.same-home-sleep-photo:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

.same-home-sleep-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 760ms
        cubic-bezier(0.22, 1, 0.36, 1);
}

.same-home-sleep-photo:hover img {
    transform: scale(1.035);
}

.same-home-sleep-photo figcaption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;

    padding: 64px 19px 19px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(5, 4, 10, 0.92)
        );
}

.same-home-sleep-photo figcaption span {
    display: block;

    color: #bda8d3;

    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.same-home-sleep-photo figcaption strong {
    display: block;

    margin-top: 7px;

    color: #f2ebf8;

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

    font-size: clamp(1.2rem, 2.6vw, 1.95rem);
    font-weight: 400;
    line-height: 1.1;
}

.same-home-sleep-video {
    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(108, 89, 136, 0.18),
            transparent 55%
        ),
        #07060b;
}

.same-home-sleep-video > video {
    position: relative;
    z-index: 1;

    display: block;

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

    object-fit: contain;
    background: #07060b;

    opacity: 0;
    visibility: hidden;

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

.same-home-sleep-video.is-video-ready > video {
    opacity: 1;
    visibility: visible;
}

.same-home-sleep-video.is-video-ready
.same-home-video-placeholder {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.same-home-sleep-quote {
    width: min(850px, 100%);
    margin: 105px auto 0;

    text-align: center;
}

.same-home-sleep-quote p {
    margin: 0;

    color: #ddd0e9;

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

    font-size: clamp(1.85rem, 4.4vw, 3.65rem);
    font-weight: 400;
    line-height: 1.27;
}

.same-home-sleep-quote span {
    display: block;

    margin-top: 17px;

    color: #9989aa;

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


/* ================================
   PREMIUM BONUS UYKU VİDEOSU
================================ */

.same-home-sleep-premium {
    position: relative;
    z-index: 2;

    margin-top: clamp(110px, 12vw, 165px);
    padding: clamp(25px, 5vw, 46px);

    overflow: hidden;

    border: 1px solid rgba(255, 219, 118, 0.27);
    border-radius: 36px;

    background:
        radial-gradient(
            circle at 83% 14%,
            rgba(255, 210, 91, 0.17),
            transparent 35%
        ),
        radial-gradient(
            circle at 14% 84%,
            rgba(178, 98, 212, 0.2),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(41, 27, 54, 0.98),
            rgba(15, 11, 22, 0.99)
        );

    box-shadow:
        0 42px 125px rgba(0, 0, 0, 0.43),
        inset 0 1px 0 rgba(255, 245, 204, 0.07);
}

.same-home-premium-glare {
    position: absolute;
    top: -120px;
    right: -80px;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    background: rgba(255, 211, 95, 0.12);

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

.same-home-premium-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    position: relative;
    z-index: 2;

    margin-bottom: 30px;
}

.same-home-premium-labels span {
    display: inline-flex;
    align-items: center;

    min-height: 30px;
    padding: 0 12px;

    border: 1px solid rgba(255, 225, 137, 0.25);
    border-radius: 999px;

    color: #ffe6a4;
    background: rgba(255, 209, 88, 0.1);

    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.same-home-premium-labels span:nth-child(2) {
    color: #eac9ff;
    border-color: rgba(207, 159, 239, 0.23);
    background: rgba(173, 98, 211, 0.11);
}

.same-home-premium-copy {
    position: relative;
    z-index: 2;

    width: min(830px, 100%);
    margin-bottom: 34px;
}

.same-home-premium-copy > p {
    margin: 0;

    color: #e8c66f;

    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.same-home-premium-copy h3 {
    margin: 16px 0 0;

    color: #fff5df;

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

    font-size: clamp(2.15rem, 5vw, 4.55rem);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.same-home-premium-copy h3 em {
    display: block;

    color: #d8b6ed;
    font-weight: 400;
    font-style: italic;
}

.same-home-premium-copy > span {
    display: block;

    margin-top: 18px;

    color: #b9a7c0;

    font-size: 0.88rem;
    line-height: 1.72;
}

.same-home-premium-video {
    position: relative;
    z-index: 2;

    width: 100%;
    min-height: clamp(420px, 56vw, 720px);

    overflow: hidden;

    border: 1px solid rgba(255, 226, 143, 0.17);
    border-radius: 28px;

    background: #08070c;

    box-shadow:
        0 32px 95px rgba(0, 0, 0, 0.43);
}

.same-home-premium-video > video {
    display: block;

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

    object-fit: contain;
    background: #08070c;
}

.same-home-premium-cover {
    position: absolute;
    inset: 0;
    z-index: 3;

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

    padding: 28px;

    text-align: center;

    background:
        radial-gradient(
            circle at 50% 44%,
            rgba(255, 211, 92, 0.15),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            rgba(30, 21, 40, 0.96),
            rgba(9, 7, 13, 0.99)
        );

    transition:
        opacity 650ms ease,
        visibility 650ms ease,
        transform 800ms
        cubic-bezier(0.22, 1, 0.36, 1);

    backdrop-filter: blur(18px);
}

.same-home-premium-video.is-unlocked
.same-home-premium-cover {
    opacity: 0;
    visibility: hidden;

    transform: scale(1.035);
    pointer-events: none;
}

.same-home-premium-lock {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 112px;
    height: 112px;
    margin-bottom: 24px;

    border: 1px solid rgba(255, 226, 141, 0.28);
    border-radius: 50%;

    color: #ffe4a0;
    background:
        radial-gradient(
            circle at 35% 28%,
            rgba(255, 226, 148, 0.2),
            rgba(98, 67, 29, 0.28)
        );

    box-shadow:
        0 0 0 12px rgba(255, 211, 88, 0.045),
        0 0 55px rgba(255, 205, 80, 0.15);

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

    font-size: 2rem;
}

.same-home-premium-cover small {
    color: #d5b766;

    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.19em;
}

.same-home-premium-cover > strong {
    display: block;

    margin-top: 13px;

    color: #fff2d2;

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

    font-size: clamp(2rem, 4.6vw, 3.8rem);
    font-weight: 400;
}

.same-home-premium-cover > p {
    max-width: 520px;
    margin: 15px 0 0;

    color: #b7a5be;

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

.same-home-premium-unlock {
    display: inline-flex;
    align-items: center;
    gap: 11px;

    min-height: 56px;
    margin-top: 27px;
    padding: 0 22px;

    border: 1px solid rgba(255, 229, 151, 0.34);
    border-radius: 999px;

    color: #241708;
    background:
        linear-gradient(
            120deg,
            #ffe3a0,
            #e6b84f
        );

    box-shadow:
        0 18px 48px rgba(199, 145, 39, 0.22);

    font-weight: 700;

    cursor: pointer;

    transition:
        transform 220ms ease,
        box-shadow 220ms ease;
}

.same-home-premium-unlock:hover {
    transform: translateY(-2px);

    box-shadow:
        0 23px 58px rgba(199, 145, 39, 0.3);
}

.same-home-premium-unlock i {
    font-style: normal;
}

.same-home-premium-unlocked-message {
    margin-top: 16px;

    color: #e9d59e;

    font-size: 0.71rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-align: center;
    text-transform: uppercase;
}

.same-home-premium-unlocked-message[hidden] {
    display: none;
}


/* ================================
   İKİNCİ DÖNEM + UYKU RESPONSIVE
================================ */

@media (max-width: 950px) {
    .same-home-second-state {
        grid-template-columns: 1fr;
    }

    .same-home-second-main,
    .same-home-second-signals {
        width: min(100%, 760px);
        margin: 0 auto;
    }

    .same-home-sleep-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .same-home-sleep-third,
    .same-home-sleep-half,
    .same-home-sleep-feature {
        grid-column: auto;
    }

    .same-home-sleep-wide {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    .same-home-second-main {
        min-height: auto;
        border-radius: 25px;
    }

    .same-home-second-signal {
        grid-template-columns: 45px 1fr;
        gap: 12px;

        min-height: auto;
        padding: 15px;
        border-radius: 21px;
    }

    .same-home-second-signal > span {
        width: 43px;
        height: 43px;
    }

    .same-home-second-quote,
    .same-home-sleep-transition {
        margin-top: 74px;
    }

    .same-home-sleep-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .same-home-sleep-third,
    .same-home-sleep-half,
    .same-home-sleep-wide,
    .same-home-sleep-feature {
        grid-column: 1;
        min-height: 350px;
    }

    .same-home-sleep-video {
        min-height: 330px;
    }

    .same-home-sleep-quote {
        margin-top: 76px;
    }

    .same-home-sleep-premium {
        margin-top: 86px;
        padding: 18px;

        border-radius: 27px;
    }

    .same-home-premium-video {
        min-height: 430px;
        border-radius: 22px;
    }

    .same-home-premium-lock {
        width: 88px;
        height: 88px;
    }

    .same-home-premium-cover {
        padding: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .same-home-second-static {
        animation: none;
    }

    .same-home-premium-cover {
        transition-duration: 1ms;
    }
}


/* ================================
   BİRLİKTE YAŞAM DEVRİNİN KAPANIŞI
================================ */

.same-home-ending {
    position: relative;

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

    min-height: 100dvh;
    padding:
        clamp(110px, 13vw, 190px)
        clamp(20px, 7vw, 100px);

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 26%,
            rgba(212, 69, 135, 0.12),
            transparent 31%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(90, 68, 121, 0.13),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #090711,
            #050307,
            #020203
        );
}

.same-home-ending::before {
    content: "";

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

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

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(215, 113, 163, 0.38),
            transparent
        );

    transform: translateX(-50%);
}

.same-home-ending-door {
    position: absolute;
    right: 50%;
    bottom: -8%;

    width: min(340px, 56vw);
    height: min(520px, 70vh);

    border: 1px solid rgba(242, 210, 226, 0.08);
    border-bottom: 0;
    border-radius: 160px 160px 0 0;

    opacity: 0.2;
    transform: translateX(50%);

    box-shadow:
        inset 0 0 90px rgba(226, 97, 157, 0.05),
        0 0 90px rgba(0, 0, 0, 0.35);

    pointer-events: none;
}

.same-home-ending-door::before {
    content: "";

    position: absolute;
    inset: 18px 18px 0;

    border: 1px solid rgba(242, 210, 226, 0.055);
    border-bottom: 0;
    border-radius: 145px 145px 0 0;
}

.same-home-ending-door span {
    position: absolute;
    top: 50%;
    right: 27px;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: rgba(239, 128, 179, 0.7);

    box-shadow:
        0 0 16px rgba(239, 128, 179, 0.48);
}

.same-home-ending-door i {
    position: absolute;
    top: 12%;
    bottom: 0;
    left: 50%;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(237, 166, 200, 0.14),
            transparent
        );
}

.same-home-ending-shell {
    position: relative;
    z-index: 2;

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

    text-align: center;
}

.same-home-ending-period {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;

    margin-bottom: 25px;

    color: #9f8995;

    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.same-home-ending-period i {
    width: 36px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(239, 128, 179, 0.55),
            transparent
        );
}

.same-home-ending-shell > p {
    margin: 0;

    color: #c17b9d;

    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.23em;
    text-transform: uppercase;
}

.same-home-ending-shell h2 {
    margin: 22px 0 0;

    color: #fff3f9;

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

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

.same-home-ending-shell h2 em {
    display: block;

    margin-top: 9px;

    color: var(--home-pink);
    font-weight: 400;
    font-style: italic;

    text-shadow:
        0 0 34px rgba(239, 128, 179, 0.19);
}

.same-home-ending-quote {
    width: min(760px, 100%);
    margin: 55px auto 0;
    padding:
        clamp(28px, 5vw, 46px);

    border-top: 1px solid rgba(236, 133, 180, 0.14);
    border-bottom: 1px solid rgba(236, 133, 180, 0.14);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(76, 37, 61, 0.1),
            transparent
        );
}

.same-home-ending-quote p {
    margin: 0;

    color: #c9b3be;

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

    font-size: clamp(1.25rem, 2.6vw, 1.8rem);
    line-height: 1.6;
}

.same-home-ending-quote strong {
    display: block;

    margin-top: 20px;

    color: #f4dce7;

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

    font-size: clamp(1.6rem, 3.5vw, 2.8rem);
    font-weight: 400;
    line-height: 1.28;
}

.same-home-ending-status {
    display: inline-grid;
    grid-template-columns: 44px 1fr;
    gap: 14px;
    align-items: center;

    margin-top: 50px;
    padding: 15px 19px;

    border: 1px solid rgba(190, 145, 169, 0.14);
    border-radius: 20px;

    color: #af99a4;
    background: rgba(18, 11, 16, 0.56);

    text-align: left;

    box-shadow:
        0 20px 58px rgba(0, 0, 0, 0.22);

    backdrop-filter: blur(14px);
}

.same-home-ending-status > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border: 1px solid rgba(218, 116, 160, 0.18);
    border-radius: 50%;

    color: #d975a0;
    background: rgba(92, 39, 64, 0.3);

    font-size: 1rem;
}

.same-home-ending-status small {
    display: block;

    color: #8d7782;

    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.same-home-ending-status strong {
    display: block;

    margin-top: 5px;

    color: #e9dce2;

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

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

.same-home-ending-last-line {
    width: min(720px, 100%);
    margin: 70px auto 0;
}

.same-home-ending-last-line span {
    display: block;

    color: #8e7984;

    font-size: 0.82rem;
}

.same-home-ending-last-line strong {
    display: block;

    margin-top: 11px;

    color: #ead9e2;

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

    font-size: clamp(1.5rem, 3.4vw, 2.7rem);
    font-weight: 400;
    line-height: 1.35;
}

@media (max-width: 620px) {
    .same-home-ending {
        padding-right: 16px;
        padding-left: 16px;
    }

    .same-home-ending-door {
        width: 75vw;
        height: 54vh;
    }

    .same-home-ending-quote {
        margin-top: 42px;
        padding-right: 14px;
        padding-left: 14px;
    }

    .same-home-ending-status {
        width: 100%;
        max-width: 430px;
    }

    .same-home-ending-last-line {
        margin-top: 55px;
    }
}


/* ================================
   UZAK MESAFEYE ETKİLEŞİMLİ GEÇİŞ
================================ */

.same-home-distance-transition {
    position: relative;

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

    min-height: 100dvh;
    padding:
        clamp(105px, 12vw, 175px)
        clamp(20px, 7vw, 100px);

    overflow: hidden;

    background:
        radial-gradient(
            circle at 17% 31%,
            rgba(220, 71, 140, 0.14),
            transparent 31%
        ),
        radial-gradient(
            circle at 84% 68%,
            rgba(91, 93, 174, 0.17),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #020203,
            #05040b,
            #030307
        );
}

.same-home-distance-transition::before {
    content: "";

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

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

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(181, 151, 215, 0.35),
            transparent
        );

    transform: translateX(-50%);
}

.same-home-distance-stars {
    position: absolute;
    inset: 0;

    opacity: 0.3;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 13% 18%,
            rgba(255, 255, 255, 0.9) 0 1px,
            transparent 2px
        ),
        radial-gradient(
            circle at 32% 71%,
            rgba(255, 255, 255, 0.7) 0 1px,
            transparent 2px
        ),
        radial-gradient(
            circle at 68% 22%,
            rgba(255, 255, 255, 0.72) 0 1px,
            transparent 2px
        ),
        radial-gradient(
            circle at 87% 82%,
            rgba(255, 255, 255, 0.8) 0 1px,
            transparent 2px
        ),
        radial-gradient(
            circle at 53% 48%,
            rgba(255, 255, 255, 0.56) 0 1px,
            transparent 2px
        );
}

.same-home-distance-orbit {
    position: absolute;

    border: 1px solid rgba(181, 159, 217, 0.065);
    border-radius: 50%;

    pointer-events: none;
}

.same-home-distance-orbit-one {
    top: 8%;
    left: -330px;

    width: 650px;
    height: 650px;
}

.same-home-distance-orbit-two {
    right: -390px;
    bottom: -8%;

    width: 760px;
    height: 760px;
}

.same-home-distance-shell {
    position: relative;
    z-index: 2;

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

.same-home-distance-copy {
    width: min(900px, 100%);
    margin: 0 auto 85px;

    text-align: center;
}

.same-home-distance-copy > p {
    margin: 0;

    color: #b09ac3;

    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.23em;
    text-transform: uppercase;
}

.same-home-distance-copy h2 {
    margin: 20px 0 0;

    color: #fff4fa;

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

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

.same-home-distance-copy h2 em {
    display: block;

    margin-top: 8px;

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

    text-shadow:
        0 0 35px rgba(174, 141, 211, 0.18);
}

.same-home-distance-copy > span {
    display: block;

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

    color: #a995a3;

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

.same-home-distance-route {
    display: grid;
    grid-template-columns:
        minmax(155px, auto)
        minmax(280px, 1fr)
        minmax(155px, auto);

    gap: clamp(22px, 4vw, 48px);
    align-items: center;

    width: min(1060px, 100%);
    margin: 0 auto;
    padding:
        clamp(28px, 5vw, 45px);

    border: 1px solid rgba(222, 203, 237, 0.09);
    border-radius: 34px;

    background:
        radial-gradient(
            circle at 12% 50%,
            rgba(223, 75, 141, 0.12),
            transparent 31%
        ),
        radial-gradient(
            circle at 88% 50%,
            rgba(103, 102, 190, 0.14),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            rgba(24, 18, 31, 0.91),
            rgba(8, 7, 13, 0.97)
        );

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

.same-home-distance-place {
    display: flex;
    align-items: center;
    gap: 13px;
}

.same-home-distance-place-right {
    flex-direction: row-reverse;

    text-align: right;
}

.same-home-distance-place > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 60px;
    height: 60px;

    flex-shrink: 0;

    border: 1px solid rgba(239, 128, 179, 0.2);
    border-radius: 50%;

    color: #f0bdd5;
    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(239, 128, 179, 0.17),
            rgba(49, 27, 48, 0.54)
        );

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

    font-size: 1.45rem;

    box-shadow:
        0 0 0 9px rgba(219, 79, 141, 0.035),
        0 0 30px rgba(219, 79, 141, 0.09);

    transition:
        border-color 500ms ease,
        box-shadow 500ms ease,
        transform 500ms ease;
}

.same-home-distance-place small,
.same-home-distance-place strong {
    display: block;
}

.same-home-distance-place small {
    color: #857789;

    font-size: 0.57rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.same-home-distance-place strong {
    margin-top: 5px;

    color: #e9dfe8;

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

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

.same-home-distance-rail {
    min-width: 0;
}

.same-home-distance-track {
    --distance-progress: 0%;

    position: relative;

    height: 44px;

    touch-action: none;
    user-select: none;
}

.same-home-distance-track::before {
    content: "";

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

    height: 2px;

    background:
        linear-gradient(
            90deg,
            rgba(235, 115, 169, 0.2),
            rgba(182, 157, 214, 0.16)
        );

    transform: translateY(-50%);
}

.same-home-distance-progress {
    position: absolute;
    top: 50%;
    left: 0;

    width: var(--distance-progress);
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #e86ea4,
            #c5a5df
        );

    transform: translateY(-50%);

    box-shadow:
        0 0 14px rgba(217, 116, 174, 0.5);

    transition:
        width 100ms linear;
}

.same-home-distance-dot {
    position: absolute;
    top: 50%;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: rgba(202, 178, 218, 0.33);

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

.same-home-distance-dot-one {
    left: 25%;
}

.same-home-distance-dot-two {
    left: 50%;
}

.same-home-distance-dot-three {
    left: 75%;
}

.same-home-distance-heart {
    position: absolute;
    top: 50%;
    left: var(--distance-progress);
    z-index: 4;

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

    width: 48px;
    height: 48px;

    border: 1px solid rgba(246, 189, 216, 0.28);
    border-radius: 50%;

    color: #ffd8e9;
    background:
        radial-gradient(
            circle at 35% 28%,
            #dd6298,
            #8e365f 70%
        );

    box-shadow:
        0 15px 36px rgba(0, 0, 0, 0.34),
        0 0 28px rgba(224, 91, 150, 0.23);

    font-size: 1.45rem;

    cursor: grab;

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

    transition:
        left 100ms linear,
        transform 240ms ease,
        box-shadow 240ms ease;
}

.same-home-distance-heart:active {
    cursor: grabbing;

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

.same-home-distance-heart:focus-visible {
    outline: 2px solid rgba(230, 183, 246, 0.68);
    outline-offset: 5px;
}

.same-home-distance-rail > p {
    margin: 9px 0 0;

    color: #817484;

    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-align: center;
    text-transform: uppercase;
}

.same-home-distance-status {
    margin-top: 30px;

    color: #8d7b90;

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

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

.same-home-distance-route.is-complete
.same-home-distance-place > span {
    border-color: rgba(225, 185, 244, 0.38);

    box-shadow:
        0 0 0 10px rgba(180, 130, 211, 0.05),
        0 0 44px rgba(200, 157, 225, 0.2);

    transform: scale(1.06);
}

.same-home-distance-route.is-complete
.same-home-distance-heart {
    color: #fff3fa;

    box-shadow:
        0 15px 36px rgba(0, 0, 0, 0.34),
        0 0 42px rgba(218, 151, 239, 0.38);

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

body.same-home-distance-leaving
.same-home-distance-transition {
    animation:
        sameHomeDistanceLeave
        1500ms ease forwards;
}

@keyframes sameHomeDistanceLeave {
    0% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }

    100% {
        opacity: 0;
        transform: scale(1.035);
        filter: blur(8px);
    }
}

@media (max-width: 820px) {
    .same-home-distance-route {
        grid-template-columns: 1fr;
        gap: 28px;

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

    .same-home-distance-place,
    .same-home-distance-place-right {
        justify-content: center;
        flex-direction: row;

        text-align: left;
    }

    .same-home-distance-place-right {
        flex-direction: row-reverse;

        text-align: right;
    }

    .same-home-distance-rail {
        order: 2;
    }

    .same-home-distance-place-left {
        order: 1;
    }

    .same-home-distance-place-right {
        order: 3;
    }
}

@media (max-width: 560px) {
    .same-home-distance-transition {
        padding-right: 16px;
        padding-left: 16px;
    }

    .same-home-distance-copy {
        margin-bottom: 58px;
    }

    .same-home-distance-route {
        padding: 24px 18px;
        border-radius: 27px;
    }

    .same-home-distance-heart {
        width: 44px;
        height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.same-home-distance-leaving
    .same-home-distance-transition {
        animation-duration: 1ms;
    }
}