/* 1. Hero Bölümü */
.level-hero {
    position: relative;
    height: 80vh;
    min-height: 500px;
    background: url('../../uploads/diger/1.jpg') center/cover fixed; /* Resim yolunu projenize göre güncelleyin */
    display: flex;
    align-items: end;
    padding: 20px 10%;
    border-radius: 0 0 80px 0;
    overflow: hidden;
    margin-bottom: 60px;
}

.level-hero-anaokulu {
    position: relative;
    height: 80vh;
    min-height: 500px;
    /* Değişiklik burada: center yerine right, cover yerine contain veya custom değer */
    background: url('../../uploads/diger/ahero.png') right bottom/contain no-repeat fixed; 
    background-color: #f4f5f7; /* Resmin bittiği yerlerde boşluk kalırsa görünecek renk */
    display: flex;
    align-items: end;
    padding: 20px 10%;
    border-radius: 0 0 80px 0;
    overflow: hidden;
    margin-bottom: 60px;
}

.level-hero::before {
    content: ''; position: absolute; top:0; left:0; width:100%; height:100%;
    background: linear-gradient(90deg, rgba(106, 42, 139, 0.9) 0%, rgba(0, 153, 188, 0.1) 100%);
}

.hero-content { position: relative; z-index: 2; color: white; max-width: 700px; }

.hero-badge {
    background: var(--p-orange); color: white; padding: 8px 16px; 
    border-radius: 30px; font-weight: 700; font-size: 0.9rem; text-transform: uppercase;
    display: inline-block; margin-bottom: 20px; letter-spacing: 1px;
}

.hero-title { font-family: 'Montserrat'; font-size: 4rem; font-weight: 800; line-height: 1.1; margin-bottom: 20px; }
.hero-desc { font-size: 1.25rem; font-weight: 300; line-height: 1.6; opacity: 0.95; }

/* 2. Intro & Philosophy */
.intro-section { text-align: center; padding: 40px 10%; max-width: 100%; margin: 0 auto 30px; }
.intro-quote { font-family: 'Playfair Display', serif; font-size: 1.8rem; font-style: italic; color: var(--p-purple); margin-bottom: 20px; }
.intro-text { font-size: 1.1rem; color: #555; line-height: 1.8; }

/* 3. İkonlu Grid (Özellikler) */
.features-grid { 
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; 
    padding: 0 8%; margin-bottom: 100px; 
}

.feature-box {
    background: white; padding: 40px 20px; text-align: center; border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: 0.4s; position: relative; overflow: hidden;
    border-bottom: 4px solid transparent;
}
.f-icon1 { font-size: 3rem; color: var(--p-blue); margin-bottom: 20px; transition: 0.4s; }
.feature-box:hover { transform: translateY(-10px); box-shadow: 0 20px 50px rgba(0,0,0,0.1); border-bottom-color: var(--p-blue); }

.feature-box:hover .f-icon { transform: scale(1.1); color: var(--p-purple); }
.f-title { font-family: 'Montserrat'; font-weight: 700; font-size: 1.2rem; margin-bottom: 10px; align-items:start; }
.f-desc { font-size: 0.9rem; color: #666; }

/* 4. Zig-Zag Detaylı İçerik */
.detail-row {
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    align-items: center; /* Dikeyde (yukarıdan aşağı) tam ortalar */
    justify-items: center; /* Yatayda tam ortalar */
}


.detail-text { padding: 20px 10%; }
.detail-img { 
    height: auto; 
    width: 85%; /* Resim genişliğini biraz artırarak daha dengeli durmasını sağlayabilirsiniz */
    object-fit: cover; 
    border-radius: 20px;
    display: block;
    margin: 0 auto; /* Resmi kendi kapsayıcısı içinde ortalar */
}

.bg-light { background: #fff; }
.bg-grey { background: #f4f5f7; }

.d-label { color: var(--p-orange); font-weight: 800; letter-spacing: 2px; text-transform: uppercase; font-size: 0.9rem; display: block; margin-bottom: 10px; }
.d-head { font-family: 'Montserrat'; font-size: 2rem; font-weight: 800; margin-bottom: 25px; color: var(--dark); }
.d-body { font-size: 1.05rem; line-height: 1.8; color: #555; margin-bottom: 30px; }
.d-list { list-style: none; padding: 0; }
.d-list li { margin-bottom: 12px; display: flex; align-items: center; gap: 10px; font-weight: 500; }
.d-list i { color: var(--p-green); }

/* 5. Tab Menü */
.tabs-container { padding: 100px 10%; background: white; text-align: center; }
.tabs-header { display: inline-flex; background: #f0f0f0; padding: 5px; border-radius: 50px; margin-bottom: 50px; }

.tab-btn {
    padding: 15px 40px; border: none; background: transparent; border-radius: 40px;
    font-family: 'Montserrat'; font-weight: 700; color: #777; cursor: pointer; transition: 0.3s;
}

.tab-btn.active { background: var(--p-purple); color: white; box-shadow: 0 5px 15px rgba(106, 42, 139, 0.3); }

.tab-content { display: none; animation: fadeIn 0.5s; text-align: left; }
.tab-content.active { display: grid; grid-template-columns: 1.5fr 1fr; gap: 50px; align-items: center; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* --- RESPONSIVE (MOBİL UYUMLULUK) --- */
@media (max-width: 1024px) {
    .level-hero { height: auto; padding: 150px 5% 80px; text-align: center; }
    .hero-title { font-size: 3rem; }
    .features-grid { grid-template-columns: 1fr 1fr; }
    .detail-row { grid-template-columns: 1fr; align-items:center; justify-items:center;}
    .detail-row.reverse { display: flex; flex-direction: column-reverse; justify-items:center; }
    .detail-img { height: 350px; }
    .tab-content.active { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .features-grid { grid-template-columns: 1fr; }
    .tabs-header { display: flex; flex-direction: column; border-radius: 20px; width: 100%; }
    .tab-btn { padding: 12px 20px; }
}
		@media (min-width: 1025px) {
    .detail-row.reverse {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .detail-row.reverse > div:first-child {
        order: 2; /* İlk div'i (yazıyı) sağa atar */
    }
    .detail-row.reverse > div:last-child {
        order: 1; /* İkinci div'i (resmi) sola atar */
    }
}


@media (min-width: 1025px) {
    .detail-row.reverse {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        justify-items: center;
    }
}

/* Mobil görünümde resimlerin düzgün ortalanması için */
@media (max-width: 1024px) {
    .detail-row {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .detail-img {
        width: 90%;
        margin-top: 20px; /* Yazı ile resim arasına boşluk */
        margin-bottom: 40px;
    }
}