/* ==========================================================================
   YKBL 1994-1995 ORTAK TASARIM DOSYASI (stil.css)
   ========================================================================== */

/* --- 1. GLOBAL SIFIRLAMA VE ANA RENKLER --- */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body { 
    background-color: #9e353d; /* Sabitlenen Kurumsal Bordo */
    color: #ffffff; 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
    font-family: 'Helvetica Neue', Arial, sans-serif; 
    overflow-x: hidden; 
}

/* --- 2. HEADER & ÜST MENÜ ALANI --- */
header { 
    background-color: #9e353d; 
    border-bottom: 4px solid #f8e620; /* Kurumsal Sarı Şerit */
    padding: 15px 5%; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.header-logo img { 
    height: 45px; 
    width: auto; 
}

nav ul { 
    display: flex; 
    list-style: none; 
    gap: 25px; 
    align-items: center; 
}

nav ul li a { 
    color: #ffffff; 
    text-decoration: none; 
    font-weight: 600; 
    font-size: 14px; 
    transition: color 0.2s, border-color 0.2s; 
    padding-bottom: 3px; 
    border-bottom: 2px solid transparent; 
}

nav ul li a:hover, nav ul li a.active { 
    color: #f8e620; 
    border-color: #f8e620; 
}

/* Menü Dropdown Yapısı */
.dropdown { 
    position: relative; 
}

.dropdown-menu { 
    display: none; 
    position: absolute; 
    background-color: #9e353d; 
    min-width: 150px; 
    box-shadow: 0px 8px 16px rgba(0,0,0,0.3); 
    border-radius: 4px; 
    margin-top: 5px; 
    z-index: 100; 
    max-height: 300px;
    overflow-y: auto;
    border: none;
}

.dropdown-menu a { 
    color: #ffffff; 
    padding: 10px 16px; 
    display: block; 
    text-decoration: none; 
    font-weight: 600; 
    font-size: 13px; 
    border-bottom: none;
    transition: color 0.2s;
}

.dropdown-menu a:hover { 
    background-color: transparent;
    color: #f8e620; 
}

.dropdown:hover .dropdown-menu { 
    display: block; 
}

/* --- 3. ORTAK BAŞLIK BANTI (Yönetim, Öğretmenler, Sınıflar İçin) --- */
.page-title-bar {
    background-color: #f8e620;
    color: #000000;
    text-align: center;
    padding: 0; 
    line-height: 1.8; 
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-weight: bold;
    font-size: 14px; 
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.15);
}

/* --- 4. INDEX.HTML (ANA SAYFA) ÖZEL STİLLERİ --- */
.hero-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px 20px;
}

.main-badge {
    width: 180px;
    height: auto;
    margin-bottom: 40px;
}

.hero-container h1 {
    font-family: 'Times New Roman', Times, serif;
    font-size: 36px;
    color: #e0db99; 
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.hero-container .years {
    font-family: 'Times New Roman', Times, serif;
    font-size: 28px;
    color: #e0db99;
    letter-spacing: 1px;
}

/* --- 5. YONETIM.HTML ÖZEL STİLLERİ --- */
.management-container {
    flex: 1;
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.card {
    text-align: center;
    background-color: transparent;
}

.card img {
    width: 100%;
    max-width: 480px;
    height: auto;
    border-radius: 0px;
    box-shadow: 0px 8px 20px rgba(0,0,0,0.25);
    margin-bottom: 15px;
}

.card h2 {
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

.card p {
    font-size: 14px;
    color: #ffffff;
    text-transform: uppercase;
    opacity: 0.9;
}

/* En Üstteki Tekli Müdür Alanı */
.director-row {
    display: flex;
    justify-content: center;
}

.director-row .card img {
    max-width: 550px; 
}

/* Alt Taraftaki İkili Yardımcı Izgarası */
.staff-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 40px;
}

/* --- 6. OGRETMENLERIMIZ.HTML VE FEN-5A.HTML IZGARA (GRID) STİLLERİ --- */
.teachers-container, .students-container {
    flex: 1;
    max-width: 1300px; 
    margin: 40px auto;
    padding: 0 20px;
}

.teachers-grid, .students-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr); 
    gap: 20px; 
}

.teacher-card, .student-card {
    text-align: center;
    background-color: transparent;
    text-decoration: none;
    display: block;
}

.student-card {
    transition: transform 0.2s;
}

.student-card:hover {
    transform: scale(1.05); 
}

.teacher-card img, .student-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4; 
    object-fit: cover; 
    border-radius: 0px; 
    box-shadow: 0px 4px 12px rgba(0,0,0,0.2);
    margin-bottom: 10px;
}

