/* =========================================================================
   SmartPass — smartpass.com.tr
   Tasarım: Claude Design teslim paketi (design_handoff_smartpass/README.md).
   Jetonlar §1.2 (site paleti), tipografi §1.3, boşluk §1.4, yarıçap §1.5,
   odak halkası §1.6. Satır içi stil YOK; her değer buradaki değişkenlerden.
   ========================================================================= */

:root {
  /* --- Zemin ve yüzey (koyu bölümler) --- */
  --ink:            #070c12;
  --ink-2:          #0a111a;
  --surface:        #0d1723;
  --footer:         #050a0f;
  --line-dark:      rgba(255, 255, 255, .12);

  /* --- Krem bölümler --- */
  --cream:          #f6f3ee;
  --cream-card:     #fffdfa;
  --cream-card-alt: #fbf8f3;
  --cream-line:     #dcd6cd;

  /* --- Metin --- */
  --on-dark:        #eef3f7;
  --on-dark-2:      #a9bccb;
  --on-dark-3:      #7e94a5;
  /* Teslim belgesi silik metin için #5d7183 öneriyor; 12–13 px'te koyu zeminlerde
     WCAG AA'yı (4.5:1) geçmiyordu — tonu koruyarak en az miktarda açıldı.
     Ölçüm: #050a0f üzerinde 3.93 → 4.98, #0d1723 üzerinde 3.57 → 4.52. */
  --on-dark-4:      #6b8296;
  --on-cream:       #101a24;
  --on-cream-2:     #55677a;

  /* --- Vurgular --- */
  --accent:         #4fd1e5;
  --accent-hover:   #7ee0ef;
  --on-accent:      #04222a;
  --coral:          #f2748c;
  --violet:         #9b7ae6;
  --ok:             #5ec98a;
  --warn:           #f0c04a;

  /* --- Tipografi --- */
  --display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'Roboto Mono', ui-monospace, Menlo, Consolas, monospace;

  /* --- Boşluk ölçeği (§1.4, 4 tabanlı) --- */
  --s2: 2px;  --s4: 4px;  --s6: 6px;  --s8: 8px;
  --s12: 12px; --s16: 16px; --s20: 20px; --s24: 24px;
  --s32: 32px; --s40: 40px; --s48: 48px; --s64: 64px;

  /* --- Yarıçap (§1.5, site sütunu) --- */
  --r-card: 14px;
  --r-btn: 9px;
  --r-sm: 6px;
  --r-pill: 999px;

  --cip-zemin:      #101a24;   /* ikon ve sayı çipi zemini */
  --wrap: 1200px;
  --sec: clamp(64px, 8vw, 112px);
}

/* Site tek görsel dilde tasarlandı (mürekkep + krem); tema anahtarı yok.
   Yine de her renk açıkça basılır, hiçbir yüzey konağın zeminini ödünç almaz. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--on-dark);
  font: 400 16px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 700; text-wrap: pretty; }
h1 { font-size: clamp(32px, 4.6vw, 76px); line-height: 1.05; letter-spacing: -.035em; }
h2 { font-size: clamp(26px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -.03em; }
h3 { font-size: clamp(24px, 2.8vw, 40px); line-height: 1.12; letter-spacing: -.03em; }
p { margin: 0; }
a { color: inherit; }
img, svg { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

:where(a, button, summary, input, select, [tabindex]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--accent);
  border-radius: var(--r-sm);
}
.on-cream :where(a, button, summary, input, select):focus-visible {
  box-shadow: 0 0 0 2px var(--cream), 0 0 0 4px var(--accent);
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); }
.section { padding-block: var(--sec); }
.section--cream { background: var(--cream); color: var(--on-cream); }
.section--ink2 { background: var(--ink-2); }
.lead { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: var(--on-dark-2); }
.section--cream .lead { color: var(--on-cream-2); }

/* Göz üstü etiketi */
.eyebrow {
  font: 400 12.5px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-dark-3);
}
.section--cream .eyebrow { color: var(--on-cream-2); }

.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: var(--on-accent);
  padding: var(--s12) var(--s20); border-radius: var(--r-btn); font-weight: 700; z-index: 100;
}
.skip:focus { left: var(--s16); top: var(--s16); }

/* ---------- Marka ---------- */
/* Marka kilidi — kit ölçüleri: ikon 44 · metin 26/700 · boşluk 14.
   Nav'da 68 px yüksekliğe sığması için ikon 38'e indirilir, oran korunur. */
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand svg, .brand img { width: 44px; height: 44px; flex: none; display: block; }
.brand span { font-family: var(--display); font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.nav .brand { gap: 12px; }
.nav .brand img { width: 38px; height: 38px; }
.nav .brand span { font-size: 22px; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7, 12, 18, .78);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--line-dark);
}
.nav__in { display: flex; align-items: center; gap: var(--s24); height: 68px; }
.nav__links { display: flex; gap: var(--s24); margin-inline-start: auto; }
.nav__links a { font-size: 15px; font-weight: 500; color: var(--on-dark-2); text-decoration: none; }
.nav__links a:hover { color: var(--on-dark); }
@media (max-width: 900px) { .nav__links { display: none; } .nav__in { gap: var(--s12); } .btn--nav { margin-inline-start: auto; } }

/* ---------- Düğmeler ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s8);
  height: 46px; padding-inline: var(--s24);
  border: 1px solid transparent; border-radius: var(--r-btn);
  font: 700 15px/1 var(--body); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .16s, border-color .16s, color .16s;
}
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--ghost { border-color: rgba(255,255,255,.22); color: var(--on-dark); background: transparent; }
.btn--ghost:hover { border-color: var(--accent); }
.btn--dark { background: #101a24; color: #fff; }
.btn--dark:hover { background: #1b2836; }
.btn--nav { height: 40px; padding-inline: var(--s20); font-size: 14px; }
.btn--lg { height: 52px; padding-inline: var(--s32); font-size: 16px; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line-dark); }
.hero::before, .hero::after {
  content: ""; position: absolute; pointer-events: none; z-index: 0;
  width: 900px; height: 900px; border-radius: 50%;
}
.hero::before { top: -420px; left: 50%; transform: translateX(-60%); background: radial-gradient(circle, rgba(79,209,229,.20), transparent 68%); }
.hero::after  { top: -260px; right: -320px; background: radial-gradient(circle, rgba(242,116,140,.14), transparent 68%); }
.hero__in {
  position: relative; z-index: 1; padding-block: clamp(56px, 7vw, 96px) 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .98fr); gap: 52px;
  align-items: center;
}
@media (max-width: 900px) { .hero__in { grid-template-columns: 1fr; } }
.hero__tag {
  display: inline-flex; align-items: center; gap: var(--s8);
  padding: var(--s8) var(--s16);
  border: 1px solid rgba(79,209,229,.42); border-radius: var(--r-pill);
  font: 400 12.5px/1 var(--mono); letter-spacing: .1em; color: var(--accent);
}
.hero__tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.hero h1 { margin-block: var(--s24) var(--s20); max-width: 16ch; font-size: clamp(38px, 4.4vw, 60px); line-height: 1.02; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lead { max-width: 58ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s12); margin-top: var(--s32); }
.hero__trust { display: flex; flex-wrap: wrap; gap: var(--s24); margin-top: var(--s24); font-size: 13.5px; color: var(--on-dark-4); }
.hero__trust li { position: relative; }
.hero__trust li + li::before { content: "·"; position: absolute; inset-inline-start: -14px; }

/* Tarayıcı çerçevesi — kapsayıcı: içindeki .frame kırpar (overflow: hidden),
   sarmalayan .frame__wrap kırpmaz; rozet (.frame__badge) bu yüzden dışarı
   taşabiliyor (bkz. aşağıda "Gösterge rozeti"). */
