/* ===========================================================================
   bilirkisiportal.net — tanıtım sayfası
   serkangungor.online ile aynı palet (Agents: 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; }
.brand__sgf { height: 64px; width: auto; max-width: none; }
.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 → serkangungor.online footer'ıyla aynı yükseklik) */
.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__sgf { height: 56px; } }
@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 Yönetim Aracı (cookie-consent.js) — alt banner, cam efekti ---------- */
/* Tercih yapılana kadar sayfa kullanılamaz: banner'ın arkasında tıklamaları
   yutan görünmez/hafif tonlu bir "scrim" var (tam ekran karanlık modal değil,
   banner'ın kendisi hâlâ sayfanın altında bir şerit). body de kaydırılamaz. */
body.cc-lock { overflow: hidden; }

/* Scrim üç class ile kontrol edilir (bkz. cookie-consent.js open()):
   "is-open" görsel koyulaşma, "is-blocking" gerçek tıklama/kaydırma engeli
   (Aydınlatma Metni sayfası DIŞINDA ikisi birden eklenir). Aydınlatma Metni
   sayfasında ise scrim TAM EKRAN açılmaz (sayfa gölgeli/karanlık görünmesin
   diye) — bunun yerine SADECE "is-local": scrim, banner'ın arkasını kaplayan
   dar bir şerde küçülür (yüksekliği JS'te banner'ın gerçek yüksekliğine göre
   ayarlanır) — böylece banner'ın cam efekti, arkasında yine koyu bir zemin
   olduğu için ana sayfadakiyle AYNI görünür, ama üstteki metin/navbar
   etkilenmez. */
.cc-scrim {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(24, 24, 27, 0.22);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
}
.cc-scrim.is-open { opacity: 1; }
.cc-scrim.is-blocking { pointer-events: auto; }
/* Yükseklik JS'ten (.style.height) geliyor; burada sadece üstteki "top: 0"ı
   iptal edip alta yaslıyoruz. */
.cc-scrim.is-local { top: auto; }

/* Gerçek "buzlu cam" (glassmorphism): düşük opaklıklı beyaz + güçlü blur —
   arkadaki sayfa bulanık ama seçilebilir renk lekeleri hâlinde hissedilir,
   düz/opak bir yüzey değil. Üstte ince, açık renkli bir "cam kenarı" var. */
.cc-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  display: none;
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: saturate(200%) blur(22px);
  backdrop-filter: saturate(200%) blur(22px);
  border-top: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 -16px 40px rgba(24, 24, 27, 0.16);
}
.cc-banner.is-open { display: block; -webkit-animation: cc-slide-up 0.25s ease; animation: cc-slide-up 0.25s ease; }
@keyframes cc-slide-up {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: none; }
}

/* Tercihleri Yönet ekranı: alt banner'ın DEVAMI değil, ekranın ortasında
   ayrı bir pencere gibi açılan bağımsız bir modal (kullanıcı isteği:
   "sayfanın altında değil ortada, ayrı bir ayar penceresi gibi"). */
.cc-modal {
  position: fixed; top: 50%; left: 50%; z-index: 1001;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px)); max-height: 82vh; overflow-y: auto;
  display: none;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(200%) blur(22px);
  backdrop-filter: saturate(200%) blur(22px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(24, 24, 27, 0.28);
}
.cc-modal.is-open {
  display: block;
  -webkit-animation: cc-pop-in 0.22s cubic-bezier(0.16,1,0.3,1);
  animation: cc-pop-in 0.22s cubic-bezier(0.16,1,0.3,1);
}
@keyframes cc-pop-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.94); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.cc-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 22px 24px;
  max-height: 78vh; overflow-y: auto;
}
.cc-inner--modal { max-width: none; max-height: none; padding: 26px 26px 24px; overflow: visible; }

