/* =====================================================
   Inspire Sektörler Widget – v2.4
   Figma: InspireIT_2025_NewDesign (node 1473:27555).
   Tüm tasarım değerleri CSS değişkeni → Elementor builder'dan
   düzenlenebilir. !important reset'leri var() üzerinden tüketir,
   böylece control'ler tema/Elementor stillerini güvenle ezer.
   Responsive-first: Mobil yatay pill strip / Masaüstü (≥1100px) iki kolon + ray.
   ===================================================== */

.inspire-sektor-widget,
.inspire-sektor-widget *,
.inspire-sektor-widget *::before,
.inspire-sektor-widget *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.inspire-sektor-widget {
  /* ---- Renkler (Figma token) ---- */
  --is-accent:          #E33279;  /* Logo Icon Color/Pink */
  --is-card-bg:         #FFFFFF;
  --is-title-color:     #232323;  /* Black/Title */
  --is-text-color:      #2C2C2C;  /* Black/Text  */
  --is-icon-bg:         #FAFAFA;  /* Background/Light */
  --is-icon-color:      var(--is-accent);
  --is-fade-bg:         #FAFAFA;  /* Bölüm arka planı (gradient fade) */
  --is-card-border:     #D0D0D0;  /* Grey/Light */
  --is-active-border:   var(--is-accent);
  --is-card-text:       var(--is-title-color);
  --is-rail-track:      rgba(217, 217, 217, 0.5); /* #D9D9D9 @50% */
  --is-rail-thumb:      var(--is-accent);
  --is-button-bg:       #558CCA;  /* Logo Icon Color/Blue */
  --is-button-bg-hover: #4778b3;
  --is-btn-text:        #FFFFFF;

  /* ---- Ölçüler (Figma) ---- */
  --is-card-radius:  12px;
  --is-card-pad:     22px;
  --is-list-gap:     20px;   /* kartlar arası (masaüstü) */
  --is-item-gap:     20px;   /* aktif kart içi: ikon ↔ isim */
  --is-card-font:    clamp(17px, 1.5vw, 24px);
  --is-icon-size:    56px;
  --is-icon-radius:  40px;
  --is-icon-glyph:   24px;
  --is-rail-width:   7px;
  --is-rail-radius:  9px;
  --is-col-gap:      56px;
  --is-list-pad-left: 47px;
  --is-btn-radius:   100px;
  --is-btn-font:     16px;
  --is-btn-pad-y:    16px;
  --is-btn-pad-x:    32px;

  font-family: inherit;
  width: 100%;
  background: transparent;
}

/* =====================================================
   HEADER  (Figma: center, Subheading 16/SemiBold pink, Heading 40, Supporting 20)
   ===================================================== */
.is-header {
  text-align: center;
  margin-bottom: 36px;
}

.is-label {
  display: inline-block;
  color: var(--is-accent);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 12px;
}

.is-title {
  font-size: clamp(26px, 5vw, 40px);
  font-weight: 600;
  color: var(--is-title-color);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
}

.is-subtitle {
  font-size: clamp(15px, 2.2vw, 20px);
  font-weight: 400;
  color: var(--is-title-color);
  line-height: 1.5;
  max-width: 768px;
  margin: 0 auto;
}

/* =====================================================
   BODY – Mobil: tek kolon dikey
   ===================================================== */
.is-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* =====================================================
   SOL KOLON
   ===================================================== */
.is-list-col {
  width: 100%;
  position: relative;
}

/* Kenar fade — Mobil: SAĞ kenar (yatay kaydırma ipucu), yalnız taşma varsa.
   Masaüstü: ALT kenar (medya sorgusunda override). */
.is-list-col::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 44px;
  background: linear-gradient(to right,
    rgba(250, 250, 250, 0) 0%,
    var(--is-fade-bg) 100%);
  pointer-events: none;
  z-index: 2;
  display: none;
}

/* Mobilde içerik taşıyorsa sağ fade'i göster (JS .is-scrollable ekler) */
.inspire-sektor-widget.is-scrollable .is-list-col::after { display: block; }

/* =====================================================
   DİKEY RAY + KAYAN PEMBE GÖSTERGE  (Figma: 7px, radius 9px)
   Mobilde gizli, masaüstünde görünür (medya sorgusu)
   ===================================================== */
.is-rail {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--is-rail-width);
  background: var(--is-rail-track);
  border-radius: var(--is-rail-radius);
  overflow: hidden;
  z-index: 1;
}

.is-rail-thumb {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--is-rail-width);
  height: 0;                 /* JS yüksekliği/konumu set eder */
  background: var(--is-rail-thumb);
  border-radius: var(--is-rail-radius);
  transition: top 0.18s ease, height 0.18s ease;
}

/* Kullanıcı listeyi kaydırırken ray anlık takip etsin;
   0.3s geçiş sürekli scroll'da lag/rubber-band görüntüsü yaratıyor. */
.inspire-sektor-widget.is-scrolling .is-rail-thumb {
  transition: none;
}

