:root {
    --background-dark: #070610;
    --background-purple: #130b1d;

    --pink-main: #f05a9d;
    --pink-light: #ffacd0;
    --pink-soft: #d97ca8;

    --text-main: #fff7fb;
    --text-muted: #c1aeb9;
}


/* ================================
   GENEL AYARLAR
================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    overflow: hidden;
    background: var(--background-dark);
    color: var(--text-main);
    font-family: Arial, Helvetica, sans-serif;
}


/* ================================
   LOADING EKRANI
================================ */

.loading-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;

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

    min-height: 100dvh;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 90%,
            rgba(236, 51, 137, 0.23),
            transparent 30%
        ),
        radial-gradient(
            circle at 18% 65%,
            rgba(101, 39, 116, 0.23),
            transparent 35%
        ),
        radial-gradient(
            circle at 82% 50%,
            rgba(126, 38, 107, 0.18),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #050510 0%,
            #0c0815 50%,
            #140919 100%
        );

    opacity: 1;
    visibility: visible;

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

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


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

.loading-glow {
    position: absolute;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    filter: blur(110px);
    opacity: 0.16;

    pointer-events: none;
}

.loading-glow-left {
    left: -260px;
    bottom: -180px;

    background: #a8328e;

    animation: glowMovementLeft 8s ease-in-out infinite alternate;
}

.loading-glow-right {
    right: -260px;
    top: -180px;

    background: #e34394;

    animation: glowMovementRight 10s ease-in-out infinite alternate;
}


/* ================================
   YILDIZLAR
================================ */

.stars {
    position: absolute;
    inset: 0;

    pointer-events: none;
}

.stars::before,
.stars::after {
    content: "";

    position: absolute;
    inset: 0;

    background-repeat: repeat;
}

.stars-one::before {
    background-image:
        radial-gradient(
            circle,
            rgba(255, 188, 220, 0.9) 0 1px,
            transparent 1.7px
        );

    background-size: 85px 85px;
    background-position: 14px 21px;

    opacity: 0.45;

    animation: starTwinkle 3.8s ease-in-out infinite alternate;
}

.stars-one::after {
    background-image:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.8) 0 1px,
            transparent 1.6px
        );

    background-size: 135px 135px;
    background-position: 52px 40px;

    opacity: 0.23;

    animation: starTwinkle 5.2s ease-in-out infinite alternate-reverse;
}

.stars-two::before {
    background-image:
        radial-gradient(
            circle,
            rgba(240, 90, 157, 0.8) 0 1.5px,
            transparent 2.2px
        );

    background-size: 190px 190px;
    background-position: 90px 73px;

    opacity: 0.26;

    animation: starFloat 15s linear infinite;
}


/* ================================
   İÇERİK
================================ */

.loading-content {
    position: relative;
    z-index: 5;

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

    width: min(90%, 520px);

    text-align: center;

    animation: contentEntrance 1.4s ease both;
}


/* ================================
   KALP
================================ */

.heart-wrapper {
    position: relative;

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

    width: 150px;
    height: 140px;

    margin-bottom: 18px;
}

.loading-heart {
    position: relative;
    z-index: 2;

    width: 126px;
    height: auto;

    overflow: visible;

    filter:
        drop-shadow(0 0 8px rgba(255, 103, 170, 0.95))
        drop-shadow(0 0 22px rgba(240, 60, 145, 0.55));

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

.loading-heart path {
    fill: transparent;

    stroke: var(--pink-light);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;

    stroke-dasharray: 350;
    stroke-dashoffset: 350;

    animation: heartDrawing 2.4s ease forwards;
}

.heart-light {
    position: absolute;

    width: 75px;
    height: 75px;

    border-radius: 50%;

    background: rgba(240, 90, 157, 0.28);

    filter: blur(28px);

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


/* ================================
   LOADING YAZISI
================================ */

.loading-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.1rem, 6vw, 3.5rem);
    font-weight: 400;
    letter-spacing: -0.04em;

    color: var(--text-main);

    text-shadow:
        0 0 24px rgba(255, 174, 210, 0.18);
}

.loading-title::first-letter {
    color: var(--text-main);
}

.loading-dots::after {
    content: "";

    color: var(--pink-light);

    animation: loadingDots 1.5s steps(4, end) infinite;
}


