/**
 * WMSTurkiye — Figma (test2) görsel dili.
 * Mevcut HTML sınıfları ve davranış korunur; yalnızca renk / tipografi / yüzeyler güncellenir.
 */

/* --- Ortak tokenlar (index.html :root ile uyumlu isimler) --- */
:root {
  --bg: #f8fafc;
  --bg-soft: #f1f5f9;
  --surface: rgba(255, 255, 255, 0.92);
  --card: #ffffff;
  --card-muted: #eff6ff;
  --text: #0f172a;
  --text-hero: #0f172a;
  --muted: #64748b;
  --muted-hero: #475569;
  --grid: #e2e8f0;
  --accent: #2563eb;
  --glow: rgba(37, 99, 235, 0.35);
  --landing-max: 1120px;
  --site-max: 1120px;
  --site-pad: clamp(1rem, 3.5vw, 1.25rem);
}

html {
  scroll-behavior: smooth;
}

/**
 * Statik landing (index.html) — body’de .benchmark-body yok.
 * Next.js kök layout’ta body her zaman .benchmark-body; bu dosya orada yüklenmemeli
 * (aksi halde globals.css sırasıyla çakışıp /benchmark bozulur).
 */
body:not(.benchmark-body) {
  background: linear-gradient(180deg, #fbfdff 0%, #f6f9ff 48%, #f2f6ff 100%);
  color: var(--text);
  font-family: "DM Sans", system-ui, sans-serif;
  position: relative;
}

/* Modern signature background: soft aurora + subtle grain */
body:not(.benchmark-body)::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background:
    radial-gradient(72rem 46rem at 2% -12%, rgba(37, 99, 235, 0.13), transparent 60%),
    radial-gradient(48rem 34rem at 102% 14%, rgba(14, 165, 233, 0.1), transparent 62%),
    radial-gradient(42rem 24rem at 52% 108%, rgba(99, 102, 241, 0.07), transparent 65%);
}

/* Tek hizalama standardi: header ile tum icerik ayni container cizgisinde */
.shell,
.wrap,
.hero-inner,
.lead-grid,
.trust-inner,
.platform-why__inner,
.who-layer__inner,
.site-foot,
.dir-inner,
.site-header__inner,
.section-data__intro {
  width: 100% !important;
  max-width: var(--site-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--site-pad) !important;
  padding-right: var(--site-pad) !important;
  box-sizing: border-box;
}

