body {
    font-family: 'Comic Sans MS', cursive, sans-serif;
    margin: 0; padding: 0;
    background-color: #f0f8ff;
}

header { background: linear-gradient(90deg,#4CAF50,#00bcd4); color:white; text-align:center; padding:1.5rem;}
header h1 { font-size:2rem; margin-bottom:0.5rem; }
nav ul { list-style:none; display:flex; justify-content:center; padding:0; gap:1.5rem; }
nav a { color:white; text-decoration:none; font-weight:bold; display:flex; align-items:center; gap:0.3rem; transition:transform 0.3s; }
nav a:hover { transform: scale(1.2); }

.section {
    margin:2rem auto; padding:2rem; border-radius:15px; max-width:1000px;
    color:white; text-align:center; box-shadow:0 8px 16px rgba(0,0,0,0.2);
    transition: transform 0.3s;
}
.section:hover { transform: translateY(-5px); }

.cards {
    display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem; margin-top:1rem;
}
.card {
    background: rgba(255,255,255,0.2); padding:1rem; border-radius:15px; width:200px;
    transition: transform 0.3s, background 0.3s; cursor:pointer;
}
.card:hover {
    transform: scale(1.1) rotate(-2deg);
    background: rgba(255,255,255,0.4);
    animation: bounce 0.5s;
}

.card h3 { margin:0.5rem 0; }
.card p { font-size:0.9rem; }

#robotik { background: #ff6f61; }
#web-tasarim { background: #6a5acd; }
#web-programlama { background: #20b2aa; }
#programlama { background: #ffa500; }

footer { text-align:center; padding:1rem; background-color:#e0e0e0; color:#333; font-weight:bold; }
@keyframes bounce { 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.15);} }

/* Modal */
.modal { display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; overflow:auto; background: rgba(0,0,0,0.6);}
.modal-content { background:white; margin:10% auto; padding:20px; border-radius:15px; width:80%; max-width:500px; text-align:center;}
.close { color:#aaa; float:right; font-size:28px; font-weight:bold; cursor:pointer; }
.close:hover { color:#000; }


.modal-animation {
    margin-bottom: 15px;
}

.modal-animation i {
    color: #ff6f61;
    animation: float 2s ease-in-out infinite;
}

/* Basit yukarı-aşağı animasyon */
@keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0); }
}