/* ==========================================================================
   HİZMET AÇILIŞ SAYFALARI (mdosc/hizmet-sayfa.php)
   Başlık + hizmete özel animasyon, neden, özellikler, adımlar, SSS, ilgili hizmetler, CTA.
   Animasyonlar yalnız CSS; hareket azaltıldığında (ve "Animasyonları durdur" ile) son hâlinde durur.
   ========================================================================== */

/* ---------- Başlık görseli ---------- */
.sp-hero__visual { display: grid; place-items: center; min-height: 360px; }

.spx {
  position: relative;
  width: min(100%, 420px);
  --spx-loop: 7s;
}
.spx-card {
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.spx-card__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.spx-card__bar .i { width: 18px; height: 18px; color: var(--navy-700); }
.spx-card__bar b { flex: 1; font-weight: 700; }

.spx-badge {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--red-100);
  color: var(--red-700);
  font-size: 12px;
  font-weight: 700;
}
.spx-badge--ok { background: var(--green-100); color: var(--green-700); }

.spx-row,
.spx-check {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--surface-2);
  font-size: 13px;
}
.spx-row > span:nth-child(2),
.spx-check > span:nth-child(2) { flex: 1; display: grid; gap: 2px; min-width: 0; }
.spx-row b,
.spx-check b { font-weight: 700; color: var(--ink); }
.spx-row small,
.spx-check small { color: var(--muted); font-size: 12px; }
.spx-row em,
.spx-check em {
  flex: none;
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: var(--red-700);
}
.spx-row em.is-ok { color: var(--green-700); }

.spx-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--navy-50);
  color: var(--navy-800);
}
.spx-ico .i { width: 17px; height: 17px; }
.spx-ico--red { background: var(--red-100); color: var(--red-600); }

/* --- e-Tebligat: yeni tebligat düşer, rozet atar, bildirim kayar --- */
.spx--tebligat .spx-row--new {
  background: var(--red-50);
  box-shadow: inset 3px 0 0 var(--red-600);
  animation: spx-drop var(--spx-loop) var(--ease-out) infinite;
}
.spx--tebligat .spx-badge { animation: spx-pop var(--spx-loop) var(--ease-out) infinite; }
.spx-toast {
  position: absolute;
  right: -18px;
  bottom: -44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--navy-900);
  color: #fff;
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  animation: spx-toast var(--spx-loop) var(--ease-out) infinite;
}
.spx-toast .i { width: 18px; height: 18px; color: #25d366; }
.spx-toast span { display: grid; gap: 2px; }
.spx-toast small { color: rgb(255 255 255 / .7); font-size: 12px; }

@keyframes spx-drop {
  0%, 8% { opacity: 0; transform: translateY(-18px); }
  16%, 100% { opacity: 1; transform: none; }
}
@keyframes spx-pop {
  0%, 14% { transform: scale(0); }
  20% { transform: scale(1.2); }
  26%, 100% { transform: scale(1); }
}
@keyframes spx-toast {
  0%, 22% { opacity: 0; transform: translateY(14px); }
  30%, 82% { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: translateY(14px); }
}

/* --- Beyanname: kontrol listesi sırayla işaretlenir, ilerleme dolar --- */
.spx-box {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border: 2px solid var(--line-2);
  border-radius: 7px;
  color: #fff;
  animation: spx-box var(--spx-loop) var(--ease-out) infinite;
  animation-delay: calc(var(--n) * .6s); animation-fill-mode: backwards;
}
.spx-box .i { width: 14px; height: 14px; }
.spx-check em { color: var(--green-700); animation: spx-fade var(--spx-loop) var(--ease-out) infinite; animation-delay: calc(var(--n) * .6s); animation-fill-mode: backwards; }
.spx-progress { height: 8px; margin-top: 4px; border-radius: 999px; background: var(--navy-50); overflow: hidden; }
.spx-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green-500), var(--green-600)); transform-origin: left; animation: spx-fill var(--spx-loop) var(--ease-in-out) infinite; }
.spx-count i::before { content: "4 / 4"; font-style: normal; font-size: 12px; font-weight: 700; color: var(--green-700); }

