/* ============================================================
   /fiyatlandirma - tasarım tokenları ve genel sayfa dili.
   Tüm kurallar .jsp-page altında kapsamlanır (bkz. Pricing.cshtml
   <main> etiketi) ki _Pricing.cshtml'i paylaşan diğer 8 sayfa
   (Trendyol/Hepsiburada entegrasyon detayları, ZDonusum, vb.)
   etkilenmesin.
   ============================================================ */

.jsp-page {
  /* Marka: tek tonlu mor (gradyan yerine) */
  --jsp-brand-900: #2a0f57;
  --jsp-brand-700: #4e1c99; /* ana vurgu, CTA; beyaz üzerinde 10.77:1 */
  --jsp-brand-600: #5b2bb0; /* hover; beyaz üzerinde 8.69:1 */
  --jsp-brand-100: #ede7fa;
  --jsp-brand-50: #f7f5fc;
  --jsp-accent: #ff847f; /* yalnız ≤8px dekoratif nokta/çizgi, asla metin */

  /* Nötrler */
  --jsp-ink: #1c1530; /* başlık/fiyat; 17.51:1 */
  --jsp-ink-2: #5a5670; /* gövde metni; 7.0:1 */
  --jsp-ink-3: #6b6782; /* ikincil/etiket; 5.4:1 */
  --jsp-line: #e4e1ee;
  --jsp-bg: #ffffff;
  --jsp-bg-alt: #f7f6fb;
  --jsp-success: #1f8a3b;
  --jsp-danger: #b42318;

  /* Tipografi */
  --jsp-fs-display: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  --jsp-fs-h2: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  --jsp-fs-h3: 1.25rem;
  --jsp-fs-price: clamp(1.9rem, 1.5rem + 1.2vw, 2.4rem);
  --jsp-fs-body: 1rem;
  --jsp-lh-body: 1.6;
  --jsp-fs-sm: .875rem;
  --jsp-fs-xs: .75rem;

  /* Boşluk (4px ölçeği) */
  --jsp-s-1: 4px;
  --jsp-s-2: 8px;
  --jsp-s-3: 12px;
  --jsp-s-4: 16px;
  --jsp-s-5: 24px;
  --jsp-s-6: 32px;
  --jsp-s-7: 48px;
  --jsp-s-8: 64px;
  --jsp-section-y: clamp(3rem, 6vw, 5.5rem);

  /* Şekil ve derinlik */
  --jsp-r-sm: 8px;
  --jsp-r-md: 12px;
  --jsp-r-lg: 16px;
  --jsp-r-pill: 999px;
  --jsp-shadow-1: 0 1px 2px rgba(28,21,48,.06), 0 1px 3px rgba(28,21,48,.08);
  --jsp-shadow-2: 0 10px 28px -14px rgba(28,21,48,.22);
  --jsp-focus: 0 0 0 3px rgba(78,28,153,.28);

  background: var(--jsp-bg);
  color: var(--jsp-ink-2);
}

/* ===== Gradyanlı başlıkların nötrlenmesi (site genelinde .grad / .headerSpanColor
   kullanılıyor: sayaç, sihirbaz, demo formu, kontör, jscrit, SSS başlıkları hepsi
   buradan geçer). Tek bir kural, tüm bölümlerdeki gradyanı kaldırır. ===== */
.jsp-page .grad,
.jsp-page .headerSpanColor,
.jsp-page .section-head h1 span,
.jsp-page .section-head h2 span,
.jsp-page .section-head h3.headerSpanColor,
.jsp-page .section-head h3 {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: currentColor;
  color: var(--jsp-brand-700);
  font-weight: 700;
}
.jsp-page .section-head h1,
.jsp-page .section-head h2 { font-weight: 700; color: var(--jsp-ink); }

/* Ortak bölüm eyebrow'u (yeni bölümlerde de kullanılır) */
.jsp-page .jsp-eyebrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--jsp-fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--jsp-brand-700); background: var(--jsp-brand-100);
  padding: .35rem .85rem; border-radius: var(--jsp-r-pill);
}

/* Odak göstergesi: tüm sayfada tutarlı */
.jsp-page a:focus-visible,
.jsp-page button:focus-visible,
.jsp-page input:focus-visible,
.jsp-page select:focus-visible {
  outline: none;
  box-shadow: var(--jsp-focus);
}

/* ===== Hero ===== */
.jsp-page .top-bg-gray.section-head {
  background: var(--jsp-bg-alt);
  padding: var(--jsp-section-y) var(--jsp-s-4);
}
.jsp-page .top-bg-gray.section-head h1 { font-size: var(--jsp-fs-display); }
.jsp-page .top-bg-gray.section-head p {
  color: var(--jsp-ink-2); font-size: 1.05rem; line-height: var(--jsp-lh-body);
  max-width: 60ch; margin-left: auto; margin-right: auto;
}

/* ===== Haftalık indirim sayacı (popup) =====
   Yapı orijinaliyle birebir aynı (bkz. eski Pricing.cshtml inline <style>,
   satır 373-436); sadece gradyan/parıltı yerine sakin tek tonlu mor. */
