/* Ana sayfa hareketli slayt (yalnızca ön sayfada yüklenir). */
/* ---------- Hareketli slayt ---------- */
.hs{position:relative;min-width:0}
.hs__viewport{position:relative;aspect-ratio:1200/520;border-radius:16px;overflow:hidden;background:var(--soft2);container-type:inline-size;isolation:isolate}
.hs__slide{position:absolute;inset:0;background:var(--soft2);opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
.hs__slide.is-active{opacity:1;visibility:visible;z-index:1}

/* Ortak yazı bloğu — tüm ölçüler cqw (1cqw = slayt genişliğinin %1'i) */
.hs__copy{position:absolute;left:5.4cqw;top:50%;transform:translateY(-50%);width:44cqw;z-index:3}
.hs__chip{display:inline-flex;align-items:center;gap:.7cqw;height:2.9cqw;padding:0 1.3cqw;border-radius:99px;background:#fff;border:1px solid var(--line);font-size:1.25cqw;font-weight:500;color:#4A4F57;margin-bottom:1.8cqw}
.hs__chip i{width:.75cqw;height:.75cqw;border-radius:50%;background:var(--green);box-shadow:0 0 0 .35cqw rgba(23,163,74,.15)}
.hs__title{font-size:3.85cqw;line-height:1.12;font-weight:600;color:var(--ink);margin:0 0 1.4cqw;letter-spacing:-.015em}
.hs__title em{font-style:normal;color:var(--accent)}
.hs__text{font-size:1.55cqw;line-height:1.45;color:#5A5F68;margin:0 0 2.4cqw;max-width:38cqw}
.hs__btns{display:flex;gap:1cqw;flex-wrap:wrap}
.hs__btn{display:inline-flex;align-items:center;gap:.7cqw;height:4.2cqw;padding:0 2.1cqw;border-radius:.8cqw;background:var(--primary);color:#fff;font-size:1.4cqw;font-weight:500;transition:background-color .2s var(--ease),transform .15s var(--ease)}
.hs__btn:hover{background:var(--primary-d)}
.hs__btn:active{transform:scale(.97)}
.hs__btn--ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.hs__btn--ghost:hover{background:#fff;color:var(--primary);border-color:var(--primary)}
.hs__btn svg{width:1.5cqw;height:1.5cqw}

/* Slayt 1 — Satış/montaj/destek */
.hs .s1__bg{position:absolute;right:-13cqw;top:50%;width:70cqw;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 0 0 2.6cqw rgba(170,54,46,.06);transform:translateY(-50%)}
.hs .s1__phone{display:flex;align-items:center;gap:1.4cqw;margin:0 0 2.2cqw}
.hs .s1__ring{position:relative;width:5cqw;height:5cqw;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;flex:none}
.hs .s1__ring svg{width:2.3cqw;height:2.3cqw}
.hs .s1__ring::before,.hs .s1__ring::after{content:"";position:absolute;inset:0;border-radius:50%;border:.2cqw solid var(--primary);opacity:0}
.hs .s1__num{font-size:3.6cqw;font-weight:600;color:var(--ink);letter-spacing:.01em;line-height:1}
.hs .s1__num small{display:block;font-size:1.2cqw;font-weight:400;color:var(--muted);letter-spacing:0;margin-top:.5cqw}
.hs .devs{position:absolute;right:3.5cqw;top:50%;width:46cqw;aspect-ratio:46/28;transform:translateY(-50%);z-index:2}
.hs .devs::before{content:"";position:absolute;left:4%;right:2%;bottom:-.6cqw;height:4cqw;border-radius:50%;background:radial-gradient(closest-side,rgba(29,33,40,.22),rgba(29,33,40,0))}
.hs .dev{position:absolute;margin:0}
.hs .dev img{width:100%;height:auto;filter:drop-shadow(0 1.4cqw 1.2cqw rgba(29,33,40,.22))}
.hs .dev--ipg{width:56%;left:0;bottom:15%}
.hs .dev--px{width:31.5%;left:46%;bottom:2%;z-index:2}
.hs .dev--gs{display:none}
.hs .dev--ft{width:18.5%;right:0;bottom:6%;z-index:1}
.hs .s1 .hs__copy{width:40cqw}
.hs .s3 .hs__copy{width:40cqw}
.hs__slide img{mix-blend-mode:multiply}
.hs .node img{mix-blend-mode:normal}

/* Slayt 2 — Yetkili servis */
.hs .s2__grid{position:absolute;right:4.6cqw;top:50%;transform:translateY(-50%);width:44cqw;display:grid;grid-template-columns:1fr 1fr;gap:1.4cqw;z-index:2}
.hs .brand{position:relative;background:#fff;border:1px solid var(--line2);border-radius:1.3cqw;height:13.4cqw;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2cqw;padding:0 2cqw;overflow:hidden}
.hs a.brand{transition:border-color .2s var(--ease),transform .2s var(--ease)}
.hs a.brand:hover{border-color:var(--c)}
.hs .brand img{max-height:4.4cqw;width:auto;max-width:15cqw;object-fit:contain}
.hs .brand img.gs{max-height:7cqw;margin:-1.4cqw 0 -.3cqw}
.hs .brand span{font-size:1.15cqw;color:var(--muted);letter-spacing:.02em}
.hs .brand::after{content:"";position:absolute;left:0;right:0;bottom:0;height:.35cqw;background:var(--c,var(--primary));transform-origin:left}
.hs .s2__svc{display:flex;gap:.7cqw;flex-wrap:wrap;margin:0 0 2.4cqw}
.hs .s2__svc li{list-style:none;display:flex;align-items:center;gap:.6cqw;height:3.2cqw;padding:0 1.3cqw;border-radius:.8cqw;background:#fff;border:1px solid var(--line);font-size:1.3cqw;font-weight:500;color:var(--ink)}
.hs .s2__svc svg{width:1.4cqw;height:1.4cqw;color:var(--green)}
.hs .s2__svc{padding:0}

/* Slayt 3 — Santral şeması */
.hs .s3__map{position:absolute;right:1cqw;top:50%;transform:translateY(-50%);width:48cqw;aspect-ratio:480/400;z-index:2}
.hs .s3__map svg.lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hs .lines path{fill:none;stroke:#CDD3DC;stroke-width:2;stroke-linecap:round}
.hs .lines path.pulse{stroke:var(--accent);stroke-width:3;stroke-dasharray:14 400;stroke-dashoffset:14;opacity:0}
.hs .node{position:absolute;width:max-content;transform:translate(-50%,-50%);background:#fff;border:1px solid var(--line2);border-radius:1.1cqw;box-shadow:0 1cqw 2cqw -1.4cqw rgba(29,33,40,.25);display:flex;align-items:center;gap:.8cqw}
.hs .node--line span{white-space:nowrap}
.hs .node--line{padding:.8cqw 1.2cqw;font-size:1.2cqw;font-weight:500;color:var(--ink);white-space:nowrap}
.hs .node--line b{display:block;font-size:1cqw;font-weight:400;color:var(--muted)}
.hs .node--line i{width:2.4cqw;height:2.4cqw;border-radius:50%;background:#F1F2F4;color:var(--primary);display:grid;place-items:center;flex:none}
.hs .node--line i svg{width:1.2cqw;height:1.2cqw}
.hs .node--pbx{flex-direction:column;gap:.2cqw;padding:1cqw 1.4cqw 1.2cqw;border-radius:1.6cqw;border-color:var(--line)}
.hs .node--pbx .pbx-img{width:13cqw;height:auto;margin:-.6cqw 0 .3cqw}
.hs .node--pbx span{font-size:1.15cqw;font-weight:600;color:var(--ink)}
.hs .node--pbx small{font-size:.95cqw;color:var(--muted)}
.hs .node--ext{padding:.5cqw 1.2cqw .5cqw .5cqw}
.hs .node--ext img{width:5.4cqw;height:5.4cqw;object-fit:contain;padding:.3cqw;border-radius:.8cqw;background:#fff}
.hs .node--ext span{white-space:nowrap;font-size:1.2cqw;font-weight:600;color:var(--ink);line-height:1.2}
.hs .node--ext span b{display:block;font-weight:400;font-size:1cqw;color:var(--muted)}
.hs .node--ext .dot{position:absolute;right:.8cqw;top:.8cqw;width:.8cqw;height:.8cqw;border-radius:50%;background:#D5DAE1}

/* Slayt 4 — en çok satan telefonlar (8 ürün, 4x2) */
.hs .s4__grid{position:absolute;right:4cqw;top:50%;transform:translateY(-50%);width:50cqw;display:grid;grid-template-columns:repeat(4,1fr);gap:1cqw;z-index:2}
.hs .phone{display:flex;flex-direction:column;gap:.5cqw;padding:.8cqw 1cqw 1.1cqw;background:#fff;border:1px solid var(--line2);border-radius:1.2cqw;color:var(--ink);transition:border-color .2s var(--ease)}
.hs .phone:hover{border-color:var(--primary);color:var(--ink)}
.hs .phone__img{display:block;position:relative;height:8.6cqw}
.hs .phone__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.hs .phone__body{display:flex;flex-direction:column;gap:.35cqw;min-width:0}
.hs .phone__name{font-size:1.02cqw;line-height:1.3;font-weight:500;min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hs .phone__price{font-size:1.3cqw;font-weight:600;color:var(--ink);line-height:1.2}
.hs .phone__price del{display:block;font-size:.72em;font-weight:400;color:var(--muted)}
.hs .phone__price ins{text-decoration:none}
.hs .phone__price small{font-size:.7em;font-weight:400;color:var(--muted)}

/* Slayt 5 — markalar (yalnız logo, 4 sütun) */
.hs .s5__grid{position:absolute;right:4.6cqw;top:50%;transform:translateY(-50%);width:48cqw;display:grid;grid-template-columns:repeat(4,1fr);gap:1cqw;z-index:2}
.hs .mk{display:flex;align-items:center;justify-content:center;height:8.4cqw;padding:0 1.4cqw;background:#fff;border:1px solid var(--line2);border-radius:1.2cqw;transition:border-color .2s var(--ease),transform .2s var(--ease)}
.hs .mk:hover{border-color:var(--primary);transform:translateY(-2px)}
.hs .mk img{max-width:100%;max-height:2.8cqw;width:auto;height:auto;object-fit:contain}
.hs .mk img.mk--grandstream{max-height:5.2cqw}
.hs .mk img.mk--teknikom{max-height:5.6cqw}
.hs .mk img.mk--zyxel{max-height:3.6cqw}

/* Gezinme */
.hs__nav{position:absolute;top:50%;z-index:5;width:44px;height:44px;margin-top:-22px;border-radius:50%;border:0;background:#fff;color:var(--ink);box-shadow:0 4px 16px -4px rgba(29,33,40,.25);display:grid;place-items:center;padding:0;opacity:0;cursor:pointer;transition:opacity .2s,background-color .2s,color .2s}
.hs:hover .hs__nav,.hs__nav:focus-visible{opacity:1}
.hs__nav:hover{background:var(--primary);color:#fff}
.hs__nav.is-prev{left:14px}.hs__nav.is-next{right:14px}
.hs__dots{display:flex;justify-content:center;gap:8px;margin-top:14px}
.hs__dots button{position:relative;width:8px;height:8px;border-radius:99px;border:0;padding:0;background:#C9CED6;overflow:hidden;cursor:pointer;transition:width .3s var(--ease)}
.hs__dots button[aria-current]{width:34px}
.hs__dots button[aria-current]::after{content:"";position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(1)}

/* ---------- Hareket (sadece hareket isteyenler için) ---------- */
@media (prefers-reduced-motion:no-preference){
  .hs .is-active .in{animation:hs-in .7s var(--ease) both;animation-delay:calc(var(--d,0) * 90ms + 120ms)}
  @keyframes hs-in{from{opacity:0;transform:translateY(1.6cqw)}}

  /* 1: cihazlar sırayla yükselir, telefon iki kez çalar */
  .hs .is-active .dev--ipg{animation:hs-dev-l .9s var(--ease) both .2s}
  .hs .is-active .dev--px{animation:hs-dev .9s var(--ease) both .4s}
  .hs .is-active .dev--ft{animation:hs-dev-r .9s var(--ease) both .3s}
  .hs .is-active .devs::before{animation:hs-fade .9s var(--ease) both .2s}
  @keyframes hs-fade{from{opacity:0}}
  @keyframes hs-dev-r{from{opacity:0;transform:translateX(4cqw)}}
  @keyframes hs-dev-l{from{opacity:0;transform:translateX(-4cqw)}}
  @keyframes hs-dev{from{opacity:0;transform:translateY(5cqw)}}
  .hs .is-active .s1__bg{animation:hs-bg 1.1s var(--ease) both}
  @keyframes hs-bg{from{opacity:0;transform:translateY(-50%) scale(.85)}}
  .hs .is-active .s1__ring::before{animation:hs-wave 1.4s ease-out .9s 3}
  .hs .is-active .s1__ring::after{animation:hs-wave 1.4s ease-out 1.25s 3}
  @keyframes hs-wave{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
  .hs .is-active .s1__ring svg{animation:hs-shake .5s ease-in-out .9s 3}
  @keyframes hs-shake{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(5deg)}}

  /* 2: logolar sırayla gelir, alt çizgi soldan çizilir */
  .hs .is-active .brand{animation:hs-brand .7s var(--ease) both;animation-delay:calc(var(--d) * 110ms + 200ms)}
  @keyframes hs-brand{from{opacity:0;transform:scale(.94)}}
  .hs .is-active .brand::after{animation:hs-line .8s var(--ease) both;animation-delay:calc(var(--d) * 110ms + 550ms)}
  @keyframes hs-line{from{transform:scaleX(0)}}

  /* 3: şema kurulur, sonra sinyal dış hattan dahililere akar */
  .hs .is-active .node{animation:hs-node .6s var(--ease) both;animation-delay:calc(var(--d) * 80ms + 150ms)}
  @keyframes hs-node{from{opacity:0;transform:translate(-50%,-50%) scale(.9)}}
  .hs .is-active .lines path.base{stroke-dasharray:400;animation:hs-draw .9s var(--ease) both .45s}
  @keyframes hs-draw{from{stroke-dashoffset:400}to{stroke-dashoffset:0}}
  .hs .is-active .lines path.pulse{animation:hs-pulse 2.4s cubic-bezier(.45,0,.3,1) infinite;animation-delay:calc(var(--d) * 1s + 1.3s)}
  @keyframes hs-pulse{0%{stroke-dashoffset:14;opacity:1}55%{stroke-dashoffset:-260;opacity:1}56%,100%{opacity:0;stroke-dashoffset:-260}}
  .hs .is-active .node--ext .dot{animation:hs-dot 2.4s infinite;animation-delay:calc(var(--d2) * 1s + 1.3s)}
  @keyframes hs-dot{0%,40%{background:#D5DAE1;box-shadow:none}48%,80%{background:var(--green);box-shadow:0 0 0 .4cqw rgba(23,163,74,.18)}100%{background:#D5DAE1}}

  /* 4: kartlar sırayla, fiyat ardından */
  .hs .is-active .phone{animation:hs-brand .7s var(--ease) both;animation-delay:calc(var(--d) * 70ms + 200ms)}
  .hs .is-active .phone__price{animation:hs-in .6s var(--ease) both;animation-delay:calc(var(--d) * 70ms + 550ms)}
  .hs .is-active .mk{animation:hs-brand .6s var(--ease) both;animation-delay:calc(var(--d) * 60ms + 200ms)}
  .hs__dots button[aria-current]::after{animation:hs-prog var(--dur,6s) linear both}
  .hs.is-paused .hs__dots button[aria-current]::after{animation-play-state:paused}
  @keyframes hs-prog{from{transform:scaleX(0)}}
}

@media (max-width:640px){
  /* Mobil: slaytlar üst üste aynı hücrede, yükseklik içeriğe göre; yazı üstte, görsel altta */
  .hs__viewport{aspect-ratio:auto;display:grid}
  .hs__slide{position:relative;inset:auto;grid-area:1/1;display:flex;flex-direction:column;padding:7cqw 6cqw 6cqw}
  .hs__copy,.hs .s1 .hs__copy,.hs .s3 .hs__copy{position:relative;left:auto;top:auto;transform:none;width:auto}
  .hs__chip{height:auto;min-height:7cqw;font-size:max(3.2cqw,11px);padding:0 3cqw;gap:1.6cqw;margin-bottom:3.6cqw}
  .hs__chip i{width:1.8cqw;height:1.8cqw}
  .hs__title,.hs .s1 .hs__title,.hs .s3 .hs__title{font-size:7.2cqw;margin-bottom:3.4cqw}
  .hs__text{display:none}
  .hs__btn{height:11.5cqw;font-size:max(3.8cqw,13px);padding:0 5cqw;border-radius:2.2cqw;gap:1.6cqw}
  .hs__btn svg{width:3.8cqw;height:3.8cqw}
  .hs__btn--ghost{display:none}
  @media (prefers-reduced-motion:no-preference){@keyframes hs-bg{from{opacity:0;transform:scale(.85)}}}
  .hs .s2__svc{display:grid;grid-template-columns:1fr 1fr;gap:2cqw 3cqw;margin-bottom:0}
  .hs .s2__svc li{height:8cqw;font-size:max(3.2cqw,11px);padding:0 2.4cqw;border-radius:2cqw;gap:1.2cqw}
  .hs .s2__svc svg{width:3.2cqw;height:3.2cqw}
  .hs .s2 .hs__btns{display:none}
  .hs .s2__grid{position:relative;right:auto;top:auto;transform:none;width:auto;margin-top:auto;gap:3cqw}
  .hs .s2 .hs__copy{margin-bottom:6cqw}
  .hs .brand{height:27cqw;border-radius:3cqw;gap:2.4cqw}
  .hs .brand img{max-height:7.4cqw;max-width:30cqw}
  .hs .brand span{font-size:max(2.8cqw,10px)}
  .hs .brand img.gs{max-height:11cqw;margin:-2.4cqw 0 -.6cqw}
  .hs .s3__map{position:relative;right:auto;top:auto;transform:none;width:100%;aspect-ratio:480/370;margin-top:auto}
  .hs .s3 .hs__copy{margin-bottom:5cqw}
  .hs .s3 .node--line{left:13%!important}
  .hs .node--pbx small{display:none}
  .hs .s3 .node--ext{left:76%!important}
  .hs .s3 .node--pbx{left:40%!important}
  .hs .node--ext span b{display:none}
  .hs .node--line{font-size:max(2.8cqw,10px);padding:1.6cqw 2.2cqw;border-radius:2.2cqw;gap:1.6cqw}
  .hs .node--line b{display:none}
  .hs .node--line i{width:5.4cqw;height:5.4cqw}.hs .node--line i svg{width:2.8cqw;height:2.8cqw}
  .hs .node--pbx{border-radius:3cqw;padding:1.6cqw 2.2cqw}
  .hs .node--pbx .pbx-img{width:17cqw}
  .hs .node--pbx span{font-size:max(2.8cqw,10px)}.hs .node--pbx small{font-size:max(2.4cqw,9px)}
  .hs .node--ext{padding:1cqw 2.4cqw 1cqw 1cqw;border-radius:2.2cqw;gap:1.6cqw}
  .hs .node--ext img{width:10cqw;height:10cqw;border-radius:1.6cqw}
  .hs .node--ext span{font-size:max(2.8cqw,10px)}.hs .node--ext span b{font-size:max(2.4cqw,9px)}
  .hs .node--ext .dot{width:1.6cqw;height:1.6cqw;right:1.4cqw;top:1.4cqw}
  .hs__nav{display:none}

  /* Mobil 1. slayt: yazı üstte, altta santraller tek tek döner (IPG500 ortada, büyük) */
  .hs .s1__phone{gap:3cqw;margin-bottom:4.4cqw}
  .hs .s1__ring{width:11cqw;height:11cqw}.hs .s1__ring svg{width:5cqw;height:5cqw}
  .hs .s1__num{font-size:8cqw}.hs .s1__num small{font-size:max(3.2cqw,11px);margin-top:1cqw}
  .hs .s1__bg{width:120cqw;right:-10cqw;top:auto;bottom:-62cqw;transform:none;box-shadow:none}
  .hs .devs{position:relative;right:auto;top:auto;transform:none;width:100%;margin-top:auto;padding-top:4cqw;box-sizing:content-box}
  .hs .devs::before{left:18%;right:18%}
  .hs .dev{left:50%;right:auto;bottom:4%;translate:-50% 0;opacity:0}
  .hs .dev--ipg{width:84%;bottom:22%}
  .hs .dev--px{width:46%}
  .hs .dev--ft{width:32%}
  .hs .dev--gs{display:block;width:62%;bottom:12%}
  /* 4 ürün × 2,7 sn; slayt süresi data-dur-m ile 11 sn */
  @media (prefers-reduced-motion:no-preference){
    .hs .is-active .dev--ipg,.hs .is-active .dev--px,.hs .is-active .dev--ft,.hs .is-active .dev--gs{animation:hs-cycle 10.8s var(--ease) infinite both}
    .hs .is-active .dev--px{animation-delay:2.7s}
    .hs .is-active .dev--ft{animation-delay:5.4s}
    .hs .is-active .dev--gs{animation-delay:8.1s}
    @keyframes hs-cycle{0%{opacity:0;transform:translateY(3cqw)}6%,21%{opacity:1;transform:none}26%,100%{opacity:0;transform:translateY(-2cqw)}}
  }
  @media (prefers-reduced-motion:reduce){.hs .dev--ipg{opacity:1}}

  /* Mobil 4. slayt: 8 ürünün hepsi, 2 sütun yatay kompakt kart */
  .hs .s4 .hs__btns{display:none}
  .hs .s4 .hs__copy{margin-bottom:4.4cqw}
  .hs .s4__grid{position:relative;right:auto;top:auto;transform:none;width:auto;margin-top:auto;grid-template-columns:1fr 1fr;gap:2.2cqw}
  .hs .phone{flex-direction:row;align-items:center;padding:1.6cqw 2cqw 1.6cqw 1.4cqw;gap:1.8cqw;border-radius:2.6cqw}
  .hs .phone__img{flex:none;width:12cqw;height:13cqw}
  .hs .phone__body{gap:.8cqw}
  .hs .phone__name{font-size:max(2.9cqw,10.5px);min-height:0}
  .hs .phone__price{font-size:max(3.4cqw,12px)}

  /* Mobil 5. slayt: 3 sütun logo */
  .hs .s5 .hs__btns{display:none}
  .hs .s5 .hs__copy{margin-bottom:5cqw}
  .hs .s5__grid{position:relative;right:auto;top:auto;transform:none;width:auto;margin-top:auto;grid-template-columns:repeat(3,1fr);gap:2.4cqw}
  .hs .mk{height:17cqw;padding:0 3cqw;border-radius:2.6cqw}
  .hs .mk img{max-height:5.2cqw}
  .hs .mk img.mk--grandstream{max-height:10cqw}
  .hs .mk img.mk--teknikom{max-height:10.5cqw}
  .hs .mk img.mk--zyxel{max-height:6.6cqw}
}