/* =====================================================
   SEKTÖR LİSTESİ
   Mobil: yatay scroll strip (pill tab'lar)
   ===================================================== */
.is-sector-list {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 8px;
  padding-bottom: 2px;
  padding-right: 40px;            /* son pill fade altında "peek" etsin */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x proximity;  /* kaydırınca pill'lere yumuşak otursun */
  scroll-padding-left: 4px;
}
.is-sector-list::-webkit-scrollbar { display: none; }
.is-sector-list .is-item { scroll-snap-align: start; }

/* Mobil yatay scroll göstergesi – yalnız taşma varsa görünür */
.is-scrollbar {
  display: none;
  position: relative;
  height: 4px;
  margin-top: 14px;
  border-radius: 4px;
  background: var(--is-rail-track);
  overflow: hidden;
}
.inspire-sektor-widget.is-scrollable .is-scrollbar { display: block; }

.is-scrollbar-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 30%;                /* JS gerçek oranı set eder */
  border-radius: 4px;
  background: var(--is-accent);
  transition: transform 0.05s linear;
  will-change: transform;
}

/* =====================================================
   SEKTÖR ÖĞESİ – Mobil: pill buton (compact)
   Elementor global button reset – kontrollü değerler var() ile
   ===================================================== */
.elementor-widget-inspire_sektor .is-item,
.inspire-sektor-widget .is-sector-list .is-item {
  appearance: none !important;
  -webkit-appearance: none !important;

  /* Mobil: yatay sıra için auto genişlik */
  flex: 0 0 auto !important;
  width: auto !important;

  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;            /* ikon ↔ isim (mobil) */

  padding: 10px 18px !important;
  text-align: left !important;
  cursor: pointer !important;
  white-space: nowrap !important;

  background: var(--is-card-bg) !important;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  outline: none !important;

  border: 1.5px solid var(--is-card-border) !important;
  border-radius: 50px !important;   /* pill on mobile */

  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: #555 !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;

  transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Mobil hover */
.elementor-widget-inspire_sektor .is-item:hover,
.inspire-sektor-widget .is-sector-list .is-item:hover {
  border-color: var(--is-accent) !important;
  color: var(--is-card-text) !important;
}

/* Mobil aktif */
.elementor-widget-inspire_sektor .is-item.active,
.inspire-sektor-widget .is-sector-list .is-item.active {
  border-color: var(--is-active-border) !important;
  background: var(--is-accent) !important;
  background-color: var(--is-accent) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* İkon – yalnız AKTİF öğede görünür (inaktif metin-only).
   Mobil: aktif pill içinde küçük inline beyaz ikon (kutu yok). */
.is-item-icon-wrap { display: none !important; }

.is-item.active .is-item-icon-wrap {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.is-item-icon-wrap i {
  font-size: 16px;
  line-height: 1;
  color: var(--is-icon-color);
}
.is-item-icon-wrap svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: var(--is-icon-color);
  color: var(--is-icon-color);
}

/* Aktif pill (pembe zemin) → ikon beyaz */
.is-item.active .is-item-icon-wrap i {
  color: #fff !important;
}
.is-item.active .is-item-icon-wrap svg {
  fill: #fff !important;
  color: #fff !important;
}

/* =====================================================
   SAĞ KOLON – İçerik panelleri
   ===================================================== */
.is-content-col {
  flex: 1;
  min-width: 0;
}

.is-panel        { display: none; }
.is-panel.active { display: block; animation: isFadeIn 0.25s ease; }

@keyframes isFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Panel başlık (Figma: 32/48 SemiBold, ls -3%) */
.is-panel-title {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 600;
  color: var(--is-title-color);
  line-height: 1.3;
  letter-spacing: -0.03em;
  margin-bottom: 15px;
}

/* Panel metin (Figma: 16/30 Regular #2C2C2C) */
.is-panel-desc {
  font-size: 16px;
  color: var(--is-text-color);
  line-height: 1.875;
  margin-bottom: 32px;
}

.is-panel-desc p            { margin-bottom: 12px; }
.is-panel-desc p:last-child { margin-bottom: 0; }

/* =====================================================
   BUTON  (Figma: Blue, radius 100px, padding 16/32, 16px Medium)
   ===================================================== */
.elementor-widget-inspire_sektor .is-panel-btn,
.inspire-sektor-widget .is-panel-btn {
  display: inline-block !important;
  background: var(--is-button-bg) !important;
  background-image: none !important;
  color: var(--is-btn-text) !important;
  border: none !important;
  border-radius: var(--is-btn-radius) !important;
  box-shadow: none !important;
  padding: var(--is-btn-pad-y) var(--is-btn-pad-x) !important;
  font-family: inherit !important;
  font-size: var(--is-btn-font) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  text-transform: none !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
}

.elementor-widget-inspire_sektor .is-panel-btn:hover,
.inspire-sektor-widget .is-panel-btn:hover {
  background-color: var(--is-button-bg-hover) !important;
  box-shadow: 0 4px 14px rgba(85, 140, 202, 0.35) !important;
  color: var(--is-btn-text) !important;
  text-decoration: none !important;
}

/* =====================================================
   TABLET (≥768px) – Başlık büyür, pill tab'lar kalır
   ===================================================== */
@media (min-width: 768px) {
  .is-header { margin-bottom: 50px; }
}

/* =====================================================
   MASAÜSTÜ (≥1100px) – İki kolon, dikey kart listesi + ray
   ===================================================== */
@media (min-width: 1100px) {
  /* Body: yan yana (Figma: gap 56px) */
  .is-body {
    flex-direction: row;
    gap: var(--is-col-gap);
    align-items: flex-start;
  }

  /* Sol kolon (Figma: liste 518 / içerik ≈ %46) */
  .is-list-col {
    flex: 0 0 40%;
    max-width: 560px;
  }

  /* Gradient fade — masaüstünde ALT kenara döner (her zaman görünür) */
  .is-list-col::after {
    display: block;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: 120px;
    background: linear-gradient(180deg,
      rgba(250, 250, 250, 0) 0%,
      var(--is-fade-bg) 100%);
  }

  /* Ray + thumb görünür */
  .is-rail { display: block; }

  /* Mobil scroll göstergesi masaüstünde gizli (dikey ray devralır) */
  .is-scrollbar { display: none !important; }

  /* Liste: dikey, scroll'lu (scrollbar gizli – ray gösterge görevi görür) */
  .is-sector-list {
    position: relative;          /* item offsetTop referansı */
    flex-direction: column;
    flex-wrap: nowrap;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 566px;           /* Figma ray yüksekliği */
    gap: var(--is-list-gap);
    padding-left: var(--is-list-pad-left); /* ray + boşluk */
    padding-right: 0;            /* mobil peek padding'i sıfırla */
    padding-bottom: 40px;
    scroll-snap-type: none;      /* serbest/normal scroll – karta zıplama yok */
    overscroll-behavior: auto;   /* liste bitince sayfa kaymaya devam etsin */
    scrollbar-width: none;       /* kaydırma kontrolü soldaki pembe ray */
  }
  .is-sector-list::-webkit-scrollbar { display: none; }

  /* Ray yalnız gösterge: tıklama/sürükleme yok, scroll normal */
  .is-rail { pointer-events: none; }

  /* ---- Item masaüstü: tam kart görünümü (Figma: pad 22, radius 12, 24px Medium) ---- */
  .elementor-widget-inspire_sektor .is-item,
  .inspire-sektor-widget .is-sector-list .is-item {
    flex: none !important;
    width: 100% !important;
    white-space: normal !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--is-item-gap) !important;

    padding: var(--is-card-pad) !important;
    border-radius: var(--is-card-radius) !important;

    font-size: var(--is-card-font) !important;
    font-weight: 500 !important;
    color: var(--is-card-text) !important;

    border: 1px solid var(--is-card-border) !important;
  }

  /* Masaüstü hover: sadece border rengi */
  .elementor-widget-inspire_sektor .is-item:hover,
  .inspire-sektor-widget .is-sector-list .is-item:hover {
    background: var(--is-card-bg) !important;
    background-color: var(--is-card-bg) !important;
    border-color: var(--is-accent) !important;
    color: var(--is-card-text) !important;
  }

  /* Masaüstü aktif: pembe kenar + gölge (Figma effect_JXIEOW) */
  .elementor-widget-inspire_sektor .is-item.active,
  .inspire-sektor-widget .is-sector-list .is-item.active {
    background: var(--is-card-bg) !important;
    background-color: var(--is-card-bg) !important;
    border-color: var(--is-active-border) !important;
    color: var(--is-card-text) !important;
    font-weight: 500 !important;
    box-shadow: 0 4px 13px rgba(0, 0, 0, 0.08) !important;
  }

  /* İkon: masaüstünde inaktif gizli; yalnız aktif kart kutu olarak gösterir (Figma) */
  .is-item-icon-wrap { display: none !important; }

  /* İkon kutusu: yalnız masaüstü aktif'te (Figma: 56px, bg #FAFAFA, radius 40px) */
  .is-item.active .is-item-icon-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--is-icon-size) !important;
    height: var(--is-icon-size) !important;
    border-radius: var(--is-icon-radius) !important;
    background: var(--is-icon-bg) !important;
    flex-shrink: 0 !important;
  }

  /* Masaüstü aktif ikon = vurgu rengi (mobil beyaz kuralını ez) */
  .is-item.active .is-item-icon-wrap i {
    font-size: var(--is-icon-glyph);
    color: var(--is-icon-color) !important;
  }

  .is-item.active .is-item-icon-wrap svg {
    width: var(--is-icon-glyph);
    height: var(--is-icon-glyph);
    fill: var(--is-icon-color) !important;
    color: var(--is-icon-color) !important;
    display: block;
  }
}