.jsp-page .jsd-countdown { padding: 0 16px; margin: 6px auto 0; }
.jsp-page .jsd-countdown .jsd-cd-card {
  max-width: 980px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  background: var(--jsp-brand-900);
  border-radius: var(--jsp-r-lg); padding: clamp(1.1rem, 2.4vw, 1.8rem) clamp(1.3rem, 3vw, 2.4rem);
  box-shadow: var(--jsp-shadow-2); position: relative; overflow: hidden;
}
.jsp-page .jsd-countdown .jsd-cd-card::before { display: none; }
.jsp-page .jsd-countdown .jsd-cd-left { flex: 1 1 320px; min-width: 280px; position: relative; z-index: 1; }
.jsp-page .jsd-countdown .jsd-cd-eyebrow {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .74rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.14);
  padding: .35rem .85rem; border-radius: var(--jsp-r-pill); margin-bottom: .7rem;
}
.jsp-page .jsd-countdown .jsd-cd-eyebrow i { color: var(--jsp-accent); }
.jsp-page .jsd-countdown .jsd-cd-title { font-size: clamp(1.25rem, 1rem + 1.4vw, 1.85rem); font-weight: 800; color: #fff; margin: 0 0 .35rem; line-height: 1.2; }
.jsp-page .jsd-countdown .jsd-cd-title .grad { background: none; -webkit-text-fill-color: currentColor; color: #fff; }
.jsp-page .jsd-countdown .jsd-cd-sub { color: rgba(255,255,255,.82); font-size: .95rem; margin: 0; max-width: 46ch; }
.jsp-page .jsd-countdown .jsd-cd-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 1.1rem; position: relative; z-index: 1; }
.jsp-page .jsd-countdown .jsd-cd-btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .92rem; text-decoration: none; padding: .72rem 1.4rem; border-radius: var(--jsp-r-md); border: none; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; }
.jsp-page .jsd-countdown .jsd-cd-btn-primary { color: var(--jsp-brand-700); background: #fff; box-shadow: none; }
.jsp-page .jsd-countdown .jsd-cd-btn-primary:hover { transform: translateY(-2px); background: var(--jsp-brand-100); }
.jsp-page .jsd-countdown .jsd-cd-btn-wa { color: #fff; background: #1faf54; box-shadow: 0 12px 26px -12px rgba(18,138,63,.7); }
.jsp-page .jsd-countdown .jsd-cd-btn-wa:hover { transform: translateY(-2px); background: #1a9a4a; }
.jsp-page .jsd-countdown .jsd-cd-timer { display: flex; align-items: center; gap: 8px; position: relative; z-index: 1; }
.jsp-page .jsd-countdown .jsd-cd-unit { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.jsp-page .jsd-countdown .jsd-cd-num {
  min-width: 58px; padding: .55rem .2rem; border-radius: var(--jsp-r-md);
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #fff;
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.1rem); font-weight: 800; font-variant-numeric: tabular-nums;
  line-height: 1; text-align: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
.jsp-page .jsd-countdown .jsd-cd-lbl { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.jsp-page .jsd-countdown .jsd-cd-sep { color: rgba(255,255,255,.45); font-size: 1.6rem; font-weight: 800; align-self: flex-start; margin-top: .35rem; }
@media (max-width: 600px) {
  .jsp-page .jsd-countdown .jsd-cd-card { flex-direction: column; align-items: center; text-align: center; gap: 16px; }
  .jsp-page .jsd-countdown .jsd-cd-left { flex: 0 0 auto; min-width: 0; width: 100%; }
  .jsp-page .jsd-countdown .jsd-cd-eyebrow,
  .jsp-page .jsd-countdown .jsd-cd-title,
  .jsp-page .jsd-countdown .jsd-cd-sub { margin-left: auto; margin-right: auto; }
  .jsp-page .jsd-countdown .jsd-cd-timer { flex: 0 0 auto; width: 100%; justify-content: center; flex-wrap: nowrap; gap: 6px; }
  .jsp-page .jsd-countdown .jsd-cd-num { min-width: 44px; }
}

.jsp-page .jsd-countdown.jsdcd-overlay {
  position: fixed; inset: 0; z-index: 2147483600; margin: 0; padding: 20px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,10,40,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
}
.jsp-page .jsd-countdown.jsdcd-overlay.open { opacity: 1; visibility: visible; }
.jsp-page .jsd-countdown.jsdcd-overlay .jsd-cd-card {
  position: relative; max-width: 640px; width: 100%;
  transform: translateY(14px) scale(.98); transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.jsp-page .jsd-countdown.jsdcd-overlay.open .jsd-cd-card { transform: none; }
.jsp-page .jsd-countdown .jsdcd-close {
  position: absolute; top: 8px; right: 8px; z-index: 5;
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.18); color: #fff; font-size: 1.6rem; line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s ease;
}
.jsp-page .jsd-countdown .jsdcd-close:hover { background: rgba(255,255,255,.34); }
.jsp-page .jsd-countdown .jsdcd-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .jsp-page * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}