.frame__wrap { position: relative; }
.frame {
  border: 1px solid var(--line-dark); border-radius: var(--r-card);
  background: var(--surface); overflow: hidden;
  box-shadow: 0 -1px 0 rgba(255,255,255,.06), 0 40px 90px rgba(0,0,0,.55);
}
@media (max-width: 900px) { .frame__wrap { margin-top: clamp(40px, 5vw, 64px); } }
.frame__bar { display: flex; align-items: center; gap: var(--s8); padding: var(--s12) var(--s16); border-bottom: 1px solid var(--line-dark); }
.frame__dot { width: 10px; height: 10px; border-radius: 50%; }
.frame__url {
  margin-inline: auto;
  display: inline-flex; align-items: center; gap: var(--s8);
  padding: var(--s4) var(--s12); border-radius: var(--r-pill);
  background: rgba(255,255,255,.06);
  font: 400 12px/1.6 var(--mono); color: var(--on-dark-2);
}
.frame__url i { width: 6px; height: 6px; border-radius: 2px; background: var(--accent); }
.frame img { width: 100%; height: auto; }

/* ---------- Gösterge panosu maketi (hero) — 01-wide.png ekran görüntüsünün
   yerine HTML/CSS ile kurulmuş maket. Sayılar canlı gösterim sistemindeki
   büyüklüklerdir, uydurma değildir. ---------- */
.pano { padding: var(--s16); display: grid; gap: var(--s12); }
.pano__sayaclar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s8); }
@media (max-width: 620px) { .pano__sayaclar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pano__sayac { border: 1px solid var(--line-dark); border-radius: var(--r-card); background: var(--ink-2); padding: var(--s12) var(--s8); min-width: 0; }
.pano__etiket { display: block; font: 500 9.5px/1.3 var(--body); letter-spacing: .02em; text-transform: uppercase; color: var(--on-dark-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pano__deger { display: block; margin-top: var(--s6); font: 800 clamp(18px, 2.6vw, 24px)/1.05 var(--display); letter-spacing: -.02em; }
.pano__deger--vurgu { color: var(--accent); }
.pano__deger--red { color: var(--danger); }

.pano__alt { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--s12); }
@media (max-width: 700px) { .pano__alt { grid-template-columns: minmax(0, 1fr); } }
.pano__grafik, .pano__terminaller { border: 1px solid var(--line-dark); border-radius: var(--r-card); padding: var(--s12); min-width: 0; }
.pano__grafik-ust { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s8); font-size: 11.5px; }
.pano__grafik-baslik { font-weight: 600; color: var(--on-dark); }
.pano__grafik-saat { font: 400 11px/1 var(--mono); color: var(--on-dark-3); }
.pano__egri { display: block; width: 100%; height: clamp(72px, 12vw, 100px); margin-top: var(--s12); overflow: visible; }
.pano__egri-dolgu { stroke: none; fill: var(--accent); opacity: .12; }
.pano__egri-cizgi { fill: none; stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; }
.pano__egri-cizgi--giris { stroke: var(--accent); }
.pano__egri-cizgi--cikis { stroke: var(--coral); }
.pano__terminaller-baslik { margin: 0; font-size: 11.5px; font-weight: 600; color: var(--on-dark); }
.pano__terminal-liste { margin-top: var(--s8); display: grid; gap: var(--s8); }
.pano__terminal-liste li + li { margin-top: 0; }
.pano__terminal-satir { display: flex; justify-content: space-between; gap: var(--s8); font: 500 11px/1.4 var(--mono); color: var(--on-dark-2); }
.pano__terminal-satir span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pano__terminal-bar { margin-top: var(--s4); height: 5px; border-radius: var(--r-pill); background: var(--line-dark); overflow: hidden; }
.pano__terminal-bar-ic { display: block; height: 100%; width: 100%; border-radius: var(--r-pill); background: var(--accent); }
.pano__terminal-bar-ic--2 { width: 63%; opacity: .82; }
.pano__terminal-bar-ic--3 { width: 36%; opacity: .6; }
.pano__terminal-bar-ic--4 { width: 26%; opacity: .42; }

/* ---------- Sayısal şerit ---------- */
.stats { border-top: 1px solid var(--line-dark); background: var(--ink-2); }
.stats__in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s24); padding-block: var(--s40); }
@media (max-width: 780px) { .stats__in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat b { display: block; font: 700 clamp(26px, 3vw, 40px)/1.1 var(--display); letter-spacing: -.02em; }
.stat span { display: block; margin-top: var(--s6); font-size: 13.5px; color: var(--on-dark-3); }

/* ---------- Bölüm başlığı ---------- */
.head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
@media (max-width: 860px) { .head { grid-template-columns: 1fr; align-items: start; } }
.head h2 { margin-block: var(--s16) 0; }

/* ---------- Özellik kartları ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; margin-top: clamp(32px, 4vw, 56px); background: var(--cream-line); border: 1px solid var(--cream-line); border-radius: var(--r-card); overflow: hidden; }
.card { background: var(--cream-card); padding: var(--s32); transition: background-color .16s; }
.card:hover { background: var(--cream-card-alt); }
.card__ico { width: 40px; height: 40px; border-radius: 10px; background: var(--cip-zemin); color: var(--accent); display: grid; place-items: center; }
.card h3 { font-size: 19px; line-height: 1.3; letter-spacing: -.01em; margin-block: var(--s20) var(--s8); }
.card p { font-size: 14.5px; line-height: 1.62; color: var(--on-cream-2); }

.band {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s20);
  margin-top: var(--s24); padding: var(--s24) var(--s32);
  border: 1px solid var(--cream-line); border-radius: var(--r-card); background: var(--cream-card);
}
.band p { font-size: 15px; color: var(--on-cream-2); flex: 1 1 320px; }

/* ---------- Sektör kartları ---------- */
.sectors { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s16); margin-top: clamp(32px, 4vw, 56px); }
.sector {
  display: block; padding: var(--s24);
  border: 1px solid var(--line-dark); border-radius: var(--r-card);
  background: var(--surface); text-decoration: none;
  transition: border-color .16s, transform .16s;
}
.sector:hover { border-color: var(--accent); transform: translateY(-2px); }
.sector b { display: block; font-family: var(--display); font-size: 17px; font-weight: 600; }
.sector span { display: block; margin-top: var(--s6); font-size: 13.5px; color: var(--on-dark-3); }

