/* =========================================================================
   IT-Fix Hero Slider · Premium Editorial Rail
   v31 sisteminin altındaki "kartlı tab" navigasyonunu tek parça, ince ve
   editorial bir progress timeline'a dönüştürür. JS davranışına dokunmaz:
   .is-active toggle'ı ve --ifx31-progress custom property aynen kullanılır.
   ========================================================================= */

/* ------------------------------------------------------------------
   1) Alt kontrol şeridi · tek parça, glass, ince üst çizgi
   ------------------------------------------------------------------ */
body.ifx-v31-on .ifx-v31-slider-rail{
  position:relative;
  background:
    linear-gradient(180deg, rgba(10,7,4,.62) 0%, rgba(8,6,4,.78) 100%);
  border-top:1px solid rgba(255,255,255,.07);
  padding:18px 0 16px;
  backdrop-filter:blur(18px) saturate(1.05);
  -webkit-backdrop-filter:blur(18px) saturate(1.05);
}

/* Üstte premium ince turuncu progress rail (yatay tek hat hissi) */
body.ifx-v31-on .ifx-v31-slider-rail::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.10) 18%,
    rgba(233,165,87,.38) 50%,
    rgba(255,255,255,.10) 82%,
    transparent 100%);
  pointer-events:none;
}

body.ifx-v31-on .ifx-v31-slider-rail-inner{
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:nowrap;
}

/* ------------------------------------------------------------------
   2) Dots — kart/pill kaldır, tek hat üzerinde editorial item'lara çevir
   ------------------------------------------------------------------ */
body.ifx-v31-on .ifx-v31-slider-dots{
  display:flex;
  gap:0;
  flex:1 1 auto;
  flex-wrap:nowrap;
  overflow-x:auto;
  scrollbar-width:none;
  min-width:0;
  padding:0;
  margin:0;
  list-style:none;
  /* Item'lar arası tek bir alt çizgi · yatay rail hissi */
  position:relative;
}

body.ifx-v31-on .ifx-v31-slider-dots > li{
  flex:1 1 0;
  min-width:0;
  list-style:none;
}

body.ifx-v31-on .ifx-v31-slider-dot{
  position:relative;
  display:flex;
  flex-direction:row;
  align-items:baseline;
  gap:10px;
  width:100%;
  min-width:0;
  padding:6px 14px 14px;
  /* Kart görünümünü tamamen kaldır */
  background:transparent;
  border:0;
  border-radius:0;
  color:rgba(255,255,255,.52);
  cursor:pointer;
  text-align:left;
  letter-spacing:0;
  transition:color .22s ease, opacity .22s ease;
}

/* Pasif (boş) progress yatağı — her item'ın altında ince hat */
body.ifx-v31-on .ifx-v31-slider-dot::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:rgba(255,255,255,.10);
  pointer-events:none;
  border-radius:1px;
}

/* Hover — kutu açılmaz, sadece metin parlar */
body.ifx-v31-on .ifx-v31-slider-dot:hover{
  background:transparent;
  border-color:transparent;
  color:rgba(255,255,255,.92);
}

body.ifx-v31-on .ifx-v31-slider-dot:focus-visible{
  outline:none;
  color:#fff;
}

body.ifx-v31-on .ifx-v31-slider-dot.is-active{
  background:transparent;
  border-color:transparent;
  color:#fff;
}

/* ------------------------------------------------------------------
   3) Numara · küçük, monospace tarzı zarif tipografi
   ------------------------------------------------------------------ */
body.ifx-v31-on .ifx-v31-slider-dot-num{
  /* Grid yapısını sıfırla — flex-baseline tipografi */
  grid-row:auto;
  grid-column:auto;
  align-self:baseline;
  font-family:var(--ifx31-fd, "SF Pro Display", system-ui, sans-serif);
  font-size:11px;
  font-weight:600;
  letter-spacing:.10em;
  color:rgba(255,255,255,.40);
  line-height:1;
  flex:0 0 auto;
  font-variant-numeric:tabular-nums;
  transition:color .22s ease;
}

body.ifx-v31-on .ifx-v31-slider-dot.is-active .ifx-v31-slider-dot-num{
  color:#e9a557;
}

body.ifx-v31-on .ifx-v31-slider-dot:hover .ifx-v31-slider-dot-num{
  color:rgba(233,165,87,.85);
}

/* ------------------------------------------------------------------
   4) Label · sade metin, kutu içinde değil
   ------------------------------------------------------------------ */
body.ifx-v31-on .ifx-v31-slider-dot-label{
  grid-row:auto;
  grid-column:auto;
  align-self:baseline;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:inherit;
  line-height:1.15;
  flex:1 1 auto;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ------------------------------------------------------------------
   5) Track · gerçek progress · sadece aktifte ince turuncu hat
   Pasif yataktan ayrılması için item alt çizgisinin üstüne ince fill biner.
   ------------------------------------------------------------------ */
