/* ═══════════════════════════════════════════════════════════════
   SCHUMANN RESONANCE LIVE — ULTRA-PREMIUM GLOBE v3.0
   Cinematic 3D Earth · Animated Atmosphere · Auroral Rings
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────── RESET: eski globe çocuklarını kapat ─────────── */
#globe-container, .globe-surface, .globe-terminator, .globe-specular,
.globe-nebula, .globe-signal-mesh, .globe-lens-flare, .globe-depth-shadow,
.globe-rim-light, .globe-atmospheric-sheet, .globe-heart-layer,
.globe-pulse-ring, .magnetic-arc, .aurora-band, .globe-core-flash,
.globe-3d-ring, .globe-3d-arc, .globe-3d-aurora, .globe-3d-halo {
    display: none !important;
}

/* ─────────────── GLOBE SHELL ─────────────── */
#globe-shell {
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    display: block !important;
}

/* ─────────────── KEYFRAMES ─────────────── */
@keyframes globe-rotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes globe-rotate-slow {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes aurora-spin {
    from { transform: translate(-50%, -50%) rotate(-15deg); }
    to   { transform: translate(-50%, -50%) rotate(345deg); }
}
@keyframes aurora-spin-rev {
    from { transform: translate(-50%, -50%) rotate(20deg); }
    to   { transform: translate(-50%, -50%) rotate(-340deg); }
}
@keyframes corona-pulse {
    0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1);   }
    50%       { opacity: 0.80; transform: translate(-50%, -50%) scale(1.025); }
}
@keyframes atmo-breathe {
    0%, 100% { opacity: 0.65; }
    50%       { opacity: 0.90; }
}
@keyframes star-twinkle {
    0%, 100% { opacity: 0.45; }
    50%       { opacity: 0.70; }
}
@keyframes flare-pulse {
    0%, 100% { opacity: 0.0; transform: translate(-50%, -50%) scale(0.8); }
    40%       { opacity: 0.6; transform: translate(-50%, -50%) scale(1.1); }
    60%       { opacity: 0.4; transform: translate(-50%, -50%) scale(1.0); }
}

/* ─────────────── STARFIELD (animasyonlu) ─────────────── */
.globe-3d-stars {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1.2px 1.2px at 8%  12%, rgba(255,255,255,0.85), transparent),
        radial-gradient(1px   1px   at 14% 42%, rgba(200,220,255,0.70), transparent),
        radial-gradient(1.5px 1.5px at 22% 8%,  rgba(255,255,255,0.90), transparent),
        radial-gradient(1px   1px   at 31% 58%, rgba(255,200,120,0.65), transparent),
        radial-gradient(1.2px 1.2px at 38% 25%, rgba(255,255,255,0.75), transparent),
        radial-gradient(1px   1px   at 44% 72%, rgba(200,220,255,0.55), transparent),
        radial-gradient(1.8px 1.8px at 52% 4%,  rgba(255,255,255,0.95), transparent),
        radial-gradient(1px   1px   at 58% 38%, rgba(255,230,180,0.60), transparent),
        radial-gradient(1.2px 1.2px at 63% 85%, rgba(255,255,255,0.70), transparent),
        radial-gradient(1px   1px   at 69% 20%, rgba(200,220,255,0.65), transparent),
        radial-gradient(1.5px 1.5px at 74% 62%, rgba(255,255,255,0.80), transparent),
        radial-gradient(1px   1px   at 79% 48%, rgba(255,200,120,0.55), transparent),
        radial-gradient(1.8px 1.8px at 84% 15%, rgba(255,255,255,0.90), transparent),
        radial-gradient(1px   1px   at 88% 75%, rgba(200,220,255,0.60), transparent),
        radial-gradient(1.2px 1.2px at 92% 32%, rgba(255,255,255,0.75), transparent),
        radial-gradient(1px   1px   at 96% 88%, rgba(255,230,180,0.50), transparent),
        radial-gradient(1px   1px   at 5%  68%, rgba(255,255,255,0.60), transparent),
        radial-gradient(1.5px 1.5px at 17% 88%, rgba(200,220,255,0.70), transparent),
        radial-gradient(1px   1px   at 27% 78%, rgba(255,255,255,0.55), transparent),
        radial-gradient(1.2px 1.2px at 47% 92%, rgba(255,200,120,0.65), transparent),
        radial-gradient(1px   1px   at 71% 96%, rgba(255,255,255,0.50), transparent),
        radial-gradient(1px   1px   at 83% 93%, rgba(200,220,255,0.55), transparent);
    animation: star-twinkle 5s ease-in-out infinite;
}