/* ---------- Derinlemesine bloklar ---------- */
.deep { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.deep + .deep { margin-top: clamp(56px, 7vw, 96px); }
.deep--flip > div:first-child { order: 2; }
@media (max-width: 900px) { .deep { grid-template-columns: 1fr; } .deep--flip > div:first-child { order: 0; } }
.deep h2, .deep h3 { font-size: clamp(22px, 2.2vw, 32px); margin-block: var(--s16) var(--s12); }
.deep p { color: var(--on-dark-2); font-size: 15.5px; line-height: 1.65; }
.deep ul { margin-top: var(--s20); display: flex; flex-direction: column; gap: var(--s12); }
.deep li { display: grid; grid-template-columns: 20px 1fr; gap: var(--s12); font-size: 15px; color: var(--on-dark-2); }
.deep li b { color: var(--on-dark); font-weight: 600; }
.tick { color: var(--accent); }
.shot { border: 1px solid var(--line-dark); border-radius: var(--r-card); overflow: hidden; background: var(--surface); box-shadow: 0 24px 60px rgba(0,0,0,.45); }

/* ---------- Terminal maketleri ---------- */
.kiosks { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s24); margin-top: clamp(32px, 4vw, 56px); }
.kiosk { border: 1px solid var(--line-dark); border-radius: var(--r-card); background: #060d14; overflow: hidden; }
.kiosk__bar { display: flex; align-items: center; gap: var(--s8); padding: var(--s12) var(--s16); border-bottom: 1px solid var(--line-dark); font: 500 12px/1 var(--mono); letter-spacing: .08em; color: var(--on-dark-3); }
.kiosk__bar .code { margin-inline-start: auto; }
.kiosk__screen { aspect-ratio: 1024 / 600; display: grid; place-content: center; text-align: center; padding: var(--s24); gap: var(--s12); }
.kiosk__big { font: 700 clamp(28px, 4vw, 44px)/1.1 var(--display); letter-spacing: -.02em; }
.kiosk__sub { font-size: 15px; color: var(--on-dark-2); }
.kiosk__code { font: 500 13px/1.5 var(--mono); letter-spacing: .06em; }
.kiosk--ok .kiosk__big { color: var(--ok); }
.kiosk--ok .kiosk__code { color: var(--ok); }
.kiosk__clock { font: 600 clamp(40px, 6vw, 72px)/1 var(--mono); letter-spacing: -.02em; }
.kfeatures { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s16); margin-top: var(--s24); }
.kfeature { padding: var(--s20); border: 1px solid var(--line-dark); border-radius: var(--r-card); background: var(--surface); }
.kfeature b { display: block; font-family: var(--display); font-size: 16px; font-weight: 600; }
.kfeature span { display: block; margin-top: var(--s6); font-size: 13.5px; color: var(--on-dark-3); }

/* ---------- İki ekran görüntüsü yan yana ---------- */
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s24); margin-top: clamp(32px, 4vw, 56px); }
.duo figure { margin: 0; }
.duo figcaption { margin-top: var(--s12); font-size: 13.5px; color: var(--on-cream-2); }
.duo .shot { box-shadow: 0 18px 44px rgba(16,32,43,.20); border-color: var(--cream-line); }

/* ---------- Güvenlik kutuları ---------- */
.secgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--s16); margin-top: clamp(32px, 4vw, 56px); }
.secbox { padding: var(--s24); border: 1px solid var(--line-dark); border-radius: var(--r-card); background: var(--surface); }
.secbox b { display: block; font-family: var(--display); font-size: 17px; font-weight: 600; margin-bottom: var(--s8); }
.secbox p { font-size: 14.5px; line-height: 1.6; color: var(--on-dark-2); }

/* ---------- Fiyatlandırma ---------- */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s20); margin-top: clamp(32px, 4vw, 56px); align-items: start; }
.plan { padding: var(--s32); border: 1px solid var(--line-dark); border-radius: var(--r-card); background: var(--surface); display: flex; flex-direction: column; gap: var(--s16); }
.plan--featured { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(79,209,229,.35), 0 24px 60px rgba(0,0,0,.5); }
.plan__tag { align-self: flex-start; padding: var(--s4) var(--s12); border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font: 700 11px/1.5 var(--mono); letter-spacing: .1em; }
.plan h3 { font-size: 20px; letter-spacing: -.01em; }
.plan__price { display: flex; align-items: baseline; gap: var(--s8); }
.plan__price b { font: 700 clamp(30px, 3.4vw, 40px)/1 var(--display); letter-spacing: -.02em; }
.plan__price span { font-size: 13.5px; color: var(--on-dark-3); }
.plan ul { display: flex; flex-direction: column; gap: var(--s12); }
.plan li { display: grid; grid-template-columns: 18px 1fr; gap: var(--s8); font-size: 14.5px; color: var(--on-dark-2); }
.plan .btn { margin-top: auto; }

/* ---------- SSS ---------- */
.faq { margin-top: clamp(32px, 4vw, 56px); border-top: 1px solid var(--cream-line); }
.faq details { border-bottom: 1px solid var(--cream-line); }
.faq summary { display: flex; align-items: center; gap: var(--s16); padding: var(--s24) 0; cursor: pointer; font-family: var(--display); font-size: clamp(17px, 1.6vw, 20px); font-weight: 600; letter-spacing: -.01em; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-inline-start: auto; font: 400 24px/1 var(--body); color: var(--on-cream-2); }
.faq details[open] summary::after { content: "−"; }
.faq p { padding-bottom: var(--s24); max-width: 76ch; font-size: 15.5px; line-height: 1.65; color: var(--on-cream-2); }

/* ---------- Teklif CTA + form ---------- */
.teklif { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .teklif { grid-template-columns: 1fr; } }
.teklif h2 { margin-block: var(--s16) var(--s16); }
.form { padding: var(--s32); border: 1px solid var(--line-dark); border-radius: var(--r-card); background: var(--surface); display: flex; flex-direction: column; gap: var(--s16); }
.field { display: flex; flex-direction: column; gap: var(--s6); }
.field label { font: 600 12px/1.4 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-3); }
.field input, .field select {
  height: 46px; padding-inline: var(--s16);
  border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-btn);
  background: #0a121b; color: var(--on-dark);
  font: 400 15px/1 var(--body);
}
.field input::placeholder { color: var(--on-dark-4); }
.field input:hover, .field select:hover { border-color: var(--on-dark-4); }
.form small { font-size: 12.5px; line-height: 1.55; color: var(--on-dark-4); }

.mono { font-family: var(--mono); font-size: .92em; color: var(--on-dark); }
.section--cream .mono { color: var(--on-cream); }

/* ---------- İlgili sayfalar (derleyici üretir) ----------
   Sayfanın kapanışıyla footer arasında duran bağlantı bandı. Ziyaretçi
   "peki komşu ilde?" diye sorduğunda cevabı aramak zorunda kalmasın diye var;
   yan etkisi 42 sayfanın birbirine bağlı kalması. ---------- */