/* Basit görünüm: solda metin, sağda alt alta sıralı butonlar. .cc-copy ve
   .cc-actions--stack flex-start ile aynı Y'de başlıyor, ama paragrafın
   satır yüksekliği (line-height 1.65) glifin üstünde boşluk bıraktığı için
   "W" harfinin GERÇEK MÜREKKEP (ink) üst pikseli kutunun üstünden aşağıda
   kalıyor — buton kutusunun üst çizgisiyle aynı hizaya gelsin diye .cc-copy
   üst dolgu payı alıyor. 21px değeri DOM kutu metrikleriyle değil, render
   edilmiş piksellerin taranmasıyla (Inter, 0.96rem/1.65) kalibre edildi —
   font/boyut değişirse piksel bazında yeniden ölçülmeli, satır-yüksekliği
   hesabına güvenilmemeli (o hesap ~4px hatalı çıkıyor). */
.cc-layout { display: flex; align-items: flex-start; gap: 32px; }
.cc-copy { flex: 1 1 auto; min-width: 0; padding-top: 21px; }
.cc-actions--stack {
  display: flex; flex-direction: column; gap: 8px;
  flex: 0 0 220px; margin-top: 0;
}
.cc-actions--stack .cc-btn { width: 100%; }

.cc-title { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 12px; color: var(--text); }
.cc-intro { color: var(--text-soft); font-size: 0.96rem; line-height: 1.65; margin: 0; text-align: justify; hyphens: auto; }
.cc-link { color: var(--graphite-3); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.cc-link:hover { color: var(--graphite-1); }

.cc-cat { padding: 16px 0; border-top: 1px solid rgba(24, 24, 27, 0.10); }
.cc-cat:first-of-type { border-top: none; padding-top: 0; }
.cc-cat__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cc-cat__name { font-weight: 700; font-size: 0.96rem; color: var(--text); }
.cc-cat__desc { color: var(--text-soft); font-size: 0.86rem; line-height: 1.55; margin: 8px 0 0; }

.cc-switch { position: relative; display: inline-flex; flex: 0 0 auto; width: 42px; height: 24px; cursor: pointer; }
.cc-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cc-switch__track {
  position: absolute; inset: 0; border-radius: 999px; background: rgba(24, 24, 27, 0.18);
  transition: background 0.16s;
}
.cc-switch__thumb {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(24, 24, 27, 0.3); transition: transform 0.16s;
}
.cc-switch input:checked ~ .cc-switch__track { background: var(--graphite-grad); }
.cc-switch input:checked ~ .cc-switch__track .cc-switch__thumb { transform: translateX(18px); }
.cc-switch input:disabled ~ .cc-switch__track { background: var(--graphite-grad); opacity: 0.55; cursor: not-allowed; }
.cc-switch--disabled { cursor: not-allowed; }

.cc-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 28px; }
/* Tercihleri Yönet penceresinin sol alt köşesinde küre logo (düğmeler sağda kalır).
   36px: 40px'lik düğme bandının dikey ortasında; gölge her yöne eşit (aşağı düşen gölge logoyu aşağıda gösteriyordu).
   Efekt: birkaç saniyede bir logonun YALNIZCA kendi şekli üzerinde (mask) soldan sağa ince ışık yansıması. */
.cc-logo { position: relative; display: block; width: 36px; height: 36px; margin-right: auto; align-self: center; flex: 0 0 auto; }
.cc-logo img { display: block; width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 0 3px rgba(24, 24, 27, 0.18)); }
.cc-logo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.95) 50%, transparent 62%) no-repeat;
  background-size: 300% 100%; background-position: 130% 0;
  -webkit-mask: url("/img/logo-80.png?v=1") center / contain no-repeat;
          mask: url("/img/logo-80.png?v=1") center / contain no-repeat;
  -webkit-animation: cc-logo-shine 5.5s ease-in-out 1.2s infinite; animation: cc-logo-shine 5.5s ease-in-out 1.2s infinite;
}
@keyframes cc-logo-shine { 0% { background-position: 130% 0; } 22%, 100% { background-position: -30% 0; } }
@-webkit-keyframes cc-logo-shine { 0% { background-position: 130% 0; } 22%, 100% { background-position: -30% 0; } }
@media (prefers-reduced-motion: reduce) { .cc-logo::after { -webkit-animation: none; animation: none; display: none; } }

