/* EBG Ruhr e.V. - jQuery'siz bileşenlerin stilleri (ebg-site.js ile birlikte) */

html { scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* JS çalışmazsa animasyon bekleyen içerik gizli kalmasın */
html:not(.ebg-js) [data-gdlr-animation] { opacity: 1 !important; }
html:not(.ebg-js) .gdlr-core-item-list.gdlr-core-animate-init { opacity: 1 !important; }
.gdlr-core-item-list { transition: opacity .5s ease; }

.ebg-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------------
   Masaüstü menü
   ------------------------------------------------------------------ */
.kingster-navigation .sf-menu li.sfHover > ul.sub-menu { display: block !important; animation: ebgMenuIn .18s ease-out; }
.kingster-navigation .sf-menu ul.sub-menu.sub-menu-right { left: auto; right: 0; }
.kingster-navigation .sf-menu ul.sub-menu ul.sub-menu.sub-menu-right { left: auto; right: 100%; }
.kingster-navigation .kingster-navigation-slide-bar { transition: width .25s ease, left .25s ease; }
.kingster-navigation .sf-menu a:focus-visible { outline: 2px solid #f06030; outline-offset: 2px; }
@keyframes ebgMenuIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Sticky mobil başlık */
.kingster-mobile-header.kingster-fixed-navigation.ebg-slide-down { animation: ebgSlideDown .25s ease-out; }
@keyframes ebgSlideDown { from { transform: translateY(-100%); } to { transform: none; } }

/* Hamburger düğmesi odak halkası */
.kingster-mm-menu-button:focus-visible { outline: 2px solid #f06030; outline-offset: 3px; }

/* ------------------------------------------------------------------
   Mobil menü çekmecesi
   ------------------------------------------------------------------ */
html.ebg-drawer-open, html.ebg-lightbox-open { overflow: hidden; }

.ebg-drawer-blocker { position: fixed; inset: 0; background: rgba(8, 16, 36, .62); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; z-index: 100000; }
.ebg-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(86vw, 360px); background: #192f59; color: #fff; transform: translateX(100%); visibility: hidden; transition: transform .3s ease, visibility .3s; z-index: 100001; display: flex; flex-direction: column; box-shadow: -8px 0 30px rgba(0, 0, 0, .3); }
html.ebg-drawer-open .ebg-drawer-blocker { opacity: 1; visibility: visible; }
html.ebg-drawer-open .ebg-drawer { transform: none; visibility: visible; }

.ebg-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 10px 20px; border-bottom: 1px solid rgba(255, 255, 255, .14); flex-shrink: 0; }
.ebg-drawer-title { font-size: 13px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #fff; }
.ebg-drawer-close { width: 44px; height: 44px; border: 0; background: transparent; color: #fff; font-size: 32px; line-height: 1; cursor: pointer; border-radius: 8px; }
.ebg-drawer-close:hover, .ebg-drawer-close:focus-visible { background: rgba(255, 255, 255, .12); outline: none; }

.ebg-drawer-nav { overflow-y: auto; flex: 1; padding: 4px 0 30px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.ebg-drawer-nav ul { list-style: none; margin: 0; padding: 0; width: auto; position: static; }
.ebg-drawer-nav li { position: relative; margin: 0; padding: 0; border-bottom: 1px solid rgba(255, 255, 255, .09); background: transparent; }
.ebg-drawer-nav a { display: block; padding: 14px 56px 14px 20px; color: #fff; font-size: 17px; font-weight: 600; line-height: 1.35; text-decoration: none; }
.ebg-drawer-nav ul ul a { padding-left: 34px; font-size: 15.5px; font-weight: 500; color: #dbe4f5; }
.ebg-drawer-nav ul ul ul a { padding-left: 48px; }
.ebg-drawer-nav a:hover, .ebg-drawer-nav a:focus-visible { background: rgba(255, 255, 255, .08); color: #fff; outline: none; }
.ebg-drawer-nav li.current-menu-item > a { box-shadow: inset 4px 0 0 #f06030; color: #fff; }

.ebg-sub-toggle { position: absolute; top: 0; right: 0; width: 52px; height: 49px; border: 0; background: transparent; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ebg-sub-toggle::before { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease; }
.ebg-sub-toggle:hover, .ebg-sub-toggle:focus-visible { background: rgba(255, 255, 255, .08); outline: none; }
.ebg-drawer-nav li.ebg-open > .ebg-sub-toggle::before { transform: rotate(-135deg) translate(-2px, -2px); }
.ebg-drawer-nav ul.sub-menu { display: none; position: static; margin: 0; padding: 0; min-width: 0; background: rgba(0, 0, 0, .2); opacity: 1; visibility: visible; border: 0; box-shadow: none; }
.ebg-drawer-nav li.ebg-open > ul.sub-menu { display: block; }
.ebg-drawer-nav ul.sub-menu li { border-bottom-color: rgba(255, 255, 255, .06); padding: 0; }
.ebg-drawer-nav ul.sub-menu li:last-child { border-bottom: 0; }

/* ------------------------------------------------------------------
   Slider
   ------------------------------------------------------------------ */
.ebg-slider { position: relative; width: 100%; overflow: hidden; background: #101a2e; height: clamp(400px, 41vw, 640px); color: #fff; }
.ebg-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s; }
.ebg-slide.is-active { opacity: 1; visibility: visible; z-index: 2; }
.ebg-slide-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform 9s ease-out; }
.ebg-slide.is-active .ebg-slide-bg { transform: scale(1); }
.ebg-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 20, 40, .3) 0%, rgba(10, 20, 40, .55) 100%); }
.ebg-slide-content { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 64px 96px; gap: 12px; }
.ebg-slide-sub { margin: 0; font-size: clamp(1rem, 2.2vw, 1.5rem); font-weight: 400; color: #fff; text-shadow: 2px 2px 10px rgba(0, 0, 0, .55); }
.ebg-slide-title { margin: 0; max-width: 1100px; font-size: clamp(2.3rem, 6.2vw, 5.6rem); font-weight: 700; line-height: 1.05; color: #fff !important; text-shadow: 2px 2px 20px rgba(0, 0, 0, .7); overflow-wrap: break-word; hyphens: auto; }
.ebg-slide-btn { margin-top: 18px; display: inline-block; padding: 16px 40px; background: #fff; color: #1b2434 !important; border: 0; border-radius: 35px; font-size: 16px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; text-decoration: none !important; box-shadow: 0 10px 25px rgba(0, 0, 0, .25); transition: transform .2s ease, background .2s ease, color .2s ease; cursor: pointer; }
a.ebg-slide-btn:hover, a.ebg-slide-btn:focus-visible { transform: translateY(-2px); background: #f06030; color: #fff !important; outline: none; }
span.ebg-slide-btn { cursor: default; }

.ebg-slide.is-active .ebg-slide-sub { animation: ebgRise .6s ease-out .1s both; }
.ebg-slide.is-active .ebg-slide-title { animation: ebgRise .6s ease-out .25s both; }
.ebg-slide.is-active .ebg-slide-btn { animation: ebgRise .6s ease-out .45s both; }
@keyframes ebgRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* Lichteffekt beim Wechsel: Lichtstreifen über dem Bild + weiches Aufleuchten */
.ebg-slide::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%; z-index: 2; pointer-events: none; opacity: 0; mix-blend-mode: screen; transform: translateX(-120%) skewX(-18deg); background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .08) 30%, rgba(255, 244, 214, .42) 50%, rgba(255, 255, 255, .08) 70%, rgba(255, 255, 255, 0) 100%); }
.ebg-slide.is-active::before { animation: ebgShine 1.7s cubic-bezier(.4, 0, .2, 1) .1s both; }
@keyframes ebgShine { 0% { opacity: 0; transform: translateX(-120%) skewX(-18deg); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(330%) skewX(-18deg); } }
.ebg-slider::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 40%, rgba(255, 246, 222, .55) 0%, rgba(255, 246, 222, 0) 65%); }
.ebg-slider.is-flash::after { animation: ebgGlow .95s ease-out both; }
@keyframes ebgGlow { 0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: 0; } }

.ebg-slider-prev, .ebg-slider-next { position: absolute; top: 50%; z-index: 5; width: 48px; height: 48px; margin-top: -24px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; font-size: 30px; line-height: 44px; text-align: center; cursor: pointer; opacity: .75; transition: opacity .2s, background .2s; backdrop-filter: blur(4px); }
.ebg-slider-prev { left: 18px; }
.ebg-slider-next { right: 18px; }
.ebg-slider:hover .ebg-slider-prev, .ebg-slider:hover .ebg-slider-next, .ebg-slider-prev:focus-visible, .ebg-slider-next:focus-visible { opacity: 1; }
.ebg-slider-prev:hover, .ebg-slider-next:hover { background: rgba(255, 255, 255, .32); }
.ebg-slider-dots { position: absolute; left: 0; right: 0; bottom: 80px; z-index: 5; display: flex; justify-content: center; gap: 10px; }
.ebg-slider-dots button { width: 14px; height: 14px; padding: 0; border: 2px solid rgba(255, 255, 255, .9); border-radius: 50%; background: transparent; cursor: pointer; transition: background .2s, transform .2s; }
.ebg-slider-dots button[aria-current="true"] { background: #fff; transform: scale(1.15); }
.ebg-slider-pause { position: absolute; right: 18px; top: 16px; z-index: 5; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ebg-slider-pause::before { content: ""; width: 10px; height: 12px; border-left: 3px solid #fff; border-right: 3px solid #fff; }
.ebg-slider-pause.is-paused::before { width: 0; height: 0; border: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 11px solid #fff; margin-left: 3px; }
.ebg-slider button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 767px) {
    .ebg-slider { height: clamp(420px, 110vw, 560px); }
    .ebg-slide-content { padding: 0 20px 84px; }
    .ebg-slide-title { font-size: clamp(1.7rem, 8.4vw, 2.6rem); }
    .ebg-slide-btn { padding: 14px 30px; font-size: 14px; }
    .ebg-slider-prev, .ebg-slider-next { display: none; }
    .ebg-slider-dots { bottom: 62px; }
    .ebg-slider-pause { top: 10px; right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .ebg-slide, .ebg-slide-bg { transition: none; }
    .ebg-slide.is-active .ebg-slide-sub, .ebg-slide.is-active .ebg-slide-title, .ebg-slide.is-active .ebg-slide-btn { animation: none; }
    .ebg-slide.is-active::before, .ebg-slider.is-flash::after { animation: none; }
}

/* ------------------------------------------------------------------
   Lightbox
   ------------------------------------------------------------------ */
.ebg-lightbox { position: fixed; inset: 0; z-index: 100002; background: rgba(5, 10, 22, .92); display: none; align-items: center; justify-content: center; padding: 56px 20px 20px; }
.ebg-lightbox.is-open { display: flex; }
.ebg-lightbox-body { max-width: min(1100px, 100%); max-height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; }
.ebg-lightbox-body img { max-width: 100%; max-height: calc(100vh - 100px); border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.ebg-lightbox-video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 6px; overflow: hidden; }
.ebg-lightbox-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ebg-lightbox-close { position: absolute; top: 10px; right: 14px; width: 44px; height: 44px; border: 0; background: transparent; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; border-radius: 8px; }
.ebg-lightbox-close:hover, .ebg-lightbox-close:focus-visible { background: rgba(255, 255, 255, .14); outline: none; }