/* ================================
   İLERLEME ÇİZGİSİ
================================ */

.loading-progress {
    position: relative;

    width: min(260px, 70vw);
    height: 24px;

    margin-top: 34px;
}

.progress-line {
    position: absolute;
    top: 50%;
    left: 0;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(240, 90, 157, 0.25),
            rgba(255, 172, 208, 0.75),
            rgba(240, 90, 157, 0.25),
            transparent
        );
}

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

    width: 10px;
    height: 10px;

    border: 2px solid rgba(255, 239, 247, 0.9);
    border-radius: 50%;

    background: var(--pink-main);

    box-shadow:
        0 0 9px var(--pink-light),
        0 0 22px rgba(240, 90, 157, 0.8);

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

    animation: progressMovement 3.2s ease-in-out forwards;
}


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

.relationship-date {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 38px;

    color: var(--pink-soft);

    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.15em;

    opacity: 0;

    animation: dateEntrance 1s ease 1.8s forwards;
}

.relationship-date span {
    color: var(--pink-light);

    font-size: 0.85rem;
}

/* ================================
   HIDDEN ELEMENTLER
================================ */

[hidden] {
    display: none !important;
}


/* ================================
   ŞİFRE EKRANI
================================ */

.password-screen {
    position: fixed;
    inset: 0;
    z-index: 100;

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

    width: 100%;
    min-height: 100dvh;
    padding: 30px 20px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 100%,
            rgba(225, 55, 139, 0.19),
            transparent 31%
        ),
        radial-gradient(
            circle at 15% 35%,
            rgba(104, 42, 125, 0.19),
            transparent 36%
        ),
        radial-gradient(
            circle at 88% 20%,
            rgba(164, 43, 115, 0.15),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #05050e 0%,
            #0b0712 48%,
            #130817 100%
        );

    opacity: 0;
    visibility: hidden;

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

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


/* ================================
   ŞİFRE EKRANI ARKA PLAN IŞIKLARI
================================ */

.password-background-glow {
    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

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

.password-glow-left {
    left: -270px;
    bottom: -230px;

    background: rgba(170, 39, 132, 0.34);

    animation:
        passwordGlowLeft 9s ease-in-out infinite alternate;
}

.password-glow-right {
    top: -270px;
    right: -250px;

    background: rgba(225, 69, 144, 0.25);

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


/* ================================
   ŞİFRE KARTI
================================ */

.password-card {
    position: relative;
    z-index: 5;

    width: min(100%, 510px);
    padding: 42px 38px 30px;

    border: 1px solid rgba(239, 103, 166, 0.38);
    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(27, 20, 34, 0.82),
            rgba(12, 10, 19, 0.76)
        );

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.48),
        0 0 45px rgba(218, 68, 138, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.045);

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

    text-align: center;

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

    transition:
        opacity 900ms ease 150ms,
        transform 900ms cubic-bezier(0.22, 1, 0.36, 1) 150ms,
        border-color 500ms ease,
        box-shadow 500ms ease;
}

.password-screen.is-visible .password-card {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.password-screen.is-unlocked .password-card {
    border-color: rgba(255, 145, 196, 0.75);

    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.45),
        0 0 80px rgba(239, 79, 151, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    transform: scale(1.025);
}


/* ================================
   ŞİFRE EKRANI KALBİ
================================ */

.password-heart-wrapper {
    position: relative;

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

    width: 80px;
    height: 75px;

    margin: 0 auto 16px;
}

.password-heart {
    position: relative;
    z-index: 2;

    width: 63px;
    height: auto;

    overflow: visible;

    filter:
        drop-shadow(0 0 7px rgba(255, 117, 179, 0.9))
        drop-shadow(0 0 18px rgba(238, 69, 148, 0.52));

    animation:
        passwordHeartPulse 2.4s ease-in-out infinite;
}

.password-heart path {
    fill: transparent;

    stroke: #ffafd1;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.password-heart-glow {
    position: absolute;

    width: 46px;
    height: 46px;

    border-radius: 50%;

    background: rgba(240, 71, 151, 0.32);

    filter: blur(20px);

    animation:
        passwordHeartGlow 2.4s ease-in-out infinite;
}


/* ================================
   ŞİFRE BAŞLIK VE METİNLER
================================ */

.password-title {
    max-width: 390px;
    margin: 0 auto;

    color: #fff8fb;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.1rem, 6vw, 3.25rem);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.password-title span {
    color: #f18ab7;

    text-shadow:
        0 0 24px rgba(241, 107, 167, 0.22);
}

.password-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;

    margin: 27px auto 22px;
}