/* ─────────────── EARTH SPHERE (çekirdek) ─────────────── */
.globe-3d-sphere {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(68vw, 660px);
    height: min(68vw, 660px);
    transform: translate(-50%, -50%);
}

/* Kara/deniz dokusu katmanı — dönen gradient */
.globe-3d-sphere::before {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background:
        radial-gradient(ellipse 55% 45% at 52% 48%,
            rgba(15, 90, 60, 0.22) 0%,
            rgba(10, 60, 40, 0.14) 38%,
            transparent 65%
        ),
        radial-gradient(ellipse 35% 28% at 28% 35%,
            rgba(20, 100, 65, 0.18) 0%,
            transparent 55%
        ),
        radial-gradient(ellipse 28% 20% at 72% 62%,
            rgba(15, 80, 55, 0.16) 0%,
            transparent 50%
        ),
        conic-gradient(
            from 210deg,
            rgba(8,  20,  55, 0.0)  0deg,
            rgba(12, 55, 110, 0.38) 40deg,
            rgba(8,  20,  50, 0.12) 80deg,
            rgba(14, 60, 115, 0.42) 130deg,
            rgba(8,  20,  50, 0.08) 175deg,
            rgba(12, 55, 108, 0.36) 230deg,
            rgba(8,  20,  50, 0.10) 280deg,
            rgba(14, 60, 115, 0.40) 330deg,
            rgba(8,  20,  55, 0.0)  360deg
        );
    animation: globe-rotate 90s linear infinite;
    transform-origin: center;
    /* override: sphere before doesn't have translate */
}
.globe-3d-sphere::before {
    transform: none;
    animation: none;
}

/* Earth sphere body */
.globe-3d-earth {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        /* Işık kaynağı — sol üst */
        radial-gradient(ellipse 52% 48% at 32% 28%,
            rgba(70, 130, 200, 0.18) 0%,
            transparent 55%
        ),
        /* Okyanus taban rengi */
        radial-gradient(ellipse 80% 75% at 48% 50%,
            rgba(12, 35, 85, 0.85) 0%,
            rgba(6,  16, 48, 0.92) 42%,
            rgba(3,   8, 24, 0.98) 72%,
            transparent 100%
        ),
        /* Kıta-kara yüzeyleri */
        radial-gradient(ellipse 30% 22% at 38% 40%,
            rgba(22, 88, 58, 0.24) 0%,
            transparent 60%
        ),
        radial-gradient(ellipse 20% 16% at 62% 55%,
            rgba(18, 72, 48, 0.20) 0%,
            transparent 55%
        ),
        /* Kutup buz kapakları */
        radial-gradient(ellipse 68% 18% at 50% 5%,
            rgba(200, 225, 255, 0.18) 0%,
            transparent 70%
        ),
        radial-gradient(ellipse 60% 14% at 50% 95%,
            rgba(180, 210, 255, 0.14) 0%,
            transparent 65%
        ),
        /* Gölge tarafı */
        radial-gradient(ellipse 55% 55% at 75% 65%,
            rgba(0, 0, 0, 0.60) 0%,
            transparent 68%
        );
    box-shadow:
        /* İç derinlik gölgesi */
        inset  28px  20px 90px  rgba(0,   8,  30, 0.52),
        inset -12px -10px 50px  rgba(0,   5,  20, 0.38),
        /* Dış parlama — mavi atmosfer */
        0 0 80px  rgba(40, 120, 230, 0.22),
        0 0 150px rgba(30,  90, 200, 0.14),
        0 0 280px rgba(20,  60, 160, 0.08);
}

