/* ARS Temizlik – anasayfa slider (video/görsel arka plan). Token'lar site.css içinden gelir. */
.hero--slider { display: grid; min-height: clamp(560px, 86vh, 880px); isolation: isolate; }
.slider__track { display: grid; grid-area: 1 / 1; min-height: inherit; }
.slide { grid-area: 1 / 1; position: relative; display: grid; align-items: center; min-height: inherit; opacity: 0; visibility: hidden; transition: opacity .9s var(--ease), visibility 0s linear .9s; }
.slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s; z-index: 1; }
.slide__media { position: absolute; inset: 0; overflow: hidden; background: var(--c-deep); }
.slide__media .hero__art { position: absolute; inset: 0; z-index: 0; }
.slide__picture, .slide__picture img, .slide__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide__picture img, .slide__video { transform: scale(1.08); transition: transform 8s linear; }
.slide.is-active .slide__picture img, .slide.is-active .slide__video { transform: scale(1); }
.slide__video { opacity: 0; transition: opacity .7s ease, transform 8s linear; }
.slide__video.is-playing { opacity: 1; }
.slide__overlay { position: absolute; inset: 0; background:
  linear-gradient(100deg, rgba(6, 26, 54, calc(var(--ov, .6) + .25)) 0%, rgba(6, 26, 54, var(--ov, .6)) 50%, rgba(6, 26, 54, calc(var(--ov, .6) * .55)) 100%),
  linear-gradient(to top, rgba(6, 26, 54, .8) 0%, rgba(6, 26, 54, 0) 45%); }
.slide--graphic .slide__overlay { background: linear-gradient(to top, rgba(6, 26, 54, .55) 0%, rgba(6, 26, 54, 0) 40%); }
.slide__inner { position: relative; padding-block: clamp(4rem, 3rem + 5vw, 7rem) clamp(9rem, 6rem + 8vw, 12rem); width: 100%; }
.slide__content { max-width: 680px; }
.slide--center .slide__content { margin-inline: auto; text-align: center; }
.slide--center .hero__title, .slide--center .hero__text { margin-inline: auto; }
.slide--center .hero__actions, .slide--center .hero__facts { justify-content: center; }
.slide--center .hero__eyebrow { margin-inline: auto; }
.hero--slider .hero__title { text-shadow: 0 2px 24px rgba(6, 26, 54, .35); }

/* Slayt içi metin girişi: her aktif olduğunda tekrar oynar */
.js .hero--slider .slide [data-hero] { opacity: 0; transform: translateY(18px); animation: none; }
.js .hero--slider .slide.is-active [data-hero] { animation: heroIn .8s var(--ease) .15s forwards; }
.js .hero--slider .slide.is-active [data-hero="2"] { animation-delay: .25s; }
.js .hero--slider .slide.is-active [data-hero="3"] { animation-delay: .35s; }
.js .hero--slider .slide.is-active [data-hero="4"] { animation-delay: .45s; }
.js .hero--slider .slide.is-active [data-hero="5"] { animation-delay: .55s; }

