.hs { background: var(--ink-deep); }
.hs__slides { display: grid; }

.hs__slide { grid-area: 1 / 1; position: relative; isolation: isolate; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s linear .8s; }
.hs__slide.is-active { opacity: 1; visibility: visible; transition: opacity .8s ease, visibility 0s; z-index: 1; }

.hs__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hs__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); }

.hs__slide.is-active .hs__bg img { animation: hsYaklas 9s ease-out both; }
@keyframes hsYaklas { from { transform: scale(1.1); } to { transform: scale(1); } }

.hs__overlay {
    position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(rgba(148, 163, 184, .06) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, rgba(148, 163, 184, .06) 1px, transparent 1px) 0 0 / 40px 40px,
        radial-gradient(900px 520px at 78% 35%, var(--hs-ton, rgba(29, 78, 216, .35)), transparent 70%),
        linear-gradient(90deg, rgba(5, 10, 23, .96) 0%, rgba(5, 10, 23, .86) 42%, rgba(5, 10, 23, .55) 100%);
}

.hs__slide--foto .hs__overlay {
    background:
        radial-gradient(700px 500px at 88% 40%, var(--hs-ton), transparent 70%),
        linear-gradient(90deg, rgba(5, 10, 23, .95) 0%, rgba(5, 10, 23, .88) 36%, rgba(5, 10, 23, .45) 68%, rgba(5, 10, 23, .25) 100%);
}
.hs__bg--ayna { transform: scaleX(-1); }

.hs--mavi    { --hs-ton: rgba(29, 78, 216, .42); }
.hs--mor     { --hs-ton: rgba(124, 58, 237, .38); }
.hs--turkuaz { --hs-ton: rgba(8, 145, 178, .40); }
.hs--yesil   { --hs-ton: rgba(5, 150, 105, .36); }

.hs__inner { padding: 4.25rem 0 7rem; }
.hs .headline { font-size: clamp(2rem, 3.8vw, 3.2rem); }

