/* Tema tabanı (token'lar + tipografi). `global.css` YAYINA GİRMİYOR —
   bkz. theme-base.css başlığı. Bölüm CSS'i giriyor, o yüzden buradan. */
/* theme-base: global.css (yayinda listener.css) uzerinden gelir — bkz. global.css basligi */

/* ===== SolarStory — gün'den geceye stilize solar sahne =====
   MÜŞTERİ KARARI: ürün fotoğrafı YOK, sahne CSS çizimi. Koni ve havuz
   geometrisi prototipten birebir — koni merkezi lamba kafası merkezidir,
   göz kararı oynama. Çizim ölçüleri bilerek px (bu bir illüstrasyon,
   arayüz boşluğu değil); ölçekleme media query'lerde transform ile. */
.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar {
  width: 100%;
  position: relative;
  /* KAYDIRMA SAHASI: sahne sticky, kullanıcı 260vh boyunca kaydırırken
     gün geceye döner (--solar-p 0-1, TSX yazar); son üçte bir final sahnesi. Geri kaydırınca geri
     sarar — animasyon her görünüşte yeniden oynar. */
  height: 320vh;
  /* Bölüm kendi zeminini çizer — kod bileşenleri `body`/sayfa zeminini
     boyayamaz, CLI o kuralları düşürür (bkz. global.css başlığı). */
  background: var(--kombos-bg);
  color: var(--kombos-gray-900);
}

