/* =========================================================
   ST Solar — solution.css  (5 cozum sayfasinin ortak sablonu)
   Onekler: .sh- (hero)  ·  .sp- (sayfa bolumleri)
   Sayfa duzeni: hero → tanitim → iki satir → urun seridi.
   Header bu sayfalarda bastan laciverttir (has-solid-header);
   hero sabit header'in ARKASINDAN baslar (normal akista ilk section),
   ust padding header yuksekligini icerir (masaustu 76px / <=992px 64px).
   Sayfa banner'i (css/page.css) bu sayfalarda KULLANILMAZ.
   Yalnizca base.css token'lari kullanilir.
   ========================================================= */

/* =========================================================
   1) HERO  (.sh)
   Gorsel CSS'ten degil, isaretlemedeki <img> ile gelir;
   uzerine soldan saga acilan lacivert degrade orter.
   ========================================================= */
.sh{
  position:relative;
  overflow:hidden;
  background:var(--navy-900);
  color:var(--white);
}

.sh-media{
  position:absolute;
  inset:0;
}
.sh-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.sh-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(15,36,97,.88) 0%,rgba(15,36,97,.62) 55%,rgba(15,36,97,.35) 100%);
}

.sh-inner{
  position:relative;
  z-index:1;
  padding-top:calc(76px + 70px);   /* header 76 + 70 (yan boşluk .container'dan) */
  padding-bottom:70px;
}

.sh-title{
  font-size:56px;
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.4px;
  color:var(--white);
}

.sh-sub{
  margin-top:12px;
  max-width:720px;
  font-size:18px;
  font-weight:400;
  line-height:1.6;
  color:rgba(255,255,255,.82);
}

/* =========================================================
   2) TANITIM  (.sp-intro)
   Ortali baslik + genis paragraf.
   ========================================================= */
.sp-intro{
  padding:64px 0 10px;
  background:var(--white);
}

/* Ortak ortali baslik/paragraf kalibi (tanitim + urunler) */
.sp-h2{
  font-size:38px;
  font-weight:600;
  line-height:1.25;
  letter-spacing:-.3px;
  text-align:center;
  color:var(--navy-700);
}

.sp-lead{
  margin:14px auto 0;
  max-width:1000px;
  font-size:16px;
  font-weight:400;
  line-height:1.7;
  text-align:center;
  color:var(--muted);
}

/* =========================================================
   3) IKI SATIR  (.sp-rows)
   Gorsel + dikey ortali metin; 2. satirda gorsel sagda.
   Kare koseli gorseller (referans duzeni).
   ========================================================= */
.sp-rows{
  padding:44px 0 0;
  background:var(--white);
}

.sp-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:20px;
  align-items:stretch;
}
.sp-row + .sp-row{margin-top:72px}

.sp-fig{min-width:0}
.sp-fig img{
  display:block;
  width:100%;
  aspect-ratio:3 / 2;
  object-fit:cover;
  object-position:center;
  border-radius:0;
  background:var(--bg-soft);
}

/* 2. satir: gorsel saga alinir */
.sp-row--flip .sp-fig{order:2}

.sp-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
  padding:24px 40px;
}

.sp-h3{
  font-size:38px;
  font-weight:400;
  line-height:1.25;
  color:var(--navy-700);
}

.sp-p{
  margin:14px auto 0;
  max-width:560px;
  font-size:14px;
  font-weight:400;
  line-height:1.75;
  color:var(--muted);
}

/* =========================================================
   4) URUNLER  (.sp-products)
   Kaydirmali kart seridi: ok butonlari + noktalar (js/solution.js).
   ========================================================= */
.sp-products{
  padding:72px 0 90px;
  background:var(--white);
}

.sp-carousel{
  position:relative;
  margin-top:34px;
}

/* ---------- Serit ---------- */
.sp-track{
  display:flex;
  gap:20px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding:4px 2px 8px;
}
.sp-track::-webkit-scrollbar{display:none}

@media (prefers-reduced-motion:reduce){
  .sp-track{scroll-behavior:auto}
}

/* ---------- Kart ---------- */
.sp-card{
  flex:0 0 calc((100% - 40px) / 3);
  min-width:0;
  display:flex;
  flex-direction:column;
  scroll-snap-align:start;
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  background:var(--white);
}

