/* ==========================================================================
   ANASAYFA EĞİTİM VE YAŞAM ALANLARIMIZ - SLIDER VE GÖRSEL TASARIM
   ========================================================================== */

.school-life-section {
    position: relative;
    width: 100%;
    margin-top: -100px; /* Bir önceki içeriğin üstüne taşma */
    padding: 150px 0 120px 0;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #1e293b;
    overflow: hidden;
    z-index: 10;
}

/* 🖼️ Dış Arka Plan Resimleri */
.school-life-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
}

/* Masaüstü ve Mobil Arka Plan Gösterim Mantığı */
.school-life-bg-image.bg-desktop {
    display: block;
}

.school-life-bg-image.bg-mobile {
    display: none;
}

/* ==========================================================================
   👶 SAĞ VE SOL DEKORATİF ÇOCUK GÖRSELLERİ (EN TEPEYE VE EŞİT BOYUTTA)
   ========================================================================== */
.decor-child {
    position: absolute;
    top: 25px; /* En tepeye hizalandı */
    z-index: 3;
    pointer-events: none; /* Cihazda tıklama engeli kalmasın */
    display: flex;
    align-items: flex-start;
}

.decor-child img {
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.12));
}

/* 🟢 Soldaki Çocuk (Sol Hizalama ve Boyut) */
.decor-child.decor-left {
    left: 2%;
}

.decor-child.decor-left img {
    width: 280px; /* Eşit büyük boy */
}

/* 🟢 Sağdaki Çocuklar (Sağ Hizalama ve Sol ile Birebir Aynı Boyut) */
.decor-child.decor-right {
    right: 2%;
}

.decor-child.decor-right img {
    width: 280px; /* Soldaki ile birebir aynı boy yapıldı */
}

/* Kapsayıcı */
.school-life-container {
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 5;
}

/* Üst Başlık Stilleri */
.school-life-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 50px auto;
}

.life-tag {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #2e5927;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.tag-line {
    width: 24px;
    height: 2px;
    background-color: #7ba668;
    border-radius: 2px;
}

.life-title {
    font-size: 44px;
    font-weight: 900;
    color: #1b3e1a;
    margin: 0 0 16px 0;
    letter-spacing: -1px;
    line-height: 1.15;
}

.life-title .highlight-green {
    color: #488b33;
}

.life-subtitle {
    font-size: 15.5px;
    line-height: 1.65;
    color: #3d523a;
    margin: 0;
}

/* ==========================================================================
   SLIDER & 3'LÜ KART YERLEŞİMİ
   ========================================================================== */
.life-slider-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
}

