body { margin:0; overflow:hidden; background:#0f172a; font-family:"Inter",sans-serif; color:white; }
.hidden { opacity:0; pointer-events:none; }

/* PRELOADER */
#preloader { position:fixed; inset:0; background:#0f172a; display:flex; flex-direction:column; justify-content:center; align-items:center; z-index:9999; }
#preloader .spinner { width:48px; height:48px; border:4px solid #1e293b; border-top-color:#38bdf8; border-radius:50%; animation:spin 0.8s linear infinite; }
#preloader p { margin-top:14px; color:#94a3b8; font-size:14px; }
@keyframes spin{to{transform:rotate(360deg);}}

/* CONTAINER */
.coming-container { width:100vw; height:100vh; position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; transition:opacity 0.7s ease-in-out; }

/* LAYER / PARALLAX */
.layer { position:absolute; inset:0; background-size:cover; background-position:center; will-change:transform; pointer-events:none; }
.layer-1{ background:radial-gradient(circle, rgba(56,189,248,0.15), transparent 70%); filter:blur(60px);}
.layer-2{ background-image:url('https://images.unsplash.com/photo-1504384308090-c894fdcc538d?auto=format&fit=crop&w=1600&q=80'); opacity:.18; filter:blur(40px);}
.layer-3{ background-image:url('https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=2000&q=80'); opacity:.12; filter:blur(20px);}
.overlay{ position:absolute; inset:0; background:radial-gradient(circle at 30% 30%, rgba(56,189,248,.25), transparent 60%); animation:glow 7s infinite alternate; }
@keyframes glow{from{opacity:.4;} to{opacity:.8;}}

/* PARTICLES */
#particles{ position:absolute; inset:0; z-index:1; pointer-events:none; }

/* INTRO ANIMATION */
.intro-animate{ opacity:0; transform:translateY(25px); animation:introFade 1s ease forwards; }
@keyframes introFade{ to{opacity:1; transform:translateY(0);}}

/* LOGO MODÜLÜ */
.coming-container {
    display: flex;
    flex-direction: column;
    justify-content: center; /* dikey ortalama */
    align-items: center;     /* yatay ortalama */
    height: 100vh;
    position: relative;
}

.logo-container {
    position: absolute;
    top: 20%;           /* yukarıdan ekranın %25’i kadar boşluk */
    left: 50%;
    transform: translateX(-50%);
    width: 360px;
    height: auto;
    z-index: 9999;
}

.logo-container svg {
    width: 100%;
    height: auto;
}
.logo-wrapper {
    position: relative;  /* diğer katmanların üstünde */
    z-index: 1000;
    width: 360px;
    height: 80px;
    margin: 40px auto;
    text-align: center;
    animation: logoShake 3s infinite alternate ease-in-out;
    overflow: visible;
}
.logo-wrapper svg{ width:100%; height:auto; }
.logo-wrapper svg path, .logo-wrapper svg circle{ stroke:#38bdf8; fill:rgba(56,189,248,0.2); stroke-width:4; animation:neonPulse 2s infinite alternate; filter:drop-shadow(0 0 6px #38bdf8) drop-shadow(0 0 12px #38bdf8) drop-shadow(0 0 18px #38bdf8);}
.logo-wrapper svg text{ animation:textGlow 2s infinite alternate; }
@keyframes neonPulse{0%{filter:drop-shadow(0 0 8px #38bdf8) drop-shadow(0 0 16px #38bdf8);}50%{filter:drop-shadow(0 0 12px #38bdf8) drop-shadow(0 0 24px #38bdf8);}100%{filter:drop-shadow(0 0 8px #38bdf8) drop-shadow(0 0 16px #38bdf8);}}
@keyframes textGlow{0%{fill:#fff;text-shadow:0 0 8px #38bdf8,0 0 16px #38bdf8;}50%{fill:#38bdf8;text-shadow:0 0 12px #38bdf8,0 0 24px #38bdf8;}100%{fill:#fff;text-shadow:0 0 8px #38bdf8,0 0 16px #38bdf8;}}
@keyframes logoShake{0%{transform:translateX(0px) rotate(0deg);}25%{transform:translateX(-2px) rotate(-1deg);}50%{transform:translateX(2px) rotate(1deg);}75%{transform:translateX(-1px) rotate(-0.5deg);}100%{transform:translateX(1px) rotate(0.5deg);}}

/* CONTENT */
.content{ z-index:10; backdrop-filter:blur(18px); background:rgba(255,255,255,0.04); padding:40px 60px; border-radius:18px; border:1px solid rgba(255,255,255,0.08); text-align:center; max-width:550px; }
.title{ font-size:42px; margin:0; font-weight:800; }
.subtitle{ color:#94a3b8; margin-top:10px; font-size:16px; }
.countdown{ display:flex; justify-content:center; gap:20px; margin:25px 0; }
.countdown div{ background:rgba(255,255,255,0.06); padding:12px 18px; border-radius:12px; min-width:70px; }
.countdown span{ font-size:26px; font-weight:700; color:#38bdf8; }
.countdown p{ font-size:11px; color:#94a3b8; margin-top:3px; }
.footer{ font-size:12px; color:#64748b; margin-top:20px; }
@media(max-width:600px){ .content{padding:30px 24px;} .title{font-size:32px;} .countdown div{padding:10px 14px; min-width:55px;} }