/* usulesas — kurumsal ön yüz stil dosyası
   Tipografi: Newsreader (başlık) · Archivo (metin/UI) · IBM Plex Mono (etiket, tarih, kanun)
   Yazı tipleri /assets/css/fonts.css içinde self-host edilir (CSP: font-src 'self').
   Renk: gumrukbeyan.com marka lacivertine (#0D3B66) dayalı portal paleti.

   NOT — inline style YASAK: CSP `style-src 'self'` inline stil özniteliğini
   bloklar. Tasarımın tek seferlik yerleşim değerleri dosyanın sonundaki
   "yerleşim yardımcıları" bölümünde sınıflaştırılmıştır. */

:root {
  /* gumrukbeyan.com marka mavisi #0D3B66 üzerine kurulu portal paleti */
  --paper: #F4F7FB;
  --paper-2: #FFFFFF;
  --paper-3: #EAF2FA;
  --ink: #0D3B66;
  --ink-2: #40597A;
  --muted: #4E6884;
  --faint: #566C87;
  --ghost: #5A7089;
  --rule: #D8E3EF;
  --rule-2: #E6EDF6;
  --rule-3: #E1EAF3;
  --line-dark: #1D4E7E;
  --signal: #1272B8;
  --signal-ink: #B3261E;
  --signal-soft: #7DBCEA;
  --on-dark: #E9F1F9;
  --on-dark-2: #A9C0D8;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --wrap: 1240px;
  --pad: 32px;
  --header-h: 70px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

img, svg { max-width: 100%; display: block; }
::selection { background: var(--ink); color: var(--paper); }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--signal); }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: 14px 20px; font-size: 14px;
}
.skip:focus { left: 12px; top: 12px; color: var(--paper); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- tipografi ---------- */
.mono {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.mono--signal { color: var(--signal); }
.mono--soft { color: var(--signal-soft); }

h1, h2, h3 { margin: 0; font-weight: 400; letter-spacing: -0.018em; }

.h-hero {
  font-family: var(--serif);
  font-size: clamp(44px, 6.6vw, 82px);
  line-height: 0.97;
  letter-spacing: -0.022em;
}
.h-page {
  font-family: var(--serif);
  font-size: clamp(40px, 5.4vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.022em;
}
.h-sec {
  font-family: var(--serif);
  font-size: clamp(31px, 3.9vw, 50px);
  line-height: 1.08;
}
.h-sub {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 23px;
  line-height: 1.22;
  letter-spacing: -0.01em;
}
.h-hero em { font-style: italic; color: var(--signal); }

.lede { margin: 22px 0 0; max-width: 52ch; font-size: 18px; line-height: 1.62; color: var(--ink-2); }
.body { margin: 14px 0 0; font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.small { font-size: 13.5px; line-height: 1.6; color: var(--faint); }
.tight { max-width: 20ch; }
strong { font-weight: 600; color: var(--ink); }
.inline-link { border-bottom: 1px solid var(--rule); padding-bottom: 1px; }
.inline-link:hover { border-color: var(--signal); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.header-bar {
  height: var(--header-h);
  display: flex; align-items: center; gap: 40px;
}
.brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand:hover { color: inherit; }
.brand-mark {
  width: 28px; height: 28px; background: var(--ink); color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 19px; line-height: 1; padding-bottom: 2px;
}
.brand-word { font-family: var(--serif); font-size: 22px; letter-spacing: -0.01em; }

.nav { display: flex; align-items: center; gap: 26px; margin-left: auto; font-size: 14px; color: var(--ink-2); }
.nav a { padding: 4px 0; border-bottom: 1px solid transparent; white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--signal); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); }

.header-cta { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.menu-btn {
  display: none; margin-left: auto;
  width: 44px; height: 44px; background: none; border: 1px solid #C4D3E4;
  cursor: pointer; font-size: 17px; color: var(--ink);
}
.mobile-nav { display: none; border-top: 1px solid var(--rule); padding: 14px var(--pad) 22px; }
.mobile-nav[data-open="true"] { display: block; }
.mobile-nav a { display: block; padding: 13px 0; border-bottom: 1px solid var(--rule-3); font-size: 16px; }
.mobile-nav .header-cta { margin-top: 16px; }
.mobile-nav .header-cta .btn { flex: 1; justify-content: center; }

/* ---------- düğmeler ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; font-size: 15px; font-weight: 500; font-family: var(--sans);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.btn--sm { padding: 10px 17px; font-size: 14px; }
.btn--lg { padding: 18px 34px; font-size: 16px; }
.btn--block { width: 100%; }
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--signal); color: #fff; }
.btn--outline { border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--paper); }
.btn--quiet { border-color: #C4D3E4; color: var(--ink-2); }
.btn--quiet:hover { border-color: var(--ink); color: var(--ink); }
.btn--invert { background: var(--paper); color: var(--ink); }
.btn--invert:hover { background: var(--signal); color: #fff; }
.btn .g { font-family: var(--serif); font-size: 18px; }

/* ---------- bölüm iskeleti ---------- */
.sec { padding: 100px 0; border-top: 1px solid var(--rule); }
.sec--first { border-top: 0; padding-top: 80px; }
.sec--dark { background: var(--ink); color: var(--on-dark); }
.sec--dark .h-sec, .sec--dark h3 { color: var(--on-dark); }
.sec--dark .body, .sec--dark .lede { color: var(--on-dark-2); }
.sec--paper { background: var(--paper-2); }

.sec-grid { display: flex; flex-wrap: wrap; gap: 32px 64px; }
.sec-label { flex: 0 0 180px; }
.sec-label .num { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em; color: var(--signal); }
.sec-label .name { margin-top: 8px; font-size: 13.5px; color: var(--muted); }
.sec--dark .sec-label .num { color: var(--signal-soft); }
.sec--dark .sec-label .name { color: var(--on-dark-2); }
.sec-body { flex: 1 1 560px; min-width: 0; }

/* ---------- ızgaralar ---------- */
.grid { display: grid; gap: 24px; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--hair { gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.grid--hair > * { background: var(--paper); padding: 26px 24px 30px; }
.grid--hair.on-paper > * { background: var(--paper-2); }

.pillar .mono { margin-bottom: 16px; display: block; }

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.feature { padding: 26px 28px 30px 0; border-top: 1px solid var(--rule); }
.feature:nth-child(-n+3) { border-top-color: var(--ink); }
.feature h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.2; }
.feature p { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }

.card { border: 1px solid var(--rule); background: var(--paper-2); padding: 28px 26px 30px; }
.card--ink { border-color: var(--ink); }
.card--dark { background: var(--ink); color: var(--on-dark-2); border: 0; padding: 26px 24px 30px; }
.card--dark h2, .card--dark h3 { color: var(--on-dark); }
/* Genel `strong` kuralı mürekkep lacivertidir; koyu bantta zeminle aynı renk
   olur ve vurgulanan cümle KAYBOLUR. Koyu yüzeyde vurgu aydınlıkla yapılır. */
.card--dark strong, .sec--dark strong { color: var(--on-dark); }

/* ---------- yapar / yapmaz ---------- */
.dual { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; }
.dual-head { padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.dual-head.is-neg { border-bottom-color: #B9CADC; }
.marklist { margin: 0; padding: 0; list-style: none; }
.marklist li {
  position: relative; padding: 15px 0 15px 26px;
  border-bottom: 1px solid var(--rule-3); font-size: 15px; line-height: 1.55;
}
.marklist li::before {
  content: "+"; position: absolute; left: 0; top: 15px;
  font-family: var(--mono); font-size: 13px; color: var(--signal);
}
.marklist--neg li { color: var(--muted); }
.marklist--neg li::before { content: "−"; color: var(--ghost); }

/* ---------- süre hesabı demosu ---------- */
.calc { background: var(--paper-2); border: 1px solid var(--ink); box-shadow: 0 30px 60px -44px rgba(13,59,102,.35); }
.calc-head {
  background: var(--ink); color: var(--paper); padding: 13px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.calc-head .mono { font-size: 10.5px; color: var(--paper); }
.status { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--signal-soft); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); flex: 0 0 auto; }
.calc-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 18px; border-bottom: 1px solid var(--rule-2); margin: 0;
}
.calc-row .k {
  flex: 0 0 96px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
}
.calc-row .v { font-size: 14.5px; min-width: 0; }
.calc-row select, .calc-row input {
  flex: 1 1 auto; min-width: 0; padding: 9px 10px;
  background: var(--paper); border: 1px solid #C9D8E7; font-size: 13.5px;
  font-family: var(--sans); color: var(--ink); border-radius: 0;
}
.calc-row input[type="date"] { font-family: var(--mono); }
.calc-row select { cursor: pointer; }
.calc-out { align-items: flex-start; background: var(--paper-3); padding: 18px; }
.calc-out .k { padding-top: 8px; }
.calc-date {
  display: block; font-family: var(--serif); font-size: 34px; line-height: 1;
  letter-spacing: -0.01em; color: var(--signal); font-variant-numeric: tabular-nums;
}
.calc-alt { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }
.calc-basis { font-family: var(--mono); font-size: 13px; }
.calc-toggle {
  width: 100%; text-align: left; padding: 14px 18px; background: none; border: 0;
  border-bottom: 1px solid var(--rule-2); cursor: pointer; font-size: 13px; color: var(--ink-2);
  display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--sans);
}
.calc-toggle:hover { color: var(--signal); }
.calc-toggle .hint { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.calc-trace { margin: 0; padding: 6px 18px 14px; list-style: none; border-bottom: 1px solid var(--rule-2); }
.calc-trace[hidden] { display: none; }
.calc-trace li {
  display: flex; gap: 12px; padding: 8px 0; font-size: 13px; line-height: 1.5;
  color: var(--ink-2); border-bottom: 1px dotted #DEE8F2;
}
.calc-trace .n { flex: 0 0 18px; font-family: var(--mono); font-size: 11px; color: var(--ghost); padding-top: 2px; }
.calc-trace .t { flex: 1 1 auto; min-width: 0; }
.calc-trace .v { flex: 0 0 auto; font-family: var(--mono); font-size: 12px; color: var(--ink); font-variant-numeric: tabular-nums; }
.calc-note { margin: 0; padding: 14px 18px; font-size: 12px; line-height: 1.55; color: var(--faint); }

/* ---------- evrak akışı animasyonu ---------- */
.flow { border: 1px solid var(--line-dark); background: #082742; }
.flow-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 20px; border-bottom: 1px solid var(--line-dark);
}
.flow-replay {
  background: none; border: 1px solid var(--line-dark); color: var(--on-dark-2);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  padding: 8px 14px; cursor: pointer; white-space: nowrap;
}
.flow-replay:hover { border-color: var(--signal); color: var(--signal-soft); }
.flow-stage { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.flow-step {
  padding: 26px 24px 30px; border-right: 1px solid var(--line-dark);
  opacity: .28; transition: opacity .5s ease;
}
.flow-step:last-child { border-right: 0; }
.flow-step[data-on="true"] { opacity: 1; }
.flow-step .idx { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; color: #5E7E9E; }
.flow-step[data-on="true"] .idx { color: var(--signal-soft); }
.flow-step h3 { margin: 12px 0 0; font-size: 16px; font-weight: 600; color: var(--on-dark); }
.flow-step p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: #93AEC8; }

.flow-art { margin-top: 18px; height: 92px; position: relative; }
.doc {
  position: absolute; inset: 0 auto auto 0; width: 74px; height: 92px;
  background: #0F3358; border: 1px solid #1D4E7E; padding: 10px 8px;
  display: flex; flex-direction: column; gap: 5px;
}
.doc span { display: block; height: 3px; background: #1D4E7E; }
.doc span:nth-child(2) { width: 78%; }
.doc span:nth-child(4) { width: 60%; }
.doc span:nth-child(5) { width: 84%; }
.flow-step[data-on="true"] .doc { animation: dropIn .6s cubic-bezier(.2,.8,.3,1) both; }
@keyframes dropIn { from { transform: translateY(-16px) rotate(-3deg); opacity: 0; } to { transform: none; opacity: 1; } }

.scan { position: absolute; inset: 0; overflow: hidden; }
.scan .line {
  position: absolute; left: 0; width: 74px; height: 1px; background: var(--signal);
  box-shadow: 0 0 12px 2px rgba(46,155,224,.65); top: 0; opacity: 0;
}
.flow-step[data-on="true"] .scan .line { animation: scanY 1.6s ease-in-out infinite; }
@keyframes scanY { 0% { top: 4%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 96%; opacity: 0; } }
.scan .esas {
  position: absolute; left: 0; bottom: 8px; font-family: var(--mono); font-size: 12px;
  color: var(--on-dark); background: rgba(46,155,224,.20); padding: 3px 7px;
  border-left: 2px solid var(--signal); opacity: 0;
}
.flow-step[data-on="true"] .scan .esas { animation: fadeUp .5s .7s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.chips { display: flex; flex-direction: column; gap: 8px; }
.chip {
  font-family: var(--mono); font-size: 11.5px; color: var(--on-dark);
  border: 1px solid #1D4E7E; padding: 6px 9px; display: flex; justify-content: space-between; gap: 10px;
  opacity: 0;
}
.chip b { color: var(--signal-soft); font-weight: 400; }
.flow-step[data-on="true"] .chip { animation: fadeUp .45s ease both; }
.flow-step[data-on="true"] .chip:nth-child(2) { animation-delay: .18s; }
.flow-step[data-on="true"] .chip:nth-child(3) { animation-delay: .36s; }

.approve { display: flex; flex-direction: column; gap: 10px; }
.approve .deadline { font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--signal); font-variant-numeric: tabular-nums; }
.approve .btnfake {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--signal); color: var(--signal-soft); padding: 8px 12px; text-align: center;
}
.flow-step[data-on="true"] .approve .btnfake { animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { background: transparent; } 50% { background: rgba(46,155,224,.16); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .flow-step { opacity: 1 !important; }
  .doc, .scan .line, .scan .esas, .chip, .approve .btnfake { animation: none !important; opacity: 1 !important; }
}

/* ---------- künye / tanım listeleri ---------- */
.kv { border-top: 1px solid var(--ink); }
.kv-row { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 16px 0; border-bottom: 1px solid var(--rule-3); }
.kv-row dt { flex: 0 0 200px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); padding-top: 3px; }
.kv-row dd { flex: 1 1 260px; margin: 0; font-size: 15.5px; }
.mini-row { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--rule-2); font-size: 14.5px; }
.mini-row:last-child { border-bottom: 0; }
.mini-row .k { color: var(--faint); }
.mini-row .v { text-align: right; }
.mini-row .v.pending { color: var(--ghost); }

/* ---------- yasal doküman ---------- */
.doc-layout { display: flex; flex-wrap: wrap; gap: 40px 64px; align-items: flex-start; }
.doc-toc { flex: 0 0 210px; position: sticky; top: 100px; }
.doc-toc .mono { display: block; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.doc-toc a { display: block; padding: 11px 0; border-bottom: 1px solid var(--rule-3); font-size: 14px; color: var(--ink-2); }
.doc-toc a:hover { color: var(--signal); }
.doc-main { flex: 1 1 520px; min-width: 0; max-width: 68ch; }
.doc-block { padding: 32px 0; border-bottom: 1px solid var(--rule-3); }
.doc-block:first-child { padding-top: 0; }
.doc-block h2 { font-family: var(--serif); font-weight: 500; font-size: 26px; line-height: 1.2; }
.doc-block p { margin: 14px 0 0; font-size: 16.5px; line-height: 1.68; color: var(--ink-2); }
.doc-block--hi { background: var(--ink); color: #C3D7E9; padding: 28px; border: 0; margin: 32px 0; }
.doc-block--hi h2 { color: var(--on-dark); }
.doc-block--hi p { color: #C3D7E9; }
.doc-block--hi strong { color: var(--signal-soft); }
.notice { margin: 24px 0 0; padding: 18px 20px; background: var(--paper-2); border: 1px solid var(--rule); font-size: 14px; line-height: 1.6; color: var(--muted); }

/* ---------- SSS ---------- */
.faq { border-top: 1px solid var(--ink); max-width: 74ch; }
.faq-item { border-bottom: 1px solid var(--rule-3); }
.faq-q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 22px 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--serif); font-size: 21px; line-height: 1.3; color: var(--ink);
}
.faq-q:hover { color: var(--signal); }
.faq-q .sign { font-family: var(--mono); font-size: 16px; color: var(--signal); flex: 0 0 auto; line-height: 1.5; }
.faq-a { padding: 0 0 24px; max-width: 62ch; }
.faq-a[hidden] { display: none; }
.faq-a p { margin: 0; font-size: 16px; line-height: 1.68; color: var(--ink-2); }

/* ---------- formlar ---------- */
.form { border: 1px solid var(--ink); background: var(--paper-2); padding: 32px 30px 36px; }
.form-or {
  display: flex; align-items: center; gap: 14px; margin: 26px 0 24px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ghost);
}
.form-or::before, .form-or::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.field { display: block; margin-bottom: 16px; }
.field > .label {
  display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 7px;
}
.field .opt { text-transform: none; letter-spacing: 0; color: var(--ghost); }
.field input {
  width: 100%; padding: 13px 14px; background: var(--paper); border: 1px solid #C9D8E7;
  font-size: 15px; font-family: var(--sans); color: var(--ink); border-radius: 0;
}
.field input:focus { background: #fff; outline: 2px solid var(--signal); outline-offset: -1px; }
.field input[aria-invalid="true"] { border-color: var(--signal-ink); background: #FDF2F1; }
.field .err { display: block; margin-top: 6px; font-size: 12.5px; color: var(--signal-ink); }
.field .err:empty { display: none; }
.field .hint { display: block; margin-top: 6px; font-size: 12.5px; color: var(--faint); }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.consent {
  display: flex; gap: 12px; align-items: flex-start; margin-bottom: 24px;
  padding: 16px; background: var(--paper); border: 1px solid var(--rule); cursor: pointer;
}
.consent input { margin-top: 3px; width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--signal); cursor: pointer; }
.consent span { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.form-foot { margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--rule-2); font-size: 13.5px; line-height: 1.6; color: var(--faint); }
.success { border: 1px solid var(--ink); background: var(--paper-2); padding: 40px 34px 44px; animation: fadeUp .35s ease both; }
.success .tick { width: 44px; height: 44px; background: var(--signal); color: #fff; display: grid; place-items: center; font-family: var(--serif); font-size: 24px; line-height: 1; }
.success h2 { margin: 24px 0 0; font-family: var(--serif); font-size: 32px; line-height: 1.15; }
.masked {
  margin-top: 20px; display: flex; align-items: center; gap: 4px; padding: 14px 16px;
  background: var(--paper); border: 1px dashed #B9CADC; font-family: var(--mono); font-size: 13.5px;
  color: var(--muted); overflow: hidden;
}
.masked .blur { letter-spacing: .16em; }

/* ---------- uygulama önizlemesi ---------- */
.app-frame { border: 1px solid var(--ink); background: var(--paper-2); box-shadow: 0 40px 80px -60px rgba(13,59,102,.4); overflow: hidden; }
.app-bar { display: flex; align-items: center; gap: 14px; padding: 12px 18px; background: var(--ink); color: var(--on-dark-2); }
.app-bar .brand-word { font-size: 17px; color: var(--paper); }
.app-bar .bal { margin-left: auto; display: flex; gap: 22px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; }
.app-bar .bal b { display: block; color: var(--paper); font-weight: 400; font-size: 14px; margin-top: 4px; letter-spacing: 0; }
.app-body { display: grid; grid-template-columns: 210px 1fr; }
.app-side { border-right: 1px solid var(--rule); padding: 20px 0; background: var(--paper); }
.app-side a, .app-side span { display: block; padding: 11px 20px; font-size: 14px; color: var(--ink-2); }
.app-side a[aria-current="true"], .app-side span[aria-current="true"] { color: var(--ink); border-left: 2px solid var(--signal); padding-left: 18px; background: var(--paper-2); }
.app-main { padding: 26px 26px 32px; min-width: 0; }
.queue { border-top: 1px solid var(--ink); }
.queue-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 16px 0; border-bottom: 1px solid var(--rule-3); }
.queue-row .file { flex: 0 0 150px; font-family: var(--mono); font-size: 12.5px; }
.queue-row .act { flex: 1 1 200px; font-size: 14.5px; }
.queue-row .due { flex: 0 0 auto; font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.queue-row .due.hot { color: var(--signal); }
.tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--rule); padding: 4px 8px; color: var(--faint); flex: 0 0 auto;
}
.tag.warn { border-color: var(--signal); color: var(--signal); }

/* ---------- 404 ---------- */
.notfound { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; padding-block: 90px; }
.notfound .code { font-family: var(--serif); font-size: clamp(90px, 18vw, 200px); line-height: .86; letter-spacing: -0.04em; color: var(--signal); }

/* ---------- CTA şeridi ---------- */
.cta { display: flex; flex-wrap: wrap; gap: 36px 60px; align-items: flex-end; }
.cta-text { flex: 1 1 520px; min-width: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: var(--on-dark-2); padding: 72px 0 30px; }
.footer-grid { display: flex; flex-wrap: wrap; gap: 44px 60px; }
.footer-brand { flex: 1 1 320px; min-width: 0; }
.footer-brand .brand-mark { background: var(--paper); color: var(--ink); }
.footer-brand .brand-word { color: var(--on-dark); font-size: 21px; }
.footer-brand p { margin: 18px 0 0; max-width: 40ch; font-size: 14px; line-height: 1.6; }
.footer-col { flex: 0 1 170px; }
.footer-col .mono { font-size: 10.5px; color: var(--signal-soft); }
.footer-col nav { margin-top: 16px; display: flex; flex-direction: column; gap: 11px; font-size: 14px; }
.footer-legal {
  max-width: var(--wrap); margin: 52px auto 0; padding: 22px var(--pad) 0;
  border-top: 1px solid var(--line-dark); font-size: 12.5px; line-height: 1.7; color: var(--on-dark-2);
}

/* ---------- duyarlı ---------- */
@media (max-width: 1080px) {
  :root { --pad: 22px; }
  .nav, .header-bar .header-cta { display: none; }
  .menu-btn { display: grid; place-items: center; }
  .sec { padding: 72px 0; }
  .sec--first { padding-top: 56px; }
  .sec-label { flex: 1 1 100%; }
  .doc-toc { position: static; flex: 1 1 100%; }
  .app-body { grid-template-columns: 1fr; }
  .app-side { border-right: 0; border-bottom: 1px solid var(--rule); display: flex; overflow-x: auto; padding: 0; }
  .app-side a, .app-side span { white-space: nowrap; padding: 14px 16px; }
  .app-side a[aria-current="true"], .app-side span[aria-current="true"] { border-left: 0; border-bottom: 2px solid var(--signal); padding-left: 16px; }
  .flow-step { border-right: 0; border-bottom: 1px solid var(--line-dark); }
}

@media (max-width: 520px) {
  .calc-row { flex-wrap: wrap; }
  .calc-row .k { flex: 1 1 100%; }
  .kv-row dt { flex: 1 1 100%; }
}

@media print {
  .site-header, .site-footer, .actions, .calc-toggle, .flow-replay { display: none; }
  body { background: #fff; }
  .sec { padding: 24px 0; }
}

/* ==========================================================================
   YERLEŞİM YARDIMCILARI — tasarımdaki inline style'ların birebir karşılığı
   CSP `style-src 'self'` inline stili bloklar; değerler DEĞİŞTİRİLMEDEN
   sınıflaştırıldı. Her sınıfın yanında hangi ekranda kullanıldığı yazılıdır.
   ========================================================================== */

/* --- boşluk / genişlik --- */
.m-0    { margin: 0; }
.mt-8   { margin-top: 8px; }
.mt-16  { margin-top: 16px; }
.mt-18  { margin-top: 18px; }
.mt-20  { margin-top: 20px; }
.mt-22  { margin-top: 22px; }
.mt-24  { margin-top: 24px; }
.mt-26  { margin-top: 26px; }
.mt-34  { margin-top: 34px; }
.mt-36  { margin-top: 36px; }
.mt-44  { margin-top: 44px; }
.mt-48  { margin-top: 48px; }
.mt-52  { margin-top: 52px; }
.mb-20  { margin-bottom: 20px; }
.mb-24  { margin-bottom: 24px; }
.pt-70  { padding-top: 70px; }
.mw-18ch { max-width: 18ch; }
.mw-19ch { max-width: 19ch; }
.mw-54ch { max-width: 54ch; }
.mw-66ch { max-width: 66ch; }
.no-shrink { flex: 0 0 auto; }

/* --- bölüm varyantları (ana sayfa dışı sayfaların başlık bloğu) --- */
.sec--head  { padding-bottom: 66px; border-bottom: 1px solid var(--rule); }
.sec--flush { border-top: 0; }

/* --- iki sütunlu yerleşimler --- */
.hero-split { display: flex; flex-wrap: wrap; gap: 72px 60px; align-items: flex-start; }
.hero-copy  { flex: 1 1 500px; min-width: 0; }
.hero-aside { flex: 1 1 420px; min-width: 0; }
.split-40   { display: flex; flex-wrap: wrap; gap: 40px 56px; align-items: flex-start; }
.split-48   { display: flex; flex-wrap: wrap; gap: 48px 64px; align-items: flex-start; }
.col-340 { flex: 1 1 340px; min-width: 0; }
.col-360 { flex: 1 1 360px; min-width: 0; }
.col-420 { flex: 1 1 420px; min-width: 0; }
.col-460 { flex: 1 1 460px; min-width: 0; }

/* --- tipografi varyantları --- */
.mono-row    { display: flex; align-items: center; gap: 10px; margin: 0; }
.mono--ink   { color: var(--ink); }
.mono--plain { letter-spacing: .02em; text-transform: none; font-size: 12.5px; }
.h-page--sm  { font-size: clamp(38px, 4.6vw, 58px); }
.h-sec--sm   { font-size: clamp(30px, 3.6vw, 44px); }
.h-sub--20   { font-size: 20px; margin-bottom: 6px; }
.h-sub--21   { font-size: 21px; }
.h-sub--24   { font-size: 24px; }
.h-card      { font-family: var(--sans); font-size: 16px; font-weight: 600; }
.h-card-lg   { font-family: var(--serif); font-size: 30px; line-height: 1.16; }
.body--sm  { font-size: 14.5px; }
.body--15  { font-size: 15px; }
.body--16  { font-size: 16px; }
.body--17  { font-size: 17px; }
.body--doc { font-size: 16.5px; line-height: 1.68; }
.lede--form { max-width: 44ch; font-size: 17.5px; }
.p-lead-serif { margin: 0; font-family: var(--serif); font-size: 24px; line-height: 1.45; }

/* --- ince çizgili not blokları --- */
.note-top {
  margin-top: 40px; padding-top: 22px;
  border-top: 1px solid var(--rule); max-width: 52ch;
}
.note-top--form {
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--rule);
  max-width: 46ch; font-size: 15px;
}
.rule-h { border: 0; border-top: 1px solid var(--rule-2); margin: 28px 0; }

/* --- koyu bilgi bandı (ana sayfa "kaynak ve iz") --- */
.note-band {
  margin-top: 28px; display: flex; flex-wrap: wrap;
  gap: 14px 24px; align-items: flex-start;
}
.note-band__text {
  flex: 1 1 320px; margin: 0;
  font-size: 15px; line-height: 1.6; color: #C3D7E9;
}

/* --- koyu yan not kartı (kayıt / giriş) --- */
.card--dark-note { margin-top: 34px; max-width: 46ch; padding: 22px 24px; }
.card--dark-note p { margin: 14px 0 0; font-size: 14.5px; line-height: 1.6; }
.card--dark-pad { padding: 34px 30px 38px; }
.card-dark-p { margin: 16px 0 26px; font-size: 16px; line-height: 1.65; }

/* --- künye kartı --- */
.card--tight { padding-bottom: 12px; }

/* --- iletişim döşemeleri --- */
.tile { display: flex; flex-direction: column; padding: 34px 30px 38px; }
.tile-cta { margin-top: auto; align-self: flex-start; }
.tile-link { margin-top: auto; align-self: flex-start; font-size: 14.5px; }
.tile-mail {
  margin-top: auto; align-self: flex-start;
  font-family: var(--mono); font-size: 15px;
  border-bottom-color: var(--ink); padding-bottom: 3px;
}

/* --- SSS alt CTA --- */
.card-cta {
  margin-top: 44px; display: flex; flex-wrap: wrap;
  gap: 18px 28px; align-items: center;
}
.card-cta__text { flex: 1 1 300px; margin: 0; font-size: 16px; }

/* --- yasal doküman: son blokta çizgi olmaz --- */
.doc-block--last { border-bottom: 0; }

/* --- gizli adres maskesi --- */
.masked .lead { color: var(--ink); }

/* --- uygulama önizlemesi --- */
.app-bar__path { color: #5E7E9E; letter-spacing: .1em; }
.app-bar .bal b.bal--hi { color: var(--signal-soft); }

/* --- sunucu tarafı form geri bildirimi (tasarımda istemci tarafındaydı) --- */
.alert {
  margin: 0 0 20px; padding: 14px 16px;
  border: 1px solid var(--signal-ink); background: #FDF2F1;
  font-size: 14px; line-height: 1.55; color: var(--signal-ink);
}
.alert--ok { border-color: var(--ink); background: var(--paper-3); color: var(--ink); }

/* --- ızgarada boş kalan son hücre ---
   `.grid--hair` çizgileri, kap zemininin (rule) 1 px boşluklardan görünmesiyle
   çizilir. Hücre sayısı sütun sayısına bölünmediğinde son satırdaki boşluk bu
   zemini BLOK hâlinde gösterir — çizgi değil, gri bir kutu. Dolgu hücresi onu
   kağıt zeminle kapatır. Pseudo-element `> *` dolgusunu almadığı için tek
   sütunlu yerleşimde 0 yükseklikte kalır ve görünmez. */
.grid--fill::after { content: ""; background: var(--paper-2); }

/* ==========================================================================
   SÖZLEŞME VE POLİTİKA METİNLERİ
   Dizin (/sozlesmeler) + tek belge (/sozlesmeler/{slug}).
   Metin gövdesi Markdown'dan üretilir; bu yüzden biçim etiketlerinin
   (h2..h6, p, ul, ol, table, blockquote) tamamı burada karşılanır.
   ========================================================================== */

/* --- dizin --- */
.doc-list { border-top: 1px solid var(--ink); margin-bottom: 44px; }
.doc-list__head { padding: 16px 0 10px; display: block; }
.doc-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px;
  padding: 18px 0; border-top: 1px solid var(--rule-3);
}
.doc-row:hover { color: inherit; }
.doc-row:hover .doc-row__title { color: var(--signal); }
.doc-row__main { flex: 1 1 420px; min-width: 0; }
.doc-row__title { display: block; font-family: var(--serif); font-size: 21px; line-height: 1.25; }
.doc-row__sub { display: block; margin-top: 5px; font-size: 14px; color: var(--muted); }
.doc-row__meta { flex: 0 0 auto; display: flex; align-items: baseline; gap: 14px; }
.doc-row__date { font-family: var(--mono); font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }

/* --- belge künyesi --- */
.doc-meta { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--rule); }
.doc-meta > div { min-width: 0; }
.doc-meta dt {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint);
}
.doc-meta dd { margin: 5px 0 0; font-size: 15px; }
.doc-meta__sha { font-size: 12.5px; color: var(--muted); word-break: break-all; }

/* --- metin gövdesi (Markdown çıktısı) --- */
.doc-body { max-width: 72ch; }
.doc-body h2 {
  font-family: var(--serif); font-weight: 500; font-size: 27px; line-height: 1.2;
  margin: 46px 0 0; padding-top: 26px; border-top: 1px solid var(--rule-3);
}
.doc-body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.doc-body h3 { font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.25; margin: 32px 0 0; }
.doc-body h4, .doc-body h5, .doc-body h6 { font-size: 15px; font-weight: 600; margin: 24px 0 0; }
.doc-body p { margin: 14px 0 0; font-size: 16.5px; line-height: 1.7; color: var(--ink-2); }
.doc-body ul, .doc-body ol { margin: 14px 0 0; padding-left: 22px; }
.doc-body li { margin-top: 8px; font-size: 16.5px; line-height: 1.65; color: var(--ink-2); }
.doc-body strong { color: var(--ink); }
.doc-body hr { border: 0; border-top: 1px solid var(--rule-3); margin: 34px 0 0; }
.doc-body blockquote {
  margin: 20px 0 0; padding: 14px 18px;
  border-left: 3px solid var(--signal); background: var(--paper-3);
}
.doc-body blockquote p { margin: 0; font-size: 16px; }
.doc-body code {
  font-family: var(--mono); font-size: 14px;
  background: var(--paper-3); padding: 2px 5px;
}
.doc-body .tbl-wrap { margin-top: 20px; overflow-x: auto; }
.doc-body table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.doc-body th {
  text-align: left; padding: 10px 12px; background: var(--paper-3);
  border-bottom: 1px solid var(--rule); font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); font-weight: 400; white-space: nowrap;
}
.doc-body td { padding: 10px 12px; border-bottom: 1px solid var(--rule-3); color: var(--ink-2); vertical-align: top; }

@media (max-width: 700px) {
  .doc-row__meta { flex: 1 1 100%; }
  .doc-body h2 { font-size: 23px; }
}