:root {
    --core-blue: #00d2ff;
    --neon-glow: rgba(0, 210, 255, 0.5);
    --bg-black: #010206;
    --card-bg: rgba(6, 10, 18, 0.95);
    --border-blue: rgba(0, 210, 255, 0.3);
    --text-dim: #94a3b8;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Plus Jakarta Sans', sans-serif; }
body { background-color: var(--bg-black); color: white; text-align: center; overflow-x: hidden; }

/* ARKA PLAN & ORB */
.digital-grid { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(0, 210, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 210, 255, 0.05) 1px, transparent 1px); background-size: 50px 50px; z-index: -2; mask-image: radial-gradient(circle, black 20%, transparent 90%); }
.glow-orb { position: fixed; width: 700px; height: 700px; background: var(--core-blue); filter: blur(150px); opacity: 0.12; z-index: -1; top: -250px; left: -250px; }

/* NAVBAR */
.navbar { height: 100px; background: rgba(1, 2, 6, 0.95); display: flex; justify-content: space-between; align-items: center; padding: 0 5%; position: fixed; top: 0; width: 100%; z-index: 1000; border-bottom: 1px solid var(--border-blue); backdrop-filter: blur(25px); }
.main-logo { height: 75px; filter: drop-shadow(0 0 5px var(--core-blue)); }
.logo-area { display: flex; align-items: center; gap: 15px; }
.brand-name { font-weight: 900; font-size: 1.2rem; letter-spacing: 1px; }
.brand-sub { color: var(--core-blue); font-size: 0.7rem; font-weight: 700; letter-spacing: 2px; }
.nav-btn { background: none; border: none; color: var(--text-dim); margin-left: 20px; font-weight: 600; cursor: pointer; transition: 0.3s; }
.nav-btn:hover { color: var(--core-blue); text-shadow: 0 0 10px var(--core-blue); }
.btn-cta { background: var(--core-blue) !important; color: black !important; padding: 10px 22px; border-radius: 6px; font-weight: 800; box-shadow: 0 0 15px var(--neon-glow); }

/* 19 OCAK & VURGULU METİN */
.launch-date-container { margin: 40px 0 20px; }
.main-launch-date { font-size: 5rem; font-weight: 900; text-shadow: 0 0 30px var(--neon-glow); letter-spacing: 4px; }
.date-sub { color: var(--core-blue); font-weight: 800; letter-spacing: 6px; display: block; margin-bottom: 10px; }
.highlight-intro { font-size: 1.5rem; font-weight: 800; color: var(--core-blue); margin: 15px 0; letter-spacing: 1px; text-shadow: 0 0 10px var(--neon-glow); }

/* YENİ HEADER ANİMASYONU: MERKEZİ KÜP & RASTGELE ORBİTLER */
.header-engine-final { height: 400px; display: flex; justify-content: center; align-items: center; perspective: 1000px; }
.cube-orbit-system { position: relative; width: 300px; height: 300px; transform-style: preserve-3d; }

.central-cube { position: absolute; width: 100px; height: 100px; top: 50%; left: 50%; margin: -50px 0 0 -50px; transform-style: preserve-3d; animation: rotateCube 15s infinite linear; }
.face { position: absolute; width: 100px; height: 100px; background: rgba(0, 210, 255, 0.1); border: 2px solid var(--core-blue); display: flex; justify-content: center; align-items: center; font-weight: 800; color: var(--core-blue); box-shadow: inset 0 0 20px var(--neon-glow); }
.f-front { transform: translateZ(50px); } .f-back { transform: rotateY(180deg) translateZ(50px); }
.f-right { transform: rotateY(90deg) translateZ(50px); } .f-left { transform: rotateY(-90deg) translateZ(50px); }
.f-top { transform: rotateX(90deg) translateZ(50px); } .f-bottom { transform: rotateX(-90deg) translateZ(50px); }
@keyframes rotateCube { from { transform: rotateX(0) rotateY(0); } to { transform: rotateX(360deg) rotateY(720deg); } }

.orbit-wrap { position: absolute; top: 50%; left: 50%; transform-style: preserve-3d; }
.orbit-item { position: absolute; font-size: 2rem; left: 150px; filter: drop-shadow(0 0 10px var(--core-blue)); animation: counterRotate 10s infinite linear; }
/* Rastgele Eksenler */
.ow-1 { animation: orbit1 10s infinite linear; } .ow-2 { animation: orbit2 12s infinite linear reverse; } .ow-3 { animation: orbit3 15s infinite linear; }
.ow-4 { animation: orbit1 18s infinite linear reverse; } .ow-5 { animation: orbit2 20s infinite linear; }
@keyframes orbit1 { from { transform: rotateX(45deg) rotateY(0); } to { transform: rotateX(45deg) rotateY(360deg); } }
@keyframes orbit2 { from { transform: rotateX(-30deg) rotateZ(20deg) rotateY(0); } to { transform: rotateX(-30deg) rotateZ(20deg) rotateY(360deg); } }
@keyframes orbit3 { from { transform: rotateZ(45deg) rotateY(0); } to { transform: rotateZ(45deg) rotateY(360deg); } }
@keyframes counterRotate { from { transform: rotateY(0); } to { transform: rotateY(-360deg); } }

/* ORTAK PANEL STİLİ */
.main-panel-style { background: var(--card-bg); border: 1px solid var(--border-blue); padding: 40px; border-radius: 30px; box-shadow: 0 0 30px rgba(0, 210, 255, 0.05); transition: 0.3s; }
.main-panel-style:hover { border-color: var(--core-blue); box-shadow: 0 0 40px var(--neon-glow); }