/* Tek tip, "renksiz" buton stili — Tümünü Kabul Et diğerlerine göre görsel
   olarak öne çıkarılmıyor (kullanıcıyı belirli bir seçime yönlendirmemek için
   bilinçli tercih). Sadece Tercihler ekranındaki "Seçimi Kaydet" (hangi
   seçim yapılırsa yapılsın kaydeden nötr bir onay eylemi) accent renkli. */
.cc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px; border-radius: 999px; font-weight: 600; font-size: 0.9rem;
  font-family: var(--font); cursor: pointer; white-space: nowrap;
  background: rgba(255, 255, 255, 0.4); color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform 0.16s, background 0.16s, border-color 0.16s, color 0.16s;
}
.cc-btn:hover { background: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.7); transform: translateY(-1px); }
.cc-btn--primary { background: var(--brushed), var(--graphite-grad); color: #fff; border-color: rgba(255, 255, 255, 0.08); }
.cc-btn--primary:hover { background: var(--brushed), var(--graphite-grad); border-color: rgba(255, 255, 255, 0.22); }

@media (max-width: 760px) {
  .cc-layout { flex-direction: column; gap: 16px; }
  .cc-actions--stack { flex: none; width: 100%; }
  /* Dar ekranda metin butonların ÜSTÜNDE yığılıyor — masaüstündeki yan-yana
     hizalama boşluğuna artık gerek yok. */
  .cc-copy { padding-top: 0; }
}
@media (max-width: 480px) {
  .cc-inner { padding: 18px 18px; }
  .cc-actions { flex-direction: column-reverse; align-items: stretch; }
  .cc-logo { align-self: flex-start; margin: 4px 0 0; }
}
/* Karar verildikten sonra tercihleri yeniden açmak için sol alt köşede
   sabit duran ikon (bkz. cookie-consent.js buildFab()). Banner açıkken
   [hidden] ile gizlenir. z-index banner/scrim'den (999/1000) düşük tutuldu
   — zaten aynı anda ikisi birden görünmüyor, çakışma riski yok. */
.cc-fab {
  position: fixed; left: 20px; bottom: 20px; z-index: 900;
  width: 48px; height: 48px; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--brushed), var(--graphite-grad); color: #eceef1; border: 1px solid rgba(255, 255, 255, 0.1); cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), var(--shadow-lg);
  transition: transform 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
.cc-fab:hover { color: #fff; transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), var(--shadow-lg), 0 0 0 3px rgba(74, 78, 87, 0.18); }
.cc-fab svg { width: 24px; height: 24px; }
/* display:flex yukarıda [hidden]'ın varsayılan UA kuralını (display:none) eziyordu
   — fab, banner/modal açıkken de görünür kalıyordu. Açıkça geri kazanılıyor. */
.cc-fab[hidden] { display: none; }
@media (max-width: 480px) {
  .cc-fab { left: 14px; bottom: 14px; width: 44px; height: 44px; }
  .cc-fab svg { width: 22px; height: 22px; }
}

/* ---------- Çerez Aydınlatma Metni sayfası (/cerez-aydinlatma-metni) ---------- */
.notice {
  max-width: 760px; margin: 0 auto;
  /* İçerik seçimi kapalı (serkangungor.online'daki sayfayla aynı) */
  -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; }


/* Çerez tercih penceresi: onay kimliği (2026-10-19, KVKK ispatı) */
.cc-id { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 10px; margin: 14px 0 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: rgba(244, 244, 245, 0.6); }
.cc-id__et { font-size: 0.78rem; font-weight: 600; color: var(--text-soft); }
.cc-id__kod { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.86rem; font-weight: 600; letter-spacing: 0.04em; user-select: all; }
.cc-id__kopya { font: inherit; font-size: 0.78rem; font-weight: 600; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--text-soft); cursor: pointer; }
.cc-id__not { grid-column: 1 / -1; font-size: 0.76rem; color: var(--text-soft); opacity: 0.85; }

/* Ü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%); }