.ilgili { padding-block: var(--s48); border-top: 1px solid var(--line-dark); }
.ilgili__h { font-family: var(--display); font-size: clamp(19px, 1.8vw, 24px); font-weight: 600; }
.ilgili__giris { margin-top: var(--s8); max-width: 62ch; font-size: 15px; line-height: 1.65; color: var(--on-dark-2); }
.ilgili__liste { list-style: none; margin-top: var(--s20); display: flex; flex-wrap: wrap; gap: var(--s8) var(--s12); }
.ilgili__liste a {
  display: inline-block; padding: 8px 14px; border: 1px solid var(--line-dark);
  border-radius: 999px; font-size: 14.5px; line-height: 1.2; color: var(--on-dark-2);
  text-decoration: none; transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.ilgili__liste a:hover { border-color: var(--accent); color: var(--on-dark); }

/* ---------- Footer ---------- */
.foot { background: var(--footer); border-top: 1px solid var(--line-dark); padding-block: var(--s48) var(--s32); }
/* 5 çocuk var (tanıtım + 3 liste + iletişim); 4 sütunda sonuncusu alt satırda
   tek başına kalıyordu. */
.foot__top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: var(--s32); }
@media (max-width: 1100px) { .foot__top { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .foot__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.foot__about { font-size: 14px; line-height: 1.65; color: var(--on-dark-3); max-width: 40ch; margin-top: var(--s16); }
.foot .foot__h { font: 600 12px/1.4 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-4); margin-bottom: var(--s12); }
.foot ul { display: flex; flex-direction: column; gap: var(--s8); }
.foot a { font-size: 14.5px; color: var(--on-dark-2); text-decoration: none; }
.foot a:hover { color: var(--on-dark); }
/* Kurumsal künye: SmartPass'i kimin yaptığı footer'da görünür. Logo koyu
   zemin için açık tona alınmış sürümdür (tools ile üretildi, marka camgöbeği
   korunur); orijinal lacivert bu zeminde 2.1:1 veriyordu. */
.foot__db {
  display: flex; align-items: center; gap: var(--s16); flex-wrap: wrap;
  margin-top: var(--s40); padding-top: var(--s24);
  border-top: 1px solid var(--line-dark);
}
.foot__db img { display: block; width: 221px; height: 44px; }
.foot__db a { display: inline-flex; opacity: .92; transition: opacity .18s ease; }
.foot__db a:hover { opacity: 1; }
.foot__db p { font-size: 14.5px; line-height: 1.55; color: var(--on-dark-2); }
.foot__db p b { color: var(--on-dark); font-weight: 600; }
.foot__bottom { display: flex; flex-wrap: wrap; gap: var(--s16); align-items: center; margin-top: var(--s20); padding-top: var(--s20); border-top: 1px solid var(--line-dark); font-size: 13px; color: var(--on-dark-4); }
.foot__bottom .mono { font-family: var(--mono); }

/* =========================================================================
   ALT SAYFA ŞABLONU (teslim belgesi §4.4)
   Breadcrumb · sayfa hero · sorun kartları · çözüm blokları · veri maketi ·
   kanıt kartları · ilgili sayfalar · CTA bandı.
   ========================================================================= */

.note { margin-top: var(--s24); font-size: 13.5px; color: var(--on-dark-3); max-width: 78ch; }
.section--cream .note { color: var(--on-cream-2); }

/* ---------- Breadcrumb ---------- */
.crumb { background: var(--ink); border-bottom: 1px solid var(--line-dark); font-size: 13px; }
.crumb .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s8); padding-block: var(--s12); }
.crumb a { color: var(--on-dark-3); text-decoration: none; }
.crumb a:hover { color: var(--on-dark); }
.crumb span[aria-current] { color: var(--on-dark-2); }
.crumb__sep { color: var(--on-dark-4); }

/* ---------- Sayfa hero ---------- */
.phero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line-dark); padding-block: clamp(48px, 6vw, 80px); }
.phero::before {
  content: ""; position: absolute; top: -380px; left: 45%; width: 820px; height: 820px;
  transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(79,209,229,.16), transparent 68%);
}
.phero__in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .phero__in { grid-template-columns: 1fr; } }
.phero h1 { margin-block: var(--s16) var(--s20); font-size: clamp(30px, 3.8vw, 54px); }
.phero .lead { max-width: 62ch; }
.phero__cta { display: flex; flex-wrap: wrap; gap: var(--s12); margin-top: var(--s24); }

/* Hero yanındaki "Tipik kurulum" kartı */
.spec {
  padding: var(--s24); border: 1px solid var(--line-dark);
  border-radius: var(--r-card); background: var(--surface);
}
.spec h2 { font-family: var(--body); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-4); margin-bottom: var(--s16); }
.spec dl { display: grid; grid-template-columns: auto 1fr; gap: var(--s12) var(--s16); margin: 0; }
.spec dt { font-size: 13.5px; color: var(--on-dark-3); }
.spec dd { margin: 0; font: 500 13.5px/1.5 var(--mono); color: var(--on-dark); text-align: end; }

/* ---------- Sorun kartları ---------- */
.problems { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s16); margin-top: clamp(28px, 4vw, 48px); }
.problem { padding: var(--s24); border: 1px solid rgba(242,116,140,.34); border-radius: var(--r-card); background: rgba(242,116,140,.05); }
.problem span { font: 400 11.5px/1 var(--mono); letter-spacing: .14em; color: var(--coral); }
.problem b { display: block; margin-block: var(--s12) var(--s8); font-family: var(--display); font-size: 17px; font-weight: 600; }
.problem p { font-size: 14.5px; line-height: 1.6; color: var(--on-dark-2); }

/* ---------- Veri maketi ---------- */
.mock { margin-top: clamp(28px, 4vw, 48px); border: 1px solid var(--line-dark); border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
.mock__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s12); padding: var(--s16) var(--s24); border-bottom: 1px solid var(--line-dark); }
.mock__head b { font-family: var(--display); font-size: 16px; font-weight: 600; }
.tag { padding: 3px var(--s12); border-radius: var(--r-pill); font: 500 11.5px/1.6 var(--mono); letter-spacing: .06em; }
.tag--ok { background: rgba(94,201,138,.14); color: var(--ok); }
.tag--warn { background: rgba(240,192,74,.14); color: var(--warn); }
.tag--deny { background: rgba(242,116,140,.14); color: var(--coral); }
.tag--info { background: rgba(79,209,229,.12); color: var(--accent); }
.mock__rows { display: flex; flex-direction: column; }
.mock__rows > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s16); padding: var(--s12) var(--s24); font-size: 14px; }
.mock__rows > div + div { border-top: 1px solid var(--line-dark); }
.mock__rows dt, .mock__rows span:first-child { color: var(--on-dark-2); }
.mock__rows dd, .mock__rows span:last-child { margin: 0; font: 500 13.5px/1.5 var(--mono); color: var(--on-dark); text-align: end; }
.mock__note { padding: var(--s16) var(--s24); border-top: 1px solid var(--line-dark); background: rgba(255,255,255,.02); font-size: 13.5px; line-height: 1.6; color: var(--on-dark-3); }

/* ---------- Kanıt kartları (krem) ---------- */
.proofs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s16); margin-top: clamp(28px, 4vw, 48px); }
.proof { padding: var(--s24); border: 1px solid var(--cream-line); border-radius: var(--r-card); background: var(--cream-card); }
.proof b { display: block; font: 700 clamp(24px, 2.6vw, 34px)/1.1 var(--display); letter-spacing: -.02em; color: var(--on-cream); }
.proof span { display: block; margin-top: var(--s8); font-size: 14px; line-height: 1.55; color: var(--on-cream-2); }

/* ---------- Uzun metin (SEO gövdesi) ---------- */
.prose { max-width: 74ch; }
.prose h3 { font-size: clamp(20px, 2vw, 28px); margin-top: var(--s40); margin-bottom: var(--s12); }
.prose h4 { font-family: var(--display); font-size: 18px; font-weight: 600; margin-top: var(--s32); margin-bottom: var(--s8); }
.prose p { margin-top: var(--s16); font-size: 15.5px; line-height: 1.7; color: var(--on-dark-2); }
.prose ul { margin-top: var(--s16); display: flex; flex-direction: column; gap: var(--s8); }
.prose ul li { position: relative; padding-inline-start: var(--s20); font-size: 15.5px; line-height: 1.65; color: var(--on-dark-2); }
.prose ul li::before { content: ""; position: absolute; inset-inline-start: 0; top: .62em; width: 6px; height: 6px; border-radius: 2px; background: var(--accent); }
.prose strong { color: var(--on-dark); font-weight: 600; }
.section--cream .prose p, .section--cream .prose ul li { color: var(--on-cream-2); }
.section--cream .prose strong { color: var(--on-cream); }

/* ---------- İlgili sayfalar ---------- */
.related { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s16); margin-top: clamp(28px, 4vw, 48px); }
.related a { display: block; padding: var(--s20); border: 1px solid var(--line-dark); border-radius: var(--r-card); background: var(--surface); text-decoration: none; transition: border-color .16s, transform .16s; }
.related a:hover { border-color: var(--accent); transform: translateY(-2px); }
.related b { display: block; font-family: var(--display); font-size: 16px; font-weight: 600; }
.related span { display: block; margin-top: var(--s6); font-size: 13.5px; color: var(--on-dark-3); }