.password-divider > span:not(.divider-heart) {
    display: block;

    width: 75px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(234, 101, 163, 0.48)
        );
}

.password-divider > span:last-child {
    transform: rotate(180deg);
}

.divider-heart {
    color: #ef76aa;

    font-size: 1.1rem;

    text-shadow:
        0 0 12px rgba(239, 92, 159, 0.6);
}

.password-description {
    max-width: 380px;
    margin: 0 auto;

    color: #bdaeb8;

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


/* ================================
   ŞİFRE FORMU
================================ */

.password-form {
    margin-top: 30px;
}

.password-input-wrapper {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;
    height: 66px;

    border: 1px solid rgba(216, 119, 164, 0.31);
    border-radius: 16px;

    background: rgba(5, 5, 11, 0.45);

    box-shadow:
        inset 0 1px 8px rgba(0, 0, 0, 0.3);

    transition:
        border-color 250ms ease,
        box-shadow 250ms ease,
        background 250ms ease;
}

.password-input-wrapper:focus-within {
    border-color: rgba(247, 126, 181, 0.74);

    background: rgba(15, 9, 18, 0.68);

    box-shadow:
        0 0 0 4px rgba(236, 75, 149, 0.08),
        0 0 24px rgba(236, 75, 149, 0.11);
}

.password-lock-icon {
    position: absolute;
    left: 20px;

    width: 21px;
    height: 21px;

    fill: none;
    stroke: #b8a3af;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;

    pointer-events: none;
}

.password-input {
    width: 100%;
    height: 100%;
    padding: 0 58px 0 57px;

    border: 0;
    outline: 0;

    background: transparent;
    color: #fff8fb;

    font-family: inherit;
    font-size: 1rem;
    letter-spacing: 0.04em;
}

.password-input::placeholder {
    color: #776a73;
}

.password-input:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}


/* ================================
   ŞİFRE GÖSTER BUTONU
================================ */

.password-visibility-button {
    position: absolute;
    right: 13px;

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

    width: 42px;
    height: 42px;

    border: 0;
    border-radius: 11px;

    background: transparent;
    color: #b9a7b1;

    cursor: pointer;

    transition:
        color 200ms ease,
        background 200ms ease;
}

.password-visibility-button:hover {
    background: rgba(238, 90, 157, 0.1);
    color: #f39abe;
}

.password-visibility-button:focus-visible {
    outline: 2px solid rgba(245, 126, 181, 0.8);
    outline-offset: 2px;
}

.eye-icon {
    width: 22px;
    height: 22px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ================================
   KAPIYI AÇ BUTONU
================================ */

.password-submit-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    width: 100%;
    height: 68px;

    margin-top: 18px;

    border: 1px solid rgba(255, 173, 208, 0.35);
    border-radius: 16px;

    background:
        linear-gradient(
            110deg,
            #a9326a 0%,
            #d64b89 48%,
            #ef78a9 100%
        );

    color: #fff9fc;

    box-shadow:
        0 12px 32px rgba(212, 57, 128, 0.23),
        inset 0 1px 0 rgba(255, 255, 255, 0.27);

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

    cursor: pointer;

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

.password-submit-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 16px 38px rgba(219, 65, 134, 0.32),
        0 0 28px rgba(235, 94, 157, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);

    filter: brightness(1.06);
}

.password-submit-button:active {
    transform: translateY(0) scale(0.99);
}

.password-submit-button:focus-visible {
    outline: 2px solid #ffb4d2;
    outline-offset: 4px;
}

.password-submit-button:disabled {
    cursor: not-allowed;

    filter: saturate(0.7);
    opacity: 0.78;
}

