body {
    margin:0;
    font-family:Arial,sans-serif;
    background:#0b0b0b;
    color:#fff;
    overflow-x:hidden;
}

/* Particle Background */
#tsparticles {
    position: fixed; top:0; left:0; width:100%; height:100%; z-index:0;
}
body > nav,
body > header,
body > section { position: relative; z-index:1; }

/* NAVBAR */
nav {
    position:fixed; top:0; width:100%; background:#111; display:flex;
    justify-content:space-between; align-items:center; padding:10px 50px;
    z-index:100; box-shadow:0 0 20px #000;
}
nav .logo{ font-size:24px; color:#c084fc; font-weight:bold; }
nav .menu a{ color:#fff; margin-left:25px; text-decoration:none; opacity:0.8; transition:0.3s; }
nav .menu a:hover{ color:#c084fc; opacity:1; }

/* HEADER */
header{ height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; background:radial-gradient(circle,#3b0066,#000); }
header h1{
    font-size:64px; text-shadow:0 0 25px purple; opacity:0;
    animation:fadeInHeader 2s forwards, headerBounceGlow 2s ease-in-out 2s infinite alternate;
}
header p{ font-size:18px; opacity:0.8; animation:fadeIn 2s 1s forwards; }

/* FOUNDERS */
#founders{ padding:100px 10%; text-align:center; overflow:hidden; }
.founder-container{ display:flex; justify-content:center; flex-wrap:wrap; gap:40px; }
.founder-card{
    background:#111; border:1px solid #222; border-radius:15px; padding:30px 20px; width:220px;
    text-align:center; box-shadow:0 0 20px #000; transition:all 0.5s ease;
    transform:translateY(50px); opacity:0; animation:fadeUpCard 1s forwards;
}
.founder-card:nth-child(1){animation-delay:0.2s;}
.founder-card:nth-child(2){animation-delay:0.5s;}
.founder-card:hover{
    box-shadow:0 0 25px #c084fc,0 0 40px #c084fc44 inset; transform:scale(1.05); border-color:#c084fc;
}
.founder-name{ font-size:20px; font-weight:bold; color:#c084fc; text-shadow:0 0 10px #c084fc; margin-bottom:5px; }
.founder-role{ font-size:14px; opacity:0.7; }

/* RELEASES */
#releases{padding:100px 10%; }
.card {
    background:#111; padding:20px; border-radius:10px; margin-bottom:20px;
    border:1px solid #222; transition:0.3s; transform:translateY(50px); opacity:0;
}
.card.show { animation:fadeUpRelease 0.8s forwards; }
.card:hover {
    border-color:#c084fc;
    box-shadow: 0 0 15px #c084fc, 0 0 25px #c084fc inset, 0 0 40px #c084fc55;
    transform: scale(1.05) translateY(-5px);
    animation: bounceHover 0.5s;
}
@keyframes bounceHover {
    0% { transform: scale(1.05) translateY(-5px); }
    30% { transform: scale(1.08) translateY(-10px); }
    60% { transform: scale(1.05) translateY(-5px); }
    100% { transform: scale(1.05) translateY(-5px); }
}
@keyframes fadeUpRelease { from {opacity:0; transform:translateY(50px);} to {opacity:1; transform:translateY(0);} }

/* TICKER */
.ticker-container { overflow:hidden; background:#111; border:1px solid #222; border-radius:10px; padding:10px 0; margin-bottom:20px; position:relative; }
.ticker { display:flex; white-space:nowrap; animation: tickerAnim 15s linear infinite; }
.ticker span { display:inline-block; padding-right:50px; font-weight:bold; color:#c084fc; text-shadow:0 0 5px #c084fc; }
.ticker-container:hover .ticker { animation-play-state:paused; }
@keyframes tickerAnim { 0% { transform:translateX(100%); } 100% { transform:translateX(-100%); } }

/* VIDEOS */
#videos{padding:100px 10%; text-align:center;}
.video-container{
    display:flex;
    justify-content:center; /* Ortala */
    gap:30px;
    overflow-x:auto; /* Yatay scroll gerekiyorsa */
    padding-bottom:10px;
}
.video-container::-webkit-scrollbar { height:8px; }
.video-container::-webkit-scrollbar-thumb { background:#c084fc; border-radius:4px; }
.video-card {
    background:#111;
    border:1px solid #222;
    border-radius:15px;
    padding:10px;
    min-width:300px;
    max-width:350px;
    flex-shrink:0;
    box-shadow:0 0 15px #000;
    transition:0.3s;
}
.video-card iframe {
    width:100%;
    aspect-ratio:16/9;
    border-radius:10px;
}
.video-title {
    margin-top:10px;
    font-weight:bold;
    color:#c084fc;
    text-align:center;
}
.video-card:hover {
    box-shadow:0 0 25px #c084fc,0 0 40px #c084fc44 inset;
    transform:scale(1.05) translateY(-5px);
}

/* CONVERTER */
#converter{padding:100px 10%; text-align:center;}
#yt-link{padding:12px; width:320px; border-radius:8px; border:none; margin-bottom:15px; box-shadow:0 0 10px #000 inset; transition:0.3s;}
#yt-link:focus{outline:none; box-shadow:0 0 20px #c084fc inset;}
#convert-btn{padding:12px 25px; border:none; background:#c084fc; color:#fff; cursor:pointer; border-radius:8px; font-weight:bold; font-size:16px; transition:0.3s;}
#convert-btn:hover{background:#9b4edb; transform:scale(1.05);}
.converter-status{margin-top:15px; color:#c084fc; font-weight:bold; min-height:20px; transition:0.3s;}

/* HEADER ANIMATIONS */
@keyframes fadeInHeader { from {opacity:0;} to {opacity:1;} }
@keyframes headerBounceGlow {
    0% { transform: translateY(0) scale(1); text-shadow:0 0 15px #c084fc; color:#c084fc; }
    50% { transform: translateY(-10px) scale(1.05); text-shadow:0 0 30px #9b4edb,0 0 20px #c084fc; color:#9b4edb; }
    100% { transform: translateY(0) scale(1); text-shadow:0 0 15px #c084fc; color:#c084fc; }
}

/* OTHER ANIMATIONS */
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes fadeUpCard{to{transform:translateY(0); opacity:1;}}

/* RESPONSIVE */
@media(max-width:768px){
    header h1{ font-size:40px; }
    header p{ font-size:14px; }
    .founder-card{ width:160px; padding:20px; }
    .founder-name{ font-size:16px; }
    .founder-role{ font-size:12px; }
    #yt-link{ width:220px; }
    #convert-btn{ font-size:14px; padding:10px 20px; }
    .ticker span{ font-size:14px; }
    .video-card { min-width:200px; max-width:45%; }
    .video-container { justify-content:center; }
}