/* ===========================================================================
   bilirkisiportal.net — tanıtım sayfası
   ortak palet (metalik grafit + gümüş, buzlu cam),
   hero portal giriş panelinin koyu grafiti. Yalnızca açık tema. Altın YOK.
   =========================================================================== */

:root {
  color-scheme: only light;
  --bg: #f5f5f6;
  --surface: #fafafa;
  --text: #18181b;
  --text-soft: #3f3f46;
  --muted: #71717a;
  --border: #e4e4e7;

  --graphite-1: #4a4e57;
  --graphite-2: #34373e;
  --graphite-3: #23252a;
  --graphite-4: #1b1c20;
  --graphite-grad: linear-gradient(160deg, #4a4e57 0%, #34373e 45%, #23252a 100%);
  --graphite-deep-grad: linear-gradient(160deg, #1b1c20 0%, #121316 45%, #09090b 100%);
  --brushed: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px),
             radial-gradient(120% 50% at 0% 0%, rgba(255, 255, 255, 0.16), transparent 60%);
  --brushed-soft: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 3px),
                  radial-gradient(110% 40% at 0% 0%, rgba(255, 255, 255, 0.06), transparent 60%);
  --silver-grad: linear-gradient(180deg, #ffffff 0%, #e4e7ec 45%, #a9b0ba 100%);
  --silver-line: linear-gradient(90deg, #4a4e57, #a9b0ba);
  --ink-accent: #4a4e57;

  --ok: #047857;           /* emerald-700 — açık zeminde okunur */
  --ok-bg: rgba(16, 185, 129, 0.14);
  --ok-on-dark: #6ee7b7;
  --warn: #92400e;
  --warn-bg: rgba(245, 158, 11, 0.1);

  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-bg-strong: rgba(255, 255, 255, 0.76);
  --glass-border: rgba(24, 24, 27, 0.09);
  --glass-ring: rgba(255, 255, 255, 0.8);
  --glass-shadow: inset 0 1px 0 var(--glass-ring), 0 1px 2px rgba(24, 24, 27, 0.04), 0 12px 32px -14px rgba(24, 24, 27, 0.2);
  --glass-shadow-hover: inset 0 1px 0 var(--glass-ring), 0 22px 44px -16px rgba(24, 24, 27, 0.3), 0 8px 20px -8px rgba(24, 24, 27, 0.16);

  --glass-blur: 22px;
  --shadow-lg: 0 20px 48px rgba(24, 24, 27, 0.16);
  --radius: 16px;
  --radius-lg: 24px;
  --maxw: 1120px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; scrollbar-gutter: stable;
  /* Safari yaylanma alanı koyu: WebKit html + body arka plan RENKLERİNİ bindirir → body'nin açık zemini renk değil görsel */
  background: #121316; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

body {
  margin: 0; padding: 68px 0 0;   /* menü 68 */
  font-family: var(--font); color: var(--text); background: linear-gradient(var(--bg), var(--bg));
  position: relative; z-index: 0;  /* body::before (z-index:-2) body zemininin üstünde kalsın */
  line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60% 50% at 8% 12%, rgba(148, 163, 184, 0.24), transparent 62%),
    radial-gradient(50% 45% at 94% 6%, rgba(169, 176, 186, 0.2), transparent 62%),
    radial-gradient(55% 50% at 80% 94%, rgba(113, 113, 122, 0.18), transparent 62%),
    radial-gradient(45% 40% at 0% 100%, rgba(56, 189, 248, 0.07), transparent 60%);
}
::selection { background: rgba(74, 78, 87, 0.22); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
:focus-visible { outline: 2px solid var(--graphite-1); outline-offset: 3px; border-radius: 6px; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.section { padding: 96px 0; }
.section--tint {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(228, 228, 231, 0.32));
  border-top: 1px solid rgba(255, 255, 255, 0.7); border-bottom: 1px solid rgba(24, 24, 27, 0.05);
}
.eyebrow {
  display: inline-block; margin: 0 0 12px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-accent);
}
.eyebrow::before {
  content: ""; display: inline-block; vertical-align: middle; width: 22px; height: 2px;
  margin: -2px 10px 0 0; border-radius: 2px; background: var(--silver-line);
}
.section-title { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 14px; }
.section-lead { color: var(--muted); max-width: none; margin: 0 0 44px; font-size: 1.02rem; text-align: justify; hyphens: auto; }

/* ---------- Düğmeler ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 46px; padding: 0 22px; border-radius: 12px;
  font: 600 0.95rem/1 var(--font); white-space: nowrap; cursor: pointer;
  border: 1px solid transparent; transition: transform 0.16s, box-shadow 0.16s, background 0.16s, border-color 0.16s;
}
.btn:hover { transform: translateY(-1px); }
.btn--silver {
  color: var(--graphite-4); background: var(--silver-grad); border-color: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 0 #fff, 0 10px 26px -10px rgba(0, 0, 0, 0.6);
}
.btn--ghost {
  color: #f4f4f5; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.36); }
.btn--outline {
  color: var(--graphite-3); background: var(--glass-bg-strong); border-color: var(--glass-border); box-shadow: var(--glass-shadow);
}
.btn--outline:hover { box-shadow: var(--glass-shadow-hover); }
.btn--nav {
  min-height: 38px; padding: 0 16px; border-radius: 10px; font-size: 0.86rem;
  color: #f4f4f5; background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.22);
}
.btn--nav:hover { background: rgba(255, 255, 255, 0.14); transform: none; }

/* ---------- Navbar (ana siteyle aynı grafit bar) ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 55;
  background: var(--brushed-soft), linear-gradient(160deg, rgba(56, 59, 66, 0.94) 0%, rgba(39, 41, 47, 0.95) 45%, rgba(25, 26, 30, 0.96) 100%);
  -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px -12px rgba(9, 9, 11, 0.45);
}
.nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(228, 231, 236, 0.45) 50%, transparent);
}
.nav__inner { position: relative; display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: flex; align-items: center; gap: 12px; flex: 0 1 auto; min-width: 0; }
/* Bilirkişi Portal logosu (2026-10-26): Bilirkişi Portal küresi + "Bilirkişi Portal — by GNGR Labs" yazısı. Küre, yazının yalnız
   "Bilirkişi Portal" satırına ortalanır (SVG'de bu satır yüksekliğin %3,5–%69,5'i → merkez %36,5); görseller kırpılmaz, yalnız boyutlanır. */
.brand { --bp-h: 30px; --kure: 25px; align-items: flex-start; gap: 9px; }
.brand__bp { display: block; height: var(--bp-h); width: auto; max-width: none; }
.brand__kure { display: block; flex: 0 0 auto; width: var(--kure); height: var(--kure); margin-top: calc(var(--bp-h) * 0.365 - var(--kure) / 2); filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4)); }
.brand__logo { width: 40px; height: 40px; object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35)); }
.brand__text { display: flex; flex-direction: column; min-width: 0; }
.brand__name, .brand__title { -webkit-background-clip: text; background-clip: text; color: transparent; background-image: var(--silver-grad); white-space: nowrap; }
.brand__name { font-size: 1.28rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.005em; }
.brand__title {
  font-size: 0.585rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.075em;
  margin-top: 2px; padding-top: 3px; border-top: 1px solid rgba(228, 231, 236, 0.28);
}
.nav__links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav__links a {
  color: #d4d4d8; font-size: 0.9rem; font-weight: 500; padding: 8px 12px; border-radius: 8px;
  transition: color 0.16s, background 0.16s;
}
.nav__links a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.nav__links .nav__links-portal { display: none; }
.nav__actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.nav__toggle {
  display: none; width: 42px; height: 42px; padding: 0; border-radius: 10px; cursor: pointer;
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.2);
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.nav__toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: #e4e7ec; transition: transform 0.18s, opacity 0.18s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Hero (portal giriş panelinin koyu grafiti) ---------- */
.hero {
  position: relative; overflow: hidden; color: #f4f4f5;
  background: var(--brushed), var(--graphite-deep-grad);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.hero__waves { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(255, 255, 255, 0.09); pointer-events: none; }
.hero__inner {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 56px; align-items: center; padding-top: 88px; padding-bottom: 96px;
}
.hero__badge {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 22px; padding: 7px 14px; border-radius: 999px;
  font-size: 0.82rem; font-weight: 600; color: #e4e4e7;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
}
.hero__badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18); }
.hero__title {
  margin: 0 0 20px; font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em;
  background: var(--silver-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__title span { display: block; }
.hero__lead { margin: 0 0 32px; font-size: 1.08rem; color: #c8cacf; text-align: justify; hyphens: auto; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; padding: 0; list-style: none; font-size: 0.86rem; color: #a1a1aa; }
.hero__facts li { display: inline-flex; align-items: center; gap: 7px; }
.hero__facts svg { color: var(--ok-on-dark); }

/* ---------- Hero: dosya teslimi gösterimi (CSS animasyonu; hareket azaltılınca son hâl) ---------- */
.hero__glow { position: absolute; right: -10%; top: -30%; width: 60%; height: 120%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(169, 176, 186, 0.16), transparent 70%); }
.verify {
  position: relative; margin: 0; padding: 22px; border-radius: var(--radius-lg); color: var(--text);
  background: rgba(250, 250, 250, 0.97); border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 #fff, 0 40px 80px -30px rgba(0, 0, 0, 0.8), 0 0 0 8px rgba(255, 255, 255, 0.04);
}
.verify__head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px dashed var(--border); }
.verify__head strong { display: block; font-size: 0.98rem; }
.verify__head small { color: var(--muted); font-size: 0.78rem; }
.verify__icon, .receipt__icon {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; color: #f4f4f5; flex: 0 0 auto;
  background: var(--brushed), var(--graphite-grad); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.verify__state { position: relative; margin-left: auto; height: 26px; min-width: 128px; }
.verify__state span { position: absolute; right: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; white-space: nowrap; }
.verify__state .is-run { color: var(--graphite-1); background: rgba(74, 78, 87, 0.08); animation: v-run 9s infinite; }
.verify__state .is-run::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: v-spin 0.8s linear infinite; }
.verify__state .is-ok { color: var(--ok); background: var(--ok-bg); opacity: 0; animation: v-ok 9s infinite; }
.verify__state .is-ok::before { content: "✓"; font-weight: 800; }
.verify__file { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.verify__ficon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: var(--graphite-2); background: #f1f1f3; box-shadow: inset 0 0 0 1px var(--border); flex: 0 0 auto; }
.verify__fmeta { display: grid; min-width: 0; line-height: 1.35; }
.verify__fmeta b { font-size: 0.9rem; }
.verify__fmeta small { font-size: 0.78rem; color: var(--muted); }
.verify__pct { margin-left: auto; font: 700 0.82rem var(--mono); color: var(--graphite-2); }
.verify__pct::after { content: "100%"; animation: v-pct 9s steps(1) infinite; }
.verify__bar { height: 6px; margin: 12px 0 18px; border-radius: 999px; background: #ececef; overflow: hidden; }
.verify__bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #4a4e57, #a9b0ba); transform-origin: left; animation: v-bar 9s ease-in-out infinite; }
.verify__cols { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; }
.verify__col { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: #f6f6f7; box-shadow: inset 0 0 0 1px var(--border); min-width: 0; }
.verify__where { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.verify__hash { display: grid; gap: 2px; min-width: 0; animation: v-hash 9s infinite; }
.verify__hash em { font-style: normal; font-size: 0.7rem; font-weight: 600; color: var(--muted); }
.verify__hash code { font: 500 0.78rem var(--mono); color: var(--graphite-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.verify__col + .verify__eq + .verify__col .verify__hash { animation-delay: 0.35s; }
.verify__eq { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: #10b981; box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.14); animation: v-eq 9s infinite; }
.verify__foot { margin-top: 16px; font-size: 0.8rem; line-height: 1.55; color: var(--muted); }
.verify__foot b { color: var(--text-soft); }
@keyframes v-bar { 0% { transform: scaleX(0); } 45%, 100% { transform: scaleX(1); } }
@keyframes v-pct { 0% { content: "0%"; } 10% { content: "21%"; } 20% { content: "46%"; } 30% { content: "73%"; } 40% { content: "94%"; } 45%, 100% { content: "100%"; } }
@keyframes v-hash { 0%, 46% { opacity: 0.18; filter: blur(2px); } 56%, 100% { opacity: 1; filter: none; } }
@keyframes v-eq { 0%, 62% { opacity: 0; transform: scale(0.6); } 70%, 100% { opacity: 1; transform: none; } }
@keyframes v-run { 0%, 68% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes v-ok { 0%, 68% { opacity: 0; } 72%, 100% { opacity: 1; } }
@keyframes v-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .verify__bar i, .verify__hash, .verify__eq, .verify__state .is-run, .verify__state .is-ok, .verify__pct::after { animation: none !important; }
  .verify__state .is-run { opacity: 0; } .verify__state .is-ok { opacity: 1; }
}

/* Örnek tutanak kartı (Güvence bölümünde) */
.receipt {
  margin: 0; padding: 22px; border-radius: var(--radius-lg); color: var(--text);
  background: rgba(250, 250, 250, 0.97); border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 #fff, 0 40px 80px -30px rgba(0, 0, 0, 0.85), 0 0 0 8px rgba(255, 255, 255, 0.04);
}
.receipt__head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px dashed var(--border); }
.receipt__head strong { display: block; font-size: 0.98rem; }
.receipt__head small { color: var(--muted); font-size: 0.78rem; }
.receipt__head .chip { margin-left: auto; }
.receipt__rows { margin: 0; padding-top: 6px; }
.receipt__rows > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid #f0f0f2; font-size: 0.86rem; }
.receipt__rows dt { color: var(--muted); }
.receipt__rows dd { margin: 0; font-weight: 600; text-align: right; }
.receipt__hash { flex-direction: column; gap: 6px !important; }
.receipt__hash dd { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; }
.receipt__hash code { font: 500 0.84rem var(--mono); padding: 4px 8px; border-radius: 6px; background: #f4f4f5; color: var(--graphite-3); overflow: hidden; text-overflow: ellipsis; }
.receipt__foot { margin-top: 14px; font-size: 0.8rem; line-height: 1.55; color: var(--muted); }

.chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; white-space: nowrap; font-size: 0.74rem; font-weight: 700; }
.chip--ok { color: var(--ok); background: var(--ok-bg); }
.chip--ok::before { content: "✓"; font-weight: 800; }
.chip--sm { padding: 3px 8px; font-size: 0.7rem; }

/* ---------- Güven şeridi: hero'nun altına taşan buzlu cam kart ---------- */
.trust { position: relative; z-index: 2; margin-top: -54px; }
.trust__list {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 6px; list-style: none;
  border-radius: 20px; background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  box-shadow: inset 0 1px 0 #fff, 0 24px 50px -24px rgba(9, 9, 11, 0.45), 0 2px 6px rgba(24, 24, 27, 0.05);
}
.trust__list li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 18px 10px 16px; min-width: 0; }
.trust__list li + li { border-left: 1px solid rgba(24, 24, 27, 0.07); }
.trust__list svg {
  width: 38px; height: 38px; padding: 9px; border-radius: 11px; color: #f4f4f5;
  background: var(--brushed), var(--graphite-grad); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 6px 14px -8px rgba(24, 24, 27, 0.6);
}
.trust__list span { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.35; }
.trust__list b { font-size: 0.84rem; font-weight: 700; color: var(--text); }
.trust__list small { font-size: 0.76rem; color: var(--muted); }
.trust + .section { padding-top: 88px; }

/* ---------- Görünür olunca beliren bloklar (main.js html.js ekler; betik yoksa her şey görünür) ---------- */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.js .rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; } }

/* ---------- Hizmetler: betiksiz 2×2 kart; main.js ile sekmeli tek geniş kart ---------- */
.head { max-width: 760px; }
.head .section-lead { text-align: left; }
.services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.service, .step {
  position: relative; border-radius: var(--radius); background: var(--glass-bg);
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
}
.service { display: flex; flex-direction: column; padding: 26px 26px 22px; }
.service__icon, .assure__icon {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; margin-bottom: 16px; color: #f4f4f5; flex: 0 0 auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 18px -8px rgba(24, 24, 27, 0.55);
}
.tone-slate { background: var(--brushed), linear-gradient(160deg, #64748b, #334155); }
.tone-steel { background: var(--brushed), linear-gradient(160deg, #5b6573, #2f3640); }
.tone-zinc { background: var(--brushed), linear-gradient(160deg, #71717a, #3f3f46); }
.tone-graphite { background: var(--brushed), var(--graphite-grad); }
.service h3, .step h3 { margin: 0 0 12px; font-size: 1.08rem; font-weight: 700; letter-spacing: -0.01em; }
.service ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.service li { position: relative; padding-left: 18px; font-size: 0.92rem; color: var(--muted); }
.service li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 6px; height: 6px; border-radius: 2px; background: var(--graphite-1); }
.service li b { color: var(--text-soft); font-weight: 600; }
.service__ex { margin-top: auto; padding-top: 18px; }
.service > ul + .service__ex { border-top: 1px dashed var(--border); margin-top: 18px; }
.service__ex > span { display: block; margin-bottom: 9px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.service .service__ex ul { display: flex; flex-wrap: wrap; gap: 7px; }
.service .service__ex li { padding: 5px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 500; color: var(--text-soft); background: rgba(255, 255, 255, 0.8); border: 1px solid var(--glass-border); }
.service .service__ex li::before { content: none; }
/* Sekmeli görünüm */
.svc-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; padding: 0; }
.svc-tab {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; cursor: pointer; text-align: left;
  font: 600 0.92rem/1.3 var(--font); color: var(--text-soft);
  background: rgba(255, 255, 255, 0.55); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
  transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.svc-tab .service__icon { width: 38px; height: 38px; margin: 0; border-radius: 11px; }
.svc-tab .service__icon svg { width: 18px; height: 18px; }
.svc-tab:hover { transform: translateY(-1px); box-shadow: var(--glass-shadow-hover); }
.svc-tab[aria-selected="true"] { color: #f4f4f5; background: var(--brushed), var(--graphite-grad); border-color: rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 16px 30px -16px rgba(9, 9, 11, 0.7); }
.svc-tab[aria-selected="true"] .service__icon { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
/* Dört kart aynı hücrede üst üste: alan her zaman en uzun kartın yüksekliğinde, sekme değişince sayfa kaymaz */
.services.is-tabbed { display: grid; grid-template-columns: minmax(0, 1fr); }
.services.is-tabbed .service {
  grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 40px;
  padding: 34px 36px; visibility: hidden; opacity: 0; transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.services.is-tabbed .service.is-active { visibility: visible; opacity: 1; transition: opacity 0.3s ease, visibility 0s; }
.services.is-tabbed .service > .service__icon { display: none; }
.services.is-tabbed .service > h3 { grid-column: 1; font-size: 1.35rem; margin-bottom: 18px; }
.services.is-tabbed .service > ul { grid-column: 1; gap: 14px; align-content: start; }
.services.is-tabbed .service > ul li { font-size: 0.97rem; }
.services.is-tabbed .service > .service__ex { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding: 22px; border: 0; border-radius: 16px; background: rgba(255, 255, 255, 0.6); box-shadow: inset 0 0 0 1px var(--glass-border); align-self: start; }
.services.is-tabbed .service .service__ex ul { flex-direction: column; flex-wrap: nowrap; gap: 8px; }
.services.is-tabbed .service .service__ex li { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; font-size: 0.9rem; }
.services.is-tabbed .service .service__ex li::before { content: ""; position: static; width: 7px; height: 7px; border-radius: 2px; background: var(--graphite-1); flex: 0 0 auto; }

.note {
  display: flex; align-items: flex-start; gap: 10px; margin: 24px 0 0; padding: 14px 18px; border-radius: 12px;
  font-size: 0.9rem; color: var(--text-soft); background: rgba(255, 255, 255, 0.55); border: 1px solid var(--glass-border);
}
.note svg { margin-top: 3px; color: var(--graphite-1); }

/* ---------- Süreç: solda adımlar (zaman çizgisi), sağda kendiliğinden oynayan portal önizlemesi ---------- */
.flow__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
.flow__head .section-lead { text-align: left; margin-bottom: 0; }
.flow__legend { display: flex; gap: 8px; flex: 0 0 auto; padding-bottom: 6px; }
.flow { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 44px; align-items: start; }
.flow__cta { margin: 22px 0 0 64px; }
.btn--dark { color: #f4f4f5; background: var(--brushed), var(--graphite-grad); border-color: rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 14px 28px -14px rgba(9, 9, 11, 0.7); }
.btn--dark:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 18px 32px -14px rgba(9, 9, 11, 0.8); }
.who { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 2px; }
.who--you { color: var(--graphite-2); background: rgba(255, 255, 255, 0.9); box-shadow: inset 0 0 0 1px rgba(24, 24, 27, 0.14); }
.who--sgf { color: #f4f4f5; background: var(--graphite-grad); }
.step .who { margin-left: 6px; }
.step .who + .who { margin-left: 4px; }
.steps { position: relative; display: grid; gap: 12px; margin: 0; padding: 0 0 0 64px; list-style: none; }
.steps::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, #4a4e57, #a9b0ba 85%, transparent); }
.step { padding: 18px 22px; transition: box-shadow 0.25s, transform 0.25s, background 0.25s; }
.step h3 { margin-bottom: 6px; }
.step__no {
  position: absolute; left: -64px; top: 14px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  font-weight: 800; color: #f4f4f5; background: var(--brushed), var(--graphite-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 0 6px #f0f0f2, 0 10px 20px -10px rgba(24, 24, 27, 0.6);
  transition: transform 0.25s, background 0.25s, color 0.25s;
}
.step p { margin: 0; font-size: 0.92rem; color: var(--muted); }
/* Canlı mod (main.js): yalnız etkin adımın açıklaması açık; altında süre çubuğu */
.flow.is-live .step { cursor: pointer; padding: 14px 20px; }
.flow.is-live .step h3 { margin: 0; font-size: 1rem; color: var(--text-soft); transition: color 0.2s; }
.flow.is-live .step p { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.35s ease, opacity 0.35s ease, margin 0.35s ease; }
.flow.is-live .step p > span { overflow: hidden; }
.flow.is-live .step:not(.is-active) { background: rgba(255, 255, 255, 0.35); box-shadow: none; }
.flow.is-live .step:not(.is-active) .step__no { color: var(--graphite-2); background: #fff; box-shadow: inset 0 0 0 1px rgba(24, 24, 27, 0.14), 0 0 0 6px #f0f0f2; }
.flow.is-live .step:hover:not(.is-active) { background: rgba(255, 255, 255, 0.6); }
.flow.is-live .step.is-done .step__no { color: #f4f4f5; background: var(--graphite-grad); }
.flow.is-live .step.is-active { background: rgba(255, 255, 255, 0.92); box-shadow: var(--glass-shadow-hover); transform: translateX(4px); }
.flow.is-live .step.is-active h3 { color: var(--text); margin-bottom: 6px; }
.flow.is-live .step.is-active p { grid-template-rows: 1fr; opacity: 1; }
.flow.is-live .step.is-active .step__no { transform: scale(1.08); }
.step__bar { position: absolute; left: 20px; right: 20px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; overflow: hidden; opacity: 0; }
.step.is-active .step__bar { opacity: 1; }
.step__bar i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #4a4e57, #a9b0ba); }
.step.is-active .step__bar i { animation: step-bar var(--dur, 6.5s) linear forwards; }
.flow.is-paused .step.is-active .step__bar i { animation-play-state: paused; }
@keyframes step-bar { to { transform: scaleX(1); } }
.step:focus-visible { outline: 2px solid var(--graphite-1); outline-offset: 3px; }

/* Portal önizlemesi: tarayıcı çerçevesi */
.demo { position: sticky; top: 64px; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid rgba(24, 24, 27, 0.1); box-shadow: 0 40px 80px -36px rgba(9, 9, 11, 0.55), 0 0 0 8px rgba(255, 255, 255, 0.5); }
.demo__bar { display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 14px; background: var(--brushed-soft), linear-gradient(160deg, #3a3d44, #23252a); }
.demo__bar > i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); }
.demo__url { display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 0; margin-left: 10px; padding: 5px 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.72); font: 500 0.76rem var(--font); white-space: nowrap; overflow: hidden; }
.demo__url svg { color: #6ee7b7; }
.demo__path { font-weight: 500; color: rgba(255, 255, 255, 0.45); }
.demo__tag { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.7); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; }
.demo__body { position: relative; height: 452px; background: linear-gradient(180deg, #fafafa, #f4f4f5); }
.dm { position: absolute; inset: 0; padding: 22px 24px; visibility: hidden; opacity: 0; transition: opacity 0.35s ease, visibility 0s linear 0.35s; }
.dm.is-on { visibility: visible; opacity: 1; transition: opacity 0.35s ease, visibility 0s; }
.dm__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #ececef; }
.dm__head b { font-size: 1.02rem; }
.dm__head small { font-size: 0.76rem; color: var(--muted); }
.dm-seg { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 14px; border-radius: 9px; background: #ececef; font-size: 0.78rem; font-weight: 600; }
.dm-seg span { padding: 5px 12px; border-radius: 7px; color: var(--muted); }
.dm-seg .is-on { background: #fff; color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.dm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.dm-f { position: relative; display: grid; gap: 4px; font-size: 0.72rem; font-weight: 600; color: var(--muted); }
.dm-f--wide { grid-column: 1 / -1; }
.dm-f i { display: block; height: 34px; padding: 0 11px; border-radius: 9px; background: #fff; border: 1px solid #e4e4e7; font: 500 0.84rem/32px var(--font); font-style: normal; color: var(--text); white-space: nowrap; overflow: hidden; }
.dm-caret { position: absolute; right: 12px; bottom: 13px; width: 7px; height: 7px; border-right: 2px solid #a1a1aa; border-bottom: 2px solid #a1a1aa; transform: rotate(45deg); }
.dm-check { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 0.82rem; color: var(--text-soft); }
.dm-box { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; color: #fff; background: var(--graphite-grad); }
.dm-btn { display: inline-flex; margin-top: 14px; padding: 9px 16px; border-radius: 10px; color: #f4f4f5; font-size: 0.82rem; font-weight: 600; background: var(--brushed), var(--graphite-grad); box-shadow: 0 8px 18px -10px rgba(9, 9, 11, 0.7); }
.dm-toast { position: relative; display: flex; margin-top: 14px !important; align-items: center; gap: 9px; margin: 0; padding: 11px 14px; border-radius: 12px; font-size: 0.82rem; color: #065f46; background: #ecfdf5; border: 1px solid rgba(16, 185, 129, 0.3); box-shadow: 0 14px 30px -18px rgba(4, 120, 87, 0.6); }
.dm-ok { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; background: #10b981; flex: 0 0 auto; }
.dm-sum { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 11px 14px; border-radius: 11px; background: #fff; border: 1px dashed #d4d4d8; font-size: 0.8rem; color: var(--muted); }
.dm-sum b { font-size: 0.95rem; color: var(--text); }
.dm-sum small { margin-left: auto; font-size: 0.72rem; }
.dm-mask { letter-spacing: 0.12em; color: var(--graphite-1) !important; }
.dm-chip { padding: 4px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; color: #92400e; background: rgba(245, 158, 11, 0.14); }
.dm-chip--sky { color: #0369a1; background: rgba(14, 165, 233, 0.12); }
.dm-chip--ok { color: #047857; background: rgba(16, 185, 129, 0.14); }
.dm-chip--swap { position: relative; display: inline-grid; }
.dm-chip--swap span { grid-area: 1 / 1; }
.dm-chip--swap .b { opacity: 0; color: #0369a1; }
.dm-rows { margin: 0; display: grid; }
.dm-rows > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f0f0f2; font-size: 0.82rem; }
.dm-rows dt { color: var(--muted); }
.dm-rows dd { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; min-width: 0; }
.dm-rows code { font: 500 0.78rem var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-copy { padding: 2px 8px; border-radius: 6px; border: 1px solid #e4e4e7; font-size: 0.7rem; color: var(--text-soft); background: #fff; }
.dm-drop { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; border: 1.5px dashed #c4c4cc; background: #fff; font-size: 0.82rem; color: var(--muted); }
.dm-up { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--graphite-2); background: #f1f1f3; }
.dm-file { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 4px 10px; border-radius: 8px; color: var(--text); background: #f4f4f5; font-size: 0.8rem; }
.dm-up-row { padding: 12px 14px; margin-bottom: 10px; border-radius: 12px; background: #fff; border: 1px solid #ececef; }
.dm-up-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 0.84rem; }
.dm-up-top small { color: var(--muted); }
.dm-prog { height: 6px; margin: 9px 0 4px; border-radius: 999px; background: #ececef; overflow: hidden; }
.dm-prog--thin { height: 4px; margin: 10px 0 0; }
.dm-prog i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #4a4e57, #a9b0ba); transform-origin: left; }
.dm-hash { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 7px; font-size: 0.76rem; }
.dm-hash > span:first-child { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dm-hash em { font-style: normal; color: var(--muted); font-weight: 600; width: 58px; flex: 0 0 auto; }
.dm-hash code { font: 500 0.76rem var(--mono); color: var(--graphite-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-match { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-weight: 700; font-size: 0.7rem; color: #047857; background: rgba(16, 185, 129, 0.14); white-space: nowrap; }
.dm-stage { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 8px 0 22px; padding: 0; list-style: none; }
.dm-stage::before { content: ""; position: absolute; left: 8%; right: 8%; top: 9px; height: 2px; background: #e4e4e7; }
.dm-stage::after { content: ""; position: absolute; left: 8%; top: 9px; height: 2px; width: 67%; background: var(--graphite-1); transform-origin: left; }
.dm-stage li { position: relative; display: grid; justify-items: center; gap: 6px; font-size: 0.7rem; font-weight: 600; color: var(--muted); }
.dm-stage i { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid #d4d4d8; }
.dm-stage .done i { background: var(--graphite-grad); border-color: transparent; }
.dm-stage .now i { background: #0ea5e9; border-color: #fff; box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.25); }
.dm-stage .now span { color: #0369a1; }
.dm-count { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dm-count > div { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; background: #fff; border: 1px solid #ececef; }
.dm-count b { font-size: 1.8rem; font-weight: 800; letter-spacing: -0.02em; color: var(--graphite-3); }
.dm-count span { font-size: 0.76rem; line-height: 1.3; color: var(--muted); }
.dm-mail { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid #ececef; box-shadow: 0 16px 30px -20px rgba(9, 9, 11, 0.5); }
.dm-mail__ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #fff; background: var(--graphite-grad); flex: 0 0 auto; }
.dm-mail div { display: grid; font-size: 0.82rem; }
.dm-mail small { color: var(--muted); font-size: 0.74rem; }
.dm-report { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 14px; background: #fff; border: 1px solid #ececef; }
.dm-pdf { display: grid; place-items: center; width: 44px; height: 52px; border-radius: 8px; color: #fff; font-size: 0.7rem; font-weight: 800; background: linear-gradient(160deg, #ef4444, #b91c1c); }
.dm-report > div { display: grid; flex: 1; min-width: 0; font-size: 0.86rem; }
.dm-report small { color: var(--muted); font-size: 0.74rem; }
.dm-dl { position: relative; display: inline-grid; padding: 8px 14px; border-radius: 10px; color: #f4f4f5; background: var(--brushed), var(--graphite-grad); font-size: 0.8rem; font-weight: 600; }
.dm-dl span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 5px; }
.dm-dl .b { opacity: 0; }
.dm-note { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; padding: 11px 14px; border-radius: 11px; background: #f1f1f3; font-size: 0.8rem; color: var(--text-soft); }

/* Önizleme animasyonları: yalnız görünen ekranda çalışır (main.js .is-on'u her geçişte yeniden ekler) */
.dm.is-on .dm-type { animation: dm-type 0.6s steps(18, end) both; }
.dm.is-on .t1 { animation-delay: 0.3s; } .dm.is-on .t2 { animation-delay: 0.9s; } .dm.is-on .t3 { animation-delay: 1.5s; } .dm.is-on .t4 { animation-delay: 2.1s; }
.dm.is-on .d1, .dm.is-on .d2, .dm.is-on .d3, .dm.is-on .d4, .dm.is-on .d5, .dm.is-on .d7 { animation: dm-in 0.45s ease both; }
.dm.is-on .d1 { animation-delay: 0.3s; } .dm.is-on .d2 { animation-delay: 0.7s; } .dm.is-on .d3 { animation-delay: 1.1s; }
.dm.is-on .d4 { animation-delay: 1.8s; } .dm.is-on .d5 { animation-delay: 2.6s; } .dm.is-on .d7 { animation-delay: 4s; }
.dm.is-on .d6 { animation: dm-press 0.5s ease 3.3s both; }
.dm.is-on .p1 { animation: dm-fill 2.4s ease-in-out 0.3s both; }
.dm.is-on .p2 { animation: dm-fill 1.8s ease-in-out 1.2s both; }
.dm.is-on .p3 { animation: dm-fill 1.2s ease-in-out 1.2s both; }
.dm.is-on .dm-chip--swap .a { animation: dm-out 0.3s ease 4.4s both; }
.dm.is-on .dm-chip--swap .b { animation: dm-in 0.3s ease 4.5s both; }
.dm.is-on .dm-dl .a { animation: dm-out 0.2s ease 2.5s both; }
.dm.is-on .dm-dl .b { animation: dm-in 0.3s ease 2.6s both; }
.dm.is-on .dm-stage::after { animation: dm-fill 1.4s ease-out 0.3s both; }
.dm.is-on .dm-stage .now i { animation: dm-pulse 1.6s ease-in-out 1.6s infinite; }
@keyframes dm-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes dm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes dm-out { to { opacity: 0; } }
@keyframes dm-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dm-press { 0% { opacity: 0.55; } 60% { opacity: 1; transform: scale(0.95); } 100% { opacity: 1; transform: none; } }
@keyframes dm-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.25); } 50% { box-shadow: 0 0 0 8px rgba(14, 165, 233, 0.08); } }
/* Duraklatma (fare üzerinde / odak içeride) yalnız sonraki adıma geçişi ve süre çubuğunu durdurur; ekran içi animasyon hep tamamlanır */
@media (prefers-reduced-motion: reduce) {
  .dm *, .dm-stage::after { animation: none !important; }
  .dm-chip--swap .a, .dm-dl .a { opacity: 0; } .dm-chip--swap .b, .dm-dl .b { opacity: 1; }
}

/* ---------- Güvence: koyu grafit bölüm ---------- */
.section--dark { position: relative; overflow: hidden; color: #e4e4e7; background: var(--brushed), var(--graphite-deep-grad); }
.section--dark::before { content: ""; position: absolute; left: -10%; bottom: -40%; width: 60%; height: 100%; pointer-events: none; background: radial-gradient(closest-side, rgba(169, 176, 186, 0.12), transparent 70%); }
.section--dark .section-title { color: transparent; background: var(--silver-grad); -webkit-background-clip: text; background-clip: text; }
.section--dark .section-lead { color: #a1a1aa; text-align: left; }
.eyebrow--light { color: #c8cacf; }
.eyebrow--light::before { background: linear-gradient(90deg, #a9b0ba, #f4f4f5); }
.secure { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); column-gap: 40px; row-gap: 0; align-items: stretch; }
/* Başlık üstte; 4 kart ve tutanak aynı satırda, üst ve alt kenarları hizalı */
.secure__copy { display: contents; }
.secure__copy > .rv:first-child { grid-column: 1 / -1; max-width: 760px; }
.secure .assure { grid-column: 1; }
.secure .receipt { grid-column: 2; display: flex; flex-direction: column; }
.secure .receipt__rows { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; }
.secure .receipt__foot { margin-top: 12px; }
.assure { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.assure__card { padding: 22px; border-radius: var(--radius); background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); transition: background 0.2s, border-color 0.2s, transform 0.2s; }
.assure__card:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); transform: translateY(-2px); }
.assure__icon { width: 42px; height: 42px; margin-bottom: 14px; color: var(--graphite-4); background: var(--silver-grad); box-shadow: inset 0 1px 0 #fff, 0 10px 22px -10px rgba(0, 0, 0, 0.8); }
.assure__card h3 { margin: 0 0 8px; font-size: 1.02rem; font-weight: 700; color: #f4f4f5; }
.assure__card p { margin: 0; font-size: 0.88rem; color: #a1a1aa; }
/* Güvence animasyonları: bölüm görününce (main.js .is-in) kartlar sırayla belirir, üst kenarda ışık çizgisi açılır,
   ikonlar çizilir; ardından ikonlardan sırayla ince ışık yansıması geçer. Tutanak satırları sırayla dolar. Betik yoksa / hareket azaltmada son hâl. */
.assure__card { position: relative; overflow: hidden; }
.assure__card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(228, 231, 236, 0.75), transparent); transform-origin: left; transform: scaleX(1); opacity: 0.5; }
.assure__icon { position: relative; overflow: hidden; }
.assure__icon::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.95) 50%, transparent 65%) no-repeat; background-size: 300% 100%; background-position: 130% 0; }
.js .assure.is-in .assure__card { animation: as-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.js .assure.is-in .assure__card::before { animation: as-line 1.1s ease-out both; }
.js .assure.is-in .assure__icon svg * { stroke-dasharray: 1; stroke-dashoffset: 1; animation: as-draw 0.9s ease-out forwards; }
.js .assure.is-in .assure__icon::after { animation: as-shine 7s ease-in-out infinite; }
.js .assure.is-in .assure__card:nth-child(1), .js .assure.is-in .assure__card:nth-child(1)::before { animation-delay: 0s; }
.js .assure.is-in .assure__card:nth-child(2), .js .assure.is-in .assure__card:nth-child(2)::before { animation-delay: 0.12s; }
.js .assure.is-in .assure__card:nth-child(3), .js .assure.is-in .assure__card:nth-child(3)::before { animation-delay: 0.24s; }
.js .assure.is-in .assure__card:nth-child(4), .js .assure.is-in .assure__card:nth-child(4)::before { animation-delay: 0.36s; }
.js .assure.is-in .assure__card:nth-child(1) .assure__icon svg * { animation-delay: 0.35s; }
.js .assure.is-in .assure__card:nth-child(2) .assure__icon svg * { animation-delay: 0.5s; }
.js .assure.is-in .assure__card:nth-child(3) .assure__icon svg * { animation-delay: 0.65s; }
.js .assure.is-in .assure__card:nth-child(4) .assure__icon svg * { animation-delay: 0.8s; }
.js .assure.is-in .assure__card:nth-child(1) .assure__icon::after { animation-delay: 2s; }
.js .assure.is-in .assure__card:nth-child(2) .assure__icon::after { animation-delay: 2.5s; }
.js .assure.is-in .assure__card:nth-child(3) .assure__icon::after { animation-delay: 3s; }
.js .assure.is-in .assure__card:nth-child(4) .assure__icon::after { animation-delay: 3.5s; }
.js .receipt.is-in .receipt__rows > div { animation: as-row 0.45s ease both; }
.js .receipt.is-in .receipt__rows > div:nth-child(1) { animation-delay: 0.3s; } .js .receipt.is-in .receipt__rows > div:nth-child(2) { animation-delay: 0.42s; }
.js .receipt.is-in .receipt__rows > div:nth-child(3) { animation-delay: 0.54s; } .js .receipt.is-in .receipt__rows > div:nth-child(4) { animation-delay: 0.66s; }
.js .receipt.is-in .receipt__rows > div:nth-child(5) { animation-delay: 0.85s; } .js .receipt.is-in .receipt__rows > div:nth-child(6) { animation-delay: 1.05s; }
.js .receipt.is-in .receipt__hash .chip { animation: as-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.js .receipt.is-in .receipt__hash:nth-child(5) .chip { animation-delay: 1.35s; } .js .receipt.is-in .receipt__hash:nth-child(6) .chip { animation-delay: 1.55s; }
.js .receipt.is-in .receipt__head .chip { animation: as-stamp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.85s both; }
@keyframes as-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes as-line { from { transform: scaleX(0); opacity: 1; } 70% { opacity: 1; } to { transform: scaleX(1); opacity: 0.5; } }
@keyframes as-draw { to { stroke-dashoffset: 0; } }
@keyframes as-shine { 0% { background-position: 130% 0; } 14%, 100% { background-position: -30% 0; } }
@keyframes as-row { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes as-pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes as-stamp { from { opacity: 0; transform: scale(1.6) rotate(-8deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .assure.is-in .assure__card, .js .assure.is-in .assure__card::before, .js .assure.is-in .assure__icon svg *, .js .assure.is-in .assure__icon::after,
  .js .receipt.is-in .receipt__rows > div, .js .receipt.is-in .chip { animation: none !important; stroke-dashoffset: 0; }
}

/* ---------- SSS: solda başlık + iletişim, sağda sorular ---------- */
.qa { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.qa__intro { position: sticky; top: 72px; }
.qa__intro .section-lead { text-align: left; margin-bottom: 26px; }
.qa__contact { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: var(--glass-bg-strong); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); }
.qa__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: #f4f4f5; background: var(--brushed), var(--graphite-grad); flex: 0 0 auto; }
.qa__contact div { display: grid; gap: 2px; min-width: 0; }
.qa__contact b { font-size: 0.9rem; }
.qa__contact a { font-size: 0.9rem; font-weight: 600; color: var(--graphite-1); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(24, 24, 27, 0.25); overflow-wrap: anywhere; }
.faq { display: grid; gap: 10px; }
.faq__item { border-radius: 14px; background: var(--glass-bg-strong); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); transition: box-shadow 0.2s; }
.faq__item[open] { box-shadow: var(--glass-shadow-hover); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; padding: 14px 18px; font-weight: 600; font-size: 0.97rem; cursor: pointer; list-style: none; border-radius: 14px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary svg { width: 28px; height: 28px; padding: 5px; border-radius: 8px; color: var(--graphite-1); background: rgba(24, 24, 27, 0.05); transition: transform 0.2s; }
.faq__item[open] summary svg { transform: rotate(180deg); }
.faq__item summary:hover svg { background: rgba(24, 24, 27, 0.09); }
.faq__item p { margin: 0; padding: 0 18px 18px; font-size: 0.92rem; color: var(--text-soft); }
.faq__item p a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(24, 24, 27, 0.3); }
/* SSS animasyonları: sorular sırayla belirir (main.js .is-in); açılıp kapanma main.js ile yumuşak (yükseklik), açık soruda sol vurgu */
.faq__item { position: relative; overflow: hidden; transition: box-shadow 0.25s, background 0.25s, transform 0.25s; }
.faq__item::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--graphite-grad); transform: scaleY(0); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.faq__item[open]::before { transform: scaleY(1); }
.faq__item[open] { background: rgba(255, 255, 255, 0.95); }
.faq__item summary { transition: color 0.2s; }
.faq__item summary:hover { color: var(--graphite-3); }
.faq__item summary svg { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s; }
.faq__item.is-opening p { animation: faq-text 0.4s ease 0.08s both; }
@keyframes faq-text { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.js .faq.is-in .faq__item { animation: faq-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }
.js .faq.is-in .faq__item:nth-child(2) { animation-delay: 0.06s; } .js .faq.is-in .faq__item:nth-child(3) { animation-delay: 0.12s; }
.js .faq.is-in .faq__item:nth-child(4) { animation-delay: 0.18s; } .js .faq.is-in .faq__item:nth-child(5) { animation-delay: 0.24s; }
.js .faq.is-in .faq__item:nth-child(6) { animation-delay: 0.3s; } .js .faq.is-in .faq__item:nth-child(7) { animation-delay: 0.36s; }
.js .faq.is-in .faq__item:nth-child(8) { animation-delay: 0.42s; } .js .faq.is-in .faq__item:nth-child(9) { animation-delay: 0.48s; }
@keyframes faq-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.qa__icon { position: relative; overflow: hidden; }
.qa__icon::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%) no-repeat; background-size: 300% 100%; background-position: 130% 0; }
.js .qa__intro.is-in .qa__icon::after { animation: as-shine 6s ease-in-out 1.2s infinite; }
@media (prefers-reduced-motion: reduce) {
  .js .faq.is-in .faq__item, .faq__item.is-opening p, .js .qa__intro.is-in .qa__icon::after { animation: none !important; }
  .faq__item::before { transition: none; }
}

/* ---------- Çağrı ---------- */
.section--cta { padding-top: 88px; padding-bottom: 88px; }
.cta {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; gap: 44px;
  padding: 44px 48px; border-radius: var(--radius-lg); color: #f4f4f5;
  background: var(--brushed), var(--graphite-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 30px 60px -28px rgba(9, 9, 11, 0.7);
}
.cta::after { content: ""; position: absolute; right: -60px; top: -80px; width: 280px; height: 280px; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.12), transparent); }
.cta h2 { margin: 0 0 8px; font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.cta p { margin: 0; color: #c8cacf; font-size: 0.95rem; max-width: 560px; }
.cta p a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.4); }
.cta__actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 12px; flex: 0 0 auto; }
/* Kapanış animasyonları (main.js .is-in): kart belirir, üzerinden bir kez ışık geçer, parıltı nefes alır; metin ve düğmeler sırayla;
   Erişim Başvurusu düğmesinden ara ara ışık geçer. Betik yoksa / hareket azaltmada son hâl. */
.cta__copy { position: relative; z-index: 1; }
.cta__side { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 26px; }
.cta__sweep { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.14) 48%, rgba(255, 255, 255, 0.05) 54%, transparent 70%) no-repeat; background-size: 250% 100%; background-position: 150% 0; }
.btn--shine { position: relative; overflow: hidden; }
.btn--shine::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.9) 50%, transparent 65%) no-repeat; background-size: 300% 100%; background-position: 130% 0; }
.js .cta.rv { transform: translateY(18px) scale(0.98); }
.js .cta.rv.is-in { transform: none; }
.js .cta.is-in .cta__sweep { animation: cta-sweep 1.6s ease-out 0.35s both; }
.js .cta.is-in::after { animation: cta-breathe 6s ease-in-out 1s infinite; }
.js .cta.is-in .cta__copy h2 { animation: as-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both; }
.js .cta.is-in .cta__copy p { animation: as-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both; }
.js .cta.is-in .cta__actions .btn { animation: as-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.js .cta.is-in .cta__actions .btn:nth-child(1) { animation-delay: 0.5s; }
.js .cta.is-in .cta__actions .btn:nth-child(2) { animation-delay: 0.62s; }
.js .cta.is-in .btn--shine::after { animation: as-shine 5.5s ease-in-out 1.8s infinite; }
/* İletişim formu (kapanışın sağ sütunu; gönderim main.js → portal /api/contact) */
.cform { position: relative; z-index: 1; padding: 26px; border-radius: 18px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 18px 40px -24px rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cform__head h3 { margin: 0 0 4px; font-size: 1.06rem; font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.cta .cform__head p { color: #a9adb5; font-size: 0.85rem; }
.cform__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin-top: 18px; }
.cform__f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cform__f--wide { grid-column: 1 / -1; }
.cform__f > span { font-size: 0.78rem; font-weight: 600; color: #d4d4d8; }
.cform__f em { font-style: normal; font-weight: 500; color: #8b8f97; }
.cform input, .cform select, .cform textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(9, 9, 11, 0.28); color: #f4f4f5; font: 500 0.92rem/1.4 var(--font); transition: border-color 0.16s, box-shadow 0.16s, background 0.16s;
}
.cform select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='none' stroke='%23c8cacf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center, rgba(9, 9, 11, 0.28); }
.cform select:invalid { color: #8b8f97; }
.cform option { color: var(--text); background: #fff; }
.cform textarea { min-height: 112px; max-height: 280px; resize: vertical; }
.cform input:hover, .cform select:hover, .cform textarea:hover { border-color: rgba(255, 255, 255, 0.28); }
.cform input:focus, .cform select:focus, .cform textarea:focus { outline: none; border-color: rgba(255, 255, 255, 0.55); background-color: rgba(9, 9, 11, 0.38); box-shadow: 0 0 0 3px rgba(169, 176, 186, 0.28); }
.cform [aria-invalid="true"] { border-color: #fca5a5; }
.cform__err { font-size: 0.76rem; font-weight: 500; color: #fca5a5; }
.cform__err:empty { display: none; }
.cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cform__foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 16px; }
.cta .cform__legal { font-size: 0.78rem; color: #a9adb5; line-height: 1.5; }
.cta .cform__legal a { color: #e4e4e7; font-weight: 600; }
.cform__send { flex: 0 0 auto; }
.cform__send[disabled] { opacity: 0.7; cursor: progress; transform: none; }
.cform__status { display: none; margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 0.84rem; line-height: 1.5;
  color: #fecaca; background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(252, 165, 165, 0.3); }
.cform__status--on { display: block; }
.cform__done { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 12px 8px; outline: none; }
.cform__done[hidden] { display: none; }
.cform__done-ic { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 6px; border-radius: 50%; color: var(--ok-on-dark);
  background: rgba(16, 185, 129, 0.14); border: 1px solid rgba(110, 231, 183, 0.35); }
.cform__done-ic svg { stroke-width: 2.4; }
.cform__done h3 { margin: 0; font-size: 1.15rem; font-weight: 700; color: #fff; }
.cta .cform__done p { max-width: 340px; margin-bottom: 10px; }
.cform.is-sent .cform__done-ic { animation: as-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.js .cta.is-in .cform { animation: as-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both; }
@keyframes cta-sweep { to { background-position: -50% 0; } }
@keyframes cta-breathe { 0%, 100% { opacity: 1; transform: none; } 50% { opacity: 0.55; transform: translate(-18px, 14px) scale(1.12); } }
@media (prefers-reduced-motion: reduce) {
  .js .cta.rv { transform: none; }
  .js .cta.is-in .cta__sweep, .js .cta.is-in::after, .js .cta.is-in .cta__copy h2, .js .cta.is-in .cta__copy p, .js .cta.is-in .cta__actions .btn, .js .cta.is-in .btn--shine::after, .js .cta.is-in .cform, .cform.is-sent .cform__done-ic { animation: none !important; }
}

/* ---------- Footer ---------- */
.footer {
  color: rgba(228, 231, 236, 0.74); font-size: 0.88rem; margin-top: auto;
  background: var(--brushed-soft), var(--graphite-deep-grad); position: relative;
}
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(228, 231, 236, 0.4) 50%, transparent); }
.footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 6px 28px; flex-wrap: wrap; padding-top: 30px; padding-bottom: 30px; line-height: 1.65; }
/* Solda telif, sağda yasal bağlantılar (tek satır) */
.footer__links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.footer__links a { color: rgba(228, 231, 236, 0.74); transition: color 0.16s; }
.footer__links a:hover { color: #fff; }
/* Tek satıra sığmadığında (≤1023 px) telif ve bağlantılar ortalı iki satır; sola yığılmaz (2026-10-20) */
@media (max-width: 1023px) { .footer__inner { justify-content: center; text-align: center; } .footer__links { justify-content: center; } }

/* ---------- Duyarlı ---------- */
@media (max-width: 1020px) {
  .trust__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trust__list li:nth-child(4) { border-left: 0; }
  .trust__list li:nth-child(n+4) { border-top: 1px solid rgba(24, 24, 27, 0.07); }
  .svc-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qa { grid-template-columns: 1fr; gap: 36px; }
  .qa__intro { position: static; }
  .flow { grid-template-columns: 1fr; gap: 28px; }
  .demo { position: relative; top: 0; order: -1; }
  .flow__head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .secure { grid-template-columns: 1fr; row-gap: 32px; }
  .secure .assure, .secure .receipt { grid-column: 1; }
  .receipt { max-width: 520px; }
}
@media (max-width: 900px) {
  .nav__toggle { display: inline-flex; }
  .btn--nav { display: none; }
  .nav__links {
    position: absolute; top: calc(100% + 8px); right: 16px; z-index: 60;
    flex-direction: column; align-items: stretch; gap: 2px; min-width: 220px; padding: 8px; margin: 0;
    background: rgba(255, 255, 255, 0.97); border: 1px solid var(--glass-border); border-radius: 14px;
    box-shadow: inset 0 1px 0 var(--glass-ring), 0 18px 40px -12px rgba(24, 24, 27, 0.35);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.16s, transform 0.16s, visibility 0.16s;
  }
  .nav__links.open { opacity: 1; visibility: visible; transform: none; }
  .nav__links a { color: var(--text-soft); padding: 11px 14px; }
  .nav__links a:hover { color: var(--graphite-3); background: rgba(24, 24, 27, 0.05); }
  .nav__links .nav__links-portal { display: block; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--glass-border); border-radius: 0 0 8px 8px; font-weight: 600; color: var(--graphite-3); }
  .nav__actions { margin-left: auto; }
  .hero__inner { grid-template-columns: 1fr; gap: 44px; padding-top: 56px; padding-bottom: 104px; }
  .verify { max-width: 560px; }
  .services { grid-template-columns: 1fr; }
  .services.is-tabbed .service { grid-template-columns: 1fr; grid-template-rows: none; align-content: start; padding: 26px 24px; }
  .services.is-tabbed .service > .service__ex { grid-column: 1; grid-row: auto; margin-top: 20px; }
  .cta { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 32px 28px; }
}
@media (max-width: 420px) { .brand { --bp-h: 27px; --kure: 22px; gap: 7px; } }
@media (max-width: 640px) {
  .footer__inner { justify-content: center; text-align: center; }
  .footer__links { justify-content: center; }
  .section { padding: 64px 0; }
  .trust + .section { padding-top: 64px; }
  .section--cta { padding-top: 64px; padding-bottom: 64px; }
  .assure { grid-template-columns: 1fr; }
  .trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust__list li { padding: 16px 8px 14px; }
  .trust__list li:nth-child(n) { border-left: 0; border-top: 1px solid rgba(24, 24, 27, 0.07); }
  .trust__list li:nth-child(even) { border-left: 1px solid rgba(24, 24, 27, 0.07); }
  .trust__list li:nth-child(-n+2) { border-top: 0; }
  .svc-tabs { gap: 8px; }
  .svc-tab { padding: 10px; font-size: 0.84rem; gap: 9px; }
  .svc-tab .service__icon { width: 32px; height: 32px; }
  .steps { padding-left: 54px; }
  .flow__cta { margin-left: 54px; }
  .demo__body { height: 470px; }
  .dm__head { margin-bottom: 12px; padding-bottom: 10px; }
  .dm-seg { margin-bottom: 10px; }
  .dm-btn, .dm-check, .dm-sum, .dm-drop { margin-top: 10px; }
  .dm-toast { margin-top: 10px !important; padding: 9px 12px; font-size: 0.78rem; }
  .dm-f i { height: 32px; line-height: 30px; font-size: 0.8rem; }
  .dm { padding: 18px 16px; }
  .dm-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .dm-rows > div { grid-template-columns: 110px minmax(0, 1fr); }
  .demo__tag { display: none; }
  .dm-sum small { display: none; }
  .steps::before { left: 17px; }
  .step__no { left: -54px; width: 36px; height: 36px; }
  .hero__cta .btn { flex: 1 1 100%; }
  .hero__lead, .section-lead { text-align: left; hyphens: manual; }
  .cta__actions, .cta__actions .btn { width: 100%; }
  .cta { padding: 28px 20px; }
  .cform { padding: 20px 16px; }
  .cform__grid { grid-template-columns: minmax(0, 1fr); }
  .cform__foot { flex-direction: column; align-items: stretch; }
  .cform__send { width: 100%; }
  .verify, .receipt { padding: 18px; }
  .verify__cols { grid-template-columns: 1fr; }
  .verify__eq { margin: 0 auto; }
  .receipt__rows > div { font-size: 0.82rem; }
}

/* 404 sayfası: navbarsız, tam ekran koyu panel */
.hero--404 { min-height: calc(100vh - 68px - 64px); display: flex; align-items: center; }   /* üstte menü, altta alt bilgi */
.hero--404 .hero__inner { grid-template-columns: 1fr; }

/* Çerez bandı (31.10.2026): GNGR Labs Çerez Yönetimi bandı kendi stilini taşır (Shadow DOM); eski .cc-* kuralları kaldırıldı. */

/* ---------- Çerez Aydınlatma Metni sayfası (/cerez-aydinlatma-metni) ---------- */
.notice {
  max-width: 760px; margin: 0 auto;
  /* İçerik seçimi kapalı */
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
}
.notice h2.section-title { margin-bottom: 6px; }
.notice__back {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 24px;
  color: var(--muted); font-size: 0.88rem; font-weight: 600;
}
.notice__back:hover { color: var(--graphite-3); }
.notice__back svg { width: 16px; height: 16px; }
.notice__updated { color: var(--muted); font-size: 0.85rem; margin: 0 0 40px; }
.notice__block { margin: 0 0 36px; }
.notice__block h3 { font-size: 1.08rem; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 12px; color: var(--text); }
.notice__block p { color: var(--text-soft); font-size: 0.96rem; line-height: 1.75; margin: 0 0 14px; text-align: justify; }
.notice__block p:last-child { margin-bottom: 0; }
.notice__block a { color: var(--graphite-3); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.notice__block a:hover { color: var(--graphite-1); }

.notice__table-wrap {
  overflow-x: auto; border: 1px solid var(--glass-border); border-radius: var(--radius);
  background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow);
}
.notice__table { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 560px; }
.notice__table th, .notice__table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: top; }
.notice__table th { background: rgba(244, 244, 245, 0.7); font-weight: 700; color: var(--text); white-space: nowrap; }
.notice__table td { color: var(--text-soft); }
.notice__table tr:last-child td { border-bottom: none; }
.notice__table td:first-child { font-weight: 600; color: var(--text); white-space: nowrap; }
.footer__bk b { color: #f4f4f5; font-weight: 600; }


/* Üst çubuk (2026-10-22, kullanıcı: logonun arkasını koyulaştırmak yerine tüm çubuk aynı koyu renk). Logonun koyu metal tonları
   bu koyu zeminde ayrışır; logo dosyasına dokunulmaz (marka kuralı). */
.nav { background: var(--brushed-soft), linear-gradient(160deg, rgba(30, 31, 36, 0.97) 0%, rgba(22, 23, 27, 0.97) 50%, rgba(14, 15, 17, 0.98) 100%); }