/* Finder hero: eski 52rem limitini kaldır, standart container'a hizala */
.hero-inner--finder {
  max-width: var(--site-max) !important;
  grid-template-columns: 1fr !important;
}
.hero-finder-block {
  width: 100%;
  max-width: min(100%, 980px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.hero-finder-block .hero-lead,
.hero-finder-block .hero-value,
.hero-convert-trust {
  max-width: 74ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --- Hero: fotoğraf + koyu scrim (kurumsal landing, Datassist tarzı) --- */
.hero {
  border-bottom: none;
  padding-top: clamp(2rem, 5vw, 3.5rem);
}
.hero::before {
  z-index: 0;
  background-color: #021018;
  background-image:
    radial-gradient(
      ellipse 100% 85% at 50% 30%,
      rgba(2, 10, 22, 0.62) 0%,
      rgba(2, 10, 22, 0.18) 52%,
      transparent 72%
    ),
    linear-gradient(
      180deg,
      rgba(2, 12, 26, 0.75) 0%,
      rgba(2, 14, 30, 0.38) 45%,
      rgba(2, 12, 28, 0.72) 100%
    ),
    linear-gradient(
      90deg,
      rgba(2, 10, 22, 0.72) 0%,
      rgba(2, 10, 24, 0.2) 48%,
      rgba(2, 10, 24, 0.5) 100%
    ),
    url("/branding/hero-mesh-bg.png?v=3") !important;
  background-size: cover !important;
  background-position: center 18% !important;
  background-repeat: no-repeat !important;
}
.hero .hero-inner {
  position: relative;
  z-index: 1;
}
.hero-grid {
  display: none !important;
  background: none !important;
  mask-image: none !important;
}
.hero-lang {
  border-color: rgba(248, 250, 252, 0.28) !important;
  background: rgba(15, 23, 42, 0.4) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-lang button {
  color: rgba(226, 232, 240, 0.88) !important;
}
.hero-lang button:hover {
  color: #f8fafc !important;
}
.hero-lang button[aria-pressed="true"] {
  background: rgba(37, 99, 235, 0.55) !important;
  color: #fff !important;
}
.hero-badge__text {
  color: #c7d2fe !important;
  letter-spacing: 0.06em;
}
.hero h1 {
  color: #f8fafc !important;
}
.hero h1 em {
  background: linear-gradient(90deg, #7dd3fc, #a5b4fc) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.hero-lead,
.hero-value {
  color: rgba(226, 232, 240, 0.92) !important;
}
.hero-bonus {
  color: rgba(241, 245, 249, 0.96) !important;
}
.hero-convert-trust {
  background: rgba(15, 23, 42, 0.55) !important;
  border: 1px solid rgba(125, 211, 252, 0.24) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.hero-convert-trust__title {
  color: #7dd3fc !important;
}
.hero-convert-trust__list {
  color: #e2e8f0 !important;
}
.hero .btn--ghost {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(248, 250, 252, 0.38) !important;
}
.hero .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.18) !important;
}
.hero-wms-dir__sep {
  color: rgba(148, 163, 184, 0.75) !important;
}

/* Butonlar — mavi birincil (Figma CTA) */
.btn--primary {
  background: linear-gradient(90deg, #2563eb, #1d4ed8) !important;
  box-shadow: 0 8px 28px rgba(37, 99, 235, 0.28) !important;
}
.btn--primary:hover {
  box-shadow: 0 12px 36px rgba(37, 99, 235, 0.38) !important;
}
.btn--ghost {
  background: #ffffff !important;
  color: var(--text) !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
}
.btn--ghost:hover {
  background: #f1f5f9 !important;
}
.btn--gold {
  background: linear-gradient(90deg, #2563eb, #1d4ed8) !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.25) !important;
}
.btn--gold:hover {
  box-shadow: 0 12px 32px rgba(37, 99, 235, 0.35) !important;
}

/* Anlatı bantları */
.landing-narrative {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 40%, #f1f5f9 100%) !important;
}
.landing-narrative::before {
  background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.2), rgba(59, 130, 246, 0.15), transparent) !important;
}
.narr-divider {
  background: linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.08), transparent) !important;
}

.who-layer {
  background: transparent !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
}
.who-layer::before {
  background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.25), rgba(59, 130, 246, 0.2), transparent) !important;
}
.who-layer__kicker {
  color: #2563eb !important;
}
.who-layer__lead {
  color: var(--text) !important;
}
.who-layer__para {
  color: var(--muted-hero) !important;
}

.trust-strip {
  background: rgba(255, 255, 255, 0.65) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  backdrop-filter: blur(10px);
}
.trust-points {
  color: var(--muted-hero) !important;
}
.trust-chip {
  background: rgba(37, 99, 235, 0.08) !important;
  border-color: rgba(37, 99, 235, 0.2) !important;
  color: #1e293b !important;
}
.trust-sectors {
  color: var(--muted-hero) !important;
}
.trust-sectors strong {
  color: var(--text) !important;
}
.trust-note {
  color: #94a3b8 !important;
}

.platform-why {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
}
.platform-why h2 {
  color: var(--text) !important;
}
.platform-why p {
  color: var(--muted-hero) !important;
}
.platform-why p strong {
  color: var(--text) !important;
}
.platform-why__bullets li {
  color: #334155 !important;
}
.platform-why__bullets li::before {
  background: #2563eb !important;
}

/* Rapor talebi bölümü */
.section-lead {
  background: linear-gradient(180deg, #eff6ff 0%, #f8fafc 50%, #ffffff 100%) !important;
}
.section-lead::before {
  background: linear-gradient(180deg, rgba(219, 234, 254, 0.9) 0%, rgba(248, 250, 252, 0.5) 70%, transparent 100%) !important;
  height: min(120px, 18vw) !important;
}
.lead-copy h2 {
  color: var(--text) !important;
}
.lead-copy p {
  color: var(--muted-hero) !important;
}
.lead-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
}
.lead-card h3 {
  color: var(--text) !important;
}
.form-row label {
  color: var(--muted) !important;
}
.form-row input,
.form-row select {
  background: #f8fafc !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: var(--text) !important;
}
.form-row input:focus,
.form-row select:focus {
  border-color: rgba(37, 99, 235, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}
.form-check {
  color: var(--muted-hero) !important;
}

/* Pazar verisi */
.section-data::before {
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.95) 0%, transparent 100%) !important;
}

