/* =====================================================================
   HERO NABIZ PANELİ (includes/service-pulse.php) — hizmet + kategori hero'su
   2 kutu + etkileşim satırı, koyu zemin üstünde. Animasyonsuz.
   Oynat düğmesi rengi sayfadaki --solid ile gelir (lwGradientSolid).
   ===================================================================== */
.sp {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    color: #fff;
}
.sp__tile,
.sp__last {
    border-radius: 14px;
    background: #2a2740;
}
.sp__tile { display: grid; gap: 4px; padding: 14px 16px; min-width: 0; }
.sp__lbl { font-size: 12.5px; color: rgba(255, 255, 255, .7); }
.sp__val {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.sp__last {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    font-size: 14px;
}
.sp__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #3ddc97; }

/* Nasıl çalışır kutusu metniyle birlikte daha geniş; sahne yoksa Başlama süresi tam satır */
.sp:not(.sp--solo) { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.sp--solo .sp__tile { grid-column: 1 / -1; }

/* "Nasıl çalışır?" kutusu — sayfadaki sahneye kaydırıp 1. adımdan başlatır */
.sp__how {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    color: #fff;
    text-decoration: none;
    transition: background-color .15s ease;
}
.sp__how:hover { background: #353152; color: #fff; }
.sp__how:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sp__play {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--solid, var(--brand));
    color: #fff;
    font-size: 13px;
}
.sp__play i { margin-left: 2px; }   /* oynat üçgeni gözle ortalansın */
.is-light .sp__play { color: var(--ink-on-light); }   /* sarı/neon zeminde koyu üçgen */
.sp__how-txt { display: grid; gap: 2px; min-width: 0; line-height: 1.2; }
.sp__how-txt b { font-size: 14.5px; font-weight: 800; white-space: nowrap; }
.sp__how-txt small { font-size: 12px; color: rgba(255, 255, 255, .7); white-space: nowrap; }

@media (max-width: 980px) {
    .sp { max-width: 440px; margin-top: 18px; }
}
@media (max-width: 640px) {
    .sp { gap: 8px; margin-top: 16px; }
    .sp__tile { padding: 11px 13px; border-radius: 12px; }
    .sp__val { font-size: 21px; }
    .sp__how { gap: 10px; }
    .sp__play { width: 34px; height: 34px; font-size: 11px; }
    .sp__how-txt b { font-size: 14px; }
    .sp__how-txt small { font-size: 11.5px; }
    .sp__last { padding: 11px 13px; border-radius: 12px; font-size: 13px; }
}