.button-lock-icon {
    width: 21px;
    height: 21px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ================================
   ŞİFRE MESAJI
================================ */

.password-message {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 26px;
    margin-top: 14px;

    color: #d7b7c7;

    font-size: 0.9rem;
    line-height: 1.4;

    transition: color 250ms ease;
}

.password-message.is-error {
    color: #ff92bd;
}

.password-message.is-success {
    color: #ffb7d4;

    text-shadow:
        0 0 14px rgba(255, 120, 178, 0.36);
}


/* ================================
   ŞİFRE EKRANI ALT ALAN
================================ */

.password-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;

    margin-top: 13px;
}

.footer-line {
    width: 63px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(235, 103, 163, 0.35)
        );
}

.footer-line:last-child {
    transform: rotate(180deg);
}

.footer-star {
    color: #ee79ac;

    font-size: 0.9rem;

    text-shadow:
        0 0 12px rgba(238, 83, 153, 0.7);
}

.password-date {
    margin-top: 15px;

    color: #d16b99;

    font-size: 0.9rem;
    letter-spacing: 0.16em;
}


/* ================================
   YANLIŞ ŞİFRE ANİMASYONU
================================ */

.password-card.is-shaking {
    animation:
        passwordShake 520ms ease;
}

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

@keyframes heartDrawing {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes heartPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.055);
    }
}

@keyframes heartGlow {
    0%,
    100% {
        opacity: 0.45;
        transform: scale(0.9);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.25);
    }
}

@keyframes loadingDots {
    0% {
        content: "";
    }

    25% {
        content: ".";
    }

    50% {
        content: "..";
    }

    75%,
    100% {
        content: "...";
    }
}

@keyframes progressMovement {
    0% {
        left: 0%;
    }

    20% {
        left: 18%;
    }

    45% {
        left: 46%;
    }

    70% {
        left: 72%;
    }

    100% {
        left: 100%;
    }
}

@keyframes contentEntrance {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.98);
    }

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

@keyframes dateEntrance {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

@keyframes starTwinkle {
    from {
        opacity: 0.18;
    }

    to {
        opacity: 0.65;
    }
}

@keyframes starFloat {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-190px);
    }
}

@keyframes glowMovementLeft {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(90px, -55px);
    }
}

@keyframes glowMovementRight {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(-75px, 65px);
    }
}

/* ================================
   ŞİFRE EKRANI ANİMASYONLARI
================================ */

@keyframes passwordHeartPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.07);
    }
}

@keyframes passwordHeartGlow {
    0%,
    100% {
        opacity: 0.42;
        transform: scale(0.85);
    }

    50% {
        opacity: 0.92;
        transform: scale(1.22);
    }
}

@keyframes passwordShake {
    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-9px);
    }

    40% {
        transform: translateX(8px);
    }

    60% {
        transform: translateX(-6px);
    }

    80% {
        transform: translateX(4px);
    }
}

@keyframes passwordGlowLeft {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(95px, -65px);
    }
}

@keyframes passwordGlowRight {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(-80px, 75px);
    }
}

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

@media (max-width: 600px) {
    .heart-wrapper {
        width: 125px;
        height: 115px;

        margin-bottom: 12px;
    }

    .loading-heart {
        width: 105px;
    }

    .loading-progress {
        margin-top: 28px;
    }

    .relationship-date {
        margin-top: 31px;

        font-size: 0.8rem;
    }
}


/* ================================
   ŞİFRE EKRANI MOBİL
================================ */

@media (max-width: 600px) {
    .password-screen {
        align-items: center;

        padding: 18px 14px;
    }

    .password-card {
        padding: 31px 20px 24px;

        border-radius: 23px;
    }

    .password-heart-wrapper {
        width: 66px;
        height: 61px;

        margin-bottom: 13px;
    }

    .password-heart {
        width: 52px;
    }

    .password-divider {
        margin: 21px auto 17px;
    }

    .password-divider > span:not(.divider-heart) {
        width: 55px;
    }

    .password-description {
        font-size: 0.92rem;
    }

    .password-form {
        margin-top: 23px;
    }

    .password-input-wrapper {
        height: 59px;
    }

    .password-submit-button {
        height: 61px;

        font-size: 1.12rem;
    }

    .password-date {
        font-size: 0.76rem;
    }
}

@media (max-height: 720px) {
    .password-screen {
        align-items: flex-start;

        overflow-y: auto;
    }

    .password-card {
        margin: auto;
    }
}

/* ================================
   ERİŞİLEBİLİRLİK
================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}