/* Hero istatistik kartları */
.hero-stat {
  background: rgba(255, 255, 255, 0.75) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  backdrop-filter: blur(8px);
}
.hero-stat:hover {
  border-color: rgba(37, 99, 235, 0.2) !important;
  box-shadow: 0 8px 28px rgba(37, 99, 235, 0.1);
}
.hero-stat strong {
  color: var(--text) !important;
}
.hero-stat span {
  color: var(--muted-hero) !important;
}

.hero-wms-dir__link {
  color: #93c5fd !important;
}
.hero-wms-dir__link:hover {
  color: #bfdbfe !important;
}

/* Modallar — açık kart */
.lead-modal__backdrop,
.wms-finder-modal__backdrop {
  background: rgba(15, 23, 42, 0.45) !important;
}
.lead-modal__panel,
.wms-finder-modal__panel {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.15) !important;
}
.lead-modal__close,
.wms-finder-modal__close {
  background: #f1f5f9 !important;
  color: var(--text) !important;
}
.lead-modal__close:hover,
.wms-finder-modal__close:hover {
  background: #e2e8f0 !important;
}
.lead-modal__title,
.wf-title {
  color: var(--text) !important;
}
.lead-modal__sub,
.wf-hint {
  color: var(--muted) !important;
}
.lead-modal__value-block {
  background: #f8fafc !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
}
.lead-modal__value-block-title,
.wf-progress {
  color: #2563eb !important;
}
.lead-modal__value-block-list {
  color: var(--text) !important;
}
.lead-success h3 {
  color: var(--text) !important;
}
.lead-success__body {
  color: var(--muted-hero) !important;
}
.lead-success__trust {
  background: rgba(37, 99, 235, 0.06) !important;
  border-color: rgba(37, 99, 235, 0.18) !important;
  color: var(--muted) !important;
}

.wf-q {
  color: var(--text) !important;
}
.wf-range {
  accent-color: #2563eb !important;
}
.wf-sku-value {
  color: #1d4ed8 !important;
}
.wf-tile[aria-pressed="true"] {
  background: rgba(37, 99, 235, 0.12) !important;
  border-color: rgba(37, 99, 235, 0.45) !important;
  color: #1e3a8a !important;
}

.wf-step--result .wf-result-card {
  background: #f8fafc !important;
  border-color: rgba(37, 99, 235, 0.15) !important;
}
.wf-result-name {
  color: var(--text) !important;
}
.wf-result-score {
  color: #2563eb !important;
}
.wf-result-blurb {
  color: var(--muted-hero) !important;
}
.wf-alt-heading {
  color: var(--muted) !important;
}
.wf-alt-item {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
}

/* Footer — Figma koyu şerit */
.site-foot {
  background: #030712 !important;
  color: #9ca3af !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  text-align: center;
}
.site-foot a {
  color: #60a5fa !important;
}
.site-foot a:hover {
  color: #93c5fd !important;
}