/* ---------- CTA bandı ---------- */
.ctaband {
  margin-block: 0; padding: clamp(32px, 5vw, 56px);
  border-radius: var(--r-card);
  background: linear-gradient(135deg, rgba(79,209,229,.16), rgba(155,122,230,.12) 55%, rgba(242,116,140,.10));
  border: 1px solid rgba(79,209,229,.28);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s24); align-items: center;
}
@media (max-width: 760px) { .ctaband { grid-template-columns: 1fr; } }
.ctaband h2 { font-size: clamp(24px, 2.6vw, 34px); }
.ctaband p { margin-top: var(--s12); color: var(--on-dark-2); max-width: 56ch; }
.ctaband__act { display: flex; flex-wrap: wrap; gap: var(--s12); }

.frame__dot--1 { background: var(--coral); }
.frame__dot--2 { background: var(--warn); }
.frame__dot--3 { background: var(--ok); }
.hero__trust--gap { margin-top: var(--s24); }

/* Yan kartı olmayan sayfa hero'su tüm genişliği kullansın (hub sayfaları). */
.phero__in > div:only-child { grid-column: 1 / -1; }
.phero__in > div:only-child .lead { max-width: 74ch; }

/* Panel ekran görüntüleri 2× çözünürlükte (1848×1155) servis edilir; yuvaya
   oranını koruyarak otursun — genişlik/yükseklik öznitelikleri yalnız yer ayırır. */
.shot img, .frame img, .duo img { width: 100%; height: auto; }

/* =========================================================================
   ARKA PLAN PARALLAX
   Sabit üç ışıma katmanı; kaydırmada farklı hızlarda kayar (assets/parallax.js).
   Krem bölümler opak olduğu için ışıma yalnız koyu bölümlerde görünür — sitenin
   "mürekkep ↔ kâğıt" ritmi korunur.
   ========================================================================= */

.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--ink);
}
.bg span {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
}
.bg span:nth-child(1) {
  top: -18vh; left: 50%; width: 92vw; height: 92vw;
  max-width: 1180px; max-height: 1180px;
  margin-left: -46vw;
  background: radial-gradient(circle, rgba(79, 209, 229, .17), transparent 66%);
  animation: sp-suzul-1 34s ease-in-out infinite alternate;
}
.bg span:nth-child(2) {
  top: 46vh; right: -26vw; width: 78vw; height: 78vw;
  max-width: 980px; max-height: 980px;
  background: radial-gradient(circle, rgba(242, 116, 140, .13), transparent 66%);
  animation: sp-suzul-2 46s ease-in-out infinite alternate;
}
.bg span:nth-child(3) {
  top: 118vh; left: -22vw; width: 70vw; height: 70vw;
  max-width: 900px; max-height: 900px;
  background: radial-gradient(circle, rgba(155, 122, 230, .12), transparent 66%);
  animation: sp-suzul-3 58s ease-in-out infinite alternate;
}

/* Yavaş ortam salınımı — kaydırma olmadan da sayfa ölü durmasın.
   parallax.js katmanlara `transform` yazdığı için salınım `translate` DEĞİL,
   ölçek ve opaklık üzerinden yapılır; ikisi çakışmaz. */
@keyframes sp-suzul-1 { from { opacity: .85; } to { opacity: 1; } }
@keyframes sp-suzul-2 { from { opacity: .7; }  to { opacity: 1; } }
@keyframes sp-suzul-3 { from { opacity: .75; } to { opacity: 1; } }

/* Koyu bölümler ışımayı geçirsin; krem bölümler opak kalsın. */
body { background: transparent; }
/* DİKKAT: burada `.section { background: transparent }` YAZILMAZ — aynı
   özgüllükte olduğu ve dosyada sonra geldiği için `.section--cream`'i ezer,
   krem bölümler zeminini kaybeder ve koyu metin koyu zeminde kaybolur.
   `.section`in zaten zemini yok; ışıma gövdeden geçer. */
.section--ink2 { background: rgba(10, 17, 26, .74); }
.crumb { background: transparent; }
.hero, .phero { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  /* Özgüllük, yukarıdaki :nth-child kurallarıyla EŞİT olmalı; yoksa
     `animation: none` kaybeder ve salınım kullanıcının tercihine rağmen sürer. */
  .bg span:nth-child(1),
  .bg span:nth-child(2),
  .bg span:nth-child(3) { animation: none; }
}

/* =========================================================================
   HAREKET KATMANI  (assets/anim.js)

   İlke: JS çalışmazsa hiçbir şey gizli kalmaz. Aşağıdaki başlangıç
   durumlarının tamamı `html.js` altındadır; o sınıfı anim.js ekler ve
   `prefers-reduced-motion: reduce` seçiliyse EKLEMEZ.
   ========================================================================= */

/* ---------- Kaydırma ilerleme çubuğu ---------- */
.ilerleme {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), var(--violet) 55%, var(--coral));
  pointer-events: none;
}

/* ---------- Görünürlükte açılma ---------- */
html.js .gel {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity .62s cubic-bezier(.22,.61,.36,1) var(--gecikme, 0ms),
              transform .62s cubic-bezier(.22,.61,.36,1) var(--gecikme, 0ms);
  will-change: opacity, transform;
}
html.js .gel.geldi { opacity: 1; transform: none; }

/* Görseller biraz daha belirgin gelsin: hafif ölçek + kırpma */
html.js .shot.gel, html.js .duo figure.gel { transform: translate3d(0, 22px, 0) scale(.985); }
html.js .shot.gel.geldi, html.js .duo figure.gel.geldi { transform: none; }

/* Hero dizisi — gözlemci beklemeden, yüklenince */
html.js .acilis {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1) var(--gecikme, 0ms),
              transform .7s cubic-bezier(.22,.61,.36,1) var(--gecikme, 0ms);
}
html.js.acilis-basladi .acilis { opacity: 1; transform: none; }

/* ---------- Nav: kaydırınca incelir ---------- */
.nav { transition: height .25s ease, background-color .25s ease, box-shadow .25s ease; }
.nav__in { transition: height .25s ease; }
.nav--kucuk .nav__in { height: 58px; }
.nav--kucuk { background: rgba(7, 12, 18, .92); box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.nav .brand img { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.nav:hover .brand img { transform: rotate(-4deg) scale(1.06); }
.nav--kucuk .brand img { transform: scale(.9); }

/* Menü bağlantısı: alttan çizgi süpürmesi */
.nav__links a { position: relative; transition: color .2s ease; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--accent); border-radius: 2px;
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.nav__links a:hover::after, .nav__links a[aria-current]::after { transform: scaleX(1); }

/* ---------- Düğmeler: parıltı süpürmesi + basma ---------- */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .55s ease;
  pointer-events: none;
}
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(1px) scale(.995); }
.btn--primary { transition: background-color .16s, box-shadow .25s ease, transform .12s ease; }
.btn--primary:hover { box-shadow: 0 10px 30px rgba(79, 209, 229, .28); }

/* ---------- Kartlar: yükselme + imleç takipli ışıma ---------- */
.sector, .plan, .secbox, .related a, .kfeature {
  position: relative; overflow: hidden;
  transition: border-color .2s ease, transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease;
}
.sector::before, .plan::before, .secbox::before, .related a::before, .kfeature::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%),
              rgba(79, 209, 229, .13), transparent 62%);
  opacity: 0; transition: opacity .3s ease;
}
.sector:hover::before, .plan:hover::before, .secbox:hover::before,
.related a:hover::before, .kfeature:hover::before { opacity: 1; }
.sector:hover, .related a:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.secbox:hover, .kfeature:hover { transform: translateY(-2px); }
.plan:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(0,0,0,.45); }

