/* SDC home — #section-our-services: compact orange tech cards (body#home) */
body:not(#home) #section-our-services.sdc-svc-skinned {
  /* no-op placeholder; skin always targets body#home */
}

body#home #section-our-services {
  --sdc-o: #ff7c00;
  --sdc-o2: #e05d00;
  --sdc-ink: #1f2937;
  position: relative;
  overflow: hidden;
  padding: 40px 0 32px !important;
  background-color: #fffaf6 !important;
  background-image:
    radial-gradient(ellipse 55% 70% at 8% 88%, rgba(255, 124, 0, 0.14) 0%, transparent 58%),
    radial-gradient(ellipse 45% 55% at 92% 12%, rgba(255, 124, 0, 0.09) 0%, transparent 55%),
    linear-gradient(168deg, #fffaf6 0%, #ffffff 46%, #fff3e8 100%) !important;
}

body#home #section-our-services > .container {
  position: relative;
  z-index: 1;
}

/* Soft top hairline accent */
body#home #section-our-services::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 124, 0, 0.45), transparent);
  pointer-events: none;
  z-index: 2;
}

/* Heading — tighter */
body#home #section-our-services #fon-widget-text_html_0pq5us {
  margin-bottom: 8px !important;
}
body#home #section-our-services #fon-widget-text_html_0pq5us .fon-widget-title {
  color: var(--sdc-ink) !important;
  font-size: clamp(1.35rem, 2.1vw, 1.75rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  margin-bottom: 8px !important;
}
body#home #section-our-services #fon-widget-text_html_0pq5us .lead {
  color: #64748b !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
}

/* Grid tighter */
body#home #section-our-services #row_j0ywpt {
  --bs-gutter-x: 0.75rem;
  --bs-gutter-y: 0.75rem;
  row-gap: 0.75rem !important;
}

/* Cards — compact tech tile */
body#home #section-our-services .fon-banner-widget {
  border-radius: 14px !important;
  overflow: hidden;
  border: 1px solid rgba(255, 124, 0, 0.22);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
  height: 100%;
}
body#home #section-our-services .fon-banner-widget:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 124, 0, 0.5);
  box-shadow:
    0 14px 32px rgba(224, 93, 0, 0.18),
    0 0 0 1px rgba(255, 124, 0, 0.14);
}
/* The card's real height (image + the now-always-open content panel) runs
   taller than the 168px photo. Lock it so the next rule can size the photo
   to match exactly — otherwise the photo (and its dark overlay) stops
   168px down while the content panel keeps going to the card's true
   bottom edge, leaving the button sitting on bare page background with
   white text on it: invisible. */
body#home #section-our-services .fon-banner-widget {
  min-height: 210px;
}

body#home #section-our-services .fon-banner-image {
  position: absolute;
  inset: 0;
  min-height: 0;
  max-height: none;
  overflow: hidden;
}
body#home #section-our-services .fon-banner-image > img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
  transition: transform 0.3s ease, filter 0.2s ease;
  /* AI-generated stock photos come in every hue (blue/purple/red neon) —
     pull them toward one warm duotone so the six cards read as one
     designed set instead of six random renders. */
  filter: saturate(0.55) brightness(0.85) sepia(0.35) hue-rotate(-12deg) contrast(1.05);
}
body#home #section-our-services .fon-banner-widget:hover .fon-banner-image > img {
  transform: scale(1.06);
  filter: saturate(0.7) brightness(0.9) sepia(0.22) hue-rotate(-10deg) contrast(1.05);
}

/* Warm orange-ink overlay (replace cold slate) */
body#home #section-our-services .fon-banner-overlay {
  background:
    linear-gradient(
      185deg,
      rgba(255, 124, 0, 0.22) 0%,
      rgba(42, 18, 6, 0.6) 42%,
      rgba(22, 10, 4, 0.9) 100%
    ) !important;
  transition: background 0.2s ease, opacity 0.2s ease;
  opacity: 1 !important;
}
body#home #section-our-services .fon-banner-widget:hover .fon-banner-overlay {
  background:
    linear-gradient(
      185deg,
      rgba(255, 124, 0, 0.32) 0%,
      rgba(56, 24, 8, 0.56) 40%,
      rgba(22, 10, 4, 0.86) 100%
    ) !important;
}

