body {
    margin:0;
    font-family:Arial;
}

/* HEADER */
header {
    background:rgba(31,42,68,0.9);
    color:white;
    padding:15px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.menu {
    display:flex;
    gap:20px;
    list-style:none;
}

.menu li {
    cursor:pointer;
    transition:0.3s;
}

.menu li:hover {
    color:#00d4ff;
}

/* TÜM SECTION ORTAK */
section {
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:blue;
    text-align:center;
}

/* HOME ARKA PLAN */
#lobby {
    background: url("background.jpg") no-repeat center center fixed;
    background-size: cover;
}

/* GRAMMAR + VOCABULARY ARKA PLAN */
#grammar,
#vocabulary {
    background: url("background1.jpg") no-repeat center center fixed;
    background-size: cover;
}

/* BAŞLIK ANİMASYON */
.title-anim {
    animation:fadeDown 1s ease;
}

@keyframes fadeDown {
    from{opacity:0;transform:translateY(-30px);}
    to{opacity:1;transform:translateY(0);}
}

/* GÖRSELLER */
.image-row {
    display:flex;
    gap:20px;
    margin:30px 0;
}

.image-row img {
    width:150px;
    height:100px;
    object-fit:cover;
    border-radius:10px;
    transition:0.3s;
}

.image-row img:hover {
    transform:scale(1.1);
}

/* KARTLAR */
.cards {
    display:flex;
    gap:30px;
    margin-top:20px;
}

.card {
    background:white;
    color:#1f2a44;
    padding:25px;
    border-radius:15px;
    width:220px;
    text-align:center;
    cursor:pointer;
    transition:0.3s;
}

.card:hover {
    transform:translateY(-15px) scale(1.05);
}

/* ANİMASYON */
.card-anim {
    opacity:0;
    transform:translateY(50px);
    animation:cardUp 0.8s forwards;
}

.delay1 {animation-delay:0.3s;}

@keyframes cardUp {
    to{opacity:1;transform:translateY(0);}
}

button {
    padding:10px;
    cursor:pointer;
}

.hidden {
    display:none;
}
/* ABOUT & CONTACT ARKA PLAN */
body.about-page,
body.contact-page {
background: linear-gradient(135deg, #ff8a8a, #a94444);
    background-attachment: fixed;
}

}

/* Başlık parlak */
.about-page h1,
.contact-page h1 {
    color:red;
}

/* Linkler  */
.about-page a,
.contact-page a {
    color: #4da6ff;
}
/* GRAMMAR & VOCABULARY YAZI RENKLERİ */
#grammar,
#vocabulary {
    color:lightBlue; 
}

/* Başlık  parlak  */
#grammar h2,
#vocabulary h2 {
    color:white;
}

/* Butonlar  */
#grammar button,
#vocabulary button {
    background:#1f2a44;
    color:#4da6ff;
    border:none;
    margin:5px;
    border-radius:8px;
    transition:0.3s;
}

#grammar button:hover,
#vocabulary button:hover {
    background:#4da6ff;
    color:white;
}

/* Vocabulary liste görünümü */
#vocabulary ul {
    background:rgba(0,0,0,0.5);
    padding:20px;
    border-radius:12px;
}
/* LOGIN MODAL */
.login-modal {
    position: fixed;
    top:0; left:0;
    width:100%; height:100%;
    background: rgba(0,0,0,0.8);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:1000;
}

.login-content {
    background:#1f2a44;
    color:#4da6ff;
    padding:30px;
    border-radius:15px;
    text-align:center;
    width:300px;
}

.login-content input {
    width:90%;
    padding:10px;
    margin:10px 0;
    border:none;
    border-radius:8px;
}

.login-content button {
    width:95%;
    padding:10px;
    background:#4da6ff;
    color:white;
    border:none;
    border-radius:8px;
    cursor:pointer;
}

.login-content button:hover {
    background:white;
    color:#4da6ff;
}

.error-msg {
    color:#ff6666;
    margin-top:10px;
}

/* --- 4 KUTUCUK BÖLÜMÜ --- */
.custom-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 900px;
    margin: 40px auto;
}

.custom-card {
    background: rgba(255, 255, 255, 0.9);
    color: #1f2a44;
    padding: 50px 20px;
    border-radius: 20px;
    text-align: center;
    font-size: 1.5rem;
    cursor: default;
    transition: transform 0.3s, box-shadow 0.3s;
}

.custom-card:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}
#exam-dates ul {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
    font-size: 1.2em;
}

#exam-dates .exam-image img {
    width: 21cm;  /* A4 genişliği */
    height: 29.7cm; /* A4 yüksekliği */
    object-fit: cover;
    border: 2px solid #fff;
    border-radius: 10px;
}