/* Özellik kartı (krem bölüm) — ikon canlansın */
.card { transition: background-color .2s ease; }
.card__ico { transition: transform .35s cubic-bezier(.34,1.56,.64,1), background-color .25s ease; }
.card:hover .card__ico { transform: translateY(-3px) rotate(-6deg); background: var(--accent); color: #06202a; }

/* Sorun kartı — mercan kenar canlanır */
.problem { transition: border-color .25s ease, transform .25s ease, background-color .25s ease; }
.problem:hover { border-color: rgba(242,116,140,.6); transform: translateY(-2px); background: rgba(242,116,140,.08); }

/* ---------- Ekran görüntüleri: hafif eğilme ---------- */
.shot { transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease; }
.shot:hover { transform: translateY(-4px) scale(1.008); box-shadow: 0 32px 70px rgba(0,0,0,.55); }
.frame { transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.frame:hover { transform: translateY(-4px); }

/* ---------- Kiosk maketi: nabız ve okuma döngüsü ---------- */
.kiosk .dot--ok, .kiosk__bar span:first-child { position: relative; }
.kiosk--ok .kiosk__big { transition: opacity .4s ease, transform .4s ease; }
.kiosk--okuyor .kiosk__big { opacity: .35; transform: scale(.97); }
.kiosk--okuyor .kiosk__code { opacity: .5; }
.kiosk__code { transition: opacity .4s ease; }
.kiosk { transition: border-color .25s ease, transform .3s ease; }
.kiosk:hover { border-color: rgba(79,209,229,.4); transform: translateY(-3px); }

/* ---------- SSS: açılma yumuşasın ---------- */
.faq summary { transition: color .2s ease; }
.faq summary:hover { color: var(--accent); }
.faq summary::after { transition: transform .25s ease, color .2s ease; }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details[open] p { animation: sp-ac .35s cubic-bezier(.22,.61,.36,1) both; }
@keyframes sp-ac { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- Maket satırları: sırayla vurgulanır ---------- */
html.js .mock.geldi .mock__rows > div {
  animation: sp-satir .5s cubic-bezier(.22,.61,.36,1) both;
}
html.js .mock.geldi .mock__rows > div:nth-child(1) { animation-delay: .10s; }
html.js .mock.geldi .mock__rows > div:nth-child(2) { animation-delay: .18s; }
html.js .mock.geldi .mock__rows > div:nth-child(3) { animation-delay: .26s; }
html.js .mock.geldi .mock__rows > div:nth-child(4) { animation-delay: .34s; }
html.js .mock.geldi .mock__rows > div:nth-child(5) { animation-delay: .42s; }
@keyframes sp-satir { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

/* ---------- Rozet ve etiketler: nabız ---------- */
.hero__tag i { animation: sp-nabiz 2.4s ease-out infinite; }
@keyframes sp-nabiz {
  0%   { box-shadow: 0 0 0 0 rgba(79,209,229,.55); }
  70%  { box-shadow: 0 0 0 8px rgba(79,209,229,0); }
  100% { box-shadow: 0 0 0 0 rgba(79,209,229,0); }
}
.plan__tag { animation: sp-yanip 3.4s ease-in-out infinite; }
@keyframes sp-yanip { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.14); } }

/* ---------- Arka plan: katman sayısı ve hareket artırıldı ---------- */
.bg span:nth-child(4) {
  top: 178vh; right: 8vw; width: 62vw; height: 62vw;
  max-width: 780px; max-height: 780px;
  background: radial-gradient(circle, rgba(94,201,138,.10), transparent 66%);
  animation: sp-suzul-4 52s ease-in-out infinite alternate;
}
.bg span:nth-child(5) {
  top: 250vh; left: 6vw; width: 66vw; height: 66vw;
  max-width: 820px; max-height: 820px;
  background: radial-gradient(circle, rgba(79,209,229,.11), transparent 66%);
  animation: sp-suzul-5 64s ease-in-out infinite alternate;
}
@keyframes sp-suzul-4 { from { opacity: .6; } to { opacity: 1; } }
@keyframes sp-suzul-5 { from { opacity: .7; } to { opacity: 1; } }

/* İnce ızgara dokusu — çok silik, derinlik hissi verir */
.bg::after {
  content: ""; position: absolute; inset: -10%;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 72%);
  animation: sp-izgara 90s linear infinite;
}
@keyframes sp-izgara { from { background-position: 0 0; } to { background-position: 68px 68px; } }

/* ---------- Azaltılmış hareket: her şey durur ---------- */
@media (prefers-reduced-motion: reduce) {
  .bg span:nth-child(4), .bg span:nth-child(5) { animation: none; }
  .bg::after { animation: none; }
  .hero__tag i, .plan__tag { animation: none; }
  .ilerleme { display: none; }
  .btn::after { display: none; }
  .faq details[open] p { animation: none; }
}

/* =========================================================================
   ANA SAYFA — yeni tasarım diline geçiş (2026 güncellemesi)
   Kaynak: design_handoff'taki prototip (anasayfa.dc.html). Aşağıdaki sınıflar
   yalnız index.html'de kullanılır; site jetonlarından (renk, boşluk, yarıçap)
   beslenir, yeni hex renk YOK. Animasyon adları prototipteki adlarla birebir
   aynı tutuldu: sp-scan, sp-blink, sp-float, sp-drift, sp-spark. Prototipte
   tanımlı olup gövdede hiçbir öğeye bağlı olmayan sp-flow, sp-dash, sp-swing
   burada uygulanmadı (rapor'da not edildi).
   ========================================================================= */

@keyframes sp-scan  { 0% { transform: translateY(-100%); } 100% { transform: translateY(900%); } }
@keyframes sp-blink { 0%, 45% { opacity: 1; } 50%, 95% { opacity: .15; } 100% { opacity: 1; } }
@keyframes sp-float  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes sp-drift  { 0% { background-position: 0 0; } 100% { background-position: 60px 0; } }
@keyframes sp-spark  { 0% { opacity: 0; transform: translateX(-6px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(26px); } }

/* ---------- Hero: vurgulu ifade altı şerit + onay rozeti ---------- */
.hero h1 em { position: relative; white-space: nowrap; }
.hero h1 em::before {
  content: ""; position: absolute; z-index: -1; left: -.04em; right: -.04em; bottom: .08em; height: .26em;
  background: var(--coral); opacity: .3; border-radius: 2px;
}
.hero__trust--check li { display: flex; align-items: center; gap: var(--s8); }
.hero__trust--check li + li::before { content: none; }
.check {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 16px; height: 16px; border-radius: 50%;
  /* Açık yeşil zeminde --ok (parlak yeşil) 1.73 kontrasttaydı; işaret
     sönük kalıyordu. Zemin korunup boya koyulaştırıldı. */
  background: rgba(94, 201, 138, .18); color: #1c6b41;
  font-size: 10px; font-weight: 700;
}
.blink-dot {
  display: inline-block; width: 6px; height: 6px; margin-inline-end: var(--s6);
  border-radius: 50%; background: var(--ok); vertical-align: middle;
  animation: sp-blink 1.6s ease-in-out infinite;
}
/* Gösterge rozeti: tasarımda çerçevenin dışına taşar. Kapsayıcısı artık
   .frame değil, kırpmayan .frame__wrap (bkz. "Tarayıcı çerçevesi") — negatif
   right/bottom ile sağ-alt köşeden dışarı sarkar. Dar ekranda (frame tek
   sütuna inip genişliği daraldığında) taşma payı önce küçülür, 760px altında
   rozet tamamen gizlenir (yer yok). */
.frame__badge {
  position: absolute; right: -44px; bottom: -48px; width: 150px;
  padding: var(--s12); background: var(--ink-2); border: 1px solid var(--line-dark);
  border-radius: var(--r-card); box-shadow: 0 20px 40px rgba(0, 0, 0, .5);
  animation: sp-float 6s ease-in-out infinite;
}
.frame__badge-tag { display: flex; align-items: center; font: 400 9.5px/1 var(--mono); letter-spacing: .08em; color: var(--ok); }
.frame__badge-title { display: block; margin-top: var(--s8); font: 600 13px/1.3 var(--body); color: var(--on-dark); }
.frame__badge-code { display: block; margin-top: var(--s4); font: 400 10.5px/1.4 var(--mono); color: var(--on-dark-4); }
@media (max-width: 900px) { .frame__badge { right: -16px; bottom: -16px; } }
@media (max-width: 760px) { .frame__badge { display: none; } }

/* ---------- Sayısal şerit: dikey ayraçlar ---------- */
.stats__in .stat + .stat { border-left: 1px solid var(--line-dark); padding-left: var(--s24); }
@media (max-width: 780px) { .stats__in .stat + .stat { border-left: none; padding-left: 0; } }

/* ---------- Ürün: "tek okuma, üç süreç" akış şeridi ---------- */
.flow {
  margin-top: clamp(28px, 4vw, 40px);
  display: grid; grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
  gap: var(--s32); align-items: center;
  padding: clamp(20px, 3vw, 32px);
  background: var(--cream-card-alt); border: 1px solid var(--cream-line); border-radius: var(--r-card);
}
.flow__badge { display: grid; gap: var(--s12); justify-items: center; text-align: center; }
.flow__badge-ico { position: relative; width: 64px; height: 82px; border-radius: var(--r-sm); background: var(--accent); overflow: hidden; }
.flow__badge-ico::before { content: ""; position: absolute; left: 14px; right: 14px; top: 14px; height: 4px; border-radius: 2px; background: var(--coral); }
.flow__badge-ico::after {
  content: ""; position: absolute; left: 0; right: 0; top: -20%; height: 20%;
  background: linear-gradient(rgba(4, 34, 42, .4), transparent);
  animation: sp-scan 3s linear infinite;
}
.flow__badge span:last-child { font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-cream-2); }
.flow__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s16); }
.flow__step { position: relative; background: var(--cream-card); border: 1px solid var(--cream-line); border-radius: var(--r-card); padding: var(--s16); }
.flow__step + .flow__step::before {
  content: ""; position: absolute; left: -9px; top: 50%; width: 18px; height: 2px;
  background: var(--coral); animation: sp-spark 2.4s ease-in-out infinite;
}
.flow__num {
  display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 22px;
  padding-inline: var(--s8); border-radius: var(--r-sm);
  /* Tasarım açık mavi çip üzerine mavi sayı kullanıyor; koyu çip açık temada
     3.19 kontrastta sönük kalıyordu (ölçüldü). */
  background: var(--cip-zemin); color: var(--accent);
  font: 500 11px/1 var(--mono); letter-spacing: .06em;
}
.flow__step h3 { margin-top: var(--s12); font-size: 16px; }
.flow__step p { margin-top: var(--s6); font-size: 13.5px; line-height: 1.55; color: var(--on-cream-2); }
@media (max-width: 760px) {
  .flow { grid-template-columns: 1fr; }
  .flow__badge-ico { margin-inline: auto; }
  .flow__steps { grid-template-columns: 1fr; }
  .flow__step + .flow__step::before { display: none; }
}