/* Icon pill — soft orange */
body#home #section-our-services .fon-banner-icon-link {
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  font-size: 14px !important;
  background: linear-gradient(145deg, #ff9a3d, var(--sdc-o2)) !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(224, 93, 0, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body#home #section-our-services .fon-banner-widget:hover .fon-banner-icon-link {
  transform: scale(1.06);
  box-shadow: 0 6px 16px rgba(224, 93, 0, 0.45);
}

/* Content compact — the theme's stock "style-3" banner hides everything but
   the tag+title until :hover (content is translateY'd down by "100% - 130px"
   and the description sits at opacity:0/visibility:hidden until hover). That
   made the description and the "Paketleri İncele" button invisible at rest —
   only their hover-only styling (e.g. the button's underline, which the base
   theme doesn't hide) showed, which read as missing/broken text. These are
   informational cards, not a hover-to-reveal teaser, so force the panel
   permanently open. */
body#home #section-our-services .fon-banner-content {
  padding: 12px 14px 14px !important;
  transform: translateY(0) !important;
}
body#home #section-our-services .fon-banner-content .fon-banner-description {
  opacity: 0.92 !important;
  visibility: visible !important;
}
body#home #section-our-services .fon-banner-tag {
  background: rgba(255, 124, 0, 0.95) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  padding: 3px 8px !important;
  margin-bottom: 6px !important;
  box-shadow: 0 2px 8px rgba(255, 124, 0, 0.25);
}
body#home #section-our-services .fon-banner-title {
  font-size: 1.02rem !important;
  line-height: 1.25 !important;
  margin: 0 0 4px !important;
  font-weight: 700 !important;
}
body#home #section-our-services .fon-banner-description {
  font-size: 12.5px !important;
  line-height: 1.4 !important;
  margin: 4px 0 8px !important;
  opacity: 0.9;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body#home #section-our-services .fon-banner-button {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-decoration: none !important;
  color: #fff !important;
  opacity: 0.92;
  transition: color 0.2s ease, opacity 0.2s ease, letter-spacing 0.2s ease;
}
body#home #section-our-services .fon-banner-button .fon-banner-button-text {
  border-bottom: 2px solid rgba(255, 124, 0, 0.75);
  padding-bottom: 1px;
  transition: border-color 0.2s ease;
}
body#home #section-our-services .fon-banner-widget:hover .fon-banner-button {
  color: #ffd7b0 !important;
  opacity: 1;
  letter-spacing: 0.08em;
}
body#home #section-our-services .fon-banner-widget:hover .fon-banner-button .fon-banner-button-text {
  border-color: #ff9a3d;
}

/* Left technician image — soft orange rim glow */
body#home #section-our-services #fon-widget-image_nf3axs img {
  border-radius: 18px;
  box-shadow:
    0 12px 36px rgba(15, 23, 42, 0.1),
    0 0 0 1px rgba(255, 124, 0, 0.12);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
body#home #section-our-services #fon-widget-image_nf3axs:hover img {
  transform: translateY(-3px);
  box-shadow:
    0 18px 40px rgba(224, 93, 0, 0.14),
    0 0 0 1px rgba(255, 124, 0, 0.22);
}

/* Audience chips under grid */
body#home #section-our-services .list-inline-item {
  margin: 4px 6px !important;
}
body#home #section-our-services .list-inline-item strong {
  color: var(--sdc-o2) !important;
  font-size: 0.85rem;
}
body#home #section-our-services .list-inline-item .fa-check,
body#home #section-our-services .list-inline-item .fa-solid.fa-check,
body#home #section-our-services .list-inline-item i.fa-check {
  color: var(--sdc-o) !important;
}

@media (max-width: 991.98px) {
  body#home #section-our-services {
    padding: 28px 0 22px !important;
  }
  body#home #section-our-services .fon-banner-widget {
    min-height: 190px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body#home #section-our-services .fon-banner-widget,
  body#home #section-our-services .fon-banner-widget *,
  body#home #section-our-services #fon-widget-image_nf3axs img {
    transition: none !important;
  }
}