@keyframes spx-box {
  0%, 10% { border-color: var(--line-2); background: transparent; }
  16%, 90% { border-color: var(--green-600); background: var(--green-600); }
  100% { border-color: var(--line-2); background: transparent; }
}
@keyframes spx-fade {
  0%, 10% { opacity: 0; }
  16%, 90% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes spx-fill {
  0% { transform: scaleX(0); }
  50%, 90% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}

/* --- SGK: durum rozetleri "Onay bekliyor"dan "Onaylandı"ya döner --- */
.spx-pill {
  position: relative;
  display: grid;
  min-width: 98px;
  justify-items: end;
}
.spx-pill span {
  grid-area: 1 / 1;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--amber-100);
  color: var(--amber-600);
  animation: spx-out var(--spx-loop) var(--ease-out) infinite;
  animation-delay: calc(var(--n) * .9s); animation-fill-mode: backwards;
}
.spx-pill span + span {
  background: var(--green-100);
  color: var(--green-700);
  animation-name: spx-in;
}
@keyframes spx-out { 0%, 20% { opacity: 1; transform: none; } 28%, 92% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 1; transform: none; } }
@keyframes spx-in  { 0%, 20% { opacity: 0; transform: translateY(6px); } 28%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(6px); } }

/* --- e-Defter: aylar sırayla "gönderildi" olur --- */
.spx-months { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.spx-months span {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 10px 4px;
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  animation: spx-month var(--spx-loop) var(--ease-out) infinite;
  animation-delay: calc(var(--n) * .25s); animation-fill-mode: backwards;
}
.spx-months .i { width: 16px; height: 16px; opacity: 0; animation: spx-fade var(--spx-loop) var(--ease-out) infinite; animation-delay: inherit; animation-fill-mode: backwards; }
.spx-months span.is-later { animation: none; }
.spx-months span.is-later .i { animation: none; }
.spx-legend { display: flex; gap: 16px; font-size: 12px; color: var(--muted); }
.spx-legend span { display: inline-flex; align-items: center; gap: 6px; }
.spx-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--line-2); }
.spx-legend i.is-ok { background: var(--green-600); }
@keyframes spx-month {
  0%, 8% { background: var(--surface-2); color: var(--muted); }
  14%, 90% { background: var(--green-100); color: var(--green-700); }
  100% { background: var(--surface-2); color: var(--muted); }
}