/* ---------- Terminal: nokta dokusu + kiosk okuma/onay canlanması ---------- */
.dotted { position: relative; }
.dotted::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .16;
  background-image: radial-gradient(var(--on-dark-4) 1px, transparent 1px);
  background-size: 26px 26px;
}
.dotted > .wrap { position: relative; z-index: 1; }
.kiosk__screen--scan { position: relative; overflow: hidden; }
.kiosk__screen--scan::after {
  content: ""; position: absolute; left: 0; right: 0; top: -20%; height: 20%;
  background: linear-gradient(rgba(242, 116, 140, .35), transparent);
  animation: sp-scan 3.4s linear infinite; pointer-events: none;
}

/* ---------- Fiyatlandırma: vurgulu not (alıntı bandı) ---------- */
.note--quote {
  padding: var(--s16) var(--s20); background: rgba(255, 255, 255, .03);
  border-left: 3px solid var(--coral); border-radius: 0 var(--r-card) var(--r-card) 0;
  max-width: none; font-size: 14.5px; line-height: 1.65; color: var(--on-dark-2);
}
.note--quote strong { color: var(--on-dark); }
.section--cream .note--quote { background: var(--cream-card-alt); color: var(--on-cream-2); }
.section--cream .note--quote strong { color: var(--on-cream); }