/* Kontroller */
.slider__controls { position: absolute; left: 0; right: 0; bottom: clamp(4.5rem, 3rem + 4vw, 6.5rem); z-index: 3; display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.5rem; pointer-events: none; }
.slider__controls > * { pointer-events: auto; }
.slider__nav { display: flex; gap: .5rem; }
.slider__btn { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .3); color: #fff; backdrop-filter: blur(6px); transition: background var(--t-fast), transform var(--t-fast) var(--ease), border-color var(--t-fast); }
.slider__btn:hover { background: rgba(255, 255, 255, .25); border-color: #fff; }
.slider__btn:active { transform: scale(.94); }
.slider__btn--play { width: 40px; height: 40px; }
.slider__btn--play .slider__icon-play { display: none; }
.hero--slider.is-paused .slider__btn--play .slider__icon-play { display: block; }
.hero--slider.is-paused .slider__btn--play .slider__icon-pause { display: none; }
.slider__dots { display: flex; gap: .4rem; }
.slider__dot { position: relative; width: 44px; height: 28px; padding: 0; border-radius: var(--r-sm); }
.slider__dot:focus-visible { outline-offset: 0; }
.slider__dot-bar { position: absolute; left: 4px; right: 4px; top: 50%; height: 4px; transform: translateY(-50%); border-radius: 2px; background: rgba(255, 255, 255, .32); overflow: hidden; }
.slider__dot-bar::after { content: ''; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.slider__dot:hover .slider__dot-bar { background: rgba(255, 255, 255, .5); }
.slider__dot.is-active .slider__dot-bar::after { animation: dotFill var(--interval, 7s) linear forwards; animation-play-state: paused; }
.hero--slider.is-playing .slider__dot.is-active .slider__dot-bar::after { animation-play-state: running; }
.hero--slider[data-autoplay="0"] .slider__dot.is-active .slider__dot-bar::after { animation: none; transform: scaleX(1); }
@keyframes dotFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.slider__meta { margin-left: auto; display: flex; align-items: center; gap: .75rem; color: #C9DDF0; font-family: var(--font-heading); font-size: var(--fs-sm); letter-spacing: .06em; }
.slider__counter b { color: #fff; font-size: 1.1rem; font-weight: 800; }

/* Güven şeridi slider'ın alt kenarına biner */
.hero--slider + .trust { margin-top: calc(-1 * clamp(1.5rem, 1rem + 2vw, 3rem)); }

/* Mobil */
@media (max-width: 767px) {
  .hero--slider { min-height: clamp(520px, 82svh, 720px); }
  .slide__inner { padding-block: 3.5rem 8.5rem; }
  .hero--slider .hero__title { font-size: clamp(2rem, 8.5vw, 2.8rem); }
  .hero--slider .hero__text { font-size: 1rem; }
  .hero--slider .hero__facts { gap: 1rem 1.25rem; padding-top: 1rem; }
  .hero--slider .hero__facts li:last-child { display: none; }
  .slider__controls { bottom: 4.25rem; gap: .75rem 1rem; }
  .slider__btn { width: 42px; height: 42px; }
  .slider__dot { width: 34px; }
  .slider__meta { font-size: var(--fs-xs); }
  .slide__picture img, .slide__video { transform: none; transition: none; }
  .slide__overlay { background: linear-gradient(to top, rgba(6, 26, 54, .9) 0%, rgba(6, 26, 54, calc(var(--ov, .6) * .9)) 55%, rgba(6, 26, 54, calc(var(--ov, .6) * .6)) 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .slide { transition: none; }
  .slide__picture img, .slide__video { transform: none; transition: none; }
  .slider__dot.is-active .slider__dot-bar::after { animation: none; transform: scaleX(1); }
  .js .hero--slider .slide [data-hero] { opacity: 1; transform: none; animation: none; }
}

/* ---------- Telefon düzeni: sağda 9:16 video maketi ---------- */
.slide__inner--phone { display: grid; gap: 2.5rem; align-items: center; }
.slide--layout-phone .slide__content { max-width: 620px; }
.phone-wrap { position: relative; display: flex; justify-content: center; align-items: center; padding: 1rem 0; }
.phone { --pw: clamp(220px, 20vw, 300px); position: relative; width: var(--pw); aspect-ratio: 9 / 19.2; border-radius: calc(var(--pw) * .16); background: linear-gradient(160deg, #1B2A44, #0B1730); padding: calc(var(--pw) * .032); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .12), inset 0 0 0 2px rgba(255, 255, 255, .06); animation: phoneFloat 8s ease-in-out infinite; }
.phone__screen { position: relative; width: 100%; height: 100%; border-radius: calc(var(--pw) * .13); overflow: hidden; background: var(--c-deep); }
.phone__poster, .phone__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phone__poster--brand { background: radial-gradient(120% 80% at 80% 0%, rgba(0, 157, 214, .55), transparent 60%), linear-gradient(160deg, var(--c-deep), var(--c-primary) 60%, #0B3A73); }
.phone__video { opacity: 0; transition: opacity .6s ease; }
.phone__video.is-playing { opacity: 1; }
.phone__island { position: absolute; top: calc(var(--pw) * .035); left: 50%; transform: translateX(-50%); width: calc(var(--pw) * .3); height: calc(var(--pw) * .085); border-radius: 999px; background: #05101F; box-shadow: 0 0 0 1px rgba(255, 255, 255, .05); }
.phone__btn { position: absolute; width: 3px; border-radius: 2px; background: #2A3A57; }
.phone__btn--power { right: -3px; top: 22%; height: 12%; }
.phone__btn--vol1 { left: -3px; top: 18%; height: 7%; }
.phone__btn--vol2 { left: -3px; top: 27%; height: 7%; }
.phone__glow { position: absolute; inset: 10% -20%; border-radius: 50%; background: radial-gradient(circle, rgba(0, 157, 214, .35), transparent 65%); filter: blur(30px); z-index: -1; pointer-events: none; }
@keyframes phoneFloat { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(1deg); } }
@media (min-width: 900px) {
  .slide__inner--phone { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .phone-wrap { justify-content: flex-end; padding-right: clamp(0px, 4vw, 3rem); }
  .slide--center .slide__inner--phone .slide__content { text-align: left; margin-inline: 0; }
}
@media (max-width: 899px) {
  .slide__inner--phone { padding-bottom: 9.5rem; }
  .phone { --pw: clamp(180px, 46vw, 220px); animation: none; }
  .phone-wrap { order: 2; padding: 0; }
  .slide--layout-phone .hero__facts { display: none; }
}
@media (max-width: 767px) {
  .slide__inner--phone { padding-bottom: 8.5rem; gap: 1.75rem; }
  .slide--layout-phone .hero__title { font-size: clamp(1.8rem, 7.5vw, 2.4rem); }
  .slide--layout-phone .hero__text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .phone { animation: none; } }

/* Tek slayt: kontrol alanı yok, alt boşluk daralır */
.hero--single .slide__inner { padding-bottom: clamp(5rem, 3rem + 4vw, 7rem); }
@media (max-width: 899px) { .hero--single .slide__inner--phone { padding-bottom: 5rem; } }
@media (max-width: 767px) { .hero--single .slide__inner { padding-bottom: 4.5rem; } }

/* ---------- Mobil: telefon düzeni tam ekran dikey video hero'ya dönüşür (masaüstü etkilenmez) ---------- */
.slide__mobile-poster { display: none; }
@media (max-width: 767px) {
  .hero--slider:has(.slide--layout-phone) { min-height: calc(100svh - 126px); }
  .slide--layout-phone { align-items: end; }
  .slide--layout-phone .phone-wrap { display: none; }
  .slide--layout-phone .slide__mobile-poster { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .slide--layout-phone .slide__media .hero__art { opacity: 0; }
  .slide--layout-phone .slide__video { transform: none; }
  .slide--layout-phone .slide__overlay { background: linear-gradient(to top, rgba(6, 26, 54, .96) 0%, rgba(6, 26, 54, .78) 32%, rgba(6, 26, 54, .25) 62%, rgba(6, 26, 54, .35) 100%); }
  .slide--layout-phone .slide__inner--phone { display: block; padding-top: 42svh; padding-bottom: 5.5rem; }
  .hero--single .slide--layout-phone .slide__inner--phone { padding-bottom: 4.5rem; }
  .slide--layout-phone .slide__content { max-width: none; }
  .slide--layout-phone .hero__eyebrow { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .28); backdrop-filter: blur(8px); }
  .slide--layout-phone .hero__title { font-size: clamp(2.3rem, 10.5vw, 3.1rem); line-height: 1.02; letter-spacing: -0.03em; text-shadow: 0 6px 30px rgba(6, 26, 54, .6); margin-bottom: .9rem; }
  .slide--layout-phone .hero__text { display: block; -webkit-line-clamp: unset; font-size: 1.02rem; color: #E3EEF8; text-shadow: 0 2px 12px rgba(6, 26, 54, .6); max-width: 34ch; }
  .slide--layout-phone .hero__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 0; }
  .slide--layout-phone .hero__actions .btn { width: 100%; padding-inline: .8rem; font-size: .9rem; }
  .slide--layout-phone .hero__actions .btn--ghost { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .4); backdrop-filter: blur(8px); }
  .slide--layout-phone .hero__facts { display: none; }
  .hero--slider + .trust { margin-top: 1.25rem; }
}
@media (max-width: 767px) {
  .slide--layout-phone .slide__inner--phone { padding-top: 52svh; padding-bottom: 6rem; }
  .hero--single .slide--layout-phone .slide__inner--phone { padding-bottom: 6rem; }
  .slide--layout-phone .hero__eyebrow { position: absolute; top: 1.1rem; left: var(--gutter); margin: 0; z-index: 2; }
  .slide--layout-phone .hero__text { display: none; }
  .slide--layout-phone .hero__title { margin-bottom: 1.1rem; }
  .slide--layout-phone .slide__overlay { background: linear-gradient(to top, rgba(6, 26, 54, .97) 0%, rgba(6, 26, 54, .8) 26%, rgba(6, 26, 54, .15) 55%, rgba(6, 26, 54, .3) 100%); }
}