/* Solution hero logo frames — solid border + soft gradient halo */

.slf-outer {
  width: 8rem;
  height: 8rem;
  border-radius: 1rem;
  border: 4px solid;
  padding: 0.5rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 4px 10px -4px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.slf-inner {
  width: 100%;
  height: 100%;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Kong — blue */
.slf-kong {
  border-color: #003459;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.82) 38%,
    rgba(0, 52, 89, 0.14) 62%,
    rgba(0, 52, 89, 0.42) 100%
  );
}

.slf-kong .slf-inner {
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(255, 255, 255, 0.72) 55%,
    rgba(0, 52, 89, 0.06) 100%
  );
}

/* Wallarm — orange */
.slf-wallarm {
  border-color: #ff6b35;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.82) 38%,
    rgba(255, 107, 53, 0.14) 62%,
    rgba(255, 107, 53, 0.42) 100%
  );
}

.slf-wallarm .slf-inner {
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(255, 255, 255, 0.72) 55%,
    rgba(255, 107, 53, 0.06) 100%
  );
}

/* RedSeal — red */
.slf-redseal {
  border-color: #c41e3a;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.82) 38%,
    rgba(196, 30, 58, 0.14) 62%,
    rgba(196, 30, 58, 0.42) 100%
  );
}

.slf-redseal .slf-inner {
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(255, 255, 255, 0.72) 55%,
    rgba(196, 30, 58, 0.06) 100%
  );
}

/* ZeroFox — burgundy */
.slf-zerofox {
  border-color: #722f37;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.82) 38%,
    rgba(114, 47, 55, 0.14) 62%,
    rgba(114, 47, 55, 0.42) 100%
  );
}

.slf-zerofox .slf-inner {
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(255, 255, 255, 0.72) 55%,
    rgba(114, 47, 55, 0.06) 100%
  );
}

/* BeyondGuard — blue */
.slf-beyondguard {
  border-color: #1e40af;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.82) 38%,
    rgba(30, 64, 175, 0.14) 62%,
    rgba(30, 64, 175, 0.42) 100%
  );
}

.slf-beyondguard .slf-inner {
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(255, 255, 255, 0.72) 55%,
    rgba(30, 64, 175, 0.06) 100%
  );
}

/* Bottom CTA sections — same frame language as hero logos */

.slf-cta {
  border-radius: 1.5rem;
  border: 4px solid;
  padding: 2rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 4px 10px -4px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
  text-align: center;
}

@media (min-width: 768px) {
  .slf-cta {
    padding: 3rem;
  }
}

.slf-cta-kong {
  border-color: #003459;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.88) 42%,
    rgba(0, 52, 89, 0.12) 68%,
    rgba(0, 52, 89, 0.38) 100%
  );
}

.slf-cta-wallarm {
  border-color: #ff6b35;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.88) 42%,
    rgba(255, 107, 53, 0.12) 68%,
    rgba(255, 107, 53, 0.38) 100%
  );
}

.slf-cta-redseal {
  border-color: #c41e3a;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.88) 42%,
    rgba(196, 30, 58, 0.12) 68%,
    rgba(196, 30, 58, 0.38) 100%
  );
}

.slf-cta-zerofox {
  border-color: #722f37;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.88) 42%,
    rgba(114, 47, 55, 0.12) 68%,
    rgba(114, 47, 55, 0.38) 100%
  );
}

.slf-cta-beyondguard {
  border-color: #1e40af;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.88) 42%,
    rgba(30, 64, 175, 0.12) 68%,
    rgba(30, 64, 175, 0.38) 100%
  );
}

/* CTA typography — readable on all solution pages */
.slf-cta {
  color: #111827;
}

.slf-cta__title,
.slf-cta h2 {
  color: #111827 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.slf-cta__lead,
.slf-cta > p {
  color: #1f2937 !important;
  font-weight: 500;
  line-height: 1.75 !important;
}

.slf-cta .text-gray-700,
.slf-cta .text-black {
  color: #1f2937 !important;
}

.slf-cta .flex {
  position: relative;
  z-index: 1;
}

.slf-cta img {
  pointer-events: none;
}

/* ZeroFox butonları — hero + CTA (koyu bordo birincil, outline ikincil) */
body.desoft-solution-zerofox .text-center:has(.slf-zerofox) .flex > button:first-child,
.slf-cta-zerofox .flex > button:first-child,
.slf-cta-zerofox .slf-cta__demo-btn {
  background-color: #880015 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 2px solid #880015 !important;
  box-shadow: 0 4px 14px rgba(136, 0, 21, 0.35);
}

body.desoft-solution-zerofox .text-center:has(.slf-zerofox) .flex > button:first-child:hover,
.slf-cta-zerofox .flex > button:first-child:hover,
.slf-cta-zerofox .slf-cta__demo-btn:hover {
  background-color: #6d0012 !important;
  border-color: #6d0012 !important;
  color: #ffffff !important;
}

body.desoft-solution-zerofox .text-center:has(.slf-zerofox) .flex > a,
.slf-cta-zerofox .flex > a,
.slf-cta-zerofox .slf-cta__explore-btn {
  border: 2px solid #880015 !important;
  color: #880015 !important;
  background-color: #ffffff !important;
}

body.desoft-solution-zerofox .text-center:has(.slf-zerofox) .flex > a:hover,
.slf-cta-zerofox .flex > a:hover,
.slf-cta-zerofox .slf-cta__explore-btn:hover {
  background-color: rgba(136, 0, 21, 0.08) !important;
  border-color: #880015 !important;
  color: #880015 !important;
}

body.desoft-solution-zerofox .text-center:has(.slf-zerofox) .flex > a svg {
  color: #880015 !important;
}

@media (max-width: 767px) {
  .slf-outer {
    width: 6.5rem;
    height: 6.5rem;
    border-width: 3px;
    padding: 0.4rem;
  }

  .slf-cta {
    padding: 1.35rem 1rem;
    border-width: 3px;
    border-radius: 1.25rem;
  }

  .slf-cta__title,
  .slf-cta h2 {
    font-size: clamp(1.25rem, 5.5vw, 1.5rem) !important;
    line-height: 1.25 !important;
  }

  .slf-cta__lead,
  .slf-cta > p {
    font-size: 0.9375rem !important;
    line-height: 1.65 !important;
  }

  .slf-cta .flex.flex-col.sm\:flex-row {
    gap: 0.75rem;
  }

  .slf-cta .flex > button,
  .slf-cta .flex > a {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
}