.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__scene {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 40rem;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Masaüstü: panel dikeyde ortalanır ama üstte yapışkan duyuru + menü
   yüksekliğini aşan pay GARANTİ — panel uzunken başlık menü altında
   kalıyordu (canlıda görüldü). Flex ortalama içerik kutusunda çalıştığı
   için padding kadar üst boşluk her zaman korunur. */
@media (min-width: 861px) {
  .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__scene {
    box-sizing: border-box;
    padding-top: calc(var(--kombos-announce-h, 0px) + 6.5rem);
    padding-bottom: 2rem;
  }
}

/* --- Gökyüzü katmanları --- */
.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__sky {
  position: absolute;
  inset: 0;
}

.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__sky--day {
  background: linear-gradient(180deg, #7fb7de 0%, #a8cbe0 45%, #c9d6d3 100%);
}

.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__sky--night {
  background: linear-gradient(180deg, #05070c 0%, #0b0e14 60%, #10141d 100%);
  /* p 0.05-0.40 aralığında kararır; taşan değerleri tarayıcı kırpar */
  opacity: calc((var(--solar-p, 0) - 0.04) / 0.28);
}

/* Güneş — gece batar */
.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__sun {
  position: absolute;
  left: 14%;
  top: 16%;
  width: 110px;
  height: 110px;
  border-radius: 999px;
  background: radial-gradient(
    circle,
    #fff3d6 20%,
    #ffd98a 60%,
    rgba(255, 217, 138, 0) 72%
  );
  box-shadow: 0 0 90px 40px rgba(255, 220, 150, 0.55);
  transform: translateY(calc(var(--solar-p, 0) * 90vh));
  opacity: calc(1 - (var(--solar-p, 0) - 0.18) / 0.15);
}

/* Yıldızlar — gece belirir */
.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__stars {
  position: absolute;
  inset: 0;
  opacity: calc((var(--solar-p, 0) - 0.26) / 0.22);
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 12%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 28%, #dfe9ff 50%, transparent 51%),
    radial-gradient(1px 1px at 61% 15%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 74% 24%, #dfe9ff 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 10%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 93% 32%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 35% 40%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 55% 45%, #dfe9ff 50%, transparent 51%);
}

/* Zemin */
.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  background: linear-gradient(180deg, rgba(8, 11, 16, 0) 0%, #080b10 55%);
}

/* Sol taraf metin okunurluğu için perde */
.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    90deg,
    rgba(5, 7, 12, 0.55) 0%,
    rgba(5, 7, 12, 0.15) 50%,
    transparent 70%
  );
}

/* --- Armatür silüetleri --- */
.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__fixtures {
  position: absolute;
  right: 4%;
  bottom: 14%;
  width: min(46vw, 660px);
  height: 58vh;
  min-height: 380px;
  z-index: 2;
  pointer-events: none;
}

.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__sf {
  position: absolute;
}

.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__label {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--kombos-font-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--kombos-gray-500);
  white-space: nowrap;
}

/* Solar panel parçası — hepsinde ortak doku */
.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__panel {
  position: absolute;
  background: linear-gradient(135deg, #2a3a55, #141e2e);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 2px;
}

/* Parıltılar: hepsi kapalı başlar, gece SIRAYLA yanar. Yalnız opacity
   anime edilir; gecikmeler ateşleme sırasını verir. */
.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__glow {
  opacity: 0;
}

.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__glow {
  transition: opacity 0.5s ease;
}

.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s-pole .kombos-solar__pole-headglow, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s-pole .kombos-solar__pole-cone, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s-pole .kombos-solar__pole-pool {
  opacity: 1;
}

.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s-bollard .kombos-solar__bollard-slitglow, .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s-bollard .kombos-solar__bollard-pool {
  opacity: 1;
}

.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s-spike .kombos-solar__spike-upcone {
  opacity: 1;
}

/* 1) Solar sokak direği */
.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__pole {
  right: 3%;
  bottom: 0;
  width: 14px;
  height: 80%;
}

.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__pole-mast {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 9px;
  height: 100%;
  background: linear-gradient(90deg, #151a23, #2c3340 50%, #10141b);
  border-radius: 5px 5px 0 0;
}

.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__pole-arm {
  position: absolute;
  top: 0;
  right: 4px;
  width: 78px;
  height: 8px;
  border-radius: 6px;
  background: linear-gradient(180deg, #2c3340, #151a23);
}

.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__pole-head {
  position: absolute;
  top: 3px;
  right: 54px;
  width: 48px;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(180deg, #333b4a, #171c26);
}

.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__pole-panel {
  top: -6px;
  right: 56px;
  width: 42px;
  height: 6px;
  transform: skewX(-16deg);
}

.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__pole-headglow {
  position: absolute;
  top: 12px;
  right: 60px;
  width: 36px;
  height: 4px;
  border-radius: 3px;
  background: #ffe1ac;
  box-shadow: 0 0 16px 5px rgba(255, 214, 150, 0.85);
}

/* Koni ve havuz lamba kafasının tam altında — right hesabı prototipten */
.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__pole-cone {
  position: absolute;
  top: 15px;
  right: -37px;
  width: 230px;
  height: 46vh;
  min-height: 250px;
  background: radial-gradient(
    ellipse 46% 58% at 50% 0%,
    rgba(255, 199, 120, 0.34) 0%,
    rgba(255, 199, 120, 0.12) 45%,
    transparent 72%
  );
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
}

.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__pole-pool {
  position: absolute;
  bottom: -6vh;
  right: -72px;
  width: 300px;
  height: 96px;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 199, 120, 0.38) 0%,
    transparent 66%
  );
  mix-blend-mode: screen;
}

/* 2) Bollard */
.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__bollard {
  right: 58%;
  bottom: 0;
  width: 30px;
  height: 24%;
}

.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__bollard-body {
  position: absolute;
  inset: 0;
  border-radius: 9px 9px 3px 3px;
  background: linear-gradient(90deg, #141922, #2a303c 50%, #0f141c);
}

.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__bollard-panel {
  top: -5px;
  left: 2px;
  width: 26px;
  height: 5px;
}

.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__bollard-slit {
  position: absolute;
  left: 5px;
  right: 5px;
  top: 15%;
  height: 26%;
  border-radius: 4px;
  background: #0b0f16;
}

.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__bollard-slitglow {
  position: absolute;
  left: 5px;
  right: 5px;
  top: 15%;
  height: 26%;
  border-radius: 4px;
  background: #ffdfa8;
  box-shadow: 0 0 20px 7px rgba(255, 203, 130, 0.6);
}

.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__bollard-pool {
  position: absolute;
  bottom: -26px;
  left: 50%;
  transform: translateX(-50%);
  width: 190px;
  height: 56px;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 199, 120, 0.34) 0%,
    transparent 66%
  );
  mix-blend-mode: screen;
}

/* 3) Çim saplama spot — yukarı vurur; koni çanağın tam üstünden başlar */
.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__spike {
  right: 31%;
  bottom: 0;
  width: 44px;
  height: 92px;
}

.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__spike-stem {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 46px;
  background: linear-gradient(90deg, #10141b, #252c38);
}

.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__spike-cup {
  position: absolute;
  bottom: 42px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 15px;
  border-radius: 50% 50% 4px 4px;
  background: linear-gradient(180deg, #333b4a, #171c26);
}

.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__spike-panel {
  bottom: 56px;
  left: 50%;
  width: 22px;
  height: 4px;
  transform: translateX(-50%);
}

.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__spike-upcone {
  position: absolute;
  bottom: 57px;
  left: 50%;
  transform: translateX(-50%);
  width: 130px;
  height: 200px;
  background: radial-gradient(
    ellipse 52% 62% at 50% 100%,
    rgba(255, 210, 140, 0.3) 0%,
    rgba(255, 210, 140, 0.1) 45%,
    transparent 72%
  );
  clip-path: polygon(0 0, 100% 0, 61% 100%, 39% 100%);
}

/* 4) Peri LED zinciri — .kombos-icon 1em ölçüsünü ezer */
/* Çift sınıf: svg.kombos-icon (etiket+sınıf) height 1em kuralını ezmek
   için — tek sınıf yenik düşüyordu (DevTools'ta görüldü) */
.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__fairy.kombos-solar__fairy {
  position: absolute;
  left: -2%;
  top: 4%;
  /* Yükseklik sabit 8em (müşteri denedi, beğendi); genişlik orandan türer.
     aspect-ratio şart — SVG'nin içsel oranı yok, olmadan yükseklik çöker
     (canlıda 16px ölçüldü; viewBox 400x90). */
  height: 8em;
  width: auto;
  aspect-ratio: 400 / 90;
  overflow: visible;
}

.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__fairy circle {
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(255, 217, 160, 0.9));
}

.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__fairy circle {
  transition: opacity 0.45s ease;
}

.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s-fairy .kombos-solar__fairy circle {
  opacity: 1;
}

/* Noktalar zincir boyunca sırayla yanar */
.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s-fairy .kombos-solar__fairy circle:nth-of-type(1) { transition-delay: 0.00s; }
.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s-fairy .kombos-solar__fairy circle:nth-of-type(2) { transition-delay: 0.06s; }
.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s-fairy .kombos-solar__fairy circle:nth-of-type(3) { transition-delay: 0.12s; }
.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s-fairy .kombos-solar__fairy circle:nth-of-type(4) { transition-delay: 0.18s; }
.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s-fairy .kombos-solar__fairy circle:nth-of-type(5) { transition-delay: 0.24s; }
.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s-fairy .kombos-solar__fairy circle:nth-of-type(6) { transition-delay: 0.30s; }
.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s-fairy .kombos-solar__fairy circle:nth-of-type(7) { transition-delay: 0.36s; }
.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s-fairy .kombos-solar__fairy circle:nth-of-type(8) { transition-delay: 0.42s; }
.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s-fairy .kombos-solar__fairy circle:nth-of-type(9) { transition-delay: 0.48s; }

/* Zincir 8em'e büyüdü — etiket yayın ALTINA iner */
.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__label--fairy {
  left: 30%;
  top: calc(4% + 8em + 14px);
  transform: none;
}

/* --- Sol metin paneli --- */
.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__copy {
  position: relative;
  z-index: 3;
  max-width: 29.375rem;
  margin-left: max(4vw, calc((100vw - 77.5rem) / 2));
  background: rgba(5, 7, 12, 0.55);
  padding: 1.625rem;
  border-radius: 18px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Adımlar kaydırmayla TEK TEK belirir: aktif adım parlak, öncekiler
   soluk kalır (kaynak sırası önemli: soluklaştırma kuralları aktif
   kurallardan SONRA gelir ki üst sahnede kazansın) */
.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__step {
  margin-bottom: 2.125rem;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s1 .kombos-solar__step:nth-child(1) {
  opacity: 1;
  transform: none;
}

.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s2 .kombos-solar__step:nth-child(1) {
  opacity: 0.35;
}

.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s2 .kombos-solar__step:nth-child(2) {
  opacity: 1;
  transform: none;
}

.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s3 .kombos-solar__step:nth-child(2) {
  opacity: 0.35;
}

.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s3 .kombos-solar__step:nth-child(3) {
  opacity: 1;
  transform: none;
}

.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__step-label {
  display: block;
  margin-bottom: 0.625rem;
  font-family: var(--kombos-font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kombos-accent-2);
}

.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__step-title {
  margin: 0 0 0.5rem;
  font-family: var(--kombos-font-head);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--kombos-gray-900);
}

/* Adım açıklamaları yalnız masaüstünde — mobilde etiket + başlık yeter
   (müşteri istedi; dar ekranda panel sahneyi kapatıyordu) */
.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__step-text {
  display: none;
  margin: 0;
  color: var(--kombos-gray-500);
  line-height: 1.6;
}

@media (min-width: 1024px) {
  .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__step-text {
    display: block;
  }
}

.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__cta-wrap {
  margin-top: 0.625rem;
  opacity: 0;
  transition: opacity 0.5s ease 0.15s;
}

.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar--s3 .kombos-solar__cta-wrap {
  opacity: 1;
}

/* CTA — prototip .btn-amber */
.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.75rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  background: var(--kombos-accent);
  color: var(--kombos-on-accent);
  box-shadow: 0 0 24px rgba(255, 180, 84, 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease,
    background-color 0.25s ease;
}

.cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__cta:hover {
  background: var(--kombos-accent-hover);
  transform: translateY(-2px);
  box-shadow:
    0 6px 20px rgba(255, 180, 84, 0.28),
    0 0 44px rgba(255, 180, 84, 0.35);
}

/* ===== Ölçekleme ===== */
@media (max-width: 1100px) {
  .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__fixtures {
    right: 2%;
    transform: scale(0.85);
    transform-origin: bottom right;
  }
}

@media (max-width: 860px) {
  /* DİKEY AYRIM: panel sahnenin ÜSTÜNE yaslanır ve kompaktlaşır,
     armatürler alt bölgede kendi alanında kalır — panel çizimleri
     örtüyordu (canlıda görüldü) */
  .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__scene {
    align-items: flex-start;
  }

  .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__fixtures {
    right: 0;
    bottom: 4%;
    width: 88vw;
    /* Daha uzun kutu = zincir (kutunun tepesi) panele yaklaşır, buton ile
       direk arasındaki boş bant kapanır (müşteri istedi) */
    height: 46vh;
    min-height: 300px;
    transform: scale(0.75);
    transform-origin: bottom right;
  }

  /* Zincir mobilde daha SOLDA ve bir kademe küçük — sağdan taşıyordu */
  .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__fairy.kombos-solar__fairy {
    left: -8em;
    height: 6em;
  }

  .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__label--fairy {
    top: calc(4% + 6em + 12px);
    left: 3em;
  }

  .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__label {
    font-size: 9px;
  }

  .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__copy {
    margin-inline: 4vw;
    max-width: none;
    /* Sticky navbar + duyuru barının altından başlar */
    margin-top: 6.5rem;
    padding: 1.125rem 1.25rem;
  }

  .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__step {
    margin-bottom: 1.125rem;
  }

  .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__step-title {
    font-size: 1.25rem;
  }

  .cc_MSI3fYnLer_cDZ2E4sRrC .kombos-solar__step-label {
    margin-bottom: 0.375rem;
  }
}