.life-slider-track-container {
    width: 100%;
    height: 480px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.life-slider-track {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Slider Kartları */
.life-card-slide {
    position: absolute;
    width: 520px;
    max-width: 80%;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
    cursor: pointer;
    will-change: transform, opacity;
}

/* Yaprak Şekilli Kart Çerçevesi */
.leaf-frame-card {
    position: relative;
    width: 100%;
    height: 380px;
    border-radius: 180px 20px 180px 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(27, 62, 26, 0.12);
    background-color: #ffffff;
    border: 4px solid #ffffff;
    transition: all 0.4s ease;
}

.life-card-slide.active .leaf-frame-card {
    border-color: #7ba668;
    box-shadow: 0 25px 60px rgba(27, 62, 26, 0.28);
}

.card-image-wrap {
    width: 100%;
    height: 100%;
    position: relative;
}

.card-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.life-card-slide:hover .card-image-wrap img {
    transform: scale(1.06);
}

/* Sol Alt Yaprak Rozet Overlay */
.leaf-badge-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 82%;
    background: linear-gradient(135deg, #1d4320 0%, #29572b 100%);
    color: #ffffff;
    padding: 20px 22px 20px 26px;
    border-radius: 0 90px 0 0;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 4px -4px 20px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(10px);
}

.badge-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a3e635;
}

.badge-icon svg {
    width: 22px;
    height: 22px;
}

.badge-content h3 {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 4px 0;
    color: #ffffff;
    line-height: 1.2;
}

.badge-content p {
    font-size: 12px;
    line-height: 1.4;
    color: #d1e7dd;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.badge-arrow {
    width: 36px;
    height: 36px;
    min-width: 36px;
    margin-left: auto;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.badge-arrow svg {
    width: 18px;
    height: 18px;
}

.badge-arrow:hover {
    background: #a3e635;
    color: #1b3e1a;
    transform: translateX(3px);
}

/* ==========================================================================
   🟢 YUVARLAK OK BUTONLARI
   ========================================================================== */
.leaf-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2e5927 0%, #488b33 100%);
    border: 3px solid #ffffff;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 25;
    box-shadow: 0 8px 22px rgba(27, 62, 26, 0.28);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-prev.leaf-nav-btn { left: 10px; }
.btn-next.leaf-nav-btn { right: 10px; }

.leaf-nav-btn:hover {
    background: linear-gradient(135deg, #a3e635 0%, #488b33 100%);
    color: #1b3e1a;
    border-color: #ffffff;
    box-shadow: 0 12px 28px rgba(72, 139, 51, 0.45);
    transform: translateY(-50%) scale(1.12);
}

.leaf-nav-btn svg {
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

/* Dots */
.life-slider-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 35px;
}

.life-slider-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #cbd5e1;
    cursor: pointer;
    transition: all 0.3s ease;
}

.life-slider-dots .dot.active {
    width: 28px;
    border-radius: 10px;
    background-color: #2e5927;
}

/* Tümünü Gör Butonu */
.life-action-wrap {
    text-align: center;
}

.btn-life-all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 34px;
    border-radius: 30px;
    border: 2px solid #2e5927;
    background-color: transparent;
    color: #2e5927;
    font-size: 14.5px;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-life-all svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

.btn-life-all:hover {
    background-color: #2e5927;
    color: #ffffff;
    box-shadow: 0 8px 22px rgba(46, 89, 39, 0.28);
}

.btn-life-all:hover svg {
    transform: translateX(4px);
}

/* ==========================================================================
   📱 MOBİL VE TABLET UYUMLULUK & EŞİT KÜÇÜLME AYARLARI
   ========================================================================== */
@media (max-width: 1400px) {
    .decor-child.decor-left img,
    .decor-child.decor-right img { 
        width: 220px; /* Her iki taraf da eşit küçülüyor */
    }
}

@media (max-width: 1024px) {
    .life-slider-track-container { height: 420px; }
    .life-card-slide { width: 440px; }
    .leaf-frame-card { height: 330px; }
    .life-title { font-size: 36px; }

    .decor-child { top: 15px; }
    .decor-child.decor-left img,
    .decor-child.decor-right img { 
        width: 160px; /* Tablet boyutu eşit */
    }
}

@media (max-width: 768px) {
    /* 📱 Mobil Arka Plan Resmi Değişimi */
    .school-life-bg-image.bg-desktop { display: none; }
    .school-life-bg-image.bg-mobile { display: block; }

    /* Mobilde görseller tepeye hizalı kalır ve eşit boyuttadır */
    .decor-child { top: 10px; opacity: 0.85; }
    .decor-child.decor-left img,
    .decor-child.decor-right img { 
        width: 110px; /* Mobil boyutu eşit */
    }

    .school-life-section {
        margin-top: -50px;
        padding: 90px 0 70px 0;
    }

    .school-life-header { margin-bottom: 35px; }
    .life-title { font-size: 28px; }
    .life-subtitle { font-size: 14px; }
    .life-slider-track-container { height: 340px; }
    .life-card-slide { width: 90%; }

    .leaf-frame-card {
        height: 300px;
        border-radius: 100px 15px 100px 15px;
    }

    .leaf-badge-overlay {
        width: 90%;
        padding: 15px;
        border-radius: 0 50px 0 0;
    }

    .badge-icon { width: 36px; height: 36px; min-width: 36px; }
    .badge-content h3 { font-size: 15px; }
    .badge-content p { font-size: 11px; -webkit-line-clamp: 1; }

    .leaf-nav-btn { width: 44px; height: 44px; }
    .leaf-nav-btn svg { width: 20px; height: 20px; }
    .btn-prev.leaf-nav-btn { left: 0px; }
    .btn-next.leaf-nav-btn { right: 0px; }
}