/* =============================================================================
   EFELER ARENA — iç sayfalar için ortak temel (haberler.php, transferler.php ...)
   Ana sayfa (index.php) ile aynı değişkenler ve bileşenler.
   Kullanım: sayfa içeriğini <div class="ef2" id="ef2"> ile sarın, ardından
   <script>document.getElementById('ef2').className += ' ef2-js';</script>
   ============================================================================= */
body { background: #050a1f !important; }
@supports (overflow-x: clip) { body { overflow-x: clip; } }
html { scroll-behavior: smooth; }
.ef2 {
    --ef-bg: #050a1f; --ef-kart: rgba(16, 27, 66, .72); --ef-cizgi: rgba(255, 255, 255, .09);
    --ef-yesil: #1faa4b; --ef-neon: #3dff8a; --ef-mavi: #4cc3f0; --ef-altin: #ffc93c; --ef-kirmizi: #ff4d5e; --ef-mor: #b37bff;
    --ef-yazi: #eef4ff; --ef-soluk: #9fb0c9; --ef-disp: 'Bebas Neue', 'Oswald', Impact, sans-serif;
    position: relative; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    font-size: 15px; line-height: 1.5; color: var(--ef-yazi); -webkit-font-smoothing: antialiased;
}
.ef2 *, .ef2 *::before, .ef2 *::after { box-sizing: border-box; }
.ef2 a { color: inherit; text-decoration: none; }
.ef2 a:hover, .ef2 a:focus { color: inherit; text-decoration: none; }
.ef2 h1, .ef2 h2, .ef2 h3, .ef2 p { margin: 0; }
.ef2 button, .ef2 input { font-family: inherit; }
.ef2 [hidden] { display: none !important; }
.ef2 :focus-visible { outline: 3px solid var(--ef-neon); outline-offset: 3px; }
.ef2-arka { position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(circle at 12% 18%, rgba(31, 170, 75, .13), transparent 42%),
                radial-gradient(circle at 88% 55%, rgba(76, 195, 240, .11), transparent 45%),
                radial-gradient(circle at 40% 100%, rgba(18, 26, 74, .9), transparent 60%), #050a1f; }
.ef2-in { max-width: 1180px; margin: 0 auto; padding: 0 16px; position: relative; }
.ef2-bolum { padding: 56px 0 8px; position: relative; scroll-margin-top: 12px; }

/* Bölüm başlığı */
.ef2-baslik { position: relative; margin-bottom: 26px; }
.ef2-baslik-ust { display: flex; align-items: center; gap: 10px; font: 700 12px/1 'Inter', sans-serif; letter-spacing: 3px; color: var(--ef-neon); text-transform: uppercase; }
.ef2-baslik-ust::before { content: ""; width: 30px; height: 2px; background: currentColor; box-shadow: 0 0 10px currentColor; }
.ef2-baslik h1, .ef2-baslik h2 { font-family: var(--ef-disp); font-weight: 400; font-size: clamp(40px, 6.4vw, 64px); line-height: .95; letter-spacing: 1px; color: #fff; margin-top: 8px; }
.ef2-baslik em { font-style: normal; background: linear-gradient(90deg, var(--ef-neon), var(--ef-mavi)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ef2-baslik-alt { display: block; margin-top: 10px; max-width: 640px; font-weight: 500; font-size: 14.5px; line-height: 1.6; color: var(--ef-soluk); }
.ef2-baslik::after { content: attr(data-golge); position: absolute; right: 0; top: -18px; font-family: var(--ef-disp); font-size: clamp(70px, 14vw, 160px); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .06); pointer-events: none; white-space: nowrap; z-index: -1; }

/* Butonlar */
.ef2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 0; cursor: pointer;
    font: 800 14px/1 'Inter', sans-serif; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; transition: transform .2s ease, box-shadow .2s ease; }
.ef2-btn:hover { transform: translateY(-2px); }
.ef2-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.ef2-btn-ana { color: #04210f !important; background: linear-gradient(135deg, var(--ef-neon), #22d36b); box-shadow: 0 10px 24px rgba(61, 255, 138, .3); }
.ef2-btn-wp { color: #fff !important; background: #1da851; box-shadow: 0 10px 24px rgba(29, 168, 81, .3); }
.ef2-btn-yt { color: #fff !important; background: linear-gradient(135deg, #ff4d5e, #d81e3a); box-shadow: 0 10px 24px rgba(255, 77, 94, .35); }
.ef2-btn-cam { color: #fff !important; background: linear-gradient(135deg, rgba(22, 36, 84, .94), rgba(10, 19, 51, .94)); border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }

/* Süzgeç çipleri (kategori seçimi) */
.ef2-cipler { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; min-width: 0; padding: 2px; }
.ef2-cipler::-webkit-scrollbar { display: none; }
.ef2-cip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 999px; cursor: pointer;
    font: 700 13px/1 'Inter', sans-serif; color: #c9d6ee; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); transition: background .2s, color .2s, border-color .2s; }
.ef2-cip i { color: var(--c, var(--ef-neon)); }
.ef2-cip small { font: 800 11px/1 'Inter', sans-serif; padding: 3px 7px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--ef-soluk); }
.ef2-cip:hover { color: #fff; border-color: rgba(255, 255, 255, .25); }
.ef2-cip.aktif { color: #04210f; background: linear-gradient(135deg, var(--ef-neon), #22d36b); border-color: var(--ef-neon); box-shadow: 0 6px 18px rgba(61, 255, 138, .28); }
.ef2-cip.aktif i { color: #04210f; }
.ef2-cip.aktif small { background: rgba(4, 33, 15, .15); color: #04210f; }

/* Görünür olunca açılma */
.ef2-js [data-rv] { opacity: 0; transform: translateY(30px); transition: opacity .7s cubic-bezier(.2, .8, .2, 1) var(--d, 0s), transform .7s cubic-bezier(.2, .8, .2, 1) var(--d, 0s); }
.ef2-js [data-rv].is-in { opacity: 1; transform: none; }

/* Mobil alt dok */
.ef2-dok { display: none; }
@media (max-width: 991px) {
    body { padding-bottom: 64px !important; }
    .ef2-dok { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 10000; padding-bottom: env(safe-area-inset-bottom);
        background: rgba(8, 14, 36, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid rgba(255, 255, 255, .12); }
    .ef2-dok a, .ef2-dok button { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 58px; padding: 6px 2px;
        font: 700 10.5px/1 'Inter', sans-serif; color: #c9d6ee !important; background: none; border: 0; text-decoration: none !important; transition: color .2s, opacity .2s; cursor: pointer; }
    .ef2-dok i { font-size: 19px; }
    .ef2-dok .aktif { color: var(--ef-neon) !important; }
    .ef2-dok .ef2-dok-yukari i { color: var(--ef-mavi); }
    .ef2-dok .ef2-dok-yukari.gizli { opacity: 0; visibility: hidden; pointer-events: none; }
    /* Efe maskot butonu (shared/statu_asistan/widget.php) alt çubuğun üstüne binmesin */
    .efe-launcher { bottom: 78px !important; }
}
@media (max-width: 640px) {
    .ef2-bolum { padding-top: 36px; }
}
@media (prefers-reduced-motion: reduce) {
    .ef2 *, .ef2 *::before, .ef2 *::after { transition: none !important; animation: none !important; }
    .ef2-js [data-rv] { opacity: 1; transform: none; }
}