/* --- WMS dizin sayfaları (.dir-page) --- */
body:has(.dir-page) {
  --bg: #f8fafc;
  --bg-soft: #f1f5f9;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  color: #0f172a !important;
}
.dir-page {
  --text-hero: #0f172a;
  --muted-hero: #475569;
  --surface: #ffffff;
  --accent: #2563eb;
}
.dir-page::before {
  background:
    radial-gradient(ellipse 80% 50% at 20% -5%, rgba(37, 99, 235, 0.1), transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
}
.dir-grid-bg {
  display: none !important;
  background: none !important;
}
body:has(.dir-page) .dir-lang {
  border-color: rgba(15, 23, 42, 0.12) !important;
}
body:has(.dir-page) .dir-lang button {
  color: #64748b !important;
}
body:has(.dir-page) .dir-lang button[aria-pressed="true"] {
  background: rgba(37, 99, 235, 0.12) !important;
  color: #1d4ed8 !important;
}
body:has(.dir-page) .dir-back {
  color: #2563eb !important;
}
body:has(.dir-page) .dir-hero h1 em {
  background: linear-gradient(90deg, #2563eb, #1d4ed8) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
body:has(.dir-page) .dir-view-btn {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: #64748b !important;
}
body:has(.dir-page) .dir-view-btn:hover {
  color: #0f172a !important;
  border-color: rgba(37, 99, 235, 0.3) !important;
}
body:has(.dir-page) .dir-view-btn.is-active {
  background: rgba(37, 99, 235, 0.1) !important;
  border-color: rgba(37, 99, 235, 0.45) !important;
  color: #1d4ed8 !important;
}
body:has(.dir-page) .wms-dir-section__title {
  color: #0f172a !important;
  border-bottom-color: rgba(15, 23, 42, 0.1) !important;
}
body:has(.dir-page) .wms-dir-card {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
}
body:has(.dir-page) .wms-dir-card:hover {
  border-color: rgba(37, 99, 235, 0.25) !important;
}
body:has(.dir-page) .wms-dir-card__title {
  color: #0f172a !important;
}
body:has(.dir-page) .wms-dir-card__features {
  color: #334155 !important;
}
body:has(.dir-page) .wms-dir-card__feat-label {
  color: #2563eb !important;
}
body:has(.dir-page) .wms-dir-card__site a {
  color: #2563eb !important;
  border-bottom-color: rgba(37, 99, 235, 0.35) !important;
}
body:has(.dir-page) .wms-dir-card__site a:hover {
  color: #1d4ed8 !important;
}
body:has(.dir-page) .site-foot {
  background: transparent !important;
  color: #64748b !important;
  border-top: none !important;
}
body:has(.dir-page) .site-foot a {
  color: #2563eb !important;
}
body:has(.dir-page) .wms-profile-modal__backdrop {
  background: rgba(15, 23, 42, 0.45) !important;
}
body:has(.dir-page) .wms-profile-modal__panel {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.12) !important;
}
body:has(.dir-page) .wms-profile-modal__close {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}
body:has(.dir-page) .wms-profile-title,
body:has(.dir-page) #wms-profile-body {
  color: #0f172a !important;
}
body:has(.dir-page) .wms-profile-features-title {
  color: #2563eb !important;
}
body:has(.dir-page) .wms-profile-features {
  color: #334155 !important;
}
body:has(.dir-page) .wms-profile-website a {
  color: #2563eb !important;
}

/* Kurumsal landing ritmi (Datassist benzeri: nefes, tipografi, yumuşak kart) */
body:not(.benchmark-body) .platform-why {
  padding-top: clamp(2.75rem, 6vw, 4rem) !important;
  padding-bottom: clamp(2.75rem, 6vw, 4rem) !important;
  padding-left: var(--site-pad) !important;
  padding-right: var(--site-pad) !important;
}
body:not(.benchmark-body) .platform-why h2 {
  font-size: clamp(1.35rem, 3.2vw, 1.65rem) !important;
  letter-spacing: -0.035em !important;
}
body:not(.benchmark-body) .hero h1 {
  font-size: clamp(2.15rem, 5.2vw, 3.4rem) !important;
  letter-spacing: -0.045em !important;
  line-height: 1.07 !important;
}
body:not(.benchmark-body) .page-title {
  font-size: clamp(1.45rem, 3vw, 1.85rem) !important;
  letter-spacing: -0.035em !important;
}
body:not(.benchmark-body) .chart-card,
body:not(.benchmark-body) .scholar-card {
  border-radius: 18px !important;
  border: 1px solid rgba(15, 23, 42, 0.07) !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 22px 55px -14px rgba(15, 23, 42, 0.09) !important;
}
body:not(.benchmark-body) .lead-card {
  border-radius: 18px !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 22px 55px -14px rgba(15, 23, 42, 0.08) !important;
}

