/* ==========================================================================
   Sanal Ofis Paketi — shine-border fiyat kartı.
   Kenardaki ışık şeridi üç katmandan: dış kap 2px iç boşluk bırakıyor,
   .sopak__glow içindeki konik degrade dönüyor, .sopak__card'ın zemini ortayı
   kapatıyor. Geriye yalnızca 2px'lik dönen kenar kalıyor.
   ========================================================================== */

/* Zemin, ana sayfadaki "Güven & Altyapı" bölümüyle aynı kurgu: fotoğrafın
   üstünde mor degrade perde, sağ üstte soluk dekoratif dalga. Fotoğraf olarak
   ofis kuleleri (Ankara Next Level) kullanılıyor. */
.sopak {
  position: relative; overflow: hidden;
  background-image:
    linear-gradient(165deg, rgba(46, 37, 156, .82) 0%, rgba(108, 99, 255, .82) 55%, rgba(22, 28, 142, .88) 100%),
    url('../../public/images/sanal-ofis-plazalar.webp');
  background-size: cover;
  background-position: center;
}

.sopak__wave { position: absolute; right: -220px; top: -80px; opacity: .06; pointer-events: none; }

.sopak .container { position: relative; }

.sopak__head { text-align: center; max-width: 720px; margin: 0 auto; }

.sopak__eyebrow {
  font-size: 12px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pink-soft);
}

.sopak__title {
  font-weight: 800; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.12;
  letter-spacing: -0.02em; color: var(--white); margin: 14px 0 0;
}

/* --- ışık şeridi --------------------------------------------------------- */

.sopak__shine {
  position: relative; isolation: isolate;
  width: 100%; max-width: 440px; margin: 32px auto 0;
  padding: 2px; border-radius: var(--r-lg);
}

.sopak__glow {
  position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; overflow: hidden;
}

.sopak__glow::before {
  content: ""; position: absolute; inset: -100%;
  background: conic-gradient(from 0deg,
    #9A93FF 0%, #FFFFFF 20%, #6C63FF 45%, #C9C5FF 70%, #9A93FF 100%);
  filter: blur(4px);
  animation: sopak-donus 4s linear infinite;
}

@keyframes sopak-donus { to { transform: rotate(1turn); } }

/* --- kart ---------------------------------------------------------------- */

.sopak__card {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  padding: 32px; border-radius: calc(var(--r-lg) - 2px);
  background: var(--white);
}

.sopak__name {
  margin: 0; font-size: 24px; font-weight: 800;
  letter-spacing: -0.02em; color: var(--ink);
}

.sopak__desc {
  margin: 12px 0 0; font-size: 15px; line-height: 1.55; color: var(--muted);
}

.sopak__priceRow { display: flex; align-items: baseline; gap: 6px; margin-top: 28px; }

.sopak__price {
  font-size: 46px; font-weight: 800; line-height: 1;
  letter-spacing: -0.02em; color: var(--ink);
}

.sopak__per { font-size: 16px; color: var(--muted-2); }

.sopak__vat { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted-2); }

.sopak__sep { height: 1px; background: var(--line-2); margin: 28px 0; }

.sopak__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }

.sopak__list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 15px; line-height: 1.45; color: var(--muted);
}

.sopak__list svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--indigo); }

/* Buton, ana sayfa hero'sundaki "Sizi Arayalım" düğmesiyle aynı: beyaz zemin,
   lacivert yazı, 1.5px açık kenarlık, üzerine gelince indigo (hero.css
   .hero__cta / .hero__cta--ghost). Kart düzeni gereği tam genişlikte. */
.sopak__cta {
  margin-top: 32px; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: var(--r-sm);
  font-family: inherit; font-size: 15px; font-weight: 700;
  color: var(--ink); background: var(--white);
  border: 1.5px solid var(--line-2);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.sopak__cta:hover {
  background: var(--indigo); color: var(--white); border-color: var(--indigo);
}

.sopak__cta-icon { width: 16px; height: 16px; flex: none; }

/* Bölüm boyu: paylaşılan .section-pad 110px veriyor, alt not kalkınca
   bu bölüm için kısaltıldı. */
.sopak .section-pad { padding-top: 76px; padding-bottom: 76px; }

@media (max-width: 900px) {
  .sopak .section-pad { padding-top: 52px; padding-bottom: 52px; }
}

@media (max-width: 560px) {
  .sopak__card { padding: 26px 22px; }
  .sopak__price { font-size: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .sopak__glow::before { animation: none; }
}