.sp-card-media{
  aspect-ratio:427 / 299;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:var(--bg-soft);
}
.sp-card-media img{
  max-width:70%;
  max-height:70%;
  object-fit:contain;
}

/* Gorseli olmayan urunler icin yer tutucu blok */
.sp-card-ph{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 16px 30px;
  text-align:center;
  background:linear-gradient(135deg,var(--navy-800),var(--royal));
}
.sp-card-ph span{
  font-size:18px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:.5px;
  color:var(--white);
  overflow-wrap:anywhere;
}
.sp-card-ph::after{
  content:"SolaX";
  position:absolute;
  left:0;
  right:0;
  bottom:10px;
  font-size:11px;
  font-weight:500;
  line-height:1.4;
  letter-spacing:.6px;
  color:rgba(255,255,255,.7);
}

.sp-card-body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:16px 18px 18px;
}

.sp-card-h{
  font-size:15px;
  font-weight:600;
  line-height:1.4;
  color:var(--ink);
}

.sp-card-t{
  margin-top:4px;
  font-size:13px;
  font-weight:400;
  line-height:1.55;
  color:var(--muted);
}

.sp-card-link{
  margin-top:10px;
  font-size:13px;
  font-weight:700;
  line-height:1.4;
  color:var(--navy-700);
  transition:color .2s ease;
}
.sp-card-link:hover,
.sp-card-link:focus-visible{color:var(--orange)}

/* ---------- Ok butonlari ----------
   Dikey konum: seridin ortasi. Nokta satiri (22px bosluk + 8px nokta
   = 30px) karusel yuksekligine dahil oldugu icin cikarilir. */
.sp-arrow{
  position:absolute;
  top:calc((100% - 30px) / 2);
  transform:translateY(-50%);
  z-index:2;
  width:40px;
  height:40px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--white);
  color:var(--navy-700);
  transition:border-color .2s ease,color .2s ease,opacity .2s ease;
}
.sp-arrow svg{
  display:block;
  width:18px;
  height:18px;
}
.sp-arrow--prev{left:-20px}
.sp-arrow--next{right:-20px}

.sp-arrow:hover:not(:disabled){border-color:var(--navy-700)}
.sp-arrow:focus-visible{outline:2px solid var(--royal);outline-offset:3px}
.sp-arrow:disabled{opacity:.35;cursor:default}
.sp-arrow[hidden]{display:none}

/* ---------- Noktalar ----------
   Yukseklik sabittir (8px); ok butonlarinin dikey hizasi buna dayanir. */
.sp-dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:8px;
  margin-top:22px;
}
.sp-dots[hidden]{display:none}

.sp-dot{
  width:8px;
  height:8px;
  padding:0;
  border-radius:50%;
  background:var(--line);
  transition:background .25s ease;
}
.sp-dot:hover{background:var(--muted-2)}
.sp-dot:focus-visible{outline:2px solid var(--royal);outline-offset:3px}
.sp-dot.is-active{background:var(--navy-700)}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:992px){
  /* Hero — header <=992px'te 64px */
  .sh-inner{padding-top:calc(64px + 48px);padding-bottom:48px}
  .sh-title{font-size:40px}

  .sp-h2{font-size:30px}

  /* Iki satir → tek sutun, gorsel her zaman ustte */
  .sp-row{grid-template-columns:minmax(0,1fr)}
  .sp-row--flip .sp-fig{order:0}
  .sp-row + .sp-row{margin-top:48px}
  .sp-copy{padding:20px 0}
  .sp-h3{font-size:28px}

  /* Dokunmatikte parmakla kaydirma: oklar gizlenir, noktalar kalir */
  .sp-arrow{display:none}
  .sp-card{flex:0 0 calc((100% - 20px) / 2)}
}

@media (max-width:576px){
  .sh-title{font-size:32px}
  .sh-sub{font-size:16px}

  .sp-intro{padding:44px 0 0}
  .sp-h2{font-size:26px}

  .sp-h3{font-size:24px}

  .sp-products{padding:52px 0 60px}
  .sp-card{flex:0 0 86%}
}