body.ifx-v31-on .ifx-v31-slider-dot-track{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  width:auto;
  height:1px;
  margin-top:0;
  background:transparent;
  border-radius:0;
  overflow:visible;
  grid-row:auto;
  grid-column:auto;
}

body.ifx-v31-on .ifx-v31-slider-dot-track i{
  display:block;
  width:0;
  height:2px;
  margin-top:-1px;
  background:linear-gradient(90deg, #e9a557 0%, #d2841f 60%, #d96f4f 100%);
  border-radius:1px;
  box-shadow:0 0 8px rgba(233,165,87,.28);
  transition:width .15s linear;
}

body.ifx-v31-on .ifx-v31-slider-dot.is-active .ifx-v31-slider-dot-track i{
  width:var(--ifx31-progress, 0%);
}

/* Pasif item'da fill görünmez · JS'in zaten width:0 olarak sıfırlayışını koru */
body.ifx-v31-on .ifx-v31-slider-dot:not(.is-active) .ifx-v31-slider-dot-track i{
  width:0;
  box-shadow:none;
}

/* ------------------------------------------------------------------
   6) Sağ kontrol bloğu · play + sayaç + ileri/geri (mini)
   ------------------------------------------------------------------ */
body.ifx-v31-on .ifx-v31-slider-toggle{
  display:inline-flex;
  align-items:center;
  gap:14px;
  flex:0 0 auto;
  padding-left:24px;
  margin-left:8px;
  border-left:1px solid rgba(255,255,255,.10);
}

/* ------------------------------------------------------------------
   PAUSE / PLAY KONTROL — SIFIRDAN REBUILD (.hero-slider-toggle)
   Eski .ifx-v31-slider-play butonu boş halka görünüyordu; yeni button
   bağımsız scope altında, inline SVG'lerle, garantili görünür şekilde
   yeniden inşa edildi. Eski class HTML'den kaldırıldı, eski CSS kuralları
   bu sayfada artık select edecek bir DOM bulamadığı için ölü kuraldır.
   ------------------------------------------------------------------ */
body.ifx-v31-on .hero-slider-toggle{
  position:relative;
  width:46px;
  height:46px;
  min-width:46px;
  min-height:46px;
  padding:0;
  margin:0;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.32);
  color:#ffffff;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 6px 18px rgba(0,0,0,.25);
  transition:
    background .25s ease,
    border-color .25s ease,
    color .25s ease,
    transform .25s ease,
    box-shadow .25s ease;
}

body.ifx-v31-on .hero-slider-toggle:hover{
  background:rgba(236,145,39,.18);
  border-color:rgba(236,145,39,.70);
  color:#ffd9a8;
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 10px 22px rgba(0,0,0,.30);
}

body.ifx-v31-on .hero-slider-toggle:focus-visible{
  outline:none;
  border-color:rgba(236,145,39,.95);
  color:#ffffff;
  box-shadow:
    0 0 0 3px rgba(236,145,39,.30),
    inset 0 1px 0 rgba(255,255,255,.10);
}

body.ifx-v31-on .hero-slider-toggle:active{
  transform:translateY(0);
  background:rgba(236,145,39,.26);
}

/* Paused state — kullanıcıya "play'e bas, devam et" sinyali ver */
body.ifx-v31-on .hero-slider-toggle[data-slider-state="paused"]{
  background:rgba(236,145,39,.14);
  border-color:rgba(236,145,39,.75);
  color:#ffd9a8;
}

/* Icon wrapper — span span, child SVG'yi 18px boyutta gösterir.
   span'i flex container yapıyoruz ki SVG ortalansın ve display:none toggle'ı
   güvenle çalışsın. */
body.ifx-v31-on .hero-slider-toggle__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  line-height:0;
  pointer-events:none;
}

body.ifx-v31-on .hero-slider-toggle__icon svg{
  width:18px;
  height:18px;
  display:block;
  fill:currentColor;
  stroke:none;
  overflow:visible;
}

/* Global svg{fill:} ihtimaline karşı path için explicit kural */
body.ifx-v31-on .hero-slider-toggle__icon svg path{
  fill:currentColor;
  stroke:none;
}

/* Default: slider playing → pause ikonu görünür, play gizli */
body.ifx-v31-on .hero-slider-toggle .hero-slider-toggle__icon--play{
  display:none;
}
body.ifx-v31-on .hero-slider-toggle .hero-slider-toggle__icon--pause{
  display:inline-flex;
}

/* Paused: tersine — play görünür, pause gizli */
body.ifx-v31-on .hero-slider-toggle[data-slider-state="paused"] .hero-slider-toggle__icon--pause{
  display:none;
}
body.ifx-v31-on .hero-slider-toggle[data-slider-state="paused"] .hero-slider-toggle__icon--play{
  display:inline-flex;
}

/* Sayaç · premium tipografi */
body.ifx-v31-on .ifx-v31-slider-counter{
  font-family:var(--ifx31-fd);
  display:inline-flex;
  align-items:baseline;
  gap:5px;
  color:rgba(255,255,255,.84);
  font-size:12px;
  letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
}