.hs__slide.is-active [data-hs-anim] { animation: hsGel .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--d, 0s); }
@keyframes hsGel { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
.hs__slide.is-active .hs__visual[data-hs-anim] { animation-name: hsGelSag; }
@keyframes hsGelSag { from { opacity: 0; transform: translate3d(28px, 0, 0); } to { opacity: 1; transform: none; } }

.hs-mock { max-width: 520px; margin-left: auto; }

.hs-phone { position: relative; width: 240px; margin: 0 auto; padding: 10px; background: #0b1224; border: 1px solid rgba(255, 255, 255, .14); border-radius: 38px !important; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .04); }
.hs-phone__notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 90px; height: 20px; background: #0b1224; border-radius: 0 0 14px 14px !important; z-index: 2; }
.hs-phone__screen { position: relative; overflow: hidden; background: #f4f6fa; border-radius: 28px !important; padding: 32px 12px 56px; min-height: 400px; }
.hs-phone__bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; color: var(--ink); }
.hs-phone__bar strong { font-size: 1rem; font-weight: 800; letter-spacing: -.02em; }
.hs-phone__push { display: flex; gap: 8px; align-items: flex-start; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px !important; box-shadow: 0 10px 20px -12px rgba(15, 23, 42, .35); margin-bottom: 12px; }
.hs-phone__push > i { width: 26px; height: 26px; flex: 0 0 26px; display: inline-flex; align-items: center; justify-content: center; background: var(--brand); color: #fff; border-radius: 8px !important; font-size: .7rem; }
.hs-phone__push b { display: block; font-size: .72rem; color: var(--ink); }
.hs-phone__push small { display: block; font-size: .64rem; color: var(--text-3); line-height: 1.35; }
.hs-phone__hero { height: 92px; border-radius: 12px !important; background: linear-gradient(135deg, #1d4ed8, #06b6d4); margin-bottom: 10px; }
.hs-phone__line { height: 8px; background: #dfe5ee; border-radius: 4px !important; margin-bottom: 6px; }
.hs-phone__line.is-short, .hs-phone__row i.is-short { width: 60%; }
.hs-phone__row { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.hs-phone__row span { width: 54px; height: 44px; flex: 0 0 54px; border-radius: 8px !important; background: linear-gradient(135deg, #7c3aed, #1d4ed8); }
.hs-phone__row span.is-b { background: linear-gradient(135deg, #059669, #0891b2); }
.hs-phone__row div { flex: 1; }
.hs-phone__row i { display: block; height: 7px; background: #dfe5ee; border-radius: 4px !important; margin-bottom: 6px; }
.hs-phone__tabs { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; padding: 12px 0 16px; background: #fff; border-top: 1px solid var(--line); color: var(--text-4); font-size: .9rem; }
.hs-phone__tabs i:first-child { color: var(--brand); }

.hs__nav { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; border-top: 1px solid var(--on-ink-line); background: linear-gradient(0deg, rgba(5, 10, 23, .55), rgba(5, 10, 23, 0)); }
.hs { position: relative; }
.hs__nav-row { display: flex; align-items: stretch; justify-content: space-between; gap: 1.5rem; }
.hs__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex: 1; max-width: 820px; }
.hs__tab { position: relative; display: flex; align-items: baseline; gap: .6rem; padding: 1.15rem 1rem 1.25rem 0; background: none; border: 0; color: var(--on-ink-3); text-align: left; font: inherit; cursor: pointer; transition: color .2s ease-out; min-width: 0; }
.hs__tab:hover, .hs__tab.is-active { color: #fff; }
.hs__tab-no { font-size: .72rem; font-weight: 700; letter-spacing: .08em; }
.hs__tab-ad { font-size: .86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs__tab-bar { position: absolute; left: 0; right: 1rem; top: -1px; height: 2px; background: transparent; }
.hs__tab-bar b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brand), var(--cyan)); }
.hs__tab.is-active .hs__tab-bar b { width: 100%; }

.hs.is-auto .hs__tab.is-active .hs__tab-bar b { width: 0; animation: hsDol var(--hs-sure, 7s) linear forwards; }
.hs.is-paused .hs__tab.is-active .hs__tab-bar b { animation-play-state: paused; }
@keyframes hsDol { to { width: 100%; } }

.hs__ctrl { display: flex; align-items: center; gap: .5rem; }
.hs__btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .06); border: 1px solid var(--on-ink-line); color: #fff; cursor: pointer; transition: background-color .15s ease-out, border-color .15s ease-out; }
.hs__btn:hover { background: var(--brand); border-color: var(--brand); }
.hs__btn:focus-visible, .hs__tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 991.98px) {
    .hs__inner { padding: 4rem 0 6.5rem; }
    .hs__visual { display: none; }
    .hs__overlay { background:
        linear-gradient(rgba(148, 163, 184, .06) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, rgba(148, 163, 184, .06) 1px, transparent 1px) 0 0 / 40px 40px,
        radial-gradient(600px 400px at 90% 10%, var(--hs-ton), transparent 70%),
        linear-gradient(180deg, rgba(5, 10, 23, .82), rgba(5, 10, 23, .94)); }

    .hs__slide--foto .hs__overlay { background:
        radial-gradient(600px 400px at 90% 10%, var(--hs-ton), transparent 70%),
        linear-gradient(180deg, rgba(5, 10, 23, .78), rgba(5, 10, 23, .92)); }

    .hs__tab { padding: 1.4rem .5rem 1.4rem 0; }
    .hs__tab-no, .hs__tab-ad { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .hs__tab-bar { top: 50%; right: .5rem; height: 3px; background: rgba(255, 255, 255, .22); }
}
@media (max-width: 575.98px) {
    .hs__inner { padding: 3rem 0 6rem; }
    .hs__ctrl [data-hs-prev], .hs__ctrl [data-hs-next] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hs__slide, .hs__slide.is-active { transition: none; }
    .hs__slide.is-active .hs__bg img, .hs__slide.is-active [data-hs-anim] { animation: none; }
}