/* ==========================================================================
   Eğitim Portalı — EduFit teması üzerine proje ekleri
   ========================================================================== */

:root {
    --ep-birincil: #5b6ef5;
    --ep-ikincil: #ffb433;
    --ep-koyu: #10193a;
    --ep-gri: #6a7392;
    --ep-cizgi: #e6e9f5;
    --ep-yumusak: #f6f7fc;
}

/* --- Uyarı kutuları --------------------------------------------------- */
.uyari {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 14px;
    border: 1px solid transparent;
}

.uyari i { margin-top: 3px; }
.uyari-basari { background: #e9f9f0; color: #14804a; border-color: #bfe9d1; }
.uyari-hata { background: #fdeeee; color: #b42318; border-color: #f6cfcb; }
.uyari-bilgi { background: #eef2ff; color: #33409e; border-color: #ccd6fb; }
.uyari-dikkat { background: #fff8e6; color: #8a5d00; border-color: #f6e2b0; }

.ust-bilgi { color: #fff; opacity: .85; font-size: 14px; }

/* --- Sayfa başlığı ---------------------------------------------------- */
.sayfa-basligi {
    background: linear-gradient(120deg, #101a3f 0%, #2a3a86 100%);
    padding: 90px 0 80px;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.sayfa-basligi h1 { color: #fff; font-size: 44px; margin-bottom: 10px; }
.sayfa-basligi p { color: rgba(255, 255, 255, .75); max-width: 640px; margin: 0 auto; }
.sayfa-basligi .yol { margin-top: 16px; font-size: 15px; color: rgba(255, 255, 255, .7); }
.sayfa-basligi .yol a { color: #fff; }

@media (max-width: 767px) {
    .sayfa-basligi { padding: 60px 0 55px; }
    .sayfa-basligi h1 { font-size: 30px; }
}

/* --- Panel (üye + yönetim ortak ekleri) ------------------------------- */
.panel-kart {
    background: #fff;
    border: 1px solid var(--ep-cizgi);
    border-radius: 14px;
    padding: 22px;
    margin-bottom: 22px;
}

.dosya-satir {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid var(--ep-cizgi);
    border-radius: 12px;
    background: #fff;
    margin-bottom: 12px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.dosya-satir:hover { border-color: #c9d1f8; box-shadow: 0 6px 20px rgba(16, 25, 58, .06); }
.dosya-satir .simge {
    width: 50px; height: 50px; flex: 0 0 50px;
    border-radius: 12px; background: var(--ep-yumusak);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: var(--ep-birincil);
}
.dosya-satir .govde { flex: 1 1 auto; min-width: 0; }
.dosya-satir .govde h5 { font-size: 17px; margin: 0 0 4px; }
.dosya-satir .govde .meta { font-size: 13.5px; color: var(--ep-gri); }
.dosya-satir .eylem { flex: 0 0 auto; }

@media (max-width: 575px) {
    .dosya-satir { flex-wrap: wrap; }
    .dosya-satir .eylem { width: 100%; }
    .dosya-satir .eylem .btn, .dosya-satir .eylem .theme-btn { width: 100%; justify-content: center; }
}

.etiket {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 30px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.6;
}

.donem-basligi {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 30px 0 16px;
}

.donem-basligi h4 { margin: 0; font-size: 20px; }
.donem-basligi .cizgi { flex: 1; height: 1px; background: var(--ep-cizgi); }

/* --- Formlar ---------------------------------------------------------- */
.form-hata { color: #b42318; font-size: 13.5px; margin-top: 6px; display: block; }
.zorunlu { color: #e5484d; }

.giris-kutu {
    max-width: 520px;
    margin: 0 auto;
    background: #fff;
    border-radius: 18px;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(16, 25, 58, .08);
    border: 1px solid var(--ep-cizgi);
}

@media (max-width: 575px) {
    .giris-kutu { padding: 26px 20px; }
}

.giris-kutu h3 { font-size: 26px; margin-bottom: 6px; }
.giris-kutu .alt { color: var(--ep-gri); margin-bottom: 26px; font-size: 15px; }
.giris-kutu .form-group { margin-bottom: 18px; }
.giris-kutu label.etiket-metin { display: block; font-weight: 600; margin-bottom: 7px; font-size: 14.5px; color: var(--ep-koyu); }
.giris-kutu .form_control { width: 100%; }

.bilgi-serit {
    background: var(--ep-yumusak);
    border: 1px dashed #cfd6f2;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 14px;
    color: var(--ep-gri);
    margin-bottom: 22px;
}

/* --- Duyuru kartı ----------------------------------------------------- */
.duyuru-kart {
    background: #fff;
    border: 1px solid var(--ep-cizgi);
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, box-shadow .25s ease;
}

.duyuru-kart:hover { transform: translateY(-5px); box-shadow: 0 16px 36px rgba(16, 25, 58, .10); }
.duyuru-kart .gorsel { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ep-yumusak); }
.duyuru-kart .gorsel img { width: 100%; height: 100%; object-fit: cover; }
.duyuru-kart .govde { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.duyuru-kart .govde h4 { font-size: 19px; margin-bottom: 10px; }
.duyuru-kart .govde p { color: var(--ep-gri); font-size: 15px; flex: 1; }
.duyuru-kart .tarih { font-size: 13.5px; color: var(--ep-gri); margin-bottom: 8px; }

/* --- Küçük yardımcılar ------------------------------------------------ */
.metin-gri { color: var(--ep-gri); }
.kesik { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bos-durum { text-align: center; padding: 60px 20px; color: var(--ep-gri); }
.bos-durum i { font-size: 46px; color: #c8cee8; margin-bottom: 14px; display: block; }

/* --- Kimlik ekranları (giriş / kayıt / şifre) -------------------------- */
.kimlik-tanitim {
    position: absolute;
    left: 0; right: 0; bottom: 50px;
    text-align: center;
    padding: 0 30px;
}
.kimlik-tanitim h4 { color: #fff; font-size: 24px; margin-bottom: 8px; }
.kimlik-tanitim p { color: rgba(255, 255, 255, .8); font-size: 15.5px; margin: 0; }

.ef-user-sec .user-left { position: relative; }
.ef-user-sec .user-form-wrapper .uyari { text-align: left; }
.ef-user-sec .form-group label span { color: #e5484d; }
.ef-user-sec select.form_control { appearance: auto; }
.ef-user-sec small.metin-gri { display: block; margin-top: 6px; font-size: 13px; }
.sifre-unuttum { font-size: 14.5px; color: var(--ep-birincil); }

.kimlik-alt-baglanti {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--ep-cizgi);
    font-size: 15px;
}
.kimlik-alt-baglanti p { margin-bottom: 8px; }
.kimlik-alt-baglanti .geri { color: var(--ep-gri); font-size: 14.5px; }

@media (max-width: 991px) {
    .kimlik-tanitim { display: none; }
}

/* --- Duyuru detay ------------------------------------------------------ */
.duyuru-detay .kapak { border-radius: 16px; overflow: hidden; margin-bottom: 26px; }
.duyuru-detay .kapak img { width: 100%; height: auto; display: block; }
.duyuru-detay .ust-meta { display: flex; gap: 22px; color: var(--ep-gri); font-size: 14.5px; margin-bottom: 14px; flex-wrap: wrap; }
.duyuru-detay h2 { font-size: 32px; margin-bottom: 16px; line-height: 1.3; }
.duyuru-detay .ozet { font-size: 18px; color: #2c3557; font-weight: 500; line-height: 1.7; margin-bottom: 20px; }
.duyuru-detay .icerik { font-size: 16.5px; line-height: 1.85; color: #495073; }

@media (max-width: 767px) {
    .duyuru-detay h2 { font-size: 24px; }
    .duyuru-detay .ozet { font-size: 16.5px; }
}

.yan-panel {
    background: var(--ep-yumusak);
    border: 1px solid var(--ep-cizgi);
    border-radius: 16px;
    padding: 26px 22px;
    position: sticky;
    top: 20px;
}
.yan-panel h4 { font-size: 19px; margin-bottom: 18px; }
.yan-duyuru { display: block; padding: 13px 0; border-bottom: 1px dashed #d9deef; }
.yan-duyuru:last-of-type { border-bottom: 0; }
.yan-duyuru .tarih { display: block; font-size: 13px; color: var(--ep-gri); margin-bottom: 3px; }
.yan-duyuru .baslik { display: block; font-size: 15.5px; font-weight: 600; color: var(--ep-koyu); line-height: 1.45; }
.yan-duyuru:hover .baslik { color: var(--ep-birincil); }

/* --- İletişim ---------------------------------------------------------- */
.iletisim-bilgi h3 { font-size: 28px; margin-bottom: 12px; }
.iletisim-kutu { display: flex; gap: 16px; align-items: flex-start; margin-top: 24px; }
.iletisim-kutu .simge {
    width: 48px; height: 48px; flex: 0 0 48px;
    border-radius: 12px; background: var(--ep-yumusak);
    display: flex; align-items: center; justify-content: center;
    color: var(--ep-birincil); font-size: 19px;
}
.iletisim-kutu h5 { font-size: 16px; margin: 0 0 3px; }
.iletisim-kutu a, .iletisim-kutu span { color: var(--ep-gri); font-size: 15.5px; }
.iletisim-liste li { color: rgba(255,255,255,.75); margin-bottom: 10px; font-size: 15px; }
.iletisim-liste li i { margin-right: 8px; }

/* --- Sayfalama --------------------------------------------------------- */
.pagination { gap: 6px; }
.page-link { border-radius: 10px !important; border: 1px solid var(--ep-cizgi); color: var(--ep-koyu); padding: 9px 15px; }
.page-item.active .page-link { background: var(--ep-birincil); border-color: var(--ep-birincil); color: #fff; }

/* ==========================================================================
   Panelden yüklenen görseller
   Müşteri farklı boyut ve oranda görsel yükleyebilir. Oran sabitlenmezse
   bölüm yükseklikleri değişiyor ve sayfa kayıyor. Aşağıdaki kurallar
   görseli kırpar (esnetmez), yükseklik hep aynı kalır.
   ========================================================================== */
.blok-gorsel-oran {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 20px;
    background: #eef1f7;
}

/* Mobil efekt.
   Temanın kendi hareketi telefonda 100 px'lik sıçramalar yapıp sayfayı
   oynatıyordu. Onun yerine bölümler kendi yönlerinden 30 px süzülerek geliyor:
   belirgin bir efekt ama sayfayı sarsmıyor ve yatay kaydırma açmıyor.
   Süre, masaüstündeki gibi her bölümün kendi ayarına bırakıldı (700–1000 ms),
   böylece kartlar sırayla akıyor. */
@media (max-width: 991px) {
    /* Mesafe 40 px + hafif küçülme: efekt belirgin ama sayfayı sarsmıyor.
       Ölçek değişimi yatay kaydırma açmaz (küçülterek başlar, büyüyerek oturur). */
    [data-aos^="fade"]:not(.aos-animate) { transform: translate3d(0, 40px, 0) scale(.97) !important; }
    [data-aos="fade-down"]:not(.aos-animate) { transform: translate3d(0, -40px, 0) scale(.97) !important; }
    /* Sola kaydırma yatay kaydırma çubuğu açmaz; sağa olan açardı. */
    [data-aos="fade-right"]:not(.aos-animate) { transform: translate3d(-30px, 0, 0) scale(.97) !important; }

    /* Süre: masaüstünde bölüm başına 700–1000 ms. Telefonda parmakla
       kaydırırken bu fazla hızlı kalıyor ve efekt fark edilmiyordu;
       hepsi 1150 ms'ye çekildi. Sıralı akış gecikmelerden (delay) geliyor,
       onlara dokunulmadı. */
    [data-aos] { transition-duration: 1150ms !important; }
}

/* ==========================================================================
   MOBİL DÜZEN
   Müşteri: "yazılar ortalansın, akıcılık artsın."
   İki iş yapıyor: (1) telefon ve tablette (hamburger menünün göründüğü
   992 px altı) her bölümün yazısı ve kutuları ortalanıyor — tema bazı
   bölümleri ortalı, bazılarını sola dayalı bırakıyordu ve karışık duruyordu;
   (2) telefonda bölüm araları kısaltılıyor — 120-130 px'lik boşluklar sayfayı
   kopuk ve bitmek bilmez hâle getiriyordu.
   ========================================================================== */

/* --- (1) Ortalama: 992 px altı (telefon + tablet) --- */
@media (max-width: 991px) {

    .section-title,
    .section-title h2,
    .section-title .sub-heading,
    .section-title p,
    .edufit-content-box > p,
    .edufit-button,
    .hero-content {
        text-align: center;
    }

    .section-title .sub-heading { justify-content: center; }
    .edufit-content-box > p { margin-left: auto; margin-right: auto; max-width: 560px; }

    /* --- Sayaç / özellik kutuları (Biz Kimiz, Neden Biz): ikon üstte,
           yazı altında, ortalı; kutu sütunu tam doldursun (tema 260 px'lik
           dar bir kutuyu sola yapıştırıyordu). --- */
    .ef-iconic-box.style-one {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 100%;
        min-width: 0;
        padding: 26px 20px;
        border-radius: 16px;
        gap: 4px;
    }
    .ef-iconic-box.style-one .icon { margin: 0 0 8px; width: 64px; height: 64px; font-size: 30px; }
    .ef-iconic-box.style-one .content h4 { margin-bottom: 4px; }
    .ef-iconic-box.style-one .content p { margin: 0; }

    /* Neden Biz'in dört özellik kutusu: masaüstünde zeminsiz; telefonda
       her biri kart olsun ki ikon-başlık-metin bir bütün olarak okunsun. */
    .ef-iconic-box.style-four {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 28px 22px 24px;
        border-radius: 16px;
        background-color: #fff;
        border: 1px solid rgba(98, 85, 250, .10);
        box-shadow: 0 8px 30px rgba(98, 85, 250, .06);
        height: calc(100% - 30px);
    }
    .ef-iconic-box.style-four .icon {
        width: 76px;
        height: 76px;
        border-radius: 50%;
        background-color: rgba(98, 85, 250, .08);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 36px;
        margin-bottom: 16px;
    }
    .ef-iconic-box.style-four .content h4 { margin-bottom: 8px; font-size: 20px; }
    .ef-iconic-box.style-four .content p { margin: 0; font-size: 16px; }

    /* --- Alt bilgi --- */
    .footer-widget, .footer-content { text-align: center; }
    .footer-content .social-link, .footer-widget .widget-nav { justify-content: center; }
    .footer-widget .iletisim-liste li { justify-content: center; }

    /* --- İletişim sayfası --- */
    .iletisim-bilgi { text-align: center; }
    .iletisim-kutu { flex-direction: column; align-items: center; text-align: center; }

}

/* Telefonda (576 px altı) yan yana duran ikili kutular alt alta geçtiği
   için kart aralığı sütun boşluğuna eşitlensin. */
@media (max-width: 575px) {
    .ef-iconic-box.style-four { height: auto; }
}

/* --- (2) Bölüm araları ve yazı boyutları: sadece telefon --- */
@media (max-width: 767px) {

    /* --- Bölüm araları: 120-130 px yerine nefes alacak kadar --- */
    .pt-130, .pt-120 { padding-top: 62px !important; }
    .pb-120, .pb-100 { padding-bottom: 56px !important; }
    .pb-95, .pb-90 { padding-bottom: 50px !important; }
    .pt-100 { padding-top: 56px !important; }
    .mb-55, .mb-60, .mb-50 { margin-bottom: 28px !important; }
    .mb-40 { margin-bottom: 24px !important; }
    .mb-30 { margin-bottom: 18px !important; }

    /* Başlık boyutu telefonda biraz insin ki iki satırda kalsın */
    .section-title h2 { font-size: 27px; line-height: 1.3; }

}

/* ==========================================================================
   WhatsApp düğmesi (sağ alt)
   Numara ve hazır mesaj panelden ayarlanır. Temanın "yukarı çık" düğmesi de
   sağ altta duruyordu; onu bunun üstüne aldık ki çakışmasınlar.
   ========================================================================== */
.wa-dugme {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 338;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 56px;
    padding: 0 20px 0 15px;
    border-radius: 40px;
    background: #25d366;
    color: #fff;
    font-weight: 600;
    font-size: 15.5px;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(37, 211, 102, .38);
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.wa-dugme:hover,
.wa-dugme:focus {
    color: #fff;
    background: #1fbe5b;
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(37, 211, 102, .48);
}

.wa-dugme:focus-visible { outline: 3px solid #0b7a3b; outline-offset: 3px; }
.wa-dugme svg { flex: 0 0 auto; }

/* "Yukarı çık" düğmesi WhatsApp'ın üstüne */
.back-to-top { bottom: 100px !important; }

/* Telefonda yalnızca yuvarlak ikon kalsın; yazı yer kaplamasın */
@media (max-width: 575px) {
    .wa-dugme {
        right: 16px;
        bottom: 16px;
        width: 54px;
        height: 54px;
        padding: 0;
        justify-content: center;
        gap: 0;
    }
    .wa-dugme .wa-yazi { display: none; }
    .back-to-top { right: 16px !important; bottom: 82px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .wa-dugme { transition: none; }
    .wa-dugme:hover, .wa-dugme:focus { transform: none; }
}

/* Sayfa içi bağlantılar yumuşak kaysın (menüdeki "Grupları İncele" gibi) */
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* Hareketi azalt tercihinde hiçbir şey oynamasın */
@media (prefers-reduced-motion: reduce) {
    [data-aos] { transform: none !important; transition: none !important; opacity: 1 !important; }
}

/* Sabit menü: temanın 1,2 sn'lik yukarıdan iniş animasyonu sıçrama gibi hissettiriyordu */
.header-navigation.sticky { animation-duration: .3s; }

/* --- Logo (panelden yüklenen geniş PNG/WebP) ---------------------------- */
.header-navigation .site-branding .brand-logo img { max-height: 64px; width: auto; max-width: 100%; display: block; }
.footer-logo img { max-width: 200px; height: auto; }
.kimlik-logo img, .brand-logo img { max-width: 100%; }
@media (max-width: 1199px) {
    .header-navigation .site-branding .brand-logo img { max-height: 52px; }
}
@media (max-width: 575px) {
    .header-navigation .site-branding .brand-logo img { max-height: 44px; }
}