:root {
    --coral: #e1493f;
    --pink: #f08a86;
    --cream: #fff4e4;
    --ink: #302d43;
    --yellow: #ffd85a;
    --blue: #6dc9d1;
    --text: #fffaf1;
    --muted: rgba(255, 250, 241, 0.82);
    --shadow: rgba(83, 32, 37, 0.28);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body.merkez-coming-soon {
    min-height: 100vh;
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background-color: var(--coral);
    background-image:
        radial-gradient(circle at 12px 12px, rgba(255, 244, 228, 0.18) 0 3px, transparent 3.5px),
        linear-gradient(135deg, #dc413a 0%, #e85b50 54%, #ef8d88 130%);
    background-size: 34px 34px, auto;
    overflow-x: hidden;
}

.coming-soon {
    position: relative;
    display: grid;
    min-height: 100vh;
    padding: clamp(1.5rem, 4vw, 4rem);
    place-items: center;
    isolation: isolate;
}

.coming-soon::before {
    position: absolute;
    left: -8%;
    right: -8%;
    bottom: -15%;
    height: 42%;
    z-index: -1;
    border-radius: 50% 48% 0 0 / 28% 32% 0 0;
    content: "";
    background: var(--pink);
    box-shadow: 0 -18px 0 rgba(255, 244, 228, 0.12);
}

.coming-soon::after {
    position: absolute;
    top: -12%;
    right: -8%;
    width: 42vw;
    height: 42vw;
    z-index: -2;
    border: clamp(28px, 5vw, 70px) solid rgba(255, 216, 90, 0.22);
    border-radius: 50%;
    content: "";
    animation: spinSun 28s linear infinite;
}

.coming-soon__content {
    display: grid;
    width: min(1040px, 100%);
    gap: clamp(1.4rem, 4vw, 3rem);
    justify-items: center;
    text-align: center;
    animation: pageEnter 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.logo-stage {
    position: relative;
    display: grid;
    width: min(690px, 84vw);
    aspect-ratio: 2106 / 747;
    place-items: center;
    transform-style: preserve-3d;
    animation: floatLogo 5s ease-in-out infinite;
    will-change: transform;
}

.logo-glow {
    position: absolute;
    inset: 20% 5%;
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(255, 216, 90, 0.46), transparent 64%),
        radial-gradient(circle, rgba(109, 201, 209, 0.34), transparent 68%);
    filter: blur(24px);
    animation: pulseGlow 4.8s ease-in-out infinite;
}

.site-logo {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 28px 34px var(--shadow));
    animation: logoSquish 3.8s ease-in-out infinite;
    transform-origin: 50% 80%;
}

.copy {
    width: min(760px, 100%);
}

.eyebrow {
    margin: 0 0 0.9rem;
    color: var(--yellow);
    font-size: clamp(0.78rem, 1.6vw, 0.92rem);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

h1 {
    margin: 0;
    font-family: "Arial Rounded MT Bold", "Trebuchet MS", ui-rounded, sans-serif;
    font-size: clamp(2.25rem, 7vw, 5.2rem);
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 5px 0 rgba(109, 64, 73, 0.22);
}

.intro {
    width: min(620px, 100%);
    margin: 1.25rem auto 0;
    color: var(--muted);
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    line-height: 1.7;
}

.ambient {
    position: absolute;
    z-index: -1;
    border-radius: 999px;
    pointer-events: none;
    opacity: 0.62;
    filter: blur(2px);
}

.ambient-one {
    top: 11%;
    left: 10%;
    width: 11rem;
    height: 11rem;
    border: 10px solid rgba(109, 201, 209, 0.52);
    animation: orbit 18s linear infinite;
}

.ambient-two {
    right: 12%;
    bottom: 13%;
    width: 8rem;
    height: 8rem;
    border: 8px solid rgba(255, 216, 90, 0.48);
    animation: orbit 16s linear infinite reverse;
}

.ambient-three {
    top: 20%;
    right: 20%;
    width: 0.65rem;
    height: 0.65rem;
    background: var(--cream);
    box-shadow: 0 0 42px 13px rgba(255, 244, 228, 0.36);
    animation: shimmer 3.6s ease-in-out infinite;
}

.comic-sun {
    position: absolute;
    top: 8%;
    left: 7%;
    z-index: -1;
    width: clamp(72px, 9vw, 132px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--yellow);
    box-shadow: 0 0 0 14px rgba(255, 216, 90, 0.18);
    animation: bob 4.2s ease-in-out infinite;
}

.doodle {
    position: absolute;
    z-index: -1;
    color: var(--cream);
    pointer-events: none;
    user-select: none;
}

.doodle-star {
    font-size: clamp(2rem, 4vw, 4rem);
    animation: twinkle 3s ease-in-out infinite;
}

.doodle-star-one { top: 16%; right: 12%; color: var(--yellow); }
.doodle-star-two { bottom: 18%; left: 10%; color: var(--blue); animation-delay: -1.2s; }

.doodle-squiggle {
    right: 7%;
    bottom: 16%;
    color: var(--cream);
    font-size: clamp(2rem, 5vw, 5rem);
    font-weight: 900;
    transform: rotate(-14deg);
    animation: wiggle 3.5s ease-in-out infinite;
}

.doodle-burst {
    top: 38%;
    left: 5%;
    width: 78px;
    height: 78px;
    background: repeating-conic-gradient(from 0deg, var(--cream) 0 5deg, transparent 5deg 30deg);
    mask-image: radial-gradient(circle, transparent 0 43%, black 44% 100%);
    opacity: 0.54;
    animation: spinSun 18s linear infinite reverse;
}

@keyframes pageEnter {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes floatLogo {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg);
    }
    50% {
        transform: translate3d(0, -16px, 0) rotate(-1deg) rotateX(1.6deg) rotateY(-1.6deg);
    }
}

@keyframes logoSquish {
    0%, 100% { transform: scale(1, 1); }
    45% { transform: scale(1.025, 0.97); }
    55% { transform: scale(0.99, 1.025); }
}

@keyframes spinSun { to { transform: rotate(360deg); } }
@keyframes bob { 50% { transform: translateY(-12px) rotate(7deg); } }
@keyframes twinkle { 50% { transform: scale(1.3) rotate(18deg); opacity: 0.65; } }
@keyframes wiggle { 50% { transform: rotate(-8deg) translateY(-7px); } }

@keyframes pulseGlow {
    0%,
    100% {
        opacity: 0.62;
        transform: scale(0.98);
    }
    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

@keyframes orbit {
    from {
        transform: rotate(0deg) translateX(10px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(10px) rotate(-360deg);
    }
}

@keyframes shimmer {
    0%,
    100% {
        opacity: 0.46;
        transform: scale(0.88);
    }
    50% {
        opacity: 1;
        transform: scale(1.18);
    }
}

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

@media (max-width: 680px) {
    .coming-soon {
        padding: 1.25rem;
    }

    .coming-soon::before {
        bottom: -8%;
        height: 34%;
    }

    .logo-stage {
        width: min(520px, 92vw);
    }

    .intro {
        line-height: 1.6;
    }

    .doodle-burst,
    .ambient-one {
        display: none;
    }

    .comic-sun {
        top: 5%;
        left: 5%;
    }
}