/* EducationEyuboglu / OurFacilities */
:root { --crimson: #8b1a1a; --off-white: #f5f0eb; --text-dark: #1a1a1a; --text-body: #3a3530; --slide-duration: 6500ms; --fade-duration: 1400ms; }

/* ── BANNER ─────────────────────────────────────────── */
.banner { position: relative; width: 100%; height: 100svh; min-height: 480px; max-height: 900px; overflow: hidden; background: #111; }

/* ── SLIDES ─────────────────────────────────────────── */
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity var(--fade-duration) ease-in-out; will-change: opacity; }

    .slide.is-active { opacity: 1; }

/* parallax image: extra height allows vertical drift */
.slide__img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; object-position: center top; display: block; transform: scale(1.06) translateY(0px); will-change: transform; }

/* Ken-Burns on active slide */
.slide.is-active .slide__img { animation: kenBurns var(--slide-duration) ease-out forwards; }

/* outgoing slide drifts downward */
.slide.is-leaving .slide__img { transform: scale(1.00) translateY(32px) !important; transition: transform var(--fade-duration) ease-in-out; }

@keyframes kenBurns {
    from { transform: scale(1.06) translateY(0px); }
    to { transform: scale(1.00) translateY(-28px); }
}

/* ── OVERLAY ────────────────────────────────────────── */
.banner__overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to right, rgba(0,0,0,.60) 0%, rgba(0,0,0,.08) 65%), linear-gradient(to top, rgba(0,0,0,.48) 0%, transparent 52%); }

/* ── TEXT ───────────────────────────────────────────── */
.banner__copy { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; /* center vertically */ justify-content: flex-start; /* align content to left */ padding: clamp(2rem, 6vw, 5.5rem) clamp(1.5rem, 7vw, 7rem); }

.banner__copy-inner { color: #fff; width: min(40%, 600px); /* keep title column reasonably wide */ }

.banner__eyebrow { font-weight: 300; font-size: clamp(.65rem, 1.2vw, .85rem); letter-spacing: .25em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: clamp(.6rem, 1.5vh, 1.1rem); opacity: 0; animation: fadeUp .7s .3s ease forwards; }

.banner__title { /*  font-family: 'Playfair Display', Georgia, serif;*/ font-weight: 700; font-size: clamp(2.1rem, 6vw, 4.75rem); line-height: .95; color: #fff; letter-spacing: -.02em; opacity: 0; animation: fadeUp .8s .5s ease forwards; }

    .banner__title::before { content: ''; display: block; width: clamp(2.5rem, 5vw, 4rem); height: 3px; background: var(--crimson); margin-bottom: clamp(.8rem, 2vh, 1.4rem); }

.banner__tagline { margin-top: clamp(.9rem, 2.5vh, 1.6rem); font-weight: 300; font-style: italic; font-size: clamp(.85rem, 2vw, 1.2rem); color: rgba(255,255,255,.82); max-width: 40ch; opacity: 0; animation: fadeUp .7s .8s ease forwards; }

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

/* ── DOT INDICATORS ─────────────────────────────────── */
.banner__dots { position: absolute; bottom: clamp(1.4rem, 3.5vh, 2.4rem); left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: .55rem; align-items: center; }

.dot { height: 7px; width: 7px; border-radius: 4px; background: rgba(255,255,255,.35); border: none; cursor: pointer; padding: 0; transition: background .4s, width .4s; flex-shrink: 0; overflow: hidden; position: relative; }

    .dot.is-active { width: 26px; background: rgba(255,255,255,.25); }

        /* fill animation inside active dot */
        .dot.is-active::after { content: ''; position: absolute; inset: 0; left: 0; background: #fff; border-radius: 4px; animation: dotFill var(--slide-duration) linear forwards; }

@keyframes dotFill {
    from { transform: scaleX(0); transform-origin: left; }
    to { transform: scaleX(1); transform-origin: left; }
}

.dot:hover:not(.is-active) { background: rgba(255,255,255,.6); }

/* ── PROGRESS LINE ──────────────────────────────────── */
.banner__progress { position: absolute; bottom: 0; left: 0; height: 2px; width: 0; background: rgba(255,255,255,.4); z-index: 3; }
    .banner__progress.is-running { animation: progressBar var(--slide-duration) linear forwards; }

@keyframes progressBar {
    from { width: 0; }
    to { width: 100%; }
}

/* ── INTRO ──────────────────────────────────────────── */
.intro { background: var(--off-white); padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 10vw, 12rem); display: grid; grid-template-columns: 1fr 2fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; border-bottom: 1px solid rgba(0,0,0,.10); }

.intro__label { /*  font-family: 'Playfair Display', Georgia, serif;*/ font-weight: 700; font-size: clamp(1.85rem, 3.2vw, 2.4rem); line-height: 1.2; }

.intro__text { font-weight: 300; font-size: clamp(1.05rem, 1.8vw, 1.35rem); line-height: 1.65; color: var(--text-body); }

.intro__cta { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.4rem; font-weight: 400; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dark); border: 1px solid rgba(0,0,0,.35); border-radius: 999px; padding: .55rem 1.15rem; text-decoration: none; transition: background .25s, color .25s; }
    .intro__cta:hover { background: var(--text-dark); color: #fff; }
    .intro__cta svg { width: 12px; height: 12px; transition: transform .25s; }
    .intro__cta:hover svg { transform: translateX(3px); }

/* ── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 900px) {
    .banner { height: 70svh; max-height: 680px; }
    .intro { grid-template-columns: 1fr; gap: 1.5rem; padding: 3rem 2.5rem; }
}

@media (max-width: 520px) {
    .banner { height: 88svh; max-height: 700px; min-height: 400px; }
    .banner__copy { padding: 1.5rem 1.5rem 4rem; }
    .intro { padding: 2.5rem 1.5rem; }
}

.simple-carousel { position: relative; overflow: hidden; }
    .simple-carousel .carousel-track { display: flex; transition: transform .6s ease; will-change: transform; }
    .simple-carousel .carousel-slide { flex: 0 0 100%; }
    .simple-carousel img { width: 100%; height: auto; display: block; }

    .simple-carousel .carousel-control { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.4); color: #fff; border: none; padding: .4rem .6rem; cursor: pointer; z-index: 2; border-radius: 4px; }
        .simple-carousel .carousel-control.prev { left: 10px; }
        .simple-carousel .carousel-control.next { right: 10px; }

    .simple-carousel .carousel-indicators { position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px; display: flex; gap: .5rem; z-index: 2; }
        .simple-carousel .carousel-indicators button { width: 10px; height: 10px; border-radius: 50%; border: none; background: rgba(255,255,255,0.6); cursor: pointer; }
            .simple-carousel .carousel-indicators button.active { background: #fff; }

/* Responsive small controls */
@media (max-width: 576px) {
    .simple-carousel .carousel-control { padding: .3rem .5rem; }
}