/* CONTENT STYLES */
.content-wrapper { margin-top: 150px; padding: 0 8%; }
.section { display: none; animation: slideUp 0.7s ease-out; } .section.active { display: block; }
@keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

.motivation-panel { max-width: 900px; margin: 40px auto; }
.panel-top-icon { font-size: 2rem; margin-bottom: 10px; }
.motivation-panel p { font-size: 1.15rem; line-height: 1.8; color: var(--text-dim); }
.video-wrapper { width: 100%; max-width: 900px; aspect-ratio: 16/9; margin: 40px auto; border-radius: 20px; overflow: hidden; border: 2px solid var(--border-blue); }

.course-panel { width: 950px; margin: 0 auto; position: relative; }
.featured-badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--core-blue); color: black; padding: 8px 25px; border-radius: 50px; font-weight: 800; font-size: 0.8rem; }
.new-price { color: var(--core-blue); font-size: 3.5rem; font-weight: 900; text-shadow: 0 0 20px var(--neon-glow); }
.detailed-list { list-style: none; display: grid; grid-template-columns: 1fr; gap: 15px; text-align: left; margin: 30px 0; }
.detailed-list li { padding-left: 25px; position: relative; color: var(--text-dim); font-size: 1.05rem; line-height: 1.6; }
.detailed-list li::before { content: '▹'; color: var(--core-blue); position: absolute; left: 0; top: 2px; }
.highlight-item { color: var(--core-blue); font-weight: bold; }
.apply-btn { width: 100%; padding: 20px; border-radius: 10px; background: var(--core-blue); color: black; font-weight: 900; font-size: 1.2rem; border: none; cursor: pointer; box-shadow: 0 0 20px var(--neon-glow); }

/* ABOUT & TECH & CONTACT */
.tech-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; max-width: 950px; margin: 0 auto; }
.tech-card { text-align: left; padding: 35px; } .tech-icon { font-size: 2.5rem; color: var(--core-blue); margin-bottom: 15px; }
.about-card { max-width: 950px; margin: 0 auto; text-align: left; padding: 50px; }
.mono-text { font-family: 'JetBrains Mono'; color: var(--core-blue); border-bottom: 1px solid var(--border-blue); padding-bottom: 15px; margin-bottom: 25px; }
.desc { color: var(--text-dim); font-size: 1.15rem; line-height: 1.9; margin-bottom: 20px; }
.contact-terminal { max-width: 600px; margin: 0 auto; padding: 50px; }
.btn-main { background: var(--core-blue); color: black; padding: 18px 40px; border-radius: 10px; font-weight: 900; font-size: 1.1rem; border: none; cursor: pointer; margin-top: 20px; }

/* GAMES STYLES (Aynı kaldı, sorunsuz çalışıyorlar) */
.games-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; padding-bottom: 100px; max-width: 1100px; margin: 50px auto; }
.game-box { width: 500px; margin: 0 auto; }
.game-screen { height: 180px; background: #000; border-radius: 15px; margin: 15px 0; display: flex; align-items: center; justify-content: center; position: relative; border: 1px solid var(--border-blue); }
.reflex-icon { font-size: 4rem; opacity: 0.1; } .reflex-icon.active { opacity: 1; filter: drop-shadow(0 0 15px var(--core-blue)); }
.count-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 3.5rem; font-weight: 900; color: var(--core-blue); z-index: 10; }
.memory-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; height: 180px; }
.memory-card { position: relative; cursor: pointer; transform-style: preserve-3d; transition: 0.4s; } .memory-card.flipped { transform: rotateY(180deg); }
.memory-card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid var(--border-blue); }
.card-front { background: rgba(0, 210, 255, 0.1); transform: rotateY(180deg); } .card-back { background: rgba(255, 255, 255, 0.05); color: var(--core-blue); }
.bug-area { height: 180px; background: #000; border-radius: 15px; position: relative; overflow: hidden; border: 1px solid var(--border-blue); }
.bug-player { position: absolute; bottom: 5px; left: 50%; font-size: 2rem; transform: translateX(-50%); transition: left 0.1s ease-out; }
.falling-bug { position: absolute; font-size: 1.5rem; top: -40px; }
.click-area { height: 180px; background: #000; border-radius: 15px; position: relative; border: 1px solid var(--border-blue); overflow: hidden; }
.click-diamond { position: absolute; font-size: 2.5rem; cursor: pointer; display: none; filter: drop-shadow(0 0 10px var(--core-blue)); }
.code-area { height: 180px; background: #000; display: flex; flex-wrap: wrap; gap: 5px; padding: 10px; border: 1px solid var(--border-blue); overflow: hidden; align-content: flex-start; }
.error-log { color: #ff4757; font-size: 0.75rem; font-family: 'JetBrains Mono'; border: 1px solid #ff4757; padding: 2px 4px; cursor: pointer; border-radius: 3px; }
.type-area { height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; border: 1px solid var(--border-blue); border-radius: 15px; background: #000; }
.type-word { font-size: 2rem; font-weight: 900; color: var(--core-blue); }
.type-input { background: transparent; border: 1px solid var(--border-blue); color: #fff; padding: 10px; border-radius: 8px; width: 80%; text-align: center; }
.g-btn { padding: 10px 20px; border-radius: 6px; font-weight: 800; border: none; cursor: pointer; }
.g-btn.start { background: var(--core-blue); color: black; } .g-btn.stop { background: #ff4757; color: white; margin-left: 10px; } .g-btn:disabled { opacity: 0.3; }