/* ─────────────── ROTATE RING (kıtalar döner etkisi) ─────────────── */
.globe-3d-sphere::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        repeating-conic-gradient(
            from 0deg,
            rgba(10, 45, 105, 0.06) 0deg 8deg,
            rgba(18, 70, 145, 0.12) 8deg 16deg,
            rgba(8,  30,  75, 0.05) 16deg 24deg
        );
    animation: globe-rotate 120s linear infinite;
    transform: translate(0, 0);
}

/* ─────────────── ATMOSPHERE LAYER ─────────────── */
.globe-3d-atmosphere {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(78vw, 760px);
    height: min(78vw, 760px);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle,
        transparent 40%,
        rgba(50,  150, 255, 0.04) 44%,
        rgba(60,  170, 255, 0.10) 47%,
        rgba(70,  180, 255, 0.14) 50%,
        rgba(60,  165, 245, 0.09) 53%,
        rgba(45,  130, 220, 0.05) 57%,
        rgba(30,   90, 180, 0.02) 62%,
        transparent 68%
    );
    animation: atmo-breathe 7s ease-in-out infinite;
}

/* Terminator çizgisi — gün/gece sınırı */
.globe-3d-atmosphere::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(ellipse 30% 85% at 72% 48%,
        rgba(255, 200, 100, 0.06) 0%,
        rgba(255, 160,  60, 0.03) 25%,
        transparent 50%
    );
}

/* ─────────────── AURORA RINGS ─────────────── */
.globe-3d-corona {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(92vw, 900px);
    height: min(92vw, 900px);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    /* Ana korona parlaması */
    background: radial-gradient(circle,
        transparent 40%,
        rgba(56,  189, 248, 0.03) 46%,
        rgba(59,  130, 246, 0.05) 51%,
        rgba(139,  92, 246, 0.03) 56%,
        rgba(251, 191,  36, 0.01) 62%,
        transparent 70%
    );
    animation: corona-pulse 9s ease-in-out infinite;
}

/* Aurora ring 1 — cyan/yeşil */
.globe-3d-corona::before {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 88%; height: 88%;
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    border: 1.5px solid transparent;
    background:
        linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)) padding-box,
        conic-gradient(
            from 0deg,
            rgba(0, 240, 200, 0.0)  0%,
            rgba(0, 240, 200, 0.50) 18%,
            rgba(0, 200, 255, 0.55) 28%,
            rgba(100,80, 255, 0.35) 38%,
            rgba(0, 240, 200, 0.0)  50%,
            rgba(0, 240, 200, 0.0) 100%
        ) border-box;
    animation: aurora-spin 30s linear infinite;
    opacity: 0.70;
    filter: blur(0.5px);
}

/* Aurora ring 2 — violet/magenta */
.globe-3d-corona::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 95%; height: 95%;
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(20deg);
    border: 1px solid transparent;
    background:
        linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)) padding-box,
        conic-gradient(
            from 180deg,
            rgba(180, 60, 255, 0.0)  0%,
            rgba(180, 60, 255, 0.35) 20%,
            rgba(255, 80, 180, 0.40) 32%,
            rgba(60, 160, 255, 0.30) 44%,
            rgba(180, 60, 255, 0.0)  56%,
            rgba(180, 60, 255, 0.0) 100%
        ) border-box;
    animation: aurora-spin-rev 42s linear infinite;
    opacity: 0.55;
    filter: blur(0.5px);
}

/* ─────────────── LENS FLARE / GÜNEŞ IŞIĞI ─────────────── */
.globe-3d-stars::after {
    content: "";
    position: absolute;
    left: 32%;
    top: 26%;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 255, 220, 0.18) 0%,
        rgba(255, 240, 180, 0.10) 25%,
        rgba(255, 220, 120, 0.04) 50%,
        transparent 70%
    );
    animation: flare-pulse 12s ease-in-out infinite;
    pointer-events: none;
}

/* ─────────────── MOBILE ─────────────── */
@media (max-width: 768px) {
    .globe-3d-sphere {
        width: min(85vw, 440px);
        height: min(85vw, 440px);
    }
    .globe-3d-atmosphere {
        width: min(98vw, 510px);
        height: min(98vw, 510px);
    }
    .globe-3d-corona {
        width: min(112vw, 600px);
        height: min(112vw, 600px);
    }
}