/* =========================================================
   ST Solar — solutions.css  (Çözümler / sekmeli bölüm)
   Referans: 2–6.PNG  ·  Sınıf öneki: sol-
   Yalnızca base.css token'larını kullanır.
   ========================================================= */

.sol{padding:90px 0 0}

.sol-head .sec-sub{margin-top:16px}

/* ---------- Sekme çubuğu ---------- */
.sol-tabbar{
  margin-top:36px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;            /* Firefox */
  -ms-overflow-style:none;         /* eski Edge */
}
.sol-tabbar::-webkit-scrollbar{width:0;height:0;display:none}
/* Kaydırılabilirse kenarlarda solgunluk: devamı olduğunu gösterir (js/solutions.js sınıfları) */
.sol-tabbar.is-scrollable{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 44px,#000 calc(100% - 44px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 44px,#000 calc(100% - 44px),transparent 100%);
}
.sol-tabbar.is-scrollable.at-start{
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 44px),transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 44px),transparent 100%);
}
.sol-tabbar.is-scrollable.at-end{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 44px,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 44px,#000 100%);
}

/* Masaüstü: 5 eşit kompakt sekme [ref: 3–6.PNG] —
   küçük lacivert ikon + büyük harfli etiket; aktifte turuncu alt çizgi. */
.sol-tabs{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
  width:100%;
  min-width:100%;
  margin:0;
  padding:16px 2px 22px;
}

.sol-tab{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:15px;
  padding:6px 8px;
  text-align:center;
  color:var(--navy-700);
  background:transparent;
  transition:transform .25s ease;
}
.sol-tab:hover{transform:translateY(-2px)}
.sol-tab:focus-visible{outline:2px solid var(--royal);outline-offset:3px;border-radius:8px}

.sol-tab-ic{
  display:block;
  flex:0 0 auto;
  width:54px;
  height:54px;
  color:var(--navy-700);
}
.sol-tab-ic svg{display:block;width:100%;height:100%}

.sol-tab-lb{
  display:inline-block;
  max-width:230px;
  font-size:13px;
  font-weight:600;
  line-height:1.55;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--ink);
  padding-bottom:4px;
  border-bottom:2px solid transparent;
  transition:color .25s ease,border-color .25s ease;
}
.sol-tab:hover .sol-tab-lb,
.sol-tab:focus-visible .sol-tab-lb{color:var(--navy-700)}
.sol-tab.is-active .sol-tab-lb{
  color:var(--navy-700);
  border-bottom-color:var(--orange);
}

/* ---------- Paneller ---------- */
.sol-panels{margin-top:8px}

.sol-panel{display:none}
.sol-panel.is-active{
  display:grid;
  grid-template-columns:380px 1fr 380px;
  gap:40px;
  align-items:stretch;
  animation:sol-fade .3s ease both;
}
@keyframes sol-fade{from{opacity:0}to{opacity:1}}

.sol-fig{
  display:block;
  min-height:490px;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--bg-soft);
}
.sol-fig img{
  width:100%;
  height:100%;
  min-height:490px;
  object-fit:cover;
  object-position:center;
}

.sol-copy{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;          /* dikey ortalama */
  text-align:center;
  padding:0 10px;
}
.sol-eyebrow{
  display:block;
  font-size:14px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:.2px;
  color:var(--muted);
}
.sol-h3{
  margin-top:14px;
  font-size:34px;
  line-height:1.25;
  font-weight:700;
  letter-spacing:-.2px;
  color:var(--navy-700);
}
.sol-p{
  margin-top:18px;
  max-width:460px;
  font-size:15px;
  line-height:1.75;
  color:var(--muted);
}
.sol-more{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:16px;
  font-size:13px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.3px;
  color:var(--navy-700);
  transition:color .25s ease;
}
.sol-more:hover{color:var(--orange)}
.sol-more:focus-visible{outline:2px solid var(--royal);outline-offset:3px;border-radius:4px}
.sol-more-ic{font-size:17px;line-height:1}

/* ---------- Responsive ---------- */
@media (max-width:1200px){
  .sol-tabs{padding:14px 2px 20px}
  .sol-tab-ic{width:48px;height:48px}
  .sol-tab-lb{font-size:12px;letter-spacing:.4px}
  .sol-panel.is-active{grid-template-columns:300px 1fr 300px;gap:28px}
  .sol-fig,.sol-fig img{min-height:430px}
  .sol-h3{font-size:30px}
}

@media (max-width:992px){
  .sol{padding-top:70px}
  .sol-tabbar{margin-top:28px}
  /* Mobil/tablet: yatay kayan şerit (sekmeler sabit genişlikte) */
  .sol-tabs{
    display:flex;
    justify-content:flex-start;
    gap:10px;
    width:max-content;
    min-width:100%;
    padding:12px 2px 20px;
  }
  .sol-tab{flex:0 0 168px;padding:6px 6px;gap:12px}
  .sol-tab-ic{width:44px;height:44px}
  .sol-tab-lb{font-size:12px}
  .sol-panels{margin-top:4px}
  .sol-panel.is-active{grid-template-columns:1fr;gap:26px}
  /* tek kolonda görseller dikey oranını korusun (aşırı kırpma olmasın) */
  .sol-fig{min-height:0;width:100%;max-width:340px;height:440px;margin:0 auto}
  .sol-fig img{min-height:0}
  .sol-copy{padding:6px 0}
  .sol-h3{font-size:28px}
  .sol-p{max-width:560px}
}

@media (max-width:576px){
  .sol{padding-top:56px}
  .sol-tabbar{margin-top:22px}
  .sol-tabs{gap:12px;padding:12px 2px 32px}
  .sol-tab{flex:0 0 180px;min-height:168px;padding:20px 16px;gap:14px}
  .sol-tab-ic{width:56px;height:56px}
  .sol-tab-lb{font-size:15px}
  .sol-panels{margin-top:2px}
  .sol-fig{max-width:290px;height:378px}
  .sol-h3{font-size:24px}
  .sol-eyebrow{font-size:13px}
  .sol-p{font-size:14.5px}
}