/* The hero copy stays separate from the photographic slides. */
.ref-hero.hero-carousel{position:relative;min-height:545px;overflow:hidden;background:#fff6ed}
.hero-slides{position:absolute;inset:0;width:100%;overflow:hidden;isolation:isolate}
.hero-slides::after{content:"";position:absolute;z-index:3;inset:0;background:linear-gradient(90deg,#fff8f1 0%,#fff8f1f7 25%,#fff8f1a6 39%,#fff8f115 58%,transparent 74%);pointer-events:none}
/* Stationary images crossfade in place: neither photos nor copy translate or rotate. */
.hero-slide{position:absolute;inset:0;left:50%;width:min(1260px,100%);transform:translateX(-50%);z-index:0;opacity:0;visibility:hidden;transition:opacity 1.15s ease-in-out,visibility 0s linear 1.15s}
.hero-slide:has(> img[src$="/izmir-vip/izmir-illustration.webp"]),.hero-slide:has(> img[data-src$="/izmir-vip/izmir-illustration.webp"]){width:100%}
.hero-slide.is-active{z-index:1;opacity:1;visibility:visible;transition:opacity 1.15s ease-in-out,visibility 0s linear 0s}
/* Keep full image height rather than cropping the top of portraits. */
.hero-slide img{position:absolute;right:0;top:0;width:auto;max-width:none;height:100%;object-fit:contain;object-position:right center}
.hero-carousel .ref-hero-layout{position:relative;display:flex;align-items:center;min-height:545px;pointer-events:none}
.hero-carousel .ref-hero-copy{--hero-title-size:clamp(43px,4.4vw,62px);max-width:430px;pointer-events:auto}
/* Reserve space for two title lines so the controls stay in place. */
.hero-carousel .hero-story{min-height:calc(var(--hero-title-size) * 2.1 + 64px)}
.hero-carousel .hero-service{display:inline-block;margin:0 0 16px;padding:7px 12px;border-radius:30px;background:#fff;color:#914311;font-size:12px;font-weight:800;letter-spacing:.03em;box-shadow:0 3px 14px #58310c0d}
.hero-carousel h1.hero-slogan{font-size:var(--hero-title-size);line-height:1.05;font-weight:800;letter-spacing:-.048em;color:#302922;margin:0 0 24px;white-space:nowrap}
.hero-carousel h1.hero-slogan span{color:#a9490c}
.hero-carousel .ref-actions{gap:10px}
.hero-controls{display:flex;align-items:center;gap:9px;margin-top:35px;color:#473025}
.hero-arrow{display:inline-flex;justify-content:center;align-items:center;width:44px;height:44px;border:1px solid #d8bda5;border-radius:50%;background:#fffefbea;color:#77380d;font-size:19px;cursor:pointer}
.hero-arrow:hover{background:#fff1e1}
.hero-counter{min-width:62px;text-align:center;font-size:12px;font-weight:800;letter-spacing:.08em;color:#533d2e}
.hero-toggle{border:0;background:transparent;color:#73370d;font:inherit;font-size:12px;font-weight:800;text-decoration:underline;text-underline-offset:4px;padding:12px 6px;cursor:pointer}
@media(max-width:760px){
 .ref-hero.hero-carousel{min-height:0;background:#fff7ef}
 /* On narrow screens show the complete landscape image above the copy. */
 .hero-slides{position:relative;left:auto;inset:auto;width:100%;height:auto;aspect-ratio:1600/901;transform:none}
 .hero-slides::after{background:linear-gradient(0deg,#fff7ef40,transparent 28%)}
 .hero-slide img{position:static;width:100%;height:100%;object-fit:contain;object-position:center}
 .hero-carousel .ref-hero-layout{display:block;min-height:0;padding-top:26px;padding-bottom:34px}
 .hero-carousel .ref-hero-copy{--hero-title-size:clamp(38px,9vw,55px);min-height:0;max-width:100%}
 .hero-carousel h1.hero-slogan{max-width:430px}
 .hero-controls{margin-top:22px}
}
@media(max-width:380px){.hero-carousel .ref-hero-copy{--hero-title-size:38px}}
@media(prefers-reduced-motion:reduce){.hero-slide,.hero-slide.is-active{transition:none}}