/* ---------- Teklif bölümü: kayan ızgara zemini ---------- */
.drift { position: relative; overflow: hidden; }
.drift::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .5;
  background-image: linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size: 60px 100%;
  animation: sp-drift 14s linear infinite;
  mask-image: radial-gradient(100% 80% at 50% 100%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(100% 80% at 50% 100%, #000, transparent 70%);
}
.drift > .wrap { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .blink-dot,
  .kiosk__screen--scan::after,
  .flow__badge-ico::after,
  .flow__step + .flow__step::before,
  .frame__badge,
  .drift::before { animation: none; }
}

/* =========================================================================
   AÇIK TEMA — yalnız ana sayfa (body.tema-acik)

   Yalnız ana sayfa prototipin açık teması ile eşleşsin diye eklendi; diğer
   40+ sayfa koyu temada kalır (bu sınıf yalnız site/pages/index.html'de
   meta.bodyClass ile basılır). Aşağıda önce jetonlar yeniden tanımlanır —
   bileşen kuralları zaten jeton üzerinden çalıştığı için otomatik döner.
   Ardından, jeton ÜZERİNDEN çalışmayan (sabit rgba yazılmış) birkaç kural
   için, yine yalnız bu kapsamda geçerli minimum düzeltmeler gelir: .bg
   katmanı, .nav saydamlığı, hero ışıması, ghost düğme kenarlığı, ikincil
   bölüm zemini (.section--ink2), öne çıkan paket halkası; ve son olarak
   KOYU KALAN iki yüzey — terminal maketi (.kiosk) ile footer — kendi
   metin jetonlarını yerelde eski (koyu tema) değerlerine sabitler, aksi
   halde açık temanın koyu metni bu koyu yüzeylerde kaybolur.
   ========================================================================= */

body.tema-acik {
  /* Tasarımın çipi #dbe9f3 idi ama 11 px mavi yazıyla 4.45 veriyordu; en az
     miktarda açılarak AA eşiği geçildi. Ölçüm: 4.53. */
  --cip-zemin: #deebf4;
  /* Component/`.bg` bölümündeki sonraki `body { background: transparent; }`
     kuralı (0,0,1) bu seçicinin (0,1,1) özgüllüğü altında kalır; `body`nin
     KENDİ zemini de böylece açık olur — `.bg` katmanı yine üstünde ışımaları
     çizer, ikisi çakışmaz (renkleri zaten örtüşüyor). */
  background: #f7f9fb;
  --ink:            #f7f9fb;
  --ink-2:          #f2f5f8;
  --surface:        #ffffff;
  --line-dark:      #d5dde5;

  --on-dark:        #0f2233;
  --on-dark-2:      #45566a;
  --on-dark-3:      #58697d;
  /* Ölçüldü (contrast-audit.mjs): #63748a, --ink-2 (#f2f5f8) zemininde 4.37 —
     AA (4.5) altında kalıyordu. Tonu korunarak en az miktarda koyulaştırıldı. */
  --on-dark-4:      #5f6f84;

  --cream:          #eef2f6;
  --cream-card:     #ffffff;
  --cream-line:     #d5dde5;

  --accent:         #0e6ea8;
  --accent-hover:   #0b567f;
  --on-accent:      #ffffff;

  /* Hero pano maketi (Reddedilen / Açık alarm rakamları): kök --coral
     (#f2748c) küçük punto metinde beyaz/açık zeminde AA'yı geçmiyordu.
     Ölçüldü (contrast-audit.mjs): 2.74 (--surface) / 2.51 (--ink-2).
     Tonu koruyarak koyulaştırılmış ayrı bir jeton: 7.14 / 6.53. */
  --danger:         #a81f42;
}

/* ---------- Arka plan katmanı: ışımalar, koyu zemin değil ---------- */
body.tema-acik .bg { background: linear-gradient(180deg, #e6edf3 0%, #f7f9fb 82%); }
body.tema-acik .bg span:nth-child(1) {
  background: radial-gradient(70% 90% at 12% -10%, rgba(26,117,173,.20), transparent 60%);
}
body.tema-acik .bg span:nth-child(2) {
  background: radial-gradient(60% 80% at 88% 0%, rgba(226,101,126,.18), transparent 62%);
}
body.tema-acik .bg span:nth-child(3) {
  background: radial-gradient(50% 60% at 55% 18%, rgba(140,98,201,.10), transparent 70%);
}
body.tema-acik .bg span:nth-child(4) { background: radial-gradient(circle, rgba(26,117,173,.06), transparent 66%); }
body.tema-acik .bg span:nth-child(5) { background: radial-gradient(circle, rgba(226,101,126,.05), transparent 66%); }
body.tema-acik .bg::after {
  background-image:
    linear-gradient(rgba(15,34,51,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,34,51,.05) 1px, transparent 1px);
}

/* ---------- Nav: saydam beyaz + blur ---------- */
body.tema-acik .nav { background: rgba(255,255,255,.78); }
body.tema-acik .nav--kucuk { background: rgba(255,255,255,.92); box-shadow: 0 8px 30px rgba(15,34,51,.12); }

/* ---------- Hero ışıması: mavi → pembe ---------- */
body.tema-acik .hero::before { background: radial-gradient(circle, rgba(26,117,173,.20), transparent 68%); }
body.tema-acik .hero::after  { background: radial-gradient(circle, rgba(226,101,126,.18), transparent 68%); }

/* Gösterge rozeti: --ink-2 artık açık zemin, sabit --ok yeşili üstünde okunmuyordu.
   Ölçüldü (contrast-audit.mjs): 1.88 → ton korunarak koyulaştırıldı: 4.61. */
body.tema-acik .frame__badge-tag { color: #2a7d4c; }
body.tema-acik .hero__tag { background: #fff; border-color: rgba(14,110,168,.35); }

/* ---------- Ghost düğme: koyu zeminin saydam-beyaz kenarlığı açık zeminde görünmezdi ---------- */
body.tema-acik .btn--ghost { border-color: var(--line-dark); }

/* ---------- İkincil bölüm zemini: rgba(10,17,26,.74) jeton değil, sabit koyu yazılmıştı ---------- */
body.tema-acik .section--ink2 { background: var(--ink-2); }

/* ---------- Fiyatlandırma: öne çıkan paket halkası yeni vurguya göre ---------- */
body.tema-acik .plan--featured { box-shadow: 0 0 0 1px rgba(14,110,168,.35), 0 24px 60px rgba(15,34,51,.18); }

/* ---------- Teklif formu: koyu-tema girdi zemini (#0a121b) açık temada metni yutuyordu ---------- */
body.tema-acik .field input, body.tema-acik .field select {
  background: #ffffff; border-color: var(--line-dark);
}

/* ---------- Alt sayfa şablonu: jeton üzerinden ÇALIŞMAYAN (sabit rgba yazılmış)
   birkaç bileşen kuralı için, ana sayfadaki .hero/.bg ışıması ile aynı ton
   dönüşümü (eski camgöbeği #4fd1e5 → yeni mavi #0e6ea8 ailesi) uygulanır. ---------- */

/* Sayfa hero'su ışıması: .hero::before ile aynı mavi ışıma, ana sayfadaki gibi. */
body.tema-acik .phero::before { background: radial-gradient(circle, rgba(26,117,173,.20), transparent 68%); }

/* Veri maketi rozeti (bilgi): metin artık yeni vurgu mavisi, zemin de aynı aileden olmalı. */
body.tema-acik .tag--info { background: rgba(14,110,168,.12); }

/* Sorun kartı etiketi ve "reddedildi" rozeti: --coral açık/pastel zeminde
   (kart/rozet zemini) AA'yı geçmiyordu. Ölçüldü (contrast-audit.mjs):
   2.48 (.problem span) / 2.40 (.tag--deny) → --danger jetonu (zaten hero
   panosu için aynı sebeple tonu korunarak koyulaştırılmıştı) yeniden
   kullanıldı: 6.45 / 6.27. */
body.tema-acik .problem span,
body.tema-acik .tag--deny { color: var(--danger); }

/* "Tamamlandı" rozeti: --ok açık pastel zeminde okunmuyordu (1.87). Aynı
   tonu korunarak koyulaştırılmış değer .frame__badge-tag'te zaten var
   (bu dosyada birkaç satır yukarıda): 4.59. */
body.tema-acik .tag--ok { color: #2a7d4c; }

/* "Uyarı" / "degraded" rozeti: --warn açık pastel zeminde okunmuyordu (1.58).
   Tonu koruyarak koyulaştırıldı: 4.74. */
body.tema-acik .tag--warn { color: #8d680c; }

/* CTA bandı: eski camgöbeği/mor/mercan gradyanı ve kenarlığı sabitti; ana sayfanın
   ışıma paletiyle aynı ton dönüşümü, açık zeminde okunur kalması için biraz artırılmış
   opaklıkla. */
body.tema-acik .ctaband {
  background: linear-gradient(135deg, rgba(26,117,173,.14), rgba(155,122,230,.10) 55%, rgba(226,101,126,.12));
  border-color: rgba(26,117,173,.30);
}

/* ---------- Terminal maketi: fiziksel ekran koyu kalır (tasarımda da öyle);
   içindeki metin sayfa jetonuna değil kendi sabit koyu-tema rengine bağlanır ---------- */
body.tema-acik .kiosk { color: #eef3f7; }
body.tema-acik .kiosk__bar { color: #7e94a5; }
body.tema-acik .kiosk__sub { color: #a9bccb; }

/* ---------- Footer koyu kalır (tasarımda da öyle); metin jetonları yerelde
   eski koyu-tema değerlerine sabitlenir, aksi halde açık temanın koyu metni
   koyu footer zemininde kaybolur ---------- */
body.tema-acik .foot {
  color: #a9bccb;
  --on-dark:   #eef3f7;
  --on-dark-2: #a9bccb;
  --on-dark-3: #7e94a5;
  --on-dark-4: #6b8296;
}