body.ifx-v31-on .ifx-v31-slider-counter b{
  font-size:18px;
  font-weight:700;
  color:#fff;
  letter-spacing:-.005em;
  line-height:1;
}

body.ifx-v31-on .ifx-v31-slider-counter i{
  font-style:normal;
  color:rgba(255,255,255,.32);
  font-size:13px;
}

body.ifx-v31-on .ifx-v31-slider-counter em{
  font-style:normal;
  font-weight:500;
  color:rgba(255,255,255,.50);
  font-size:13px;
}

/* ------------------------------------------------------------------
   7) Üst (slide stage) okları · biraz daha küçük ve minimal
   ------------------------------------------------------------------ */
body.ifx-v31-on .ifx-v31-slider-arrow{
  width:40px;
  height:40px;
  background:rgba(15,11,7,.32);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

body.ifx-v31-on .ifx-v31-slider-arrow svg{ width:16px; height:16px; }

body.ifx-v31-on .ifx-v31-slider-arrow:hover{
  background:rgba(15,11,7,.55);
  border-color:rgba(233,165,87,.55);
  box-shadow:0 8px 22px rgba(0,0,0,.30);
  transform:translateY(-50%) scale(1.04);
  /* Aşırı parlak turuncu hover bloğu kaldırıldı */
}

/* WhatsApp/iletişim FAB ile çakışmaması için sağ ok hafif daha içeride */
body.ifx-v31-on .ifx-v31-slider-arrow--prev{ left:16px; }
body.ifx-v31-on .ifx-v31-slider-arrow--next{ right:76px; }

/* ------------------------------------------------------------------
   8) Geniş ekran ince ayar
   ------------------------------------------------------------------ */
@media(min-width:1440px){
  body.ifx-v31-on .ifx-v31-slider-rail-inner{ gap:36px; }
  body.ifx-v31-on .ifx-v31-slider-dot{ padding:8px 18px 16px; }
  body.ifx-v31-on .ifx-v31-slider-dot-label{ font-size:12px; }
}

/* ------------------------------------------------------------------
   9) Laptop / küçük yükseklik · daha kompakt
   ------------------------------------------------------------------ */
@media (max-height:780px) and (min-width:1024px){
  body.ifx-v31-on .ifx-v31-slider-rail{ padding:12px 0 10px; }
  body.ifx-v31-on .ifx-v31-slider-dot{ padding:4px 12px 12px; }
  body.ifx-v31-on .ifx-v31-slider-dot-num{ font-size:10.5px; }
  body.ifx-v31-on .ifx-v31-slider-dot-label{ font-size:10.5px; letter-spacing:.12em; }
}

@media(max-width:1080px){
  body.ifx-v31-on .ifx-v31-slider-rail-inner{ gap:18px; }
  body.ifx-v31-on .ifx-v31-slider-dot{ padding:6px 12px 14px; gap:8px; }
  body.ifx-v31-on .ifx-v31-slider-dot-label{ font-size:11px; letter-spacing:.12em; }
}

/* ------------------------------------------------------------------
   10) Mobile · sadeleştir
   Mevcut markup'taki play+counter (.itfix-v31-slider-toggle) korunur.
   Dots yatayda scrollable ama kartsız · her item flex-shrink:0 olur.
   ------------------------------------------------------------------ */
@media(max-width:760px){
  body.ifx-v31-on .ifx-v31-slider-rail{
    padding:10px 0 8px;
  }

  body.ifx-v31-on .ifx-v31-slider-rail-inner{
    flex-direction:column-reverse;
    align-items:stretch;
    gap:6px;
  }

  body.ifx-v31-on .ifx-v31-slider-dots{
    gap:0;
    padding:0 8px;
    -webkit-overflow-scrolling:touch;
  }

  body.ifx-v31-on .ifx-v31-slider-dots > li{
    flex:0 0 auto;
  }

  body.ifx-v31-on .ifx-v31-slider-dot{
    padding:4px 14px 10px;
    gap:8px;
    min-width:0;
  }

  body.ifx-v31-on .ifx-v31-slider-dot-label{
    font-size:10.5px;
    letter-spacing:.12em;
  }

  body.ifx-v31-on .ifx-v31-slider-toggle{
    border-left:0;
    padding-left:0;
    margin-left:0;
    width:100%;
    justify-content:space-between;
    padding:0 14px 4px;
  }
}

/* Çok dar ekran · sadece aktif item dolgun, diğerleri kompakt */
@media(max-width:430px){
  body.ifx-v31-on .ifx-v31-slider-dot{
    padding:4px 12px 10px;
  }
  body.ifx-v31-on .ifx-v31-slider-dot-label{
    font-size:10px;
  }
  body.ifx-v31-on .ifx-v31-slider-dot-num{
    font-size:10px;
  }
}