/* --- Ödeme: kalemler sırayla seçilir → toplam belirir → WhatsApp'a basılır → liste gönderilir --- */
.spx--odeme { --spx-loop: 9s; }
.spx--odeme .spx-card { gap: 8px; }
.spx-badge--nav { background: var(--navy-50); color: var(--navy-800); }
.spx--odeme .spx-check em { color: var(--ink); font-variant-numeric: tabular-nums; animation: none; }
.spx--odeme .spx-box { animation-name: spx-o-box; animation-delay: calc(var(--n) * .45s); animation-fill-mode: backwards; }
.spx-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 12px;
  border-top: 1px dashed var(--line-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  animation: spx-o-total var(--spx-loop) var(--ease-out) infinite;
}
.spx-total b { font-size: 18px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.spx-kanal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.spx-kanal i {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}
.spx-kanal .i { width: 14px; height: 14px; }
.spx-kanal .is-wp { animation: spx-o-wp var(--spx-loop) var(--ease-out) infinite; }
.spx--odeme .spx-toast { animation: spx-o-toast var(--spx-loop) var(--ease-out) infinite; }
@keyframes spx-o-box {
  0%, 6% { border-color: var(--line-2); background: transparent; }
  10%, 90% { border-color: var(--green-600); background: var(--green-600); }
  96%, 100% { border-color: var(--line-2); background: transparent; }
}
@keyframes spx-o-total {
  0%, 28% { opacity: .25; }
  34%, 90% { opacity: 1; }
  96%, 100% { opacity: .25; }
}
@keyframes spx-o-wp {
  0%, 44% { background: var(--surface); border-color: var(--line); color: var(--ink-2); transform: none; }
  47% { transform: scale(.92); background: #1fa855; border-color: #1fa855; color: #fff; }
  52%, 88% { transform: none; background: #e3f6ea; border-color: #1fa855; color: #1a7f43; }
  94%, 100% { background: var(--surface); border-color: var(--line); color: var(--ink-2); }
}
@keyframes spx-o-toast {
  0%, 50% { opacity: 0; transform: translateY(14px); }
  56%, 86% { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: translateY(14px); }
}

/* --- Personel: mesai çubukları dolar → yeni iş etkinliği düşer → ofis içi mesaj gelir --- */
.spx--personel { --spx-loop: 9s; }
.spx-mesai {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 90px auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 12px;
}
.spx-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--navy-900);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.spx-mesai:nth-of-type(odd) .spx-avatar { background: var(--red-600); }
.spx-mesai__ad { display: grid; gap: 1px; min-width: 0; }
.spx-mesai__ad b { font-weight: 700; color: var(--ink); }
.spx-mesai__ad small { color: var(--muted); font-size: 11px; }
.spx-mesai__bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.spx-mesai__bar i {
  display: block;
  width: calc(var(--w) * 100%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--navy-700), var(--green-500));
  transform-origin: left;
  animation: spx-p-bar var(--spx-loop) var(--ease-in-out) infinite;
  animation-delay: calc(var(--n) * .25s); animation-fill-mode: backwards;
}
.spx-mesai em { font-style: normal; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.spx-etkinlik {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px dashed var(--green-600);
  border-radius: 10px;
  background: var(--green-100);
  font-size: 12px;
  animation: spx-p-etk var(--spx-loop) var(--ease-out) infinite;
}
.spx-etkinlik .i { flex: none; width: 16px; height: 16px; color: var(--green-700); }
.spx-etkinlik span { display: grid; gap: 1px; }
.spx-etkinlik b { color: var(--green-700); font-weight: 700; }
.spx-etkinlik small { color: var(--ink-2); font-size: 11px; }
.spx--personel .spx-toast { max-width: 270px; animation: spx-p-msj var(--spx-loop) var(--ease-out) infinite; }
.spx-toast--mesaj .i { color: #fff; }
@keyframes spx-p-bar {
  0%, 4% { transform: scaleX(0); }
  30%, 92% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}
@keyframes spx-p-etk {
  0%, 34% { opacity: 0; transform: translateY(-8px); }
  40%, 90% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(-8px); }
}
@keyframes spx-p-msj {
  0%, 54% { opacity: 0; transform: translateY(14px); }
  60%, 88% { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: translateY(14px); }
}

/* --- Raporlar: POS + TÖDEB dağılımı dolar → tutarlar belirir → karşıt inceleme süresi uyarısı --- */
.spx--rapor { --spx-loop: 9s; }
.spx-pos__toplam { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 2px; }
.spx-pos__toplam small { font-size: 12px; color: var(--muted); }
.spx-pos__toplam b { font-size: 22px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.spx-pos__bar { display: flex; gap: 3px; height: 12px; border-radius: 999px; background: var(--line); overflow: hidden; }
.spx-pos__bar i {
  flex: 0 0 var(--w);
  transform-origin: left;
  animation: spx-r-bar var(--spx-loop) var(--ease-out) infinite;
  animation-delay: calc(var(--n) * .5s); animation-fill-mode: backwards;
}
.spx-pos__bar i:nth-child(1), .spx-pos__satir--0 i { background: var(--navy-700); }
.spx-pos__bar i:nth-child(2), .spx-pos__satir--1 i { background: var(--green-500); }
.spx-pos__bar i:nth-child(3), .spx-pos__satir--2 i { background: var(--amber-500); }
.spx-pos__satir {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  font-size: 13px;
  color: var(--ink-2);
  animation: spx-r-satir var(--spx-loop) var(--ease-out) infinite;
  animation-delay: calc(var(--n) * .5s); animation-fill-mode: backwards;
}
.spx-pos__satir i { width: 10px; height: 10px; border-radius: 3px; }
.spx-pos__satir span { flex: 1; }
.spx-pos__satir em { font-style: normal; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.spx-karsit {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--amber-100);
  font-size: 12px;
  animation: spx-r-karsit var(--spx-loop) var(--ease-out) infinite;
}
.spx-karsit .i { flex: none; width: 18px; height: 18px; color: var(--amber-600); }
.spx-karsit span { flex: 1; display: grid; gap: 1px; }
.spx-karsit b { color: var(--ink); font-weight: 700; }
.spx-karsit small { color: var(--ink-2); font-size: 11px; }
.spx-karsit em { font-style: normal; font-weight: 800; color: var(--amber-600); white-space: nowrap; }
@keyframes spx-r-bar {
  0%, 4% { transform: scaleX(0); }
  14%, 90% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}
@keyframes spx-r-satir {
  0%, 8% { opacity: .2; }
  16%, 90% { opacity: 1; }
  100% { opacity: .2; }
}
@keyframes spx-r-karsit {
  0%, 40% { opacity: 0; transform: translateY(8px); }
  46%, 58% { opacity: 1; transform: none; box-shadow: 0 0 0 0 rgb(229 148 0 / .5); }
  64% { box-shadow: 0 0 0 8px rgb(229 148 0 / 0); }
  70%, 90% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(8px); }
}

/* --- Firmalarım: e-Fatura kutucuğu seçilir → liste süzülür → vergi levhası WhatsApp'tan gider → telefon kopyalanır --- */
.spx--firmalar { --spx-loop: 10s; }
.spx--firmalar .spx-card { gap: 8px; }
.spx-stats, .spx-ebelge { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.spx-stats span, .spx-ebelge span {
  display: grid;
  gap: 1px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}
.spx-stats small, .spx-ebelge small { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.spx-stats b { font-size: 18px; font-weight: 800; color: var(--ink); }
.spx-ebelge b { font-size: 15px; font-weight: 800; color: var(--ink); }
.spx-ebelge span { border-bottom-width: 3px; }
.spx-ebelge span:nth-child(1) { border-bottom-color: #5fb8a8; }
.spx-ebelge span:nth-child(2) { border-bottom-color: #8b7cf0; }
.spx-ebelge span:nth-child(3) { border-bottom-color: #e5788f; }
.spx-ebelge .is-fatura { animation: spx-f-sec var(--spx-loop) var(--ease-out) infinite; }

.spx-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 12px;
  color: var(--muted);
}
.spx-search .i { width: 14px; height: 14px; }
.spx-search span { flex: 1; }
.spx-search em {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--navy-900);
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  animation: spx-f-cip var(--spx-loop) var(--ease-out) infinite;
}

.spx-firma {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 12px;
}
.spx-firma.is-disi { animation: spx-f-dim var(--spx-loop) var(--ease-out) infinite; }
.spx-firma.is-odak { animation: spx-f-odak var(--spx-loop) var(--ease-out) infinite; }
.spx-firma__ad { display: grid; gap: 1px; min-width: 0; }
.spx-firma__ad b { font-weight: 700; color: var(--ink); }
.spx-firma__ad small { color: var(--muted); font-size: 11px; }
.spx-firma__eb { display: flex; gap: 3px; }
.spx-firma__eb i {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--line);
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}
.spx-firma__eb i.is-var { background: var(--green-100); color: var(--green-700); }
.spx-firma__h { display: grid; justify-items: end; font-weight: 700; color: var(--green-700); font-variant-numeric: tabular-nums; }
.spx-firma__h small { font-size: 9px; font-weight: 600; color: var(--muted); }
.spx-firma__btn { display: flex; gap: 4px; }
.spx-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--navy-700);
}
.spx-btn .i { width: 13px; height: 13px; }
.is-odak .spx-btn--levha { animation: spx-f-bas var(--spx-loop) var(--ease-out) infinite; animation-delay: 4.3s; }
.is-odak .spx-btn--tel { animation: spx-f-bas var(--spx-loop) var(--ease-out) infinite; animation-delay: 6.6s; }
.spx-btn em {
  position: absolute;
  bottom: calc(100% + 6px);
  right: -6px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--navy-900);
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  animation: spx-f-kopya var(--spx-loop) var(--ease-out) infinite;
}
.spx--firmalar .spx-toast { animation: spx-f-toast var(--spx-loop) var(--ease-out) infinite; }

@keyframes spx-f-sec {
  0%, 8% { background: var(--surface-2); box-shadow: none; }
  12%, 88% { background: #e3f4f0; box-shadow: 0 0 0 2px #5fb8a8; }
  94%, 100% { background: var(--surface-2); box-shadow: none; }
}
@keyframes spx-f-cip {
  0%, 10% { opacity: 0; transform: scale(.6); }
  15%, 88% { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: scale(.6); }
}
@keyframes spx-f-dim {
  0%, 12% { opacity: 1; }
  18%, 88% { opacity: .3; }
  94%, 100% { opacity: 1; }
}
@keyframes spx-f-odak {
  0%, 36% { background: var(--surface-2); box-shadow: none; }
  40%, 86% { background: var(--surface); box-shadow: 0 0 0 1px var(--navy-200), var(--shadow); }
  92%, 100% { background: var(--surface-2); box-shadow: none; }
}
/* Düğmeye basma: kısa bir çöküş ve yeşil vurgu (gecikmeyle döngü içinde farklı anlarda) */
@keyframes spx-f-bas {
  0% { transform: scale(.82); background: var(--green-600); border-color: var(--green-600); color: #fff; }
  6% { transform: none; background: var(--green-100); border-color: var(--green-600); color: var(--green-700); }
  22% { background: var(--green-100); border-color: var(--green-600); color: var(--green-700); }
  28%, 100% { transform: none; background: var(--surface); border-color: var(--line); color: var(--navy-700); }
}
@keyframes spx-f-kopya {
  0%, 66% { opacity: 0; transform: translateY(4px); }
  70%, 84% { opacity: 1; transform: none; }
  88%, 100% { opacity: 0; transform: translateY(4px); }
}
@keyframes spx-f-toast {
  0%, 44% { opacity: 0; transform: translateY(14px); }
  50%, 66% { opacity: 1; transform: none; }
  72%, 100% { opacity: 0; transform: translateY(14px); }
}
@media (max-width: 480px) {
  .spx-firma__h { display: none; }
  .spx-firma { grid-template-columns: minmax(0, 1fr) auto auto; }
}

/* Hareket azaltıldığında son hâlinde durur */
@media (prefers-reduced-motion: reduce) {
  .spx *, .spx *::before { animation: none !important; }
  .spx-box { border-color: var(--green-600); background: var(--green-600); }
  .spx-pill span:first-child { opacity: 0; }
  .spx-months span:not(.is-later) { background: var(--green-100); color: var(--green-700); }
  .spx-months span:not(.is-later) .i { opacity: 1; }
  .spx-ebelge .is-fatura { background: #e3f4f0; box-shadow: 0 0 0 2px #5fb8a8; }
  .spx-firma.is-disi { opacity: .3; }
  .spx--firmalar .spx-toast { opacity: 1; }
  .spx-kanal .is-wp { background: #e3f6ea; border-color: #1fa855; color: #1a7f43; }
  .spx-btn em { opacity: 0; }
}

/* ---------- Neden ---------- */
.sp-why__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.sp-prose { display: grid; gap: 16px; font-size: var(--fs-lg, 1.0625rem); line-height: 1.7; color: var(--ink-2); }

/* ---------- Özellikler ---------- */
.sp-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sp-feature {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.sp-feature__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--green-100); color: var(--green-700); }
.sp-feature__icon .i { width: 20px; height: 20px; }
.sp-feature h3 { font-size: 1.0625rem; letter-spacing: -.01em; }
.sp-feature p { font-size: 15px; line-height: 1.6; color: var(--ink-2); }

/* ---------- Adımlar ---------- */
.sp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; counter-reset: none; }
.sp-steps li { display: grid; align-content: start; gap: 10px; padding: 24px; border-radius: var(--radius-lg); background: var(--surface-2); }
.sp-steps__num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--navy-900); color: #fff; font-weight: 800; }
.sp-steps h3 { font-size: 1.0625rem; }
.sp-steps p { font-size: 15px; line-height: 1.6; color: var(--ink-2); }

/* ---------- İlgili hizmetler ---------- */
.sp-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.sp-related a {
  display: grid;
  gap: 8px;
  height: 100%;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: border-color .2s, box-shadow .2s;
}
.sp-related a:hover { border-color: var(--navy-200); box-shadow: var(--shadow); }
.sp-related strong { font-size: 1.0625rem; }
.sp-related small { font-size: 14px; line-height: 1.5; color: var(--muted); }
.sp-related .link-arrow { margin-top: auto; justify-self: start; }

/* ---------- CTA ---------- */
.sp-cta {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(60% 140% at 100% 0%, rgb(211 20 28 / .4), transparent 60%),
    var(--navy-900);
  color: #fff;
}
.sp-cta > div { flex: 1; display: grid; gap: 8px; }
.sp-cta h2 { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.25rem); letter-spacing: -.03em; }
.sp-cta p { color: rgb(255 255 255 / .75); }

/* ---------- Duyarlı ---------- */
@media (max-width: 1000px) {
  .sp-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-why__inner { grid-template-columns: 1fr; }
  .sp-cta { flex-wrap: wrap; }
}
@media (max-width: 860px) {
  .sp-hero .page-hero__inner { grid-template-columns: 1fr; }
  .sp-hero__visual { min-height: 0; padding-bottom: 32px; }
}
@media (max-width: 640px) {
  .sp-features { grid-template-columns: 1fr; }
  .spx-toast { right: 8px; }
}