.teacher-card h3, .student-card h3 {
    font-size: 11px; 
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 1.3;
    margin-bottom: 3px;
}

.teacher-card p {
    font-size: 10px;
    color: #ffffff;
    text-transform: uppercase;
    opacity: 0.85;
    letter-spacing: 0.5px;
}

/* --- 7. ÖĞRENCİ DETAY SAYFALARI ÖZEL STİLLERİ --- */
.yearbook-nav-bar { 
    background-color: #f8e620; 
    padding: 8px 5%; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    box-shadow: 0px 4px 10px rgba(0,0,0,0.15); 
}

.nav-btn { 
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
    color: #000000; 
    text-decoration: none; 
    font-weight: bold; 
    font-size: 13px; 
    text-transform: uppercase; 
    padding: 6px 14px; 
    border-radius: 4px; 
    background-color: rgba(0, 0, 0, 0.05); 
}

.nav-btn:hover { 
    background-color: #9e353d; 
    color: #f8e620; 
}

.nav-btn.disabled {
    opacity: 0.3;
    pointer-events: none;
}

.profile-container { 
    flex: 1; 
    max-width: 1000px; 
    margin: 45px auto; 
    padding: 0 20px; 
    display: flex; 
    gap: 40px; 
    align-items: flex-start; 
}

.profile-left { 
    flex: 1; 
    max-width: 320px; 
    position: sticky; 
    top: 20px; 
}

.profile-left img { 
    width: 100%; 
    border: 3px solid #f8e620; 
    box-shadow: 0px 10px 25px rgba(0,0,0,0.3); 
}

.profile-right { 
    flex: 2; 
}

.profile-right h1 { 
    font-family: 'Times New Roman', Times, serif; 
    font-size: 36px; 
    color: #e0db99; 
    font-weight: bold; 
    text-transform: uppercase; 
    margin-bottom: 25px; 
    border-bottom: 2px solid #f8e620; 
    padding-bottom: 10px; 
}

.message-card { 
    background-color: rgba(255, 255, 255, 0.08); 
    border-left: 5px solid #f8e620; 
    padding: 22px; 
    margin-bottom: 20px; 
    border-radius: 0 8px 8px 0; 
}

.message-card p { 
    font-size: 15px; 
    line-height: 1.8; 
    color: #ffffff; 
    font-style: italic; 
}

.writer-tag { 
    display: block; 
    text-align: right; 
    margin-top: 10px; 
    font-weight: bold; 
    color: #f8e620; 
    font-size: 13px; 
    text-transform: uppercase; 
    border-top: 1px dashed rgba(248, 230, 32, 0.3); 
    padding-top: 8px; 
}

/* --- 8. FOOTER ALANI --- */
footer {
    background-color: #22252a; 
    padding: 30px 5%;
    font-size: 14px;
    color: #a0a5b0;
    margin-top: auto;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-name {
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-sub {
    margin-bottom: 20px;
    font-size: 13px;
}

.footer-socials {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.footer-socials a {
    color: #ffffff;
    font-size: 18px;
    transition: color 0.2s;
}

.footer-socials a:hover {
    color: #f8e620;
}

.footer-email {
    font-size: 13px;
    color: #a0a5b0;
}

/* --- 9. RESPONSIVE (DUYARLI) MEDYA SORGULARI --- */
@media (max-width: 1200px) {
    .teachers-grid, .students-grid {
        grid-template-columns: repeat(6, 1fr); 
    }
}

@media (max-width: 992px) {
    .teachers-grid, .students-grid {
        grid-template-columns: repeat(4, 1fr); 
    }
}

@media (max-width: 768px) {
    header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    nav ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }
    
    /* Index Mobil Uyum */
    .main-badge {
        width: 140px;
    }
    .hero-container h1 {
        font-size: 26px;
        letter-spacing: 1px;
    }
    .hero-container .years {
        font-size: 22px;
    }
    .footer-socials {
        justify-content: center;
    }
    
    /* Yönetim Mobil Uyum */
    .staff-grid {
        grid-template-columns: 1fr; 
        gap: 30px;
    }
    .card img {
        max-width: 100%;
    }

    /* Izgara Sistemleri Mobil Uyum */
    .teachers-grid, .students-grid {
        grid-template-columns: repeat(2, 1fr); 
        gap: 15px;
    }

    /* Öğrenci Detay Mobil Uyum */
    .profile-container {
        flex-direction: column;
        align-items: center;
        margin: 25px auto;
        gap: 25px;
    }

    .profile-left {
        max-width: 240px;
        position: static;
    }

    .profile-right h1 {
        font-size: 26px;
        text-align: center;
    }

    .messages-box, .message-card {
        padding: 18px;
        font-size: 14px;
    }

    footer {
        text-align: center;
    }
}