:root{
    --bg1:#7bdff2; --bg2:#b2f7ef; --bg3:#eff7f6; --bg4:#f7d6e0; --bg5:#f2b5d4;
    --text:#212529; --muted:#6c757d;
    --card:#ffffff;
}

@media (prefers-color-scheme: dark){
    :root{
        --bg1:#0a0f1e; --bg2:#0e1730; --bg3:#101b3a; --bg4:#1a2146; --bg5:#282b50;
        --text:#f8f9fa; --muted:#adb5bd;
        --card:#161b2c;
    }
}

/* Arkaplan animasyonu */
body{
    min-height:100vh;
    display:grid;
    place-items:center;
    color:var(--text);
    background: linear-gradient(120deg, var(--bg1), var(--bg2), var(--bg3), var(--bg4), var(--bg5));
    background-size: 300% 300%;
    animation: bgShift 18s ease infinite;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Inter", sans-serif;
    overflow:hidden;
}
@keyframes bgShift{
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.card-maint{
    width:min(92vw, 720px);
    border-radius: 1.25rem;
    background: var(--card);
    box-shadow: 0 20px 60px rgba(0,0,0,.12);
    position:relative;
    z-index:2;
    overflow:hidden;
}

/* Üst şerit */
.ribbon{
    height:10px;
    background: linear-gradient(90deg,#ffbe0b,#fb5607,#ff006e,#8338ec,#3a86ff,#00c2ff);
    background-size: 200% 100%;
    animation: ribbonFlow 6s linear infinite;
}
@keyframes ribbonFlow{
    to{background-position: -200% 0;}
}

/* Başlık animasyonu */
.title{
    font-weight:800;
    letter-spacing:.4px;
    animation: wobble 2.4s ease-in-out infinite;
    display:inline-flex;
    align-items:center;
    gap:.5rem;
}
@keyframes wobble{
    0%,100%{transform:translateY(0)}
    25%{transform:translateY(-3px)}
    50%{transform:translateY(1px)}
    75%{transform:translateY(-2px)}
}

/* Dişli simge döndürme */
.gear{
    display:inline-block;
    animation: spin 5s linear infinite;
}
@keyframes spin{
    from{transform:rotate(0)}
    to{transform:rotate(360deg)}
}

/* Yükleniyor noktaları */
.dots::after{
    content:"";
    display:inline-block;
    width:1.5ch;
    text-align:left;
    animation: dots 1.6s steps(3,end) infinite;
}
@keyframes dots{
    0%{content:""}
    33%{content:"."}
    66%{content:".."}
    100%{content:"..."}
}

/* Buton yaylanma efekti */
.btn-spring{
    transition: transform .12s ease, box-shadow .2s ease;
    will-change: transform;
}
.btn-spring:hover{
    transform: translateY(-2px) scale(1.02);
    box-shadow:0 14px 30px rgba(0,0,0,.15);
}
.btn-spring:active{
    transform: translateY(0) scale(0.99);
}

/* Konfeti */
.confetti{
    position:fixed; inset:0; pointer-events:none; z-index:1;
}
.confetti span{
    position:absolute;
    width:10px; height:14px;
    top:-20px;
    opacity:.9;
    border-radius:2px;
    animation: fall linear forwards;
}
@keyframes fall{
    0%{transform:translateY(-20px) rotate(0deg)}
    100%{transform:translateY(110vh) rotate(360deg)}
}

/* Küçük dekoratif bloblar */
.blob{
    position:absolute; z-index:0; filter: blur(30px); opacity:.25;
    animation: float 14s ease-in-out infinite alternate;
}
@keyframes float{
    from{transform:translateY(0)}
    to{transform:translateY(40px)}
}
.blob.blob-1{ max-width: 100vw;max-height: 100vh; background:#ffbe0b; top:-60px; left:-60px;}
.blob.blob-2{ max-width: 100vw;max-height: background:#8338ec; bottom:-50px; right:-50px; animation-delay:1.5s}
.blob.blob-3{ max-width: 100vw;max-height: background:#00c2ff; top:20%; right:-40px; animation-delay:.8s}

.countdown{
    font-variant-numeric: tabular-nums;
    font-size:1.1rem;
}
.badge-soft{
    background: rgba(0,0,0,.06);
    color: var(--text);
}

/* Admin'e gizli hızlı erişim (klavye ile görünür yapma) */
.admin-tip{
    opacity:.6; font-size:.9rem;
}